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.
Related
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));
This question already has answers here:
How to disconnect JavaScript popup from opener
(2 answers)
Closed 6 years ago.
I show the links of different websites in my Page which when clicked, pops a new window.
All are working fine except one which creates trouble for me. say,when I click the link( eg, hyperlink for www.example.com), a new window pops out and when I press a HTML link from that page, the pop-up closes and the Parent window is loaded with that website( www.example.com ).
They have something in their code like
window.opener.location.href = "www.example.com";
this.window.close();
Is there any way by which we can prevent the child window from overriding the parent window?I don't want to use "onbeforeunload" because I don't want to pop an alert in the page.
Adding the Code snippet
<script type="text/javascript">
window.name = "parentWin";
var manipulate = document.referrer != null && (document.referrer.indexOf('upd.caqh.org') > -1);
if (window.opener != null && manipulate) {
if (window.opener.opener != null) {
window.opener.opener = null;
}
window.opener.location.href = "/OAS/Default.aspx?DCS_Relogon=1";
window.opener = null;
this.window.close();
}
</script>
Will you please provide a brief code?
As i know window.open()can use from the destination window to return details of the source (parent) window.
this.window.close();
Here, you might be referring to the class or id of page, which might be resulting in closing that page..
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>
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.