在选项卡内延迟加载 iFrame

Question

想问一下如何在每次点击标签时延迟加载标签内的iFrame？我想在第一次加载时添加一个活动 class。我不懂如何编码，我在这里很新。

我的是这样的:

function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

body {font-family: Arial;}

/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  width: 100vw;
  height: 100vh;
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

.tab-content {
  width: 100vw;
  height: 100vh;
}

<body>
  <div class="tab">
    <button class="tablinks" onclick="openCity(event, 'London')">London</button>
    <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
    <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
  </div>

  <div id="London" class="tabcontent">
    <iframe class= "tab-content" src="https://en.wikipedia.org/wiki/London" loading="lazy">
    </iframe>
  </div>

  <div id="Paris" class="tabcontent">
    <iframe class= "tab-content" src="https://en.wikipedia.org/wiki/Paris" loading="lazy">
    </iframe> 
  </div>

  <div id="Tokyo" class="tabcontent">
    <iframe class= "tab-content" src="https://en.wikipedia.org/wiki/Tokyo" loading="lazy">
    </iframe> 
  </div>
</body>

请帮我解决这个问题。我目前正在使用 wordpress，是否可以在 wordpress 中执行此操作？非常感谢

Answer 1

为了“卸载”后台的 iFrame，您需要从中删除内容，这可以通过删除 src= 属性来完成。我在您的函数顶部添加了一个循环，该循环遍历所有 <iframe> 元素并“清除”它们，然后...只有可见的 iframe 才会加载，因为所有 iframe 都已设置为 loading="lazy" 这可以重构并以更好的方式编写，但此示例保留了您现有的代码并实现了目标。

function openCity(evt, cityName) {
  var i, tabcontent, tablinks, iframes;
  
  iframes = document.getElementsByTagName("iframe");
  for (i = 0; i < iframes.length; i++) {
    iframes[i].removeAttribute('src');
    if (i == 0) { iframes[i].setAttribute('src', 'https://en.wikipedia.org/wiki/London' ); }
    if (i == 1) { iframes[i].setAttribute('src', 'https://en.wikipedia.org/wiki/Paris' ); }
    if (i == 2) { iframes[i].setAttribute('src', 'https://en.wikipedia.org/wiki/Tokyo' ); }
  }
  
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

场景：假设您单击“伦敦”按钮，然后单击“巴黎”按钮，然后检查源。伦敦和东京 <iframe> 内容将是空白的，因为伦敦已被“清除”并且从未访问过东京，而巴黎是可见的。

https://jsfiddle.net/ard45tL2/5/

您可以通过将 src 内容保留在单独的数据属性（如 data-src="https://en.wikipedia.org/wiki/London" 中，然后在删除 src 属性和设置后从那里简单地复制来稍微清理一下回来了。只是一个想法。

<body>
  <div class="tab">
    <button class="tablinks" onclick="openCity(event, 'London')">London</button>
    <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
    <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
  </div>

  <div id="London" class="tabcontent">
    <iframe class= "tab-content" data-src="https://en.wikipedia.org/wiki/London" src="https://en.wikipedia.org/wiki/London" loading="lazy">
    </iframe>
  </div>

  <div id="Paris" class="tabcontent">
    <iframe class= "tab-content" data-src="https://en.wikipedia.org/wiki/Paris" src="https://en.wikipedia.org/wiki/Paris" loading="lazy">
    </iframe> 
  </div>

  <div id="Tokyo" class="tabcontent">
    <iframe class= "tab-content" data-src="https://en.wikipedia.org/wiki/Tokyo" src="https://en.wikipedia.org/wiki/Tokyo" loading="lazy">
    </iframe> 
  </div>
</body>

通过在上面添加 data-src 属性，您可以简化循环。

function openCity(evt, cityName) {
  var i, tabcontent, tablinks, iframes;
  
  iframes = document.getElementsByTagName("iframe");
  for (i = 0; i < iframes.length; i++) {
    iframes[i].removeAttribute('src');
    iframes[i].setAttribute('src', iframes[i].getAttribute('data-src') );
  }
  
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

https://jsfiddle.net/ard45tL2/6/

最后，我将 iframe.removeAttribute() 和 iframe.setAttribute() 函数拆分到各自的循环中，以便将其与您现有的代码结合起来。

你设置的是"display = none"我设置的是iframe.removeAttribute()
当您将特定城市设置为 active 时，我将 iframe.setAttribute()

这可能是最好的，因为它甚至没有设置不可见的 <iframe> 元素的来源。

function openCity(evt, cityName) {
  var i, tabcontent, tablinks, iframe;
   
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
    iframe = tabcontent[i].firstElementChild;  //Added
    iframe.removeAttribute('src');             //Added
  }
  
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
  iframe = document.getElementById(cityName).firstElementChild;   //Added
  iframe.setAttribute('src', iframe.getAttribute('data-src') );   //Added
  
}

https://jsfiddle.net/ard45tL2/7/

在选项卡内延迟加载 iFrame

Lazy Load iFrame Inside the Tabs

html

javascript

wordpress

jquery

lazy-loading