JS如何在页面加载时关注<main>元素

Question

我有一个<main id="news">...Content...</main>我试图让它专注于何时加载文档以用于滚动条目，因为页面的其余部分适合整个页面并且不会超过这一点所以任何内容都是更长的是在新闻div中我想确保如果用户希望使用箭头键向下滚动，他们不必首先点击元素（只是一个漂亮的功能我＆＃39; d喜欢添加）

Answer 1

尝试一次，只是一个黑客，在关闭body标签之前添加它，

<script>
$(function(){
   $('#news').click();
});
</script>

我正在尝试在页面加载后点击新闻栏目，以便重点关注它。

Answer 2

默认情况下，只有一组有限的元素可以接收实际的“焦点” （主要是“交互式”元素，例如链接和表单元素）。

使用tabindex属性，首先必须使其具有“可聚焦”的其他元素。

<main tabindex="0">…

现在这个元素实际上可以获得焦点，因此你可以使用focus方法来实现它：

var main = document.getElementsByTagName("main")[0];
main.focus();

请参阅此小提琴： http://jsfiddle.net/Legs545x/ http://jsfiddle.net/Legs545x/2/（为此display:block添加main以获取Internet Explorer的优势，但不执行此操作默认情况下，设置height不起作用。）

这适用于当前的Chrome和IE 11;在Firefox中，它在jsfiddle环境中不起作用 - 无论是在全屏视图中，https://jsfiddle.net/Legs545x/2/embedded/result/

在所有这些浏览器中，您应该看到main元素在小提琴加载后通过main:focus { background:#f99; }获得红色背景，并且您应该能够使用向上滚动并在其中滚动向下箭头键或向上翻页/向下翻页，无需先点击进入。

Answer 3

$(document).ready(function(){

    $('#news').focus();

});