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.
Related
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.
I wrote the same code in two JSFiddle, and they do not behave the same way :
HTML:
<p id='complete'></p>
JS:
document.onreadystatechange=fnStartInit;
function fnStartInit()
{
var state = document.readyState
if (document.readyState === 'complete')
{
document.getElementById('complete').innerHTML = 'Document completely loaded'
}
}
Working JSFiddle: https://jsfiddle.net/Imabot/toujsz7n/9/
Non working JSFiddle: https://jsfiddle.net/Imabot/3sLcpa0y/7/
Why do they not behave the same way?
Your first link has the load setting "No wrap - bottom of <head>".
This is equivalent to having HTML like
<head>
<script>
// YOUR SCRIPT HERE
</script>
<head>
<body>
// YOUR HTML HERE
</body>
Your second link has the load setting "On Load":
This is equivalent to having HTML like
<head>
<script>
window.onload = function() {
// YOUR SCRIPT HERE
}
</script>
<head>
<body>
// YOUR HTML HERE
</body>
You can see this if you Inspect the iframe in the lower right. So by the time the second script runs, readystatechange never fires again, so fnStartInit never runs.
Here's a Stack Snippet demonstrating the same problem:
window.onload = () => {
console.log('onload');
document.onreadystatechange = () => {
console.log('ready state just changed');
};
};
i have 2 sites, and i want to use javascriptpostMessage between them.
on my main site i write the following code in an emty html file :
<html>
<script>
window.addEventListener("message",listener_,false);
function listener_(event) {
console.log('ok!');
<html>
<script>
window.addEventListener("message",listener_,false);
function listener_(event) {
console.log('ok!');
//console.log(event);
//console.log(event.data);
}
</script>
</html>
and in other site that i want to call the postmessage from the i write the following code:
<script type="text/javascript">
window.onload = function() {
testfunction();
};
function testfunction(){
var childWin = window.open("http://my-main-site.com/indexjava2.html","child");
childWin = postMessage('message','*');
console.log(TipaltiIframeInfo.height);
}
</script>
but it doesn't work after a lot of tries. i mean
console.log('ok!'); or console.log(event); console.log(event.data);
doesn't trigger on console of main site,
what to do?
thanks
Aside from the fact that you've got a <script> and an <html> tag in the middle of your code for the receiving page and you're defining and adding the event listener twice, you're also not use postMessage correctly. Instead of this:
childWin = postMessage('message', '*');
...it should be this:
childWin.postMessage('message', '*');
If you want to learn more about postMessage, read this.
The other issue is that the message won't be received by the newly-opened page unless the page is opened before the message is sent. You're trying to send the message immediately after opening the new page, and the message is reaching the new page before the event listener is added. You could get around this with a setTimeout, but if the new page takes longer to load then this might also be unreliable.
// This is what NOT to do:
setTimeout(function() {
childWin.postMessage('message', '*');
}, 1000);
Instead, the better way is for the child page to tell the parent page when it's loaded. Then the parent and child can communicate reliably.
Here is the full corrected code, sending page first:
<script>
var childWin;
window.addEventListener('message', messageListener, false);
function messageListener(event) {
if(event.data == 'ready') {
childWin.postMessage('hello second page', '*');
}
}
window.onload = function() {
childWin = window.open('http://my-main-site.com/indexjava2.htm', 'child');
};
</script>
And the receiving page:
<script>
window.addEventListener('message', messageListener, false);
function messageListener(event) {
console.log(event.data);
}
window.opener.postMessage('ready','*');
</script>
Hopefully this is a no-brainer for all you experts, but I can't find the answer. I want to click on an element on Page A that will take me to Page B and automatically perform a function (here it's called showGrp) defined on Page B. On Page A, I want to click something like this (obviously, it doesn't work, but I think it conveys the idea):
<span onclick="location.assign('http://happy.com/pageB.htm').('showGrp(); return false;')">
<h2>Search Topics</h2>
</span>`
Short answer: there's no way to do that. You can't tell a new page to run a function through an old page
Long answer: You can, however, set up page B so it will know that if the request URL contains a certain argument in its GET data, it will run showGrp. i.e.:
going to http://happy.com/pageB.htm will do nothing
going to http://happy.com/pageB.htm?showGrp=1 will run function
You can use this function like so:
// put this wherever you want to run this - most probably when the page is loaded
if (getParameterByName('showGrp')) {
showGrp();
}
You could do something like this:
PageA:
<html>
<body>
<a href="pageB.html?f=showGrp">
<h2>Search Topics</h2>
</a>
</body>
</html>
PageB:
<html>
<head>
<script type="text/javascript">
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split('&');
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split('=');
if (decodeURIComponent(pair[0]) == variable) {
return decodeURIComponent(pair[1]);
}
}
}
var init = {
showGrp: function () {
console.log("Hello world!");
},
otherFunc: function() {
console.log("Lalala!");
}
};
init[getQueryVariable("f")]();
</script>
</head>
</html>
By making this you are able to execute whatever function you want just passing it name as an argument to the pageB's URL.
I would just put the code that you want to run in the window onload function on page B. I think that will do what you want.
window.onload = function() {
showGrp();
};
See a description of onload at the Mozilla Developers Network.
Page A should look like:
<div id = "yourclickobject" onclick="pageB.html"> Some random text </div>
Page B:
<head>
<script>
var myFunction = function(){
alert("hello world");
}
myFunction();
</script>
</head>
Does this help?
As soon as you go on page B myFunction is called. All you need to do is put it in the head
I opened a popup window by window.open in JavaScript, I want to refresh parent page when I close this popup window.(onclose event?) how can I do that?
window.open("foo.html","windowName", "width=200,height=200,scrollbars=no");
You can access parent window using 'window.opener', so, write something like the following in the child window:
<script>
window.onunload = refreshParent;
function refreshParent() {
window.opener.location.reload();
}
</script>
The pop-up window does not have any close event that you can listen to.
On the other hand, there is a closed property that is set to true when the window gets closed.
You can set a timer to check that closed property and do it like this:
var win = window.open('foo.html', 'windowName',"width=200,height=200,scrollbars=no");
var timer = setInterval(function() {
if(win.closed) {
clearInterval(timer);
alert('closed');
}
}, 1000);
See this working Fiddle example!
on your child page, put these:
<script type="text/javascript">
function refreshAndClose() {
window.opener.location.reload(true);
window.close();
}
</script>
and
<body onbeforeunload="refreshAndClose();">
but as a good UI design, you should use a Close button because it's more user friendly. see code below.
<script type="text/javascript">
$(document).ready(function () {
$('#btn').click(function () {
window.opener.location.reload(true);
window.close();
});
});
</script>
<input type='button' id='btn' value='Close' />
I use this:
<script language='javascript'>
var t;
function doLoad() {
t = setTimeout("window.close()",1000);
}
</script>
<script type="text/javascript">
function refreshAndClose() {
window.opener.location.reload(true);
window.close();
}
</script>
<body onbeforeunload="refreshAndClose();" onLoad='doLoad()''>
when the window closes it then refreshes the parent window.
window.open will return a reference to the newly created window, provided the URL opened complies with Same Origin Policy.
This should work:
function windowClose() {
window.location.reload();
}
var foo = window.open("foo.html","windowName", "width=200,height=200,scrollbars=no");
foo.onbeforeunload= windowClose;
In my case I opened a pop up window on click on linkbutton in parent page.
To refresh parent on closing child using
window.opener.location.reload();
in child window caused re open the child window (Might be because of View State I guess. Correct me If I m wrong).
So I decided not to reload page in parent and load the the page again assigning same url to it.
To avoid popup opening again after closing pop up window this might help,
window.onunload = function(){
window.opener.location = window.opener.location;};
If your app runs on an HTML5 enabled browser. You can use postMessage. The example given there is quite similar to yours.
Try this
self.opener.location.reload();
Open the parent of a current window and reload the location.
You can reach main page with parent command (parent is the window) after the step you can make everything...
function funcx() {
var result = confirm('bla bla bla.!');
if(result)
//parent.location.assign("http://localhost:58250/Ekocc/" + document.getElementById('hdnLink').value + "");
parent.location.assign("http://blabla.com/" + document.getElementById('hdnLink').value + "");
}
You can use the below code in the parent page.
<script>
window.onunload = refreshParent;
function refreshParent() {
window.opener.location.reload();
}
</script>
Following code will manage to refresh parent window post close :
function ManageQB_PopUp() {
$(document).ready(function () {
window.close();
});
window.onunload = function () {
var win = window.opener;
if (!win.closed) {
window.opener.location.reload();
}
};
}