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

JS iframe跨域自适应内容高度

阅读更多
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
    <title>Cross-Domain iframe Resizing</title>
    <script type="text/javascript">
      var FrameManager = {
		    currentFrameId : '',
		    currentFrameHeight : 0,
		    lastFrameId : '',
		    lastFrameHeight : 0,
		    resizeTimerId : null,
		    init: function() {
		        if (FrameManager.resizeTimerId == null) {
		            FrameManager.resizeTimerId = window.setInterval(FrameManager.resizeFrames, 500);
		        }
		    },
		    resizeFrames: function() {
		        FrameManager.retrieveFrameIdAndHeight();
		        if ((FrameManager.currentFrameId != FrameManager.lastFrameId) || (FrameManager.currentFrameHeight != FrameManager.lastFrameHeight)) {
		            var iframe = document.getElementById(FrameManager.currentFrameId.toString());
		            if (iframe == null) return;
		            iframe.style.height = FrameManager.currentFrameHeight.toString() + "px";
		            FrameManager.lastFrameId = FrameManager.currentFrameId;
		            FrameManager.lastFrameHeight = FrameManager.currentFrameHeight;
		            window.location.hash = '';
		        }
		    },
		    retrieveFrameIdAndHeight: function() {
		        if (window.location.hash.length == 0) return;
		        var hashValue = window.location.hash.substring(1);
		        if ((hashValue == null) || (hashValue.length == 0)) return;
		        var pairs = hashValue.split('&');
		        if ((pairs != null) && (pairs.length > 0)) {
		            for(var i = 0; i < pairs.length; i++) {
		                var pair = pairs[i].split('=');
		                if ((pair != null) && (pair.length > 0)) {
		                    if (pair[0] == 'frameId') {
		                        if ((pair[1] != null) && (pair[1].length > 0)) {
		                            FrameManager.currentFrameId = pair[1];
		                        }
		                    } else if (pair[0] == 'height') {
		                        var height = parseInt(pair[1]);
		                        if (!isNaN(height)) {
		                            FrameManager.currentFrameHeight = height;
		                            FrameManager.currentFrameHeight += 15;
		                            
		                        }
		                    }
		                }
		            }
		        }
		        
		    },
		    registerFrame: function(frame) {
		        var currentLocation = location.href;
		        var hashIndex = currentLocation.indexOf('#');
		        if (hashIndex > -1) {
		            currentLocation = currentLocation.substring(0, hashIndex);
		        }
		        frame.contentWindow.location = frame.src + '?frameId=' + frame.id + '#' + currentLocation;
		    }
		};
		window.setTimeout(FrameManager.init, 300);
    </script>
</head>
<body>
    <div id="page-wrap">
        <h1>Cross-Domain iframe Resizing</h1>
        <iframe id="frame-one" scrolling="no" frameborder="0" src="http://digwp.com/examples/iFrameSource/source.html" onload="FrameManager.registerFrame(this)"></iframe>
    </div>
</body>
</html>
分享到:
评论
1 楼 osacar 2010-09-14  

不行啊。没效果!在Opera下测试
IE也不行。

相关推荐

    iframe跨域自适应高度模板

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

    iframe跨域嵌套自适应高度

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

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

    本篇文章将深入探讨两个关键知识点:`iframe`跨域问题以及`iframe`页面的自适应。 一、`iframe`跨域问题 跨域是Web开发中的一个重要概念,它限制了浏览器从一个源获取另一个源的资源,以保护用户的安全。当`iframe...

    js实现iframe自适应高度

    这个简单的JavaScript解决方案能帮助我们实现`iframe`的高度自适应,使得内容始终完全显示,避免滚动条的出现。然而,实际应用中可能还会遇到其他复杂情况,如延迟加载、动态插入的`iframe`等,这时可能需要结合更多...

    iframe跨域高度自适应例子源码

    标题"iframe跨域高度自适应例子源码"指的是一个实例,展示了如何在跨域的情况下使`iframe`内容自动调整高度以适应其内部内容。这个例子提供了一个在线演示(http://okiner.cn/demo/cross-domain/iframe.html)以及源...

    iframe 跨域 自动适应高度

    1. **同源策略与iframe跨域** 同源策略是浏览器安全的一项基础机制,它限制了来自不同源的"文档"或脚本相互交互。当一个`iframe`加载的页面与包含它的页面不在同一个源下时,就会遇到跨域问题。为了解决这个问题,...

    Iframe 高度自适应浏览器高度

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

    iframe自动适应高度(完美自适应高度嵌套代码),兼容目前主流浏览器。

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

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

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

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

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

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

    Iframe的`height`属性决定了其显示区域的高度,当我们想要Iframe内容自适应时,我们需要动态地修改这个属性值,使其等于Iframe内部页面的滚动高度(scrollHeight)。 下面是一个简单的JavaScript函数,用于自动调整...

    IFrame跨域高度自适应实现代码

    本文将深入探讨如何实现IFrame跨域高度自适应的解决方案。 首先,我们需要了解什么是跨域。在Web安全策略中,浏览器执行同源策略,这意味着一个网页只能访问与之同源(协议、域名、端口相同)的IFrame内容。但当...

    解决iframe跨域高度自适应问题的源码

    本篇文章将深入探讨如何解决iframe跨域高度自适应的问题。 首先,我们需要理解为什么会出现跨域问题。根据浏览器的同源策略,一个网页只能访问与之同源(即协议、域名和端口完全相同)的资源。而跨域则意味着iframe...

    再谈iframe自适应高度

    - 另一个问题是跨域问题,由于同源策略的限制,浏览器不允许JavaScript在不同的源之间获取或修改DOM元素,这使得在父页面中动态获取iframe内容的高度变得复杂。 3. **解决方案**: - **JavaScript/jQuery方法**:...

    iframe高度自适应

    然而,由于同源策略的限制,跨域的`iframe`无法通过JavaScript获取其内容的高度,这给高度自适应带来了挑战。 **解决方法:** 1. **纯CSS解决方案**: 在某些情况下,如果`iframe`内容与主页面同源,可以使用CSS...

    iframe自适应高度.rar

    一种常见的方法是使用JavaScript监听iframe的load事件,当iframe内容加载完成后,通过JavaScript获取iframe的实际内容高度,并将其设置为iframe的style.height属性。以下是一个简单的实现示例: ```javascript ...

    iframe自适应子页面内容高度

    本话题将深入探讨如何使`iframe`自适应其子页面的内容高度,确保用户无需滚动主页面即可查看全部子页面内容。 `iframe`的基本结构如下: ```html &lt;iframe src="child-page....

    iframe自适应高度js demo

    然而,`iframe`的一个常见问题是,其内容高度可能超出容器的高度,导致页面布局出现问题。为了解决这个问题,我们需要实现一个自适应高度的`iframe`,使其能根据内部内容自动调整高度。本文将深入讲解如何通过...

    Iframe 框架自适应被嵌入页面高度

    总结来说,通过JavaScript控制Iframe自适应被嵌入页面的高度,可以有效地解决内容显示不全的问题。这涉及到对DOM操作、事件监听、以及跨域通信的理解。同时,我们还需要关注浏览器兼容性,确保在不同的环境下都能...

Global site tag (gtag.js) - Google Analytics