<html>
<body>
<br/>
<script>
var i = 1;
var pag="p"+String(i)+".svg";
function pageno(param)
{
i=param;
pag="p"+param+".svg";
document.getElementById('slide').src=pag;
}
</script>
<div>
<iframe src="p1.svg" id="slide" height=900 width=1105 allowTransparency="true" scrolling="no" frameborder="0" >
</iframe>
<form >
Page:
<input type="text" name="pg">
<input id="submit" type="button" value="submit" onclick="pageno('pg')" >
</form>
</div>
</body>
</html>
此脚本用于使用扩展名 .svg 加载特定图像文件
用于输入页码并加载名称为图像文件的文本框:
"p"+pgno+".svg"
但是对参数为 pg 的函数 pageno 的调用不起作用。我尝试查看类似的问题，但解决方案对我不起作用。
有更好的方法吗？
html 文件与图像 (.svg) 位于同一位置
谁能帮我解释为什么图像无法加载？
最佳答案
希望这对您有帮助，我正在用 jquery 回答您的问题，因为您的问题标记为 Jquery。
在我的回答中，我对一些代码行进行了注释，取消注释它们并删除这些注释行下面的行。
还想提一下，要从按钮中删除默认操作，只需更改类型，如下所示。
<input type="button" >
这使得按钮只是一个按钮
$(document).ready(function() {
$(document).on('click', '#submit', function() {
var i = 1,
pageNo = $('#pg').val(),
//img = "p" + i + ".svg";
img = "https://static.pexels.com/photos/55787/pexels-photo-55787.jpeg";//Remove this line and uncomment the line above this
if (pageNo !== "") {
//img = "p" + pageNo + ".svg";
img = pageNo; //remove this when you're using this code coppy pate a URL to the text area to see it getting loaded to the iframe.
$('#slide').prop('src', img);
}else{
$('#slide').prop('src', img);
}
})
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
Page:
<input type="text" id="pg">
<input type="button" id="submit" value="submit">
<iframe src="https://static.pexels.com/photos/17679/pexels-photo.jpg" id="slide" height=900 width=1105 allowTransparency="true" scrolling="no" frameborder="0">
</iframe>
</form>你这里还有一个软木塞jsFiddle 。请测试一下并让我知道它是否有效。
关于javascript - 使用 html 按钮调用加载特定图像的 Javascript 函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46271897/