HTML 요소의 이벤트를 iframe에 버블 링합니다.

큰 버튼 역할을하는 iframe이 있습니다. iframe 내부의 전체 콘텐츠는 클릭 대상 중 하나입니다.HTML 요소의 이벤트를 iframe에 버블 링합니다.

이 예제에서와 같이 iframe에 HTML 일부를 가져오고 싶습니다.

<html> 
    <head> 
     <style> 
      iframe { 
       height: 100px; 
       width: 300px; 
      } 
      div { 
      position: relative; 
      } 
      a { 
       position: absolute; 
       top: 0; 
       left: 0; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="content"> 
      <iframe src="frame.html"></iframe> 
      <a id="text">Image</a> 
     </div> 
    </body> 
</html>

또한 라이브 예를 볼 수 있습니다 여기에 http://dev.gjcourt.com/iframe

문제는 내가 아래로 iframe을에 앵커 거품에서 클릭 이벤트를하고 싶은 것입니다. 이것을 가능하게 할 방법이 있습니까?

출처

2011-03-21 gjcourt

iframe을 절대적으로 배치하고 iframe의 배경을 투명하게 만들고 텍스트/기타 콘텐츠보다 높은 z- 색인을 지정하십시오.

왜이 용도로 iframe을 사용하고 있습니까?

출처

2011-03-21 21:02:24

iframe을 사용하는 이미지 업로드 기능은 xdomain이어야하며 HTML5가없고 File API에는 xdomain 비동기 업로드를 수행 할 신뢰할 수있는 방법이 없기 때문에 iframe이 필요합니다. – gjcourt

이 작품! 도움이되는 답장을 보내 주셔서 감사합니다. 이제 그것이 제품에 통합되는지 확인하십시오 ... 상향 투표를하지 않는 것에 대해 사과드립니다.하지만이를 수행하려면 15 명의 담당자가 필요합니다. – gjcourt

나는 gjcourt 대신에 upvote! – thedz

이것은 가능한 Clickjacking의 예이며 대부분의 브라우저는이를 방지하려고 시도합니다.

출처

2011-03-21 21:03:04 Zikes

종류 ... 나는 악의적 인 것을하려고하지 않는다. xdomain을 만들기 위해 iframe에서 클릭이 필요합니다. – gjcourt

당신의 의도는 훌륭하지만, 브라우저는 여전히 그것을 막으려 고 할 책임이 있으며, 솔루션이 의지되어서는 안되며 (실제로 브라우저 공급 업체에보고되어야 함) 모든 해결책이 우회됩니다. 액세스하려는 사이트에 API 또는 이와 유사한 것이 없다고 확신합니까? – Zikes

나는 당신과 의견이 어긋납니다. Clickjacking은 피해야하지만 내 제품은 누군가가 자신의 웹 사이트를 사용하도록 선택한 내장형 위젯입니다. 내가 이것을하려고하는 이유는 지역화를위한 것이므로, 배경 이미지 대신에 번역 가능한 문자열을 표시하는 것이 좋을 것입니다 (또한 폰트 상속에 유용합니다). 누군가 내 제품을 사용하기로 선택했기 때문에 버튼이 이미 iframe 내부에 존재하기 때문에 (버튼처럼 페이스 북을 생각해보십시오) 문제가되지 않아야합니다. – gjcourt

@Zikes가 언급했듯이 이것은 클릭 잭 공격이지만, 요즘은 여전히 가능합니다. SVG 요소로 iframe을 오버레이하고 pointer-events = "none"으로 설정하면 모든 커서 이벤트가 SVG 요소를 통해 iframe으로 전달됩니다. 더 많은 예제와 crossbrowser solutions in this article을 찾을 수 있습니다.

출처

2012-07-23 23:58:33

HTML 요소의 이벤트를 iframe에 버블 링합니다.

답변

관련 문제