Javascript:父子页面中document ready 函数的执行顺序

[已解决问题] 解决于 2015-01-15 14:32

在一个Iframe中，有一个子Iframe，两个Iframe的JS代码中都有$(function () {})函数。

根据我的观察，子Iframe的$(function () {})函数要优先于父页面的$(function () {})执行，这是为什么呢？

另外，在父页面中怎样写代码，才能让代码优先于子Ifram的$(function () {})函数执行呢？谢谢。

javascript

sikla | 初学一级 | 园豆：27
提问于：2015-01-15 11:51

< >

最佳答案

1.你的Iframe是如何创建的？（脚本动态创建，还是直接嵌入页面）

<html>
<body>
<div id="divIframe">
<iframe src=""></iframe>
</div>
</body>
</html>

上面这种方法，子Iframe加载都属于当前页面（Iframe）的一“渲染过程”，所以，你在

当前页面ready中写代码，要比子Iframe中的ready中写的代码执行要往后。

2.如果是直接嵌入，那么，子Iframe的构造还属于父Iframe document read 之前的过程。所以，子Iframe中的ready要比父Iframe要早。

3.如果是脚本动态构造，那么父Iframe应该是比子Iframe要早

例如：

<html>
<body>
<div id="divIframe"></div>
</body>
</html>

(function(doc,$){

$(document).ready(function(){
   appendIframe();
});

function appendIframe(){
    
    // 在这里把子Iframe嵌入到父Iframe中
    var iframeParent= doc.getElementById('divIframe');
    var iframeSub=createIframe();
    iframeParent.appendChild(iframeSub);
};

function createIframe(){
    // 在这里设置子Iframe加载完毕后操作
    // 如 iframe.onload=function(){
    //     code here...
    //};
}

})(document,jQuery);

奖励园豆：5

Vivian软陶公仔 | 菜鸟二级 |园豆：284 | 2015-01-15 12:07

谢谢你。我是在HTML代码中嵌入了一个Iframe标签。另外我想在父Iframe中初始化一个对象，在子Iframe中给这个对象赋值，这样有办法可以做吗？

sikla | 园豆：27 (初学一级) | 2015-01-15 13:56

@sikla: 看了几个相关的问题，大意是说在页面load之前执行一个Javascript函数“make no sense",

我再想想其他的办法。谢谢你。

sikla | 园豆：27 (初学一级) | 2015-01-15 14:30

@sikla:

1 <html>
2 <head></head>
3 <body>
4 <div id="divContainer">
5      // append sub iframe here
6 </div>
7 </body>
8 </html>

  1 // Coding by : bhwebxu tsui
  2 
  3 // @param{String}id        id of iframe
  4 // @param{String}parent_id container of iframe
  5 // @param{String}url       url of iframe
  6 // @param{Number}height default $(window).height();
  7 // @param{Number}width default 100%
  8 var Iframe = function (id, parent_id, url, height, width) {
  9 
 10     'use strict';
 11 
 12     if (!this instanceof Iframe) return new Iframe(id, parent_id, url, height, width);
 13 
 14     this.id = id || 'newIframe';
 15     this.parent_id = parent_id;
 16     this.url = url;
 17     this.width = width ? width + 'px' : '100%';
 18     this.height = (height || $(window).height()) + 'px';
 19 
 20     // set iframe height
 21     // @param{Number}height
 22     this.setHeight = function (height) {
 23         $('#' + this.id).animate({ height: height + 'px' });
 24     };
 25 
 26     // get ifrme window obj
 27     // @return{Object}
 28     this.getWindow = function () {
 29 
 30         var doc, iframe = document.getElementById(this.id);
 31 
 32         if (iframe.contentWindow) { return iframe.contentWindow; }
 33         if (iframe.window) { return iframe.window; }
 34         if (!doc && iframe.contentDocument) { doc = iframe.contentDocument; }
 35         if (!doc && iframe.document) { doc = iframe.document; }
 36         if (doc && doc.defaultView) { return doc.defaultView; }
 37         if (doc && doc.parentWindow) { return doc.parentWindow; }
 38 
 39         return undefined;
 40     };
 41 
 42     // create iframe
 43     // @param{Function}callback  excute this method when iframe load completed 
 44     this.create = function (callback) {
 45 
 46         var doc = document,
 47             iframeContainer = doc.getElementById(this.parent_id),
 48             iframeContainerNodes = 0,
 49             iframeNew = doc.createElement('iframe');
 50 
 51         iframeNew.setAttribute('id', this.id);
 52         iframeNew.setAttribute('src', this.url);
 53         iframeNew.setAttribute('border', 0);
 54         iframeNew.setAttribute('frameBorder', 0);
 55         iframeNew.setAttribute('marginWidth', 0);
 56         iframeNew.setAttribute('marginHeight', 0);
 57         iframeNew.setAttribute('scrolling', 'no');
 58         iframeNew.setAttribute('allowtransparency', 'no');
 59         iframeNew.style.width = this.width;
 60         iframeNew.style.height = this.height;
 61 
 62         if (iframeNew.attachEvent) {
 63             iframeNew.attachEvent('onload', function () {
 64                 // console.log('ie');
 65                 if (callback) {
 66                     callback();
 67                 }
 68             });
 69         } else {
 70             iframeNew.onload = function () {
 71                 // console.log('ff');
 72                 if (callback) {
 73                     callback();
 74                 }
 75             };
 76         }
 77 
 78         if (iframeContainer) {
 79 
 80             // clear container nodes
 81             if (iframeContainer.hasChildNodes()) {
 82                 iframeContainerNodes = iframeContainer.childNodes;
 83                 for (var i = 0, l = iframeContainerNodes.length; i < l; i++) {
 84                     iframeContainer.removeChild(iframeContainerNodes[i]);
 85                 }
 86             }
 87 
 88             // append iframe to container
 89             iframeContainer.appendChild(iframeNew);
 90 
 91         } else {
 92             alert('未找到iframe父节点');
 93         }
 94     };
 95 };
 96 
 97 
 98 // parent iframe code here
 99 ;(function(Controller,doc){
100 
101     Controller.Const={
102         url:'subiframe.html'
103     };
104 
105     Controller.View={
106 
107         initializeObj:function(){
108 
109 
110         },
111 
112         IFrame:{
113             create:function(){
114 
115                    var iframe_id = 'iframeSub',
116                         iframe = new Iframe(iframe_id
117                         , 'divContainer'
118                         , Controller.Const.url
119                         , 300);
120                     iframe.create(function () {
121 
122                         // api for subiframe
123                         var iframeWin = iframe.getWindow();
124                         iframeWin.MainPageObj = Controller.PublicMethod;
125 
126                         // access subiframe method,when subiframe load completed
127                         iframeWin.SubPageObj.initialize();
128                     });
129             }
130 
131         }
132     };
133 
134 
135     // public method for subiframe
136     Controller.PublicMethod={
137 
138         set:function(){
139 
140             // initialize parent iframe obj
141             Controller.View.initializeObj();
142         }
143     };
144 
145     // export 
146     return Controller.PublicMethod;
147 
148 })(MainPageObj||{},document);
149 
150 
151 // subiframe code here
152 ;(function(Controller,doc){
153 
154     Controller.initialize=function(){
155 
156         // initialize subiframe
157     };
158 
159     // api for parent iframe
160     Controller.PublicMethod={
161 
162         initialize:function(){
163             
164             // initialize subiframe here
165             Controller.initialize();
166         }
167     };
168 
169     // access parent iframe
170     Controller.AccessParentPage={
171 
172         set:function  () {
173 
174             // access parent iframe method
175             MainPageObj.set();
176         }
177     };
178 
179     // export 
180     return Controller.PublicMethod;
181 
182 })(SubPageObj||{},document);

Vivian软陶公仔 | 园豆：284 (菜鸟二级) | 2015-01-19 14:02

@sikla:

大概是这样子的了，

那个创建 IFRAME的方法我只是随便写，写得不好，真正用的时候你得重新写一下。

主要思路是，当父IFRAME创建子IFRAME时，公开父IFRAME的一些方法，在子IFRAME加载完毕后执行子IFRAME公开的方法。这样，在子IFRAME中操作时，也可以访问父IFRAME公开的方法（也就是你所说的给父IFRAME对象设置值）

Vivian软陶公仔 | 园豆：284 (菜鸟二级) | 2015-01-19 14:08

@bhwebxu:感谢...

sikla | 园豆：27 (初学一级) | 2015-01-21 13:27

@fytt: 只是iframe这个节点的加载在父页面reday前执行，但是子页面中的js全都是在父页面中的js加载完毕才执行的

2015熊出没 | 园豆：200 (初学一级) | 2019-05-10 16:17

清除回答草稿

您需要登录以后才能回答，未注册用户请先注册。

欢迎，请先 登录 或者 注册 。

Javascript:父子页面中document ready 函数的执行顺序

欢迎，请先登录或者注册。