반응형
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 | <body> <iframe id=“iframeA” src=“test.html”></iframe> </body> //iframe 접근 window.frames.length; // 1 window.frames[0].document; // iframe의 window의 document객체 document.getElementById(‘iframeA’); // iframe 엘리먼트 document.getElementById(‘iframeA’).contentWindow.document; // iframe의 window의 document객체 // iframe객체의 window $('iframe').get(0).contentWindow // window // iframe객체의 document $('iframe').get(0).contentDocument // document // 또는 $('iframe').get(0).contentWindow.document // document // iframe 이전페이지로 $('iframe').get(0).contentWindow.history.go(-1); //iframe 새로고침 $('iframe').get(0).contentDocument.location.reload(); // document //iframe 로드 $('iframe').load(function(){ //iframe이 모두 load된후 제어 $(this).contents().find('body'); }); //부모html에서 자식iframe 접근, 제어 $('#iframe').contents().find('#foo').text('안녕하세요'); //부모html에서 자식iframe 함수 실행 $('#iframe').get(0).contentWindow.함수명(args); $('#iframe')[0].contentWindow.함수명(args); //부모html에서 자식iframe 변수접근 $('#iframe').get(0).contentWindow.접근할변수명; // 자식iframe에서 부모html의 다른 iframe에 접근 $('제어할 아이디', parent.frames["부모창 제어할 frame의 name값"].document).html("여기도 제어한다."); // 자식iframe에서 부모html 접근 (최상위 부모html에 접근된다.) $('부모창 제어할 아이디', parent.document).contents().find('body').html(); // $('부모창 제어할 아이디', parent.document) -> $('#ID이름',top.document)로 변경해도 된다. // html -> iframe -> iframe -> iframe 이런 구조일 경우 // 자식iframe 한단계 윗 부모html(iframe)에 접근하기 window.frameElement // iframe 또는 this.frameElement .parentNode // 부모 <div> <iframe src="sub.html"></iframe> </div> window.frameElement.parentNode // 자식iframe을 감싸는 부모는 div가 된다. if(!window.frameElement){ console.log('최상위 프레임'); } // 부모에서 -> 자식 iframe body에 걸려있는 이벤트 trigger("이벤트명", "전달객체") $('#iframe2')[0].contentWindow.$('body').trigger('eventEvnt', {"a": "홍길동"}); document.getElementById('iframe2').contentWindow.$('body').trigger('eventEvnt', {"a": "홍길동"}); // 자식에서 -> 부모 iframe body에 걸려있는 이벤트 trigger("이벤트명", "전달객체") // this.$('div') // 이런개념 this(window)는 생략 가능하므로.. 다른 iframe에선 명시적으로 (top, parent)앞에 붙여준다. top.$('body').trigger('eventname', {"a" : "홍길동"}); // 최상위 iframe 접근 (root개념) parent.$('body').trigger('eventname', {"a" : "홍길동"}); // 한단계 위 부모 iframe 접근 parent.parent.$('body').trigger('eventname', {"a" : "홍길동"}); // 두단계 위 부모 iframe 접근 // 부모에 jQuery 가 로딩되어 있다면 굳이 다시 로딩 할 거 없이 이렇게 (function($, f) { $(function() { $(f).closest('form').find('[name=image]').val("test"); }); })(parent.jQuery, window.frameElement); // 속성줄때 .appendTo($('#ID이름',parent.document)) // 이렇게하면 ID를 못찾는다 .appendTo($(top.document).find("# ID이름")); // 이런식으로 속성주면 된다 | cs |
윈도우객체, iframe 참고 : http://ohgyun.com/531
728x90
반응형
'JavaScript, jQuery, Java' 카테고리의 다른 글
| 전자정부 프레임 워크 EgovMap 사용하기 (0) | 2017.12.20 |
|---|---|
| div id를 이용한 iframe 팝업창 닫기 (0) | 2017.12.20 |
| 자바스크립트 에러/유효성 검사 (0) | 2017.12.20 |
| 크롬에서는 되는데 익스플로러에서 안될 때(2) - Date() 날짜 및 시간 함수 (0) | 2017.12.20 |
| div 모니터 크기, 해상도에 맞추기(resize) (0) | 2017.12.20 |
댓글