javascript - 修改将包装器类添加到 iframe 的脚本 - 使其仅适用于某些域

Question

几年前我制作了一个小的自定义脚本，它将类“mbed”的包装器应用于所有 iframe，类“nombed”除外。

$("iframe").each(function(){
    var parent=$(this).parent();
    if(!parent.hasClass('mbed') && !parent.hasClass('nombed') && !$(this).hasClass('nombed') ){
        $(this).wrap("<div class='mbed'></div>");
    }
});

该脚本过去 100% 都能正常工作，但最近发现它有点问题。即使使用类为“nombed”的包装器 div，一些第三方 iframe 的行为也会很糟糕，甚至会破坏页面。其他人在不应该应用 mbed 类时在视觉上看起来是错误的(例如，mbed 类可能有边框，而 nombed 可能没有)。

我想要的是修改脚本，以便我还可以指定它适用于哪些域(例如，仅将 mbed 类应用于脚本中指定的域)。目前特别针对:

• youtube.com
• vimeo.com
• maps.googleapis.com.xxxx(其中 xxxx 是未知的 API，可能存在也可能不存在)
• maps.google.com.xxxx(其中 xxxx 是一个未知的 API，可能存在也可能不存在)

经过一些搜索，我找到了这个解决方案 Target iframe if it is a YouTube embed这对我帮助很大，我设法(相信我是个小奇迹)将原始脚本扩展为仅适用于上述 4 个域。

$('iframe[src*="youtube.com"],iframe[src*="vimeo.com"],iframe[src*="maps.googleapis.com"],iframe[src*="maps.google.com"]').each(function(){
    var parent=$(this).parent();
    if(!parent.hasClass('mbed') && !parent.hasClass('nombed') && !$(this).hasClass('nombed') ){
        $(this).wrap("<div class='mbed'></div>");
    }
});

上面的工作很好。但我想知道是否有一种方法可以将它整理一下/将域作为变量(或任何术语/最佳方法)添加到单独的行中，以便一目了然地轻松查看相关域，并且易于添加相关的新内容

$('iframe').each(function(){
    var parent=$(this).parent();

    //add the domains sort of like this in a way that works...
    src*="youtube.com"
    src*="vimeo.com"
    src*="maps.googleapis.com"
    src*="maps.google.com"        

    if(!parent.hasClass('mbed') && !parent.hasClass('nombed') && !$(this).hasClass('nombed') ){
        $(this).wrap("<div class='mbed'></div>");
    }
});

您可能会说我不是编码员，非常感谢任何帮助。

谢谢，祝你有美好的一天。

Answer 1

尝试将域存储在一个数组中，然后加入它们:

var domains = [
    "youtube.com",
    "vimeo.com",
    "maps.googleapis.com",
    "maps.google.com"
];
var selector = domains.map(function (domain) { return 'iframe[src*="' + domain + '"]' }).join(','); 

$(selector).each(function(){
    var parent=$(this).parent();
    if(!parent.hasClass('mbed') && !parent.hasClass('nombed') && !$(this).hasClass('nombed') ){
        $(this).wrap("<div class='mbed'></div>");
    }
});