css - Facebook Like 按钮将 Iframe 中的文本向右对齐

Question

我在我的网站上通过 iframe 使用 facebook 之类的按钮。

现在您必须指定 iframe 的宽度。由于点赞按钮的语言多种多样，这意味着我必须将宽度设置为至少 70px。

现在我希望点赞按钮与我网站的最右侧对齐，现在我可以通过在 iframe 的 css 样式中添加“text-align:right”来实现。 iframe 显示在右边，但不是一直在右边。

发生这种情况是因为 iframe 的宽度为 70px，例如英文按钮只有 55px。

现在我想要的是:将 iframe 的实际内容与实际 iframe 的右侧对齐。

http://pastehtml.com/view/1dnwtbh.html

这里我建立了一个例子。它在 div ive 构建的右侧对齐，但由于 iframe 比实际的 like 按钮大，因此它没有完全对齐到右侧。我想让按钮在 iframe 中右对齐。

希望大家帮帮忙

Answer 1

css 规则只适用于 iframe 元素，不适用于 iframe 的内容，因为它完全是另一个网页。

您“可能”能够使用 javascript 将 css 样式表添加到 iframe 页面:

var cssLink = document.createElement("link") 
cssLink.href = "style.css"; 
cssLink .rel = "stylesheet"; 
cssLink .type = "text/css"; 
frames['frame1'].document.head.appendChild(cssLink);

但我不确定这是否适用于所有浏览器。最好的办法是使用 AJAX 调用页面。这样你就可以在显示之前修改页面的内容

一个示例 jquery AJAX 函数可能如下所示:

$.ajax({
        type: "GET",
        url: "facebookURL",
        dataType: "html",
        success: function(html) {
            processData(html);

        }
    });

function processData(fbData) {
    $('#injectFBLikeHere').html(function() {
        return $(fbData).find('#LikePluginPagelet').html();
    });
}

请注意，我还没有对此进行测试，仅将其用作起点或指南