I am using a jS code to redirect all outbound links to the redirect page (which contains ads for me to monetize). It works quite well. But it doesn't work when the user chooses to open the link in a new tab.
Is there a way to fix it?
This is my code:
<script type='text/javascript'>
jQuery(document).ready(function () {
jQuery('a[href*="http://"]:not([href*="http://example.com"])').click(function (e) {
e.preventDefault();
var target = e.target || e.srcElement;
if ($(target).attr('target') == "_blank") {
window.open("http://example.com/redirect.html?url=" + $(target).attr('href'), '_blank');
} else {
window.location = "http://example.com/redirect.html?url=" + $(target).attr('href');
}
});
});
</script>
One option is to just go ahead and replace the actual link hrefs on page load, using a simple script like the one below. One added benefit of this is that it's a bit more honest/transparent to let the user know they're being redirected through a different site.
const links = document.querySelectorAll('a:not([href*="https://example.com"])');
for (let link of links) {
link.href = `https://example.com/?ref=${link.href}`
}
Google
Yahoo
Internal
Related
To avoid duplicating web pages, I am looking for a way to change the link in a button according to the relative link of the page.
Let's imagine that we are on the site https://mywebsite.com/ and we want to send users to https://othersite.com/ (These websites are given as examples
Here is what I would like to do:
If the current link is https://mywebsite.com/ then the button should offer this link https//othersite.com/
If the current link is https://mywebsite.com/?utm_source=facebook then the same button must propose this link https://othersite.com/?value=facebook
If the current link is https://mywebsite.com/?utm_source=twitter then the same button must propose this link https://othersite.com/?value=twitter
etc
In short, I'm looking for a way to vary the link of a button in an href attribute depending on the current link of the page.
I'm just starting in javascript. I'm far from understanding all the subtleties of this language.
Here is what I tried but it (obviously) doesn't work:
<html>
<head></head>
<body>
<a href="javascript:location.assign" >Click here</a>
<script>
if (location.pathname === "/") {
location.assign("https//othersite.com/");
}
if (location.pathname === "/?utm_source=facebook") {
location.assign("https://othersite.com/?value=facebook");
}
if (location.pathname === "/?utm_source=twitter") {
location.assign("https://othersite.com/?value=twitter");
}
</script>
</body>
</html>
Here are also resources that I think are useful but I can't apply to my problem:
Change href based on condition of URL on current page
How to change href of <a> tag on button click through javascript
Change part of link with part of current URL
Thanks for your help and your time!
Use getElementById and set the href instead... The Solution below works.
<html>
<head></head>
<body>
Click here
<script>
var link = document.getElementById('link')
if (location.pathname === "/") {
link.href = "https//othersite.com/";
}
if (location.pathname === "/?utm_source=facebook") {
link.href = "https://othersite.com/?value=facebook";
}
if (location.pathname === "/?utm_source=twitter") {
link.href = "https://othersite.com/?value=twitter";
}
</script>
</body>
</html>
You do not access the link with your code
Here is code that will work better. I use a lookup table
Note the code below is not actually allowed to open the link here at SO but will work on your server
const locations = {
"/js": "https://meta.stackoverflow.com/questions/5234/how-does-accepting-an-answer-work",
"/": "https//othersite.com/",
"/?utm_source=facebook": "https://othersite.com/?value=facebook",
"/?utm_source=twitter": "https://othersite.com/?value=twitter"
}
window.addEventListener("DOMContentLoaded", function() { // elements are available
document.getElementById("link").addEventListener("click", function(e) {
console.log(location.pathname,locations[location.pathname])
const loc = locations[location.pathname]
if (loc) this.href = loc;
})
})
Click here
I'm building a photography portfolio website on Wordpress using this theme: http://wpshower.com/themes/expositio/ . The theme hasn't been updated in years but still works smoothly. I have an issue with assigning target="_blank" to some external links though. The option is there but it has no effect whatsoever.
I've looked for advice and have tried every available plugin that addresses the problem, with the best result being opening the external link in both a new tab and the current tab.
I've looked into all the theme files, they are not many, and thinking that this is a javascript issue, I have identified the following code. It deals with the mobile menu animations but it's the only mention of links.
It was also discussed in a similar thread in here: Wordpress navbar links using href="#" not working as a dummy link
$('a').on('click', function(e) {
e.preventDefault();
var _this = $(this);
// close mobile menu if it's open, redirect otherwise
if (_body.hasClass('toggled-on') && _this.parents('#page').length == 1
&& _this.parents('#primary-navigation').length == 0
) {
load_effect.menuOff();
} else {
load_effect.loader.show();
var href = $(this).attr('href');
$('.site').css('opacity', 0);
setTimeout(function() {
window.location = href;
}, load_effect.duration);
}
Finally, here is website using the same theme where the external links do open in a new tab: http://www.tokyogoodidea.com/
I'd be grateful for any advice on solving this little glitch. I'm not good at all with js and don't know what to change.
Here's my project's link: http://one.clrblnd.com/
Thanks in advance.
There seems to be no reliable way to open a new tab in Javascript (a quick search tells it could be tricky), and the code indeeed looks like it is blocking a new page being opened. You can probably try if this works.
Firstly after this line
var href = $(this).attr('href');
add another line that says (this line gets the value of target attribute/properties from the tag, and assumed to be _self if undefined)
var target = $(this).prop('target') || '_self';
Then look for this line
$('.site').css('opacity', 0);
What it does is to make the whole page blank essentially. You may want to do something with this, for example wrap it in a if statement so it doesn't execute when target="_blank". A quick way to fix it is by replacing it to
target === '_blank' || $('.site').css('opacity', 0);
Next replace (just a few lines after the previous one)
window.location = href;
with
window.open(href, target)
The respective block should look like
load_effect.loader.show();
var href = $(this).attr('href');
var target = $(this).prop('target') || '_self';
target === '_blank' || $('.site').css('opacity', 0);
setTimeout(function() {
window.open(href, target)
}, load_effect.duration);
This is asuming window.open works as expected (documentation is here). What happens in the code is that the author stopped the default behavior after clicking a link with
e.preventDefault();
in order to allow some fancy animation to complete before the browser proceeds to load the intended page. However by simplifying the page load with
window.location = href;
it ignores the target attribute/property of the respective <a /> tag.
I've got the following js (in a .net web page) that is triggered when the site visitor selects an option from a dropdown list / select. The result is that a link is opened eg. a pdf, using the value attribute of the dropdownlist / select for the url.
$(function () {
// bind change event to select
// bind change event to select
$('#mjdownload').on('change', function () {
var url = $(this).val(); // get selected value
if (url) { // require a URL
window.location = url; // redirect
}
return false;
});
});
This works fine in firefox and chrome and win 8 with latest version of IE. However, IE 8 on win 7 doesn't result in anything happening (eg it doesn't open the pdf).
Have you tried appending ".href"? Like so window.location.href = url Had same problem in the past, IE is weird about such things sometimes :S
I think this is sort of what you are trying to do?
$(document).ready(function() {
$("a").on("click", function(event){
event.preventDefault();
var pdf = $(this).attr("href");
alert(pdf);
if (pdf == "something.pdf") { // require a URL
// window.location.href = "http://google.com";
alert("start redirect");
}
});
});
http://jsfiddle.net/fMeTj/5/
Users can share files from our app via twitter. The tweet includes a URL that points at our server, which detects whether the user is on a mobile device and redirects to a URL using our app's custom scheme so that the link opens in our app.
This works fine for desktop users, and for mobile users who have our app installed; but it doesn't work for mobile users who don't. So what we'd like to do instead is to show all users a page that contains a link which, when pressed, will open the app with the custom URL scheme if it is supported, and open a different URL where the user can download our app if not.
So what I'm looking for is an answer in HTML or JS that looks a bit like this:
<a href="ourapp://www.ourdomain.com/files/12345"
fallbackhref="http://www.ourdomain.com/buyourapp">Click to download</a>
Is that possible? If so, how do we do it?
You can achieve this in Android using the following piece of code :
function openLink () {
var appWindow = window.open("ourapp://www.ourdomain.com/files/12345","_blank");
setTimeout( function () {if (appWindow) {
appWindow.location ="http://www.ourdomain.com/buyourapp";
}
},1000);
}
Call the openLink() function on click of a link (else the browser will block the new window as popup).
iOS would differ because of the way it handles custom schemes.
For iOS you need to do the following :
Create 2 HTML files with the following code snippets
File #1 : This is your link to open the app/ fallback to website
<script type="text/javascript">
function openLink (url,customURI) {
window.open("file2.html?lp="+url+"&customURI="+customURI,"_blank");
}
</script>
<img src="IMAGE SOURCE" onclick="openLink('LANDING PAGE','CUSTOM URI')">
File #2 :
<html>
<script>
function openApp () {
var start, end, elapsed;
var params = window.location.href.split("lp=")[1];
var url = params.split("&customURI=")[0];
var customURI = params.split("&customURI=")[1];
var time = (new Date()).getTime();
document.location = customURI+url;
setTimeout(function(){
var now = (new Date()).getTime();
if((now - time)<2550) {
javascript: console.log(new Date().getTime());
document.location = url;
}
else{
window.open('', '_self', '');
window.close();
}
}, 2000);
}
</script>
<body onload="openApp()">
<a onclick="openApp()" id="newButton">Click Here to open the App</a>
</body>
Hope this helps :)
I have a web page with a jQuery lightbox that opens automatically on page load. In the lightbox I have implemented the Facebook Like button (this is a 2 click solution for Facebook Like button in email). Now, when a Facebook user visits my web page by clicking on the "Liked" URL on Facebook I want to turn off the lightbox. I don't want to have to create two different pages (one with lightbox turned on and another turned off) and I think I can avoid this by adding a parameter to the URL with Javascript then turn the lightbox on/off based on that parameter. Is this a safe way to do this? How would I do this?
You can get URL params with this JS function that I found here:
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
Then *add use ?lightbox=1 e.g www.example.com?lightbox=1 and read it with the above function:
if(getUrlVars()["lightbox"]=="1"){
//...
}
*to add parameters you can either:
Change the a link href attribute element.href = "http://www.newURL.com?param=1"; and wait for the user to click them
Redirect to the new location window.location.href = "http://www.newURL.com?param=1";
I believe this is the rough code you're after:
<script type="text/javascript">
document.location="http://example.com/index.php?noLightBox=1";
</script>
Then on index.php, you'd want something such as:
<?php
function isset_or(&$check, $alternate = NULL)
{
return (isset($check)) ? (empty($check) ? $alternate : $check) : $alternate;
}
function getGETPOST($var)
{
return isset_or($_GET[$var],isset_or($_POST[$var],"Empty"));
}
?>
Example:
if(getGETPOST('noLightBox') != 1) {
// Code to display the light box comes here.
}
// Else normal page code
Hope this was helpful!
Source: http://php.net/manual/en/function.isset.php
& W3School's tutorials on PHP