Why iframe alert undefined if use setTimeout for changing iframe.src attribute?
Change iframe.src attribute outside of setimeout work.
How to modify|intercept iframe's eval, Function, Element.prototype.appendChild objects if they are different from parent's window (Element !== parent.Element) ?
main.html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>IFrame var pass test</title>
</head>
<body>
<script type='text/javascript'>
ifel = document.createElement('iframe') ;
ifel.frameBorder = ifel.style.width = ifel.style.height = 0 ;
ifel.style.position = 'absolute' ;
ifel.id = 'id-iframe-x' ;
document.body.appendChild(ifel) ;
ifel.contentWindow.Z = 'Y' ; // window changed after load ???
ifel.addEventListener('load', function () {
ifel.contentWindow['Z'] = 'Z' ; // change after load
}) ;
// ifel.src = 'iframe.html' ; // <-- WORK !
setTimeout(function() { // <-- NOT WORK !
ifel.src = 'iframe.html' ;
}, 3000) ;
</script>
</body>
</html>
iframe.html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>IFrame var pass test</title>
</head>
<body>
<script type='text/javascript'>
alert(typeof window.Z) ;
</script>
</body>
You're changing the value of iframewindow.Z from the parent after the iframe is loaded -- this is correct. Your iframe, however, runs its alert before the iframe is finished loading. You need to define a function on the iframe window and call it from the parent window after the iframe is loaded. You could also try to defer the iframe script, but that'll create a race condition -- it might work now, but maybe not always, especially if you have asynchronous data added from the parent.
Related
Hii this is my second question i will try to explain. This is a code which close the window after 3 seconds i want new window english.html should appear. thanks
<html>
<head>
<script>
function loaded()
{
window.setTimeout(CloseMe, 3000);
}
function CloseMe()
{
window.close();
}
</script>
</head>
<body onLoad="loaded()">
Hello!
</body>
You can't open a new window in response to anything other than a user interaction. "Three seconds after the page has loaded" is not a user interaction so will be blocked by the standard popup blocking rules that all modern browsers are required to implement by the HTML specification.
Try redirecting the user instead, or better yet, don't: Skip the three second page entirely. If something is worth showing to the user, then it is worth showing to the user until they click a link. That way you know they weren't giving their attention to another tab while your content waltzed by unnoticed.
Below is a simple example of how to achieve what you want:
//<![CDATA[
// external.js
var doc, bod, htm, C, E, T; // for use on other loads
addEventListener('load', function(){ // load start
// I threw in a few goodies to study - it will help you later
doc = document; bod = doc.body; htm = doc.documentElement;
C = function(tag){
return doc.createElement(tag);
}
E = function(id){
return doc.getElementById(id);
}
T = function(tag){ // returns an Array of Elements by tag name
return doc.getElementsByTagName(tag);
}
// notice that `window` is implicit, so you don't actually need to use it to access its properties
setTimeout(function(){ // unexecuted functions and Anonymous functions behave the same
location = 'https://www.w3.org'; // it's really this easy to set the `window.location.href`
}, 3000);
});// load end
/* external.css */
html,body{
padding:0; margin:0;
}
.main{
width:980px; margin:0 auto;
}
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta http-equiv='content-type' content='text/html;charset=utf-8' />
<link type='text/css' rel='stylesheet' href='external.css' />
<script type='text/javascript' src='external.js'></script>
</head>
<body>
<div class='main'>
<div>Just a very simple example</div>
</div>
</body>
</html>
Note: You should practice using external sources so they can be cached. Just make sure you change the filename and path to any source you later change.
I need to change variable value of parent window from child window
I am doing this way
parent.html
var check_var = false;
var myWindow = window.open("child.html", "", "width=auto, height=auto");
alert(check_var);// alerts false
child.html
window.opener.check_var=true=;
But its not working alerting false insted of true
Please see and suggest any way to do it
Thanks
window.open starts the process of opening the window, but then your JavaScript code continues while the page is loaded. So your alert is happening before the child window is loaded and before the code in it modifies the variable.
Assuming check_var is a global, opener.check_var is indeed how you access that variable from child.html. It's just a timing thing.
You have several options for learning when the child has loaded:
Have the child use postMessage to send a message to the parent.
Have the child use opener.someFunction() to call a global function in the parent.
Use myWindow.onload = function() { alert(check_var); }; to hook the load event on the child window, and then alert the value. Provided the code in child.html is in a script block and not waiting for some event, it will run before the load event fires.
Here's a complete working example:
parent.html:
<!doctype html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta charset="UTF-8">
<title>Parent</title>
</head>
<body>
<input type="button" id="the-button" value="Click to Open Child">
<script>
var check_var = false;
document.getElementById("the-button").onclick = function() {
var wnd = window.open("child.html");
wnd.onload = function() {
var p = document.createElement('p');
p.innerHTML = "check_var = " + check_var;
document.body.appendChild(p);
};
};
</script>
</body>
</html>
child.html:
<!doctype html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta charset="UTF-8">
<title>Child</title>
</head>
<body>
<script>
var p = document.createElement('p');
if (opener) {
opener.check_var = true;
p.innerHTML = "Set check_var";
} else {
p.innerHTML = "No opener";
}
document.body.appendChild(p);
</script>
</body>
</html>
I am trying to get the background image of a div to change at an interval. I created an Array with the images, and every few seconds the function should check the value of "x" against the array length. If X is less, x will increase by one and the background image will change to the next image in the array, otherwise it will set x=0 and restart the process.
The div and initial image shows up how I want, but nothing happens.
I know there are probably better ways to do this, but I am very new to Javascript and want to learn why this code doesn't work. Thanks in advance for the help!!
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>ImageChanger</title>
<style type="text/css">
#imagediv {
float:left;
border-style:ridge;
border-width:8px;
border-color:Green;
border-radius:15px;
width:1250px;
height:450px;
background-image:url(images/landscape1.jpg)
}
</style>
<script type="text/javascript">
function displayNextImage() {
var x;
If (x<imageArray.length) {
x=x+1;
document.getElementById("imagediv").style.backgroundImage=images[x];
}
else {
x=0;
document.getElementById("imagediv").style.backgroundImage=images[x];
}
function startTimer() {
setInterval(displayNextImage, 3000);
}
var imageArray=new Array();
images[0] = "images/landscape1.jpg";
images[1] = "images/landscape2.jpg";
images[2] = "images/landscape3.jpg";
images[3] = "images/landscape4.jpg";
</script>
</head>
<body>
<div id="imagediv">
</div>
</body>
</html>
If (x<imageArray.length) {..
should be
if (x<imageArray.length) {
Javascript is case-sensitive.
Also you have some missing braces like you are not closing
function displayNextImage() { ....
Use your browser console to debug. These syntax errors will be shown there.
As far as syntax issues go:
As #Zee stated, If should be lowercase (if)
Also, as #Zee and some others stated, you are not closing function displayNextImage() { with a closing brace }.
You are improperly defining the background-image property in your function, whereas you defined it correctly in the block of CSS. You must wrap the image name with url().
You are never calling your timeout function, startTimer.
You create a new array imageArray but then use an undeclared array images
I have a JavaScript statement on the bottom of my page that I want to trigger ONLY if a certain HTML comment is available
<!-- mytriggercomment -->
In the above example, if the mytriggercomment is detected within the current page, only then should the JavaScript statement trigger. What is the preferred way of doing this?
May not work for older browsers, but this way is a logical DOM approach:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function () {
var treeWalker = document.createTreeWalker(
document,
NodeFilter.SHOW_COMMENT,
{acceptNode: function(node) {
if (node.nodeValue.trim() === 'mytriggercomment') {
return NodeFilter.FILTER_ACCEPT;
}
}}
);
var nodeList = [];
while(treeWalker.nextNode()) nodeList.push(treeWalker.currentNode);
alert(nodeList)
};
</script></head>
<body>
</body>
</html>
<!-- mytriggercomment -->
If you know it will always be at the bottom, you may be able to target it like:
window.onload = function () {
alert(document.documentElement.nextSibling &&
document.documentElement.nextSibling.nodeValue.trim() === 'mytriggercomment')
};
I have the following code, which basically toggles through a bunch of images.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var num = 1;
img = document.getElementsByTagName("img")[0];
hbutton = document.getElementsByTagName("h1")[0];
hbutton.onclick = function() {
num += 1;
img.src = num + ".jpg";
}
</script>
</head>
<body>
<h1>Press Here!</h1>
<img src = "1.jpg"></img>
</body>
</html>
For some reason, when I run it, nothing happens, because of the following error as displayed by my Firebug console.
hbutton is undefined
---
hbutton.onclick = function() {
When I run just the JS after the page has loaded however, it works perfectly fine!!! Why is this?
Your code is executing before the h1 tag is defined. You must run it in an onload handler or put it just before /body
JavaScript is interpreted top-to-bottom. So at the place where your <script> executes, no h1 tags are known yet.
Try putting the <script>-Tag to the bottom of your page. Otherwise, if you need the script at the beginning of the page, an onLoad-Handler might help:
<script type="text/javascript">
function onLoadHandler() {
// your original javascript code here...
}
</script>
<body onload="onloadHandler()">
<!-- HTML Code here-->
When you put it in the header, your h1 is not loaded yet. hbutton becomes undefined, not an object. Then when you try to set .onclick, it breaks because you cant set properties of something undefined. When you put the code in the body, your h1 is already loaded, so the code works as you expected it to.
You can fix this by leaving your code at the top, but only calling it after an onload event.
The head gets executed before the dom is loaded. Put it on the button of the page or put an onload function in the body tag.
It cannot find document.getElementsByTagName("img") when the Document isnt ready yet, because it is simply not there yet.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function onDocumentReady(){
var num = 1;
img = document.getElementsByTagName("img")[0];
hbutton = document.getElementsByTagName("h1")[0];
hbutton.onclick = function() {
num += 1;
img.src = num + ".jpg";
}
}
</script>
</head>
<body onload="onDocumentReady()">
<h1>Press Here!</h1>
<img src = "1.jpg"></img>
</body>
</html>
or simply do this:
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>Press Here!</h1>
<img src = "1.jpg"></img>
<script type="text/javascript">
var num = 1;
img = document.getElementsByTagName("img")[0];
hbutton = document.getElementsByTagName("h1")[0];
hbutton.onclick = function() {
num += 1;
img.src = num + ".jpg";
}
</script>
</body>
</html>
The problem is that the script is being executed immediately it is encountered during page load.
Since it's at the top of the page, in the header, this means that it is executed before the page has loaded the <h1> element (or any of the rest of the body).
Therefore, when it asks for getElementsByTagName('h1'), there aren't any matching elements at that moment in time.
You need to either:
* move the code to the end of the script.
* or wrap it in a function, and trigger the function to execute when the page has finished loading -- ie use the onload method.