jQuery,选择iframe里面的元素,它在一个iframe里面

前端之家收集整理的这篇文章主要介绍了jQuery,选择iframe里面的元素,它在一个iframe里面前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
使用jQuery我试图访问div id =“元素”。
<body>
    <iframe id="uploads">
        <iframe>
            <div id="element">...</div>
        </iframe>
    </iframe>
</body>

所有iframe都在同一个网域,没有www / non-www问题。

我已成功选择第一个iframe中的元素,但不是第二个嵌套的iframe。

我已经尝试了几件事情,这是最近的(和一个非常绝望的企图)。

var iframe = jQuery('#upload').contents();
var iframeInner = jQuery(iframe).find('iframe').contents();
var iframeContent = jQuery(iframeInner).contents().find('#element');

// iframeContent is null

编辑:
为了排除时序问题,我使用了一个点击事件,并等待了一段时间。

jQuery().click(function(){
   var iframe = jQuery('#upload').contents().find('iframe');
   console.log(iframe.find('#element')); // [] null
});

有任何想法吗?
谢谢。

更新:
我可以选择第二个iframe这样…

var iframe = jQuery('#upload').contents().find('iframe');

现在的问题似乎是src是空的,因为iframe是用javascript生成的。
因此,选择了iframe,但内容长度为0。

真的卡住了。

解决方法

事实是,您提供的代码将无法正常工作,因为< iframe>元素必须有一个“src”属性,如:
<iframe id="uploads" src="http://domain/page.html"></iframe>

可以使用.contents()获取内容

$(‘#uploads).contents()将允许您访问第二个iframe,但如果该iframe是“INSIDE”http://domain/page.html文档#uploads iframe加载。

为了测试我是对的,我创建了3个html文件名为main.html,iframe.html和noframe.html,然后选择div#元素很好与:

$('#uploads').contents().find('iframe').contents().find('#element');

将有一个延迟,其中元素将不可用,因为您需要等待iframe加载资源。此外,所有iframe必须在同一个域。

希望这可以帮助 …

这里是我使用的3个文件的html(用您的域和url替换“src”属性):

main.html

<!DOCTYPE HTML>
<html>
<head>
    <Meta charset="utf-8">
    <title>main.html example</title>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

    <script>
        $(function () {
            console.log( $('#uploads').contents().find('iframe').contents().find('#element') ); // nothing at first

            setTimeout( function () {
                console.log( $('#uploads').contents().find('iframe').contents().find('#element') ); // wait and you'll have it
            },2000 );

        });
    </script>
</head>
<body>
    <iframe id="uploads" src="http://192.168.1.70/test/iframe.html"></iframe>
</body>

iframe.html

<!DOCTYPE HTML>
<html>
<head>
    <Meta charset="utf-8">
    <title>iframe.html example</title>
</head>
<body>
    <iframe src="http://192.168.1.70/test/noframe.html"></iframe>
</body>

noframe.html

<!DOCTYPE HTML>
<html>
<head>
    <Meta charset="utf-8">
    <title>noframe.html example</title>
</head>
<body>
    <div id="element">some content</div>
</body>

猜你在找的jQuery相关文章