The website in the iframe isn't located in the same domain, but both are mine, and I would like to communicate between the iframe and the parent site. Is it possible?
With different domains, it is not possible to call methods or access the iframe's content document directly.
You have to use cross-document messaging.
parent -> iframe
For example in the top window:
myIframe.contentWindow.postMessage('hello', '*');
and in the iframe:
window.onmessage = function(e) {
if (e.data == 'hello') {
alert('It works!');
}
};
iframe -> parent
For example in the top window:
window.onmessage = function(e) {
if (e.data == 'hello') {
alert('It works!');
}
};
and in the iframe:
window.top.postMessage('hello', '*')
In 2018 and modern browsers you can send a custom event from iframe to parent window.
iframe:
var data = { foo: 'bar' }
var event = new CustomEvent('myCustomEvent', { detail: data })
window.parent.document.dispatchEvent(event)
parent:
window.document.addEventListener('myCustomEvent', handleEvent, false)
function handleEvent(e) {
console.log(e.detail) // outputs: {foo: 'bar'}
}
PS: Of course, you can send events in opposite direction same way.
document.querySelector('#iframe_id').contentDocument.dispatchEvent(event)
This library supports HTML5 postMessage and legacy browsers with resize+hash https://github.com/ternarylabs/porthole
Edit: Now in 2014, IE6/7 usage is quite low, IE8 and above all support postMessage so I now suggest to just use that.
https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage
Use event.source.window.postMessage to send back to sender.
From Iframe
window.top.postMessage('I am Iframe', '*')
window.onmessage = (event) => {
if (event.data === 'GOT_YOU_IFRAME') {
console.log('Parent received successfully.')
}
}
Then from parent say back.
window.onmessage = (event) => {
event.source.window.postMessage('GOT_YOU_IFRAME', '*')
}
Updated:
postMessage should not work on cross domain, so the solution like this:
For example your website is: customer.com and your domain is my.com
You need to do like this
Create a js file (upload to CDN or your server) - my.com
Embed js file above to customer.com
Now from my.com, you can postMessage and above embed script can be received data from you.
the window.top property should be able to give what you need.
E.g.
alert(top.location.href)
See
http://cross-browser.com/talk/inter-frame_comm.html
After spending 2 days trying to get an iFrame posting messages back to the parent, a Vue application in my situation, I came across this excellent reference:
https://dev-bay.com/iframe-and-parent-window-postmessage-communication/
From the iframe to parent:
const parentWindow = window.parent;
class Message {
constructor(type, body) {
this.type = type;
this.body = body;
}
};
function sendMessage (windowObj, payload) {
if(windowObj) {
windowObj.postMessage(payload, "*");
}
};
//Then call appropriately:
sendMessage(parentWindow, new Message("button-click", "Show Stats Overlay"));
In the parent, my Vue application mounted life cycle event, but reference the link for your own requirement:
window.addEventListener("message", (e) => {
var data = e.data;
console.log("RECEIVED message from CHILD TO PARENT", data);
var type = data.type;
var body = data.body;
if(type === "button-click" && body) {
console.log("button-click RECEIVED FROM CHILD")
//Additional functionality ...
} else if (type === "text-msg" && body) {
console.log("TEXT MESSAGE RECEIVED FROM CHILD");
//Additional functionality ...
}
});
Please see reference for examples of communication from Parent to iFrame.
Hope this helps someone else.
You can also use
postMessage(message, '*');
Related
I have a html page that opens a modal using window.showModalDialog with a React application as the uri:
var retValue = window.showModalDialog ("http://localhost:8080/myreactapp, "dialogWidth:500px; dialogHeight:500px; dialogLeft:300px;");
This react app displays a form and has a data object to contain the form values. When I submit the form
I would the the updated data object to be sent to the parent html page of the modal .
I've been using the [postmessage api] (https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage) for communicating between the parent and the child windows.
In the modal I have:
window.top.postMessage( message, 'http://localhost:3000/postMessage.html' );
I've also tried:
window.parent.postMessage( message, 'http://localhost:3000/postMessage.html' );
I can communicate from the react app to the parent when I use an iframe but not when using a modal.
The postmessage simply does nothing in modal, there is no error message and no message sent.
window.showModalDialog is deprecated in most browsers, so I would suggest using a modal component from a library such as react-bootstrap to achieve the same effect.
Given that, you can check the origin of your target windows to see if they match the origin you're passing in as the target. If they don't match, the message will not be sent.
For example
window.top.location.origin should match 'http://localhost:3000/postMessage.html'
Come to think of it, I've never seen origin specified with the actual leaf page, so maybe your target origin should be 'http://localhost:3000.
I was able to get this working.
In the html client I use two test methods :
function createWindow()
{
var win = window.open('http://localhost:8080/myreactapp', 'popup',
'status=
no,toolbar=no,location=no,
directories=no,
resisable=no,
srollbars=yes,
width=1050,height=600');
}
function createWindowV2() {
if (window.showModalDialog) {
showModalDialog ("http://localhost:8080/myreactapp", window, "dialogWidth:1000px; dialogHeight:800px; dialogLeft:300px;");
}
}
Then in the popup/modal window :
const [IE, setIE] = useState(false);
const [chrome, setChrome] = useState(false);
const [openerWindow, setOpenerWindow] = useState(null);
useEffect(() => {
const handler = event => {
if (typeof event.data !== 'undefined') {
document.getElementById('received-message').innerHTML = event.data;
}
};
window.addEventListener('message', handler);
setIE(/*#cc_on!#*/ false || !!document.documentMode);
setChrome(
!!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime)
);
setOpenerWindow(window.dialogArguments);
// clean up
return () => window.removeEventListener('message', handler);
}, []);
const handleSubmit = evt => {
evt.preventDefault();
if (IE) {
openerWindow.postMessage(
message,
'http://localhost:3000/postMessage.html'
);
} else {
window.opener.postMessage(
message,
'http://localhost:3000/postMessage.html' );
}
};
I have a function in the context.js which loads a panel and sends a message to panel.js at the last. The panel.js function updates the ui on receiving that msg. But it is not working for the first click i.e. it just loads normal ui, not the one that is expected that is updated one after the msg is received. while debugging it works fine.
manifest.json
"background": {
"scripts": ["background.js"],
"persistent": false
},
"content_scripts": [{
"all_frames": false,
"matches": ["<all_urls>"],
"js":["context.js"]
}],
"permissions": ["activeTab","<all_urls>", "storage","tabs"],
"web_accessible_resources":
"panel.html",
"panel.js"
]
context.js - code
fillUI (){
var iframeNode = document.createElement('iframe');
iframeNode.id = "panel"
iframeNode.style.height = "100%";
iframeNode.style.width = "400px";
iframeNode.style.position = "fixed";
iframeNode.style.top = "0px";
iframeNode.style.left = "0px";
iframeNode.style.zIndex = "9000000000000000000";
iframeNode.frameBorder = "none";
iframeNode.src = chrome.extension.getURL("panel.html")
document.body.appendChild(iframeNode);
var dataForUI = "some string data"
chrome.runtime.sendMessage({action: "update UI", results: dataForUI},
(response)=> {
console.log(response.message)
})
}
}
panel.js - code
var handleRequest = function(request, sender, cb) {
console.log(request.results)
if (request.action === 'update Not UI') {
//do something
} else if (request.action === 'update UI') {
document.getElementById("displayContent").value = request.results
}
};
chrome.runtime.onMessage.addListener(handleRequest);
background.js
chrome.runtime.onMessage.addListener((request,sender,sendResponse) => {
chrome.tabs.sendMessage(sender.tab.id,request,function(response){
console.log(response)`
});
});
panel.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="panel.css" />
</head>
<body>
<textarea id="displayContent" rows="10" cols="40"></textarea>
</body>
</html>
Any suggestions on what I am doing wrong or what can I do instead?
An iframe with a real URL loads asynchronously so its code runs after the embedding code finishes - hence, your message is sent too early and is lost. The URL in your case points to an extension resource so it's a real URL. For reference, a synchronously loading iframe would have a dummy URL e.g. no src at all (or an empty string) or it would be something like about:blank or javascript:/*some code here*/, possibly srcdoc as well.
Solution 1: send a message in iframe's onload event
Possible disadvantage: all extension frames in all tabs will receive it, including the background script and any other open extension pages such the popup, options, if they also have an onMessage listener.
iframeNode.onload = () => {
chrome.runtime.sendMessage('foo', res => { console.log(res); });
};
document.body.appendChild(iframeNode);
Solution 2: let iframe send a message to its embedder
Possible disadvantage: wrong data may be sent in case you add several such extension frames in one tab and for example the 2nd one loads earlier than the 1st one due to a bug or an optimization in the browser - in this case you may have to use direct DOM messaging (solution 3).
iframe script (panel.js):
chrome.tabs.getCurrent(ownTab => {
chrome.tabs.sendMessage(ownTab.id, 'getData', data => {
console.log('frame got data');
// process data here
});
});
content script (context.js):
document.body.appendChild(iframeNode);
chrome.runtime.onMessage.addListener(
function onMessage(msg, sender, sendResponse) {
if (msg === 'getData') {
chrome.runtime.onMessage.removeListener(onMessage)
sendResponse({ action: 'update UI', results: 'foo' });
}
});
Solution 3: direct messaging via postMessage
Use in case of multiple extension frames in one tab.
Disadvantage: no way to tell if the message was forged by the page or by another extension's content script.
The iframe script declares a one-time listener for message event:
window.addEventListener('message', function onMessage(e) {
if (typeof e.data === 'string' && e.data.startsWith(chrome.runtime.id)) {
window.removeEventListener('message', onMessage);
const data = JSON.parse(e.data.slice(chrome.runtime.id.length));
// process data here
}
});
Then, additionally, use one of the following:
if content script is the initiator
iframeNode.onload = () => {
iframeNode.contentWindow.postMessage(
chrome.runtime.id + JSON.stringify({foo: 'data'}), '*');
};
document.body.appendChild(iframeNode);
if iframe is the initiator
iframe script:
parent.postMessage('getData', '*');
content script:
document.body.appendChild(iframeNode);
window.addEventListener('message', function onMessage(e) {
if (e.source === iframeNode) {
window.removeEventListener('message', onMessage);
e.source.postMessage(chrome.runtime.id + JSON.stringify({foo: 'data'}), '*');
}
});
one possible way that worked for me is by using functionality in setTimeout() method.
in context.js
setTimeout(() => {
chrome.runtime.sendMessage({action: "update UI", results: dataForUI},
(response)=> {
console.log(response.message)
}
)
}, 100);
But I am not sure if this is the best way.
i have troubles detecting a closing window after the build is done.
const newWindow = window.open(url, '_blank', options);
newWindow.onbeforeunload = () => null;
newWindow.addEventListener('beforeunload', (evt: BeforeUnloadEvent) =>
{
console.log(evt)
}
);
it works great until i do the build, there the beforeunload event does not get triggered. i also tried placing a host listener in the new window's component:
#HostListener('window:beforeunload', [ '$event' ])
beforeUnloadHander(event: BeforeUnloadEvent): void {
debugger;
}
but the same problem here. after the build is done, we don't arrive at the debugger anymore
anybody any idea what i am doing wrong? thanks for your help!
Edit Workaround
const heartBeatNewWindow = setInterval(() => {
if (newWindow.closed) {
this.canvasSettings.displayInNewWindow = false;
clearTimeout(heartBeatNewWindow);
}
}, 1500);
I had to do something similar and my approach was the following:
I created a generic catch from close event windows in the constructor of my service, them call method what handle this event. Inside this method I validate the origin of this event is the correct to execute the logic I needed. Look this example:
Inside the constructor:
if(window.addEventListener){
window.addEventListener("message", this.authService.handleMessage.bind(this), false);
}else{
(<any>window).attachEvent('onmessage', this.authService.handleMessage.bind(this));
}
And my method to handle that event:
handleMessage(event: Event) {
event.preventDefault();
const message = event as MessageEvent;
// Only trust messages from the below origin.
//
if ((message.origin !== environment.BASE_URL)) return;
const result = JSON.parse(message.data);
//Add your logic here
I Hope be helpfull.
I'm sure it's just a problem with my syntax but I am trying to send a variable to an iframe (for colorbox to use). For the time being I am accepting any domains on both ends (just to get it to work). Here is the js for the sending page:
$(document).ready(function() {
if(window.location.hash) {
var urlimage = window.location.hash.substring(1);
targetiframe = document.getElementById('wbgallery').contentWindow;
targetiframe.postMessage(urlimage, "*");
console.log(urlimage);
}
});
And here is the receiving page:
$(document).ready(function() {
window.addEventListener('message',receiveMessage);
console.log(event);
function receiveMessage(event) {
if (origin !== "*")
return;
inbound = event.data;
console.log(inbound);
}
});
I see the console log for urlimage and can see an event but nothing for inbound. I'm using Mozilla's explanation to try and work it all out.
You're sending the message before the page in the iframe has loaded, so the message listener hasn't been established yet.
You can have the iframe send a message to the parent when it's ready, and then send the message after this.
Parent code:
$(document).ready(function() {
if (window.location.hash) {
var urlimage = window.location.hash.substring(1);
var targetiframe = document.getElementById('wbgallery').contentWindow;
$(window).on("message", function(e) {
targetiframe.postMessage(urlimage, "*");
console.log(urlimage);
});
}
});
Iframe code:
$(document).ready(function() {
$(window).on('message', function(event) {
inbound = event.data;
console.log(inbound);
});
window.parent.postMessage("ready", "*");
});
So I've been trying several things in my project to send cross-domain variables.
I have a button that I click, and opens a new browser tab.
$('#btn').on('click', function(e) {
var popup = window.open("other-domain.html", "_blank");
window.popup.onload = function() {
popup.postMessage(variableToSend, '*');
}
// I even tried doing this directly, without the onload
popup.postMessage(variableToSend, '*');
});
From my other domain I do this:
(function($) {
var listener = function(event) {
console.log(event.data);
}
var setupEvents = function() {
if(window.addEventListener) {
window.addEventListener("message", listener, false);
}else{
window.attachEvent("onmessage", listener);
}
}
setupEvents();
})(jQuery);
I never receive anything from my parent window, so never gets inside listener function.
Do you know what could be wrong ? Been fighting with this for 2 days already.
Thanks in advance,
ADDED:
I tried doing this from the other domain window (children)
window.parent.postMessage('Hi!', '*');
And it receives the message correctly. Looks like I'm missing something, maybe a Timeout somewhere?