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

这句修改为:

Js代码 复制代码 收藏代码
  1. if (window.parent.frames[window.name] &&
  2. (parent.document.getElementsByTagName('frameset').length <= 0))
  3. {
  4. self.parent.tb_show(t,a,g);
  5. }
  6. else
  7. {
  8. tb_show(t,a,g);
  9. }
[js] view plaincopy
  1. if (window.parent.frames[window.name] &&
  2. (parent.document.getElementsByTagName('frameset').length <= 0))
  3. {
  4. self.parent.tb_show(t,a,g);
  5. }
  6. else
  7. {
  8. tb_show(t,a,g);
  9. }

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

Frameset说明代码 复制代码 收藏代码
  1. 重点：你不能在<frameset></frameset>标签里使用<body></body>标签！但是，当你要给那些无法支持框架的
  2. 浏览器提示一些文字信息的话必须在<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布局的

Html代码 复制代码 收藏代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <script type="text/javascript" src="jquery.js"></script>
  6. <script type="text/javascript" src="thickbox.js"></script>
  7. <link rel="stylesheet" href="thickbox.css" type="text/css" media="screen" />
  8. <title>frameset</title>
  9. </head>
  10. <FRAMESET rows="44,*" cols="*" frameborder="no" border="0" framespacing="0">
  11. <FRAME src="test2.html" name="tophead" scrolling="NO" noresize id="tophead" >
  12. <FRAMESET cols="180,*" frameborder="no" border="0" framespacing="0">
  13. <FRAME src="test2.html" name="left" scrolling="auto" noresize id="left">
  14. <FRAME src="2.html" name="right" id="right">
  15. </FRAMESET>
  16. </FRAMESET>
  17. <body>
  18. </BODY>
  19. </html>
[html] view plaincopy
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <script type="text/javascript" src="jquery.js"></script>
  6. <script type="text/javascript" src="thickbox.js"></script>
  7. <link rel="stylesheet" href="thickbox.css" type="text/css" media="screen" />
  8. <title>frameset</title>
  9. </head>
  10. <FRAMESET rows="44,*" cols="*" frameborder="no" border="0" framespacing="0">
  11. <FRAME src="test2.html" name="tophead" scrolling="NO" noresize id="tophead" >
  12. <FRAMESET cols="180,*" frameborder="no" border="0" framespacing="0">
  13. <FRAME src="test2.html" name="left" scrolling="auto" noresize id="left">
  14. <FRAME src="2.html" name="right" id="right">
  15. </FRAMESET>
  16. </FRAMESET>
  17. <body>
  18. </BODY>
  19. </html>

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

Html代码 复制代码 收藏代码
  1. this is test2!
  2. thickbox 弹出显示的内容
[html] view plaincopy
  1. this is test2!
  2. thickbox 弹出显示的内容

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

Html代码 复制代码 收藏代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <script type="text/javascript" src="jquery.js"></script>
  6. <script type="text/javascript" src="thickbox.js"></script>
  7. <link rel="stylesheet" href="thickbox.css" type="text/css" media="screen" />
  8. <title>无标题文档</title>
  9. </head>
  10. <script type="text/javascript">
  11. <body>
  12. <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>
  13. </body>
[html] view plaincopy
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <script type="text/javascript" src="jquery.js"></script>
  6. <script type="text/javascript" src="thickbox.js"></script>
  7. <link rel="stylesheet" href="thickbox.css" type="text/css" media="screen" />
  8. <title>无标题文档</title>
  9. </head>
  10. <script type="text/javascript">
  11. <body>
  12. <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>
  13. </body>

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

Html代码 复制代码 收藏代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <script type="text/javascript" src="jquery.js"></script>
  6. <script type="text/javascript" src="thickbox.js"></script>
  7. <link rel="stylesheet" href="thickbox.css" type="text/css" media="screen" />
  8. <script type="text/javascript">
  9. </script>
  10. <title>无标题文档</title>
  11. </head>
  12. <body>
  13. <iframe id="frame_content" src="1.html" scrolling="no" frameborder="0"
  14. onload="this.height=100"></iframe>
  15. <script type="text/javascript">
  16. function reinitIframe(){
  17. var iframe = document.getElementById("frame_content");
  18. try{
  19. var bHeight = iframe.contentWindow.document.body.scrollHeight;
  20. var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
  21. var height = Math.max(bHeight, dHeight);
  22. iframe.height =  height;
  23. }catch (ex){}
  24. }
  25. window.setInterval("reinitIframe()", 200);
  26. </script>
  27. </body>
  28. </html>
[html] view plaincopy
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <script type="text/javascript" src="jquery.js"></script>
  6. <script type="text/javascript" src="thickbox.js"></script>
  7. <link rel="stylesheet" href="thickbox.css" type="text/css" media="screen" />
  8. <script type="text/javascript">
  9. </script>
  10. <title>无标题文档</title>
  11. </head>
  12. <body>
  13. <iframe id="frame_content" src="1.html" scrolling="no" frameborder="0"
  14. onload="this.height=100"></iframe>
  15. <script type="text/javascript">
  16. function reinitIframe(){
  17. var iframe = document.getElementById("frame_content");
  18. try{
  19. var bHeight = iframe.contentWindow.document.body.scrollHeight;
  20. var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
  21. var height = Math.max(bHeight, dHeight);
  22. iframe.height =  height;
  23. }catch (ex){}
  24. }
  25. window.setInterval("reinitIframe()", 200);
  26. </script>
  27. </body>
  28. </html>

最后修改thickbox.js ;

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

thickbox跨越frameset相关推荐

  1. My97DatePicker日历的平面显示，不是文本框点击事件后显示

    二. 功能及示例 2. 特色功能 平面显示 日期控件支持平面显示功能,只要设置一下eCont属性就可以把它当作日历来使用了,无需触发条件,直接显示在页面上 示例2-1 平面显示演示 <div i ...

  2. jsp日期插件My97DatePicker

    jsp日期插件My97DatePicker 强大的日期控件 使用方便简单 (2010-10-30 18:59:12) 转载▼ 标签: js javascript 日期插件 jsp it 分类: jqu ...

  3. 日期控件My97DatePicker的使用

    一. 简介 1. 简介 目前的版本是:4.8 文档&演示:http://www.my97.net/dp/demo/index.htm 下载:http://www.my97.net/dp/dow ...

  4. html frameset

    两个frame <frameset cols="25%,75%"> <frame name = "frame1" src="fram ...

  5. jQuery插件thickbox在ie下垂直居中问题

    jQuery 插件 thickbox 3.1 在ie下总不能垂直居中,按"http://jamazon.co.uk/web/2008/03/17/thickbox-31-ie7-positi ...

  6. ThickBox 3.1参数详解(转)

    前几天写了一篇关于ThickBox 3.1的文章:今天在使用这个东西的时候发现里面有许多参数没有详细解释,今天抽空整理出来,现和大家分享一下: 先说几个参数: class="thickbox ...

  7. frame,iframe,frameset之间的关系与区别

    2019独角兽企业重金招聘Python工程师标准>>> ■ 框架概念 : 所谓框架便是网页画面分成几个框窗,同时取得多个 URL.只需要 <FRAMESET> <F ...

  8. js获取宽度设置thickbox百分比

    thickbox的宽高不好设为百分比,这样遇到不同的尺寸的电脑就会出现问题. 怎么做呢? 通过js来处理. <script type="text/javascript"> ...

  9. 组策略 从入门到精通（二） 如何区别跨越WAN网的计算机对组策略的套用

    如果客户机与DC中间跨越了网络,造成传输速率慢的情况,我们希望通过策略中的一些元素,达成对这些计算机的另类处理.但我们并不知道这些计算机哪些与我们DC之间属于低速连接,哪些属于高速连接,那么我们要如何 ...

最新文章

  1. “怀才不遇”与“怀才不孕”怎么办？
  2. 金融系列4《基本指令》
  3. [Codeforces 10E] Greedy Change
  4. PAT甲级1028 List Sorting：[C++题解]排序，cin和cout会超时
  5. CGLIB代理到底是个什么东西？这是一篇最全的CGLIB大全
  6. java项目中Classpath路径到底指的是哪里？
  7. linux-查找文件夹
  8. linux strace cpu,如何定位死循环或高CPU使用率(linux)
  9. A - Cube Stacking(带权并查集)
  10. log4j2日志xml配置——不同级别的日志分别记录在不同的文件
  11. java request 原理_JavaWeb response和request对象原理及实例解析
  12. 一周学会php 视频,一周学会PHP视频 普通下载
  13. 大型网站技术架构（五）--网站高可用架构
  14. 数据库如何执行sql语句
  15. 【2013年总结】思维跌宕起伏，生命颠簸曲折的一年
  16. linux怎么设置raid,如何在Linux中配置RAID-教程
  17. 生活美学 | 8种咖啡冲煮器具分别有什么特点
  18. HarvestText
  19. 人效提高350%，基于KICP搭建的营销套电客服机器人，让欧派家居赢在起点
  20. 7-7 到底是不是太胖了

热门文章

  1. 使用又拍云加速你的静态网站
  2. torch.empty用法
  3. springboot中@scheduled注解使用备注
  4. 产品设计 - 关于测试
  5. 「读书笔记」第五项修炼-学习型组织的艺术与实践（二）
  6. AutoDL平台租借GPU详解
  7. android view flipper,Android之ViewFlipper的简单使用
  8. 两大榜单揭晓啦，2021年中国高性能计算机性能TOP100+国际人工智能性能排行榜AIPerf500...
  9. 单片机+PHY芯片+Powerlink协议实现高效数据采集探究（工业总线485和CAN的升级）
  10. 定时任务 * * * * *各参数含义