Loading an iFrame based on a variable URL in Angular 2

Question

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?

mrkosima · Accepted Answer · 2017-02-12 10:30:08Z

2

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

answered Feb 12, 2017 at 10:30

mrkosima

5075 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Connor Paddon Over a year ago

The help is much appreciated. Any idea why it won't work with http, and instead only with https/

mrkosima Over a year ago

Because of fundamental principal of web security. If you have an HTTPS site, you can only embed iframes from HTTPS sources. There are couple of technics to resolve this limitation. But this issue is out of scope. Feel free to google https to http proxy, https mixed content, etc.

Collectives™ on Stack Overflow

Loading an iFrame based on a variable URL in Angular 2

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related