Question

我正在评估Featherlight灯箱，但我无法实现满足我的用例的代码。我需要一个灯箱，它将用作报表查看器，显示分配给JavaScript变量的动态创建内容。字符串的值是有效的HMTL5页面。

我查看了iframe示例，但它依赖于DOM中的静态iframe。那不是我需要的。

我已经审核了这个GitHub issue和jsfiddle，但我无法成功修改小提示以显示字符串。

这是我想要显示的字符串示例：

var s = '<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Title of the document</title></head><body><p>Content of the document......</p></body></html>';

这是可能的，如果是这样的话？

我希望手动调用$.featherlight()以响应按钮点击。

Answer 1

我提出的解决方案是在2个位置修改Featherlight源代码，如此代码块所示（目前在第383行附近）。

        iframe: {
            process: function(url) {
                var deferred = new $.Deferred();
                var $content = $('<iframe/>')
                    .hide()
                    .attr('src', url)
                    .attr('id', this.namespace + '-id') // [KT] 10/31/2016
                    .css(structure(this, 'iframe'))
                    .on('load', function() {if ($content.show()) {deferred.resolve($content.show()) } else {deferred.resolve($content)} ; })  // [KT] 10/31/2016

                    // We can't move an <iframe> and avoid reloading it,
                    // so let's put it in place ourselves right now:
                    .appendTo(this.$instance.find('.' + this.namespace + '-content'));
                return deferred.promise();
            }
        },

id属性已添加到iframe，因此内容可以通过JavaScript添加，如下所示：

    var s = '<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Title of the document</title></head><body><p>Content of the document......</p></body></html>';
    var oIframe = document.getElementById('featherlight-id');  // Featherlight's iframe
    var iframeDoc = (oIframe.contentDocument || oIframe.contentWindow.document);
    iframeDoc.open();
    iframeDoc.write(s);
    iframeDoc.close();

这样可行：

   $.featherlight({iframe: 'about:blank', iframeWidth: '96%' });

第二次修改是必需的，以便网址'about:blank'不会引发错误。

我还修改了css，以便根据需要使滚动条工作。

修改：自版本1.5.1以来，当网址为iframe时，Featherlight未打开abount:blank的问题。

编辑2 ：使用v1.5.1，无需对Featherlight进行修改即可向id添加iframe：

    var s = '<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Title of the document</title></head><body><p>Content of the document......</p></body></html>';
    $.featherlight({iframe: 'about:blank'});
    var $iframe = $('.featherlight iframe');
    $iframe.ready(function () {
        $iframe.contents().find("body").append(s);
    });

此解决方案使用了已接受的SO answer。

Featherlight，动态内容的JavaScript源代码

1 个答案: