从不同的HTML页面访问相同的Javascript函数_Javascript_Html

从不同的HTML页面访问相同的Javascript函数

javascript html

从不同的HTML页面访问相同的Javascript函数,javascript,html,Javascript,Html,例如，在page1.html中，我有： <input type="radio" id="id1" onclick="change()">Radio Button</input> 由于id1和id2不在同一页上，因此此代码将不起作用是否有任何方法可以让2个或更多html页面同时访问javascript函数假设我已经包括了这一点： <script src="js_file.js" type="text/javascript" /> 在head标

例如，在page1.html中，我有：

    <input type="radio" id="id1" onclick="change()">Radio Button</input>

由于id1和id2不在同一页上，因此此代码将不起作用

是否有任何方法可以让2个或更多html页面同时访问javascript函数

假设我已经包括了这一点：

<script src="js_file.js" type="text/javascript" />

在head标记内的两个HTML页面中

我试图避免服务器端编程，因为它是嵌入式web服务器，只能用C语言编程。

实现这一点的唯一方法是使用

隐藏的HTML元素在页面之间传递数据
第1页
<input type="radio" name="radio1" id="radio1" onclick="change.js">Radio Button</input>

单选按钮

第2页
<input type="hidden" name="radio1" value="XXX">



当然，您必须让Page1
将表单上载到服务器，并让服务器生成Page2
，并填充隐藏的元素。
试试这个
Page1.html
<!DOCTYPE html>
<html>
<head>
<script>
window.addEventListener('load', onDocLoaded, false);

function onDocLoaded()
{
    var urlRadios = document.getElementsByName('urlSelector');
    var i, n = urlRadios.length;
    for (i=0; i<n; i++)
        urlRadios[i].addEventListener('click', onUrlRadioChange, false);
}

function onUrlRadioChange(evt)
{

    localStorage.destUrl = this.getAttribute('dest');
    localStorage.destTxt = this.getAttribute('msg');
}

</script>
<style>
</style>
</head>
<body>
    <h3>Pick destination of link on page 2</h3>
    <input type='radio' msg='No page selected' dest='none' checked name='urlSelector'>none</input>
    <input type='radio' msg='Page 3' dest='page3.html' name='urlSelector'>page3.html</input>
    <input type='radio' msg='Page 4' dest='page4.html' name='urlSelector'>page4.html</input>
    <hr>
    <a href='page2.html'>Page 2</a>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<script>
function byId(e){return document.getElementById(e);}
window.addEventListener('load', onDocLoaded, false);

function onDocLoaded()
{
    if (localStorage.destUrl != 'none')
        byId('tgtLink').href = localStorage.destUrl;
    byId('tgtLink').innerHTML = localStorage.destTxt;
}
</script>
<style>
</style>
</head>
<body>
    <h3>Destination was set by page 1</h3>
    <a id='tgtLink'>Link</a>
</body>
</html>


window.addEventListener（'load'，onDocLoaded，false）；
函数onDocLoaded（）
{
var urlRadios=document.getElementsByName（'urlSelector'）；
变量i，n=urlRadios.length；
对于（i=0；i另一个解决方案，如果站点的结构允许，它可能会起作用：window.opener

假设第1页以弹出窗口的形式打开第2页（因此两个窗口都保持打开状态），那么您可以访问从第1页到window.opener的所有内容。

您甚至可以在这里进行测试。在新窗口中打开此站点上的任何链接（在stackoverflow域中，否则将是XSS），然后打开该新窗口的JavaScript控制台并输入：window.opener.document.title=“YAY！”

至少这是一种避免使用本地存储等的简单方法。
利用查询字符串。当在第1页上执行操作时，使用本地存储存储结果。当加载第2页时，检查本地存储，如果存在，则从本地存储加载数据。这个问题表明对web如何工作缺乏了解。如果您想执行以下操作：这就需要一种服务器端语言，而不是JS，或者JS+websockets，如果你是实时操作的话。确切地说，你想做什么？上下文是什么？对不起，但我试图避免服务器端编程，因为它是一个嵌入式web服务器，只能用C语言编程……不需要臭服务器，也不需要隐藏表单元素ter.：p您可以使用javascript和在本地计算机上运行的文件轻松完成此操作-甚至不需要通过本地主机访问它们。@enhzflep启蒙我们？@enhzflep是的，是的，事情可能会塞进奇怪的角落和缝隙中-您可以将事情隐藏在窗口中。name--但是如果没有服务器来处理表单，那么该怎么办收集数据的使用。@enhzflep请说明它是如何完成的，因为它可能对我的项目非常有帮助
<!DOCTYPE html>
<html>
<head>
<script>
window.addEventListener('load', onDocLoaded, false);

function onDocLoaded()
{
    var urlRadios = document.getElementsByName('urlSelector');
    var i, n = urlRadios.length;
    for (i=0; i<n; i++)
        urlRadios[i].addEventListener('click', onUrlRadioChange, false);
}

function onUrlRadioChange(evt)
{

    localStorage.destUrl = this.getAttribute('dest');
    localStorage.destTxt = this.getAttribute('msg');
}

</script>
<style>
</style>
</head>
<body>
    <h3>Pick destination of link on page 2</h3>
    <input type='radio' msg='No page selected' dest='none' checked name='urlSelector'>none</input>
    <input type='radio' msg='Page 3' dest='page3.html' name='urlSelector'>page3.html</input>
    <input type='radio' msg='Page 4' dest='page4.html' name='urlSelector'>page4.html</input>
    <hr>
    <a href='page2.html'>Page 2</a>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<script>
function byId(e){return document.getElementById(e);}
window.addEventListener('load', onDocLoaded, false);

function onDocLoaded()
{
    if (localStorage.destUrl != 'none')
        byId('tgtLink').href = localStorage.destUrl;
    byId('tgtLink').innerHTML = localStorage.destTxt;
}
</script>
<style>
</style>
</head>
<body>
    <h3>Destination was set by page 1</h3>
    <a id='tgtLink'>Link</a>
</body>
</html>