Javascript 使用jQuery根据浏览器宽度加载特定内容

如果浏览器宽度大于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>

如果（$（窗口）.width（）500）
{
$（'fb post'）.attr（'data-width'，466）；
}
});
通过

页面仍然以350的宽度加载。这是这一页

---

我的页面是有响应的，但是Fb-POST不是

Javascript不是这样工作的。你不能只把HTML放在句子里就打印出来。 如果只更改.fb post元素的数据宽度参数，则可以将HTML保留在.HTML文件中，并使用JS（jQuery）更改参数，如下所示：

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

<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>

---

您可以这样做：

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

<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>

//您可以或不可以在doc ready下编写以下代码
//取决于您希望在何时何地发生同样的情况
//例如，在任何AJAX调用的success函数或类似的函数中
$（文档）.ready（函数（）{
$（'.fb post'）.attr（'data-width'，350）；
});
通过
.

此外，如果您希望您的页面以响应的方式工作，您可以使用CSS来控制它。对此，您可以参考和。要了解更多信息，只需在google上搜索“@media CSS”

试试这个（脚本应该在您要查找的元素后面）：

---

不能那样显示HTML。这不是一种可以打印HTML内容的服务器端语言。尝试使用.attr（'data-width'）更改.fb post的数据宽度参数。将div放在HTML中应该放在的地方。您只是在更改数据宽度，对吗？是否要为div“fb post”指定宽度..扭曲

$（文档）周围的脚本。就绪（{..}）

@trainoasis我可以使用php完成吗？贝尼森：是的，我必须这样做，因为它们无法做出响应（我自己在堆栈溢出的某个地方读到）。Gaurav如何帮助动态加载内容？PHP是一种服务器端语言，不用于检测浏览器参数。另一方面，JS是一种客户端语言，它可以。如果有人调整窗口大小，它会切断帖子吗？或者只是用宽度属性重新加载fb帖子。如果你想让它响应，那么你也许应该从另一种方法开始。如果有人重新加载页面，你的脚本将再次运行，这意味着你的If-else工具将再次执行它必须执行的操作。我的页面响应嵌入的帖子不是Facebook指定的固定宽度。

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