*新闻详情页*/>
基本原理
主站点嵌入代理商网页页面, 并向代理商页传送数据信息, 代理商页依据主站点的数据信息对总体目标页的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
以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。
Copyright © 2002-2020 商城网站建设_微商好助手_微商引流_电商网站模板_微信商家小程序 版权所有 (网站地图) 粤ICP备10235580号