【问题标题】：JS acees variable another HTMLJS访问变量另一个HTML
【发布时间】：2016-07-07 20:31:46
【问题描述】：

我实际上是在尝试使用 JS 访问其他 HTML 文件的变量。

我的意思是，我有一个打开对话框的文件 (file1.htm)，我想将所选文件的信息发送到另一个文件 (file2.htm) 并修改此文件中的值。我找到了解决方案，但仅适用于 JS 文件，而不适用于 HTML：/

我已经完成了 2 个文件，但 file1a 是另一个文件的父级，所以我在 file2a 中使用了
parent.framWin = window; 和 framWin.divX=document.getElementById("one").offsetWidth; 例如在 file1a 中修改 file2a 中的变量 divX （我很确定这不是最好的解决方案，但它有效；））。这里，在这种情况下，file1 和 file2 不是父级，它们只是位于同一个文件夹中。

我尝试<script type="text/javascript" src="file1.htm"> 访问 var 但它似乎不起作用。

你知道我怎么能做到这一点吗？

非常感谢！

（这是我的代码：文件1.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>

和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>

我知道这不能正常工作，因为这里的语法有一些错误。但问题是可见的；）

再次感谢:)

【问题讨论】：

标签： javascript html

【解决方案1】：

您不能简单地使用客户端代码修改服务器上文件的内容。

您引用的示例只是更改了在代码运行时加载到浏览器中的数据，而服务器上的数据保持不变。

您可以采取两种方法：

将更改存储在浏览器中。

在第一页，使用localstorage 记录有关您要进行的更改的信息。（根据您的示例代码，您可能希望将图像转换为 data: 方案 URL 以实现此目的）。

在第二页中，有更多的 JS 从 localstorage 读取并在加载后使用该信息对其自身进行更改。

将更改发送到服务器。

提交表单（因此您根本不需要使用客户端代码）或使用 Ajax 将有关更改的信息发送到服务器。

让服务器端代码读取它，然后将其存储在会话中（如果您希望更改基于每个用户）或更永久的位置（如果您明智，可以存储在数据库中，但您可以直接修改文件)（如果您希望它在用户之间共享）。

第二页将是一个服务器端程序，它将读取该数据并使用它来生成页面。

【讨论】：

好吧，看来我这里有很多我不明白的东西：/ 我会尝试使用 Localstorage！感谢您的快速回答:) 但首先我会看看所有这些。再次感谢

【解决方案2】：

您可以使用 localStorage 来执行此操作。

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

在你的 file2.html 中

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

【讨论】：

当我尝试使用您的代码时，我有一个“我无法从空引用或未定义的引用中获取“setItem””或类似的东西。我在 IE11 上
对此我感到非常抱歉。原来IE11在localStorage中有问题。参考：stackoverflow.com/questions/21155137/… 我先在 chrome 中测试过，然后在这里写。您也可以使用 sessionStorage。 :)
没问题 ;) 我在吃饭前发现了这个。我会检查 sessionStorage ;)
这里提到：stackoverflow.com/questions/3392032/… 你可以使用` !localStorage && (l = location, p = l.pathname.replace(/(^..)(:)/, "$1$$ "), (l.href = l.protocol + "//127.0.0.1" + p));` 在脚本开始时使 localStorage 工作。但是我才发现我想错了。而且我必须重写文件而不是仅仅修改一个变量......啊哈，它会更有趣！ :)