자바 스크립트를 통해 버튼을 클릭하면 콘텐츠 영역을 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> 

자바 스크립트를 데이터베이스에서

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; 
    } 
} 

로드 텍스트

당신이 텍스트를 변경 다른 사람에게로 변경하거나 할 수있는 기회를 제공하려는 경우 여러 바이오스를 저장하고 서버의 데이터베이스에 저장하는 방법에 대해 생각해보십시오 (귀하의 구조와 함께 가능). 이 경우 AJAX 사용에 대해 생각해야합니다. 페이지를 새로 고치지 않고 서버에서 데이터를로드하는 기술입니다. 웹에 많은 자습서가 있으며 많은 질문이 여기에 이미 나와 있습니다. 정말 어렵지 않다.