자바스크립트 iframe 크로스 도메인에 대한 자세한 설명

1. ajax가 도메인을 넘나들지 못하는 문제의 원인은 무엇인가요?

ajax 자체는 실제로 XMLHttpRequest 객체를 통해 데이터와 상호 작용하며, 브라우저는 보안상의 이유로 js 코드를 허용하지 않습니다. 도메인 간 작업이므로 경고가 발행됩니다.

2. 완벽한 해결책은 없을까요?

아닙니다. 많은 해결 방법이 있지만 실제 상황에 따라 선택할 수 있습니다.

구체적인 상황은 다음과 같습니다.

1. 이 도메인과 하위 도메인 간의 상호 액세스: www.aa.com 및 book.aa.com
2. 및 기타 도메인 상호 액세스: www.aa.com 및 www.bb.com은 iframe 사용
3. 이 도메인과 다른 도메인 간의 상호 액세스: www.aa.com 및 www.bb.com은 XMLHttpRequest를 사용하여 프록시에 액세스합니다.
4 , 이 도메인과 다른 도메인 간의 상호 액세스: www.aa.com 및 www.bb.com JS를 사용하여 동적 스크립트 생성

해결책:

1. 하고 싶다면 데이터 상호작용을 위해서는 www.aa.com과 book.aa.com을 직접 개발해야 합니다. iframe을 사용하여 www.aa.com 페이지에 book.aa.com을 추가하고, www.aa.com과 iframe 모두에 document.domain = "aa.com"을 추가하면 도메인이 통합될 수 있습니다. . , 교차 도메인 액세스가 가능합니다. 동일한 도메인에 iframe을 삽입하는 것과 마찬가지로 내부에서 JS를 직접 호출할 수 있습니다. (이 방법은 시도해보지 않았지만 이론적으로는 가능합니다)

2. 두 도메인이 서로 다를 때 서로 호출하려면 두 도메인도 개발해야 합니다. iframe을 사용하면 데이터를 서로 전송할 수 있습니다. 해결책은 window.location 객체의 해시 속성을 사용하는 것입니다. 해시 속성은 http://domian/web/a.htm#dshakjdhsjka의 #dshakjdhsjka입니다. JS를 사용하여 해시 값을 변경하면 웹 페이지가 새로 고쳐지지 않습니다. JS를 통해 해시 값에 액세스하여 통신할 수 있습니다. 그러나 IE를 제외한 대부분의 다른 브라우저는 해시가 변경되는 한 기록을 기록하므로 앞뒤로 이동할 때 이를 처리해야 하므로 매우 번거롭습니다. 하지만 간단한 처리에는 여전히 사용할 수 있습니다. 아래의 특정 코드를 다운로드하겠습니다. 일반적인 과정은 페이지 a와 페이지 b가 서로 다른 도메인에 있고, iframe을 통해 a에 b가 추가되고, JS를 통해 a가 iframe의 해시 값을 수정하고, b에서 모니터가 만들어지는 것입니다(JS는 해시만 수정할 수 있기 때문에, 데이터 변경은 b에 의해서만 변경될 수 있습니다. 스스로 판단합니다), b의 해시 값이 수정되었음을 감지하고, 수정된 값을 얻고, 처리 후 a에 필요한 값을 반환한 다음, a의 해시 값을 수정합니다( a 자체가 일종의 쿼리 페이지인 경우 이에 주의해야 합니다.) 예를 들어 http://domian/web/a.aspx?id=3, b의 parent.window.location에서 직접 데이터를 가져올 수 없습니다. . 또한 권한이 없다는 오류를 보고합니다. A는 이를 전달해야 하므로 더 번거롭습니다. ) 또한 해시가 변경되면 반환된 데이터를 얻은 다음 그에 따라 처리해야 합니다. .

3. 가장 자주 접하고 가장 많이 사용하는 상황입니다. www.aa.com과 www.bb.com 중 하나만 수정할 수 있습니다. 이는 다른 하나가 다른 사람의 소유라는 것을 의미합니다. 사람들은 데이터를 얻으려고 할 때 연결 매개변수의 모양과 최종 반환된 형식을 알려줍니다. 데이터는. 당신이 해야 할 일은 도메인 아래에 새 웹페이지를 만들고 서버가 다른 사람의 웹사이트에서 데이터를 가져온 다음 이를 당신에게 반환하도록 하는 것입니다. domain1 아래의 a는 동일한 도메인 아래의 GetData.aspx에서 데이터를 요청하고, GetData.aspx는 domain2 아래의 ResponseData.aspx에 요청을 보내고, ResponseData.aspx는 데이터를 GetData.aspx에 반환하고, GetData.aspx는 이를 a에 반환합니다. . 데이터 요청입니다. GetData.aspx는 프록시 역할을 합니다. 자세한 내용은 내 코드를 참조하세요.

4. 이전과 다른 점은 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그를 사용하여 요청한다는 것입니다. 이 요구 사항은 두 도메인 모두 직접 개발해야 한다는 것입니다. 원칙은 JS 파일 삽입입니다. JS 태그는 이 도메인의 a에서 생성되고 해당 SRC는 요청된 다른 도메인의 페이지 b를 가리킬 수 있으며 JS 코드가 직접 반환될 수 있습니다. 스크립트의 src 속성은 도메인 간일 수 있기 때문입니다. 코드를 구체적으로 살펴보면 이 코드는 비교적 간단합니다.

상위 창에서 iframe의 요소 가져오기

格式：window.frames["iframe的name值"].document.getElementById("iframe中控件的ID").click();
实例：window.frames["ifm"].document.getElementById("btnOk").click();

형식:

var obj=document.getElementById("iframe的name").contentWindow;
var ifmObj=obj.document.getElementById("iframe中控件的ID");
ifmObj.click();
实例：
var obj=document.getElementById("ifm").contentWindow;
var ifmObj=obj.document.getElementById("btnOk");
ifmObj.click();

iframe에서 상위 창 요소 가져오기

格式：window.parent.document.getElementById("父窗口的元素ID").click();
实例：window.parent.document.getElementById("btnOk").click();

jquery

가져오기 iframe의 상위 창 요소

格式：$("#iframe的ID").contents().find("#iframe中的控件ID").click();//jquery 方法1
实例：$("#ifm").contents().find("#btnOk").click();//jquery 方法1

格式：$("#iframe中的控件ID",document.frames("frame的name").document).click();//jquery 方法2
实例：$("#btnOk",document.frames("ifm").document).click();//jquery 方法2

iframe의 상위 창 요소 가져오기

格式：$('#父窗口中的元素ID', parent.document).click();
实例：$('#btnOk', parent.document).click();