微信扫一扫 分享朋友圈

已有 1507 人浏览分享

开启左侧

vue中iframe的使用教程

[复制链接]
1507 0
iframe在同域时能自由操作iframe和父框架的内容(DOM),在跨域时可以实现页面跳转。
<iframe id="iframe" :src="iframeSrc" style="height: calc(100% - 50px)" width="100%" frameborder="0"></iframe>
获取iframe里面的内容
iframe.contentWindow, 获取iframe的window对象
iframe.contentDocument, 获取iframe的document对象
const _iframe = document.getElementById('iframe').contentWindow
CDM跨域
如果你设置的iframe的域名和你top window的域名完全不同,可以使用CDM(cross document messaging)进行跨域消息的传递。
发送消息: 使用postmessage方法
postMessage(message, targetOrigin)
message: 传递给iframe的内容, 通常是string,最好不要传object对象,需要传对象时,使用JSON.stringfy转换。
targetOrigin: 接受你传递消息的域名,可以设置绝对路径,也可以设置""或者"/"。 表示任意域名都行,"/"表示只能传递给同域域名。
_iframe.postMessage(JSON.stringify(_obj), '*')
接受消息: 监听message事件
当targetOrigin接受到message消息之后,会触发message事件。 message提供的event对象上有3个重要的属性,data,origin,source.
    window.addEventListener('message', function (event) {
          console.log(event)
          if (event.origin === window.callBackUrl.iframeSrc) {
            _this.childData = event.data
            console.log(event.data)
            _this.saveForm()
          }

免责声明:
1,海欣资源网所发布的资源由网友上传和分享,不保证信息的正确性和完整性,且不对因信息的不正确或遗漏导致的任何损失或损害承担责任。
2,海欣资源网的资源来源于网友分享,仅限用于学习交流和测试研究目的,不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。
3,海欣资源网所发布的资源由网友上传和分享,版权争议与本站无关,您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。
4,如果您喜欢,请支持正版,购买正版,得到更好的正版服务,如有侵权,请联系我们删除并予以真诚的道歉,联系方式邮箱 haixinst@qq.com
海欣资源-企业信息化分享平台。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

0

关注

0

粉丝

37

主题
热度排行
回复排行
最新贴子

Archiver|手机版|海欣资源 ( 湘ICP备2021008090号-1 )|网站地图

GMT+8, 2024-11-11 14:58 , Gzip On, MemCached On.

免责声明:本站所发布的资源和文章均来自网络,仅限用于学习交流和测试研究目的,不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。 本站信息来自网络,版权争议与本站无关,您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。 如果您喜欢,请支持正版,购买正版,得到更好的正版服务,如有侵权,请联系我们删除并予以真诚的道歉。