更改iframe重新加載頁面的來源

Question

我更改了Iframe的來源，但重新加載了頁面，但我不知道為什么。 HTML：

        <div id="fill">
            <iframe id="frame" style="width: 88.97vw; height: 90vh" src="html/question1.html">

            </iframe>
        </div>
            <form>
                <input type="submit" value="question1" class="menuBut">
                <input type="submit" value="question2" class="menuBut">
                <input type="submit" value="question3" class="menuBut">
            </form>

我的頁面是測驗，我希望iframe在按下按鈕時更改問題。 jQuery的：

var url;

function callMe() {
    $(".menuBut").click(function () {
        $("#frame").remove();
        url = this.value;
        $("#fill").append('<iframe id="frame" width="200px" height="700px" src="html/' + url + '.html"></iframe>');
    });
}

$(document).ready(function () {
    callMe();
});

應該將源更改為頁面“ html / questionX.html”，其中X取決於所按下的按鈕。 但是，它不適應iframe，而是刷新頁面。 請支持。

Answer 1

在按鈕上使用type="button"而不是submit 。 否則，按鈕將提交導致頁面重新加載的表格。

Answer 2

如果只需要按鈕，則不需要使用表單，當然也不需要提交按鈕來觸發Javascript。 只需使用常規按鈕，就像這樣...

<div id="fill">
    <iframe id="frame" style="width: 88.97vw; height: 90vh" src="html/question1.html"></iframe>
</div>
<button type="button" value="question1" class="menuBut">question 1</button>
<button type="button" value="question2" class="menuBut">question 2</button>
<button type="button" value="question3" class="menuBut">question 3</button>

提交按鈕導致表單被提交，這基本上將所有表單數據發布到頁面本身，從而導致重新加載。

Answer 3

return false; 在click事件處理程序的末尾，以停止傳播和提交按鈕的默認行為。