iframe交互(一)父页面自动高度

//父页面源码
<body style="border:1px solid red;width:200px;height:500px;" onload="IFrameResize()">
    <script>
        function IFrameResize() {
            //alert(this.document.body.scrollHeight); //弹出当前页面的高度
            var obj = parent.document.getElementById("childFrame"); //取得父页面IFrame对象
            //alert(obj.height); //弹出父页面中IFrame中设置的高度
            obj.height = this.document.body.scrollHeight; //调整父页面中IFrame的高度为此页面的高度
        }

    </script>
    <script type="text/javascript" src="./auto-height.js"></script>
</body>
//子页面源码
<body>
    <IFRAME border=0 marginWidth=0 frameSpacing=0 marginHeight=0 src="iframe.html" frameBorder=0 noResize scrolling="no" width=100%
        height=100% vspale="0" id="childFrame"></IFRAME>
    <!-- <iframe id="iframe" name="asd" src="iframe.html" onload="loadIframe(this)" height="100" frameborder="0" style="border:1px solid blue">
    </iframe> -->
    <script type="text/javascript">
        function loadIframe(doc) {
            console.log(doc.contentWindow.document);
        }
    </script>
</body>

注意:调试时注意是否是本地启动,还是基于代理服务器。本地启动会触发作用于问题导致错误

时间: 2024-08-03 10:22:19

iframe交互(一)父页面自动高度的相关文章

获取iframe(angular 动态页面)高度

问题比较特殊,google了好久才得到启示 开发的angular页面,需要嵌入到客户的web页中,以iframe方式.由于iframe的高度需要指定,而angular动态生成机制导致页面高度会随时变化, 就会出现2个滚动条,一个是页面本身,一个是iframe里的. 解决方法如下: 1.写一个directive监听angular的$digest,实时获取body高度,通过 HTML5 postMessage方式传出 在HTML5中新增了postMessage方法,postMessage可以实现跨文

Iframe跨域嵌入页面自动调整高度的办法

http://www.a.com/A.html http://www.a.com/B.html http://www.a.com/D.js http://www.c.com/C.html A.html: <iframe id="iframe_shg" src="http://www.c.com/c.html" frameborder="0" width="100%"></iframe> ________

CRM 2016 IFrame 函数修改 父页面字段

IFrame js 代码: parent.Xrm.Page.getAttribute("new_xxxx").setValue(123); 当然,可以设置 new_xxxx 字段的OnChange 事件,这样就可以通过OnChange事件做更多的事情. 调用时需写入以下代码:fireOnChange 以激活字段OnChange事件. IFrame js 代码: parent.Xrm.Page.getAttribute("new_xxxx").fireOnChange

子页面iframe如何调用 父页面的方法 或者对象(基于layui框架)

layui.use(... function(){var _tools = {func1: function(){console.log('func1');}}window.tools = _tools;}) // 外部调用,如子页面parent.tools.func1(); 原文地址:https://www.cnblogs.com/Angel-szl/p/11232485.html

iframe父页面获取子页面的高度

最近做项目中用到了iframe,子页面更改父页面的高度,经过九九八十一难,找到了解决的办法. $(window).load(function() {  var h=$(document).height();  var ifHeight = $(window.top.document).find(".XX").css({  height:h }); }); window.top:是获取子页面所有body以上的元素. window.parent()是获取子页面body的上一级父元素.

JQuery调用iframe父页面元素与方法

JQuery操作iframe父页面与子页面的元素与方法 下面简单使用Jquery来操作iframe的一些记录,这个使用纯JS也可以实现. 第一.在iframe中查找父页面元素的方法: $('#id', window.parent.document) 第二.在父页面中获取iframe中的元素方法: $(this).contents().find("#suggestBox") 第三.在iframe中调用父页面中定义的方法和变量: parent.method parent.value 第四.

iframe嵌入的子页面如何刷新父窗口

iframe中刷新父页面方法及一些按钮刷新代码集合[原创+转]2009-07-23 11:12a页面里iframe了个b页面,我想实现在b页面里一个按钮,一按就刷新a页面,也就是父页面,不是只刷新iframe里面的b页面 哦~ 请问b页面里的<input type="button" class="btn" value=" 返 回 " onclick="history.back();">那个onclick 要怎么写呢

js如何判断是否在iframe中/JQuery调用iframe父页面元素与方法

//方式一 if (self.frameElement && self.frameElement.tagName == "IFRAME") { alert('在iframe中'); } //方式二 if (window.frames.length != parent.frames.length) { alert('在iframe中'); } //方式三 if (self != top) { alert('在iframe中'); } 第一.在iframe中查找父页面元素的

JQuery iframe页面通过parent方法操作父页面中的元素与方法(实例讲解)

1)在iframe中查找父页面元素的方法: $('#id', window.parent.document) 2)在iframe中调用父页面中定义的方法和变量: parent.method parent.value 3)实例 1.父页面 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="If