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

如何在iframe外部打开新链接?

在iframe外部打开新链接,可以通过在父级iframe中设置target属性来实现。具体步骤如下:

  1. 在父级iframe中设置target属性,指定要在新窗口中打开的链接地址,例如:<iframe src="https://www.example.com" target="_blank"></iframe>// 在子级iframe中,通过window.open()方法打开新链接 window.open('https://www.example2.com', '_blank');
  2. 在子级iframe中,通过window.open()方法打开新链接,例如:
  3. 这样,当用户点击父级iframe中的链接时,就会在新窗口中打开子级iframe中的链接,而不会关闭父级iframe。

需要注意的是,在设置target属性时,需要使用双标签符号 “##” 将其与iframe标签分开,例如:

代码语言:html
复制
<iframe src="https://www.example.com" target="blank"></iframe>

同时,这种方法只能打开在新窗口中,如果要在新窗口中同时打开多个链接,可以使用JavaScript来实现,例如:

代码语言:javascript
复制
// 获取父级iframe元素
var parentIframe = document.querySelector('iframe');

// 在父级iframe元素中添加一个点击事件监听器
parentIframe.addEventListener('click', function(event) {
  // 如果点击的是子级iframe元素,则通过window.open()方法打开新链接
  if (event.target.tagName === 'IFRAME') {
    window.open('https://www.example2.com', '_blank');
  }
});

这样,当用户点击父级iframe中的链接时,就会触发点击事件监听器,然后通过window.open()方法打开新链接,从而实现在新窗口中打开多个链接的目的。

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

相关·内容

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

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

2.6K20

Layui-admin-iframe通过页面链接直接在iframe打开一个的页面,实现单页面的效果

前言:   使用Layui-admin做后台管理框架有很长的一段时间了,但是一直没有对框架内iframe菜单栏切换跳转做深入的了解。...今天有一个这样的需求就是通过获取超链接中传递过来的跳转地址和对应的tabs的title名称参数,在layui-admin-iframe中自动打开一个的tabs页面,不需要点击左边的菜单栏,实现一个单页面的效果...transferUrl=/Home/Index&openTabsName=首页 其中transferUrl:为需要打开的页面地址 openTabsName:为tabs标题名称 layui预先加载...,获取超链接中传递过来的跳转页面地址和tabs title名称在iframe打开: //layui预先加载 layui.use('index', function(){ var transferUrl...: 获取超链接[https://xxxx.xxx.com?

3.9K10

进一步防止 Selenium 被检测——如何防止浏览器用标签页打开链接

但有些网站,点击了它的页面超链接以后,会自动以的标签页打开,这种情况下就无法使用上面提到的技巧了。 为了解决这个问题,我们必须设法让当前页面的所有a标签涉及到的链接,都能在当前标签页打开。...如果要用一个a标签的链接在当前页面打开,我们只需要设置它的target属性值为_self。 现在我们需要用 JavaScript 把当面页面上的所有a标签的target属性值全部改成_self。...以知乎为例,我们打开知乎的首页,如下图所示: 现在点击上面的任何一个问题,都会以标签页打开,如下图所示: 现在我们回到原来的首页,打开开发者工具的Console选项卡,如下图所示: 执行如下两行 JavaScript...如果执行语句以后,页面通过 Ajax 或者其他途径又加载了的 HTML,那么需要重新执行。 每次打开链接以后,需要再次执行这两行语句。 这个方法可以与本文开始提到的那篇文章中的方法结合起来使用。...window.navigator.webdriver属性消失,等页面完全加载完成以后,再通过driver.execute_script()运行本文讲到的两行 JavaScript 代码,强迫网页在当前标签页打开链接

4K40

07.HTML实例

此例演示如何在 HTML 文件中写地址。 此例演示如何实现缩写或首字母缩写。 此例演示如何改变文字的方向。 此例演示如何实现长短不一的引用语。...链接到一个外部样式表 HTML 链接 创建超级链接 将图像作为链接的浏览器窗口打开链接 链接到同一个页面的不同位置 跳出框架 创建电子邮件链接 创建电子邮件链接 2 HTML 图像 插入图像...创建一个按钮 本例演示如何在数据周围绘制一个带标题的框。...带有文本域与输入域的表单 点击提交 带有复选框与提交按钮的form表单 点击提交 带有单选框与提交按钮的表单 点击提交 发送邮件表单 HTML iframe 内联框架 (HTML页面中插入框架)...HTML 头部元素 描述了文档标题 HTML页面中默认的URL链接 提供文档元数据 HTML 脚本 插入一个脚本 使用 标签

8.1K40

WebKit三件套(3):WebKit之Port篇

下面初步来了解几个主要接口:WebCore::ChromeClient接口://往往在运行window.open脚本时调用,以便由外部程序决定如何打开一个新页面如新建一个窗口、新建一个Tab页签等;virtual...();//告诉外部程序创建一个的Frame,如遇到html中iframe标签时,需要外部程序创建一个的Frame及原生窗口句柄等;virtual PassRefPtr createFrame(const...,如何在提供的显示场所显示Web内容则往往由WebCore中的layout部分来实现,其中充分利用了Css定义来布局显示该显示的内容;一旦涉及控制或动态处理往往由Port部分发起而由Javascript...一般说来打开一个页面,Port部分需要提供一个主显示场所(即原生窗口),如果页面中含有iframe标签,则需要在主显示场所内创建一个子显示场所,以显示iframe标签对应src的内容;如果页面中含有embed...但愿我们也能利用利用WebKit整出一个象模象样的东东机顶盒浏览器、手机浏览器等等。。

2K10

当.Net撞上BI可视化,这3种“套路”你必须知道

以仪表板为例: (1)在新窗口打开仪表板 选择仪表板,单击页面右上角的新窗口按钮,在的浏览器窗口中打开仪表板。 (2)拷贝浏览器地址栏 URL 将仪表板的URL地址拷贝粘贴到记事本中待用。...的src属性或者超链接的href属性。...,只需设置一个超链接,href设置为上述的URL即可。...在浏览器中打开 http://localhost:51980/graphiql 网页(注意URL末尾的graph与ql之间有一个字母i),可随时调试API,如下图: 接下来我们再来演示如何在ASP.NET...打开 Visual Studio 新建ASP.NET MVC项目 或者已有的项目中添加的视图或HTML文件 其他 在上面我们介绍了在ASP .Net Core MVC 项目和.Net Core 项目中的集成方式

3.1K20

实用的VUE系列——每天在用的Vue-SFC-Playground你真的了解吗?

1、 如何在浏览器端如果不经过打包 引用 通过 import 引用 在线vue es6 语法出来有很多年 ,import 我们也经常在用,但相信很多刚入行的 jym 都会很好奇,但凡我们想要使用 ES...我猜原因很简单,谷歌浏览器作为历史悠久的头部浏览器,他们有历史包袱,他们需要兼容老代码,开辟代码。...于是继续开始救,他定义了import.map 来前置引入vue链接,代码如下 : //html { "imports":{ "...//   可用于禁用外部网站的JS // 6. sandbox="allow-popups" //   允许弹出窗口(window.open,target="_blank")。...// 5. sandbox="allow-scripts" //   允许弹出窗口逃离沙箱:允许一个沙箱文件打开新窗口不强制使用沙盒。

52110

【实战】快来和我一起开发一个在线 Web 代码编辑器

Iframes 如何在 React 中工作 iframe 通常与纯 HTML 一起使用。 将 iframe 与 React 一起使用不需要很多更改,主要是将属性名称转换为驼峰式。...使用 iframe 时,我们可以在页面上嵌入外部网页或呈现指定的 HTML 内容。 要加载和嵌入外部页面,我们将使用 src 属性。...在我们的例子中,我们没有加载外部页面; 相反,我们想创建一个的内部 HTML 文档来存放我们的结果。为此,我们需要 srcDoc 属性。 该属性采用我们想要嵌入的 HTML 文档。...我们没有考虑 iframe 的安全问题,主要是因为我们在 iframe 中加载了内部 HTML 文档,而不是外部文档。 所以我们不需要考虑太多,因为 iframe 非常适合我们的用例。...对于 iframe,另一个考虑因素是页面加载时间,因为 iframe 中加载的内容通常不受你的控制。 在我们的应用程序中,这不是问题,因为我们的 iframe 内容不是外部的。

57920
领券