Question

我正在使用带有iFrame的Bootstrap模式，如果我加载youtube视频，则可以在所有浏览器中正常使用。

我正在尝试打开PDF文档。我能够在IE和Chrome中加载PDF文档，但这个例子在Firefox中不起作用。

以下是尝试加载PDF文档的工作示例：

除Mozilla Firefox外，所有浏览器均可正常使用。

目前我在使用jQuery UI Dialog作为其在所有浏览器中加载PDF的工作。

如果有任何解决方案可以让Firefox中的bootstrap模式工作，请告诉我。

模态html：

<div class="container"> <a class="modalButton" data-toggle="modal" data-src="http://www.pdf995.com/samples/pdf.pdf" data-height=320 data-width=450 data-target="#myModal">Click me</a>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                 <h4 class="modal-title" id="myModalLabel">Modal title</h4>

            </div>
            <div class="modal-body">
                <iframe frameborder="0"></iframe>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

JS：

$('a.modalButton').on('click', function (e) {
var src = $(this).attr('data-src');
var height = $(this).attr('data-height') || 300;
var width = $(this).attr('data-width') || 400;

$("#myModal iframe").attr({
    'src': src,
        'height': height,
        'width': width
});
});

Bootstrap v3.2.0 Modal iFrame无法在Firefox中运行

0 个答案: