0

0

【HTML】iframe跨域访问问题_html/css_WEB-ITnose

php中文网

php中文网

发布时间:2016-06-24 11:46:41

|

1353人浏览过

|

来源于php中文网

原创

概述

本地同一浏览器访问本地html文件和访问服务器端html文件,本地iframe没有自适应高度,而服务器端的ifrane自适应了高度。

1.问题重现:

Chrome 版本 41.0.2272.101 (64-bit)

OS:Win8.1

Chrome访问服务器端HTML文件呈现的结果

立即学习前端免费学习笔记(深入)”;

 

奇布塔
奇布塔

基于AI生成技术的一站式有声绘本创作平台

下载

Chrome访问本地HTML文件呈现的结果

立即学习前端免费学习笔记(深入)”;

本地访问的HTML文件Iframe没有根据Iframe里面的页面类容自适应高度

 

2.Iframe自适应高度代码

在index.html文件中间中添加Iframe页面,页面加载时,加载src指定的文件路径

<iframe id="indexFrame" name="index" width="800" onload='iFrameHeight("indexFrame")' src="Web/Index/indexIframe.html"           frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>

 

JS脚本自适应调整Iframe高度

    </script>    <script type="text/javascript" language="javascript">        function iFrameHeight(id) {            var ifm = document.getElementById(id);            var subWeb = document.frames ? document.frames[id].document : ifm.contentDocument;            if (ifm != null && subWeb != null) {                ifm.height = subWeb.body.scrollHeight;            }        }    </script>

 

3.调试代码

立即学习前端免费学习笔记(深入)”;

Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match.

 

在这里,我猜测是访问本地文件是file协议(file:///),HTML代码和JS代码存在跨域问题。小弟对file协议不熟悉,请大家不吝赐教。

 

相关文章

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载

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

热门AI工具

更多
DeepSeek
DeepSeek

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

豆包大模型
豆包大模型

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

通义千问
通义千问

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

腾讯元宝
腾讯元宝

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

文心一言
文心一言

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

讯飞写作
讯飞写作

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

即梦AI
即梦AI

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

ChatGPT
ChatGPT

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

相关专题

更多
苹果官网入口与在线访问指南_中国站点快速直达与iPhone查看方法
苹果官网入口与在线访问指南_中国站点快速直达与iPhone查看方法

本专题汇总苹果官网最新可用入口及中国站点访问方式,涵盖官网直达链接、iPhone官方页面查看方法与常见访问说明,帮助用户快速进入苹果官方网站,便捷了解产品信息与官方服务。

4

2026.02.24

Asianfanfics官网入口与访问指南_AFF官方平台最新登录地址
Asianfanfics官网入口与访问指南_AFF官方平台最新登录地址

本专题系统整理Asianfanfics(AFF)官方网站最新可用入口,涵盖官方平台最新直达地址、官网登录方式及中文访问指引,帮助用户快速、安全地进入AFF平台浏览与使用相关内容。

9

2026.02.24

Go分布式服务治理与链路追踪实践
Go分布式服务治理与链路追踪实践

本专题围绕 Go 语言在分布式系统中的服务治理实践展开,系统讲解服务注册与发现、配置中心、限流熔断、灰度发布以及分布式链路追踪方案。通过完整项目示例,帮助开发者构建可观测性完善、稳定性高、易扩展的 Go 微服务架构体系,提升线上系统问题定位与运维效率。

1

2026.02.24

Python自动化测试与持续集成实战
Python自动化测试与持续集成实战

本专题聚焦 Python 在自动化测试与持续集成中的工程化实践,系统讲解测试框架选型、测试用例设计、接口自动化、测试数据管理及测试报告生成。结合 CI/CD 流水线场景,讲解如何将自动化测试融入持续集成流程,实现代码提交即自动测试,提升项目交付质量与团队协作效率。

0

2026.02.24

Java高并发系统设计与性能调优
Java高并发系统设计与性能调优

本专题围绕 Java 在高并发业务场景下的系统设计与性能调优展开,系统讲解线程模型、并发容器、锁机制、异步编程及 JVM 性能调优思路。结合真实高并发业务场景,深入分析接口限流、线程池配置、热点资源优化与系统稳定性保障方案,帮助开发者构建高性能、高可用的 Java 后端系统。

5

2026.02.24

pixiv网页版官网登录与阅读指南_pixiv官网直达入口与在线访问方法
pixiv网页版官网登录与阅读指南_pixiv官网直达入口与在线访问方法

本专题系统整理pixiv网页版官网入口及登录访问方式,涵盖官网登录页面直达路径、在线阅读入口及快速进入方法说明,帮助用户高效找到pixiv官方网站,实现便捷、安全的网页端浏览与账号登录体验。

1257

2026.02.13

微博网页版主页入口与登录指南_官方网页端快速访问方法
微博网页版主页入口与登录指南_官方网页端快速访问方法

本专题系统整理微博网页版官方入口及网页端登录方式,涵盖首页直达地址、账号登录流程与常见访问问题说明,帮助用户快速找到微博官网主页,实现便捷、安全的网页端登录与内容浏览体验。

402

2026.02.13

Flutter跨平台开发与状态管理实战
Flutter跨平台开发与状态管理实战

本专题围绕Flutter框架展开,系统讲解跨平台UI构建原理与状态管理方案。内容涵盖Widget生命周期、路由管理、Provider与Bloc状态管理模式、网络请求封装及性能优化技巧。通过实战项目演示,帮助开发者构建流畅、可维护的跨平台移动应用。

252

2026.02.13

TypeScript工程化开发与Vite构建优化实践
TypeScript工程化开发与Vite构建优化实践

本专题面向前端开发者,深入讲解 TypeScript 类型系统与大型项目结构设计方法,并结合 Vite 构建工具优化前端工程化流程。内容包括模块化设计、类型声明管理、代码分割、热更新原理以及构建性能调优。通过完整项目示例,帮助开发者提升代码可维护性与开发效率。

39

2026.02.13

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
前端Vue3实战【手写vue项目】
前端Vue3实战【手写vue项目】

共9课时 | 1万人学习

传智播客JQuery编程视频教程
传智播客JQuery编程视频教程

共36课时 | 7万人学习

韩顺平Jquery视频教程
韩顺平Jquery视频教程

共15课时 | 3.8万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号