thickbox跨越frameset-优快云博客

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"
 οnlοad="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解决方法自己加入一些判断条件