Post 从动态表单到动态 iframe 在 Chrome 打开一个新的 window

Question

我正在做一些测试以创建允许跨域通信的 JavaScript 小部件。

我有一个脚本标签，可以放置在任何将动态表单和 iframe 注入其页面的网站上。

我的想法是将动态表单的目标属性设置为动态 iframe 的名称，这样数据就可以从第三方站点发布到我的后端进行处理。

将其放在一起并在 Firefox 中运行良好，但在 Chrome 中，提交会强制打开一个新的 window。

如果我使用非动态 iframe，它会突然起作用。但是，如果我希望我的小部件易于第三方集成到他们的站点中，那就不是很优雅了。

有人知道如何让它工作吗？我不认为这是我的代码，因为正如我所说，代码在 iframe 为静态时有效。我已验证动态 iframe 的名称和 ID 已按预期设置。

干杯。

我添加了一个演示此行为的 JSFiddle。请注意，JavaScript 实际上将放置在 HTML 中 div id Widget 下方的脚本标记中。 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

我似乎偶然发现了解决方案。

iframe 名称属性可能需要在附加到 DOM 之前进行设置。我已经用以下内容更新了我的 JsFiddle ( https://jsfiddle.net/n67w5tm7/1/ )：

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;
    },

Post 从动态表单到动态 iframe 在 Chrome 打开一个新的 window

Post from dynamic form to dynamic iframe in Chrome opens a new window

javascript

forms

iframe

google-chrome

dynamic