Question

在a.html中：我有一个textarea，在用户单击提交按钮后转换为链接。当用户点击链接时，他们会被重定向到b.html。

<textarea id="sentenceId">
</textarea>
<br>
<button type="button" id="buttonId" onclick="createLink(document.getElementById('sentenceId').value)">Submit
</button>

<p id="demo">
    <a id ="link" href="b.html"></a>
</p>

在b.html中：我想显示原文。

在script.js中：

function createLink(val) {
    document.getElementById("link").innerHTML = val;
    document.getElementById('buttonId').style.display = 'none';
    document.getElementById('sentenceId').style.display = 'none';
}

Answer 1

使用localStorage

localStorage属性允许您访问本地存储对象。 localStorage类似于sessionStorage。唯一的区别是，虽然存储在localStorage中的数据没有到期时间，但是当浏览会话结束时（即浏览器关闭时），会在sessionStorage中存储的数据被清除。

<强> a.html

function createLink(val) {
    document.getElementById("link").innerHTML = val;
    document.getElementById('buttonId').style.display = 'none';
    document.getElementById('sentenceId').style.display = 'none';

    localStorage.setItem("textArea", val);
}

<强> b.html

function getText(){
    var textVal = localStorage.getItem("textArea");
}

另一种选择是使用查询字符串。

<强> a.html

function navigateTo(val){
    window.href.location = "b.html?text=" + val;
}

这会在导航期间使用网址传递textarea的文本值。加载b.html后，您可以执行以下操作。

<强> b.html

function getText(){
    var url = window.location.href;
    var queryIndex = url.indexOf("=") + 1;
    var passedText = url.substring(queryIndex);

    document.getElementById('foo').value = passedText;
}

Answer 2

如果您想打开新页面并在那里获取文字，您可以使用后期表格和输入[type =“hidden”]来发送文本并在之后显示。

如果你想要链接是可发送的，你必须将文本编码为get-parameter或将其保存到数据库并将条目的id添加到链接。

正如@Kramb已经提到的那样，localStorage是可能的，但只有当你停留在同一个浏览器上并且两个页面都有相同的域时。

Answer 3

使用JavaScript可以做到这一点。您可以对您网站上的其他页面进行AJAX调用，并搜索元素以获取其内容。在您的情况下textarea

我为您在 codepen.io 上写了一个示例。点击 here

使用此示例中的jQuery来简化操作。

那它是如何运作的？

首先，在您网站的jQuery标记中添加<head>。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

我创建了以下结构

<强>结构

根
- 脚本
  - jQuery.min.js
  - index.js
的index.html
textarea.html

index.html的内容

<!DOCTYPE html>
<html lang="en">
<head>

  <!--  Meta  -->
  <meta charset="UTF-8" />
  <title>My New Pen!</title>

    <script type="text/javascript" src="scripts/jquery.min.js"></script>

  <!--  Styles  -->
  <link rel="stylesheet" href="styles/index.processed.css">
</head>
<body>

    <button id="clickme">To load the textarea content, click me!</button>

    <div id="content">The data from the textarea will be shown here, afte you click on the button :)</div>

  <!-- Scripts -->
  <script src="scripts/index.js"></script>
</body>
</html>

texarea.html的内容

<textarea id="textarea">
    I am the content of the textarea inside the textarea.html file.
</textarea>

index.js的内容

(function() {
    $(document).ready(function() {

        /**
         * The button which triggers the ajax call
         */
        var button = $("#clickme");

        /**
         * Register the click event
         */
        button.click(function() {
            $.ajax({
                url: "textarea.html",
                type: "GET"
            }).done(function(response) {
                var text = $(response).filter("#textarea").html();
                $("#content").append("<br/><br/><strong>" + text + "</strong>");
            });
        });

    }); 
})()

那么index.js到底做了什么？

如您所见，我创建了对Ajax文件的textarea.html调用。 .done函数保存响应数据。其中的数据可以是任何内容，具体取决于textarea.html文件的内容。

$(response).filter("#textarea").html();

上面的代码会过滤掉#textarea div，然后使用innerHTML jQuery函数获取html()。

如果您想通过[value]属性获取textarea的值，可以将上面的行替换为

$(response).filter("#textarea").val();

Answer 4

我相信你想这样做：

＆＃13;

function createLink() {
var textvalue = document.getElementById('sentenceId').value; 
    document.getElementById("link").innerHTML = textvalue;
    document.getElementById("buttonId").className ="hideme";
    document.getElementById("sentenceId").className ="hideme";
}

＆＃13;

.hideme{
display: none;
}

＆＃13;

<textarea id="sentenceId">
</textarea>
<br>
<button id="buttonId" onclick="createLink()">Submit
</button>

<p id="demo">
    <a id ="link" href="b.html"/>
</p>

＆＃13;

如何从另一个HTML页面获取textarea输入

4 个答案:

使用localStorage

另一种选择是使用查询字符串。

那么index.js到底做了什么？