document.getElementsByName 返回 NULL，除非我查看 HTML 源

Question

这似乎是一个简单的问题，但我无法解决它。

基本上有一个我们在工作中使用的网站需要大量的重复输入，所以我试图制作一小部分 JavaScript 可以自动将文本放入网站的某些字段中。我打算通过制作运行 JavaScript 代码的书签来实现这一点，这样我就可以根据需要使用一些不同的书签。

问题是每当我这样做时都会出现错误，因为它 returns 在 getElementsByName:

上为 NULL

document.getElementsByName("user_name")[0].value=("Type Username Here");

虽然这是我感到困惑的地方，但如果我检查该元素并实际看到我要查找的确切元素，或者当我从与它相同的区域查看任何源时，它会工作得很好（我想要找到的是在一个大的 iFrame 中）。如果我只查看基本源，它仍然无法正常工作。

我也试过使用 document.getElementById，它有完全相同的问题。

我正在运行将代码粘贴到 Chrome 上的控制台中，因此当我尝试运行 [=34] 时，一切都正常加载=].

如果有人有任何建议，我们将不胜感激。

TL;DR：除非我查看 HTML 来源，否则 JavaScript 将无法工作。

Answer 1

what i'm trying to find is in a big iFrame

从父页面（具有 iframe 的页面）到子页面（显示在 iframe 中的页面）访问元素的关键部分本质上是这样的：

bigIframe.contentWindow.document.getElementById('user_name')

但是要构建到这一点，还需要考虑一些额外的代码。 Plunker 是现场演示，Snippet 包含关键部分。

PLUNKER

片段

  <form id='form1' name='form1' action='' method='post' target='bigIframe'>
    <input id='inData' name='inData'>
    <input id='btn1' type='submit'>
<!--iframe points to a blank because Snippet will not function correctly as a full functioning iframe for secrity reasons-->
    <iframe id='bigIframe' name='bigIframe' src='about:blank' width='400' height='300'></iframe>
  </form>

<script>
  var form1 = document.getElementById('form1');

  form1.addEventListener('submit', function(e) {
    e.preventDefault();
    var bigI = document.getElementById('bigIframe');
    var data = document.getElementById('inData').value;
    var iUser = bigI.contentWindow.document.getElementById('user_name');
    iUser.value = data;
  }, false);
</script>

参考资料

https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/contentWindow

document.getElementsByName 返回 NULL，除非我查看 HTML 源

document.getElementsByName returning NULL unless I view the HTML source

javascript

iframe

getelementbyid

getelementsbyname

片段

参考资料