Question

我正在使用Angular 5，对TypeScript和Angular来说还很新。我知道如何在单击后从x.component.html的常规按钮调用函数，但是找不到从iFrame调用函数的方法。

我的component.html代码：-

<iframe id="myIframe" src="{{getSanURL()}}" name="targetframe" height="100%" allowTransparency="true" width="100%" scrolling="yes" frameborder="0" >
			
 </iframe>

我的component.ts代码：-

public getSanURL()
    {      
     var nd = new Date(); 
     var Day = nd.getUTCDate();
     var Month = nd.getUTCMonth()+1;
     
     var str = new String(currentUTCYear);
    
     var DM = Day.toString()+Month.toString();
     console.log(DM);
     
     var dynamicSanURL = "https://somelink"+DM+".someaddress/Some.html"; 
  
     return dynamicSanURL;
   }

从此寻求帮助，但徒劳无功-JavaScript function in iframe src

我希望在iFrame中返回此dynamicSanURL。我不知道我要去哪里错了。

Answer 1

我认为您在控制台中还存在有关不安全网址值的错误。这是angular的默认安全过程。您必须使用DomSanitizer绕过它。另外，您还需要检查您请求的域是否允许您使用X-Frame-Options显示See Here

在您的component.ts中

import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
export class AppComponent {
  constructor(private sanitizer: DomSanitizer)
      {
         this.setSafeUrl();
      }
  safeUrl: SafeResourceUrl;
  setSafeUrl(){
     var nd = new Date(); 
     var Day = nd.getUTCDate();
     var Month = nd.getUTCMonth()+1;

     var str = new String(currentUTCYear);

     var DM = Day.toString()+Month.toString();
     console.log(DM);

     var dynamicSanURL = "https://somelink"+DM+".someaddress/Some.html";
     this.safeUrl = `this.sanitizer.bypassSecurityTrustResourceUrl(dynamicSanURL);`
  }
}

然后在您的html中将safeUrl设置为src：

<iframe id="myIframe" [src]="safeUrl" name="targetframe" height="100%" allowTransparency="true" width="100%" scrolling="yes" frameborder="0" >

 </iframe>

在TypeScript中从iFrame调用函数

1 个答案: