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

最新推荐文章于 2022-10-08 16:51:01 发布
VIP文章 最新推荐文章于 2022-10-08 16:51:01 发布
阅读量6.5k 收藏
点赞数
分类专栏： Angular 文章标签： angular
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43288714/article/details/112170833
版权

文章目录

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

1. 需求

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

2. 方案

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

Code:

  
  <a [href]="url
最低0.47元/天 解锁文章
Jack N
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Angular在一个页面中使用两个ng-app的方法
01-21
下面一段代码给大家介绍了Angular在一个页面中使用两个ng-app的方法，具体代码如下所示： <!DOCTYPE html> <html lang=en> <head> <meta charset=utf-8> <title>ng-app指令,angular...
layuimini打开新页面/窗口/tab，点击按钮/超链接
weixin_46574356的博客
04-19 3687
layuimini打开新页面/窗口/tab，点击按钮/超链接
angularjs-标签页tab选项卡
火星男孩的分享空间
03-07 8813
选项卡一：JavaScript+html+css<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> #div1 .active{ background:blue; } #div1 div{
angularjs tab 实现
liyiye
04-24 451
angularjs tab 功能实现 功能要求 点击菜单的时候，新增一个tab页面，当关闭一个页面的时候，显示旁边的tab页面 当一个tab页面是从之前的tab打开，例如是一个查询页面的tab页面，打开一个新增页面的时候，当新增页面提交成功后，需要关闭当前页面，并刷新原来的查询页面 实现 通过iframe方式实现 每个tab页面就是一个ifr...
iframe框架一个页面中嵌套到另外一个页面
we
07-10 1万+
在一个页面中嵌套另外一个页面，就要使用到框架 标签。 标签规定一个内联框架。一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。基本语法： 举例： 运行浏览器后得到的效果如图 以上例子展示了的用法，在浏览器执行后，有个默认的高宽，让整个页面看起来不自然，还需要调整，所以接下来我们还要了解更多关于的属性。1、 标签的 frameborder 属性frameborder 属性规定是否显示 iframe...
layuimini tab切换刷新解决方案
众纳百川的博客
09-10 3501
需求： 我们在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框架扩展 */ ..
IFRAME中点击子框架里面的超链接怎么怎么在新网页中打开想要打开的页面
linwei_hello的专栏
07-31 8235
在子框网页的标签中加 这样你网页内所有链接都在新窗口打开    若是要在同一页面打开则是在子框网页的标签中加
页面嵌套iframe后，点击里面的链接，然后父窗口跳转（子窗口控制父窗口的链接跳转）...
weixin_30933531的博客
05-06 543
做app的时候遇到一个问题，一个页面，然后里面嵌套了一个另一个页面，想实现点击里面的链接，然后外面进行跳转，不然的话，里面的页面永远出不来， 后面想了个办法，app的页面都是打开打开，不关闭的，然后由上一个页面用postmessage进行监听，然后子窗口发送信息给父窗口，父窗口接到信息后进行 页面跳转，Android可以，然而ios却不行，坑了；只能想另外一种办法，app打开页面不是...
页面内部跳转
a1920135141的博客
09-02 3096
这段时间需要一个后台页面，要求实现最上面导航栏、左边菜单栏、右边内容栏，点击菜单改变内容，网上百度了一波，只发现一种方法，比较遗憾，本人不相信只有一种解决方案，所以记录一波供以后扩展 target属性解决方案   这个方案就是充分利用target属性的特性来解决，所谓target就是对应某个（内嵌）框架（个人理解，想有自己的体会百度），理所当然的是配和（内嵌）框架使用。目前我接触到（内嵌）框架...
使用iframe在网页中嵌入其他网页的方法
09-28
主要介绍了使用iframe在网页中嵌入其他网页的方法,需要的朋友可以参考下
JS打开新窗口的2种方式
05-15
JS打开新窗口的2种方式 JS打开新窗口的2种方式 JS打开新窗口的2种方式
Angular在一个页面中使用两个ng-app的方法(二)
01-19
在上篇文章给大家介绍了Angular在一个页面中使用两个ng-app的方法，这种方法不太推荐，下面给大家介绍方法二，具体代码如下所示： <!DOCTYPE html> <html lang=en> <head> <meta charset=utf-8...
angular中如何绑定iframe中src的方法
01-21
需求: 页面中有一个网页组件(由iframe编写)，此iframe显示在一个输入框中，当修改输入框中地址的时候，要求改变网页组件中的内容 网页组件中的代码(html的部分) <iframe #Iframe [src]=testUrl ...
前端angular 打开一个新的网页
jsq916的博客
01-25 2289
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
在 iframe页面 跳转至新的标签页面
User_Lily的博客
10-08 2459
在 iframe页面 跳转至新的标签页面
IFRAME中点击子框架里面的超链接在新网页中打开想要打开的页面
十年回首，一纸感动!
11-06 855
在子框网页的&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】路由跳转(代码跳转)
热门推荐
王如霜
11-27 3万+
【WHAT】      在Angular中，路由的作用就是建立URL路径和组件（页面，因为页面就是由组件构成）之间的对应关系，根据不同的URL路径匹配出相应的组件并渲染。 【HOW】 1. 定义路由配置 2. 创建根路由模块 3. 添加路由插座 (以上是基本且必须的三个步骤) 【示例：(文件如下)】                 1.在app.routes定义
关于前端iframe嵌套页面的跳转问题
ABestRookie的博客
11-16 7024
因工作中遇到的项目,有iframe页面嵌套,遇到了页面跳转的问题,所以记录解决问题的过程 关于前端iframe嵌套页面的跳转问题 问题: 在A页面使用iframe嵌套了B页面,B页面中做了权限校验,即登录成功后才可以访问B中的某个页面,如果没有登录,则跳转A登录页面. 过程: 开始在B中尝试使用页面跳转location.href="A登录的页面地址",一直访问失败,且浏览器地址栏的url也没有变化,查询相关资料得到解决方法. 解决方案: 使用:windows.parent.location.href=".
Angular入门到精通系列教程（3） - Angular 技术栈 （Tech Stack）
Jack @ CSDN
11-03 2万+
(Based on Angular 9) 1. IDE Visual Studio Code: Best and free IDE for web developing. Plugins: 2. UI Framework 3. State Management 4. Code Reuse
angular项目中打开新页面打印html页面
最新发布
06-10
在新页面的路由配置中，添加一个路由来匹配“/print”路径，并将HTML内容作为查询参数传递： ``` const routes: Routes = [ { path: 'print', component: PrintComponent } ]; // 在导航时传递HTML内容 const ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值