解决了Google Friend Connect无法显示的问题

三月 22nd, 2009 | 401 次阅读
Tags: web javascript Posted in Web :-)说点什么吧

      嵌入在我的blog的Google Friend Connect(GFC)之前一直有一个问题，就是无法在非FireFox浏览器里面显示其面板，都是留下一个空白的框框。

      今天经过多次修改GFC的代码布局并在IE8、Chrome、FF三个浏览器之间进行多次对比，终于发现了这个问题的根源，其实是因为GFC的javascript代码是在整个页面的布局固定之前就开始执行的，而当页面整个onload之后，执行的javascript会使得用来装GFC的容器产生一定的位移，因此，必须将用来装入GFC的javascript代码放在调整容器布局的javascript代码之后执行。

      现在先看看未修改之前的onload函数:

   1:  <script type="text/JavaScript">
   2:  window.onload = function()
   3:  {
   4:  settings = {
   5:  tl: { radius: 5 },
   6:  tr: { radius: 5 },
   7:  bl: { radius: 5 },
   8:  br: { radius: 5 },
   9:  antiAlias: true,
  10:  autoPad: true,
  11:  validTags: ["div"]
  12:  }
  13:  var myBoxObject = new curvyCorners(settings, "nifty");
  14:  myBoxObject.applyCornersToAll();
  15:  var myBoxObject = new curvyCorners(settings, "meta");
  16:  myBoxObject.applyCornersToAll();
  17:  var myBoxObject = new curvyCorners(settings, "sidebar");
  18:  myBoxObject.applyCornersToAll();
  19:  }
  20:  </script>

      这里可以看出，这段javascript代码明显修改了一下页面布局，而我们就必须在window.onload函数的尾部将GFC的javascript代码加上：

   1:  var skin = {};
   2:  skin['HEIGHT'] = '380';
   3:  skin['BORDER_COLOR'] = '#cccccc';
   4:  skin['ENDCAP_BG_COLOR'] = '#e0ecff';
   5:  skin['ENDCAP_TEXT_COLOR'] = '#333333';
   6:  skin['ENDCAP_LINK_COLOR'] = '#0000cc';
   7:  skin['ALTERNATE_BG_COLOR'] = '#ffffff';
   8:  skin['CONTENT_BG_COLOR'] = '#ffffff';
   9:  skin['CONTENT_LINK_COLOR'] = '#0000cc';
  10:  skin['CONTENT_TEXT_COLOR'] = '#333333';
  11:  skin['CONTENT_SECONDARY_LINK_COLOR'] = '#7777cc';
  12:  skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#666666';
  13:  skin['CONTENT_HEADLINE_COLOR'] = '#333333';
  14:  google.friendconnect.container.setParentUrl('/');
  15:  google.friendconnect.container.renderMembersGadget(
  16:   { id: 'div-1237576151678',
  17:     site: '04179541276018860442' },
  18:    skin);

     对，就只加上这一段用来在容器中添入GFC内容的代码，至于GFC的其他代码该呆在哪就呆在哪：那里是你想将GFC放置的位置。

      PS：如果你的页面上有多个GFC组件的话，有一段代码是不用重复加的，就是这一段：

   1:  <!-- Include the Google Friend Connect javascript library. -->
   2:  <script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>

 

      顺便在这里鄙视一下IE和Chrome，怎么能移动一下布局就把javascript生成的内容清空呢？

      同时也号召一下大家加入我blog的Google Friend Connect～哈哈～

(原创文章，转载请注明原文链接：http://www.javayu.com?p=7405)

Relate Posts:// 相关文章

[ZT]一个爆强的日期正则表达式»
«本站开始启用新域名

“解决了Google Friend Connect无法显示的问题” 共有5条留言

  1. Link On 2009-03-22 at 18:17

    此贴不顶枉为人啊～～～

  2. HP On 2009-03-23 at 02:29

    @Link 言重了～言重了～

  3. d On 2009-05-08 at 08:14

    d

  4. CheonNii On 2009-12-03 at 02:19

    我的问题正好跟你相反
    其他浏览器全部OK，就是FF显示空白的框框。
    希望得到解决方法。

  5. timmy On 2010-05-20 at 12:42

    onload函数在哪？博主没说清楚

我要留言

7+10=