极客观点
项目管理
HarmonyOS
请看这个在线工具：
https://c.runoob.com/front-en...
我没有写js,只有html,css
现在，我写一个js
var oP = document.getElementById("html");
oP.innerHTML = "<p>test----revised by js</p>";
请注意：原来的html窗口内的东西没有变化。js运行后的结果在iframe窗口里面。
我完成了一个自己写的简单的在线工具，现在全部贴上来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自制在线工具</title>
</head>
<body>
<style type="text/css">
*{font-size:20px;}
#html{width: 1000px;height: 200px;border:1px solid red;}
#css{width: 1000px;height: 200px;border:1px solid red;}
#js{width: 1000px;height: 200px;border:1px solid red;}
#iframe{width: 1000px;height: 800px;border:1px solid red;}
</style>
<div class="html">
<textarea id="html" name="" cols="30" rows="10"></textarea>
</div>
<div class="css">
<textarea id="css" name="" cols="30" rows="10"></textarea>
</div>
<div class="css">
<textarea id="js" name="" cols="30" rows="10"></textarea>
</div>
<div class="button">
<button id="button">显示效果</button></div>
<div class="iframe">
<iframe id="iframe" frameborder="0" sandbox="allow-script allow-popups allow-forms"></iframe>
</div>
<script charset="utf-8" type="text/javascript">
var ele = document.getElementById("button");
ele.addEventListener("click", function(){
var obHtml = document.getElementById("html").value;
var obCss = document.getElementById("css").value;
var obJs = document.getElementById("js").value;
var obIframe = document.getElementById("iframe");
myString = obHtml + '<style type="text/css">' + obCss +'</style>' ;
obIframe.srcdoc = myString;
var script = document.createElement("script");
script.type = "text/javascript";
script.text = obJs;
obIframe.appendChild(script);
})
</script>
</body>
</html>没有写js的时候，点击显示效果后的状态：
我添加js代码后，再点击显示效果，请看
var oP = document.getElementById("html");
oP.value = "<p>test----revised by js</p>";
原来的html窗口中的
<p>test</p>也改变成了
<p>test----revised by js</p>如何保持html窗口中的最初形式不改变呢,像https://c.runoob.com/front-en...的行为一样？
利用
data:协议与http(s)/file协议之间的跨域特性来进行隔离：