更改innerHTML之后，頁面會自動重新加載嗎？

Question

我正在嘗試制作一個簡單的JavaScript / HTML頁面，該頁面在獲得URL后插入音頻播放器。 每次我按下下面代碼生成的按鈕時，都會插入音頻播放器，然后頁面似乎刷新，擺脫了HTML。

HTML：

<div id="titleBlock">
    <h4>Livestream Listener</h4>
    <p>Enter a livestream URL below so you can listen in-browser.</p>
    <form>
        <input id="stream" type="url">
        <button onclick="livestreamlisten()" class="btn">Listen</button>
    </form>
</div>
<hr />
<div id="streamBlock">
</div>

JS：

function getStreamURL(){
    var stream = document.getElementById('stream').value;
    return stream;
}

function insertPlayer(url){
    var html = `
        <audio controls>
            <source src="${url}" type="audio/mpeg">
            <source src="${url}" type="audio/ogg">
        </audio>
    `;
    document.getElementById("streamBlock").innerHTML = html;
}

function livestreamlisten(){
    var url = getStreamURL();
    insertPlayer(url);
}

Answer 1

您需要將按鈕設置為簡單按鈕，而不是“提交”按鈕：

<button type="button" onclick="livestreamlisten()" class="btn">Listen</button>

或者，您可以擺脫周圍的<form> 。

Answer 2

按照@Pointy的建議進行操作，或者將事件對象傳遞到livestreamlisten(event)函數，然后在其中調用event.preventDefault() ，如下所示：

 function getStreamURL(){ var stream = document.getElementById('stream').value; return stream; } function insertPlayer(url){ var html = ` <audio controls> <source src="${url}" type="audio/mpeg"> <source src="${url}" type="audio/ogg"> </audio> `; document.getElementById("streamBlock").innerHTML = html; } function livestreamlisten(event){ event.preventDefault(); // prevent the default behavior of "reloading" var url = getStreamURL(); insertPlayer(url); } 

 <div id="titleBlock"> <h4>Livestream Listener</h4> <p>Enter a livestream URL below so you can listen in-browser.</p> <form> <input id="stream" type="url"> <button onclick="livestreamlisten(event)" class="btn">Listen</button> </form> </div> <hr /> <div id="streamBlock"> </div> 

希望對您有所幫助！

Answer 3

您應該添加return false; 到livestreamlisten()函數，以防止按鈕執行其默認操作。 沒有它，您將獲得諸如表單提交等副作用。這也適用於錨標記<a> ，例如，單擊時應觸發功能的鏈接。

該方法變為：

function livestreamlisten(){
    var url = getStreamURL();
    insertPlayer(url);
    return false;
}