当前位置: 首页 > news >正文

iframe 高さ 自動調整

iframeに異なるドメイン(クロスドメイン)のコンテンツを読み込んで高さを自動調節する方法 - みのるの備忘録

wordpress (親) 側の設定

<apex:iframe id="iframe" src="{!IF(isURL,Url, URLFOR($Resource.test))}" scrolling="no" width="100%"/>

<html>
<head>
    <title>親</title>
    <script src="js/jquery.js"></script>
    <script>
        window.addEventListener('message', function(e) {
        var iframe = $("#fugapage");
        var eventName = e.data[0];
        var data = e.data[1];
        switch(eventName) {
            case 'setHeight':
                iframe.height(data);
                break;
            }
        }, false);
    </script>
</head>
<body>
    <iframe id="fugapage" src="http://fuga.com/" width="100%" height="auto" " frameborder="0" scrolling="no"></frame>
</body>
</html>

埋め込みたい別ドメインのページ (子)

fuga.com

<html>
    <head>
        <title>子</title>
        <script type="text/javascript">
        window.onload = function() {
            var height = document.getElementsByTagName("html")[0].scrollHeight;
            window.parent.postMessage(["setHeight", height], "*");
        }
        </script>
    </head>
    <body>
    ・・・
    </body>
</html>

相关文章:

  • 【网络安全 | 漏洞挖掘】我如何通过Cookie Manipulation发现主域上的关键PII?
  • Linux系统上同时打印到物理打印机并生成PDF副本方法研究
  • 【分布式理论14】分布式数据库存储:分表分库、主从复制与数据扩容策略
  • 汽车零部件开发应该具备哪些编程思维?
  • 内核崩溃分析
  • UMLS数据下载及访问
  • 使用 Python 将爬取的内容保存到 Excel 表格
  • DeepSeek的100个应用场景
  • 长文档处理痛点:GPT-4 Turbo引文提取优化策略与替代方案讨论
  • express + vue 部署宝塔
  • 从月牙定理看古希腊数学的奇妙突破
  • 【Python学习 / 6】面向对象编程(OOP)
  • C++中变量与容器的默认初始化:0的奥秘
  • URL解码(unquote)判断与操作教程
  • 1、Window Android 13模拟器 将编译的映像文件导入Android Studio
  • python如何从路径中获取文件名
  • Helm快速开始
  • Ubuntu 下 nginx-1.24.0 源码分析 - ngx_pnalloc函数
  • vue3-03初学vue3中的配置项setup(Composition API (组合API组件中所用到的:数据、方法等,均要配置在setup中)
  • 2013年下半年软件设计师上午题考察知识点及其详细解释(附真题及答案解析)
  • 印巴战火LIVE丨“快速接近战争状态”:印度袭击巴军事基地,巴启动反制军事行动
  • 马云再次现身阿里打卡创业公寓“湖畔小屋”,鼓励员工坚持创业精神
  • 央行设立服务消费与养老再贷款,额度5000亿元
  • 青年与人工智能共未来,上海创新创业青年50人论坛徐汇分论坛举办
  • 戴维·珀杜宣誓就任美国驻华大使
  • 印对巴军事打击后,巴外交部召见印度驻巴临时代办