我想使用jQuery操纵iframe内部的HTML。
我以为可以通过将jQuery函数的上下文设置为iframe的文档来实现，类似于：
$(function(){ //document ready
$('some selector', frames['nameOfMyIframe'].document).doStuff()
});
然而这似乎行不通。稍微检查一下，我发现要等一段时间iframe加载后frames['nameOfMyIframe']中的变量才会变成 undefined。但是，当iframe加载时，变量却无法访问（我会收到类似于permission denied的错误）。
有没有人知道解决这个问题的方法？
<iframe>来自同一域，那么元素很容易访问。$("#iFrame").contents().find("#someDiv").removeClass("hidden");
我认为你所做的事情受到了同源策略的限制。这可能是你收到权限被拒绝错误的原因。
你可以使用 jQuery 的.contents()方法。
如果iframe和主页面在同一个域名下，
.contents()方法也可以用于获取iframe的内容文档。
$(document).ready(function(){
$('#frameID').load(function(){
$('#frameID').contents().find('body').html('Hey, i`ve changed content of <body>! Yay!!!');
});
});
如果 iframe 的 src 是来自另一个域名，你仍然可以实现它。需要将外部页面读取到 PHP 中，并从您的域中进行 echo。像这样：
<?php
$URL = "http://external.com";
$domain = file_get_contents($URL);
echo $domain;
?>
然后就像这样：
<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>
bank.com 的 cookies 发送到 mydomain.com），因此用户将看到没有cookies的页面（即未登录状态）。 - Justin使用
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中加载的页面来自不同的域，由于安全限制，您将无法访问它。
<!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>
我更喜欢使用其他变量来进行访问。从父级中，你可以访问子 iframe 中的变量。 $ 也是一个变量，你可以通过调用 window.iframe_id.$ 来访问它。
例如，window.view.$('div').hide() - 隐藏 id 为 'view' 的 iframe 中所有的 div 元素。
但是，在 Firefox 浏览器中这种方法不起作用。为了更好的兼容性，你应该使用以下方式：
$('#iframe_id')[0].contentWindow.$
$("#iFrame").contents().find("#someDiv").removeClass("hidden");
$(document).ready(function(){
setTimeout(
function () {
$("#iFrame").contents().find("#someDiv").removeClass("hidden");
},
300
);
});
这样脚本将在300毫秒后运行，因此它将有足够的时间来加载，然后代码才会开始执行。有时iFrame没有加载完，脚本尝试在加载之前执行。300毫秒可以根据您的需求进行调整。
.contentWindow.document而不是在iframe元素上使用.document，这样可以更好地跨浏览器兼容。我建议以上更改。 - Alan H.