jQuery / JavaScript:访问一个iframe的内容

我想使用jQuery来处理iframe中的HTML。

我想我可以做到这一点,通过设置jQuery函数的上下文是iframe的文档,如下所示:

$(function(){ //document ready $('some selector', frames['nameOfMyIframe'].document).doStuff() }); 

但是,这似乎并没有工作。 有点检查显示, frames['nameOfMyIframe']中的variables是undefined除非我等待iframe加载一段时间。 但是,当加载iframe的variables不可访问(我得到permission deniedtypes的错误)。

有没有人知道这个解决办法?

我认为你正在做的是受同样的来源政策 。 这应该是你得到权限拒绝types错误的原因。

如果<iframe>来自同一个域,则这些元素很容易以

 $("#iFrame").contents().find("#someDiv").removeClass("hidden"); 

参考

 $(document).ready(function(){ $('#frameID').load(function(){ $('#frameID').contents().find('body').html('Hey, i`ve changed content of <body>! Yay!!!'); }); }); 

如果iframe src来自另一个域,你仍然可以做到这一点。 您需要将外部页面读入PHP,并从您的域中回显。 喜欢这个:

iframe_page.php

 <?php $URL = "http://external.com" $domain = file_get_contents($URL) echo $domain ?> 

然后像这样的东西:

display_page.html

 <html> <head> <title>Test</title> </head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> <script> $(document).ready(function(){ cleanit = setInterval ( "cleaning()", 500 ); }); function cleaning(){ if($('#frametest').contents().find('.selector').html() == "somthing"){ clearInterval(cleanit); $('#selector').contents().find('.Link').html('ideate tech'); } } </script> <body> <iframe name="frametest" id="frametest" src="http://yourdomain.com/iframe_page.php" ></iframe> </body> </html> 

以上是如何通过iframe编辑外部页面而不拒绝访问等的例子。

使用

 iframe.contentWindow.document 

代替

 iframe.contentDocument 

我觉得这种方式更清洁:

 var $iframe = $("#iframeID").contents(); $iframe.find('selector'); 

您需要将事件附加到iframe的onload处理程序,并在其中执行js,以便确保iframe在访问之前完成加载。

 $().ready(function () { $("#iframeID").ready(function () { //The function below executes once the iframe has finished loading $('some selector', frames['nameOfMyIframe'].document).doStuff(); }); }; 

以上将解决“尚未加载”的问题,但就权限而言,如果您在来自不同域的iframe中加载页面,则由于安全限制,您将无法访问它。

您可以使用window.postMessage来调用页面和他的iframe之间的函数(跨域或不域)。

文档

page.html中

 <!DOCTYPE html> <html> <head> <title>Page with an iframe</title> <meta charset="UTF-8" /> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script> var Page = { id:'page', variable:'This is the page.' }; $(window).on('message', function(e) { var event = e.originalEvent; if(window.console) { console.log(event); } alert(event.origin + '\n' + event.data); }); function iframeReady(iframe) { if(iframe.contentWindow.postMessage) { iframe.contentWindow.postMessage('Hello ' + Page.id, '*'); } } </script> </head> <body> <h1>Page with an iframe</h1> <iframe src="iframe.html" onload="iframeReady(this);"></iframe> </body> </html> 

Iframe.html的

 <!DOCTYPE html> <html> <head> <title>iframe</title> <meta charset="UTF-8" /> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script> var Page = { id:'iframe', variable:'The iframe.' }; $(window).on('message', function(e) { var event = e.originalEvent; if(window.console) { console.log(event); } alert(event.origin + '\n' + event.data); }); $(window).on('load', function() { if(window.parent.postMessage) { window.parent.postMessage('Hello ' + Page.id, '*'); } }); </script> </head> <body> <h1>iframe</h1> <p>It's the iframe.</p> </body> </html> 

我更喜欢使用其他变种进行访问。 从父母你可以有一个访问variables的子iframe。 $也是一个variables,你可以访问它的只是调用window.iframe_id.$

例如, window.view.$('div').hide() – 隐藏ID为'view'的iframe中的所有div

但是,它在FF中不起作用。 为了更好的兼容性你应该使用

$('#iframe_id')[0].contentWindow.$

我创build了一个示例代码。 现在你可以很容易地从不同的领域了解你不能访问iframe的内容。我们可以通过同样的域名访问iframe的内容

我与你分享我的代码,请运行此代码检查控制台。 我在控制台打印图像src。 有四个iframe,两个iframe来自同一个域,其他两个来自其他域(第三方)。您可以看到两个图像src( https://www.google.com/logos/doodles/2015/googles-new-logo -5078286822539264.3-hp2x.gif

https://www.google.com/logos/doodles/2015/arbor-day-2015-brazil-5154560611975168-hp2x.gif )在控制台,也可以看到两个权限错误(2错误:权限被拒绝访问属性文档“

… irstChild)},contents:function(a){return m.nodeName(a,“iframe”)?a.contentDocument …

)来自第三方iframe。

 <body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top"> <p>iframe from same domain</p> <iframe frameborder="0" scrolling="no" width="500" height="500" src="iframe.html" name="imgbox" class="iView"> </iframe> <p>iframe from same domain</p> <iframe frameborder="0" scrolling="no" width="500" height="500" src="iframe2.html" name="imgbox" class="iView1"> </iframe> <p>iframe from different domain</p> <iframe frameborder="0" scrolling="no" width="500" height="500" src="https://www.google.com/logos/doodles/2015/googles-new-logo-5078286822539264.3-hp2x.gif" name="imgbox" class="iView2"> </iframe> <p>iframe from different domain</p> <iframe frameborder="0" scrolling="no" width="500" height="500" src="http://d1rmo5dfr7fx8e.cloudfront.net/" name="imgbox" class="iView3"> </iframe> <script type='text/javascript'> $(document).ready(function(){ setTimeout(function(){ var src = $('.iView').contents().find(".shrinkToFit").attr('src'); console.log(src); }, 2000); setTimeout(function(){ var src = $('.iView1').contents().find(".shrinkToFit").attr('src'); console.log(src); }, 3000); setTimeout(function(){ var src = $('.iView2').contents().find(".shrinkToFit").attr('src'); console.log(src); }, 3000); setTimeout(function(){ var src = $('.iView3').contents().find("img").attr('src'); console.log(src); }, 3000); }) </script> </body> 

你有没有尝试过的经典,等待负载完成使用jQuery的内置就绪function?

 $(document).ready(function() { $('some selector', frames['nameOfMyIframe'].document).doStuff() } ); 

ķ