此文章针对已经搭建好jenkins和会使用iconfont图标库而写。

主要目标就是在不通过更改html文件,完成页面交互图标信息,因为美工最多可以上传代码并且自动发布,并不会在Html中加入我们想要通讯的代码。

*看一下最后的总结

*看一下最后的总结

*看一下最后的总结

有用的内容说三遍

应用场景:

当我双击任意一个图标的时候,应该把图标的class返回到主页面上,并且绑定数据

具体实现步骤。

1.页面嵌入iframe 。

  略过。。

<iframe class="ContentIfm" :src="Path + type + file"></iframe>

2.确定postMessage 生效。

图标页面需要生效的代码


var length = document.getElementsByClassName('iconfont').length
for (var i = 0; i < length; i++) {
document.getElementsByClassName('iconfont')[i].ondblclick = function() {
//具体想要返回什么值,可以自己修改js
var iconClass = this.parentNode.lastElementChild.innerText.split('.icon-')[1]
var iconName = this.parentNode.children[1].innerText
window.parent.postMessage(iconClass, '*')
alert('已经选中图表为 : < ' + iconName + ' >, 已返回' + iconClass)
}
}
 

主页面需要生效的代码

   mounted() {
const _this = this
window.addEventListener('message', function(rs) {
_this.$emit('getIcon', rs.data)
})
}

此时在页面中双击任何一个图标就已经可以返回你所需要的值了

3.在主页面中,通过js,向iframe嵌入js代码,使postMessage生效

 const ifrm = document.getElementsByClassName('ContentIfm')[0].contentDocument
const script = ifrm.createElement('script')
script.innerHTML = `
if (window.getEventListeners(document.getElementsByClassName('iconfont')[0]).dblclick === undefined) {
var length = document.getElementsByClassName('iconfont').length
for (var i = 0; i < length; i++) {
document.getElementsByClassName('iconfont')[i].ondblclick = function() {
var iconClass = this.parentNode.lastElementChild.innerText.split('.icon-')[1]
var iconName = this.parentNode.children[1].innerText
window.parent.postMessage(iconClass, '*')
alert('已经选中图表为 : < ' + iconName + ' >, 已返回' + iconClass)
}
}
}
`
ifrm.body.appendChild(script)

此时,js已经成功嵌入iframe中,并且可以得到返回得到的数据。

总结一下:

一共有两个技术点。

一:  页面的postMessage通讯

  子页面使用代码

  data: 将要发送到其他 window的数据。

    *   :指定哪些窗口接受消息

window.parent.postMessage('返回信息', '*')

  父页面使用的代码

    rs:  返回的序列化数据

  const _this = this
window.addEventListener('message', function(rs) {
alert(rs.data)
})

   PostMessage 说明: https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage

二:  向iframe中插入代码

  思路就是用

 用js给iframe 的body 用createElement创建script标签,然后appendChild到iframe中
const ifrm = document.getElementsByClassName('ContentIfm')[0].contentDocument
const script = ifrm.createElement('script')
script.innerHTML = `alert('写啥啥好使')`
ifrm.body.appendChild(script)

通过js 实现 向页面插入js代码并生效,和页面postMessage通讯的更多相关文章

  1. 解决页面插入HTML代码后错位(HTML代码里的标签不完整导致错位)

    这个的例子是从数据库读取出来的数据内容包含HTML导致页面错位问题! 解决办法如下: 首先过滤掉会跟JS冲突的字符,C#代码如下: string htmlc = Model.HtmlContents. ...

  2. Html页面插入flash代码

    转自:http://www.educity.cn/jianzhan/402117.html 转自:http://www.cnblogs.com/yxc_fj/articles/1390621.html ...

  3. 常用的JS页面跳转代码调用大全

    一.常规的JS页面跳转代码 1.在原来的窗体中直接跳转用 <script type="text/javascript"> window.location.href=&q ...

  4. JS页面跳转代码怎么写?总结了5种方法

    我们在建站时有些链接是固定的,比如客服咨询链接,一般是第三方url,如果直接加上去不太专业,那么就想着用站内的页面做跳转,跳转用js比较多,那么JS页面跳转代码怎么写呢?ytkah在网上搜索了一下,大 ...

  5. jsp页面:js方法里嵌套java代码(是操作数据库的),如果这个js 方法没被调用,当jsp页面被解析的时候,不管这个js方法有没有被调用这段java代码都会被执行?

    jsp页面:js方法里嵌套java代码(是操作数据库的),如果这个js 方法没被调用,当jsp页面被解析的时候,不管这个js方法有没有被调用这段java代码都会被执行? 因为在解析时最新解析的就是JA ...

  6. angular.js前端分层开发(页面和js代码分离,并将js代码分层)

    一. 抽取模块成base.js文件// 定义模块: var app = angular.module("eshop",['pagination']); 二. 抽取服务成brandS ...

  7. 使用highlight.js高亮静态页面的语言代码

    显示静态的代码其实html的pre标签基本可以满足需求了,至少不会将换行的文本显示成一堆字符串. 不过能使静态的文本能高亮显示,倒更炫酷一点.其实很简单的,引入highlight.js包,可以使用cd ...

  8. npm start a http server( 在windows的任意目录上开启一个http server 用来测试html 页面和js代码,不用放到nginx的webroot目录下!!)

    原文:https://stackabuse.com/how-to-start-a-node-server-examples-with-the-most-popular-frameworks/#:~:t ...

  9. 利用Chrome插件向指定页面植入js,劫持 XSS

    资源来自:http://www.2cto.com/Article/201307/225986.html 首页 > 安全 > 网站安全 > 正文 利用Chrome插件向指定页面植入js ...

随机推荐

  1. poj 2117 去掉割点可以分得的联通图的个数模板

    #include<stdio.h> #include<string.h> #define N 11000 /* 去掉一个割点后,询问可以分得的联通图的个数 */ struct ...

  2. CodeForces - 340 C - Tourist Problem

    先上题目: A - Tourist Problem Time Limit:1000MS     Memory Limit:262144KB     64bit IO Format:%I64d & ...

  3. HDU - 4074 - Sum

    先上题目: Sum Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others)Total ...

  4. owin-startup方法

    owin在根目录下有这个startup.cs文件,里面有个startup方法,这个和global.asax有什么区别呢? 测试一下执行顺序,是先执行了global.asax文件,再执行了startup ...

  5. windowsclient开发--为你clientsign一个签名证书

    郑重声明:该方法自娱自乐,尽管写入了签名,可是在微软系统免签证书不是合格的. 什么是签名? 话不多说,上图(没图说个xx): 微信windowsclient.exe安装文件: 再看还有一个.exe文件 ...

  6. [\S\s]+ 可以匹配多行html,最常用的还是.*?

    [\S\s]+ 可以匹配多行html,最常用的还是.*?

  7. Linux 查看负载

    top  iostat -x 1 10 free uptime cat /proc/cpuinfo cat /proc/meminfo src lsof 1,查看磁盘 df -h 2,查看内存大小 f ...

  8. P1290sk抓螃蟹

    背景 sk,zdq想在hzy生日之际送hzy几只螃蟹吃... 描述 现有n只螃蟹,每个在一个二维作标上,保证没有任何两个螃蟹重合.sk伸手抓螃蟹 了,他怕螃蟹的攻击,当他捉一只螃蟹时,其他螃蟹都朝这只 ...

  9. Sublime Text 2 界面主题 推荐 Flatland

    先搜索下THEME-FLATLAND 安装完后在preferences中选择settings-usr { "color_scheme": "Packages/Theme ...

  10. 使用NPOI实现简单的Excel导出功能

    [1]NPOI是啥? NPOI是指构建在POI 3.x版本之上的一个程序,NPOI可以在没有安装Office的情况下对Word或Excel文档进行读写操作. POI是一个开源的Java读写Excel. ...