跨域修改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属性选择符介绍
Oct 17 HTML / CSS
利用CSS3的checked伪类实现OL的隐藏显示的方法
Dec 18 HTML / CSS
CSS3 滤镜 webkit-filter详细介绍及使用方法
Dec 27 HTML / CSS
使用css3实现超炫的loading加载动画效果
May 07 HTML / CSS
基于html和CSS3制作酷炫的导航栏
Sep 23 HTML / CSS
使用HTML5 Canvas API中的clip()方法裁剪区域图像
Mar 25 HTML / CSS
HTML5本地存储之Web Storage应用介绍
Jan 06 HTML / CSS
用HTML5制作烟火效果的教程
May 12 HTML / CSS
HTML5本地存储和本地数据库实例详解
Sep 05 HTML / CSS
Html5 页面适配iPhoneX(就是那么简单)
Sep 05 HTML / CSS
HTML文本属性&amp;颜色控制属性的实现
Dec 17 HTML / CSS
html粘性页脚的具体使用
Jan 18 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
Discuz!5的PHP代码高亮显示插件(黑暗中的舞者更新)
2007/01/29 PHP
基于Zookeeper的使用详解
2013/05/02 PHP
基于php 随机数的深入理解
2013/06/05 PHP
PHP session_start()问题解疑(详细介绍)
2013/07/05 PHP
PHP修改session_id示例代码
2014/01/08 PHP
smarty模板引擎中内建函数if、elseif和else的使用方法
2015/01/22 PHP
js DataSet数据源处理代码
2010/03/29 Javascript
jquery下利用jsonp跨域访问实现方法
2010/07/29 Javascript
js输入框邮箱自动提示功能代码实现
2013/12/10 Javascript
Android中的jQuery:AQuery简介
2014/05/06 Javascript
用循环或if语句从json中取数据示例
2014/08/18 Javascript
node.js解决获取图片真实文件类型的问题
2014/12/20 Javascript
JavaScript中实现map功能代码分享
2015/06/11 Javascript
JavaScript检测上传文件大小的方法
2015/07/22 Javascript
Jquery ui datepicker设置日期范围,如只能隔3天【实现代码】
2016/05/04 Javascript
微信QQ的二维码登录原理js代码解析
2016/06/23 Javascript
Javascript vue.js表格分页,ajax异步加载数据
2016/10/24 Javascript
WebView启动支付宝客户端支付失败的问题小结
2017/01/11 Javascript
JavaScript中 DOM操作方法小结
2017/04/25 Javascript
Node.js 8 中的 util.promisify的详解
2017/06/12 Javascript
详解如何让Express支持async/await
2017/10/09 Javascript
微信小程序实现传递多个参数与事件处理
2019/08/12 Javascript
详解Vue后台管理系统开发日常总结(组件PageHeader)
2019/11/01 Javascript
pydev使用wxpython找不到路径的解决方法
2013/02/10 Python
Python KMeans聚类问题分析
2018/02/23 Python
详解pandas中MultiIndex和对象实际索引不一致问题
2019/07/23 Python
python设置表格边框的具体方法
2020/07/17 Python
Loreto Gallo英国:欧洲领先的在线药房
2021/01/21 全球购物
介绍一下游标
2012/01/10 面试题
招商业务员岗位职责
2013/12/16 职场文书
优秀毕业生自荐信范文
2014/01/01 职场文书
银行柜员求职自荐书
2014/06/18 职场文书
本科毕业生应聘自荐信范文
2014/06/26 职场文书
乒乓球比赛通知
2015/04/27 职场文书
用Python进行栅格数据的分区统计和批量提取
2021/05/27 Python
MySQL分区表实现按月份归类
2021/11/01 MySQL