将javascript生成的帧转换为div
[英]Converting javascript generated frames to divs
问题描述
I have some old code that I am trying to convert to divs. 
我有一些旧的代码，我试图转换为div。 It contains frames that have no target src , just JavaScript to generate a page. 它包含没有目标src帧，只有JavaScript来生成页面。
Below is the code... 以下是代码......
var editboxHTML = '<html class="expand close">' + '<head>' + '<style type="text/css">' + '.expand { width: 100%; height: 100%; }' + '.close { border: none; margin: 0px; padding: 0px; }' + 'html,body { overflow: hidden; }' + '<\\/style>' + '<\\/head>' + '<body class="expand close" onload="document.f.ta.focus(); document.f.ta.select();">' + '<form class="expand close" name="f">' + '<textarea class="expand close" name="ta" wrap="hard" spellcheck="false">' + '<\\/textarea>' + '<\\/form>' + '<\\/body>' + '<\\/html>'; var defaultStuff = 'This top frame is where you put your code.'; var extraStuff = ''; var old = ''; function init() { window.editbox.document.write(editboxHTML); window.editbox.document.close(); window.editbox.document.f.ta.value = defaultStuff; update(); } function update() { var textarea = window.editbox.document.f.ta; var d = dynamicframe.document; if (old != textarea.value) { old = textarea.value; d.open(); d.write(old); if (old.replace(/[\\r\\n]/g, '') == defaultStuff.replace(/[\\r\\n]/g, '')) d.write(extraStuff); d.close(); } window.setTimeout(update, 150); }
<frameset onload="init();" rows="50%,50%" resizable="no"> <frame name="editbox" src="javascript:'';"> <frame name="dynamicframe" src="javascript:'';"> </frameset>
This code has a user input box at the top to input HTML code into, and the bottom displays what that code would look like in a browser. 此代码在顶部有一个用户输入框，用于输入HTML代码，底部显示该代码在浏览器中的外观。
How would I manipulate this code to work with divs instead of frames, so I can include extra styling, and so that it is not fully depreciated in HTML5. 如何操作此代码以使用div而不是框架，因此我可以包含额外的样式，以便在HTML5中不完全折旧。
If your answer includes AJAX, please can you explain it as I am not familiar with that coding. 如果您的答案包含AJAX，请解释一下，因为我不熟悉该编码。
EDIT: If there is no div alternative, is there an iframe alternative? 编辑：如果没有div替代品，是否有iframe替代品？
2 个解决方案
解决方案1
0 2016-04-11 06:36:57
你可以创建一个id为<div id='editbox' /> div标签，并在你的更新函数document.getElementById("editbox").innerHTML=editboxHTML;添加一行代码document.getElementById("editbox").innerHTML=editboxHTML;
解决方案2
0 已采纳 2016-04-11 06:58:19
Answer Updated 答案已更新
CSS Fixed CSS固定
Error fixed 错误已修复
Jquery way: Jquery方式：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
var editboxHTML =
'<html class="expand close">' +
'<head>' +
'<style type="text/css">' +
'.expand { width: 100%; height: 50%; }' +
'.close { border: none; margin: 0px; padding: 0px; }' +
'html,body { overflow: hidden; }' +
'<\/style>' +
'<\/head>' +
'<body class="expand close">' +
'<form class="expand close" name="f">' +
'<textarea class="expand close" name="ta" wrap="hard" spellcheck="false">qweqwe' +
'<\/textarea>' +
'<\/form>' +
'<\/body>' +
'<\/html>';
var defaultStuff = 'This top frame is where you put your code.';
var extraStuff = '';
var old = '';
function init() {
$("#editbox").html(editboxHTML);
$("#editbox form[name='f'] [name='ta']").focus();
$("#editbox form[name='f'] [name='ta']").val(defaultStuff);
update();
}
function update() {
var textarea = $("#editbox form[name='f'] [name='ta']");
var d = $("#dynamicframe");
if (old != textarea.val()) {
old = textarea.val();
if (old != undefined){
d.html(old);
if (old.replace(/[\r\n]/g, '') == defaultStuff.replace(/[\r\n]/g, '')){
d.append(extraStuff);
}
}
else{
d.html("old undefined");
}
}
setTimeout("update()", 150);
}
</script>
<button onclick="init()">EDIT</button>
<div id="editbox"></div>
<div id="dynamicframe"></div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.