rz.*_*rz. 770 javascript iframe jquery same-origin-policy
我想使用jQuery操纵iframe中的HTML.
我以为我可以通过将jQuery函数的上下文设置为iframe的文档来实现这一点,例如:
$(function(){ //document ready
$('some selector', frames['nameOfMyIframe'].document).doStuff()
});
然而,这似乎不起作用.一些检查显示我的变量frames['nameOfMyIframe']是undefined除非我等待一段时间加载iframe.但是,当iframe加载时,变量不可访问(我得到permission denied-type错误).
有没有人知道这方面的解决方法？
Yas*_*ari 971
如果<iframe>来自同一个域,则可以轻松访问这些元素
$("#iFrame").contents().find("#someDiv").removeClass("hidden");
Onu*_*bin 372
我认为你所做的事情遵循相同的原产地政策.这应该是您获得权限被拒绝类型错误的原因.
小智 80
$(document).ready(function(){
$('#frameID').load(function(){
$('#frameID').contents().find('body').html('Hey, i`ve changed content of <body>! Yay!!!');
});
});
小智 41
如果iframe src来自另一个域,您仍然可以执行此操作.您需要将外部页面读入PHP并从您的域中回显它.像这样:
<?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>
以上是如何通过iframe编辑外部页面而不拒绝访问等的示例...
zup*_*upa 32
我觉得这样清洁:
var $iframe = $("#iframeID").contents();
$iframe.find('selector');
小智 30
使用
iframe.contentWindow.document
代替
iframe.contentDocument
And*_*ech 26
您需要将事件附加到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中加载来自其他域的页面,则由于安全限制,您将无法访问该页面.
B.A*_*lin 20
您可以使用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>