logo标签列表

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

javascripthtml
5

我想用相同脚本生成的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中显示不同的内容。
请帮助我。
7个回答
5

请在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";
   }
}
myfile1.js在那个时候已经完成了它需要做的事情。你可以直接将它删除，不会有任何影响。它不会删除全局变量或未记录的文档写入内容。 - John Green
“scripts [i].parentNode” 返回 <div> 标签。要更改内容，您可以使用 innerHTML 或 DOM 函数。 - atlavis
如果您始终确信脚本在运行时位于DOM中，则这是一个不错的解决方案。但是，如果假设在文档加载后添加了脚本标记，并且该脚本标记在另一个脚本标记之前添加，那么您该如何处理呢？ - kocytean
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/，了解正确的将库包含在脚本中的方法。
1

document.currentScript 自 2011 年在 Firefox 上，2013 年在 Chrome 上就已经可用。

MDN 上的 document.currentScript 文档

<!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>

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>
0

很遗憾，正在运行的JavaScript文件不知道它在哪里运行。如果您在脚本中使用document.write()，则write函数将在脚本运行的任何地方发生作用，这是实现您想要的一种方式，但无法替换内容或对封闭DIV执行任何操作。

我真的无法想象您会有这样严格的限制来构建页面的情况 - 如果页面是动态的，您肯定可以为DIV元素生成标识符，或以更传统的方式加载内容吧？

0
-1

如果你不介意脚本标签保留在原地，你可以使用像document.write()这样简单的方法。

myfile1.js:

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

它将完全满足您的需求。

1
我认为他的意思是，如果你有<div><script src="s.js"></script></div>并且s.js文件是 document.write("<p>new content</p>")，那么你将获得 <div><p>新内容</p></div> - 非常简单。 - atlavis
@John Green - PageSpike：先生，这个想法非常基础，我认为它不需要任何代码。当您想要一个脚本在您放置它的位置精确地呈现某些内容时，更不用说这种需求的原因了，document.write就是最好的选择。无论如何，在下面的帖子中也有完全相同的建议。为了您自己的一致性，请也将其投票否决。 - rciq
@John：不，它仍然存在。显然，每个人都能看出你对document.write的布尔恶意从何而来。我可以说我来自你附近的一个地方，但我非常确定你既不理解问题，也不理解解决方法，更不知道它如何等同于查找脚本的父级并将HTML添加到其中。就个人而言，我不在乎被踩票数，但我只希望你不会给那些真正相信你和你随机迷信评论的新手带来太多伤害。 - rciq
下面唯一的帖子是关于Smarty的。我认为我已经找到了解决方案，因为它事后被修改成了我的一个真正的克隆。我来这里的目的是帮助人们。这并不意味着要用他们需要的代码来纵容他们，因为其中还有更多的东西。我对你的代码有意见，因为似乎作者一开始就试图做的就是这个，这也是我一开始遇到问题的原因。但我离题了...我有些过火了，我道歉。 - John Green
似乎我们的帖子以不同的顺序排序。我指的是M1ke的答案，他说document.write可以做到。再次强调作者需求的合理性。我曾经说过最好回答实际提出的问题。每个发布在这里的代码背后通常都有太多故事，所以我根本不费心揭示为什么需要这样或那样的东西。假设作者不介意保留脚本标记而不是删除它们，document.write（无论其野蛮的外观如何）将只执行他想要的操作。 - rciq
为了支持这种方法，想象一下一个月后的情况，由于某些我们无法预料或改变的原因，有人需要在脚本执行的地方编写带有JavaScript的HTML。他在搜索引擎中找到了这个问题，但是他不会找到如何做到这一点，而是会找到如何使用jQuery按类名将一些内容放入2个div中的方法。 - rciq
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接