[JQUERY] 왜 동적으로 작성된 <iframe>에 <script>에 추가하는 이유는 상위 페이지에서 스크립트를 실행하는 것 같습니다.

2020. 10. 31. 12:31

cnpnote

JQUERY

왜 동적으로 작성된 에 <script>에 추가하는 이유는 상위 페이지에서 스크립트를 실행하는 것 같습니다.</h1> <h1>해결법</h1> <ol> <li> <div><hr /></div><h2>1.같은 문제가 있었고 해결책을 찾기 위해 몇 시간이 걸렸습니다. iframe의 문서를 사용하여 스크립트의 객체를 만들어야합니다.</h2> <p>같은 문제가 있었고 해결책을 찾기 위해 몇 시간이 걸렸습니다. iframe의 문서를 사용하여 스크립트의 객체를 만들어야합니다.</p> <pre><code>var myIframe = document.getElementById("myIframeId"); var script = myIframe.contentWindow.document.createElement("script"); script.type = "text/javascript"; script.src = src; myIframe.contentWindow.document.body.appendChild(script); </code></pre> <p>매력처럼 작동합니다!</p> </li> <li> <div><hr /></div><h2>2.나는 내 원래의 질문에 대한 답변을 찾지 못했지만, 나는 더 나은 또 다른 접근 방식을 찾았습니다 (적어도 내 목적으로).</h2> <p>나는 내 원래의 질문에 대한 답변을 찾지 못했지만, 나는 더 나은 또 다른 접근 방식을 찾았습니다 (적어도 내 목적으로).</p> <p>이것은 상위 페이지에서 jQuery를 사용하지 않습니다 (실제로 좋은 일이지만, 내가 그곳에서로드하지 않으려는 것이 좋을 것처럼). 그러나 <iframe>에서 jQuery는 분명히 완전히 유효하고 사용 가능한 방식으로 삽입됩니다. 내가하고있는 일은 처음부터 작성된 새로운 것을 가진 <iframe>의 문서 개체를 쓰는 것입니다. 이렇게하면 <iframe>의 문서 객체에 쓰는 문자열에 <script> 요소를 단순히 포함 할 수 있습니다.</p> <p>코드:</p> <pre><code><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>frame</title> </head> <body> <div id="test"></div> <script type="text/javascript"> // create a new <iframe> element var iframe = document.createElement('iframe'); // append the new element to the <div id="bucket"></div> var bucket = document.getElementById('test'); bucket.appendChild(iframe); // create a string to use as a new document object var val = '<scr' + 'ipt type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></scr' + 'ipt>'; val += '<scr' + 'ipt type="text/javascript"> $(function() { $("body").append("<h1>It works!</h1>"); }); </scr' + 'ipt>'; // get a handle on the <iframe>d document (in a cross-browser way) var doc = iframe.contentWindow || iframe.contentDocument; if (doc.document) { doc = doc.document; } // open, write content to, and close the document doc.open(); doc.write(val); doc.close(); </script> </body> </html> </code></pre> <p>나는 이것이 누군가가 길을 돕기를 바랍니다!</p> </li> <li> <div><hr /></div><h2>3.원래 질문에 대한 답변은 간단합니다 - 스크립트의 실행은 jQuery가 수행하며 jQuery가 맨 위 프레임에로드되기 때문에이를 추가하는 위치에 관계없이 스크립트가 실행되는 곳입니다. jQuery의 더 똑똑한 구현은 올바른 창 객체를 사용하기 위해 의심의 여지가 없지만 지금은 그들이 어떻게되는지에 대한 것입니다.</h2> <p>원래 질문에 대한 답변은 간단합니다 - 스크립트의 실행은 jQuery가 수행하며 jQuery가 맨 위 프레임에로드되기 때문에이를 추가하는 위치에 관계없이 스크립트가 실행되는 곳입니다. jQuery의 더 똑똑한 구현은 올바른 창 객체를 사용하기 위해 의심의 여지가 없지만 지금은 그들이 어떻게되는지에 대한 것입니다.</p> <p>해결 방법에 관해서는, 당신은 이미 두 가지 좋은 답변을 가지고 있습니다 (심지어 자신의 것이라도). 내가 추가 할 수있는 것은 해당 해결 방법을 iframe.js에 포함시키기 위해 해당 해결 방법을 사용할 수 있으며 맨 위의 마크 업 대신 jQuery 객체를 얻을 수 있지만 추가 마크 업을 삽입하십시오 ... 그러나 너무 잘 지나갈 수 있습니다.</p> </li> </ul> <p>from <a href='https://stackoverflow.com/questions/1591135/why-does-appending-a-script-to-a-dynamically-created-iframe-seem-to-run-the' target='_blank'>https://stackoverflow.com/questions/1591135/why-does-appending-a-script-to-a-dynamically-created-iframe-seem-to-run-the</a> by cc-by-sa and MIT license</p></div>      <div class="tt_adsense_bottom" style="margin-top:30px;"> <DIV class='ads_adsense_img' style='margin:40px 0px 40px 0px;'> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-8393857339019314" data-ad-slot="7474886381" data-ad-format="auto"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </DIV> </div>  <div class="container_postbtn #post_button_group"> <div class="postbtn_like"><script>window.ReactionButtonType = 'reaction'; window.ReactionApiUrl = '//cnpnote.tistory.com/reaction'; window.ReactionReqBody = { entryId: 19987 }</script> <div class="wrap_btn" id="reaction-19987" data-tistory-react-app="Reaction"></div><div class="wrap_btn wrap_btn_share"><button type="button" class="btn_post sns_btn btn_share" aria-expanded="false" data-thumbnail-url="https://t1.daumcdn.net/tistory_admin/static/images/openGraph/opengraph.png" data-title="[JQUERY] 왜 동적으로 작성된 &lt;iframe&gt;에 &lt;script&gt;에 추가하는 이유는 상위 페이지에서 스크립트를 실행하는 것 같습니다." data-description="왜 동적으로 작성된 에 나는 이것이 누군가가 길을 돕기를 바랍니다! 3.원래 질문에 대한 답변은 간단합니다 - 스크립트의 실행은 jQuery가 수행하며 jQuery가 맨 위 프레임에로드되기 때문에이를 추가하는 위치에 관계없이 스크립트가 실행되는 곳입니다. jQuery의 더 똑똑한 구현은 올바른 창 객체를 사용하기 위해 의심의 여지가 없지만 지금은 그들이 어떻게되는지에 대한 것입니다. 원래 질문에 대한 답변은 간단합니다 - 스크립트의 실행은 jQuery가 수행하며 jQuery가 맨 위 프레임에로드되기 때문에이를 추가하는 위치에 관계없이 스크립트가 실행되는 곳입니다. jQuery의 더 똑똑한 구현은 올바른 창 객체를 사용하기 위해 의심의 여지가 없지만 지금은 그들이 어떻게되는지에 대한 것입니다. 해결 방법에.." data-profile-image="https://t1.daumcdn.net/tistory_admin/static/manage/images/r3/default_L.png" data-profile-name="cnpnote" data-pc-url="https://cnpnote.tistory.com/entry/JQUERY-%EC%99%9C-%EB%8F%99%EC%A0%81%EC%9C%BC%EB%A1%9C-%EC%9E%91%EC%84%B1%EB%90%9C-iframe%EC%97%90-script%EC%97%90-%EC%B6%94%EA%B0%80%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0%EB%8A%94-%EC%83%81%EC%9C%84-%ED%8E%98%EC%9D%B4%EC%A7%80%EC%97%90%EC%84%9C-%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EB%A5%BC-%EC%8B%A4%ED%96%89%ED%95%98%EB%8A%94-%EA%B2%83-%EA%B0%99%EC%8A%B5%EB%8B%88%EB%8B%A4" data-relative-pc-url="/entry/JQUERY-%EC%99%9C-%EB%8F%99%EC%A0%81%EC%9C%BC%EB%A1%9C-%EC%9E%91%EC%84%B1%EB%90%9C-iframe%EC%97%90-script%EC%97%90-%EC%B6%94%EA%B0%80%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0%EB%8A%94-%EC%83%81%EC%9C%84-%ED%8E%98%EC%9D%B4%EC%A7%80%EC%97%90%EC%84%9C-%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EB%A5%BC-%EC%8B%A4%ED%96%89%ED%95%98%EB%8A%94-%EA%B2%83-%EA%B0%99%EC%8A%B5%EB%8B%88%EB%8B%A4" data-blog-title="복붙노트"><span class="ico_postbtn ico_share">공유하기</span></button> <div class="layer_post" id="tistorySnsLayer"></div> </div><div class="wrap_btn wrap_btn_etc" data-entry-id="19987" data-entry-visibility="public" data-category-visibility="public"><button type="button" class="btn_post btn_etc2" aria-expanded="false"><span class="ico_postbtn ico_etc">게시글 관리</span></button> <div class="layer_post" id="tistoryEtcLayer"></div> </div></div> <button type="button" class="btn_menu_toolbar btn_subscription #subscribe" data-blog-id="2840920" data-url="https://cnpnote.tistory.com/entry/JQUERY-%EC%99%9C-%EB%8F%99%EC%A0%81%EC%9C%BC%EB%A1%9C-%EC%9E%91%EC%84%B1%EB%90%9C-iframe%EC%97%90-script%EC%97%90-%EC%B6%94%EA%B0%80%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0%EB%8A%94-%EC%83%81%EC%9C%84-%ED%8E%98%EC%9D%B4%EC%A7%80%EC%97%90%EC%84%9C-%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EB%A5%BC-%EC%8B%A4%ED%96%89%ED%95%98%EB%8A%94-%EA%B2%83-%EA%B0%99%EC%8A%B5%EB%8B%88%EB%8B%A4" data-device="web_pc" data-tiara-action-name="구독 버튼_클릭"><em class="txt_state"></em><strong class="txt_tool_id">복붙노트</strong><span class="img_common_tistory ico_check_type1"></span></button> <div data-tistory-react-app="SupportButton"></div> </div>  <div class="another_category another_category_color_gray"> <h4>'<a href="/category/JQUERY">JQUERY</a>' 카테고리의 다른 글</h4> <table> <tr> <th><a href="/entry/JQUERY-%EC%84%A0%ED%83%9D-%EC%82%AC%ED%95%AD%EC%9D%84-%EB%B3%80%EA%B2%BD%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95-%EB%8B%A4%EB%A5%B8-%EC%84%A0%ED%83%9D-%EC%98%B5%EC%85%98%EC%9D%84-%EA%B8%B0%EB%B0%98%EC%9C%BC%EB%A1%9C-%EC%84%A0%ED%83%9D%ED%95%9C-%EC%98%B5%EC%85%98%EC%9D%84-%EC%84%A0%ED%83%9D%ED%95%98%EC%8B%AD%EC%8B%9C%EC%98%A4">[JQUERY] 선택 사항을 변경하는 방법 다른 선택 옵션을 기반으로 선택한 옵션을 선택하십시오.</a>  <span>(0)</span></th> <td>2020.10.31</td> </tr> <tr> <th><a href="/entry/JQUERY-%EC%9E%90%EB%B0%94-%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%A8%B8%EB%A6%AC-%EB%AA%B8-%EB%98%90%EB%8A%94-jquery">[JQUERY] 자바 스크립트 - 머리, 몸 또는 jquery?</a>  <span>(0)</span></th> <td>2020.10.31</td> </tr> <tr> <th><a href="/entry/JQUERY-JavaScript-jQuery-%EC%B2%B4%ED%81%AC-%EB%B8%8C%EB%A1%9C%EC%A7%80%EC%A7%80-%EB%A7%81%ED%81%AC%EB%A5%BC-%ED%99%95%EC%9D%B8%ED%95%98%EC%8B%AD%EC%8B%9C%EC%98%A4">[JQUERY] JavaScript / jQuery 체크 브로지지 링크를 확인하십시오</a>  <span>(0)</span></th> <td>2020.10.31</td> </tr> <tr> <th><a href="/entry/JQUERY-jQuery%EB%A1%9C-HTML-%EB%AC%B8%EC%9E%90%EC%97%B4%EC%9D%84-%ED%8C%8C%EC%8B%B1%ED%95%98%EC%8B%AD%EC%8B%9C%EC%98%A4">[JQUERY] jQuery로 HTML 문자열을 파싱하십시오</a>  <span>(0)</span></th> <td>2020.10.31</td> </tr> <tr> <th><a href="/entry/JQUERY-%EC%A0%9C%EC%B6%9C%ED%95%98%EA%B8%B0-%EC%A0%84%EC%97%90-%EC%96%91%EC%8B%9D%EC%97%90-%EC%B6%94%EA%B0%80-%ED%95%84%EB%93%9C%EB%A5%BC-%EC%B6%94%EA%B0%80%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95%EC%9D%80-%EB%AC%B4%EC%97%87%EC%9E%85%EB%8B%88%EA%B9%8C">[JQUERY] 제출하기 전에 양식에 추가 필드를 추가하는 방법은 무엇입니까?</a>  <span>(0)</span></th> <td>2020.10.31</td> </tr> </table> </div>  </div> <div class="entry-footer"> <div class="actionTrail"> <a href="#tb" onclick=""></a>, <a href="#rp" onclick=""></a> </div> <div data-tistory-react-app="Namecard"></div> </div> </div> </div> </article> </div> <aside role="complementary" id="sidebar"> <div class="container"> <div class="sidebar-inner"> <div class="module module_plugin">  <ins class="kakao_ad_area" style="display:none;" data-ad-unit = "DAN-ubre63wuo3sm" data-ad-width = "160" data-ad-height = "600"></ins> <script type="text/javascript" src="//t1.daumcdn.net/kas/static/ba.min.js" async></script>  </div>  <div class="widget widget-search col-md-3 col-xs-12"> <h3><i class="icon-magnifier icons"></i> Search</h3> <input type="text" name="search" value="" onkeypress="if (event.keyCode == 13) { try { window.location.href = '/search' + '/' + looseURIEncode(document.getElementsByName('search')[0].value); document.getElementsByName('search')[0].value = ''; return false; } catch (e) {} }"/> <input value="검색" type="button" onclick="try { window.location.href = '/search' + '/' + looseURIEncode(document.getElementsByName('search')[0].value); document.getElementsByName('search')[0].value = ''; return false; } catch (e) {}" class="btn btn-default btn-sm"/> </div>  <div class="widget widget-category col-md-3 col-xs-12"> <h3><i class="icon-direction icons"></i> 카테고리</h3> <ul class="tt_category"><li class=""><a href="/category" class="link_tit"> 분류 전체보기 </a> <ul class="category_list"><li class=""><a href="/category/PHP" class="link_item"> PHP </a></li> <li class=""><a href="/category/%EC%8A%A4%ED%81%AC%EB%9E%98%EC%B9%98%203.0" class="link_item"> 스크래치 3.0 </a></li> <li class=""><a href="/category/PYTHON" class="link_item"> PYTHON </a></li> <li class=""><a href="/category/SPRING" class="link_item"> SPRING </a></li> <li class=""><a href="/category/HADOOP" class="link_item"> HADOOP </a></li> <li class=""><a href="/category/SCALA" class="link_item"> SCALA </a></li> <li class=""><a href="/category/MONGODB" class="link_item"> MONGODB </a></li> <li class=""><a href="/category/REDIS" class="link_item"> REDIS </a></li> <li class=""><a href="/category/RUBY-ON-RAILS" class="link_item"> RUBY-ON-RAILS </a></li> <li class=""><a href="/category/SQL" class="link_item"> SQL </a></li> <li class=""><a href="/category/NODEJS" class="link_item"> NODEJS </a></li> <li class=""><a href="/category/JQUERY" class="link_item"> JQUERY </a></li> <li class=""><a href="/category/ANDROID" class="link_item"> ANDROID </a></li> <li class=""><a href="/category/SWIFT" class="link_item"> SWIFT </a></li> <li class=""><a href="/category/HTML" class="link_item"> HTML </a></li> <li class=""><a href="/category/CSS" class="link_item"> CSS </a></li> <li class=""><a href="/category/REACTJS" class="link_item"> REACTJS </a></li> <li class=""><a href="/category/VUEJS" class="link_item"> VUEJS </a></li> <li class=""><a href="/category/WORDPRESS" class="link_item"> WORDPRESS </a></li> <li class=""><a href="/category/ANGULAR" class="link_item"> ANGULAR </a></li> <li class=""><a href="/category/MICROSERVICE" class="link_item"> MICROSERVICE </a></li> <li class=""><a href="/category/DJANGO" class="link_item"> DJANGO </a></li> <li class=""><a href="/category/FLASK" class="link_item"> FLASK </a></li> <li class=""><a href="/category/APACHE" class="link_item"> APACHE </a></li> <li class=""><a href="/category/GO" class="link_item"> GO </a></li> <li class=""><a href="/category/JAVA" class="link_item"> JAVA </a></li> <li class=""><a href="/category/FLUTTER" class="link_item"> FLUTTER </a></li> <li class=""><a href="/category/REACTIVE" class="link_item"> REACTIVE </a></li> <li class=""><a href="/category/SPA" class="link_item"> SPA </a></li> </ul> </li> </ul> </div>  <div class="widget widget-tag col-md-3 col-xs-12"> <h3><i class="icon-tag icons"></i> 태그목록</h3> <ul> <li><a href="/tag/java" class="cloud2"> java</a></li> <li><a href="/tag/jQuery" class="cloud4"> jQuery</a></li> <li><a href="/tag/php" class="cloud4"> php</a></li> <li><a href="/tag/HADOOP" class="cloud3"> HADOOP</a></li> <li><a href="/tag/PYTHON" class="cloud3"> PYTHON</a></li> <li><a href="/tag/spring" class="cloud1"> spring</a></li> <li><a href="/tag/spring-mvc" class="cloud4"> spring-mvc</a></li> <li><a href="/tag/sql" class="cloud2"> sql</a></li> <li><a href="/tag/javascript" class="cloud4"> javascript</a></li> <li><a href="/tag/mysql" class="cloud4"> mysql</a></li> </ul> </div>  <div class="widget widget-post col-md-3 col-xs-12"> <h3><i class="icon-list icons"></i> 최근에 올라온 글 </h3> <ul> </ul> </div> </div> </div> </div> </aside> <footer role="contentinfo"> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12 footer-menu"> <a href="https://cnpnote.tistory.com/tag"><i class="icon-tag icons"></i> </a> <a href="https://cnpnote.tistory.com/rss" onclick="window.open(this.href); return false"><i class="icon-feed icons"></i> </a> </div> <div class="col-xs-12 col-sm-12 col-md-12 footer-copyright text-right"> <a href="https://cnpnote.tistory.com/"> cnpnote</a>'s Blog is powered by <a href="http://daum.net" onclick="window.open(this.href); return false">Daumkakao</a> / Designed by <a href="http://ongal.tistory.com">CEOSEO</a> </div> </div> </div> </footer>  <script src="https://tistory1.daumcdn.net/tistory/2840920/skin/images/jquery-1.11.0.min.js?_version_=1583344392"></script> <div class="#menubar menu_toolbar "> <h2 class="screen_out">티스토리툴바</h2> <div class="btn_tool"><button class="btn_menu_toolbar btn_subscription #subscribe" data-blog-id="2840920" data-url="https://cnpnote.tistory.com" data-device="web_pc"><strong class="txt_tool_id">복붙노트</strong><em class="txt_state">구독하기</em><span class="img_common_tistory ico_check_type1"></span></button></div></div> <div class="#menubar menu_toolbar "></div> <div class="layer_tooltip"> <div class="inner_layer_tooltip"> <p class="desc_g"></p> </div> </div> <iframe id="editEntry" style="position:absolute;width:1px;height:1px;left:-100px;top:-100px" src="//cnpnote.tistory.com/api">