Trying to handle window.onpopstate function - javascript

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

Related

Microsoft Edge Refresh button does not execute the onLoad java script code

I have the following simple java script code which does not execute when I press the Refresh button in Microsoft Edge. None of the 3 alerts execute at refresh. It works well with Chrome.
<!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" lang="en">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript">
jQuery(function() {
alert('jQuery');
});
function func() {
alert('func');
}
function load() {
alert('load');
}
window.onload = load();
func();
</script>
</head>
<body>
</body>
</html>
This code can be put in an HTML file (test.html).
Why does this happen? Thank you.
Maybe use window.addEventListener("load", load, false);. Sometimes, if one thing doesn't work, another will.

Set Window focus with a link

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

JavaScript object properties are "sometimes" undefined

I am very confused.
I created the following script which is located at http://tapmeister.com/test/dom.html. For some unknown reason, tinymce.editors.ta1 and tinymce.editors[0] show up as undefined, and attempting to use a method under them results in an error. But when I inspect tinymce or tinymce.editors using FireBug, I see them in the DOM.
So, I create a jsfiddle http://jsfiddle.net/JWyWM/ to show the people on stackoverflow. But when I test it out, tinymce.editors.ta1 and tinymce.editors[0] are no longer undefined, and the methods work without error.
What is going on??? Maybe something to do with public/protected/private properties? How do I access methods such as tinymce.editors.ta1.hide()? Thank you!!!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title>Testing</title>
<script src="http://tinymce.cachefly.net/4.0/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({selector: "textarea#ta1"});
tinymce.init({selector: "textarea#ta2"});
console.log(tinymce);
console.log(tinymce.editors);
console.log(tinymce.editors.ta1);
console.log(tinymce.editors[0]);
//tinymce.editors.ta1.hide();
//alert('pause');
//tinymce.editors.ta1.show();
</script>
</head>
<body>
<form>
<textarea id="ta1"></textarea>
<textarea id="ta2"></textarea>
</form>
</body>
</html>
TinyMCE doesn't do all of the setup work immediately when you call init. It provides a callback, setup, to tell you when the work is done.
So if you provide a setup callback, you can interact with the editor instance then.
Here's an example (I've also moved your scripts to the end, which is best practice regardless):
Live Example | Live Source
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title>Testing</title>
</head>
<body>
<form>
<textarea id="ta1"></textarea>
<textarea id="ta2"></textarea>
</form>
<script src="http://tinymce.cachefly.net/4.0/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
selector: "#ta1, #ta2",
setup: function(e) {
console.log("Editor " + e.id + " is ready");
}
});
</script>
</body>
</html>
Now, if you want to actually access the editor instance, bizarrely TinyMCE doesn't add it to tinymce.editors until after calling the setup function. But if you throw in a brief yield, you're all set. Here's the above with a changed setup function:
Live Copy | Live Source
setup: function(e) {
// Bizarrely, TinyMCE calls `setup` *before* adding
// the relevant editor to `tinymce.editors`,
// so we have to yield briefly
console.log("Editor " + e.id + " is ready");
if (e.id === "ta2") {
console.log("It's ta2, I'll hide it in a moment.");
setTimeout(function() {
tinymce.editors[e.id].hide();
}, 0);
}
}
So why did it work on jsFiddle? Well, jsFiddle has a truly brain dead surprising default setting, which is to put all of your script in a window#load callback function. window#load happens very late in the load process, after all external resources have been loaded. (You can see that in the jsFiddle UI, it's the second drop-down list on the left.) So apparently TinyMCE was completely ready at that point, where it isn't earlier in the cycle.
Side note: 99.9% of the time, there is absolutely no point in supplying a tag name with an id selector, e.g. textarea#ta1. id values are unique, so you don't have to qualify them unless you explicitly want to avoid matching an element that may sometimes have one tag name, or other times have another, which is a pretty unusual use case.
There's a large chance that your script is running before tinyMCE has actually loaded. It might be the case that it loads faster from your test site so that is why it works.
Use as a quick check.

"scrollHeight" not updated in "onscroll" event handler when using HtmlCtrl in an application but works correctly in IE9

When sample below code loads in IE9, it works correctly, but when loads in an html control in an application, scrollHeight not updated in onscroll event handler when I change the innerHTML content in the handler, and therefore the alert not to be displayed.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script>
function f()
{
var nBodyHeightOld = document.getElementById("div1").scrollHeight;
document.getElementById("div1").innerHTML += '<div>It is a test!</div>';
if (document.getElementById("div1").scrollHeight != nBodyHeightOld)
alert('scrollHeight changed!');
}
</script>
</head>
<body>
<div id='div1' style='overflow:scroll; height:300px' onscroll="f()">
<div style='height:400px'></div>
</div>
</body>
</html>
Becuse the application use IE8. To force application use IE9 add meta tag to html:
<meta http-equiv="X-UA-Compatible" content="IE=9" >

Fire link onclick events and follow href from Javascript

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>

Categories

Resources