4
\$\begingroup\$

Here is a simple webpage that I wrote to test HTML code in real time as typed, what are some ways that I can Improve my code? part of the code is reused from a previous project, I believe that it may now be causing problems. I am still learning about CCS and in places i used both the HTML width tag and the CCS property to set the width of the item.

When searching stackoverflow I found Quite a few questions about how HTML code can be loaded into an iframe, this seems to be a common problem, Am I properly loading a HTML string into an iframe?

<!DOCTYPE html>
<title>Live HTML tester</title>
<h1 id="Pagetitle">Live HTML tester</h1>
<html>
    <head>
    </head>

<style>
h1
{
    text-align: center;
}
textarea
{
    vertical-align: top;
    width:100%;

}
iframe
{
    vertical-align: bottom;
    width:100%;
}
</style>
<body>
    <input id="browseOpen" type="file" accept=".html"/>
    <textarea 
        rows="20" 
        id="HTMLdata"
        placeholder="Enter HTML code"
        onKeyPress="edValueKeyPress() 
        "onKeyUp="edValueKeyPress()">
    </textarea>
    <iframe id="test_iframe" src="about:blank" width="100%" height=400></iframe>
</body>

<script language="javascript">
    var fileInput = document.getElementById("browseOpen");
    fileInput.onchange = function() {
        var fr = new FileReader();
        fr.onloadend = function() {
            var result = this.result;
            html_string = result;
            //alert(result);
            var TheText = document.getElementById("HTMLdata");
            TheText.innerText=result;
            edValueKeyPress();
        };
        fr.readAsBinaryString(this.files[0]);
    };
    function edValueKeyPress(){
        var edValue = document.getElementById("HTMLdata");
        var html_string = edValue.value;

        var iframe = document.getElementById('test_iframe');

        var iframedoc = iframe.document;
            if (iframe.contentDocument)
                iframedoc = iframe.contentDocument;
            else if (iframe.contentWindow)
                iframedoc = iframe.contentWindow.document;

         if (iframedoc){
             iframedoc.open();
             iframedoc.writeln(html_string);
             iframedoc.close();
         } else {
            alert('Cannot inject dynamic contents into iframe.');
         }

    }

</script>
</html>

Here is where the page is being hosted LiveHTML.html

\$\endgroup\$
3
  • \$\begingroup\$ I have retracted my close vote, and upvoted - I'm no javascript writer but this looks like pretty trivial code, I'm sure you'll get answers pretty soon. Good luck! \$\endgroup\$
    – Mathieu Guindon
    Commented Nov 21, 2013 at 4:17
  • \$\begingroup\$ @retailcoder Thank you for alerting me of my error. \$\endgroup\$
    – kyle k
    Commented Nov 21, 2013 at 4:18
  • \$\begingroup\$ This is a similar application to give you good ideas: onlinehtmleditor.net \$\endgroup\$
    – Mori
    Commented Dec 19, 2013 at 16:22

3 Answers 3

Reset to default
1
\$\begingroup\$

Try rewriting your script with an addEventListener instead of an onChange method.

However, keep in mind that an addEventListener is not compatible with IE lower then IE9. So don't use this yet in live sites.

\$\endgroup\$
1
\$\begingroup\$

StackOverflow 2947082 suggests:

var iframedoc = iframe.contentDocument ||
                iframe.contentWindow.document ||
                iframe.document;
\$\endgroup\$
1
  • 1
    \$\begingroup\$ Looks wrong, if iframe.document is the way to go, then contentWindow will be undefined and access document from it will error out. @Dangnabit mentions the same in the SO post. So probably iframe.document || iframe.contentDocument || iframe.contentWindow.document should do it. \$\endgroup\$
    – konijn
    Commented Dec 19, 2013 at 19:06
1
\$\begingroup\$

I think that using the Html Width attribute is okay for an iframe, but I wouldn't use it for other tags, because you have CSS for that.

anything that can/will be considered styling should be done in CSS, that is what it is there for, don't style in HTML, HTML is for Data Transport, use CSS to style the HTML the way you want it, CSS is more powerful than the outdated HTML Styling.

saying that I would probably see if CSS Styling works on the Iframe in all browsers, and if it does, then you can completely separate your style from your HTML, which in Many cases is preferable.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.