通过ifame指向的页面高度调整iframe的高度资源-CSDN文库

78 浏览量 2020-12-10 21:01:17 上传评论收藏 14KB PDF 举报

通过ifame指向的页面高度调整iframe的高度 1.htm的代码: <iframe src=2.htm id=ifrm></iframe> 2.htm的代码: [removed] function resize() {parent.document.all.ifrm.height=document.body.scrollHeight; parent.document.all.ifrm.width=document.body.scrollWidth; } [removed] <body onload=”resize()”> </body> 在网页开发中，`iframe`（Inline Frame）是一种非常有用的元素，它允许我们在一个HTML文档中嵌入另一个HTML文档。这种技术广泛应用于实现页面组件、广告、地图等跨域内容的展示。标题提到的问题是关于如何动态调整`iframe`的高度以适应其内部内容的高度，以避免滚动条的出现或者内容被截断。以下将详细解释这个过程。 1. **`iframe`基本结构**： `iframe`标签用于创建一个独立的浏览器窗口，它有自己的文档头和脚。在`1.htm`中，我们看到如下代码： ```html <iframe src="2.htm" id="ifrm"></iframe> ``` 这行代码创建了一个`iframe`，并将其源文件设置为`2.htm`，同时设置了`id`为`ifrm`，方便后续的JavaScript操作。 2. **高度调整的原理**：要根据`iframe`内部页面（`2.htm`）的高度调整`iframe`的高度，我们需要获取到`2.htm`页面加载完成后的内容高度。在`2.htm`中，我们使用JavaScript实现这个功能： ```html <script> function resize() { parent.document.all.ifrm.height = document.body.scrollHeight; parent.document.all.ifrm.width = document.body.scrollWidth; } </script> <body onload="resize()"> </body> ``` - `resize()`函数：当`2.htm`页面加载完成后，`onload`事件触发，执行`resize()`函数。 - `document.body.scrollHeight`：这个属性返回元素（这里是`body`）的总高度，包括不可见部分（如滚动条）。 - `document.body.scrollWidth`：与`scrollHeight`类似，返回元素的总宽度。 - `parent.document.all.ifrm`: 这个表达式是指向父页面（`1.htm`）中具有`id`为`ifrm`的`iframe`元素，然后分别设置它的`height`和`width`属性。 3. **动态调整高度的实现**：当`2.htm`中的`body`元素加载完成时，`resize()`函数会被调用，将`body`的`scrollHeight`和`scrollWidth`赋值给`iframe`的`height`和`width`属性。这样可以确保`iframe`的大小适应其内容，无论内容多少，都能完全显示。 4. **优化与注意事项**： - 在实际应用中，可能需要考虑到跨域问题，因为JavaScript只能操作同源策略允许访问的页面。如果`1.htm`和`2.htm`不在同一个域下，这种方法可能不适用，除非服务器配置了CORS（跨源资源共享）。 - 为了提高兼容性，可以考虑使用`window.onload`或现代JavaScript的`addEventListener`来绑定加载事件，而不是`onload`属性。 - 需要注意的是，`document.all`是IE浏览器特有的属性，对于其他浏览器（如Firefox、Chrome等），应该使用`document.getElementById('ifrm')`来获取元素。通过`iframe`的`src`属性指向另一个页面，并利用JavaScript动态获取并设置`iframe`的高度和宽度，我们可以实现页面内容的自适应展示，提供更好的用户体验。

资源详情

资源评论

资源推荐