在iframe的name不定时，根据被包含页面大小动态改变iframe的大小(by quqi99)
2007-10-05 16:43
666 查看
在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
作者：张华 发表于：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
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 加载页面时，根据页面的Iframe内的子页面的大小进行动态改变Iframe的大小 JS
- iframe如何让父页面根据子页面的大小而动态为子页面留出空间
- jsp页面跳转到子页面和返回上一页,附带动态改变父页面的iframe高度大小
- 根据iframe中的一个对象大小去动态改变多个iframe的大小
- iframe动态改变内嵌页面高度
- iframe根据子页面自动调整大小
- IFrame 根据嵌入页面自动调节大小
- 子页面js代码改变父页面iframe的大小(转)
- JS根据浏览器窗口大小实时动态改变网页文字大小的方法
- 纯js实现Div在页面垂直居中！可根据浏览器大小的改变而改变！兼容各种浏览器----神器版！
- 动态调整iframe页面的大小
- iframe中的html页面用 js 改变包含此页面的iframe的属性
- javascript动态的改变页面的字体大小
- iframe根据子页面自动调整大小
- EasyUI中iframe嵌入页面，包含datagrid数据动态绑定，页面内容的高度自适应问题
- javascript 动态改变框架frame,iframe的大小
- 模仿iframe框架，由分隔栏动态改变左右两侧div大小———基于jQuery
- 通过css(name,value)方法动态的改变字体大小
- 主页面中的两个iframe实现鼠标拖动改变其大小
- 主页面中的两个iframe实现鼠标拖动改变其大小