Pass list of objects between files

Question

How to pass a list of objects through two Javascript files?

I have a list:

var elementsList = [];

And this list is populated with N objects:

var oElement = {
    elem: "",
    emin: 0.0000,
    emax: 0.0000
}

I need to move all this to a modal window:

var oElem = {
            "id": "FCADELEM",
            "data-height": "558",
            "data-width": "320",
            "data-name": "Elementos Químicos",
            "data-url": "FCADELEM.aspx?returnToForm=ifr_FCADQUAL",
            "data-module": "Elementos Químicos",
            "attr": function (param) {
                return this[param];
            }
        }
        parent.createDialog(oElem);

How can I pass this list of objects to the other window without using C#?

ADDITIONAL INFORMATION

• The two windows in question are Modal iframes from the jQuery library.

• Unable to store the data in the js of the parent page'.

• Both windows are from the same domain.

Answer 1

To access for example a function within an iframe in the same domain you can do so:

var iFrame = $('#myIframe')[0].contentWindow;
iFrame.receberDadosExternos('Olá!!');

This implies that there is a function within the iframe with that name and that it is in the global scope.

Example:

function receberDadosExternos(dados) {
    alert(dados);
}

Live example

In the jsFiddle example I put on top use this code that runs only when the dialog opens:

$("#dialog").dialog({
    autoOpen: false,
    modal: true,
    height: 600,
    open: function (ev, ui) {
        var iFrame = $('#myIframe')[0].contentWindow;
        iFrame.receberDadosExternos('Olá!!');
    }
});

But you can call the function whenever you want and pass whatever you want into it.

In case you want otherwise, ie calling a function from within the iframe to the "mother" window can use simple javascript, ie:

window.parent.nomeDaFuncao();

Answer 2

Thanks for the collaboration Sergio, helped a lot to the unfolding of the issue, but I had to make some adaptations, because the list of objects is a little more complex than a string, for example..

The resolution was as follows::

I thought of using Postmessage, but for that I would need the modal iframe to be open, first step then create the modal. In the newly created modal, it returns to the previous iframe, and collects the object. We call the function getaway() on onload.

function getItem() {
    try {
        var returnToUrl = "FCADQUAL.aspx";
        var msgAddr = window.location.protocol + "//" + window.location.host + returnToUrl;
        var o = parent.document.getElementById("ifr_FCADQUAL");
        o.contentWindow.postMessage("100;0", msgAddr);
    } catch (e) {
        Save Exception();
    }
}

In the previous iframe then, you receive the post merge, and add the object to the parameter, and send it back:

window.addEventListener("message", receiveMessage, false);

function receiveMessage(e) {
    try {
        //url que verifica se post message é valido
        var url = window.location.protocol + "//" + window.location.host
        //testa se origem do post é do mesmo dominio
        if (e.origin !== url)
            return;
            var sData = e.data.split(";")

            //Solicita informações do item para a tela de informações diversas
            sendInfoDiver();

    } catch (e) {
        Save Exception();
    }
}

function sendInfoDiver() {
    try {
        var returnToUrl = "FCADELEM.aspx";
        var msgAddr = window.location.protocol + "//" + window.location.host + returnToUrl;
        var o = parent.document.getElementById("ifr_FCADELEM");
        o.contentWindow.postMessage(elementsList, msgAddr);
    } catch (e) {
        Save Exception();
    }
}

Then, already in the modal screen that recem was opened, receives the object and starts the treatment.

window.addEventListener("message", receiveMessage, false);

function receiveMessage(e) {
    try {
        //url que verifica se post message é valido
        var url = window.location.protocol + "//" + window.location.host
        //testa se origem do post é do mesmo dominio
        if (e.origin !== url)
            return;

        if (typeof e.data == "object") {
            //Recebe o objeto item e popula campos do formulário
            setData(e.data);
        }

        //Oculta a mensagem de loading
        parent.hideLoading();

    } catch (e) {
       Save Exception();
    }
}

function setData(PlReturn) {
...
}

And to send the updated data back, just do the reverse path.

I appreciate the collaboration, and remains the source of research for future community doubts.

Hug