js 获取iframe内的元素

最新推荐文章于 2024-04-19 11:04:27 发布

莉莉安oi

最新推荐文章于 2024-04-19 11:04:27 发布

阅读量2.2k

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_43745973/article/details/128344824

版权

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="../javascript/jquery/jquery-3.6.1.min.js"></script>
  <title>Document</title>
</head>

<body>
  <div id="iframe-box">

  </div>
  <script>
    $(function () {
      // $('.layui-tab').append(`<iframe id="myiframe" src="http://127.0.0.1:5500/mkl/page/iframe.html"  frameborder="0" width="100%" height="1200px"></iframe>`)
      /**
       * @description: 配置及引入iframe
       * @return void
       */

      // var iframe = document.getElementById("myiframe");
      // if (iframe.attachEvent) {
      //   iframe.attachEvent("onload", function () {
      //     //iframe加载完成后你需要进行的操作  
      //   });
      // } else {
      //   iframe.onload = function () {
      //     //iframe加载完成后你需要进行的操作  
      //     console.log($('.nihao'));
      //   };
      // }
      setNewIframe()
    })

    function setNewIframe () {
      let iframe = document.createElement('iframe')
      iframe.src = 'http://127.0.0.1:5500/mkl/page/iframe.html'
      iframe.height = 500
      iframe.width = '100%'
      iframe.id = 'doc_iframe'

      //onload，iframe加载完成后的回调
      if (iframe.attachEvent) {
        iframe.attachEvent('onload', () => {
          getIframeDomRemove() //移除iframe不需要的元素
        })
      } else {
        iframe.onload = () => {
          getIframeDomRemove() //移除iframe不需要的元素
        }
      }
      document.getElementById('iframe-box')?.appendChild(iframe) //向指定dom插入iframe
    }



    /**
 * @description: 移除iframe不需要的元素
 * @return void
 */
    function getIframeDomRemove () {
      let iframe = document.getElementById('doc_iframe')
      let iframe_head =
        iframe.contentDocument.getElementsByClassName('nihao')?.[0]
      let iframe_footer =
        iframe?.contentDocument.getElementsByClassName('nihao')?.[0]
      console.log(iframe_head);
      // console.log($('.nihao'));

      // iframe_head && iframe_head.style.display = 'none'
      // iframe_footer && iframe_footer.style.display = 'none'
    }
    // var nowTime = new Date()
    // // console.log(nowTime.getFullYear());
    // console.log(monthEnglish[nowTime.getMonth() - 1]);
    // // console.log(nowTime.getDate());
    // var monthEnglish = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
    // console.log(displayDate);
  </script>



</body>

</html>