时间:2021-05-08
原理
主站点内嵌代理页面, 并向代理页传递数据, 代理页根据主站点的数据对目标页的DOM进行操作.由于代理页与目标页同域, 所以代理页可以获取并操作目标页的document对象.
前提条件
需要将proxy.html放到与内嵌的iframe页同域的服务下, 并且可以被访问到.
使用
支持2种调用方式: 使用 postMessage 和 URL params.
postMessage
该方法需要使用 JSON.stringify 将对象转为字符串.
// Reactfunction 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 编码.
// Reactfunction 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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
页面需要嵌套在跨域的iframe中,而页面高度不固定,需要每个页面把自己的高度获得后,通过js通知iframe调整显示。而页面在获得自己的高度时,发现总是比预想
什么是跨域JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象。但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦。这里把涉
Iframe跨域自适应高度(兼容IE/Firefox)终极解决方案main.html在A域,被包含的iframe.html、proxy.html以及proxy.
嵌入iframe的页面,父页面与子页面均可以很轻松的在同域或跨子域的情况下进行读写操作;在完全不同域的情况下,也可以通过更改hash的方式进行通信。下面我在九个
如果你需要跨域上传内容到另外一个域名并且需要获取返回值,使用Asp.Net的作为代理是最好的办法,要是客户端直接提交到iframe中,由于跨域是无法用javas