专栏首页悟空聊架构 | 公众号【HTML】iframe跨域访问问题

【HTML】iframe跨域访问问题

概述

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

1.问题重现:

Chrome 版本 41.0.2272.101 (64-bit)

OS:Win8.1

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

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协议不熟悉,请大家不吝赐教。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • # 全网最细 | 21张图带你领略集合的线程不安全

    集合框架有Map和Collection两大类,Collection下面有List、Set、Queue。List下面有ArrayList、Vector、Linke...

    悟空聊架构
  • 算法也是很过瘾的~~用面向对象实现~夜过吊桥~算法

    悟空聊架构
  • 程序员深夜惨遭老婆鄙视,原因竟是CAS原理太简单?| 每一张图都力求精美

    夜黑风高的晚上,一名苦逼程序员正在疯狂敲着键盘,突然他老婆带着一副睡眼朦胧的眼神瞟了下电脑桌面。于是有了如下对话:

    悟空聊架构
  • redis学习教程之一基本命令

    参阅redis中文的 互动教程(interactive tutorial)的学习笔记。 全局操作: #查看所有key keys * 或 keys "*" ...

    Ryan-Miao
  • 18.Elasticsearch更新文档4---局部更新3---restAPI

    在 更新整个文档 , 我们已经介绍过 更新一个文档的方法是检索并修改它,然后重新索引整个文档;然而,使用 update API 我们还可以部分更新文档,例如在某...

    IT云清
  • 渗透测测之“list”查询页面利用技巧

    近期在处理接口越权漏洞的问题,在前期漏洞测试、调研的时候发现部分“list”的查询功能的越权漏洞可通过一些特殊技巧来获取更多的数据、扩大漏洞影响。

    瓦都剋
  • C/C++中char*与wchar_t*之间的转换

    代码编译运行环境:Windows 64bits+VS2017+Debug+Win32

    Dabelv
  • Linux阅码场 - Linux内核月报(2020年07月)

    Linux阅码场内核月报栏目,是汇总当月Linux内核社区最重要的一线开发动态,方便读者们更容易跟踪Linux内核的最前沿发展动向。

    Linux阅码场
  • Jenkins 健康检查顾问

    管理任何软件都面临着独特的挑战。Jenkins Masters 也不例外。例如,

    LinuxSuRen
  • ubuntu 14.04安装flash无效的解决方法

    本人非常喜欢Opera 和 Chromium 这两款浏览器但在 ubuntu 14.04 下安装完后发现 flash无法播放没有安装flash插件因为 Adob...

    飞奔去旅行

扫码关注云+社区

领取腾讯云代金券