iframe 使用注意事项

2021-09-10 14:31:17 阅读：370 来源： 互联网

标签：postMessage container color 注意事项 window iframe 使用页面

iframe 使用注意事项

src 属性不支持混用 http 和 https 协议
使用 @load 来判断 frame 是否加载完毕，相当于 iframe<htmlElement>.onload 方法
获取嵌套页面关联数据必须使用 iframe<htmlElement>.contentWindow 方法，此方法存在跨域限制，需在外层页面配置代理

<template>
  <iframe id="frame" ref="frame" src="http://city.test.uupt.com/#/pages/orderlist" frameborder="0" scrolling="no" @load="loaded"></iframe>
</template>

<script>
  export default {
    methods: {
      loaded() {
        console.clear()
        console.log('Debugger: this.$refs.frame', this.$refs.frame.contentWindow)
      },
    },
  }
</script>

<style lang="scss">
  #frame {
    width: 100%;
    height: 100%;
  }
</style>

注意路由跳转混乱

在动态更改 iframe 中 src 后导致路由跳转混乱，当多次更改 iframe src 属性后，调用 router.go(-1) 并不能实现路由后退一级，而是将 iframe 当作一个窗口文档，调用了 iframe 的 window.history.go(-1) 而并未更改父页面的路由后退功能

此问题可以通过不使用更改 iframe src 属性的方式来访问具体内容，使用 window.location.replace(url) 更改 iframe 将访问的内容

父子页面通信

两个项目之间相关数据通信，由于浏览器跨域限制，子页面不可直接调用父页面方法，父页面同样不能调用子页面的方法

在确定 iframe 已经加载完毕后，可以使用 window.postMessage() 方法实现跨源数据通信，调用此方法后会在所有页面脚本执行完毕后向目标窗口派发一个 MessageEvent 消息

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <title>Post Message</title>
  </head>
  <body>
    <div>
      <div id="color">Frame Color</div>
    </div>
    <div>
      <iframe id="child" width="50%" src="http://localhost:3000//test.html" height="50vw" scrolling="auto" frameborder="0"></iframe>
    </div>
    <script type="text/javascript">
      window.onload = function () {
        document.getElementById('child').contentWindow.postMessage('getcolor', 'http://localhost:3000/')
      }
      window.addEventListener(
        'message',
        function (e) {
          const color = e.data
          document.getElementById('color').style.backgroundColor = color
        },
        false
      )
    </script>
  </body>
</html>

<!-- test.html -->
<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      html,
      body {
        height: 100%;
        margin: 0px;
      }
      #container {
        widht: 100%;
        height: 100%;
        background-color: rgb(204, 102, 0);
      }
    </style>
  </head>
  <body style="height:100%;">
    <div id="container" onclick="changeColor()">click to change color</div>
    <script type="text/javascript">
      const container = document.getElementById('container')
      window.addEventListener(
        'message',
        function (e) {
          if (e.source != window.parent) return
          const color = container.style.backgroundColor
          window.parent.postMessage(color, '*')
        },
        false
      )
      function changeColor() {
        const color = container.style.backgroundColor
        if (color == 'rgb(204, 102, 0)') {
          color = 'rgb(204, 204, 0)'
        } else {
          color = 'rgb(204,102,0)'
        }
        container.style.backgroundColor = color
        window.parent.postMessage(color, '*')
      }
    </script>
  </body>
</html>

适用于子页面需要调用父页面方法活使用父页面数据的场景，可以使用此方法在子页面向父页面发起通信，让父页面调用该方法，接收父页面相关数据

postMessage

postMessage 支持对象传递，但是由于对象传递存在浏览器差异，建议使用字符串传值

为什么不使用 iframe

Why Not Iframe

标签：postMessage,container,color,注意事项,window,iframe,使用,页面
来源： https://www.cnblogs.com/AAABingBingBing/p/15251173.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

iframe 使用注意事项

iframe 使用注意事项

为什么不使用 iframe