javascript 如何用同一脚本生成的 HTML 内容替换当前脚本标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6109150/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to replace Current script tag with HTML contents generated by the same script
提问by ajay
I want to replace the current script tag with the HTML contents generated by the same script. That is, my Page is
我想用相同脚本生成的 HTML 内容替换当前脚本标记。也就是说，我的页面是
<html>
<body>
<div>
<script src="myfile1.js"></script>
</div>
<div>
<script src="myfile1.js"></script>
</div>
</body>
</html>
Inside each .js file corresponding html contents are generated. I want to put the contents as the innerHTML of the parent div. But can't set id for the parent div because the page is not static. So the current script tag must be replaced with the HTML content. How can I do this?
在每个 .js 文件中会生成相应的 html 内容。我想把内容作为父div的innerHTML。但是不能为父 div 设置 id，因为页面不是静态的。所以当前的脚本标签必须替换为 HTML 内容。我怎样才能做到这一点？
For each script tag src is the same. So can't identify with src. These scripts displays some images with text randomly. Scripts are the same but displays different contents in divs on loading
对于每个脚本标签 src 是相同的。所以无法识别src。这些脚本随机显示一些带有文本的图像。脚本相同，但在加载时在 div 中显示不同的内容
Please help me
请帮我
采纳答案by atlavis
try inside of myfile1.js:
在 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";
}
}
回答by thealexbaron
This is a great question for those trying to implement a JSONP widget. The objective is to give the user the shortest possible amount of code.
对于那些试图实现 JSONP 小部件的人来说，这是一个很好的问题。目标是为用户提供尽可能短的代码量。
The user prefers:
用户更喜欢：
<script type="text/javscript" src="widget.js"></script>
Over:
超过：
<script type="text/javscript" src="widget.js"></script>
<div id="widget"></div>
Here's an example of how to achieve the first snippet:
这是如何实现第一个片段的示例：
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
Have a look at: http://alexmarandon.com/articles/web_widget_jquery/for the correct way to include a library inside of a script.
请查看：http: //alexmarandon.com/articles/web_widget_jquery/，了解在脚本中包含库的正确方法。
回答by VonDequen
Why not use Smarty?
为什么不使用Smarty？
You can use javascript in Smarty templates, or just use built-in functions.
您可以在 Smarty 模板中使用 javascript，或者只使用内置函数。
Just take a look at http://www.smarty.net/crash_course
回答by John Green
poof-- old answer gone.
噗——旧答案不见了。
Based on your last edit, here's what you want to do:
根据您上次的编辑，这是您想要执行的操作：
<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>
回答by M1ke
Unfortunately a running JavaScript file is not aware of where it is running. If you use document.write() in the script, the write function will take place wherever the script runs, which would be one way to accomplish what you want, but without replacing the contents or being able to perform any actions on the enclosing DIV.
不幸的是，正在运行的 JavaScript 文件不知道它在哪里运行。如果您在脚本中使用 document.write()，写入函数将在脚本运行的任何地方发生，这将是完成您想要的操作的一种方法，但不会替换内容或无法对封闭的 DIV 执行任何操作.
I can't really envisage a situation where you'd have such stringent restrictions on building a page - surely if the page is dynamic you could generate identifiers for your DIV elements, or load content in a more traditional manner?
我真的无法想象您对构建页面有如此严格的限制的情况——当然，如果页面是动态的，您可以为 DIV 元素生成标识符，或者以更传统的方式加载内容？
回答by rciq
If you don't mind the script tag remaining in place you can use something as simple as document.write().
如果您不介意保留脚本标签，您可以使用像 document.write() 这样简单的东西。
myfile1.js:
myfile1.js：
document.write("<p>some html generated inline by script</p>");
It will do exactly what you need.
它将完全满足您的需求。
