I need to call a function which is in iFrame from developer console. But I'm unable to do that.
I tried the following and I get a error that its not a function.
document.getElementById('firstWindow').contentWindow.document.myFunction()
window.frame["firstWindow"].myFunction()
The scritp is inside
document.getElementById('firstWindow').contentWindow.document. But how do I call it?
Here is how the code looks like:
<html>
<body>
<--- Content from iFrame -->
<iframe id="firstWindow" name="firstWindow" src="/test">
<html>
<head>
<script>
myFunction(){
console.log('test');
};
</script>
</head>
<body>
some text
</body>
</html>
</iframe>
</body>
</html>
There are several ways to call the iframe function.
Way 1
In your case, you can use document.getElementById("firstWindow").contentWindow.myFunction() to trigger.
Way 2
Use window.frames.
window.frames is an array, you can set the iframe name with window.name="this is iframe test" in "test.html"
Then you can iterator the array, and compare the name, then trigger it.
for (let i = 0; i < window.frames.length; i++) {
if (window.frames[i].name === "this is iframe test") {
window.frames[i].myFunction()
}
}
Way 3
Use postMessage.
In the way1 and way2, you need to assign function in the window object.
<body>
<script>
// this one
window.myFunction = function(){}
// or this one
function myFunction(){}
</script>
</body>
In the Way3, you can hide the myFunction then you also can trigger it.
Here is an example.
// a.html
<html>
<body>
<iframe id="firstWindow" src="/b.html">
</iframe>
<script>
setTimeout(function(){
document.getElementById("firstWindow").contentWindow.postMessage({data: "hi"});
}, 500)
</script>
</body>
</html>
// b.html
<html>
<body>
<script>
(function() {
function myFunction() {
console.log("test");
}
window.addEventListener("message", (event) => {
myFunction()
})
})()
</script>
</body>
</html>
Then in a.html, you can try use the way1 or way2, like document.getElementById("firstWindow").contentWindow.myFunction().
myFunction will not be called becuase the scope problem.
Related
I wish to add code to a click event in a file and a script tag. But they seem to conflict. How can I achieve this?
javascript:
window.onload = function()
{
document.getElementById("button3").addEventListener("click", respond3);
}
function respond3(e)
{
alert("Way to go!!");
}
html:
<head>
<title>Second Javascript</title>
<script src="Second.js"></script>
<script>
window.onload = function()
{
document.getElementById("button2").addEventListener("click", respond);
}
function respond(e)
{
alert("getting better");
}
</script>
</head>
<body>
<h1>The quick brown fox jumps over the lazy dogs</h1>
<button onclick='alert("bad practice");'>Inline</button>
<button id='button2'>Script tag</button>
<button id='button3'>Separate file</button>
</body>
Per Quentin's suggestion I changed the script tag to this:
<script>
window.addEventListener('load', AddClick2)
function AddClick2()
{
document.getElementById("button2").addEventListener("click", respond);
}
function respond(e)
{
alert("getting better");
}
</script>
The on* properties can only have one function assigned to them. It's not so much a conflict as you are simply overwriting the first onload function with the second.
While you could do something along the lines of checking to see if there is already a function there, then copying it to a new variable, then calling it from the new variable inside your new onload function … that gets messy.
Use addEventListener instead.
window.addEventListener('load', a_function);
window.addEventListener('load', a_different_function);
Well, i want that when body is completely loaded then call a function for show a hide image. I tryed a lot of things and searched a lot but anything work. I think it's pretty simple and easy but i don't know why doesn't work...I wish that anyone be able to help me.
<body onload="start()">
<div id="bg" style="display:none"></div>
</body>
function start() {
document.getElementById("bg").style.display = 'block';
}
Here Jsfiddle link
you have to option:
1- add script at before starting
<script type="text/javascript">
$(document).ready(function () {
//Add your code here to run after fully page load
document.getElementById("bg").style.display = 'block';
});
</script>
2- or add your script at end of <body> before ending </body> tag:
<script type="text/javascript">
//Add your code here to run after fully page load
document.getElementById("bg").style.display = 'block';
</script>
just remove onload="start()" from your body and replace your function start for
<script>
window.onload=function() {
document.getElementById("bg").style.display = 'block';
};
</script>
if you want use jquery, then
<script>
$(document).ready(function (){
$("#bg").css("display", "block");
});
</script>
That's because you need to run your Javascript inside the body tag. Actually at the end.
Conversely, the start function will be undefined and nothing happens:
<body onload="start()">
<div id="bg" style="display:none"></div>
<script>
function start() {
document.getElementById("bg").style.display = 'block';
}
</script>
</body>
How can i call iframe function in parent window, i did something like below but not seems working in firefox. Same code working perfectly in chrome.
window.frames["original_preview_iframe"].window.exportAndView(img_id);
i think you have to use
document.getElementById('target_Frame').contentWindow.callingtargetFunction();
otherwise use this url describes solution for your problem
Invoking JavaScript code in an iframe from the parent page
Try to not type window after you 'selected' the iframe:
window.frames["original_preview_iframe"].exportAndView(img_id);
Would suggest this https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
Clear wiki example that worked for me:
var o = document.getElementsByTagName('iframe')[0];
o.contentWindow.postMessage('Hello B', 'http://example.com/');
And then in the iframe:
function receiver(event) {
if (event.origin == 'http://example.net') {
if (event.data == 'Hello B') {
event.source.postMessage('Hello A, how are you?', event.origin);
}
else {
alert(event.data);
}
}
}
window.addEventListener('message', receiver, false);
(https://en.wikipedia.org/wiki/Web_Messaging.)
There are several ways to call the iframe function.
We assume you iframe id is original_preview_iframe
Way 1
You can use document.getElementById("original_preview_iframe").contentWindow.exportAndView() to trigger.
Way 2
Use window.frames.
window.frames is an array, you can set the iframe name with window.name="this is iframe test" in "test.html"
Then you can iterator the array, and compare the name, then trigger it.
for (let i = 0; i < window.frames.length; i++) {
if (window.frames[i].name === "this is iframe test") {
window.frames[i].exportAndView()
}
}
Way 3
Use postMessage.
In the way1 and way2, you need to assign function in the window object.
<body>
<script>
// this one
window.exportAndView = function(){}
// or this one
function exportAndView(){}
</script>
</body>
In the Way3, you can hide the exportAndView then you also can trigger it.
Here is an example.
// a.html
<html>
<body>
<iframe id="original_preview_iframe" src="/b.html">
</iframe>
<script>
// let postMessage trigger after b.html load
setTimeout(function(){
document.getElementById("original_preview_iframe").contentWindow.postMessage({data: "hi"});
}, 500)
</script>
</body>
</html>
// b.html (iframe html)
<html>
<body>
<script>
(function() {
function exportAndView() {
console.log("test");
}
window.addEventListener("message", (event) => {
exportAndView()
})
})()
</script>
</body>
</html>
Then in a.html, you can try use the way1 or way2, like document.getElementById("original_preview_iframe").contentWindow.exportAndView().
exportAndView will not be called becuase the scope problem.
this is my code...append is working but removing is not working. how to remove the appended div?
<html>
<head>
<script type="text/javascript">
function view(){
$('body').append('<div class="added"><p>something</p></div>');
};
function close(){
$('.added').remove();
} ;
</script>
</head>
<body>
<a onclick="view();">something</a>
<a onclick="close();">close</a>
</body>
</html>
Specify window.close in your html handler:
<a onclick="window.close();">close<a>
http://jsfiddle.net/ZTwd7/1/
Otherwise close() refers to the native close method, which doesn't do anything.
Here's how you would emulate it with a "javascript" (as opposed to inline html attribute) handler:
elem.onclick = function(event) {
with(Window.prototype) {
with(document) {
with(this) {
close();
}
}
}
};
This is not exact reproduction (nor does it work in IE etc, that's not the point) but it would put the .close in Window.prototype in front of the global window.close in the scope, so it shadows it. You can still refer to it explicitly with window.close().
You should also totally drop the above and use jQuery instead:
<a id="view">something<a>
<a id="close">close<a>
JS:
$(function() {
$("#view").click(function() {
$('body').append('<div class="added"><p>something</p></div>');
});
$("#close").click(function() {
$('.added').remove();
});
});
http://jsfiddle.net/ZTwd7/5/
Making an ajax request that fetches a html file to be appended:
$.get("myhtml.html", function(html) {
$("body").append(html);
}, "html");
Don't know why but by putting another name to close function instead of close() it works
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function view(){
$('body').append('<div class="added"><p>something</p></div>');
};
function close_it(){
$('.added').remove();
} ;
</script>
</head>
<body>
<a onclick="view();">something<a>
<a onclick="close_it();">close<a>
</body></html>
Can I use body onload and window.onload at the same time? I've tried it using this code
<body onload = "alertFirst()">
</body>
<script>
window.onload = alertSec;
</script>
But it didn't work. I just need someone to confirm it to me. Many thanks
The answer to your question is "no". However there are ways around it.
Adding both calls to one onload function is ideal, but if you /have/ to add an onload handler after one is already added, and you are not using a framework which facilitates this, you can get by like this:
<html>
<head>
<script type="text/javascript">
function alertFirst(){
alert('First');
}
function alertSec(){
alert('Second');
}
</script>
</head>
<body onload="alertFirst();">
content
</body>
<script>
var func = document.body.onload;
window.onload=function(){
func();
alertSec();
}
</script>
</html>
You can (by adding event handler(s)) but you should NOT have both
Instead add the call to the window.onload:
<html>
<head>
<script>
window.onload = function() {
alertFirst();
alertSec();
}
</script>
</head>
<body>
</body>
No, document.body.onload is actually mapped to window.onload. You can check yourself—when you have <body onload="a()"> and to console.log(window.onload), a() is printed out into the console.
What you can do is to have one onload event handler that calls two other functions.
window.onload = function () {
a();
b();
};
or two event listeners
window.addEventListener('load', a, false);
window.addEventListener('load', b, false);
If one or more of the scripts you want to use has the event handler in the BODY HTML tag, you can still move it to into javascript code. See the example below:
Script #1:
<script language="javascript">
function start(){
...code for script #1...
}
</script>
<body onload="start()">
Script #2:
<script language="javascript">
function init(){
...code for script #2...
}
window.onload=init;
</script>
Result:
<script language="javascript">
function start(){
...code for script #1...
}
function init(){
...code for script #2...
}
window.onload=function(){
start();
init();
}
</script>
<body>
I think it may can help you.