我有一个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>
答案 0 :(得分：0)
这里有两件事情。
首先，您不应该为表单控件指定与函数相同的名称，因为表单控件名称会覆盖您的函数。
给他们不同的名字：
<input type="button" name="resetIFrame" value="Reset"
class="button" onclick="reset();" />
我也非常确定您不一定需要此控件的名称，因此您可能只需删除name属性。
不幸的是，这不是故事的结尾，因为即使您更改或删除input控件的名称，reset()似乎在内嵌事件处理程序中也有特殊行为form，因为当表单元素名称没有覆盖它时，它实际上调用了表单的reset()方法。
故事的结论是你应该：
name属性reset 答案 1 :(得分：0)
解决了我自己的问题，只需更改重置功能的名称
答案 2 :(得分：0)
我在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覆盖