简体   繁体   English

如何通过单击一个按钮在同一选项卡上打开一个新网页?

[英]how to open a new web page on the same tab by clicking a button?

I a button on my web page. 我是网页上的一个按钮。 its code is: 它的代码是:

/* code of the other forms  */
<form method="get"  onsubmit="return validation()" > 
     <input type="submit" id="x" value="Search"  onmouseover="mover(this)" onmouseout="mout(this)" /> 
</form>

when I click on the button is should validate the value of the other forms and open new web page on the same tab. 当我单击该按钮时,应验证其他表单的值并在同一选项卡上打开新的网页。 I have no problem with the validation part. 验证部分没有问题。 the problem is the new web page opens in a new tab which is not what I want. 问题是新网页在新标签页中打开,这不是我想要的。 So far the code is: 到目前为止,代码是:

 function validation(){
    var x=document.forms["flyrics"]["lyrics"].value;
    if (x==null || x=="")
    {
        alert("Search without Lyrics?");
        return false;
    }

    var y=document.forms["fartist"]["artist"].value;
    if (y==null || y=="")
    {
        alert("Search without Artist Name?");
        return false;
    }

            window.open("songList.html", "_self");      
} 

In the last line, it is the code to open new page on the same tab. 在最后一行中,它是在同一选项卡上打开新页面的代码。 but each time I click on the button a new tab opens. 但是每次我单击按钮时,都会打开一个新标签。 How do I correct it? 我该如何纠正? I also tried using the following codes too. 我也尝试使用以下代码。 but I don't know why none of them worked to open the new page on the same tab. 但我不知道为什么他们都不在同一个标​​签上打开新页面。

 location.href = "songList";
 window.location="songList.html";
 window.open("songList.html",  "currentWindow", "");

Where is the actual problem? 实际问题在哪里? need help to fix it. 需要帮助修复它。 I need to do this using javascript and html only. 我只需要使用javascript和html来做到这一点。

如果你只是这样做

        window.open("songList.html");  

尝试使用window.location.assign

window.location.assign("songList.html");

Try this 尝试这个

window.location.replace("songList.html");

This works fine for me! 这对我来说很好!

I think what you want to achieve is to validate the search first before submitting the form? 我认为您想要实现的是在提交表单之前先对搜索进行验证? You have to add action attribute in the form tab and move the return validation() to submit button. 您必须在表单选项卡中添加action属性,然后将return validation()移至“提交”按钮。

Look at my example below: 看下面我的例子:

This will allow you to load the songList.html on the same Tab. 这将允许您在同一选项卡上加载songList.html

 function validation() { var x=document.forms["flyrics"]["lyrics"].value; if (x==null || x=="") { alert("Search without Lyrics?"); return false; } var y=document.forms["fartist"]["artist"].value; if (y==null || y=="") { alert("Search without Artist Name?"); return false; } } 
 <!DOCTYPE html> <body> <form id="flyrics"> <input type="text" id="lyrics" value=""> </form> <form id="fartist"> <input type="text" id="artist" value=""> </form> /* code of the other forms */ <form id="songList" action="songList.html"> <input type="submit" id="x" value="Search" onclick="return validation()"/> </form> </body> 

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM