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>
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License