Question

我想在fancybox（iframe）中使用ajax从服务器显示一些动态内容。我可以像这样显示整个html页面

的index.html

<html>
    <head>
        <link href="css/fancybox/jquery.fancybox.css" rel="stylesheet">
        <script src="js/fancybox/jquery-1.10.2.min.js" type="text/javascript"></script>
        <script src="js/fancybox/jquery.fancybox.js" type="text/javascript"></script>
        <script type="text/javascript">
            function test()
            {
                var input = 'some values';
                $.ajax({
                    url: 'ShowData?inputStr='+input,
                    success: function(data){
                    $.fancybox({
                        fitToView   : false,
                        width       : '80%',
                        height      : '80%',
                        autoSize    : false,
                        closeClick  : false,
                        type        : 'iframe',
                        href        : 'test.html'
                    });
                    },cache: false,
                    error: function(){}
                });
            }
        </script>
    </head>
    <body>
        <h2><a class="fancybox" href="#" onclick="test();">Test</a></h2>
    </body>
</html>

的test.html

<html>
    <head>
        //Styles 
        <script type="text/javascript">
            //Some scripts 
        </script>
    </head>
    <body>
        This is a test page
        <!-- Some divs -->
    </body>
</html>

它工作正常，但我不想每次都写一个html页面并发送链接。相反，我想发送字符串（在html页面中）并将其显示在iframe中。

有可能吗？谢谢

Answer 1

使用fancybox的内容属性直接在fancybox中设置内容。

function test()
{
    var inputStr = 'some values';
    $.fancybox({
        fitToView   : false,
        width       : '80%',
        height      : '80%',
        autoSize    : false,
        closeClick  : false,
        type        : 'iframe',
        content     : inputStr
    });
}

jquery fancybox在iframe中显示动态html字符串

1 个答案: