跨域修改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 相关文章推荐
CSS实现限制字数功能当对象内文本溢出时显示省略标记
Aug 20 HTML / CSS
CSS3 实现弹幕的示例代码
Aug 07 HTML / CSS
详解HTML5表单新增属性
Dec 21 HTML / CSS
利用HTML5中Geolocation获取地理位置调用Google Map API在Google Map上定位
Jan 23 HTML / CSS
HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注
Jan 31 HTML / CSS
HTML 5.1来了 9月份正式发布 更新内容预览
Apr 26 HTML / CSS
纯HTML5+CSS3制作生日蛋糕(代码易懂)
Nov 16 HTML / CSS
canvas 如何绘制线段的实现方法
Jul 12 HTML / CSS
使用html5实现表格实现标题合并的实例代码
May 13 HTML / CSS
CSS3常见动画的实现方式
Apr 14 HTML / CSS
HTML基础详解(上)
Oct 16 HTML / CSS
HTML实现仿Windows桌面主题特效的实现
Jun 28 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小技巧之JS和CSS优化工具Minify的使用方法
2014/05/19 PHP
php随机取mysql记录方法小结
2014/12/27 PHP
PHP定时执行任务实现方法详解(Timer)
2015/07/30 PHP
php使用flock阻塞写入文件和非阻塞写入文件的实例讲解
2017/07/10 PHP
PHP常用函数之格式化时间操作示例
2019/10/21 PHP
基于JQuery的Select选择框的华丽变身
2011/08/23 Javascript
mailto的使用技巧分享
2012/12/21 Javascript
JavaScript 创建运动框架的实现代码
2013/05/08 Javascript
JQuery教学之性能优化
2014/05/14 Javascript
Jquery左右滑动插件之实现超级炫酷动画效果附源码下载
2015/12/02 Javascript
JS调用某段SQL语句的方法
2016/10/20 Javascript
Angular2 http jsonp的实例详解
2017/08/31 Javascript
Three.js如何用轨迹球插件(trackball)增加对模型的交互功能详解
2017/09/25 Javascript
基于javascript中的typeof和类型判断(详解)
2017/10/27 Javascript
微信小程序自定义带价格显示日历效果
2018/12/29 Javascript
一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)
2019/04/19 Javascript
Vue 使用Props属性实现父子组件的动态传值详解
2019/11/13 Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
2020/01/08 Javascript
JavaScript检测浏览器是否支持CSS变量代码实例
2020/04/03 Javascript
[01:30:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster BO3 第二场 2月2日
2021/03/11 DOTA
在Python中执行系统命令的方法示例详解
2017/09/14 Python
sublime python3 输入换行不结束的方法
2018/04/19 Python
python实现输入数字的连续加减方法
2018/06/22 Python
Python之修改图片像素值的方法
2019/07/03 Python
如何在python开发工具PyCharm中搭建QtPy环境(教程详解)
2020/02/04 Python
keras tensorflow 实现在python下多进程运行
2020/02/06 Python
Python基于Faker假数据构造库
2020/11/30 Python
Tessabit日本:集世界奢侈品和设计师品牌的意大利精品买手店
2020/01/07 全球购物
C,C++的几个面试题小集
2013/07/13 面试题
物流专业毕业生推荐信范文
2013/11/18 职场文书
大专毕业生自我鉴定
2013/11/21 职场文书
九年级家长会邀请函
2014/01/15 职场文书
保安岗位职责
2014/02/21 职场文书
创业融资计划书
2014/04/25 职场文书
小学模范班主任事迹材料
2014/05/13 职场文书
党委领导班子整改方案
2014/09/30 职场文书