调用iframe 中的js[兼容各种浏览器]

*chrome浏览器需要在服务器环境中测试

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    </head>
    <body>
        <div id="d1"></div>
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"> </script>
        <script>
            $(function() {
                var iframe = ‘<iframe id="f1" src="frame.html"></iframe>‘;
                $("#d1").html(iframe);
                onIframeLoaded(f1,function() {
                    executeIframeFun("a");
                });

                /**
                 *     iframe加载成功事件
                 **/
                function onIframeLoaded(iframe,onload) {
                    if (iframe.attachEvent) {
                        iframe.attachEvent("onload", function() {
                            onload();
                        });
                    } else {
                        iframe.onload = function() {
                            onload();
                        };
                    }
                }
                /**
                 * 执行iframe的方法
                 * funName 方法名
                 */
                function executeIframeFun(funName) {
                    if (window.frames[‘f1‘].contentWindow) {
                        window.frames[‘f1‘].contentWindow[funName]();
                    } else {
                        window.frames[‘f1‘][funName]();
                    }
                }

            });
        </script>
    </body>
</html>

iframe html:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    </head>
    <body>
        子页面
        <script type="text/javascript">
            function a(){
                alert(‘子页面‘);
            }
        </script>
    </body>
</html>
时间： 2024-12-19 08:51:44

调用iframe 中的js[兼容各种浏览器]的相关文章

Jquery 调用iframe中的js

在工作中要在html中嵌入iframe 并且调用其中的js方法. 网上找的demo都是 html中一个点击事件的方法中调用到iframe中的js. 点击触发后,此时iframe早已被渲染完成,所以这么干是可行的. 现在我遇到的情况是在没有任何操作的前提下,html加载后就调用iframe中的js. 以下利用到 Jquery的load()方法,待iframe加载完成后,调用其js. parent.html 1 <!DOCTYPE html> 2 <html> 3 <head&g

网页开发中调用iframe中的函数或者是dom元素

iframe中的代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>By DragonDean</title> <script&g

js兼容各个浏览器的复制功能

看似简单的复制功能,用js做起来竟然遇到各种情况.刚开始在网上搜索到复制功能的几种实现方法,但是都不兼容.最后还是用的插件代码如下 html模板 <tr> <td>1</td> <td>小明</td> <td style="position:relative;"> <input style="width:350px; height:28px; border:none;background:none;

JS兼容各个浏览器的本地图片上传即时预览效果

很早以前 在杭州银行工作曾经碰到这么一个需求,当时也是纠结了很久,也是google了很久,没有碰到合适的demo,今天特意研究了下这方面的的问题,所以也就做了个简单的demo来实现 本地上传图片即时预览效果.其在标准浏览器(firefox,chrome,IE10等其他浏览器)用了HTML5中的内容实现图片即时预览效果.在IE10以下浏览器用了滤镜来解决图片显示问题.在看代码之前,先让我们来了解以下知识点: HTML5中的FileReader对象: FileReader对象主要是把文件读入内存中,

JS兼容IE浏览器的方法

背景 系统需要兼容蛋疼的IE6... 解决方案 *{ 兼容IE6-8 }* <!--[if lt IE 9]> <script src="@{'/public/mng/javascripts/jquery-1.9.1.js'}"></script> <![endif]--> *{ 兼容IE9或以上 }* <!--[if gte IE 9]> <script src="@{'/public/plugins/eas

父页面调用iframe子页面js方法

<iframe name="demoIframe" src="demo.html"></iframe> demo.html : <head> <script> function query(){ alert(1); } </script> </head> 父页面调用: window.demoIframe.document.query();

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中元素的几种方法

DOM方法:父窗口操作IFRAME: ? 1 window.frames["iframeSon"].document IFRAME操作父窗口: ? 1 window.parent.document jquery方法: 在父窗口中操作 选中IFRAME中的所有输入框: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25  $(window.frames["iframeSon"].doc

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

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