JQuery 和框架 - $(document).ready 不起作用答案

【问题标题】：JQuery and frames - $(document).ready doesn't workJQuery 和框架 - $(document).ready 不起作用
【发布时间】：2008-10-21 08:46:35
【问题描述】：

我有一个页面，其中包含一些 js 和 jQuery 代码，并且运行良好。但不幸的是，我所有的网站都非常旧，并且使用框架。因此，当我将页面加载到框架中时，$(document).ready() 不会启动。

我的框架集如下所示：

<frameset rows="79,*" frameBorder="1" frameSpacing="1" bordercolor="#5996BF" noresize> 
    <frame name="header" src="Operations.aspx?main='Info.aspx'" marginwidth="0" marginheight="0" scrolling="no" noresize frameborder="0">
    <frame name="main" src="Info.aspx" marginwidth="0" marginheight="0" scrolling="auto" noresize frameborder="0">      
</frameset>

我的页面被加载到main 框架中。我该怎么办？

【问题讨论】：

你的 JavaScript 在哪里？在“主”框架中还是在框架集中？

标签： javascript jquery frames

【解决方案1】：

我已经尝试过另一条评论中提到的方法：

$("#frameName").ready(function() {
    // Write you frame on load javascript code here
} );

它对我不起作用。

这样做了：

$("#frameName").load( function() {
     //code goes here
} );

即使事件不会很快触发 - 它也会等到图像和 css 也加载完毕。

【讨论】：

为清楚起见，应该是 $("#frameName")。
选择器应该是：$("frame[name='main']") 而不是 $("#frameName")。

【解决方案2】：

我知道这是一个老话题。但为了帮助一些到达此页面的人，这是我的解决方案：

$($("#frameName")[0].contentWindow.document).ready(function() {
    // Write you frame onready code here
});

【讨论】：

【解决方案3】：

我认为这是我在 iframe 中使用 DOMContentLoaded 时遇到的类似问题。

我写了a blog post about it。

【讨论】：

【解决方案4】：

如果您想为您的框架触发 onload 事件，请按照以下步骤操作：

将id 和name 分配给每个<frame> 标签。确保id 和name 属性值相同。

使用以下代码触发框架的onload 事件：

$("frameName").ready(function() { 
  // Write your frame onload code here
}

【讨论】：

【解决方案5】：

以下内容也对我有用：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script>
$(window.parent.frames[0].document).ready(function() {
    // Do stuff
});
</script>

[0] 表示它是文档中的第一帧，[1] 表示第二帧，依此类推。如果您无法控制标记，这将特别好，并且它仍在使用准备好的文档。

【讨论】：

【解决方案6】：

您是否尝试将 jQuery 代码放在 Info.aspx 页面中？

【讨论】：

@BrianG 框架源是Operations.aspx?main='Info.aspx

【解决方案7】：

我为这篇文章工作了很长时间......这是我的解决方案。

test.html

<!DOCTYPE HTML>
<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>

    <script>        
      document.write('<frameset><frame name="frame_content" id="frame_content"></frame></frameset>');

      $('#frame_content').attr('src', 'test2.html');
      $('#frame_content').load(function()
      {
        if('${"#header"}' != '') {
          $("#header", frame_content.document).remove();
        }
      });
      if($('#frame_content').complete) $('#frame_content').trigger("load");
    </script>

</head>
</html>

test2.html

<!DOCTYPE HTML>
<html>

  <head>
  </head>

  <body>
    <div id="header">You will never see me, cause I have been removed!</div>
  </body>
</html>

【讨论】：

【解决方案8】：

不确定您要做什么，但我有一个更老的经典 asp 应用程序，它在框架外运行，而且我最近添加了 jQuery 功能，它运行良好。 $(document).ready() 可以在一个框架内正常工作，但是如果您希望在另一个框架中引用 DOM，则必须使用 Frame 的 onload 事件来让您知道框架的 DOM 何时加载。诚然，我使用了 iFrame，但概念应该是相同的。

【讨论】：

【解决方案9】：

我不知道这是否是最好的解决方案，但是当我删除 $(document).ready() 并保留其主体时，一切正常。

【讨论】：

【解决方案10】：

无需修改标记。只需修复选择器。应该是：

$("frame[name='main']").ready(function(){..});

不是

$("#frameName").ready(function(){..});

注意：jQuery 就绪事件似乎触发了多次。确保你的逻辑没问题。

【讨论】：

【解决方案11】：

这个答案可能会迟到，但这个回复可能会帮助像我这样的人......

这可以通过原生 Javascript 代码来完成 -

ifrm2 = var ifrm2 = document.getElementById('frm2');
if (ifrm2.contentDocument.readyState == 'complete') {
  //here goes the code after frame fully loaded
}

 //id = frm2 is the id of iframe in my page

【讨论】：

【解决方案12】：

没有理由不调用$(document).ready()。确保您的页面包含对jquery.js 的包含。尝试用一个空的 HTML 页面做一个简单的测试，然后发出一个警报，看看是否还有其他问题。

如果您尝试在包含框架定义的 HTML 页面中使用它，请记住那里没有文档，您必须使用

【讨论】：