Pass object list between files

3

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 pass this all onto 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 #?

COMPLEMENTARY INFORMATION

  • The two windows in question are jQuery's Iframes Modal.

  • Can not store data in the js of the 'parent' page.

  • The two windows are from the same domain.

asked by anonymous 24.04.2014 / 19:52

2 answers

1

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

The resolution was as follows:

I thought about using PostMessage, but for this 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 collapses the object. We called the getItem () function 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, it receives the post message, and adds the object to the parameter, and sends 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, in the modal screen that just opened, it 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.

Thank you for your collaboration, and remain the source for future community inquiries.

Embrace

    
24.04.2014 / 22:26
2

To access for example a function inside an iFrame in the same domain can do this:

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

This implies that there is a function within the iFrame with that name that is in global scope.

Example:

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

Live sample

In the example in the jsFiddle I put up 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 when you want and pass whatever you want into it.

In case of wanting the opposite, ie calling a function from within the iFrame to the "parent" window can use simple javascript, ie:

window.parent.nomeDaFuncao();
    
24.04.2014 / 20:44