Question

如果浏览器宽度大于500，我正在尝试加载宽度为466的Facebook嵌入式帖子。如果浏览器宽度小于500，则会加载相同的Facebook帖子但宽度为350。这是我的代码

<div class="col-lg-8 col-md-8 col-sm-12">
<script>
if($(window).width()<500)
{

//Load the post below
<div class="fb-post" data-href="https://www.facebook.com/TedTheStoner/photos/a.255068134610728.57957.255065497944325/671495962967941/?type=1" data-width="350"><div class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/TedTheStoner/photos/a.255068134610728.57957.255065497944325/671495962967941/?type=1">Post</a> by <a href="https://www.facebook.com/TedTheStoner">Ted The Stoner</a>.</div></div>

}
else
{
//Load this post 
<div class="fb-post" data-href="https://www.facebook.com/TedTheStoner/photos/a.255068134610728.57957.255065497944325/671495962967941/?type=1" data-width="466"><div class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/TedTheStoner/photos/a.255068134610728.57957.255065497944325/671495962967941/?type=1">Post</a> by <a href="https://www.facebook.com/TedTheStoner">Ted The Stoner</a>.</div></div>

我不知道写什么而不是评论，以便脚本可以自动加载正确的版本。

编辑我的更新代码

<script>
$( document ).ready(function() {
if($(window).width()>500)
{
$('.fb-post').attr('data-width',466);
}
});
</script>
<div class="col-lg-8 col-md-8 col-sm-12">
<div class="fb-post" data-href="https://www.facebook.com/TedTheStoner/photos/a.255068134610728.57957.255065497944325/671495962967941/?type=1" data-width="350"><div class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/TedTheStoner/photos/a.255068134610728.57957.255065497944325/671495962967941/?type=1">Post</a> by <a href="https://www.facebook.com/TedTheStoner">Ted The Stoner</a>.</div></div>
</div>

页面仍然加载他在宽度350处发布。这是页面http://8mags.com/bored/facebook/facebookpastpost01.php

我的网页有响应，但Fb-帖子不是

Answer 1

您可以这样做：

<script>
    // You may or may not write the below code under the doc ready
    // Depends where and when you want the same to happen
    // For instance in the success function of any AJAX call or something like that
    $(document).ready(function () {
        $('.fb-post').attr('data-width',350);
    });
</script>
<div class="col-lg-8 col-md-8 col-sm-12">
    <div class="fb-post" data-href="https://www.facebook.com/TedTheStoner/photos/a.255068134610728.57957.255065497944325/671495962967941/?type=1" data-width="466">
        <div class="fb-xfbml-parse-ignore">
            <a href="https://www.facebook.com/TedTheStoner/photos/a.255068134610728.57957.255065497944325/671495962967941/?type=1">
                Post
            </a>
            &nbsp;by&nbsp; 
            <a href="https://www.facebook.com/TedTheStoner">
                Ted The Stoner
            </a>.
        </div>
    </div>
</div>

此外，如果您希望页面以响应方式工作，则可以使用CSS控制该页面。为此，您可以参考this和this。有关更多信息，请关注“@media CSS”

Answer 2

Javascript并没有这样做。如果只是将句子留在里面，你就不能打印HTML。如果您只更改.fb-post元素的data-width参数，那么您可以将HTML保留在它所属的.html文件中，并使用JS（jQuery）更改您的参数：

$('.fb-post').attr('data-width',350); // when your width is less then 500 for instance

Answer 3

试试这个（脚本应该在你要找的元素之后）：

<div class="col-lg-8 col-md-8 col-sm-12">
<div class="fb-post" data-href="https://www.facebook.com/TedTheStoner/photos/a.255068134610728.57957.255065497944325/671495962967941/?type=1" data-width="350"><div class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/TedTheStoner/photos/a.255068134610728.57957.255065497944325/671495962967941/?type=1">Post</a> by <a href="https://www.facebook.com/TedTheStoner">Ted The Stoner</a>.</div></div>
</div>
<script>
    $( document ).ready(function() {
        if($(window).width()>500)
        {
            $('.fb-post').attr('data-width',466);
        }
    });
</script>

同时将此内容添加到您的脚本中：

$(window).resize(function() {
    if($(window).width()>500)
    {
        $('.fb-post').attr('data-width',466);
    }
    else
    {
        $('.fb-post').attr('data-width',350);
    }
});

使用jQuery基于浏览器宽度加载特定内容

3 个答案: