IFrame Issues

Hello everyone!

I have a quick question. I’m using Disqus and an embeddable YouTube player, both using IFrames, and am having issues with links as when you click the link it will “hijack” the main app and actually go to that link providing no way to return to the app (on iOS, not sure about Android). This is a major issue as the user has to “force quit” the app and then reopen the app.

I’ve done quite a bit of research on this and came across the following forum post: External link in iframe opens in webview (embed youtube player) which is essentially the issue I’m having. One person mentions to use jQuery to essentially open the link in a “_system” browser and not use the “app.” Their solution is:

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

This solution works partially as the IFrame does open in the system browser, but the app still takes into account that you pressed/clicked on the button. So in this case, I believe that the e.preventDefault(); is not working as it should and hence the IFrame is still getting the click request.

So, that leads me to a few questions. Is there a way to prevent IFrame links from “hijacking” the app deeming it unusable? Is jQuery the right approach, or is there a better way to do it?


Bumping to the top as I’ve been trying to figure this out for quite some time.

Thanks to anyone that can give me a helping hand sort this mess out!

Do you need to use an iframe? I’ve put a video player inside an ion-card before. I haven’t read your link, but my first instinct would be to try to ditch the old-school desktop browser iframe technology in favor of something intended to look good on a native browser.

Well, I’m not sure how else I would embed a YouTube video without an IFrame. Do you know how you went about the embedding?

What control do you have over the Disqus stream? Is it already rendered and you have to participate, or do you have the raw data and you can render it however you want?

So I have two things going on: the Disqus chat, and the YouTube video.

For the Disqus chat - Disqus does not let developers do much customizing to how it is displayed; and they make you use a IFrame to display their chat. Eventually I will write my own chat system, but I’m trying to speed up launch by doing a scenario like this.

Secondly - for YouTube - by using the YouTube embed, you can hit some of the buttons that will take you to the YouTube site, or Facebook or Twitter to share. What should happen is the links open in a system browser or InAppBrowser.

Thanks for your help!

Even on a smart phone? If so, they’re asking to be outcompeted by someone who offers more native-friendly functionality. Also, what’s the reason you aren’t using the Ionic Native Youtube player?

If I understand correctly, you don’t have to use Disqus, you just want to. But there are a ton of free tutorials and repos that provide basic chat functionality in Ionic. Did you Google “Chat Ionic” and decided you didn’t like any of them? They all have weaknesses, but they’re intended for Ionic, while Disqus is not.

You can probably tell that I think using iframes on a device is to be avoided if possible.

1 Like

Good response!

Also, what’s the reason you aren’t using the Ionic Native Youtube player?

I didn’t realize there was a native player.

In addition, I was wanting to use Disqus because that is what we are currently using on our site and it is temporary as we continue to develop our platform. It’s good for short term, but our end goal was to have our own chat system in the near future - so that’s going to have to come sooner than later I believe.

You can probably tell that I think using iframes on a device is to be avoided if possible.

I totally agree. I know there are better ways to accomplish what I am doing, and that is why I’m trying to explore through the forums – so thanks for your responses! I greatly appreciate them!

I have loaded the website into the iframe in the ionic application .My Iframe is loading properly but when the application starts for the first time it always loads the login screen of the website. And when I am trying to login that screen then it stucks on that page.
Secondly, when I close the app and run it again everything works fine. there is not any error coming in that case.
I didn’t understand what to do in that case?