当用户滚动到 iframe 或 iframe 在视口中时，从 iframe 调用 js 函数
Posted
技术标签:
【中文标题】当用户滚动到 iframe 或 iframe 在视口中时，从 iframe 调用 js 函数【英文标题】：Calling js function from an iframe when user scrolls to the iframe or when the iframe is in viewport 【发布时间】：2013-11-18 05:30:49 【问题描述】：我的网站提供了 iframe 代码，这些代码放在其他一些网站中。
为简单起见，假设我的域，即 iframe 的来源是 www.abc.com，而使用我的 iframe 代码的客户拥有域 www.xyz.com。
在我的 iframe 网站中，我尝试使用 javascript 访问用户的地理位置。
当在移动设备上浏览 www.xyz.com 时，www.abc.com（在 iframe 中）会放置一个确认框以允许或拒绝访问 geoLocation。
现在我的问题是：-
我只想在 iframe 位于浏览器的可视区域时显示确认框。而且我想在不要求我的客户在他们的网站中添加更多 js 代码的情况下做到这一点。这一切都应该发生在我的 iframe 源中。
我尝试了以下方法，但 visibilityChanged() 仅在我们更改浏览器选项卡或最小化或最大化浏览器时才会被触发...
示例代码。一个.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>
【问题讨论】：
【参考方案1】：应该在移动设备上得到广泛支持的新 PageVisibility API 看起来更有希望：
广泛支持：http://caniuse.com/#feat=pagevisibility 规格：http://www.w3.org/TR/page-visibility/规范中的代码 sn-p（上）：
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
【讨论】：
请注意，根据 caniuse.com 的注释，在 Chrome、Opera 和 android 浏览器（即将推出）上，它仍然是“document.webkitHidden”，而不仅仅是“document.hidden”。 我尝试了 visibilitychange 事件，但它似乎仅在浏览器选项卡更改或浏览器窗口最小化时触发......当我们滚动到 iframe 时它不会生效。 深入研究，不幸的是，这似乎是预期的行为：“当用户代理确定***浏览包含的文档的可见性时，用户代理必须在文档上触发 visibilitychange 事件上下文发生了变化。”因此，如果在 DOM 中仍然无法检查这一点，那么做 x-site 最不痛苦的方法是让主机页面使用'window.name'：window.name = getPublicPositionInfo: function() ..
也就是说，如果window.name 传输仍然有效：请参阅：bit.ly/1b3PoI6。但我知道您可能无法让主机页面组织添加您的任何代码。以上是关于当用户滚动到 iframe 或 iframe 在视口中时，从 iframe 调用 js 函数的主要内容，如果未能解决你的问题，请参考以下文章
当鼠标悬停在 Firefox 中的嵌入式 iframe 上时，防止父页面滚动
javascript-如何检测 iframe 中的滚动事件？