thickbox跨越frameset

最新推荐文章于 2024-05-09 15:55:35 发布
最新推荐文章于 2024-05-09 15:55:35 发布
阅读量1.7k 收藏 1
点赞数
分类专栏： javascript 文章标签： iframe stylesheet xhtml dialog html 文档
 

     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. }  


然而如果页面布局采用的是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>  
<!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中的内容

Html代码 复制代码  收藏代码
  1. this is test2!   
  2. thickbox 弹出显示的内容  
this is test2!
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.   
  12. <body>  
  13. <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>     
  14. </body>  
<!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自动调整高度。


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>  
<!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解决方法自己加入一些判断条件

hsliwei
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
jquery thickbox遮罩frameset框架的解决办法（请仔细阅读描述）
09-01
解决thickbox在frameset框架下只能遮罩子页面的问题。 asp.net项目 直接浏览index.html 最后在父页面和遮罩层里的文本框中输入值后点登录可以得到这几个文本框的值。 将thickbox.js里的tb_init(domChunk)函数替换为： function tb_init(domChunk) { jQuery(domChunk).click(function() { var t = this.title || this.name || null; var a = this.href || this.alt; var g = this.rel || false; //alert(window.top.location); //alert(self.location); //alert(window.top.location == self.location); if (window.top.location != self.location) { window.top.tb_show(t, a, g); } else { self.tb_show(t, a, g); } this.blur(); return false; }); }
悬浮按钮
tb_show的博客
05-16 463
//创建一个继承于UIWindow的类，用于显示悬浮按钮 import UIKit class AssistiveTouch: UIWindow {     var button:UIButton!               override init(frame: CGRect) {                  super.init(fram
Jquery弹出层插件Thickbox使用心得
weixin_30527143的博客
06-26 119
　　 前段时间在建设银行项目上用EXT完整做了个单页系统，太赶了，没有记录下任何东西，现在都忘了，怪可惜的。这次项目用JQuery做js的东西。主要用了个弹出层控件thickbox，自己也扩展和修改了一下。这里就记下来，也提供大家下载，希望对大家有用吧。 　　thickbox官方网站（上面有例子和基本的使用方法）：http://jquery.com/demo/thickbox/ 　　...
用"window.showModalDialog()"实现DIV模式弹出窗口
02-04 512
1.test.htm   测试页面        .list {       border-top:1 solid #8A2BE2;       border-left:1 solid #8A2BE2;       border-right:1 solid #8A2BE2;     }     .list td {       border-bottom: 1 solid #8A2BE2;  
弹出窗口-showWindow
e_yohn的专栏
08-22 1337
New Document           //登陆弹出对话框，并使背景元素不可用 var div_width = 300; var div_height = 200; function showWindow(width,height){ l
thickbox插件
05-26
thickbox插件可以实现页面模态框的效果，并且兼容大部分的浏览器。
Thickbox 3.1插件包
06-29
Thickbox 3.1插件包，其中包裹Thickbox 3.1_js文件和thickbox.css样式包和所需注释及参考
Iframe thickbox2.0使用的方法
09-06
一个小项目中用到，奉命进行修改，定位到
JQUERY THICKBOX弹出层插件
10-30
JQUERY插件THICKBOX的功能很强大,但是它的基本使用却很简单容易.但是要研究的更深,运用得更加灵活的话,还是有点难度，根据其官方站点介绍
·jQuery弹出层插件Thickbox使用心得
weixin_30315435的博客
08-15 90
前段时间在建设银行项目上用EXT完整做了个单页系统，太赶了，没有记录下任何东西，现在都忘了，怪可惜的。这次项目用JQuery做js的东西。主要用了个弹出层控件thickbox，自己也扩展和… Thickbox官方网站（上面有例子和基本的使用方法）：http://jquery.com/demo/thickbox/ 就我使用过程中，Thickbox常见问题：...
常见的 HTML 标准
csdn_ad986ad的博客
04-30 824
HTML（Hypertext Markup Language）有多个版本和标准。
【Delphi 爬虫库 3】使用封装好的 HTML 解析库对 HTML 数据进行解析
记录日常技术经验
05-05 514
HTML是Web页面的构建语言，每个Web开发者都需要了解HTML的基础知识。这时候，我们就需要使用HTML在线解析工具，方便直接地解析和编辑HTML代码。通过使用HTML在线解析工具，我们能够实现快速编辑和预览HTML代码的功能。而且，随着科技发展，HTML在线解析工具被越来越多地应用到各种软件和Web应用程序中，具有越来越广泛的应用前景。成功解析提取出Json，至于对Json怎么解析上一篇文章已经讲过了。HTML源代码非常的长,这里就不贴出了,我们需要对最后的。我们的目标就是利用Html解析库提取出。
HTML 建立列表——列表标签
yuxingwu9872的博客
05-06 413
定义列表标题;<dd>定义列表内容;说明:1. dt和dd对应着的, 一个dt可以对应着多个dd;2. dd完全是为了dt服务的, 对标题进行描述;<dl><dt>标题1</dt><dd>内容11</dd><dd>内容12</dd><dt>标题2内容21</dd><dd>内容22
HTML Audio标签src使用base64字符
天时 地利 人和
05-08 260
【代码】HTML Audio标签src使用base64字符。
8-3 html中的表单标签 select和textarea
weixin_61897906的博客
05-08 408
跟学b站黑马程序员pink老师，之前发过长篇，太长不好阅读，拆分成短篇。
springboot和html怎么实现文件上传
m0_74749208的博客
05-07 517
文件怎样上传
【前端】HTML实现个人简历信息展示页面
2303_80341387的博客
05-06 1262
接下来，我们可以看到每一个项目都有一个小标题，那么这些项目与项目之间可以用有序列表来表示，而功能介绍中的内容，我们又可以通过无序列表来表示。我们首先看到的是我们页面中的姓名，紧接着下面是我们的基本信息板块，教育背景板块，专业技能板块，还有我的项目板块，还有一个个人评价板块。接下来，我们还是首先看到教育背景这个标题，我们可以看到教育背景和基本信息是对应的，所以我们和基本信息一样都使用。接下来，我们就结合我们之前学习过的HTML的标签来打造一个简历信息的展示的页面.那么此时我们就写完了我们的基本信息板块。
SVG在HTML中的魔法：解锁矢量图形的奥秘
艾恩小灰灰的博客
05-09 521
SVG不仅是技术，更是一种艺术，它赋予网页设计无限的创造力。通过以上实战解析，相信你对SVG的那些“难啃骨头”已经有了更深的理解。记住，实践是掌握任何技术的最佳途径，勇敢地在你的项目中尝试SVG吧，你会发现一个全新的视觉世界正在向你招手。继续探索，让创意在网页上自由驰骋！
使用JavaScript将富文本HTML转换为纯文本
最新发布
sg_knight的专栏
05-09 427
在Web开发中，我们经常需要处理HTML内容，但有时为了特定的目的，比如文本处理、搜索或显示在非HTML环境中，我们可能希望将富文本HTML转换为纯文本。这里，我们将探讨如何使用JavaScript来实现这一功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值