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


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 限制数字 js限制输入实现代码
Dec 04 Javascript
javascript中with()方法的语法格式及使用
Aug 04 Javascript
javascript 用函数实现继承详解
May 28 Javascript
利用JS实现页面删除并重新排序功能
Dec 09 Javascript
canvas实现环形进度条效果
Mar 23 Javascript
写给小白看的JavaScript异步
Nov 29 Javascript
JavaScript实现AOP详解(面向切面编程,装饰者模式)
Dec 19 Javascript
关于vue的语法规则检测报错问题的解决
May 21 Javascript
Vue实现底部侧边工具栏的实例代码
Sep 03 Javascript
JS实现可视化音频效果的实例代码
Jan 16 Javascript
JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析
Feb 12 Javascript
vue-cli脚手架的.babelrc文件用法说明
Sep 11 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中,文件上传
2006/12/06 PHP
浅谈PHP中类和对象的相关函数
2017/04/26 PHP
Laravel 队列使用的实现
2019/01/08 PHP
PHP上传图片到数据库并显示的实例代码
2019/12/20 PHP
js 小贴士一星期合集
2010/04/07 Javascript
jQuery1.5.1 animate方法源码阅读
2011/04/05 Javascript
js展开闭合效果演示代码
2013/07/24 Javascript
iframe子父页面调用js函数示例
2013/11/07 Javascript
浅析JavaScript中的事件机制
2015/06/04 Javascript
使用Raygun对Node.js应用进行错误处理的方法
2015/06/23 Javascript
jquery对复选框(checkbox)的操作汇总
2016/01/13 Javascript
JavaScript使用ZeroClipboard操作剪切板
2017/05/10 Javascript
jQuery简单实现根据日期计算星期几的方法
2019/01/09 jQuery
js实现json数组分组合并操作示例
2019/02/12 Javascript
基于vue实现web端超大数据量表格的卡顿解决
2019/04/02 Javascript
详解Vue调用手机相机和相册以及上传
2019/05/05 Javascript
VUE异步更新DOM - 用$nextTick解决DOM视图的问题
2020/11/06 Javascript
[49:35]KG vs SECRET 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
Python中tell()方法的使用详解
2015/05/24 Python
用Python实现命令行闹钟脚本实例
2016/09/05 Python
python开发利器之ulipad的使用实践
2017/03/16 Python
python 实现视频流下载保存MP4的方法
2019/01/09 Python
详解Python基础random模块随机数的生成
2019/03/23 Python
python中的subprocess.Popen()使用详解
2019/12/25 Python
python属于软件吗
2020/06/18 Python
ffmpeg+Python实现B站MP4格式音频与视频的合并示例代码
2020/10/21 Python
python 实现波浪滤镜特效
2020/12/02 Python
python基于openpyxl生成excel文件
2020/12/23 Python
浅谈Html5多线程开发之WebWorkers
2018/05/02 HTML / CSS
美国标志性加大尺码时装品牌:Ashley Stewart
2016/12/15 全球购物
美国市场上最实惠的送餐服务:Dinnerly
2018/03/18 全球购物
工作检讨书大全
2015/01/26 职场文书
荆州古城导游词
2015/02/06 职场文书
保护环境建议书作文400字
2015/09/14 职场文书
vue-cropper插件实现图片截取上传组件封装
2021/05/27 Vue.js
JS setTimeout与setInterval的区别
2022/04/20 Javascript