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

iframe自适应高度解决方案

JavaScriptXHTMLJ#HTML 
阅读更多

经常会有父页面需要通过iframe嵌入另一个子页面,又要适时根据子页面的高度调整父页面中iframe的高度，这就要求 页面必须具有自适应功能。自适应思想比较简单：就是父页面中iframe高度必须要适时根据子页面 高度进行调整。 由于涉及到js操作，因此对于不同域名的自适应解决方案有所不同，主要是在解决跨域问题。

  • 对于同父级域名下的自适应高度：jipiao.taobao.com/index.htm 页面中嵌入jiudian.taobao.com/xxx.htm页面

1.0 http://jipiao.taobao.com/index.htm中关键代码



页面增加如下JS:


2.子页面http://jiudian.taobao.com/xxx.htm 中嵌入如下代码。即可。

  • 不同父级页面，例如jipiao.taobao.com, www.koubei.com域名完全不一样，解决办法是使用一个代理页面jipiao.taobao.com/proxy.htm jipiao.taobao.com/index.htm页面嵌入 www.koubei.com/xxxx.htm，而xxx.htm需要隐藏嵌入jipiao.taobao.com/proxy.htm做为代理，可以将高度写在后面jipiao.taobao.com/proxy.htm#500，表示500px高度。

1.jipiao.taobao.com/index.htm页面中关键代码：

增加如下JS:

2. www.koubei.com/xxxx.htm 中关键代码：

3.在代理页面jipiao.taobao.com/proxy.htm中所有的代码如下：

分享到：
| 特别推荐－－《超越对手－大项目售前售后的 ...
评论
发表评论

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

相关推荐

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

    针对`<iframe>`内容高度自适应，上述经典代码提供了一个解决方案。这段JavaScript函数`setIFrameHeight(iframe)`通过获取`<iframe>`内的内容文档（`contentDocument`），然后比较`body`和`documentElement`（HTML根...

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

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

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

    ### iframe自适应高度(兼容多种浏览器) 在网页开发过程中，`iframe`是一种常用的元素，用于在当前页面中嵌入另一个HTML文档。然而，默认情况下，`iframe`的高度是固定的，这可能会导致内容显示不完全或者出现不必要...

    再谈iframe自适应高度

    "再谈iframe自适应高度"这个主题，关注的是如何使iframe的内容区域根据所加载页面的高度自动调整，以避免滚动条出现或者内容被截断的问题。在网页设计中，尤其是在构建响应式布局时，这是一个非常关键的优化点。 1....

    iframe自适应高度和宽度

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

    js实现iframe自适应高度

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

    iframe自适应高度（兼容目前所有主浏览器)

    iFrame 自适应高度是前端开发中常见的问题，很多开发者在搜索引擎中搜索相关解决方案，但大多数文章只能解决静态高度的问题，而忽视了 JS 操作 DOM 之后的动态同步问题。同时，在浏览器兼容性方面也存在一定的漏洞。...

    jquery对iframe自适应高度插件

    总之，“jquery对iframe自适应高度插件”是解决`iframe`高度自适应问题的一个强大工具，它的易用性和效率使得它成为开发者处理`iframe`高度问题的首选方案。通过合理利用这个插件，可以避免手动计算和调整`iframe`...

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

    "iFrame高度自适应终极解决方案（兼容IE7,8,9 Firefox3.6+,Chrome 12+）"这个标题所指向的，就是一种跨浏览器的策略，确保iFrame内容无论何时更新，都能自动调整其高度，从而避免滚动条的出现和内容溢出。...

    iframe 自适应高度

    ### iframe自适应高度实现方法详解 在网页设计与开发中，`iframe`（Inline Frame）是一种常用的HTML元素，用于在当前文档中嵌入另一个HTML文档。然而，在实际应用过程中，经常会遇到`iframe`内容高度固定导致页面...

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

    在网页设计中，`iframe`（Inline Frame）是一种嵌入其他网页或内容的标签，它允许我们在一个页面中展示多...通过下载提供的`iframe自适应高度.doc`文档，你可以得到更详细的步骤和解释，以便更好地理解和应用这些技术。

    iframe自适应高度demo

    1. **JavaScript/jQuery解决方案**： 使用JavaScript或jQuery，我们可以监听`iframe`的`load`事件，当`iframe`中的内容加载完毕后，获取其内容的实际高度并设置为`iframe`的高度。例如，使用jQuery的一个简单示例：...

    网页制作中Iframe自适应高度的解决办法

    本文将深入探讨如何解决Iframe自适应高度的问题。 首先，我们需要了解Iframe的基本语法。在HTML中，创建一个Iframe的基本结构如下： ```html <iframe src=...

    iframe自适应高度js demo

    在网页开发中，`iframe`（Inline Frame）是一种嵌入式框架元素，它允许我们在一个HTML文档中嵌入另一个HTML文档。...通过查看并运行这些文件，你可以更好地理解并实践`iframe`自适应高度的JavaScript解决方案。

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

    `iframe-resizer`库提供了一种解决方案，它允许父页面和子页面之间进行通信，动态调整`iframe`的高度。使用方法如下： - 首先，将`iframe-resizer.js`引入父页面和`iframe`内的子页面。 - 在`iframe`的HTML中添加...

    iframe跨域嵌套自适应高度

    ### iframe跨域嵌套自适应高度 在网页开发过程中，`iframe`作为一种常见的网页元素，被广泛用于在当前页面中嵌入另一个独立的文档或页面。然而，在实际应用中经常会遇到一些问题，如跨域限制、自适应高度调整以及...

    iframe自适应高度

    本篇文章将深入探讨`iframe`自适应高度的解决方案，并结合实际应用场景进行分析。 首先，我们需要理解`iframe`的基本属性。`src`属性定义了要加载的URL，`width`和`height`分别定义了`iframe`的宽度和高度。在静态...

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

    首先，我们来探讨同域名下的Iframe自适应高度的处理方法。当Iframe及其所嵌入页面位于同一域名时，可以通过JavaScript来获取嵌入页面的实际高度，并在Iframe的onload事件中设置其高度。具体做法是，在Iframe标签中...

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