jQuery 获取 iframe 父页面与子页面的元素和方法

1)在页面中查找 iframe 页面元素:
$(‘#iframe’).contents().find(‘#id’)

2)在 iframe 中查找父页面元素:
$(‘#id’, parent.document)

3)在 iframe 中调用父页面中定义的方法和变量:
parent.method
parent.value

父页面

<div id="div">div element</div>

<iframe id="iframe" src="page.html" frameborder="0"></iframe>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function ($) {
    //在页面中查找 iframe 页面元素
    var p = $('#iframe').contents().find('#p').text();
    alert(p);
});

//自定义变量
var hello = 'hello';

//自定义方法
function getHelloWorld() {
    alert('hello world');
}
</script>

子页面

<p id="p">p element</p>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function ($) {
    //在 iframe 中查找父页面元素
    alert($('#div', parent.document).text());
    //在 iframe 中调用父页面中定义的方法
    parent.getHelloWorld();
    //在 iframe 中调用父页面中定义的变量
    alert(parent.hello);
});
</script>

发表评论

电子邮件地址不会被公开。 必填项已用*标注