iframe触发内嵌网页的事件和父子网页的通信方式

通过 iframe 触发内嵌网页的事件时，需要注意以下几个方面：

1. 跨域问题：

   • 如果 iframe 的源与主页面的源不同（即跨域），则无法直接访问 iframe 内部的文档和元素。浏览器会因为同源策略而阻止这种操作。
   • 解决方法：确保 iframe 和主页面在同一域名下，或者使用 CORS（跨域资源共享）或 postMessage 进行跨域通信。

2. iframe 加载完成：

   • 确保 iframe 完全加载后再进行操作。可以使用 @load 事件来监听 iframe 的加载完成状态。

3. 元素存在性检查：

   • 在尝试操作元素之前，确保该元素确实存在于 iframe 的文档中。

4. 事件触发方式：

   • 使用 element.click() 或 element.dispatchEvent(new MouseEvent('click')) 来触发点击事件。

5. 错误处理：

   • 添加适当的错误处理机制，以便在操作失败时能够捕获并处理错误。

     6. 事件通信：

             1. 在使用 iframe 时，常见的通讯方式之一是使用 postMessage 方法。这种方法允许在不同源的窗口之间进行安全的通信。 

以下是一个完整的示例，展示了如何在 Vue 组件中通过 iframe 触发内嵌网页的事件：

给内嵌页面发送消息

<template>
  <div>
    <iframe
      :src='要内嵌的链接'
      style="border: none; width: 100%; height: 100%"
      @load="load"
      ref="iframeDom"
    ></iframe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataMessage: ''
    };
  },
  methods: {
    load() {
      try {
        const iframe = this.$refs.iframeDom;//获取到iframe元素
        const element = iframe.contentWindow.document.querySelector('内嵌网页的元素');//获取到内嵌网页的你要触发事件的元素
        if (element) {  //确定元素存在
            // 直接调用 click()或者 MouseEvent 方法触发点击事件
            // const clickEvent = new MouseEvent('click', {。//创建点击事件
            //     bubbles: true,   //如果设置为 true，事件将从目标元素向上冒泡到其祖先元素，直到文档根节点。如果设置为 false，事件不会冒泡。
            //     cancelable: true,//如果设置为 true，事件可以被 event.preventDefault() 方法取消。如果设置为 false，事件不能被取消
            //     view: window     //指定事件发生的视口（窗口）。通常情况下，这个值是当前的 window 对象。或者iframe.contentWindow指定事件发生的视口为 iframe 的窗口对象，而不是主窗口对象。这对于确保事件在正确的上下文中发生非常重要，尤其是在跨域情况下。
            // });
            //element.dispatchEvent(clickEvent);触发点击事件
            element.click();
        } else {
          console.error('Element #shop123456789 not found in the iframe.');
        }
      } catch (error) {
        console.error('Error accessing iframe content:', error);
      }
    },
    onIframeLoad() { //发送信息函数
      const iframe = this.$refs.iframeDom;
      // 发送消息到 iframe 第一个参数：要发送的消息，可以是任何 JSON 可序列化的数据。第二个参数：目标窗口的源（origin），可以是具体的 URL（如 https://example.com），也可以是通配符 * 表示任何源。为了安全起见，建议指定具体的源。
      iframe.contentWindow.postMessage({ 数据 }, '*'); 
    },
    handleIframeMessage(event) { //接收信息函数
      // event.data: 收到的消息内容。event.origin: 发送消息的窗口的源。event.source: 发送消息的窗口对象，可以用来回发消息。
      // 检查消息来源 例如来源是https://example.com，如果是 * 则不用判断event.origin
      if (event.origin !== 'https://example.com') {
        return;
      }
      console.log('Received message from iframe:', event.data);
      this.dataMessage = event.data;
    }
  },
  created() {
    // 监听来自 iframe 的消息
    window.addEventListener('message', this.handleIframeMessage);
  },
  beforeDestroy() {
    // 移除消息监听器
    window.removeEventListener('message', this.handleIframeMessage);
  }
};
</script>

<style scoped>
/* 你的样式 */
</style>

接收来自父页面的消息

// 在 iframe 页面中监听来自父页面的消息
window.addEventListener('message', function(event) {
  // 检查消息来源 例如来源是https://example.com，如果是 * 则不用判断event.origin
  if (event.origin !== 'https://parent.com') {
    return;
  }
  console.log('Received message from parent:', event.data);
  // 处理消息
});
// 内嵌页面向父元素发送信息
 function sendMessage() {
    window.parent.postMessage({ 要发的内容 }, '*');
 }

// 安全注意事项
// 检查消息来源：始终检查 event.origin，确保消息来自预期的源。
// 指定目标源：在使用 postMessage 时，尽量指定具体的目标源，而不是使用通配符 *。
// 数据验证：对接收到的数据进行验证，确保其符合预期格式。

属性：（一般不需要添加太多属性，视需求而定）

<iframe> 标签是 HTML 中用于嵌入另一个 HTML 文档的元素。它有许多属性，可以帮助你控制嵌入的内容和行为

1. src

• 描述：指定要嵌入的文档的 URL。
• 示例：

  <iframe src="https://www.example.com"></iframe>

2. srcdoc

• 描述：指定要在 <iframe> 中显示的 HTML 内容。这个属性优先于 src 属性。
• 示例：

  <iframe srcdoc="<h1>Hello, World!</h1>"></iframe>

3. name

• 描述：为 <iframe> 指定一个名称，可以用于表单提交的目标窗口或链接的目标窗口。
• 示例：

  <iframe name="myFrame" src="https://www.example.com"></iframe> <a href="https://www.example.com" target="myFrame">Open in iframe</a>

4. sandbox

• 描述：启用一个额外的安全层，限制 <iframe> 的功能。可以指定多个值来启用不同的限制。
• 常用值：
  • allow-forms：允许 <iframe> 中的表单提交。
  • allow-pointer-lock：允许 <iframe> 使用指针锁定 API。
  • allow-popups：允许 <iframe> 打开新窗口。
  • allow-same-origin：允许 <iframe> 与父页面同源。
  • allow-scripts：允许 <iframe> 运行脚本。
  • allow-top-navigation：允许 <iframe> 导航顶层窗口。
• 示例：

  <iframe src="https://www.example.com" sandbox="allow-scripts allow-same-origin"></iframe>

5. seamless

• 描述：使 <iframe> 与其所在的文档无缝集成，例如，去除边框和滚动条。
• 注意：此属性在现代浏览器中已不推荐使用。
• 示例：

  <iframe src="https://www.example.com" seamless></iframe>

6. width 和 height

• 描述：设置 <iframe> 的宽度和高度。
• 示例：

  <iframe src="https://www.example.com" width="600" height="400"></iframe>

7. allow

• 描述：指定 <iframe> 可以使用的功能，主要用于增强隐私保护。
• 常用值：
  • accelerometer：允许使用加速度计。
  • autoplay：允许自动播放媒体。
  • camera：允许使用摄像头。
  • encrypted-media：允许使用加密媒体扩展。
  • fullscreen：允许全屏模式。
  • geolocation：允许使用地理位置。
  • gyroscope：允许使用陀螺仪。
  • microphone：允许使用麦克风。
  • midi：允许使用 MIDI 设备。
  • payment：允许使用支付请求 API。
  • picture-in-picture：允许使用画中画模式。
  • vr：允许使用虚拟现实设备。
• 示例：

  <iframe src="https://www.example.com" allow="geolocation; microphone"></iframe>

8. referrerpolicy

• 描述：指定 <iframe> 请求的引用策略。
• 常用值：
  • no-referrer：不发送引用信息。
  • no-referrer-when-downgrade：从 HTTPS 到 HTTP 时不发送引用信息。
  • origin：发送源信息。
  • origin-when-cross-origin：跨域时发送源信息。
  • same-origin：同源时发送完整引用信息。
  • strict-origin：发送源信息，但降级时不发送。
  • strict-origin-when-cross-origin：跨域时发送源信息，降级时不发送。
  • unsafe-url：发送完整引用信息。
• 示例：

  <iframe src="https://www.example.com" referrerpolicy="no-referrer"></iframe>

9. loading

• 描述：指定 <iframe> 的加载策略。
• 常用值：
  • eager：立即加载。
  • lazy：延迟加载，直到进入视口。
• 示例：

  <iframe src="https://www.example.com" loading="lazy"></iframe>

10. allowfullscreen

• 描述：允许 <iframe> 内的内容进入全屏模式。
• 示例：

  <iframe src="https://www.example.com" allowfullscreen></iframe>

11. allowpaymentrequest

• 描述：允许 <iframe> 内的内容使用支付请求 API。
• 示例：

  <iframe src="https://www.example.com" allowpaymentrequest></iframe>

12. csp

• 描述：指定 <iframe> 的内容安全策略。
• 示例：

  <iframe src="https://www.example.com" csp="default-src 'self'; script-src 'none'"></iframe>

13. fetchpriority

• 描述：指定 <iframe> 资源的加载优先级。
• 常用值：
  • auto：默认优先级。
  • high：高优先级。
  • low：低优先级。
• 示例：

  <iframe src="https://www.example.com" fetchpriority="low"></iframe>

14. title

• 描述：为 <iframe> 提供一个描述性的标题，用于辅助技术和搜索引擎。
• 示例：

  <iframe src="https://www.example.com" title="Example Frame"></iframe>

15. aria-label

• 描述：为 <iframe> 提供一个 ARIA 标签，用于辅助技术。
• 示例：

  <iframe src="https://www.example.com" aria-label="Example Frame"></iframe>

16. aria-labelledby

• 描述：指定一个元素的 ID，该元素的文本将作为 <iframe> 的标签。
• 示例：

  <div id="frameLabel">Example Frame</div> <iframe src="https://www.example.com" aria-labelledby="frameLabel"></iframe>

17. aria-describedby

• 描述：指定一个元素的 ID，该元素的文本将作为 <iframe> 的描述。
• 示例：

  <div id="frameDescription">This is an example frame.</div> <iframe src="https://www.example.com" aria-describedby="frameDescription"></iframe>

18. aria-hidden

• 描述：指示 <iframe> 是否对辅助技术隐藏。
• 示例：

  <iframe src="https://www.example.com" aria-hidden="true"></iframe>

19. role

• 描述：指定 <iframe> 的 ARIA 角色。
• 示例：

  <iframe src="https://www.example.com" role="application"></iframe>