iframe知识小结之老项目中嵌套Vue单页应用实践

最新推荐文章于 2024-06-25 15:22:52 发布

乐橙Web

最新推荐文章于 2024-06-25 15:22:52 发布

阅读量3.7k

点赞数

分类专栏：项目笔记 JS 文章标签： iframe通信嵌入iframe页面

本文链接：https://blog.csdn.net/Mr_YanYan/article/details/88960160

版权

JS 同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

项目笔记

13 篇文章 0 订阅

订阅专栏

最近公司因结构变动，将重构的一些新项目放到来老系统中，用到了iframe通信知识，故总结此篇。

同域名下父子页面通信

父页面

<html>

<head>
    <script type="text/javascript">
        function say() {
            alert("parent.html");
        }
        function callChild() {
       		 myFrame.window.say();
            myFrame.window.document.getElementById("button").value="调用结束";
        }
    </script>
</head>

<body>
    <input id="button" type="button" value="调用child.html中的函数say()" onclick="callChild()" />
    <iframe name="myFrame" id="myframe" src="child/"></iframe>
</body>

</html>

子页面

<html>

<head>
    <script type="text/javascript">
        function say() {
            alert("child.html");
        }

        function callParent() {
            parent.say();
            parent.window.document.getElementById("button").value = "调用结束";
        }
        console.log(window.location.href)
    </script>
</head>

<body>
    <input id="button" type="button" value="调用parent.html中的say()函数" onclick="callParent()" />
</body>

</html>

方法调用

父页面调用子页面方法：FrameName.window.childMethod();
子页面调用父页面方法：parent.window.parentMethod(); // window.top或者window.parent.parent来获取顶层对象

DOM元素访问

获取到页面的window.document对象后，即可访问DOM元素

注意事项

要确保在iframe加载完成后再进行操作，如果iframe还未加载完成就开始调用里面的方法或变量，会产生错误。判断iframe是否加载完成有两种方法：

iframe上用onload事件
用document.readyState=="complete"来判断

跨域通信

解决方案一

*解决方案二
使用postMessage

老项目嵌套Vue单页面应用

新项目场景：elementUI+Vue 使用的多tab的页面结构，
旧项目场景：使用iframe作为tab页面

解决方案

尝试：

场景：有三个本地域名，比如ABC页面，B是top窗口，A和B分别位于B中，C要和A通信，，使用postmessafe通信，发现总在B页面向A或者C发送数据的时候，总是报"Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('http://a.b.com') does not match the recipient window's origin ('http://c.e.com')"
解决办法：在子iframe未加载完是不能向子iframe传递数据的，使用iframe.onload才可以

最终解决方案：

由于这样传值太过复杂，最后使用websocket解决

参考文章
https://www.cnblogs.com/sydeveloper/p/3712863.html
https://blog.csdn.net/dreamjay1997/article/details/81319304

乐橙Web

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
3
评论
iframe知识小结之老项目中嵌套Vue单页应用实践

最近公司因结构变动，将重构的一些新项目放到来老系统中，用到了iframe通信知识，故总结此篇。同域名下父子页面通信父页面<html><head> <script type="text/javascript"> function say() { alert("parent.html"); ...
复制链接

扫一扫

专栏目录