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

ionic-v1
1

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).

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

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 sandbox attribute in the iframe is not an option because it breaks youtube player completely.

Thanks and cheers

2 Likes
2

Hi Iwan,

Found an answer to your problem?
I have the exact same problem and can’t figure out how to have the link open in the system browswer.
i tried adding the ‘modest branding’ parameter to the url:
https://developers.google.com/youtube/player_parameters
But that does not seem to work in an iFrame.

3

Not sure if this will help you or not, but here’s how I was able to overcome this issue.
Warning, we’re using jQuery which isn’t always accepted, but we needed it for one of our other plugins.

Here it is in its simplest fashion:

This of course won’t work for other onclick events, but will (at least in our experience) resolve the issue where the webview gets taken over.

4

can’t see any solution, can you post again?

5

Sorry, must have gotten yoinked out, trying again.
<iframe sandbox="allow-scripts allow-top-navigation allow-pointer-lock allow-same-origin allow-popups" onload="$(this).contents().find('a').on('click', function(e) {e.preventDefault(); var url = e.target.href; window.open(url, '_system', 'location=yes'); });"></iframe>

6

Sorry for being so late in replying.
Because of cross-domain-security issues we can’t use JS (from our domain/app) to manipulate iframe content or it’s events (youtube or anything else from another domain). So this solution won’t work for us.
But thanks

7

I ended up having to write a plugin to manage this issue anyway, it should work out of the box for iOS but you should fork it and modify the .java for Android to capture the specific links you need to manage.

https://github.com/slaptoast/cordova-plugin-openblank

8

there is a discussion also on Stackoverflow, where kind of a solution is provided