javaScript寫水印js過程中window物件的屬性丟失問題

阿新 • • 發佈：2019-01-20

/**
 * 
 *
 * @author       caiwei
 * @version      1.0
 * @created      2017-09-21 16:12:06
 * @since        1.0
 **/

function watermark(settings) {
    //預設設定
    var defaultSettings = {
        watermark_txt: "text",
        watermark_x: 20,//水印起始位置x軸座標
        watermark_y: 20,//水印起始位置Y軸座標
        watermark_rows: 20,//水印行數
        watermark_cols: 20,//水印列數
        watermark_x_space: 100,//水印x軸間隔
        watermark_y_space: 50,//水印y軸間隔
        watermark_color: '#000000',//水印字型顏色
        watermark_alpha: 0.3,//水印透明度
        watermark_fontsize: '18px',//水印字型大小
        watermark_font: '微軟雅黑',//水印字型
        watermark_width: 120,//水印寬度
        watermark_height: 80,//水印長度
        watermark_angle: 15//水印傾斜度數
    };
    //採用配置項替換預設值，作用類似jquery.extend
    if (arguments.length === 1 && typeof arguments[0] === "object") {
        var src = arguments[0] || {};
        for (key in src) {
            if (src[key] && defaultSettings[key] && src[key] === defaultSettings[key])
                continue;
            else if (src[key])
                defaultSettings[key] = src[key];
        }
    }

    var oTemp = document.createDocumentFragment();

    //獲取頁面最大寬度
    var page_width = Math.max(document.body.scrollWidth, document.body.clientWidth);
    //獲取頁面最大長度
    var page_height = Math.max(document.body.scrollHeight, document.body.clientHeight);

    //如果將水印列數設定為0，或水印列數設定過大，超過頁面最大寬度，則重新計算水印列數和水印x軸間隔
    if (defaultSettings.watermark_cols == 0 ||
        (parseInt(defaultSettings.watermark_x
            + defaultSettings.watermark_width * defaultSettings.watermark_cols
            + defaultSettings.watermark_x_space * (defaultSettings.watermark_cols - 1))
            > page_width)) {
        defaultSettings.watermark_cols =
            parseInt((page_width
                - defaultSettings.watermark_x
                + defaultSettings.watermark_x_space)
                / (defaultSettings.watermark_width
                    + defaultSettings.watermark_x_space));
        defaultSettings.watermark_x_space =
            parseInt((page_width
                - defaultSettings.watermark_x
                - defaultSettings.watermark_width
                * defaultSettings.watermark_cols)
                / (defaultSettings.watermark_cols - 1));
    }
    //如果將水印行數設定為0，或水印行數設定過大，超過頁面最大長度，則重新計算水印行數和水印y軸間隔
    if (defaultSettings.watermark_rows == 0 ||
        (parseInt(defaultSettings.watermark_y
            + defaultSettings.watermark_height * defaultSettings.watermark_rows
            + defaultSettings.watermark_y_space * (defaultSettings.watermark_rows - 1))
            > page_height)) {
        defaultSettings.watermark_rows =
            parseInt((defaultSettings.watermark_y_space
                + page_height - defaultSettings.watermark_y)
                / (defaultSettings.watermark_height + defaultSettings.watermark_y_space));
        defaultSettings.watermark_y_space =
            parseInt((page_height
                - defaultSettings.watermark_y
                - defaultSettings.watermark_height
                * defaultSettings.watermark_rows)
                / (defaultSettings.watermark_rows - 1));
    }
    var x;
    var y;
    for (var i = 0; i < defaultSettings.watermark_rows; i++) {
        y = defaultSettings.watermark_y + (defaultSettings.watermark_y_space + defaultSettings.watermark_height) * i;
        for (var j = 0; j < defaultSettings.watermark_cols; j++) {
            x = defaultSettings.watermark_x + (defaultSettings.watermark_width + defaultSettings.watermark_x_space) * j;


            var mask_div = document.createElement('div');
            mask_div.id = 'mask_div' + i + j;
            mask_div.appendChild(document.createTextNode(defaultSettings.watermark_txt));
            //設定水印div傾斜顯示
            mask_div.style.webkitTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
            mask_div.style.MozTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
            mask_div.style.msTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
            mask_div.style.OTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
            mask_div.style.transform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
            mask_div.style.visibility = "";
            mask_div.style.position = "absolute";
            mask_div.style.left = x + 'px';
            mask_div.style.top = y + 'px';
            mask_div.style.overflow = "hidden";
            mask_div.style.zIndex = "9999";
            //mask_div.style.border="solid #eee 1px";
            mask_div.style.opacity = defaultSettings.watermark_alpha;
            mask_div.style.fontSize = defaultSettings.watermark_fontsize;
            mask_div.style.fontFamily = defaultSettings.watermark_font;
            mask_div.style.color = defaultSettings.watermark_color;
            mask_div.style.textAlign = "center";
            mask_div.style.width = defaultSettings.watermark_width + 'px';
            mask_div.style.height = defaultSettings.watermark_height + 'px';
            mask_div.style.display = "block";
            oTemp.appendChild(mask_div);
        }
    }
    document.body.appendChild(oTemp);
}

watermark({watermark_txt: "測試水印"});//傳入動態水印內容


//onload時觸發水印繪製
window.onload = function () {
    watermark({watermark_txt: "測試水印"});
};


//onresize時觸發水印繪製
window.onresize = function () {
    watermark({watermark_txt: "測試水印", watermark_width: 50})
};
var watermarkStr = window.parent.watermarkStr;//這裡的父視窗的watermarkStr是字串，在var watermarkStr 時雖然時全域性變數但是並未賦值，所以需要重新賦值
if (!watermarkStr) {
//可以ajax請求後端獲取水印資訊
    $.ajax({
        type: 'get',
        url: 'api/v1/system/sysInfo',
        data: 'json'
    }).then(function (res) {
        if (res.meta.status == 0 && res.data.waterFlag == 1) {
            watermarkStr = res.data;//水印資訊
        } else {
            watermarkStr = 'closed';
        }
    });
    if (watermarkStr != 'closed') {
        setTimeout(function () {
        //間隔兩秒填充水印
            watermark({watermark_txt: watermarkStr});
        }, 2000);
    }
}
window.parent.watermarkStr = watermarkStr;//此處很重要，否則在頁面嵌入iframe時，iframe的window.parent取不到watermarkStr
// 注意：JavaScript中物件屬性var 宣告的全域性屬性也即是window的屬性，在requirejs中 window.parent.watermarkStr = watermarkStr;這個程式碼 若沒有window.parent取不到watermarkStr屬性

javaScript寫水印js過程中window物件的屬性丟失問題

/** * * * @author caiwei * @version 1.0 * @created 2017-09-21 16:12:06 * @since 1.0 **/ function watermar

通過和看JavaScript中window物件parent、self、top的區別

<frameset>、<frame>、  <html> <head

讀書筆記----js中window物件

1. setTimeout() 指定一個函式在指定的毫秒數之後執行，單詞呼叫。 2. setInterval() 重複呼叫函式 3. location 表示該視窗中當前顯示的文件的URL，並定義了方法使視窗載入新的文件 window.locatio

HTML：js中Window物件的常用屬性：screen物件

Window物件的常用屬性： screen：有關客戶端的螢幕和顯示效能的資訊 history：有關客戶訪問過的URL的資訊 location：有關當前URL的資訊 closed：當視窗關閉是為真 document：視窗中當前

javaScript中window物件的方法和屬性

window物件是客戶端JavaScript最高層物件之一，只要開啟瀏覽器視窗，不管該視窗中是否有開啟的網頁，當遇到BODY、FRAMESET或FRAME元素時，都會自動建立window物件的例項。另外，該物件的例項也可由window.open()方法建立。

Activity中Window物件的建立過程

看過Activity原始碼的同胞應該知道，Activity就是對Window物件進行了一個包裝，裡面的很多操作實質是由Window來完成的，但是Window類是一個抽象類，那麼Activity裡面的Window屬性mWindow所引用的肯定不是Window物件本

JavaScript進階（二）window物件

前言本章學習JS的window物件的相關知識方法特別的,window物件不用new，直接進行使用即可，類似Math的使用方式，window關鍵字可以省略不寫。一、框

java8 stream是可以過程中向物件中放東西的

public static void main(String[] args) { List<Person> list = new ArrayList<>(); Person person;

老司機的分享：寫簡歷的過程中，都有哪些坑？

本人在甲方做招聘為主的工作，有7年多的時間，後來出來做獵頭公司，也有將近3年的時間，整天與簡歷、與人、與面試相關的流程打交道，總結了一些寫簡歷的經驗，分享如下，歡迎交流指正：（本人後續也會分享一些面試心得，歡迎關注）一、關於簡歷的排序一般而言，

jqeury validate(2): 將校驗規則寫到js程式碼中

required:true 必須有值 required:"#aa:checked"表示式的值為真，則需要驗證 required:function(){}返回為真，表時需要驗證後邊兩種常用於，表單中需要同時填或不填的元素 <!DOCTYPE html PUBLIC "-

寫MFC程式過程中的BUG記錄

關於_WDIR *轉 string _WDIR* patt; wstring ws(patt); _wchar轉char string str(ws.begin(),

【學習筆記】六：面向物件的程式設計——理解JS中的物件屬性、建立物件、JS中的繼承

　　ES中沒有類的概念，這也使其物件和其他語言中的物件有所不同，ES中定義物件為：“無序屬性的集合，其屬性包含基本值、物件或者函式”。現在常用的建立單個物件的方法為物件字面量形式。在常見多個物件時，使用工程模式的一種變體。 1.理解物件　　1）物件的屬性分兩種：資料屬性和訪問器屬性，每個型別的屬性都具有

像js函式中傳遞物件引數

知乎上的一個問題：http://www.zhihu.com/question/27114726

JS中訪問物件屬性的點表示法和方括號表示法

點表示法&&方括號表示法從功能上看，這兩種訪問物件屬性的方法沒有任何區別。但方括號語法的主要優點是可以通過變數來訪問屬性，例如： var propertyName = "name"; alert(person[propertyName]); //"Nich

使用Vue.js過程中，踩過的坑

最近學習了目前比較流行的前端框架——Vue.js。在使用的過程中，踩了一些坑，記錄在此。 1. 自定義的元件在使用時的命名 Vue.js中，可以將一些共通功能提取出來，做成一些通用的元件來使用。在使用元件時，要注意元件的命名。比如，

JS獲取當前window物件狀態

<html><head> </head><body onload="alert('文件載入完畢!');" onunload="alert('文件解除安裝完畢');" onBlur="alert('失去焦點');" onfocus=

使用js過程中遇到的小問題總結（隨使用情況不斷新增）

（1）拼接相同的兩個json串開發遇到問題背景：在查詢中使用combobox等easyui的控制元件，其data資料是由後臺取得的，預設想在取得的資料加上（---全部---）這樣的字樣（本來可以在後臺直接新增的，但是在新增彈框中還會用到這組資料，而這個時候就不需要有這個

JS迴圈中給物件新增事件addEventListener的用法

在做百度遷徙圖的時候遇到：迴圈中使用addEventListener方法，給各個marker物件增加點選事件，順便記錄下百度地圖的東西，整段程式碼都貼過來吧。。。。 // 百度地圖API功能 var map = new BMap.Map("allm

熟悉 js window 物件屬性和方法

熟練window物件的open、close、alert、confirm、prompt、setTimeout、clearTimeout、setInterval、clearInterval、moveBy、resizeBy、scrollBy方法的使用掌握window物件的moveTo、resizeTo、scroll

不用 eval 用查詢window物件屬性方式實現字串函式呼叫

在上文《js將字串作為函式名呼叫，實現input文字框等form表單元素回車鍵統一事件響應》中提到，因為eval()的安全性問題，建議不使用eval()，而使用其它更安全的方式實現。那麼eval()到底有哪細不足，應該如何更安全地實現？ 1、eval()是一個函式，看起來更像運算子1

javaScript寫水印js過程中window物件的屬性丟失問題

相關推薦