鮪魚的程式筆記和雜七雜八: javascript

網頁判斷手機開啟時切換到手機版js語法

參考來源

現在很多網站都要有手機版的網頁了，但是以前的網頁要怎麼辦呢?? ..

因為目前有分二種形態的網站~~

有一種是同一頁網頁做縮放的動作就會因寬度去改變網站的類型…

有一種是電腦版網頁和手機版網頁是分開來的，但目前比較多是分開來的…

因為以前做的電腦版網站還是會留下來，然後在另外做一個手機版的網站…

今天就是要做一個手機版網站，然後在之前的電腦版網站加入可以判斷的語法，才能轉到手機版的網頁哦…

非常的簡單，但還是要懂基本的語法哦…

複製以上的語法，可以直接貼在"<head> </head>"之間，然後把程式裡的 “http://cynet.tw/mobile/" 這一段網址，改成要轉去的頁面哦…

經過測試後，HTC、三星、IPhone 的手機瀏覽網站都可以順利的轉換網址成功哦…

各種列印按鈕參考，單純列印時原則上會用第一種，第二種在預覽頁應該再做個列印按鈕較為洽當。

參考網站

ABOUT：想做一各A網頁,裡頭有一各列印按鈕,當我按下後,能列印出B網頁的內容

利用框架(一般框架or內置框架都可以，但須指派id)
下面為範例：

假設有個內置框架，HTML為：
<iframe name="PrintFrame" id="PrintData" src="aaa.htm">

而A網頁，給他一個暗鈕，當使用者按下按鈕之後，就會跳出列印對話框，但列印出來的內容是B網頁的資料. . .
<input type=button onClick="PrintData.focus(); print();" >

ABOUT：用 Java Script 列印網頁中指定的圖層

因為不希望把網頁中所有的東西都列印，尤其是有頁框 or MasterPage的時候，用以下語法可指定僅列印網頁中某一圖層內容(<DIV>)
分為三個部份：

一、網頁 print.aspx，加入一個HTML產生的button，並在onclick指定欲執行的JS片段

<input id="btnPrint" type="button" value="列印成績" onclick="printScreen(printlist)"/>

接著新增一個圖層標籤，在此命名為 printlist

<div id="printlist">
            <table style="width: 750px">
            <tr>
                <td>
                    欄位一
                </td>
                <td style="width: 150px">
                    欄位二</td>
            </tr>
            <tr>
                <td colspan="2">
                    可以把GirdView放在這裡來列印
                </td>
            </tr>
            <tr>
                <td colspan="2">
                     </td>
            </tr>
            <tr>
                <td colspan="2">
                    表尾</td>
            </tr>
            </table>
    
</div>

二、網頁程式 print.aspx.cs，在Page_Load時載入JS檔
protected void Page_Load(object sender, EventArgs e) { Page.ClientScript.RegisterClientScriptInclude("myPrint", "Print.js"); } 三、JS檔內容

function printScreen(printlist)
{
var value = printlist.innerHTML;
var printPage = window.open("","printPage","");
printPage.document.open();
printPage.document.write("<HTML><head></head><BODY onload='window.print();window.close()'>");
printPage.document.write("<PRE>");
printPage.document.write(value);
printPage.document.write("</PRE>");
printPage.document.close("</BODY></HTML>");
}

ABOUT：自動列印與分頁列印

設計網頁的時候, 通常考慮到的是 '讓瀏覽者賞心悅目' 的排版問題。
如果瀏覽者打算列印你的網頁, 或是你的網頁利用資料庫處理了一些資料,
準備製成報表, 這時便會遇到分頁的問題。

怎麼樣讓網頁於列印時自動分成適當的頁數呢？
其實有個簡單的指令, 馬上能讓你達成心願。
這個指令是:

<P style='page-break-after:always'></P>
雖然這是 HTML 的 css 而非 Javascript 的指令, 不過配合網頁進入時
所啟動的 Javascript 的 window.print() 印表機交談視窗指令,
更能讓網頁的列印方便許多！

列印 Html 網頁時的強制換頁方式

透過 CSS 的 Pagebreak 來處理列印 Html 強制換頁。

在標籤後換頁 { page-break-after: always }
在標籤前換頁 { page-break-before: always }

於文件加入語法 :

<P style="page-break-after:always"> </P>

ABOUT：Java Script呼叫IE列印與預覽列印(區塊列印集區塊預覽列印)

整頁列印:html部分:
<INPUT TYPE="button" value="整頁列印" onclick="print()">

Javascript部分:
N/A

部分列印(只列印div包起來的網頁):
html部分:

<div id="block">
<P><img id=”ruten” name=”ruten” SRC=”http://www.ruten.com.tw/imgs/2008/logo.gif”></P>
</div>
<input type=”button” value=”部分列印” onclick=”printScreen(block)”>

Javascript部分:
//列印div包起來的部分並且列印完畢後自動關閉列印網頁

function printScreen(block){
var value = block.innerHTML;
var printPage = window.open(”",”printPage”,”");
printPage.document.open();
printPage.document.write(”<HTML><head></head><BODY onload=’window.print();window.close()’>”);
printPage.document.write(”<PRE>”);
printPage.document.write(value);
printPage.document.write(”</PRE>”);
printPage.document.close(”</BODY></HTML>”);
}

整頁預覽列印：
html部分:

<OBJECT classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2" height=0 id=wb name=wb width=0></OBJECT>
<INPUT TYPE=”button” value=”整頁預覽” onclick=”javascript:wb.execwb(7,1)”>

Javascript部分:
N/A

部分預覽列印(只預覽div包起來的部份)：
html部分:

<div id="block">
<P><img id=”ruten” name=”ruten” SRC=”http://www.ruten.com.tw/imgs/2008/logo.gif”></P></div>
<input type=”button” value=”區塊預覽” onclick=”previewScreen(block)”>

Javascript部分:
//預覽div包起來的部分並且列印完畢後自動關閉列印網頁

function previewScreen(block){
var value = block.innerHTML;
var printPage = window.open(”",”printPage”,”");
printPage.document.open();
printPage.document.write(”<OBJECT classid=’CLSID:8856F961-340A-11D0-A96B-00C04FD705A2′ height=0 id=wc name=wc width=0></OBJECT>”);
printPage.document.write(”<HTML><head></head><BODY onload=’javascript:wc.execwb(7,1);window.close()’>”);
printPage.document.write(”<PRE>”);
printPage.document.write(value);
printPage.document.write(”</PRE>”);
printPage.document.close(”</BODY></HTML>”);
}

鮪魚的程式筆記和雜七雜八

2021年5月6日星期四

網站繁簡切換

2015年7月19日星期日

網頁自動切換手機版語法(js)

2015年3月19日星期四

JS列印語法

2011年11月28日星期一

利用js攔截鍵盤事件

標籤

網誌存檔

2021年5月6日 星期四