如何动态更改Iframe的标题？ [英] How to change the title of an Iframe dynamically?

问题描述

我试图在我们公司网站的iframe中显示一些视频文件。每当用户点击视频链接时，它都会显示在Iframe内。我用一个Javascript文件来执行这个动作。如果我将视频托管在您的视频管中，则显示视频的标题。但是，我使用的JavaScript仅更改了iframe的内容。我需要在Iframe上方的某处显示视频文件的标题。
我使用的javascript文件是这样的：

 < script type =text / javascript> 
函数ChangeVideoUrl（url）
 {
 document.getElementById（video_iframe）。src = url; 
} 
< / script> 
  

在我写这篇文章时：

 < a class =linkshref =JavaScript：ChangeVideoUrl（'https：//..something。'）;>文字< / A> 
  

任何想法？

解决方案

您可以使用 iframeReference.contentDocument.title ='某个标题'>更改iframe的实际标题。如果你想改变一个html标题，比如 h1 标签，你可以得到对它的引用并设置它的 textContent 。见下面。

样品标记：

 < button id =myBtn>更改iframe< / button> 
< h1 id =h1Title> Iframe标题< / 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 ='新标题！'; 
} 
  

首先，内联js（html元素中的JavaScript）是不好的。阅读以下部分结果： https://www.google .com / search？q =为什么+ is + inline + js + bad％3F

请按照我的示例获取元素引用并附加事件侦听器给他们。您可以将数据存储在元素上，如果您愿意的话，可以将其从中拉出。

现场演示（点击）。
$ b

标记：

 < div class =links> 
  < a data-src =another / titledata-title =Another Title！>点击播放：另一个标题！< / a> 
< / div> 
< h1 id =h1Title> Iframe标题< / 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）; 
 
 $ b $ function addClickFunc（elem，i）{
 elem.addEventListener（'click'，function（）{
 var title = elem.getAttribute（'data '）; 
 var src = elem.getAttribute（'data-src'）; 
 changeIframe（title，src）; 
}）; 
} 
 
 
函数changeIframe（title，src）{
 myIframe.src = src; 
 myIframe.contentDocument.title = title; 
 h1Title.textContent = title; 
} 
  

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?

解决方案

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

这篇关于如何动态更改Iframe的标题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！