`
myfreespace
  • 浏览: 228673 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

javascript iframe高度自适应

JavaScriptIE脚本HTML 
阅读更多

问题：上传图片的时候局部刷新就在页面中放了个iframe，因为里面的内容是变的就需要外层的iframe自动适应高度，iframe没有属性，只能通过js来控制，在内部的iframe里面写上一个函数，加载的时候设置外层iframe的高度，两个还可以多的时候常常遇到跨域的问题，在字iframe中调用父级别的js时可以用parent.window.function()来调用。

<script type="text/javascript">
function TuneHeight() {
	var frm = parent.document.getElementById("blb_iframe");
	var subWeb = parent.document.frames ? parent.document.frames["blb_iframe"].document : frm.contentDocument;
	if(frm != null && subWeb != null) {
	   frm.height = subWeb.body.scrollHeight + 30;
	}
	}
</script>
<body id="bl_main" onload='TuneHeight();bl_piconload()'>
 在每个子iframe里面都应用这个js脚本，这个方法有些笨，不过还好解决了我遇到的问题，还有就是要不iframe里面的html的样式margin padding 都设置为0 ，不然在ie下会有一个阴影框，不是太美观。
0
顶
0
踩
分享到：
| javascript textarea moveend选中文本
评论
发表评论

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

相关推荐

    Iframe 高度自适应，js控制Iframe 高度自适应.docx

    js 控制 Iframe 高度自适应是指使用 JavaScript 语言来控制 iframe 的高度，使其能够自动调整以适应内容的高度。 在 iframe 高度自适应中，需要考虑多种浏览器的兼容性问题，包括 Firefox、IE、Opera 等不同的...

    Iframe 高度自适应浏览器高度

    标题“Iframe 高度自适应浏览器高度”涉及的核心知识点是如何让Iframe的大小根据其内容自动调整，特别是高度，以便始终保持与浏览器窗口的高度同步，从而提供更好的用户体验。 首先，我们需要了解Iframe的基本结构...

    iframe高度自适应.pdf

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

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

    总的来说，通过使用JavaScript动态计算`&lt;iframe&gt;`内容的高度并设置`&lt;iframe&gt;`的高度，可以有效地解决`&lt;iframe&gt;`内容高度自适应以及设置高度后无法缩小的问题。同时，要注意兼容性问题和跨域限制，以确保在各种环境下...

    iframe高度自适应

    在某些情况下，如果`iframe`内容与主页面同源，可以使用CSS的`resize`属性来尝试让`iframe`自适应高度。但是，这种方法并不适用于跨域的情况。 2. **JavaScript/jQuery解决方案**： 对于跨域的`iframe`，可以采用...

    JAVASCRIPT让IFRAME框架的高度自适应

    通过使用JavaScript来让IFRAME框架的高度自适应，我们可以实现IFRAME框架的高度自动调整，以提高用户体验。同时，我们也可以使用这个方法来实现其他类型的高度自动调整，以满足不同的需求。 在实际应用中，我们可以...

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

    jsp 页面 iframe 高度自适应的 js 代码详解 jsp 页面 iframe 高度自适应的 js 代码是指在 jsp 页面中使用 iframe 元素，並且使其高度能够自适应内容的高度。这种技术在实际应用中非常有用，例如在某些网页中，我们...

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

    标题提到的“iframe自动适应高度（完美自适应高度嵌套代码）”提供了一个解决方案，它能够确保`iframe`在各种主流浏览器中都能正确地自适应内容高度，包括360浏览器、IE6-9、遨游、火狐以及搜狗浏览器。 在传统的`...

    js实现iframe自适应高度

    本文将详细讲解如何使用JavaScript实现`iframe`自适应高度的解决方案，确保在各种主流浏览器中都能正常工作。 首先，理解`iframe`的基本结构和属性是至关重要的。`iframe`标签通常包含`src`属性，用于指定要加载的...

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

    在网页开发中，有时我们需要使用`iframe`来嵌入外部页面或者内容，但是`iframe`的高度自适应问题一直是一个常见的挑战。特别是在不同浏览器之间，由于兼容性问题，往往需要额外的处理才能达到理想的效果。本篇文章将...

    iframe跨域自适应高度模板

    总结来说，`iframe`跨域自适应高度模板主要是通过`CORS`解决跨域限制，通过JavaScript监听`load`事件或使用`postMessage`通信来实现内容高度的动态调整。这些技术在现代网页开发中十分常见，能帮助我们更灵活地整合...

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

    `iframe`的使用涉及到许多关键点，尤其是高度自适应和多浏览器兼容性，这在实际项目中至关重要。本篇文章将详细讲解如何实现`iframe`的高度自适应以及在不同浏览器之间的兼容性处理。 一、`iframe`基本使用 `iframe...

    iframe自适应高度和宽度

    ### iframe自适应高度和宽度详解 在Web开发中，`iframe`（Inline Frame）是一种常用的HTML元素，用于在当前页面内嵌入另一个HTML文档。它能够实现页面内部局部刷新的效果，广泛应用于各种复杂的网页布局中。然而，...

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

    ### 解决IE、Firefox、Chrome、Safari浏览器中iframe显示高度自适应问题 在Web开发中，`iframe`（Inline Frame）元素常被用于嵌入另一个HTML文档到当前页面中，这种技术为开发者提供了极大的便利，例如加载广告、...

    iFrame高度自适应终极解决方案（兼容IE7,8,9 Firefox3.6+,Chrome 12+）

    iFrame的高度自适应通常涉及到JavaScript或者CSS的使用，有时甚至需要结合两者。以下是一些关键知识点： 1. **iFrame的基本使用**： iFrame通过`&lt;iframe&gt;`标签引入，属性包括`src`（指定要加载的URL）、`width`和`...

    iframe高度自适应 js

    给定的代码示例展示了如何通过JavaScript实现`&lt;iframe&gt;`的高度自适应功能，并且兼容多种浏览器。 ##### 1. 初始化及高度获取 ```javascript $(document).ready(function(){ var height = 0; if (navigator....

    iframe自适应高度demo

    综上所述，`iframe`自适应高度是通过JavaScript、CSS布局技术（如Flexbox或Grid）、或者通过跨窗口通信来实现的。选择哪种方法取决于你的项目需求，如兼容性、复杂性、是否能控制`iframe`源等因素。正确实现`iframe`...

    可编辑iframe高度自适应（编辑器所见即所得模式）

    总的来说，实现可编辑`iframe`的高度自适应需要结合HTML、CSS和JavaScript的知识，尤其是利用JavaScript来监听和响应`iframe`内容的变化。通过这种方法，可以确保用户无论在Firefox、Chrome、IE8还是Safari等浏览器...

    完整可行、浏览器兼容、通过测试的Iframe高度自适应程序

    - 考虑到用户体验，需要确保在用户滚动时Iframe也能自适应高度，这可能需要监听滚动事件并在滚动停止时调整高度。 - 为了防止无限循环，需要设定一个检查和调整的限制，比如设定一个最大尝试次数。 7. **压缩包中...

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