jQuery或JavaScript - 将焦点设置回身体元素，一旦它位于跨域iframe中

我面临的问题，已被问到，但不完全如我要做的（或我还没有找到它），了解何时有人点击进入我无法控制的跨域iframe。

我看到有一些技巧可以得到它：我这样做，它可以在FF，IE 11和Chrome上运行，并收听focusout（）事件;无论如何，它只有在用户第一次点击iframe时才有效。

现在，要知道用户是否再次单击，发生此事件时，我试图恢复对文档正文内的元素的关注，但这不起作用。

这是我写的代码：jQuery或JavaScript - 将焦点设置回身体元素，一旦它位于跨域iframe中

<!DOCTYPE html> 
<html lang="en"> 

    <head> 

     <title>Focus() test</title> 

     <!-- JQuery libraries --> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 

    </head> 

    <body> 

     <input type="text" id="myInput" value=""> <br /> 

     <div id="iframeContainer" style="height: 400px; width: 280px"> 
      <iframe id="theIframe" height="400px" width="280px" src="https://docs.google.com/viewer?srcid=0B3R3uQMMhRrxUFJyYllhd0hVSkk&pid=explorer&efh=false&a=v&chrome=false&embedded=true"> </iframe> 
     </div> 

     <script> 

      var clickNum = 0; 

      $(document).ready(function(){ 
       $("#myInput").focus(); 
       $("body").focusout(function() { 
        clickNum++; 
        alert("click num:" + clickNum); 
        $("#myInput").focus(); 
       }); 
      }); 

     </script> 

    </body> 

</html>

我也尝试过用几个实例替代的jQuery代码即

$("#myInput").focus();

的最后一行：

$(this).next().focus();

试图模拟标签键。
事实上，当有人点击iframe（在我的代码中的一个缩放控制的谷歌驱动器预览），焦点丢失的身体和警报被解雇，但我无法得到例如，重点关注输入字段。
但是，如果有人按Tab键一定次数（取决于先前点击过哪个缩放控制以及按照哪个顺序），焦点会重新返回到输入字段，或者显然，如果有人在其内部点击，则会直接返回焦点。
然后，如果有人再次点击了一个缩放控件，则会再次触发警报，您可以跟踪点击次数。

所以我的最后一个问题是：

有没有办法从跨域iframe中取回的焦点，一旦焦点已经在其上，或当你无法控制跨域这两个文件在我案件，你没有任何希望恢复？

我知道这些东西可能已经被问到了，但我只是发现了我的整个问题的一些片段，并不总是具有完全相同的上下文。

谢谢你在前进，
费德里科

来源

2017-02-28 Federico Tomasi

编辑
（看看历史上一个答案）根据你最后的评论

，说明你真的打算用做iframe ...
您可以使用我之前建议的“iframe mask”：

$(document).ready(function(){ 
 

 
    // Onload input focus. 
 
    $("#myInput").focus(); 
 

 
    // iframe mask creation 
 
    var iframe = $("#iframeContainer"); 
 
    var maskCSS = { 
 
    height:iframe.height(), 
 
    width: iframe.width(), 
 
    top: iframe.offset().top, 
 
    left: iframe.offset().left, 
 
    "z-index":999999, 
 
    position:"absolute", 
 
    "background-color":"red", // You may remove color and opacity. ;) 
 
    "opacity":0.4 
 
    }; 
 

 
    var mask = $("<div>").css(maskCSS).attr("id","iframeMask"); 
 
    $("body").append(mask); 
 
    //console.log(maskCSS); 
 

 
    // 
 
    // --------- Click handlers in/out the iframe 
 
    // 
 

 
    // Detect a click in the iframe (specifically: on the mask!) 
 
    $("#iframeMask").on("click",function(){ 
 
    console.log("Click detected on the iframe mask. => Remove the mask and resize the iframe."); 
 

 
    $(this).css({"z-index":-1}); 
 
    $("#iframeContainer, #theIframe").css({"width":560,"height":800}); 
 
    }); 
 

 

 
    // Detect a click out the iframe 
 
    $("body").not("#iframeMask").on("click",function(e){ 
 

 
    if($(e.target).attr("id") != "iframeMask"){ 
 
     console.log("Click detected on the main document. => Reset iframe original size."); 
 

 
     $("#iframeMask").css({"z-index":999999}); 
 
     $("#iframeContainer, #theIframe").css({"width":280,"height":400}); 
 
    } 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<input type="text" id="myInput" value=""> <br /> 
 

 
<div id="iframeContainer" style="height: 400px; width: 280px"> 
 
    <iframe id="theIframe" height="400px" width="280px" src="https://docs.google.com/viewer?srcid=0B3R3uQMMhRrxUFJyYllhd0hVSkk&pid=explorer&efh=false&a=v&chrome=false&embedded=true"> </iframe> 
 
</div>

所以，如果你跑了上述（最好是在整页模式）的片段中，你看到的iframe调整和重置为初始大小是可能的...

它不是无法访问iframe内部元素...
从我所知道的来看，根本不可能。
但你打算只控制容器的大小，所以这是可能的，这里是我是如何做到：

创建iframe上述口罩检测用户关注的焦点。

在掩模上的用户点击：

立即以允许用户点击在其内部移动至iframe低于该掩模。

顺便说一句，请改变iframe容器属性。
你甚至可以使用动画更平滑！

在用户点击iframe外：

重置iframe到其原始大小（如果希望，这不是强制性的）。

替换iframe之上的掩码以供将来的点击检测。

在上面的代码片段的面具是红色，透明度为40％...
但如果它是无形的，它看起来像魔术！
;）

来源

2017-02-28 21:18:06

@ Louys谢谢，但我试图在用户点击iframe中Google pdf预览的缩放控件时触发一个操作。我希望通过这些操作调整div容器和iframe的大小。一切皆有可能，但我无法追踪iframe上的点击事件（第一个除外）。我知道存在与安全原因有关的问题，但我希望有人知道是否有办法恢复重点或者定义上无法做到这一点。无论如何谢谢 –

我明白了！我改进了我的答案。看一看！ ;） –

嗨Louys，感谢你的努力，但这次你的代码没有做我想知道的是否有可能。我希望焦点可以通过代码返回到输入字段，所以不要依赖用户操作（click或whatelse）。当用户点击 - 连续 - 在跨域iframe内时，我试图捕获它。无论如何，现在我已经放弃了这种方式，因为我认为这是不可能的，我也注意到Google预览中的其他问题。我已经开始关注Pdf.js项目，即使这样也不顺利:-(。我已经为此打开了一个新的帮助请求.Tx –

jQuery或JavaScript - 将焦点设置回身体元素，一旦它位于跨域iframe中

回答

相关问题