嵌入在iframe中的Angular站点，如何打开一个新的tab页面

最新推荐文章于 2022-10-08 16:51:01 发布
最新推荐文章于 2022-10-08 16:51:01 发布
阅读量6.6k 收藏
点赞数
分类专栏： Angular 文章标签： angular
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43288714/article/details/112170833
版权
本文探讨了在iframe内嵌的Angular应用中，如何实现点击按钮时在新tab中打开页面的问题，主要难点在于处理不同源的地址。
摘要由CSDN通过智能技术生成

文章目录

嵌入在iframe中的Angular站点，如何在打开一个新的tab页面

1. 需求

一个angular web站点，通过一个iframe嵌套在另一个web站点中。点击一个按钮，希望能够在一个新的页面（Tab）中打开另外一个页面。

2. 方案

主要困难在于处理2个站点的地址不同的问题。既可以通过 html 设置href实现，又可以直接使用js代码实现。

Code:

  
  <a [href]="url" target="_blank">1. ope
最低0.47元/天 解锁文章
Jack N
关注
专栏目录
iframe里打开tab页的问题
skysys的研究小屋
07-09 1020
问题背景 有一个多tab页面的项目，基于jQuery 但是需要在子页面（iframe）里打开新的tab页面。 问题描述 子页面无法打开 解决方案 参考： https://blog.csdn.net/q596333033/article/details/78529230 function add(title,url){ //title 选项卡的名字 //url 选项卡的链接地址 var parent$ = self.parent.$; //找到父级DOM if (pare
前端angular 打开一个新的网页
jsq916的博客
01-25 2418
1、在当前页面打开window.location.href = url window.location.href = '/uportal/framework/default.html?' + 'id=' + this.selectedId + '&moc=' + this.selectedMoc + '&nbiId=' + this.selectedNeid + '&name=' + this.selectedName + '&subType=' + t
Angular6中打开新的窗口
白不懂黑的静的专栏
07-01 5037
需求： Angular6的环境下，在一个页面中有一个<a>标签，点击链接后，需要跳转到新的页面（注意新的页面是在浏览器的新窗口中打开）。 方案： 使用angular 的路由功能，使用 routerLink 属性处理。 具体过程： 1、新建一个组件，作为跳转界面的内容： ng g c childpage 2、在新的childpage.component.html 模板文件中写自己需要展现的内容。 3、开启angular的路由功能，并在路由文件(app-routing....
angular 打开新页面，导航处于选中状态
qq_36557846的博客
06-23 631
需求描述 1、点击导航打开新页面 2、打开的新页面导航处于选中状态，样式包括图标、文字、下划线 出现的问题： 设置[class.active]=“acticeIndex == i” 打开新页面，新页面的导航并没有处于选中状态，但是原页面上点击到的导航处于选中状态 原因分析： 新页面中没有acticeIndex值 解决方法： 在nav组件中设置acticeIndex为输入型字段，在home、news、product组件中分别设置acticeIndex值为0,1,2，这样打开新页面时，就能获取到acticeIn
iframe 在angular1.5中内嵌vue2.0的项目
m0_57271254的博客
12-23 940
公司项目的技术有一些老旧了，是angular1.5的版本，需要做一些技术革新，希望在原有的项目上后续使用vue开发，并且合并两个项目，想了很久,决定使用iframe把vue的项目嵌进去。 先说以下iframe这个标签，我也是从这次项目合并才了解的这个标签: iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。几乎所有的浏览器都支持iframe标签，自己写一个小demo即可明白： <body> <iframe src="https://www.csdn.net/
Easyui - 利用iframe打开tab以及在iframe打开父tab
热门推荐
Nisherman
08-12 1万+
此处介绍利用iframe打开tab（先上方法） /** * 在iFrame中打开一个新tab * @param title * @param href */ function openTab(title,href){ var e = $('#tabs').tabs('exists',title); if(e){ $("#tabs").tabs('selec
JS的33个概念—前端安全（跨站脚本攻击XSS和跨站请求伪造CSRF）
jiaojsun的博客
07-26 1177
1.跨站脚本攻击(XSS) 1）定义 跨站脚本攻击是基于web应用中已知的漏洞，服务端，或者依赖的插件系统。利用其中一种方式，攻击者可以把恶意内容放进目标站点传输的内容中。当这种结合的内容到达客户端的浏览器中，它就已经变成从受信任的来源传输的，然后在系统授权下进行操作。通过寻找把恶意脚本注入web页面的方法，攻击者可以获取对敏感页面的访问权限，例如对session cookie和浏览器代表用...
关于前端的 13 个安全提示
05-12 301
未经允许严禁转载 无论你是 React.js、Angular、Vue.js 程序员还是前端页面仔，你的代码都可以成为引诱黑客入侵的大门。 作为前端开发人员，我们最关心的是性能、SEO 和 UI/UX——安全性却经常被忽略。 你可能会惊讶地知道大型框架如何使你的网站对跨站点脚本（XSS）攻击打开大门。有很多危险的操作，例如 React 中的 dangerouslySetInnerHTML 或 Angular 中的 bypassSecurityTrust API。 我们应该记住，就安全性而言，前端现在与后端或
我在乐字节学习前端的第三天-学习笔记：H5+CSS3面试题总结
weixin_52392949的博客
11-16 921
H5+css3面试题总结 一、html5和html的区别： 1.html5新增了语义化标签：footer 、nav、section… 2.html5完全支持css3 3.支持本地离线存储 4.新增了canvas标签 5.新增视频和音频标签 HTML5离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失； sessionStorage 数据在浏览器关闭后自动删除。 如何区分 HTML 和 HTML5？ DOCTYPE声明 新增的结构元素 功能元素 123 二、对语义化标签的...
JS打开新窗口的2种方式
05-15
JS打开新窗口的2种方式 JS打开新窗口的2种方式 JS打开新窗口的2种方式
记第一次面试分享(雪浪云)
henucm的博客
04-21 2537
文章目录Cookie，sessionStorage、localStorage的区别Cookie和session的区别简单谈一下cookie？HTTP常用状态码HTTP和HTTPS的区别描述一下XSS和CRSF攻击？防御方式？什么是点击挟持？如何防范点击挟持？SQL注入攻击？强，协商缓存状态码304和200cache-control的值有哪些 ！！！谈一谈浏览器的缓存机制？CSS优先级算法如何计算？...
<a>标签在iframe或者别的情况下实现页面的跳转——新窗口，当前窗口
独孤东方朔的博客
12-12 6583
新窗口打开链接 &amp;amp;amp;lt;a href=&amp;amp;quot;www.baidu.com&amp;amp;quot; target=&amp;amp;quot;_blank&amp;amp;quot;&amp;amp;amp;gt;百度&amp;amp;amp;lt;/a&amp;amp;amp;gt; 这个是在新的页面打开链接； PS:注意blank一定要小写，否则无法实现页面打开 其
angularjs iframe 跨域打开网站时 报错
Sweatwater的博客
09-02 179
angularjs iframe 跨域打开网站时 报错。
IFRAME中点击子框架里面的超链接怎么怎么在新网页中打开想要打开的页面
linwei_hello的专栏
07-31 8255
在子框网页的标签中加 这样你网页内所有链接都在新窗口打开    若是要在同一页面打开则是在子框网页的标签中加
layuimini tab切换刷新解决方案
众纳百川的博客
09-10 3751
需求： 我们在MVC 开发时用到了LayUImini，原因是上手简单。 在minTab.js 的插入：$(".layui-tab-item.layui-show").find("iframe")[0].contentWindow.location.reload(); 以下是完整的JS代码 /** * date:2020/02/27 * author:Mr.Chung * version:2.0 * description:layuimini tab框架扩展 */ ..
页面内部跳转
a1920135141的博客
09-02 3171
这段时间需要一个后台页面，要求实现最上面导航栏、左边菜单栏、右边内容栏，点击菜单改变内容，网上百度了一波，只发现一种方法，比较遗憾，本人不相信只有一种解决方案，所以记录一波供以后扩展 target属性解决方案   这个方案就是充分利用target属性的特性来解决，所谓target就是对应某个（内嵌）框架（个人理解，想有自己的体会百度），理所当然的是配和（内嵌）框架使用。目前我接触到（内嵌）框架...
在 iframe页面 跳转至新的标签页面
User_Lily的博客
10-08 2619
在 iframe页面 跳转至新的标签页面
IFRAME中点击子框架里面的超链接在新网页中打开想要打开的页面
十年回首，一纸感动!
11-06 879
在子框网页的&lt;head&gt;标签中加&lt;base target="_blank"&gt; 这样你网页内所有链接都在新窗口打开&lt;head&gt;    &lt;base target="_blank"&gt; &lt;/head&gt; 若是要在同一页面打开则是在子框网页的&lt;head&gt;标签中加&lt;base target
angular项目中打开新页面打印html页面
最新发布
06-10
您可以使用Angular的内置Router模块来导航到新页面，然后使用JavaScript的window.print()函数来打印HTML页面。以下是示例代码： 在您的组件中，导入Router和ActivatedRoute模块： ``` import { Router, ActivatedRoute } from '@angular/router'; ``` 在构造函数中注入这些模块： ``` constructor(private router: Router, private route: ActivatedRoute) { } ``` 在需要打印HTML页面的函数中，使用Router模块的navigateByUrl方法导航到新页面，并在导航完成后调用window.print()函数： ``` printPage() { const pageUrl = window.location.href; const newUrl = pageUrl.split('?')[0] + '/print'; // 添加“/print”路径 this.router.navigateByUrl(newUrl).then(() => { window.print(); }); } ``` 在新页面的组件中，使用ActivatedRoute模块获取HTML页面的内容并显示在页面上： ``` import { Component, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; @Component({ selector: 'app-print', template: '<div [innerHTML]="htmlContent"></div>' }) export class PrintComponent implements OnInit { htmlContent: string; constructor(private route: ActivatedRoute) { } ngOnInit() { this.htmlContent = this.route.snapshot.queryParamMap.get('html'); } } ``` 在新页面的路由配置中，添加一个路由来匹配“/print”路径，并将HTML内容作为查询参数传递： ``` const routes: Routes = [ { path: 'print', component: PrintComponent } ]; // 在导航时传递HTML内容 const queryParams = { html: '<h1>要打印的HTML内容</h1>' }; this.router.navigate(['/print'], { queryParams }); ``` 请注意，这只是一个简单的示例，您需要根据自己的需求进行修改和改进。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值