如何動態更改Iframe的標題？

-3

我想在我們公司的網站的Iframe中顯示一些視頻文件。每當用戶點擊視頻鏈接時，它都會顯示在Iframe內。我用一個Javascript文件來執行這個動作。如果我將視頻託管在您的視頻管中，則顯示視頻的標題。但是，我使用的JavaScript僅更改了iframe的內容。我需要在Iframe上方的某處顯示視頻文件的標題。我使用JavaScript文件是這樣的：如何動態更改Iframe的標題？

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

在我寫這篇：

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

什麼想法？

來源

2014-01-14 user3026373

你所說的「標題」是什麼意思？什麼是html？ – m59

'iframe'沒有標題屬性。你在找什麼？ –

@BrianS是的，它的確如此，但似乎並不相關...... – m59

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

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

來源

2014-01-14 17:09:19 m59

但我不需要按鈕 – user3026373

@ user3026373然後不要使用按鈕= D我只是在演示。 – m59

無論如何，我可以做到這一點沒有按鈕？我編輯了我的問題，請問你能看看嗎？非常感謝。 – user3026373

假定某個標題的標題。你也可以通過javascript來做到這一點。

爲持有iframe標題的標籤給出id。當用戶點擊視頻鏈接（chnage innerHTML）時，使用javascript更改文本。

來源

2014-01-14 17:08:45 sanjay

我對JavaScript不太熟悉，你能否做到這一點？在這裏把它作爲演示？對此，我真的非常感激。 – user3026373

如何動態更改Iframe的標題？

回答

相關問題