Post from dynamic form to dynamic iframe in Chrome

Question

I am doing some tests to create a JavaScript widget that allows communication across domain.

I have a script tag that could be placed on any site that will inject a dynamic form and iframe into their page.

The idea I had was to set the dynamic form's target attribute to the name of the dynamic iframe, so that data can be posted from a third party site to my backend for processing.

Put it together and works great in Firefox, but in Chrome the submission forces a new window to open.

If I use a non dynamic iframe, it suddenly works. However it is not very elegant if I want my widget to be easy for third parties to integrate into their sites.

Anyone know how to get this working? I don't think it's my code because, as I say, the code works when the iframe is static. I have verified that the name and ID of the dynamic iframe are set as expected.

Cheers.

I have added a JSFiddle demoing this behaviour. Note that the JavaScript would actually be placed in a script tag beneath the div id Widget in the HTML. https://jsfiddle.net/n67w5tm7/

(function($) {

    var TEST = (function() {

        var param = {
            source: '//localhost',
            gateway: '/gateway.php'
        },

        _target,

        _gateway,

        get = function(id) {
            var n = document.getElementById(id);
            return (typeof n === 'undefined' ? $() : $(n));
        },

        init = function() {

            _target = get('Widget');

                _gateway = $(document.body).append('iframe', {
                    src : param['source'] + param['gateway'],
                    name : 'Gateway',
                    id : 'Gateway'
                })
                .node();


                _submitter = _target.top()
                    .append('form', {
                        id: 'Form',
                        target: 'Gateway',
                        action: param['source'] + param['gateway'],
                        method: 'POST'
                    }).node();


                $(_submitter)
                    .append('fieldset', {
                        'class': 'three'
                    })  
                    .append('div', {
                        'class': 'row'
                    })
                    .append('label')
                        .addText('Some field')
                        .up()
                    .append('input', {
                        type: 'text',
                        name: 'field',
                        id: 'field'
                    })
                        .up()
                    .up()
                .append('input', {
                    type: 'submit',
                    value: 'Submit'
                        })
                        .up()
                    .up()
                .up();

                ready();
            },

            ready = function() {
                // Some work
            };

            function TEST() {
                init();
            };

            return TEST;
        })();

        return new TEST();

    })(ezJS);

Answer 1

I discovered the solution it seems, by accident.

The iframe name property needed to be set presumably before it was appended to the DOM. I have updated my JsFiddle ( https://jsfiddle.net/n67w5tm7/1/ ) with the following:

append: function(tag, attrs) {
        var el = document.createElement(tag);
        if (tag === 'iframe' && attrs && attrs.name) {
            try {
                el.name = attrs.name; // This seems to fix it!
                el = document.createElement('<iframe name="' + attrs.name + '">');
            } catch (e) {}
        }

        _last(_ref).appendChild(el);
        _ref.push(el);
        if (attrs && typeof attrs === 'object') {
            _each(attrs, functions.attr);
        }
        return functions;
    },