Iframe跨域嵌入页面自动调整高度的办法

http://www.a.com/A.html

http://www.a.com/B.html

http://www.a.com/D.js

http://www.c.com/C.html

A.html:

<iframe id="iframe_shg" src="http://www.c.com/c.html" frameborder="0" width="100%"></iframe>

________________________________________________________________

B.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset=‘utf-8‘ />
    <title>B.html</title>
</head>
<body>
    <script type="text/javascript">
        window.onload = function() {
            var isSet = false
            var inteval = setInterval(function() {
                var search = location.search.replace(‘?‘, ‘‘)
                if (isSet) {
                    clearInterval(inteval)
                    return
                }
                if (search) {
                    var height = search.split(‘=‘)[1]
                    var doc = parent.parent.document
                    var ifr = doc.getElementById(‘iframe_shg‘)
                    ifr.style.height = height + ‘px‘
                    isSet = true
                }
            }, 500)
        }
    </script>
</body>
</html>

________________________________________________________________

D.js

// 计算页面的实际高度,iframe自适应会用到
function calcPageHeight(doc) {
    var cHeight = Math.max(doc.body.clientHeight, doc.documentElement.clientHeight)
    var sHeight = Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight)
    var height = Math.max(cHeight, sHeight)
    return height
}
window.onload = function () {
    var doc = document
    var height = calcPageHeight(doc)
    var myifr = doc.getElementById(‘myifr‘)
    if (myifr) {
        myifr.src = ‘http://www.a.com/B.html?height=‘ + height
        // console.log(doc.documentElement.scrollHeight)    
    }
};

_________________________________________________________________

C.html

<body>

........................

<iframe id="myifr" style="display:none" src="http://www.a.com/B.html"></iframe>
    <script type="text/javascript" src="http://www.a.com/D.js"></script>

</body>

时间: 2024-12-28 21:43:22

Iframe跨域嵌入页面自动调整高度的办法的相关文章

解决Iframe跨域高度自适应,利用window.postMessage()实现跨域消息传递页面高度(JavaScript)

在iframe跨域引用高度自适应这块写的js方式都试了不管用,最终使用的是window.postMessage() 跨域获取高度 传递信息 1.首先,在主页面上使用iframe引入子页面:也就是A.html页面引入B.html页面,下面看看A.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head>

js iframe跨域访问

1.同主域下不同子域之间的跨域请求  使用document.domain 比如:morningstar.com 和test.morningstar.com 只要把两个页面 的document.domain都指向主域就可以了,比如document.domain='morningstar.com' <!-- morningstar.com/parent.html --> <iframe id="ifr" src="http://test.morningstar.

iframe跨域访问

js跨域是个讨论很多的话题.iframe跨域访问也被研究的很透了. 一般分两种情况: 一. 是同主域下面,不同子域之间的跨域: 同主域,不同子域跨域,设置相同的document.domian就可以解决; 父页访问子页,可以document.getElementById("myframe").contentWindow.document来访问iframe页面的内容:如果支持contentDocument也可以直接document.getElementById("myframe&

JS跨域(ajax跨域、iframe跨域)解决方法及原理详解(jsonp)

这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被当作是不同的域. 下表给出了相对 http://store.company.com/dir/page.html 同源检测的结果: 要解决跨域的问题,我们可以使用以下几种方法: 1.通过jsonp跨域[解决ajax跨域] 在js中,我们直接用XMLHttpRequest请求不同域上的数据时,是不可以的

利用window.name+iframe跨域获取数据详解

详解 前文提到用jsonp的方式来跨域获取数据,本文为大家介绍下如何利用window.name+iframe跨域获取数据. 首先我们要简单了解下window.name和iframe的相关知识.iframe是html的一个标签,可以在网页中创建内联框架,有个src属性(指向文件地址,html.php等)可以选择内联框架的内容,可以看个例子(猛戳这里),大概了解下就行了.window.name(一般在js代码里出现)的值不是一个普通的全局变量,而是当前窗口的名字,这里要注意的是每个iframe都有包

Iframe简单探索以及Iframe跨域处理

探索Iframe 本文目的: Iframe简单使用 Iframe跨域 Iframe常见问题 一.Iframe基本Dom以及常用属性和常用事件 1.DOM: <iframe class="iframe" style="height: 100%;width: 100%;border: 0;" id="Yiframe" name="Yiframe" src='http://localhost:2255/67iframe-2.h

Iframe跨域Session丢失的问题(大家是怎么解决的)

很久之前做的一个使用插件实现了图片批量上传,是通过IFrame加载上传面板的,使用google上传成功了就没怎么理了,最近同事测试时(使用的是360安全浏览器)老是出现上传不了图片的问题,然后换个浏览器上传就成功了. 于是, 今天就下载360安全浏览器测试一下,一调试,坑爹啊,我的session丢失了,网上查了一下,没解决, 最后只想到通过url传递参数的方法解决了.不知道大伙有没遇到过这样的问题,还有怎么解决的 Iframe跨域Session丢失的问题(大家是怎么解决的),布布扣,bubuko

iframe 跨域自适应 纯css解决方法

<style type="text/css">body{background:#f00;}body, html,#ifm1{width:100%;height:100%;overflow:hidden;margin:0;}#ifm1{width:100%;height:100%;overflow:hidden;margin:0;}</style><iframe id="ifm1" src='http://www.csdn.net' fr

iframe跨域获取父页面url

iframe在跨域情况下, window.top.location.href 无法访问到. 可通过 document.referrer 访问到url,该属性是当前页面document的一个属性,记录这个页面的来源页面. 关于介绍更多的document.referrer内容: http://driftcloudy.iteye.com/blog/986265