iframesrc为图片时的高度自适应的代码_限制宽高度自适应资源-CSDN文库

版权申诉

5星 · 超过95%的资源 20 浏览量 2020-12-04 10:06:58 上传评论收藏 36KB PDF 举报

对于iframe高度自适应的问题，网上已经被讨论n次了，一般通过在iframe加载完毕时访问iframe内页body的offsetHeight和offsetWidth然后更新iframe的高宽来实现。今日遇到的自适应问题与以往有一些不同，这次的src是一张图片，而且是一张大小不确定的图片（从数据库取出来的数据生成的），在此使用以往的方式似乎就没有那么灵验了。突然想到img标记的高宽是可以获取到的。于是突然有了思路。解决办法如下：先动态生成一个img元素，在iframe页面加载完成时(onload)将其src赋给img标记，然后获取该img的高宽，再动态在网页开发中，`iframe` 是一种非常有用的元素，它允许我们嵌入其他网页或内容到当前页面中。然而，当`iframe`加载的内容是图片时，如何让`iframe`的高度自适应图片的大小就成为一个挑战。传统的解决方法是通过获取`iframe`内页面的`body`元素的`offsetHeight`和`offsetWidth`来调整`iframe`的尺寸，但这在图片作为源的情况下可能不再适用，因为图片没有`body`元素。针对这个特定的问题，我们可以采用一种不同的策略。既然图片可以被`img`标签展示，并且`img`标签能够自动适应图片的大小，我们可以利用这一点来解决`iframe`的高度自适应问题。以下是一种可能的解决方案： 1. 创建一个动态生成的`img`元素，但不设置其`src`属性。 2. 然后，监听`iframe`的`onload`事件。当`iframe`中的内容加载完成后，将图片的URL赋值给`img`的`src`属性。 3. `img`加载图片后，可以通过`img.offsetHeight`和`img.offsetWidth`获取图片的实际高度和宽度。 4. 根据获取到的图片尺寸，动态地设置`iframe`的`height`和`width`属性，确保`iframe`的大小适应图片。此外，为了避免由于`body`元素的默认`margin`和`padding`导致滚动条的出现，需要在`iframe`的内页CSS中设置`body`的`margin`和`padding`为`0`。这可以通过在`iframe`的`src`页面的`<head>`部分添加以下CSS代码来实现： ```html <style> body { margin: 0; padding: 0; } </style> ``` 这样，`iframe`就能正确显示图片，且不会出现滚动条，实现了高度自适应的效果。这种方法特别适用于图片大小不固定的情况，比如图片是从数据库动态生成的。总结一下，解决`iframe`显示图片时的高度自适应问题，关键在于利用`img`标签的特性，结合`iframe`的`onload`事件，以及调整`body`元素的样式，从而确保`iframe`的大小能准确匹配图片的尺寸。这是一个巧妙而实用的技巧，尤其适用于需要动态加载和显示图片的场景。

资源详情

资源评论

iframe src为图片时的高度自适应的代码为图片时的高度自适应的代码

对于iframe高度自适应的问题，网上已经被讨论n次了，一般通过在iframe加载完毕时访问iframe内页body的offsetHeight和

offsetWidth然后更新iframe的高宽来实现。

今日遇到的自适应问题与以往有一些不同，这次的src是一张图片，而且是一张大小不确定的图片（从数据库取出来的数

据生成的），在此使用以往的方式似乎就没有那么灵验了。突然想到img标记的高宽是可以获取到的。于是突然有了思路。

解决办法如下：

先动态生成一个img元素，在iframe页面加载完成时(onload)将其src赋给img标记，然后获取该img的高宽，再动态修改

iframe高宽即可，同时不要忘了设定iframe页面body的margin和padding为0，否则会由于padding和margin默认不为0的缘故

导致出现滚动条。

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余0页未读，立即下载

评论收藏

内容反馈

版权申诉

shansha_zong456

2024-01-02

感谢资源主分享的资源解决了我当下的问题，非常有用的资源。

iframe src为图片时的高度自适应的代码

评论1

最新资源

iframe src为图片时的高度自适应的代码

评论1

最新资源

相关推荐

教你用jquery实现iframe自适应高度

javascript 装载iframe子页面，自适应高度

javascript原生和jquery库实现iframe自适应高度和宽度

javascript应用：Iframe自适应其加载的内容高度

iframe（图片过渡效果欣赏）

iframe内容高度 iframe自适应高度终极解决Iframe设置高度后无法缩小问题

iframe高度自适应.pdf

iframe高度自适应

jsp页面iframe高度自适应的js代码.docx

使用jQuery不判断浏览器高度解决iframe自适应高度问题

Iframe 自适应高度并实时监控高度变化的js代码

JavaScript 处理Iframe自适应高度(同或不同域名下)

JS实现iframe自适应高度的方法示例

iframe自适应高度和宽度

用jquery实现iframe高度自适应实例代码完美兼容多数浏览器

解决IE,Firefox,chrome,safari浏览器中iframe显示高度自适应问题

iframe高度自适应，多浏览器兼容

iframe自适应高度.rar

jsp页面iframe高度自适应的js代码

关于IFRAME 自适应高度的研究

iframe自适应宽度、高度 ie6 7 8，firefox 3.86下测试通过

Iframe实现跨浏览器自适应高度解决方法

iframe自适应高度的简单解决办法

iframe跨域常用问题和iframe页面自适应

iframe自适应子页面内容高度

iframe 自适应高度

iframe自适应高度(兼容多种浏览器)