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

枪神大咔

枪神大咔

2016-02-19 10:02

今天图老师小编给大家展示的是在你的网页中嵌入外部网页的方法,精心挑选的内容希望大家多多支持、多多分享,喜欢就赶紧get哦!

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; itabobjlinks.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" 
lia class="current" href="http://www.google.com" onClick="return handlelink(this)"Google/a/li 
lia href="http://www.yahoo.com" onClick="return handlelink(this)"Yahoo/a/li 
lia href="http://www.msn.com" onClick="return handlelink(this)"MSN/a/li 
lia href="http://www.news.com" onClick="return handlelink(this)"News.com/a/li 
lia 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" 
lia class="current" href="#"Google/a/li 
lia href="#"Yahoo/a/li 
lia href="#"MSN/a/li 
div style="margin-bottom: 8px"/div 
lia href="#"News.com/a/li 
lia href="#"Dynamic Drive/a/li 
/ul 

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)
展开更多 50%)
分享

猜你喜欢

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

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

网页中嵌入Flash的方法讨论

flash教程
网页中嵌入Flash的方法讨论

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

TypeSelect实现网页嵌入字体

Web开发
TypeSelect实现网页嵌入字体

不错的用外部Javascript修正特定网页内容

Web开发
不错的用外部Javascript修正特定网页内容

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

浅谈网页设计中图片优化的方法

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
浅谈网页设计中图片优化的方法

探讨:网页外部引用CSS的两种方式

Web开发
探讨:网页外部引用CSS的两种方式

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Win10命令提示符cmd在哪

Win10命令提示符cmd在哪

CSDN轮换广告图片轮换效果

CSDN轮换广告图片轮换效果
下拉加载更多内容 ↓