I want to disable right click link and i found this code:
<script type="text/javascript" language="javascript">
$(document).ready(function()
{
$('body').on('contextmenu', 'a', function(e){ return false; });
});
</script>
I want to add on a specific domain. something like this code (adfly fullpage script)
<script type="text/javascript">
var ad5fly_id = 4484512;
var ad5fly_advert = 'int';
var domains = ['depositfiles.com', 'rapidshare.com'];
</script>
<script src="https://cdn.adf.ly/js/link-converter.js"></script>
Basically, I dont want visitor to right click on my ad5fly link because they can bypass it easily. im talking about this: http://ad5f.ly/4484512/www.google.com : they can copy it and copy only the google link . then i wont earn any. help me guys.
thanks !!
sorry for my bad english
This is what you might be looking for
<script type="text/javascript">
$(document).load(function(){
$('body').on('contextmenu', 'a[href*=ad5f]', function(e){
e.preventDefault();
//or return false; does the same
});
});
</script>
If the anchor have a href which contains ad5f somewhere, then the contextmenu will be prevented.
Update:
I've added to be on LOAD instead of READY because if on ready, it might trigger before the link-converter.js ended doing it's thing (swapping urls) and the selector might fail.
Haven't tested this, but this is the solution from this thread here:
Disabling right click on images using jquery
$('body').bind('contextmenu', function(e) {
return false;
});
If that doesn't work, you could also try attaching the function you document or window instead.
You could iterate through the domains and cancel the right-click menu on page load.
var domains = ['depositfiles.com', 'rapidshare.com'];
for (var i = domains.length - 1; i >= 0; i--) {
$('body').on('contextmenu', 'a[href*="'+domains[i]+'"]', function(e){ return false });
};
Related
I have an iframe on a page, coming from a 3rd party (an ad). I'd like to fire a click event when that iframe is clicked in (to record some in-house stats). Something like:
$('#iframe_id').click(function() {
//run function that records clicks
});
..based on HTML of:
<iframe id="iframe_id" src="http://something.com"></iframe>
I can't seem to get any variation of this to work. Thoughts?
There's no 'onclick' event for an iframe, but you can try to catch the click event of the document in the iframe:
document.getElementById("iframe_id").contentWindow.document.body.onclick =
function() {
alert("iframe clicked");
}
EDIT
Though this doesn't solve your cross site problem, FYI jQuery has been updated to play well with iFrames:
$('#iframe_id').on('click', function(event) { });
Update 1/2015
The link to the iframe explanation has been removed as it's no longer available.
Note
The code above will not work if the iframe is from different domain than the host page. You can still try to use hacks mentioned in comments.
I was trying to find a better answer that was more standalone, so I started to think about how JQuery does events and custom events. Since click (from JQuery) is just any event, I thought that all I had to do was trigger the event given that the iframe's content has been clicked on. Thus, this was my solution
$(document).ready(function () {
$("iframe").each(function () {
//Using closures to capture each one
var iframe = $(this);
iframe.on("load", function () { //Make sure it is fully loaded
iframe.contents().click(function (event) {
iframe.trigger("click");
});
});
iframe.click(function () {
//Handle what you need it to do
});
});
});
Try using this : iframeTracker jQuery Plugin, like that :
jQuery(document).ready(function($){
$('.iframe_wrap iframe').iframeTracker({
blurCallback: function(){
// Do something when iframe is clicked (like firing an XHR request)
}
});
});
It works only if the frame contains page from the same domain (does
not violate same-origin policy)
See this:
var iframe = $('#your_iframe').contents();
iframe.find('your_clicable_item').click(function(event){
console.log('work fine');
});
You could simulate a focus/click event by having something like the following.
(adapted from $(window).blur event affecting Iframe)
$(window).blur(function () {
// check focus
if ($('iframe').is(':focus')) {
console.log("iframe focused");
$(document.activeElement).trigger("focus");// Could trigger click event instead
}
else {
console.log("iframe unfocused");
}
});
//Test
$('#iframe_id').on('focus', function(e){
console.log(e);
console.log("hello im focused");
})
None of the suggested answers worked for me. I solved a similar case the following way:
<iframe id="iframe_id" src="http://something.com" allowtrancparency="yes" frameborder="o"></iframe>
The css (of course exact positioning should change according to the app requirements):
#iframe-wrapper, iframe#iframe_id {
width: 162px;
border: none;
height: 21px;
position: absolute;
top: 3px;
left: 398px;
}
#alerts-wrapper {
z-index: 1000;
}
Of course now you can catch any event on the iframe-wrapper.
You can use this code to bind click an element which is in iframe.
jQuery('.class_in_iframe',jQuery('[id="id_of_iframe"]')[0].contentWindow.document.body).on('click',function(){
console.log("triggered !!")
});
This will allow you to target a specfic element in the iframe such as button or text fields or practically anything as on method allows you to put selector as an argument
$(window).load(function(){
$("#ifameid").contents().on('click' , 'form input' , function(){
console.log(this);
});
});
Maybe somewhat old but this could probably be useful for people trying to deal with same-domain-policy.
let isOverIframe = null;
$('iframe').hover(function() {
isOverIframe = true;
}, function() {
isOverIframe = false;
});
$(window).on('blur', function() {
if(!isOverIframe)
return;
// ...
});
Based on https://gist.github.com/jaydson/1780598
You may run into some timing issues depending on when you bind the click event but it will bind the event to the correct window/document. You would probably get better results actually binding to the iframe window though. You could do that like this:
var iframeWin = $('iframe')[0].contentWindow;
iframeWin.name = 'iframe';
$(iframeWin).bind('click', function(event) {
//Do something
alert( this.name + ' is now loaded' );
});
This may be interesting for ppl using Primefaces (which uses CLEditor):
document.getElementById('form:somecontainer:editor')
.getElementsByTagName('iframe')[0].contentWindow
.document.onclick = function(){//do something}
I basically just took the answer from Travelling Tech Guy and changed the selection a bit .. ;)
Solution that work for me :
var editorInstance = CKEDITOR.instances[this.editorId];
editorInstance.on('focus', function(e) {
console.log("tadaaa");
});
You can solve it very easily, just wrap that iframe in wrapper, and track clicks on it.
Like this:
<div id="iframe_id_wrapper">
<iframe id="iframe_id" src="http://something.com"></iframe>
</div>
And disable pointer events on iframe itself.
#iframe_id { pointer-events: none; }
After this changes your code will work like expected.
$('#iframe_id_wrapper').click(function() {
//run function that records clicks
});
As mentioned in the title is the question what does this all affect.
The code works fine and you want really see anything happen expect of the "href" attribute from the <a> tag gets changed to "iref".
I do this to load the content later via jquery.load()
Should I do this different? What would be the "right" way to do it?
What about google, does it affect google robots? I ask this because: if there is no javascript turned on, the links want change from href to iref and work off course. So the robots can follow them or not?
Thanks for all the answers.
There is a fiddle
<a class="top-nav animMainBox" href="/home.html">Home</a>
<a class="top-nav animMainBox" href="notathome.html">Not at home</a>
<a class="top-nav animMainBox" href="/contact.html">Contact</a>
<style type="text/css">
a{margin:10px;}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
hrefToIref();
$(document).on('click','.animMainBox',function(){
loadNewBox($(this), true);
});
});
function hrefToIref() {
$('.animMainBox').each(function(){
var url = $(this).attr('href');
$(this).attr('href','javascript:;').attr('iref',url);
});
$('.button').each(function(){
var url = $(this).attr('href');
$(this).attr('href','javascript:;').attr('iref',url);
});
}
function loadNewBox($this,animate) {
// loading and returning new boxes via
// var url = $this.attr('iref');
// $(".wrapper").load(url+' .toggle.box',{noncache: new Date().getTime()}, function(response, status, xhr) {}
}
</script>
Should I do this different?
Yes, definitely. iref attributes look quite invalid.
Can robots follow them or not?
Yes, they usually will only look at your static HTML markup with the href attributes.
What about google, does it affect google robots?
Google is a bit different I think as they can view pages with JS turned on. I don't know whether your script will stop them from following the links.
What would be the "right" way to do it?
Just leave the href attributes as they are. Prevent following them when they're clicked.
$(document).on('click','.animMainBox, .button', function(e){
e.preventDefault();
loadNewBox($(this), true);
});
function loadNewBox($this,animate) {
var url = $this.attr('href');
// ^ just use the correct attribute
…
}
Why not just like this :
$(document).ready(function(){
$('a').click(function(){ return false; });
$(document).on('click','.animMainBox',function(){
loadNewBox($(this), true);
});
});
This will stop the links from working and you can load something later on.
Search robots can still visit the links yes.
Let's say I have a single HTML page and it contains hundreds of links. These links will load in the same window when anybody clicks them.
I want it to open in another window. I know that I can use target for each link:
My Text1
My Text2
My Text3
Howeder, I'd prefer to use JavaScript if that's possible. Is it possible to do that with JavaScript, and if so, how?
Yes, it is. Use something like this:
var newtab = window.open('http://www.example1.com/', '_blank');
newtab.focus();
This may open in new tabs or new windows depending on the particular browser, but I don't know of a way to control that any more specifically.
EDIT
Or were you asking for a way to set the behavior for all links on the page? Then you can add the proper target to all of them when the page loads.
With jQuery: http://jsfiddle.net/b8hdv/
$(document).ready(function() {
$('a').attr('target', '_blank');
});
...or without jQuery: http://jsfiddle.net/uFvUS/
window.onload = function(e) {
var links = document.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
links[i].target = '_blank';
}
}
function open_in_new_tab(url )
{
var win=window.open(url, '_blank');
win.focus();
}
Use like this:
$("#a_id").on("click", function(){
open_in_new_tab($(this).attr("href"));
});
Demo HTML:
Click me!
Found here
Try this:
window.open('http://www.example1.com');
and capture the event click.
I would like to solve the following problem: Given a link on a Web page, I would like to replace the content of a specified div element with the content of a div element of another page. Say, just load the text "Stand on the shoulders of giants" from the Google Scholar page into my existing div element.
Up to date, if implemented the following example:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
Click me
<div id="myid">Text to be replaced</div>
<script type="text/javascript">
$("a").click(function() {
$.get(this.href, function(data) {
$("#myid").replaceWith($(data).find("#fb-root"));
});
previous_page = location.href;
window.history.pushState({page: $(this).index()}, $(this).html(), $(this).attr('href'));
return false;
});
window.onpopstate = function(event) {
location.reload();
}
</script>
</body>
</html>
I've included window.history in order to change the URL in the location bar, and to allow the user to restore the previous state of the Web page without the new content.
Now, I have two issues:
The replacement of the <code>div</code> element seems not to work, since the entire page from WhatIsMyIP is loaded.
While using Chrome, the entire page gets reloaded again and again right from the beginning. I think, the event window.onpopstate is triggered continuously.
Thank for any help!
You could combine a click and a $.load on a hyperlink:
$('a').click(function(e){
$('#myid').load($(this).attr('href'));
e.preventDefault(); //needed to prevent navigation!
});
If you want a special element within the page, you can append any selector. Example:
$('#myid').load($(this).attr('href') + ' div');
This will append all divs of the requested page.
Regarding your first issue
Try this
$('#myid').load(this.href + ' #fb-root');
instead of this
$.get(this.href, function(data) {
$("#myid").replaceWith($(data).find("#fb-root"));
});
Try to add event.preventDefault() before return false;
If I understand you correctly, you just want to replace the content of a specified div element on page1 (in this case div element with ID "myid") with the content of a div element from page2 (page2 is http://www.whatsmyip.org/).
Hope this might help:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
Click me
<div id="myid">Text to be replaced</div>
<script type="text/javascript">
$("a").click(function() {
$.get(this.href, function(data) {
var target_element_id_page2 = "element_id_page2";
var target_element_type_page2 = "div";
var respond= $('<div>' + data + '</div>');//You forgot this... It won't work unless you use it...
var target_element = respond.find( target_element_type_page2 + '#'+ target_element_id_page2 )[0]; //There "might" be more div elements with the same id: that's why you specify index
var container = document.getElementById( "myid");
container.innerHTML = target_element.innerText;
}, "html");
</script>
</body>
</html>
I took out window.history.pushState and window.onpopstate to better answer your question without any errors these two codes might give. If you put these back it should work perfectly. Althought I do not understand why you're using " previous_page = location.href; ". previous_page is not declared and you are not using it afterwards. Correct me if I am wrong...
Problem:
You have a regular set of URL links in a HTML page e.g.:
Foo Bar
You want to create a JavaScript function such that when any HTML links are clicked, instead of the client's browser navigating to that new URL "/foo/bar" a JavaScript function is executed instead (e.g. this may for example make an Ajaxian call and load the HTML data without the need to reload the page).
However if the JavaScript is disabled OR a spider crawls the site, the UTL links are maintained gracefully.
Is this possible? Does it already exist? What's the usual approach?
EDIT 1:
These are some great answers!
Just a follow on question:
If the user clicks on the back button OR forward button, this would naturally break (as in it would go back to the last physical page it was on as opposed to one that was loaded).
Is there any way (cross browser) to maintain the back/forward buttons?
(e.g create an array of links clicked and over ride the browser buttons and use the array to navigate)?
<script type="text/javascript">
function your_function() {
alert('clicked!');
}
</script>
<a onclick="your_function();" href="/foo/bar">Foo Bar</a>
If Javascript is off, the link behaves normally.
In this case, unless your_function() does not return false, the link will be followed when clicked as well.
To prevent this, either make your_function() return false, or add return false; just after the function call in your onclick attribute:
<script type="text/javascript">
function your_function() {
alert('clicked!');
return false;
}
</script>
<a onclick="your_function();" href="/foo/bar">Foo Bar</a>
Or:
<script type="text/javascript">
function your_function() {
alert('clicked!');
}
</script>
<a onclick="your_function(); return false;" href="/foo/bar">Foo Bar</a>
Using element.addEventListener()
With default anchor behaviour following click:
<script type="text/javascript">
document.addEventListener("load", function() {
document.getElementById("your_link").addEventListener("click", function() {
alert('clicked');
}, true);
}, true);
</script>
<a id="your_link" href="/foo/bar">Foo Bar</a>
Without:
<script type="text/javascript">
document.addEventListener("load", function() {
document.getElementById("your_link").addEventListener("click", function(event) {
event.preventDefault();
alert('clicked');
}, true);
}, false);
</script>
<a id="your_link" href="/foo/bar">Foo Bar</a>
Given current HTML and W3C APIs, I would go for:
<script src="linkify.js"> </script>
in the markup, with linkify.js containing something like:
window.onload= function() {
document.addEventListener('click', function(ev) {
ev.preventDefault();
var el = ev.target;
if (el.tagName === 'A') {
// do stuff with el.href
}
}, false);
};
See e.g. http://jsfiddle.net/alnitak/nrC7G/, or http://jsfiddle.net/alnitak/6necb/ for a version which doesn't use window.onload.
Note that this code uses a single listener function registered on the document object, which will act on every <A> tag on the page that doesn't trap clicks for itself.
Use an onclick attribute:
click?
The return false prevents the default behaviour, in the absence of JavaScript, however, the link will be followed.
function do_whatever (e)
{
e.preventDefault ();
// do whatever you want with e.target
}
var links = document.getElementsByTagName ("a");
for (var i=0; i<links.length; ++i)
links[i].addEventListener ('click', do_whatever);
http://jsfiddle.net/bTuN7/
All done inside script and it won't 'hurt' if JavaScript doesn't work.
If you think about AJAX, then you have to know, that googlebot tries to parse it. http://www.youtube.com/watch?v=9qGGBYd51Ts
You can code like:
$('a').click(function() {
doSomethingWithURL($(this).attr('href'));
return false;
});
JavaScript is not executed in case it's disabled or if it's some web crawler, so from my point of view this is preferable.
There's quite a few methods out there such as this:
http://www.malbecmedia.com/blog/development/coding-a-ajax-site-that-degrades-gracefully-with-jquery/
Remember, though, that by virtue of a well setup server and caching you're not going to gain yourself much performance with an Ajax Load.