javascript - getElementByID 不工作，因为字段在某种框架中，我如何访问它？

Question

请快速进入此页面并点击右上角的登录:

这是链接:http://forums.gamesalad.com

我正在尝试预先填写弹出的这两个字段。他们似乎处于某种框架中。我无法使用 getElementByID(或与此相关的任何 getElement)访问字段。如何使用 javascript 访问这两个字段？

注意:(不要担心触发 javascript，只需访问字段)。

这是我当前的代码:

document.getElementById('login-dialog-email').value = 'the user name';

Answer 1

如果您在调试器(如 Chrome 调试器)中查看您的 HTML，您会看到您有两个输入元素实例，其 id="login-dialog-email"。

W3C 规范规定在单个 HTML 文档中只能使用 id 属性的一个实例，并且浏览器 vendor 以一种方式实现此规范，如果相同的多个 id 属性，则行为被认为是未定义的值在页面上。

根据我的经验，这实际上只影响具有所述 id 的元素的第二个实例，如果您搜索 login-dialog-email 并检查哪个元素被突出显示，您会看到第二个实例是一个代表您的表格。

删除第一个实例，或使用唯一的 id，然后您就可以定位该元素。

此登录字段的第一个实例似乎是隐藏在页面上的模板的一部分。

<div id="login-form-template" style="display: none">
    <form accept-charset="UTF-8" action="https://auth.gamesalad.com/auth/signIn" class="dialog dialog-form" id="common-login-form" method="post">
   ...

    <li class="email">
        <label for="login-dialog-email">
        Email:
          <input id="login-dialog-email" name="emailAddress" type="text" value=""></input>
        </label>
    </li>
    <li class="password">
        <label for="login-dialog-password">
        Password:
          <input id="login-dialog-password" name="password" type="password" value="">
        </label>
    ...

此字段的第二个实例实际上出现在 fancybox 内，这是您尝试定位的实际 HTML 所在的位置。

<div id="fancybox-content" style="border-top-width: 10px; border-right-width: 10px; border-bottom-width: 10px; border-left-width: 10px; width: 300px; height: 233px; "><div style="width:300px;height:auto;overflow: auto;position:relative;">
   <form accept-charset="UTF-8" action="https://auth.gamesalad.com/auth/signIn" class="dialog dialog-form" id="common-login-form" method="post">
   ...
   <li class="email">
       <label for="login-dialog-email">
         Email:
         <input id="login-dialog-email" name="emailAddress" type="text" value="">
       </label>
   </li>
   <li class="password">
     <label for="login-dialog-password">
       Password:
       <input id="login-dialog-password" name="password" type="password" value="">
     </label>
   <span>
...

因此，即使网站所有者试图从页面定位这些字段，他/她也会遇到同样的问题。

这个问题的解决方案是在任何模板中使用 className 属性。这确保可以通过 DOM 方法定位所有字段。

但是，这并不意味着您仍然不能定位元素:

JavaScript:

document.getElementsByClassName("email")[2].
    getElementsByTagName("input")[0].value = "test@example.com";

jQuery:

该站点是使用 jQuery，因此您也可以使用它:

$('input[name="emailAddress"]').val( "test@example.com" );