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

Question

In a.html: I have a textarea that is converted into a link after the user clicks the submit button. 在a.html中：我有一个文本区域，用户单击提交按钮后，该文本区域将转换为链接。 When the user clicks on the link they are redirected to b.html. 当用户单击链接时，他们将被重定向到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>

In b.html: I would like to display the original text. 在b.html中：我想显示原始文本。

In script.js: 在script.js中：

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

Answer 1

Using localStorage 使用localStorage

The localStorage property allows you to access a local Storage object. localStorage属性允许您访问本地存储对象。 localStorage is similar to sessionStorage. localStorage与sessionStorage类似。 The only difference is that, while data stored in localStorage has no expiration time, data stored in sessionStorage gets cleared when the browsing session ends—that is, when the browser is closed. 唯一的区别是，尽管存储在localStorage中的数据没有到期时间，但是在浏览会话结束时（即，在关闭浏览器时），存储在sessionStorage中的数据将被清除。

a.html 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 b.html

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

Another option would be to use a query string. 另一种选择是使用查询字符串。

a.html a.html

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

This will pass the value of the text from textarea with the url during navigation. 在导航过程中，这会将带有URL的textarea文本值传递给URL。 Once b.html has loaded, you can do the following. 加载b.html之后，您可以执行以下操作。

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

If you want to open a new page and get the text there, you could use a post-form and an input[type="hidden"] to send the text and display it afterwards. 如果要打开一个新页面并在那里获取文本，则可以使用邮寄表格和输入[type =“ hidden”]发送文本并在以后显示。

If you wand the link to be sendable, you'd either have to encode the text as get-parameter or save it to a database and add the id of the entry to the link. 如果将链接发送为可发送，则必须将文本编码为get-parameter或将其保存到数据库中，然后将条目的ID添加到链接中。

As @Kramb already mentioned, localStorage is a possibility, but only if you stay on the same browser and both pages have the same domain. 如@Kramb所述，localStorage是一种可能，但前提是您使用的浏览器相同且两个页面具有相同的域。

Answer 3

This is possible using JavaScript . 使用JavaScript可以做到这一点。 You can do an AJAX call to another page on you website, and search for an element to get its content. 您可以对网站上的另一个页面进行AJAX调用，然后搜索元素以获取其内容。 In you're case an textarea 如果你是一个textarea

I wrote an example on codepen.io for you. 我在codepen.io上为您编写了一个示例。 Click here 点击这里

To make things simpler im using jQuery in this example. 为了使事情更简单，我在本例中使用jQuery 。

So how does it work? 那么它是怎样工作的？

First of, include jQuery inside the <head> tag of you're website. 首先，在您网站的<head>标记内包含jQuery 。

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

I created the following structure 我创建了以下结构

structure 结构体

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

Contents of index.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>

Contents of texarea.html texarea.html的内容

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

Contents of index.js 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>");
            });
        });

    }); 
})()

So what does index.js do exactly? 那么index.js到底做什么呢？

As you can see i created an Ajax call to the textarea.html file. 如您所见，我创建了对textarea.html文件的Ajax调用。 The .done function holds the response data. .done函数保存响应数据。 The data inside it can be anything depending on the content of the textarea.html file. 其中的数据可以是任何东西，具体取决于textarea.html文件的内容。

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

The above piece of code filters out the #textarea div and then gets the innerHTML using the jQuery html() function. 上面的代码过滤了#textarea div，然后使用jQuery html()函数获取了innerHTML 。

If you want to get the value of the textarea through the [value] attribute, you can replace above line to 如果要通过[value]属性获取textarea的[value] ，则可以将上面的行替换为

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

Answer 4

I believe you want to do this: 我相信您想这样做：

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

 .hideme{ display: none; }

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

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

问题描述

4 个解决方案

解决方案1
0 2017-06-30 12:37:23

Using localStorage 使用localStorage

Another option would be to use a query string. 另一种选择是使用查询字符串。

解决方案2
0 2017-06-30 12:43:21

解决方案3
0 2017-06-30 13:25:08

So what does index.js do exactly? 那么index.js到底做什么呢？

解决方案4
0 2017-06-30 13:40:11

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

问题描述

4 个解决方案

解决方案1 0 2017-06-30 12:37:23

Using localStorage 使用localStorage

Another option would be to use a query string. 另一种选择是使用查询字符串。

解决方案2 0 2017-06-30 12:43:21

解决方案3 0 2017-06-30 13:25:08

So what does index.js do exactly? 那么index.js到底做什么呢？

解决方案4 0 2017-06-30 13:40:11

解决方案1
0 2017-06-30 12:37:23

解决方案2
0 2017-06-30 12:43:21

解决方案3
0 2017-06-30 13:25:08

解决方案4
0 2017-06-30 13:40:11