Question

48

How to change the title of an Iframe dynamically?

rated 0 times [ 49] [ 1] / answers: 1 / hits: 11201 / 11 Years ago, tue, january 14, 2014, 12:00:00

I am trying to show some video files in an Iframe for our company web site. Whenever the user clicks on a video link it will be shown inside an Iframe. I used a Javascript file to perform this action. If I host my videos on you tube, you tube show the title of video.But the javascript I used only change the content of the iframe. I need to show the title of the video files somewhere above the Iframe.
The javascript file I use is this :

<script type=text/javascript>

function ChangeVideoUrl(url)

{

document.getElementById(video_iframe).src = url;

}

</script>

and in I wrote this :

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

Any Ideas?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jamaal

Add To Favorites

Follow

Total Points: 515

Total Questions: 102

Total Answers: 107

Location: France

Member since Thu, May 6, 2021

3 Years ago

answered 11 Years ago jeniferjaliyahf · Accepted Answer

You can change the actual title of the iframe with iframeReference.contentDocument.title = 'some title'. If you want to change an html title like a h1 tag, you can get the reference to it and set its textContent. See below.

Sample Markup:

  <button id=myBtn>Change Iframe</button>

  <h1 id=h1Title>Iframe Title</h1>

  <iframe id=myIframe></iframe>

Sample JavaScript:

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).

As you have now updated your question with your code, there is more to say.

First, inline js (JavaScript inside your html elements) is bad. Read some of these results: https://www.google.com/search?q=Why+is+inline+js+bad%3F

Instead, follow my example and get element references and attach event listeners to them. You can store your data on the element and pull it from there if you want to.

Live demo (click).

Markup:

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

JavaScript:

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;

}