时间戳

首页 > 解决方案 > Angular 8 click 用作 javascript onload 函数

javascript - Angular 8 click 用作 javascript onload 函数

问题描述

我的 Angular 应用程序正在加载到 iframe portlet 中。

在父 JSP 页面中，我有一个表单并提交不可见按钮，这将打开一个来自外部应用程序的弹出窗口。

我正在尝试从角度组件中单击该按钮。

Click没有按预期工作，它像onload一样工作。当页面被加载时，弹出窗口会自动出现。

网页。

<html>
...
...
<!-- Left nav Menu-->
<div>
<ul>    <li>....</li>
...
<li>
   <a herf="javascript:void(0);" (click)="navigateToParentJspMethod('true')">Contact Us</a>
</li>
 ...
</html>

组件 ts 文件

navigateToParentJspMethod(popupFlg: string){
console.log(popupFlg+' Test');
if(popupFlg==='true'){
    $("#parentPageFrmSubmit", window.parent.document).click();

}

父 Jsp 页面

<script>
function openContactUsPopUpFromExternalApp(){
.....
document.getElementById("parentPageFrm").submit();
}
</script>
<form name="parentPageFrm" id="parentPageFrm" action="parentPageFrmSubmitAction" method="post" target="openContactUsWin">
<input type="hidden".....>
......
<button type="submit" id="parentPageFrmSubmit" style="display:none" onclick="openContactUsPopUpFromExternalApp()">Submit</button>
</form>

谢谢，拉玛

标签： javascriptjqueryangular

解决方案

最后，我能够解决这个问题。

我删除了 Jquery，并且确实使用了从 angular 到父 jsp 的 parent.postmessage 并从我的父 jsp 打开弹出窗口。

网页。

<html>
...
...
<!-- Left nav Menu-->
<div>
<ul>    <li>....</li>
...
<li>
   <a herf="#" (click)="navigateToParentJspMethod('true')">Contact Us</a>
</li>
 ...
</html>

组件 ts 文件

navigateToParentJspMethod(popupFlg: string){
   console.log(popupFlg+' Test');
   var data="functionality=contactUsPopUp";
   parent.postMessage(data,*);
}

父 Jsp。

window.addEventListener("message", handleMessage, false);

function handleMessage(e){
  var formData= e.data;
  var formValue= formData.split(";");
  var functionality=((formValue[0].substr((formValue[0].indexOf("="))).slice(1);
  if(functionality=="contactUsPopUp"){
     document.getElementById("popupInvisibleButton").click();
  }
}

它确实对我有用。:)

推荐阅读