Question

请快速访问此页面并点击右上角的登录信息：

以下是链接：http://forums.gamesalad.com

我正在尝试预先填充弹出的这两个字段。它们似乎处于某种框架中。我无法使用getElementByID（或任何getElement）访问字段。如何使用javascript访问这两个字段？

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

这是我目前的代码：

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

Answer 1

您的密码和电子邮件输入框的ID login-dialog-email相同。当您尝试分配值时，javascript会感到困惑。分配不同的ID，你很高兴。

Answer 2

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

W3C规范说，在一个HTML文档中只能使用一个id属性的实例，并且浏览器供应商以一种方式实现此规范，如果行为被认为是未定义的，如果多个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" );

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

2 个答案: