web-dev-qa-db-ja.com

angularアプリケーション内で他のWebサイトを開く方法

他のウェブサイトをロードしようとしていますが、そこにはウェブサイトのリストがあります。 Webサイトのリンクをクリックした場合、angularアプリケーション内でWebサイトを開く必要があります。angularまたはサイトの読み込みを制限するサイトを読み込みます

私はサイトをロードするために、HTMLタグ要素iframe、embed、object、jquery load関数を試してみました。一部のWebサイトは開いており、一部のサイトは他のアプリケーションで開くことが制限されています

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

角度で

  <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);
   }
  }

たとえば、StackOverflowホームページをロードすることを期待していますが、などのエラーが発生しました。フレームに ' https://stackoverflow.com/ 'を表示することを拒否されたため、 「X-Frame-Options」を「sameorigin」に設定します。これは、サイトの所有者が許可しない場合にiframeにページをロードすることを制限するブラウザーのデフォルトオプションです。だから私はiframeの代わりに代替オプションが欲しい

htmlangulariframex-frame-options
3
Vignesh Ammasi

DOM要素をサニタイズしてみて、divを使用してinnerHTMLとして追加します。これで、iframeを制御するラッパーdivができます。

ご参考までに。 https://angular.io/api/platform-b​​rowser/DomSanitizer

0
visrey

基本的に、WebサイトのヘッダーはWebサーバーで設定されます。ファイルのヘッダー「X-Frame-Options」がsameoriginとして設定されている場合、他のOriginからサイトをロードすることはできません。

「X-Frame-Options」は、他のWebサイト内にWebサイトをロードすることを基本的に誰にも許可しないように設定されたヘッダーです。

あなたができる唯一のことは、新しいタブ/ウィンドウでサイトを開くか、同じアプリ内にリダイレクトするだけです。

0
Sanjay P Achar

Window.open（）を使用します。とても簡単です！

あなたのcomponent.htmlファイルで

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

あなたのcomponent.tsファイルで

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

「_blank」を使用する代わりに「_self」を使用

0
Shubham

このようにしてみてください。

<object data="https://stackoverflow.com" width="600" height="400">
    <embed src="https://stackoverflow.com" width="600" height="400"/>
</object>
0
Yash Rami