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>");
    }
});

Answer 2

您可能需要的是这样的东西：

var domains = [
   'iframe[src*="youtube.com"]',
   'iframe[src*="vimeo.com"]',
   'iframe[src*="maps.googleapis.com"]',
   'iframe[src*="maps.google.com"]' 
];

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

可以对它进行优化，但这是一个好方法。

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

2 个答案: