将脚本添加到包含 document.write 的脚本不会执行

Question

我们正在使用一个使用 ajax 和 jquery 等 (Netsuite) 的网络程序。我想更改页面上的某些内容并尝试使用 document.ready 和 window.load 来获取页面上加载的外部脚本。我试图在头部和身体中加载外部脚本..但内容没有写入。外部文件查找特定的 div id，然后为其添加一些代码。它永远不会起作用，因为页面本身会动态加载，而我正在寻找的 div 会在页面的其余部分完成时加载。所以window.load等永远不会工作......

最后，我在程序本身中加载零件，并尝试在其中简单地编写外部脚本文件。现在这个外部文件里面有一个简单的document.write，所以很简单。换句话说，脚本位于页面正文中的 html 代码中间。 （我知道这是一种糟糕的做法，但我必须尝试一些方法才能让它发挥作用......）

根据萤火虫，它将外部文件写入它应该在的位置（检查！），萤火虫向我显示该文件的内容（检查！），但是......它永远不会“写”到页面上......

该文件仅包含以下内容：

document.write('<div id="shpblk" style="border:2px solid #ffa500;border-radius:7px;color:#000066;margin:5px;padding:5px;text-align:left;"><img border="0" width="12" height="12" src="/images/icons/store/icon_exclamation2c.gif">Hazardous conditions blahblah...  Potential delays and disruptions can be anticipated.</div>');

我错过了什么？

编辑：需要进一步澄清...：

情况：我必须能够不时在页面上放置一段 html，然后创建一条消息。

环境：我所拥有的是一个页面，它首先加载页眉和页脚（在单独的文件中设置），然后需要一秒钟左右才能加载页面的其余部分。据我了解，这个“页面的其余部分”是用特定代码编写的，类似于 javascript/jquery。

我可以做的是：编辑页眉和页脚的文件，然后将 javascript 放入其中以对页面的其余部分进行修改。我可以访问一些包含“页面其余部分”部分和片段的文件，但这是一大堆意大利面条。

我尝试过的： 由于我希望灵活地处理需要放入页面的 html，因此我希望在另一个站点上创建一段 javascript 或 html 或其他任何内容，并让“环境”获取该代码。我可以用 javascript 或 iframe 做到这一点。但由于它是一个安全区域 (https)，​​我认为最好使用 javascript 文件而不是 iframe。所以....

我创建了 javascript 文件并在正常环境中试用了它，我确信它会工作......它就像一个魅力。但是当我在前面提到的“环境”中尝试这个时，我正在撞墙......

javascript 文件中包含 document.ready jquery 语句，它会将 html div 添加到页面上现有的 div 中。 这样它会加载页面并编写页面.. 很容易。

但是.. 由于首先加载页眉和页脚（包括外部脚本文件），然后是页面的其余部分，因此脚本检查的 div 不知何故尚不存在。所以我尝试了 window.load 而不是 document.ready。结果相同。 现在，它只会在我刷新页面时出现。所以可能有办法让它刷新页面，但我只希望这是最后一次尝试。

然后我试着看看我是否可以通过更改脚本来解决这个问题，而不是使用 document.ready，它只会执行一个简单的 javascript document.write 语句。 然后我在页面正文中间调用脚本（我把它放在页面中间加载的文件之一中）。我知道这不是我通常会做的事情，但无论如何都想尝试一下。所以....我会有这样的事情：

<div id="block1">
  <div id="block2">stuff here<div>
  <script type="text/javascript" src="https://someotherdomain.com/include.js" ></script>
  <div id="block3">stuff here<div>
  <div id="block4">stuff here<div>
</div>

现在，当我运行此程序时，我没有收到任何错误，但该 js 文件的内容没有做任何事情。在萤火虫中，它向我显示了该文件的内容..所以我认为它正在被读取。 但我不知道它为什么不运行。

再次.. 回到“正常”实践：我尝试过 window.load，因为这会在页面加载后运行语句，但是.. 就像我之前说的，我感觉它构建了（中间）以某种方式浏览此页面，我的脚本在此之前运行；它找不到要添加到的 div (block3)。每当我停止在脚本中运行页面时，它所依赖的 div 还不存在...

我希望这是有道理的......

Answer 1

解决方案

要使外部脚本文件按预期工作，OP 需要使用异步脚本标签来加载它，如下所示：

<script type="text/javascript" src="include.js" ></script>

然而，该文件包含一个 document.write() 语句，这通常是要避免的。更好的选择是从文件中删除 document.write() 并将其保存为纯 HTML 文件。然后可以使用 jQuery 安全地加载它：

$("#include1").load("include.html");

（需要将目标 DIV 添加到应加载内容的页面。）

---

详情

这个问题没有告诉我们外部文件是如何包含在页面上的。如果没有这些信息，就很难理解问题或提供解决方案......这可能就是这个问题没有得到解答的原因。

然而，让我们假设脚本正在使用 JavaScript 或 jQuery 在客户端注入到页面中。如果这是真的，那么如果没有以正确的方式完成，它将失败。

让我们看看我们可以将脚本添加到页面的一些方法：

这些脚本标签都会失败，因为文件包含document.write语句，并且脚本是异步加载的。

 <script type="text/javascript" src="include.js" async ></script>
 <script type="text/javascript" src="include.js" defer ></script> 
 <script type="text/javascript" src="include.js" async defer ></script> 

浏览器确实会加载文件，但会报告：

在“文档”上执行“写入”失败：无法写入 从异步加载的外部脚本到文档中，除非 它是显式打开的。

这种 jQuery 很有效。它加载脚本，但 document.write 隐式调用 document.open，这会擦除页面的原始内容。这可能不是 OP 想要的。

$.getScript('include.js'); 

只要 document.write 在加载时执行，即不是稍后调用的内部函数，此同步方法就可以工作。所以这对于 OP 来说是一个可能的解决方案。

 <script type="text/javascript" src="include.js" ></script>