iframe用法

小鱼儿心语：有时候必须一个人去承受，所有的不快乐和心酸，因为有些事就没有感同身受，只有冷暖自知！

今天给大家分享一下 网页内显示网页 iframe的用法，复制修改 url 地址即可使用：

<iframe
      id="mainIframe"
      class="bg"
      ref="mainIframe"
      name="mainIframe"
      :src="填写网页地址"
      frameborder="0"
      scrolling="auto"
      width="100%"
      height="100%"
    />

使用 iframe 作为链接的目标

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>

网页内显示网页 iframe 的用法就是这么简单，那么两个页面之间如果想要互相传值，应该怎么办呢，接下来，给大家揭晓：

1、首先本页面接收iframe传递过来的值：

window.addEventListener("message", function (res) {
      console.log('获取到iframe页面传递过来的值', res.data);
});

2、其次本页面传值给iframe页面时：

let iframe = document.getElementById("mainIframe");
iframe.contentWindow.postMessage({ type: "plice" }, "*");

• 如果遇到iframe页面有值可以传，但是iframe还没有完全加载出来，此时就需要通过onload判断iframe是否已加载完成：

document.getElementById("mainIframe").onload = function () {
     console.log('iframe已加载完成');
     let iframe = document.getElementById("mainIframe");
     iframe.contentWindow.postMessage({ type: "plice" }, "*");
};

iframe常用到的相关知识就给大家分享到这里，还有补充的可以随时私我哦~

如果你喜欢小鱼儿的文章，就用真心关注我一下吧^ w ^!