I am currently working on an affiliate website. I have made a script in jQuery that shows the sales page (without affiliate link) when hovering, but when you click on it, it adds my affiliate link to the beginning of the link. Then my network redirects them to the desired page.
EDIT: To clarify, I want to say that I am talking about hovering over links
Now, if you right click on it, a menu opens, and you can click "Copy link". This copies the "xxx" in:
Example
Which is without my affiliate link. How do I make the "Copy link" button copy another link than the href in the a tag? Is it even possible?
Right now I avoid it completely by having this in the beginning of my code:
.on("click contextmenu", function(){};
To give you an example of the current code, it works by listening to clicks on a tags with a specific class, then it checks if the href in the a tag contains some text, if it contains that text, it does this:
window.location.href = affiliatelink + link;
If it doesn't, it does this (if I don't have an affiliate link for that product):
window.location.href = link;
So, is my problem possible to solve - or do I have to do it, like I am doing it?
EDIT 2: I have to provide my code
$(document).ready(function(){
$(".class").on("click contextmenu", function(){
var link = this.href;
var partner = "https://affiliatelink.com/?url=";
if(link.indexOf("partnername") != -1){
window.location.href = partner + link;
} else {
window.location.href = link;
}
});});
Assuming I'm understanding your question correctly, it might be possible to solve if you change when you're appending your affiliate code to links.
The "copy link address" context menu shortcut is going to copy whatever is in the href attribute of a link tag. So, what if you set that attribute's value to your affiliate link + the original link's text? You would no longer need to do it in a click handler; it would "just work" and would support both cases.
Something like this might do the trick:
var links = [].slice.call(document.querySelector('.your-class'));
links.forEach(function(link){
link.href = affiliateLink + link.href;
});
You'd no longer need your click handler, and it supports both cases of interacting with links.
EDIT: Updated with your code sample.
$(document).ready(function(){
$(".class").each(function(){
var link = this.href;
var partner = "https://affiliatelink.com/?url=";
if(link.indexOf("partnername") != -1){
this.href = partner + link;
}
});});
Related
I'm cloaking a referal link so I'm using an onClick function to open a new tab navigating to the linked website.
However, I still want to display the url when the user hovers over the hyperlink text.
So if the referal link is: www.somelink.com/long_ref_code then I would like to display only www.somelink.com when the user hovers over the a element.
How do I achieve this?
Code:
function navigate(newtab){
var a = document.createElement('a');
a.href = "http://www.somesite.com/some_long_referal_code";
if (newTab) {
a.setAttribute('target', '_blank');
}
a.click();
}
And the element is:
<a onClick="navigate();">Some hyperlink text</a>
You can use preventDefault to change the default action.
For example, here is an a element that opens it on the same tab (compatible with StackOverflow snippets). As you see, the URL when hovering says https://google.com, but the actual link it sends you to is https://mozilla.org
document.querySelector("a").addEventListener("click", event => {
event.preventDefault();
window.location.assign("http://www.mozilla.org");
})
Google
I have a question about the new tab for the link.
Is there anyway I can set the browser tab title before user clicks a link? It seems like there is no way to debate the title for the new tab if the html contained in the new tab doesn't have title attribute. Am I right? How do I set the title?
//the href is dynamic so I can't set them one by one because I have 100+ html file here
<a href="test.html" target="_blank">open me<a>
As you have it, this is not possible because your links are just normal HTML links. When the new page opens in a new tab, the current page will not have any reference to it and so cannot change it in any way. You will need to open the page using javascript and set the title that way.
You can dynamically set this up in window onload to find all a tags and add a click event whihc opens the window and sets the title.
If you want different titles for each page, you can store this in a data- attribute in the a tag.
Note tho that this will only work with pages in the same domain (for security), and that it does not handle people right clicking and pressing "Open in New Window". Middle click in Windows does seem to work however.
HTML
open me
JavaScript
window.addEventListener("load", function() {
// does the actual opening
function openWindow(event) {
event = event || window.event;
// find the url and title to set
var href = this.getAttribute("href");
var newTitle = this.getAttribute("data-title");
// or if you work the title out some other way...
// var newTitle = "Some constant string";
// open the window
var newWin = window.open(href, "_blank");
// add a load listener to the window so that the title gets changed on page load
newWin.addEventListener("load", function() {
newWin.document.title = newTitle;
});
// stop the default `a` link or you will get 2 new windows!
event.returnValue = false;
}
// find all a tags opening in a new window
var links = document.querySelectorAll("a[target=_blank][data-title]");
// or this if you don't want to store custom titles with each link
//var links = document.querySelectorAll("a[target=_blank]");
// add a click event for each so we can do our own thing
for(var i = 0; i < links.length; i++) {
links[i].addEventListener("click", openWindow.bind(links[i]));
}
});
Sample JsFiddle
You can pass the title with hash and get it on another page, if this another page is yours and you can modify its code.
1st page:
...
<a href="test.html#the_title_you_want" target="_blank">open me<a>
...
2nd page - modify the body opening tag like this:
<body onload="document.title=window.location.hash.replace('#','');">
If the page you are linking to isn't yours, you can use window.open method:
open me
I have not seen addEventListener work reliably, especially when opening a new page using javascript. The best way to change the tab title and have it work reliably is to set a timeout until the page loads. You may have to play with the timeout value, but it works.
var newWindow = window.open(url, '_blank');
setTimeout(function () {
newWindow.document.title = "My Tab Name";
}, 100);
You have two options. Using pure HTML, you can let the user open up links, then later on change the title. Or you can change the title with inline JavaScript. Here's how you do both:
Method 1
Change your links by assigning a target attribute, and then later on use that window name to control the document. For instance in your links it would be: <a href="whatever" target="theNewWindow">. Whenever you want to change the title for this page, you'd use JavaScript as such: window.open("", "theNewWindow").document.title = "New Page Title!"; The problem with this method however is that all links with that target/window name will open in that same window. In addition, after the first time the link is clicked, your browser won't automatically switch to the new tab/window.
Method 2
Change your links by assigning an onclick attribute, which would open the link manually and change the title of the page immediately. Basically it would come down to look like: <a href="whatever" onclick="var w=window.open(this.href, '_blank'); (w.onload=function(){w.document.title='New Page Title!';})(); return false;">. This opens the window based on the href attribute, immediately changes the title, and sets the window to change the title to that when it finishes loading (just in case there really was a title tag).
The problem with both of these methods (as mentioned by others) is your html files have to be on the same domain.
The simplest way is a follows:
var winTab = window.open("", "_blank")
//Open URL by writing iframe with given URL
winTab.document.write("write iframe with your url in src here")
//Set Title for the new tab
winTab.document.title = "Form Title"
You could make your own Page 2 that opens up the other pages (the ones you can't edit), in a frameset. You can then either change the title dynamically when loading your page 2, or as others have suggested if you use window.open you can control the title from the parent page.
If you are in page 1, and opening page 2 in a new tab, you can't set title for page 2 from page 1.
If you have access to page 2 then it's possible, otherwise not.
Table contain digital values, each cell has each own href.
If I'm apply hrefs like this:
nTd.click(function(e){
$(this).css("font-weight","bold");
e.stopPropagation();
location.href = 'http://google.com';
});
Each click on cell redirect window, I can't open new tab by "ctrl + click".
If I would add in TD something like ' 123123 ', then sorting through digital values would breaks, into lexicographical order.
Make a check to see whether the CTRL key was down when the event occured:
nTd.click(function(e){
$(this).css("font-weight","bold");
e.stopPropagation();
if(e.originalEvent.ctrlKey){
window.open("http://www.google.com", "_blank");
} else {
location.href = 'http://google.com';
}
});
JSFiddle
You won't see the page change in the fiddle, but you'll see the error it produces in the console.
Going off of the initial question my answer would be:
No jquery is needed you can simply change your anchor tag to have the feature target='_blank'.
So the full example would be:
123123
Edit upon more review and another thought: Alternatively you could add this to your function:
window.open('url to open','window name','attribute1,attribute2')
So an actual example to jam in there is:
nTd.click(function(e){
$(this).css("font-weight","bold");
e.stopPropagation();
window.open("http://www.google.com", "_blank");
});
Anchor Tag Reference
Javascript open new window reference
I have page the has some data in tabs, Im trying to write a function so that when links are click from another page can load the page with the tabs on and show the correct tab. This is working with the code below, minus the actual changing tabs function. But for some reason using the window.location..... as a variable still scroll the page down to the matching id. Is there another way to get the string in the url after the #. Or can i do it this way but not have to jump to the id? thanks
function loadTab(){
var linkToTab = window.location.hash.substr(1);
var linkClass = '.'+linkToTab
if(window.location.hash != '') {
changeTabs(linkClass);
}else{
$('.companyLink:first').addClass('active');
$('.companyBio:first').addClass('active');
$('.companyBio:first').fadeIn();
};
}
The hash character is for anchors.
Use a question mark instead of a hash.
<a href="index.html?tabname">
and
var linkToTab = window.location.search.substr(1);
var linkClass = '.'+linkToTab
if(window.location.search != '') {
The # part of the URL is traditionally used for anchors. The 'jumping' you see is the original feature.
Modern websites and web-applications use it build a history as HTML5's history feature isn't widely supported yet.
To avoid the jumping add event.preventDefault to your links, like:
Tab1
<script type="text/javascript">
document.getElementById("tab1handle").onclick = function (event) {
event.preventDefault();
}
</script>
You can also make sure the anchor is not defined. In this case the browser will jump to the top of the page. It's up to you whether this is undesirable or not.
The scenario is a lot of html files with a lot more of links between them. When I call the first one of them (it would be the index), the link pass several parameters through the URL (we could call them preferences).
Now I want that, when clicking any of the several links of the page, those parameters would be added. So the problem would be similar to this other ( How to add parameters to a URL that already contains other parameters and maybe an anchor) but doing it just after clicking the link.
I know that one solution could be changing the onclick event on each link, but as there may be thousands of them, without a regular url format... I'm looking for a solution that could be on the script at the head; perhaps something relative to onbeforeunload event.
Anyway I couldn't find how to do it. Any ideas?
This will append a string to anything containing an href-attribute when being clicked:
window.addEventListener("click", function(e) {
var href = e.target.getAttribute("href");
if(href) {
location.href = href + "?q=stackoverflow";
e.preventDefault();
}
});
Example here: http://jsfiddle.net/E5Q7P/
Won't work in < IE9
Instead of changing the onclick-attribute of each link, or using the onbeforeunload-event, I guess one way would be to attach a clickevent-listener to all anchor-elements when the page loads. The callback could then intercept the browsers default behavior to follow the link. You could then get the src attribute of the a-element that was just clicked, add the desired preferences to the URL and then send the user to the proper location (including preferences) by setting window.location.href to the proper URL.
There is a great aricle on MDN about event-listeners, that I believe would be helpful to you. Note specially the section about older versions of IE
A very crude example of what it could look like:
function callback(e){
// Get the src of the clicked a-element
var src = this.src;
// Add preferences to the url, this need
// improvement depending on your needs
src += "?somesetting=foo";
// Send user to the url with preferences
window.location.href = src;
}
// Get all anchors on page
var anchors = document.getElementsByTagName("a");
// Loop over the elements and attach listener
for(i=0 ; i < anchors.length ; i++){
// Extend with support for older IE if needed
anchors[i].addEventListener("click", callback, false});
}