如何清空iframe

How to empty an iframe?

本文关键字：iframe 清空 何清空      更新时间：2023-09-26

我有一个iframe，当在列表中单击一个项目时，它会加载一个.java文件来显示代码。当网站开始加载时，它是空白的

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

当这个重置按钮:<input type="button" name="reset" value="Reset" class="button" onclick="reset();"/>被点击，我希望它调用以下javascript函数把它放回它的空白状态:

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

有什么建议吗? ?

这是整个html文件(抱歉，有点乱):

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>

解决了我自己的问题，只需要更改重置函数的名称

这里有两件事。

第一个是你不应该给你的表单控件的名称与你的函数相同，因为表单控件的名称覆盖你的函数。

给它们起不同的名字:

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

我也很确定你不一定需要这个控件的名称，所以你可能只需要删除name属性。

不幸的是，这不是故事的结尾在这里，因为即使你改变或删除你的input控件的名称，reset()似乎有一个特殊的行为在内联事件处理程序是在一个form，因为它实际上调用表单的reset()方法时，表单元素名称没有覆盖它。

所以这个故事的结论是你应该:

  • 不要使用与函数名相同值的name属性
  • 避免使用函数名reset
  • 使用不显眼的JavaScript代替内联事件处理程序

我用的是(in vue.js)

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

用一个函数总是重新创建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>`;
    },
所以没有重置，只是用新的iFrame覆盖
相关文章：