Question

我的网站上有一堆jQuery，我建立了一个正常的网站，带有标题，侧边栏和主要内容。尽管我的抗议活动，我的经理已经决定将标题，侧边栏和主要内容转换为不同的框架，如<frame>标记而非iframe。显然这会导致很多问题。

其中一个是我的jQuery在调用某些类时似乎已经坏了。如

$('.date')

我意识到现在我必须找到一种不同的方式来做我的所有选择器，并尝试用

来挖掘帧内容

$('#mainFrame')

但是返回带有#document的框架，我不确定如何在html中挖掘。

我尝试过用“

”来尝试失败

$('#mainFrame').find('html')

或

$('#mainFrame').content('html')

任何帮助都会很精彩，让我免于撞到桌子上。

编辑：不使用普通的javascript，我正在使用jQuery。

HTML看起来像这样。请记住，这不是我的想法或代码，所以请不要评判我......我无法改变这一点，只是尝试使用它。

<frameset rows="52,*" cols="*" frameborder="no" border="0" framespacing="0">
    <frame src="" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="Top" />

    <frameset rows="*" cols="235,*" framespacing="0" frameborder="no" border="0">
    <frame src="" name="leftFrame" scrolling="Yes" noresize="noresize" id="leftFrame" title="Left" />

    <frame src='' name='mainFrame' id='mainFrame' title='Main' />

</frameset>

<body>
<noframes>
</body>
</noframes>

Answer 1

首先，您必须更改HTML代码，删除中间的“框架集”。

<html> 
<head>
    <script type="text/javascript">
        window.onload = function () {
            var frame=document.getElementById("mainFrame"); 
            var innerDoc = frame.contentDocument || frame.contentWindow.document; 

            console.log(innerDoc);
        };
    </script>
</head>

<frameset rows="52,*" cols="*" frameborder="no" border="0" framespacing="0">
    <frame src="test.html" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="Top" />

    <frame src="test.html" name="leftFrame" scrolling="Yes" noresize="noresize" id="leftFrame" title="Left" />

    <frame src="test.html" name='mainFrame' class='mainFrame' id='mainFrame' title='Main' />


</frameset>
</html>

现在要查找ID为“mainFrame”的框架内容，您可以将其添加到HTML的开头：

<script type="text/javascript">
    window.onload = function () {
        var frame=document.getElementById("mainFrame"); 
        var innerDoc = frame.contentDocument || frame.contentWindow.document; 

        console.log(innerDoc);
    };
</script>

Answer 2

请为选择器尝试以下代码：

$( ".iframe_Class_name" ).contents().find( ".class_inside_this_iframe" )

经过测试的完全活跃的样本：

 $( "iframe" ).contents().find( "button" ).click(function()
  {//do some magic

  });

Answer 3

首先，您无法绕过必须使用框架，请记住标签已在HTML5中废弃。如果您打算升级到HTML5，则必须使用iFrame。

无论如何你可以抓住Frame和div你想要操纵它并将它传递给变量。

var frameContainer = top.frames["framename"];

然后你可以通过jQuery做任何你想做的事。

$(frameContainer).find('#AnyContainerID')

您甚至可以使用您在jQuery中使用的classname或任何标记选择器。

使用jQuery在Frames（而非iframes）中抓取内容

3 个答案: