在iframe的name不定时，根据被包含页面大小动态改变iframe的大小(by quqi99)
在iframe的name不定时，根据被包含页面大小动态改变iframe的大小(by quqi99)
作者：张华 发表于：2007-10-05 ( http://blog.csdn.net/quqi99 )
版权声明：可以任意转载，转载时请务必以超链接形式标明文章原始出处和作者信息及本版权声明。
假如A页面中有一个iframe元素，嵌入了页面B，
方法一：那么在页面B中加入即可：
<script language="javascript">
<!--
function toppage()
{
//CSS中：onload: expression(frameElement.style.height = document.body.clientHeight + 10);
// window.frameElement指父一级frame
// window.frameElement.style.height = document.body.scrollHeight + 10;
if (self.location!=top.location){
parent.document.all(self.name).height=document.body.scrollHeight + 30;
}
}
-->
</script>
</head>
<body onload="toppage()">
方法二：在页面A中加入：
<iframe id="kefu1frame" name="kefu1frame" src="http://172.17.1.122:8081/lyb/kefu1.jsp "
frameborder="0" scrolling="no" style="width:100%;height:expression(document.getElementById('kefu1frame').document.body.clientHeight + 10);"></iframe>
以上两种方法都有一个共同的毛病，不能支持跨域访问，游览器都禁止了不同顶级域名的iframe与其父窗口之间的通信,IE不允许跨站点得到页面的document.height信息，体现为js错误就是无权访问，为此，我们想到通过IE的剪贴板来进行数据的中转。方法三如下：
在页面B中：
<script language="javascript">
<!--
function toppage()
{
//游览器都禁止了不同顶级域名的iframe与其父窗口之间的通信,IE不允许跨站点得到页面的document.height信息，体现为js错误就是无权访问
//在两个页面中均设置document.domain="abc.com";
//window.frameElement.style.height = document.body.scrollHeight + 10;
/**
if (self.location!=top.location){
parent.document.all(self.name).height=document.body.scrollHeight + 30;
}**/
//先将高度数据取出来放入剪贴板中
var tts = window.clipboardData.getData('text');
window.clipboardData.setData('text',String ('frameHeight=' + document.body.scrollHeight) +"x"+tts);
//window.clipboardData.setData('text',String (document.body.scrollHeight + 10));
}
-->
</script>
<body onload="toppage()">
在页面A中：
<script language="javascript">
function resetIframeHeight(obj){
var str=window.clipboardData.getData('text');
if(str.match(/^frameHeight=/d+x/)){
obj.style.height=parseInt(str.match(//d+/))+'px'; //置高度
window.clipboardData.setData('text',str.replace(/^frameHeight=/d+x/, '')); //重置剪贴板的内容
}
}
</script>
<iframe SCROLLING="no" src="http://172.17.1.122:8081/lyb/kefu1.jsp " width="100%" height="700px" frameborder="0"
onload="resetIframeHeight(this);">
</iframe>
下面是通过script标签来解决问题
比如:在 www.a.com 域名下的页面, 无法用ajax请求www.b.com/ajax.php下的内容.
这里给出一个用JS模拟ajax的方式实现跨域, 但仅仅局限于GET模式!
在 <script> 标签中, src的属性是可以设置非本域下的地址的. 借助此特点,即可模拟ajax的方式实现跨域.
假设 www.a.com 域名下的程序 需要通过ajax方式提交数据到 www.b.com 下的login.php?username=****&passwod=****实现登陆判断.
实现方式如下:
在www.a.com内动态创建JS的方式来加载www.b.com的内容,代码如下
JavaScript代码如下:
//此代码放在www.a.com域名下
var head = document.getElementsByTagName("head")[0];
var js = document.createElement("script");
js.src = "http://www.b.com/login.php?username=****&passwod=****";
js.onload = js.onreadystatechange = function(){
if (!this.readyState || this.readyState == "loaded" || this.readyState == "complete") {
head.removeChild(js);
//JS加载完毕了. 类似于ajax请求完成.
//执行是否登陆成功的判断等操作
}
}
head.appendChild(js);
这只是一个简单的例子,需要b.com下的login.php做好配合,login.php通过GET取得传入值,并生成JS的登陆标记.
JS加载完成后,根据JS标记判断登陆的状态,提示登陆成功或失败.即可完成要求,代码兼容常见浏览器.
当然缺陷也很明显,只能支持GET的方式提交数据
但上面的方法不能够获得返回数据，想要获得返回数据的话还得用代码，就是在本地再创建一个如php文件，ajax调用这个本域的php，在再php去调用跨哉的php.
上面script标签的这种方式，当被嵌的页面上有复杂的ajax调用时，也是不好使的，可以像下面这样：
1）在被调用页加上：
<iframe id="ifrAgent" name="ifrAgent" src="" width="0" height="0" style="display:none;" ></iframe>
<script type="text/javascript">
function sethash(){
var hashH =/*取你们页面的高度值*/;
urlA = "http://fe.baidu.com/~zuoli/agent.html"; /*具体的地址后续定*/
document.getElementById("ifrAgent").src=urlA+"#"+hashH;
}
window.onload=sethash;
</script>
2）在调用页取出高度，进行设置
var invokedIFrame= document.getElementById( " invokedIFrame" )
var locationUrlHash= invokedIFrame.getElementById( " ifrAgent" ).src
invokedIFrame.style.height = locationUrlHash.split( " # " )[ 1 ].split( " | " )[ 0 ] + " px " ;
不过ajax更新数据还有个问题。。。。不能只绑在onload事件上了 你们的请求结果改变我就得重新设置高度 看来得绑选择条件的点击事件了上 这样会有另一个问题。。。。
一个让你能以跨域方法debug的脚本：
set CHROME_HOME=C:\Program Files (x86)\Google\Chrome\Application
for %%x in ("%CHROME_HOME%") do set CHROME_HOME=%%~sx
set EXE_CHROME=%CHROME_HOME%\chrome.exe
%EXE_CHROME% --disable-web-security http://localhost:8081