Question

我正在创建一个iframe，如下所示：

<!doctype html><html><head></head><body>
<iframe src="file:///C:/Users/DD/Desktop/myiframe.html" width=200 height=200 scrolling="no" frameborder=0></iframe>
</body></html>

在iframe中，我试图找到可能小于iframe大小的内容，但是我无法报告任何小于创建iframe的200像素大小的宽度

<!doctype html><html><head></head>
<body style="margin:0px;border:0px;padding:0px;font-size:0px;">
<img id="myimg" width=75 height=50>
<script>
var body = document.body, html = document.documentElement;
function consoleNow() {
  console.log("body.scrollWidth x Height = " +body.scrollWidth+" x "+body.scrollHeight);
  console.log("body.offsetWidth x Height = " +body.offsetWidth+" x "+body.offsetHeight);
  console.log("html.scrollWidth x Height = " +html.scrollWidth+" x "+html.scrollHeight);
  console.log("html.offsetWidth x Height = " +html.offsetWidth+" x "+html.offsetHeight);
  console.log("body.offsetWidth x Height = " +body.offsetWidth+" x "+body.offsetHeight);
  console.log("html.clientWidth x Height = " +html.clientWidth+" x "+html.clientHeight);
  console.log("-----------------");
}
consoleNow();
function increaseSize() {
  document.getElementById("myimg").style.width = "150px";
  document.getElementById("myimg").style.height = "100px";
	consoleNow();
}
setTimeout(increaseSize,2000);
</script></body></html>

Here are the console outputs with before image resize and after:
body.scrollWidth x Height = 200 x 50
body.offsetWidth x Height = 200 x 50
html.scrollWidth x Height = 200 x 200
html.offsetWidth x Height = 200 x 50
body.offsetWidth x Height = 200 x 50
html.clientWidth x Height = 200 x 200
-----------------
body.scrollWidth x Height = 200 x 100
body.offsetWidth x Height = 200 x 100
html.scrollWidth x Height = 200 x 200
html.offsetWidth x Height = 200 x 100
body.offsetWidth x Height = 200 x 100
html.clientWidth x Height = 200 x 200
-----------------

在那个iframe中，我最初将内容（图像）的大小调整为75x50，但是所有已知/推荐的方法报告的宽度均为200。两秒钟后，我将图像的大小更改为150x100，但仍然得到了错误的宽度。说到高度，我得到了很多数字。

我希望答案将是要应用于正文的CSS属性，但我不确定会是什么。

Answer 1

width的CSS body属性为auto（默认值），因此它占用了尽可能多的空间。由于overflow设置为hidden，因此，如果子元素较宽，则不会超出该范围。

可用空间是包含文档的框架的宽度。

如果要测量体内某些物体的宽度，请测量该物体的宽度。

为什么我的iframe文档宽度与iframe宽度相同？

1 个答案: