How to change the title of an Iframe dynamically?

Question

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 f

Answer 1

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

Answer 2

Assuming some heading for title. You can do this also by javascript.

Give the id for the tag that holding the title of iframe. Using javascript change the text in that when user click's on video link(chnage innerHTML).