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() } );
ķ
;){kind=link}