document.execCommand() 对象解析

合集下载

document对象的方法

document对象的方法document对象是DOM中的顶层对象，它代表整个HTML文档。

下面是一些常用的document对象的方法：1. getElementById(id)：根据元素的id属性获取对应的元素节点。

2. getElementsByClassName(class)：根据元素的class属性获取对应的元素节点列表。

3. getElementsByTagName(tag)：根据元素的标签名获取对应的元素节点列表。

4. querySelector(selector)：根据CSS选择器选择匹配的第一个元素节点。

5. querySelectorAll(selector)：根据CSS选择器选择匹配的所有元素节点。

6. createElement(tagName)：创建一个指定标签名的元素节点。

7. createTextNode(text)：创建一个包含指定文本内容的文本节点。

8. appendChild(node)：将一个节点添加到当前元素节点的子节点列表的末尾。

9. removeChild(node)：从当前元素节点的子节点列表中移除指定的节点。

10. replaceChild(newNode, oldNode)：将指定的新节点替换为当前元素节点的子节点列表中的指定旧节点。

11. cloneNode(deep)：创建当前节点的副本，并返回副本的引用。

12. getElementByTagNameNS(namespace, tagName)：根据指定的命名空间和标签名获取对应的元素节点列表。

13. createAttribute(name)：创建一个指定名称的属性节点。

14. createComment(text)：创建一个包含指定注释内容的注释节点。

15. createDocumentFragment()：创建一个空白的文档片段节点。

16. importNode(node, deep)：将指定的节点导入到当前文档中，并返回导入节点的引用。

Document对象详解

第一章文档中的对象
• 使用Document对象可以访问文档中的对象，文档中的对象包括HTML元素，超链接，锚点和图像等。
1.1 HTML元素
• 在javascript中，为Document对象定义了all 属性来访问文档中的所有HTML元素对象。 • 通过Document对象使用all属性，得到文档中的所有HTML元素对象组成的数组。因此所有对数组的操作都可以应用在all属性的结果。
第四章文档事件
• 在文档中有两个非常重要的事件，那就是鼠标事件和键盘事件。在鼠标事件和键盘事件中又有很多更加具体的事件。在前面的学习中已经知道，可以使用对象来调用它们，也可以将事件放在 body标记中，这些对前面学过的事件是可行的。 • 但是对于鼠标事件和键盘事件来说不可以了，因为这与浏览器有关。在ie浏览器中，只能把事件放在body标记中；在NN浏览器中，只能把事件通过对象来调用。
1.5表单
• 在javascript中，为document对象定义了forms属性来对文档中的表单进行操作，同样使用forms属性可以得打文档中所有表单的数组，使用数组的 length属性可以得到表单的个数，使用数组小标来得到特定的表单。 • 在实际应用中，通常都会为每个表单定义名称，所以都会使用表单名称来得到指定的表单。除了使用表单名称作为数组的索引外，还可以直接使用名称作为属性来使用，其基本形式为： • Document.formname
2.3 文档标题
• 在javascript中，为Document对象定义了 title属性来获得文档的标题。文档标题是文档中一个很小的知识点，在HTMl文件中 TITLE标记对中的就是文档的标题。前面已经讲到过，TITLE标记可以省略，但是文档的标题任然存在，知识为空。

document 对象_方法

document 对象_方法document 对象是 HTML 文档的根对象，它提供了许多方法来访问和操作文档的内容。

1. document.write() 方法document.write() 方法用于向文档中写入 HTML 代码。

它可以用来创建文档的结构，添加文本、图像、链接等元素。

html<!DOCTYPE html><html><head><title>Document Write Example</title></head><body><h1>Hello World!</h1><script>document.write("<p>This is a paragraph.</p>");</script></body></html>输出结果：html<!DOCTYPE html><html><head><title>Document Write Example</title></head><body><h1>Hello World!</h1><p>This is a paragraph.</p></body></html>2. document.getElementById() 方法document.getElementById() 方法用于根据ID 属性获取文档中的元素。

它返回一个指向该元素的引用，以便我们可以对其进行操作。

html<!DOCTYPE html><html><head><title>Get Element by ID Example</title></head><body><h1 id="heading">Hello World!</h1><script>var heading = document.getElementById("heading");heading.style.color = "red";</script></body></html>输出结果：html<!DOCTYPE html><html><head><title>Get Element by ID Example</title></head><body><h1 id="heading" style="color: red;">Hello World!</h1></body></html>3. document.getElementsByTagName() 方法document.getElementsByTagName() 方法用于根据标签名获取文档中的元素。

JAVASCRIPTDOCUMENT对象属性和方法

JAVASCRIPTDOCUMENT对象属性和方法JavaScript的Document对象是用于对HTML文档进行访问和操作的核心对象。

它提供了一系列属性和方法，用于获取、设置和操作文档的各个部分，包括元素、样式、事件等。

下面将介绍一些Document对象的常用属性和方法。

一、属性：1. document.documentElement：返回文档中的根元素，即<html>元素。

2. document.body：返回文档中的<body>元素。

3. document.head：返回文档中的<head>元素。

4. document.title：获取或设置文档的标题。

5. document.URL：获取当前文档的URL。

6. document.domain：获取或设置当前文档的域名。

7. document.forms：返回文档中所有的<form>元素，以HTMLCollection对象的形式返回。

8. document.links：返回文档中所有的<a>元素，以HTMLCollection对象的形式返回。

9. document.images：返回文档中所有的<img>元素，以HTMLCollection对象的形式返回。

10. document.scripts：返回文档中所有的<script>元素，以HTMLCollection对象的形式返回。

11. document.defaultView：返回当前文档关联的窗口对象。

12. document.styleSheets：返回文档中所有的样式表，以StyleSheetList对象的形式返回。

13. document.activeElement：返回当前文档中获得焦点的元素。

二、常用方法：1. document.getElementById(id)：根据元素id查找并返回第一个匹配的元素。

js刷新当前页面的5种方式

js刷新当前页⾯的5种⽅式1。

reloadreload ⽅法，该⽅法强迫浏览器刷新当前页⾯。

语法：location.reload([bForceGet])参数： bForceGet，可选参数，默认为 false，从客户端缓存⾥取当前页。

true, 则以 GET ⽅式，从服务端取最新的页⾯, 相当于客户端点击F5("刷新")reload() ⽅法⽤于重新加载当前⽂档。

如果该⽅法没有规定参数，或者参数是 false，它就会⽤ HTTP 头 If-Modified-Since 来检测服务器上的⽂档是否已改变。

如果⽂档已改变，reload() 会再次下载该⽂档。

如果⽂档未改变，则该⽅法将从缓存中装载⽂档。

这与⽤户单击浏览器的刷新按钮的效果是完全⼀样的。

2.2，replace ⽅法，该⽅法通过指定URL替换当前缓存在历史⾥（客户端）的项⽬，因此当使⽤replace⽅法之后，你不能通过“前进”和“后退”来访问已经被替换的URL。

语法： location.replace(URL)通常使⽤： location.reload() 或者是 history.go(0) 来做。

此⽅法类似客户端点F5刷新页⾯，所以页⾯method="post"时，会出现"⽹页过期"的提⽰。

因为Session的安全保护机制。

当调⽤ location.reload() ⽅法时， aspx页⾯此时在服务端内存⾥已经存在，因此必定是 IsPostback 的。

如果有这种应⽤：需要重新加载该页⾯，也就是说期望页⾯能够在服务端重新被创建，期望是 Not IsPostback 的。

这⾥，location.replace() 就可以完成此任务。

被replace的页⾯每次都在服务端重新⽣成。

代码： location.replace(location.href);返回并刷新页⾯：location.replace(document.referrer);document.referrer //前⼀个页⾯的URL不要⽤ history.go(-1)，或 history.back();来返回并刷新页⾯，这两种⽅法不会刷新页⾯。

document,element,dom对象api详解

document,element,dom对象api详解Document对象：根元素的访问，也就是HTML标签的访问。

使⽤document.documentElement访问根对象。

使⽤Document对象查找对象getElementById()：通过节点的id属性，查找对应节点。

getElementsByName()：通过节点的name属性，查找对应节点。

getElementsByTagName()：通过节点名称，查找对应节点。

使⽤Document对象的⽅法创建节点：crateElement(tagName)：创建元素节点。

createTextNode(data)：创建⽂本节点。

createAttirbute(name)：创建属性节点。

(不使⽤)Element对象：操作Element对象的属性：获取属性：getAttribute(name);⽅法设置属性：setAttribute(name,value)⽅法。

删除属性：removeAttribute(name);⽅法。

在Element对象中查找Element对象：在Element对象的范围内，可以⽤来查找其他节点的唯⼀有效⽅法就是getElementsByTagName()⽅法。

⽽该⽅法返回的是⼀个集合。

Element对象的⼀个案例：在⼀个<ul></ul>标签下创建⼀个li标签[html]1. <body>2. <ul id="city">3. <li id="bj" name="beijing">北京</li>4. <li id="tj" name="tianjin">天津</li>5. </ul>6. <script type="text/javascript">7. //创建⼀个标签元素8. var liElment = document.createElement("li");9. //创建⼀个⽂本节点10. var textElement = document.createTextNode("上海");11. //将⽂本节点加到标签元素下⾯12. liElment.appendChild(textElement);13. //为标签元素创建属性14. liElment.setAttribute("id","sh");15. liElment.setAttribute("name","Shanghai");16. //将标签元素加到ul标签下17. document.getElementById("city").appendChild(liElment);18. </script>19. </body>Node对象包含：节点名称，值和类型。

document 方法

document 方法
`document` 对象是 HTML 文档的全局对象，提供了访问和操作HTML 文档的方法和属性。

以下是一些常用的 `document` 方法:
1. `console.log()`:将内容输出到控制台，用于调试和错误处理。

2. `getElementById()`:通过元素的 DOM 元素标识符获取元素对象。

3. `getElementsByClassName()`:通过元素的 CSS 类名获取元素对象列表。

4. `querySelector()`:通过 CSS 选择器获取单个元素对象。

5. `querySelectorAll()`:通过 CSS 选择器获取多个元素对象列表。

6. `appendChild()`:将新元素添加到文档中的指定位置。

7. `removeChild()`:从文档中删除指定位置的元素。

8. `appendChild()`:将子元素添加到文档中的指定位置。

9. `removeChild()`:从文档中删除指定位置的子元素。

10. `addEventListener()`:将事件处理程序添加到元素，以实现响应事件的功能。

以上是一些常用的 `document` 方法，通过这些方法，可以方便地操作 HTML 文档，从而实现相应的功能。

前端获取复制板的方法

前端获取复制板的方法在前端开发中，获取复制板内容是一个常见的需求。

本文将详细介绍前端获取复制板的方法，以帮助开发者更好地实现此类功能。

一、概述在前端开发中，获取复制板内容主要依赖于浏览器的Clipboard API。

Clipboard API允许网页通过JavaScript与系统剪贴板进行交互，实现读取和写入剪贴板数据的功能。

二、获取复制板内容的方法1.使用Clipboard API现代浏览器普遍支持Clipboard API，可以通过以下步骤获取复制板内容：（1）为需要复制内容的元素添加事件监听，如点击事件。

```javascriptdocument.getElementById("copyBtn").addEventListener("click", function() {// 获取选中的文本const selectedText = window.getSelection().toString();// 执行后续操作});```（2）在事件处理函数中，调用Clipboard API的readText方法读取剪贴板内容。

```javascriptavigator.clipboard.readText().then(text => {console.log("复制板内容：", text);});```注意：为了确保用户隐私，调用Clipboard API时需要用户手动触发，如点击按钮。

2.使用document.execCommand方法（已废弃）虽然document.execCommand方法已被废弃，但在一些老版本浏览器中，它仍然是一个可用的解决方案。

以下是使用document.execCommand 方法获取复制板内容的示例：```javascriptdocument.getElementById("copyBtn").addEventListener("click", function() {const selectedText = window.getSelection().toString();const input = document.createElement("input");input.value = selectedText;document.body.appendChild(input);input.select();document.execCommand("copy");document.body.removeChild(input);console.log("复制板内容：", selectedText);});```注意：该方法已不再推荐使用，请优先使用Clipboard API。

前端关闭当前页面的几种方法

前端关闭当前页面的几种方法在前端开发中，有时我们需要在某些情况下关闭当前页面。

比如用户完成了某个操作后，我们希望页面能够自动关闭，或者是在某个按钮点击事件中关闭页面。

本文将介绍几种常用的前端关闭当前页面的方法。

1. 使用window.close()window.close()是JavaScript中的一个内置方法，可以用于关闭当前窗口。

它可以在任何JavaScript代码中使用，不仅限于前端开发中。

window.close();然而，这个方法有一些限制。

它只能关闭通过window.open()方法打开的窗口，或者是通过<a>标签的target="_blank"属性打开的窗口。

如果当前窗口是通过直接在浏览器地址栏中输入网址打开的，那么使用window.close()将无效。

2. 使用window.opener在某些情况下，我们可能需要在当前页面关闭后，将控制权交给打开它的页面。

这时可以使用window.opener属性来实现。

window.opener = null;window.close();通过将window.opener设置为null，我们可以断开当前页面与打开它的页面之间的联系。

然后使用window.close()关闭当前页面。

需要注意的是，这种方法只能在当前页面是通过window.open()或<a>标签的target="_blank"属性打开的情况下使用。

3. 使用location.replace()location.replace()方法可以用于在当前窗口中加载一个新的URL，并且替换掉当前的历史记录。

这个方法也可以用于关闭当前页面。

location.replace('about:blank');通过将新的URL设置为about:blank，我们可以加载一个空白页面来替换当前页面。

这样就相当于关闭了当前页面。

document.用法

document.用法
"document" 是指在网页编程中用来表示整个 HTML 文档的对象。

它是 JavaScript 中的一个内置对象，常用于访问和操作网页中的
元素和内容。

首先，我们可以使用 document 对象来访问和操作 HTML 元素。

比如，我们可以使用 document.getElementById() 方法通过元素的ID 来获取特定的元素，然后对其进行操作，比如改变其内容、样式
或者其他属性。

另外，document 对象也可以用来创建新的 HTML 元素，比如使
用 document.createElement() 方法可以创建一个新的元素节点，
然后可以通过其他方法将其添加到网页中。

除此之外，document 对象还可以用来操作整个文档的结构，比
如可以使用 document.write() 方法在文档中写入内容，或者使用document.getElementById() 方法来获取整个文档中的某个特定的
元素。

总之，document 对象在网页编程中起着非常重要的作用，它提
供了丰富的方法和属性，可以让开发者轻松地操作和控制整个 HTML 文档的内容和结构。

希望这些信息能够帮助你更好地理解 document 对象的用法。

document.forms用法示例介绍

document.forms⽤法⽰例介绍概述forms 返回⼀个集合 (⼀个HTMLCollection对象),包含了了当前⽂档中的所有form元素.语法var collection = document.forms;例⼦获取表单信息<script type="text/javascript">$(function(){var thisForm = document.forms['form1']; //获取name为form1的form表单//或者//var thisForm = document.forms[0]; //获取第⼀个form表单(ername.value); //输出表单name属性值为form1的 username的值(thisForm.address.value);document.forms[0].submit(); //表单提交})</script><body><form action="x" name="form1" ><input type="text" name="username" value="zhangsan" /><input type="text" name="address" value="beijing" /></form><form action="x" name="form2" ></form><form action="x" name="form3" ></form></body>。

JAVASCRIPTDOCUMENT对象属性和方法

JAVASCRIPTDOCUMENT对象属性和方法Document 对象是 JavaScript 中代表浏览器中当前网页文档的对象，它提供了许多属性和方法来操作和访问文档的各个部分。

在 JavaScript 中，可以通过 `document` 对象来访问文档的各个元素、属性和方法。

以下是一些常用的 `document` 对象的属性和方法：1. `document.title` - 获取或设置当前文档的标题。

例：```javascriptconsole.log(document.title); // 输出当前文档的标题document.title = "新标题"; // 设置当前文档的标题```2. `document.URL` - 获取当前文档的 URL 地址。

例：```javascriptconsole.log(document.URL); // 输出当前文档的 URL 地址```3. `document.domain` - 获取或设置当前文档的域名。

例：```javascriptconsole.log(document.domain); // 输出当前文档的域名```4. `document.head` - 获取 `<head>` 元素。

例：```javascriptconsole.log(document.head); // 输出 <head> 元素```5. `document.body` - 获取 `<body>` 元素。

例：```javascriptconsole.log(document.body); // 输出 <body> 元素```6. `document.cookie` - 获取或设置当前文档的 cookie。

例：```javascriptconsole.log(document.cookie); // 输出当前文档的 cookiedocument.cookie = "name=value"; // 设置当前文档的 cookie```7. `document.getElementById(id)` - 根据元素的 id 获取元素。

轻量级富文本编辑器wangEditor源码结构介绍

从我发布wangEditor到现在，大概有七八个月了，随着近期增加的插入视频，表情，地图这三个功能，目前为止基本的功能已经大体完善了。

这期间也修改了几个bug，都是各位网友反映的。

至于程序是不是已经很稳定了，我不敢说。

毕竟应用的人不是特别多，目前只有几十个关注wangEditor的人在应用。

他们会偶尔提出一些bug，不过只要告诉我，我会第一时间解决，至少大家对我修改bug增加功能的速度和态度，还是比较认可的。

根据github记载，目前有105个commits，即我已经提交了105次代码更新，这个数量也会继续增加。

大家有bug，有需求可以通过QQ群向我提交。

2. 介绍源码结构wangEditor.js源码目前2200多行，用书写文字书写博客的方式介绍它的结构，还真不是一件简单的事儿。

所以，这里我就长话短说，尽量简单的介绍一下重点，不要搞的太罗嗦，否则大家最后会不耐烦的。

如果让我自己对这个源码的设计和架构做一个评价的话，我会打70分。

它并不是完美的，但是它已经满足了我基本的需求。

比方说，我最近新增的几个功能（插入视频，地图，表情）都是通过修改其中的配置项增加上去的，而没有改动源码中的核心部分。

开放封闭原则——对扩展开放，对修改封闭，我想我已经基本做到了这一点。

最后，我分享wangEditor源码设计的目的，为的是让大家给一些意见。

提出一些疑问，一些建议，或者我目前还没有意识到的一些问题。

总之，我是希望这个软件越做越好。

3. 一个jQuery插件wangEditor是一款jQuery插件，也是基于jquery开发的（不理解jquery插件的同学，请自行补课，本文不讲）。

定义一个jquery插件其实很简单，wangEditor.js源码的最后几十行定义了。

//------------------------------------生成jquery插件------------------------------------$.fn.extend({/** options: {* $initContent: $elem, //配置要初始化内容* menuConfig: [...], //配置要显示的菜单（menuConfig会覆盖掉hideMenuConfig）* onchange: function(){...}, //配置onchange事件，* uploadUrl: 'string' //图片上传的地址* }*/'wangEditor': function(options){if(this[0].nodeName !== 'TEXTAREA'){//只支持textareaalert('wangEditor提示：请使用textarea扩展富文本框。

documentelement的运用

documentelement的运用DocumentElement 是在 DOM（文档对象模型）中代表整个文档的根节点。

在 HTML 文档中，DocumentElement 表示的是 <html> 元素，它包含了整个 HTML 内容。

在 XML 文档中，DocumentElement 表示的是根元素。

DocumentElement 可以用于访问和操作文档的属性和方法。

在 JavaScript 中，可以通过 document.documentElement 访问到DocumentElement 对象。

下面我们来看一些 DocumentElement 的常见用法。

1.获取文档的根元素：当需要获取到文档的根元素时，可以使用document.documentElement。

例如，要获取HTML文档的根元素，可以使用以下代码：let htmlElement = document.documentElement;console.log(htmlElement); // <html>2.获取文档的节点集合：例如，要获取文档中所有的<p>元素，可以使用以下代码：let pElements =document.documentElement.getElementsByTagName("p");console.log(pElements); // HTMLCollection(3) [p, p, p]这将返回一个 HTMLCollection 对象，其中包含了文档中所有的 <p> 元素。

3.设置文档的标题：可以使用 DocumentElement 上的 title 属性来设置或获取文档的标题。

例如，要将文档的标题设置为 "My Website"，可以使用以下代码：4.在文档中插入元素：可以使用 DocumentElement 上的 appendChild( 或insertBefore( 方法将元素插入到文档中。

document.用法 -回复

document.用法-回复文章主题：[document.用法]导言：在计算机编程和网页开发中，我们经常会听到document一词。

它是一种很重要的对象，用于表示整个HTML文档的内容，并且可以进行各种操作。

本文将逐步介绍document对象的用法和功能，帮助读者更好地理解和运用此对象。

第一部分：什么是document对象？1.1 document对象的定义和作用document对象是指代表示整个HTML文档的对象，可以通过它来访问和操作文档中的元素、属性和方法。

1.2 document对象的创建在浏览器中打开HTML文档后，浏览器会自动创建一个document对象，它与当前打开的文档关联起来。

我们可以使用JavaScript代码来获取这个对象，以便进行后续的操作。

第二部分：document对象的常用属性和方法2.1 常用属性2.1.1 document.documentElement该属性返回文档的根元素（HTML元素），一般是<html>标签。

通过该属性，我们可以方便地对整个文档进行操作，如修改样式、添加新元素等。

2.1.2 document.title该属性用于设置或获取当前文档的标题。

我们可以通过修改这个属性来改变页面的标题，从而提升用户体验。

2.1.3 document.URL该属性返回当前页面的完整URL地址。

这对于需要获取当前页面的地址的应用程序非常有用，如打开特定链接、生成二维码等。

2.1.4 document.cookie该属性用于操作和获取当前文档的Cookie信息。

Cookie是一种在浏览器和Web服务器之间传递信息的机制，通过使用document.cookie属性，我们可以读取、写入、修改和删除Cookie。

2.2 常用方法2.2.1 document.getElementById()这是一个用于获取指定ID的元素的方法。

通过指定元素的ID，我们可以直接获取到该元素的引用，并对其进行进一步的操作。

js inserttext 命令

js inserttext 命令JavaScript中的insertText命令是用来向网页中插入文本内容的。

它可以在指定的位置插入文本，或者替换现有的文本。

接下来，我将详细介绍insertText命令的使用方法和相关注意事项。

insertText命令通过Document对象的execCommand方法来执行。

使用该命令时，首先需要选中一个文本节点，然后调用execCommand方法并传入"insertText"参数，最后将要插入的文本作为第三个参数传入即可。

以下是使用insertText命令的基本示例：```javascriptvar textNode = document.createTextNode("Hello World!");document.getSelection().selectAllChildren(textNode); //选中文本节点document.execCommand('insertText', false, '你好，世界！'); //插入中文文本```上述示例中，首先使用document.createTextNode方法创建了一个文本节点，内容为"Hello World!"。

然后使用document.getSelection().selectAllChildren方法选中了这个文本节点，该方法可以将节点作为选择对象的子节点，以便后续的操作。

最后通过document.execCommand方法执行了insertText命令，插入了中文文本"你好，世界！"。

需要注意的是，insertText命令会将插入的文本放置在当前光标所在位置，如果没有选中文本节点，则插入位置为光标所在位置。

此外，插入的文本会覆盖原有的文本，如果不希望覆盖原有文本，可以先将原有文本保存起来，再进行插入。

Js之execCommand解析

JS:document.execCommand()解析文章分类:Web前端Java代码execCommand方法是执行一个对当前文档，当前选择或者给出范围的命令。

处理Html数据时常用如下格式：document.execCommand(sCommand[,交互方式, 动态参数]) ，其中：sCommand为指令参数（如下例中的"2D-Position"），交互方式参数如果是true的话将显示对话框，如果为false的话，则不显示对话框（下例中的"false"即表示不显示对话框），动态参数一般为一可用值或属性值（如下例中的"true"）。

Java代码Java代码普通的方式是激活一个<iframe>进入编辑状态，命令如下IframeNamer.document.designMode="On"字体--宋体、黑体、楷体等execCommand("fontname","",字体)字号--字号大小execCommand("fontsize","",字号)加重execCommand("Bold")斜体execCommand("Italic")下划线execCommand("Underline")删除线execCommand("StrikeThrough")上标execCommand("SuperScript")下标execCommand("SubScript")有序排列--数字序号execCommand("InsertOrderedList") 无序排列--圆点序号execCommand("InsertUnorderedList") 向前缩进execCommand("Outdent")向后缩进execCommand("Indent")居左execCommand("JustifyLeft")居右execCommand("JustifyRight")居中execCommand("JustifyCenter")剪切execCommand("Cut")拷贝execCommand("Copy")粘贴execCommand("Paste")覆盖execCommand("Overwrite")取消操作--IE5.0以后可以无限取消execCommand("Undo")重复操作execCommand("Redo")设置链接--若按以下写法，在IE5.0版本中会激活一个内建窗口，可以完成输入链接的功能，而且还可以选择MAILTO、FTP等各种链接类型，比较方便execCommand("CreateLink")在IE4.0中，没有内建链接输入窗口，所以就需要用以下方式嵌入链接execCommand("CreateLink","",TURL)插入图片--由于IE中嵌入的可编控件是针对本地资源的，所以其默认的图片资源来自本地，所以基于WEB 内容的编辑最好自己做输入框，然后用如下命令实现。

常用Js代码document.execCommand（）的作用

常用Js代码document.execCommand（）的作用2011-7-26 9:24:58常用Js代码document.execCommand()的作用<html><body><input type=button value=剪切onclick=document.execCommand('Cut')><input type=button value=拷贝onclick=document.execCommand('Copy')><input type=button value=粘贴onclick=document.execCommand('Paste')><input type=button value=撤消onclick=document.execCommand('Undo')><input type=button value=重做onclick=document.execCommand('Redo') id=button2 name=button2><input><input type=button value=删除onclick=document.execCommand('Delete')><input type=button value=黑体onclick=document.execCommand('Bold')><input type=button value=斜体onclick=document.execCommand('Italic')><input type=button value=下划线onclick=document.execCommand('Underline')><input type=button value=停止onclick=document.execCommand('stop')><input type=button value=保存onclick=document.execCommand('SaveAs')><input type=button value=另存为onclick=document.execCommand('Saveas',false,'c:\\test.htm')> <input type=button value=字体onclick=document.execCommand('FontName',false,fn)> <input type=button value=字体大小onclick=document.execCommand('FontSize',false,fs)> <input type=button value=刷新onclick=document.execCommand('refresh',false,0)></body></html>下面列出的是指令参数及意义：//相当于单击文件中的打开按钮document.execCommand("Open");//将当前页面另存为document.execCommand("SaveAs");//剪贴选中的文字到剪贴板;document.execCommand("Cut","false",null);//删除选中的文字;document.execCommand("Delete","false",null);//改变选中区域的字体;document.execCommand("FontName","false",sFontName);//改变选中区域的字体大小;document.execCommand("FontSize","false",sSize|iSize);//设置前景颜色;document.execCommand("ForeColor","false",sColor);//使绝对定位的对象可直接拖动;document.execCommand("2D-Position","false","true");//使对象定位变成绝对定位;document.execCommand("AbsolutePosition","false","true");//设置背景颜色;document.execCommand("BackColor","false",sColor);//使选中区域的文字加粗;document.execCommand("Bold","false",null);//复制选中的文字到剪贴板;document.execCommand("Copy","false",null);//设置指定锚点为书签;document.execCommand("CreateBookmark","false",sAncho rName);//将选中文本变成超连接,若第二个参数为true,会出现参数设置对话框;document.execCommand("CreateLink","false",sLinkURL);//设置当前块的标签名;document.execCommand("FormatBlock","false",sTagName);//相当于单击文件中的打开按钮document.execCommand("Open");//将当前页面另存为document.execCommand("SaveAs");//剪贴选中的文字到剪贴板;document.execCommand("Cut","false",null);//删除选中的文字;document.execCommand("Delete","false",null);//改变选中区域的字体;document.execCommand("FontName","false",sFontName);//改变选中区域的字体大小;document.execCommand("FontSize","false",sSize|iSize);//设置前景颜色;document.execCommand("ForeColor","false",sColor);//使绝对定位的对象可直接拖动;document.execCommand("2D-Position","false","true");//使对象定位变成绝对定位;document.execCommand("AbsolutePosition","false","true");//设置背景颜色;document.execCommand("BackColor","false",sColor);//使选中区域的文字加粗;document.execCommand("Bold","false",null);//复制选中的文字到剪贴板;document.execCommand("Copy","false",null);//设置指定锚点为书签;document.execCommand("CreateBookmark","false",sAncho rName);//将选中文本变成超连接,若第二个参数为true,会出现参数设置对话框;document.execCommand("CreateLink","false",sLinkURL);//设置当前块的标签名;document.execCommand("FormatBlock","false",sTagName);知道此路不通，该道而行，解决方案如下：<html><body><input type="button" value="查找" onClick="selecttool()"/> </body></html><script language="javascript">function selecttool(){var WshShell = new ActiveXObject("Wscript.Shell");try{WshShell.SendKeys("^f");} catch(e){}WshShell.Quit;}</script>Tags: execCommand Js。

JSdocument.execCommand实现复制功能（带你出坑）

JSdocument.execCommand实现复制功能（带你出坑）最近项⽬中需要实现功能：点击button，复制input框的值；我使⽤的是 document.execCommand('copy')的⽅法；但是很郁闷的是，始终实现不了功能；代码如下HTML代码（v-model是vue框架中的双向数据绑定，不懂的请移步vue⽂档）<input id='input_url' v-model='product_url' disabled type="text">JS代码var input = $('#input_url');input.select();document.execCommand("Copy");然后就郁闷了，就这么⼏⾏代码，为啥不⾏呢？JS和⽹上写的⼀模⼀样啊？？现在来解释为啥失败，踩了⼏个⼩时的坑不能实现的原因：input框不能有disabled属性根据第⼀条扩展，input的width || height 不能为0；input框不能有hidden属性意思就是，input框要在正常的编辑状态下，暂且这么解释吧；解决⽅案：因为业务逻辑上input框确实不能编辑，所以disabled属性是必须要的；那我⽤另⼀个input框展⽰相同的数据，然后设置opacity=0；这样就不可见了；（注意这⾥⽤hidden也是不⾏的）但是新增的input还是占有空间，所以再来个粗暴的样式 position: absolute；这样就脱离了⽂档流；JS代码不变，修改HTML如下：<input id='input_url' v-model='product_url' style='opacity: 0;position: absolute;' type="text"><input v-model='product_url' disabled type="text">。