我正在尝试在单击链接时在iframe中显示一个网站,但是我遇到了x-frame-option问题。然后,我使用x-frame-bypass
。当我像下面这样在 HTML 中使用时,它可以正常工作。
HTML
<html>
<head>
<title></title>
<script src="https://unpkg.com/@ungap/custom-elements-builtin"></script>
<script type="module" src="https://unpkg.com/x-frame-bypass"></script>
</head>
<body>
<iframe is="x-frame-bypass" src="https://news.ycombinator.com/" name="myIframe"></iframe>
</body>
</html>
但是,当我尝试单击链接并在iframe中打开时,它不起作用。我正在使用角度。像波纹管这样的示例代码。
index.html
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://unpkg.com/@ungap/custom-elements-builtin"></script>
<script type="module" src="https://unpkg.com/x-frame-bypass"></script>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>
app.component.html
<div style="text-align:center">
<h1>
Test Open URL in Iframe
</h1>
<a class="link-call" (click)="onTest('https://news.ycombinator.com/')" style="background:red;padding: 14px 25px;color:white;cursor:pointer">test</a>
</div>
<iframe is="x-frame-bypass" width="100%" height="100%" frameBorder="0" [src]="urlSafe"></iframe>
app.component.ts
name = 'Set iframe source';
url: string;
urlSafe: SafeResourceUrl;
constructor(public sanitizer: DomSanitizer) { }
ngOnInit() {
}
onTest(url){
this.urlSafe= this.sanitizer.bypassSecurityTrustResourceUrl(url);
}
此DEMO供您参考