Question for javascript gurus - GoFuckYourself.com

2MuchMark · 01-04-2017, 09:02 PM

Hello, I love you.

I have an HTML page with some basic data with only 2 or 3 fields: This, That, and the other thing.

I want to display that data on another HTML page, but I don't want to use iframes. Instead I want to grab the data from the first page and display it on my main page with styles associated with that page.

Any suggestion?

galleryseek · 01-04-2017, 09:06 PM

How are the fields being retrieved from the first page? Just static HTML? Or is it pulling the data from somewhere like through js?

If it's not pulling the data from somewhere or some API, you'd need to scrape the data. There's a lot of different techs you can use to scrape. Python is the most popular.

Barry-xlovecam · 01-04-2017, 09:21 PM

AJAX/JSON on both pages to a server side script.
Cross domain will require good scripting.

Bladewire · 01-04-2017, 09:26 PM

^^ This man is verified as super brains

sarettah · 01-04-2017, 10:16 PM

I am thinking you want to use sessionStorage for that.

https://developer.mozilla.org/en-US/...sessionStorage

Quote:

The sessionStorage property allows you to access a session Storage object for the current origin. sessionStorage is similar to Window.localStorage, the only difference is while data stored in localStorage has no expiration set, data stored in sessionStorage gets cleared when the page session ends. A page session lasts for as long as the browser is open and survives over page reloads and restores. Opening a page in a new tab or window will cause a new session to be initiated, which differs from how session cookies work.

It should be noted that data stored in either sessionStorage or localStorage is specific to the protocol of the page.

SyntaxEDIT
// Save data to sessionStorage
sessionStorage.setItem('key', 'value');

// Get saved data from sessionStorage
var data = sessionStorage.getItem('key');

// Remove saved data from sessionStorage
sessionStorage.removeItem('key');

// Remove all saved data from sessionStorage
sessionStorage.clear();

.

sarettah · 01-04-2017, 10:30 PM

Here is a working example: http://madspiders.com/js_test/page1.htm

On Page 1 enter something in the text box and then hit the link to page 2. On page 2, whatever you entered on page 1 will be displayed.

Code for Page 1:

Code:

<html>
  <head>
  <title></title>
  <script type=text/javascript>

  function storeit(stored_data)
  {
    sessionStorage.setItem('stored_data', stored_data);
  }    
  
  </script>
  </head>
  <body>
    Enter something here:  <input type=text value='' width=20 maxlength=50 onChange="storeit(this.value)";><br>
    <a href=page2.htm>Go to Page 2</a>
  </body>
</html>

Code for page 2:

Code:

<html>
  <head>
  <title></title>
  <script type=text/javascript>

  function get_data()
  {
    var stored_data = sessionStorage.getItem('stored_data');
    if(stored_data>'')
    {
      result_div.innerHTML='data stored was: ' + stored_data + '<br>';
    }
    else
    {
      result_div.innerHTML='no data was found<br>';
    }
  }    
  
  </script>

  </head>
  <body>
  <div name=result_div id=result_div>
  </div>
  </body>
  <script type=text/javascript>
    get_data();
  </script>  
</html>

.

rowan · 01-04-2017, 10:35 PM

Not sure about sessionStorage, but I'm pretty sure that most browsers will prompt the user for confirmation (ie, a dialog saying "this site wants to...") when the code uses localStorage. Test carefully to make sure you don't spook your visitors.

Edit: Also this text seems to suggest you can't share data between windows, because they will be considered separate sessions. "Opening a page in a new tab or window will cause a new session to be initiated, which differs from how session cookies work."

Bladewire · 01-04-2017, 10:35 PM

Quote:

Originally Posted by sarettah

Here is a working example: http://madspiders.com/js_test/page1.htm

On Page 1 enter something in the text box and then hit the link to page 2. On page 2, whatever you entered on page 1 will be displayed.

Code for Page 1:

Code:

<html>
  <head>
  <title></title>
  <script type=text/javascript>

  function storeit(stored_data)
  {
    sessionStorage.setItem('stored_data', stored_data);
  }    
  
  </script>
  </head>
  <body>
    Enter something here:  <input type=text value='' width=20 maxlength=50 onChange="storeit(this.value)";><br>
    <a href=page2.htm>Go to Page 2</a>
  </body>
</html>

Code for page 2:

Code:

<html>
  <head>
  <title></title>
  <script type=text/javascript>

  function get_data()
  {
    var stored_data = sessionStorage.getItem('stored_data');
    if(stored_data>'')
    {
      result_div.innerHTML='data stored was: ' + stored_data + '<br>';
    }
    else
    {
      result_div.innerHTML='no data was found<br>';
    }
  }    
  
  </script>

  </head>
  <body>
  <div name=result_div id=result_div>
  </div>
  </body>
  <script type=text/javascript>
    get_data();
  </script>  
</html>

.

^^ Verified super brains much respect ^^

Miguel T · 01-04-2017, 10:44 PM

I'd use AJAX for that.

sarettah · 01-04-2017, 10:47 PM

Quote:

Originally Posted by rowan

Not sure about sessionStorage, but I'm pretty sure that most browsers will prompt the user for confirmation (ie, a dialog saying "this site wants to...") when the code uses localStorage. Test carefully to make sure you don't spook your visitors.

Edit: Also this text seems to suggest you can't share data between windows, because they will be considered separate sessions. "Opening a page in a new tab or window will cause a new session to be initiated, which differs from how session cookies work."

I just tested in Chrome, FF and IE and it worked in all without throwing up any dialog.

I also just added a second link on page1 to open page 2 in a new window and the data passes between them just fine. Tested that in Chrome and FF.

So this is the simple, easy way to accomplish the task as far as I can tell.

I like simple solutions as I am a simple minded person.

.

2MuchMark · 01-04-2017, 11:14 PM

Hi Everyone,

Let me clarify a little.

Both pages are HTML.

My main, fancy html5/css3 sexy page, index.html, would say "Hey! Here's the data! 1&2, 3&4, 5&6. "

The page that actually contains the data would be unformatted nothingness, called "data.html", and would just contain

"1&2", "3&4", "5&6".

Both pages are HTML, and both are on the same domain.

rowan · 01-04-2017, 11:16 PM

So you're saying you want the main HTML page to fetch another page/object which contains raw data... that's an AJAX callback.

sarettah · 01-04-2017, 11:29 PM

Quote:

Originally Posted by 2MuchMark

Hi Everyone,

Let me clarify a little.

Both pages are HTML.

My main, fancy html5/css3 sexy page, index.html, would say "Hey! Here's the data! 1&2, 3&4, 5&6. "

The page that actually contains the data would be unformatted nothingness, called "data.html", and would just contain

"1&2", "3&4", "5&6".

Both pages are HTML, and both are on the same domain.

I have no idea why you would want to do that But if you are not actually displaying the data page then that is actually a server side call and does not need any javascript but it could be done with ajax as Rowan and Barry have said. But in that case the data page does not have to actually exist as an html page. It can be a data file, it could be a mysql call or any of the other bazillion ways that you could store data on the server.

Where is the data page coming from. If it is displayed in the browser then is it displayed before the fancy page is displayed? In which case, why?

Anyway, here is how you could do that using Ajax (JQuery version):

Ajax version at: http://madspiders.com/js_test/ajax_page1.htm

Code:

<html>
  <head>
  <title></title>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  </head>
  <body>
  <div name=result_div id=result_div></div>
  </body>
  <script>
      $.ajax({url: "data.htm", success: function(result)
        {
           $("#result_div").html("The data is: " + result);
        }
      });
  </script>

</html>

Data.htm looks like:

Code:

1&2, 
3&4, 
5&6

.

deonbell · 01-05-2017, 12:52 AM

Just like to add. If "data.html" is made up of user supplied data, make sure you filter the data so that you only get data.

To avoid problems like persistent XSS, LFI (local file inclusion), and RCE (remote code execution).

Barry-xlovecam · 01-05-2017, 05:59 AM

For cross domain I just found this
enable cross-origin resource sharing
https://manning-content.s3.amazonaws.../CORS_ch01.pdf

This is interesting.
It's OK for free content because your API Key is in plaintext in the .js file -- Facebook and the like ... You could also watermark your public images and make them available for wide distribution.

sarettah · 01-05-2017, 04:18 PM

Bump to see if this took care of Mark or not.

.

01-04-2017, 09:02 PM	#1
2MuchMark Videochat Solutions Industry Role: Join Date: Aug 2004 Location: Canada Posts: 48,549	Question for javascript gurus Hello, I love you. I have an HTML page with some basic data with only 2 or 3 fields: This, That, and the other thing. I want to display that data on another HTML page, but I don't want to use iframes. Instead I want to grab the data from the first page and display it on my main page with styles associated with that page. Any suggestion? __________________ VideoChat Solutions \| Custom Software \| IT Support https://www.2much.net \| https://www.lcntech.com

01-04-2017, 10:44 PM	#9
Miguel T ♦ Web Developer ♦ Industry Role: Join Date: May 2005 Location: Full-Stack Developer Posts: 12,469	I'd use AJAX for that. __________________ Full Stack Webdeveloper: HTML5/CSS3, jQuery, AJAX, ElevatedX, NATS, MechBunny, Wordpress

01-04-2017, 11:14 PM	#11
2MuchMark Videochat Solutions Industry Role: Join Date: Aug 2004 Location: Canada Posts: 48,549	Hi Everyone, Let me clarify a little. Both pages are HTML. My main, fancy html5/css3 sexy page, index.html, would say "Hey! Here's the data! 1&2, 3&4, 5&6. " The page that actually contains the data would be unformatted nothingness, called "data.html", and would just contain "1&2", "3&4", "5&6". Both pages are HTML, and both are on the same domain. __________________ VideoChat Solutions \| Custom Software \| IT Support https://www.2much.net \| https://www.lcntech.com

01-05-2017, 12:52 AM	#14
deonbell Confirmed User Industry Role: Join Date: Sep 2015 Posts: 1,045	Just like to add. If "data.html" is made up of user supplied data, make sure you filter the data so that you only get data. To avoid problems like persistent XSS, LFI (local file inclusion), and RCE (remote code execution). __________________ Fake Naked Celebrity Sex Gallery

01-05-2017, 04:18 PM	#16
sarettah see you later, I'm gone Industry Role: Join Date: Oct 2002 Posts: 14,057	Bump to see if this took care of Mark or not. . __________________ All cookies cleared!

01-04-2017, 09:06 PM	#2
galleryseek Confirmed User Industry Role: Join Date: Mar 2002 Posts: 8,234	How are the fields being retrieved from the first page? Just static HTML? Or is it pulling the data from somewhere like through js? If it's not pulling the data from somewhere or some API, you'd need to scrape the data. There's a lot of different techs you can use to scrape. Python is the most popular.

01-04-2017, 09:21 PM	#3
Barry-xlovecam It's 42 Industry Role: Join Date: Jun 2010 Location: Global Posts: 18,083	AJAX/JSON on both pages to a server side script. Cross domain will require good scripting.

01-04-2017, 09:26 PM	#4
Bladewire StraightBro Industry Role: Join Date: Aug 2003 Location: Monarch Beach, CA USA Posts: 56,232	^^ This man is verified as super brains

01-04-2017, 10:35 PM	#7
rowan Too lazy to set a custom title Join Date: Mar 2002 Location: Australia Posts: 17,393	Not sure about sessionStorage, but I'm pretty sure that most browsers will prompt the user for confirmation (ie, a dialog saying "this site wants to...") when the code uses localStorage. Test carefully to make sure you don't spook your visitors. Edit: Also this text seems to suggest you can't share data between windows, because they will be considered separate sessions. "Opening a page in a new tab or window will cause a new session to be initiated, which differs from how session cookies work."

01-04-2017, 11:16 PM	#12
rowan Too lazy to set a custom title Join Date: Mar 2002 Location: Australia Posts: 17,393	So you're saying you want the main HTML page to fetch another page/object which contains raw data... that's an AJAX callback.

01-05-2017, 05:59 AM	#15
Barry-xlovecam It's 42 Industry Role: Join Date: Jun 2010 Location: Global Posts: 18,083	For cross domain I just found this enable cross-origin resource sharing https://manning-content.s3.amazonaws.../CORS_ch01.pdf This is interesting. It's OK for free content because your API Key is in plaintext in the .js file -- Facebook and the like ... You could also watermark your public images and make them available for wide distribution.