通过js 实现 向页面插入js代码并生效,和页面postMessage通讯
此文章针对已经搭建好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通讯的更多相关文章
- 解决页面插入HTML代码后错位(HTML代码里的标签不完整导致错位)
这个的例子是从数据库读取出来的数据内容包含HTML导致页面错位问题! 解决办法如下: 首先过滤掉会跟JS冲突的字符,C#代码如下: string htmlc = Model.HtmlContents. ...
- Html页面插入flash代码
转自:http://www.educity.cn/jianzhan/402117.html 转自:http://www.cnblogs.com/yxc_fj/articles/1390621.html ...
- 常用的JS页面跳转代码调用大全
一.常规的JS页面跳转代码 1.在原来的窗体中直接跳转用 <script type="text/javascript"> window.location.href=&q ...
- JS页面跳转代码怎么写?总结了5种方法
我们在建站时有些链接是固定的,比如客服咨询链接,一般是第三方url,如果直接加上去不太专业,那么就想着用站内的页面做跳转,跳转用js比较多,那么JS页面跳转代码怎么写呢?ytkah在网上搜索了一下,大 ...
- jsp页面:js方法里嵌套java代码(是操作数据库的),如果这个js 方法没被调用,当jsp页面被解析的时候,不管这个js方法有没有被调用这段java代码都会被执行?
jsp页面:js方法里嵌套java代码(是操作数据库的),如果这个js 方法没被调用,当jsp页面被解析的时候,不管这个js方法有没有被调用这段java代码都会被执行? 因为在解析时最新解析的就是JA ...
- angular.js前端分层开发(页面和js代码分离,并将js代码分层)
一. 抽取模块成base.js文件// 定义模块: var app = angular.module("eshop",['pagination']); 二. 抽取服务成brandS ...
- 使用highlight.js高亮静态页面的语言代码
显示静态的代码其实html的pre标签基本可以满足需求了,至少不会将换行的文本显示成一堆字符串. 不过能使静态的文本能高亮显示,倒更炫酷一点.其实很简单的,引入highlight.js包,可以使用cd ...
- 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 ...
- 利用Chrome插件向指定页面植入js,劫持 XSS
资源来自:http://www.2cto.com/Article/201307/225986.html 首页 > 安全 > 网站安全 > 正文 利用Chrome插件向指定页面植入js ...
随机推荐
- poj 2117 去掉割点可以分得的联通图的个数模板
#include<stdio.h> #include<string.h> #define N 11000 /* 去掉一个割点后,询问可以分得的联通图的个数 */ struct ...
- CodeForces - 340 C - Tourist Problem
先上题目: A - Tourist Problem Time Limit:1000MS Memory Limit:262144KB 64bit IO Format:%I64d & ...
- HDU - 4074 - Sum
先上题目: Sum Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others)Total ...
- owin-startup方法
owin在根目录下有这个startup.cs文件,里面有个startup方法,这个和global.asax有什么区别呢? 测试一下执行顺序,是先执行了global.asax文件,再执行了startup ...
- windowsclient开发--为你clientsign一个签名证书
郑重声明:该方法自娱自乐,尽管写入了签名,可是在微软系统免签证书不是合格的. 什么是签名? 话不多说,上图(没图说个xx): 微信windowsclient.exe安装文件: 再看还有一个.exe文件 ...
- [\S\s]+ 可以匹配多行html,最常用的还是.*?
[\S\s]+ 可以匹配多行html,最常用的还是.*?
- Linux 查看负载
top iostat -x 1 10 free uptime cat /proc/cpuinfo cat /proc/meminfo src lsof 1,查看磁盘 df -h 2,查看内存大小 f ...
- P1290sk抓螃蟹
背景 sk,zdq想在hzy生日之际送hzy几只螃蟹吃... 描述 现有n只螃蟹,每个在一个二维作标上,保证没有任何两个螃蟹重合.sk伸手抓螃蟹 了,他怕螃蟹的攻击,当他捉一只螃蟹时,其他螃蟹都朝这只 ...
- Sublime Text 2 界面主题 推荐 Flatland
先搜索下THEME-FLATLAND 安装完后在preferences中选择settings-usr { "color_scheme": "Packages/Theme ...
- 使用NPOI实现简单的Excel导出功能
[1]NPOI是啥? NPOI是指构建在POI 3.x版本之上的一个程序,NPOI可以在没有安装Office的情况下对Word或Excel文档进行读写操作. POI是一个开源的Java读写Excel. ...