Question

JS实现iframe高度自适应的问题

由于项目需要，要做一个静态站点作为展示，里面使用iframe来实现页面的切换显示。
用iframe都知道高度自适应问题。
现在使用的JS代码如下，可在IE和FF中正常显示，OP，CHROME调试时提示错误：Failed to read "contentDocument " property from "HTMLFrameElement"
<script type="text/javascript" >
function turnHeight(iframe)
{
var frm = document.getElementById(iframe);
var subWeb = document.frames ? document.frames[iframe].document : frm.contentDocument;
if(frm != null && subWeb != null)
{ frm.height = subWeb.body.scrollHeight + 20;}
}
</script>

由于我对JS还是很陌生，所以提几个简单的问题：
1、什么是同域，跨域。我看百度上的解释说是，不同域名。但是我的iframed调用的子页面，跟父页面是在同一个目录，不同文件夹中的，这样也算跨域吗？
2、要做到比较好的兼容性，代码应该怎么修改呢？

Answer 1

我看了一下代码，在Chrome下获取frame里面的document确实是用
document.getElementById('frameId').contentDocument;

这里报错的话，可能是因为Chrome没有获取到frame对象，你可以检查一下

简单的说跨域和同域
同域就是访问的文件和请求的发起文件都在同一域名下，即同一台服务器上，地址可以不加http://+域名

跨域就是访问的文件和请求发起的文件不在一台服务器上，发起方的请求地址必须加上http://+域名才可以访问到

追问

我用alert在前端测试了一下，最初返回frm是[object HTMLFrameElement]，但是到了onload的时候，就会出错，Console提示，同名字的网页，使用的端口不同，一个是21，一个是101。

也就是turnHeight使用21端口，但是id是“right”的框架使用的是101端口。

我就迷糊了，我并没有设置过101端口啊，为什么会这样呢？

追答

呃，我没有看到你的代码中出现onload，你是把onload写到iframe标签里的吗？

追问

汗，是啊，不好意思啊，忘记把iframe里的代码放上来了。

追答

<iframe onload="adjust(this)">

function adjust(s){
    var b = document.all ? s.document : s.contentDocument,
    h = parseInt(b.body.scrollHeight) + 20;
    return s.height = h;
}

你试试这个呢，onload里边的this的意思就是把iframe对象传进去

Answer 2

1.js控制iframe

<div id="dd">132</div>
<script>
var s = '<iframe src="javascript:document.open();document.write(\'<script>alert(1);<\/script><div>test</div>\');document.close();"></iframe>';
document.getElementById("dd").innerHTML = s
</script>

<iframe id="tst" name="tst" ></iframe>
<script>
alert(2);
var cw = window.document.getElementById('tst').contentWindow;
cw.document.open();
cw.document.write('<script>alert("test")<' + '/script>');
cw.document.write('<div>test</div>');
cw.document.close();
</script>

IE6,IE7,FF2下测试通过

2.自适应高度
在id为"ifr"的iframe内容里写上js代码:

<script>
function resize(){
parent.document.getElementById('ifr').style.height = document.body.scrollHeight>300?document.body.scrollHeight:300+"px";
}
window.onload=resize;
window.onresize = resize;
</script>

就能控制id为"ifr"高度至少为300px

要是回答的内容有问题，或认为不妥，请发送百度消息给我，消息内容加上本页网址哦。。

·