Wordpress：仅在点击时加载 iframe

Posted 2023-05-09

【中文标题】Wordpress：仅在点击时加载 iframe

【英文标题】：Wordpress: Load iframe only onclick

【发布时间】：2018-09-10 17:40:44

【问题描述】：

我有一些通过 iframe 在我的 Wordpress 网站上显示的外部内容。内容很重（5mb+），我的网站加载时间太长。我可以保留占位符图像，当用户点击占位符时，只有 iframe 加载？

我尝试了 BJ Lazy Load 插件，但它会在用户滚动时触发 iframe，我希望用户点击。

【问题讨论】：

即使您将添加一个将显示 iframe 的触发器。加载时间将相同。为什么？因为 iframe 中的站点资源非常繁重，以至于浏览器需要在将它们全部下载到框架上之前将它们全部下载。我可以列举 2 个影响 iframe 加载速度的因素。 1. 您的网速 - 下载速度会影响它。 2. PC规格/浏览器及其版本

您好 Tibs，感谢您的回复。如何停止浏览器默认呈现内容并仅在用户单击元素时呈现？

你可以使用bootstrap的modal。虽然它只会隐藏 iframe 并“秘密”加载它。

【参考方案1】：

这有点快和肮脏。我假设您使用的是基于浮动的布局，而不是 Flexbox。

<styles>
    #your-iframe 
        display: block;
        margin-bottom: 30px;
        width: 100%;
        height: 400px;
    

    #iframe-wrapper 
        position: relative;
    

    #iframe-placeholder 
        position: absolute;
        width: 100%;
        height: 100%;
        cursor: pointer;
    

    #iframe-placeholder img 
        width: 100%;
    
</styles>

<div id="iframe-wrapper">
  <div id="iframe-placeholder">
    <img src="https://cdn.pixabay.com/photo/2018/03/10/15/13/water-3214232_640.jpg" >
  </div>
  <iframe id="your-iframe" src=""></iframe>
</div>

<script>
    var yourIframe = document.getElementById('your-iframe');
    var iframeLoader = document.getElementById('iframe-placeholder');
    var iframeSrc = 'https://autotrader.com'

    iframeLoader.addEventListener('click', function() 
        yourIframe.src = iframeSrc;
        this.parentNode.removeChild(this);
    , false);
</script>

JSFiddle

【讨论】：

出现错误未捕获的类型错误：无法读取 null 的属性“addEventListener”，我可以删除按钮并让侦听器点击图像吗？

你的脚本在 iframe 和 button 元素下吗？此外，您的内容是否在您的网站之外？如果不是，它是否必须在 iframe 中？如果内容不是网页，我会推荐一个带有 CSS overflow-y:scroll 属性的 div。这样您就可以使 div 可点击，同时仍可像 iframe 一样滚动。

是的，它现在可以工作了。当用户点击我的占位符图像时，如何删除按钮并使其工作？

您能否回答，您的内容是否在您的网站之外？如果不是，它必须在 iframe 中吗？

是的，它的外部 html 页面