单击时在引导模式中打开 iframe [英] Open Iframe in bootstrap modal on click

查看：24
本文介绍了单击时在引导模式中打开 iframe的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试创建一个按钮来打开一个包含 iframe 的模式.iframe 应该只在模态打开后加载.现在，当我单击按钮打开模态时，没有加载任何内容，控制台中也没有给出任何错误.

我正在关注我在此处找到的旧片段，但似乎使用了较新版本的引导程序，它似乎不起作用.

查询

var frameSrc = "http://test.com";$('#ticketViewBtn').click(function(){$('#ticketView').on('show', function () {$('iframe').attr("src",frameSrc);});$('#ticketView').modal({show:true})});

引导程序

 <button class="btn btn-primary btn-sm" id="#ticketViewBtn" data-toggle="modal" data-target="#ticketView">票<!-- 模态--><div class="modalfade" id="ticketView" tabindex="-1" role="dialog" aria-labelledby="ticketViewLabel" 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="ticketViewLabel">TICKET</h4>

<div class="modal-body"><iframe src="" height="600px" width="800px" frameborder="0"></iframe>

<div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>

<!--/.modal-content -->

<!--/.modal-dialog -->

<!--/.modal -->

解决方案

使用此代码加载 iframe .

$('#ticketViewBtn').click(function(){var iframe_id = $("#myiframe");iframe.attr("src", iframe.data("src"));$('#ticketView').modal({show:true})});<iframe id="myiframe" src="" height="600px" data-src="http://test.com" src="about:blank" width="800px" frameborder="0" onload="resizeIframe(this)" ></iframe>功能调整大小Iframe(iframe){iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";}

I am attempting to create a button that opens a modal containing an iframe. The iframe should only be loading once the modal opens. Right now when I click on my button to open the modal, nothing is loaded and no errors are given in console.

I am following an old snippet I found here but it seems with a newer version of bootstrap, it does not seem to work.

Jquery

var frameSrc = "http://test.com";

$('#ticketViewBtn').click(function(){
    $('#ticketView').on('show', function () {

        $('iframe').attr("src",frameSrc);

    });
    $('#ticketView').modal({show:true})
});

Bootstrap

                        <!-- Button trigger modal -->
                        <button class="btn btn-primary btn-sm" id="#ticketViewBtn" data-toggle="modal" data-target="#ticketView">
                            TICKET
                        </button>
                        <!-- Modal -->
                        <div class="modal fade" id="ticketView" tabindex="-1" role="dialog" aria-labelledby="ticketViewLabel" 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="ticketViewLabel">TICKET</h4>
                                    </div>
                                    <div class="modal-body">
                                        <iframe src="" height="600px" width="800px" frameborder="0"></iframe>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                    </div>
                                </div>
                                <!-- /.modal-content -->
                            </div>
                            <!-- /.modal-dialog -->
                        </div>
                        <!-- /.modal -->

解决方案

Use this code for load the iframe .

$('#ticketViewBtn').click(function(){    
    var iframe_id = $("#myiframe");
    iframe.attr("src", iframe.data("src")); 
    $('#ticketView').modal({show:true})
});

<iframe id="myiframe" src="" height="600px" data-src="http://test.com" src="about:blank" width="800px" frameborder="0" onload="resizeIframe(this)" ></iframe>

function resizeIframe(iframe) {
    iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";        
}

这篇关于单击时在引导模式中打开 iframe的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆