javascript - 阻止 iframe 在移动设备上加载

Question

我正在制作我的作品集页面，我希望我的项目处于演示模式，用户可以在不同的视口(viewport)中预览网站。我从这里得到了这个想法: http://my.studiopress.com/themes/genesis/#demo-full

在移动设备上，我希望阻止加载 iframe，而是使用指向项目的链接在新选项卡中打开网站。

如果我将包含 iframe 的 div 隐藏在 CSS 文件的最顶部，并使用 display:none，我可以看到 iframe 仍然在后台加载，并且页面需要很长时间才能加载。

有什么方法可以阻止它们在特定设备或视口(viewport)大小上加载吗？

Answer 1

您可以通过使用 JavaScript 和 HTML 数据属性来实现此目的。通过将 src-Attribute 设置为类似“#”的内容，它不会加载任何内容。您可以使用 data-Attribute 来存储用于 JavaScript 的 URL。

<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，您需要将代码放入函数中并将其绑定(bind)到调整大小事件:

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/