Javascript 如何动态更改Iframe的标题？

我正试图在我们公司网站的Iframe中显示一些视频文件。每当用户单击视频链接时，它都会显示在Iframe中。我使用了一个Javascript文件来执行此操作。如果我把我的视频放在YouTube上，YouTube会显示视频的标题。但是我使用的javascript只会改变iframe的内容。我需要在Iframe上方的某个位置显示视频文件的标题。 我使用的javascript文件如下所示：

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

函数更改视频url（url）
{
document.getElementById（“video_iframe”）.src=url；
}

我在信中写道：

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

---

有什么想法吗？

假设某个标题。您也可以通过javascript实现这一点

为包含iframe标题的标记提供id。

---

使用javascript在用户单击视频链接（chnage innerHTML）时更改其中的文本。

您可以使用

iframeReference.contentDocument.title='some title'

更改iframe的实际标题。如果要更改html标题，如

h1

标记，可以获取对它的引用并设置其

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

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

现在，您已经用代码更新了问题，还有更多的话要说

首先，内联js（html元素中的JavaScript）不好。阅读其中一些结果：

相反，请遵循我的示例，获取元素引用并将事件侦听器附加到它们。您可以将数据存储在元素上，并根据需要从元素中提取数据

标记：

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

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

点击播放：一段视频！
点击播放：一些标题！
点击播放：另一个标题！
Iframe标题

JavaScript:

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

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

var myIframe=document.getElementById（'myIframe'）；
var h1Title=document.getElementById（'h1Title'）；
var links=document.querySelectorAll（'.links a'）；
对于（var i=0；i）您所说的“标题”是什么意思？什么是html？
iframe
没有标题属性。你要找的是什么？@BrianS是的，有，但似乎不相关…@m59，对不起。你在技术上是正确的，因为标题是一个全局属性。但它对
iframe
没有任何用处。你还没有提到什么“标题”你想更新…但我不需要button@user3026373然后不要使用按钮=D我只是在演示。没有按钮我还能做吗？我编辑了我的问题，你能看一下吗？非常感谢。我对Javascript不太熟悉，你能做一下并把它作为演示放在这里吗？我真的很感激。