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


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 相关文章推荐
jquery检测input checked 控件是否被选中的方法
Mar 26 Javascript
简单谈谈javascript中的变量、作用域和内存问题
Aug 30 Javascript
跟我学习javascript创建对象(类)的8种方法
Nov 20 Javascript
jQuery+canvas实现简单的球体斜抛及颜色动态变换效果
Jan 28 Javascript
微信小程序  生命周期详解
Oct 27 Javascript
Bootstrap基本插件学习笔记之模态对话框(16)
Dec 08 Javascript
JS实现PC手机端和嵌入式滑动拼图验证码三种效果
Feb 15 Javascript
利用ES6语法重构React组件详解
Mar 02 Javascript
JavaScript实现简单的星星评分效果
May 18 Javascript
JS如何实现在页面上快速定位(锚点跳转问题)
Aug 14 Javascript
express框架下使用session的方法
Jul 31 Javascript
JS异步宏队列与微队列原理区别详解
Jul 02 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数组传递是值传递而非引用传递概念纠正
2013/01/31 PHP
php截取字符串并保留完整xml标签的函数代码
2013/02/06 PHP
php操作memcache缓存方法分享
2015/06/03 PHP
JS使用getComputedStyle()方法获取CSS属性值
2014/04/23 Javascript
IE6-8中Date不支持toISOString的修复方法
2014/05/04 Javascript
JavaScript strike方法入门实例(给字符串加上删除线)
2014/10/17 Javascript
js实现刷新iframe的方法汇总
2015/04/27 Javascript
JavaScript贪吃蛇小组件实例代码
2017/08/20 Javascript
js实时监控文本框输入字数的实例代码
2018/01/18 Javascript
详解vue在项目中使用百度地图
2019/03/26 Javascript
JavaScript实现随机点名器实例详解
2019/05/07 Javascript
Vue Autocomplete 自动完成功能简单示例
2019/05/25 Javascript
Vue 使用Props属性实现父子组件的动态传值详解
2019/11/13 Javascript
[53:03]Optic vs TNC 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python中的__new__与__init__魔术方法理解笔记
2014/11/08 Python
详解Python核心对象类型字符串
2018/02/11 Python
Python日期时间Time模块实例详解
2019/04/15 Python
快速解决pyqt5窗体关闭后子线程不同时退出的问题
2019/06/19 Python
h5实现获取用户地理定位的实例代码
2017/07/17 HTML / CSS
canvas实现漂亮的下雨效果的示例
2018/04/18 HTML / CSS
牵手50台湾:专为黄金岁月的单身人士而设的交友网站
2021/02/18 全球购物
设计4个线程,其中两个线程每次对j增加1,另外两个线程对j每次减少1。写出程序。
2014/12/30 面试题
编程用JAVA解析XML的方式
2013/07/07 面试题
教师队伍管理制度
2014/01/14 职场文书
区三好学生主要事迹
2014/01/30 职场文书
会计岗位职责范本
2014/03/07 职场文书
农村结婚典礼司仪主持词
2014/03/14 职场文书
《北京的春节》教学反思
2014/04/07 职场文书
乡镇党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
酒店人事主管岗位职责
2015/04/11 职场文书
幼儿园安全工作总结2015
2015/04/20 职场文书
乔布斯辞职信(中英文对照)
2015/05/12 职场文书
2015年秋季灭鼠工作总结
2015/07/27 职场文书
网络安全倡议书(3篇)
2019/09/18 职场文书
Python实现PIL图像处理库绘制国际象棋棋盘
2021/07/16 Python
世界十大动漫制作公司排行榜,迪士尼上榜,第二是美国代表性文化符
2022/03/18 欧美动漫