代码之家 › 专栏 › 技术社区 › Bergi

如何在框架集文档的“正文”中放置<script>?

script-tag frameset frames html javascript

5

Bergi · 技术社区 · 9 年前

通常我们将JavaScript <script> 标签位于HTML文档底部,就在关闭之前 </body> 标记,好处是在DOM中所有元素都可用后执行它们 and some more things .

然而 我正在使用 frame document ^1. 它确实有一个 <frameset> 而不是 <body> 标签我不想把它们放进 <head> 因为他们不能立即访问下面的DOM元素 ^3. 。我不想使用 <iframe> 在标准的身体标签中 ^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检查器中。当然,a <框架集> 只能包含 <frame> 和 <noframes> 标签。但是 真的没有办法让脚本在 <帧> 标签

仅供参考,将其置于 </frameset> like it's sometimes done with <body> s 也不起作用。

_{1: 是的,我知道他们不受欢迎。他们只是自然的选择
^2.
对于我的项目,一个整洁的并排视图,显示两个文档并以复杂的方式将它们滚动在一起。

2: 我以前从没用过,所以我想试试。

3: 这就是我最终得到的结果,毕竟一个onload处理程序是微不足道的。问题仍然存在,

我很好奇。

4: 工作正常,但需要复杂的CSS样式}

3 回复 | 直到 8 年前

1

5

BoltClock 9 年前

A. <script> 元素只能出现在 <head> 元素或 <body> 要素它不能显示为 <frameset> 要素一 <框架集> 只能包含 <frame> 元素, <noframes> 元素或其他 <框架集> 元素。请参阅 Transitional DTD :

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

通常,浏览器很乐意将元素插入到不属于它们的其他元素中,完全无视DTD的说法,因为DTD只是一本规则书,但这并不总是发生(例如,你永远不能将任何其他流元素放入HTMLParagraphElement中 不管你怎么努力 ),所以如果浏览器拒绝在HTMLFrameSetElement中放置HTMLScriptElement,这可能就是原因所在。

任何变通方法都需要将 <脚本> 元素 <头部> 元素或帧之一内。(您也可以将 <脚本> 中的元素 <无帧> 元素自 <无帧> 具有与相同的内容模型 <车身> ,但由于显而易见的原因,这并不能解决您的问题。)

2

1

Community CDub 8 年前

类似的问题在这里得到了解决: 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>

3

1

Oriol 8 年前

您可以通过插入具有数据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 外部文档的。