Diskuze: w3schools Tryit
V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.
Jenkings:25.11.2017 10:25
V zásadě je to velice jednoduché. Levá polovina je nějaký input nebo textarea doplněný/á syntax highlighterem který ti obarvuje kód, a pravá strana bude jen DIV. na input/textareu si napojíš na událost OnChange svou funkci, která prostě jen převezme text (podle typu to bude buď vlastnost .value nebo .innerHTML) a vložíš ho do vlastnosti .innerHTML toho pravého DIVu.
Moc děkuji za odpověď!! Dopracovala jsem se k níže uvedenému kódu. Řeší to většinu toho, co jsem chtěla. Jediné, co se nerealizuje, je ten script. Mám na mysli, když napíšu script do té textarea. Šlo by to nějak pořešit?
<!DOCTYPE html>
<html>
<body>
<textarea id = "textarea">
<!DOCTYPE html>
<html>
<head>
<style>
p {color: red;}
</style>
</head>
<body>
<h1>Nadpis 1</h1>
<p id="odstavec">Odstavec. Odstavec. Odstavec. Odstavec.</p>
<script>
document.getElementById("odstavec").innerHTML = "My First JavaScript";
</script>
</body>
</html>
</textarea>
<hr>
<button onclick=fce();>Run</button>
<div id="demo"></div>
<script>
function fce(){
var x = document.getElementById("textarea");
document.getElementById("demo").innerHTML = x.value;
}
</script>
</body>
</html>
Když na to klikneš pravým tlačítkem a dáš inspect element zjistíš že to mají vkládaný jako iframe ve kterým normálně spustí celej kód co zadáš vlevo. eval() se vyhýbej obloukem.
Petra Kleislová:26.11.2017 11:23
Nevím, jak pracovat s tím <iframe>. Co napsat do src? A co do href u odkazu?
<a href="???" target="ifr">Run</a>
<textarea id = "textarea"> <h1>Nadpis 1</h1>
</textarea>
<iframe src="???" name="ifr"></iframe>
Jakub Žák:27.11.2017 11:48
Spíš, než zadávat src, to chceš plnit Javascriptem z toho input. Takže src nezadáš, vytvoříš jen iframe, ve kterém nic nebude a potom tam přeneseš ten obsah.
<html>
<head>
<title>
IFrame
</title>
</head>
<body>
<textarea id="my-input">Paste code here.</textarea>
<iframe></iframe>
<script>
function updateMyFrame(inputIdentifier) {
var frameBody = window.frames[0].document.body;
var myInput = document.getElementById(inputIdentifier);
if (frameBody && myInput) {
frameBody.innerHTML = myInput.value;
return true;
}
console.error("Input element or iframe not found.");
return false;
}
document.getElementById("my-input").addEventListener('change', function () {
updateMyFrame("my-input");
});
</script>
</body>
</html>Jakub Žák:27.11.2017 12:05
Update, přišel jsem na chybu, kvůli které mi nešel naplnit iframe vybraný dle id a kvůli které jsem to přepisoval na window.frames[0].document.body.
<body>
<textarea id="my-input">Paste code here.</textarea>
<iframe id="my-frame"></iframe>
<script>
function updateMyFrame(frameIdentifier, inputIdentifier) {
var frame = document.getElementById(frameIdentifier);
var frameBody = frame.contentDocument.body;
var myInput = document.getElementById(inputIdentifier);
if (frameBody && myInput) {
frameBody.innerHTML = myInput.value;
return true;
}
console.error("Input element or iframe not found.");
return false;
}
document.getElementById("my-input").addEventListener('change', function () {
updateMyFrame("my-frame", "my-input");
});
</script>
</body>
Co jsem se koukal na nějaké takovéto live editor preview nebo nevím jak se tomu říká tak jsem viděl tento kod:
<!doctype html>
<head>
<title>Try It Live Editor</title>
<link type="text/css" href="/Content/Style.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(function()
{
var code = $(window.opener.document).find("#" + window.location.hash.slice(1)).html().replace(/<br>/g, "\n").replace(/<\/?span.*?>/g, "").replace(/</g, "<").replace(/>/g, ">").replace(/ /g, " ");
$("#txtTest").text(code);
UpdatePreview();
});
function UpdatePreview()
{
$("#divTest").empty().html($("#txtTest").val());
}
</script>
<style type="text/css">
body {
margin: 0;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
font-size: 1rem;
background-color: #808080;
background-image: none;
}
tr.header h1 {
margin: 10px;
}
td.container {
width: 50%;
padding: 10px;
background-color: #fff;
}
footer#editor-footer {
background-color: #eee;
font-style: italic;
position: absolute;
bottom: 0;
width: 100%;
color: gray;
}
footer #footer-content {
margin: 5px 10px;
}
</style>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0" width="100%" id="tblContainer">
<tr style="background-color: #eee;" class="header">
<td style="width: 50%;"><h1 class="introHeader">Live Preview Editor</h1></td>
<td style="width: 50%;"><h1 class="introHeader">Your Result</h1></td>
</tr>
<tr>
<td valign="top" class="container"><textarea id="txtTest" style="min-height: 450px; width: 100%; margin-top:15px;" onchange="UpdatePreview();" onkeyup="UpdatePreview();"></textarea></td>
<td valign="top" class="container"><div id="divTest" style="margin: 15px 0 0 20px;"></div></td>
</tr>
</table>
<footer id="editor-footer">
<div id="footer-content">
Edit the code above and see a live preview of your changes
</div>
</footer>
</body>
</html>nezkoušel jsem ho jenom jsem to viděl když jsem se podíval do sourcecode tak třeba pomůže
Zobrazeno 9 zpráv z 9.