Как создать URL с общим доступом, содержащий динамический HTML (JavaScript) - PullRequest
Новая
       8

Как создать URL с общим доступом, содержащий динамический HTML (JavaScript)

0 голосов
/ 12 октября 2018

Как лучше всего создавать уникальные общие URL-адреса для некоторых текстовых списков, создаваемых пользователями?

Это одностраничный веб-сайт с разделом содержимого, в котором пользователи создают текстовые списки.Как только они нажимают «поделиться», как я могу сохранить эти значения внутри общего URL-адреса, чтобы другой пользователь, идущий по этому адресу, загружал тот же список?

Я использую html, js, jquery, php.

РЕДАКТИРОВАТЬ: как предложено ниже, я уже сохраняю списки в базе данных (firebase), и у каждого есть уникальный идентификатор, поэтому мне нужно понять, как я могу создать URL с идентификатором спискав нем, и как прочитать URL обратно.

РЕДАКТИРОВАТЬ 2: , так что это код, который я сейчас использую, объединяя ответы от марзелина и Алхимик Шахед в моем другом вопросе о структуре моей базы данных ( Firebase, как найти ребенка, зная его идентификатор, но не идентификатор его родителя (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 ]

0 голосов
/ 15 октября 2018

Давайте начнем с первого вопроса " Как создать URL с идентификатором списка в нем? "

Дело в том, что для ответа на этот вопрос нам нужно сначала ответить на второй вопросВедьма это " Как читать URL обратно? "

Считайте, что у вас есть php-страница с именем "draft".когда пользователь посещает https://www.example.com/draft?listId=an_id, вы получите listId с использованием php, например $_GET("listId"), и будете использовать это значение для получения данных списка и отображения содержимого страницы.

Теперь вернемся к первому вопросу, еслипользователь поделится черновиком, как в социальных сетях (например, facebook), тогда проблем не будет, потому что он поделится ссылкой, и все его подписчики и любой другой пользователь смогут легко получить к ней доступ.но если пользователь просто сохранит черновик, то вам придется динамически изменять URL-адрес страницы, например window.history.pushState(null, null, '/draft?listId=your_newly_created_id');, и поэтому пользователь будет копировать URL-адрес и делать с ним все, что он хочет (например, поделиться им в stackoverflow, используя jsfiddle http://jsfiddle.net/F2es9/ (вы можете изменить URL, чтобы он выглядел так, используя файл 'htaccess')) В конце я хотел бы сказать вам, что мы не "создаем" URL.

Редактировать

без использования php-кода (или любого другого кода на стороне сервера).Разница будет в получении данных.вместо использования $_GET("listId") вы будете использовать new URL(window.location).searchParams.get("listId") для получения идентификатора списка в javascript, затем, используя это значение, вы сможете извлекать данные из firebase и отображать ваш контент

0 голосов
/ 15 октября 2018

Сохранение данных и создание разделяемой ссылки: 

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();
  });
}
0 голосов
/ 12 октября 2018

Таким образом, я хотел бы, чтобы пользователи делились щелчком мыши, вызывая сохранение в базе данных, сохраняя весь динамически сгенерированный контент в таблицу.

Одно из значений таблицы было бы случайно сгенерированным уникальнымкакой-то идентификатор, который я бы использовал в качестве запроса в URL-адресе, например https://www.example.org/?share=skd822475

Затем, когда пользователь посещает сайт и этот запрос находится в URL-адресе, используйте уникальный идентификатор для поиска в базе данных и публикациидинамическое содержимое на странице.

Я бы также добавил период полураспада для записей в базе данных, скажем, не более 30 дней, чтобы он не забивал БД.

...