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

2024-07-29 07:10:32

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:

代码如下:

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

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

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

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 d
JS防止网页被嵌入iframe框架的方法分析

本文实例讲述了JS防止网页被嵌入iframe框架的方法.分享给大家供大家参考,具体如下: 例如: <script type="text/javascript"> if (window!=top) // 判断当前的window对象是否是top对象 top.location.href = window.location.href; // 如果不是,将top对象的网址自动导向被嵌入网页的网址 </script> 这段代码是有效的.但是,有一个问题:使用后,任何人都无法
网页中右键功能的实现方法之contextMenu的使用

本文介绍一种网页中实现右键功能的方案–contextMenu. 1.下载下载地址 https://github.com/swisnl/jQuery-contextMenu 下载得到压缩文件jQuery-contextMenu-master.zip 解压后,使用dist目录下css.js. 2.使用方法使用步骤: (1) 引用css.js. (2) html.js代码. 简单例子如下: 代码test.html: <!DOCTYPE html> <html lang="en&q
C#基于正则表达式实现获取网页中所有信息的网页抓取类实例

本文实例讲述了C#基于正则表达式实现获取网页中所有信息的网页抓取类.分享给大家供大家参考,具体如下: 类的代码: using System; using System.Data; using System.Configuration; using System.Net; using System.IO; using System.Text; using System.Collections.Generic; using System.Text.RegularExpressions; using
javascript实现在网页中运行本地程序的方法

本文实例讲述了javascript实现在网页中运行本地程序的方法.分享给大家供大家参考,具体如下: <input onclick="exec('notepad.exe')" value="执行noteppad.exe" type="button"> <input onclick="exec('cmd.exe')" value="执行cmd.exe" type="button&qu
python re正则匹配网页中图片url地址的方法

最近写了个python抓取必应搜索首页http://cn.bing.com/的背景图片并将此图片更换为我的电脑桌面的程序,在正则匹配图片url时遇到了匹配失败问题. 要抓取的图片地址如图所示: 首先,使用这个pattern reg = re.compile('.*g_img={url: "(http.*?jpg)"') 无论怎么匹配都匹配不到,后来把网页源码抓下来放在notepad++中查看,并用notepad++的正则匹配查找,很轻易就匹配到了,如图: 后来我写了个测试代码,把图片地
在vue中嵌入外部网站的实现

利用iframe top:导航栏的height left:左侧菜单栏的width src:右侧页面要嵌入的外部网站 <template> <div> <iframe src="https://www.iconfont.cn/" id="mobsf" scrolling="no" frameborder="0" style="position:absolute;top:64px;left:
使用pyscript在网页中撰写Python程式的方法

根据 Anaconda 的项目 pyscript,可以将 python 的代码直接写在网页中,目前只支援两种标签,分别是<py-script> 与 <py-repl>,以下是简单的示例. 使用这两行导入 pyscript <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" rel="external nofollow" rel=&
Go语言中嵌入C语言的方法

本文实例讲述了Go语言中嵌入C语言的方法.分享给大家供大家参考.具体分析如下: Go语言官方带了一个工具叫cgo,可以很方便的在Go语言代码中内嵌C代码或做C和Go代码的集成.下面是一段简单的在Go中内嵌C的实验代码: 复制代码代码如下: package main /* #include <stdio.h> #include <stdlib.h> void say_hello() { printf("Hello World!\n"); } */
iOS汇编入门教程之在Xcode工程中嵌入汇编代码的方法

简介上一篇文章ARM64汇编基础中介绍了汇编在iOS开发中的应用以及ARM汇编基础知识,本文将介绍在C或Objective-C构成的工程中如何嵌入汇编代码. 注意在调试ARM汇编时,Xcode的Build对象必须为真机,如果对象为模拟器则是x86汇编. 内联汇编汇编与C间接通信在函数中可以直接插入汇编代码来影响函数的运行逻辑,使用的语法为编译指令 __asm__ ,注意插入汇编有可能会被编译器忽略,因此需要加入 __volatile__ 修饰符保证汇编代码有效. 下面给出一个简单的例子,

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

相关推荐

随机推荐