iframe 内のウィンドウから親ウィンドウの要素を操作するには！？ T.I-T.I Follow 2013-10-09 15:07:19 License: MIT License Fork0 Fav2 View20130 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 0 lines HTML 18 lines CSS 53 lines iframe 内のウィンドウから親ウィンドウの要素を操作するには！？ <h1>iframe 内のウィンドウから親ウィンドウの要素を操作するには！？</h1> <p>javascriptはiframeで読み込まれたhtml側に記述してそこから親のウィンドウの要素にアクセスしたいという実験</p> <p>パターン１：iframe内にあるボタンをクリックしたら、親ウィンドウのBox1の背景色を変える</p> <p>パターン２：親ウィンドウにあるボタンをクリックしたら、親ウィンドウのBox2の背景色を変える</p> <iframe src="http://jsrun.it/assets/f/U/o/m/fUom7" width="400px" height="200px"></iframe> <button id="btn2">Box2の背景色を変える</button> <div class="cf"> <div class="box" id="box1"> <p>Box1</p> <p>frame内のボタンより色を変える</p> </div> <div class="box" id="box2"> <p>Box2</p> <p>親ウィンドウのボタンより色を変える</p> </div> </div> iframe 内のウィンドウから親ウィンドウの要素を操作するには！？ * { margin: 0; padding: 0; border: 0; } body { font: 12px sans-serif; padding:0 20px; } h1{ font-size:12px; background-color:#ccc; padding:10px; margin-bottom:20px; } iframe{ border:5px solid #ccc; margin-bottom:10px; } button{ padding:5px; border:1px solid #ccc; margin-bottom:10px; cursor:pointer; } p{ margin-bottom:10px; } .cf{ display:-webkit-flex; display:-moz-flex; display:-o-flex; } .box{ width:100px; height:100px; padding:10px; background-color:#ccc; margin-right:15px; } .box p:first-child{ font-size:14px; font-weight:bold; margin-bottom:10px; } <h1>iframe 内のウィンドウから親ウィンドウの要素を操作するには！？</h1> <p>javascriptはiframeで読み込まれたhtml側に記述してそこから親のウィンドウの要素にアクセスしたいという実験</p> <p>パターン１：iframe内にあるボタンをクリックしたら、親ウィンドウのBox1の背景色を変える</p> <p>パターン２：親ウィンドウにあるボタンをクリックしたら、親ウィンドウのBox2の背景色を変える</p> <iframe src="http://jsrun.it/assets/f/U/o/m/fUom7" width="400px" height="200px"></iframe> <button id="btn2">Box2の背景色を変える</button> <div class="cf"> <div class="box" id="box1"> <p>Box1</p> <p>frame内のボタンより色を変える</p> </div> <div class="box" id="box2"> <p>Box2</p> <p>親ウィンドウのボタンより色を変える</p> </div> </div> * { margin: 0; padding: 0; border: 0; } body { font: 12px sans-serif; padding:0 20px; } h1{ font-size:12px; background-color:#ccc; padding:10px; margin-bottom:20px; } iframe{ border:5px solid #ccc; margin-bottom:10px; } button{ padding:5px; border:1px solid #ccc; margin-bottom:10px; cursor:pointer; } p{ margin-bottom:10px; } .cf{ display:-webkit-flex; display:-moz-flex; display:-o-flex; } .box{ width:100px; height:100px; padding:10px; background-color:#ccc; margin-right:15px; } .box p:first-child{ font-size:14px; font-weight:bold; margin-bottom:10px; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author T.I-T.I Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/vITB/js"></script> user_interface Discussion Questions on this code? Tags user_interface Favorite by okemori a440hlz
