使用vue嵌套本地HTML

最新推荐文章于 2024-06-14 13:50:53 发布

原创最新推荐文章于 2024-06-14 13:50:53 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

7 篇文章

订阅专栏

本文探讨了如何在Vue组件中正确使用contentWindow调用嵌套在iframe内的HTML元素，尤其是在生命周期钩子mounted中遇到的问题，强调了onload方法的重要性，并给出了相应的解决方案。

这是使用contentWindow调用本地HTML方法的一篇博客

调用vue嵌套本地HTML的坑

当我使用button获取时没有问题
在这里插入图片描述

     iframeValue(){
        var oIframe = document.getElementById('show-iframe');
        console.log(oIframe.contentWindow.document)
        console.log(oIframe.contentWindow.document.getElementById("loginip"))
      }

但是如果放在钩子函数moutend中

 mounted() {
      console.log("============")

        var oIframe = document.getElementById("show-iframe");
        //const deviceWidth = document.documentElement.clientWidth;
        const deviceHeight = document.documentElement.clientHeight;
        // oIframe.style.width = deviceWidth + 'px';
        console.log(deviceHeight );
        oIframe.style.height = deviceHeight * 0.97 + 'px';
        console.log(oIframe.style.height);

      oIframe.onload = function() {
        console.log("=====222=======")
        console.log("contentWindow", oIframe.contentWindow.document);
        console.log("contentWindow1", oIframe.contentWindow.document.getElementById("loginip"));


      }