跨域修改iframe页面内容详解


Posted in HTML / CSS onOctober 31, 2019

原理

跨域修改iframe页面内容详解

主站点内嵌代理页面, 并向代理页传递数据, 代理页根据主站点的数据对目标页的DOM进行操作.由于代理页与目标页同域, 所以代理页可以获取并操作目标页的document对象.

前提条件

需要将proxy.html放到与内嵌的iframe页同域的服务下, 并且可以被访问到.

使用

支持2种调用方式: 使用 postMessage 和 URL params.

postMessage

该方法需要使用 JSON.stringify 将对象转为字符串.

// React
function IframeProxy(props) {
    handleLoad = (e) => {
        e.target.contentWindow.postMessage(JSON.stringify({
            iframe: `<iframe name="target" title="target" className="target" src="http://www.targetdomain.com/target.html" frameBorder="0" scrolling="no" style="width: 100%;height:100%"></iframe>`,
            includeStyle: `
                body {
                    background-color: yellow;
                }
                header {
                    display: none;
                }
                footer {
                    display: none;
                }
            `,
            includeScript: `
                window.addEventListener('load', function() {
                    alert(document.querySelector('body').innerHTML);
                });
            `,
            importStyle: `http://www.mydomain.com/assets/css/import.css`,
            importScript: `http://www.mydomain.com/assets/js/import.js`
        }), 'https://www.target.com');
    }

    return <iframe name="proxy" title="proxy" className="proxy" width="100%" height="100%" onLoad={handleLoad} src={`http://www.targetdomain.com/proxy.html?origin=${window.location.protocol}//${window.location.host}`} frameBorder="0" scrolling="no"></iframe>;
}

URL params

该方法需要将传递的内容用 encodeURIComponent 编码.

// React
function IframeProxy(props) {
    var params = 'iframe=' + encodeURIComponent(`
        <iframe name="target" title="target" className="target" src="http://www.targetdomain.com/target.html" frameBorder="0" scrolling="no" style="width: 100%;height:100%"></iframe>
    `);

    params += '&includeStyle=' + encodeURIComponent(`
        body {
            background-color: red;
        }
        header {
            display: none;
        }
        footer {
            display: none;
        }
    `);

    params += '&includeScript=' + encodeURIComponent(`
        window.addEventListener('load', function(event) {
            alert(document.querySelector('body').innerHTML);
        });
    `);

    params += '&importStyle=' + encodeURIComponent(`
        http://www.mydomain.com/assets/css/import.css
    `);

    params += '&importScript=' + encodeURIComponent(`
        http://www.mydomain.com/assets/js/import.js
    `);

    return <iframe name="proxy" title="proxy" className="proxy" width="100%" height="100%" src={`http://www.targetdomain.com/proxy.html?${params}`} frameBorder="0" scrolling="no"></iframe>;
}

API

<iframe src="http://www.targetdomain.com/proxy.html?params"></iframe>;

params: {
    origin: 当前站点的域名, 使用postMessage方式时必填, proxy用来校验发出消息的源域名.
    iframe: 需要内嵌的iframe标签字符串,
    includeStyle: 希望添加到iframe页的css内容,
    includeScript: 希望添加到iframe页的js内容,
    importStyle: 希望引入到iframe页的css资源链接, 如果目标站点使用安全协议(https), 资源链接使用非安全协议(http), 该功能会被浏览器禁止.
    importScript: 希望引入到iframe页的js资源链接, 如果目标站点使用安全协议(https), 资源链接使用非安全协议(http), 该功能会被浏览器禁止.
}

注意: 处于安全问题, 默认禁用了 includeScript 和 importScript 功能, 如需启用在proxy.html中将变量 ENABLED_JS_INCLUDE 设置为 true 即可.

资源

https://github.com/stephenliu1944/cross-domain-iframe-proxy

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3 优势以及网页设计师如何使用CSS3技术
Jul 29 HTML / CSS
css3简单练习实现遨游浏览器logo的绘制
Jan 30 HTML / CSS
CSS3条纹背景制作的实战攻略
May 31 HTML / CSS
详解Sticky Footer 绝对底部的两种套路
Nov 03 HTML / CSS
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
Jan 31 HTML / CSS
html5拍照功能实现代码(htm5上传文件)
Dec 11 HTML / CSS
HTML5 video播放器全屏(fullScreen)方法实例
Apr 24 HTML / CSS
详解HTML5中的元素与元素
Aug 17 HTML / CSS
HTML5 Canvas 旋转风车绘制
Aug 18 HTML / CSS
html svg生成环形进度条的实现方法
Sep 23 HTML / CSS
详解淘宝H5 sign加密算法
Aug 25 HTML / CSS
HTML5+CSS+JavaScript实现捉虫小游戏设计和实现
Oct 16 HTML / CSS
html如何对span设置宽度
Oct 30 #HTML / CSS
关于iframe跨域使用postMessage的实现
Oct 29 #HTML / CSS
使用canvas生成含有微信头像的邀请海报没有微信头像问题
Oct 29 #HTML / CSS
Html5与App的通讯方式详解
Oct 24 #HTML / CSS
html+js 实现markdown编辑器效果
Oct 23 #HTML / CSS
高清屏下canvas重置尺寸引发的问题的解决
Oct 14 #HTML / CSS
HTML table 表格边框的实现思路
Oct 12 #HTML / CSS
You might like
php方法调用模式与函数调用模式简例
2011/09/20 PHP
php中计算程序运行时间的类代码
2012/11/03 PHP
Zend studio文件注释模板设置方法
2013/09/29 PHP
Yii核心组件AssetManager原理分析
2014/12/02 PHP
基于php的微信公众平台开发入门实例
2015/04/15 PHP
PHP查找与搜索数组元素方法总结
2015/06/12 PHP
php强大的时间转换函数strtotime
2016/02/18 PHP
javasript实现密码的隐藏与显示
2015/05/08 Javascript
jquery中键盘事件小结
2016/02/24 Javascript
BootStrap与validator 使用笔记(JAVA SpringMVC实现)
2016/09/21 Javascript
Angular2中如何使用ngx-translate进行国际化
2017/05/21 Javascript
JS实现手写parseInt的方法示例
2017/09/24 Javascript
使用Angular CLI进行单元测试和E2E测试的方法
2018/03/24 Javascript
浅谈Postman解决token传参的问题
2018/03/31 Javascript
详解微信小程序canvas圆角矩形的绘制的方法
2018/08/22 Javascript
解决iview多表头动态更改列元素发生的错误的方法
2018/11/02 Javascript
Nodejs监控事件循环异常示例详解
2019/09/22 NodeJs
利用Python脚本生成sitemap.xml的实现方法
2017/01/31 Python
Python 文件处理注意事项总结
2017/04/10 Python
Python基于回溯法子集树模板解决野人与传教士问题示例
2017/09/11 Python
Puppeteer使用示例详解
2019/06/20 Python
Python实现疫情通定时自动填写功能(附代码)
2020/05/27 Python
python爬虫构建代理ip池抓取数据库的示例代码
2020/09/22 Python
html5需遵循的6个设计原则
2016/04/27 HTML / CSS
沃达丰英国有限公司:Vodafone英国
2019/04/16 全球购物
银行会计业务的个人自我评价
2013/11/02 职场文书
五一家具促销方案
2014/01/10 职场文书
团委竞选演讲稿
2014/04/24 职场文书
“四风”问题自我剖析材料思想汇报
2014/09/23 职场文书
安全保证书
2015/01/16 职场文书
2015年社区创卫工作总结
2015/04/21 职场文书
PHP 对接美团大众点评团购券(门票)的开发步骤
2021/04/03 PHP
解决MultipartFile.transferTo(dest) 报FileNotFoundExcep的问题
2021/07/01 Java/Android
Nginx防盗链与服务优化配置的全过程
2022/01/18 Servers
vue3语法糖内的defineProps及defineEmits
2022/04/14 Vue.js
python实现双链表
2022/05/25 Python