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

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

  •  5
  • Bergi  · 技术社区  · 8 年前

    通常我们将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 回复  |  直到 7 年前
        1
  •  5
  •   BoltClock Alan H.    8 年前

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

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

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

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

        2
  •  1
  •   Community Erin Dees    7 年前

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

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