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


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 相关文章推荐
javascript date格式化示例
Sep 25 Javascript
jQuery实现复选框成对选择及对应取消的方法
Mar 03 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
Jun 05 Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
Aug 25 Javascript
JS随机洗牌算法之数组随机排序
Mar 23 Javascript
js动态生成form 并用ajax方式提交的实现方法
Sep 09 Javascript
Javascript动画效果(1)
Oct 11 Javascript
微信小程序动态显示项目倒计时效果
Jun 13 Javascript
使用jQuery实现两个div中按钮互换位置的实例代码
Sep 21 jQuery
JS简单实现数组去重的方法分析
Oct 14 Javascript
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
May 26 jQuery
Javascript实现鼠标点击冒泡特效
Dec 24 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生成Flash动画的实现代码
2010/03/12 PHP
php学习笔记 php中面向对象三大特性之一[封装性]的应用
2011/06/13 PHP
php array_merge函数使用需要注意的一个问题
2015/03/30 PHP
javascript 有用的脚本函数
2009/05/07 Javascript
jquery validate添加自定义验证规则(验证邮箱 邮政编码)
2013/12/04 Javascript
前台js对象在后台转化java对象的问题探讨
2013/12/20 Javascript
js 金额格式化来回转换示例
2014/02/23 Javascript
七个很有意思的PHP函数
2014/05/12 Javascript
一个不错的js html页面倒计时可精确到秒
2014/10/22 Javascript
node.js中的http.response.addTrailers方法使用说明
2014/12/14 Javascript
JavaScript将字符串转换为整数的方法
2015/04/14 Javascript
JavaScript三种绑定事件方式及相互之间的区别分析
2017/01/10 Javascript
js实现瀑布流效果(自动生成新的内容)
2017/03/16 Javascript
vue实现todolist单页面应用
2017/04/11 Javascript
javascript 中null和undefined区分和比较
2017/04/19 Javascript
jQuery鼠标悬停内容动画切换效果
2017/04/27 jQuery
JS对象序列化成json数据和json数据转化为JS对象的代码
2017/08/23 Javascript
vue结合Echarts实现点击高亮效果的示例
2018/03/17 Javascript
js中addEventListener()与removeEventListener()用法案例分析
2020/03/02 Javascript
vue实现匀速轮播效果
2020/06/29 Javascript
[00:44]华丽开场!DOTA2勇士令状带来全新对阵画面
2019/05/15 DOTA
用Python进行基础的函数式编程的教程
2015/03/31 Python
python实现创建新列表和新字典,并使元素及键值对全部变成小写
2019/01/15 Python
通过PHP与Python代码对比的语法差异详解
2019/07/10 Python
python如何设置静态变量
2020/09/07 Python
随机分配座位,共50个学生,使学号相邻的同学座位不能相邻
2014/01/18 面试题
华为慧通笔试题
2016/04/22 面试题
本科生学习总结的自我评价
2013/10/02 职场文书
学院书画协会部门岗位职责
2013/12/01 职场文书
小学生检讨书大全
2014/02/06 职场文书
2015年挂职锻炼工作总结
2014/12/12 职场文书
办公室岗位职责
2015/02/04 职场文书
预备党员入党感想
2015/08/10 职场文书
关于实现中国梦的心得体会
2016/01/05 职场文书
2016年第十九届推普周活动总结
2016/04/06 职场文书
一小时迅速入门Mybatis之bind与多数据源支持 Java API
2021/09/15 Javascript