`

HTML中target的相关说明

 
阅读更多

1._blank <a href="document.html" target="_blank">my document</a> 浏览器会另开一个新窗口显示document.html文档
2._parent <a href="document.html" target="_parent">my document</a> 指向父frameset文档
3._self <a href="document.html" target="_self">my document</a> 把文档调入当前页框
4._top <a href="document.html" target="_top">my document</a> 去掉所有页框并用document.html取代frameset文档
小技巧1:使别人的页框不能引用你的网页 在文件头加:<base target="_top">
小技巧2:在当前页打开连接或做刷新,提交到当前页在文件头加:<base target="_self">

链接的 target 属性怎么用 JS 来控制?

在HTML 4.0 Strict和XHTML 1.0 STRICT里不允许在<a>标签里使用target属性,这是一件令网页设计者懊恼的事.在过渡的规范里还是允许使用的.但通过一定的方法,我们可以解决这一问题.



HTMl4.0规范里拿掉了target属性.但它添加了另外一个属性:rel.这个属性是用来指定包含链接的文档和所链接文档之间的关系的.规范里定义 了其属性值(如:next,previous,chapter,section),在这些属性里大多数是用来定义一个大文档里各个小部分之间的关系的.事 实上.规范里允许开发人员自由的使用非标准属性值做特定的运用.

在这里,我们采用一个自定义值external用于rel属性来标记一个链接,用来新开一个窗口.

不符合最新Web标准的链接代码:
<a href="document.html" target="_blank">external link</a>

运用rel属性:
<a href="document.html" rel="external">external link</a>

现在我们构建了一个符合Web标准的新开窗口的链接,我们还需要运用JavaScript是其实现新开窗口.脚本要实现的工作是当网页加载时,找到文档里的所有那些我们定义为rel="external"的超链接.

首先我们要判断浏览器.
if (!document.getElementsByTagName) return;

getElementsByTagName是DOM1标准里一个容易使用的方法,且它被现在的大多数浏览器所支持,因为一些旧的浏览器如Netscape 4和IE4不支持DOM1,所以我们必须通过判定这一方法是否存在来排除这些旧版本的浏览器.

下一步,我们通过getElementsByTagName方法取得文档里所有的<a>标签:
var anchors = document.getElementsByTagName("a");

anchors被赋值为包含各个<a>标签的数组,现在我们必须遍历各个<a>标签并且修改它:

for (var i=0; i < anchors.length; i++) {
var anchor = anchors;

找到要实现新开窗口的<a>标签
以下是引用片段:
if (anchor.getAttribute("href") &&
anchor.getAttribute("rel") == "external")

接下来.建立属性值target并赋值"_target":
anchor.target = "_blank";

完整的代码:

以下是引用片段:
function externalLinks() {
if (!document.getElementsByTagName) return;
var anchors = document.getElementsByTagName("a");
for (var i=0; i<anchors.length; i++) {
var anchor = anchors;
if (anchor.getAttribute("href") &&
anchor.getAttribute("rel") == "external")
anchor.target = "_blank";
}
}
window.onload = externalLinks;

所有链接都设成_blank简单方法

在页面<head></head>之间加入<base target=_blank>(XHTML:<base target="_blank" />),就会使该页面所有链接均为新开窗口打开。

<base>是一个链接基准标记,用以改变页面中所有链接标记的参数默认值。

引申应用:

<head><base href="http://hi.baidu.com/" target="_blank" /></head>
<body><a href="jjpro">资料收集</a></body>

那么不管这个页面放置在任何域下面,该链接都会指向http://hi.baidu.com/

分享到:
评论

相关推荐

    前端css+html+布局笔记

    注释中的内容不会在页面中显示,但是会在源码中显示,我们可以通过注释来说明网页的代码 也可以通过注释隐藏一些页面中不想显示的内容 实体 在HTML页面中一些特殊符号是不能直接使用,需要使用实体来代替这些特殊...

    kali系统-工具-中文手册-html版

    nmap包说明 NMAP(“网络映射”)是一个自由和开放源码(许可证)工具进行网络发现和安全审计。许多系统和网络管理员也觉得有用,如网络库存,管理服务升级计划和监控主机或服务的正常运行时间的任务。 NMAP使用原始...

    微信小程序-微信小程序 HTML 富文本解析

    wxParser.parse(options) 方法的 options 参数说明 参数名 类型 必填 描述 bind String 是 要绑定的数据名称 html String 是 HTML 内容 target Object 是 绑定数据的模块对象 enablePreviewImage ...

    支持target和selector封装

    该源码是一个支持target和selector封装,源码源码Scream.swift,Screamswift对UIKit控件中的target 和 selector进行了封装。可以直接在括号中执行。 详细说明:http://ios.662p.com/thread-2244-1-1.html

    csv2html:将CSV文件转换为HTML表

    在Debian和Ubuntu上构建按照说明从最新的Debian和Ubuntu上的源代码构建一个静态的csv2html Linux二进制文件。 1.安装 。 通过Rustup为您的CPU添加稳定的MUSL目标。 rustup target add x86_64-unknown-linux-musl 2....

    HTML开发王

    14.5 网页国际化和区域化的相关名词 14.6 巩固与自测 第15章 应用样式表呈现和布局 15.1 为什么要使用样式表 15.1.1 过去的不足和样式表的优点 15.1.2 了解css(层迭样式表) 15.1.3 html 4对样式表技术的支持 15.2 ...

    target.en:Adobe Target的协作技术文档

    您在此存储库中为文档和代码示例提交的较小更正或说明已包含在Adobe使用条款中。社区成员的重大更改或新文章如果您是Adobe社区的一员,并且想要创建新文章或提交重大更改,请使用Git存储库中的“问题”选项卡提交...

    ant1.9资源

    Ant会依照depends属性中target出现的顺序依次执行每个target。被依赖的target会先执行。 3)if属性 用于验证指定的属性是否存在,若不存在,所在target将不会被执行。 4)unless属性 该属性的功能与if属性的功能...

    数据库管理插件 for Dvbbs 7.0

    一、安装说明: 将文件解压缩后直接上传至论坛根目录 进入后台,选择 风格界面模板总管理,选择 分页面模板(page_admin) 在template.html(0)中 找到以下代码 ...|文件管理@@...

    html5Validate:基于HTML5新特性新规范的表单验证jQuery插件

    其他说明支持type="email", type="number", type="tel", type="url", type="zipcode", 以及多type, 如type="email|tel". 支持 step, min, max, required, pattern, multiple有4个自定义扩展属性 data-key, data-...

    amcharts中文教程(柱状图,饼状图等的中文设置说明)

    -- 如果在数据中,有设置了link,则该属性表示目标,[] (_blank, _top...) If pie slice has a link this is link target --&gt; &lt;alpha&gt;100&lt;/alpha&gt; &lt;!-- 设置透明度[100] (0 - 100) slices alpha. You can set...

    基于vue前台、java后台、mysql实现的档案管理系统源码+部署说明.zip

    先打开浏览器,然后在浏览器输入栏中输入http://123.249.31.57:82/index.html,即可访问系统登录页面。在系统登录页面中输入用户名、密码后,点击登录,在验证用户名、密码通过后,即可跳转到系统主页面使用系统。 ...

    基于springboot+mybatis的个人博客源码+数据库+项目说明(前端+后台管理系统).zip

    此外需要注意的是,因为讲大部分公共信息已经封装在userinfo表中,所以此表不能为空。默认值作者已经给出了。 # 运行环境 - JDK 8 - Maven - MySQL (or other SQL database) # 主要技术 - Spring && Spring ...

    基于Python研发,魔鬼自动化部署系统+源代码+文档说明

    &gt; * 环境搭建可参考博客中的文章 &lt;a href="http://gong.gg/post-120.html" target="_blank"&gt;http://gong.gg/post-120.html&lt;/a&gt; #### 项目结构 ``` mogui ├─mogui │ ├─common 公共 │ │ ├─function.py 公共...

    微信小程序-微信小程序富文本渲染引擎

    wxParser.parse(options) 方法的 options 参数说明 参数名 类型 必填 描述 bind String 是 要绑定的数据名称 html String 是 HTML 内容 target Object 是 绑定数据的模块对象 enablePreviewImage ...

    dtree-checkbox-muchlin修改版

    二、相关方法及参数说明: 1、实例化dTree对象方法参数说明 new dTree(objName, rootDir, imgDir); objName:dTree实例对象名称, rootDir:dTree根目录, imgDir:图标目录,相对于根目录 2、添加普通节点方法...

    dwz完美整合ztree3.5(包括excheck),kindeditor,My97DatePicker

    最初在CSDN上发了这份代码,整合了ztree3.3的核心部分,详情可以参看这个地址的说明: http://download.csdn.net/detail/ohaozy/8691959 据部分朋友的意见,需要使用ztree的excheck功能,于是我重新整合了ztree3.5,...

    用于简单的反射对象的属性,字段,方法的方式

    * 说明: * 1....使用简单 * 2....不区分静态和实例都可以反射 * 3....不区分public和private都可以反射,请小心使用 * 4....暂时不支持泛型方法,in和out参数的方法,有好的建议可以联系我 * 5....中文注释已经...

    cms后台管理

    &lt;li&gt;&lt;a href="${a.url}" target="_blank"&gt;${a.title}&lt;/a&gt;&lt;/li&gt; [/#list] 就是简单的将tag_list中的内容,即“paramWrap.put(OUT_LIST, DEFAULT_WRAPPER.wrap(list));”中放入的数据遍历出来 style_2-1.html中的...

Global site tag (gtag.js) - Google Analytics