Question

我在iframe内显示外部网页，我想直接将焦点设置到网页内容，内容位于网页的中间位置。

我怎样才能做到这一点？

由于

Answer 1

如果页面位于其他域中，您将遇到XSS（跨站点脚本）问题以及浏览器提出的障碍，以避免恶意操作！

如果您自己为该页面提供服务，您可以这样做：

<强> inner.html ：

<!doctype html>
<html>
<head><title>the iframe</title></head><body>
Hello World!<br/>
This is where we start to select something ..<br/>
.. right here: <input type="text" id="toBeSelected" size="12" value="this is to be selected" onfocus="this.select()"/><br/>
</body>
</html>

<强> outer.html ：

<!doctype html>
<html>
<head><title>fun with IFRAME</title></head><body>
<ol type="i">
<li>wait for loading..</li>
<li>..<a href="#" id="andThen" style="display: none;" onclick="setFocus(); return false;">set focus</a></li>
<li>..see the effect.</li>
</ol>
<iframe id="theIFRAME" width="500" height="500" frameborder="1" data-src="inner.html" style="margin: 1em auto 0;">NO IFRAME support</iframe>
<script type="text/javascript"><!--

function setFocus(){
    var domIFRAME = document.getElementById('theIFRAME'), 
        docIFRAME = domIFRAME ? ( domIFRAME.contentDocument || domIFRAME.contentWindow.document ) : null;
    if( docIFRAME ) docIFRAME.getElementById('toBeSelected').focus(); else console.log("oups!");
}

function handleIframeContent(){
    console.log("okay, it has loaded.");
    document.getElementById('andThen').style.display = 'inline';
}

var domIFRAME = document.getElementById('theIFRAME');
domIFRAME.onload = handleIframeContent;
domIFRAME.src = domIFRAME.getAttribute('data-src');
// --></script>
</body>

当然，您可以在.focus()内部执行handleIframeContent()位，演示只是想让您有时间欣赏它实际上不是IFRAME中页面的默认状态。

HTH

将焦点设置为html5中iframe的中间位置

1 个答案: