當通過JavaScript單擊按鈕時，如何用iframe替換內容區域？

Question

我有一個內容區域，當頁面加載時，我想在其中顯示某些文本，而單擊按鈕時，我要在其中顯示相同的文本（傳記）。 當單擊其他按鈕（AFT）時，我希望通過iframe將內容區域中的文本替換為URL的內容。

我設法在頁面加載時顯示正確的文本，但是當我單擊“ AFT”按鈕時，文本將替換為“ [object HTMLIFrameElement]”，而不顯示iframe。 有人知道出什么事了嗎？

HTML代碼：

    <div id="content" > 
    <script src="myJS.js"></script>
    <script> displayBiography(); </script>

    <iframe src="cwExample.pdf" name="iframe" id="iframe1"></iframe>
    </div>

    <div id="leftBar"> 
    <br><br>
    <button class="button" type="button" onclick="displayBiography();"> 
    Biography </button>
    <h3> Samples of Work </h3>
    <button class="button" type="button" onclick="toShow();" 
    target="#iframe1"> AFT </button>

JS代碼：

    var content = document.getElementById("content");
    var biography = "<p> Text here </p>"
    ;

    function displayBiography() {
        "use strict";
        content.innerHTML = biography;
    }

    window.onload = function() {
        var iframe = document.getElementById('iframe1');
        iframe.style.display = 'none';
    }


    function toShow() {
        var iframe1 = document.getElementById('iframe1');
        content.innerHTML = iframe1
        biography.style.display = 'none';
        iframe1.style.display = 'block';
    }

Answer 1

有不同的解決方案，具體取決於您的未來目標。 但通常不建議使用iFrame。

硬編碼文本

如果文本是靜態的，並且在編碼后不需要更改，則只需使用JS即可設置文本，而無需jQuery。

的HTML

<div id="content">

</div>

的JavaScript

window.onload = function() {
  showBio();

  // add event listeners to the buttons
}

function showBio() {
    var bio = "blabla";
    setContent(bio);
}

function showSmthElse() {
    var txt = "other blabla";
    setContent(txt);
}

function setContent(newContent) {
    var div = document.getElementById("content");
    if( div != null ) {
        div.innerHTML = '';
        div.insertAdjacentHTML = content;
    }
}

從數據庫加載文本

如果要更改文本，請給其他人機會進行更改，或者要保存多個BIOS，請考慮將其存儲在服務器上的數據庫中（如果您的結構可能的話）。 在這種情況下，您應該考慮使用AJAX。 這是一種無需刷新頁面即可從服務器加載數據的技術。 網絡上有很多教程，這里已經回答了許多問題。 真的沒有那么困難:)