我有一个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>显然将#changed和#whatfrom 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);
}