In a simple Ionic app I have a plain web view with some embedded videos. These embedded videos are included with an oEmbed iframe. Video works fine, but almost every video provider has a link to watch the video on the provider's page. For example Youtube always has a button 'watch on Youtube'.
When my users (accidentally) click that link, the whole Cordova web view is taken over by the linked URL. Instead of my app it shows the Youtube video. Then the user never gets to go back to my app, except by closing and opening the app.
I've tried to:
Prevent navigation by watching $locationChangeStart, that doesn't work as it doesn't fire for external URLs (like Youtube's).
Prevent navigation by using window.onbeforeupload, but that doesn't suffice as it doesn't guarantee the user navigates away and it presents an ugly confirmation popup.
Any other ideas on how to prevent navigation to external URLs from an Ionic/Cordova app would be highly appreciated.
You should provide more info, how do you insert the videos? some code?
I don't use videos, but I had a similar problem with google maps, if the user clicks the legal link, the page nativate to the google legal page and the user can't go back.
To fix this, I installed inAppBrowser plugin and used this code to open the legal page inside the inAppBrowser window
$('#map_canvas').on('click', 'a', function(e){
e.preventDefault();//you prevent the default click
window.open($(this).attr('href'), '_blank');//you open the link on the inAppBrowser window
});
So you should inspect the video to see if you can do something like this, preventing the link click and opening it on the inAppBrowser plugin
You will have this problems using externa players, a possibel solution would be to host the videos on your server and use some jquery/angular video player.
insert
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
in your index.html. So when you open a link,it'll use your device browser.You can come back from the device browser to your application with android back button.
You should probably give your url's like this
var ref = window.open('https://www.******.com/', '_system', 'location=yes');
Related
How to implement the google tag manager in react project. I already pasted the script code on index.html and code in the body tag.
And it also working am getting API hits on the network console.
note: I don't have any App.js in my project.
enter image description here
But I need to know is enough or not.
if I move to any other page by clicking the link on the home page GTM API is not in the network console?
How to check it's working on all pages?
Inspect the web page
Go to the console tab
type: "dataLayer", if this property exists, then GTM is set correctly. You just need to create the tags and triggers in GTM to track the events that you need
I'm building a web app with Stripe checkout. On desktop it loads a nice modal when you go to pay, but on mobile it brings the users off to a Stripe page, and then back. I want it to look like the user is never leaving our site.
Is there a way to force the modal to be loaded on mobile? I'm building the web app in ionic at the same time, so if I want to turn it in to an app I can. Ionic uses a WebView on the phone and that loads the modal fine, so there must be some setting that is allowing it?
Anyone have any ideas? Thanks.
edit If I 'request desktop site' on my mobile it loads the modal fine
As Stripe makes these determinations based on the User-Agent you could try changing the User-Agent of your webview to match that of a desktop browser, (I did a similar thing except I needed to force mobile behavior in the desktop).
It should be stated, that this is definitely not recommended by Stripe nor supported and could break at any time. They'd recommend you just build a custom form using Stripe.js
How i can set User Agent in Cordova App has how to set the User-Agent in iOS and Android.
I am working on integrating twitter Widget in a tab of a Cordova application. I am using Cordova with Angularjs and ionic Framework.
I have obtained the API key needed in order to instantiate the widget and after a few attempts I got it. I attach one image (twitter in tab)
In order to do that, I create a tab, put the javascript in the main .html file and the link. So far, ok:
<a class="twitter-timeline" href="https://twitter.com/hashtag/mwc2015" data-widget-id="XXXXXXXXXXXXX"></a>;
But, the "show" begins when the user clicks on the twitter widget.
If you want to retweet, tweet something or whatever, twitter widget opens a new page, pop up, which is placed on top of cordova app, and then, user can not go back.
Device Back button doesn't work.
You can register and send a tweet, but always this new window is on top.
I attach an image to show what the user see in the screen when any button is clicked. twitter on top
So, you should kill Cordova app and start again.
I was wondering if someone knows how integrate the widget and the "children " pages of them , or if a javascript alternative to change target parameter of all links inside widget.js in order to open new windows inside the app.
Thank you so much.
I have experienced the same issue with Instagram, but I hope it can help as well. First of all, please install cordova InAppBrowser plugin.
cordova plugin add cordova-plugin-inappbrowser
Then try to modify your config.xml file with following, adding it before platforms tag:
<allow-navigation href="about:*" />
I am trying to integrate my app into kik, but for a specific action I fall in an error page that says:
Oops, couldn't load. Please try again later.
This panel looks like a kik panel with my app logo at the top
But everything is OK, If I try my app in Chrome with Kik plugin it works well. In fact my app creates an iframe and load it then we use postMessage to communicate between parent and iframe. I put some logs and it seems that everything is OK. Iframe is loaded and send message to parent with postmessage. But when I am in kik, the 'couldn't load' message appears and stops my app.
Does someone know what cause this panel to appear?
I had the exact same problem.
The problem is the combination of loading an iframe after doing browser history manipulation. Since there is no back button in Kik you can just do the page updates without updating the browser history and this will solve your problem.
I use this line to detect Kik and, if detected, ignore browser history updates:
if (!kik.enabled) {
//We are not running in Kik so we can do browser history manipulation here
}
Websites in the Kik browser must be single-page applications. The error screen shows up when the website either fails to load or tries to navigate elsewhere.
Is your website doing any navigation? Also, is there a place where we could take a look at the code?
I have a tab with an iframe external web page that loads... I would love a hyperlink inside that web page to link one of my photo albums in "theater" mode so you don't leave the page. However, any link I program inside that web page just brings in that photo album inside (not popped up and not in theater mode no matter if I have the &theater in the url).
Can I get some help on how to do this? Thanks!
this is a limitation of iframes in general. Less of a limitation and more of a security issue. As you said.. the iframe loads and external page - a page that could essentially come from anywhere. To protect the integrity of the site displaying this external page, the iframe can not access the page that contains it.
You might want to try opening a new window using javascript :
window.open ("{path_to_image}","title","menubar=1,resizable=1,width=350,height=250");
as you can see there are several options that you can set to customize the popup window.
Here is another link with some info about iframes