1

twitterでbootstrapを使ってWebアプリを作っています。アプリには、同じドメインの別のページを iframe に読み込むページが含まれています。今私の問題は、iframe にロードしているページに bootstrap.js ファイルも含まれている場合、アプリと競合し始めることです。たとえば、私のアプリには、データ属性を使用して構築されたアコーディオン (折りたたみ) http://twitter.github.com/bootstrap/javascript.html#collapseがあります。bootstrap.js を含むページが読み込まれると、折りたたみイベントが 2 回発生し始めます。

<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 のコードが 2 回トリガーされ、メニューが表示されてから非表示になります。しかし、私の問題はメニューだけにとどまりません。アプリで bootstrap.js を使用できるようにする必要があります。また、すでに bootstrap.js を含むページを iframe 内にロードできるようにする必要があります。

これを回避する方法はありますか、それとも何か間違っていますか?

4

2 に答える 2

1

問題が見つかりました..それは私のアプリに非常に固有のものでした。それが機能していた方法は、「ターゲット」Webページ内でアプリをトリガーするためのJSファイルが含まれていたことです。JS ファイルは、ページからすべてを削除して iframe を構築し、iframe 内に「ターゲット」のコンテンツをロードするわけではありません。この場合、app.js ファイルの前に BootstrapJS を実行していたため、「親」フレームで実行され、アプリが読み込まれるとリロードされて競合が発生しました (または複数のインクルージョンによる複数のイベント)。 .

于 2014-05-07T04:49:37.993 に答える
0

私はIE9でのみ同じ問題を抱えていました。

IFRAME ダイアログで自分の Web サイトのインスタンスを開いていました。上記のように、Bootstrap のインスタンスが 2 つあったことを意味します。

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 に答える