`

html target属性详解、JS 控制控制target 属性方法

HTML浏览器JavaScriptXHTMLWeb 
阅读更多

_blank       <a href="document.html" target="_blank">my document</a>       

                 浏览器会另开一个新窗口显示document.html文档  


_parent      <a href="document.html" target="_parent">my document</a>     

                 指向父frameset文档  


_self          <a href="document.html" target="_self">my document</a>         

               把文档调入当前页框 


_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://www.21jn.net/blog"  target="_blank" /></head>
        <body><a href="blog">资料收集</a></body>

那么不管这个页面放置在任何域下面，该链接都会指向http://www.21jn.net/blog

分享到：
| java中对日期的加减操作
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    html超级链接标记A的TARGET属性详解

    ### HTML超级链接标记A的TARGET属性详解 #### 一、超级链接标记A的基本概念 超级链接标记`&lt;a&gt;`在HTML中是最基本也是最常用的元素之一。它代表了一个链接点，即通过它可以把当前位置的文本或图片连接到其他的位置，...

    struts中base标签的target属性

    ### Struts 中 base 标签的 target 属性详解 #### 引言 在 Web 开发领域，Struts 是一个非常流行的 Java 框架，它主要用于构建基于模型-视图-控制器（MVC）设计模式的应用程序。Struts 的一大优势在于其强大的标签...

    js对象属性大全下载

    ### JavaScript对象属性详解 在深入探讨JavaScript对象属性之前，我们首先需要理解JavaScript是一种广泛应用于网页开发的编程语言，它能够使网页变得动态、交互性更强。JavaScript中的对象是其核心特性之一，几乎...

    JS tree菜单详解

    ### JS Tree菜单详解 在软件开发尤其是Web应用开发过程中，树型菜单是非常常见的数据组织与展示方式之一。本文将详细介绍两种流行的JavaScript树型菜单插件：`dTree` 和 `xTree`，并深入探讨它们的功能、使用方法及...

    js中的触发事件对象event.srcElement与event.target详解

    总的来说，event.srcElement和event.target在JavaScript中是非常有用的属性，可以帮助我们获取触发事件的源元素，进而对这些元素进行进一步的操作，比如获取元素的属性、修改样式等。通过它们，我们可以实现对元素更...

    JavaSE071Target及ElementType详解.docx

    JavaSE071Target及ElementType详解 JavaSE071Target及ElementType是Java语言中两个重要的概念，它们都是Java注解（Annotation）的组成部分。本文将详细介绍JavaSE071Target及ElementType的概念、用法和实现原理。 ...

    html框架详解与框架布局.7z

    在不同框架间跳转链接，我们可以使用`target`属性指定目标框架，如`&lt;a href="newpage.html" target="content"&gt;链接&lt;/a&gt;`，这样点击链接后，新的页面将在名为“content”的框架中打开。 压缩包内的文件`right.html`...

    经典HTML 详解书

    `target`属性可以设定新链接是在当前窗口打开还是新窗口打开。 4. 图像：`&lt;img&gt;`元素插入图像，`src`属性指向图像文件路径，`alt`属性提供替代文本，对视觉障碍用户友好。 5. 列表：`&lt;ul&gt;`创建无序列表，`&lt;ol&gt;`...

    javascript事件详解

    JavaScript事件详解 JavaScript是一种基于浏览器的脚本语言，它的事件机制是实现动态交互的重要部分。在JavaScript中，事件是用户或浏览器对网页进行操作时触发的特定动作，比如点击按钮、鼠标移动等。本文将详细...

    CSS3 target伪类简介

    ### CSS3 `:target` 伪类详解 #### 一、引言 随着Web技术的不断进步和发展，CSS3作为新一代的层叠样式表标准，为网页设计带来了诸多强大而实用的功能。其中，`:target`伪类作为一种重要的选择器，在交互式网页设计...

    vue-cli中config目录下的index.js文件详解

    ### Vue CLI 中 config 目录下的 index.js 文件详解 #### 一、概述 在 Vue CLI 构建项目的过程中，`config` 目录下的 `index.js` 文件扮演着至关重要的角色。它主要用于定义项目的构建配置，包括开发环境与生产...

    jQuery事件对象的属性和方法详解

    以下是对jQuery事件对象的属性和方法的详解，包括一些常见和重要的属性和方法。 1. event.type event.type属性用于获取触发事件的类型，例如点击事件、鼠标移动事件等。通过这个属性，我们可以知道当前触发的是什么...

    [Java.Web培训视频]_001.HTML常见标签深入详解

    4. 链接标签：`&lt;a&gt;`定义超链接，通过`href`属性指定目标URL，`target`属性可控制新窗口或标签页打开。 5. 图像标签：`&lt;img&gt;`插入图像，`src`指定图片源，`alt`提供替代文本，用于图像无法显示时。 6. 列表标签：`...

    HTML中meta详解

    - `Window-target`: 控制页面打开方式，`&lt;meta http-equiv="Window-target" content="_top"&gt;`确保页面在新窗口或当前窗口全屏显示，避免被框架引用。 - `Page-Enter`和`Page-Exit`: 用于定义页面加载和退出时的...

    JavaScript事件对象深入详解

    JavaScript事件对象是JavaScript编程中处理用户交互和...总的来说，理解JavaScript事件对象的属性和方法是创建响应式和交互式网页的关键。熟练掌握事件对象的使用，可以帮助开发者创建更高效、更健壮的JavaScript代码。

    js中getBoundingClientRect( )方法案例详解.docx

    ### JavaScript中的`getBoundingClientRect()`方法详解 #### 一、引言 在Web开发中，我们经常需要获取页面中某个元素的尺寸以及它相对于视口的位置。`getBoundingClientRect()`方法为实现这一需求提供了一个简单而...

    窗体大小控制 JS 弹出

    在探讨“窗体大小控制 JS 弹出”的知识点时，我们深入分析JavaScript中窗口弹出功能的精细控制机制。此技术常用于创建自定义尺寸、位置及特性的弹出窗口，广泛应用于网页开发中，以增强用户体验和界面交互性。 ### ...

    JavaScript浅层克隆与深度克隆示例详解

    总结一下，JavaScript 中的浅层克隆适用于只需要简单复制对象表面属性的情况，而深度克隆则适用于需要完全复制对象包括其所有嵌套引用类型的情况。在实际开发中，应根据具体需求选择合适的克隆方法，以避免不必要的...

Magicbox
Global site tag (gtag.js) - Google Analytics