Angular 2 iframe到父通信
在我当前的项目中，我有多个Angular 2应用程序，这些应用程序应该由门户应用程序(也就是Angular 2)提供服务。因此，门户应用程序有一个标题区域，其中包含指向所有底层应用程序的链接。当用户点击一个应用程序链接时，相应的angular 2应用程序将加载到门户主体的iframe中。
现在，我将开发一个集中授权服务。在门户中，我有一个服务，它持有当前登录用户的权限。我的问题是:是否可以在单个应用程序(iframe)中访问angular 2服务/组件(门户)？它似乎在angular 1 via scope中是可能的
回答 2
Stack Overflow用户
发布于 2017-08-10 15:01:41
我目前正在考虑做一些类似的事情(在iFrame中包含子应用程序的门户应用程序)您可以通过使用window.postMessage发送数据在服务器和客户端之间(在任意方向上)进行通信。
例如，在服务器应用程序上：
var iframe = document.getElementById('useriframe');
if (iframe == null) return;
var iWindow = (<HTMLIFrameElement>iframe).contentWindow;
iWindow.postMessage({"for":"user","data":"anything"}, 'http://localhost:4001');在客户端应用程序上(托管在iFrame中)
export class AppComponent {
@HostListener('window:message',['$event'])
onMessage(e)
{
if (e.origin!="http://localhost:4200")
{
return false;
}
if (e.data.for=="user")
{
alert('here i am');
}
}显示父中的子帧路由，因此，在我的实现中，我们将令牌和用户信息从外壳应用程序传递给子iFrame，并将路由信息从子应用程序传递回外壳程序，以便url反映在子应用程序中选择的路由。在子应用程序中，您可能有如下路由：
用户应用程序/编辑用户/用户名
，我们希望将其发布到父应用程序并显示路由，如下所示：
请注意，我们使用hashtag来标记子路径，并且在子应用程序中截取每个导航事件并通过
export class MyRoutingComponent implements OnInit {
constructor(private router: Router) {
router.events.subscribe((event: Event)=>{
if (event instanceof NavigationEnd){
let url=(<NavigationEnd>event).url;
if (url.length>1)//don't post message about base route '/'
window.parent.postMessage({"for":"dashboard", "operation":"changeroute","route":url},'*')
}
})
}然后在父应用程序中解析消息并使用它来更新显示的位置路径。
url = url +'#' + route;
this.location.go(url);Stack Overflow用户
发布于 2018-02-01 03:49:31
嗨，非常感谢@jazza1000给出的解决方案，它帮了我大忙。
我们的问题是在当前(到目前为止)版本的angular cli中，有一个bug阻止了外部JS文件的使用，即使使用了allowJ。我们将使用jsplumb (外部js)来表示一些流程图。(Actual issue on stack overflow)
因此，我们决定采用在另外一个angular 4应用程序中托管使用外部JS的功能的方法。父angular 5应用程序将引入带有iFrame的angular 4应用程序。因此，当用户想要查看流程图时，我们将在iframe中打开angular4应用程序，然后一旦完成，他将在angular 4应用程序中单击保存，这将保存他所做的所有修改，然后发送消息到父窗口，该窗口将关闭/隐藏带有iframe的div。
angular 5中的父应用程序包含以下代码
@HostListener('window:message', ['$event'])
onMessage(e) {
debugger;
if (e.origin != "http://localhost:4201") { // set your origin
return false;
}
if (e.data.for == "user") {
alert('here i am');
}
}我们的iFrame angular 4应用程序on save按钮具有以下代码(我们使用--port4201启动应用程序)
window.parent.window.postMessage({"for":"user","data":"anything"}, 'http://localhost:4200')https://stackoverflow.com/questions/41674712
复制
相似问题
VBA-从工作簿中将特定列复制并过滤到工作表中。
在选项卡中显示具有范围的类别？
我想在gsheet的特定选项卡中写入数据。
将来自Gsheet的两个不同选项卡的数据组合到主Gsheet中
jQuery选项卡脚本中的选定选项卡
领取专属 10元无门槛券
AI混元助手 在线答疑
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
