如何在 angular 应用程序中打开其他网站

Question

我正在尝试加载其他网站，我将在其中获得网站列表。如果我点击网站 link，它必须在我的 angular 应用程序中打开该网站。 angular 或我可以用来加载他们限制加载网站的网站的任何地方是否有可用的选项

我已经尝试使用 HTML 标签元素 iframe、嵌入、对象和 jquery 加载函数来加载网站。一些网站正在打开，一些网站限制在其他应用程序上打开

<html>
<body>
<iframe src="https://whosebug.com" height="100%" width="100%"></iframe>
</body>
</html>

在angular

  <div >
    <iframe id="companyFrame" [src]="sourceURL | safe" class="frame"> 
    </iframe>
  </div>

  @Pipe({ name: "safe" })
  export class SafePipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {}
  transform(url) {
    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
   }
  }

例如，我希望加载 Whosebug 主页站点，但我收到类似 Refused to display 'https://whosebug.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'. 如果站点所有者不想允许，则限制在 iframe 中加载页面是浏览器的默认选项。所以我想要替代选项而不是 iframe

Answer 1

尝试 DOM 清理元素并在 div 的帮助下将其添加为 innerHTML。这样您就可以使用包装器 div 来控制 iframe。

仅供参考。 https://angular.io/api/platform-browser/DomSanitizer

Answer 2

使用window.open()。非常简单！

在你的component.html文件中-

<a (click)="goToLink("www.example.com")">page link</a>

在你的component.ts文件中-

goToLink(url: string){
window.open(url, "_blank");
}

使用“_self”代替“_blank”

Answer 3

你可以这样试试

<object data="https://whosebug.com" width="600" height="400">
    <embed src="https://whosebug.com" width="600" height="400"/>
</object>

Answer 4

'X-Frame-Options' 由 owners/servers 强制执行，因此人们不能像使用 Iframe 的其他网站一样使用他们的网站。

想想这样一种情况：如果您在整个页面的 iframe 中启动 google，那么您可以使用 url 服务 google，您可以做更多疯狂的事情还有.

有一些 chorme/FF 扩展可以用来绕过。但是您不能指望您的所有用户都会使用它。

https://chrome.google.com/webstore/detail/ignore-x-frame-headers/gleekbfjekiniecknbkamfmkohkpodhe

Answer 5

基本上网站的 headers 是在网络服务器中设置的，如果文件上的 headers 'X-Frame-Options' 设置为同源，则无法从任何其他网站加载该网站来源.

'X-Frame-Options' 是 header 设置，基本上不允许任何人在另一个网站中加载您的网站。

您唯一能做的就是在新标签页中打开网站/window，或者您可以在同一个应用程序中重定向。

如何在 angular 应用程序中打开其他网站

How to open other web sites inside angular application

html

angular

iframe

x-frame-options