获取内联iframe的大小

Posted 2021-05-06

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了获取内联iframe的大小相关的知识，希望对你有一定的参考价值。

我有一个iframe内联src，如：

let src = `data:text/html;charset=UTF-8,<html>
    <body>
      <p>Content</p>
    </body>
  </html>`

加载页面时我正在创建iframe并将其添加到页面正文：

let iframe = document.createElement("iframe")
document.querySelector('body').appendChild(iframe)

然后我将src设置为iframe：

iframe.setAttribute('src', src)

如何在iframe内容中获取渲染的宽度和高度并设置为iframe的宽度和高度以及执行此操作的最佳方法（使用JS或CSS）

答案

我不确定你想要实现什么，所以我只回答关于获取元素比例并根据另一个元素相应地改变它们的问题部分。

实现这一目标的最简单方法可能是使用jQuery

$(function(){
  
  $('#changed').css({'height': $('#whatfrom').height(), 'width': $('#whatfrom').width()});  

});

#changed {
   height: 50px;
   width: 50px;
   outline: 1px solid red;
}

#whatfrom {
   margin-top: 10px;
   height: 150px;
   width: 100px;
   outline: 1px solid blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="changed">I'll take width and height of the div below me</div>
<div id="whatfrom">Watch.. the element above will take my width and height. What a copycat!</div>

另一答案

我所做的是使用about:blank作为src，这样你就可以轻松地从页面内部访问iframe而不会遇到“同源策略”问题

let html = `<p>Content</p>`;

let iframe = document.createElement("iframe")
document.body.appendChild(iframe);    

iframe.src = 'about:blank';

iframe.onload = function(){
  let win = this.contentWindow; 
  win.document.write(html);  
  console.log('inner width of iframe window=', win.innerWidth);  
}

JSFiddle DEMO

以上是关于获取内联iframe的大小的主要内容，如果未能解决你的问题，请参考以下文章