Lab for CSS Prep Tool
Inter-iframe communication test
name="toFrame"
<head> <meta charset="UTF-8"/> </head> <body> <textarea id="a" placeholder="sender"></textarea> <button onclick="sendTo2();">send the value of textarea to the following iframe</button> <script type="text/javascript"> let a = document.getElementById("a"); function sendTo2(){ try{ let check = window.parent.window.fromFrame; check.fire(a.value); } catch(e){} } </script> </body> </html>
name="fromFrame"
<head> <meta charset="UTF-8"/> </head> <body> <textarea id="b" placeholder="receiver" readonly></textarea> <script type="text/javascript"> let b = document.getElementById("b"); let receivedText; function fire(x){ receivedText = x; b.value = receivedText; if (b.value) { b.style.backgroundColor = "#fff0f0"; } } </script> </body> </html>
Inter-iframe communication test-2
<head> <meta charset="UTF-8"/> </head> <body> <input type="text" id="c" placeholder="sender" value="#bb0011"></input> <button onclick="findOtherFrame();">send the hex-code to the following iframe<b>s</b></button> <script type="text/javascript"> let c = document.getElementById("c"); let end = false, i; function findOtherFrame(){ if(end)return; let pare = window.parent.window.frames; for(i = 0;i < pare.length;i++){ try{ if(typeof(pare[i].hexCode) == "function"){ pare[i].hexCode(c.value); } }catch(e){} } /* end = true; */ } </script> </body> </html>
<head> <meta charset="UTF-8"/> </head> <body> <div id="d" style="width: 100px; height: 100px;">div</div> <script type="text/javascript"> let d = document.getElementById("d"); let receivedColor; function hexCode(y){ receivedColor = y; d.style.backgroundColor = receivedColor; } </script> </body> </html>
page revision: 20, last edited: 12 May 2019 07:53