iframe子父页面变量、标签、方法的调用

最新推荐文章于 2024-10-15 12:33:11 发布
最新推荐文章于 2024-10-15 12:33:11 发布
阅读量1k 收藏
点赞数 1
分类专栏： 前端 文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38283640/article/details/127570344
版权

iframe子父页面变量、标签、方法的调用

1.代码展示

父页面代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="${ctxPath}/static/js/jquery.min.js" ></script>

</head>
<div class="row">
    <div class="col-sm-12">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>管理</h5>
            </div>
            <div class="ibox-content">
                <div class="row row-lg">
                    <div class="col-sm-12">
                        <div>
                            <h3>我是父页面</h3>
                            <p class="getVal"></p>
                            <button id="btn1">直接子页面变量赋值</button>
                            <button id="btn2">调用子页面方法传参</button>
                            <button id="btn3">直接子页面标签赋值</button>
                            <div class="page" style="display: none;">
                                <iframe id="childIframe" src="" width="100%" height="100%"></iframe>
                            </div>
                            <div >
                                <h3>这是父页面</h3>
                                <span id="domData"></span>
                            </div>
                            <script type="text/javascript">
                                //直接子页面变量赋值  点击事件
                                $("#btn1").click(function(){
                                    //修改iframe 后进行切换页面
                                    $(".page iframe").attr("src","/fdgk/aa"); //修改iframe并显示
                                    console.log("---获取 iframe的标签元素", $("#childIframe"))
                                    console.log("---获取 iframe的标签元素", $("#childIframe").eq(0))
                                    console.log("---获取 iframe的标签元素", $("#childIframe").eq(0)[0])
                                    console.log("---获取 iframe的标签元素", $("#childIframe").eq(0)[0].contentWindow)
                                    //之所以用定时器，是修改iframe  src 访问后台的调用方法的时候  iframe还没有更新完成
                                    setTimeout(function(){
                                        // //父页面调用子页面的变量进行赋值
                                        $("#childIframe")[0].contentWindow.sunData="123";
                                        $("#childIframe")[0].contentWindow.assignData();
                                    },3000);
                                    $(".page").show();
                                })
                                //调用子页面方法传参   点击事件
                                $("#btn2").click(function(){
                                    //修改iframe 后进行切换页面
                                    $(".page iframe").attr("src","/fdgk/aa"); //修改iframe并显示
                                    //父页面调用子页面的方法
                                    setTimeout(function(){
                                        // //父页面调用子页面的变量进行赋值
                                        $("#childIframe").eq(0)[0].contentWindow.sunMethod("通过调用子页面方法传递的参数");
                                    },3000);

                                    $(".page").show();
                                })
                                // 直接子页面标签赋值   点击事件
                                $("#btn3").click(function(){
                                    //修改iframe 后进行切换页面
                                    // $(".page iframe").attr("src","/fdgk/aa"); //修改iframe并显示
                                    console.log("---获取 iframe的标签元素", $("#childIframe"))
                                    // //父页面给子页面的标签进行赋值
                                    $('#childIframe').contents().find("#domData").text("直接标签赋值");
                                    $(".page").show();
                                })

                                //父页面写好：子页面调用父页面的方法
                                function closeChild(value){
                                    $(".page iframe").attr("src","");
                                    $(".page").hide();
                                    $(".getVal").text("父页面获取到了子页面传递的参数：'"+value+"'");
                                }
                                //子页面调用父页面的变量
                                var  data="";
                                function showData(){
                                    alert(data)
                                }
                            </script>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<style>
    .dropdown-menu > li > a {
        width: 90%;
    }
    .css_iframe{
        width: 100%;
        border: 0;
        height: 100%;
        min-height: 700px;
    }
    .tabs-container .nav-tabs{
        border-bottom: 1px solid #202dbb;
    }
</style>

<script>


</script>

子页面代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="${ctxPath}/static/js/jquery.min.js" ></script>

</head>
<body>
<h3>我是子页面</h3>
<p>子页面的值为：<span class="val">2020-12-22 这是我的秘密！</span></p>
<div >
    <h3>子页面展示父页面的数据</h3>
    <p>父页面调用子页面方法传递的参数是：<span class="methodParams">还没有传递参数</span></p>
    <p>父页面调用子页面的变量：<span class="constData">还没有传递参数</span></p>
    <p>父页面调用子页面的变量：<span id="domData">还没有传递参数</span></p>
</div>
<button id="btns1">调用父页面的方法 关闭iframe</button>
<button id="btns2">赋值父页面的变量，并弹框显示</button>
<button id="btns3">操作父页面的dom节点，修改span内容</button>
<script type="text/javascript">
    // 调用父页面上的方法  进行关闭页面
    //调用方法
    $("#btns1").click(function(){
        //子页面通过parent获取调用父级的方法，也可以传参！
        //closeChild  是父页面的方法
        parent.closeChild($(".val").text());
    })
    //直接给父页面的变量进行赋值
    $("#btns2").click(function(){
        alert("btns2")
        //子页面通过parent获取调用父级的方法，也可以传参！
        parent.data="变量赋值" ;
        parent.showData();
    })
    //直接给父页面的变量进行赋值
    $("#btns3").click(function(){
        alert("btns3")
        //子页面通过parent获取调用父级的方法，也可以传参！
        parent.$("#domData").text("修改父页面标签")
    })



    /********************************************************************/

    function sunMethod(data){
        $(".methodParams").text(data)
        console.log("父页面调用子页面方法 传递的参数",data)
    }
    var sunData=""
    function assignData(){
        $(".constData").text(sunData)
        console.log("父页面直接给修改子页面的变量",sunData)
    }

</script>
</body>
</html>

2.父页面调用子页面

1.父页面调用子页面的变量

$("#childIframe")[0].contentWindow.sunData="123";

2.父页面调用子页面方法

$("#childIframe").eq(0)[0].contentWindow.sunMethod("通过调用子页面方法传递的参数");

3.父页面调用子页面的标签

 $('#childIframe').contents().find("#domData").text("直接标签赋值");

3.子页面调用父页面

1.子页面调用父页面的变量

 parent.data="变量赋值" ;

2.子页面调用父页面方法

parent.closeChild("方法参数");

3.子页面调用父页面的标签

 parent.$("#domData").text("修改父页面标签")
weixin_38283640
关注
专栏目录
Iframe获取父页面的变量和控件
05-31
子页面获取父页面的方法，变量，标签等子页面获取父页面的方法，变量，标签等
iframe父子页面互相调用方法、获取变量、获取元素
lixiaonaaa的博客
12-22 3919
每次iframe父子页面交互的时候总是现查，总也记不住，所以今天来详细记载一下。以下均为jquery 写法。 1、iframe子页面调用父页面 （1）方法 parent.func() （2）变量 parent.value （3）jquery元素 $("div",parent.document) 2、父页面调用iframe子页面 （1）方法 $("#childrenIframeId").eq(0)[0].contentWindow.func(); （2）变量 $("#ch
iframe子窗口调用父窗口的方法与window.open打开新页面调用前窗口的方法
最新发布
Ly250821的博客
10-15 187
iframe和window.open
从父页面获取iframe中变量
csdnklsdm的博客
06-17 309
1.原生js写法 var win = document.getElementById(“testiframe”).contentWindow; 或//var win=window.frames[“testiframe”];//必须为iframe指定name属性 var value = win.varName; 2.jquery写法 注意： 是contentWindow，不是contentDocument，看到很多资料写错了 iframe最好同时指定id与name属性 ...
父页面内获取获取iframe内的变量或者是获取iframe内的值
weixin_34378969的博客
11-26 3401
前提：页面不可跨域访问，必须同一域名下，否则返回值为空 父页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sca...
JavaScript实现IFrame子窗口调用父窗口的全局变量
12-31
JavaScript实现IFrame子窗口调用父窗口的全局变量
Jquery调用iframe父页面中的元素及方法
11-24
在网页开发中，有时我们需要在`iframe`中与父页面进行交互，比如调用父页面中的元素或执行父页面的方法。本文将详细讲解如何使用jQuery实现这一功能。 首先，我们来了解一下`iframe`的基本概念。`iframe`（Inline ...
浅谈js中子页面父页面方法 变量相互调用
10-21
另一方面，父页面调用子页面的方法或变量则需要利用iframe元素的contentWindow属性。这个属性允许父页面访问iframe内部的Window对象，进而可以访问iframe内部定义的方法或变量。例如，如果子页面定义了一个名为...
iframe 父窗口和子窗口相互的调用方法集锦
01-19
2、父窗口调用子窗口：myFrame.window.functionName(); 3、子窗品调用父窗口：parent.functionName(); 简单地说,也就是在子窗口中调用的变量或函数前加个parent.就行 4、父窗口页面源码： 代码如下: <html> &...
iframe子页面与父页面在同域或不同域下的js通信
10-25
父页面可以直接访问iframe中的window对象来调用其中的方法和属性，同样iframe也可以通过访问parent对象来调用父页面的方法和属性。例如，父页面可以使用“myFrame.window.childMethod();”来调用iframe中的方法，而...
利用JQuery操作iframe父页面、子页面的元素和方法汇总
10-19
本文将详细介绍如何使用JQuery操作`iframe`以及在父页面和子页面间进行元素和方法的交互。 首先，让我们来看看如何在`iframe`中查找或操作父页面的元素： 1. **在iframe中查找父页面元素**： ```javascript $('#...
获取iframe里面的变量
热门推荐
zhengxiangwen的专栏
10-28 1万+
var tree = document.getElementById('projectIframe').contentWindow.tree;
js子页面获取父页面参数或方法
Adobe_java的博客
12-08 2917
js子页面获取父页面参数或方法
iframe访问父页面的变量、方法
寂寥人生
01-21 669
https://www.cnblogs.com/Capricorn-HCL/articles/4216302.html
浏览器同源策略，及跨域解决方案
周大侠的博客
08-31 1892
一、同源策略 浏览器的同源策略是一种约定，最核心也最基本的安全功能，它限制了来自不同源的 “document” 或脚本，对当前 “document” 读取或设置某些属性。 这个策略是非常重要的，试想下如果没有该策略。那么 a.com 的一段 JavaScript 脚本，可以在 b.com 未导入该脚本的情况下，对 b.com 的页面 进行随意更改，那就很恐怖了。为了防止页面之间发生混乱，浏览器...
JS子页面如何获取父页面的变量、对象、方法
阿甘兄
04-25 1万+
子页面获取父页面的变量：parent.window.变量 子页面获取父页面的方法：parent.window.方法 子页面获取父页面的对象：parent.window.对象 子页面获取父页面的对象里面的变量：parent.window.对象.变量 子页面获取父页面的对象里面的方法：parent.window.方法 举例： 父页面的对象： 子页面获取父页面的对象里面的方法： ...
iframe与父页面传值(方法互调)
05-29
然而，当涉及到`iframe`与父页面之间的通信时，就需要用到一些特殊的方法来实现数据的传递和函数调用。本篇文章将深入探讨如何在`iframe`与父页面之间进行值的传递以及方法的互相调用。 首先，我们可以通过...
iframe子页面与父页面元素的访问以及js变量的访问
qq_27009517的博客
07-14 3634
后台管理系统嵌套了很多iframe页面，想要取得父页面的元素，需要特殊的写法，总是记不住，写下来方便寻找 // eg：iframe页面找父页面的 #nav $('#nav',parent.document) var order = $("nav.J_menuTabs a[data-id*=importOrderExcel]", parent.document); if(order.length){ $(".csEntityImport").hide(); }else{ ...
HTML父窗口与IFRAME中变量互访
hongweigg的专栏
04-10 1847
1、HTML父窗口访问IFRAME中变量或函数 在父窗口脚本中写： //调用变量赋值 IframeObj.contentWindow.someVar = "test is ok"; //调用函数 IframeObj.contentWindow.someFunction(); 2、HTML中IFRAME访问父窗口中变量或函数 假设在父窗口脚本中具有方法： functi
iframe页面方法调用时调用父级页面的方法
qq_56995244的博客
09-09 352
1.我做了个打印页面的组件，引用的html文件，需要在打印页面的点击打印时调接口，所以需要将方法再次传回给上级。在mounted和beforeDestroy也就是页面渲染后和页面销毁前增加监听事件的创建与销毁。在引用的页面调用方法时使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值