跨域实现IFRAME自适应高度~续(终级)

简介:

IFRMAE请求一个跨域时,而这个跨我们没有操作权限,我们只有加一个HTML文件的权限,如何实现自适应行高
这需要一个中间页面iframe.html

原理:通过改变top.location的hash值,来实现高级的自适应
主页面内容:
<iframe name="iframeid" id="iframeid" scrolling="no" width="1000" frameborder="0"
                onload="iframeHeight()"></iframe>
        $("#iframeid").attr({ src: http://local.zzl.com/iframe.aspx?url= + cUrl });

        //自适应高度,不在同一域的对象,是不能相互操作的,只能通过URL地址把子页面的高度传过来
        function iframeHeight() {
            var ifm = document.getElementById("iframeid");
            var hash = window.location.hash.slice(1);
            if (hash && /height=/.test(hash)) {
                if (ifm != null) {
                    ifm.height = hash.replace("height=", "");
                }
            }
            setTimeout(iframeHeight, 200);
        }

    </script>

iframe.html内容(它向主页面通过hash这个瞄点参数向主页面传高度)
<iframe name="iframeid2" id="iframeid2" scrolling="no" width="1000" frameborder="0"
        src="" onload="iFrameHeight()"></iframe>

    <script type="text/javascript">
        function iFrameHeight() {
            var ifm = document.getElementById("iframeid2");
            var subWeb = document.frames ? document.frames["iframeid2"].document : ifm.contentDocument;
            if (ifm != null && subWeb != null) {
                ifm.height = subWeb.body.scrollHeight;
                //  top.location.hash= "#height=" + subWeb.body.scrollHeight; //ie中显示没有权限
                var hostUrl = document.referrer;
                hostUrl += "#height=" + subWeb.body.scrollHeight;
                window.top.location = hostUrl;
            }
        }
    </script>

本文转自博客园张占岭(仓储大叔)的博客,原文链接:跨域实现IFRAME自适应高度~续(终级),如需转载请自行联系原博主。

目录
相关文章
|
移动开发 小程序 API
【小程序质量提优解决方案】(三)内嵌H5页面访问受限
【小程序质量提优解决方案】(三)内嵌H5页面访问受限
1003 0
Element的el-table行列错位对不齐问题处理
本文目录 1. 问题表现 2. 问题发现 3. 问题处理 4. 另一种处理方案
5353 0
Element的el-table行列错位对不齐问题处理
|
8月前
|
前端开发 开发工具 git
Git报错处理:解决git commit时的lint-staged错误提示。
极好的,你对Git的lint-staged出了一个令人头疼的问题。让我们一起钻研一下,找到一种方法来解决一切。 首先,我们要确定你是在做什么操作时候遇到了问题。lint-staged通常在我们运行 git commit 时启动,它做的工作是在你提交之前运行一些指定的命令检查你的代码。当lint-staged报错,多半是因为检查未通过,或者它试图运行的命令存在问题。 让我们以一种图解的方式来描绘一下这个过程,就像canvas上的画面那样。git正在温柔的将你的修改捆绑起来,准备提交。突然,lint-staged走了出来,并开始盘问着Git,寻找可能的错误。如果lint-staged找到了什么
875 24
|
8月前
|
存储 人工智能 自然语言处理
LangChain RAG入门教程:构建基于私有文档的智能问答助手
本文介绍如何利用检索增强生成(RAG)技术与LangChain框架构建基于特定文档集合的AI问答系统。通过结合检索系统和生成机制,RAG能有效降低传统语言模型的知识局限与幻觉问题,提升回答准确性。文章详细展示了从环境配置、知识库构建到系统集成的全流程,并提供优化策略以改进检索与响应质量。此技术适用于专业领域信息检索与生成,为定制化AI应用奠定了基础。
2446 5
LangChain RAG入门教程:构建基于私有文档的智能问答助手
|
XML JSON 人工智能
Error while extracting response for type [class xxx] and content type application/xml;charset=UTF-8
Error while extracting response for type [class xxx] and content type application/xml;charset=UTF-8
2325 0
|
JavaScript 安全 开发工具
在 Vue 3 中使用 TypeScript
【10月更文挑战第3天】
|
JavaScript 前端开发 API
js截取图片地址后面的参数和在路径中截取文件名或后缀名
在处理网页上的图片资源或者其他类型的文件资源时,你可能会遇到需要使用这些技巧的情况。以下是一些具体的使用场景:
637 0
|
存储 前端开发 中间件
vue3之vite配置vite-plugin-mock使用mock轻松创建模拟数据提高开发效率
vue3之vite配置vite-plugin-mock使用mock轻松创建模拟数据提高开发效率
1788 0
|
安全 iOS开发 MacOS
Mac pro升级 MacOS 10.15 Catalina 后根目录是只读的, Recovery OS不能访问
Mac pro升级 MacOS 10.15 Catalina 后根目录是只读的, Recovery OS不能访问
468 0
|
JavaScript 前端开发 API
谈谈我对Vue 3 中的 Composition、Composition API 和 Composables 之间的区别的理解
谈谈我对Vue 3 中的 Composition、Composition API 和 Composables 之间的区别的理解

热门文章

最新文章