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()，如下所示：

＆＃13;

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

＆＃13;

<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>

＆＃13;

我希望有所帮助！

Answer 3

您应该在return false;函数中添加livestreamlisten()，以防止该按钮执行默认操作。没有它，您将获得诸如表单提交等副作用。这也适用于锚标记<a>，例如，应该在点击时触发函数的链接。

该方法变为：

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

更改innerHTML后，页面会自动重新加载吗？

3 个答案: