我正在使用 Twitter 的 Bootstrap 创建一个 Web 应用程序。该应用程序包含一个页面,该页面在 iframe 中加载同一域的另一个页面。现在我的问题是,如果我在 iframe 中加载的页面也包含 bootstrap.js 文件,它就会开始与应用程序发生冲突。 例如,我的应用程序有一个 Accordion (折叠)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 内。
有办法解决这个问题还是我做错了什么?
最佳答案
发现了问题..它对于我的应用程序来说非常具体。它的工作方式是 - 有一个包含的 JS 文件来触发“目标”网页内的应用程序。 JS 文件不会删除页面中的所有内容并构建一个 iframe 以将“目标”的内容加载到 iframe 内。现在在这种情况下,我让 BootstrapJS 在 app.js 文件之前运行,这又导致在“父”框架中执行,然后当应用程序加载时,它会重新加载,从而导致冲突(或由于多次包含而导致多个事件) .
关于javascript - 父级和 iframe 中的 Bootstrap.js 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12153598/