Question

我正在尝试编写一小段代码，以访问我的几何课本的页面。最初，我使代码重定向到您，但是由于您必须做的所有事情，所以导航起来很难。相反，我决定使用<iframe>元素，以便更轻松地在页面之间进行更改。由于某种原因，每当我按下“提交”按钮时，页面就会重新加载，并且对iframe元素没有任何作用。我想知道如何解决此问题。

<head>
<style>
body {
Background-image: linear-gradient(to bottom right, lightgreen, 
dodgerblue);
}

</style>

<body>
<style>
.button {
background-color: lightblue;
border: 2px solid lightblue;
border-radius: 5px;
font-family: verdana;
font-size: 3em;
margin: auto;
width: 100%;
}

input[type=text] {
border: 2px solid lightblue;
border-radius: 5px;
font-family: verdana;
font-size: 3em;
text-align: center;
margin: auto;
width: 100%;
background-color: hsla(210, 100.0, 55.9, 0.0);
}

.inputstuff {
width: 40%;
margin: auto;
}

</style>
<div class="inputstuff">

<form>
<input type="text" id="pg" placeholder="page no.(with zeros)" />

<button onclick="myFunction()"> Submit</button>
</form>

</div>

<iframe id="pdf" src="about:blank"></iframe>
<script>
function myFunction() {
var gaybo = document.getElementById("pg").value;
var n = gaybo.length
if (n == 1) {
document.getElementById("pdf").src = 
"https://my.hrw.com/math11/math06_07/student/pdf/english/geo/geo_11_0" + 
gaybo + ".pdf";
}
if (n == 2) {
document.getElementById("pdf").src = 
"https://my.hrw.com/math11/math06_07/student/pdf/english/geo/geo_11_0" + 
gaybo + ".pdf";
}
if (n == 3) {
document.getElementById("pdf").src = 
"https://my.hrw.com/math11/math06_07/student/pdf/english/geo/geo_11_0" + 
gaybo + ".pdf";
}
}

</script>
</body>
</head>

</html>

Answer 1

这应该起作用，只需添加以下几处更改

find -print0

并在函数中传递事件并调用preventDefault以防止重新加载页面

<button onclick="myFunction(event)"> Submit</button>

Answer 2

您需要为按钮指定类型。

尝试将type =“ button”放在按钮上，如下所示：

<button type="button" onclick="myFunction()"> Submit</button>

Answer 3

您可以在type="button"中添加一个button，否则您的按钮将获得默认类型，具体取决于浏览器，并且可能是type="submit"，它将重新加载您的页面：

<button type="button" onclick="myFunction()"> Submit</button>

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Attributes

类型

按钮的类型。可能的值为：

submit：该按钮将表单数据提交到服务器。 如果未指定属性，或者属性被动态更改为空值或无效值，则为默认设置。

reset：该按钮将所有控件重置为其初始值。

button：该按钮没有默认行为。它可以具有与元素的事件关联的客户端脚本，这些脚本在事件发生时触发。

<html> <head> <style> body { Background-image: linear-gradient(to bottom right, lightgreen, dodgerblue); } </style> <body> <style> .button { background-color: lightblue; border: 2px solid lightblue; border-radius: 5px; font-family: verdana; font-size: 3em; margin: auto; width: 100%; } input[type=text] { border: 2px solid lightblue; border-radius: 5px; font-family: verdana; font-size: 3em; text-align: center; margin: auto; width: 100%; background-color: hsla(210, 100.0, 55.9, 0.0); } .inputstuff { width: 40%; margin: auto; } </style> <div class="inputstuff"> <form> <input type="text" id="pg" placeholder="page no.(with zeros)" /> <button type="button" onclick="myFunction()"> Submit</button> </form> </div> <iframe id="pdf" src="about:blank"></iframe> <script> function myFunction() { var gaybo = document.getElementById("pg").value; var n = gaybo.length if (n == 1) { document.getElementById("pdf").src = "https://my.hrw.com/math11/math06_07/student/pdf/english/geo/geo_11_0" + gaybo + ".pdf"; } if (n == 2) { document.getElementById("pdf").src = "https://my.hrw.com/math11/math06_07/student/pdf/english/geo/geo_11_0" + gaybo + ".pdf"; } if (n == 3) { document.getElementById("pdf").src = "https://my.hrw.com/math11/math06_07/student/pdf/english/geo/geo_11_0" + gaybo + ".pdf"; } } </script> </body> </head> </html>

Answer 4

进行快速测试，如果您在按钮中包含type属性，它似乎可以解决问题：

<button type="button" onclick="myFunction()"> Submit</button>

添加了一条错误消息，使我无法进入pdf框（因为我没有访问该pdf的权限），但这可能会解决您的问题。

Answer 5

您唯一要做的就是将按钮类型设置为button。无需设置，按钮会将其视为提交。

<Button type="button">submit</>

如何通过更改src修复iframe元素

5 个答案: