iframe跨域解决方案

简介:     公司某个功能用的是iframe,由于跨域的原因,我们不能直接设置父级页面iframe的高度,所以用了一个中间页home来完成父级页面iframe的高度设置,这种中间页其实很多时候不好用,因为涉及到页面跳转和刷新,每次都得刷一下页面,而消息发送成功页的一个定位到顶部的功能,就是由于页面刷了一次导致体验不好,除了体验,这种中间页跳转的做法也很蹩脚和繁琐。

    公司某个功能用的是iframe,由于跨域的原因,我们不能直接设置父级页面iframe的高度,所以用了一个中间页home来完成父级页面iframe的高度设置,这种中间页其实很多时候不好用,因为涉及到页面跳转和刷新,每次都得刷一下页面,而消息发送成功页的一个定位到顶部的功能,就是由于页面刷了一次导致体验不好,除了体验,这种中间页跳转的做法也很蹩脚和繁琐。

    昨天网上Get了一下iframe的跨域解决方案 找到了一个方法!

    postMessage,通过postMessage可以实现iframe的跨域通信。原理是子页面向父页面发送消息,父页面接收消息。

    话不多说直接干货。

 

    子页面代码:

top.postMessage('success', '在这里填写父页面URL');

    父页面代码:

    //响应事件
    window.addEventListener('message', function (e) {
        var color = e.data;
        console.log(color);
        if (color == "success")
        {
            $("#MessageSend").height(600);
            $(window).scrollTop(0);
        }
    }, false);

    如上,子页面向父页面发送了一条消息 “success”,父页面获取消息后判断消息内容是不是想要的,进而做相应的操作。

 

    上面的代码还应该完善一下,父页面接收消息请求的时候,应该验证域名,总不能随便一个页面发来消息这边就处理。

 

目录
相关文章
|
2天前
|
前端开发 JavaScript 安全
跨域的五种最常见解决方案
跨域的五种最常见解决方案
|
2天前
|
JavaScript 前端开发 安全
JavaScript中跨域资源共享(CORS):原理和解决方案
【4月更文挑战第22天】本文介绍了JavaScript中跨域资源共享(CORS)的原理和解决方案。CORS借助HTTP头部字段允许跨域请求,核心是Access-Control-Allow-Origin响应头。解决方案包括:服务器端设置响应头(如使用Express.js的cors中间件)、使用代理服务器或JSONP。现代Web开发推荐使用CORS,因为它更安全、灵活,而JSONP已逐渐被淘汰。理解并正确实施CORS能提升Web应用性能和安全性。
|
2天前
|
移动开发 前端开发 安全
iframe实现跨域通信的方法
iframe实现跨域通信的方法
27 6
|
2天前
|
JavaScript
iframe 跨域通信和不跨域通信
iframe 跨域通信和不跨域通信
|
Web App开发 JavaScript 安全
如何基于 iframe 解决跨域?
一般跨域听得比较多的方案是 Nginx 代理,CORS,而 JSONP 和 iframe 的跨域解决往往只在背八股文的时候出现,而且老是只给 JSONP 的实际操作手段,老是找不着 iframe 的实际操作,所以这篇文章就是介绍如何基于 iframe 解决跨域
|
Web App开发 移动开发 安全
「趣学前端」关于iframe跨域通信
用技术实现梦想,用梦想打开创意之门。之前开发遇到了iframe跨域通信的问题,今天分享一下解决方案,顺便总结一波知识点。
847 1
「趣学前端」关于iframe跨域通信
|
JSON JavaScript 前端开发
跨域的原因以及解决方案
跨域的原因以及解决方案
跨域的原因以及解决方案
|
Web App开发 域名解析 应用服务中间件
跨域几种解决方案(二)
跨域几种解决方案(二)
254 0
跨域几种解决方案(二)
|
负载均衡 JavaScript 前端开发
跨域几种解决方案(一)
跨域几种解决方案(一)
225 0
跨域几种解决方案(一)
|
Web App开发 JavaScript 前端开发
浏览器同源策略,及跨域解决方案
一、Origin(源) 源由下面三个部分组成: 域名 端口 协议 两个 URL ,只有这三个都相同的情况下,才可以称为同源。 下来就以 "http://www.example.com/page.html" 这个链接来比较说明: 对比URL 结果 原因 http://m.
2200 0