Can I have access from javascript on one page to elements on other page the script has created before? Something like this:
var win=window.open("http://www.ftwars.com/battle",'myWindow');
win.document.getElementById('center').onClick();
Simply yes - you can , via variable reference, you cannot reach reference if you not created it in your javascript
You are correct. From the context you have given above, win is like any other object.
First page (x.html):
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
var w = window.open('y.html', 'w');
w.document.getElementById('target').onclick = function () { alert('!'); };
</script>
</body>
</html>
Second page (y.html):
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button id="target">target</button>
</body>
</html>
Related
I have small snippet that is inside iframe and generates script html tag and appends it to the window.top.document.head.
Now I want to know how do I check from within potato.js from which iframe it was generated from once it is already loaded?
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<iframe>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
(function() {
var s = document.createElement('script');
s.setAttribute('type','text/javascript');
s.setAttribute('src','https://test.com/potato.js');
window.top.document.head.appendChild(s);
})();
</script>
</body>
</html>
</iframe>
</body>
</html>
Edit: I can not change this code inside the iframe
That information isn't stored automatically.
The only way I can think of would be to add an expando-prop to the script with a reference to the current window (i.e. the frame's window)…
s.sourceWindow = window;
… then read that from within potato.js …
const sourceWindow = document.currentScript.sourceWindow;
… and then loop over all the frames (window.frames) looking for a match.
Since you are using window.top and not window.parent you might need to be recursive there.
I have a very simple setup on a dev server (both pages are on my local test server localhost:5500) where I have a main page
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example Mockup</title>
</head>
<body>
<iframe src="./nested.html" id="frame"></iframe>
<script>
var iframe = document.getElementById('frame');
console.log(iframe.contentDocument.body);
</script>
</body>
</html>
and a nested page
<html>
<body>
<div id="hello">Hello, World</div>
</body>
</html>
when I load the main page in my browser the output written to console is: <body></body>
I can access the element #hello using iframe.contentDocument.getElementById('hello') but I want the body element including child elements. Can anyone please explain to me why is this happening
You have to wait until iframe loaded completely to access it's body.
var iframe = document.getElementById('frame');
iframe.onload = function () {
console.log(iframe.contentDocument.body);
}
Hello my questions is about how a webpage is loaded! Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript</title>
</head>
<body>
<h1>Waiting</h1>
<script type="text/javascript">
alert("Why?");
</script>
</body>
</html>
I cannot for the life of me figure out why the alert is running before the heading is displayed. It is my understanding that since the alert is right above the closing body tag it will be the last thing run. Why is the page waiting for me to close out the alert before displaying the heading?
Thanks for the help!
Edit: I ran this code in firefox rather than chrome and it worked how I wanted it to - the heading displayed first before the alert ran.
You need to execute your script after the page loads with
<body onload="script();">
An external script will execute before the page loads.
<body onload="script();">
<h1>Waiting</h1>
<script type="text/javascript">
function script() {alert("Why?");}
</script>
</body>
You can use setTimeout() to show the alert after a few seconds (when the page should have loaded).
<!DOCTYPE html>
<html>
<head>
<title>JavaScript</title>
</head>
<body>
<h1>Waiting</h1>
<script type="text/javascript">
setTimeout(function(){
alert("Why?");
}, 1000);//wait 1000 milliseconds
</script>
</body>
</html>
You can check if the header (the h1 tag) is there and only alert if it is there.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript</title>
</head>
<body>
<h1 id="header">Waiting</h1>
<script type="text/javascript">
var x;
x = setInterval(function(){
if(document.getElementById("header")){
alert("Why?");
clearInterval(x);
}
}, 100);
</script>
</body>
</html>
The simplest workaround code without using JQuery I could write is this. Please check it.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript</title>
</head>
<body>
<h1>Waiting</h1>
<script type="text/javascript">
window.onload = function(){
setTimeout(()=>{
alert("Why?");
},10)
}
</script>
</body>
</html>
The cleanest way to do this seems like it would be to put your javascript in a separate file, and load it with the defer attribute. This will cause it to fire after the DOM loads (technically, just before DOMContentLoaded, but it doesn't work consistently across browsers unless there is a src attribute, which is why you would need to move it to an external file.
<script src="myScript.js" defer></script>
Oddly, adding some CSS to your heading could also affect this since JS is supposed to execute in order after any pending CSS.
The timeout function or a $(document).ready() function will do what you need in theory, but a timeout could need to be adjusted based on the complexity of the page, and if you aren't already using jQuery, you probably won't want to add it just to use $(document).ready().
I tried many times and many ways to call the method from inside the iframe while not yet successful to do so. please see below,
main.html : consisting the two iframe
iframe-1 linked with a index.html from where i want to call a method of main.html or want to change the src of second iframe.
main.html
<html>
<head> </head>
<body>
<iframe id="iframe-1" src="index.html"></iframe>
<iframe id="iframe-2" ></iframe>
</body>
</html>
index.html
<html> <head>
<script type="text/javascript">
$(document).ready(function(){
// How to access the method of main.html and change the iframe src
});
</script>
</head> <body>
......
</body> </html>
Note : tried parent.methodName(), window.parent.methodName() not working
#EDIT : success on IE & MOZILLA but getting error on Chrome ( Cannot call method 'getElementById' of undefined )
You should try with
document.getElementById("iframe-1").contentWindow.func();
or
var $f = $("#myIFrame");
var fd = $f[0].document || $f[0].contentWindow.document; // document of iframe
fd.MyFunction(); // run function
Docs
I am keeping this short.
As you are looking forward for the iframes/frames on same document[window sharing]. To access a variable defined in one document inside another document.You have to use document.importNode(original Node as in other document,boolean) method as per DOM 2.
Do something like this for javacript code ...
iframe=document.getElementsTagName("iframe")[0];
documentI(original variable/node present here)-
OriginalNode=iframe.contentWindow.document.getElementsByTagName(//Tag name of Node//)
documentII(node to be cloned here)- iframe.contentWindow.document.importNode(OriginalNode,True)
Node can be created of any method,property or object in any iframe by simple DOM methods.
This would work
index.html
<html>
<head>
<script type="text/javascript">
function run() {
window.parent.document.getElementById("iframe-2").src = "/test.html";
}
</script>
</head>
<body onload="run();">
</body>
</html>
How about this?
Or create a method inside main.html and access it using:
window.parent.methodname();
Ron.
ps. window.parent.methodname(); works perfectly for me when I have a method in main.html
main.html
<html>
<head> </head>
<script>
function foo() {
alert(1);
}
</script>
<body>
<iframe id="iframe-1" src="index.html"></iframe>
<iframe id="iframe-2" ></iframe>
</body>
</html>
I'm new to programming. I'm trying to call a function in html, but it isn't working. What's the problem? Thanks in advance. (Don't ask about the whole integration thing).
My HTML code:
<!DOCTYPE html>
<html>
<head>
<script src="IntegrationCalculator.js"></script>
<script>
integrationCalculator(7);
</script>
</head>
<body>
<p id="tester">
Didn't work :(
</p>
</body>
My javascript code:
var integrationCalculator = function (variable1) {
if (variable1 = 7) {
document.getElementById("tester").innerHTML="WORKED";
}
};
Two things. First if (variable1 = 7) should be if (variable1 == 7). Second, call your function after the element is loaded in the DOM.
<!DOCTYPE html>
<html>
<head>
<script src="IntegrationCalculator.js"></script>
</head>
<body>
<p id="tester">
Didn't work :(
</p>
<script>
integrationCalculator(7);
</script>
</body>
jsFiddle example
integrationCalculator is called before the tester paragraph is created. Therefore, an error is thrown and the execution of the script is stopped.