首页
学习
活动
专区
圈层
工具
发布

使用jQuery在新窗口中打开所有外部链接

使用jQuery在新窗口中打开所有外部链接

基础概念

在网页开发中,经常需要控制链接的打开方式。对于外部链接(指向其他网站的链接),通常希望它们在新窗口或新标签页中打开,以保持用户在当前网站的浏览状态。

实现方法

以下是使用jQuery实现这一功能的完整代码示例:

代码语言:txt
复制
$(document).ready(function() {
    // 选择所有外部链接
    $('a[href^="http://"], a[href^="https://"]').not('[href*="' + window.location.host + '"]').attr('target', '_blank');
    
    // 或者更精确的版本
    $('a').each(function() {
        var href = $(this).attr('href');
        if (href && href.indexOf('http') === 0 && this.hostname !== window.location.hostname) {
            $(this).attr('target', '_blank');
            // 可选:添加rel="noopener noreferrer"增强安全性
            $(this).attr('rel', 'noopener noreferrer');
        }
    });
});

代码解释

  1. $(document).ready() 确保DOM完全加载后再执行脚本
  2. 选择器 a[href^="http://"], a[href^="https://"] 选择所有以http或https开头的链接
  3. .not('[href*="' + window.location.host + '"]') 排除当前域名的链接
  4. .attr('target', '_blank') 设置这些链接在新窗口打开
  5. 第二个版本更精确,通过比较hostname确保只针对真正的外部链接

优势

  1. 用户体验:保持用户在当前网站的浏览状态
  2. SEO友好:不会影响搜索引擎对内部链接的抓取
  3. 代码简洁:jQuery使DOM操作变得简单
  4. 兼容性:支持各种浏览器

注意事项

  1. 安全性:建议同时添加rel="noopener noreferrer",防止新窗口通过window.opener访问原始页面
  2. 性能:对于大量链接的页面,each()循环可能比属性选择器更高效
  3. 可访问性:考虑添加视觉提示(如图标)表明链接将在新窗口打开

常见问题及解决

问题1:为什么有些外部链接没有在新窗口打开?

  • 可能原因:链接使用了相对路径或协议相对URL(如//example.com
  • 解决方案:修改选择器或检查链接格式

问题2:如何排除特定域名的链接?

代码语言:txt
复制
$('a').each(function() {
    var href = $(this).attr('href');
    if (href && href.indexOf('http') === 0 && 
        this.hostname !== window.location.hostname &&
        this.hostname !== 'excluded-domain.com') {
        $(this).attr('target', '_blank');
    }
});

问题3:如何在链接后添加外部链接图标?

代码语言:txt
复制
$('a[target="_blank"]').after('<span class="external-icon">↗</span>');

应用场景

  1. 内容管理系统(CMS)网站
  2. 博客和新闻网站
  3. 企业官网
  4. 任何需要区分内部和外部链接的网站

这个解决方案简单有效,可以轻松集成到任何使用jQuery的网站中。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

使用 jQuery 在新窗口打开外部链接

我们一般都希望在新窗口打开外部链接,这样用户就不需要离开网站就能访问外部链接,但是如果每个外部链接都手工加上新窗口打开的属性(target="_blank")的话,会让人非常抓狂。...使用 jQuery,我们只需要几行代码就能在新窗口中打开外部链接。 1....找到外部链接 首先我们需要找到所有的外部链接,在 $(document).ready() 函数添加如下代码: $("a[href*='http://']:not([href*='"+location.hostname...让外部链接在新窗口打开 如果你想外部链接在新窗口打开,继续增加如下一行代码: $("a[href*='http://']:not([href*='"+location.hostname+"']),[href...target 属性,并且给他赋值为 _blank,这样外部链接就能在新窗口打开。

3.4K20
  • Typecho实现外部链接添加nofollow标签和新窗口打开

    我们在使用Typecho程序建站过程中,在编辑文章的时候如果希望引导外部的文章地址,那我们肯定是需要用到nofollow标签,这样不至于将本网站的权重被带跑。...不过我们在使用Typecho的时候默认的还是在当前窗口打开的,我们很多时候希望新窗口打开,那就需要手工设置。...有没有不需要每次手动设置Typecho 实现外部地址自动nofollow,以及新窗口打开的方法呢?省的每次有些时候会忘记掉,这里老蒋找到网上的一个办法,如果我们还有需要的话可以参考使用到。...self->makeHolder("{$escaped}"); }, $text ); 把代码中的...->makeHolder("{$escaped}"); } 看到代码没有,我们更换成nofollow,以及_blank新窗口打开

    1.2K10

    uni-app打开外部链接方式汇总(h5&app)–uniapp在app内打开美团领券链接

    方案1 使用uni-app的扩展组件 uni-link,或者使用plus.runtime.openUR,参考文档uni-app官网 该组件的行为是在app内打开外部浏览器,在h5打开新网页。...,打开的链接上可自行处理权限 方案2 方案1 打开外部浏览器,在使用体验上会有一种割裂感 可以在这个基础上进行优化,使用plus.runtime.openWeb替代app打开,这个方法会新开内置窗口打开页面...,页面比例变大失调了,暂时没找到解决方法 权限问题:app上无需授权也可以正常使用,打开的链接上可自行处理权限 方案3 使用app-plus的webview模块api进行管理,plus.webview.open...,打开的链接上可自行处理权限 备注:若不嫌处理返回逻辑麻烦,这个方案是相当完美的,能免去app授权,又能在app内部正常打开一个三方页面,推荐此法 方案4 使用uni-app的webview组件进行加载...src }, } webview组件在h5中也是使用iframe实现,但是dom嵌套层级太多,不方便控制宽高,所以这里就直接按条件编译,在h5中用iframe。

    1.4K10

    使用VBA在工作表中列出所有定义的名称

    然而,如果名称太多,虽然有名称管理器,可能名称的命名也有清晰的含义,但查阅起来仍然不是很方便,特别是想要知道名称引用的区域时,如果经常要打开名称管理器查找命名区域,会非常麻烦,也浪费时间。...下面是一段简单的代码,它将列出工作簿中的所有定义的名称,并显示名称所指向的单元格区域。...Set wks = Sheet1 '忽略错误 On Error Resume Next '遍历名称 For Each nm In Names '在列...A中列出名称 wks.Range("A" & Rows.Count).End(xlUp)(2) = nm.Name '在列B中列出名称指向的区域 wks.Range...(xlUp)(2) = "'" & nm.RefersTo Next nm '恢复错误触发 On Error GoTo 0 End Sub 一个非常简单的过程,它将显示工作簿中的所有名称及命名区域

    9.3K30

    使用链接服务器在异构数据库中查询数据

    要链接到一种数据库需要使用相应的接口。微软为很多数据库提供了驱动接口,所以可以直接使用,但是对于没有提供驱动的数据库比如Sybase,则需要在服务器上安装对应数据库厂商提供的驱动。...使用SSMS或者使用T-SQL语句配置成功链接服务器后便可通过: [服务器名].[数据库名].[架构名].[对象名] 的形式来访问数据库。...但是当Oracle中的这个表数据量较大,比如有几十万行或者几百万行时,这个查询将会耗费很长时间。在SQL Server中运行该脚本可能要等上10秒、20秒或者1分钟、5分钟才可能查询出结果。...但是如果将脚本在Oracle服务器上直接运行,则1秒钟不到就查询出结果了。造成这种情况的是SQL Server查询链接服务器的机制。 不同的数据库对应的SQL语言是有所不同的。...query'在链接服务器中执行的查询字符串。该字符串的最大长度为8KB。

    5K10

    JQuery文件上传插件ajaxFileUpload在Asp.net MVC中的使用

    0 ajaxFileUpload简介 ajaxFileUpload插件是一个非常简单的基于Jquery的异步上传文件的插件,使用过程中发现很多与这个同名的,基于原始版本基础之上修改过的插件,文件版本比较多...,我把我自己使用的ajaxFileUpload文件上传到博客园上了,想要使用的朋友可以下载:http://files.cnblogs.com/files/fonour/ajaxfileupload.js...filePicture" name="filePicture" accept=".jpg,.jpeg,.png,.bmp" onchange="filePictureChange()" /> 通过accept可以限定打开文件选择对话框后...return decimal.Round(decimal.Divide(bytes, mbLength), 2).ToString() + "MB"; } 2 ajaxFileUpload使用过程中的一些问题...解决方法: 经测试handlerError只在jquery-1.4.2之前的版本中存在,以后版本中都没有这个函数了,因此在将handleError这个函数复制到ajaxFileUpload.js中,就行了

    4.6K90

    浏览器怎么打开微信客户端连接服务器,微信“请在微信客户端打开链接”怎么办?-在浏览器中打开微信链接的方法 – 河东软件园…「建议收藏」

    自从出现了电脑版的微信之后,很多用户都会在电脑中下载安装一个客户端,可就是电脑客户端中打开链接也会出错!...微信中有的时候朋友或是公众号会发送一些链接,若是使用电脑单击打开就会被提示“请在微信客户端打开链接”,可是自己使用的就是电脑客户端,并且更换浏览器也不能解决这个现象,这是怎么一回事呢?...因为在微信中是自动设置了使用默认浏览器打开的,无法识别的时候自然就不能打开了,我们可以在微信中直接将这个功能关闭!...4、此时我们就可以在最下方找到有关浏览器的设置了,将“使用系统默认浏览器打开网页”取消勾选并保存即可!...通过这几个简单的操作步骤就可以解决在微信中出现的“请在微信客户端打开链接”的提示了,完成了设置之后重新单击链接并选择浏览器之后就可以顺利的打开了。若是你遇到了这个故障还没有解决,不妨试一试喔!

    8.4K30

    关于状态可见原则

    外部站点 当前窗口 当前窗口打开当前站点的页面 当前窗口打开外部站点的页面 新窗口 新窗口打开当前站点的页面 新窗口打开外部站点的页面 就导致了用户在操作之前,会不能确定目标内容会以何种方式呈现,也就是...当前常见的方案是在链接文本的后面加上一个表示跳转到外部的图标,用于提醒用户链接目标是站外内容,如果点击将会离开本站点。这时用户可以主动选择是否使用新窗口打开。...默认当前窗口打开时,用户可以通过鼠标右键菜单决定链接的打开方式,也可以通过浏览器的快捷键(如Chrome 键盘快捷键)进行控制;而如果默认为新窗口打开,则无法支持切换为在当前窗口打开链接。...同样试着解决下 打开方式\跳转目标 当前站点 外部站点 当前窗口 默认 新窗口 可以发现对于新窗口的场景,只使用同一个图标,理由是对于当前页面的影响不大,不管是不是站点的内容,用户都可以很方便的返回...不过,还是不推荐将链接设置为新窗口打开的方式,将选择权留给用户。对于不得不使用新窗口打开时,可以明确告知用户,减少不必要的尝试。

    2.7K30

    Chrome 插件收藏

    更酷的使用浏览器 Gestures for Google Chrome 鼠标手势。 Vimium 使用 Vim 的方式来浏览页面。 Link Preveiw 预览超链接指向的页面的内容。...Web 前端开发相关 Prism Pretty 语法高亮在浏页面新窗口打开的CSS,JS。 JSONView 语法高亮在浏页面新窗口打开的 JSON。...Visual Event 查看用 jQuery 绑定的事件处理代码。如果用浏览器自带的的 Event Listeners 查看的话,可以查看到元素上绑定的事件,但指向是的 jQuery 的源码。...LiveStyle CSS的文件绑定调整好后,改动CSS的文件或同步到浏览器,在浏览上改动也会同步到文件。注意,要让这个插件生效。...2,在服务器上打开 HTML 文件。 这个过程还是略显麻烦的。 Browsersync 是更好的替代解决方案。

    1.6K10

    写了一个打开最大新窗口的JS

    在IE里面如果使用a标签的target=”_black”打开的新窗口,那么窗口的大小是由最后一次关闭窗口时窗口大小决定的,如果我们希望a标签打开的新窗口都是最大的窗口,那么我们需要使用window.open...另外在IE7里面还有另外一个问题就是如果我们是用a标签打开的新窗口,那么在window.close()的时候会弹出提示问是否关闭该窗口,而且这个问题不能使用window.opener=null来避免这个提示框...所以我们必须是使用window.open来打开新窗口,那么就可以使用window.close()而不会弹出关闭窗口的提示。...这个函数基于JQuery来写的,原理很简单,找到所有具有target为_black的a标签,将标签添加click函数。

    3.8K30
    领券