如何将<脚本>放在框架集文档的“正文”中

How to put a <script> in the "body" of a frameset document?

本文关键字：文档 正文 框架 脚本      更新时间：2023-09-26

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

但是，我使用的是框架文档1，它确实具有<frameset>而不是<body>标签。我不想将它们放在文档的<head>，因为它们无法立即访问3 以下的 DOM 元素。而且我也不想在标准车身标签中使用<iframe> s 4。我试过了

<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>之后，就像有时使用 <body> s 一样也不起作用。

1：是的，我知道它们已被弃用。它们只是我的项目的自然选择2，一个整洁的并排视图，显示两个文档并以复杂的方式将它们滚动在一起。
2: ...而且我以前从未使用过它们，所以我想尝试一下。
3：这就是我最终得到的，毕竟加载处理程序是微不足道的。问题仍然存在，我很好奇。
4：工作正常，但需要复杂的CSS样式

<script>元素只能出现在<head>元素或<body>元素中。它不能显示为<frameset>元素的子元素;<frameset>只能包含<frame>元素、<noframes>元素或其他<frameset>元素。请参阅过渡 DTD：

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

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

任何解决方法都涉及将<script>元素放置在框架集的<head>元素或其中一个框架中。（您也可以将<script>元素放置在<noframes>元素中，因为<noframes>具有与<body>相同的内容模型，但由于显而易见的原因，这并不能解决您的问题。

类似的问题在这里得到了解决： 使用 javascript 动态设置帧 src

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

您可以通过插入带有数据 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。

相关文章：