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

今天在做项目时,遇到了在一个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>

 

 

总结

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

参与评论 您还未登录,请先 登录 后发表或查看评论

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:编程工作室 设计师:CSDN官方博客 返回首页

打赏作者

qq_35449428

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值