Featherlight，JavaScript 动态内容来源

Question

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

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

我已查看此 GitHub issue and this jsfiddle，但无法成功修改 fiddle 以显示字符串。

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

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

我想出的解决方案是修改 Featherlight 源代码的 2 个位置，如代码块中所示（当前在第 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%' });

需要进行第二次修改，以便 url 'about:blank' 不会引发错误。

我还修改了 css 以使滚动条按需要工作。

编辑： 当 url 为 abount:blank 时 Featherlight 无法打开 iframe 的问题已从 1.5 版开始修复。 1.

编辑 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 动态内容来源

Featherlight, JavaScript source for dynamic content

javascript

iframe

featherlight.js