我想将当前脚本标记替换为由同一脚本生成的HTML内容。 也就是说,我的页面是
<html>
<body>
<div>
<script src="myfile1.js"></script>
</div>
<div>
<script src="myfile1.js"></script>
</div>
</body>
</html>
在每个.js文件中生成相应的html内容。我想将内容作为父div的innerHTML。但是无法为父div设置id,因为页面不是静态的。因此,当前脚本标记必须替换为HTML内容。我怎么能这样做?
对于每个脚本标记,src是相同的。所以无法用src识别。这些脚本显示 一些随机文字的图像。脚本是相同的,但在加载时显示div中的不同内容
请帮帮我
答案 0 :(得分:4)
尝试myfile1.js:
var scripts = document.getElementsByTagName( "script" );
for ( var i = 0; i < scripts.length; ++ i )
{
if ( scripts[i].src == "myfile1.js" )
{
scripts[i].parentNode.innerHTML = "new content";
}
}
答案 1 :(得分:3)
对于那些试图实现JSONP小部件的人来说,这是一个很好的问题。目标是为用户提供尽可能短的代码。
用户更喜欢:
<script type="text/javscript" src="widget.js"></script>
在:
<script type="text/javscript" src="widget.js"></script>
<div id="widget"></div>
以下是如何实现第一个代码段的示例:
TOP OF DOCUMENT<br />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
// inside of widget.js
document.write('<div id="widget"></div>');
$(document).ready(function() {
$.getJSON('http://test.com?remote_call=1', function(data) {
$('#widget').html(data);
});
});
<br />BOTTOM OF DOCUMENT
请查看:http://alexmarandon.com/articles/web_widget_jquery/,了解在脚本中包含库的正确方法。
答案 2 :(得分:0)
poof - 旧答案消失了。
根据您的上一次修改,以下是您要执行的操作:
<html>
<head>
<!-- I recommend getting this from Google Ajax Libraries
You don't need this, but it makes my answer way shorter -->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function getRandomContent(){
// I expect this is the contents of your current script file.
// just package it into a function.
var rnd = Math.random();
return "[SomeHtml]";
}
$('.random').each(idx, el){
$(this).html(getRandomHtmlContent());
});
});
</script>
</head>
<body>
<div class="random">
</div>
<div class="random">
</div>
</body>
</html>
答案 3 :(得分:0)
不幸的是,正在运行的JavaScript文件并不知道它在哪里运行。如果在脚本中使用document.write(),则写入函数将在脚本运行的任何位置进行,这将是实现所需内容的一种方法,但不替换内容或能够对封闭的DIV执行任何操作
我无法真正设想一种情况,即您对构建页面有如此严格的限制 - 当然,如果页面是动态的,您可以为DIV元素生成标识符,或以更传统的方式加载内容吗?
答案 4 :(得分:0)
为什么不使用Smarty?
您可以在Smarty模板中使用javascript,或只使用内置函数。
即可答案 5 :(得分:0)
document.currentScript
自2011年以来在Firefox上可用,2013年以来在Chrome上可用。
document.currentScript documentation at MDN
<!DOCTYPE html>
<meta charset="UTF-8">
<title>currentScript test</title>
<h1>Test Begin</h1>
<script>
document.currentScript.outerHTML = "blah blah";
</script>
<h1>Test End</h1>
答案 6 :(得分:-1)
如果您不介意脚本标记保留在原位,您可以使用像document.write()这样简单的内容。
myfile1.js:
document.write("<p>some html generated inline by script</p>");
它将完全满足您的需求。