爲每個Iframe生成一個唯一Id，或者從DOM節點生成一個Iframe

我需要爲每個Iframe設置一個唯一的Id，以便它們正確呈現。我有一個renderId變量增加。我試圖將其附加到Iframe Id。爲每個Iframe生成一個唯一Id，或者從DOM節點生成一個Iframe

document.getElementById('iframe-test' + renderId);

整個代碼塊在這裏：

let renderId = 0; 
    const render = post => { 
    renderId++; 
    const node = document.createElement('div'); 
    node.innerHTML = ` 
    <h2 class="centered"> 
     <a href="${post.link}"> 
     <br> 
      <iframe id="iframe-test" width="100%" min-height="100%" src=""> 
      </iframe> 
     <br> 
     ${post.title} 
     </a> 
     <br><br> 
     </h2>`; 
     app.appendChild(node); 
     document.getElementById('iframe-test' + renderId);

沒有影片顯示。我試過改變這條線上的報價：

<iframe id="iframe-test" width="100%" min-height="100%" src="">

我需要一些額外的步驟之前，這行，但我不知道是什麼。

document.getElementById('iframe-test' + renderId);

完整的應用程序：http://codepen.io/Teeke/pen/BWROeW

來源

2017-03-12 RubyRube

我最終構建了DOM節點之外的iframe。這樣我就可以構建一個輕鬆重複的iframe，而無需爲每個幀生成唯一的ID。這實際上並不是根據原始問題生成一個ID，但它確實允許您複製一個沒有唯一ID問題的Iframe div。我修改了這個問題的標題以反映這個更廣泛的解決方案。

HTML：

<div id="app"></div>

JS：

const app = document.querySelector('#app'); 
const render = post => { 
const node = document.createElement('div'); 
    node.innerHTML= `${post.title}`; 
    node.className= 'clip-title'; 
    app.appendChild(node); 

var a = document.createElement('iframe'); 
a.className = "clip-content" 
a.src = "https://www.youtube.com/embed/" + strippedURL; //add your iframe path here 
a.width = "100%"; 
a.height = "100%"; 
a.padding = "500px"; 
app.style.textAlign = "center"; 
document.querySelector('#app').appendChild(a);

來源

2017-03-21 17:42:33 RubyRube

'<iframe id="iframe-test"'+renderId.toString()+' width="100%" min-height="100%" src="">'編輯：您剛纔忘了給不同的ID給每個格。您正在查找未分配的ID，因此我添加了renderId.toString。也許它會在沒有toString的情況下工作。不知道

來源

2017-03-12 13:14:20 JustARandomProgrammer

謝謝。我將在本週嘗試。 – RubyRube

不客氣。 – JustARandomProgrammer

在函數的頂部創建一個變量的「獨一無二」 ID：

let renderId = 0; 
const render = post => { 
    renderId++; 
    const iframeId = `iframe-test-${renderId}`; 
    const node = document.createElement('div'); 
    node.innerHTML = `<h2 class="centered"> 
         <a href="${post.link}"><br> 
          <iframe id="iframe-test" width="100%" min-height="100%" src=""> 
          </iframe> 
          <br>${post.title} 
         </a> 
         <br><br> 
         </h2>`; 
    app.appendChild(node); 
    document.getElementById(iframeId); 
}

或者，你可以使用YouTube參考作爲ID這樣的：

// post.link (https://www.youtube.com/watch?v=TmIo702wjm4) 

const uniqueId = `iframe-test-${post.link.substr(post.link.lastIndexOf('v=') +2)}`; 

// iframe-test-TmIo702wjm4

來源

2017-03-12 13:25:14

立即嘗試。它絕對記錄了一個唯一的ID。我會更新，如果我得到一個完整的答案... – RubyRube

@RubyRube酷。需要幫助請叫我！ –

爲每個Iframe生成一個唯一Id，或者從DOM節點生成一個Iframe

回答

相關問題