[JQUERY] jQuery를 / 자바 스크립트 : iframe이 내용에 접근
JQUERYjQuery를 / 자바 스크립트 : iframe이 내용에 접근
해결법
-
1.내가 무슨 일을하는 것은 동일 출처 정책에 따라 생각합니다. 이것은 당신이 허가를 거부 유형의 오류를 얻고있는 이유해야한다.
내가 무슨 일을하는 것은 동일 출처 정책에 따라 생각합니다. 이것은 당신이 허가를 거부 유형의 오류를 얻고있는 이유해야한다.
-
2.의
의
$("#iFrame").contents().find("#someDiv").removeClass("hidden");
참고
-
3.당신은 .contents () jQuery를의 방법을 사용할 수 있습니다.
당신은 .contents () jQuery를의 방법을 사용할 수 있습니다.
$(document).ready(function(){ $('#frameID').load(function(){ $('#frameID').contents().find('body').html('Hey, i`ve changed content of <body>! Yay!!!'); }); });
-
4.iframe이의 SRC가 다른 도메인의 경우 당신은 아직도 그것을 할 수 있습니다. 당신은 PHP로 외부 페이지를 읽을 필요하고 도메인에서 에코. 이 같이 :
iframe이의 SRC가 다른 도메인의 경우 당신은 아직도 그것을 할 수 있습니다. 당신은 PHP로 외부 페이지를 읽을 필요하고 도메인에서 에코. 이 같이 :
<?php $URL = "http://external.com"; $domain = file_get_contents($URL); echo $domain; ?>
이 같은 무언가 :
<html> <head> <title>Test</title> </head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> <script> $(document).ready(function(){ cleanit = setInterval ( "cleaning()", 500 ); }); function cleaning(){ if($('#frametest').contents().find('.selector').html() == "somthing"){ clearInterval(cleanit); $('#selector').contents().find('.Link').html('ideate tech'); } } </script> <body> <iframe name="frametest" id="frametest" src="http://yourdomain.com/iframe_page.php" ></iframe> </body> </html>
위는 액세스가 등을 거부하지 않고 iframe을 통해 외부 페이지를 편집하는 방법에 대한 예입니다 ...
-
5.나는 이런 식으로 청소기를 찾을 수 있습니다 :
나는 이런 식으로 청소기를 찾을 수 있습니다 :
var $iframe = $("#iframeID").contents(); $iframe.find('selector');
-
6.사용하다
사용하다
iframe.contentWindow.document
대신에
iframe.contentDocument
-
7.당신은 당신이 확실 iframe이 그것을 액세스하기 전에 완성 된로드를 가지고 있는지 확인 그래서, iframe이의 온로드 핸들러에 이벤트를 첨부하고 거기에 JS를 실행해야합니다.
당신은 당신이 확실 iframe이 그것을 액세스하기 전에 완성 된로드를 가지고 있는지 확인 그래서, iframe이의 온로드 핸들러에 이벤트를 첨부하고 거기에 JS를 실행해야합니다.
$().ready(function () { $("#iframeID").ready(function () { //The function below executes once the iframe has finished loading $('some selector', frames['nameOfMyIframe'].document).doStuff(); }); };
위 '하지 아직로드'문제를 해결할 것입니다,하지만 당신은 다른 도메인 인은 iframe에서 페이지를로드하는 경우에 관하여 권한은, 당신은 액세스가 보안 제한 사항으로 인해 할 수 없습니다.
-
8.당신은 페이지와 자신은 iframe (크로스 도메인 없음) 사이의 함수를 호출 할 window.postMessage를 사용할 수 있습니다.
당신은 페이지와 자신은 iframe (크로스 도메인 없음) 사이의 함수를 호출 할 window.postMessage를 사용할 수 있습니다.
선적 서류 비치
page.html
<!DOCTYPE html> <html> <head> <title>Page with an iframe</title> <meta charset="UTF-8" /> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script> var Page = { id:'page', variable:'This is the page.' }; $(window).on('message', function(e) { var event = e.originalEvent; if(window.console) { console.log(event); } alert(event.origin + '\n' + event.data); }); function iframeReady(iframe) { if(iframe.contentWindow.postMessage) { iframe.contentWindow.postMessage('Hello ' + Page.id, '*'); } } </script> </head> <body> <h1>Page with an iframe</h1> <iframe src="iframe.html" onload="iframeReady(this);"></iframe> </body> </html>
iframe.html
<!DOCTYPE html> <html> <head> <title>iframe</title> <meta charset="UTF-8" /> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script> var Page = { id:'iframe', variable:'The iframe.' }; $(window).on('message', function(e) { var event = e.originalEvent; if(window.console) { console.log(event); } alert(event.origin + '\n' + event.data); }); $(window).on('load', function() { if(window.parent.postMessage) { window.parent.postMessage('Hello ' + Page.id, '*'); } }); </script> </head> <body> <h1>iframe</h1> <p>It's the iframe.</p> </body> </html>
-
9.나는 액세스하기위한 다른 변형을 사용하는 것을 선호합니다. 부모에서 당신은 자식은 iframe의 변수에 액세스 할 수 있습니다. $ 변수도 그리고 당신은 단지 전화에 대한 액세스를받을 수 있습니다 window.iframe_id. $
나는 액세스하기위한 다른 변형을 사용하는 것을 선호합니다. 부모에서 당신은 자식은 iframe의 변수에 액세스 할 수 있습니다. $ 변수도 그리고 당신은 단지 전화에 대한 액세스를받을 수 있습니다 window.iframe_id. $
.. 예를 들어, window.view $ ( 'DIV') 숨기기 () - 숨기기 ID '보기'와 iframe이 모든 div의
그러나, 그것은 FF에서 작동하지 않습니다. 더 나은 호환성을 위해 당신은 사용해야합니다
$ ( '# iframe_id') [0] .contentWindow. $
-
10.가지고 당신은 jQuery의 내장 준비 기능을 사용하여 전체에 부하를 기다리고, 고전적인 시도?
가지고 당신은 jQuery의 내장 준비 기능을 사용하여 전체에 부하를 기다리고, 고전적인 시도?
$(document).ready(function() { $('some selector', frames['nameOfMyIframe'].document).doStuff() } );
에
-
11.나는 샘플 코드를 만들 수 있습니다. 지금 당신은 쉽게 다른 도메인에서 이해할 수있는 당신은에 액세스 할 수 없습니다 iframe 대응의 내용 .. 우리가 액세스 할 수있는 동일한 도메인은 iframe 내용
나는 샘플 코드를 만들 수 있습니다. 지금 당신은 쉽게 다른 도메인에서 이해할 수있는 당신은에 액세스 할 수 없습니다 iframe 대응의 내용 .. 우리가 액세스 할 수있는 동일한 도메인은 iframe 내용
난 당신이 내 코드를 공유,이 코드를 실행하십시오 콘솔을 확인합니다. 나는 콘솔에서 이미지 SRC를 인쇄 할 수 있습니다. 두 iframe이 다른 도메인 (타사)에서 동일한 도메인 및 다른 두에서 4 개 iframe이가오고있다 우선은 두 개의 이미지 SRC (https://www.google.com/logos/doodles/2015/googles-new-logo를 볼 수 있습니다 -5078286822539264.3-hp2x.gif
과
https://www.google.com/logos/doodles/2015/arbor-day-2015-brazil-5154560611975168-hp2x.gif ) 콘솔에서 또한 (이 권한 오류를 볼 수 있습니다 이 오류 : 사용 권한이 액세스 속성 '문서'거부
... irstChild)}, 내용 : 기능 (A) {m.nodeName (A, "iframe이") a.contentDocument를 반환 ...
) 어떤 타사은 iframe에서오고있다.
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top"> <p>iframe from same domain</p> <iframe frameborder="0" scrolling="no" width="500" height="500" src="iframe.html" name="imgbox" class="iView"> </iframe> <p>iframe from same domain</p> <iframe frameborder="0" scrolling="no" width="500" height="500" src="iframe2.html" name="imgbox" class="iView1"> </iframe> <p>iframe from different domain</p> <iframe frameborder="0" scrolling="no" width="500" height="500" src="https://www.google.com/logos/doodles/2015/googles-new-logo-5078286822539264.3-hp2x.gif" name="imgbox" class="iView2"> </iframe> <p>iframe from different domain</p> <iframe frameborder="0" scrolling="no" width="500" height="500" src="http://d1rmo5dfr7fx8e.cloudfront.net/" name="imgbox" class="iView3"> </iframe> <script type='text/javascript'> $(document).ready(function(){ setTimeout(function(){ var src = $('.iView').contents().find(".shrinkToFit").attr('src'); console.log(src); }, 2000); setTimeout(function(){ var src = $('.iView1').contents().find(".shrinkToFit").attr('src'); console.log(src); }, 3000); setTimeout(function(){ var src = $('.iView2').contents().find(".shrinkToFit").attr('src'); console.log(src); }, 3000); setTimeout(function(){ var src = $('.iView3').contents().find("img").attr('src'); console.log(src); }, 3000); }) </script> </body>
-
12.더 견고 경우 :
더 견고 경우 :
function getIframeWindow(iframe_object) { var doc; if (iframe_object.contentWindow) { return iframe_object.contentWindow; } if (iframe_object.window) { return iframe_object.window; } if (!doc && iframe_object.contentDocument) { doc = iframe_object.contentDocument; } if (!doc && iframe_object.document) { doc = iframe_object.document; } if (doc && doc.defaultView) { return doc.defaultView; } if (doc && doc.parentWindow) { return doc.parentWindow; } return undefined; }
과
... var frame_win = getIframeWindow( frames['nameOfMyIframe'] ); if (frame_win) { $(frame_win.contentDocument || frame_win.document).find('some selector').doStuff(); ... } ...
-
13.나는 그래서 찾고 다른 사람을 위해, 그냥 이것이다, JQuery와없이 iframe 대응의 내용을 점점 찾고 여기 결국 :
나는 그래서 찾고 다른 사람을 위해, 그냥 이것이다, JQuery와없이 iframe 대응의 내용을 점점 찾고 여기 결국 :
document.querySelector('iframe[name=iframename]').contentDocument
-
14.이 솔루션은 iframe이 같이 동일하게 작동합니다. 나는 다른 웹 사이트에서 모든 내용을 얻을 수있는 PHP 스크립트를 만들었습니다, 그리고 가장 중요한 부분은 쉽게 그 외부 콘텐츠에 사용자 정의 jQuery를 적용 할 수있다. 다른 웹 사이트의 모든 내용을 얻을 수 있습니다 그리고 당신은 당신의 맞춤 jQuery를 / JS를 적용 할뿐만 아니라 수있는 다음과 같은 스크립트를 참조하십시오. 이 콘텐츠는 모든 요소 나 페이지 내에서 사용 어디서나 할 수 있습니다.
이 솔루션은 iframe이 같이 동일하게 작동합니다. 나는 다른 웹 사이트에서 모든 내용을 얻을 수있는 PHP 스크립트를 만들었습니다, 그리고 가장 중요한 부분은 쉽게 그 외부 콘텐츠에 사용자 정의 jQuery를 적용 할 수있다. 다른 웹 사이트의 모든 내용을 얻을 수 있습니다 그리고 당신은 당신의 맞춤 jQuery를 / JS를 적용 할뿐만 아니라 수있는 다음과 같은 스크립트를 참조하십시오. 이 콘텐츠는 모든 요소 나 페이지 내에서 사용 어디서나 할 수 있습니다.
<div id='myframe'> <?php /* Use below function to display final HTML inside this div */ //Display Frame echo displayFrame(); ?> </div> <?php /* Function to display frame from another domain */ function displayFrame() { $webUrl = 'http://[external-web-domain.com]/'; //Get HTML from the URL $content = file_get_contents($webUrl); //Add custom JS to returned HTML content $customJS = " <script> /* Here I am writing a sample jQuery to hide the navigation menu You can write your own jQuery for this content */ //Hide Navigation bar jQuery(\".navbar.navbar-default\").hide(); </script>"; //Append Custom JS with HTML $html = $content . $customJS; //Return customized HTML return $html; }
from https://stackoverflow.com/questions/364952/jquery-javascript-accessing-contents-of-an-iframe by cc-by-sa and MIT license
'JQUERY' 카테고리의 다른 글
[JQUERY] jQuery를 사용하여 중단 Ajax 요청 (0) | 2020.09.21 |
---|---|
[JQUERY] 요소의 jQuery 스크롤 (0) | 2020.09.21 |
[JQUERY] jQuery.Ajax하여 파일을 다운로드 (0) | 2020.09.21 |
[JQUERY] 이 업로드하기 전에 이미지를 미리보기 (0) | 2020.09.21 |
[JQUERY] 자바 스크립트 / jQuery를 DOM 변경 리스너가 있습니까? (0) | 2020.09.21 |