jQuery或JavaScript-将焦点放在body元素中，一旦将其放在跨域iframe中

我面临的问题已经被问到，但并不完全像我要做的那样（或者我没有找到）我无法控制的iframe。

我已经看到有一些技巧可以得到它：我这样做，它在FF，即11和Chrome上起作用，听了focusout（）事件；无论如何，它仅在第一次单击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键进行一定次数（这取决于以前单击的Zoom Control ONE）/>然后，如果有人再次在一个缩放控件上单击，则再次触发警报，您可以追踪点击数。

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

是否有一种方法可以从跨域中恢复焦点后，或者，当您无法控制跨域中的两个文档时，就像我的情况下一样，您没有任何希望找回它？

我知道这些事情也许已经被问到了，但是我只是找到了整个问题的部分，并且并非总是相同的上下文。

预先感谢您，
费德里科

edit
（查看上一个答案的历史）

基于您的上一个评论，指示您真正打算使用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上方的掩码以将来点击检测。

上面片段中的面具是红色的，有40％的不透明度...
但是，如果它是看不见的，它看起来像魔术！
;）

相关内容

最新更新

热门标签：