Chrome 개발자 도구를 사용하여 iframe 디버깅
Chrome 개발자 콘솔을 사용하여 내 앱의 변수 및 DOM 요소를보고 싶지만 앱이 iframeOpenSocial 앱이므로 내부에 존재합니다 .
따라서 상황은 다음과 같습니다.
<containing site>
<iframe id='foo' src='different domain'>
... my app ...
</iframe>
</containing site>
iframe개발자 콘솔에서 발생하는 작업에 액세스 할 수있는 방법이 있습니까? 내가하려고하면 document.getElementById("foo").something작동하지 않을 수 있습니다. 아마도 iframe다른 도메인에 있기 때문일 수 있습니다.
포함하는 사이트와도 대화 할 수 있어야하기 iframe때문에 새 탭에서 내용을 열 수 없습니다 iframe.
Chrome의 개발자 도구에는 맨 위에 요소, 네트워크, 소스 ... 탭 바로 아래에 Execution Context Selector(h / t felipe-sabino ) 막대 가 있으며 현재 탭의 컨텍스트에 따라 변경됩니다. Console (콘솔) 탭에 있으면 해당 막대에 드롭 다운이있어 콘솔이 작동 할 프레임 컨텍스트를 선택할 수 있습니다. 이 드롭 다운에서 프레임을 선택하면 적절한 프레임 컨텍스트에서 자신을 찾을 수 있습니다. :디
크롬 v59 
크롬 v33 
Chrome v32 이하 
현재 콘솔에서 평가는 페이지의 메인 프레임과 관련하여 수행되며 메인 프레임 자체와 동일한 교차 출처 정책을 준수합니다. 이것은 메인 프레임이 할 수 없다면 iframe의 요소에 접근 할 수 없다는 것을 의미합니다. 그래도 스크립트 패널을 사용하여 중단 점을 설정하고 코드를 디버깅 할 수 있습니다.
업데이트 : 이것은 더 이상 사실이 아닙니다. Metagrapher 's answer를 참조하십시오 .
상당히 복잡한 시나리오에서 Chrome 에서이 작업을 수행하는 방법에 대한 허용 된 답변이 효과가 없습니다. 대신 iframe의 일부인 소스를 포함하여 모든 '소스'를 표시하는 Firefox 디버거 (Firefox 개발자 도구의 일부)를 대신 사용해보십시오.
iFrame이 다음과 같이 사이트를 가리키는 경우 :
<html>
<head>
<script type="text/javascript" src="/jquery.js"></script>
</head>
<body>
<iframe id="my_frame" src="/wherev"></iframe>
</body>
</html>
이런 종류의 것을 통해 iFrame DOM에 접근 할 수 있습니다.
var iframeBody = $(window.my_frame.document.getElementsByTagName("body")[0]);
iframeBody.append($("<h1/>").html("Hello world!"));
참고 URL : https://stackoverflow.com/questions/3275816/debugging-iframes-with-chrome-developer-tools
'Programing' 카테고리의 다른 글
| 클래스 멤버 함수 템플릿이 가상 일 수 있습니까? (0) | 2020.03.20 |
|---|---|
| Sass .scss : 중첩 및 여러 클래스? (0) | 2020.03.20 |
| C ++에서 기본 매개 변수 값을 어디에 두어야합니까? (0) | 2020.03.20 |
| DEBUG = False로 설정하면 500 오류가 발생합니다 (0) | 2020.03.20 |
| 파이썬에서 두 datetime 객체의 시간 차이를 어떻게 알 수 있습니까? (0) | 2020.03.20 |