`
wss71104307
  • 浏览: 218529 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

thickbox跨越frameset

JavaScriptjQueryCSSHTMLXHTML 
阅读更多


     thickbox跨越iframe的问题很好解决，只需要在父页和iframe页都要载入 jquery.js thickbox.js thickbox.css（别忘记了父页面） 修改thickbox.js 函数function tb_init(domChunk) 找到tb_show(t,a,g);

这句修改为:

if (window.parent.frames[window.name] &&  
     (parent.document.getElementsByTagName('frameset').length <= 0))
{
     self.parent.tb_show(t,a,g);
}
else
{
    tb_show(t,a,g);
}


然而如果页面布局采用的是frameset这种方法就不适用了，原因是：

  

重点：你不能在<frameset></frameset>标签里使用<body></body>标签！但是，当你要给那些无法支持框架的
浏览器提示一些文字信息的话必须在<noframes>标签内使用<body> .

 很明显thickbox弹出的dialog是在body区域展示的，而通过self.parent获得frame的parent调用tb_show的是在body中实现的，所以这种解决方法对iframe(在body中)而对frameset没有用，所以thickbox无法跨frameset。



看起来thickbox好像怎么也无法跨越frameset，但是可以有一种巧妙的绕过方法。



就是把frameset的页面(记为A)，重新用一个iframe把A放到另外一个页面B中，这样在frameset的子frame中，通过window.top直接获得最上层的即B页面的引用，在B页面中，body中展示的是A页面，故可以通过window.top得到B页面的window对象，然后调用tb_show方法就可以使得弹出的dialog影响使整个页面的背景。

即window.top.tb_show(...);


例子：


其中1.html是以framset布局的

<!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=gb2312" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="thickbox.js"></script>
<link rel="stylesheet" href="thickbox.css" type="text/css" media="screen" />
<title>frameset</title>
</head>
<FRAMESET rows="44,*" cols="*" frameborder="no" border="0" framespacing="0">
  <FRAME src="test2.html" name="tophead" scrolling="NO" noresize id="tophead" >
  <FRAMESET cols="180,*" frameborder="no" border="0" framespacing="0">
    <FRAME src="test2.html" name="left" scrolling="auto" noresize id="left">
    <FRAME src="2.html" name="right" id="right">
  </FRAMESET>
</FRAMESET>
<body>
</BODY>
</html>

text2.html 显示的是thickbox弹出的dialog中的内容

this is test2!
thickbox 弹出显示的内容
 

2.html中需要弹出一个thickbox的dialog

<!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=gb2312" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="thickbox.js"></script>
<link rel="stylesheet" href="thickbox.css" type="text/css" media="screen" />
<title>无标题文档</title>
</head>
<script type="text/javascript">

<body>
<a href="test2.html?keepThis=true&TB_iframe=true&height=250&width=400" title="add a caption to title attribute / or leave blank" class="thickbox">test</a>  
</body>
 


需要把1.html用一个iframe放在新的页面index.jsp ,其中加入的JavaScript是为了使iframe自动调整高度。 


<!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=gb2312" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="thickbox.js"></script>
<link rel="stylesheet" href="thickbox.css" type="text/css" media="screen" />
<script type="text/javascript">
</script>
<title>无标题文档</title>
</head>
<body>
<iframe id="frame_content" src="1.html" scrolling="no" frameborder="0"
 onload="this.height=100"></iframe>
<script type="text/javascript">
function reinitIframe(){
var iframe = document.getElementById("frame_content");
try{
var bHeight = iframe.contentWindow.document.body.scrollHeight;
var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
var height = Math.max(bHeight, dHeight);
iframe.height =  height;
}catch (ex){}
}
window.setInterval("reinitIframe()", 200);
</script>
</body>
</html>

  最后修改thickbox.js ;

   把 tb_show(t,a,g)改为： 你可以类似iframe解决方法自己加入一些判断条件 


window.top.tb_show(t,a,g);
 


测试，可以看到2.html中弹出的dialog覆盖了整个html页面。


Oh,Yeah, Success!!!!


6
顶
0
踩
分享到：
| HRule组件
评论
1 楼 javaDevil 2010-07-12  
引用
self.parent.tb_show(t,a,g); 

这个有问题，如果是这样的话，弹出层就无法获取iframe内的内容了，当为inline模式时
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics