相交观察器是否从跨域iframe内部相对于视口工作？
相交观察器（Intersection Observer）是一个用于监测元素是否进入或离开视口的API。它可以用于实现懒加载、无限滚动、广告展示等功能。
相交观察器可以在跨域iframe内部相对于视口工作。它的工作原理是通过观察目标元素与其祖先元素或视口的交叉区域来判断是否可见。当目标元素进入或离开视口时，会触发相应的回调函数。
在跨域iframe内部，相交观察器可以观察到iframe内部的元素与iframe所在页面的交叉区域情况。它不受跨域限制，因为它是基于元素与视口的相对位置进行判断，而不是直接访问iframe内部的内容。
相交观察器的优势在于它可以提供更高效的元素可见性检测。相比于传统的滚动事件监听或定时器轮询，相交观察器可以减少不必要的计算和性能消耗，提升页面的响应速度和用户体验。
相交观察器的应用场景包括但不限于：
- 图片懒加载：当图片进入视口时再进行加载，减少页面加载时间。
- 无限滚动：当滚动到页面底部时，自动加载更多内容。
- 广告展示：当广告位进入视口时，触发广告展示或统计事件。
- 用户行为追踪：监测用户在页面上的滚动、停留等行为。
腾讯云提供了云计算相关的产品和服务，其中与相交观察器相关的产品是腾讯云的Web+，它是一款全托管的Web应用托管平台，提供了丰富的功能和工具来简化Web应用的开发和部署。Web+可以与相交观察器结合使用，实现更高效的元素可见性检测。
更多关于腾讯云Web+的信息，请访问：腾讯云Web+产品介绍
相关·内容
我在div中有一个iframe。我希望iframe的大小与其父div的大小完全相同。我使用下面的代码来设置iframe的宽度和高度。
<iframe src="./myPage.aspx" id="myIframe"
style="position: relative;
height: 100%;
width: 100%'
scrolling='no'
frameborder='0'"&g
浏览 1提问于2013-09-12得票数 25
回答已采纳
1回答
我试图使嵌入式视频调整大小，同时保持其纵横比。(在这种情况下是16:9)
我在这个网站上找到了一个解决方案：
正如您所看到的，视频(我正在使用的视频是vimeo)在用户调整窗口大小的同时被很好地调整了大小。但是，我无法让它使用这个Javascript代码。我熟悉HTML和CSS，但我是Javascript的新手。
这里是我的HTML，我通常会使用外部CSS，但是这里我复制了我想要做的事情，并简化了它：
<!DOCTYPE html>
<html lang="EN" style="height: 100%;">
<head&g
浏览 2提问于2020-01-30得票数 0
回答已采纳
3回答
有没有办法让iframe的高度适应它的内容？你能教我怎么做吗？我试着在网上搜索和试用这些代码，但没有成功。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta NAME="Description"
浏览 0提问于2013-07-31得票数 5
2回答
我正在尝试改变iframe元素的设计，它是基于父网站(渲染iframe的网站)托管在不同的域上的。
我的具体目标是仅为iPhone 5 (strict iPhone 5)更改iframe中的一些设计组件。到目前为止，我通过传递$(window).width()和$(window).height()来获取宽度和高度，然后在加载iframe时将它们作为查询参数传递到url中。通过这种方式，我可以提前获得确切的宽度，并根据该宽度调整设计元素。
有没有更好的方法来做到这一点，但我不知道，我仍在寻找如何准确地针对iPhone 5。
到目前为止，我在iPhone 5上使用了这个，但没有成功：
if (wi
浏览 0提问于2017-01-02得票数 1
1回答
无论我尝试什么，我都不能在我的网站上调整iframe的高度。我尝试过height="100%"和CSS
iframe {
height: 100%;
}
链接到它和我的代码(检查)
浏览 3提问于2022-05-22得票数 0
回答已采纳
我有一个问题，我用Angularjs创建了一个html表格，现在我想在iframe上显示这个表格，一切正常，但是弹出窗口显示图形在下面的div中打开，我想在整个页面上打开它，我的输出如下
我想要这样
我的代码如下，我在iframe中调用的Stock.html代码
<div ng-controller="StockCtrl">
<table class="table table-striped table-bordered table-hover table-full-width" ng-init="firstCal
浏览 0提问于2017-02-23得票数 1
2回答
我正在嵌入一个youtube/dailymotion视频，我想让iframe响应式的，特别是全高，和窗口的高度一样：
我做了一个响应式的Iframe，但不是全高的！
以下是我的代码
<div class="video-container">
<iframe height="100%" width="100%" src="https://www.youtube.com/embed/7ipiybRLqZc" frameborder="0" all
浏览 0提问于2015-06-26得票数 1
回答已采纳
我有一个包裹在父div中的iframe，我知道父div和iframe的高度将是它们的父(或页面)的100%。如下所示： <div class="parent"> // will be 100% high
<iframe></iframe> // will be 100% high & wide, pos absolute
</div> 怎样才能使parent的宽度始终保持宽高比？以同样的方式，将iframe视频放在父div中，并使用padding-top: 56.25%;来保持4:3的纵横比-我如何使用宽度来做到这一
浏览 28提问于2020-08-11得票数 0
1回答
我试图改变我的网站上的汉堡菜单，每次它都位于一个具有可见性的浅色背景的部分的顶部。我试着使用交叉点观察器，解决方案似乎有效，但是它在滚动时触发得太早了，在实际部分与菜单相交之前。
我是一个新的交叉口观察者，我试图在网上找到一些有用的东西，但没有太多的运气。
const body = document.querySelector('body')
const sections = body.querySelectorAll('.change-menu')
const options = {
root: null,
浏览 17提问于2019-08-20得票数 0
回答已采纳
3回答
我正在尝试确定当前浏览器窗口的实际viewPORT大小。我试过：
窗、内重/内宽
document.documentElement.clientHeight/clientWidth
Document.body.clientWidth/clientWidth
全部返回整页大小，而不是查看区域。
我最终想要实现的是强制弹出菜单出现在屏幕上(在视口)。现在，当它显示时，它可能会显示在滚动下面，用户对此并不满意。我知道他们点击的地方的x，y。我只需要将其与查看区域的大小(与弹出窗口的大小)进行比较，看看它是否会脱离屏幕。
应该注意的是，页面显示在IFRAME中，所以如果我需要上升一
浏览 4提问于2010-06-24得票数 0
回答已采纳
是否可以使用GestureDetector --特别是InteractiveViewer的onTapUp手势- inside？
我知道InteractiveViewer本身使用GestureDetector并覆盖onScaleEnd、onScaleStart和onScaleUpdate方法来实现平移。然而，onTapUp没有被覆盖，这让我认为它有使用的潜力。
浏览 2提问于2020-12-29得票数 1
1回答
有没有一个解决方案来允许嵌套的iframe由于父HTML中的meta viewport设置而无法缩放。
我有一个iframe正在加载到一个外部移动网站，我不能编辑，该网站有以下元视口设置：
<meta name="viewport" content="width=640, user-scalable=no">
当站点加载到宽度为320的设备上时，它会将站点缩放0.5，但它也会缩放该站点上的嵌套iframe，有什么方法可以禁用/停止这种情况吗？
我有类似这样的东西，iframe中的嵌套h1被缩放了0.5
<html>
<head&
浏览 1提问于2019-04-18得票数 2
这可能是一个非常基本的问题，但是否有可能使一个孩子单独响应，当包含的父母div不是？
基本上，这就是我的html：
<div id="parent">
<div id="child"></div>
</div>
和css：
#child {
background-color: red;
height: 20%;
width: 50% !important;
}
#parent {
background-color: blue;
width: 500px;
he
浏览 1提问于2014-11-16得票数 1
回答已采纳
在Chrome中，书签栏是用command+shift+b禁用的。我是否应该一直在测试禁用此功能的站点，以使浏览器真正成为"100%"？或者，如果启用了这一功能，就会产生"vh 95%“吗？
浏览 17提问于2017-11-20得票数 2
回答已采纳
我正在尝试根据当前显示的部分将导航栏的背景更改为普通或浅色。然而，由于某种原因，代码在我告诉它删除的部分中添加了'nav-light‘类，在我告诉它添加的部分中删除了它。 使用基本代码here编写代码。但我不能在那里添加滚动捕捉效果，所以它不是100%真实的。 Live version，这样你就可以看到到底发生了什么。 导航更改为与背景匹配，而不是与之对比，最后一节"contact“什么也不做。 这是我拥有的全部代码： const sections = document.querySelectorAll("section");
const navbar = d
浏览 14提问于2021-09-06得票数 0
1回答
我想要加载一个类似于实际大小的图像，这意味着图像的大小是10 5cm\5cm，所以它将在所有平台上保持这样的大小，
我尝试了位置绝对和所有这些东西，但大小变化在其他平台(相同的浏览器..)
f12 > ctrl+shift+m显示的大小相同，但在真实手机中却并非如此
谢谢!
浏览 0提问于2021-01-02得票数 1
2回答
如何使浮式div响应
、、、、
我有一个以浮动div编码的寄存器页。然而，它并没有以响应的方式完全加载。我想做一个固定的高度，以确保当用户查看不同的设备时，背景色#ebebeb将是固定的。不幸的是，当我试图改变身高的百分比时，这并没有什么不同。
css
.modaloverlay .regmodal {
background-color: #ebebeb;
height: 100%;
position: relative;
margin: 0 auto;
-webkit-overflow-scrolling: touch;
}
@media (min-width: 60em) {
浏览 1提问于2015-11-04得票数 0
回答已采纳
CSS中有没有一种方法可以让字体大小根据屏幕缩放级别动态改变(调整)？
假设在普通显示器上我想使用16px字体。
但是当页面在HDTV中打开时，它是1080P屏幕，显示设置scale = 150%，我想字体变成，比如说12px？
这可行吗？我正在使用bootstrap，不确定这是否相关。
浏览 0提问于2018-11-16得票数 0
1回答
在浏览教程时，我看到使用了Ogre::Camera::getCameraToViewportRay方法。我在试着理解它是做什么的。
首先，我想象一个视口，被放置在3D场景中的某个地方，比方说电视对象的屏幕上。我可以很容易地想象如何将视口上的2D坐标转换为场景的3D坐标，然后从相机位置点生成光线通过VP上的点。
但我不能理解当副总裁在RenderWindow上(在我的显示器上)时是如何做到的。我的意思是，渲染窗口在场景中的什么地方，渲染窗口在场景中的VP上的点在哪里？如何将渲染窗口的VP上的点转换为场景的3D点？
谢谢你的回答！
浏览 0提问于2013-03-15得票数 1
回答已采纳
1回答
我正在为智能手机创建下面的布局。iPhone、安卓和黑莓是主要目标。无论是纵向还是横向，布局都将保持不变。对于景观，它将缩放到宽度。我想要做的是定位和调整文本的大小，而不管屏幕方向是在相同的相对位置。灰色方框表示图像。我想知道的是，在这种情况下，是否有任何特定的css单位，vw，em或%，有任何优势？
浏览 1提问于2013-02-14得票数 2
回答已采纳
2回答
我有以下的DIVs：
<div class="tckLeftHolder">
<div class="tckLeftContents">
<span>URGENT CARE WAIT</span>
</div>
</div>
CSS：
.tckLeftContents
{
text-align: center;
width: 90%;
padding: 0 0 0 10%;
height: 35px;
overflow:
浏览 3提问于2014-10-07得票数 3
回答已采纳
我想要一个相对于我的窗口大小的div比例，不管是因为我是在移动上还是我在缩放浏览器。但是，当我试图将div的大小设置为
div {
width: 80%;
height: 50%;
background-color: grey;
}
它不起作用。我已经阅读过了，我似乎需要定义一个参考div，但这不会使div扩展到屏幕上。我认为<meta>标记可以修复一些问题，但是我在这个项目中使用了codepen.io，我不知道我是否可以包含它，因为他们唯一需要的html是身体中的任何东西。
浏览 2提问于2020-09-23得票数 0
回答已采纳
1回答
我有一个网站，其中包含一个标题图像，我想适应70%的屏幕高度在所有屏幕和剩余的空间，我想打印一些文本。
我应该使用javascript还是应该使用媒体查询？
在哪里可以找到必须编写媒体查询的标准高度参数？我找到了基于width 的标准分辨率。
浏览 4提问于2015-08-12得票数 1
回答已采纳
只要观察到的元素被显示或隐藏(当达到阈值时)，就会调用Intersection Observer回调函数。 那么我能知道元素是即将消失还是即将出现吗？
浏览 24提问于2019-06-11得票数 0
这样怎么了？：
HTML：
<iframe onload="scrollme(this)" src="somesite.com"></iframe>
Javascript：
function scrollme(ob) {
o.scrollTop = 100;
}
浏览 1提问于2010-08-24得票数 0
我的网页上有两个iframe。两者都在底部有一个flex-direction:列容器。这两个容器都在一个灵活的方向上:行容器。 我试图在对应的iframe视频上实现两段文字，但我遇到了一些使用iframe的棘手业务。 我的iframe是position: absolute；而我的容器是position: relative；但是，当我调整大小时，同一容器中的视区文本和容器外的文本都落在iframe后面，变得隐藏起来。 在我的手机@media中，这是完美的。class="quest-news“中的ext被固定在iframe的底部，并随着iframe尺寸的增加而自然向下移动，但是在我的ta
浏览 6提问于2019-01-04得票数 0
回答已采纳
我有一个嵌入内容的I-Frame。
import {HtmlElement, Link, Section} from 'cx/widgets';
import Controller from './Controller'
export default <cx>
<h2 putInto="header">
Home
</h2>
<Section mod="card" controller={Controller}>
<iframe
浏览 0提问于2018-03-28得票数 1
随着宽度的减小，我一直试图增加div的高度。这使得所有的文本都能更好地融入，而不是流出来。没有js就能做到这一点吗？
width: 100%;
height: 29vw;
大众汽车的高度随着宽度的减小而减小。(我需要完全相反的行为。)宽度下降-高度上升)我已经尝试使用负大众扭转的效果，而不是运气。
谢谢!
浏览 4提问于2016-03-25得票数 10
回答已采纳
1回答
我试着在覆盖整个页面的页面上使用iframe。如下图所示，它的高度和宽度不是100%。有什么问题吗？
<iframe style="border: solid 0px;" id="iframe" src="https://www.bing.com/search?q=" width="100%" height="100%">`
浏览 2提问于2022-01-15得票数 0
1回答
作为我第一次尝试编程，我一直在用C#构建一个游戏引擎，我想用它来更全面地理解我需要知道如何解决的问题。
我目前正在研究的引擎的一部分是碰撞检测。我正在研究的模式是一个基于图像的主动碰撞系统。
角色有一个位置(XNA矩形)，背景是2个纹理，角色有一个Vector2运动属性。1是显示纹理，另一个是第一个纹理中碰撞区域的双颜色贴图。我显示纹理1，并在加载背景时使用纹理的GetData例程将纹理2加载到Color[]数组中。输入解析例程不会直接更改位置，它会添加到运动属性中。
因此，每次更新:检查输入解析器，并添加到动作Vector2。比较球员的位置。X/Y沿每个表面的位置。宽度/高度与运动的方向。如
浏览 0提问于2012-07-26得票数 0
回答已采纳
1回答
我很难弄明白这点。我有一个负责任的网站，我试着用Iframe来称呼它。它在桌面上工作得很好，但在移动设备上却显得太少了。
<iframe src="https://religious-freedom.herokuapp.com"></iframe>
CSS
iframe:focus {
outline: none;
}
iframe {
margin: none;
border: 0;
width: 10
浏览 5提问于2016-08-31得票数 2
回答已采纳
我有一个布局任务，它需要如下所示：
我试过这样做，到目前为止，它看起来是这样的：
我有困难调整徽标，就像它是要求在分配和第四div，当你从右边数是不伸展为2 div。
作业的第二部分看起来需要如下所示：
我不知道如何做到这一点，也不知道如何根据任务要求的具体调整来调整它的大小。
下面是我的html和css：
.header {
display: grid;
border: crimson 3px solid;
grid-row-gap: 1em;
height: auto;
}
.fantasy {
margin-left: 400px;
}
.content
浏览 1提问于2021-10-18得票数 0
回答已采纳
当我在iframe中应用CSS媒体查询时，它不会受到影响。下面是我的HTML文件。
mainpage.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Sample Page</title>
<style>
@media screen and (max-widt
浏览 4提问于2022-08-04得票数 0
回答已采纳
什么单位或方法是最好的(或至少是好的！)使用相对于屏幕尺寸的测量方法？我把这个问题限制在移动设备上，我怀疑这可能会影响到答案。因此，我会将样式包装在@media (hover:none), (hover:on-demand) { }中。
浏览 0提问于2020-08-24得票数 3
4回答
我正在从事一个项目，其中包括几个可拖放的div，它使用jQuery的约束功能，以帮助用户避免隐藏在郊区的偏离div。
现在，我得到了约束的全屏幕尺寸：
var width = window.screen.availWidth;
var height = window.screen.availHeight;
这和我想要的很接近。但是，由于所有浏览器的顶部都有选项卡和搜索输入行，而且通常底部还有一些其他内容，所以我得到的约束比实际的视图端口更大。然后，您需要获取视图端口维度：
$(window).height();
$(window).width();
嗯，这是接近，但它不是100%，因为如果用户
浏览 5提问于2017-03-16得票数 5
回答已采纳
1回答
我是CSS的新手，我想把输入放在页面的中间，而不管左边的按钮是什么，
站点必须响应。
我的CSS只将它们定位在最上面的中心，但是如何根据我的选择设置top？(top不会在这里工作)
display: 'flex',
justifyContent: 'center',
display: 'flex'阻塞“电子邮件地址”(第3条)输入的CSS display: 'block'，如何将其修复到下面?
email: {
width: 'auto',
display: 'block'
浏览 0提问于2021-08-18得票数 1
回答已采纳
考虑这个包含几个项目的flexbox容器。一些带有.hide-on-overflow标记的随机文件 <div id="container">
<div class="item">Item 1 </div>
<div class="item hide-on-overflow">Item 2 </div>
<div class="item hide-on-overflow">Item 3 </div>
<div class=&#
浏览 26提问于2020-10-27得票数 1
回答已采纳
根据，我尝试以以下方式使用viewport单元，以自动放大大监视器上的一个小页面：
/* automatically magnify business-card-style page in large viewports */
@media (min-width: 50em) and (min-height: 64em) {
/* start with 100% at 50em, we'll have 150% magnification at 75em */
html {font-size: 2vmin;}
}
然而，当在Google上测试时，它使缩放功能大部分停止工作。
这
浏览 2提问于2015-05-12得票数 8
我正在使用iframe将我在fliphtml5上创建的动画书添加到网站。动画书在桌面上看起来很棒，但在移动设备上不能正确显示。在移动设备上，它只显示动画书的一部分。 不知道是否有代码条件语句可以添加到iframe中，这样动画书就会以一种大小显示桌面，如果是移动设备，则会隐藏桌面，并以适合移动设备的任何大小显示。 提前感谢您的帮助。
浏览 19提问于2021-01-14得票数 0
3回答
我试图在设计中使用em-单位，而不是px，这样它就可以很好地跨越屏幕/设备/等等。
我看到的是，当用em-单位来定义非字体的东西，比如“边距”或“填充”时，当我在同一元素中改变字体大小时，它会改变非字体元素。例如：
header {
font-size: 1em; # is default
margin: 1em; # will be 16pt
}
vs
div {
font-size: 2.5em;
margin: 1em; # is now 40pt?
}
所以我的问题是：
对于非字体元素，-em单元应该这样做吗？(我想是的，但只是检查一下.)
如
浏览 1提问于2016-03-17得票数 0
回答已采纳
1回答
我已经读过，如果我不初始化它，OpenGL使用默认的相机。
这个相机是什么配置的？我已经尝试了一些基本的三角形，它看起来像在0,0,1面对0,0,0，我假设向上向量是0,1,0。
有人能告诉我这是否正确吗？是否有任何方法来改变默认的相机设置？
浏览 2提问于2020-04-14得票数 0
回答已采纳
我今天要问的问题是，如何使用百分比来表示divs中的导航中的字体大小，以便使这些divs完全适合导航？我通常使用像素，并且知道如何使用px来实现这一点，但是我想学习如何使用百分比，这样我的网页就可以在不同大小的屏幕上适当调整大小。
HTML：
<html lang="en">
<head>
<title>The Broker</title>
<meta charset="utf-8">
<meta content="Real Esta
浏览 5提问于2016-12-04得票数 0
3回答
目前工作在我的第一个高度响应的网站。我已经完成了一些关于这个主题的基本教程，尽管我经常注意到它们依赖于稍微老一点的移动设备，并根据屏幕大小属性通过@media切换设计。
现在我们有了移动设备，在6“屏幕上有相同的FullHD分辨率，就像在24英寸的显示器上.所以这是不可能的。
那么我能用什么来正确地缩放文本和菜单之类的东西呢？我不想在任何地方使用百分比值。
我的直觉想法是计算一个参考大小，我知道它在屏幕上总是有相同的大小。或者至少有什么东西能给我一些如何调整尺寸的提示。
为此，我尝试使用CSS中的"em“度量，方法是创建一个具有此大小的元素，然后通过Jquery度量它的高度，因为根据我
浏览 2提问于2015-06-26得票数 0
回答已采纳
1回答
我想知道是否有可能使div响应，同时使其内容在特定维度(最大/分钟高度)内滚动。
这是我的尝试
当宽度响应时，高度保持不变(虽然我希望它是100 remains和400 400px )。
.wrapper {
overflow: auto;
max-height: 400px;
width: 50%;
}
.content {
overflow-y: auto;
}
浏览 3提问于2015-08-22得票数 2
如果我将位置设为绝对位置，它会在较大的屏幕上向上移动，并在其下方留下空白。
<div class="footer">
<footer id="footer">Brought into existence by yours truly</footer>
</div>
.footer {
background-color: rgb(177, 74, 197);
text-align: center;
font-family: 'Knewave';
color: rgb(114, 245, 190)
浏览 0提问于2019-01-09得票数 1
我有
您会注意到主包装器是1042px (# main )。然后我在宽度为100%的容器周围添加了#。我这样做是因为页面的背景图像是巨大的宽度。
问题是如果浏览器水平调整为较小的大小...像这样说..700px宽(或者更小，就像在iPhone上一样)，当你向右滚动时，页眉和页脚都消失了，尽管#main包装器保持不变。
我看到其他一些人也有这个问题，但我不是CSS忍者，所以我不能在我的网站上复制解决方案-如果以前有人问过这个问题，我很抱歉。
谢谢!
浏览 0提问于2011-06-12得票数 3
回答已采纳
我正在尝试通过交叉观察器调用回调。
我希望target是style: "position: fixed"，并通过style.top移动它。
我还用style: "position: relative"指定了根元素，它是目标的祖先。
但是当目标和观察者相交时，回调函数不会被触发。
我是否遗漏了一些限制？
下面是我输入的内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title&
浏览 3提问于2018-03-21得票数 12
我使用Check My Links来验证网页是否有死链接，但有趣的是，对于相同的给定页面，请检查我的链接返回几个不同的测试结果。一个结果是183，另一个结果是221。唯一的区别是：
对于作为221返回的测试结果，将展开一个选项卡，而对于183，则没有展开选项卡。
有人知道为什么会这样吗？
FYI:检查我的链接是一个免费的谷歌Chrome扩展工具，爬行网页和寻找死链接。
📷
📷
浏览 0提问于2016-10-17得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
