Javascript jQuery生成的页面与社交共享_Javascript_Jquery_Html_Facebook

Javascript jQuery生成的页面与社交共享

javascript jquery html facebook

Javascript jQuery生成的页面与社交共享,javascript,jquery,html,facebook,Javascript,Jquery,Html,Facebook,由于业务需求的原因，我需要使用jQuery.get方法生成内容来填充HTML页面的内容。现在，包含社交共享的正常方式会产生一个问题，即共享窗口的显示不会包含jQuery生成的内容页面的URL类似于这是分享到Facebook的截图，结尾是这样的有没有办法解决这个问题如果有用，以下是页面代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert ti

由于业务需求的原因，我需要使用jQuery.get方法生成内容来填充HTML页面的内容。现在，包含社交共享的正常方式会产生一个问题，即共享窗口的显示不会包含jQuery生成的内容

页面的URL类似于

这是分享到Facebook的截图，结尾是这样的

有没有办法解决这个问题

如果有用，以下是页面代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script>
    function fbshareCurrentPage() {
        window
                .open(
                        "https://www.facebook.com/sharer/sharer.php?u="
                                + escape(window.location.href) + "&t="
                                + document.title, '',
                        'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');
        return false;
    }

    function display(title, description, sku) {
        $(document).prop('title', title);
        $('#description').html(description);
        $('#sku').html(sku);
    }

    function displayImage(imageUrl) {
        $("#image").attr("src", imageUrl);
    }

    function getURLParametersByName(paramName) {
        var sPageURL = window.location.search.substring(1);
        var sURLVariables = sPageURL.split('&');
        for (var i = 0; i < sURLVariables.length; i++) {
            var sParameterName = sURLVariables[i].split('=');
            if (sParameterName[0] == paramName) {
                return sParameterName[1];
            }
        }
    }

    function fetchProductDetails() {
        var param = getURLParametersByName("productid");
        var title, description, sku;
        $.ajax({
            type : "GET",
            url : "Products?action=loadProductByProductId&productId=" + param,
            contentType : "application/json; charset=utf-8",
            dataType : "json",
            async : true,
            cache : false,
            success : function(data) {
                //console.log(data);
                $.each(data, function(idx, obj) {
                    if (idx == "name") {
                        title = obj;
                    }
                    if (idx == "description") {
                        description = obj;
                    }
                    if (idx == "sku") {
                        sku = obj;
                    }
                });
                display(title, description, sku);
            }
        });
    }

    function fetchProductImage() {
        var param = getURLParametersByName("productid");
        $.ajax({
            type : "GET",
            url : "Products?action=loadProductMainImageByProductId&productId="
                    + param,
            contentType : "application/json; charset=utf-8",
            dataType : "json",
            async : true,
            cache : false,
            success : function(data) {
                //console.log(data);
                displayImage(data);
            }
        });
    }

    function resizeMe() {
        window.resizeTo(400, 240);
    }
</script>
</head>
<body onload="fetchProductDetails();fetchProductImage();">
    <table
        style="width: 480px; margin: auto; border-collapse: separate; border-spacing: 8px">
        <tr>
            <td colspan=2 style="text-align: center"><img
                src="images/blacktea2.png" style="width: 320px" id="image" /></td>
        </tr>
        <tr>
            <td colspan=2 style="width: 320px; text-align: justify"><label
                id="description">Lorem ipsum dolor sit amet, consectetur
                    adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris.
                    Maecenas congue ligula ac quam viverra nec consectetur ante
                    hendrerit. Donec et mollis dolor. Praesent et diam eget libero
                    egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut
                    porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula
                    ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur
                    adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar
                    a semper sed, adipiscing id dolor. Pellentesque auctor nisi id
                    magna consequat sagittis. Curabitur dapibus enim sit amet elit
                    pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in
                    urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis
                    quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque
                    penatibus et magnis dis parturient montes, nascetur ridiculus mus.
                    In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis
                    semper ac in est.</label></td>
        </tr>
        <tr>
            <td style="text-align: left">SKU:<label id="sku">99999</label></td>
            <td></td>
        </tr>
        <tr>
            <td style="text-align: left">Register/Login To Buy</td>
            <td style="text-align: right"><a
                href="javascript:fbshareCurrentPage()" target="_blank">Facebook</a></td>
        </tr>
    </table>
</body>
</html>

你的问题有两种可能的解决办法

1在sharr.php url中发送关于页面内容的信息参考：

2在页面上使用元标记，同时通过jquery填充内容，也填充页面上的元标记

<meta property="og:title" content="The Rock"/> 
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/"/>
<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>

请参阅：

我尝试了两种方法，第一种方法仅在访问者单击我的时间轴上的帖子时发送正确的响应链接。共享窗口上仍然没有图片、说明和标题显示。第二种方法完全不走运。@d4v1dv00请尝试使用FB调试器调试任何站点的URL。看到结果了吗？和以前一样。无论如何，我已经放弃了，把我的页面改成服务器端来生成元数据。现在显示元数据。在twitter上运行良好，但FB仍然无法获取共享对话框中显示的图像和描述。除了解决FB投诉的HTTPS证书外，它还询问：类型“website”无效，因为没有提供类型为“string”的必需属性“og:title”。有什么想法吗？@d4v1dv00你能给出你网站的链接吗？这也许能让我更好地了解这个问题，我想我现在知道为什么了。在我尝试使用上介绍的后，似乎是因为我的页面是在使用Shiro的密码保护环境中提供的。因此，我所做的是将jsp页面列入白名单，以试试运气。直到那时我才意识到我在使用request.getRequestDispatcher/productdetails.jsp.forwardrequest，response；我的页面URL显示的是servlet URL而不是jsp URL。我无法向公众打开servlet以便FB爬网。我知道这是离题的，但一件事会导致另一件事。。。