zoukankan      html  css  js  c++  java
  • 通过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)
  • 相关阅读:
    保存时出错jup
    Spyder默认页面布局调整
    根据所处位置提取单元格内容的函数(left、right、mid)和查找字符串位于单元格内容第几位的函数(find)
    excel打印出现多余空白页
    Excel的布尔值运算
    excel VBA一个fuction同时执行多个正则表达式,实现方法
    excel VBA把一个单元格内容按逗号拆分并依次替换到另一个单元格的括号里面(本题例子,把文本中的括号换成{答案}的格式,并按顺序填空)
    excel自动记录项目完成进度,是否逾期,逾期/提前完成天数,计算天数可以把now()改为today()
    jquery循环动画
    jquery动画(控制动画隐藏、显示时间轴)
  • 原文地址:https://www.cnblogs.com/yasoPeng/p/9829951.html
Copyright © 2011-2022 走看看