今晚在折腾 iframe 中元素的居中问题，问题是这样的：在腾讯开放平台上的应用，嵌入平台是使用 iframe 的方式，当一个应用的高度比较长的时候，需要滚动屏幕，那么有两种选择，一种是父级窗口不产生滚动条，在子框架上产生滚动条，另外一种，就是及时的加长 iframe 框架的高度，让框架能够容纳里面的全部内容，从而子框架上可以不出现滚动条，那么就是父级窗口出现滚动条。

问题出在使用的一个叫 fancybox 的 jquery 插件上，这个插件的作用是生成一个浮层，可以用来显示一些图片组啊，或者地图，或者外部视频等等之类的内容，应该说，这个插件还是不错的，只可惜我们应用的场景比较奇葩。他生成的浮层窗口，是相对于当前页面的可视窗口部分居中的，这个特性在一般的情况下没有问题，但是，如果页面是被嵌在一个 iframe 中的话，那么，就会造成他计算出错，从而，浮层窗口是生成在框架页面的中间，如果框架页面很长的话，就会造成浮层窗口父级窗口的可视窗口以下，需要滚动父级窗口才能看到。

我本身前端也就是水一水的水平，遇到问题大概想了想，没有什么非常有把握的思路，于是就 google ，看到这里有讨论，https://groups.google.com/foru…，这位仁兄给了一个方法

I have the same problem: a page includes an iframe that is pretty long
and scrollable and inside that iframe I open a fancybox (which also
includes yet another iframe, but this is irrelevant here).
Fancybox calculates the center of the iframe inside which it has to
display itself and positions quite low on the screen because the
iframe is long.
I’d like it to be positioned in the center of the browser viewport
instead.
What I found to (somewhat) work is to use this callback when defining
the attributes of fancybox (using version 1.3.1):

                    'onComplete': function() {
                            $("#fancybox-wrap").css({
                            'top':'10px',
                            'left':'10px'
                    })}

It works – moves the fancybox where I want it inside the iframe, but
one problem is that it first shows it in the original position and
then repositions it which is mildly annoying.
I haven’t found a good way to show it in the position I want it when
it first gets drawn. Replacing ‘onComplete’ with ‘onStart’ doesn’t do
anything.
I guess one way would be to have somehow make it invisible on onStart
and then make it visible on onComplete when it has been repositioned.
Any suggestions would be appreciated!

思路倒也算是清晰易懂，可惜随后就被楼下的另一位仁兄踢馆了，囧

Not that obvious.
http://fancybox.net/faq No. 3 also says : “……. You can modify
FancyBox source to suit your needs”
And a fellow fancybox fan did try modifying it to his needs … see
below copy of the email (that I haven’t tried it yet but it makes
sense to me)

>forget about the iframe: Basically it
>would be great if we had another
>two public attributes …etc
let’s the developer answer what he thinks of your suggestions

***copy of email **************
hi JFK it work, ive tried it using just a simple tweak, using the on
load
example $(“a.sample”).trigger(“click”);

here what ive done;

in my iframe page i called the parent window with the href e.g.
onClick=”callMe(‘www.google.com‘)” or if pics “/images/pics.png”

and call this script in my parent page

in my parent html we right a decoy link (this one is from the example
on load fancybox)
******

这里牵扯到要修改父级窗口，这个在我们这个案例里自然是行不通的，而且我也没怎么看懂他的思路，不过我确实试了试前面的方法，是真的不行的，浮层窗口在单步调试可以被设置到上面来，但是一往下运行就又被自动居中了。

于是没办法，仔细的看了看插件的官网，http://fancybox.net/api ，api 文档，连后面的 tops 和 tricks 都看完了，还是没有解决问题，在官方的 FAQ 里面说道，

3. Can the script be called from an iframe?

This is not supported as FancyBox is attached to page body. You can modify FancyBox source to suit your needs

于是打算换一个思路，既然父级滚动条变化的时候，我们需要重新定位浮层窗口，那么直接取父级滚动条的属性就行了吧，甚至可以给父级窗口的滚动条上一个 OnScroll 事件，在这里看到类似的思路，http://hi.baidu.com/bing2liuli… ，可惜，试了一下，好像是不行的，于是上线问了问金泉，金泉给了官方的 js 的 sdk 的文档，http://wiki.open.qq.com/wiki/A… ，在其中有一个 api 是 http://wiki.open.qq.com/wiki/f… ，应该就是他了，不过，悲剧的在服务器上写代码，vim 用起啦真是各种痛苦啊，改着改着，代码就在 chrome 下乱了，明明页面上是有东西的，在 script 标签下居然变空白了，

而且单步跟也诡异

首先是在这里

按理说，单步下去，应该到下一个断点啊，但是，。。。。

神奇的地球还没完，继续单步，

让人不得不感叹，绳命，是入刺的井猜