부모와 iframe의 Bootstrap.js 파일

트위터별로 부트 스트랩을 사용하여 웹 앱을 만들고 있습니다. 앱에 동일한 도메인의 다른 페이지를 iframe에로드하는 페이지가 포함되어 있습니다. 이제 내 문제는 iframe에서로드하는 페이지에 bootstrap.js 파일이 포함되어 있으면 앱과 충돌하기 시작한다는 것입니다. 예를 들어, 내 앱에는 데이터 속성을 사용하여 작성된 아코디언 (붕괴) http://twitter.github.com/bootstrap/javascript.html#collapse이 있습니다. bootstrap.js있는 페이지가 나는 메뉴 # 1을 클릭 할 때 붕괴 이벤트가 여기에부모와 iframe의 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>

같은 twice.So 뭔가를 해고하기 시작로드되면 , Bootstrap.js의 코드가 끝나는 두 번 트리거됩니다 메뉴를 숨기고 표시합니다. 하지만 내 문제는 메뉴에만 국한되지 않습니다. 내 응용 프로그램에서 bootstrap.js를 사용할 수 있어야하며, 이미 bootstrap.js가 포함 된 페이지를 iframe 내부에로드 할 수 있어야합니다.

이 문제를 해결할 수있는 방법이 있습니까? 아니면 잘못된 것입니까?

출처

2012-08-28 Kshitiz Shankar

iframe에 문제가 없습니다 (예 : JSFiddle (http://jsfiddle.net/mmfansler/wxeY7/)). ** bootstrap.js ** 및 ** bootstrap-collapse.js **를 모두로드하고 있습니까? 그것은이 행동을 일으킬 것입니다. 또한 메뉴 # 2는 동일한 동작을 나타 냅니까? - 당신은 # 1만을 언급했습니다. – merv

메뉴 # 2는 아무 문제가 없습니다 .. –

나는 같은 문제가 있었지만 문제를 해결할 시간이 없었습니다. 그러나 나는 다른 사용자 정의 부트 스트랩을 만들고 "Grid System"및 "Responsive Utilities"옵션을 선택 취소하고 다운로드하여 문제를 해결했습니다. iframe에서이 새로운 미니 CSS를 독점적으로 사용합니다. 이 문제를 해결하는 미디어 쿼리를 제거하는 것처럼 보이지만 가장 이상적인 솔루션은 아닙니다. – Patrick

문제가 발견되었습니다. 내 앱에 매우 특이했습니다. 그것이 작동하는 방식은 - 거기에 "대상"웹 페이지 안에 애플 리케이션을 실행하는 JS 파일이 포함되어있었습니다. JS 파일은 페이지에서 모든 것을 제거하지 않고 iframe 내부에 "대상"의 내용을로드하기 위해 iframe을 작성하지 않습니다. 이제이 경우, app.js 파일을 실행하기 전에 BootstrapJS를 실행하여 "상위"프레임에서 실행되고 응용 프로그램이로드되면 충돌이 발생하거나 여러 개의 포함으로 인해 여러 이벤트가 다시로드됩니다. .

출처

2014-05-07 04:49:37

IE9에서만 동일한 문제가있었습니다.

IFRAME 대화 상자에서 내 웹 사이트의 인스턴스를 열었습니다. 위와 같이 부트 스트랩 인스턴스가 2 개 있다는 것을 의미합니다.

IFRAME에서 moused했을 때 IFRAME에서 더 작은 것의 폭과 일치하도록 기본 레이아웃의 크기를 조정했습니다.

반올림하려면 javascript를 사용하여 시작 페이지 bootstrap-responsive.js 스타일 시트를 비활성화해야했습니다. IFRAME 대화 상자를 닫으면 다시 켤 수 있습니다.

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

끔찍한 해킹입니다.

출처

2012-12-14 10:42:25 YorkshireDeveloper

그럴 수 없어 ... 내 iframe 페이지와 부모 페이지 모두 항상 부트 스트랩이 필요합니다 ... 부모 페이지는 사용자가 하위 페이지에서 몇 가지 사항을 편집 할 수있게합니다 ... 기본적으로 iframe과 부모 창은 항상 열려 있습니다 .. –

부모와 iframe의 Bootstrap.js 파일

답변

관련 문제