如何使用HTML实现点击一个链接打开新窗口

如何使用HTML实现点击一个链接打开新窗口
如何使用HTML实现点击一个链接打开新窗口

【最基本的弹出窗口代码】

其实代码非常简单:

因为这是一段javascript代码,所以它们应该放在标签和之间。是对一些版本低的浏览器起作用,在这些老浏览器中如果不支持ja vascript,不会将标签中的代码作为文本显示出来。

Window.open ('pa ge.html')用于控制弹出新的窗口page.html,如果page.html不与主窗口在同一路径下,前面应写明路径,绝对路径(http://)和相对路径(../)均可。

用单引号和双引号都可以,只是不要混用。

这一段代码可以加入HT ML的任意位置,加入到和之间也可以,位置越靠前执行越早,尤其是页面代码较长时,又想使页面早点弹出就尽量往前放。

【经过设置后的弹出窗口】

下面再说一说弹出窗口外观的设置。只要再往上面的代码中加一点东西就可以了。

我们来定制这个弹出窗口的外观、尺寸大小、弹出位置以适应该页面的具体情况。

js脚本结束。

【用函数控制弹出窗口】

下面是一个完整的代码。

...任意的页面内容...

这里定义了一个函数openwin(),函数内容就是打开一个窗口。在调用它之前没有任何用途。怎么调用呢?

方法一: 浏览器读页面时弹出窗口;

方法二: 浏览器离开页面时弹出窗口;

方法三:用一个连接调用:打开一个窗口

注意:使用的"#"是虚连接。

方法四:用一个按钮调用:

【主窗口打开文件1.htm,同时弹出小窗口p age.html】

将如下代码加入主窗口区:

加入区:open即可。

【弹出的窗口之定时关闭控制】

下面我们再对弹出窗口进行一些控制,效果就更好了。如果我们再将一小段代码加入弹出的页面(注意是加入到p age.html的HTML中,可不是主页面中,否则…),让它在10秒钟后自动关闭是不是更酷了?

首先,将如下代码加入pag e.html文件的区:

然后,再用这一句话代替pa ge.html中原有的这一句就可以了。(这一句话千万不要忘记写啊!这一句的作用是调用关闭窗口的代码,10秒钟后就自行关闭该窗口。)

【在弹出窗口中加上一个关闭按钮】

呵呵,现在更加完美了!

原来的HT ML标准中可以用

打开一个新窗口

但新的HT ML标准严格上是不允许的。可以采用以下代码:

打开一个新窗口

javascript:

function externallinks() {

if (!document.getElementsByTagName) retu rn;

var ancho rs = document.getElementsByTagNam e("a");

for (var i=0; i

var ancho r = anchors[i];

if (anchor.getAttribute("h ref") &&

anchor.getAttribute("rel") == "exte rnal")

anchor.target = "_blan k";

}

}

window.onload = e xternallinks;

参考资料:

https://www.360docs.net/doc/313953140.html,/a rticle/tips/2005/107.html

我们在使用标签时,常常会使用它的href属性为一段javasrcipt来实现某些功能。比如关闭一个窗口:,或者弹出一个新的窗口。这样来实现窗口的操作。

当然也有人会用onclick事件来实现打开或者关闭窗口, 打开新窗口。那么他们之间到底有什么区别呢?下面来好好分析一下

关闭窗口时,浏览器不会弹出窗口关闭的对话框,而,浏览器就会弹出窗口关闭的对话框。

打开一个新的窗口时,会使原来的窗口发生页面回传,从而导致 css样式无效,如果是动态页面的话还可能导致页面变空白。所以还是慎用这个方法。

onclick="windows.close();">,是完全在客户端执行的动作,页面不会产生回传,不会刷新页面。

  • html超链接实例

    HTML实例超级链接使用 2010-01-05 21:51:47 作者:来源:网友评论 0 条 HTML代码实例:详细讲解超级链接,超级链接是网站中使用比较频繁的HTML元素,因为网站的各种页面都是由超级链接串接而成,超级链接完成了页面之间的跳转。超级链接是浏览者和服务器的交互的主要手段,在后面的技术中会逐步深化学习。超级链接超级链接是网站 超级链接是网站中使用比较频繁的HTML元素,因为网站的各种页面都是由超级链接串接而成,超级链接完成了页面之间的跳转。超级链接是浏览者和服务器的交互的主要手段,在后面的技术中会逐步深化学习。超级链接 超级链接是网站中使用比较频繁的HTML元素,因为网站的各种页面都是由超级链接串接而成,超级链接完成了页面之间的跳转。超级链接是浏览者和服务器的交互的主要手段,在后面的技术中会逐步深化学习。 —注意:图片也可以做链接,将在下一章“网页中的图片”详细学习。 4.5.1 给文字添加链接 超级链接的标签是,给文字添加超级链接类似于其他修饰标签。添加了链接后的文字有其特殊的样式,以和其他文字区分,默认链接样式为蓝色文字,有下划线。超级链接是跳转到另一个页面的,标签有一个href属性负责指定新页面的地址。href指定的地址一般使用相对地址。 —说明:网站开发中,文档相对地址使用更为普遍。 在D:\web\目录下创建网页文件,命名为a.htm,编写代码如代码4.18所示。 代码4.18 超级链接的设置:a.htm

    超级链接的设置 进入列表的设置页面 在浏览器地址栏输入http://localhost/a.htm,浏览效果如图4.19所示。 图4.19 超级链接的设置 读者可从图4.19中看到超级链接的默认样式,当单击页面中的链接,页面将跳转到同一目录下的ul_ol.htm页面,即上节的列表设置页面。当单击浏览器的“后退”按钮,回到a.h tm页面时,文字链接的颜色变成了紫色,用于告诉浏览者,此链接已经被访问过。 4.5.2 修改链接的窗口打开方式 默认情况下,超级链接打开新页面的方式是自我覆盖。根据浏览者的不同需要,读者可以指定超级链接的其他打开新窗口的方式。超级链接标签提供了target属性进行设置,取值分别为_self(自我覆盖,默认)、_blank(创建新窗口打开新页面)、_top(在浏览器的整个窗口打开,将会忽略所有的框架结构)、_parent(在上一级窗口打开)。 —注意:_top和_parent方式用于框架页面,后面章节有详解。 4.5.3 给链接添加提示文字 很多情况下,超级链接的文字不足以描述所要链接的内容,超级链接标签提供了title属性能很方便地给浏览者做出提示。title属性的值即为提示内容,当浏览者的光标停留在超级

    HTML超链接

    先看两个示例 建立一个超链接 这个示例演示了如何在HTML文件里创建超链接。 将一个图片作为一个超链接 你可以将一张图片作为一个链接,点击这个图片。 这个示例演示了如何将一个图片作为一个超链接,即点击一个图片,可以连接到其它文件。 a和href属性 HTML用来表示超链接,英文叫anchor。 可以指向任何一个文件源:一个HTML网页,一个图片,一个影视文件等。用法如下: 链接的显示文字 点击当中的内容,即可打开一个链接文件,href属性则表示这个链接文件的路径。比如链接到https://www.360docs.net/doc/313953140.html,/html站点首页,就可以这样表示: 站长网站长学院https://www.360docs.net/doc/313953140.html,/html首页 target属性 使用target属性,可以在一个新窗口里打开链接文件。 站长网站长学院https://www.360docs.net/doc/313953140.html,/html首页 示例 title属性 使用title 属性,可以让鼠标悬停在超链接上的时候,显示该超链接的文字注释。 链接的显示文字 点击当中的内容,即可打开一个链接文件,href属性则表示这个链接文件的路径。 比如链接到https://www.360docs.net/doc/313953140.html,/html站点首页,就可以这样表示: 站长网站长学院https://www.360docs.net/doc/313953140.html,/html首页 target属性 使用target属性,可以在一个新窗口里打开链接文件。 站长网站长学院 https://www.360docs.net/doc/313953140.html,/html首页 示例 title属性 使用 title 属性,可以让鼠标悬停在超链接上的时候,显示该超链接的文字注释。 站长网站长学院网站 如果希望注释多行显示,可以使用 作为换行符。 站长网站长学院网站 示例 name属性 使用name属性,可以跳转到一个文件的指定部位。 使用name属性,要设置一对。一是设定name的名称,二是设定一个href指向这个name: 参见第一章 第一章 示例 name属性通常用于创建一个大文件的章节目录(table of contents)。每个章节都建立一个链接,放在文件的开始处,每个章节的开头都设置Name属性。当用户点击某个章节的链接时,这个章节的内容就显示在最上面。 如果浏览器不能找到Name指定的部分,则显示文章开头,不报错。 链接到email地址 在网站中,你经常会看到“联系我们”的链接,一点击这个链接,就会触发你的邮件客户端,比如Outlook Express,然后显示一个新建mail的窗口。用可以实现这样的功能。 联系新浪

    网站制作HTML文件中最重要的应用之一就是超链接

    HTML文件中最重要的应用之一就是超链接,超链接是一个网站的灵魂,web上的网页是互相链接的,单击被称为超链接的文本或图形就可以链接到其它页面。超文本具有的链接能力,可层层链接相关文件,这种具有超级链能力的操作,即称为超级链接。超级链接除了可链接文本外,也可链接各种媒体,如声音、图象、动画,通过它们我们可享受丰富多采的多媒体世界。 建立超链接的标签为 格式为:超链接名称 说明:标签表示一个链接的开始,表示链接的结束; 属性“HREF”定义了这个链接所指的目标地址;目标地址是最重要的,一旦路径上出现差错,该资源就无法访问 TARGET:该属性用于指定打开链接的目标窗口,其默认方式是原窗口。 建立目标窗口的属性 TITLE:该属性用于指定指向链接时所显示的标题文字。 "超链接名称"是要单击到链接的元素,元素可以包含文本,也可以包含图像。文本带下划线且与其它文字颜色不同,图形链接通常带有边框显示。用图形做链接时只要把显示图像的标志嵌套在之间就能实现图像链接的效果。当鼠标指向"超链接名称"处时会变成手状,单击这个元素可以访问指定的目标文件。 4-1 链接路径 每一个文件都有自己的存放位置和路径,理解一个文件到要链接的那个文件之间的路径关系是创建链接的根本。 URL(Uniform Resourc Locator)中文名字为"统一资源定位器"。指的就是每一个网站都具有的地址。同一个网站下的每一个网页都属于同一个地址之下,在创建一个网站的网页时,不需要为每一个连接都输入完全的地址,我们只需要确定当前文档同站点根目录之间的相对路径关系就可以了。因此,链接可以分以下三种:

    HTML5超链接和路径

    第4章超链接和路径 学习要点: 1.超链接的属性 2.相对与绝对路径 3.锚点设置 本章主要探讨HTML5中文本元素最重要的一个超链接,探讨它自身的属性以及路径问题。 一.超链接的属性 元素属于文本元素,有一些私有属性或者叫局部属性。那么,相对应的还有通用属性或叫做全局属性。这方面的知识,后面会详细探讨。 属性名称说明 href 指定元素所指资源的URL hreflang 指向的链接资源所使用的语言 media 说明所链接资源用于哪种设备 rel 说明文档与所链接资源的关系类型 target 指定用以打开所链接资源的浏览环境 type 说明所链接资源的MIME类型(比如text/html) 在这几个属性当中,只有href和target一般比较常用,而href是必须要用的。其他几个属性,在元素使用较少,将在CSS章节再探讨。 1.href属性 百度 解释:href是必须属性,否则元素就变成空元素了。如果属性值是http://开头的URL,意味着点击跳转到指定的外部网站。 2.target属性 百度 解释:target属性告诉浏览器希望将所链接的资源显示在哪里。 属性名称说明

    _blank 在新窗口或标签页中打开文档 _parent 在父窗框组(frameset)中打开文档 _self 在当前窗口打开文档(默认) _top 在顶层窗口打开文档 这四种最常用的是_blank,新建一个窗口。而_self是默认,当前窗口打开。_parent和_top是基于框架页面的,分别表示在父窗口打开和在整个窗口打开。而HTML5 中,框架基本被废弃,只能使用