`
judim
  • 浏览: 41784 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

js处理Iframe的动态大小

    博客分类：
  • js
iframe 自适应大小 
阅读更多
<iframe name="layoutExplain" id="layoutExplain" frameborder="0" width="100%" height="10px;" align="top" scrolling="no">
</iframe>
<script type="text/javascript">
function reinitIframe(){
var iframe = document.getElementById("layoutExplain");
try{
iframe.height =  iframe.contentWindow.document.documentElement.scrollHeight;
}catch (ex){}
}
window.setInterval("reinitIframe()", 200);
</script>

上面的是代码。window.setInterval("reinitIframe()", 200);是按时间不段的循环。
分享到：
| js 为input 添加 name属性,主要是针对IE
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    嵌入到HTML的iframe自动适应大小

    通过上述分析，我们可以看到“嵌入到HTML的iframe自动适应大小”这一知识点涉及到了HTML、CSS和JavaScript的综合运用，尤其是在处理不同浏览器的兼容性问题时显得尤为重要。在实际项目中，还需要考虑到性能优化，...

    用javascript动态调整iframe高度的方法

    为了解决这个问题，我们可以利用JavaScript来动态调整iframe的高度，确保它始终适应其内部内容的大小。 在描述中提到的方法是通过编写一段JavaScript代码，使得iframe能够根据其内部页面内容的高度自动调整。这段...

    Node.js-使用隐藏的iframe观察元素大小更改

    在Node.js环境中，我们通常与服务器端编程打交道，但有时候也需要处理一些客户端的交互问题，尤其是在涉及网页渲染和用户界面动态变化的时候。本教程将探讨一个独特的方法，即利用隐藏的`iframe`来观察HTML元素的...

    js_弹出窗口_iframe

    在JavaScript中，我们可以动态地改变`iframe`的属性，如加载不同的页面或调整大小。例如： ```javascript var iframe = document.getElementById('myIframe'); iframe.src = 'http://new.example.com'; iframe.style...

    iframe根据页面内容自适应高度和宽度

    2. **JavaScript**：使用JavaScript来动态获取`iframe`的内容高度和宽度。可以监听`load`事件，当`iframe`加载完成后，通过`contentWindow`和`contentDocument`属性获取内容的尺寸，然后调整`iframe`的大小。例如： ...

    iframe自适应子页面内容高度

    2. JavaScript处理：通过`contentWindow`和`contentWindow.document`获取子页面高度，或使用`postMessage`和`message`事件进行跨域通信。 3. 动态调整：在父页面中监听事件，接收到高度信息后更新`iframe`的高度。 ...

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

    此外，对Iframe大小的频繁改变可能会造成页面性能问题和用户感知的闪烁效应。 总之，实现Iframe的自适应高度是一个需要细致处理的技术细节，无论是同域还是跨域，都需要综合运用HTML、CSS以及JavaScript来达成目标...

    iframe（图片过渡效果欣赏）

    标题“iframe（图片过渡效果欣赏）”暗示我们将探讨如何使用`iframe`来创建引人注目的动态图片展示。 `iframe`的基本语法如下： ```html &lt;iframe src="URL" width="宽度" height="高度" frameborder="0" scrolling=...

    js 改变 框架 大小

    2. **改变iframe大小**：为了实现这一功能，可以使用鼠标按下(`mousedown`)和鼠标释放(`mouseup`)事件来分别调用改变大小的函数。 ```javascript $("#buttonID").mousedown(function(){ // 转到子页面的函数 ...

    iframe自适应高度和宽度

    下面是一个简单的示例，演示如何通过JavaScript来动态调整`iframe`的高度： ```html &lt;iframe name="myframe" src="myframe.htm" frameborder="0" scrolling="auto" width="100%" height="100%" onload="document....

    div+js模拟iframe实现左右框架.rar

    `iframe`的一个优点是可以动态加载内容，但我们可以使用`JavaScript`的`AJAX`（异步JavaScript和XML）或现代的Fetch API来实现相同的功能，甚至可以添加更多交互性。例如，点击链接时，不刷新整个页面，而是仅更新`...

    iframe高度自适应.pdf

    实现`iframe`高度自适应的基本思路是在页面加载完成或者窗口大小发生变化时，通过JavaScript动态计算嵌入内容的实际高度，并相应地调整`iframe`的高度。这种方法的核心在于编写合适的JavaScript函数来获取嵌入内容的...

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

    为了让`iframe`内容能根据容器大小动态调整，开发者需要关注以下几点： 1. **宽度和高度设置**：确保`iframe`元素的`width`和`height`属性设置正确。可以设置为百分比，使其相对于包含它的容器自适应，如： ```...

    js加iframe轻松实现异步图片上传 可以预览 兼容FF，chrome，ie9

    本示例主要探讨如何使用JavaScript结合IFrame技术来实现异步图片上传，并提供预览功能，同时确保兼容Firefox、Chrome和IE9等主流浏览器。 首先，我们需要了解异步上传的基本原理。异步上传，也称为Ajax上传，是指在...

    iframe自动适应高度（完美自适应高度嵌套代码），兼容目前主流浏览器。

    这段描述中提到的“完美自适应高度嵌套代码”很可能就是一个实现上述逻辑的JS代码片段，它可能包含了针对不同浏览器的兼容性处理，比如对于IE6-9这些老版本浏览器的特殊处理，因为它们对某些DOM操作和事件处理的支持...

    iframe内嵌页table内容显示不受受浏览器字体大小设置影响解决

    2. **JavaScript同步**：使用JavaScript获取主页面的字体大小，并将这个值应用到iframe内容中。这可以通过跨窗口通信（例如`window.postMessage`）实现。 3. **设置iframe样式**：直接在iframe标签中添加`style`...

    前端项目-iframe-resizer.zip

    2. **动态大小调整**：当`iframe`内部内容发生变化，比如滚动、加载新的数据或者用户交互，`iframe-resizer`会检测到这些变化并相应地更新`iframe`的高度，保持内容完整显示。 3. **事件监听**：库中包含多种事件...

    完全搞定iframe（框架）里的滚动条.doc

    对于第二种情况，即允许iframe根据内容自动伸展的情况，推荐使用JavaScript来动态调整iframe的高度。具体步骤如下： 1. **获取B页面内容的高度**：通过JavaScript的`contentDocument`或`contentWindow`属性访问B...

    js实现iframe自动自适应高度的方法

    有时，我们希望Iframe能根据其内部内容自动调整高度，以避免滚动条的出现，提供更好的用户体验。本篇文章将详细介绍如何使用JavaScript实现...希望这个方法能帮助你在开发过程中更好地处理Iframe的自适应高度问题。

    js跨域问题之跨域iframe自适应大小实现代码

    这种情况下，要想实现跨域iframe大小的自适应，需要采用一些特殊的策略。 解决方案的思路可以分解为以下步骤： 1. 假设有一个页面a.htm属于域A，它通过iframe嵌入了域B下的页面b.html。由于b.html的尺寸可能会变化...

Magicbox
Global site tag (gtag.js) - Google Analytics