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
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 load the content of a webpage in a div. Here's my code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
When the this item is clicked, the webpage should be loaded inside the content id:
<ul><li><a id="menu_top" href='testing.html'><span>My account</span></a></li></ul>
<div id="content"> </div>
JS:
$("#menu_top").click(function() {
var href = $ (this).attr('href');
alert(href);
$("#content").load(href);
return false;
});
testing.html:
<!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=utf-8"/>
</head>
<body>
SUCCESS!
</body>
</html>
Unfortunately, the above code does not work. I have checked it multiple times but could not find the issue.
#Milind Anantwar is correct - must have the $(document).ready wrap your JS:
$(document).ready(function(){
$("#menu_top").click(function() {
var href = $ (this).attr('href');
alert(href);
$("#content").load(href);
return false;
});
});
I also tested whether or not the UL or OL tags affected it as #psicopoo mentioned, but it didn't seem to in Chrome. *ALSO, make sure that "testing.html" is a valid page to load.
*As noted on http://api.jquery.com/load/: "Due to browser security restrictions, most "Ajax" requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, port, or protocol."
I think you're encountering an issue with the page you're trying to load. I copied your code exactly and it works in Fiddle, see if this works for you, if so, it's probably your page:
testing.html
JS Fiddle:
http://jsfiddle.net/fb4j6y6d/
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.
(This problem has been observed in IE9)
I am experiencing some problems relating to the display of an address bar when opening a new window from within a modalDialog.
The following sample page illustrates this.
test.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test</title>
<script type="text/javascript">
function windowOpen()
{
var sOptions = "width=300,height=300,location=0,menubar=0,toolbar=0,status=0";
window.open("test.html", "", sOptions);
}
function modal()
{
var sOptions = "dialogHeight:300px;dialogWidth:300px;";
window.showModalDialog("test.html", "", sOptions);
}
</script>
</head>
<body>
window.showModalDialog<br /><br />
window.open
</body>
</html>
Clicking on the 'window.open' link on the page works as expected and the address bar is hidden. If you click the link again in the resulting new window, it still performs as expected.
If however, you open the page in a modalDialog at any point (using the window.showModalDialog link) and then click on 'window.open' the address bar is visible.
Is there any way of avoiding this behaviour?
Any help would be appreciated.
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 !