javascript - 使用用户传递的输入创建 html 页面的预览

Question

我有一个 html 页面，用户可以在其中插入输入类型为文本或文本区域的数据。他可以按预览按钮来创建预览。当他按下按钮时，预览必须在其他页面中打开。为了实现这一点，我想用用户传递的数据创建一个假的 html 页面。有人知道如何用js在其他html页面传递数据吗？

HTML

<input type="text" id="title" value="" onclick="" />
<textarea id="text" onclick=""> </textarea>

JS

$(document).ready(function(){
  var title= $('title')
  var text= $('text')

  //open another page with this data
});

Answer 1

使用 localStorage、sessionStorage，或者如果是我的话，我会使用不带 url 的 window.open 结合 jquery 来简单地从第一页构建第二页。

您可以看到 JSFiddle here .

<input type="text" id="title" value="" onclick="" />
</br /> body:
<textarea id="body" onclick=""> </textarea>
<br />
<button class="open-write">
    show page (document.write)
</button>
</br />
<button class="open-jquery">
    show page (jquery)
</button>

$('.open-write').on('click', function() {
    let title = $('#title').val();
    let body = $('#body').val();
    let handle = window.open();
    handle.document.write(body);
    handle.document.title = title;
});
$('.open-jquery').on('click', function() {
    let title = $('#title').val();
    let body = $('#body').val();
    let handle = window.open();
    let $body = $(handle.document.body);
    $body.html(body);
    handle.document.title = title;
});

注意:这将解析并执行 JavaScript。