Question

我的网站提供iframe代码，该代码放在其他一些网站上。

为简单起见，我们可以说我的域名，即iframe的来源是www.abc.com，而使用我的iframe代码的客户则拥有域名www.xyz.com。

在我的iframe网站中，我尝试使用javascript访问用户的geoLocation。

在移动设备上浏览www.xyz.com时，www.abc.com（在iframe中）会显示一个确认框以允许或拒绝访问geoLocation。

现在我的问题是： -

我想仅在iframe位于浏览器的可查看区域时显示确认框。我想这样做而不要求我的客户在他们的网站上放置任何更多的js代码。它应该全部来自我的iframe源。

我尝试了以下操作，但只有在我们更改浏览器标签或最小化或最大化浏览器时才会触发visibilityChanged() ...

示例代码。 a.html

<!DOCTYPE html>
<html>
<head>
<script>
function onLoad() {
    console.log('onload:', (document.hidden));
    document.addEventListener("webkitvisibilitychange", visibilityChanged);
}

function visibilityChanged() {
    console.log('visibilityChanged: ',arguments);
}

</script>
</head>
<body onload="onLoad()">
test
</body>
</html>

b.html

<!DOCTYPE html>
<html>
<head>  
</head>
<body>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<iframe style="border:1px solid red; width:200px;height:200px;" src="a.html"/>
</body>
</html>

Answer 1

新的PageVisibility API应该在移动设备上得到广泛支持，看起来更有前景：

广泛支持：http://caniuse.com/#feat=pagevisibility
规格：http://www.w3.org/TR/page-visibility/

规范中的代码段（上图）：

   var timer = 0;
   var PERIOD_VISIBLE = 1000;
   var PERIOD_NOT_VISIBLE = 60000;

   function onLoad() {
       timer = setInterval(checkEmail, (document.hidden) ? PERIOD_NOT_VISIBLE : PERIOD_VISIBLE);
       if(document.addEventListener) document.addEventListener("visibilitychange", visibilityChanged);
   }

   function visibilityChanged() {
       clearTimeout(timer);
       timer = setInterval(checkEmail, (document.hidden) ? PERIOD_NOT_VISIBLE : PERIOD_VISIBLE);
   }

   function checkEmail() { 
       // Check server for new messages
   }

当用户滚动到iframe或iframe在视口中时，从iframe调用js函数

1 个答案: