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


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 颜色渐变效果的实现代码
Oct 01 Javascript
用js+iframe形成页面的一种遮罩效果的具体实现
Dec 31 Javascript
js实现的捐赠管理完整实例
Jan 20 Javascript
jquery插件treegrid树状表格的使用方法详解(.Net平台)
Jan 03 Javascript
jQuery展示表格点击变色、全选、删除
Jan 05 Javascript
vue组件如何被其他项目引用
Apr 13 Javascript
客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解
Aug 26 Javascript
es6系列教程_ Map详解以及常用api介绍
Sep 25 Javascript
详解webpack4多入口、多页面项目构建案例
May 25 Javascript
微信小程序bindinput与bindsubmit的区别实例分析
Apr 17 Javascript
更强大的vue ssr实现预取数据的方式
Jul 19 Javascript
jquery实现点击左右按钮切换图片
Jan 27 jQuery
关于文本限制字数的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和Shell写Hadoop的MapReduce程序
2014/04/15 PHP
PHP使用Pear发送邮件(Windows环境)
2016/01/05 PHP
PHP文件缓存smarty模板应用实例分析
2016/02/26 PHP
top.location.href 没有权限 解决方法
2008/08/05 Javascript
精选的10款用于构建良好易用性网站的jQuery插件
2011/01/23 Javascript
jQuery调用WebService的实现代码
2011/06/19 Javascript
javascript用函数实现对象的方法
2015/05/14 Javascript
jquery合并表格中相同文本的相邻单元格
2015/07/17 Javascript
浅谈jquery之on()绑定事件和off()解除绑定事件
2016/10/26 Javascript
jQuery学习笔记——jqGrid的使用记录(实现分页、搜索功能)
2016/11/09 Javascript
Bootstrap导航条鼠标悬停下拉菜单
2017/01/04 Javascript
JS 中LocalStorage和SessionStorage的使用
2017/08/17 Javascript
JS脚本加载后执行相应回调函数的操作方法
2018/02/28 Javascript
微信小程序开发之左右分栏效果的实例代码
2019/05/20 Javascript
vue中的mescroll搜索运用及各种填坑处理
2019/10/30 Javascript
JS Web Flex弹性盒子模型代码实例
2020/03/10 Javascript
js实现列表按字母排序
2020/08/11 Javascript
vue开发chrome插件,实现获取界面数据和保存到数据库功能
2020/12/01 Vue.js
[01:20]DOTA2 2017国际邀请赛冠军之路无止竞
2017/06/19 DOTA
[00:58]PWL开团时刻DAY5——十人开雾0换5
2020/11/04 DOTA
Python中selenium实现文件上传所有方法整理总结
2017/04/01 Python
Python学习小技巧之列表项的拼接
2017/05/20 Python
Python使用Selenium模块模拟浏览器抓取斗鱼直播间信息示例
2018/07/18 Python
基于python 微信小程序之获取已存在模板消息列表
2019/08/05 Python
python内存管理机制原理详解
2019/08/12 Python
python读取当前目录下的CSV文件数据
2020/03/11 Python
h5移动端调用支付宝、微信支付的实现
2020/06/08 HTML / CSS
在使用非全零作为空指针内部表达的机器上, NULL是如何定义
2014/11/09 面试题
自考毕业生自我鉴定
2013/11/04 职场文书
中学校庆方案
2014/03/17 职场文书
创先争优个人承诺书
2014/08/30 职场文书
捐助倡议书
2015/01/19 职场文书
年会邀请函范文
2015/01/30 职场文书
《学会生存》读后感3篇
2019/12/09 职场文书
基于Golang 高并发问题的解决方案
2021/05/08 Golang
Mysql的Table doesn't exist问题及解决
2022/12/24 MySQL