`
todd_liu
  • 浏览: 66026 次
  • 性别: Icon_minigender_1
  • 来自: 江苏
社区版块
存档分类
最新评论

iframe display:none 自适应 需要判断src加载情况

阅读更多

<div id="dv_iframe" style="display:none;">

<iframe id='modcontent' name='modcontent'  frameborder='0'  src='test.html'

scrolling='no' ></iframe>

</div>

 

display为none的时候,iframe是不能自适应的,需要判断src是否加载完毕,在执行自适应的函数,

IE 支持 iframe 的 onload 事件,不过是隐形的,需要通过 attachEvent 来注册

判断加载情况:

var iframe=document.getElementById("dv_iframe");
    if (iframe.attachEvent){
        iframe.attachEvent("onload", function(){
            //自适应函数调用
        });
    } else {
        iframe.onload = function(){
           //自适应函数调用
        };
    }

 

 

0
0
分享到:
评论

相关推荐

    jsp页面iframe高度自适应的js代码.docx

    &lt;iframe id="agentFrame" name="agentFrame" src="" width="0" height="0" style="display:none;"&gt;&lt;/iframe&gt; function sethash(){ hashH = document.documentElement.scrollHeight; urlC = "/test.jsp"; ...

    iframe src为图片时的高度自适应的代码

    因此,我们需要一种新的方法来实现高度自适应:创建一个隐藏的img元素,将图片的URL设置为其src属性,然后利用这个img元素的`height`和`width`属性来动态调整iframe的尺寸。 #### 实现步骤 1. **创建img元素**:...

    Iframe实现跨浏览器自适应高度解决方法

    首先,我们需要理解问题的核心在于,Iframe的内容高度可能随着用户的交互(如点击、滚动等)而变化,而默认情况下,Iframe的尺寸是固定的,不会自动调整以适应其内部内容的变化。这可能导致内容溢出或者显示不完整。...

    jsp页面iframe高度自适应的js代码

    然而,需要注意的是,这种方法可能不适用于所有情况,例如,当IFrame内容加载时间较长或有异步加载的内容时,可能需要额外的策略来确保正确计算高度。此外,由于跨域限制,这种方法可能在某些情况下无法工作,例如...

    js跨域问题之跨域iframe自适应大小实现代码

    t.innerHTML = '&lt;iframe id="iframeProxy" height="0" width="0" src="***' + dHeight + '" style="display:none"&gt;&lt;/iframe&gt;'; document.documentElement.appendChild(t.firstChild); ``` 4. 在a_proxy.html中解析...

    百度富文本编辑器ueditor上传图片宽高超范围问题2018.7.3补充

    为解决这个问题,可能需要对ueditor进行进一步的定制,以确保粘贴的图片也能正确自适应。具体实现方式可能包括监听粘贴事件,然后对粘贴的HTML内容进行处理,确保所有图片都设置为`max-width: 100%`。 总的来说,...

    Node.js-使用隐藏的iframe观察元素大小更改

    在JavaScript中,我们可以使用`document.createElement('iframe')`来创建一个新的`iframe`元素,然后将其设置为隐藏,例如:`iframe.style.display = 'none'`。接下来,将目标元素的HTML代码复制到`iframe`的`srcdoc...

    PHP网站使用JavaScript和Iframe简单实现部分刷新效果1

    例如,当用户点击某个菜单项时,对应的子菜单可以通过改变其CSS的`display`属性从`none`变为`block`,实现隐藏和显示的效果。这样的交互设计增加了用户的操作便捷性。 Iframe是实现局部动态更新的关键。在本例中,`...

    Modal Dialog Box in Embedded YouTube Video.zip

    最后,我们使用JavaScript来处理按钮点击事件,打开和关闭模态对话框,并将YouTube视频加载到`iframe`中: ```javascript function openModal() { document.getElementById("myModal").style.display = "block"; ...

    前端面试宝典V4.0.pdf

    display:none 会使元素从文档流中删除,而 visibility:hidden 只会使元素不可见。 10. position 属性 position 属性有多个值,包括 static、relative、absolute、fixed 和 inherit。每个值都有其特定的作用。 ...

    前端开发笔试题

    - `iframe` 可以用来嵌入其他网页或资源,但不同域名下的页面默认情况下无法共享cookie。 - 上传图片并避免页面刷新通常使用 AJAX 技术而非 `iframe`。 - 左边固定右边自适应的布局可以通过CSS布局技术实现,而...

    jQuery右侧固定可隐藏QQ在线客服.rar

    然而,实际项目中还需要考虑更多的细节,如窗口动画效果、防止窗口覆盖其他元素、自适应不同屏幕尺寸等。通过持续优化和调整,我们可以创建一个既美观又实用的在线客服系统,提高用户的满意度和转化率。 总结,利用...

    HTML 使用浮动框架.doc

    - `src`: 必填,指定要在框架中加载的网页URL。 - `width`: 必填,设置框架的宽度。 - `height`: 必填,设置框架的高度。 - `align`: 可选,定义框架的对齐方式,可选值为`left`、`center`、`right`。 - `...

    仅限于自己用的web前端面试题

    - **左边固定右边自适应的布局**:通过设置 iframe 的宽度和高度。 - **资源加载**:加载外部资源,如广告等。 ### 十四、HTML 结构中可见内容的容器 - 正确答案是 **D、&lt;body&gt;&lt;/body&gt;**:浏览器内容区显示的内容都...

    jQuery 计算iframe 窗口大小的方法

    `iframe`的`src`属性为空,意味着在实际使用时需要替换为实际的加载内容的URL。 接下来是一段JavaScript代码,这部分代码在页面加载完成后(DOM就绪)执行。代码中使用了jQuery库,所以首先需要确保页面已经引入了...

Global site tag (gtag.js) - Google Analytics