Web app opens link in Safari instead of inside the existing view - javascript

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

Related

How to open external links in another tab? [duplicate]

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.

Ionic 2 InAppBrowser won't load inserted links

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>

Some links ignoring EventListener

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?

jquery mobile web app external HTML page open in web app browser

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>

popup window not open in jquery mobile

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.

Categories