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>
Related
Is there a way to know if parent window has loaded from within iframe?
I want to run a function which is in iFrame but I need to run it after all the parent windows are loaded and the event listener will be inside the iframe.
I tried the following but it runs before parent windows are loaded.
window.addEventListener('load', function () {
alert("It's loaded!")
});
One way would be to add the iframe dynamically:
parent:
window.addEventListener('load', function () {
var iframe = document.createElement('iframe');
iframe.src = "https://www.example.com";
document.body.appendChild(iframe);
});
iframe:
window.addEventListener('load', function () {
alert('hello world!');
//doSomethingUseful();
}
This way, you could be certain that they will load in a specific order. However, as they'd be loading in series, the increase in total page load time could become noticeable.
Alternatively, you could use this approach. This one may not work as is, if one page happens to finish loading before the other. If you do opt for this approach, it may be necessary to communicate in both directions so that the first page to load finds out when the second page has loaded. That may look like this:
parent:
newEvent();
window.document.addEventListener('myCustomEventI', newEvent, false);
function newEvent() {
var data = { loaded: true }
var event = new CustomEvent('myCustomEventP', { detail: data })
window.parent.document.dispatchEvent(event);
}
iframe:
newEvent();
window.document.addEventListener('myCustomEventP', handleEvent, false);
function newEvent() {
var data = { loaded: true }
var event = new CustomEvent('myCustomEventI', { detail: data })
window.parent.document.dispatchEvent(event);
}
function handleEvent(e) {
alert('both loaded!');
//doSomethingUseful();
}
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');
};
};
<body onload="onload();">
function onload()
{
document.onkeypress = function(e) {
//e.preventDefault(); // Prevent any default browser behaviour.
console.log('send: '+e);
document.getElementById('iframe').contentWindow.postMessage ('Hello Treehouse!', '*my*');
}
window.addEventListener('message', function(event) { console.log('get: '+event); }, false);
}
</script>
I want to forward keypresses to iframe but so far it doesnt work, iframe doesnt receive the messages
It looks like you're trying to bind the event listening within the same window as the sender, when you actually need that within the iFrame itself.
i.e. within your iFrame have this code:
<script>
window.addEventListener('message', function(event) { console.log('get: '+event); }, false);
</script>
How to enable chrome extension without clicking it.
I need to perform a certain function from my extension every time i reload a page(no clicking)
is there a way to do it.
My code which contains the on click method
chrome.extension.onMessage.addListener(function(request, sender) {
if (request.action == "getSource") {
message.innerText = request.source;
}
});
function onWindowLoad() {
var message = document.querySelector('#message');
chrome.tabs.executeScript(null, {
file: "getPagesSource.js"
}, function() {
// If you try and inject into an extensions page or the webstore/NTP you'll get an error
if (chrome.extension.lastError) {
message.innerText = 'There was an error injecting script : \n' + chrome.extension.lastError.message;
}
});
}
window.onload = onWindowLoad;
and
chrome.extension.sendMessage({
action: "getSource",
source: started(document)
});
To include jQuery:
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
/*all your normal JavaScript (or include as link)*/
</script>
</head>
Using only pure JavaScript you can do this with:
window.onload = function(){/*your JavaScript code*/};
only the code within that function will be immediately executed.
In jQuery you can wrap the code you want executed upon loading of page inside of $(document).ready(function(){, e.g.
$(document).ready(function(){
/*code goes here*/
});
$(document).ready() checks for when a page is loaded enough to have functionality.
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.