整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

html页面强制所有链接新窗口打开的方法

午接到博客访客的反馈,表示博客中的链接在原窗口打开的话,网站的体验非常的不好,而自己又懒的一个个去修改博客网页中的链接打开方式,就加了一个强制页面所有链接新窗口打开的代码,一招解决问题。

html页面强制所有链接新窗口打开的代码

<base target="_blank">

将此代码放到,网页中的 <head>标签之内即可实现,当前页面所有A链接新窗口打开

html <base> 标签

<base>:标签当前页面上的所有的相对链接规定默认 URL 或 默认目标。

语法:

<base href="网址" target="打开的方式">

属性;

herf:规定的默认链接

target:链接打开的方式,参数有 _blank,_self 等,与A标签的 target 属性相同

例:html页面所有链接强制新窗口打开

<base target="_blank">

例:html页面所有链接强制在当前窗口打开

<base target="_self">

例:设置默认的URL

<!DOCTYPE html>
<html lang="en">
<head>
 <base href="https://www.feiniaomy.com" target="_blank">
 <title>Document</title>
</head>
<body>
 <a href="/post/1.html">我是相对链接,我可以打开 https://www.feiniaomy.com/post/1.html</a>
 <a href="http://www.baidu.com">我是绝对链接,我可以打开 http://www.baidu.com</a>
</body>
</html>

<base> 标签使用注意事项

1、一个页面中,<base> 标签只能出现一次

2、<base> 标签只能在 <head></head>标签中出现

3、<base> 属于单标签,没有结束标签,类似 <img> 标签

单击带有超链接的文件时,超链接的内容有多种,打开方式,如替换当前页打开,在新窗口打开等。而用来指定打开方式的是<a>标签的target属性。

如果在一个<a>标签内容含一个target属性,浏览器将会载入和显示用这个标签的href属性命名的、名称与这个目标吻合的框架或者窗口中的文档。如果这个指定名称或id的框架或者窗口不存在,浏览器将打开一个新窗口,并给这个窗口一个指定的标记,然后将新的文档载入那个窗口。从此以后,超链接文档就可以指向这个新的窗口。

target属性的代码格式如下:

<a target="value">

其中value有四个参数可用,这4个保留的目标名称用作特殊的文档重定向操作。

(1)-blank。浏览器总在一个新打开、未命名的窗口中载入目标文档。

(2)-self。这个目标的值对所有未指定目标的<a>标签是默认目标,使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的,除非和文档标题 <base>标签中的target属性一起使用。

(3)-parent。这个目标使得文档载入父窗口或者包含超链接引用的框架的框架集。如果这个引用是在窗口或者顶级框架中,那么它与目标-self等效。

(4)-top。这个目标使的文档载入包含这个超链接的窗口,用-tap目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。

小提示:这些target的所有4个值都以下划线开始。任何其他用一个下划线作为开头的窗口或者目标都会被浏览器忽略,因此,不要将下划线作为文档中定义的任何框架name或id的第一个字符。

下面举例说明target属性的使用方法。

(1)编写代码如下图所示:

(2)在浏览器中打开文件,预览效果如下所示:

(3)单击超链接,在新窗口打开连接页面,下图所示

(4)修改代码并单击链接。

将“-blank”换成“-self”,即代码修改为“<a href="http://www.sina.com.cn" target="_self">新浪</a>”,单击链接后,直接在当前窗口打开新链接,如图所示:

个项目切图需要用到的,做个笔记。

jquery打开新窗口window.open和新窗口操作父窗口window.opener,支持jquery写法,支持打开窗口带参数,新窗口url获取参数等等。

打开新窗口

function newDialog(id){
var url = 'dialog.html?id='+id;
var iWidth = 260;
var iHeight = 550;
var iTop = (window.screen.height-30-iHeight)/2;
var iLeft = (window.screen.width-10-iWidth)/2;

window.open(url,'newBridge','left='+iLeft+',top='+iTop+',width='+iWidth+',height='+iHeight+',location=no,resizable=yes,status=no,toolbar=no,menubar=no');
}

新窗口操作父窗口

document.getElementById("get_selected_vals").onclick = function (){
//alert(yntree.getValues());

//var windowOpener=window.opener;
var parent=$(window.opener.document);

var id = getQueryString('id');
parent.find('#'+id).val(yntree.getValues());
//windowOpener.location.reload(true);
window.close();
}

获取url参数

//alert(getQueryString('id'));
function getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]);
return null;
}

本文由专业的WEB前端外包公司-切图网原创,切图网始于2007年,提供高品质的前端开发服务、前端外包、切图外包。欢迎来电咨询!