硬编码文本

Question

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

我设法在页面加载时显示正确的文字，但是当我点击“AFT”时按钮文本替换为＆＃34; [object HTMLIFrameElement]＆＃34;而不是显示iframe。有谁知道什么是错的？

HTML code：

    <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。这是一种从服务器加载数据而不刷新页面的技术。网上有很多教程，这里已经回答了很多问题。这真的不那么难：）

如何通过javascript点击按钮时用iframe替换内容区域？

1 个答案:

硬编码文本

从数据库