javascript - 如何向不属于 DOM 的视频/gif 嵌入代码添加内联样式？

Question

我有来自不同 gif/视频网站的各种嵌入代码，例如

<iframe src="https://player.vimeo.com/video/122375452?title=0&byline=0&portrait=0" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

每个站点都有不同的嵌入方式，例如 <iframe>, <a>, <div>等等作为开始标签。我需要做的就是将内联样式添加到嵌入代码中的第一个标记。我想过注册元素等，但会失败，因为它会创建外部标签等。我怎样才能最好地在 jquery 中动态地实现我想要的，但 javascript 没问题。即嵌入代码将被放置在输入字段和 onpaste 我需要插入样式然后显示元素。使用正则表达式是我唯一的选择吗？

Answer 1

困难的是，如果您的嵌入通过 <iframe> 工作，内容在 DOM 中之前不存在，并且是您需要操作的 iframe 的内容(其他一些类型的嵌入直接注入(inject)到您的 DOM 中，在附加之前添加样式应该更容易)。

这可能有效:

var embedCode = '<iframe src="https://player.vimeo.com/video/122375452?title=0&byline=0&portrait=0" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>';
var embed = $(embedCode);
embed.on('load', function() {
    // The contents are loaded. add the styles however you choose
    embed.contents().find('body').css({
        width: '100%';
        // etc...
    });
});
// now add the iframe to your dom
$('#myEmbedContainer').append(embed);

在你的问题中你提到使用正则表达式 - 我怀疑你的意思是检测它是否是 iframe 嵌入，或者查看加载的 iframe 的内容。在情况 1 中(检测您的嵌入代码是否具有 iframe 标记)，它可能没问题。在第二种情况下，我不会尝试在 iframe 中的完整文档上使用正则表达式。 Jquery 选择器可以帮助您在 iframe 中找到各种包装器，这可能是一个更好的方法。例如:

var styleRecipient = embed.contents().find('body');
if (!styleRecipient.length) {
    styleRecipient = embed.contents().children('div').first();
    // etc.
}

这是一个复杂的问题，我会专注于让它一次只处理一个嵌入源。祝你好运!