Iframe의 제목을 동적으로 변경하는 방법은 무엇입니까?

Question

회사 웹 사이트의 Iframe에 일부 동영상 파일을 표시하려고합니다. 사용자가 동영상 링크를 클릭 할 때마다 Iframe 안에 표시됩니다. 이 작업을 수행하기 위해 Javascript 파일을 사용했습니다. 내 비디오를 관람할 경우 관은 비디오의 제목을 표시합니다. 그러나 자바 스크립트는 iframe의 내용 만 변경합니다. Iframe 위의 동영상 파일 제목을 표시해야합니다. 내가 사용하는 자바 스크립트 파일은 이것이다 :

<script type="text/javascript"> 
function ChangeVideoUrl(url) 
{ 
document.getElementById("video_iframe").src = url; 
} 
</script> 

나는이 쓴에서 :

<a class="links" href="JavaScript:ChangeVideoUrl('https://..something.');"> text</a> 

어떤 아이디어를?

Answer 1

iframeReference.contentDocument.title = 'some title'으로 iframe의 실제 제목을 변경할 수 있습니다. h1 태그와 같은 HTML 제목을 변경하려면 해당 참조를 가져 와서 textContent을 설정하면됩니다. 아래를 참조하십시오.

샘플 마크 업 :

<button id="myBtn">Change Iframe</button> 
    <h1 id="h1Title">Iframe Title</h1> 
    <iframe id="myIframe"></iframe> 

샘플 자바 스크립트 :

var myBtn = document.getElementById('myBtn'); 
var myIframe = document.getElementById('myIframe'); 
var h1Title = document.getElementById('h1Title'); 

myBtn.addEventListener('click', changeIframe); 

function changeIframe() { 
    myIframe.contentDocument.title = 'New title!'; 
    h1Title.textContent = 'New Title!'; 
} 

당신은 지금 당신의 코드를 사용하여 질문을 업데이트 한 것처럼 Live demo (click).

, 더있다 말하다.

먼저 인라인 js (HTML 요소의 JavaScript)가 잘못되었습니다. 다음 결과 중 일부를 읽어보십시오. https://www.google.com/search?q=Why+is+inline+js+bad%3F

대신 예제를 따라 요소 참조를 받고 이벤트 리스너를 첨부하십시오. 원하는 경우 요소에 데이터를 저장하고 여기에서 데이터를 가져올 수 있습니다.

Live demo (click).

마크 업 :

<div class="links"> 
    <a data-src="a/video" data-title="A video!">Click to Play: A video!</a> 
    <a data-src="some/title" data-title="Some Title!">Click to Play: Some Title!</a> 
    <a data-src="another/title" data-title="Another Title!">Click to Play: Another Title!</a> 
</div> 
<h1 id="h1Title">Iframe Title</h1> 
<iframe id="myIframe"></iframe> 

자바 스크립트 :

var myIframe = document.getElementById('myIframe'); 
var h1Title = document.getElementById('h1Title'); 
var links = document.querySelectorAll('.links a'); 

for (var i=0; i<links.length; ++i) { 
    addClickFunc(links[i], i); 
} 

function addClickFunc(elem, i) { 
    elem.addEventListener('click', function() { 
    var title = elem.getAttribute('data-title'); 
    var src = elem.getAttribute('data-src'); 
    changeIframe(title, src); 
    }); 
} 


function changeIframe(title, src) { 
    myIframe.src = src; 
    myIframe.contentDocument.title = title; 
    h1Title.textContent = title; 
} 

Answer 2

제목에 대한 일부 제목을 가정합니다. 자바 스크립트로도이 작업을 수행 할 수 있습니다.

iframe의 제목이있는 태그의 ID를 지정하십시오. 자바 스크립트를 사용하면 사용자가 비디오 링크를 클릭 할 때 텍스트를 변경합니다 (chnage innerHTML).