JavaScript代碼嵌入HTML的方法、及兩者的在執(zhí)行流程上的細(xì)微區(qū)別

了執(zhí)行Javascript，需要在HTML文件內(nèi)以特定的方式書(shū)寫JavaScript的代碼，JavaScript的書(shū)寫方法有多種，其執(zhí)行的流程也各不相同：

1 <script>標(biāo)簽嵌入

此種嵌入方法無(wú)法操作<script>之后的DOM元素。因?yàn)?lt;script>之后的DOM元素還未構(gòu)造，因此在<script>標(biāo)簽內(nèi)就無(wú)法取得位于其后的DOM元素。

2 讀取外部JavaScript文件

此種嵌入方法可以指定defer、async屬性。defer可以推遲執(zhí)行，async可以異步執(zhí)行。

3 onload嵌入

此種嵌入方法在頁(yè)面讀取完后再對(duì)其執(zhí)行，所以可以對(duì)所有的DOM元素操作。

<body onload="alert('hello')">
window.onload = function(){alert('hello');};

當(dāng)window.onload事件觸發(fā)時(shí)，頁(yè)面上所有的DOM、樣式表、腳本、圖片、flash都已經(jīng)加載完成了。

//window.onload不能同時(shí)編寫多個(gè)。
//以下代碼無(wú)法正確執(zhí)行，結(jié)果只輸出第二個(gè)。
window.onload = function(){
  alert("test1");
};

window.onload = function(){
  alert("test2");
};

//$(document).ready()能同時(shí)編寫多個(gè)
//結(jié)果兩次都輸出
$(document).ready(function(){ 
   alert("Hello World"); 
}); 
$(document).ready(function(){ 
   alert("Hello again"); 
});

window.onload和body中onload也有些許區(qū)別：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.js"></script>
    <script language="javascript">
        window.onload = haha;
        function haha(){console.log("window.onload");}

        if(document.addEventListener){
            function DOMContentLoaded(){
                console.log("DOMContentLoaded");
            }
            document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
        }</script>
</head>
<body onload="console.log('bodyonload');">
        <div id="div1">a</div>
</body>
</html>

在IE10和FireFox下，結(jié)果為：

"DOMContentLoaded"
"bodyonload"

說(shuō)明body中的onload會(huì)覆蓋window.onload

在chrome下，結(jié)果為：

DOMContentLoaded
window.onload
bodyonload

然后，如果把javascript代碼移到最下面，結(jié)果又會(huì)是什么樣呢？

chrome和IE10、FireFox的結(jié)果竟然是一樣的：

DOMContentLoaded
window.onload

IE 10、Fire Fox可以理解，window.on load和body中的 on load 誰(shuí)在下面就是誰(shuí)覆蓋誰(shuí)，只會(huì)執(zhí)行后面的那個(gè)。

4 DOM ContentLoaded嵌入

onload方法可能需要等待時(shí)間，而本方法可以在完成HTML解析后發(fā)生的事件，減少等待時(shí)間。

在chrome、IE10和FireFox中，執(zhí)行結(jié)果是：DOMContentLoaded然后才是onload的輸出。所以說(shuō)一般情況下，DOMContentLoaded事件要在window.onload之前執(zhí)行，當(dāng)DOM樹(shù)構(gòu)建完成的時(shí)候就會(huì)執(zhí)行DOMContentLoaded事件。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript" src="jquery2.js"></script>
    <script language="javascript">
        window.onload = haha;
        function haha(){console.log(document.getElementById("div1"));}
        if(document.addEventListener){
            function DOMContentLoaded(){
                console.log("DOMContentLoaded");
            }
            document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
        }
    </script>
</head>
<body>
    <div id="div1">a</div>
</body>
</html>

如果你是個(gè)jQuery使用者，你可能會(huì)經(jīng)常使用$(document).ready();或者$(function(){})，這都是使用了DOMContentLoaded事件

5 動(dòng)態(tài)載入JavaScript文件

5.1 使用原生js方法

動(dòng)態(tài)創(chuàng)建script標(biāo)簽，并指定script的src屬性

function loadJs(url, callback) {
    var script = document.createElement('script');
    script.type = "text/javascript";
    if (typeof(callback) != "undefined") {
        if (script.readyState) {
            script.onreadystatechange = function() {
                if (script.readyState == "loaded" || script.readyState == "complete") {
                    script.onreadystatechange = null;
                    callback();
                }
            }
        } else {
            script.onload = function() {
                callback();
            }
        }
    }
    script.src = url;
    document.body.appendChild(script);
}
loadJs("test.js", function() {
    alert('done');
});

還可以使用同樣的原理動(dòng)態(tài)加載css文件，只不過(guò)插入的的父節(jié)點(diǎn)是head標(biāo)簽。

5.2 使用document.write/writeln(）方式

該種方式可以實(shí)現(xiàn)js文件的動(dòng)態(tài)加載，原理就是在重寫文檔流，這種方式會(huì)導(dǎo)致整個(gè)頁(yè)面重繪。

document.writeln("<script src=\"http://lib.sinaapp.com/js/jquery/1.6/jquery.min.js\"></script>");

需要注意的是特殊字符的轉(zhuǎn)義。

5.3 使用jQuery

使用getScript(url,callback)方法實(shí)現(xiàn)動(dòng)態(tài)加載js文件

$.getScript('test.js',function(){
    alert('done');
});

－End－

載說(shuō)明：原創(chuàng)不易，未經(jīng)授權(quán)，謝絕任何形式的轉(zhuǎn)載

有時(shí)候，我們希望使用 JavaScript 將文本以純文本形式粘貼到可編輯內(nèi)容元素中。

在本文中，我們將討論如何使用 JavaScript 將文本以純文本形式粘貼到可編輯內(nèi)容元素中。

使用JavaScript將文本粘貼為純文本到可編輯內(nèi)容元素中

我們可以通過(guò)監(jiān)聽(tīng)粘貼事件并修改粘貼行為，將純文本粘貼到可編輯內(nèi)容元素中。

例如，如果我們有以下的 div 元素：

<div contenteditable>
</div>

然后，我們可以通過(guò)監(jiān)聽(tīng)粘貼事件來(lái)修改粘貼行為：

// 獲取可編輯的 div 元素
const editor = document.querySelector('div');

// 監(jiān)聽(tīng)粘貼事件
editor.addEventListener("paste", (e) => {
  e.preventDefault(); // 阻止默認(rèn)粘貼行為

  // 獲取粘貼的純文本內(nèi)容
  const text = e.clipboardData.getData('text/plain');

  // 將純文本插入到可編輯元素中
  document.execCommand("insertHTML", false, text);
});

當(dāng)你需要在可編輯的內(nèi)容元素中以純文本形式粘貼文本時(shí)，你可以使用上述代碼來(lái)實(shí)現(xiàn)。讓我逐步解釋每一部分的作用：

1. 首先，我們通過(guò) `document.querySelector('div')` 獲取到一個(gè)可編輯的 `<div>` 元素，這個(gè)元素將用于粘貼操作。

2. 然后，我們使用 `editor.addEventListener("paste", (e) => { ... });` 添加一個(gè)粘貼事件監(jiān)聽(tīng)器。這意味著當(dāng)用戶嘗試粘貼內(nèi)容時(shí)，我們將執(zhí)行指定的操作。

3. 在事件監(jiān)聽(tīng)器的函數(shù)內(nèi)部，`e` 是代表事件對(duì)象的參數(shù)。我們使用 `e.preventDefault();` 來(lái)阻止瀏覽器默認(rèn)的粘貼行為，以便我們能夠自行處理粘貼操作。

4. `e.clipboardData.getData('text/plain')` 這行代碼用于從剪貼板中獲取純文本內(nèi)容。`e.clipboardData` 是一個(gè)包含剪貼板數(shù)據(jù)的對(duì)象，我們使用 `getData('text/plain')` 方法來(lái)獲取純文本數(shù)據(jù)。

5. 最后，我們使用 `document.execCommand("insertHTML", false, text);` 將獲取到的純文本內(nèi)容插入到可編輯元素中。`insertHTML` 是一個(gè)命令，它允許我們將指定的 HTML 或文本插入到文檔中。第三個(gè)參數(shù) `text` 是要插入的內(nèi)容。

綜合起來(lái)，當(dāng)用戶在可編輯元素中粘貼內(nèi)容時(shí)，粘貼事件會(huì)觸發(fā)。代碼阻止默認(rèn)的粘貼行為，然后從剪貼板中獲取純文本數(shù)據(jù)，并將它以純文本的形式插入到可編輯的 `<div>` 元素中，實(shí)現(xiàn)了將文本粘貼為純文本的效果。

結(jié)論

通過(guò)監(jiān)聽(tīng)粘貼事件并修改粘貼行為，我們可以將純文本粘貼到可編輯內(nèi)容元素中。

由于文章內(nèi)容篇幅有限，今天的內(nèi)容就分享到這里，文章結(jié)尾，我想提醒您，文章的創(chuàng)作不易，如果您喜歡我的分享，請(qǐng)別忘了點(diǎn)贊和轉(zhuǎn)發(fā)，讓更多有需要的人看到。同時(shí)，如果您想獲取更多前端技術(shù)的知識(shí)，歡迎關(guān)注我，您的支持將是我分享最大的動(dòng)力。我會(huì)持續(xù)輸出更多內(nèi)容，敬請(qǐng)期待。

能在 JavaScript 中創(chuàng)建一個(gè) HTML 元素嗎？答案是肯定的，你可以在 JavaScript 中創(chuàng)建一個(gè)元素讓我們看看如何？

如果你想在 JavaScript 中創(chuàng)建一個(gè) div 元素——

要在 JavaScript 中創(chuàng)建新元素，我們使用 document.createElement('div')，而不是 div，您可以分配任何 html 標(biāo)簽，例如 p、h1、h2、h3 等，如果您分配 p 標(biāo)簽，它將創(chuàng)建一個(gè) p 標(biāo)簽。

現(xiàn)在，如果你想給它上一堂課，你可以做到——

為了給我們的新 div 一個(gè)類，我們使用 variablename.className = ‘class_name’ ，如上所示。

現(xiàn)在你也可以給它 id —

為了給 newdiv 一個(gè) id，我們的代碼是 variablename.id = ‘id_name’;

現(xiàn)在讓我們看看我們的輸出

現(xiàn)在，從上面的代碼中，我創(chuàng)建了一個(gè)帶有類容器和 id newElement 的 div 元素。

還有另一種方法可以在標(biāo)簽上設(shè)置 class 、 id 、 title 、 name ，讓我們來(lái)看看。

在這里，我定義了 setAttribute() 并在括號(hào)內(nèi)首先定義了標(biāo)題，然后定義了標(biāo)題的名稱。除了標(biāo)題，您可以指定類、id 或任何名稱

現(xiàn)在我們來(lái)看看我們的輸出

您可以清楚地看到，在 div 標(biāo)簽內(nèi)，我們的代碼添加了標(biāo)題，即“新 div”。

現(xiàn)在如果你想在 div 標(biāo)簽內(nèi)添加內(nèi)容怎么辦？例如，在我的 div 元素中，我想添加 Hello medium reader！我怎樣才能做到這一點(diǎn)？下面來(lái)看看吧。

在上面的代碼中，我使用 document.createTextNode() 將我的文本分配給變量?jī)?nèi)容，因此 TextNode 用于為我們的元素提供文本。

所以，我們已經(jīng)成功地向我們的 div 元素添加了一個(gè)文本。

現(xiàn)在，最重要的是，如果您想將內(nèi)容插入現(xiàn)有的 html 代碼以便在瀏覽器中看到它，您可以通過(guò) insertBefore(newNode, referenceNode) 來(lái)完成它的作用是在參考節(jié)點(diǎn)之前插入您的節(jié)點(diǎn)。

所以在這里我從上面的 html 代碼中創(chuàng)建了一個(gè)帶有類容器和 h1 標(biāo)簽的 div 元素。

現(xiàn)在，我定義了一個(gè)名為 maindiv 的變量，并將其分配給具有類容器的 div 元素，并定義了一個(gè)變量 h1 并為其分配了 h1 標(biāo)記。

現(xiàn)在，為了插入我們的節(jié)點(diǎn)，我使用了 inserbefore(newNode, referenceNode) ，其中 newNode 是必須插入的節(jié)點(diǎn)，即我們的 newdiv ，參考節(jié)點(diǎn)是要在其之前插入 newNode 的節(jié)點(diǎn)，即我們的 h1 標(biāo)記。

所以從上面的輸出你可以看到我們已經(jīng)成功地在瀏覽器中顯示了我們的 div 內(nèi)容。

JavaScript 是一種非常有效的語(yǔ)言，你可以在 JavaScritp 中做很多事情，這些只是它的基礎(chǔ)。

謝謝你

在線咨詢

上一篇：善用Axure寫PRD，如何生成適配手機(jī)的原型
下一篇：筆記篇-如何靈活地使用HTML標(biāo)簽？

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商