以模式打开 URL答案

【问题标题】：Open URL in a modal以模式打开 URL
【发布时间】：2019-02-23 11:39:49
【问题描述】：

我正在尝试在引导模式中打开一个链接。我收到错误

错误

jquery-2.1.1.js:2 Uncaught Error: Syntax error, unrecognized expression: https://google.com

这是我要执行的代码 -

HTML

<div class="navbar-wrapper">
   <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
         <div class="navbar-header page-scroll">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">WEBAPPLAYERS</a>
         </div>
         <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
               <li><a class="page-scroll" href="#page-top">Home</a></li>
               <li><a class="page-scroll" href="#contact">Contact</a></li>
               <li><a class="page-scroll bootpopup" href="https://google.com" target="popupModal2">Modal Open URL</a></li>
            </ul>
         </div>
      </div>
   </nav>
</div>
<div id="popupModal2" class="modal hide fade" tabindex="-1" role="dialog">
   <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">×</button>
      <h3>Title</h3>
   </div>
   <div class="modal-body">
      <iframe src="" style="zoom:0.60" frameborder="0" height="250" width="99.6%"></iframe>
   </div>
   <div class="modal-footer">
      <button class="btn" data-dismiss="modal">OK</button>
   </div>
</div>

<script>
$('.bootpopup').click(function () {
    var frametarget = $(this).attr('href');
    var targetmodal = $(this).attr('target');
    if (targetmodal == undefined) {
        targetmodal = '#popupModal';
    } else {
        targetmodal = '#' + targetmodal;
    }
    if ($(this).attr('title') != undefined) {
        $(targetmodal + ' .modal-header h3').html($(this).attr('title'));
        $(targetmodal + ' .modal-header').show();
    } else {
        $(targetmodal + ' .modal-header h3').html('');
        $(targetmodal + ' .modal-header').hide();
    }
    $(targetmodal).on('show', function () {
        $('iframe').attr("src", frametarget);
    });
    $(targetmodal).modal({
        show: true
    });
    return false;
});
</script>

我在整个项目中都在使用 Bopotstrap。我能否获得一些有关如何解决此问题的指导？我正在使用 Chrome 浏览器。但是，我想这个错误不管浏览器如何都会存在。

【问题讨论】：

在 Bootstrap3 版本中没有将 on('show') 更改为 on('show.bs.modal')？
谢谢侃海。我试过了，我得到了这个错误“拒绝在框架中显示'google.com'，因为它将'X-Frame-Options'设置为'sameorigin'。”
是的，这是很多网站的配置。你的代码现在很好。见stackoverflow.com/questions/41522652/…
谢谢看海。如果您可以将其发布为答案，我会接受并关闭。
做到了，在此先感谢 :)

标签： javascript iframe bootstrap-4 bootstrap-modal

【解决方案1】：

从 Bootstrap3 开始，on('show') 已替换为 on('show.bs.modal')。如果您在代码中进行该更改，它应该可以工作。

【讨论】：