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


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 相关文章推荐
极酷的javascirpt,让你随意编辑任何网页
Feb 25 Javascript
javascript操作表格排序实例分析
May 06 Javascript
jquery实现叠层3D文字特效代码分享
Aug 21 Javascript
JS实现图片的不间断连续滚动的简单实例
Jun 03 Javascript
在Docker快速部署Node.js应用的详细步骤
Sep 02 Javascript
JS获取浮动(float)元素的style.left值为空的快速解决办法
Feb 19 Javascript
JavaScript对JSON数据进行排序和搜索
Jul 24 Javascript
angular中ui calendar的一些使用心得(推荐)
Nov 03 Javascript
js定时器实现倒计时效果
Nov 05 Javascript
jQuery实现的电子时钟效果完整示例
Apr 28 jQuery
基于JS实现简单滑块拼图游戏
Oct 12 Javascript
JavaScript 实现下雪特效的示例代码
Sep 09 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 模拟POST|GET操作实现代码
2010/07/20 PHP
php提示Call-time pass-by-reference has been deprecated in的解决方法[已测]
2012/05/06 PHP
浅析Apache中RewriteCond规则参数的详细介绍
2013/06/30 PHP
PHP使用GIFEncoder类生成的GIF动态图片验证码
2014/07/01 PHP
详解PHP中websocket的使用方法
2016/09/15 PHP
thinkphp5框架实现的自定义扩展类操作示例
2019/05/16 PHP
Laravel 6 将新增为指定队列任务设置中间件的功能
2019/08/06 PHP
LazyLoad 延迟加载(按需加载)
2010/05/31 Javascript
js 程序执行与顺序实现详解
2013/05/13 Javascript
JS实现距离上次刷新已过多少秒示例
2014/05/23 Javascript
JavaScript中reduce()方法的使用详解
2015/06/09 Javascript
JavaScript基础——使用Canvas绘图
2016/11/02 Javascript
jquery select2的使用心得(推荐)
2016/12/04 Javascript
解析NodeJs的调试方法
2016/12/11 NodeJs
原生js实现简单的模态框示例
2017/09/08 Javascript
谈谈vue中mixin的一点理解
2017/12/12 Javascript
vue-cli项目中使用Mockjs详解
2018/05/14 Javascript
基于vue开发微信小程序mpvue-docs跳转页面功能
2019/04/10 Javascript
pycharm 使用心得(七)一些实用功能介绍
2014/06/06 Python
python实现对csv文件的列的内容读取
2018/07/04 Python
Python读取数据集并消除数据中的空行方法
2018/07/12 Python
python pandas实现excel转为html格式的方法
2018/10/23 Python
不归路系列:Python入门之旅-一定要注意缩进!!!(推荐)
2019/04/16 Python
python障碍式期权定价公式
2019/07/19 Python
通过实例简单了解Python sys.argv[]使用方法
2020/08/04 Python
用Python制作音乐海报
2021/01/26 Python
CSS3实现淘宝留白的方法
2020/06/05 HTML / CSS
VSCode 自定义html5模板的实现
2019/12/05 HTML / CSS
日本最大的旅游网站:Rakuten Travel(乐天旅游)
2018/08/02 全球购物
Bally巴利中国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/10/09 全球购物
印尼网上商店:Alfacart.com
2019/03/11 全球购物
湖南卫视在线视频媒体平台:芒果TV
2019/10/30 全球购物
草莓网中国:StrawberryNet中国
2020/08/17 全球购物
纪律委员竞选稿
2015/11/19 职场文书
党员心得体会范文2016
2016/01/23 职场文书
教你做个可爱的css滑动导航条
2021/06/15 HTML / CSS