美文网首页
frame之间传值的方法

frame之间传值的方法

作者: 星月西 | 来源:发表于2017-04-20 20:36 被阅读19次

1.messageAPI

poseMessage方法可以允许来自不同源的脚本采用异步方式进行有限的通信,可以实现跨文档,多窗口,跨域消息传递。
post(data,origin)

  • data 要传递的数据
  • origin 指明目标窗口的源,协议+主机+端口号[URL],URL可以忽略,设置源后只会传递给指定窗口,*为任意窗口,/为同源窗口
    主窗口:
<body>
    <iframe src="inner.html"></iframe>
    <button type="button" id="click">click</button>
    <script>
        (function(){
            
            window.frames[0].postMessage('red','*');    
            document.getElementById('click').addEventListener('click',function(){
                window.frames[0].postMessage('red','*');
            });

        })();
    </script>
</body>

子窗口:

<body>
    <div id="red">hello world</div>
    <script>
        (function(){

            window.addEventListener('message',function(event){
                //检查发送消息的窗口是否为父窗口
                if(event.source!==window.parent){
                    return;
                }

                var red=document.getElementById('red');
                red.innerText=event.data;
            });
        })();
    </script>
</body>

相关文章

  • frame之间传值的方法

    1.messageAPI poseMessage方法可以允许来自不同源的脚本采用异步方式进行有限的通信,可以实现跨...

  • 不同frame之间传值的方法

    1.不同frame是同源的 不同框架之间能够通过iframe元素的contentWindow属性,获取到彼此的wi...

  • 参数绑定与传值

    参数绑定与传值1)功能方法之间的跳转2)功能方法之间的传值3)方法和页面之间传值(重点)4)从页面到功能方法(V-...

  • Vue组件之间传值

    基于现在都是模块化开发,vue开发过程中组件之间传值是必不可少的,传值的方法有很多,今天整理一些组件之间传值的方法...

  • 组件通信

    vue传值可分为父子之间传值、兄弟组件之间传值、跨代组件之间传值 1.父子之间传值:可以使用$emit/props...

  • Vue学习笔记之组件传值

    前言 在Vue开发过程中总会遇到组件之间传值的问题,这里总结一下现在学习到的组件之间的传值方法。 组件传值个人感觉...

  • iOS开发-通知的基本使用

    通知传值 界面之间的传值有很多方法,最基本的是可以实例化对象进行传值,也可以使用block块或者是使用通知进行传值...

  • fragment给fragment传值2

    昨天学习了两个fragment之间传值的一种方法,即通过Activity传值。今天来看一下来着之间直接传值的两种方...

  • vue通信、传值的多种方式

    组件之间传值方式 页面间之间传值方式

  • vue 面试

    组件之间的传值? 1.父组件与子组件传值 父组件通过标签上面定义传值子组件通过props方法接受数据 2.子组件向...

网友评论

      本文标题:frame之间传值的方法

      本文链接:https://www.haomeiwen.com/subject/wjtrzttx.html