Exchanging content between pages with JavaScript [closed]

2

I need to change text that is in <p> of a page x to a <p> of a page and.

As part of a bimonthly presentation (course work) I can use HTML, CSS3 and JavaScript.

Can you do this with any of these technologies?

Sorry for my lack of clarity with the question, I really wanted to leave most of the texts stored on a page that would not be loaded and would only serve such, being accessed only the text in question and displayed on the page where the user to be. I researched a little on the subject and would only give something like this to php. Sorry for the work and thanks.

    
asked by anonymous 26.09.2015 / 22:50

2 answers

3

This is possible with JavaScript. You have two alternatives:

  • go through the URL
  • save to localStorage

Sample HTML

Assuming the content you want to pass is this:

<p id="comentario">Hoje está um lindo dia!</p>

Passing through the URL

You can enter this text in the URL that opens the next page. The format will be

  

http://teusite.com/pasta/subpasta?comentario=Hoje%20est%C3%A1%20um%20lindo%20dia!

The part of the URL after ? is called querystring and exists to pass data between pages or server.

To insert content in the URL you will have to change the links in the HTML. The best way is with JavaScript using encodeURIComponent() which is a native method to convert text to accepted format in the URL.

So you have to look for the link you want to open the next page and change:

Example:

HTML

<a id="ancora" href="novapagina.html">Clique aqui</a>

JavaScript

var texto = document.getElementById('comentario').innerHTML;
var ancora = document.getElementById('ancora');
ancora.href = ancora.href + '?comentario=' + encodeURIComponent(texto );

In this way, when the link is clicked it will open the new page with information in the URL / QueryString.

And how to read this on the new page?

To read this on the new page use location.search to give you the querystring and then remove what you care about:

JavaScript

var qs = location.search;
var textoDesformatado = qs.split('=');
var textoFinal = textoDesformatado[1] && decodeURIComponent(textoDesformatado);
// e depois, para inserir no novo <p id="comentario"></p> basta fazer
document.getElementById('comentario').innerHTML = textoFinal;
note:

You can also open a new page with JavaScript directly. In that case it would look something like:

location.href = '/pasta/subpasta?comentario=' + encodeURIComponent(texto );

Passing through the localStorage

Local storage is the browser's memory and remains active even after you turn off the computer. That is the computer writes in an internal file of the browser and I saw later to look for this info.

So to write in the localStoragd just do:

localStorage.comentario = document.getElementById('comentario').innerHTML;

In the new page, to read the code, do the opposite:

document.getElementById('comentario').innerHTML = localStorage.comentario;

Note:

There are more alternatives using the server, but I do not include them because you just referred to client-side technology.

    
28.09.2015 / 06:44
0

You can do this using a variety of technologies and in a variety of ways. but using only html / css, here it goes:

  

page1.html

<h1>origem</h1>
<p id="p1">Primeiro</p>
<a href="pagina2.html" id="link">ir para a página 02</a>
<script>
    $('#link').attr( 'href', 'pagina2.html?' + $('p1').html() );
</script>
  

page2.html

<h1>destino</h1>
<p id="p2"></p>
<script>
    var content = (location+"").split('?')[1].split('=')[1];
    $('#p2').html(content);
</script>
    
27.09.2015 / 02:45