Question

例如在 page1.html 中我有：

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

在 page2.html 我有：

    <a href="page3.html" id="id2">Link</a>

点击 page1.html 上的单选按钮可更改 page2.html 中href属性的值。

Javascript（ js_file.js ）：

function change()
{
    if(document.getElementById(id1).checked)
        {
            document.getElementById(id2).href="page4.html";
        }  
}

此代码无效，因为id1和id2不存在于同一页面上。

有两种或更多html页面可以同时访问javascript函数的方法吗？

假设我已经包含了这个：

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

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

。

我正在尝试避免服务器端编程，因为它是一个嵌入式Web服务器，只能用C语言编程。

Answer 1

唯一可以做到这一点的方法是使用hidden 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并填充hidden个元素。

Answer 2

尝试使用此尺寸。

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

<强> Page2.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>

Answer 3

如果站点的结构允许这样的话，另一个可能有效的解决方案：window.opener
假设第1页打开第2页作为弹出窗口（因此两个窗口都保持打开状态），然后您可以访问从第1页到第11页的所有内容。
你甚至可以在这里测试一下。在新窗口中打开此站点上的任何链接（在stackoverflow的域中，否则将是XSS），然后打开该新窗口的JavaScript控制台并输入：window.opener.document.title =“YAY！”
至少这是避免使用本地存储等的简单方法。

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

3 个答案: