通过JavaScript单击按钮时，如何用iframe替换内容区域

Question

我有一个内容区域，当页面加载时，我想在其中显示某些文本，然后单击按钮时（传记）。单击其他按钮（后）时，我希望通过iframe将内容区域中的文本替换为URL的内容。

我已经设法获得了页面加载时显示正确的文本，但是当我单击" aft"按钮时，文本被替换为" [对象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。这是一种在不刷新页面的情况下从服务器加载数据的技术。网络上有很多教程，这里已经回答了许多问题。真的并不困难：）