jQuery / JavaScript：访问iframe的内容

我想使用jQuery在iframe中操纵HTML。

我认为我可以通过将jQuery函数的上下文设置为iframe的文档来做到这一点，例如：

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

但是，这似乎不起作用。一点检查显示出，除非等待iframe加载一会儿，否则frames['nameOfMyIframe']中的变量是undefined 。但是，在iframe加载时，变量不可访问（我收到permission denied -类型错误）。

有人知道解决方法吗？

#1楼

我发现这种方式更清洁：

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

#2楼

我更喜欢使用其他变体进行访问。您可以从父级访问子级iframe中的变量。 $也是一个变量，您可以访问其刚刚调用的window.iframe_id.$

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

但是，它在FF中不起作用。为了获得更好的兼容性，您应该使用

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

#3楼

如果<iframe>来自相同的域，则可以很容易地访问元素

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

参考

#4楼

您可以使用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>

#5楼

您可以使用jQuery的.contents()方法。

如果iframe与主页位于同一域中，则.contents()方法还可用于获取iframe的内容文档。

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

#6楼

如果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编辑外部页面而不会导致访问被拒绝等。

#7楼

我创建一个示例代码。现在，您可以轻松地从其他域中了解您无法访问iframe的内容。在同一域中，我们可以访问iframe内容

我与您共享我的代码，请运行此代码检查控制台。我在控制台上打印图像src。有四个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）}，内容：function（a）{返回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>

#8楼

您是否尝试过经典，等待使用jQuery的内置ready函数完成加载？

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

#9楼

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

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

上面的方法可以解决“尚未加载”的问题，但是在权限方面，如果您要在iframe中加载来自其他域的页面，则由于安全限制，您将无法访问该页面。

#10楼

我认为您在做的事情要遵循相同的原产地政策。这应该是您收到权限拒绝类型错误的原因。

#11楼

采用

iframe.contentWindow.document

代替

iframe.contentDocument

#12楼

为了更强大：

function getIframeWindow(iframe_object) {var doc;if (iframe_object.contentWindow) {return iframe_object.contentWindow;}if (iframe_object.window) {return iframe_object.window;} if (!doc && iframe_object.contentDocument) {doc = iframe_object.contentDocument;} if (!doc && iframe_object.document) {doc = iframe_object.document;}if (doc && doc.defaultView) {return doc.defaultView;}if (doc && doc.parentWindow) {return doc.parentWindow;}return undefined;
}

和

...
var frame_win = getIframeWindow( frames['nameOfMyIframe'] );if (frame_win) {$(frame_win.contentDocument || frame_win.document).find('some selector').doStuff();...
}
...

#13楼

我最终在这里寻找了没有jquery的iframe内容，因此对于其他正在寻找的人来说，就是这样：

document.querySelector('iframe[name=iframename]').contentDocument

#14楼

此解决方案与iFrame相同。我创建了一个PHP脚本，可以从其他网站获取所有内容，而最重要的部分是您可以轻松地将自定义jQuery应用于该外部内容。请参考以下脚本，该脚本可以从其他网站获取所有内容，然后您也可以应用自定义jQuery / JS。此内容可以在任何元素或任何页面内的任何位置使用。

<div id='myframe'><?php /* Use below function to display final HTML inside this div*///Display Frameecho displayFrame(); ?></div><?php/* Function to display frame from another domain
*/function displayFrame()
{$webUrl = 'http://[external-web-domain.com]/';//Get HTML from the URL$content = file_get_contents($webUrl);//Add custom JS to returned HTML content$customJS = "<script>/* Here I am writing a sample jQuery to hide the navigation menuYou can write your own jQuery for this content*///Hide Navigation barjQuery(\".navbar.navbar-default\").hide();</script>";//Append Custom JS with HTML$html = $content . $customJS;//Return customized HTMLreturn $html;
}