如何创建包含动态html的共享url (javascript)
为用户创建的某些文本列表创建唯一可共享urls的最佳实践是什么？
这是一个带有内容div的单页网站，用户可以在其中创建文本列表。单击共享后，我如何将这些值存储在可共享的url中，以便其他用户访问该地址时加载相同的列表？
我使用html，js，jquery，php。
编辑：如下所示我已经将列表保存在一个数据库(firebase)上，并且每个列表都有一个唯一的ID，所以我需要了解如何在其中创建带有列表id的url，以及如何读回url。
EDIT 2:这是我现在使用的代码，结合了marzelin和炼金术师Shahed在我的另一个关于数据库结构(Firebase how to find child knowing its id but not its parent's id (js))的问题中的答案：
//js inside window load function:
const keyOfDynamicHtmlItemRef = new URL(window.location).searchParams.get("share")
if (keyOfDynamicHtmlItemRef) {
var dynamicHtmlListRef = firebase.database().ref('users');
// var dynamicHtmlItemRef = dynamicHtmlListRef.child(keyOfDynamicHtmlItemRef);
// console.log(keyOfDynamicHtmlItemRef);
// dynamicHtmlItemRef.once("value").then(dynamicHtmlSnap => {
// texta.innerHTML = dynamicHtmlSnap.val();
// });
dynamicHtmlListRef.once('value').then((snapshot)=>{
snapshot.forEach(function(data) {
if (data.key == keyOfDynamicHtmlItemRef) {
myVar = data.c;
myContentDiv.innerHTML = myVar;
}
});
});
}作为第一步，我只是尝试在搜索栏中手动编写url，作为https://example.com/?share=<random list id i copied from db>，但它什么也做不到。
回答 3
Stack Overflow用户
发布于 2018-10-15 06:12:43
保存数据并创建可共享链接：
document.querySelector(".share").addEventListener("click" => {
var dynamicHtmlListRef = firebase.database().ref('dynamic_html');
var dynamicHtmlItemRef = dynamicHtmlListRef.push();
dynamicHtmlItemRef.set(userCreatedDynamicHtml);
var keyOfDynamicHtmlItem = dynamicHtmlItemRef.key;
var linkToDynamicHtmlItem = `${window.location}?share=${keyofDynamicHtmlItem}`;
alert(`link: ${linkToDynamicHtmlItem}`)
})显示基于查询参数的动态HTML：
const keyOfDynamicHtmlItemRef = new URL(window.location).searchParams.get("share")
if (keyOfDynamicHtmlItemRef) {
var dynamicHtmlListRef = firebase.database().ref('dynamic_html');
var dynamicHtmlItemRef = dynamicHtmlListRef.child(keyOfDynamicHtmlItemRef);
keyOfDynamicHtmlItemRef.once("value").then(dynamicHtmlSnap => {
document.querySelector(".dynamic-html-mountpoint").innerHTML = dynamicHtmlSnap.val();
});
}Stack Overflow用户
发布于 2018-10-12 10:01:49
因此，我的方法是让用户共享，单击，触发保存到数据库，将所有动态生成的内容保存到一个表中。
其中一个表值是随机生成的某种类型的唯一标识符，我将使用它作为url中的查询，如https://www.example.org/?share=skd822475
然后，当用户访问站点并且该查询在url中时，使用唯一标识符来查找数据库并将动态内容发布回页面。
我还会在数据库条目上设置半寿命，比如不超过30天，这样它就不会阻塞数据库。
Stack Overflow用户
发布于 2018-10-15 05:56:15
让我们从第一个问题"How to create urls with a list id in it?“开始
问题是，为了回答这个问题，我们首先需要回答第二个问题，即"How to read The url back?“
假设你有一个名为"draft“的php页面。当用户访问https://www.example.com/draft?listId=an_id时，您将使用php获取listId，例如$_GET("listId")，并使用该值来检索列表数据并显示页面内容。
现在回到第一个问题，如果用户像在社交媒体(例如: facebook)中一样分享草稿，那么就没有问题，因为他会分享一个链接，他的所有追随者和任何其他用户都可以很容易地访问它。但是如果用户只是保存草稿，那么你将不得不像这个window.history.pushState(null, null, '/draft?listId=your_newly_created_id');一样动态地改变页面url，这样用户就会复制url并用它做任何他想做的事情(例如使用jsfiddle http://jsfiddle.net/F2es9/在stackoverflow中共享它(你可以使用'htaccess‘文件将url改变成这样))最后我想告诉你，我们不会“创建”url。
编辑
而不使用php代码(或任何其他服务器端代码)。不同之处在于检索数据。您将使用new URL(window.location).searchParams.get("listId")在javascript中获取列表id，而不是使用$_GET("listId")，然后使用此值可以从firebase检索数据并显示您的内容
https://stackoverflow.com/questions/52771076
复制相似问题