CODEWITHSUNDEEP
angular2-routing
Connor Paddon
Connor Paddon

Reputation: 1

Loading an iFrame based on a variable URL in Angular 2

I'm trying to figure out in Angular 2 how to do the following

Enter a url into the address bar and load an iframe based on that URL

For instance,

localhost:3000/http://test.com should load a full screen iFrame of test.com

Could anybody provide any reference to this?

Upvotes: 0

Views: 2043

Answers (1)

mrkosima
mrkosima

Reputation: 506

There's no any in-box solution in angular package. But I see you could make it with next steps:

  • create FrameComponent component that will show iFrame the way you need
  • configure route to match FrameComponent
  • Navigate by url and extract path from activatedRoute
  • add url to iframeSource
  • profit

But you'll meet some issues - cross origin navigation, not safe url, etc. One of them could be fixed with DomSanitizer and SafeResourceUrl from @angular/platform-browser.

A made some proof to show what I mean:

https://plnkr.co/edit/9sgwAy?p=preview

Upvotes: 2

Related Questions