I have an HTML page that opens another page via JavaScript. When a user clicks a button in the other page, I want to post a message in a DIV of the opening page via JQuery. I cannot put my finger on it, but I cannot seem to get this to work. Here is my opener page
<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
</head>
<body>
<input type="button" onclick="window.open('dialog.html', '_blank', 'height=200, width=300');" value="launch!" />
<div id="testDiv"></div>
</body>
</html>
When the user clicks the "launch!" button, a dialog will appear. The code for the dialog looks like this:
<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
</head>
<body>
<input type="button" onclick="updateOpener()" value="Update Opener" />
<script type="text/javascript">
function updateOpener()
{
var testDiv = window.opener.jQuery("#testDiv");
if (testDiv != null) {
alert("here");
testDiv.html("Updated!");
}
}
</script>
</body>
</html>
Surprisingly, the alert box appears. However, I cannot seem to update the HTML of the DIV in my opening page. Does anyone know how to do this?
You're referencing "confirmDiv". Where is that DIV?
You can't do that if the parent page (the opener) resides on another domain. Otherwise, your code works perfectly.
Also, your != null check is probably not doing what you think it is doing, as the jQuery function never returns null. If you are checking for the existence of an element, you need to do it this way...
var el = $("#myElementId");
if(el.length == 0)
alert('Not found!');
Ummm, it works for me in Firefox 3.0.11, IE8 and Chrome 2... (I.e. the dialog.html button updates the HTML in the opener page to say 'Updated!'.)
Oddly, your example works fine for me in Chrome, IE 8 and FireFox. Do you have any other details?
Related
I know IE9 is kind of old now, but it is the lowest version of IE that I still must support in a Web application I'm building.
Anyway, while doing some DOM manipulation and testing in different browsers, I noticed that IE9 was doing something very strange. I had a <script> block in a DIV element, and when I deep-cloned that DIV element using Node.cloneNode(true), and attached the clone to the document somewhere using document.body.appendChild or document.body.insertBefore, the cloned <script> block would get executed again! No other browser exhibits this behavior.
If I'm not mistaken, <script> blocks aren't supposed to be executed when appended to the document after the document has initially loaded, am I right? If I'm correct, is this a bug in IE9?
Here is a simple HTML document where you can see this behavior in action. Create an HTML document with this code and load it up in Internet Explorer using IE9 emulation. You should see an alert popup that says "hey". Next, click the "Click Me" button, and you will see the same popup get executed again!
<!DOCTYPE html>
<html>
<head>
<title>IE9 Script Tag Bug Test</title>
<script>
function ButtonClick(){
var Elem = document.getElementById('mydiv');
var ElemClone = Elem.cloneNode(true);
document.body.insertBefore(ElemClone,Elem);
}
</script>
</head>
<body>
<div id="mydiv">
This is a DIV.
<script>
alert("hey");
</script>
</div>
<button onclick="ButtonClick();">Click Me</button>
</body>
</html>
I have a simple test page that sets the focus to a textarea on an oninit function. However the exact code fails to do this if the page is called as a child.
Putting alert box proves that the oninit function is being called but fails to put the focus in the textbox. Pressing reload though does then focus correctly.
So given that my code works perfectly when called on a main page, and also works in a child if reload is called, then why doesn't it work the first time?
<html>
<body onload="init()">
<script type="text/javascript">
function init()
{
document.getElementById("message").focus();
}
</script>
<textarea id="message" rows=10 cols=40></textarea>
</body>
</html>
Nothing clever here as you can, just only doesn't work if the page is loaded by window.open("test2.html");
You can also use setTimeout irrespective of the event.
setTimeout(function() {
document.getElementById("elementId").focus();
}, 0);
which browser do you use?
I check in firefox, chrome & IE.
Your code runs perfect and focus on the textarea.
I create two file test1.html and test2.html in a same directory.
In test1.html i insert the the follwing code..
<html>
<body>
<script type="text/javascript">
function init()
{
window.open('test2.html');
}
</script>
<button onclick="init()">test</button>
</body>
</html>
And in test2.html..
<html>
<body onload="init()">
<script type="text/javascript">
function init()
{
document.getElementById("message").focus();
}
</script>
<textarea id="message" rows=10 cols=40></textarea>
</body>
</html>
Than, I run the test1.html and click the button and test2.html appears with focus on the textarea.
In Javascript, I want to open my window.html file in a popup window. But it doesn't display any text. Just a blank page.
This is index.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<script language="javascript">
var newwindow;
function popit(url){
newwindow = window.open(
url, '', "status=yes, height=500; width=500; resizeable=0");
}
</script>
</head>
<body>
CLICK ME!
</body>
</html>
window.html:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>SAMPLE TEXT</p>
</body>
</html>
Why doesn't it display any text?
javascript:popit(window.html);
Replace with:
javascript:popit('window.html');
Your click handler code is syntactically incorrect:
CLICK ME!
Always, always have your developer console open to check for JavaScript errors! (edit — actually in this case there wouldn't have been an error; window.html would resolve to undefined probably! Still, keep the console open :-)
Also note that I used an "onclick" attribute instead of "href".
A GOOD working code with NO crashes.
Simple and what makes this code better is that you can use it in a JavaScript file separately and have it fairing to more then one file with the same popup size even though its different pages on popups.
Javascript
// Popup window code
function MyPopUp(url) {
popupWindow = window.open(
url,'popUpWindow','height=454,width=580,left=0,top=200,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes')
}
HTML
My PopUp
NOTE: You can also use this as onload in body for example <body onload="JavaScript:MyPopUp('MyDirectory/Page.html');"> and it will aslo work on onmouseover and others... though I do not advise this unless you want to piss off the clients visiting your page.
<html>
<head>
<script type="text/javascript">
function show_confirm(){
var r=confirm("Hello or Goodbye?");
if (r==true){
alert("Hello");
window.location.replace("http://www.google.com/");
} else {
alert("Goodbye");
}
}
</script>
</head>
<body>
<input type="button" onclick="show_confirm()" value="Show a confirm box" />
</body>
</html>
I'm learning JavaScript, and I'm using W3School's Tryit Editor, and this code wasn't working like I hoped. I want it to redirect me to google after someone hits 'OK' twice, but it doesn't seem to work. Can someone help me out?
The problem is that the Try-It Editor is using an IFrame. When I try it in Chrome and open up my developer console, I get the following error:
Refused to display document because display forbidden by X-Frame-Options.
This is because what your code is trying to do is change the location of the current frame, not the entire page.
You can do one of three things:
Try your HTML outside of an IFrame and you should get it to work then.
Try using window.top.location.replace("http://www.google.com/"); instead of window.location
If you must change the location of an iframe with JavaScript, you'll have to either do so outside of the frame or make sure it stays within the same domain as the parent document. (You'll notice that window.location.replace("http://www.w3schools.com") works just fine.)
I'm not sure if this is even possible.
I've got the following code;
<iframe src="http://www.domain.com/content.html" width="200" height="50"></iframe>
Now, I would have assumed that would've hyper-linked the entire iFrame area, however it only hyperlinks the border.
Is it possible to hyperlink the entire iframe area?
no, that's not valid. you can't even reliably get a click event off of the element containing the iframe.
e.g.,
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#bob').click(function(e){
alert('hi');
});
});
</script>
</head>
<body>
<div id="bob" style="padding:100px;background:red;"><iframe src="http://www.google.com"></iframe></div>
</body>
</html>
notice that if you click the iframe, no alert fires - but if you click anywhere else (in red), it will. if this were otherwise, there'd be abuse...
What actually do you mean by "hyperlink the iframe"?
You could try to use an onclick event for the iframe, or position a div with an onclick and transparent background above the iframe. Another possibility is to set the a to display: block and position it above the iframe.