阻止iframe加载到移动设备上

Prevent iframe from loading on mobile

本文关键字：移动 iframe 加载 阻止      更新时间：2023-12-22

我正在处理我的公文包页面，我希望我的项目处于演示模式，用户可以在不同的视口中预览网站。我从这里得到了这个想法：http://my.studiopress.com/themes/genesis/#demo-全

在移动设备上，我希望不加载iframe，而是在新选项卡中打开项目的链接。

如果我将包含iframe的div隐藏在CSS文件的顶部，并显示：none，我可以看到iframe仍然在后台加载，页面加载需要很长时间。

在特定的设备或视口大小上，是否有任何方法可以阻止它们加载？

您可以通过使用JavaScript和HTML数据属性来实现这一点。通过将src属性设置为类似"#"的值，它将不会加载任何内容。您可以使用数据属性来存储URL，以便与JavaScript一起使用。

<iframe src="#" data-src="https://placekitten.com/200/300" frameborder="0"></iframe>

然后，您只需使用window.matchMedia（）检查屏幕大小，并将src属性设置为特定的屏幕大小。

var $iframe = $('iframe'),
    src = $iframe.data('src');
if (window.matchMedia("(min-width: 480px)").matches) {
    $iframe.attr('src', src);
}

以下是一个工作示例：https://jsfiddle.net/5LnjL3uc/

如果你想在用户调整窗口大小后显示iframe，你需要将代码放入一个函数中，并将其绑定到一个调整大小事件：

var $iframe = $('iframe'),
    src = $iframe.data('src');
function showIframe() {
    if (window.matchMedia("(min-width: 480px)").matches) {
        $iframe.attr('src', src);
    }
}
$(window).on('resize', showIframe);
// Initialize it once on document ready
showIframe();

工作示例：https://jsfiddle.net/5LnjL3uc/1/

更好的解决方案是反向处理。

IE加载src时，首先不要将URL放在类似"data-src"的属性中。

请参阅下面的代码。当你的设备或设备宽度不是移动/移动大小时，你只需将数据src复制到你的src中。

我相信这是最好的解决方案，因为没有不确定性。使用前面提到的解决方案（我尝试过），当您的代码运行并决定加载iframe-src时，您正在与浏览器争分夺秒。

if(device !== true) {
  // add '#' to the href
  let iframe = document.getElementById('3dExperience')
  iframe.src = iframe.getAttribute('data-src')
}

注意："device"是用于检测移动设备的is mobile npm包。

相关文章：