如何用同一脚本生成的HTML内容替换当前脚本标记

How to replace Current script tag with HTML contents generated by the same script

本文关键字：脚本 替换 HTML 何用同      更新时间：2023-09-26

我想用同一脚本生成的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中显示不同的内容

请帮助我

在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";
   }
}

对于那些试图实现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/了解在脚本中包含库的正确方法。

document.currentScript自2011年起在Firefox上可用，2013年在Chrome上可用。

document.currentScript 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>

不幸的是，正在运行的JavaScript文件不知道它在哪里运行。如果在脚本中使用document.write（），那么write函数将发生在脚本运行的任何位置，这将是实现您想要的内容的一种方法，但不需要替换内容，也不需要对封装的DIV.执行任何操作

我真的无法想象在构建页面时会有如此严格的限制——当然，如果页面是动态的，你可以为DIV元素生成标识符，或者以更传统的方式加载内容？

为什么不使用Smarty？

http://www.smarty.net/

您可以在Smarty模板中使用javascript，也可以只使用内置函数。

看看就知道了http://www.smarty.net/crash_course

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>

如果你不介意脚本标记保留在原地，你可以使用document.write（）.这样简单的东西

myfile1.js:

document.write("<p>some html generated inline by script</p>");

它会做你需要的事情。

相关文章：