【发布时间】：2015-04-28 04:20:34
【问题描述】：
由于业务需求原因，我需要使用jQuery.get() 方法生成内容来填充HTML 页面的内容。现在，包含社交共享的正常方式会产生一个问题，即共享窗口的显示将不包括 jQuery 生成的内容。
页面的网址如http://server/productdetails.html?productid=12345...
这是分享到 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>
【问题讨论】：
标签： javascript jquery html facebook