在你的网页中嵌入外部网页的方法


Posted in Javascript onApril 02, 2007

Description: Using a tabbed interface, this DHTML script lets you display external web pages inline on your page, with the help of the IFRAME tag. We threw in a feature that allows the user to also load the webpage in the entire browser window when desired. This script works in IE5+ and NS6+, and degrades well with the rest (as tabs are simply regular links). Cool! 
Step 1: Add the below CSS and DHTML script to the <HEAD> section of your page:

<style type="text/css">  
/*Eric Meyer's based CSS tab*/  #tablist{  
padding: 3px 0;  
margin-left: 0;  
margin-bottom: 0;  
margin-top: 0.1em;  
font: bold 12px Verdana;  
}  
#tablist li{  
list-style: none;  
display: inline;  
margin: 0;  
}  
#tablist li a{  
text-decoration: none;  
padding: 3px 0.5em;  
margin-left: 3px;  
border: 1px solid #778;  
border-bottom: none;  
background: white;  
}  
#tablist li a:link, #tablist li a:visited{  
color: navy;  
}  
#tablist li a:hover{  
color: #000000;  
background: #C1C1FF;  
border-color: #227;  
}  
#tablist li a.current{  
background: lightyellow;  
}  
</style>  
<script type="text/javascript">  
/***********************************************  
* Tabbed Document Viewer script- ? Dynamic Drive DHTML code library (www.dynamicdrive.com)  
* This notice MUST stay intact for legal use  
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code  
***********************************************/  
var selectedtablink=""  
var tcischecked=false  
function handlelink(aobject){  
selectedtablink=aobject.href  
tcischecked=(document.tabcontrol && document.tabcontrol.tabcheck.checked)? true : false  
if (document.getElementById && !tcischecked){  
var tabobj=document.getElementById("tablist")  
var tabobjlinks=tabobj.getElementsByTagName("A")  
for (i=0; i<tabobjlinks.length; i++)  
tabobjlinks[i].className=""  
aobject.className="current"  
document.getElementById("tabiframe").src=selectedtablink  
return false  
}  
else  
return true  
}  
function handleview(){  
tcischecked=document.tabcontrol.tabcheck.checked  
if (document.getElementById && tcischecked){  
if (selectedtablink!="")  
window.location=selectedtablink  
}  
}  
</script> 
To customize the look of the tabs (ie: color), edit the CSS. There is no need to modify the script at all.
Step 2: Add the below code to the <BODY> section of your page:
<ul id="tablist">  
<li><a class="current" href="http://www.google.com" onClick="return handlelink(this)">Google</a></li>  
<li><a href="http://www.yahoo.com" onClick="return handlelink(this)">Yahoo</a></li>  
<li><a href="http://www.msn.com" onClick="return handlelink(this)">MSN</a></li>  
<li><a href="http://www.news.com" onClick="return handlelink(this)">News.com</a></li>  
<li><a href="http://www.dynamicdrive.com" onClick="return handlelink(this)">Dynamic Drive</a></li>  
</ul>  
<iframe id="tabiframe" src="http://www.google.com" width="98%" height="350px"></iframe>  <form name="tabcontrol" style="margin-top:0">  
<input name="tabcheck" type="checkbox" onClick="handleview()"> Open tab links in browser window instead.  
</form> 
The above HTML code renders the tab links and IFRAME tag used to contain the external documents. Change the URLs to your own. Now, if you have lots of tab links, you can get them to appear on separate lines, by adding a divider:
<ul id="tablist">  
<li><a class="current" href="#">Google</a></li>  
<li><a href="#">Yahoo</a></li>  
<li><a href="#">MSN</a></li>  
<div style="margin-bottom: 8px"></div>  
<li><a href="#">News.com</a></li>  
<li><a href="#">Dynamic Drive</a></li>  
</ul> 
Javascript 相关文章推荐
用js实现手把手教你月入万刀(转贴)
Nov 07 Javascript
javascript jQuery插件练习
Dec 24 Javascript
精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
Aug 22 Javascript
jqGrid增加时--判断开始日期与结束日期(实例解析)
Nov 08 Javascript
Jquery之Bind方法参数传递与接收的三种方法
Jun 24 Javascript
基于Javascript实现二级联动菜单效果
Mar 04 Javascript
json格式的javascript对象用法分析
Jul 04 Javascript
利用AngularJs实现京东首页轮播图效果
Sep 08 Javascript
node.js express中app.param的用法详解
Jul 16 Javascript
基于ES6 Array.of的用法(实例讲解)
Sep 05 Javascript
vue2.0路由切换后页面滚动位置不变BUG的解决方法
Mar 14 Javascript
详解微信小程序的 request 封装示例
Aug 21 Javascript
关于文本限制字数的js代码
Apr 02 #Javascript
屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码
Apr 01 #Javascript
Javascript中的常见排序算法
Mar 27 #Javascript
一段多浏览器的&quot;复制到剪贴板&quot;javascript代码
Mar 27 #Javascript
CSDN轮换广告图片轮换效果
Mar 27 #Javascript
[原创]提供复制本站内容时出现,该文章转自脚本之家等字样的js代码
Mar 27 #Javascript
驱动事件的addEvent.js代码
Mar 27 #Javascript
You might like
也谈 PHP 和 MYSQL
2006/10/09 PHP
php zlib压缩和解压缩swf文件的代码
2008/12/30 PHP
PHP 长文章分页函数 带使用方法,不会分割段落,翻页在底部
2009/10/22 PHP
让PHP支持断点续传的源码
2010/05/16 PHP
PHPMailer使用教程(PHPMailer发送邮件实例分析)
2012/12/06 PHP
PHP数据库操作Helper类完整实例
2016/05/11 PHP
thinkphp 验证码 的使用小结
2017/05/07 PHP
PHP使用Redis实现防止大并发下二次写入的方法
2017/10/09 PHP
5分钟理解JavaScript中this用法分享
2013/11/09 Javascript
AngularJS中的$watch(),$digest()和$apply()区分
2016/04/04 Javascript
js无提示关闭浏览器窗口的两种方法分析
2016/11/06 Javascript
bootstrap表格分页实例讲解
2016/12/30 Javascript
Vuejs实现带样式的单文件组件新方法
2017/05/02 Javascript
vue按需加载组件webpack require.ensure的方法
2017/12/13 Javascript
基于IView中on-change属性的使用详解
2018/03/15 Javascript
解决Vue中引入swiper,在数据渲染的时候,发生不滑动的问题
2018/09/27 Javascript
js实现搜索栏效果
2018/11/16 Javascript
JS实现图片轮播效果实例详解【可自动和手动】
2019/04/04 Javascript
小程序获取当前位置加搜索附近热门小区及商区的方法
2019/04/08 Javascript
vue 实现websocket发送消息并实时接收消息
2019/12/09 Javascript
vue中使用vue-pdf的方法详解
2020/09/05 Javascript
[54:30]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
搞笑的程序猿:看看你是哪种Python程序员
2015/06/12 Python
python3.6数独问题的解决
2019/01/21 Python
Python变量类型知识点总结
2019/02/18 Python
Python Django框架url反向解析实现动态生成对应的url链接示例
2019/10/18 Python
Python中的With语句的使用及原理
2020/07/29 Python
浅析border-radius如何兼容IE
2016/04/19 HTML / CSS
美国最大的宠物用品零售商:PetSmart
2016/11/14 全球购物
美国卡车、吉普车和SUV零件网站:4 Wheel Parts
2016/11/24 全球购物
高档奢华时装在线目的地:FORWARD by elyse walker
2017/10/16 全球购物
Python如何定义一个函数
2015/09/01 面试题
《跟踪台风的卫星》教学反思
2014/04/10 职场文书
临时用工协议书范本
2014/10/29 职场文书
实习报告怎么写
2019/06/20 职场文书
python ConfigParser库的使用及遇到的坑
2022/02/12 Python