jQuery로 iframe의 콘텐츠에 액세스하는 방법은 무엇입니까?

116

jQuery를 사용하여 iframe의 콘텐츠에 액세스하려면 어떻게해야합니까? 이 작업을 시도했지만 작동하지 않습니다.

iframe 콘텐츠 : <div id="myContent"></div>

jQuery : $("#myiframe").find("#myContent")

어떻게 액세스 할 수 myContent있습니까?

jquery / javascript 와 유사 : iframe의 콘텐츠에 액세스 하지만 허용되는 답변은 내가 찾던 내용이 아닙니다.

jquery iframe

— mbillard
소스

방금 Firefox 콘솔에 내장 된 $ 변수가 완전한 jQuery처럼 보이지 않는다는 것을 알았습니다. (나는 jQuery 변수가 없다는 것을 깨달은 후 jQuery의 소스 코드를로드하지 않았다는 것을 알게 된 후 이것을 생각했습니다.)

— eel ghEEz

답변:

214

다음 contents()방법 을 사용해야합니다 .

$("#myiframe").contents().find("#myContent")

출처 : http://simple.procoding.net/2008/03/21/how-to-access-iframe-in-jquery/

API 문서 : https://api.jquery.com/contents/

— mbillard
소스

오류를주세요 : 오류 : 'ownerDocument'속성에 대한 액세스 권한이 거부되었습니다.

— Imran Khan

ime : 아마도 다음과 같은 이유로 인해 오류가 발생할 수 있습니다. 1) Iframe이 동일한 도메인에 속하지 않습니다. 2) Iframe로드 이벤트 전에 읽으려고합니다.

— iMatoria 2013

액세스를 시도하고 오류가 발생하기 전에 iframe 콘텐츠가 동일한 도메인에 있는지 확인하는 방법이 있습니까?

— Kamafeather

소스 URL이 손상되었습니다.

— karthzDIGI

@jperezmartin : 메인 페이지와 iframe간에 정보를 전송하는 자바 스크립트 라이브러리를 사용해야합니다. 기본적으로 크로스 브라우저 기능으로 인해 브라우저에서 거부되었습니다. 죄송합니다. 그런 도서관이 필요하지 않았기 때문에 알지 못합니다.

— iMatoria

<html>
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript">

$(function() {

    //here you have the control over the body of the iframe document
    var iBody = $("#iView").contents().find("body");

    //here you have the control over any element (#myContent)
    var myContent = iBody.find("#myContent");

});

</script>
</head>
<body>
  <iframe src="mifile.html" id="iView" style="width:200px;height:70px;border:dotted 1px red" frameborder="0"></iframe>
</body>
</html>

— Andres descalzo
소스

iframe의 소스가 외부 도메인 인 경우 브라우저는 iframe 콘텐츠를 숨 깁니다 (동일한 출처 정책). 해결 방법은 외부 내용을 파일에 저장하는 것입니다 (예 : PHP).

<?php
    $contents = file_get_contents($external_url);
    $res = file_put_contents($filename, $contents);
?>

그런 다음 새 파일 내용 (문자열)을 가져 와서 html로 구문 분석합니다 (예 : jquery에서).

$.get(file_url, function(string){
    var html = $.parseHTML(string);
    var contents = $(html).contents();
},'html');

— fireb86
소스