javascriptを使用して、ボタンをクリックしたときにコンテンツ領域をiframeに置き換える方法は？

Question

私は、ページが読み込まれたときに特定のテキストを表示したい、ボタンがクリックされたときに同じテキスト（伝記）を表示するコンテンツ領域を持っています。別のボタン（AFT）をクリックすると、コンテンツ領域のテキストをiFrame経由でURLのコンテンツに置き換えます。

ページが読み込まれたときに適切なテキストを表示することができましたが、「AFT」ボタンをクリックすると、iframeを表示する代わりにテキストが「[object HTMLIFrameElement]」に置き換えられます。誰かが間違っていることを知っていますか？

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の使用はお勧めできません。

ハードコード化されたテキスト

テキストは静的であり、コーディング後に変更する必要がない場合は、単にjQueryをせずに、JSを使用してテキストを設定することができます。

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の使用について考える必要があります。これは、ページを更新せずにサーバーからデータをロードする手法です。 Web上には多くのチュートリアルがあり、多くの質問はすでにここで回答されています。これは本当に難しいことではありません:)