I have implemented a script to prevent the link in my mobile app on my ipad.
It works fine but I have problem now with the popup I have with jquery mobile.
The problem is when I use this script, the popup window doesn´t open anymore.
What can I do to open the popup window?
The script:
(function(document,navigator,standalone) {
// prevents links from apps from oppening in mobile safari
// this javascript must be the first script in your <head>
if ((standalone in navigator) && navigator[standalone]) {
var curnode, location=document.location, stop=/^(a|html)$/i;
document.addEventListener('click', function(e) {
curnode=e.target;
while (!(stop).test(curnode.nodeName)) {
curnode=curnode.parentNode;
}
// Condidions to do this only on links to your own app
// if you want all links, use if('href' in curnode) instead.
if('href' in curnode && ( curnode.href.indexOf('http') ||
~curnode.href.indexOf(location.host) ) ) {
e.preventDefault();
location.href = curnode.href;
}
},false);
}
})(document,window.navigator,'standalone');
In this case, you need to open it programmatically.
$('#popupID').popup('open');
Solved it...
what i have done:
instad to use the script i have write above, i only use this code in the .
<a onclick="parent.location='root/example.html'" id="ex"></a>
this allows me when i see my app in the fullscreen mode.. to navigate between the pages without to open it in the browser, the page loaded in my app.
Related
Searching everywhere for an answer. My app has links that are inserted dynamically inserted when loading the content from AJAX.
I want all links that the user clicks on to open in the InAppBrowser or the System Browser. However, everything is opening in the web view.
I've tried numerous things.
gap:// is in the content policy
URLs are properly encoded
Made a window.open = (url, target?, opts?) => this.iab.create(encodeURI(url), '_blank', 'location=yes,hidden=no'); in the app.component.ts
My other code works where clicking a link opens the InAppBrowser correctly, but this doesn't seem to work on regular links <a href
Everyone seems to have some sort of issue with InAppBrowser, what is the definitive way to do this!?
I do a work around like below
Please ensure InAppBrowser plugin added
Add code for component to handleClick event
On the view, I add and click event for dynamic content
handleClick(event) {
if(this.platform.is('core'))
return;
if (event.target.tagName == "A") {
event.preventDefault();
event.stopPropagation();
// open link using inappbrowser
var url = event.target.getAttribute('href');
console.log(url);
this.platform.ready().then(() => {
let browser = new InAppBrowser(url, '_blank');
browser.show();
});
}
}
<p (click)="handleClick($event)" [innerHTML]="item.content">></p>
I have an Android app that is interfacing with a website (that I have no control of) and I'm able to do that by loading different Javascript or jQuery scripts to my WebView. One of my tasks is for my app to detect when a dialog in the website is displayed and closed. So far I've been able to detect if the dialog has been displayed through this script (works for both Desktop and Mobile mode):
$(".ui-link").click(function() {
Android.dialogOpened(); // function in my Android app
});
And detect if the dialog was closed by pressing the X button of the dialog through this script (works for both Desktop and Mobile mode):
$(".ui-btn-left.ui-btn.ui-shadow.ui-btn-corner-all.ui-btn-icon-notext.ui-btn-up-f").on("tap", function() {
Android.xBtnClicked();
});
By messing around with the Console in my PC (Desktop mode only), I've also been able to detect when the dialog is closed by clicking outside the dialog.
// popupDialog-screen is the ID of the space outside the dialog
$("#popupDialog-screen").click(function(){
alert('clicked outside'); // or the Android function
});
But when I try to use my mobile device (or by changing to Mobile mode in the Console), the script above does not work! I've also tried using various other scripts using different classes or divs, also tried using .on('tap') instead of click, and many other methods, but none of them have worked so far .
This is my first time ever using Javascript and jQuery so I don't understand much of the code of the website. If it helps, I saw that it uses Tapestry, and I saw the code to display the popup, but did not see where it is closed. Below is the code I found (I did not make this):
// dialoglink.js
(function( $ ) {
T5.extendInitializers(function(){
var bindElements = [];
function init(spec) {
var elementId = specs.triggerId;
if ( $.inArray(elementId, bindElements) === -1 ) {
bindElements.push(elementId);
$('#' + elementId).click(function(e) {
e.preventDefault();
jQuery('#' + spec.dialogId).popup('open');
return false;
});
}
}
return {
dialogLink : init
};
});
}) ( jQuery );
What do you think is the problem? I've been at this for hours. Thanks!
Finally got it to work!
Searched about popups in jQuery mobile and used the afterclose event.
Here is the working script:
$('#popupDialog').popup({
afterclose: function( event, ui ) {alert('CLOSED')}
});
Source: http://api.jquerymobile.com/popup/#event-afterclose
Update
User Quentin helped me solve it. The lightbox had a event.stopPropagation(); in the function which prevented the eventlistener from bubbling up. After removing it the links worked properly.
I used this comment with honyovk's addition to replace the stopPropagation with a more elegant function: https://stackoverflow.com/a/1089622/3461722
Question
I have a webapp for iOS in which I use an EventListener to prevent links from opening in Safari. This works flawless for 99% of the links, but a few specific links still open in Safari for some reason unknown to me.
This is my Javascript:
// Mobile Safari in standalone mode
if(("standalone" in window.navigator) && window.navigator.standalone){
// If you want to prevent remote links in standalone web apps opening Mobile Safari, change 'remotes' to true
var noddy, remotes = false;
document.addEventListener('click', function(event) {
noddy = event.target;
// Bubble up until we hit link or top HTML element. Warning: BODY element is not compulsory so better to stop on HTML
while(noddy.nodeName !== "A" && noddy.nodeName !== "HTML") {
noddy = noddy.parentNode;
}
if('href' in noddy && noddy.href.indexOf('http') !== -1 && (noddy.href.indexOf(document.location.host) !== -1 || remotes))
{
event.preventDefault();
document.location.href = noddy.href;
}
},false);
}
The links that fail to open in the webapp are nothing special, and other links on the page work without problem. An example of a not properly working link:
Buy
This link is opened in a lightbox, but on other pages I have similar links also in a lightbox and they work fine. I have several popups with roughly the same link, only the "green" is different and some have an extra "&time=1", they all fail to open in the webapp.
Is there someone who can find fault with this code?
I created a jquery mobile web app and on one of the buttons it links to an .HTML file. When I add the web app to my home screen and tap that button it opens the .HTML page in safari instead of staying within the app. I did some research online and came across this file but I still can't get it to work. Any ideas how to address this?
https://github.com/mrmoses/jQuery.stayInWebApp
Here's what I use...applies to all anchors. To make a long story short, it's disabling each anchors default behaviour, grabbing the clicked anchor's href, and then using js to open the link within the web-app. Applied to mobile devices only.
<script>
$(function() {
// prevent anchor links from opening in safari, web-app fix
if (("standalone" in window.navigator) && window.navigator.standalone) {
// For iOS Apps
$('a').on('touchend click', function (e) {
e.preventDefault(); return false;
var new_location = $(this).attr('href');
if (new_location != undefined && new_location.substr(0, 1) != '#' && $(this).attr('data-method') == undefined) {
window.location = new_location;
}
});
}
});
</script>
The title has it all: My page runs in full screen mode (cf. using an icon on the springboard); When I click a link to an external page, I would like to have it open in the normal safari application, not the full screen instance.
How can this be done?
I expected window.open('url', '_blank') to do the trick, but it doesnt.
Thanks!
Edit: code snippet:
$('#gotoWebsitePlaceholder').selectable({
start: function(){
window.open('http://www. ... .com', "_blank");
}
}).hide();
Are you using an anchor tag? My experience is that the default action is to open the href target in the Safari app. I.E., if I didn't cancel the default action via javascript, my app would shift out of the FS app. Can you post a code snippet?
I have discovered that Safari will remain in fullScreen when executing window.open(myURL) or this.location = myURL. However if your url is called using click it will exit fullScreen mode.
I solved with this piece of js (tested in ipad with iOS 5.1.1):
jQuery(document).ready(function ($) {
$('a').click(function() {
if (($(this).attr("target")!="_blank")){
window.location = $(this).attr('href');
return false;
}
});
So only the links with target="_blank" will open in safari.