Question

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

网页的网址类似于http://server/productdetails.html?productid=12345 ...

这是分享到Facebook结束的截图。

enter image description here

无论如何都可以解决这个问题吗？

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

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

Answer 1

您的问题有两种可能的解决方案。

1）在sharer.php网址中发送有关网页内容的信息http://www.facebook.com/sharer.php?s=100&p[title]=YOUR_TITLE&p[summary]=YOUR_SUMMARY&p[url]=YOUR_URL&p[images][0]=YOUR_IMAGE_TO_SHARE_OBJECT （参见：https://stackoverflow.com/a/6138879/1741052）

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

（参见：https://stackoverflow.com/a/12547228/1741052）

jQuery生成页面与社交共享

1 个答案: