Internet Explorer 中的 Iframe 内不显示模态弹出窗口

Posted 2023-05-09

【中文标题】Internet Explorer 中的 Iframe 内不显示模态弹出窗口

【英文标题】：Modal Popup Not Displaying inside Iframe in Internet Explorer

【发布时间】：2014-02-03 01:04:44

【问题描述】：

我使用 twitter bootstrap 和 jquery 创建了一个 php Web 应用程序。此应用程序位于我们网站上的 iframe 中：http://southcommdigital.com/admin/。当您单击右上角的登录链接时，会弹出一个带有登录表单的模式。这在 Firefox 和 Chrome 中完美运行，但模式不会显示在 Internet Explorer 中。此外，如果您在此处浏览到 iframe 页面本身，这将在 IE 中工作：http://omgsurvey.com/apps/Dan/index.php。这是一个已知问题吗？有人知道解决方法吗？谢谢你能给我的任何帮助。

触发链接：

<a data-toggle="modal" href="#loginModal">
  <span class="glyphicon glyphicon-log-in"> </span>&nbsp;Login
</a>

弹出代码：

<div class="modal fade text-center" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" style="max-width: 400px;">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h1 class="modal-title">Login</h1>
      </div>
      <form role="form" name="loginformname" method="post" id="loginformname" class="loginformid" enctype="application/x-www-form-urlencoded" action="form_action.php">
        <div class="modal-body">
          <div class="row">
            <div class="col-md-12 text-left">
              <div class="form-group">
                <label for="username" class="control-label">Username</label>
                <div>
                  <input type="text" class="form-control" id="username" name="username" placeholder="">
                </div>
              </div>
              <div class="form-group">
                <label for="password" class="control-label">Password</label>
                <div>
                  <input type="password" class="form-control" id="password" name="password" placeholder="">
                </div>
              </div>
              <input name="action" id="action" value="login" type="hidden">
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <input name="submit" id="submit" value="Login" type="submit" class="btn btn-primary">
        </div>
      </form> 
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->      <!-- END LOGIN MODAL  --> 

【参考方案1】：

根据您的版本，您可以在 IE (F12) 中查看控制台，您似乎有一些错误需要解决。

【讨论】：

似乎 Internet Explorer 不允许访问在 iframe 内调用 jquery 的脚本。这是一个跨域的 javascript/iframe 问题吗？

在引用 jQuery 之前您可能正在运行某些东西吗？

嗯，我得到了 jquery 脚本的“拒绝访问”，然后像 jQuery 之类的东西是未定义的。这似乎都与第一个 jquery 脚本调用有关：<script src="http://omgsurvey.com/apps/Dan/js/jquery-1.10.1.min.js"></script>