更改innerHTML後，頁面自動重新加載？

我正在嘗試製作一個簡單的JavaScript/HTML頁面，在給出URL後插入音頻播放器。每當我按下下面的代碼生成的按鈕時，插入音頻播放器，然後頁面似乎刷新，擺脫該HTML。更改innerHTML後，頁面自動重新加載？

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); 
}

來源

2016-06-23 Ian Mobbs

你需要做的按鈕是一個簡單的按鈕，而不是「提交」按鈕：

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

另外，您可以只是擺脫周圍的<form>。

來源

2016-06-23 23:48:01 Pointy

無論做什麼@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>

我希望幫助！

來源

2016-06-23 23:53:44

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

的方法變爲：

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

來源

2016-06-23 23:59:51 drewpotential

更改innerHTML後，頁面自動重新加載？

回答

相關問題