Question

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

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

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

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

如果我使用非动态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 name属性可能需要在添加到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;
    },

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

1 个答案: