Facebook Like按钮在右边的Iframe中对齐文本

Question

我通过iframe在我的网站上使用facebook like按钮.

现在您必须指定iframe的宽度.由于类似按钮的各种语言,这意味着我必须将宽度设置为至少70px.

现在我想将like按钮对齐到我网站的最右边,现在我可以通过在iframe的css样式中添加"text-align:right"来实现.iframe显示在右侧,但不是一直显示在右侧.

这是因为iframe宽度,70px,例如英文按钮只有55px.

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

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

在这里,我建立了一个例子.它在div ive构建的右侧对齐,但因为iframe比实际的按钮大,所以它与右边没有完美对齐.我希望按钮在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();
    });
}

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