JavaScript 处理Iframe自适应高度(同或不同域名下)

高洛峰

发布时间：2017-01-09 09:20:12

1497人浏览过

来源于php中文网

原创

1.同域名下iframe自适应高度的处理

当然此处我用的是Asp.Net MVC 此处src设置为路由结构

用到的就是iframe嵌套的页面加载完毕的时候，运用onload事件来获取嵌套在iframe中网页的高度，然后赋值给Iframe的高度即可。
2.跨域时Iframe高度自适应

在主页面和被嵌套的iframe为不同域名的时候，就稍微麻烦一些，需要避开JavaScript的跨域限制。 
原理：现有iframe主页面main.html、被iframe嵌套页面iframe.html、iframe中介页面agent.html三个，通过main.html（域名为http://www.ccvita.com）嵌套iframe.html（域名为：http://www.phpq.net），当用户浏览时执行iframe.html中的JavaScript代码设置iframeC的scr地址中加入iframe页面的高度，agent.html（域名为：http://www.ccvita.com）取得传递的高度，通过JavaScript设置main.html中iframe的高度。最终实现预期的目标。 

iframe主页面main.html 
[code] 
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
iframe主页面 
 
 
 
 

尾部

iframe嵌套页面iframe.html

 
 
被iframe嵌套页面 
 
文字









 
文字









 
文字









 
文字

iframe中介页面agent.html

论论App

AI文献搜索、学术讨论平台，涵盖了各类学术期刊、学位、会议论文，助力科研。

下载

立即学习“Java免费学习笔记（深入）”；

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
iframe中介页面

代码里，kimi可能路径表示不全
main.html 与 agent.html 是必须同一个域里
而iframe.html在另一个域

更多JavaScript 处理Iframe自适应高度(同或不同域名下)相关文章请关注PHP中文网！

让自动适配内容高度的原理与实现

javascript如何进行数据可视化_chart.js和d3.js该如何选择【教程】

如何根据评分范围动态分配不等长子区间并映射到消息数组

MongoDB 聚合：将二维数组转换为各子数组长度组成的一维数组

MongoDB 聚合：将二维数组转换为各子数组长度构成的一维数组

java速学教程(入门到精通)

java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

下载

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：js控制iframe的高度/宽度让其自适应内容下一篇：Iframe 自适应高度并实时监控高度变化的js代码

作者最新文章

实现一个 Java 版的 Redis

2018-05-30 13:56

Asp.net使用SignalR实现发送图片

2018-05-28 16:22

HTML5:使用Canvas实时处理Video

2018-05-28 17:58

最简单的微信小程序Demo

2018-05-30 10:20

Python构造自定义方法来美化字典结构输出

2018-05-29 10:33

html设置加粗、倾斜、下划线、删除线等字体效果示例介绍

2018-05-31 09:48

微信小程序：如何实现tabs选项卡效果示例

2018-05-29 15:01

微信小程序开发教程-App()和Page()函数概述

2018-05-28 16:19

python中pandas.DataFrame（创建、索引、增添与删除）的简单操作方法介绍

2018-05-29 15:23

详解python redis使用方法

2018-05-28 15:01

热门AI工具

DeepSeek

幻方量化公司旗下的开源大模型平台

AI 编程开发 AI 聊天问答

豆包大模型

字节跳动自主研发的一系列大型语言模型

AI 编程开发 AI大模型

通义千问

阿里巴巴推出的全能AI助手

AI 编程开发 Agent智能体

腾讯元宝

腾讯混元平台推出的AI助手

文档处理 AI 聊天问答

文心一言

文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。

AI 编程开发 AI 文本写作

讯飞写作

基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

AI 文本写作中文写作

即梦AI

一站式AI创作平台，免费AI图片和视频生成。

图片拼接

ChatGPT

最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

AI 编程开发 AI 文本写作

智谱清言 - 免费全能的AI助手

AI 编程开发 Agent智能体

相关专题

2026赚钱平台入口大全

2026年最新赚钱平台入口汇总，涵盖任务众包、内容创作、电商运营、技能变现等多类正规渠道，助你轻松开启副业增收之路。阅读专题下面的文章了解更多详细内容。

2026.01.31

高干文在线阅读网站大全

汇集热门1v1高干文免费阅读资源，涵盖都市言情、京味大院、军旅高干等经典题材，情节紧凑、人物鲜明。阅读专题下面的文章了解更多详细内容。

2026.01.31

无需付费的漫画app大全

想找真正免费又无套路的漫画App？本合集精选多款永久免费、资源丰富、无广告干扰的优质漫画应用，涵盖国漫、日漫、韩漫及经典老番，满足各类阅读需求。阅读专题下面的文章了解更多详细内容。

2026.01.31

漫画免费在线观看地址大全

想找免费又资源丰富的漫画网站？本合集精选2025-2026年热门平台，涵盖国漫、日漫、韩漫等多类型作品，支持高清流畅阅读与离线缓存。阅读专题下面的文章了解更多详细内容。

2026.01.31

漫画防走失登陆入口大全

2026最新漫画防走失登录入口合集，汇总多个稳定可用网址，助你畅享高清无广告漫画阅读体验。阅读专题下面的文章了解更多详细内容。

2026.01.31

php多线程怎么实现

PHP本身不支持原生多线程，但可通过扩展如pthreads、Swoole或结合多进程、协程等方式实现并发处理。阅读专题下面的文章了解更多详细内容。

2026.01.31

php如何运行环境

本合集详细介绍PHP运行环境的搭建与配置方法，涵盖Windows、Linux及Mac系统下的安装步骤、常见问题及解决方案。阅读专题下面的文章了解更多详细内容。

2026.01.31

php环境变量如何设置

本合集详细讲解PHP环境变量的设置方法，涵盖Windows、Linux及常见服务器环境配置技巧，助你快速掌握环境变量的正确配置。阅读专题下面的文章了解更多详细内容。

2026.01.31

php图片如何上传

本合集涵盖PHP图片上传的核心方法、安全处理及常见问题解决方案，适合初学者与进阶开发者。阅读专题下面的文章了解更多详细内容。

2026.01.31

热门下载

网站特效

网站源码

网站素材

前端模板