Question

我正在通过Twitter使用bootstrap创建一个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，并允许已经包含bootstrap.js的页面加载到iframe中。

有没有解决方法或我做错了什么？

Answer 1

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

Answer 2

我在IE9中只有同样的问题。

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

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

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

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

可怕的黑客，我知道。

父和iframe中的Bootstrap.js文件

2 个答案: