Posting a JSON object to an iFrame

Question

I've seen different methods for posting data to an iframe but I can't find one where I can just send a JSON object. All the methods seem to require me to use form elements to put my data in.

Marmolada

Answer 1

Take a look at postMessage and use JSON.stringify for your message and JSON.parse in the event handler.

To actually post to a iframe you have to do

myIframe.contentWindow.postMessage(...)

fiddle

html

<button onclick="_sendMessage ()">Send</button>
<iframe src="" id="myIframe">​

javascript

var myIframe = document.getElementById('myIframe');
myIframe.contentWindow.addEventListener('message', function(event) {
    console.log(JSON.parse(event.data));
}, false);


window._sendMessage = function() {
    var json = {payload:'Hello World'};
    myIframe.contentWindow.postMessage(JSON.stringify(json), '*');
}​

Tucker

If I do this, when I change the src of the iframe, will the data be posted to the server that is specified in the src? – Marmolada

My use case is that I have a page on a remote website that needs the data to be posted to it. The resulting page is what I want shown in the iframe. – Marmolada

yes you can put any src but best thing to do is to add the event listener when the remote page loads with normal window.addEventListener...and the rest like in the example – Tucker

to be honest I have little experience with post message I've only played with it – Tucker

I've been playing around with this and this isn't resulting in a post to the server, its just sending a message from one window to another. I need the iframe to post to the data to the server. – Marmolada

wait so you want to post from the iframe? – Tucker

It looks like @Marmolada is attempting to do an HTTP POST, not an HTML5 post message between frames. – Roberto

@Roberto is the -1 really justified? The question didn't have any indication that was what he wanted. Posting from an iframe is nothing different from posting a normal form from the main document. Any code that runs in the iframe context can post the form. – Tucker

window.postMessage has absolutely nothing to do with posting an html form element to an iframe. If the asker is in fact looking for a way to communicate between frames, then the question itself needs to be updated. – Roberto

this was 1 year ago :). He abandoned this question. Also I would say that window.postMessage does help him. He can use it to trigger from the main document an iframe javascript function to post the data to the server so I don't think it's that useless of an answer – Tucker

Answer 2

You can use the Porthole JS library. It describes itself as a "JavaScript Library for Secure Cross Domain iFrame Communication".

It uses postMessage() if available, but reverts to a "hidden proxy" workaround for browsers that don't.

Merat

Answer 3

I develop in .NET, then, I load the JSON file from server, I get the files from the path and convert into Base64 string, like this:

<iframe id="ifJsonFile" width="750" height="450" runat="server"></iframe>

byte[] documento_json = System.IO.File.ReadAllBytes("here is your path");

string base64_json = Convert.ToBase64String(documento_json);

ifJsonFile.Src = string.Format("data:application/pdf;base64,{0}", base64_json);

That works for me.

Derina