iframe如何获取父级页面中的元素

来源:未知 人浏览 2017.07.18


1)在iframe中查找父页面元素的方法:

$('#id', window.parent.document)


2)在iframe调用父页面中定义的方法和变量:

parent.method

parent.value


实力如下:


父级窗口

<script language="javascript" type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script language="javascript" type="text/javascript">
        var hello = 'hello';
        function getHelloWorld() {
            alert('hello world');
        }
</script>
<body>
<div>
    <div id="default" style=" width:200px; height:400px; float:left;">default.aspx</div>
    <iframe id="iframeid" src="IFrame.aspx" style=" width:400px; height:400px; float:left;"></iframe>
</div>

子窗口

<script language="javascript" type="text/javascript" src="jquery-1.5.1.min.js"></script>
    <script language="javascript" type="text/javascript">
        $(function() {
            //在iframe中查找父页面元素
            alert($('#default', window.parent.document).html());
            //在iframe中调用父页面中定义的方法
            parent.getHelloWorld();
            //在iframe中调用父页面中定义的变量
            alert(parent.hello);
        });
</script>

iframe调用父级元素,涉及到了跨域,要确定服务器是否允许~

浏览器出于安全考虑,不允许js代码进行跨域操作,有时候要看服务器是否允许跨域~~~

星期三
15年12月16日
热门板块
windows 10下载设计软件下载PhotoShop CC文章分享Portraiture磨皮win10安装教程
热门下载
Lightroom 5.2官方中文版下载下载(

Lightroom 5.2官方中文版下载下载(

下载
PhotoShop CC下载官方正版可激活版本

PhotoShop CC下载官方正版可激活版本

下载