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>
Related
This question already has answers here:
Open external links in a new tab without jQuery
(4 answers)
Closed 5 years ago.
I use the following code so everything opens in the web app:
<script type="text/javascript">
var a=document.getElementsByTagName("a");
for(var i=0;i<a.length;i++)
{
a[i].onclick=function()
{
window.location=this.getAttribute("href");
return false
}
}
However, even on desktop, links that have target="_blank", still open in the same tab. How can I make all external links open in a new tab, while still keeping all internal links in the same tab. I've found solutions for single links, but I have too many to change by hand.
Note: I'm on apache so a config file change would also work.
If you set the "target" attribute on the links they will open in a new tab:
<script>
var origin=window.location.origin;
var a=document.getElementsByTagName("a");
for(var i=0;i<a.length;i++)
{
var link = a[i];
if(link.href && link.href.indexOf(origin)!=0)
link.setAttribute("target", "_blank");
}
</script>
In WordPress admin you can go to Theme editor and put this code in your footer.
I managed to find an answer from this post.
I just put this in my header:
<script>
// 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);
}
</script>
and all normal links open within the web app, but on mobile and desktop, links with target="_blank" open in a new tab.
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 have added a web app to the Home page.
When I open the app in short cut, its looks is consistent with other native. e.g. the typical Safari tabbar disappear. The url bar is hidden. etc
On the main page, I have a number of tag and links to other pages within the same app. Typically they are something like this
<a class="content" href="/myapp/16270001">
<span class="name" style="word-wrap: break-word;">Test Link </span>
</a>
When I click on the link, it will jump right into Safari and open http://myapp.com/myapp/16270001, instead of opening up in original view.
How can I make the follow the link action remain in the app's View?
Then you add to homescreen web page it became a standalone app. You can check this state is iOS by navigator.standalone flag.
Try 4 years old github gist. I used it and it works.
You can use it by bower:
bower install --save iosweblinks
P.S. My modified script for prevent opening links in Safari in standalone mode:
(function (standalone) {
if (!standalone) {
return;
}
document.addEventListener('click', function (e) {
var element = e.target,
href = '';
while (!/^(a|html)$/i.test(element.nodeName)) {
element = element.parentNode;
}
if (element.getAttribute) {
href = element.getAttribute('href');
if ('' !== href && '#' !== href && null !== href && (!element.protocol || element.protocol !== 'tel:')) {
e.preventDefault();
window.location = element.href;
}
}
}, false);
}(window.navigator.standalone));
I've a problem with the JavaFX Webview and Javascript. Within the Webview I try to load some html content dynamicaly into a div when the User clicks a button with an a href. Every time I do this within the Webview, it loads the refering page directly, without loading it into the div.
In Firefox, Chrome and with Apache Server it's working properly, so it's loaded into the div container.
Here's the code to load the various content:
$(document).ready(function()
{
$(".panel-body a").click(function stopDefault(event)
{ if (event && event.preventDefault) {
event.preventDefault();
var pageToLoad = $(this).attr("href");
$("#content").load(pageToLoad);
} else if (window.event && window.event.returnValue)
{ window.event.returnValue = false;
}
});
});
The script is with the if else already prepared for standard conform browsers and IE.
I also tried it (in the beginning) with return false; but this was also not working. So, the default action is not prevented / disabled. And I don't have any more idea why this is just not working in JavaFX Webview.
Thanks in advice!
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.