Question

我正在尝试在我们公司网站的Iframe中显示一些视频文件。每当用户点击视频链接时，它都会显示在iframe中。我使用Javascript文件来执行此操作。如果我在你的视频上播放我的视频，你管显示视频的标题。但我使用的javascript只更改iframe的内容。我需要在Iframe上方的某处显示视频文件的标题。我使用的javascript文件是：

<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

假设有一些标题。您也可以通过javascript执行此操作。

为包含iframe标题的代码指定ID。当用户点击视频链接（chnage innerHTML）时，使用javascript更改文本。

Answer 2

您可以使用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>

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

正如您现在使用您的代码更新了您的问题，还有更多要说的。

首先，内联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>

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

如何动态更改Iframe的标题？

2 个答案: