How to empty an iframe?

Question

I have an iframe that, when an item is clicked on in a list, loads a .java file to show the code. When the site initially loads, it's blank

<iframe id="iframe" src="about:blank"></iframe>

when this reset button: <input type="button" name="reset" value="Reset" class="button" onclick="reset();"/> is clicked, i want it to call the following javascript function to put it back to its blank state:

function reset(){
            var iframe = document.getElementById('iframe');
            iframe.src="about:blank";
            iframe = null;
}

any suggestions??

Here is the whole html file (sorry, it's a little messy):

https://drive.google.com/file/d/0B2L7daNzNyjcbVZJYWVuc1pQZ2M/edit?usp=sharing

<!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <link rel="stylesheet" href="css/main.css" type="text/css">
            <title>Lambda Expressions in Java 8</title>
            <script type="text/javascript">
                function list_clicked(i) {
                    var comparison = i.value;
                    //var code_field = document.getElementById('code');
                    var iframe = document.getElementById('iframe');
                    switch (comparison) {
                        case "1":
                            iframe.src = "src/Test.java";
                            break;
                        case "2":
                            //code_field.value="Comparison 2";
                            break;
                        case "3":
                            //code_field.value="Comparison 3";
                            break;
                        case "4":
                            //code_field.value="Comparison 4";
                            break;
                        case "5":
                            //code_field.value="Comparison 5";
                            break;
                        case "6":
                            //code_field.value="Comparison 6";
                            break;
                        case "7":
                            //code_field.value="Comparison 7";
                            break;
                        case "8":
                            //code_field.value="Comparison 8";
                            break;
                        case "9":
                            //code_field.value="Comparison 9";
                            break;
                        case "10":
                            //code_field.value="Comparison 10";
                            break;
                        case "11":
                            //code_field.value="Comparison 11";
                            break;
                        case "12":
                            //code_field.value="Comparison 12";
                    }
                }

                function reset() {
                    var iframe = document.getElementById('iframe');
                    iframe.src = "about:blank";
                    iframe = null;
                }
            </script>
        </head>

        <body>
            <div id="main_layout">
                <header id="page_header"> <a href="index.html">
                                                <h1 class="head_text"> Performance Of Lambda Expressions in Java 8 </h1>
                                                <img src="images/java-logo-lambda.png" alt="Java 8" width="100" height="127" class="logo"/>
                                        </a>

                </header>
                <nav id="top_nav">
                    <ul>
                        <li><a href="index.html">Home</a>
                        </li>
                        <li><a href="">Feedback</a>
                        </li>
                    </ul>
                </nav>
                <section id="section">
                     <h3>Java Code</h3>

                    <form>
                        <iframe id="iframe" src="about:blank"></iframe>
                        <!--<textarea readonly rows="20" cols="68" name="code" id="code"></textarea>-->
                        <br>
                        <input type="button" name="reset" value="Reset" class="button" onclick="reset();" />
                        <input type="button" name="run" value="Run Test" class="button" />
                    </form>
                     <h3>Tests Results</h3>

                    <form>
                        <textarea readonly rows="10" cols="68" name="results" id="results"></textarea>
                        <input type="button" name="again" value="Run Again" class="button" />
                    </form>
                </section>
                <aside id="side">
                     <h3>Comparisons</h3>

                    <select name="comparisons" id="comparisons" size="11" onclick="list_clicked(this)">
                        <option value="1">Comparison 1</option>
                        <option value="2">Comparison 2</option>
                        <option value="3">Comparison 3</option>
                        <option value="4">Comparison 4</option>
                        <option value="5">Comparison 5</option>
                        <option value="6">Comparison 6</option>
                        <option value="7">Comparison 7</option>
                        <option value="8">Comparison 8</option>
                        <option value="9">Comparison 9</option>
                        <option value="10">Comparison 10</option>
                        <option value="11">Comparison 11</option>
                        <option value="12">Comparison 12</option>
                    </select>
                     <h3>Additional Testing</h3>

                    <form>
                        <input type="checkbox" name="include" id="parallel" />
                        <label for="parallel">Also test parallel streams</label>
                        <br>
                        <input type="checkbox" name="include" id="method" />
                        <label for="parallel">Also test method references</label>
                    </form>
                </aside>
                <footer id="page_footer">
                    <p><em>Last Updated May, 13, 2014</em>
                    </p>
                </footer>
            </div>
            <script type="text/javascript" src="js/jquery.js"></script>
        </body>

    </html>

Want the iframe to be blank when the reset button is clicked — PenguinProgrammer, May 14 '14 at 16:12
That's what you want to do, not what the problem is. What have you done to debug the problem? — Felix Kling, May 14 '14 at 16:16
Well aware, the iframe is simply displaying the code in the .java file — PenguinProgrammer, May 14 '14 at 16:19

JLRishe · Answer 1 · 2014-05-14T17:14:06.877

There are two things going on here.

The first is that you shouldn't give names to your form controls that are the same as your functions, as the form control names override your functions.

Give them different names:

<input type="button" name="resetIFrame" value="Reset" 
       class="button" onclick="reset();" />

I'm also fairly sure you don't necessarily need a name for this control, so you could probably just remove the name attribute.

Unfortunately that's not the end of the story here, because even if you change or remove the name of your input control, reset() appears to have a special behavior in inline event handlers that are within a form, in that it actually calls the form's reset() method when a form element name isn't overriding it.

So the conclusion to the story is that you should:

Not use name attributes with the same values as your function names
Avoid the function name reset
Use unobtrusive JavaScript instead of inline event handlers

@AdamCU Then please provide us a jsfiddle. – JLRishe May 14 '14 at 16:28 — JLRishe, May 14 '14 at 16:28

score 0 · Answer 2 · answered May 14 '14 at 16:56

0

Solved my own problem, just had to change name of reset function

answered May 14 '14 at 16:56

PenguinProgrammer

141
2
5
11

Ah, it looks like calling `reset()` from an inline event handler causes the containing form's `reset()` method to be called instead of any function with that name. Yet another reason to use unobtrusive JavaScript. – JLRishe May 14 '14 at 17:08
[That's why you should not use inline event handlers](http://stackoverflow.com/a/21975639/218196). If you had said what the problem is, i.e. "my reset function is not executed", we might have found the solution faster. – Felix Kling May 14 '14 at 17:26

Dom is Coding · Answer 3 · 2019-04-01T15:54:59.543

I've used something like (in vue.js)

  this.$refs.iframe_parent.innerHTML = null;
  this.$refs.iframe_parent.innerHTML = this.iframeWithSource(this.baseStationURL + station.alias);

With a function always recreating the iFrame:

    function iframeWithSource(src){
      return `<iframe style="height: 100%; width: 100%;"
            id="station_iframe"
            ref="station_iframe"
            src="${src}"
            onload="${ this.loadingStation = false }"
            frameborder="0" >
          </iframe>`;
    },

So no resetting, just overwriting with a new iFrame

How to empty an iframe?

3 Answers3