如何使用点击事件递增网址 ID 参数

How to increment url ID parameter with onclick event

本文关键字：ID 参数 何使用 事件      更新时间：2023-09-26
在

JavaScript 中单击按钮时，是否可以递增 URL ID 并打开递增的页面？

例如，如果 ID 为 http://www.someurl.com/index.php?id=17

单击按钮以加载此 iframe 链接时：

http://www.someurl.com/index.php?id=18

<button onclick="increment()">Increment</button>
<div id="iframe">
    <script>
        var id = 17;
        
        var link='<iframe src="http://www.myurl.com/index.php?id=' + id + '  " height="600px" width="100%" />';
        
        function increment(){
        id++;
        document.getElementById('iframe').innerHTML = id + link;
}
    </script>
</div>

OnClick Id 正在增加，但内容仍然相同...

HTML

<a href="http://www.someurl.com/index.php?id=10" id="nextPage">Next page</a>
<button onClick='increment()'>Increment</button>

现在将 url 分为 2 个变量，一个将存储 'id' 和另一个 id 的值

爪哇语

var url = document.getElementById('nextPage').href;
var urlPart1 = url.split('=')[0]; //get the url till id
var urlParameter = url.split('=')[1]; //get the id paramerter
var parameter = parseInt(urlParameter); // convert the id parameter into string
function increment() {
   parameter += 1;
   var newURL = urlPart1 + "=" + parameter;
   document.getElementById('nextPage').href = newURL;
}

工作链接 ： http://jsbin.com/pejasucuqu/edit?html,js,output

您可以使用 $_REQUEST 或其他方式获取页面的 ID。然后，您可以使用它打开url中id值递增的新窗口。

要了解如何打开新窗口，请通过此链接http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_win_open

假设您的 url 将始终是给定的格式（即 http://www.someurl.com/index.php?id=18），以下内容应该可以正常工作。 

var start = 17;
$(".increment-btn").click(function() {
  start++;
  var next_url = "http://www.someurl.com/index.php?id=" + start;
  $('#iframe').attr('src', next_url)
});
<button class="increment-btn" type="button">Increment Page</button>
<iframe name="iframe" id="iframe" src=""></iframe>

相关文章：