首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何使用JS (有例外规则)在新窗口中自动打开外部链接?

在JS中,可以使用window.open()方法在新窗口中自动打开外部链接。该方法接受两个参数,第一个参数是要打开的链接地址,第二个参数是窗口的名称或标识符。

下面是一个示例代码:

代码语言:javascript
复制
function openExternalLink(url) {
  window.open(url, "_blank");
}

在这个示例中,openExternalLink()函数接受一个参数url,表示要打开的外部链接地址。然后,调用window.open()方法,将url作为第一个参数传递进去,"_blank"作为第二个参数传递进去。"_blank"表示在新窗口中打开链接。

需要注意的是,浏览器可能会阻止弹出新窗口,因此在某些情况下,需要用户交互才能打开新窗口。为了避免被浏览器拦截,可以在代码中添加一个事件处理程序,例如在按钮点击时打开链接。

这是一个简单的例子,如果需要更复杂的功能,可以结合其他JS库或框架来实现。

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

相关·内容

  • 新窗口打开页面?小心有坑!

    打开的页面地址是动态计算的?使用js进行window.open(url)搞定。 如果你人品比较好,你的页面可以顺利地运行到下线为止。...例子2: 步骤: 使用chrome打开这个页面: http://coolriver.github.io/blog/pages/openerTest/origin.html, 你会看到5个可点的链接...例子2,新页面中有一个定时器,每隔一段时间就有一个持续的循环,这个循环阻塞新页面本身的js线程的同时,也阻塞了opener(也就是打开新页面的父窗口)里的js线程。...确实,chrome不同的标签页面使用不同进程和线程,但是例外,通过a标签的target="_blank"属性,或者window.open(url)新窗口打开页面, 会与父窗口共用进程和线程。...,然后关掉iframe 特点: 可解决safari下的安全问题,无法解决性能问题 4.4 推荐方案 如果是a标签要在新窗口打开,添加noopener属性 如果是js打开新窗口,手动将新窗口的opener

    4K10

    新窗口打开页面?小心有坑!

    打开的页面地址是动态计算的?使用js进行window.open(url)搞定。 如果你人品比较好,你的页面可以顺利地运行到下线为止。...例子2: 步骤: 使用chrome打开这个页面: http://coolriver.github.io/blog/pages/openerTest/origin.html, 你会看到5个可点的链接...例子2,新页面中有一个定时器,每隔一段时间就有一个持续的循环,这个循环阻塞新页面本身的js线程的同时,也阻塞了opener(也就是打开新页面的父窗口)里的js线程。...确实,chrome不同的标签页面使用不同进程和线程,但是例外,通过a标签的target="_blank"属性,或者window.open(url)新窗口打开页面, 会与父窗口共用进程和线程。...,然后关掉iframe 特点: 可解决safari下的安全问题,无法解决性能问题 4.4 推荐方案 如果是a标签要在新窗口打开,添加noopener属性 如果是js打开新窗口,手动将新窗口的opener

    5.3K21

    关于状态可见原则

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

    2.4K30

    JavaScrtip之JS最佳实践

    一、JavaScript之平稳退化 这边使用一个当用户点击某个页面内某个链接弹出一个新窗口的案例: JavaScript使用window对象的open()方法来创建新的浏览器窗口; window.open...(url,name,features); 这个方法三个参数: url:新窗口打开的网页的url地址。...我们将这个函数存入一个外部文件,当需要在某个网页里使用这个函数时,只要导入这个外部文件即可.倒入外部文件后: 1.使用"javascript:"伪协议使用popUp()方法 "真"协议用来因特网上计算机之间传输数据包...return false语句(老版本的浏览器中有用),这个链接不会真的打开。"...二、JavaScript之JS与Html代码的分离第一点,已经解决浏览器禁用JS的情况下,JS平稳退化的问题,但是代码任然存在一点瑕疵,上面的代码如果只是少数几个超链接,倒没什么问题,但是如果有很多超链接

    2.1K50

    团队技术文档构建利器vuepress上手实践

    3.1.2 导航栏(navbar) themeConfig.nav 导航栏包括 左侧页面标题、搜索框、导航栏链接、多语言支持、仓库链接,支持下拉分组菜单,还支持全局或单页面禁用。...3.1.3 侧边栏(sidebar) themeConfig.sidebar 侧边栏一般用于文档的目录索引,可以直接在 config.js 配置链接数组,也页面配置 sidebar:auto 自动生成侧边栏目录... Markdown 中使用 Vue .vuepress/components 的所有 *.vue 文件都会自动注册为全局异步组件,如: . └─ .vuepress └─ components...module.exports = { base: '/test/' } 可以项目中创建 deploy.sh 文件,方便在持续集成的设置每次 push 代码时自动运行脚本。 #!... 标签,默认选项将在新窗口打开外部链接 anchor: { permalink: true, permalinkBefore: true, permalinkSymbol: '

    2.4K94

    用firebug给firefox添加信任链接

    在前文“firefox查看微信公众平台的数据分析时就出现不信任链接怎么办?”...我们使用了导入证书的方法添加信任链接网友反映说证书导入不成功,这里用另外一种方法来实现:用firebug给firefox添加信任连接   打开微信公众平台 - 统计 - 用户分析,一如既往的显示“此连接不受信任...”,这时我们按F12调用firebug查看元素,切换到html,用firebug菜单栏的第二个菜单“点击查看页面的元素”,定位到具体的位置   展开div元素,复制上图中的绿色框链接, https...ll1D85fGDCTr4AAxC_RrFIsraM1eajMksOjZN_eXodpjY4fYF5CrJfr2Boq-sCnFVnrjmnvRJFH8ARnpkI8F9QBFc64dn2dthrf3Fy5W3T0b-g0Wi9_iwDI49sUaxQaM&devtype=3&jsurl=https://res.wx.qq.com/mpres/zh_CN/htmledition/js.../common/wx/iframe1cd20f.js&version=2 新窗口或新标签打开链接,点击“我已充分了解可能的风险”,再单击“添加例外”   返回微信公众平台统计分析,看看“此连接不受信任

    1.2K70

    Vue实现路由跳转传参

    下个页面如何获得地址栏的参数值:a. 路由文件index.js的props:true,意为让地址栏的参数值自动变成当前页面组件的props的一个属性值b....项目中跳转到外部链接方法项目文件,如果是vue页面的内部跳转,js中用this....不然就会报错,看一下链接的路径,原来外部链接前面加上了http://localhost:8080/#/这一串导致跳转出现问题,那么我们如何跳转到外部链接呢?...") ;② window.location.href="新url";③ window.open("url", "_self"◾ 禁止后退:js: location.replace("新url")◼️ 新窗口打开...,可打开多个:window.open("url", "_blank");◼️ 新窗口打开,只能打开一个:window.open("url", "自定义的窗口名");

    15210

    浏览器的JavaScript核心BOM(浏览器对象模型)重点掌握对象之Window对象的属性与方法

    常见的浏览器内置对象:Window 、Location 、Navigator 、History 、Screen…… 本篇文章,我们就从最大的对象Window开始讲起,本文的最后还附带讲述其它几个对象的文章链接...第四个参数是第二个参数设置为一个已存在的窗口名时才生效,该参数为布尔值,当为true时,第一个参数的URL会替换掉窗口浏览历史的当前条目;当为false时,会在窗口浏览历史创建一个新的条目 接下来我们来讲解这四个参数是如何使用的...(3)关闭窗口 既然window对象打开窗口的函数,那肯定少不了关闭窗口的函数,我们可以通过 window对象.close() 的方式,关闭一个窗口,大多数的浏览器只允许关闭由自己的js代码打开的窗口...Location对象 博客链接:浏览器内置对象Location属性与方法详解 History对象 博客链接:浏览器内置对象History属性与方法详解 Navigator对象 博客链接:浏览器内置对象...Navigator和对象Screen的简单了解 Screen对象 博客链接:浏览器内置对象Navigator和对象Screen的简单了解 结束语 各位如果有什么要补充的,欢迎评论区留言。

    1.7K20

    团队技术文档构建利器vuepress上手实践

    3.1.2 导航栏(navbar) themeConfig.nav 导航栏包括 左侧页面标题、搜索框、导航栏链接、多语言支持、仓库链接,支持下拉分组菜单,还支持全局或单页面禁用。...3.1.3 侧边栏(sidebar) themeConfig.sidebar 侧边栏一般用于文档的目录索引,可以直接在 config.js 配置链接数组,也页面配置 sidebar:auto 自动生成侧边栏目录... Markdown 中使用 Vue .vuepress/components 的所有 *.vue 文件都会自动注册为全局异步组件,如: . └─ .vuepress └─ components...module.exports = { base: '/test/' } 可以项目中创建 deploy.sh 文件,方便在持续集成的设置每次 push 代码时自动运行脚本。 #!... 标签,默认选项将在新窗口打开外部链接 anchor: { permalink: true, permalinkBefore: true, permalinkSymbol: '

    1.3K20

    eclipse乱码解决方法

    一般默认都是UTF-8或者GBK,当从外部导入的一个工程时,如果该工程的编码方式与eclipse设置的编码方式不同,就会产生中文的乱码问题,这其中还有几种情况。...(2)修改单个工程的编码方式: 右击工程,弹出的菜单中选择最后一项“Properties” 在打开新窗口左边的菜单树中选择 Info(即第一个),然后右面找到 Text file encoding...Source File,File associations栏中选中*.js,然后Default Encoding栏输入UTF-8,单击Update,保存即可。...(4)修改单个文件的编码方式:右击要修改的文件,弹出的菜单中选择最后一项 “Properties”,在打开新窗口左边的菜单树中选择 Info(即第一个),然后右面找到 Text file encoding...ps:项目过程遇到的另外一个乱码问题是因为操作系统的字体文件问题,某些情况下,eclipse所使用的系统中文字体如果被破坏的话,也会导致中文无法显示的问题。

    1.1K20

    新窗口创建问题 | Electron 安全

    ,突然在当前窗口之外跳出来一个窗口,那就是一个新窗口创建了 Electron ,一个新窗口创建背后都意味着存在对应的管理操作,这种管理可能可以让窗口赋予非凡的权限,例如执行 Node.js 创建新窗口分为两种...版 & Github 往期文章 0x01 哪些情况下会创建新窗口 之前的章节,我们尝试过使用 BrowserWindow、BaseWindow 主进程创建窗口,同时我们尝试过渲染进程通过...,其实在 Electron window.open 是可以配置安全策略的,也就是说可能执行 Node.js 的 window.open 打开的窗口配置的优先级为(向下递减) webContents.setWindowOpenHandler...子窗口使用 window.opener 对象的 open 方法再打开一个与父窗口同源的新窗口,并且获取新窗口对象,用这个对象与父窗口进行通信,会不会就可以获取到父窗口的上下文了呢?...创建新窗口绕过安全策略漏洞 electrovolt 的文章进行 Discord RCE 时,使用 window.open 绕过了沙箱,具体操作是 window.open 加载和 Discord

    49010

    Selenium提高:JS操作和cookie处理

    调用JavaScript: 执行JS一般由两种场景: 一种是页面上直接执行JS 另一种是某个已经定位的元素上执行JS 隐藏百度一下按钮: 弹出新窗口的情况: 在编写自动化程序的时候,会遇到弹出新窗口的情况...百度登录这里,如果点击立即注册,会重新打开一个新的页面。因为 a标签 的 target 属性规定了浏览器将打开一个新的窗口。 所以我们不想弹出新窗口,就需要先删除target属性。...字母数字,汉字,算术题,或者滑块,语音等等。对于测试人员来说,不管是进行性能测试还是自动化测试都是很棘手的问题。下面简单说一些处理验证码的方式。...我们可以在用户登录前,通过 add_cookie() 的方式,将用户名密码写入浏览器cookie,再次访问登录系统链接自动登录。...使用cookie进行登录的难点,是如何获得用户名和密码的name,如果找不到name,就没办法继续操作。可以通过get_cookies()来获取登录的cookie信息。

    3.2K20

    Markdown 拓展-使用 vue.press 生成网站

    你可以使用 Markdown新窗口打开 来书写内容(如文档、博客等),然后 VuePress 会帮助你生成一个静态网站来展示它们。...一个 VuePress 站点本质上是一个由 Vue新窗口打开 和 Vue Router新窗口打开 驱动的单页面应用 (SPA)。 路由会根据你的 Markdown 文件的相对路径来自动生成。...快速上手 依赖环境 Node.js v12+新窗口打开 Yarn v1 classic新窗口打开 (可选) 创建并进入一个新目录 mkdir vuepress-starter cd vuepress-starter...在你使用 Markdown 的 链接语法新窗口打开 时, VuePress 会为你进行一些转换。...base 将会作为前缀自动地插入到所有以 / 开始的其他选项的链接,所以你只需要指定一次。

    1.5K10

    近一年web前端经典面试题整理

    2.使用after伪对象清除浮动  该方法只适用于非IE浏览器。具体写法可参照以下示例。使用需注意以下几点。...4、sessionStorage不能共享,localStorage同源文档之间可以共享,cookie同源且符合path规则的文档之间可以共享。  ...八、session与窗口的关系 每个session对象都与浏览器一一对应 重新开启一个浏览器,相当于重新创建一个session对象重新开启一个IE窗口,直接访问系统首页面 通过超链接打开新窗口新窗口的...cdn加速   6、静态资源缓存   7、图片延迟加载 十二、js几种数据类型,其中基本数据类型哪些 五种基本类型: Undefined、Null、Boolean、Number和String。...表示层:css ,作用:由 CSS 负责创建,CSS对“如何显示有关内容”的问题做出了回答。 行为层:js,作用:负责回答“内容应该如何对事件做出反应”这一问题。

    1.3K20

    第五章-处理多窗口 | Electron实战

    ---- 创建和管理多个窗口 Sets 是JavaScript的一个新的数据结构,是ES2015规范添加的。Set是唯一元素的集合;数组可以重复的值。...我选择使用set而不是数组,因为这样更容易删除元素。这个清单显示了如何用JavaScript创建一个Set。 列表5.1 创建一个跟踪新窗口的集合: ....更明显的是,如果新窗口与前一个窗口稍微偏移,就会创建新窗口,如图5.4所示。这个清单显示了如何偏移窗口。 清单5.10 基于当前焦点窗口偏移新窗口: ....保持应用程序的活动是成功的一半,如果用户单击dock的应用程序而没有打开窗口,会发生什么?在这种情况下,Fire Sale应该打开一个新窗口并显示给用户,如下所示。...activate事件只macOS上触发,但是很多原因可以解释为什么您可能选择让您的应用程序Windows或Linux上保持打开状态,特别是如果应用程序正在运行后台进程,而您希望继续运行这些进程,即使该窗口被关闭

    4.2K21
    领券