Question

显然，一旦你给它一个名字＆＃39;就可以按名称访问iframe DOM对象。属性。如果在chrome dev工具控制台中键入名称，它将在控制台中注册iframe对象。

这样你也可以从iframe调用JS方法（参见下面的onclick处理程序）。

它是如何工作的？我的意思是，我认为name属性只对表单有用 - 然后服务器能够正确读取用POST方法设置的不同字段。但这里它在客户端方面有所不同 - 它提供了访问iframe及其功能的能力。它只适用于iframe吗？（如果您尝试让下面的代码在本地工作，则可能会出现一些错误，例如“阻止带有原点的帧＆＃34; null＆＃34;访问跨源帧”，但是我有一个完全相同的生产代码，它工作正常。

<html>
<body>

<button id="fooButton" onclick="fooFrame.foo()">Click
</button>

<iframe id="fooFrame" name="fooFrame" src="./content.html">
</iframe>

<script>
console.log(fooFrame);
</script>
</body>
</html>

Answer 1

您可以使用以下方法引用任何元素的name属性：

.getElementsByName('NAME')

.querySelector('[name=NAME]')

.querySelectorAll('[name=NAME]')

详细信息在Snippet中进行了评论

段

/* Use a CSS selector to reference the first element */
var ifrm1 = document.querySelector('[name=ifrm1]');

/* Collect all elements by a name */
var iframes = document.getElementsByName('ifrm');

/* Collect a single element by a name (bracketed index[0])*/
var iframes0 = document.querySelectorAll('[name=ifrm]')[0];


ifrm1.style.borderColor = 'blue';

/* .getElementsByName() and querySelectorAll() return HTML Collections/NodeLists */
/* Any NodeList/HTML Collection should be iterated thru by a loop, an Array method, etc. */

var qty = iframes.length;

for (let i = 0; i < qty; i++) {
  iframes[i].style.backgroundColor = 'red';
}

/* .getElementsByName() and .querySelectorAll() can be used for a single element without iteration by using the bracket notation (ex. [0] is the first element in a collection/list*/

iframes0.style.borderColor = 'lime';

<html>

<body>


  <iframe name="ifrm1" src="about:blank"></iframe>

  <iframe name="ifrm" src="about:blank"></iframe>
  <iframe name="ifrm" src="about:blank"></iframe>
  <iframe name="ifrm" src="about:blank"></iframe>


</body>

</html>

使用JS

1 个答案:

段