html 測試 左入右出

input HTML

00

<style>
.udt , .udf{  width:100%; background-color:azure;font-size:18px;}
.uds { background-color:azure;
          cursor:pointer;   
          float:left; display:   
          table-cell;
          vertical-align: middle; 
          text-align: center; 
          width: 80px; 
          height: 30px;
          border: thin solid black;font-size:18px;        }
</style>

<script>
/* --------NEW UP----LOAD-----------*/
function LiRoT(x,w1){
var wf = Number(w1)+40;
var x0 = document.getElementById(x);
var x1 = x0.querySelector(".DP");
var strVar="";
strVar += "<table border='2' style='width: 100%;'>";
strVar += "<tbody >";
strVar += "<tr ><td style='width: 50%;'>";
strVar += "<form>";
strVar += "<div class='uds' id='" + x + "AL1' onclick='LiRoDP(this.id)'>預覽</div>";
strVar += "<div class='uds' id='" + x + "AL3' onclick='LiRoRS(this.id)'>還原</div><br>";
strVar += "<textarea class='udt' style='height:" + w1 + "px'  id='" + x+ "TTL' spellcheck='false' wrap='logical'>";
strVar += "<\/textarea></td><td style='width: 50%;'>";
strVar += "<iframe class='udf' style='height:" + wf + "px' id='" + x + "ifL' ><\/iframe>";
strVar += "<\/form>";
strVar += "</td></tr>";
strVar += "</tbody>";
strVar += "</table>";
x1.innerHTML=strVar ;
LiRoRS(x+"AL1");
}
</script>

<script>/* --------NEW UP-----DP-----------*/
function LiRoDP(qq1){
var Mid= qq1.substring(0,qq1.length-3);
var Ttext = document.getElementById(Mid+'TTL').value;
var Ri= document.getElementById(Mid+'ifL');
Ri.innerHTML = "";
var ifrw = (Ri.contentWindow) ? Ri.contentWindow : (Ri.contentDocument.document) ? Ri.contentDocument.document : Ri.contentDocument;
ifrw .document.open();
ifrw .document.write(Ttext);
ifrw .document.close();
}
</script>

<script>/* --------NEW UP-----rs-----------*/
function LiRoRS(qq1){
var Mid= qq1.substring(0,qq1.length-3);
var x0 = document.getElementById(Mid);
var LL = x0.querySelector(".LLtextA");
document.getElementById(Mid+'TTL').value = LL.value;
LiRoDP(qq1);
}
</script>


<!------------------------------------------------------------------>
<br />
<div id="LR18314847">
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
input HTML
</textarea>
<div class="DP">00</div>
</div>
<script>
LiRoT('LR18314847','300');
</script>