zoukankan      html  css  js  c++  java
  • DOM 其他一些特性

    cookie

       允许javascript程序读写HTTP cookie 的特殊的属性

    domain

       允许当Web页面之间交互时,相同域名下相互信任的Web服务器之间协作放宽同源策略安全限制

       (JavaScript跨域总结与解决办法)

    lastModified

       包含文档修改时间的字符串(js获得网页的最后更新时间lastModified详解)

    location

       与window对象的location属性引用同一个Location对象

    referrer

       如果有,它表示浏览器导航到当前链接的上一个文档,该属性值和HTTP的Referer头信息的内容相同,只是拼写上有两个r(浅析document.referrer)

    title

       文档的<title>和</title>标签之间的内容

    URL

       文档的URL,只读字符串而不是Location对象,该属性值与location.href的初始值相同,只是不包含Location对象的动态变化,

    查询选取的文本

    选取文本

    可编辑的内容

       有两种方法来启用编辑功能

       1. 设置任何标签的HTML contenteditable属性

       2.设置对应元素的javascript contenteditable属性

        以上两种方法都使得元素的内容变成可编辑,当用户单击该元素的内容时,就会出现插入光标;

        可以显式的为元素添加spellcheck属性来开启拼写检查(spellcheck = false 关闭)

       3. 将Document对象的designMode属性设置为字符串 ‘on’ 使得整个文档可编辑(设置为 ‘off’将恢复为只读文档),designMode属性并没有对应的HTML属性,只能通过脚本来修改

        针对designMode属性,各浏览器的支持情况也各不相同:
        IE8:出于安全考虑,不允许使用designMode属性让页面进入编辑状态。
        IE9:允许使用designMode属性让页面进入编辑状态。
        Chrome 3和Safari:使用内嵌frame的方式,该内嵌frame是可编辑的。
        Firefox和Opera:允许使用designMode属性让页面进入编辑状态。

    4.  document.execCommand()方法,(如果一个文档中有多个可编辑的元素,命令将自动应用到选区或插入光标所在的那个元素上)

          document.queryCommandSupport()传递命令名来查询浏览器是否支持该命令

          document.queryCommandEnabled()来查询当前所使用的命令

          document.queryCommandState()来判定命令的当前状态

          document.queryCommandValue() 来查询相关系列值 (如果在查询范围内一个属性有两个不同的值,则查询结果是不确定的;如fontname)

          document.queryCommandIndeterm()  来检测多个值(如fontname)

    以下内容转自   http://www.designcss.org/qianduan/single/369

    [语法] :object.execCommand(sCommand[,bUserInterface][,vVlaue])
    [返回值] :布尔值,若成功,返回true,否则返回false
    [sCommand可选项及意义][Copy Form BlueIdea]:

    QUOTE

    2D-Position 允许通过拖曳移动绝对定位的对象。
    AbsolutePosition 设定元素的 position 属性为“absolute”(绝对)。
    BackColor 设置或获取当前选中区的背景颜色。
    BlockDirLTR 目前尚未支持。
    BlockDirRTL 目前尚未支持。
    Bold 切换当前选中区的粗体显示与否。
    BrowseMode 目前尚未支持。
    Copy 将当前选中区复制到剪贴板。
    CreateBookmark 创建一个书签锚或获取当前选中区或插入点的书签锚的名称。
    CreateLink 在当前选中区上插入超级链接,或显示一个对话框允许用户指定要为当前选中区插入的超级链接的 URL。
    Cut 将当前选中区复制到剪贴板并删除之。
    Delete 删除当前选中区。
    DirLTR 目前尚未支持。
    DirRTL 目前尚未支持。
    EditMode 目前尚未支持。
    FontName 设置或获取当前选中区的字体。
    FontSize 设置或获取当前选中区的字体大小。
    ForeColor 设置或获取当前选中区的前景(文本)颜色。
    FormatBlock 设置当前块格式化标签。
    Indent 增加选中文本的缩进。
    InlineDirLTR 目前尚未支持。
    InlineDirRTL 目前尚未支持。
    InsertButton 用按钮控件覆盖当前选中区。
    InsertFieldset 用方框覆盖当前选中区。
    InsertHorizontalRule 用水平线覆盖当前选中区。
    InsertIFrame 用内嵌框架覆盖当前选中区。
    InsertImage 用图像覆盖当前选中区。
    InsertInputButton 用按钮控件覆盖当前选中区。
    InsertInputCheckbox 用复选框控件覆盖当前选中区。
    InsertInputFileUpload 用文件上载控件覆盖当前选中区。
    InsertInputHidden 插入隐藏控件覆盖当前选中区。
    InsertInputImage 用图像控件覆盖当前选中区。
    InsertInputPassword 用密码控件覆盖当前选中区。
    InsertInputRadio 用单选钮控件覆盖当前选中区。
    InsertInputReset 用重置控件覆盖当前选中区。
    InsertInputSubmit 用提交控件覆盖当前选中区。
    InsertInputText 用文本控件覆盖当前选中区。
    InsertMarquee 用空字幕覆盖当前选中区。
    InsertOrderedList 切换当前选中区是编号列表还是常规格式化块。
    InsertParagraph 用换行覆盖当前选中区。
    InsertSelectDropdown 用下拉框控件覆盖当前选中区。
    InsertSelectListbox 用列表框控件覆盖当前选中区。
    InsertTextArea 用多行文本输入控件覆盖当前选中区。
    InsertUnorderedList 切换当前选中区是项目符号列表还是常规格式化块。
    Italic 切换当前选中区斜体显示与否。
    JustifyCenter 将当前选中区在所在格式化块置中。
    JustifyFull 目前尚未支持。
    JustifyLeft 将当前选中区所在格式化块左对齐。
    JustifyNone 目前尚未支持。
    JustifyRight 将当前选中区所在格式化块右对齐。
    LiveResize 迫使 MSHTML 编辑器在缩放或移动过程中持续更新元素外观,而不是只在移动或缩放完成后更新。
    MultipleSelection 允许当用户按住 Shift 或 Ctrl 键时一次选中多于一个站点可选元素。
    Open 打开。
    Outdent 减少选中区所在格式化块的缩进。
    OverWrite 切换文本状态的插入和覆盖。
    Paste 用剪贴板内容覆盖当前选中区。
    PlayImage 目前尚未支持。
    Print 打开打印对话框以便用户可以打印当前页。
    Redo 重做。
    Refresh 刷新当前文档。
    RemoveFormat 从当前选中区中删除格式化标签。
    RemoveParaFormat 目前尚未支持。
    SaveAs 将当前 Web 页面保存为文件。
    SelectAll 选中整个文档。
    SizeToControl 目前尚未支持。
    SizeToControlHeight 目前尚未支持。
    SizeToControlWidth 目前尚未支持。
    Stop 停止。
    StopImage 目前尚未支持。
    StrikeThrough 目前尚未支持。
    Subscript 目前尚未支持。
    Superscript 目前尚未支持。
    UnBookmark 从当前选中区中删除全部书签。
    Underline 切换当前选中区的下划线显示与否。
    Undo 撤消。
    Unlink 从当前选中区中删除全部超级链接。
    Unselect 清除当前选中区的选中状态。

    合理的应用execCommand可以使我们的网页产生意想不到的效果。这里我是应用在一个所见即所得的多功能的编辑器上。
    首先大家知道用传统的textarea标签是不能实现发帖的所见即所得的,顶多是使用UBB代码就像野花用的IPB一样,于是我们只能使用另外的方法,那就是iframe。iframe?对就是他。要实现对他的编辑我们需要调用designMode属性,举个例子。

    QUOTE

    <iframe ID="sd_Content" width=100% height=100%></iframe>
    <script>
    sd_Content.document.designMode="On";
    </script>

    这样我们就可以在iframe里面进行编辑了,你可以将这段代码Copy到html文件中打开试试在里面填入内容,而且Ctrl-I,Ctrl-U,Ctrl-B都可以用。
    这时候,我们当然要想到,既然用了iframe标签那么我们如何使用form发送了。其实静下心考虑,方法很简单我们只需要建立一个隐藏的标签,然后在发送的时候使标签的值等于iframe里面的值就行了。现在代码就变成了

    QUOTE

    <script>
    function CopyDate(){
    document.all("content").value=frames["sd_Content"].document.body.innerHTML;
    }
    </script>
    <form onsubmit="CopyData();" action=save.asp method=post>
    <INPUT type=hidden name=content value="">
    <iframe ID="sd_Content" width=100% height=100%></iframe>
    <script>
    sd_Content.document.designMode="On";
    </script>
    </form>

    到现在我们的显示和发送的问题都解决了。接下来当然是编辑的内容了。也就是我们的正题也就是execCommand的应用。
    这个函数的语法其实很简单。我这里举几个例子,大家照着上面的参数表改改就知道了。

    设置字体:
    设置字体的内容包括文字颜色,文字背景色,文字字体,粗体,斜体,下划线,删除线,上标,下标,段落格式,字号,左对齐,居中对齐,右对齐,标号,项目标号,减少缩进,增大缩进

    QUOTE

    //字体设置函数
    function sd_FormatText(Command,value) {
    execCommand(Command,false,value);
    }
    //以下如何得到颜色,字体,段落格式,字号值自拟
    //设置文字颜色方式,设置为红色
    sd_FormatText('forecolor', '#FF0000')
    //设置文字背景颜色方式,设置为红色
    sd_FormatText('backcolor', '#FF0000')
    //设置文字字体方式,设置为宋体
    sd_FormatText('fontname', '宋体')
    //设置段落格式方式,设置为标题一,即H1
    sd_FormatText('FormatBlock', '<H1>')
    //设置文字字号方式,设置为一号字
    sd_FormatText('fontsize', '1')
    //设置加粗方式
    sd_FormatText('bold', '')
    //设置斜体方式
    sd_FormatText('italic', '')
    //设置下划线方式
    sd_FormatText('underline', '')
    //设置上标方式
    sd_FormatText('superscript', '')
    //设置下标方式
    sd_FormatText('subscript', '')
    //设置删除线方式
    sd_FormatText('strikethrough', '')
    //设置左对齐方式
    sd_FormatText('justifyleft', '')
    //设置居中对齐方式
    sd_FormatText('justifycenter', '')
    //设置右对齐方式
    sd_FormatText('justifyright', '')
    //设置标号方式,即使用1、2、3编号
    sd_FormatText('insertorderedlist', '')
    //设置项目编号方式,即使用·
    sd_FormatText('insertunorderedlist', '')
    //设置减少缩进方式
    sd_FormatText('outdent', '')
    //设置增加缩进方式
    sd_FormatText('indent', '')

    设置了字体格式当然就有删除字体格式。其实删除格式也可以使用刚才我们定义的函数sd_FormatText,如下

    QUOTE

    //设置删除格式方式
    sd_FormatText('removeFormat', '')

    其实刚才的sd_FormatText近乎万能,下面我们用他来完成另外几个操作。那就是全选,剪切,复制,粘贴,撤销,恢复,添加链接,删除链接,添加图片,添加水平线。

    QUOTE

    //全选
    sd_FormatText('selectAll', '')
    //剪切
    sd_FormatText('cut', '')
    //复制
    sd_FormatText('copy', '')
    //粘贴
    sd_FormatText('paste', '')
    //撤销
    sd_FormatText('undo', '')
    //恢复
    sd_FormatText('redo', '')
    //添加链接,添加到野花
    sd_FormatText('CreateLink', 'http://bbs.gliet.edu.cn/bbs')
    //删除链接
    sd_FormatText('Unlink', '')
    //添加图片,添加到野花的一个表情
    sd_FormatText('InsertImage', 'http://bbs.gliet.edu.cn/bbs/html/emoticons/ohmy.gif')
    //添加水平线
    sd_FormatText('InsertHorizontalRule', '')

    另外我还可以使用其它方法来进行表格操作,在这样的编辑器里面表格也是可以使用和编辑的哦,由于和我们今天讲的正题无关而且代码较多,我就不罗嗦了。有没有觉得这样的编辑器是个小型了网页制作软件阿,同时通过CSS的控制你还可以将它变得更加漂亮比如

    QUOTE

    <TD class=鼠标未进过时的样式
    onmouseover="this.className='鼠标进过时的样式';"
    onclick="操作函数;this.className='鼠标按下时的样式';"
    onmouseout="this.className='鼠标未进过时的样式';"><IMG  height=16
    src="按钮图片"></TD>

    最后还罗嗦一句就去睡觉了,使用这种方法最大的坏处是要注意代码的过滤,因为你使用了这种方法不能像往常一样使用server.HtmlEncode来屏蔽掉HTML的使用了,那么如何防止有人钻空子使用譬如向<input>、<iframe>一类的标签来危害你站点的安全就是最重要的了,具体方法我不多说了,当然可以讨论。

  • 相关阅读:
    学习笔记5_Day09_网站访问量统计小练习
    学习笔记4_ServletContext(重要整个Web应用的动态资源之间共享数据)
    学习笔记03_Day09-----Servle与反射()
    学习笔记2_Day09_servlet的细节
    学习笔记1_Day09_Servlet
    OC对数组排序的方法
    sqlite事务处理
    封装数据库
    JsonModel的使用
    RBAC表
  • 原文地址:https://www.cnblogs.com/fsy0718/p/3295243.html
Copyright © 2011-2022 走看看