聚會時間公告: 因應COSCUP 2011, Kalug 8月份休會一次

五月 7, 2010

小惡魔AppleBOY
AppleBOY
小惡魔 - 電腦技術 - 工作筆記 - AppleBOY is about »

tag cloud

» [筆記] iframe 父頁子頁呼叫函式 parent call function

紀錄 iframe 如何呼叫子頁或者是父頁函式，iframe 在現今 Web 2.0 時代已經不流行了，因為有很多問題的存在，例如對於 SEO 搜尋引擎也沒有幫助，但是也是很多人在使用，底下筆記心得，說不定之後會 google 到自己的文章，哈哈。

父頁(主視窗)呼叫子頁函式：

/* iframeID 是 iframe ID*/
window.iframeID.formSubmit();
/* ifr 是 iframe ID */
document.getElementById('ifr').contentWindow.formSubmit();

子頁(iframe)呼叫父頁(主視窗)函式：

parent.formSubmit();

如果有兩層

parent.parent.formSubmit();

注意 timing issue，等 iframe 視窗 load 完之後才可以呼叫 iframe function。至於如果取主視窗跟 iframe 的變數 value，可以利用 jQuery $(”#ID”) 方式來得到。

reference:
【程式】JS : parent , iframe function call
Access child function from iframe

Related View

by appleboy at 4:13 PM under html , javascript (Comments)
四月 5, 2010

小惡魔AppleBOY
AppleBOY
小惡魔 - 電腦技術 - 工作筆記 - AppleBOY is about »

tag cloud

» [CSS] IE 6, 7, 8 FireFox hack 支援透明背景圖 background or img javascript

先前在國外部落格發現一篇非常好用的教學：Quick Tip: How to Target IE6, IE7, and IE8 Uniquely with 4 Characters，裡面有提供一部教學影片，非常好用，也很實在，底下可以先看影片，看完大概就可以針對 IE, FireFox, Chrome 進行 CSS Hack。

目前網頁製作，要符合多瀏覽器跨平台(IE, Safari, Chrome, FireFox…等)，就必須動到 CSS Hack，雖然 Google 已經宣稱不支援 IE6，但是很多單位，很多學校跟客戶都是使用 IE6 瀏覽器，不只國內這樣，國外大廠也都希望支援 IE 系列，包含 IE6, IE7, IE8，這時候就必須知道如何分別針對各種不同 IE 做設定，底下就來看看實做例子。

包含 IE8 底下瀏覽器

先看底下例子：

body {
 color: red; /* all browsers, of course */
 color : green\9; /* IE8 and below */
}

請注意 color 後面的 \9，這是 IE only 的 tag，不可以任意修改，只有 IE 瀏覽器可以讀取，請勿修改成 \IE 或者是 \8 這些都是不對的，您會發現IE8,IE7,IE6 所有文字顏色都是綠色，但是 FireFox 是紅色。

包含 IE7 底下瀏覽器

先看底下例子：

body {
 color: red; /* all browsers, of course */
 color : green\9; /* IE8 and below */
 *color : yellow; /* IE7 and below */
}

上面例子可以發現，重點是在 *color 前面的 *，只有 IE7 跟其版本底下才看的到效果，上面程式碼會得到，FireFox Chrome 瀏覽器字型顏色是紅色，IE8 會是綠色，IE7 則是黃色。

包含 IE6 底下瀏覽器

先看底下例子：

body {  
 color: red; /* all browsers, of course */  
 color : green\9; /* IE8 and below */  
 *color : yellow; /* IE7 and below */  
 _color : orange; /* IE6 */  
}

可以發現 _ 是屬於 IE6 所認得的字元，全部瀏覽器會是紅色，IE8 會是綠色，IE7 會是黃色，IE6 會是橘色，這些都是 CSS Hack 的方法，大家可以注意到本篇重點就是在 \9 * _ 這三個符號，這三個符號針對了 IE8 IE7 IE6 這三個瀏覽器 CSS 的 Hack，也請大家注意優先權順序，如果把順序兌換，改成底下：

body {  
 color: red; /* all browsers, of course */  
 _color : orange; /* IE6 */
 *color : yellow; /* IE7 and below */
 color : green\9; /* IE8 and below */  
}

可以去看看會出現什麼結果？

IE6 Png 透明背景修正，以及 background-image filter

大家都知道 IE6 不支援透明背景 PNG 圖檔，所以網路上有很多解法，一種就是針對 img tag 做處理，另一種就是設定在 css background 的 IE6 filter，底下提供兩種不同狀況解法，第一種是 js 修改 img tag PNG 圖檔：這是網路上寫好的 js 檔案

/*
 
Correctly handle PNG transparency in Win IE 5.5 & 6.
http://homepage.ntlworld.com/bobosola. Updated 18-Jan-2006.

Use in <HEAD> with DEFER keyword wrapped in conditional comments:
<!--[if lt IE 7]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->

*/

var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])

if ((version >= 5.5) && (document.body.filters))
{
   for(var i=0; i<document.images.length; i++)
   {
      var img = document.images[i]
      var imgName = img.src.toUpperCase()
      if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
      {
         var imgID = (img.id) ? "id='" + img.id + "' " : ""
         var imgClass = (img.className) ? "class='" + img.className + "' " : ""
         var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
         var imgStyle = "display:inline-block;" + img.style.cssText
         if (img.align == "left") imgStyle = "float:left;" + imgStyle
         if (img.align == "right") imgStyle = "float:right;" + imgStyle
         if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
         var strNewHTML = "<span " + imgID + imgClass + imgTitle
         + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
         + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
         + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
         img.outerHTML = strNewHTML
         i = i-1
      }
   }
}

存檔之後，請在 header 中間加入底下：

<!--[if lt IE 7]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->

另一種就是 css 狀況解法：

#pic{
 background-image: none;
 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./images/test.png', sizingMethod='scale');
}

如果要針對 IE6 瀏覽器，請改寫為

#pic{
 background-image: url('./images/test.png');
 _background-image: none;
 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./images/test.png', sizingMethod='scale');
}

這樣就可以了。當然您可以針對 IE6 去 import 不同 CSS 檔案

<!--[if lt IE 7]>
 <style type="text/css">@import'ie6BradHack.css';</style>
<![endif]-->

另外就是要提一下 html 針對不同 IE 的 hack，這是微軟在 IE5 就開始支援的功能，在 html 註解都是使用 ，這是所有瀏覽器都看得懂得註解，那微軟針對 IE 有提供不同的方式來針對各種 IE 瀏覽器版本進行 Hack，例如底下：

<!--[if lt IE 7]>
 我是 IE6 才會執行
<![endif]-->
<!--[if IE]>
 IE 才會執行的內容
<![endif]-->
<!--[if gte IE 8]>
 只有IE8以上(包含IE8)才會執行內容
<![endif]-->
<!--[if !IE]>-->
 <p>您正在使用的瀏覽器不是 ie 。</p>
<!--<![endif]-->

大致上是這樣，如果有任何問題，可以提出來一起討論，CSS Hack 真是好玩 ^^。因為以前在學校常常被 IE6 折磨所整理出來的 Q&A。希望對於 CSS 愛好者有幫助。

reference:
Quick Tip: How to Target IE6, IE7, and IE8 Uniquely with 4 Characters
Conditional Comments [if IE] : IE 專用 (IE only) 條件式 HTML 註解的語法
IE6支援PNG透明背景 CSS設定

Related View

by appleboy at 4:44 PM under css , html , javascript (Comments)
A Feedjack powered Planet
• A Django site. •
• •