I have a page defining a link ('a' tag) and some onclick events associated with it.
I am trying to add an arbitrary HTML element (in this case a div) with the ability to respond to click events by firing the click events of the link.
The code below describes all that.
The end goal is to trigger exactly the same actions whether the click was on the link or on the div without modifying the link or its onclick events.
My problem is that browsers don't respond in a consistent way when the div is clicked:
Google Chrome fires all 3 events and then follows the link href,
Firefox and IE fire the 3 events but do not follow the link href. In that case I can just add window.location = link.href to the div onclick handler.
Is it possible to make all browsers work the same way, whether it is the 1st or 2nd case ?
If it is not possible, do you have any suggestion that doesn't require modifying the link onclick events (event.stop()) or testing for the browser engine (if (not chrome) { window.location = link.href })?
Edit: Safari works the same way as Chrome, so I suppose this is a webkit issue.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title>test</title>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("prototype", "1.6.1.0");</script>
</head>
<body>
<div>
<a id="google_link" href="http://google.com" target="_blank">click to go to google</a>
</div>
<div id="google_link_proxy">click here to do the same as the link above</div>
<script type="text/javascript">
function fireEvent(element,event) {
if (document.createEvent) {
// dispatch for firefox + others
var evt = document.createEvent("HTMLEvents");
evt.initEvent(event, true, true ); // event type,bubbling,cancelable
return !element.dispatchEvent(evt);
} else {
// dispatch for IE
var evt = document.createEventObject();
return element.fireEvent('on'+event,evt)
}
}
$("google_link").observe("click", function(){alert("action 1");});
$("google_link").observe("click", function(){alert("action 2");});
$("google_link").observe("click", function(){alert("action 3");});
$("google_link_proxy").observe("click", function(event){
fireEvent($("google_link"), "click");
});
</script>
</body>
</html>
Related
I'm trying to hadle how to work with window.onpopstate. I thought that it must hadle browsers back and forward buttons but it also handles any links... So why does it happen?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
window.onpopstate = function( e ) {
console.log("!!!!!!!!!!!!!!");
}
</script>
</head>
<body>
first second
</body>
</html>
It happens because that is what is supposed to happen.
The popstate event is fired when the active history entry changes.
— MDN
Fired at the Window when the user navigates the session history
— HTML 5
I want to show the file dialog once the page is loaded.
I tried using JS to trigger the click event on the file input in jQuery document ready event. But this approach only works in IE11, it doesn't work in Chrome (41.0.2272.118).
How can I make it work in Chrome?
Here is my code which doesn't work in Chrome but work in IE:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My HTML File</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body >
<input type="file" id="a" />
<script>
$(document).ready(function () {
Go();
});
function Go() {
var input = $('input');
input.click();
console.log('Gooooooooooooooo');
}
</script>
</body>
</html>
IE will allow you to trigger a .click event on a type='file', but most other browsers will not, for security reasons. However, there is a solution that might work for you.
No straight ways of triggering it with onload().
Onload is only supported by the <input type = "image"> tag. See here.
+1 #william.taylor.09's proposition.
I have a problem with Javascript window focus setting.
I've written a function to open a new window with the JS method window.open() and save the return value to a variable.
Now I have a link on the first page and by clicking on this link the second, with window.open() opened, window should get the focus.
But this won't work. Is there any way to get this working?
My code looks like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
<script type="text/javascript" language="JavaScript">
var myWindow;
function checkForRefresh() {
myWindow = window.open("test.html", "TestMain");
myWindow.focus();
}
function switchFocus(umsWindow) {
myWindow.focus();
}
</script>
</head>
<body onLoad="checkForRefresh()">
<p>Test Link</p>
</body>
</html>
This problem has been talked already, some browsers does not listen to window.focus(). Please take a look at comment #2533335.
I got it to work when I made the functions properly global by putting them on the window object
http://jsfiddle.net/u52xE/3/
window.switchFocus = function() {
myWindow.focus();
}
It's not ideal to have that javascript in your HTML and global functions though, I'd recommend using jQuery to attach events
I've written a jquery script which works fine, but now I'm trying to make it into a plugin. Once it's in the plugin though, the mouseup function on the html appears to increase the cache of the same element by one every time, and I can't figure out why.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
</head>
<body>
<div class="box">Box 1</div>
<script type="text/javascript">
//<![CDATA[
$(function(){
(function($) {
$.fn.myPlugin = function() {
return this.each(function(){
var $this = $(this);
$('html').mouseup(function(){
console.log('cached +1: ' + $this);//this ouput increases by one every mouseup
});//html mouseup
console.log('cached once: ' + $this);// this output displays once per mouseup
});// return this each
} //fn myPlugin
})(jQuery);
$('.box').mousedown(function(){
$(this).myPlugin();
});//.box mousedown
});//document ready
//]]>
</script>
</body>
</html>
If someone could explain why this is happening (in as much layman's terms as possible), I'd be very grateful.
Thanks
You should tell us what you actuallywant to achieve but for a start:
Every time you click the element, $(this).myPlugin() gets executed.
This function itself binds an event handler to the mouseup event, so every time you click the element, a new mouseup event handler is added (but they are all doing the same thing).
So
click: $(this).myPlugin(); gets called -> 1 mouseup event handler.
click: $(this).myPlugin(); gets called -> 2 mouseup event handlers.
click: $(this).myPlugin(); gets called -> 3 mouseup event handlers.
etc.
This works in IE, but in firefox it's very strange:
If open it normally if firefox, the designmode doesn't work but if i put a breakpoint on
this.editor.contentWindow.document.designMode
= "On";
line, and then release it (after it breaks on it), the designmode works!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script type="text/javascript">
TheEditor = function() {
this.editor = null;
this.mainDiv=document.getElementById("mainDiv");
}
TheEditor.prototype = {
InitializeEditor: function() {
this.editor=document.createElement('iframe');
this.editor.frameBorder=1;
this.editor.width = "500px";
this.editor.height="250px";
this.mainDiv.appendChild(this.editor);
this.editor.contentWindow.document.designMode = "On";
}
}
window.onload = function(){
obj = new TheEditor;
obj. InitializeEditor();
}
</script>
</head>
<body>
<div id="mainDiv">
</div>
</body>
</html>
I don't full understand why, but opening (optionally writing content) and closing the document solves the issue (at least in FF5 on OSX):
this.editor.contentWindow.document.open();
// optionally write content here
this.editor.contentWindow.document.close();
this.editor.contentWindow.document.designMode = "on";
The other idea I had was to set a timeout around the designMode = "on" statement (I remember having to do this in the past for FF), but it did not work.
I think it has something to do with FF loading "something" in the IFRAME and it not being ready to turn designMode on.
I guess you could also use the contentEditable="true" attribute on the DIV instead.
Anyway, I hope this helps.
I think it's because the contentDocument not already created, I think you can also setup the iframe's onload event and set the design mode in this event, because this event is called when the page is loaded so the contentDocument exist !