JS acees variable another HTML

Question

I'm actually trying to access variable of other HTML file using JS.

I mean, I have a file (file1.htm) that open dialog box and I would like to send information of the file selected to another file (file2.htm) and modify a value in this file. I found solution but only for JS files, and not HTML :/

I had already done it with 2 files but file1a was the parent of the other, so I used
parent.framWin = window; in file2a and framWin.divX=document.getElementById("one").offsetWidth; for example in file1a to modify the variable divX in file2a (I'm pretty sure this is not the best solution, but it works ;) ). Here, in this case, file1 and file2 are not parent, and they are just located in the same folder.

I tried <script type="text/javascript" src="file1.htm"> to access var but it doesn't seem to work.

Do you have any idea how I can accomplish this?

Thanks a lot!

(Here's my code : file1.htm :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>SiteMap</title>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

<style type="text/css">

</style>

<script type="text/javascript">
<!--

function OK(e){
    var name = document.getElementById("dialog").value;
    //Here I would like to do something like File2.NameSpace1 = name;
    //And File2.modifyMyName(); // But here, it's another question, to use JS script in another file ;)
}

//-->
</script>

</head>
<body >
<form action='' method='POST' enctype='multipart/form-data'>
    <input type='file' name='userFile' onchange="OK()" id="dialog">
</form>
</body>
</html>

and file2.htm:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>SiteMap</title>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

<script type="text/javascript">
<!--
    var NameSpace1;

function modifyMyName(){
     document.GetElementById("first").src = NameSpace1;
}
//-->
</script>
</head>
<body>
    <div>
         <img src ="" id="first" />
    </div>
</body>

I know this won't work properly because there are some errors here in the syntax. But the problem is visible ;)

Thanks again :)

score 2 · Accepted Answer · answered Mar 21 '16 at 11:04

You can't simply modify the content of file on the server using client side code.

The examples you've cited just change the data that is loaded into the browser at the time the code runs while leaving the data on the server untouched.

There are two approaches you can take to this:

Store the changes in the browser.

In page one, use localstorage to record information about the change you want to make. (You'd probably want to convert the image into a data: scheme URL to achieve this given your example code).

In page two, have some more JS that reads from localstorage and uses that information to make the change to itself after it loads.

Send the changes to the server.

Submit a form (so you don't need to use client side code at all) or use Ajax to send information about the change to the server.

Have server side code read it and then store it in a session (if you want the change to be on a per-user basis) or somewhere more permanent (in a database if you are sensible but you could modify the file directly) (if you want it to be shared between users).

Page two would then be a server side program that would read that data and use it to generate the page.

Okay, it seems that I have tons of thing I have not understand here :/ I'll try to use Localstorage! Thanks for your fast answer :) But First I will have a look on all of this. Thanks again — Raph Schim, Mar 21 '16 at 11:09

score 1 · Answer 2 · answered Mar 21 '16 at 11:07

1

You can use localStorage to perform this operation.

function OK(e){
    var name = document.getElementById("dialog").value;
    window.localStorage.setItem('dialogValue', "Name");
}

And In your file2.html

function modifyMyName(){
     var NameSpace1 = window.localStorage.getItem('dialogValue');
     document.GetElementById("first").src = NameSpace1;
}

answered Mar 21 '16 at 11:07

M. Junaid Salaat

3,765
1
23
25

When i try to use your code, I have an "No way i can get "setItem" from a null reference or not defined" or something like this. I'm on IE11 – Raph Schim Mar 21 '16 at 11:17
I am really sorry about that. It turns out IE11 have problem in localStorage. Reference :http://stackoverflow.com/questions/21155137/javascript-localstorage-object-broken-in-ie11-on-windows-7 I had tested it first in chrome then I wrote it here. You can use sessionStorage too. :) – M. Junaid Salaat Mar 21 '16 at 11:23
Not a problem ;) I had found this just before going to eat. I'll check for sessionStorage ;) – Raph Schim Mar 21 '16 at 12:20
As mentionned here : http://stackoverflow.com/questions/3392032/localstorage-object-is-undefined-in-ie you can use ` !localStorage && (l = location, p = l.pathname.replace(/(^..)(:)/, "$1$$"), (l.href = l.protocol + "//127.0.0.1" + p));` at the beggining of your script to make the localStorage works. But I just found out that I was thinking wrong. And I have to rewrite the file instead of just modify a variable... Ahah, it'll be a lot more funny! :) – Raph Schim Mar 21 '16 at 12:51

JS acees variable another HTML

2 Answers2

Store the changes in the browser.

Send the changes to the server.