Question

无法在fancybox的onComplete方法中动态创建iframe的动态内容。静态iframe也是如此。如何在运行时将动态内容设置为iframe？

$(document).ready(function() {
    $("a").fancybox({
        'titleShow': false,
        'autoScale': true,
        'hideOnOverlayClick': false,
        'centerOnScroll': true,
        'scrolling': 'no',
        'content': $('div#content').html(),
        'onComplete': function() {
            //method #1
            $('<iframe id="testiframe" src="about:blank" style="border: 0px;"/>').load(function() {
                $('#testiframe').contents().find('body').append('test').width("100%");
            }).appendTo('div#iframe');

            //method #2
            $('<iframe id="testiframe"/>').appendTo('div#iframe').attr("style", "border: 0px;");
            $('#testiframe').contents().find('body').append('test');

            var iframe = document.getElementById('testiframe');
            if (iframe) {
                iframe.width = "100%";
                iframe.height = "";
                iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";
            }

            //method #3
            $('#testiframe3').contents().find('body').append('test').width("100%");
        }
    });
});

http://jsfiddle.net/9xszx/

Answer 1

也许我试图将文字放到iframe上，因为对它进行任何修改为时已晚，但我能够让它像这样工作：

$(document).ready(function() {
    $("a").fancybox({
        'titleShow': false,
        'autoScale': true,
        'hideOnOverlayClick': false,
        'centerOnScroll': true,
        'scrolling': 'no',
        'content': function() {
            return $('div#content').html() + '<iframe id="iframeTemplate" frameborder="0" vspace="0" hspace="0" src="about:blank"></iframe>';
        },
        'onComplete': function() {
            var iframeElem = document.getElementById('iframeTemplate');
            var iframeDoc = (iframeElem.contentWindow.document || iframeElem.contentDocument); iframeDoc.open();
            iframeDoc.write('<html><head><title></title><b>test</b></body></html>');
            iframeDoc.close();
        }
    });
});

无法将动态内容设置为iframe（fancybox onComplete）

1 个答案: