cla*_*l3r 8 html javascript iframe jquery
如果我有一个包含iframe的网站:
<html>
<body>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<iframe src="http:/somelink.com/iframe.html"></iframe>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
那么iframe是否可以知道它是否可以被"看到"?这例如通过知道与屏幕顶部相关的iframe的顶部位置.
这是我的测试iframe :(所有值都是0,无论父级的滚动位置)
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
console.log("ok");
check();
});
function check() {
// position of parent
var parentScrollTop = $(window.parent.document).scrollTop();
console.log("parentScrollTop: "+parentScrollTop);
// self position
var bodyPosition = $("body").position().top;
console.log("body position: "+bodyPosition);
setInterval(check, 1000);
}
</script>
<style type="text/css">
body {
background-color: red;
}
</style>
</head>
<body>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
我使图像更清晰.

我必须从iframe中知道它是否可见!所以不要在包含iframe的页面中.
使用这个: https: //github.com/customd/jquery-visible
添加一个 id 到 iframe 然后你可以使用这个:
if ($('#iframeID').visible(true)) {
// The iframe is visible
} else {
// The iframe is NOT visible
}
Run Code Online (Sandbox Code Playgroud)