父级和iframe中的Bootstrap.js文件

Question

I am creating a web app using bootstrap by twitter. 我正在使用Twitter的bootstrap创建一个Web应用程序。 The app contains of a page which loads up another page of the same domain in an iframe. 该应用包含一个页面，该页面可在iframe中加载同一域的另一个页面。 Now my problem is, if the page that I am loading in iframe also contains bootstrap.js file it starts conflicting with the app. 现在我的问题是，如果我要在iframe中加载的页面也包含bootstrap.js文件，它将开始与该应用程序发生冲突。 For example, my app has a accordion (collapse) http://twitter.github.com/bootstrap/javascript.html#collapse built using the data attributes. 例如，我的应用程序使用数据属性构建了一个手风琴（折叠） http://twitter.github.com/bootstrap/javascript.html#collapse 。 Once a page with bootstrap.js is loaded the collapse event starts getting fired twice.So something like 一旦加载了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>

Here when I try to click on Menu #1, the code of Bootstrap.js gets triggered twice which ends ups in showing and then hiding the menu. 在这里，当我尝试单击菜单＃1时，Bootstrap.js的代码被触发两次，最终导致显示然后隐藏菜单。 But my problem is not just limited to the menu. 但是我的问题不仅限于菜单。 I need to be able to use bootstrap.js in my app and also allow pages which already contain bootstrap.js to be loaded inside the iframe. 我需要能够在我的应用程序中使用bootstrap.js，还需要将已经包含bootstrap.js的页面加载到iframe中。

Is there a way around this or am I doing something wrong? 有办法解决还是我做错了什么？

Answer 1

found the problem.. it was very specific for my app. 找到了问题..这是非常适合我的应用程序。 The way it was working was - there was an included JS file to trigger the app inside the "target" webpage. 它的工作方式是-在“目标”网页中有一个包含的JS文件来触发该应用程序。 The JS file would not remove everything from the page and build an iframe to put load the content of the "target" inside iframe. JS文件不会从页面中删除所有内容，而是构建一个iframe来将“目标”的内容加载到iframe中。 Now in this case, I had BootstrapJS running before the app.js file which in turn resulted in getting executed in the "parent" frame and then when the app loads it was getting reloaded causing the conflict (or multiple events due to multiple inclusion). 现在在这种情况下，我让BootstrapJS在app.js文件之前运行，这又导致在“父”框架中执行，然后在应用程序加载时被重新加载，导致冲突（或由于多个包含而导致的多个事件）。

Answer 2

I had the same issue in IE9 only. 我只在IE9中有同样的问题。

I was opening an instance of my website in an IFRAME dialog. 我正在IFRAME对话框中打开网站实例。 Meaning that there was 2 instances of Bootstrap, like above. 意味着有2个以上的Bootstrap实例。

When I moused out of the IFRAME it resized the underlying layout to match that of the width of the smaller one in the IFRAME. 当我从IFRAME中移出鼠标时，它调整了底层布局的大小，以匹配IFRAME中较小的布局的宽度。

To get round it I had to disable the opening pages bootstrap-responsive.js stylesheet using javascript. 为了解决这个问题，我不得不使用javascript禁用打开页面的bootstrap-sensitive.js样式表。 You can then turn it back on, when you close the IFRAME dialog. 关闭IFRAME对话框后，可以将其重新打开。

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

Horrible hack, I know. 骇人的骇客，我知道。

父级和iframe中的Bootstrap.js文件

问题描述

2 个解决方案

解决方案1
1 已采纳 2014-05-07 04:49:37

解决方案2
0 2012-12-14 10:42:25

父级和iframe中的Bootstrap.js文件

问题描述

2 个解决方案

解决方案1 1 已采纳 2014-05-07 04:49:37

解决方案2 0 2012-12-14 10:42:25

解决方案1
1 已采纳 2014-05-07 04:49:37

解决方案2
0 2012-12-14 10:42:25