跨域修改iframe页面内容详解_html5教程技巧

来源:脚本之家  责任编辑:小易  

要解释这个问题,首先要解释两个技术点。每个“窗口”都是一个JS Runtime,即JS的运行时。如果只有一个窗口,那么就只有一个Runtime;如果一个窗口下面还有一个iframe,那么就有两个Runtime;以此类推。Runtime之间互操作(或者通信)是有跨域限制的。也就是说,如果这个窗口本身是a.baidu.com域名下的页面,那么如果这个页面下还有一个iframe,这个iframe中加载的页面是b.baidu.com域名下的。那么外层的JS。就不能跟这个iframe中的内容互操作(或者通信)。因此外层Runtime中的JS想操作内层iframe中的内容,就必须要避免跨域限制。要么内层iframe加载页面的域名跟外层是一样的。要么就是需要在内层iframe加载的页面中执行document.domain='baidu.com';从而设置跟外层的主域相同。例如,当前页面是a.baidu.com/test.htmlpadding:0px;color:rgb(69,69,69);font-family:arial,宋体,sans-serif,tahoma,'Microsoft YaHei';font-size:14px;font-style:normal;font-variant-caps:normal;font-weight:normal;letter-spacing:normal;orphans:auto;text-align:start;text-indent:0px;text-transform:none;white-space:normal;widows:auto;word-spacing:0px;webkit-tap-highlight-color:rgba(26,26,26,0.301961);webkit-text-size-adjust:auto;webkit-text-stroke-width:0px;iframe中加载的页面内容如下:恭喜操作到内部iframe中的元素了!document.domain='baidu.com';在HTML5中新增了postMessage的API。可以方便窗口跟内部iframe之间进行通信,并且可以实现跨主域通信。但是有一些限制,1.老版本的浏览器一般不支持。2.父窗口只能向iframe中发送信息,iframe只能收消息,且父窗口不能直接操作iframe中的内容。3.父窗口发送的数据也是有限制的。只能发送基本数据类型或者plain objectwww.zgxue.com防采集请勿采集本网。

原理

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

因为,你可以换另一个角度来思考,如果可以让javascript跨域读取iframe内容的话,会造成很严重的安全问题。比如我可以在我的页面中套一个iframe,内嵌你的微博、京东等账号,然后用javascript读取你的用户

前提条件

用iframe嵌套页面是,如果父页面要获取子页面里面的内容,可以使用contentWindow或者contentDocument,其区别如下: a>contentWindow 这是个只读属性,返回指定的iframe的窗口对象。它虽然不是标准的一

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

1.htm母窗口代码: charset=gb2312\"> New Page 1 function gogo() { document.frames[\"f\"].document.styleSheets.mycss.addRule(\"P\",\"color:green\");} iframe id=\"f\"src=2.

使用

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

跨域是没有权限的,需要将两个站点部署在同一个域里面才有权限访问iframe里面的页面中的控件以及js方法。

postMessage

没看明白你要怎么调用 parent.document.getElementById(\"iframe\").contentWindow.location.href 这个可以获取到iframe当前调用页面地址

该方法需要使用 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

单纯的css是无法控制iframe内元素的样式的。你可以将css文件在iframe目标页里面引用或者通过js去控制iframe内元素的样式内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • 关于iframe跨域使用postmessage的实现
  • html5 window/iframe跨域传递消息 api介绍
  • iframe 高度自适应(兼容ie/firefox、同域/跨域)
  • 修改iframe样式 跨域的问题解决办法
  • JavaScript 怎么跨域获取 iframe 中的内容
  • 想利用jquery 改变 跨域 iframe 中的内容样式 该怎么做呢?
  • js跨域改变iframe页面字体颜色怎么实现?
  • 如何用javascript 跨域获取iframe子页面的元素信息
  • 如何用javascript 跨域获取iframe子页面的元素信息
  • 在父页面中如何修改iframe中嵌套的子页面的字体大小和样式,急!急!貌似涉及到了跨域的问题希望各
  • JavaScript 怎么跨域获取 iframe 中的内容
  • js跨域调用iframe子页面的函数 没有权限。copy的就别浪费时间了
  • JavaScript 怎么跨域获取 iframe 中的内容
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全主页网页制作html5跨域iframe关于iframe跨域使用postmessage的实现html5 window/iframe跨域传递消息 api介绍iframe 高度自适应(兼容ie/firefox、同域/跨域)html/xhtmlhtml5cssxml/xsltdreamweaver教程frontpage教程心得技巧css 如何让背景图片拉伸填充避免重复显示html5 input placeholder 颜色修改示例基于第一个phonegap(cordova)的应用详解 html5配合css3实现带提示文字的输入框(摆脱js)html5定位获取当前位置并在百度地图上显示将html5 canvas的内容保存为图片借助todataurl实现html5中如何显示视频呢 html5视频播放demo让ie支持html5的方法微信浏览器取消缓存的方法html5的存储方式sessionstorage和localstorage详解基于html5+tracking.js实现刷脸支付功能html中meta标签及keywords详解移动端h5页面根据屏幕适配的四种方案html5移动端自适应布局的实现html里显示pdf、word、xls、ppt的方法示例html5 直播疯狂点赞动画实现代码 附源码html5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷canvas 基础之图像处理的使用用canvas显示验证码的实现html5给汉字加拼音收起展开组件的实现代码
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved