How to embed an external Web page in your Web page _javascript tips

Source: Internet
Author: User

Description:using a tabbed interface, this DHTML script lets your display external Web pages inline on your page, with the help of the IFRAME tag. We threw in a feature that allows of the user to also load the webpage in the entire browser windows when desired. This script works in ie5+ and ns6+, and degrades the rest (as tabs are simply links). cool!
Step 1:add the "below CSS and DHTML script to the" <HEAD> section of your page:

Copy Code code as follows:

<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 in all.
Step 2:add The "below code to" <BODY> section of your page:
Copy Code code as follows:

<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 URL to your own. Now, if you are have lots of tab links, you can get them to appear on separate lines, by adding a divider:
Copy Code code as follows:

<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>

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.