iframe中调用兄弟iframe和父iframe中的元素

于 2019-08-19 11:16:58 发布
阅读量958 收藏 1
点赞数 1
分类专栏： iframe 文章标签： iframe iframe 取父值 iframe取兄弟值或者节点 
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35449428/article/details/99717241
版权

今天在做项目时，遇到了在一个iframe中调用兄弟iframe中的元素，现实开发中难免会遇到子页面、父页面相互操作的情况，由于时不时地会遇到几次（不是一次），所以就整理了一下父子页面相互相互调用常见的方法，作为自己的备忘录，同时也希望对大家有帮助。

下面话不多说了，来一起看看详细的介绍吧。

父页面代码 main.html 如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>IFrame的数据传递</title>
    
    <style type="text/css">
    
        .span{
            word-break:normal; 
            width:auto; 
            display:block; 
            white-space:pre-wrap;
            word-wrap : break-word ;
            overflow: hidden ;
        } 
                
    
    </style>
</head>
<body>
 <p>

    <a href="javascript:void(0)" onClick="sendParameter();">参数传递</a>
</p>
<p>
    <a href="javascript:void(0)" onClick="callIframeMethod();">调用子iframe方法</a>
</p>
<p>
    <a href="javascript:void(0)" onClick="callIframeField();">调用子iframe变量</a>
</p>
<p>
    <a href="javascript:void(0)" onClick="callIframeHtml();">调用子iframe组件</a></br>
</p>

<iframe id="hanpang" src="top.html" width="100%" frameborder="1"></iframe>
<iframe id="new" src="MyHtmssssssssssssl.html" width="100%" frameborder="1"></iframe>

<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">

    var parentVal = "我是父页面定义的变量";

    function sendParameter(){
        //myValue 是传递的变量
        $("#hanpang")[0].contentWindow.myValue="我是胖先森";
    }
    
    function callIframeMethod() {
        //document.getElementById("hanpang").contentWindow.myTest();
        $("#hanpang")[0].contentWindow.myTest(); //用jquery调用需要加一个[0]
    }
    
    function callIframeField() {
        alert($("#hanpang")[0].contentWindow.message);
    }
    
    function callIframeHtml() {
        // #name 是 myFrame页面中控件ID
        alert($("#hanpang")[0].contentWindow.$("#name").val());
        //alert($("#hanpang")[0].contentWindow.document.getElementById("dd").value);
        //alert($("#hanpang")[0].contentWindow.document.getElementById("dd").value);
        
    }
    
    function say() {
        var div=document.createElement("div");
        div.style.width="100px";
        div.style.height="200px";
        div.style.backgroundColor="red";
        div.style.position="absolute";
        div.style.left="700px";
        div.style.top="190px";
        div.style.zIndex=9999;
        if(document.all)
        div.style.filter = "alpha(opacity=30)";
        else div.style.opacity = .3;
        parent.document.body.appendChild(div);
    }

</script> 

</body>
</html>

 

 

 

子页面1 ：

top.html

 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>子页面</title>
    </head>
    <body>
        <a href="javascript:;" οnclick="getParamter()">接受参数</a>
        <a href="javascript:;" onClick="callMainMethod();">调用主窗口方法</a>
        <a href="javascript:;" onClick="callMainField();">调用主窗口变量</a>
        <a href="javascript:;" onClick="callMainHtml();">调用主窗口组件</a>
        <input id="name" type="text" value="我要学习"/>

        <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
        <script type="text/javascript">
            var message = "消息：打赏啊！";
            function getParamter() {
                alert(window.myValue);
            }
            
            function callMainMethod() {
                parent.say();
            }

            function callMainField() {
                alert(parent.parentVal);
            }
            
            function callMainHtml() {
                alert(parent.$("#hanpang").attr("id"));
            }

            function myTest() {
                alert($("#name").val());
            }
        </script>
    </body>
</html>

 

 

子页面2

MyHtmssssssssssssl.html

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="javascript:;" onClick="callLevelFrame();">调用兄弟iframe</a>
    <input id="new_iframe" type="text" value="我的新值"/>

    <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
        function callLevelFrame() {
            var message=parent.$("#hanpang")[0].contentWindow.message;
            alert(message);
        }

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

 

 

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持

qq_35449428
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
iframe兄弟页面相互调用
07-06
内涵iframe子页面调用兄弟页面的demo console 输出函数的自定义方法
如何获取网页兄弟iframe里的元素,如何调用网页兄弟iframe里的事件
asp.net常见问题分析，网站开发常见问题总结,ningxi_博客
07-16 1121
使用Js方法，如何获取网页兄弟iframe里的元素，如何调用网页兄弟iframe里的事件？ 一、案例： .... <body> <iframe id="a1"><input type="button" id="btn_Search" onclick=""/></iframe> <iframe id="a2"></ifram...
html中iframe调用兄弟iframe中的js方法
老徐的博客只有干货
01-26 3481
问题说明 最近工作中碰到一个页面有一个主iframe A，用于操作主要业务元素。其中有一个弹出框里面也嵌入了一个iframe B， 此时，我需要在B中调用A中JS的指定方法。下面咱们来通过例子还原一下这个场景，看如何实现的。 主页面html testframe.html iframe1即A页面
iframe父子兄弟之间调用传值(contentWindow && parent)
开向幸福的向阳花
12-01 662
学习一个知识点最好的方法就是自己动手去的实现一些简单的helloworld，虽然可以在网上可以找到很多总结，但自己实现的过程才是自己的，期间遇到问题并解决问题的过程也会让自己记忆理解更加深刻。   iframe的调用包括以下几个方面：（调用包含html dom，js全局变量，js方法） 主页面调用iframe； iframe页面调用主页面； 主页面的包含的iframe
【javascript】iframe父子兄弟之间调用传值(contentWindow && parent) (推荐)
PHP在线开发笔记
04-03 4771
iframe的调用包括以下几个方面：（调用包含html dom，js全局变量，js方法）   主页面调用iframe；   iframe页面调用主页面；   主页面的包含的iframe之间相互调用；       主要知识点   1：document.getElementById("ii").contentWindow 得到iframe对象后，就可以通过contentWind
Jquery调用iframe父页面中的元素及方法
11-24
一、在iframe中查找父页面元素的方法： $(‘#id', window.parent.document) 二、在iframe中调用父页面中定义的方法和变量： parent.method parent.value 三、实例 父页面： <%@ Page Language="C#" ...
js中iframe调用父页面的方法
01-19
本文实例讲述了js中iframe调用父页面的方法。分享给大家供大家参考。具体实现方法如下： 子页面调用父页面的方法在js中很容易实现。我们只需要在主页面加个函数，然后在子页面通过window.parent.方法()即可实现了 ...
iframe 父窗口和子窗口相互的调用方法集锦
01-19
一、父窗口调用iframe子窗口方法 1、HTML语法：<iframe name=”myFrame” src=”child.html”></iframe> 2、父窗口调用子窗口：myFrame.window.functionName(); 3、子窗品调用父窗口：parent....
frameset下frame控制兄弟框架的显示与隐藏
张家小丫头的博客
10-14 4818
首先，在这里我们一个frameset用到了三个frame 在父界面de 写的代码如下： " name="right" id="right" > aspx.cs界面写的代码如下（原程序中有一个判断，确定在界面首次加载的时候Frame1是可见的）：if (string.IsNullOrEmpty(qy) || qy=="0") {
iframe兄弟间和iframe父子间的值传递问题
weixin_30295091的博客
09-26 114
在网上查了资料。iframe的参数传递问题。有很多答案都是不可行的。现在将收集的资料整理一下。已经验证通过。以下如有问题请及时指正。 1. iframe兄弟之间值传递 举例说明：index页面中有两个iframe：iframe1和iframe2，如下图： 　　 　在iframe1中：有一个input输入框，一个变量f1，函数f1Func。 　　 // 获取iframe1，pa...
代码调用document.body.appendChild导致IE已终止操作的问题
04-27 1219
新手发帖，很多方面都是刚入门，有错误的地方请大家见谅，欢迎批评指正     IE在文档未载加实现时调用document.body.appendChild就会出这个题问，即body标签还没有剖析毕完并闭合时调用appendChild。处理方法很简单，改成insertBefore。代码如下： if(document.body && document.body.firstChild){
document.body.appendChild(tab);窗口载入页面
速冻的博客
04-22 1325
a
Iframe父子兄弟之间的调用
iteye_10299的博客
08-21 629
今天在做项目时，遇到了在一个iframe中调用兄弟iframe中的元素，网上找了一些材料，总结知识点如下： iframe的调用包括几个方面： 1、主页面iframe调用子iframe；2、子iframe调用主iframe的元素；3各个iframe之间元素的相互调用   1：document.getElementById("ii").contentWindow 得到iframe对象后，就可...
JS获取节点的兄弟，父级，子级元素
热门推荐
hellogull
05-14 59万+
先说一下JS的获取方法，其要比JQUERY的方法麻烦很多，后面以JQUERY的方法作对比。 JS的方法会比JQUERY麻烦很多，主要则是因为FF浏览器，FF浏览器会把你的换行也当最DOM元素 原生的JS获取ID为test的元素下的子元素。可以用： var a = docuemnt.getElementById("test").getElementsByTagName("div
刷新兄弟iframe中的子iframe
ly_490380384的博客
06-11 876
//刷新兄弟iframe中的子iframe parent.right.childNodes[1]//找到兄弟iframe .contentWindow.document.getElementById("codesTree")//找到兄弟iframe的子iframe .contentWindow.location.reload(true);//刷新目标iframe windo...
使用iframe时设置兄弟页面的值
qq_42740745的博客
12-18 300
parent.$("#兄弟页面iframeid").contents().find("#兄弟页面要设置值的标签id").val("要设置的值");
iframe父子兄弟之间通过jquery传值(contentWindow && parent)
yzp_soft的专栏
06-18 2805
iframe父子兄弟之间通过jquery传值(contentWindow && parent)，iframe的调用包括以下几个方面：（调用包含html dom，js全局变量，js方法） 主页面调用iframe； iframe页面调用主页面； 主页面的包含的iframe之间相互调用； 主要知识点 1：document.getElementById("ii").contentWindow 得
js如何判断是否在iframe中/JQuery调用iframe父页面元素与方法
最新发布
08-25
当需要在iframe中的页面中调用父页面的元素或方法时，可以使用jQuery来实现。jQuery可以通过使用窗口对象的parent属性来访问父页面的元素或方法。 以下是通过jQuery调用父页面的元素或方法的示例： ```javascript ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值