如何将 <script> 放在框架集文档的“正文”中？答案

【问题标题】：How to put a <script> in the "body" of a frameset document?如何将 <script> 放在框架集文档的“正文”中？
【发布时间】：2016-07-03 04:15:47
【问题描述】：

通常我们将 JavaScript <script> 标签放在 HTML 文档的底部，就在结束 </body> 标签之前，这样做的好处是在 DOM and some more things 中的所有元素都已经可用之后执行它们。

但是，我使用的是frame document¹，它确实有一个<frameset> 而不是<body> 标签。我不想将它们放在文档的<head> 中，因为它们无法立即访问³ 下面的 DOM 元素。我也不想在标准正文标签中使用<iframe>s⁴。我试过了

<head>
  <title>Framesets are interesting</title>
</head>
<frameset cols="50%,50%">
  <frame id="frame-a" src="a.html">
  <frame id="frame-b" src="b.html">
  <script type="text/javascript">
    console.log("hello world!");
    console.log(document.getElementById("frame-a")); // this is what I'm after
  </script>
</frameset>

然而，脚本根本没有执行，它甚至没有出现在 DOM 检查器中。当然，<frameset> 可能只包含<frame> 和<noframes> 标签。但是，真的没有办法让脚本在 <frame> 标记之后执行吗？

仅供参考，将它们放在</frameset> like it's sometimes done with <body>s 之后也不起作用。

_{1：是的，我知道它们已被弃用。它们只是我的项目的自然选择²，一个整洁的并排视图，显示两个文档并以复杂的方式将它们滚动在一起。

2：……我以前从未使用过它们，所以我想试一试。

3：这就是我最终得到的结果，毕竟 onload 处理程序是微不足道的。问题仍然存在，我很好奇。

4：工作正常，但需要复杂的 CSS 样式}

【问题讨论】：

@jfriend00：我不想将脚本添加到框架中，我想将其添加到框架集文档中。
我认为<frameset> 只是假设包含<frame> 或<frameset> 标签。
@jfriend00：是的，这似乎是我的尝试没有成功的原因。有没有办法解决这个问题？
看来你已经知道答案了我的朋友……
您能否创建一个仅包含您的脚本的大小为零的帧并将该帧添加为最后一帧？如果框架知道它们所在的结构并且在同一个域上，它们都可以通过脚本相互引用。您仍然会遇到加载时间问题，因为您必须等到所有帧都加载完毕才能访问其中的 DOM。

标签： javascript html frames frameset script-tag

【解决方案1】：

在这里解决了类似的问题：Dynamically set frame src using javascript

<head>
  <title>Framesets are interesting</title>
  <script type="text/javascript">
  function LoadPage(){
    console.log("hello world!");
    console.log(document.getElementById("frame-a")); // this is what I'm after
  }
  </script>
</head>
<frameset cols="50%,50%" onload="LoadPage();">    
  <frame id="frame-a" src="a.html">
  <frame id="frame-b" src="b.html">
</frameset>

【讨论】：

【解决方案2】：

<script> 元素只能出现在<head> 元素或<body> 元素中。它不能作为<frameset> 元素的子元素出现； <frameset> 只能包含 <frame> 元素、<noframes> 元素或其他 <frameset> 元素。见Transitional DTD：

<!ELEMENT FRAMESET - - ((FRAMESET|FRAME)+ & NOFRAMES?) -- window subdivision-->

通常，浏览器很乐意将元素插入到它们不属于的其他元素中，完全无视 DTD 所说的，因为 DTD 只是一个规则手册，但这并不总是发生（例如，你永远不能将任何其他流元素放入 HTMLParagraphElement 无论您多么努力），因此如果浏览器拒绝将 HTMLScriptElement 放入 HTMLFrameSetElement 中，很可能就是这个原因。

任何变通方法都包括将<script> 元素放置在框架集的<head> 元素中，或在其中一个框架内。（您也可以在<noframes> 元素中放置<script> 元素，因为<noframes> 与<body> 具有相同的内容模型，但这显然无法解决您的问题。）

【讨论】：

【解决方案3】：

您可以通过插入带有数据 URI 的框架来放置脚本：

<head>
  <title>Framesets are interesting</title>
</head>
<frameset cols="50%,50%">
  <frame id="frame-a" src="a.html">
  <frame id="frame-b" src="b.html">
  <frame src="data:text/html,<script type='text/javascript'>with(parent) {
    console.log('hello world!');
    console.log(document.getElementById('frame-a'));
  }</script>">
</frameset>

当然，您需要小心使用引号，并且脚本将在另一个领域中运行。您可以使用parent 或top 访问外部文档的window。

【讨论】：