在 Chrome 中从动态表单发布到动态 iframe 会打开一个新窗口答案

【问题标题】：Post from dynamic form to dynamic iframe in Chrome opens a new window在 Chrome 中从动态表单发布到动态 iframe 会打开一个新窗口
【发布时间】：2015-12-05 17:03:26
【问题描述】：

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

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

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

将它们放在一起，在 Firefox 中运行良好，但在 Chrome 中，提交会强制打开一个新窗口。

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

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

干杯。

我添加了一个 JSFiddle 来演示这种行为。请注意，JavaScript 实际上会放置在 HTML 中 div id 小部件下方的脚本标记中。 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);

【问题讨论】：

动态表单可以在动态iframe中并发布到自己吗？
动态 iframe 将被 CSS 隐藏，只是一个通往后端服务的网关。否则我只会在我的网站上创建一个静态表单并让 iframe 完全可见。

标签： javascript forms google-chrome iframe dynamic

【解决方案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;
    },

【讨论】：