请教一个iframe问题，急！~

咸鱼boris 2011-12-15 02:55:39
页面A通过iframe嵌入页面B：


<body>

<iframe width="100%" height="490" frameborder="0" scrolling="no" onload="this.height=100" src="B.html" id="mainIframe" />

<script type="text/javascript">

   var initIframe = function(){



       

       var ifm= document.getElementById("mainIframe");

       try{

       var bHeight = ifm.contentWindow.document.body.scrollHeight;

       var dHeight = ifm.contentWindow.document.documentElement.scrollHeight;



       var height = Math.max(bHeight, dHeight);



       ifm.height = height;

       }catch (ex){

         alert(ex.message);

       }

   } 





window.setInterval("initIframe()",200);  //iframe自适应高度

</script>

</body>

B页面很长，而且设置第一个文本域聚焦：


<head>

<script type="text/javascript">

  window.onload = function(){document.getElementById("test").focus();};

</script>

</head>

<body>

<br />

......<!--很多个<br />不一一列出，保证页面有滚动条-->

<br />

<input type="text" id="test" />

</body>

我们知道当我们打开页面A时，iframe加载完B，B页面的文本域聚焦，此时焦点在B页面，B页面是通过iframe导入，即
<iframe width="100%" height="490" frameborder="0" scrolling="no" onload="this.height=100" src="B.html" id="mainIframe" />
这个iframe设置了scrolling="no"，而且iframe做了自适应高度设置，此时B页面聚焦按理说聚焦过程页面会往下跑，但是此时显然不可以了，因为滚动条没有了，但是现在需要父页面的滚动条往下跑，达到子页面聚焦显示的效果。
此时方案一在父页面获取子页面第一个聚焦元素的位置，通过计算设置父页面的scrollTop是行不通的，因为焦点在子页面。
方案二在子页面计算聚焦元素的位置设置父页面窗口scrollTop，这样做会有个问题，父页面加载子页面需要时间，子页面加载文档需要时间，我在子页面window.onload里处理此操作子页面并没有反应，在子页面获取父页面iframe元素，绑定onload事件，在onload结束后操作，也行不通。只有在子页面设置延时，setTimeout，此时可以出现所要的效果，但是这并不是什么好办法，应为我们无法判别网络延时。

求好的解决方案，150分奉上，求大神指教

方案一：


//A页面处理

 var initIframe = (function(){

   var top = 0;

   var temp = false;

   return function() {

       

       var ifm= document.getElementById("mainIframe");

       try{

       var bHeight = ifm.contentWindow.document.body.scrollHeight;

       var dHeight = ifm.contentWindow.document.documentElement.scrollHeight;

       if(ifm.contentWindow.document){

          var subDoc = ifm.contentWindow.document;

          

          if(top){

            //alert(top);

            if(document.documentElement && document.documentElement.scrollTop){

               document.documentElement.scrollTop = top;

               

            }else if(document.body){

               document.body.scrollTop = top;

               

            }

            temp = true;

          }else if(!top && !temp){

            top = $(":focus:first",subDoc).offset().top;

          }

       }

       var height = Math.max(bHeight, dHeight);



       ifm.height = height;

       }catch (ex){

         alert(ex.message);

       }

   } 

})();



window.setInterval("initIframe()",3000);

方案二：


window.onload = function(){

   document.getElementById("test").focus();

   var $input = $("#test");

   var top = $input.offset().top;

   var ifm = parent.document.getElementById("mainIframe");

   if ( $.browser.msie ) {

		ifm.attachEvent( "onload", finish );

	} else {

		ifm.onload = $.browser.opera ? function(){ this.onload = finish; } : finish;

	} 

}



function finish(){

   if(document.documentElement && document.documentElement.scrollTop){

      document.documentElement.scrollTop = 0;

      parent.document.documentElement.scrollTop = top;

      

   }else if(document.body){

      parent.document.body.scrollTop = top;

      

   }

}

代码中混用jQuery只是为了用它的offset方法，以后代码自会优化
...全文
230 14 打赏 收藏 转发到动态 举报
写回复
用AI写文章
14 条回复
切换为时间正序
请发表友善的回复…
发表回复
咸鱼boris 2011-12-16
  • 打赏
  • 举报
 回复
[Quote=引用 13 楼 danica7773 的回复:]

这样算是满足需求了，只是你这个聚焦怎么个说法以，一定要表单项在页面上方？

a.html
HTML code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http……
[/Quote]
不用，这样可以满足要求，谢谢大神指教~
打字员 2011-12-16
  • 打赏
  • 举报
 回复
这样算是满足需求了，只是你这个聚焦怎么个说法以，一定要表单项在页面上方？

a.html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>

<body>

<div style="height:200px;">a</div>

<iframe width="100%" height="490" frameborder="0" scrolling="no" src="b.html" id="mainIframe" /></iframe>

<div style="height:200px;">b</div>

</body>

</html>



b.html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>

<body>

<p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>

<input type="text" id="test" />

<script type="text/javascript">

	window.onload = function() {

		parent.document.getElementById('mainIframe').style.height = document.documentElement.scrollHeight + 'px';

		document.getElementById("test").focus();

	}

</script>

</body>

</html>
咸鱼boris 2011-12-16
  • 打赏
  • 举报
 回复
[Quote=引用 11 楼 czhongzheng 的回复:]

楼主想知道的是主窗体与子窗体的关系吧
下面的例子是一个子窗体调用方法改变父窗体

主页面 cc.html

<html>
<head>
<script type="text/javascript">
function temp(id) {
document.getElementById("temp").src = id;



}
function te……
[/Quote]
恩，你说的很详细，如果你有时间的话可以看看我问题中的描述和方案中的代码实现，其实父子页面的调用关系我已经用到了，iframe元素的各类属性我也明白，主要是主页面中的iframe加载src需要时间，子页面加载文档需要时间，而子页面不能很顺利地在主页面的iframe加载完且子页面文档加载完时给主页面有效设置body的scrollTop属性，有点绕，这样讲还算清楚吗？
czhongzheng 2011-12-16
  • 打赏
  • 举报
 回复
楼主想知道的是主窗体与子窗体的关系吧
下面的例子是一个子窗体调用方法改变父窗体

主页面 cc.html

<html>
<head>
<script type="text/javascript">
function temp(id) {
document.getElementById("temp").src = id;



}
function temps(id) {
alert(id);
}
</script>
</head>
<body>
主页
<a href="#" id="bb.html" onclick="temp(this.id);" > bb</a>
<a href="#" id="xx.html" onclick="temp(this.id);" > cc</a>
<Iframe id="temp" src="xx.html" width="500" heitht="600">aa</IFRAME>
</body>
</html>

子页面 xx.html

<html>

<body>
这是第一个子页面
</body>
</html>

子页面 bb.html

<html>
<body>
第二个子页面
<a href="#" id="xx.html" onclick="window.parent.temp(this.id);" > cc</a>
</body>
</html>

把这三个页面放在同一个目录下面 ，打开主页面试一下再对着代码看一下你就会找到你所需要的东西了


以下是iframe的一些语法
标记的使用格式是:
<Iframe src="URL" width="x" height="x" scrolling="[OPTION]" frameborder="x"></iframe>
src：文件的路径，既可是HTML文件，也可以是文本、ASP等；
width、height："画中画"区域的宽与高；
scrolling：当SRC的指定的HTML文件在指定的区域不显不完时，滚动选项，如果设置为NO，则不出现滚动条；如为Auto：则自动出 现滚动条；如为Yes，则显示；
FrameBorder：区域边框的宽度，为了让“画中画“与邻近的内容相融合，常设置为0
咸鱼boris 2011-12-16
  • 打赏
  • 举报
 回复
[Quote=引用 9 楼 p2227 的回复:]

引用 8 楼 sharkdbj 的回复:

引用 5 楼 p2227 的回复:

引用 4 楼 hejunheng 的回复:

引用 3 楼 sharkdbj 的回复:

如有说的不够明白的，可以在线一一解释，跪求解答啊

你能先说结论吗？就是你想实现什么效果，方案1、2是已经实现了？还是有错？
楼主就是想打开的时候浏览器显示出<input type="text" id="……
[/Quote]
是啊，我们需求就要求主页面嵌iframe框架来布局，也不搞清楚这么做的弊病，现在因为这个布局发现的问题越来越多了，而且都很难解决。改成div布局这些问题就都不存在了。在等等有什么好答案吧，没的话就结贴了，诶~
p2227 2011-12-15
  • 打赏
  • 举报
 回复
[Quote=引用 8 楼 sharkdbj 的回复:]

引用 5 楼 p2227 的回复:

引用 4 楼 hejunheng 的回复:

引用 3 楼 sharkdbj 的回复:

如有说的不够明白的，可以在线一一解释，跪求解答啊

你能先说结论吗？就是你想实现什么效果，方案1、2是已经实现了？还是有错？
楼主就是想打开的时候浏览器显示出<input type="text" id="test" />，并且方案1、2如何也有详细描述……
[/Quote]现在浏览器对iframe开始有限制了，比如chrome就不能parent.xxx直接执行一些父页面的东西，能够少用的话最好少用，当然这是题外话。
咸鱼boris 2011-12-15
  • 打赏
  • 举报
 回复
[Quote=引用 5 楼 p2227 的回复:]

引用 4 楼 hejunheng 的回复:

引用 3 楼 sharkdbj 的回复:

如有说的不够明白的，可以在线一一解释，跪求解答啊

你能先说结论吗？就是你想实现什么效果，方案1、2是已经实现了？还是有错？
楼主就是想打开的时候浏览器显示出<input type="text" id="test" />，并且方案1、2如何也有详细描述了：1不行，2在本地可以成功，但不能保证放……
[/Quote]
谢谢您的解释，^_^
咸鱼boris 2011-12-15
  • 打赏
  • 举报
 回复
[Quote=引用 6 楼 qq307023807 的回复:]

就是要显示聚焦的地方吗 在B页面加个锚点吧
<head>
<script type="text/javascript">
window.location="B.html#aaa";
window.onload = function(){document.getElementById("test").focus();};
</script>
</head>
<body>
<……
[/Quote]
谢谢回复，你的这个方法对于单个页面在显示时显示到锚点所在位置是可行的，我这个是父页面嵌入子页面的情况，父页面嵌入子页面用的是iframe框架，框架高度自适应，也就是说A页面打开时B无法到达锚点位置。
现在的解决方案为：


//B页面

var timer,top;



window.onload = function(){

   document.getElementById("test").focus();

   var $input = $("#test");

   top = $input.offset().top;

   var ifm = parent.document.getElementById("mainIframe");

   finish();

}



function finish(){

   if(document.documentElement){

      document.documentElement.scrollTop = 0;

      parent.document.documentElement.scrollTop = top;

      

   }else if(document.body){

      parent.document.body.scrollTop = top;

      

   }

   

   if((parent.document.documentElement.scrollTop || parent.document.body.scrollTop) && timer){

      clearTimeout(timer);

   }else{

      timer = setTimeout(finish,20);

   }

}

简单说下，在B页面设置setTimeout，重复设置父页面scrollTop 值，并监听父页面的scrollTop 是否有值，如果有值则清掉延时函数。这个方法上传到服务器，稍微改下是可以用的。但这并不是什么好办法。
qq307023807 2011-12-15
  • 打赏
  • 举报
 回复
就是要显示聚焦的地方吗 在B页面加个锚点吧
<head>
<script type="text/javascript">
window.location="B.html#aaa";
window.onload = function(){document.getElementById("test").focus();};
</script>
</head>
<body>
<br />
<br />
<br />
<br />

<br />
<br /><br />
<br />

<br />
<br /><br />
<br />

<br />
<br /><br />
<br />

<br />
<br /><br />
<br />

<br />
<br /><br />
<br />

<br />
<br /><br />
<br />

<br />
<br /><br />
<br />

<br />
<br /><br />
<br />

<br />
<br /><br />
<br />

<br />
<br /><br />
<br />

<br />
<br /><br />
<br />

<br />
<br /><br />
<br />

<br />
<br /><br />
<br />

<br />
<br /><br />
<br />

<br />
<br /><br />
<br />

<br />
<br /><br />
<br />

<br />
<br /><br />
<br />

<br />
<br /><br />
<br />

<br />
<br /><br />
<br />

<br />
<br />
<br />
<br />
......<!--很多个<br />不一一列出，保证页面有滚动条-->
<br />
<a name="aaa"></a>
<input type="text" id="test" />
</body>


p2227 2011-12-15
  • 打赏
  • 举报
 回复
[Quote=引用 4 楼 hejunheng 的回复:]

引用 3 楼 sharkdbj 的回复:

如有说的不够明白的，可以在线一一解释，跪求解答啊

你能先说结论吗？就是你想实现什么效果，方案1、2是已经实现了？还是有错？
[/Quote]楼主就是想打开的时候浏览器显示出<input type="text" id="test" />，并且方案1、2如何也有详细描述了：1不行，2在本地可以成功，但不能保证放在网络后能成功。
hejunheng 2011-12-15
  • 打赏
  • 举报
 回复
[Quote=引用 3 楼 sharkdbj 的回复:]

如有说的不够明白的，可以在线一一解释，跪求解答啊
[/Quote]
你能先说结论吗？就是你想实现什么效果，方案1、2是已经实现了？还是有错？
咸鱼boris 2011-12-15
  • 打赏
  • 举报
 回复
如有说的不够明白的，可以在线一一解释，跪求解答啊
咸鱼boris 2011-12-15
  • 打赏
  • 举报
 回复
大伙儿吭个声儿啊，难道要沉吗？
咸鱼boris 2011-12-15
  • 打赏
  • 举报
 回复
自己顶起，求解答~~
iframe嵌套其它网站页面详解
本文全面解析了iframe的基本用法、自适应技巧及其在广告展示中的应用，同时深入探讨了iframe的安全性问题，包括如何防止页面被恶意嵌套及跨域数据交互的方法。
HTML iframe标签以及其高度问题
本文深入探讨了iframe的基本概念及应用，包括如何利用iframe实现页面局部更新而不刷新整个页面，解决跨域通信问题的方法，以及iframe在实现导航栏固定时的内容自适应高度技巧。
iframe引用 Ueditor 问题
程序员在项目中遇到Ueditor在iframe中样式显示不全的问题，通过调整iframe宽度解决了工具栏显示，但文本框仍无法显示。最终发现只需在外部引入CSS样式文件即可修复所有样式问题，但如何获取iframe内Ueditor的内容仍困扰着作者。
iframe页面嵌套问题
文章讨论了iframe在网页设计中的应用，包括如何实现iframe根据内容自适应高度，解决了大量页面管理的代码量问题。同时，提到了iframe内的页面跳转会保持在框架内，涉及安全性问题。此外，文章还探讨了如何处理iframe外部的页面跳转到iframe以及iframe用于广告展示的合理性。
【前端学习】iframe标签以及postMessage解决iframe中的跨域问题
博主面试遇iframe嵌套页面跨域问题卡壳后展开学习。介绍了iframe是HTML行内块级元素，用于嵌入网页及相关属性。还讲述了iframe页面间交互，同源可互相读写操作，实现跨域通信需用postMessage API，不过该API还需深入研究。
JavaScript

87,989

社区成员

224,684

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章