javascript - 如何插入脚本标签并通过src执行响应？

Question

我有一个脚本标记，它通过 src 调用远程 JavaScript 代码片段，并将其写入页面，从而在该过程中呈现一个横幅。

我正在寻找一种调用脚本或通过 JavaScript 插入脚本的方法。现在看起来像这样:

<div id="<?php print $banner_id; ?>" class="banner-responsive <?php print $breakpoints; ?>">
  <script src="<?php print $url; ?>"></script>
</div>

这是横幅 vendor 提供的首选方法。我正在寻找一种更像这样的实现方法:

<div class="banner">
  <div id="<?php print $banner_id; ?>">
    <script type="text/javascript">
      function banner_load(){
        var s = document.createElement('script');
        s.type = 'text/javascript';
        s.src = '<?php print $url; ?>';
        var x = document.getElementById('<?php print $banner_id; ?>');
        x.parentNode.appendChild(s);
      }
      if (window.attachEvent)
        window.attachEvent('onload', banner_load);
      else
        window.addEventListener('load', banner_load, false);
    </script>
  </div>
</div>

这种作品。它插入脚本标签，并调用远程 URL，但它不会像示例 1 中那样执行收到的 JS 片段，因此横幅不会出现。有没有办法让我随意执行脚本src？

src 响应可能是什么样子:

document.write("<a target='_blank' href='http://domain/?options'><img src='http://domain/whateever-930x180px.jpg' alt='Click here' /></a>");

<小时/>

我想这样做，这样我就可以根据预定义的断点在特定时刻切换横幅。你会怎么做呢？有什么想法吗？

<小时/>

更新:我无法控制输出。它是外部横幅 vendor 。我认为这是不可能的？

Answer 1

您无法动态加载使用 document.write() 的 JavaScript并得到你想要的结果。

动态加载的 JavaScript 在 DOM 加载后运行。当document.write()在 DOM 加载后使用，它会清除整个文档并开始一个新的空文档。因此，它不会做你想做的事。

如果您想动态加载 Javascript，则需要使用 DOM 操作(例如 document.createElement() 和 elem.appendChild() )将横幅插入现有 DOM，而不是使用 document.write() 。 document.write()仅当它与顺序加载的 javascript 内嵌或通过 <script> 完成时，才对此类问题有用。标记中的标签(不是通过动态加载的 JavaScript)。