You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何根据iFrame尺寸加载对应填充横幅？代码故障排查

avatar
API 探路者
2026-8-22
问题描述

我在广告网络中设置了填充横幅，当无其他可用横幅时，从/adload.html加载该填充横幅，并编写了对应代码，但目前页面会显示所有横幅，并未隐藏应隐藏的横幅，无法实现根据iFrame尺寸显示对应横幅的功能。

原始填充横幅页面代码：

<html>
    <body>
<script language="JavaScript">
if(top.location != self.location){
$(document).ready(function() {
// when to show the 468x60px div
    if($(window).width() == 468) && ($(window).length() == 60 {
        $('#468x60').show();
    } else {
        $('#468x60').hide();
    }
    //when to show the 728px div
    if($(window).width() == 728) {
        $('#728').show();
    } else {
        $('#728').hide();
    }
    //when to show the 250px div
    if($(window).width() == 250) {
        $('#250').show();
    } else {
        $('#250').hide();
    }
    //when to show the 200px div
    if($(window).width() == 200) {
        $('#200').show();
    } else {
        $('#200').hide();
    }
    //when to show the 336px div
    if($(window).width() == 336) {
        $('#336').show();
    } else {
        $('#336').hide();
    }
    //when to show the 300x250px div
    if($(window).width() == 300) && ($(window).length() == 250) {
        $('#300x250').show();
    } else {
        $('#300x250').hide();
    }
    //when to show the 120px div
    if($(window).width() == 120) {
        $('#120').show();
    } else {
        $('#120').hide();
    }
    //when to show the 160px div
    if($(window).width() == 160) {
        $('#160').show();
    } else {
        $('#160').hide();
    }
    //when to show the 300x600 div
    if($(window).width() == 300) && ($(window).length() == 600) {
        $('#300x600').show();
    } else {
        $('#300x600').hide();
    }
    //when to show the 240px div
    if($(window).width() == 240) {
        $('#240').show();
    } else {
        $('#240').hide();
    }
    //when to show the 970x90px div
    if($(window).width() == 970) && ($(window).length() == 90) {
        $('#970x90').show();
    } else {
        $('#970x90').hide();
    }
    //when to show the 970x250px div
    if($(window).width() == 970) && ($(window).length() == 250) {
        $('#970x250').show();
    } else {
        $('#970x250').hide();
    }
    //when to show the 320x100px div
    if($(window).width() == 320) && ($(window).length() == 100) {
        $('#320x100').show();
    } else {
        $('#320x100').hide();
    }
    //when to show the 320x50px div
    if($(window).width() == 320) && ($(window).lenth() == 50) {
        $('#320x50').show();
    } else {
        $('#320x50').hide();
    }
    //when to show the 600px div
    if($(window).width() == 600) {
        $('#600').show();
    } else {
        $('#600').hide();
    }
    //when to show the 468x120px div
    if($(window).width() == 468) && ($(window).length() == 120) {
        $('#468x120').show();
    } else {
        $('#728').hide();
    }
});
};
</script>
<div id="468x60">468x60</div>
<div id="728">728x90</div>
<div id="250">250x250</div>
<div id="200">200x200</div>
<div id="336">336x280</div>
<div id="300x250">300x250</div>
<div id="120">120x600</div>
<div id="160">160x600</div>
<div id="300x600">300x600</div>
<div id="240">240x400</div>
<div id="970x90">970x90</div>
<div id="970x250">970x250</div>
<div id="320x100">320x100</div>
<div id="320x50">320x50</div>
<div id="600">600x200</div>
<div id="468x120">462x120</div>
    </body>
</html>

嵌入iFrame的函数代码：

function r(t, e, i) {
            //console.log(e);
            if (e.data) {
                var n = p.config.click_url + "/?" + e.data.link,
                    o = '<div id="' + e.data.hash_id + '" class="adflex-b-reset adflex-b-box adflex-dsa">
                <div style="position: relative; display: inline-block; padding: 0; margin: 0;"> 
                    <a href="' + n + '" class="adflex-b-reset" target="_blank">
                    <img class="adflex-b-reset" 
                         src="' + e.data.img_url + '"
                         style="width: ' + e.data.img_width + 'px; max-width: 100% !important;">
                    </a>
                    ' + f(i) + "
                    </div>
                </div>";
                document.getElementById(t).innerHTML += o
            } else /*1 == e.params.third_party_status && e.params.third_party_code &&*/ (document.getElementById(t).innerHTML += /*e.params.third_party_code*/"<iframe src='//internal.webadtopia.com/adload.html' scrolling='no' style='width:"+e.banner_size[0]+"px; height:"+e.banner_size[1]+"px; border:0px; padding:0; overflow:hidden; background-color: transparent;'></iframe>", p.runJs(t))
        }

代码问题排查

  1. 语法错误导致逻辑完全失效

    • 多个if语句括号位置错误，比如if($(window).width() == 468) && ($(window).length() == 60 {，正确语法应为if(条件1 && 条件2) {
    • 把获取高度的height()误写为length()，甚至出现拼写错误lenth()
    • 这些语法错误会导致整个JS代码块无法执行，所有横幅默认保持显示状态

  2. 错误的尺寸获取方式

    • 使用$(window).width()/height()获取的是iframe所在父窗口的尺寸，而非iframe自身的宽高。在iframe内部，需要通过window.frameElement获取当前iframe元素，再读取它的样式宽高

  3. 默认显示状态未设置

    • 所有横幅div默认是显示状态，即使JS逻辑正常，初始加载时也会先显示再隐藏，应该给所有横幅添加display: none的默认样式

  4. 逻辑错误

    • 最后一个else分支错误地隐藏了#728，而非目标横幅#468x120

修正后的代码

填充横幅页面（adload.html） 

<html>
    <body>
        <style>
            .ad-banner { display: none; }
        </style>
        <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
        <script>
            if(top.location != self.location){
                $(document).ready(function() {
                    // 获取当前iframe的实际宽高
                    const iframe = window.frameElement;
                    const width = iframe ? parseInt(iframe.style.width) : $(window).width();
                    const height = iframe ? parseInt(iframe.style.height) : $(window).height();

                    // 定义横幅尺寸与ID的映射关系，简化重复逻辑
                    const bannerMap = [
                        { width: 468, height: 60, id: '468x60' },
                        { width: 728, height: 90, id: '728' },
                        { width: 250, height: 250, id: '250' },
                        { width: 200, height: 200, id: '200' },
                        { width: 336, height: 280, id: '336' },
                        { width: 300, height: 250, id: '300x250' },
                        { width: 120, height: 600, id: '120' },
                        { width: 160, height: 600, id: '160' },
                        { width: 300, height: 600, id: '300x600' },
                        { width: 240, height: 400, id: '240' },
                        { width: 970, height: 90, id: '970x90' },
                        { width: 970, height: 250, id: '970x250' },
                        { width: 320, height: 100, id: '320x100' },
                        { width: 320, height: 50, id: '320x50' },
                        { width: 600, height: 200, id: '600' },
                        { width: 468, height: 120, id: '468x120' }
                    ];

                    // 遍历匹配，显示对应尺寸的横幅
                    bannerMap.forEach(item => {
                        if (width === item.width && height === item.height) {
                            $('#' + item.id).show();
                        }
                    });
                });
            }
        </script>
        <div id="468x60" class="ad-banner">468x60</div>
        <div id="728" class="ad-banner">728x90</div>
        <div id="250" class="ad-banner">250x250</div>
        <div id="200" class="ad-banner">200x200</div>
        <div id="336" class="ad-banner">336x280</div>
        <div id="300x250" class="ad-banner">300x250</div>
        <div id="120" class="ad-banner">120x600</div>
        <div id="160" class="ad-banner">160x600</div>
        <div id="300x600" class="ad-banner">300x600</div>
        <div id="240" class="ad-banner">240x400</div>
        <div id="970x90" class="ad-banner">970x90</div>
        <div id="970x250" class="ad-banner">970x250</div>
        <div id="320x100" class="ad-banner">320x100</div>
        <div id="320x50" class="ad-banner">320x50</div>
        <div id="600" class="ad-banner">600x200</div>
        <div id="468x120" class="ad-banner">462x120</div>
    </body>
</html>

嵌入iFrame的函数（修正字符串拼接语法） 

function r(t, e, i) {
    if (e.data) {
        var n = p.config.click_url + "/?" + e.data.link,
            o = '<div id="' + e.data.hash_id + '" class="adflex-b-reset adflex-b-box adflex-dsa">' +
                 '<div style="position: relative; display: inline-block; padding: 0; margin: 0;">' +
                     '<a href="' + n + '" class="adflex-b-reset" target="_blank">' +
                         '<img class="adflex-b-reset" src="' + e.data.img_url + '" style="width: ' + e.data.img_width + 'px; max-width: 100% !important;">' +
                     '</a>' + f(i) +
                 '</div>' +
             '</div>';
        document.getElementById(t).innerHTML += o;
    } else {
        const iframeHtml = '<iframe src="//internal.webadtopia.com/adload.html" scrolling="no" style="width:'+e.banner_size[0]+'px; height:'+e.banner_size[1]+'px; border:0px; padding:0; overflow:hidden; background-color: transparent;"></iframe>';
        document.getElementById(t).innerHTML += iframeHtml;
        p.runJs(t);
    }
}

内容的提问来源于stack exchange，提问作者Bernhard Alber

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起

产品介绍相关文档
相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起

产品介绍相关文档
火山引擎 最新活动
全面开放
Doubao-Seedance-2.5全新模型升级

模型再升级,30秒超长叙事, 模态参考扩容

HOT
方舟Codingplan

模型自由，工具不限，最新支持 Deepseek-V4 系列、GLM-5.3 系列

HOT
方舟Agent plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列

HOT
新用户特惠专场

大模型19元起，Al应用9.9元畅享，新人首购爆款尽享优惠

最近更新时间：2026.08.22 10:25:04