在iframe的name不定时,根据被包含页面大小动态改变iframe的大小(by quqi99)

原创 2007年10月05日 16:43:00

                          在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

 

版权声明:本文为博主原创文章,如需转载,请注明出处!

jsp页面跳转到子页面和返回上一页,附带动态改变父页面的iframe高度大小

前言        在工作中我们经常会遇到页面跳转,传参来实现复杂的业务逻辑.接下来,本文将分享自己在实践中应用的一个jsp页面跳转,动态改变主页面高度的例子来说明如何使用iframe标签. 1.在...

根据iframe框架中页面的实际高度动态改变iframe框架高度

各位是不是感觉标题很难看明白啊,其实这个标题通俗的讲就是iframe框架自适应框架内页面的高度,防止出现动态增加页面内容后,部分页面内容显示不出来的问题。 大概的思路就是,通过获取框架内页面的wind...

动态改变对话框大小和位置

  • 2013年07月03日 19:20
  • 1.8MB
  • 下载

浏览器窗口大小改变时,动态改变div高度和宽度

header、footer高度固定,aside宽度固定,当浏览器窗口大小改变时,动态改变aside高度,content高度和宽度。 html changeble ...

动态改变按钮大小颜色

  • 2014年11月06日 22:17
  • 1.96MB
  • 下载

真正的让iframe自适应高度 兼容多种浏览器随着窗口大小改变

今天有朋友问到我关于“iframe自适应高度”的问题,原本以为是很简单的问题,没想到折腾了20分钟才搞定。期间遇到几个问题,要么是高度自适应了,但是当窗口改变时会出现滚动条。也就是当窗口放大时ifra...

让iframe自适应高度 兼容多种浏览器随着窗口大小改变

工作中我们遇到了iframe嵌入页面高度自适应的问题。因为我们不知道所加载的iframe内容页面会有多高,又不想在页面上出现难看的滚动条,这个时候我们可以使用Javascript来动态让iframe自...

用java模拟curl利用cookie登录抓取一个受密码保护的新页面 ( by quqi99 )

用java模拟curl利用cookie登录抓取一个受密码保护的新页面 ( by quqi99 )
  • quqi99
  • quqi99
  • 2011年01月11日 19:31
  • 15688
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:在iframe的name不定时,根据被包含页面大小动态改变iframe的大小(by quqi99)
举报原因:
原因补充:

(最多只允许输入30个字)