Fatal编程技术网
  • javascript/
  • Javascript Facebook页面嵌入使响应-以前的帖子解决方案不起作用

Javascript Facebook页面嵌入使响应-以前的帖子解决方案不起作用

javascript facebook iframe

Javascript Facebook页面嵌入使响应-以前的帖子解决方案不起作用,javascript,facebook,iframe,Javascript,Facebook,Iframe,--更新-- 这是我对这个问题的解决办法。奇怪的是，我无法在facebook插件中使用javascript变量的宽度和高度来生成完美的匹配。我只是简单地将插件的高度和宽度设置为非常高的值，使其适合，令人惊讶的是没有裁剪。我有一个延迟函数，在重新调整大小后触发以重新加载插件。这种方法唯一的缺点是滚动条看起来有点滑稽，因为插件的高度和宽度设置得太高了 <div id="facebookFeed"> <div class="fb-page" data-href="ht

--更新-- 这是我对这个问题的解决办法。奇怪的是，我无法在facebook插件中使用javascript变量的宽度和高度来生成完美的匹配。我只是简单地将插件的高度和宽度设置为非常高的值，使其适合，令人惊讶的是没有裁剪。我有一个延迟函数，在重新调整大小后触发以重新加载插件。这种方法唯一的缺点是滚动条看起来有点滑稽，因为插件的高度和宽度设置得太高了

<div id="facebookFeed">
        <div class="fb-page" data-href="https://www.facebook.com/correlationone/" data-tabs="timeline" data-small-header="true" data-width="2000" data-height="1000" data-hide-cover="true" data-show-facepile="false">
            <div class="fb-xfbml-parse-ignore">
                <blockquote cite="https://www.facebook.com/correlationone/">
                    <a href="https://www.facebook.com/correlationone/">Correlation One</a>
                </blockquote>
            </div>
        </div>
    </div>

<script type="text/javascript">

    var feed = document.getElementById("facebookFeed");

    function reloadFeed(){
        for (var i = feed.childNodes.length - 1; i >= 0; i--) {
            feed.removeChild(feed.childNodes[i]).remove();
        }

        feed.innerHTML = `<div class="fb-page" data-href="https://www.facebook.com/correlationone/" data-tabs="timeline" data-small-header="true" data-width="2000" data-height="1000" data-hide-cover="true" data-show-facepile="false">
                <div class="fb-xfbml-parse-ignore">
                    <blockquote cite="https://www.facebook.com/correlationone/">
                        <a href="https://www.facebook.com/correlationone/">Correlation One</a>
                    </blockquote>
                </div>
            </div>`

        FB.XFBML.parse();
    }

    var delay = (function(){
      var timer = 0;
      return function(callback, ms){
        clearTimeout (timer);
        timer = setTimeout(callback, ms);
      };
    })();

    $(window).resize(function() {
        delay(function(){
          reloadFeed();
        }, 500);
    });

    </script>


var feed=document.getElementById（“facebookFeed”）；
函数重载提要（）{
对于（var i=feed.childNodes.length-1；i>=0；i--）{
removeChild（feed.childNodes[i]）.remove（）；
}
feed.innerHTML=`
`
FB.XFBML.parse（）；
}
变量延迟=（函数（）{
var定时器=0；
返回函数（回调，毫秒）{
清除超时（计时器）；
定时器=设置超时（回调，毫秒）；
};
})();
$（窗口）。调整大小（函数（）{
延迟（函数（）{
重新加载feed（）；
}, 500);
});
--原文如下--

我正在尝试使facebook页面具有响应性。我已经尝试了每一个该死的方式，我不明白为什么这是不工作的。该页面正在加载作为wordpress页面模板

我现在使用的主要方法是在页面加载后添加插件，动态获取高度和宽度的大小，然后将其添加到文档中并进行解析。不幸的是，解析中没有显示任何内容。我在控制台中检查DOM，元素就在那里

<body>

    <?php include('templates/analytics.html');?>
    <div id="fb-root"></div>
    <script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.6&appId=547400675437424";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>

    <div id='fullpage'>

    <?php include('templates/nav.html');?>

    <div id="facebookFeed">

    </div>

    </div>


    <?php get_footer(); ?>

    </div>
    <script type="text/javascript">
    window.fbAsyncInit = function() {
        var height = window.innerHeight,
            width = window.innerWidth,
            feedHeight = height * 0.912,
            feedWidth = height * 0.3,
            feed = document.getElementById("facebookFeed");

        feed.innerHTML = `<div class="fb-page" data-href="https://www.facebook.com/correlationone/" data-tabs="timeline" data-small-header="true" data-adapt-container-width="true" data-width=${feedWidth} data-height=${feedHeight} data-hide-cover="true" data-show-facepile="false">
                <div class="fb-xfbml-parse-ignore">
                    <blockquote cite="https://www.facebook.com/correlationone/">
                        <a href="https://www.facebook.com/correlationone/">Correlation One</a>
                    </blockquote>
                </div>
            </div>`

        FB.XFBML.parse();
    }
    </script>


（功能（d、s、id）{
var js，fjs=d.getElementsByTagName[0]；
if（d.getElementById（id））返回；
js=d.createElement；js.id=id；
js.src=“//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.6&appId=547400675437424”；
fjs.parentNode.insertBefore（js，fjs）；
}（文档“脚本”、“facebook jssdk”）；
window.fbAsyninit=函数（）{
var height=window.innerHeight，
宽度=window.innerWidth，
进给高度=高度*0.912，
进给宽度=高度*0.3，
feed=document.getElementById（“facebookFeed”）；
feed.innerHTML=`
`
FB.XFBML.parse（）；
}
我也有同样的问题，我想在桌面上嵌入一个大的（宽：500px），在手机上嵌入一个小的（宽：350px）。我有解决方案，这就是我使用的：

javascript：

<script language="JavaScript">
function autoResizeManual(id, newwidth, newheight ){

    document.getElementById(id).width = (newwidth) + "px";
    document.getElementById(id).height = (newheight) + "px";

}
//-->
</script>


函数autoResizeManual（id、newwidth、newheight）{
document.getElementById（id）.width=（newwidth）+“px”；
document.getElementById（id）.height=（newheight）+“px”；
}
//-->
然后PHP-有两种情况-对于常规帖子，FB的默认宽度为500px，对于视频，默认宽度为560px

 if($deviceType != 'computer') { //check if it's a mobile any way you want
    if(stripos($my_embed,"<iframe") !== false) { 
//check if the fb frame is prezent in the embed

            if(stripos($my_embed,"&width=500") !== false) {
//if it's a regular post
                $embed_width = '320';
                $embed_height = '500';
                $my_embed = str_ireplace('&width=500', '&width=320', $my_embed);
            }

if(stripos($my_embed,"&width=560") !== false) {

//if it's a video
                $embed_width = '320';
                $embed_height = '200';
                $my_embed = str_ireplace('&width=560', '&width=320', $my_embed);
            }

                $change_petition = '<iframe id="iframe1" onLoad="autoResizeManual(\'iframe1\',\''.$embed_width.'\',\''.$embed_height.'\');" ';

//code to be injected to launch the javascript

                $my_embed=  str_ireplace('<iframe', $change_petition, $my_embed);

//the injection

    }
    }

print $my_embed

if（$deviceType！='computer'）{//检查它是否是您想要的移动设备

如果（stripos（$my_embed，”）–根本不可能；插件将只在初始化时根据容器元素调整其宽度，它不会在以后对任何更改做出反应。我知道我必须在调整大小时重新加载插件。因此，我的FB.XFBML.parse（）；您在
fbAsyncint
事件中只调用了该方法一次–我不确定当您将参数嵌入SDK的URL的哈希部分时，该事件是否会触发。此外，一旦元素被解析并转换为插件，它就不会再被解析–因此您需要将其删除，并将其替换为使用一个新的元素，然后再次解析（或者至少您必须删除告诉该方法某个元素已被解析的指示符）嘿，CBroe，我已经阅读了你的评论并更新了原始帖子。我正在添加插件html并调用解析，但插件无法呈现。很有意思看到你的解决方案。我将更新主psot以了解我的工作方式。我无法使用javascript作为变量设置插件的高度和宽度，这超出了我发现无论出于什么原因，只要在插件上设置一个非常高的宽度或高度，它就适合了。我的调整大小功能也会有一个延迟，等待它完成。