taoguya 2023-08-01 18:08 采纳率: 40%
浏览 32
已结题

使用iframe嵌入的网页,因为其经常性的顶部挂广告或者不挂广告导致高度经常变动,请问怎么解决?

自己的网页使用iframe嵌入了别的网页,已经设置好高度、宽度等,也达到了想要嵌入的某个网页的某个板块的效果。

但是被嵌入的网页,有时候最上方顶部挂广告有时候又不挂广告,导致设置好的高度经常变化,按照无广告设置好的高度,嵌入的页面显示刚刚好。但是被嵌入的网页顶部挂了广告,就导致被嵌入显示的某个位置下移,影响美观等。

iframe的高度默认好像是相对网页顶部来参考的,能不能设置为参考LOGO设置高度呢?因为想要嵌入的网页某板块的高度与其LOGO的相对位置不变。
请问如何解决?

img

  • 写回答

16条回答 默认 最新

  • taoguya 2023-08-02 00:37
    关注

    img


    看图

    评论
  • 一头小绵羊 2023-08-02 01:01
    关注
    获得1.20元问题酬金

    有无代码

    评论
    taoguya 2023-08-02 01:10

    代码我评论区发不出来

    回复
    一头小绵羊 回复 taoguya 2023-08-02 02:03

    加微信 rojie99 或者 用 https://lightly.teamcode.com/dashboard 分享代码

    回复
    一头小绵羊 回复 taoguya 2023-08-02 02:31

    https://d95d9efb-preview.lightly.teamcode.com/iframe/index.html?server=preview&dcsId=d95d9efb&token=oizfl_6GQPiMTGst08H7sQ 这个链接是效果demo,简单的模拟了一下你的需求,不断的刷新网页可以看到 iframe 上面的标签会随机显示隐藏,
    https://b8121909a8-share.lightly.teamcode.com/ 这个链接是代码

    回复
  • yy64ll826 2023-08-04 02:48
    关注
    获得1.20元问题酬金
    评论
  • 阳光宅男xxb 2023-08-09 02:44
    关注
    获得2.25元问题酬金

    主要在于如何让你的iframe的高度能够适应被嵌入网页的广告变化。可以看下是否可以使用JavaScript或jQuery来动态调整iframe的高度。
    使用window.resizeTo方法来调整iframe的尺寸,或者通过定期检测iframe内部的元素尺寸来动态设置iframe的高度,比如每500毫秒检测一次iframe内部元素的高度,并相应地调整iframe的高度

    评论
  • GIS工具开发 2023-08-09 06:50
    关注
    获得1.50元问题酬金

    外层套一个div,然后动态调整高度

    评论
  • 会跑的小鹿 2023-08-09 09:03
    关注
    获得0.90元问题酬金

    用js来动态调整iframe高度

    评论
  • _长银_ 2023-08-01 23:03
    关注

    参考GPT:
    您可以通过以下方法解决iframe高度变化的问题,使其参考被嵌入页面的LOGO高度:

    1. 使用JavaScript动态调整iframe高度:
      在嵌入的网页中,您可以使用JavaScript来获取被嵌入网页中LOGO元素的高度,并将iframe的高度设置为LOGO元素的高度。这样即使被嵌入的页面顶部有广告,也能保证iframe的高度始终与LOGO元素的高度相同,从而避免影响美观。

      <iframe src="your_embedded_page_url" id="my-iframe" frameborder="0" scrolling="no"></iframe>
      <script>
        const iframe = document.getElementById("my-iframe");
        const logoElement = document.getElementById("logo"); // 替换成您需要参考的LOGO元素的ID或选择器
      
        // 设置iframe高度为LOGO元素的高度
        iframe.style.height = logoElement.offsetHeight + "px";
      
        // 监听窗口大小变化,以便在窗口大小变化时重新调整iframe高度
        window.addEventListener("resize", function() {
          iframe.style.height = logoElement.offsetHeight + "px";
        });
      </script>
      
    2. 使用CSS设置iframe高度为100%:
      另一种方法是使用CSS将iframe的高度设置为100%。这样iframe将自动根据其父元素的高度进行调整。确保将iframe的父元素高度设置为适当的高度,以保证iframe内容在该区域内正常显示。

      <div style="height: 300px;"> <!-- 替换为您需要的固定高度 -->
        <iframe src="your_embedded_page_url" frameborder="0" scrolling="no" style="width: 100%; height: 100%;"></iframe>
      </div>
      

    请注意,第一种方法需要在被嵌入的网页中使用JavaScript,而第二种方法仅通过CSS在父元素中设置高度即可。您可以根据实际需求选择合适的方法来解决iframe高度变化的问题。

    评论
    taoguya 2023-08-02 00:55

    这个是A网页上的代码,请问你说的方法一怎么添加别的代码解决问题?
    或者能否添加好发给我,我纯小白,使用的拖拽式云建站,代码基本看不懂,谢谢

    回复
    taoguya 2023-08-02 00:57

    回复
    taoguya 2023-08-02 01:00

    logo的ID或选择器是哪个代码?是 div class="p-r level-1-logo-box" 这个吗?

    回复
  • 夜郎king 2022博客之星IT其它领域TOP 12 2023-08-02 00:06
    关注

    可以采用js获取iframe的页面高度来动态设置高度,应该就能解决问题。

    评论
  • Mr.小朱同学 2023-08-02 00:29
    关注

    iframe外面套一个div,然后给div设置高度,设置overflow属性,当内容超过 div 高度时候,设置显示滚动条即可。

    评论
  • 玥轩_521 2023-08-02 02:13
    关注

    援引GPT回答:
    要解决这个问题,您可以使用JavaScript来动态调整iframe的高度,以适应被嵌入网页的内容变化。

    首先,您需要给iframe标签一个唯一的id,以便在JavaScript中引用它。例如:

    <iframe id="myFrame" src="被嵌入的网页地址" width="100%" height="500px" frameborder="0"></iframe>
    

    接下来,您可以使用JavaScript来获取被嵌入网页的内容高度,并将其应用于iframe的高度。您可以使用以下代码:

    <script>
        function resizeIframe() {
            var iframe = document.getElementById("myFrame");
            var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
            var contentHeight = iframeDocument.documentElement.scrollHeight;
            iframe.style.height = contentHeight + "px";
        }
    
        // 在页面加载完成后调用resizeIframe函数
        window.onload = resizeIframe;
    
        // 在被嵌入的网页内容加载完成后调用resizeIframe函数
        var iframe = document.getElementById("myFrame");
        iframe.onload = resizeIframe;
    </script>
    

    这样,当被嵌入的网页内容加载完成时,会自动调整iframe的高度以适应内容的变化。这样无论是否有广告,都可以保持嵌入的网页某个板块的位置不变。

    请注意,由于安全策略限制,您只能在同源的情况下访问iframe内部的内容。如果被嵌入的网页与您的网页不属于同一个域名,那么您将无法获取到iframe内部的内容高度,这种情况下无法动态调整iframe的高度。

    评论
  • giser@2011 2023-08-03 06:03
    关注

    一、使用 JavaScript 动态调整 iframe 的高度:在父网页中,可以通过 JavaScript 监听 iframe 内容的加载完成事件,然后获取 iframe 内容的高度,并将其赋值给 iframe 的高度。这样可以保持 iframe 的高度和内容的高度一致。示例代码如下:

    img

    二、使用 CSS 控制 iframe 的高度:在父网页中,通过为 iframe 添加一个容器,在容器中设置一个固定或相对的高度,并将 iframe 的高度设置为 100%。这样,无论被嵌入的网页是否有广告或高度变化,都会自动适应容器的高度。示例代码如下:

    img

    评论 编辑记录
  • 代码调试大神 2023-08-04 10:02
    关注

    引用GPT作答:
    在iframe中,确实无法直接设置高度相对于内嵌网页的某个元素,比如LOGO。但是,你可以通过其他方式解决这个问题:

    1. 动态调整内嵌网页高度:可以通过JavaScript来实时获取内嵌网页的实际高度,然后再将该高度应用到iframe的高度属性上。这样无论被嵌入网页是否有广告,都可以自动适应高度,确保显示的板块完整且美观。
    <script>
        function adjustIframeHeight() {
            var iframe = document.getElementById('your-iframe-id');
            var iframeBody = iframe.contentDocument || iframe.contentWindow.document;
            var iframeHeight = iframeBody.documentElement.scrollHeight;
    
            iframe.style.height = iframeHeight + 'px';
        }
        window.addEventListener('resize', adjustIframeHeight);
        adjustIframeHeight();
    </script>
    

    在这段代码中,your-iframe-id是你嵌入的iframe元素的id。adjustIframeHeight函数将获取iframe内部内容的实际高度并调整iframe的高度,同时在窗口大小改变时也会重新调整高度。

    1. 使用Intersection Observer API:Intersection Observer API可以观察元素是否进入或离开浏览器的可视区域。你可以使用该API来监听被嵌入网页顶部的广告元素是否可见,一旦发生变化,则调整iframe高度。
    <script>
        var observer = new IntersectionObserver(function(entries) {
            entries.forEach(function(entry) {
                if (entry.target.id === 'ad-banner-id') {
                    var iframe = document.getElementById('your-iframe-id');
                    var iframeHeight = iframe.clientHeight;
    
                    if (entry.isIntersecting) {
                        // 广告可见时的处理
                        iframe.style.height = (iframeHeight + entry.boundingClientRect.height) + 'px';
                    } else {
                        // 广告不可见时的处理
                        iframe.style.height = (iframeHeight - entry.boundingClientRect.height) + 'px';
                    }
                }
            });
        });
    
        var adBanner = document.getElementById('ad-banner-id');
        observer.observe(adBanner);
    </script>
    

    在这段代码中,ad-banner-id是被嵌入网页顶部广告元素的id,your-iframe-id是你嵌入的iframe元素的id。IntersectionObserver函数用于观察元素是否可见,根据广告元素的可见状态动态调整iframe的高度。

    使用以上方法,你可以动态调整iframe的高度以适应被嵌入网页的不同情况,确保所需板块的高度与LOGO的相对位置不变。

    展开全部

    评论
  • 大同大 2023-08-07 04:39
    关注

    要解决这个问题,你可以尝试以下几种方法:

    1. 使用JavaScript动态调整iframe的高度:你可以使用JavaScript来获取被嵌入网页的高度,然后将这个高度应用到iframe上。这样,无论被嵌入的网页是否有广告,都可以动态调整iframe的高度以适应内容。你可以使用以下代码示例:
    <script>
        function resizeIframe(obj) {
            obj.style.height = obj.contentWindow.document.documentElement.scrollHeight + 'px';
        }
    </script>
    
    <iframe src="被嵌入的网页URL" onload="resizeIframe(this)" scrolling="no"></iframe>
    
    1. 使用Intersection Observer API:Intersection Observer API可以观察元素是否进入或离开视口,并触发相应的回调函数。你可以使用该API来监测被嵌入网页中广告的出现与消失,并相应地调整iframe的高度。以下是一个示例代码:
    <script>
        const observer = new IntersectionObserver(entries => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    // 广告出现,调整iframe高度
                    document.querySelector('iframe').style.height = '新的高度';
                } else {
                    // 广告消失,恢复原始iframe高度
                    document.querySelector('iframe').style.height = '原始高度';
                }
            });
        });
    
        observer.observe(document.querySelector('广告元素的选择器'));
    </script>
    
    <iframe src="被嵌入的网页URL"></iframe>
    

    以上代码只是示例,你需要根据实际情况进行调整和修改。

    希望这些方法能够帮助你解决问题!

    展开全部

    评论
  • 大黄鸭duck. 2023-08-07 18:29
    关注

    在使用iframe嵌入网页时,经常会遇到顶部广告页面高度不稳定的问题,这会导致页面的显示效果受到很大的影响。为了解决这个问题,我们可以采取以下几种方法:

    方法一:使用JavaScript动态调整高度

    在父页面中,使用JavaScript动态获取iframe所嵌入页面的高度,并根据其高度来调整iframe的高度。这种方法的实现过程如下:

    1. 在父页面中,通过JavaScript获取iframe标签的引用。
    var iframe = document.getElementById('iframe-id');
    
    1. 等待iframe页面加载完成后,获取iframe页面的高度。
    iframe.onload = function() {
      var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
      var height = iframeDoc.body.scrollHeight;
    }
    
    1. 将获取的iframe页面高度赋值给iframe的高度。
    iframe.style.height = height + 'px';
    

    这种方法的优点是简单易实现,能够实时调整iframe的高度。但缺点是每次都需要等待iframe页面加载完成后再调整高度,会影响用户体验。

    方法二:使用MutationObserver监听iframe页面

    在父页面中,使用MutationObserver监听iframe页面的变化,并根据变化来动态调整iframe的高度。该方法的实现过程如下:

    1. 在父页面中,创建MutationObserver实例。
    var observer = new MutationObserver(function(mutations) {
      // 监听到iframe页面变化后的回调函数
    });
    
    1. 为目标iframe设置MutationObserver监听。
    var iframeDoc = iframe.contentWindow.document;
    observer.observe(iframeDoc, {
      childList: true,
      attributes: true,
      subtree: true
    });
    
    1. 在回调函数中获取iframe页面的高度并调整iframe的高度。
    var height = iframeDoc.body.scrollHeight;
    iframe.style.height = height + 'px';
    

    这种方法的优点是能够实时监听iframe页面的变化,并根据变化来动态调整iframe的高度,改善了用户体验。但缺点是实现比较复杂,需要兼容性较好的浏览器才能生效。

    方法三:与iframe页面合作设置高度

    在iframe页面中,使用JavaScript获取iframe所在父页面的引用,并通过postMessage方法向父页面发送页面高度信息。在父页面中,监听message事件,并根据接收到的信息来调整iframe的高度。该方法的实现过程如下:

    1. 在iframe页面中,获取父页面的引用。
    var parentWindow = window.parent;
    
    1. 在iframe页面中,将页面高度信息通过postMessage方法发送给父页面。
    var height = document.body.scrollHeight;
    parentWindow.postMessage({height: height}, '*');
    
    1. 在父页面中,监听message事件,并根据接收到的信息来调整iframe的高度。
    window.addEventListener('message', function(event) {
      var data = event.data;
      if (data.height) {
        iframe.style.height = data.height + 'px';
      }
    });
    

    这种方法的优点是能够实时调整iframe的高度,并且不需要等待iframe页面加载完成,兼容性也比较好。但缺点是需要与iframe页面合作来实现,需要对iframe页面进行一定程度的修改。

    综上所述,针对iframe嵌入页面高度不稳定的问题,我们可以采用多种方法来解决。根据实际情况选择合适的方法能够更好地改善用户体验。

    展开全部

    评论
  • Richard.sysout 2023-08-09 07:03
    关注

    当嵌入的网页通过 iframe 在你的页面中显示时,如果顶部广告或其他内容导致 iframe 的高度经常变动,你可以考虑以下解决方案:

    自适应高度:使用 JavaScript 监听 iframe 内容的高度变化,并动态调整 iframe 的高度以适应内容的变化。以下是一个示例代码:

    function autoResize() {
        const iframe = document.getElementById('your-iframe-id');
        if (iframe) {
            iframe.style.height = iframe.contentWindow.document.documentElement.scrollHeight + 'px';
        }
    }
    
    // 监听 iframe 内容的加载完成事件和窗口大小变化事件
    window.addEventListener('load', autoResize);
    window.addEventListener('resize', autoResize);
    

    确保将 'your-iframe-id' 替换为你的 iframe 元素的实际 ID。

    使用 Intersection Observer API:Intersection Observer API 可以检测到元素在视口中的变化情况。你可以使用这个 API 在 iframe 内容的顶部或底部插入一个占位元素,并监视其在视口中的可见性。当占位元素可见时,判断 iframe 内容高度发生变化,然后调整 iframe 的高度。

    使用 Mutation Observer:Mutation Observer 可以监视 DOM 的变化,并在变化发生时执行特定的操作。你可以使用 Mutation Observer 监视 iframe 内容的 DOM 变化,例如顶部广告元素的出现或消失,然后相应地调整 iframe 的高度。

    以上这些解决方案可以根据你的具体情况进行调整,并结合你所使用的页面结构和技术来实现。请记住,如果你嵌入的网页来自外部网站,需要遵守相关网站的使用规则和合法要求,并确保不会违反任何法律和隐私政策。

    评论
  • Minuw 2023-08-09 10:03
    关注

    参考newbing

    1. 使用JavaScript动态调整iframe的高度:在父页面中,使用JavaScript来获取被嵌入网页的实际高度,并将这个高度设置为iframe的高度。这样,无论被嵌入的网页是否有广告,都能保持适当的高度。你可以使用window.postMessage方法在父页面和被嵌入页面之间进行通信,以获取被嵌入页面的实际高度。

    2. 使用CSS的overflow属性:在父页面的样式中,将iframe的overflow属性设置为hidden,这样被嵌入的网页中超出iframe高度的内容将被隐藏。这样,即使被嵌入的网页有广告,也不会影响iframe的显示效果。

    3. 与被嵌入的网页合作:如果你有权限修改被嵌入的网页,可以与网页的开发者合作,让他们在网页中添加一个固定高度的容器或标记,然后你可以通过CSS或JavaScript来设置iframe的高度。

    评论
编辑
预览

报告相同问题?

问题事件

  • 系统已结题 8月9日
  • 修改了问题 8月2日
  • 创建了问题 8月1日

悬赏问题

  • ¥15 宝塔面板一键迁移使用不了
  • ¥15 求一个按键录像存储到内存卡的ESP32CAM代码
  • ¥15 如何单独修改下列canvas推箱子代码target参数?,插入图片代替其形状,就是哪个绿色的圆圈每关用插入的图片替代
  • ¥20 四叉树的创建和输出问题
  • ¥15 javaweb连接数据库,jsp文件加载不出来
  • ¥15 matlab关于高斯赛德尔迭代的应用编撰。(相关搜索:matlab代码|迭代法)
  • ¥15 损失匹配问题,求解答
  • ¥15 3500常用汉字书法体检测数据集下载
  • ¥15 odoo17在制造模块或采购模块良品与次品如何分流和在质检模块下如何开发
  • ¥15 Qt音乐播放器的音乐文件相对路径怎么写
手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部