iframe中的js如何调用父页面中模块化好的脚本中的方法?

56 views
Skip to first unread message

advance

unread,
Aug 18, 2011, 3:01:57 AM8/18/11
to seajs
各位好,在使用seajs过程中碰到个问题:页面中有个iframe,页面中的js已经模块化好了,iframe中的js如何调用父页面中模块化好的脚
本中的方法?
demo.html页面内容:
<html>
<body>
......
<iframe id="iframe1" name="iframe1" src="iframe.html"></iframe>
......

<script language="javascript" type="text/javascript" src="sea.js" data-
main="init"></script>
</body>
</html>

init.js页面内容:

define(function(require,exports,module) {

function setValue(a,b) {
......
}
exports.setValue = setValue;
});


iframe.html页面内容:

<html>
<body>
......
<script language="javascript" type="text/javascript" src="sea.js" data-
main="iframeInit"></script>

</body>
</html>

iframeInit.js页面内容:

define(function(require,exports,module) {

var a=0;
var b=1;

var myFun = require("init");

myFun.setValue(a,b);//不执行
});

Asins Asins

unread,
Aug 18, 2011, 3:36:36 AM8/18/11
to se...@googlegroups.com
iframe中的sea.js与父页面中有sea.js是独立的,其配置信息自然也是独立的,如果你想调用父页面中的内容,其实在iframe中就不该引入sea.js
window.top.seajs.load('.iframeInit', function(){
    // do samething
});
这样就能满足你的需要了!
--
Asins
简单其实不简单

mashihua

unread,
Aug 18, 2011, 3:47:51 AM8/18/11
to se...@googlegroups.com, advance
按我的理解是,你必须在父window上输出命名空间或函数,比如:

seajs.use('init',function(a){
    window.setValue = a.setValue;
});

引用module的一条概念是让模块在沙盒里运行,使模块里的函数不至于影响外部环境。iframe要调用父window里的代码,只能是在父window上输出命名空间或函数,在iframe里调用输出的命名空间或函数。

define(function(require,exports,module) {
  var a = 1, b = 2;
  top.setValue(a,b);
});

 mashihua shihua.ma
Contact Me 

Tomas Huang (冠)

unread,
Aug 18, 2011, 5:14:00 AM8/18/11
to se...@googlegroups.com, advance
感觉父页面iframe中的js脚本这种思路本身就有问题,当然有时候确实没办法。
如果你的客户群体都是webkit的话,可以尝试html5的postmessage功能。
--
Name: Tomas Huang(黄冠)
Nick: 青山老妖
Position: WEIMA SOFTWARE DESIGN CO.SHA Co-founder
Email: huanggua...@gmail.com
Sina Micro Bloghttp://t.sina.com.cn/showpower(青山老妖_黄冠)
Twitter: runawaygo
------
互联网创业者,理想主义者,敏捷实践,HTML5,软件工程师,非专业产品设计师

googlereader.png
gtalk.png
twitter.png
skype.png
facebook.png

Asins Asins

unread,
Aug 18, 2011, 5:41:01 AM8/18/11
to se...@googlegroups.com
在模块内部使用top.XXX的方式我认为是相当恶劣的解决方案,一来污染了全局window,二来增加了维护的难度。

因为没有域的问题,所以我认为与父页面使用同一份seajs是更优的方案,不管从维护上以及可读性上都更好!

同时也加大的模块的复用的可能性!

window.top.seajs.use('./iframeInit', function(){
    // do samething
});

gtalk.png
skype.png
googlereader.png
twitter.png
facebook.png

Tomas Huang (冠)

unread,
Aug 18, 2011, 8:36:15 AM8/18/11
to se...@googlegroups.com
这种方法本身的调用逻辑就是耦合的,维护成本比消息机制还多。
比如父窗体中的函数签名要发生变化了
     不用消息机制:维护父窗体中的代码和子窗体的代码
     消息机制:只维护父窗体的代码,可能不需要维护自创题代码

至于污染,只是你看得见和看不见的问题
gtalk.png
facebook.png
skype.png
googlereader.png
twitter.png

advance

unread,
Aug 18, 2011, 10:51:57 PM8/18/11
to seajs
感谢大家的回复,我从mashihua的"在window上输出命名空间或函数"得到启发,
把exports.setValue = setValue;改成window.setValue = setValue;
在iframeInit.js中用parent.setValue或者top.setValue就可以访问了,同理:父窗体要访问iframe中的变量
或者方法,也使用类似方法便可访问。
这种方法虽然污染了全局window,不过这样处理我要修改的代码很少,原来的代码基本上不用动,人懒,没办法,可能还会有其他更好的办法,暂时就这样
解决了,非常感谢大家的回复
另外还有个问题想请教下,我就不另外开贴了,我把第三方的线上的api模块化后,在init函数中require的时候不能成功,不知道为什么,是不是
像google map api 或者 mapabc api 这种线上脚本不可以模块化的啊?

On 8月18日, 下午8时36分, Tomas Huang (冠) <huangguan3112...@gmail.com> wrote:
> 这种方法本身的调用逻辑就是耦合的,维护成本比消息机制还多。
> 比如父窗体中的函数签名要发生变化了
> 不用消息机制:维护父窗体中的代码和子窗体的代码
> 消息机制:只维护父窗体的代码,可能不需要维护自创题代码
>
> 至于污染,只是你看得见和看不见的问题
>

> 在 2011年8月18日 下午5:41,Asins Asins <asinsim...@gmail.com>写道:
>
>
>
>
>
>
>
>
>
> > 在模块内部使用top.XXX的方式我认为是相当恶劣的解决方案,一来污染了全局window,二来增加了维护的难度。
>
> > 因为没有域的问题,所以我认为与父页面使用同一份seajs是更优的方案,不管从维护上以及可读性上都更好!
>
> > 同时也加大的模块的复用的可能性!
>
> > window.top.seajs.use('./iframeInit', function(){
> > // do samething
> > });
>

> > 在 2011年8月18日 下午5:14,Tomas Huang (冠) <huangguan3112...@gmail.com>写道:
>
> > 感觉父页面iframe中的js脚本这种思路本身就有问题,当然有时候确实没办法。
> >> 如果你的客户群体都是webkit的话,可以尝试html5的postmessage功能。
>

> >> 在 2011年8月18日 上午12:47,mashihua <mashi...@gmail.com>写道:
>
> >> 按我的理解是,你必须在父window上输出命名空间或函数,比如:
>
> >>> seajs.use('init',function(a){
> >>> window.setValue = a.setValue;
> >>> });
>

> >>> 引用module的一条概念是让模块在沙盒里运行,使模块里的函数不至于影响外部环境。iframe要调用父window里的代码,只能是在父window上输 出命名空间或函数,在iframe里调用输出的命名空间或函数。

> >>> mashi...@gmail.com <beijing.j...@gmail.com>
> >>> Chat
>
> >>> mashihua shihua.ma
> >>> <http://shihua.ma/>Contact Me <http://my.wisestamp.com/link?u=759bmcbnc2ywqsdk&site=twitter.com/mash...><http://my.wisestamp.com/link?u=759bmcbnc2ywqsdk&site=twitter.com/mash...><http://my.wisestamp.com/link?u=759bmcbnc2ywqsdk&site=www.facebook.com...>
>
> >>> <http://my.wisestamp.com/link?u=759bmcbnc2ywqsdk&site=www.google.com/r...>
> >>> <http://my.wisestamp.com/link?u=759bmcbnc2ywqsdk&site=www.google.com/r...>
>
> >> --
> >> *Name*: Tomas Huang(黄冠)
> >> *Nick*: 青山老妖
> >> *Position*: WEIMA SOFTWARE DESIGN CO.SHA Co-founder
> >> *Email*: huangguan3112...@gmail.com
> >> *Sina Micro Blog*:http://t.sina.com.cn/showpower(青山老妖_黄冠)
> >> *Twitter*: runawaygo


> >> ------
> >> 互联网创业者,理想主义者,敏捷实践,HTML5,软件工程师,非专业产品设计师
>
> > --
> > Asins
> > 简单其实不简单
> >http://nootn.com
>
> --

> *Name*: Tomas Huang(黄冠)
> *Nick*: 青山老妖
> *Position*: WEIMA SOFTWARE DESIGN CO.SHA Co-founder
> *Email*: huangguan3112...@gmail.com
> *Sina Micro Blog*:http://t.sina.com.cn/showpower(青山老妖_黄冠)
> *Twitter*: runawaygo


> ------
> 互联网创业者,理想主义者,敏捷实践,HTML5,软件工程师,非专业产品设计师
>

> gtalk.png
> 1K查看下载
>
> facebook.png
> < 1K查看下载
>
> skype.png
> 4K查看下载
>
> googlereader.png
> 1K查看下载
>
> twitter.png
> < 1K查看下载

Tomas Huang (冠)

unread,
Aug 18, 2011, 10:57:50 PM8/18/11
to se...@googlegroups.com

简单,粗暴,实用。
提个醒:注意判空

在 2011-8-19 上午10:51,"advance" <advanc...@gmail.com>写道:
Reply all
Reply to author
Forward
0 new messages