Javascript 为新加载的页面angularJS提供选项卡焦点

我在左侧有一个网页侧导航菜单，在右侧有一个内容窗格。在内容窗格中有一个文本和一个iframe。当使用tab进入导航菜单并输入任何菜单选项时，相关内容将加载到内容窗格。甚至加载到窗格选项卡的内容焦点也在导航菜单上

每当新加载内容时，我需要将选项卡焦点赋给内容窗格中的文本或iframe。我尝试使用tabindex

<a href="" tabindex="1">test text for tab focus</a>
<div id="content-frame" class="fill center-content">   

    <div id="content-frame-loading" class="load-img"><img ng-src="{{loadingIconUrl}}" alt="{{$scope.loadingSpinnerAltText}}"></div>

    <iframe id="centerIframe" name="centerIframe" class="fill content-frame"  src="" orientable height="100%" width="100%" ng-style="{'height' : settings.iFrameHeight}" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen="true" allowtransparency="true">
    </iframe>

</div>

---

上面是内容窗格的代码块。

仅设置tabindex无法解决此问题。tabindex将把dom节点添加到选项卡序列中，当根据序列轮到它时，它将在单击选项卡时聚焦

这里您正在设置tabindex，但另外您还希望内容自动聚焦，因此您必须编写一些脚本来实现这一点

因此，如果您的内容是组件的一部分，您可以在任何生命周期挂钩中手动将所需元素集中在该组件的负载上

这样，当您单击导航菜单选项时，内容的组件将被加载，其生命周期挂钩将在脚本执行时被执行，以聚焦所需的元素，焦点将被聚焦到该元素上