href=”javascript:void(0);” 設定無作用連結 – a 標籤 href 不作任何動作

有時候我們需要用a標籤去綁定一些Javascript or JQuery事件,不是真的要做為連結之用,但是a標籤又必需設定 href , 這時大部份人就會在href加#號,但其實加#號仍然是連結,等同換了另一頁,網址末端也會加上#號(如:http://www.aaa.com#),這並不是最理想的狀況,我們不希望它做任何動作,以下寫法a標籤緊會執行javascript的事件,除此之外不會有其他動作。我們也可以比較以下兩種寫法的差異。

javascript 寫在行內

<!-- A標籤還是有動作 -->
<a href="#" onclick="alert('hello')">沒有作用</a>

<!-- A標籤不會有任何動作 -->
<a href="javascript:void(0);" onclick="alert('hello')">沒有作用</a>

jQuery解法

html:

<a href="#">沒有作用</a>

jQuery

/**
* VECTOR COOL
* https://vector.cool
*/
$(document).ready(function(e) {
    $('a').click(function(e){
	e.preventDefault();
    });
});

 [……]

閱讀更多

JQuery 1.9+ 之後 $.browser 無法使用(解決方法)

官網文件上指出 jQuery.browser 這物件在 jQuery 1.9 中被刪除,現在只能用 jQuery.migrate plugin. 才有辦法使用,如果我沒說錯的話 jQuery.migrate plugin. 就是新舊版本交替,可能會產生很多問題的一個過渡的工具,不然以前使用 jQuery.browser 判斷瀏覽器寫出來的plugin不就都死光光,我剛試了一下,加上jQuery.migrate plugin.就沒問題,沒加就掛點了。

這又回到一個很可怕的議題了,當網站大量使用第三方API或framework,當版本越來越亂的時候,開始不向下相容的時候,當初以此來開發的專案,就會變得非常難維護了,工程屍頭又要抱著燒了。

jQuery.migrate plugin.下載
http://jquery.com/download/

直接引用
<script src=”http://code.jquery.com/jquery-1.10.1.min.js”></script>
<script src=”http://code.jquery.com/jquery-migrate-1.2.1.min.js”></script>

官網原文
http://api.jquery.com/jQuery.browser/

[……]

閱讀更多

JQuery $.browser 判斷瀏覽器及瀏覽器版本

判斷瀏覽器
$(function() { 
if($.browser.msie) {
alert("this is msie");
} else if($.browser.safari) {
alert("this is safari!");
} else if($.browser.mozilla) {
alert("this is mozilla!");
} else if($.browser.opera) {
alert("this is opera");
} else {
alert("i don't konw!");
}
瀏覽器類型
msie    ie瀏覽器(Microsoft Internet Explorer)
safari  safari

mozilla firefox瀏覽器 opera opera

取得瀏覽器版本
$.browser.version
實例
<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript">
if($.browser.msie){//若是ie流覽器
alert("用的是Firefox,版本:"+$.browser.version);
//ie8以下的ie流覽器:$.browser.version返回是string(字串,用parseInt轉成number(數值)類型)
if(eval(parseInt($.browser.version))<8){
alert("IE版本小於8");
}
}else if($.browser.chrome){
alert("用的是Chrome版本:"+$.browser.version);
}else if($.browser.mozilla){
alert("用的是Firefox,版本:"+$.browser.version);
}else if($.browser.safari){
alert("用的是Chrome,版本:"+$.browser.version);
}else if($.browser.opera){
alert("用的是Opera,版本:"+$.browser.version);
}
</script>


延伸閱讀
JQuery 1.9+ 之後 $.browser 無法使用(解決方法)
http://vector888.blogspot.com/2013/08/jquery-browser.html

[……]

閱讀更多

PHP bmp 縮圖時產生 Call to undefined function imagecreatefrombmp() 解決方法

Fatal error: Call to undefined function imagecreatefrombmp()
其實PHP的確沒有 imagecreatefrombmp() 這個 function ,解決方法就是引入下列文件 ,就有imagecreatefrombmp()啦~解決~

點擊下載 imagecreatefrombmp.inc.php
https://docs.google.com/file/d/0B0WjmRBDYP2fZGl1U1dnMUpNdFk/edit?usp=sharing

但是輸出bmp的時候問題又來了,PHP bmp輸出的圖片無法開啟,
用magewbmp()這個function,很怪,
估狗了一下好像不只我有這種狀況,
有人是使用imagejpeg()來替代magewbmp()輸出,
沒辦法問題還是要解,我目前也是用者種方法,
若有高手剛好就知道有更好的解法請不吝與大家分享~謝謝

解決方法:
有人是使用imagejpeg()來替代magewbmp()輸出,
//magewbmp($image, $file ); //bmp輸出無法開啟
imagejpeg($image, $file , $quality );[……]

閱讀更多

PHP Imagetype 常數對應表

雖然我們常用的沒有那麼多~不過還是全部列出來囉~有需要的捧油請自行參考。

■藍色標記是我

1   IMAGETYPE_GIF
2   IMAGETYPE_JPEG
3   IMAGETYPE_PNG
4   IMAGETYPE_SWF
5   IMAGETYPE_PSD
6   IMAGETYPE_BMP 

7   IMAGETYPE_TIFF_II (intel byte order)
8   IMAGETYPE_TIFF_MM (motorola byte order)
9   IMAGETYPE_JPC
10 IMAGETYPE_JP2

11 IMAGETYPE_JPX
12 IMAGETYPE_JB2
13 IMAGETYPE_SWC
14 IMAGETYPE_IFF
15 IMAGETYPE_WBMP
16 IMAGETYPE_XBM
17 IMAGETYPE_ICO 

原文:http://php.net/manual/en/function.exif-imagetype.php[……]

閱讀更多

過濾script…等可能引入惡意內容或惡意改變顯示布局的代碼

//過濾 <script 等可能引入惡意內容或惡意改變顯示布局的代碼,如果不需要插入flash等,還可以加入<object的過濾
function filter_danger_code($str)
{
 $farr = array(
 “/s /”, //過濾多余的空白
“/<(/?)(script|iframe|style|html|body|title|link|meta|object|?|%)([^>]*?)>/isU”, //過濾 <script 等可能引入惡意內容或惡意改變顯示布局的代碼,如果不需要插入flash等,還可以加入<object的過濾
“/(<[^>]*)on[a-zA-Z] s*=([^>]*>)/isU”, //過濾javascript的on事件

);
 $tarr = array(
 ” “,
 “<\1\2\3>”, //如果要直接清除不安全的標簽,這里可以留空
“\1\2”,
 );

 $str = preg_replace( $farr,$tarr,$str);
 return $str;
}[……]

閱讀更多

CKEditor4 自動清除內容標籤問題的解決方法

CKEditor4 自動清除內容標籤

在CKEditor中我們經由配置檔Config.js,可以依照自己的需求去自定編輯器的工具
如下圖的每一個小方塊,可依需求增加減少:

但在 CKEditor 中 CKEDITOR.editor.filter 會過濾掉一些沒開放功能的內容或程式碼

舉例來說:

上面這編輯器並沒有開放 iframe 這功能,但倘若我想要貼上 youtube 分享的嵌入HTML碼,而 youtube 的 HTML 就是由 <iframe> 方式嵌入的,youtube嵌入的Code如下:

<iframe width="560" height="315" src="//www.youtube.com/embed/9ATcxIOeDiY" frameborder="0" allowfullscreen></iframe>

我們開啟原始碼的編輯模式,貼上這一段code,做嵌入影片的動作後,在切換回所見即所得編輯方式的同時CKEDITOR.editor.filter就會過濾掉一些沒開放功能的內容,如上圖沒開放的iframe工具,如此我們因為沒有開放iframe工具就沒有辦法貼入youtube的iframe嵌入碼,其實這很合理,某些時候是一種很棒的限制內容功能,不過有些時候這或許並不是我們想要的,我們可能希望可以在不提供iframe的工具下,僅能用原始碼貼上的方式貼入 youtube 的 iframe。

解決這問題 CKEditor 也提供了2個解決方法:

在 CKEditor 配置檔 Config.js 設定

方法一:

config.allowedContent=true;

把allowedContent設定為true就是吧CKEDITOR.editor.filter這功能關閉,不去過濾任何內容,這方式不只針對 iframe,而是所有不開放功能都不會再被過濾了,雖然很方便,但少了一層的限制或許會擔心安全性的問題,所以我們還有第二種方法可選擇。

方法二:

CKEDITOR.editor.filter仍然運作,但允許開放部份不支援功能

config.allowedContent=false;
config.extraAllowedContent='iframe';

便只允許iframe的操作,若允許的工具有多項就用空格分隔,如下

config.extraAllowedContent='b i iframe';

[……]

閱讀更多

CKEditor4 預設字體大小 fontSize_defaultLabel、預設字型 font_defaultLabel 無法運作的解決方案

我們想要設定編輯器中的預設字型及字體大小,依官方文件要設定下列2個屬性
config.font_defaultLabel = ‘Arial’;
config.fontSize_defaultLabel = ’12px’;
可是不知道是Bug還是怎樣,我試過是沒有效果的,
只是會自動選取對應的字型及字體大小的選單選項,
這並不是我們要的,
搞了我好久終於找到解決方案,如下:

1.依然要設定此2屬性:
config.font_defaultLabel = ‘Arial’;
config.fontSize_defaultLabel = ’12px’;

2.修改 contents.css

.cke_editable
{
font-size: 13px;
line-height: 1.6em;
}
改為
.cke_editable
{
font-size: 12pt;
font-family:Arial;
line-height: 1.6em;
}
存檔 > 清除暫存 > OK
預設字型跟字體大小就改變了,
目前我找到的解決方法就是直接去改它的預設CSS,
若有高手有更好的解決方法,希望能跟大家分享~謝謝[……]

閱讀更多

CKEditor4 重要配置設定 config.js (中文)

簡單的介紹一下 CKEditor

CKEditor是一個非常強大的HTML編輯器,舊稱FCKeditor,是一個專門使用在網頁上屬於開放原始碼所見即所得文字編輯器套件,2003年就開始累積很多用戶了,至今已經十年的時間了,我想很多開發人員對CKEditor這名字應該不陌生,CKEditor 主要優點而且相容於絕大部分的網頁瀏覽器,該有的功能全都有,也提供非常多的配置及API可以符合各種不同的開發需求,而且最重要的是免費的^^,除此之外官網上也提供了非常多相關的使用範例,還有非常詳細的開發文件可讓開發者更了解使用方式,但此篇文章主要不是介紹CKEditor,而是介紹CKEditor的基本配置Config檔的設定。

CKEditor4的設定有些地方好像跟之前板本不太一樣,那本文介紹的CKEditor4的這個版本,所以測試環境請以CKEditor4為準,CKEditor4可至官網下載,也可由下方連結下載。

CKEditor 相關資源

CKEditor 官方網站
http://ckeditor.com/

CKEditor 下載
http://ckeditor.com/download

CKEditor DEMO
http://ckeditor.com/demo

CKEditor 開發文件
http://docs.ckeditor.com/

CKEditor 開發文件 > config
http://docs.ckeditor.com/#!/api/CKEDITOR.config

重要配置說明如下,主要分為工具列、基本設定、選單設定三大部份~

工具列配置:

基本設定:

關於WORD文字設定

設定選單:

(註一)
解決方法詳見我的另一篇文章
CKEditor4 預設字體大小 fontSize_defaultLabel、預設字型 font_defaultLabel 無法運作的解決方案
http://vector888.blogspot.com/2013/08/ckeditor4-fontsizedefaultlabel.html

(註二)
config.allowedContent;
config.extraAllowedContent;
詳細介紹及用法,詳見我的另一篇文章
CKEditor4 自動清除內容標籤問題的解決方法
http://vector888.blogspot.com/2013/08/ckeditor4.html

[……]

閱讀更多