1

我正在使用 twitter 的引导程序创建一个 Web 应用程序。该应用程序包含一个页面，该页面在 iframe 中加载同一域的另一个页面。现在我的问题是，如果我在 iframe 中加载的页面也包含 bootstrap.js 文件，它开始与应用程序冲突。例如，我的应用程序有一个使用数据属性构建的手风琴（折叠） http://twitter.github.com/bootstrap/javascript.html#collapse 。加载带有 bootstrap.js 的页面后，折叠事件开始被触发两次。所以类似于

<head>//Bootstrap css and js files included</head>
<body>
   <div>
     //Collapsible Menu #1
   </div>
   <iframe>
       <head>
           //BootStrap.js script from same location as parent
       </head>
       <body>
           // Another Collapsible Menu #2
       </body>
    `  </head> 
   </iframe>
</body>

在这里，当我尝试单击菜单 #1 时，Bootstrap.js 的代码被触发两次，最终显示然后隐藏菜单。但我的问题不仅限于菜单。我需要能够在我的应用程序中使用 bootstrap.js，并且还允许在 iframe 中加载已经包含 bootstrap.js 的页面。

有没有办法解决这个问题或者我做错了什么？

4

2 回答 2

1

发现了问题..它对我的应用程序非常具体。它的工作方式是 - 有一个包含的 JS 文件来触发“目标”网页内的应用程序。JS 文件不会从页面中删除所有内容并构建一个 iframe 以将“目标”的内容加载到 iframe 中。现在在这种情况下，我让 BootstrapJS 在 app.js 文件之前运行，这反过来导致在“父”框架中执行，然后当应用程序加载时它被重新加载导致冲突（或由于多次包含而导致的多个事件） .

于 2014-05-07T04:49:37.993 回答
0

我只在 IE9 中遇到了同样的问题。

我在 IFRAME 对话框中打开了我的网站的一个实例。这意味着有 2 个 Bootstrap 实例，如上所示。

当我将鼠标移出 IFRAME 时，它会调整底层布局的大小以匹配 IFRAME 中较小布局的宽度。

为了解决这个问题，我不得不使用 javascript 禁用打开页面 bootstrap-responsive.js 样式表。然后，您可以在关闭 IFRAME 对话框时重新打开它。

if(navigator.userAgent.indexOf("Trident/5")>-1){
    window.parent.document.getElementById("responsiveCSS").sheet.disabled = true;
}

可怕的黑客攻击，我知道。

于 2012-12-14T10:42:25.777 回答