Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Ionic: External link in iframe opens in webview (embed youtube player)

In my ionic (v1.2.4) app there is an embedded youtube player with a link "watch on youtube". If a user clicks this link, youtube website is opened in web view of cordova. It destroys current state of my app. I want to open that link in system's web browser (cordova in app browser plugin).

Same with any link in any iframe (vimeo, soundcloud...)

This link can't be modified with JS from outside the iframe, because cross domain security issues. So i can't update target attribute from _blank to _system.

Show a dialog onbeforeunload is not really an option because it looks ugly :)

Is there a possibility to avoid a page being loaded into the same webview or in the system's web browser? Breaking links by using iframe's sandbox attribute is not an option because it breaks youtube player completely.

Thanks and cheers

ps: i asked this question here but couldn't get any helpful information

like image 847
iwanuschka Avatar asked Mar 12 '23 14:03

iwanuschka


1 Answers

Thanks thepio for the hint with allow-intent and allow-navigation. First time i really digged into cordova-whitelist-plugin. Finally i fixed my issue on android by setting the correct allow attributes in config.xml

<!-- Allow links to web pages to open in a browser -->
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />

No allow-navigation for android. Perfect white label solution. Couldn't find out how to do this on iOS, because iOS needs allow-navigation attributes to load iframe content at all.

To fix my issues on iOS in a dirty way, i added this to my config.xml:

<platform name="ios">
  <allow-navigation href="https://w.soundcloud.com/player/*"/>
  <allow-navigation href="https://www.youtube.com/embed/*"/>
  <allow-navigation href="https://player.vimeo.com/video/*"/>
</platform>

Now only the iframe content itself is loaded. Lucky me, every link (watch on YouTube, share, like on vimeo...) inside the iframe is pointing to another domain/subdomain so it is blocked on iOS.

If there are any suggestions, how to create a white label solution for iOS, i am all ears.

Thanks

like image 68
iwanuschka Avatar answered Mar 15 '23 04:03

iwanuschka