From 4c3d5567cf37a837911eea6855a1f9f7942cb8ba Mon Sep 17 00:00:00 2001 From: Jack-Zhang-1314 Date: Wed, 20 Jul 2022 11:55:38 +0800 Subject: [PATCH 001/100] fix zh-CN:zh-cn/web/api unicode space --> ascii space --- .../web/api/abortcontroller/abort/index.html | 4 +- .../abortcontroller/index.html | 10 +- .../zh-cn/web/api/abortcontroller/index.html | 8 +- .../api/abortsignal/abort_event/index.html | 4 +- files/zh-cn/web/api/abortsignal/index.html | 14 +- files/zh-cn/web/api/accelerometer/index.html | 10 +- .../ambientlightsensor/index.html | 4 +- .../ambientlightsensor/illuminance/index.html | 2 +- .../web/api/ambientlightsensor/index.html | 4 +- .../web/api/analysernode/fftsize/index.html | 52 +- .../analysernode/frequencybincount/index.html | 32 +- .../getbytefrequencydata/index.html | 32 +- .../getbytetimedomaindata/index.html | 54 +- .../getfloatfrequencydata/index.html | 10 +- files/zh-cn/web/api/analysernode/index.html | 20 +- .../smoothingtimeconstant/index.html | 40 +- .../web/api/animation/animation/index.html | 2 +- .../zh-cn/web/api/animation/cancel/index.html | 4 +- .../web/api/animation/cancel_event/index.html | 6 +- .../zh-cn/web/api/animation/effect/index.html | 2 +- .../zh-cn/web/api/animation/finish/index.html | 4 +- files/zh-cn/web/api/animation/id/index.html | 8 +- files/zh-cn/web/api/animation/index.html | 2 +- files/zh-cn/web/api/animation/play/index.html | 2 +- .../web/api/animation/playstate/index.html | 24 +- .../web/api/animation/starttime/index.html | 2 +- .../animationevent/animationevent/index.html | 6 +- files/zh-cn/web/api/animationevent/index.html | 2 +- files/zh-cn/web/api/atob/index.html | 2 +- files/zh-cn/web/api/attr/index.html | 8 +- files/zh-cn/web/api/attr/localname/index.html | 10 +- .../web/api/attr/namespaceuri/index.html | 6 +- files/zh-cn/web/api/attr/prefix/index.html | 4 +- .../api/audiobuffer/audiobuffer/index.html | 12 +- .../api/audiobuffer/getchanneldata/index.html | 8 +- files/zh-cn/web/api/audiobuffer/index.html | 4 +- .../audiobuffersourcenode/index.html | 8 +- .../web/api/audiobuffersourcenode/index.html | 18 +- .../audiobuffersourcenode/start/index.html | 6 +- .../api/audiocontext/audiocontext/index.html | 4 +- .../web/api/audiocontext/close/index.html | 12 +- .../createmediaelementsource/index.html | 8 +- .../createmediastreamdestination/index.html | 4 +- .../createmediastreamsource/index.html | 8 +- files/zh-cn/web/api/audiocontext/index.html | 4 +- .../web/api/audiocontext/resume/index.html | 22 +- .../web/api/audiocontext/suspend/index.html | 22 +- .../web/api/audiodestinationnode/index.html | 6 +- .../maxchannelcount/index.html | 2 +- files/zh-cn/web/api/audiolistener/index.html | 26 +- .../web/api/audionode/connect/index.html | 14 +- files/zh-cn/web/api/audionode/index.html | 74 +- files/zh-cn/web/api/audioparam/index.html | 34 +- .../api/audioscheduledsourcenode/index.html | 2 +- .../audioscheduledsourcenode/stop/index.html | 10 +- .../zh-cn/web/api/audioworkletnode/index.html | 12 +- .../clientdatajson/index.html | 4 +- .../web/api/background_tasks_api/index.html | 26 +- .../createanalyser/index.html | 46 +- .../createbiquadfilter/index.html | 6 +- .../baseaudiocontext/createbuffer/index.html | 12 +- .../createbuffersource/index.html | 2 +- .../createchannelsplitter/index.html | 2 +- .../createconstantsource/index.html | 2 +- .../createconvolver/index.html | 18 +- .../baseaudiocontext/createdelay/index.html | 42 +- .../createperiodicwave/index.html | 18 +- .../createscriptprocessor/index.html | 68 +- .../createwaveshaper/index.html | 24 +- .../decodeaudiodata/index.html | 14 +- .../api/baseaudiocontext/listener/index.html | 2 +- .../web/api/baseaudiocontext/state/index.html | 2 +- .../statechange_event/index.html | 4 +- .../web/api/battery_status_api/index.html | 6 +- .../api/batterymanager/charging/index.html | 6 +- files/zh-cn/web/api/batterymanager/index.html | 6 +- .../api/beforeinstallpromptevent/index.html | 18 +- .../prompt/index.html | 2 +- .../web/api/beforeunloadevent/index.html | 4 +- .../zh-cn/web/api/biquadfilternode/index.html | 4 +- .../zh-cn/web/api/blob/arraybuffer/index.html | 6 +- files/zh-cn/web/api/blob/blob/index.html | 10 +- files/zh-cn/web/api/blob/index.html | 10 +- files/zh-cn/web/api/blob/slice/index.html | 10 +- files/zh-cn/web/api/blob/text/index.html | 10 +- files/zh-cn/web/api/bluetooth/index.html | 4 +- .../api/bluetooth/requestdevice/index.html | 6 +- .../web/api/broadcast_channel_api/index.html | 8 +- .../broadcastchannel/index.html | 4 +- .../zh-cn/web/api/broadcastchannel/index.html | 8 +- .../broadcastchannel/message_event/index.html | 4 +- .../messageerror_event/index.html | 4 +- .../broadcastchannel/postmessage/index.html | 2 +- files/zh-cn/web/api/cache/add/index.html | 14 +- files/zh-cn/web/api/cache/addall/index.html | 6 +- files/zh-cn/web/api/cache/delete/index.html | 8 +- files/zh-cn/web/api/cache/index.html | 18 +- files/zh-cn/web/api/cache/keys/index.html | 14 +- files/zh-cn/web/api/cache/match/index.html | 22 +- files/zh-cn/web/api/cache/matchall/index.html | 14 +- files/zh-cn/web/api/cache/put/index.html | 28 +- .../web/api/cachestorage/delete/index.html | 22 +- .../zh-cn/web/api/cachestorage/has/index.html | 12 +- files/zh-cn/web/api/cachestorage/index.html | 78 +- .../web/api/cachestorage/keys/index.html | 6 +- .../web/api/cachestorage/match/index.html | 22 +- .../web/api/cachestorage/open/index.html | 22 +- .../canvas_api/a_basic_ray-caster/index.html | 2 +- files/zh-cn/web/api/canvas_api/index.html | 28 +- .../index.html | 16 +- .../tutorial/advanced_animations/index.html | 12 +- .../applying_styles_and_colors/index.html | 22 +- .../tutorial/basic_animations/index.html | 714 +++++++++--------- .../tutorial/basic_usage/index.html | 20 +- .../tutorial/compositing/example/index.html | 390 +++++----- .../tutorial/drawing_shapes/index.html | 30 +- .../tutorial/drawing_text/index.html | 20 +- .../api/canvas_api/tutorial/finale/index.html | 4 +- .../hit_regions_and_accessibility/index.html | 12 +- .../web/api/canvas_api/tutorial/index.html | 4 +- .../tutorial/optimizing_canvas/index.html | 8 +- .../pixel_manipulation_with_canvas/index.html | 96 +-- .../tutorial/transformations/index.html | 4 +- .../tutorial/using_images/index.html | 66 +- .../canvascapturemediastreamtrack/index.html | 8 +- .../canvasgradient/addcolorstop/index.html | 6 +- .../api/canvaspattern/settransform/index.html | 4 +- .../addhitregion/index.html | 26 +- .../canvasrenderingcontext2d/arc/index.html | 10 +- .../canvasrenderingcontext2d/arcto/index.html | 6 +- .../beginpath/index.html | 8 +- .../beziercurveto/index.html | 14 +- .../canvas/index.html | 2 +- .../clearhitregions/index.html | 8 +- .../clearrect/index.html | 10 +- .../canvasrenderingcontext2d/clip/index.html | 6 +- .../closepath/index.html | 8 +- .../createimagedata/index.html | 6 +- .../createlineargradient/index.html | 18 +- .../createpattern/index.html | 12 +- .../createradialgradient/index.html | 16 +- .../direction/index.html | 2 +- .../drawfocusifneeded/index.html | 10 +- .../drawimage/index.html | 26 +- .../drawwidgetasonscreen/index.html | 4 +- .../drawwindow/index.html | 14 +- .../ellipse/index.html | 12 +- .../canvasrenderingcontext2d/fill/index.html | 8 +- .../fillrect/index.html | 12 +- .../fillstyle/index.html | 18 +- .../filltext/index.html | 8 +- .../filter/index.html | 28 +- .../canvasrenderingcontext2d/font/index.html | 20 +- .../getimagedata/index.html | 6 +- .../getlinedash/index.html | 10 +- .../gettransform/index.html | 8 +- .../globalalpha/index.html | 14 +- .../globalcompositeoperation/index.html | 12 +- .../imagesmoothingenabled/index.html | 4 +- .../imagesmoothingquality/index.html | 10 +- .../api/canvasrenderingcontext2d/index.html | 148 ++-- .../ispointinpath/index.html | 8 +- .../ispointinstroke/index.html | 8 +- .../linecap/index.html | 16 +- .../linedashoffset/index.html | 32 +- .../linejoin/index.html | 12 +- .../lineto/index.html | 8 +- .../linewidth/index.html | 8 +- .../measuretext/index.html | 6 +- .../miterlimit/index.html | 10 +- .../moveto/index.html | 8 +- .../putimagedata/index.html | 12 +- .../quadraticcurveto/index.html | 10 +- .../canvasrenderingcontext2d/rect/index.html | 8 +- .../removehitregion/index.html | 6 +- .../resettransform/index.html | 8 +- .../restore/index.html | 10 +- .../rotate/index.html | 8 +- .../canvasrenderingcontext2d/save/index.html | 6 +- .../canvasrenderingcontext2d/scale/index.html | 8 +- .../scrollpathintoview/index.html | 6 +- .../setlinedash/index.html | 10 +- .../settransform/index.html | 8 +- .../shadowblur/index.html | 10 +- .../shadowcolor/index.html | 10 +- .../shadowoffsetx/index.html | 8 +- .../shadowoffsety/index.html | 8 +- .../stroke/index.html | 6 +- .../strokerect/index.html | 10 +- .../strokestyle/index.html | 12 +- .../stroketext/index.html | 10 +- .../textalign/index.html | 8 +- .../textbaseline/index.html | 4 +- .../transform/index.html | 10 +- .../translate/index.html | 10 +- files/zh-cn/web/api/cdatasection/index.html | 8 +- .../web/api/channel_messaging_api/index.html | 14 +- .../using_channel_messaging/index.html | 28 +- .../channelmergernode/index.html | 10 +- .../web/api/channelmergernode/index.html | 12 +- files/zh-cn/web/api/characterdata/index.html | 18 +- files/zh-cn/web/api/clearinterval/index.html | 2 +- files/zh-cn/web/api/client/index.html | 2 +- .../web/api/client/postmessage/index.html | 2 +- files/zh-cn/web/api/clients/claim/index.html | 10 +- files/zh-cn/web/api/clients/get/index.html | 8 +- files/zh-cn/web/api/clients/index.html | 62 +- .../zh-cn/web/api/clients/matchall/index.html | 8 +- .../web/api/clients/openwindow/index.html | 2 +- .../zh-cn/web/api/clipboard/write/index.html | 16 +- .../web/api/clipboard/writetext/index.html | 2 +- files/zh-cn/web/api/clipboard_api/index.html | 12 +- .../clipboardevent/clipboarddata/index.html | 2 +- .../clipboardevent/clipboardevent/index.html | 14 +- files/zh-cn/web/api/clipboardevent/index.html | 6 +- files/zh-cn/web/api/clipboarditem/index.html | 4 +- files/zh-cn/web/api/closeevent/index.html | 16 +- .../zh-cn/web/api/comment/comment/index.html | 4 +- files/zh-cn/web/api/comment/index.html | 4 +- .../zh-cn/web/api/compositionevent/index.html | 8 +- files/zh-cn/web/api/console/assert/index.html | 8 +- files/zh-cn/web/api/console/clear/index.html | 2 +- files/zh-cn/web/api/console/count/index.html | 6 +- .../web/api/console/countreset/index.html | 18 +- files/zh-cn/web/api/console/debug/index.html | 2 +- files/zh-cn/web/api/console/dir/index.html | 2 +- .../zh-cn/web/api/console/groupend/index.html | 2 +- files/zh-cn/web/api/console/index.html | 40 +- files/zh-cn/web/api/console/info/index.html | 4 +- .../zh-cn/web/api/console/profile/index.html | 2 +- .../web/api/console/profileend/index.html | 8 +- files/zh-cn/web/api/console/table/index.html | 8 +- files/zh-cn/web/api/console/time/index.html | 2 +- .../zh-cn/web/api/console/timeend/index.html | 2 +- .../zh-cn/web/api/console/timelog/index.html | 16 +- .../web/api/console/timestamp/index.html | 2 +- files/zh-cn/web/api/console/trace/index.html | 4 +- files/zh-cn/web/api/console/warn/index.html | 2 +- files/zh-cn/web/api/convolvernode/index.html | 8 +- .../web/api/createimagebitmap/index.html | 12 +- .../api/credential_management_api/index.html | 4 +- .../web/api/credentialscontainer/index.html | 12 +- .../web/api/crossoriginisolated/index.html | 2 +- .../web/api/crypto/getrandomvalues/index.html | 4 +- .../zh-cn/web/api/crypto_property/index.html | 20 +- files/zh-cn/web/api/cryptokey/index.html | 4 +- files/zh-cn/web/api/css/escape/index.html | 2 +- files/zh-cn/web/api/css/index.html | 4 +- .../index.html | 4 +- .../zh-cn/web/api/css_object_model/index.html | 2 +- .../index.html | 22 +- .../zh-cn/web/api/cssconditionrule/index.html | 6 +- files/zh-cn/web/api/cssmathsum/index.html | 2 +- files/zh-cn/web/api/csspagerule/index.html | 8 +- .../zh-cn/web/api/cssrule/csstext/index.html | 2 +- files/zh-cn/web/api/cssrule/index.html | 4 +- .../api/cssrule/parentstylesheet/index.html | 2 +- .../getpropertycssvalue/index.html | 8 +- .../getpropertypriority/index.html | 4 +- .../getpropertyvalue/index.html | 8 +- .../web/api/cssstyledeclaration/index.html | 2 +- .../api/cssstyledeclaration/item/index.html | 8 +- .../removeproperty/index.html | 12 +- .../setproperty/index.html | 18 +- .../api/cssstylerule/selectortext/index.html | 2 +- .../web/api/cssstylerule/style/index.html | 2 +- files/zh-cn/web/api/cssstylesheet/index.html | 22 +- .../api/cssstylesheet/insertrule/index.html | 40 +- .../zh-cn/web/api/csssupportsrule/index.html | 2 +- files/zh-cn/web/api/cssvaluelist/index.html | 2 +- .../customelementregistry/define/index.html | 4 +- .../api/customelementregistry/get/index.html | 2 +- .../web/api/customelementregistry/index.html | 4 +- .../whendefined/index.html | 4 +- .../api/customevent/customevent/index.html | 38 +- .../web/api/customevent/detail/index.html | 4 +- files/zh-cn/web/api/customevent/index.html | 8 +- .../customevent/initcustomevent/index.html | 4 +- .../api/datatransfer/datatransfer/index.html | 4 +- .../api/datatransfer/effectallowed/index.html | 12 +- .../web/api/datatransfer/getdata/index.html | 4 +- files/zh-cn/web/api/datatransfer/index.html | 22 +- .../web/api/datatransfer/items/index.html | 4 +- .../web/api/datatransfer/setdata/index.html | 124 +-- .../api/datatransfer/setdragimage/index.html | 30 +- .../web/api/datatransfer/types/index.html | 12 +- .../api/datatransferitem/getasfile/index.html | 6 +- .../datatransferitem/getasstring/index.html | 2 +- .../zh-cn/web/api/datatransferitem/index.html | 4 +- .../web/api/datatransferitem/kind/index.html | 6 +- .../web/api/datatransferitem/type/index.html | 6 +- .../webkitgetasentry/index.html | 8 +- .../web/api/datatransferitemlist/index.html | 6 +- .../datatransferitemlist/length/index.html | 2 +- .../api/dedicatedworkerglobalscope/index.html | 12 +- .../devicemotionevent/index.html | 12 +- .../web/api/devicemotionevent/index.html | 8 +- .../devicemotioneventacceleration/index.html | 2 +- .../absolute/index.html | 2 +- .../deviceorientationevent/alpha/index.html | 6 +- .../deviceorientationevent/beta/index.html | 2 +- .../web/api/deviceorientationevent/index.html | 6 +- .../web/api/deviceproximityevent/index.html | 4 +- .../web/api/document/activeelement/index.html | 8 +- .../web/api/document/adoptnode/index.html | 22 +- .../web/api/document/alinkcolor/index.html | 6 +- files/zh-cn/web/api/document/all/index.html | 4 +- .../zh-cn/web/api/document/anchors/index.html | 4 +- .../zh-cn/web/api/document/bgcolor/index.html | 6 +- .../document/caretrangefrompoint/index.html | 52 +- .../zh-cn/web/api/document/cookie/index.html | 122 +-- .../api/document/createattribute/index.html | 2 +- .../createdocumentfragment/index.html | 8 +- .../web/api/document/createelement/index.html | 10 +- .../api/document/createelementns/index.html | 12 +- .../web/api/document/createevent/index.html | 16 +- .../document/createnodeiterator/index.html | 28 +- .../api/document/creatensresolver/index.html | 2 +- .../createprocessinginstruction/index.html | 6 +- .../api/document/createtreewalker/index.html | 10 +- .../web/api/document/defaultview/index.html | 4 +- .../web/api/document/designmode/index.html | 2 +- .../web/api/document/document/index.html | 2 +- .../api/document/documentelement/index.html | 4 +- .../web/api/document/documenturi/index.html | 8 +- .../zh-cn/web/api/document/domain/index.html | 2 +- .../domcontentloaded_event/index.html | 4 +- .../api/document/dragover_event/index.html | 2 +- .../api/document/dragstart_event/index.html | 116 +-- .../web/api/document/drop_event/index.html | 2 +- .../api/document/elementfrompoint/index.html | 2 +- .../zh-cn/web/api/document/embeds/index.html | 2 +- .../web/api/document/execcommand/index.html | 22 +- .../api/document/exitfullscreen/index.html | 4 +- .../api/document/exitpointerlock/index.html | 2 +- files/zh-cn/web/api/document/fonts/index.html | 2 +- files/zh-cn/web/api/document/forms/index.html | 2 +- .../web/api/document/fullscreen/index.html | 8 +- .../api/document/fullscreenenabled/index.html | 8 +- .../document/fullscreenerror_event/index.html | 2 +- .../api/document/getelementbyid/index.html | 18 +- .../getelementsbyclassname/index.html | 10 +- .../api/document/getelementsbyname/index.html | 16 +- .../document/getelementsbytagname/index.html | 32 +- .../getelementsbytagnamens/index.html | 16 +- .../web/api/document/getselection/index.html | 4 +- .../api/document/hasstorageaccess/index.html | 2 +- files/zh-cn/web/api/document/head/index.html | 2 +- .../zh-cn/web/api/document/height/index.html | 4 +- .../zh-cn/web/api/document/hidden/index.html | 2 +- .../api/document/implementation/index.html | 12 +- .../web/api/document/importnode/index.html | 4 +- files/zh-cn/web/api/document/index.html | 20 +- .../web/api/document/lastmodified/index.html | 2 +- .../api/document/laststylesheetset/index.html | 4 +- .../web/api/document/linkcolor/index.html | 4 +- files/zh-cn/web/api/document/links/index.html | 2 +- .../web/api/document/location/index.html | 4 +- .../document/mozsyntheticdocument/index.html | 2 +- files/zh-cn/web/api/document/open/index.html | 10 +- .../zh-cn/web/api/document/origin/index.html | 4 +- .../zh-cn/web/api/document/plugins/index.html | 6 +- .../preferredstylesheetset/index.html | 6 +- .../document/querycommandenabled/index.html | 10 +- .../document/querycommandsupported/index.html | 10 +- .../web/api/document/queryselector/index.html | 4 +- .../api/document/queryselectorall/index.html | 4 +- .../web/api/document/readystate/index.html | 8 +- .../web/api/document/referrer/index.html | 4 +- .../api/document/registerelement/index.html | 10 +- .../zh-cn/web/api/document/scripts/index.html | 2 +- .../web/api/document/scroll_event/index.html | 8 +- .../api/document/scrollingelement/index.html | 4 +- .../document/selectedstylesheetset/index.html | 4 +- .../document/selectionchange_event/index.html | 4 +- .../api/document/selectstart_event/index.html | 2 +- .../web/api/document/stylesheets/index.html | 2 +- files/zh-cn/web/api/document/title/index.html | 8 +- .../api/document/touchmove_event/index.html | 2 +- .../api/document/touchstart_event/index.html | 4 +- .../visibilitychange_event/index.html | 6 +- .../api/document/visibilitystate/index.html | 8 +- files/zh-cn/web/api/document/write/index.html | 16 +- .../zh-cn/web/api/document/writeln/index.html | 6 +- .../document_object_model/examples/index.html | 46 +- .../how_to_create_a_dom_tree/index.html | 76 +- .../web/api/document_object_model/index.html | 12 +- .../introduction/index.html | 46 +- .../index.html | 14 +- .../using_the_w3c_dom_level_1_core/index.html | 12 +- .../whitespace/index.html | 4 +- .../documentfragment/index.html | 2 +- .../zh-cn/web/api/documentfragment/index.html | 2 +- .../documentfragment/queryselector/index.html | 10 +- files/zh-cn/web/api/documenttype/index.html | 6 +- files/zh-cn/web/api/domerror/index.html | 2 +- .../web/api/domexception/code/index.html | 2 +- .../api/domexception/domexception/index.html | 6 +- files/zh-cn/web/api/domexception/index.html | 12 +- .../web/api/domhighrestimestamp/index.html | 14 +- .../createdocument/index.html | 6 +- .../createdocumenttype/index.html | 8 +- .../web/api/domimplementation/index.html | 2 +- .../web/api/dompoint/dompoint/index.html | 12 +- files/zh-cn/web/api/dompoint/w/index.html | 4 +- files/zh-cn/web/api/dompoint/x/index.html | 2 +- files/zh-cn/web/api/dompoint/y/index.html | 4 +- files/zh-cn/web/api/dompoint/z/index.html | 2 +- files/zh-cn/web/api/domquad/index.html | 4 +- .../zh-cn/web/api/domrect/domrect/index.html | 10 +- files/zh-cn/web/api/domrect/index.html | 22 +- .../zh-cn/web/api/domrectreadonly/index.html | 18 +- .../zh-cn/web/api/domtokenlist/add/index.html | 4 +- files/zh-cn/web/api/domtokenlist/index.html | 28 +- .../web/api/domtokenlist/item/index.html | 2 +- .../web/api/domtokenlist/keys/index.html | 4 +- .../web/api/domtokenlist/length/index.html | 6 +- .../web/api/domtokenlist/remove/index.html | 2 +- .../web/api/domtokenlist/replace/index.html | 6 +- .../web/api/domtokenlist/toggle/index.html | 6 +- .../web/api/dragevent/datatransfer/index.html | 6 +- .../web/api/dragevent/dragevent/index.html | 2 +- .../web/api/dynamicscompressornode/index.html | 20 +- files/zh-cn/web/api/element/after/index.html | 4 +- .../zh-cn/web/api/element/animate/index.html | 50 +- .../element/animationcancel_event/index.html | 16 +- .../api/element/animationend_event/index.html | 2 +- .../animationiteration_event/index.html | 12 +- .../element/animationstart_event/index.html | 4 +- files/zh-cn/web/api/element/append/index.html | 18 +- .../web/api/element/assignedslot/index.html | 2 +- .../web/api/element/attachshadow/index.html | 12 +- .../web/api/element/attributes/index.html | 6 +- .../web/api/element/auxclick_event/index.html | 2 +- files/zh-cn/web/api/element/before/index.html | 8 +- .../web/api/element/blur_event/index.html | 8 +- .../api/element/childelementcount/index.html | 96 +-- .../zh-cn/web/api/element/children/index.html | 6 +- .../web/api/element/classlist/index.html | 6 +- .../web/api/element/classname/index.html | 4 +- .../web/api/element/click_event/index.html | 10 +- .../web/api/element/clientheight/index.html | 4 +- .../web/api/element/clientleft/index.html | 12 +- .../web/api/element/clienttop/index.html | 8 +- .../zh-cn/web/api/element/closest/index.html | 2 +- .../element/compositionend_event/index.html | 2 +- .../element/compositionstart_event/index.html | 2 +- .../compositionupdate_event/index.html | 8 +- .../api/element/contextmenu_event/index.html | 6 +- .../web/api/element/copy_event/index.html | 2 +- .../web/api/element/dblclick_event/index.html | 6 +- .../api/element/domactivate_event/index.html | 2 +- .../api/element/firstelementchild/index.html | 2 +- .../web/api/element/focus_event/index.html | 6 +- .../web/api/element/focusout_event/index.html | 2 +- .../element/fullscreenchange_event/index.html | 8 +- .../element/fullscreenerror_event/index.html | 2 +- .../web/api/element/getattribute/index.html | 10 +- .../api/element/getattributenames/index.html | 4 +- .../api/element/getattributenode/index.html | 4 +- .../api/element/getattributenodens/index.html | 6 +- .../element/getelementsbyclassname/index.html | 10 +- .../element/getelementsbytagname/index.html | 6 +- .../element/getelementsbytagnamens/index.html | 10 +- .../web/api/element/hasattribute/index.html | 6 +- .../web/api/element/hasattributens/index.html | 2 +- files/zh-cn/web/api/element/id/index.html | 4 +- files/zh-cn/web/api/element/index.html | 6 +- .../web/api/element/innerhtml/index.html | 48 +- .../element/insertadjacentelement/index.html | 8 +- .../api/element/insertadjacenthtml/index.html | 18 +- .../web/api/element/keydown_event/index.html | 8 +- .../web/api/element/keyup_event/index.html | 4 +- .../web/api/element/localname/index.html | 6 +- .../zh-cn/web/api/element/matches/index.html | 6 +- .../api/element/mousedown_event/index.html | 16 +- .../api/element/mouseenter_event/index.html | 20 +- .../api/element/mouseleave_event/index.html | 8 +- .../api/element/mousemove_event/index.html | 4 +- .../web/api/element/mouseout_event/index.html | 8 +- .../api/element/mouseover_event/index.html | 44 +- .../web/api/element/mouseup_event/index.html | 2 +- .../web/api/element/namespaceuri/index.html | 6 +- .../api/element/nextelementsibling/index.html | 2 +- .../element/openorclosedshadowroot/index.html | 4 +- .../web/api/element/outerhtml/index.html | 16 +- .../web/api/element/paste_event/index.html | 8 +- .../api/element/pointerdown_event/index.html | 8 +- .../api/element/pointerenter_event/index.html | 10 +- .../api/element/pointerleave_event/index.html | 8 +- .../api/element/pointermove_event/index.html | 4 +- .../api/element/pointerout_event/index.html | 2 +- .../api/element/pointerover_event/index.html | 4 +- .../api/element/pointerup_event/index.html | 2 +- files/zh-cn/web/api/element/prefix/index.html | 2 +- .../zh-cn/web/api/element/prepend/index.html | 2 +- .../web/api/element/queryselector/index.html | 10 +- .../api/element/queryselectorall/index.html | 2 +- files/zh-cn/web/api/element/remove/index.html | 8 +- .../api/element/removeattribute/index.html | 2 +- .../element/removeattributenode/index.html | 10 +- .../api/element/replacechildren/index.html | 10 +- .../web/api/element/replacewith/index.html | 4 +- .../api/element/requestfullscreen/index.html | 14 +- files/zh-cn/web/api/element/scroll/index.html | 8 +- .../web/api/element/scroll_event/index.html | 8 +- .../zh-cn/web/api/element/scrollby/index.html | 8 +- .../web/api/element/scrollintoview/index.html | 18 +- .../web/api/element/scrollleft/index.html | 8 +- .../web/api/element/scrollleftmax/index.html | 2 +- .../zh-cn/web/api/element/scrollto/index.html | 6 +- .../web/api/element/scrolltop/index.html | 14 +- .../web/api/element/scrollwidth/index.html | 4 +- .../web/api/element/setattribute/index.html | 4 +- .../api/element/setattributenode/index.html | 6 +- .../api/element/setattributenodens/index.html | 12 +- .../web/api/element/setattributens/index.html | 2 +- .../api/element/setpointercapture/index.html | 6 +- .../web/api/element/shadowroot/index.html | 6 +- .../web/api/element/show_event/index.html | 8 +- files/zh-cn/web/api/element/slot/index.html | 8 +- .../api/element/touchcancel_event/index.html | 2 +- .../api/element/touchmove_event/index.html | 6 +- .../api/element/touchstart_event/index.html | 4 +- .../element/transitioncancel_event/index.html | 30 +- .../web/api/element/wheel_event/index.html | 140 ++-- .../web/api/event/cancelbubble/index.html | 8 +- .../comparison_of_event_targets/index.html | 108 +-- files/zh-cn/web/api/event/composed/index.html | 6 +- .../web/api/event/composedpath/index.html | 12 +- .../web/api/event/currenttarget/index.html | 6 +- .../web/api/event/defaultprevented/index.html | 2 +- files/zh-cn/web/api/event/event/index.html | 8 +- .../zh-cn/web/api/event/eventphase/index.html | 28 +- files/zh-cn/web/api/event/index.html | 4 +- .../zh-cn/web/api/event/initevent/index.html | 4 +- .../zh-cn/web/api/event/istrusted/index.html | 2 +- .../web/api/event/originaltarget/index.html | 2 +- .../web/api/event/preventdefault/index.html | 4 +- .../zh-cn/web/api/event/srcelement/index.html | 6 +- files/zh-cn/web/api/event/target/index.html | 10 +- .../zh-cn/web/api/event/timestamp/index.html | 2 +- files/zh-cn/web/api/event/type/index.html | 2 +- .../web/api/eventsource/close/index.html | 8 +- .../api/eventsource/error_event/index.html | 6 +- .../api/eventsource/eventsource/index.html | 6 +- files/zh-cn/web/api/eventsource/index.html | 2 +- .../web/api/eventsource/open_event/index.html | 2 +- .../eventtarget/addeventlistener/index.html | 246 +++--- .../api/eventtarget/dispatchevent/index.html | 12 +- .../api/eventtarget/eventtarget/index.html | 8 +- files/zh-cn/web/api/eventtarget/index.html | 12 +- .../removeeventlistener/index.html | 30 +- .../zh-cn/web/api/extendableevent/index.html | 2 +- .../api/extendableevent/waituntil/index.html | 22 +- files/zh-cn/web/api/fetch/index.html | 22 +- .../api/fetch_api/basic_concepts/index.html | 24 +- files/zh-cn/web/api/fetch_api/index.html | 10 +- files/zh-cn/web/api/fetchevent/index.html | 14 +- .../web/api/fetchevent/respondwith/index.html | 8 +- files/zh-cn/web/api/file/file/index.html | 6 +- files/zh-cn/web/api/file/index.html | 4 +- .../web/api/file/lastmodified/index.html | 14 +- files/zh-cn/web/api/file/type/index.html | 6 +- .../api/file/webkitrelativepath/index.html | 8 +- .../firefox_support/index.html | 4 +- .../introduction/index.html | 12 +- .../index.html | 120 +-- files/zh-cn/web/api/fileerror/index.html | 2 +- .../zh-cn/web/api/filereader/abort/index.html | 4 +- .../web/api/filereader/abort_event/index.html | 2 +- .../web/api/filereader/filereader/index.html | 12 +- files/zh-cn/web/api/filereader/index.html | 10 +- .../web/api/filereader/load_event/index.html | 2 +- .../filereader/readasarraybuffer/index.html | 4 +- .../filereader/readasbinarystring/index.html | 16 +- .../api/filereader/readasdataurl/index.html | 24 +- .../web/api/filereader/readastext/index.html | 8 +- .../web/api/filereader/readystate/index.html | 4 +- files/zh-cn/web/api/filerequest/index.html | 2 +- files/zh-cn/web/api/filesystem/index.html | 8 +- .../api/filesystemdirectoryentry/index.html | 12 +- .../web/api/filesystemfileentry/index.html | 8 +- files/zh-cn/web/api/filesystemsync/index.html | 8 +- files/zh-cn/web/api/focusevent/index.html | 6 +- files/zh-cn/web/api/fontface/index.html | 2 +- .../zh-cn/web/api/formdata/append/index.html | 16 +- .../zh-cn/web/api/formdata/entries/index.html | 4 +- .../web/api/formdata/formdata/index.html | 2 +- .../zh-cn/web/api/formdata/getall/index.html | 8 +- files/zh-cn/web/api/formdata/has/index.html | 4 +- files/zh-cn/web/api/formdata/index.html | 12 +- files/zh-cn/web/api/formdata/keys/index.html | 4 +- files/zh-cn/web/api/formdata/set/index.html | 10 +- .../using_formdata_objects/index.html | 58 +- .../zh-cn/web/api/formdata/values/index.html | 4 +- .../web/api/fullscreen_api/guide/index.html | 76 +- files/zh-cn/web/api/fullscreen_api/index.html | 52 +- files/zh-cn/web/api/gainnode/index.html | 2 +- files/zh-cn/web/api/gamepad/index.html | 14 +- files/zh-cn/web/api/gamepad_api/index.html | 14 +- .../using_the_gamepad_api/index.html | 234 +++--- files/zh-cn/web/api/gamepadbutton/index.html | 12 +- .../web/api/gamepadbutton/pressed/index.html | 4 +- .../web/api/gamepadbutton/value/index.html | 6 +- .../web/api/gamepadevent/gamepad/index.html | 4 +- .../api/gamepadevent/gamepadevent/index.html | 4 +- files/zh-cn/web/api/gamepadevent/index.html | 4 +- files/zh-cn/web/api/gamepadpose/index.html | 4 +- .../web/api/geolocation/clearwatch/index.html | 6 +- .../geolocation/getcurrentposition/index.html | 4 +- files/zh-cn/web/api/geolocation/index.html | 12 +- .../api/geolocation/watchposition/index.html | 12 +- .../zh-cn/web/api/geolocation_api/index.html | 6 +- .../web/api/geolocationcoordinates/index.html | 4 +- .../web/api/geolocationposition/index.html | 2 +- files/zh-cn/web/api/gestureevent/index.html | 2 +- .../web/api/globaleventhandlers/index.html | 16 +- .../globaleventhandlers/oncancel/index.html | 6 +- .../globaleventhandlers/onerror/index.html | 4 +- .../ongotpointercapture/index.html | 2 +- .../globaleventhandlers/oninvalid/index.html | 4 +- .../onloadeddata/index.html | 4 +- .../globaleventhandlers/onloadend/index.html | 2 +- .../onloadstart/index.html | 2 +- .../onlostpointercapture/index.html | 6 +- .../globaleventhandlers/onpause/index.html | 2 +- .../api/globaleventhandlers/onplay/index.html | 4 +- .../globaleventhandlers/onplaying/index.html | 4 +- .../zh-cn/web/api/hashchangeevent/index.html | 4 +- .../web/api/hashchangeevent/newurl/index.html | 2 +- .../web/api/hashchangeevent/oldurl/index.html | 2 +- files/zh-cn/web/api/headers/append/index.html | 6 +- files/zh-cn/web/api/headers/delete/index.html | 4 +- .../zh-cn/web/api/headers/entries/index.html | 4 +- files/zh-cn/web/api/headers/get/index.html | 6 +- files/zh-cn/web/api/headers/has/index.html | 6 +- .../zh-cn/web/api/headers/headers/index.html | 4 +- files/zh-cn/web/api/headers/index.html | 14 +- files/zh-cn/web/api/headers/keys/index.html | 6 +- files/zh-cn/web/api/headers/set/index.html | 14 +- files/zh-cn/web/api/headers/values/index.html | 2 +- files/zh-cn/web/api/history/index.html | 4 +- files/zh-cn/web/api/history/length/index.html | 4 +- .../web/api/history/pushstate/index.html | 14 +- .../web/api/history/replacestate/index.html | 8 +- files/zh-cn/web/api/history/state/index.html | 6 +- .../web/api/history_api/example/index.html | 506 ++++++------- files/zh-cn/web/api/history_api/index.html | 80 +- .../working_with_the_history_api/index.html | 28 +- files/zh-cn/web/api/html_dom_api/index.html | 20 +- .../microtask_guide/in_depth/index.html | 64 +- .../html_dom_api/microtask_guide/index.html | 20 +- .../drag_operations/index.html | 90 +-- .../file_drag_and_drop/index.html | 14 +- .../web/api/html_drag_and_drop_api/index.html | 20 +- .../multiple_items/index.html | 22 +- .../recommended_drag_types/index.html | 2 +- .../web/api/htmlanchorelement/hash/index.html | 2 +- .../web/api/htmlanchorelement/href/index.html | 2 +- .../web/api/htmlanchorelement/index.html | 8 +- .../api/htmlanchorelement/origin/index.html | 2 +- .../referrerpolicy/index.html | 8 +- .../zh-cn/web/api/htmlareaelement/index.html | 4 +- .../zh-cn/web/api/htmlaudioelement/index.html | 16 +- .../zh-cn/web/api/htmlbaseelement/index.html | 10 +- .../zh-cn/web/api/htmlbodyelement/index.html | 6 +- .../web/api/htmlbuttonelement/index.html | 6 +- .../capturestream/index.html | 2 +- .../htmlcanvaselement/getcontext/index.html | 16 +- .../api/htmlcanvaselement/height/index.html | 2 +- .../web/api/htmlcanvaselement/index.html | 20 +- .../htmlcanvaselement/mozopaque/index.html | 4 +- .../htmlcanvaselement/todataurl/index.html | 10 +- .../transfercontroltooffscreen/index.html | 2 +- .../webglcontextlost_event/index.html | 6 +- .../api/htmlcanvaselement/width/index.html | 2 +- .../web/api/htmlcontentelement/index.html | 4 +- .../web/api/htmldataelement/value/index.html | 2 +- .../web/api/htmldetailselement/index.html | 8 +- .../htmldialogelement/close_event/index.html | 8 +- .../web/api/htmldialogelement/index.html | 4 +- files/zh-cn/web/api/htmldocument/index.html | 4 +- .../web/api/htmlelement/accesskey/index.html | 10 +- .../api/htmlelement/accesskeylabel/index.html | 2 +- .../htmlelement/beforeinput_event/index.html | 4 +- .../api/htmlelement/change_event/index.html | 14 +- .../htmlelement/contenteditable/index.html | 8 +- .../api/htmlelement/contextmenu/index.html | 2 +- .../zh-cn/web/api/htmlelement/dir/index.html | 2 +- .../web/api/htmlelement/hidden/index.html | 4 +- files/zh-cn/web/api/htmlelement/index.html | 26 +- .../web/api/htmlelement/innertext/index.html | 6 +- .../api/htmlelement/input_event/index.html | 18 +- .../htmlelement/iscontenteditable/index.html | 6 +- .../zh-cn/web/api/htmlelement/lang/index.html | 8 +- .../web/api/htmlelement/nonce/index.html | 6 +- .../api/htmlelement/offsetheight/index.html | 6 +- .../web/api/htmlelement/offsetleft/index.html | 4 +- .../api/htmlelement/offsetparent/index.html | 6 +- .../web/api/htmlelement/outertext/index.html | 2 +- .../api/htmlelement/paste_event/index.html | 2 +- .../web/api/htmlelement/title/index.html | 4 +- .../web/api/htmlfieldsetelement/index.html | 4 +- .../web/api/htmlformelement/action/index.html | 2 +- .../api/htmlformelement/elements/index.html | 2 +- .../api/htmlformelement/enctype/index.html | 4 +- .../zh-cn/web/api/htmlformelement/index.html | 66 +- .../htmlformelement/reportvalidity/index.html | 2 +- .../zh-cn/web/api/htmlhtmlelement/index.html | 6 +- .../api/htmlhtmlelement/version/index.html | 4 +- .../contentwindow/index.html | 2 +- .../web/api/htmliframeelement/index.html | 22 +- .../api/htmlimageelement/complete/index.html | 26 +- .../api/htmlimageelement/decode/index.html | 6 +- .../api/htmlimageelement/decoding/index.html | 4 +- .../web/api/htmlimageelement/image/index.html | 2 +- .../zh-cn/web/api/htmlimageelement/index.html | 6 +- .../api/htmlimageelement/loading/index.html | 38 +- .../referrerpolicy/index.html | 6 +- .../api/htmlimageelement/srcset/index.html | 4 +- .../zh-cn/web/api/htmlinputelement/index.html | 38 +- .../htmlinputelement/invalid_event/index.html | 6 +- .../api/htmlinputelement/labels/index.html | 4 +- .../api/htmlinputelement/multiple/index.html | 2 +- .../htmlinputelement/select_event/index.html | 2 +- .../selectionchange_event/index.html | 2 +- .../setselectionrange/index.html | 14 +- .../webkitdirectory/index.html | 2 +- .../zh-cn/web/api/htmllabelelement/index.html | 6 +- .../zh-cn/web/api/htmllinkelement/index.html | 14 +- .../htmllinkelement/referrerpolicy/index.html | 8 +- .../htmlmediaelement/abort_event/index.html | 2 +- .../htmlmediaelement/audiotracks/index.html | 4 +- .../api/htmlmediaelement/autoplay/index.html | 4 +- .../api/htmlmediaelement/buffered/index.html | 4 +- .../htmlmediaelement/canplaytype/index.html | 8 +- .../htmlmediaelement/controller/index.html | 4 +- .../htmlmediaelement/controlslist/index.html | 4 +- .../htmlmediaelement/crossorigin/index.html | 2 +- .../htmlmediaelement/currentsrc/index.html | 4 +- .../htmlmediaelement/currenttime/index.html | 12 +- .../api/htmlmediaelement/duration/index.html | 2 +- .../durationchange_event/index.html | 8 +- .../htmlmediaelement/error_event/index.html | 2 +- .../zh-cn/web/api/htmlmediaelement/index.html | 30 +- .../web/api/htmlmediaelement/load/index.html | 14 +- .../loadstart_event/index.html | 2 +- .../web/api/htmlmediaelement/loop/index.html | 6 +- .../htmlmediaelement/networkstate/index.html | 8 +- .../web/api/htmlmediaelement/pause/index.html | 2 +- .../htmlmediaelement/pause_event/index.html | 8 +- .../api/htmlmediaelement/paused/index.html | 4 +- .../web/api/htmlmediaelement/play/index.html | 22 +- .../htmlmediaelement/play_event/index.html | 4 +- .../htmlmediaelement/playbackrate/index.html | 6 +- .../htmlmediaelement/readystate/index.html | 8 +- .../web/api/htmlmediaelement/src/index.html | 2 +- .../api/htmlmediaelement/srcobject/index.html | 4 +- .../timeupdate_event/index.html | 6 +- .../htmlmediaelement/videotracks/index.html | 8 +- .../api/htmlmediaelement/volume/index.html | 2 +- .../web/api/htmloptgroupelement/index.html | 2 +- .../web/api/htmloptionelement/index.html | 2 +- .../api/htmloptionelement/option/index.html | 2 +- .../web/api/htmlparagraphelement/index.html | 2 +- .../web/api/htmlscriptelement/index.html | 44 +- .../web/api/htmlselectelement/add/index.html | 8 +- .../checkvalidity/index.html | 2 +- .../web/api/htmlselectelement/index.html | 8 +- .../api/htmlselectelement/remove/index.html | 2 +- .../selectedindex/index.html | 2 +- .../setcustomvalidity/index.html | 2 +- .../web/api/htmlslotelement/name/index.html | 8 +- .../zh-cn/web/api/htmlspanelement/index.html | 2 +- .../zh-cn/web/api/htmlstyleelement/index.html | 2 +- .../htmltableelement/createcaption/index.html | 2 +- .../zh-cn/web/api/htmltableelement/index.html | 8 +- .../web/api/htmltableelement/rows/index.html | 2 +- .../web/api/htmltablerowelement/index.html | 2 +- .../web/api/htmltemplateelement/index.html | 2 +- .../web/api/htmlunknownelement/index.html | 4 +- .../zh-cn/web/api/htmlvideoelement/index.html | 4 +- .../web/api/idbcursor/direction/index.html | 10 +- files/zh-cn/web/api/idbcursor/index.html | 4 +- files/zh-cn/web/api/idbcursor/key/index.html | 2 +- files/zh-cn/web/api/idbcursorsync/index.html | 8 +- .../idbdatabase/createobjectstore/index.html | 20 +- .../idbdatabase/deleteobjectstore/index.html | 24 +- files/zh-cn/web/api/idbdatabase/index.html | 18 +- .../versionchange_event/index.html | 10 +- files/zh-cn/web/api/idbenvironment/index.html | 10 +- files/zh-cn/web/api/idbfactory/index.html | 10 +- .../zh-cn/web/api/idbfactory/open/index.html | 12 +- files/zh-cn/web/api/idbfilehandle/index.html | 12 +- files/zh-cn/web/api/idbindex/index.html | 6 +- files/zh-cn/web/api/idbkeyrange/index.html | 4 +- .../web/api/idbkeyrange/lowerbound/index.html | 8 +- .../web/api/idbobjectstore/add/index.html | 16 +- .../idbobjectstore/autoincrement/index.html | 14 +- .../web/api/idbobjectstore/get/index.html | 18 +- files/zh-cn/web/api/idbobjectstore/index.html | 72 +- .../api/idbobjectstore/indexnames/index.html | 10 +- .../web/api/idbobjectstore/keypath/index.html | 12 +- .../api/idbobjectstore/opencursor/index.html | 8 +- .../web/api/idbobjectstore/put/index.html | 16 +- .../zh-cn/web/api/idbopendbrequest/index.html | 20 +- files/zh-cn/web/api/idbrequest/index.html | 16 +- .../web/api/idbtransaction/db/index.html | 14 +- files/zh-cn/web/api/idbtransaction/index.html | 2 +- files/zh-cn/web/api/idledeadline/index.html | 6 +- .../web/api/imagebitmap/height/index.html | 2 +- .../web/api/imagebitmap/width/index.html | 2 +- .../imagebitmaprenderingcontext/index.html | 4 +- files/zh-cn/web/api/imagedata/data/index.html | 2 +- .../zh-cn/web/api/imagedata/height/index.html | 2 +- .../web/api/imagedata/imagedata/index.html | 6 +- files/zh-cn/web/api/imagedata/index.html | 12 +- .../zh-cn/web/api/imagedata/width/index.html | 2 +- files/zh-cn/web/api/indexeddb/index.html | 2 +- .../index.html | 18 +- .../index.html | 4 +- files/zh-cn/web/api/indexeddb_api/index.html | 30 +- .../indexeddb_api/using_indexeddb/index.html | 66 +- .../zh-cn/web/api/inputevent/data/index.html | 6 +- .../api/inputevent/datatransfer/index.html | 4 +- files/zh-cn/web/api/inputevent/index.html | 6 +- .../web/api/inputevent/inputevent/index.html | 10 +- files/zh-cn/web/api/installevent/index.html | 8 +- .../api/intersection_observer_api/index.html | 8 +- .../timing_element_visibility/index.html | 2 +- .../disconnect/index.html | 4 +- .../web/api/intersectionobserver/index.html | 6 +- .../intersectionobserver/index.html | 4 +- .../intersectionobserver/observe/index.html | 2 +- .../rootmargin/index.html | 2 +- .../takerecords/index.html | 4 +- .../api/intersectionobserverentry/index.html | 12 +- .../zh-cn/web/api/issecurecontext/index.html | 2 +- files/zh-cn/web/api/keyboard/index.html | 6 +- .../web/api/keyboardevent/altkey/index.html | 2 +- .../web/api/keyboardevent/charcode/index.html | 20 +- .../web/api/keyboardevent/code/index.html | 36 +- .../web/api/keyboardevent/ctrlkey/index.html | 2 +- files/zh-cn/web/api/keyboardevent/index.html | 38 +- .../api/keyboardevent/initkeyevent/index.html | 4 +- .../api/keyboardevent/iscomposing/index.html | 2 +- .../web/api/keyboardevent/key/index.html | 64 +- .../keyboardevent/keyboardevent/index.html | 18 +- .../web/api/keyboardevent/keycode/index.html | 10 +- .../web/api/keyboardevent/location/index.html | 2 +- .../web/api/keyboardevent/metakey/index.html | 4 +- .../web/api/keyboardevent/shiftkey/index.html | 2 +- .../keyframeeffect/keyframeeffect/index.html | 18 +- files/zh-cn/web/api/location/hash/index.html | 2 +- files/zh-cn/web/api/location/host/index.html | 2 +- .../web/api/location/hostname/index.html | 2 +- files/zh-cn/web/api/location/href/index.html | 2 +- files/zh-cn/web/api/location/index.html | 8 +- .../zh-cn/web/api/location/replace/index.html | 2 +- .../zh-cn/web/api/location/search/index.html | 4 +- files/zh-cn/web/api/long_tasks_api/index.html | 4 +- .../media_source_extensions_api/index.html | 2 +- .../web/api/media_streams_api/index.html | 14 +- .../taking_still_photos/index.html | 42 +- .../mediacapabilities/encodinginfo/index.html | 14 +- .../devicechange_event/index.html | 2 +- .../mediadevices/getdisplaymedia/index.html | 8 +- .../getsupportedconstraints/index.html | 4 +- .../api/mediadevices/getusermedia/index.html | 32 +- files/zh-cn/web/api/mediadevices/index.html | 2 +- .../mediaelementaudiosourcenode/index.html | 4 +- .../zh-cn/web/api/mediakeysession/index.html | 28 +- files/zh-cn/web/api/medialist/index.html | 16 +- .../audiobitspersecond/index.html | 2 +- .../dataavailable_event/index.html | 2 +- files/zh-cn/web/api/mediarecorder/index.html | 26 +- .../mediarecorder/istypesupported/index.html | 2 +- .../mediarecorder/mediarecorder/index.html | 16 +- files/zh-cn/web/api/mediasession/index.html | 26 +- .../mediasession/setactionhandler/index.html | 30 +- .../mediasource/addsourcebuffer/index.html | 10 +- .../web/api/mediasource/duration/index.html | 8 +- files/zh-cn/web/api/mediasource/index.html | 12 +- .../api/mediasource/mediasource/index.html | 4 +- .../web/api/mediastream/active/index.html | 10 +- .../web/api/mediastream/addtrack/index.html | 4 +- .../web/api/mediastream/clone/index.html | 2 +- .../api/mediastream/getaudiotracks/index.html | 8 +- .../web/api/mediastream/gettracks/index.html | 2 +- files/zh-cn/web/api/mediastream/id/index.html | 2 +- files/zh-cn/web/api/mediastream/index.html | 4 +- .../api/mediastream/mediastream/index.html | 6 +- .../api/mediastream_recording_api/index.html | 24 +- .../index.html | 4 +- .../api/mediastreamaudiosourcenode/index.html | 4 +- .../zh-cn/web/api/mediastreamevent/index.html | 6 +- .../getcapabilities/index.html | 6 +- .../zh-cn/web/api/mediastreamtrack/index.html | 10 +- .../web/api/mediastreamtrack/stop/index.html | 4 +- .../web/api/mediatrackconstraints/index.html | 6 +- files/zh-cn/web/api/messagechannel/index.html | 4 +- .../messagechannel/messagechannel/index.html | 8 +- .../web/api/messagechannel/port1/index.html | 4 +- .../web/api/messagechannel/port2/index.html | 8 +- files/zh-cn/web/api/messageevent/index.html | 10 +- .../api/messageevent/messageevent/index.html | 8 +- files/zh-cn/web/api/messageport/index.html | 24 +- .../api/messageport/message_event/index.html | 2 +- files/zh-cn/web/api/midiaccess/index.html | 4 +- .../web/api/midiconnectionevent/index.html | 6 +- files/zh-cn/web/api/mimetype/index.html | 2 +- .../web/api/mouseevent/altkey/index.html | 2 +- .../web/api/mouseevent/button/index.html | 2 +- .../web/api/mouseevent/buttons/index.html | 14 +- .../web/api/mouseevent/clientx/index.html | 4 +- .../web/api/mouseevent/clienty/index.html | 4 +- .../mouseevent/getmodifierstate/index.html | 2 +- files/zh-cn/web/api/mouseevent/index.html | 8 +- .../api/mouseevent/initmouseevent/index.html | 12 +- .../web/api/mouseevent/metakey/index.html | 4 +- .../web/api/mouseevent/mouseevent/index.html | 16 +- .../web/api/mouseevent/movementx/index.html | 2 +- .../web/api/mouseevent/movementy/index.html | 2 +- .../web/api/mouseevent/offsetx/index.html | 2 +- .../web/api/mouseevent/offsety/index.html | 2 +- .../zh-cn/web/api/mouseevent/pagex/index.html | 4 +- .../zh-cn/web/api/mouseevent/pagey/index.html | 2 +- .../api/mouseevent/relatedtarget/index.html | 12 +- .../web/api/mouseevent/shiftkey/index.html | 2 +- files/zh-cn/web/api/mouseevent/y/index.html | 2 +- .../mutationobserver/disconnect/index.html | 2 +- .../zh-cn/web/api/mutationobserver/index.html | 4 +- .../mutationobserver/index.html | 12 +- .../api/mutationobserver/observe/index.html | 6 +- .../mutationobserver/takerecords/index.html | 4 +- files/zh-cn/web/api/namednodemap/index.html | 8 +- .../web/api/navigation_timing_api/index.html | 10 +- .../using_navigation_timing/index.html | 6 +- .../web/api/navigator/buildid/index.html | 2 +- .../web/api/navigator/canshare/index.html | 4 +- .../web/api/navigator/connection/index.html | 2 +- .../web/api/navigator/credentials/index.html | 10 +- .../web/api/navigator/devicememory/index.html | 2 +- .../web/api/navigator/donottrack/index.html | 2 +- .../web/api/navigator/getbattery/index.html | 2 +- .../web/api/navigator/getgamepads/index.html | 2 +- .../web/api/navigator/getusermedia/index.html | 16 +- files/zh-cn/web/api/navigator/index.html | 8 +- .../api/navigator/maxtouchpoints/index.html | 2 +- .../web/api/navigator/mediadevices/index.html | 4 +- .../zh-cn/web/api/navigator/oscpu/index.html | 14 +- .../web/api/navigator/permissions/index.html | 14 +- .../web/api/navigator/productsub/index.html | 2 +- .../registerprotocolhandler/index.html | 22 +- .../web-based_protocol_handlers/index.html | 2 +- .../api/navigator/serviceworker/index.html | 2 +- .../zh-cn/web/api/navigator/share/index.html | 6 +- .../zh-cn/web/api/navigator/vendor/index.html | 2 +- .../web/api/navigator/vibrate/index.html | 4 +- .../web/api/networkinformation/index.html | 4 +- .../web/api/networkinformation/rtt/index.html | 4 +- .../networkinformation/savedata/index.html | 2 +- .../zh-cn/web/api/node/appendchild/index.html | 10 +- files/zh-cn/web/api/node/baseuri/index.html | 10 +- .../zh-cn/web/api/node/childnodes/index.html | 4 +- files/zh-cn/web/api/node/clonenode/index.html | 4 +- .../node/comparedocumentposition/index.html | 10 +- .../zh-cn/web/api/node/firstchild/index.html | 2 +- .../zh-cn/web/api/node/getrootnode/index.html | 6 +- files/zh-cn/web/api/node/index.html | 30 +- .../web/api/node/insertbefore/index.html | 4 +- .../zh-cn/web/api/node/isconnected/index.html | 2 +- .../api/node/isdefaultnamespace/index.html | 2 +- .../zh-cn/web/api/node/isequalnode/index.html | 6 +- files/zh-cn/web/api/node/lastchild/index.html | 2 +- .../api/node/lookupnamespaceuri/index.html | 2 +- .../web/api/node/lookupprefix/index.html | 2 +- .../zh-cn/web/api/node/nextsibling/index.html | 8 +- files/zh-cn/web/api/node/nodename/index.html | 2 +- files/zh-cn/web/api/node/nodetype/index.html | 14 +- files/zh-cn/web/api/node/nodevalue/index.html | 2 +- .../web/api/node/ownerdocument/index.html | 2 +- .../zh-cn/web/api/node/removechild/index.html | 8 +- .../zh-cn/web/api/node/textcontent/index.html | 36 +- files/zh-cn/web/api/nodeiterator/index.html | 20 +- .../zh-cn/web/api/nodelist/entries/index.html | 2 +- .../zh-cn/web/api/nodelist/foreach/index.html | 10 +- files/zh-cn/web/api/nodelist/index.html | 6 +- .../zh-cn/web/api/nodelist/length/index.html | 4 +- .../web/api/notification/badge/index.html | 2 +- .../web/api/notification/body/index.html | 4 +- .../api/notification/click_event/index.html | 4 +- .../web/api/notification/close/index.html | 16 +- .../api/notification/close_event/index.html | 2 +- .../web/api/notification/data/index.html | 2 +- .../zh-cn/web/api/notification/dir/index.html | 6 +- .../api/notification/error_event/index.html | 4 +- .../web/api/notification/icon/index.html | 2 +- .../web/api/notification/image/index.html | 2 +- files/zh-cn/web/api/notification/index.html | 18 +- .../api/notification/notification/index.html | 14 +- .../api/notification/permission/index.html | 2 +- .../web/api/notification/renotify/index.html | 4 +- .../notification/requestpermission/index.html | 4 +- .../requireinteraction/index.html | 4 +- .../api/notification/show_event/index.html | 2 +- .../web/api/notifications_api/index.html | 16 +- .../using_the_notifications_api/index.html | 2 +- .../api/notifyaudioavailableevent/index.html | 4 +- .../api/oes_vertex_array_object/index.html | 8 +- .../web/api/offlineaudiocontext/index.html | 14 +- .../api/offlineaudiocontext/length/index.html | 2 +- .../offlineaudiocontext/index.html | 6 +- .../offlineaudiocontext/suspend/index.html | 2 +- .../zh-cn/web/api/offscreencanvas/index.html | 22 +- .../offscreencanvas/index.html | 2 +- files/zh-cn/web/api/origin/index.html | 2 +- .../web/api/oscillatornode/detune/index.html | 10 +- .../api/oscillatornode/frequency/index.html | 8 +- files/zh-cn/web/api/oscillatornode/index.html | 20 +- .../oscillatornode/oscillatornode/index.html | 10 +- .../oscillatornode/setperiodicwave/index.html | 8 +- .../web/api/page_visibility_api/index.html | 12 +- .../web/api/pagetransitionevent/index.html | 8 +- files/zh-cn/web/api/path2d/addpath/index.html | 8 +- files/zh-cn/web/api/path2d/index.html | 18 +- files/zh-cn/web/api/path2d/path2d/index.html | 18 +- .../payment_request_api/concepts/index.html | 4 +- files/zh-cn/web/api/paymentaddress/index.html | 32 +- .../web/api/performance/clearmarks/index.html | 6 +- .../api/performance/clearmeasures/index.html | 6 +- .../clearresourcetimings/index.html | 2 +- .../web/api/performance/getentries/index.html | 6 +- .../performance/getentriesbytype/index.html | 2 +- files/zh-cn/web/api/performance/index.html | 28 +- .../zh-cn/web/api/performance/mark/index.html | 16 +- .../web/api/performance/measure/index.html | 6 +- .../web/api/performance/memory/index.html | 2 +- .../web/api/performance/navigation/index.html | 2 +- .../zh-cn/web/api/performance/now/index.html | 2 +- .../resourcetimingbufferfull_event/index.html | 2 +- .../web/api/performance/timeorigin/index.html | 2 +- .../web/api/performance/timing/index.html | 4 +- .../web/api/performance/tojson/index.html | 2 +- .../zh-cn/web/api/performance_api/index.html | 4 +- .../web/api/performance_property/index.html | 2 +- .../api/performanceentry/duration/index.html | 2 +- .../api/performanceentry/entrytype/index.html | 16 +- .../zh-cn/web/api/performanceentry/index.html | 12 +- .../web/api/performanceentry/name/index.html | 66 +- .../api/performanceentry/tojson/index.html | 4 +- .../web/api/performancenavigation/index.html | 2 +- .../performancenavigationtiming/index.html | 58 +- .../performanceobserver/disconnect/index.html | 2 +- .../web/api/performanceobserver/index.html | 8 +- .../performanceobserver/observe/index.html | 14 +- .../performanceobserver/index.html | 4 +- .../takerecords/index.html | 4 +- .../web/api/performancepainttiming/index.html | 22 +- .../api/performanceresourcetiming/index.html | 8 +- .../performancetiming/connectstart/index.html | 2 +- .../domainlookupend/index.html | 2 +- .../domainlookupstart/index.html | 2 +- .../performancetiming/domcomplete/index.html | 2 +- .../domcontentloadedeventend/index.html | 2 +- .../domcontentloadedeventstart/index.html | 2 +- .../dominteractive/index.html | 2 +- .../performancetiming/domloading/index.html | 2 +- .../performancetiming/fetchstart/index.html | 2 +- .../web/api/performancetiming/index.html | 12 +- .../performancetiming/loadeventend/index.html | 2 +- .../loadeventstart/index.html | 2 +- .../navigationstart/index.html | 2 +- .../performancetiming/redirectend/index.html | 4 +- .../redirectstart/index.html | 2 +- .../performancetiming/requeststart/index.html | 2 +- .../responsestart/index.html | 2 +- .../secureconnectionstart/index.html | 2 +- .../unloadeventend/index.html | 2 +- .../unloadeventstart/index.html | 2 +- files/zh-cn/web/api/periodicwave/index.html | 6 +- .../zh-cn/web/api/permissions_api/index.html | 2 +- .../using_the_permissions_api/index.html | 8 +- .../web/api/pictureinpicturewindow/index.html | 2 +- files/zh-cn/web/api/plugin/index.html | 8 +- files/zh-cn/web/api/pointer_events/index.html | 34 +- .../zh-cn/web/api/pointer_lock_api/index.html | 92 +-- files/zh-cn/web/api/pointerevent/index.html | 6 +- files/zh-cn/web/api/progressevent/index.html | 14 +- .../progressevent/lengthcomputable/index.html | 2 +- .../web/api/promiserejectionevent/index.html | 10 +- .../promiserejectionevent/promise/index.html | 4 +- .../promiserejectionevent/index.html | 2 +- files/zh-cn/web/api/push_api/index.html | 28 +- .../pushmanager/getsubscription/index.html | 4 +- files/zh-cn/web/api/pushmanager/index.html | 12 +- .../web/api/pushmanager/subscribe/index.html | 8 +- .../supportedcontentencodings/index.html | 2 +- files/zh-cn/web/api/range/collapse/index.html | 8 +- .../zh-cn/web/api/range/collapsed/index.html | 4 +- .../range/commonancestorcontainer/index.html | 4 +- .../range/createcontextualfragment/index.html | 2 +- .../zh-cn/web/api/range/endoffset/index.html | 4 +- .../web/api/range/extractcontents/index.html | 2 +- .../web/api/range/getclientrects/index.html | 2 +- files/zh-cn/web/api/range/index.html | 4 +- .../zh-cn/web/api/range/insertnode/index.html | 2 +- .../web/api/range/intersectsnode/index.html | 2 +- files/zh-cn/web/api/range/range/index.html | 2 +- .../zh-cn/web/api/range/selectnode/index.html | 2 +- .../api/range/selectnodecontents/index.html | 4 +- files/zh-cn/web/api/range/setend/index.html | 10 +- files/zh-cn/web/api/range/setstart/index.html | 8 +- .../web/api/range/setstartbefore/index.html | 2 +- .../web/api/range/startcontainer/index.html | 6 +- .../web/api/range/startoffset/index.html | 6 +- .../web/api/range/surroundcontents/index.html | 4 +- files/zh-cn/web/api/readablestream/index.html | 12 +- .../readablestream/readablestream/index.html | 4 +- .../readablestreamdefaultreader/index.html | 60 +- .../zh-cn/web/api/renderingcontext/index.html | 4 +- files/zh-cn/web/api/request/cache/index.html | 8 +- files/zh-cn/web/api/request/clone/index.html | 4 +- .../zh-cn/web/api/request/headers/index.html | 38 +- files/zh-cn/web/api/request/index.html | 10 +- files/zh-cn/web/api/request/mode/index.html | 14 +- .../zh-cn/web/api/request/request/index.html | 20 +- .../web/api/resize_observer_api/index.html | 8 +- .../api/resizeobserver/disconnect/index.html | 2 +- .../web/api/resizeobserver/observe/index.html | 2 +- .../resizeobserver/resizeobserver/index.html | 10 +- .../api/resizeobserver/unobserve/index.html | 4 +- .../web/api/resizeobserverentry/index.html | 10 +- .../web/api/resource_timing_api/index.html | 12 +- .../using_the_resource_timing_api/index.html | 102 +-- .../web/api/response/arraybuffer/index.html | 4 +- files/zh-cn/web/api/response/blob/index.html | 12 +- files/zh-cn/web/api/response/body/index.html | 6 +- files/zh-cn/web/api/response/clone/index.html | 6 +- files/zh-cn/web/api/response/error/index.html | 4 +- .../web/api/response/formdata/index.html | 6 +- .../zh-cn/web/api/response/headers/index.html | 2 +- files/zh-cn/web/api/response/index.html | 6 +- files/zh-cn/web/api/response/json/index.html | 4 +- files/zh-cn/web/api/response/ok/index.html | 4 +- .../web/api/response/redirect/index.html | 6 +- .../web/api/response/redirected/index.html | 10 +- .../web/api/response/response/index.html | 10 +- .../zh-cn/web/api/response/status/index.html | 2 +- .../web/api/response/statustext/index.html | 2 +- files/zh-cn/web/api/response/type/index.html | 8 +- files/zh-cn/web/api/response/url/index.html | 2 +- files/zh-cn/web/api/rtcdatachannel/index.html | 4 +- .../addicecandidate/index.html | 4 +- .../addstream_event/index.html | 4 +- .../api/rtcpeerconnection/addtrack/index.html | 10 +- .../createdatachannel/index.html | 10 +- .../rtcpeerconnection/createoffer/index.html | 32 +- .../currentlocaldescription/index.html | 8 +- .../datachannel_event/index.html | 10 +- .../rtcpeerconnection/getreceivers/index.html | 4 +- .../icecandidate_event/index.html | 2 +- .../iceconnectionstate/index.html | 2 +- .../icegatheringstate/index.html | 6 +- .../web/api/rtcpeerconnection/index.html | 32 +- .../rtcpeerconnection/peeridentity/index.html | 6 +- .../rtcpeerconnection/removestream/index.html | 4 +- .../rtcpeerconnection/index.html | 4 +- .../setconfiguration/index.html | 8 +- .../setremotedescription/index.html | 2 +- .../rtcpeerconnection/track_event/index.html | 8 +- .../web/api/rtcsessiondescription/index.html | 14 +- files/zh-cn/web/api/rtcstats/id/index.html | 4 +- files/zh-cn/web/api/rtcstatsreport/index.html | 6 +- files/zh-cn/web/api/rtctrackevent/index.html | 2 +- .../rtctrackevent/rtctrackevent/index.html | 2 +- .../zh-cn/web/api/screen/availleft/index.html | 2 +- .../web/api/screen/colordepth/index.html | 2 +- files/zh-cn/web/api/screen/index.html | 4 +- .../web/api/screen/lockorientation/index.html | 16 +- .../web/api/screen/orientation/index.html | 2 +- files/zh-cn/web/api/screen/width/index.html | 2 +- .../using_screen_capture/index.html | 4 +- .../web/api/scriptprocessornode/index.html | 8 +- .../web/api/selection/collapse/index.html | 2 +- .../web/api/selection/containsnode/index.html | 2 +- .../zh-cn/web/api/selection/extend/index.html | 6 +- .../web/api/selection/focusoffset/index.html | 2 +- .../web/api/selection/getrangeat/index.html | 4 +- files/zh-cn/web/api/selection/index.html | 40 +- .../zh-cn/web/api/selection/modify/index.html | 6 +- .../web/api/selection/rangecount/index.html | 2 +- .../api/selection/removeallranges/index.html | 6 +- .../api/selection/setbaseandextent/index.html | 6 +- files/zh-cn/web/api/selection/type/index.html | 4 +- files/zh-cn/web/api/sensor_apis/index.html | 6 +- .../using_server-sent_events/index.html | 20 +- .../web/api/service_worker_api/index.html | 28 +- .../using_service_workers/index.html | 176 ++--- files/zh-cn/web/api/serviceworker/index.html | 8 +- .../api/serviceworker/scripturl/index.html | 2 +- .../web/api/serviceworker/state/index.html | 4 +- .../statechange_event/index.html | 6 +- .../controller/index.html | 10 +- .../web/api/serviceworkercontainer/index.html | 12 +- .../register/index.html | 36 +- .../api/serviceworkerglobalscope/index.html | 8 +- .../active/index.html | 2 +- .../api/serviceworkerregistration/index.html | 18 +- .../unregister/index.html | 4 +- .../update/index.html | 2 +- files/zh-cn/web/api/settimeout/index.html | 70 +- .../api/shadowroot/delegatesfocus/index.html | 4 +- files/zh-cn/web/api/shadowroot/index.html | 14 +- .../web/api/shadowroot/innerhtml/index.html | 2 +- .../zh-cn/web/api/shadowroot/mode/index.html | 4 +- files/zh-cn/web/api/sharedworker/index.html | 20 +- .../api/sharedworker/sharedworker/index.html | 18 +- .../api/sourcebuffer/appendbuffer/index.html | 4 +- files/zh-cn/web/api/sourcebuffer/index.html | 14 +- .../web/api/sourcebuffer/mode/index.html | 4 +- files/zh-cn/web/api/speechgrammar/index.html | 8 +- .../speechgrammar/speechgrammar/index.html | 4 +- .../web/api/speechgrammar/src/index.html | 2 +- .../web/api/speechgrammar/weight/index.html | 2 +- .../web/api/speechrecognition/index.html | 2 +- .../speechrecognition/result_event/index.html | 8 +- .../api/speechrecognitionresult/index.html | 22 +- .../isfinal/index.html | 24 +- .../zh-cn/web/api/speechsynthesis/index.html | 20 +- .../web/api/speechsynthesis/paused/index.html | 4 +- .../api/speechsynthesisutterance/index.html | 2 +- files/zh-cn/web/api/storage/clear/index.html | 6 +- .../zh-cn/web/api/storage/getitem/index.html | 4 +- files/zh-cn/web/api/storage/index.html | 10 +- files/zh-cn/web/api/storage/key/index.html | 6 +- files/zh-cn/web/api/storage/length/index.html | 4 +- .../web/api/storage/removeitem/index.html | 4 +- files/zh-cn/web/api/storage_api/index.html | 2 +- files/zh-cn/web/api/storageevent/index.html | 6 +- .../web/api/storagemanager/persist/index.html | 12 +- .../api/storagemanager/persisted/index.html | 12 +- .../web/api/streams_api/concepts/index.html | 32 +- files/zh-cn/web/api/streams_api/index.html | 18 +- .../web/api/stylesheet/disabled/index.html | 4 +- files/zh-cn/web/api/stylesheet/index.html | 2 +- .../zh-cn/web/api/stylesheet/title/index.html | 4 +- files/zh-cn/web/api/stylesheetlist/index.html | 2 +- .../web/api/subtlecrypto/decrypt/index.html | 36 +- .../web/api/subtlecrypto/encrypt/index.html | 28 +- files/zh-cn/web/api/subtlecrypto/index.html | 154 ++-- files/zh-cn/web/api/svgaelement/index.html | 20 +- .../zh-cn/web/api/svganimatedangle/index.html | 2 +- .../web/api/svganimateelement/index.html | 2 +- .../zh-cn/web/api/svgcircleelement/index.html | 2 +- files/zh-cn/web/api/svgelement/index.html | 2 +- .../gettotallength/index.html | 4 +- .../api/svggraphicselement/getbbox/index.html | 18 +- .../web/api/svggraphicselement/index.html | 2 +- files/zh-cn/web/api/svgmatrix/index.html | 6 +- files/zh-cn/web/api/svgpathelement/index.html | 2 +- files/zh-cn/web/api/svgsvgelement/index.html | 16 +- files/zh-cn/web/api/svguseelement/index.html | 2 +- .../web/api/text/assignedslot/index.html | 2 +- files/zh-cn/web/api/text/index.html | 4 +- files/zh-cn/web/api/text/text/index.html | 4 +- .../web/api/textencoder/encode/index.html | 4 +- .../api/textencoder/textencoder/index.html | 2 +- files/zh-cn/web/api/textmetrics/index.html | 24 +- .../web/api/textmetrics/width/index.html | 4 +- files/zh-cn/web/api/textrange/index.html | 58 +- .../api/texttrack/cuechange_event/index.html | 2 +- files/zh-cn/web/api/timeranges/end/index.html | 2 +- files/zh-cn/web/api/timeranges/index.html | 8 +- .../web/api/timeranges/length/index.html | 4 +- .../zh-cn/web/api/timeranges/start/index.html | 4 +- files/zh-cn/web/api/touch/index.html | 6 +- files/zh-cn/web/api/touch/target/index.html | 4 +- files/zh-cn/web/api/touch/touch/index.html | 10 +- files/zh-cn/web/api/touch_events/index.html | 204 ++--- .../multi-touch_interaction/index.html | 4 +- .../using_touch_events/index.html | 26 +- .../api/touchevent/changedtouches/index.html | 2 +- files/zh-cn/web/api/touchevent/index.html | 26 +- .../api/touchevent/targettouches/index.html | 8 +- .../web/api/touchevent/touches/index.html | 10 +- files/zh-cn/web/api/touchlist/index.html | 6 +- files/zh-cn/web/api/treewalker/index.html | 40 +- .../keyboard_event_key_values/index.html | 4 +- files/zh-cn/web/api/uievent/detail/index.html | 6 +- files/zh-cn/web/api/uievent/index.html | 28 +- .../zh-cn/web/api/uievent/uievent/index.html | 10 +- files/zh-cn/web/api/uievent/view/index.html | 4 +- files/zh-cn/web/api/uievent/which/index.html | 2 +- .../web/api/url/createobjecturl/index.html | 10 +- files/zh-cn/web/api/url/hash/index.html | 4 +- files/zh-cn/web/api/url/host/index.html | 6 +- files/zh-cn/web/api/url/hostname/index.html | 2 +- files/zh-cn/web/api/url/href/index.html | 2 +- files/zh-cn/web/api/url/index.html | 18 +- files/zh-cn/web/api/url/origin/index.html | 8 +- files/zh-cn/web/api/url/password/index.html | 2 +- files/zh-cn/web/api/url/pathname/index.html | 2 +- .../web/api/url/revokeobjecturl/index.html | 6 +- files/zh-cn/web/api/url/search/index.html | 2 +- files/zh-cn/web/api/url/tojson/index.html | 2 +- files/zh-cn/web/api/url/username/index.html | 4 +- files/zh-cn/web/api/url_api/index.html | 16 +- .../web/api/urlsearchparams/append/index.html | 4 +- .../web/api/urlsearchparams/delete/index.html | 2 +- .../api/urlsearchparams/entries/index.html | 4 +- .../api/urlsearchparams/foreach/index.html | 16 +- .../web/api/urlsearchparams/get/index.html | 6 +- .../web/api/urlsearchparams/getall/index.html | 2 +- .../web/api/urlsearchparams/has/index.html | 2 +- .../zh-cn/web/api/urlsearchparams/index.html | 28 +- .../web/api/urlsearchparams/keys/index.html | 2 +- .../web/api/urlsearchparams/set/index.html | 2 +- .../api/urlsearchparams/tostring/index.html | 2 +- .../urlsearchparams/index.html | 6 +- files/zh-cn/web/api/usb/index.html | 4 +- .../zh-cn/web/api/user_timing_api/index.html | 6 +- files/zh-cn/web/api/validitystate/index.html | 24 +- files/zh-cn/web/api/vibration_api/index.html | 4 +- .../web/api/videoplaybackquality/index.html | 8 +- files/zh-cn/web/api/videotracklist/index.html | 2 +- files/zh-cn/web/api/visualviewport/index.html | 24 +- .../visualviewport/scroll_event/index.html | 2 +- files/zh-cn/web/api/vrdisplay/index.html | 16 +- files/zh-cn/web/api/vrpose/index.html | 18 +- .../zh-cn/web/api/vrpose/timestamp/index.html | 2 +- files/zh-cn/web/api/wakelock/index.html | 6 +- .../zh-cn/web/api/wakelock/request/index.html | 16 +- .../web/api/waveshapernode/curve/index.html | 2 +- files/zh-cn/web/api/waveshapernode/index.html | 6 +- .../waveshapernode/waveshapernode/index.html | 2 +- .../web/api/web_animations_api/index.html | 18 +- .../keyframe_formats/index.html | 16 +- .../using_the_web_animations_api/index.html | 24 +- .../index.html | 30 +- .../web_audio_api/best_practices/index.html | 2 +- files/zh-cn/web/api/web_audio_api/index.html | 10 +- .../using_web_audio_api/index.html | 76 +- .../index.html | 36 +- .../index.html | 64 +- .../web/api/web_authentication_api/index.html | 52 +- files/zh-cn/web/api/web_crypto_api/index.html | 6 +- files/zh-cn/web/api/web_speech_api/index.html | 26 +- .../using_the_web_speech_api/index.html | 8 +- .../zh-cn/web/api/web_storage_api/index.html | 22 +- .../using_the_web_storage_api/index.html | 30 +- .../index.html | 14 +- .../zh-cn/web/api/web_workers_api/index.html | 14 +- .../structured_clone_algorithm/index.html | 30 +- .../using_web_workers/index.html | 336 ++++----- .../beginquery/index.html | 2 +- .../begintransformfeedback/index.html | 2 +- .../bindbufferbase/index.html | 2 +- .../createsampler/index.html | 4 +- .../createvertexarray/index.html | 4 +- .../drawbuffers/index.html | 4 +- .../web/api/webgl2renderingcontext/index.html | 22 +- .../teximage3d/index.html | 4 +- .../webgl2renderingcontext/uniform/index.html | 4 +- .../uniformmatrix/index.html | 2 +- .../basic_2d_animation_example/index.html | 6 +- .../by_example/boilerplate_1/index.html | 4 +- .../canvas_size_and_webgl/index.html | 4 +- .../clearing_by_clicking/index.html | 2 +- .../clearing_with_colors/index.html | 6 +- .../web/api/webgl_api/by_example/index.html | 2 +- .../by_example/scissor_animation/index.html | 2 +- .../simple_color_animation/index.html | 4 +- .../web/api/webgl_api/constants/index.html | 112 +-- files/zh-cn/web/api/webgl_api/data/index.html | 6 +- files/zh-cn/web/api/webgl_api/index.html | 28 +- .../matrix_math_for_the_web/index.html | 8 +- .../index.html | 198 ++--- .../animating_objects_with_webgl/index.html | 30 +- .../index.html | 10 +- .../getting_started_with_webgl/index.html | 4 +- .../web/api/webgl_api/tutorial/index.html | 6 +- .../tutorial/lighting_in_webgl/index.html | 6 +- .../index.html | 36 +- .../using_textures_in_webgl/index.html | 28 +- .../zh-cn/web/api/webgl_api/types/index.html | 6 +- .../api/webgl_api/using_extensions/index.html | 6 +- .../webgl_api/webgl_best_practices/index.html | 6 +- .../webgl_model_view_projection/index.html | 52 +- .../web/api/webgl_lose_context/index.html | 4 +- .../restorecontext/index.html | 2 +- .../zh-cn/web/api/webglactiveinfo/index.html | 2 +- files/zh-cn/web/api/webglbuffer/index.html | 4 +- .../web/api/webglcontextevent/index.html | 10 +- .../zh-cn/web/api/webglframebuffer/index.html | 4 +- files/zh-cn/web/api/webglprogram/index.html | 6 +- files/zh-cn/web/api/webglquery/index.html | 8 +- .../web/api/webglrenderbuffer/index.html | 4 +- .../activetexture/index.html | 6 +- .../attachshader/index.html | 2 +- .../bindbuffer/index.html | 6 +- .../bindframebuffer/index.html | 4 +- .../bindrenderbuffer/index.html | 2 +- .../bindtexture/index.html | 4 +- .../blendcolor/index.html | 2 +- .../blendequation/index.html | 2 +- .../blendfunc/index.html | 8 +- .../bufferdata/index.html | 8 +- .../webglrenderingcontext/clear/index.html | 16 +- .../clearcolor/index.html | 4 +- .../cleardepth/index.html | 4 +- .../webglrenderingcontext/commit/index.html | 2 +- .../compileshader/index.html | 4 +- .../compressedteximage2d/index.html | 2 +- .../createframebuffer/index.html | 2 +- .../createprogram/index.html | 4 +- .../createrenderbuffer/index.html | 2 +- .../createshader/index.html | 4 +- .../createtexture/index.html | 4 +- .../webglrenderingcontext/cullface/index.html | 8 +- .../deletebuffer/index.html | 2 +- .../deleteframebuffer/index.html | 2 +- .../deleteprogram/index.html | 2 +- .../deleteshader/index.html | 4 +- .../depthfunc/index.html | 6 +- .../depthmask/index.html | 4 +- .../detachshader/index.html | 40 +- .../drawarrays/index.html | 8 +- .../drawelements/index.html | 8 +- .../drawingbufferwidth/index.html | 2 +- .../webglrenderingcontext/enable/index.html | 4 +- .../enablevertexattribarray/index.html | 14 +- .../getattriblocation/index.html | 6 +- .../getcontextattributes/index.html | 4 +- .../getextension/index.html | 6 +- .../getparameter/index.html | 298 ++++---- .../getprograminfolog/index.html | 4 +- .../getprogramparameter/index.html | 2 +- .../getshaderparameter/index.html | 2 +- .../getshadersource/index.html | 4 +- .../getsupportedextensions/index.html | 2 +- .../gettexparameter/index.html | 8 +- .../web/api/webglrenderingcontext/index.html | 96 +-- .../webglrenderingcontext/isbuffer/index.html | 2 +- .../iscontextlost/index.html | 2 +- .../isenabled/index.html | 4 +- .../isprogram/index.html | 2 +- .../webglrenderingcontext/isshader/index.html | 4 +- .../pixelstorei/index.html | 10 +- .../polygonoffset/index.html | 4 +- .../renderbufferstorage/index.html | 8 +- .../webglrenderingcontext/scissor/index.html | 8 +- .../shadersource/index.html | 2 +- .../teximage2d/index.html | 36 +- .../texparameter/index.html | 10 +- .../webglrenderingcontext/uniform/index.html | 8 +- .../uniformmatrix/index.html | 6 +- .../useprogram/index.html | 2 +- .../validateprogram/index.html | 2 +- .../vertexattrib/index.html | 4 +- .../vertexattribpointer/index.html | 2 +- files/zh-cn/web/api/webglsampler/index.html | 8 +- files/zh-cn/web/api/webglshader/index.html | 6 +- .../api/webglshaderprecisionformat/index.html | 2 +- .../web/api/webglvertexarrayobject/index.html | 2 +- .../web/api/webrtc_api/adapter.js/index.html | 6 +- .../api/webrtc_api/connectivity/index.html | 10 +- .../web/api/webrtc_api/protocols/index.html | 8 +- .../webrtc_api/session_lifetime/index.html | 8 +- .../signaling_and_video_calling/index.html | 160 ++-- .../simple_rtcdatachannel_sample/index.html | 70 +- .../web/api/websocket/binarytype/index.html | 8 +- .../zh-cn/web/api/websocket/close/index.html | 4 +- .../web/api/websocket/error_event/index.html | 2 +- files/zh-cn/web/api/websocket/index.html | 14 +- .../api/websocket/message_event/index.html | 2 +- .../web/api/websocket/open_event/index.html | 2 +- .../web/api/websocket/readystate/index.html | 2 +- files/zh-cn/web/api/websocket/send/index.html | 16 +- files/zh-cn/web/api/websockets_api/index.html | 14 +- .../index.html | 12 +- .../index.html | 60 +- .../writing_websocket_server/index.html | 34 +- .../writing_websocket_servers/index.html | 12 +- .../web/api/webvr_api/concepts/index.html | 124 +-- files/zh-cn/web/api/webvr_api/index.html | 26 +- .../webvr_api/using_the_webvr_api/index.html | 24 +- files/zh-cn/web/api/webvtt_api/index.html | 18 +- .../zh-cn/web/api/webxr_device_api/index.html | 80 +- .../web/api/wheelevent/deltamode/index.html | 2 +- .../web/api/wheelevent/deltax/index.html | 2 +- .../web/api/wheelevent/deltay/index.html | 4 +- .../web/api/wheelevent/deltaz/index.html | 6 +- files/zh-cn/web/api/wheelevent/index.html | 4 +- .../api/window/afterprint_event/index.html | 2 +- files/zh-cn/web/api/window/alert/index.html | 2 +- .../api/window/appinstalled_event/index.html | 4 +- .../api/window/applicationcache/index.html | 2 +- files/zh-cn/web/api/window/back/index.html | 4 +- .../beforeinstallprompt_event/index.html | 22 +- .../api/window/beforeunload_event/index.html | 4 +- files/zh-cn/web/api/window/blur/index.html | 2 +- .../web/api/window/blur_event/index.html | 8 +- .../window/cancelanimationframe/index.html | 14 +- .../api/window/cancelidlecallback/index.html | 6 +- .../web/api/window/clearimmediate/index.html | 4 +- files/zh-cn/web/api/window/confirm/index.html | 14 +- .../web/api/window/copy_event/index.html | 8 +- .../web/api/window/defaultstatus/index.html | 4 +- .../index.html | 2 +- .../api/window/devicepixelratio/index.html | 8 +- .../web/api/window/directories/index.html | 4 +- .../window/domcontentloaded_event/index.html | 10 +- files/zh-cn/web/api/window/dump/index.html | 10 +- .../web/api/window/error_event/index.html | 4 +- files/zh-cn/web/api/window/event/index.html | 2 +- files/zh-cn/web/api/window/focus/index.html | 2 +- .../web/api/window/focus_event/index.html | 8 +- files/zh-cn/web/api/window/frames/index.html | 2 +- .../web/api/window/fullscreen/index.html | 6 +- .../window/gamepadconnected_event/index.html | 12 +- .../api/window/getcomputedstyle/index.html | 54 +- .../window/getdefaultcomputedstyle/index.html | 4 +- .../web/api/window/getselection/index.html | 10 +- .../api/window/hashchange_event/index.html | 4 +- files/zh-cn/web/api/window/history/index.html | 2 +- .../web/api/window/innerheight/index.html | 6 +- .../web/api/window/innerwidth/index.html | 8 +- .../web/api/window/localstorage/index.html | 2 +- .../zh-cn/web/api/window/location/index.html | 198 ++--- .../web/api/window/locationbar/index.html | 2 +- .../web/api/window/matchmedia/index.html | 6 +- .../web/api/window/message_event/index.html | 2 +- .../api/window/messageerror_event/index.html | 4 +- files/zh-cn/web/api/window/moveby/index.html | 4 +- .../web/api/window/mozinnerscreenx/index.html | 4 +- .../web/api/window/mozinnerscreeny/index.html | 6 +- files/zh-cn/web/api/window/name/index.html | 4 +- .../web/api/window/offline_event/index.html | 2 +- .../web/api/window/ondragdrop/index.html | 2 +- .../api/window/onmozbeforepaint/index.html | 8 +- files/zh-cn/web/api/window/onpaint/index.html | 4 +- files/zh-cn/web/api/window/open/index.html | 14 +- .../web/api/window/opendialog/index.html | 10 +- files/zh-cn/web/api/window/opener/index.html | 4 +- .../window/orientationchange_event/index.html | 2 +- .../web/api/window/outerheight/index.html | 6 +- .../web/api/window/outerwidth/index.html | 4 +- .../web/api/window/pagehide_event/index.html | 4 +- .../web/api/window/pageshow_event/index.html | 4 +- .../web/api/window/pagexoffset/index.html | 2 +- .../web/api/window/pageyoffset/index.html | 2 +- files/zh-cn/web/api/window/parent/index.html | 2 +- .../web/api/window/postmessage/index.html | 32 +- files/zh-cn/web/api/window/prompt/index.html | 4 +- .../window/rejectionhandled_event/index.html | 2 +- .../window/requestanimationframe/index.html | 10 +- .../api/window/requestfilesystem/index.html | 10 +- .../api/window/requestidlecallback/index.html | 6 +- .../zh-cn/web/api/window/resizeby/index.html | 4 +- .../zh-cn/web/api/window/resizeto/index.html | 4 +- files/zh-cn/web/api/window/screen/index.html | 4 +- .../web/api/window/screenleft/index.html | 8 +- .../zh-cn/web/api/window/screentop/index.html | 2 +- .../web/api/window/scrollbars/index.html | 2 +- .../zh-cn/web/api/window/scrollby/index.html | 12 +- .../web/api/window/scrollbylines/index.html | 2 +- .../web/api/window/scrollmaxx/index.html | 4 +- .../web/api/window/scrollmaxy/index.html | 2 +- .../zh-cn/web/api/window/scrollto/index.html | 18 +- files/zh-cn/web/api/window/scrollx/index.html | 6 +- files/zh-cn/web/api/window/scrolly/index.html | 6 +- files/zh-cn/web/api/window/self/index.html | 4 +- .../web/api/window/sessionstorage/index.html | 10 +- .../zh-cn/web/api/window/setcursor/index.html | 6 +- .../web/api/window/setimmediate/index.html | 12 +- .../web/api/window/showmodaldialog/index.html | 10 +- .../web/api/window/sizetocontent/index.html | 4 +- files/zh-cn/web/api/window/stop/index.html | 2 +- .../web/api/window/storage_event/index.html | 2 +- files/zh-cn/web/api/window/top/index.html | 6 +- .../web/api/window/unload_event/index.html | 18 +- .../web/api/window/updatecommands/index.html | 2 +- .../web/api/window/visualviewport/index.html | 4 +- files/zh-cn/web/api/window/window/index.html | 10 +- files/zh-cn/web/api/windowclient/index.html | 2 +- files/zh-cn/web/api/worker/index.html | 28 +- .../web/api/worker/message_event/index.html | 8 +- .../api/worker/messageerror_event/index.html | 6 +- .../web/api/worker/postmessage/index.html | 44 +- .../zh-cn/web/api/worker/terminate/index.html | 2 +- files/zh-cn/web/api/worker/worker/index.html | 24 +- .../importscripts/index.html | 4 +- .../web/api/workerglobalscope/index.html | 10 +- .../web/api/workerglobalscope/self/index.html | 16 +- .../web/api/xmlhttprequest/abort/index.html | 2 +- .../api/xmlhttprequest/abort_event/index.html | 2 +- .../web/api/xmlhttprequest/channel/index.html | 2 +- .../getresponseheader/index.html | 4 +- .../html_in_xmlhttprequest/index.html | 6 +- .../api/xmlhttprequest/load_event/index.html | 2 +- .../xmlhttprequest/loadend_event/index.html | 2 +- .../xmlhttprequest/loadstart_event/index.html | 2 +- .../web/api/xmlhttprequest/mozanon/index.html | 2 +- .../mozresponsearraybuffer/index.html | 2 +- .../web/api/xmlhttprequest/open/index.html | 4 +- .../overridemimetype/index.html | 4 +- .../api/xmlhttprequest/readystate/index.html | 4 +- .../readystatechange_event/index.html | 8 +- .../api/xmlhttprequest/response/index.html | 2 +- .../xmlhttprequest/responsetext/index.html | 2 +- .../api/xmlhttprequest/responsexml/index.html | 8 +- .../web/api/xmlhttprequest/send/index.html | 20 +- .../index.html | 22 +- .../setrequestheader/index.html | 2 +- .../web/api/xmlhttprequest/status/index.html | 6 +- .../api/xmlhttprequest/statustext/index.html | 2 +- .../index.html | 16 +- .../web/api/xmlhttprequest/timeout/index.html | 2 +- .../web/api/xmlhttprequest/upload/index.html | 2 +- .../using_xmlhttprequest/index.html | 30 +- .../using_xmlhttprequest_in_ie6/index.html | 4 +- .../xmlhttprequest/withcredentials/index.html | 2 +- files/zh-cn/web/api/xmlserializer/index.html | 2 +- files/zh-cn/web/api/xpathevaluator/index.html | 2 +- 1626 files changed, 10056 insertions(+), 10056 deletions(-) diff --git a/files/zh-cn/web/api/abortcontroller/abort/index.html b/files/zh-cn/web/api/abortcontroller/abort/index.html index d3034ec8ed06ae..9c431547892aef 100644 --- a/files/zh-cn/web/api/abortcontroller/abort/index.html +++ b/files/zh-cn/web/api/abortcontroller/abort/index.html @@ -46,8 +46,8 @@

Examples

fetch(url, {signal}).then(function(response) { ... }).catch(function(e) { -    reports.textContent = 'Download error: ' + e.message; -  }) + reports.textContent = 'Download error: ' + e.message; + }) }
diff --git a/files/zh-cn/web/api/abortcontroller/abortcontroller/index.html b/files/zh-cn/web/api/abortcontroller/abortcontroller/index.html index 1b60165262046a..d6a3538ae00107 100644 --- a/files/zh-cn/web/api/abortcontroller/abortcontroller/index.html +++ b/files/zh-cn/web/api/abortcontroller/abortcontroller/index.html @@ -10,7 +10,7 @@ ---
{{APIRef("DOM")}}{{SeeCompatTable}}
-

AbortController() 构造函数创建了一个新的 AbortController 实例

+

AbortController() 构造函数创建了一个新的 AbortController 实例

Syntax

@@ -26,7 +26,7 @@

Examples

首先通过{{domxref("AbortController.AbortController","AbortController()")}} 构造函数来创建一个 controller 实例,然后通过{{domxref("AbortController.signal")}} 属性获取到它的关联对象{{domxref("AbortSignal")}} 的引用。

-

当 fetch request 初始化后,将 AbortSignal 作为一个选项传入请求的选项参数中 (如下 {signal}). 这将 signal,controller 与 fetch 请求关联起来,允许我们通过调用{{domxref("AbortController.abort()")}}来取消 fetch 请求,正如下第二个事件监听器所示。

+

fetch request 初始化后,将 AbortSignal 作为一个选项传入请求的选项参数中 (如下 {signal}). 这将 signal,controller 与 fetch 请求关联起来,允许我们通过调用{{domxref("AbortController.abort()")}}来取消 fetch 请求,正如下第二个事件监听器所示。

var controller = new AbortController();
 var signal = controller.signal;
@@ -46,12 +46,12 @@ 

Examples

fetch(url, {signal}).then(function(response) { ... }).catch(function(e) { -    reports.textContent = 'Download error: ' + e.message; -  }) + reports.textContent = 'Download error: ' + e.message; + }) }
-

提示: 当abort() 被调用, fetch() promise 将会抛出一个AbortError 对象.

+

提示: 当abort() 被调用, fetch() promise 将会抛出一个AbortError 对象.

你可以在 GitHub 上找到一个完整的使用示例 — see abort-api (see it running live also).

diff --git a/files/zh-cn/web/api/abortcontroller/index.html b/files/zh-cn/web/api/abortcontroller/index.html index 12c8233b3c15a6..acf951485df345 100644 --- a/files/zh-cn/web/api/abortcontroller/index.html +++ b/files/zh-cn/web/api/abortcontroller/index.html @@ -13,13 +13,13 @@

AbortController 接口表示一个控制器对象,允许你根据需要中止一个或多个 Web 请求。

-

你可以使用 {{domxref("AbortController.AbortController()")}} 构造函数创建一个新的 AbortController。使用 {{domxref("AbortSignal")}} 对象可以完成与 DOM 请求的通信。

+

你可以使用 {{domxref("AbortController.AbortController()")}} 构造函数创建一个新的 AbortController。使用 {{domxref("AbortSignal")}} 对象可以完成与 DOM 请求的通信。

构造函数

{{domxref("AbortController.AbortController()")}}
-
创建一个新的 AbortController 对象实例。
+
创建一个新的 AbortController 对象实例。

属性

@@ -38,9 +38,9 @@

方法

示例

-

在下面的代码片段中,我们想通过 Fetch API 下载一段视频。

+

在下面的代码片段中,我们想通过 Fetch API 下载一段视频。

-

我们先使用 {{domxref("AbortController.AbortController","AbortController()")}} 构造函数创建一个控制器,然后使用 {{domxref("AbortController.signal")}} 属性获取其关联 {{domxref("AbortSignal")}} 对象的引用。

+

我们先使用 {{domxref("AbortController.AbortController","AbortController()")}} 构造函数创建一个控制器,然后使用 {{domxref("AbortController.signal")}} 属性获取其关联 {{domxref("AbortSignal")}} 对象的引用。

当一个 fetch request 初始化,我们把 AbortSignal 作为一个选项传递到到请求对象(如下 { signal })。这将 signalcontroller 与这个 fetch request 相关联,然后允许我们通过调用 {{domxref("AbortController.abort()")}} 中止请求,如下第二个事件监听函数。

diff --git a/files/zh-cn/web/api/abortsignal/abort_event/index.html b/files/zh-cn/web/api/abortsignal/abort_event/index.html index 60caaef1763338..3baa46a215c71d 100644 --- a/files/zh-cn/web/api/abortsignal/abort_event/index.html +++ b/files/zh-cn/web/api/abortsignal/abort_event/index.html @@ -14,7 +14,7 @@ ---
{{APIRef("DOM")}}{{SeeCompatTable}}
-
当事件被{{event("abort_(cancellable_fetch)", "终止")}},{{domxref("FetchSignal")}}接口的onabort 只读属性就会被调用。例子。当 fetch 的请求信号被终止。
+
当事件被{{event("abort_(cancellable_fetch)", "终止")}},{{domxref("FetchSignal")}}接口的onabort 只读属性就会被调用。例子。当 fetch 的请求信号被终止。

语法

@@ -22,7 +22,7 @@

语法

示例

-

在下面例子中,我们将创建一个新的 AbortController 对象,并获取它的{{domxref("AbortSignal")}} (在 signal 属性中可用)。然后我们查看 onabort 属性是否被终止,并将相应的日志输出到控制台。

+

在下面例子中,我们将创建一个新的 AbortController 对象,并获取它的{{domxref("AbortSignal")}} (在 signal 属性中可用)。然后我们查看 onabort 属性是否被终止,并将相应的日志输出到控制台。

var controller = new AbortController();
 var signal = controller.signal;
diff --git a/files/zh-cn/web/api/abortsignal/index.html b/files/zh-cn/web/api/abortsignal/index.html
index 02c4f247f7fd87..e716f199fcaeab 100644
--- a/files/zh-cn/web/api/abortsignal/index.html
+++ b/files/zh-cn/web/api/abortsignal/index.html
@@ -12,7 +12,7 @@
 ---
 
{{APIRef("DOM")}}{{SeeCompatTable}}
-

AbortSignal 接口表示一个信号对象( signal object ),它允许您通过 {{domxref("AbortController")}} 对象与 DOM 请求(如 Fetch)进行通信并在需要时将其中止。

+

AbortSignal 接口表示一个信号对象( signal object ),它允许您通过 {{domxref("AbortController")}} 对象与 DOM 请求(如 Fetch)进行通信并在需要时将其中止。

属性

@@ -20,7 +20,7 @@

属性

{{domxref("AbortSignal.aborted")}} {{readonlyInline}}
-
以 {{domxref("Boolean")}} 表示与之通信的请求是否被终止(true)或未终止(false)。
+
{{domxref("Boolean")}} 表示与之通信的请求是否被终止(true)或未终止(false)。

事件处理

@@ -60,19 +60,19 @@

示例

fetch(url, {signal}).then(function(response) { ... }).catch(function(e) { -    reports.textContent = 'Download error: ' + e.message; -  }) + reports.textContent = 'Download error: ' + e.message; + }) }
-

注意: 当调用 abort() 时,fetch() 会调用 reject,返回一个 AbortError。

+

注意: 当调用 abort() 时,fetch() 会调用 reject,返回一个 AbortError。

-

当前版本 Firefox 当Promise 含有 DOMException 时,会调用 reject。

+

当前版本 Firefox 当Promise 含有 DOMException 时,会调用 reject。

-

 

+

你可以在 GitHub 上找到一个完整的可用示例——请参阅abort-api实例在这)。

diff --git a/files/zh-cn/web/api/accelerometer/index.html b/files/zh-cn/web/api/accelerometer/index.html index 7726157411064e..235f2ef467f283 100644 --- a/files/zh-cn/web/api/accelerometer/index.html +++ b/files/zh-cn/web/api/accelerometer/index.html @@ -7,9 +7,9 @@

The Accelerometer interface of the Sensor APIs provides on each reading the acceleration applied to the device along all three axes.

-

To use this sensor, the user must grant permission to the 'accelerometer', device sensor through the Permissions API.

+

To use this sensor, the user must grant permission to the 'accelerometer', device sensor through the Permissions API.

-

If a feature policy blocks the use of a feature, it is because your code is inconsistent with the policies set on your server. This is not something that would ever be shown to a user. See {{httpheader('Feature-Policy')}} for implementation instructions.

+

If a feature policy blocks the use of a feature, it is because your code is inconsistent with the policies set on your server. This is not something that would ever be shown to a user. See {{httpheader('Feature-Policy')}} for implementation instructions.

Constructor

@@ -36,9 +36,9 @@

Example

let accelerometer = new Accelerometer({frequency: 60});
 
 accelerometer.addEventListener('reading', e => {
-  console.log("Acceleration along the X-axis " + accelerometer.x);
-  console.log("Acceleration along the Y-axis " + accelerometer.y);
-  console.log("Acceleration along the Z-axis " + accelerometer.z);
+  console.log("Acceleration along the X-axis " + accelerometer.x);
+  console.log("Acceleration along the Y-axis " + accelerometer.y);
+  console.log("Acceleration along the Z-axis " + accelerometer.z);
 });
 accelerometer.start();
diff --git a/files/zh-cn/web/api/ambientlightsensor/ambientlightsensor/index.html b/files/zh-cn/web/api/ambientlightsensor/ambientlightsensor/index.html index dd4ecf12b98bda..5bd668b4c6feb4 100644 --- a/files/zh-cn/web/api/ambientlightsensor/ambientlightsensor/index.html +++ b/files/zh-cn/web/api/ambientlightsensor/ambientlightsensor/index.html @@ -5,7 +5,7 @@ ---

{{APIRef("Ambient Light Sensor API")}}{{Non-standard_header}}

-

通过 AmbinentLightSensor() 构造函数可以创建一个 {{domxref("AmbientLightSensor")}} 的实例。

+

通过 AmbinentLightSensor() 构造函数可以创建一个 {{domxref("AmbientLightSensor")}} 的实例。

语法

@@ -17,7 +17,7 @@

参数

options {{optional_inline}}
以下是设置属性:
    -
  • frequency:  TBD
  • +
  • frequency: TBD
diff --git a/files/zh-cn/web/api/ambientlightsensor/illuminance/index.html b/files/zh-cn/web/api/ambientlightsensor/illuminance/index.html index bdb1b1ea57b664..b4af97aae6c0b1 100644 --- a/files/zh-cn/web/api/ambientlightsensor/illuminance/index.html +++ b/files/zh-cn/web/api/ambientlightsensor/illuminance/index.html @@ -7,7 +7,7 @@ ---

{{SeeCompatTable}}{{APIRef("Ambient Light Sensor API")}}

-

{{domxref("AmbientLightSensor")}} 接口的 read-only 属性 reading 返回一个访问 {{domxref('AmbientLightSensorReading')}} 的接口,包含当前的光亮级别。

+

{{domxref("AmbientLightSensor")}} 接口的 read-only 属性 reading 返回一个访问 {{domxref('AmbientLightSensorReading')}} 的接口,包含当前的光亮级别。

语法

diff --git a/files/zh-cn/web/api/ambientlightsensor/index.html b/files/zh-cn/web/api/ambientlightsensor/index.html index 241ec8f8c29d82..ee6ad11e6c0766 100644 --- a/files/zh-cn/web/api/ambientlightsensor/index.html +++ b/files/zh-cn/web/api/ambientlightsensor/index.html @@ -11,14 +11,14 @@

实例

{{domxref("AmbientLightSensor.AmbientLightSensor()")}}
-
创建一个新的 AmbientLightSensor 对象。
+
创建一个新的 AmbientLightSensor 对象。

属性

{{domxref('AmbientLightSensor.reading')}}
-
返回一个 {{domxref('AmbientLightSensorReading')}} 接口,包含当前光的亮度级别。
+
返回一个 {{domxref('AmbientLightSensorReading')}} 接口,包含当前光的亮度级别。

Examples

diff --git a/files/zh-cn/web/api/analysernode/fftsize/index.html b/files/zh-cn/web/api/analysernode/fftsize/index.html index 0fcf191fd0bafa..0b2fa71e1b7252 100644 --- a/files/zh-cn/web/api/analysernode/fftsize/index.html +++ b/files/zh-cn/web/api/analysernode/fftsize/index.html @@ -5,7 +5,7 @@ ---

{{ APIRef("Web Audio API") }}

-

{{ domxref("AnalyserNode") }} 接口的 fftSize 属性的值是一个无符号长整型的值,表示(信号)样本的窗口大小。当执行快速傅里叶变换(Fast Fourier Transfor (FFT))时,这些(信号)样本被用来获取频域数据。

+

{{ domxref("AnalyserNode") }} 接口的 fftSize 属性的值是一个无符号长整型的值,表示(信号)样本的窗口大小。当执行快速傅里叶变换(Fast Fourier Transfor (FFT))时,这些(信号)样本被用来获取频域数据。

fftSize 属性的值必须是从 32 到 32768 范围内的 2 的非零幂; 其默认值为 2048.

@@ -26,9 +26,9 @@

例子

-

下面的例子展示了 AudioContext 创建一个 AnalyserNode, 然后用 requestAnimationFrame 和 <canvas> 去反复收集当前音频的时域数据,并绘制为一个示波器风格的输出 (频谱).

+

下面的例子展示了 AudioContext 创建一个 AnalyserNode, 然后用 requestAnimationFrame<canvas> 去反复收集当前音频的时域数据,并绘制为一个示波器风格的输出 (频谱).

-

更多的例子/信息,查看 Voice-change-O-matic 演示 (相关代码在 app.js 在 128 行~205 行).

+

更多的例子/信息,查看 Voice-change-O-matic 演示 (相关代码在 app.js 在 128 行~205 行).

var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
 var analyser = audioCtx.createAnalyser();
@@ -44,40 +44,40 @@ 

例子

function draw() { -      drawVisual = requestAnimationFrame(draw); + drawVisual = requestAnimationFrame(draw); -      analyser.getByteTimeDomainData(dataArray); + analyser.getByteTimeDomainData(dataArray); -      canvasCtx.fillStyle = 'rgb(200, 200, 200)'; -      canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); + canvasCtx.fillStyle = 'rgb(200, 200, 200)'; + canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); -      canvasCtx.lineWidth = 2; -      canvasCtx.strokeStyle = 'rgb(0, 0, 0)'; + canvasCtx.lineWidth = 2; + canvasCtx.strokeStyle = 'rgb(0, 0, 0)'; -      canvasCtx.beginPath(); + canvasCtx.beginPath(); -      var sliceWidth = WIDTH * 1.0 / bufferLength; -      var x = 0; + var sliceWidth = WIDTH * 1.0 / bufferLength; + var x = 0; -      for(var i = 0; i < bufferLength; i++) { + for(var i = 0; i < bufferLength; i++) { -        var v = dataArray[i] / 128.0; -        var y = v * HEIGHT/2; + var v = dataArray[i] / 128.0; + var y = v * HEIGHT/2; -        if(i === 0) { -          canvasCtx.moveTo(x, y); -        } else { -          canvasCtx.lineTo(x, y); -        } + if(i === 0) { + canvasCtx.moveTo(x, y); + } else { + canvasCtx.lineTo(x, y); + } -        x += sliceWidth; -      } + x += sliceWidth; + } -      canvasCtx.lineTo(canvas.width, canvas.height/2); -      canvasCtx.stroke(); -    }; + canvasCtx.lineTo(canvas.width, canvas.height/2); + canvasCtx.stroke(); + }; -    draw();
+ draw();

规范

diff --git a/files/zh-cn/web/api/analysernode/frequencybincount/index.html b/files/zh-cn/web/api/analysernode/frequencybincount/index.html index fd2744c24f3c95..c87b31a755a59c 100644 --- a/files/zh-cn/web/api/analysernode/frequencybincount/index.html +++ b/files/zh-cn/web/api/analysernode/frequencybincount/index.html @@ -5,7 +5,7 @@ ---

{{ APIRef("Web Audio API") }}

-

frequencyBinCount 的值固定为 {{ domxref("AnalyserNode") }} 接口中 fftSize 值的一半。该属性通常用于可视化的数据值的数量。

+

frequencyBinCount 的值固定为 {{ domxref("AnalyserNode") }} 接口中 fftSize 值的一半。该属性通常用于可视化的数据值的数量。

语法

@@ -20,9 +20,9 @@

值类型

例子

-

下面的例子展示了 AudioContext 创建一个 AnalyserNode, 然后用 requestAnimationFrame 和 <canvas> 去反复收集频率数据,并绘制为一个柱状风格的输出 (频谱).

+

下面的例子展示了 AudioContext 创建一个 AnalyserNode, 然后用 requestAnimationFrame<canvas> 去反复收集频率数据,并绘制为一个柱状风格的输出 (频谱).

-

更多的例子/信息,查看 Voice-change-O-matic 演示 (相关代码在 app.js 的 128 行~205 行).

+

更多的例子/信息,查看 Voice-change-O-matic 演示 (相关代码在 app.js 的 128 行~205 行).

var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
 var analyser = audioCtx.createAnalyser();
@@ -39,25 +39,25 @@ 

例子

canvasCtx.clearRect(0, 0, WIDTH, HEIGHT); function draw() { -  drawVisual = requestAnimationFrame(draw); + drawVisual = requestAnimationFrame(draw); -  analyser.getByteFrequencyData(dataArray); + analyser.getByteFrequencyData(dataArray); -  canvasCtx.fillStyle = 'rgb(0, 0, 0)'; -  canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); + canvasCtx.fillStyle = 'rgb(0, 0, 0)'; + canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); -  var barWidth = (WIDTH / bufferLength) * 2.5; -  var barHeight; -  var x = 0; + var barWidth = (WIDTH / bufferLength) * 2.5; + var barHeight; + var x = 0; -  for(var i = 0; i < bufferLength; i++) { -    barHeight = dataArray[i]; + for(var i = 0; i < bufferLength; i++) { + barHeight = dataArray[i]; -    canvasCtx.fillStyle = 'rgb(' + (barHeight+100) + ',50,50)'; -    canvasCtx.fillRect(x,HEIGHT-barHeight/2,barWidth,barHeight/2); + canvasCtx.fillStyle = 'rgb(' + (barHeight+100) + ',50,50)'; + canvasCtx.fillRect(x,HEIGHT-barHeight/2,barWidth,barHeight/2); -    x += barWidth + 1; -  } + x += barWidth + 1; + } }; draw();
diff --git a/files/zh-cn/web/api/analysernode/getbytefrequencydata/index.html b/files/zh-cn/web/api/analysernode/getbytefrequencydata/index.html index a96003b91cb1fb..fdffd87e562413 100644 --- a/files/zh-cn/web/api/analysernode/getbytefrequencydata/index.html +++ b/files/zh-cn/web/api/analysernode/getbytefrequencydata/index.html @@ -21,13 +21,13 @@

语法

返回值

-

一个 {{domxref("Uint8Array")}}(无符号字节数组).

+

一个 {{domxref("Uint8Array")}}(无符号字节数组).

例子

-

下面的例子展示了 {{domxref("AudioContext")}} 创建一个 AnalyserNode, 然后用 {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} 和 {{htmlelement("canvas")}} 去反复收集当前音频的频率数据,并绘制为一个柱状风格的输出 (频谱).

+

下面的例子展示了 {{domxref("AudioContext")}} 创建一个 AnalyserNode, 然后用 {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} 和 {{htmlelement("canvas")}} 去反复收集当前音频的频率数据,并绘制为一个柱状风格的输出 (频谱).

-

更多的例子/信息,查看 Voice-change-O-matic 演示 (相关代码在 app.js 的 128 行~205 行).

+

更多的例子/信息,查看 Voice-change-O-matic 演示 (相关代码在 app.js 的 128 行~205 行).

var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
 var analyser = audioCtx.createAnalyser();
@@ -42,25 +42,25 @@ 

例子

canvasCtx.clearRect(0, 0, WIDTH, HEIGHT); function draw() { -  drawVisual = requestAnimationFrame(draw); + drawVisual = requestAnimationFrame(draw); -  analyser.getByteFrequencyData(dataArray); + analyser.getByteFrequencyData(dataArray); -  canvasCtx.fillStyle = 'rgb(0, 0, 0)'; -  canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); + canvasCtx.fillStyle = 'rgb(0, 0, 0)'; + canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); -  var barWidth = (WIDTH / bufferLength) * 2.5; -  var barHeight; -  var x = 0; + var barWidth = (WIDTH / bufferLength) * 2.5; + var barHeight; + var x = 0; -  for(var i = 0; i < bufferLength; i++) { -    barHeight = dataArray[i]; + for(var i = 0; i < bufferLength; i++) { + barHeight = dataArray[i]; -    canvasCtx.fillStyle = 'rgb(' + (barHeight+100) + ',50,50)'; -    canvasCtx.fillRect(x,HEIGHT-barHeight/2,barWidth,barHeight/2); + canvasCtx.fillStyle = 'rgb(' + (barHeight+100) + ',50,50)'; + canvasCtx.fillRect(x,HEIGHT-barHeight/2,barWidth,barHeight/2); -    x += barWidth + 1; -  } + x += barWidth + 1; + } }; draw();
diff --git a/files/zh-cn/web/api/analysernode/getbytetimedomaindata/index.html b/files/zh-cn/web/api/analysernode/getbytetimedomaindata/index.html index 5637ee33949e98..5de8f8d5fd7b82 100644 --- a/files/zh-cn/web/api/analysernode/getbytetimedomaindata/index.html +++ b/files/zh-cn/web/api/analysernode/getbytetimedomaindata/index.html @@ -5,9 +5,9 @@ ---

{{ APIRef("Mountain View APIRef Project") }}

-

{{ domxref("AnalyserNode") }} 接口的 getByteTimeDomainData() 方法复制当前波形或时域数据到传递给它的  {{domxref("Uint8Array")}} (无符号字节数组) 中。

+

{{ domxref("AnalyserNode") }} 接口的 getByteTimeDomainData() 方法复制当前波形或时域数据到传递给它的 {{domxref("Uint8Array")}} (无符号字节数组) 中。

-

如果该数组的元素少于 {{domxref("AnalyserNode.fftSize")}}, 多余的元素会被丢弃。如果它有多于所需的元素,则忽略多余的元素。

+

如果该数组的元素少于 {{domxref("AnalyserNode.fftSize")}}, 多余的元素会被丢弃。如果它有多于所需的元素,则忽略多余的元素。

语法

@@ -21,17 +21,17 @@

参数

array
-
时域数据将被复制到的 {{domxref("Uint8Array")}} 。
- 如果数组中的元素少于 {{domxref("AnalyserNode.frequencyBinCount")}}, 则会删除多余的元素。如果它包含的元素多于需要的元素,则忽略多余的元素。
+
时域数据将被复制到的 {{domxref("Uint8Array")}} 。
+ 如果数组中的元素少于 {{domxref("AnalyserNode.frequencyBinCount")}}, 则会删除多余的元素。如果它包含的元素多于需要的元素,则忽略多余的元素。

返回值

-

void | None

+

void | None

例子

-

以下的例子展示了 {{domxref("AudioContext")}} 生成一个 AnalyserNode 基础用法, 然后通过 {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} 和 {{htmlelement("canvas")}} 重复的收集和绘制一个当前音频输入的“示波器样式”输出。 有关更完整的应用实例/信息,请查看我们的 Voice-change-O-matic demo (有关代码请参阅 app.js lines 128–205)。

+

以下的例子展示了 {{domxref("AudioContext")}} 生成一个 AnalyserNode 基础用法, 然后通过 {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} 和 {{htmlelement("canvas")}} 重复的收集和绘制一个当前音频输入的“示波器样式”输出。 有关更完整的应用实例/信息,请查看我们的 Voice-change-O-matic demo (有关代码请参阅 app.js lines 128–205)。

var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
 var analyser = audioCtx.createAnalyser();
@@ -47,36 +47,36 @@ 

例子

function draw() { -      drawVisual = requestAnimationFrame(draw); -      analyser.getByteTimeDomainData(dataArray); + drawVisual = requestAnimationFrame(draw); + analyser.getByteTimeDomainData(dataArray); -      canvasCtx.fillStyle = 'rgb(200, 200, 200)'; -      canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); + canvasCtx.fillStyle = 'rgb(200, 200, 200)'; + canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); -      canvasCtx.lineWidth = 2; -      canvasCtx.strokeStyle = 'rgb(0, 0, 0)'; + canvasCtx.lineWidth = 2; + canvasCtx.strokeStyle = 'rgb(0, 0, 0)'; -      var sliceWidth = WIDTH * 1.0 / bufferLength; -      var x = 0; + var sliceWidth = WIDTH * 1.0 / bufferLength; + var x = 0; ctx.beginPath(); -      for(var i = 0; i < bufferLength; i++) { -        let v = dataArray[i]/128.0, -  y = v * HEIGHT/2; + for(var i = 0; i < bufferLength; i++) { + let v = dataArray[i]/128.0, + y = v * HEIGHT/2; -        if(i === 0) -          canvasCtx.moveTo(x, y); -        else -          canvasCtx.lineTo(x, y); + if(i === 0) + canvasCtx.moveTo(x, y); + else + canvasCtx.lineTo(x, y); -        x += sliceWidth; -      } + x += sliceWidth; + } -      canvasCtx.lineTo(canvas.width, canvas.height/2); -      canvasCtx.stroke(); -    }; + canvasCtx.lineTo(canvas.width, canvas.height/2); + canvasCtx.stroke(); + }; -    draw(); + draw();

规格

diff --git a/files/zh-cn/web/api/analysernode/getfloatfrequencydata/index.html b/files/zh-cn/web/api/analysernode/getfloatfrequencydata/index.html index 7ccf030bb8e965..b5367bbc50e3b1 100644 --- a/files/zh-cn/web/api/analysernode/getfloatfrequencydata/index.html +++ b/files/zh-cn/web/api/analysernode/getfloatfrequencydata/index.html @@ -6,11 +6,11 @@

{{ APIRef("Web Audio API") }}

-

getFloatFrequencyData() 作为{{domxref("AnalyserNode")}} 接口的方法能将当前分析节点(AnalyserNode)的频率数据拷贝进一个 {{domxref("Float32Array")}} 数组对象。

+

getFloatFrequencyData() 作为{{domxref("AnalyserNode")}} 接口的方法能将当前分析节点(AnalyserNode)的频率数据拷贝进一个 {{domxref("Float32Array")}} 数组对象。

此数组表示的频率范围为 0 ~ 22050 Hz,每个元素表示对应频率上的信号分量强度,单位为分贝。

-

如果你需要更好的性能并且不太在意数据的精度,你可以使用 {{domxref("AnalyserNode.getByteFrequencyData()")}} 作为代替,这一接口使用 {{domxref("Uint8Array")}}来存储数据(对应的也是这个精度的格式).

+

如果你需要更好的性能并且不太在意数据的精度,你可以使用 {{domxref("AnalyserNode.getByteFrequencyData()")}} 作为代替,这一接口使用 {{domxref("Uint8Array")}}来存储数据(对应的也是这个精度的格式).

语法

@@ -22,7 +22,7 @@

参数

array
-
你即将用于拷贝频域数据(frequency domain data)的 {{domxref("Float32Array")}} 数组。对于任何无声的样本,它的值应该是 -Infinity.
+
你即将用于拷贝频域数据(frequency domain data)的 {{domxref("Float32Array")}} 数组。对于任何无声的样本,它的值应该是 -Infinity.
如果这一数组的可容纳元素数少于该分析节点的{{domxref("AnalyserNode.frequencyBinCount")}}值,超出容量的数据元素将被舍弃。而如果容量多于需要,多余的数组元素将不会被操作。
@@ -42,9 +42,9 @@

示例

例:绘制一个频谱

-

下面的示例展示了一个 {{domxref("AudioContext")}}对象连接 {{domxref("MediaElementAudioSourceNode")}}到AnalyserNode 对象的基本用法(即用 AudioContext 将音频内容连接到分析节点,从而可以展开对音频数据的分析). 当音频播放时,我们使用 {{domxref("window.requestAnimationFrame()","requestAnimationFrame()")}}方法产生轮询从而不断地收集频率数据,进而在 {{htmlelement("canvas")}} 元素上绘制 winamp(windows 上的一款 MP3 播放软件)条形图风格的频谱。

+

下面的示例展示了一个 {{domxref("AudioContext")}}对象连接 {{domxref("MediaElementAudioSourceNode")}}到AnalyserNode 对象的基本用法(即用 AudioContext 将音频内容连接到分析节点,从而可以展开对音频数据的分析). 当音频播放时,我们使用 {{domxref("window.requestAnimationFrame()","requestAnimationFrame()")}}方法产生轮询从而不断地收集频率数据,进而在 {{htmlelement("canvas")}} 元素上绘制 winamp(windows 上的一款 MP3 播放软件)条形图风格的频谱。

-

更多的应用示例和应用信息,可以参看我们 Voice-change-O-matic-float-data 示例 (在 source code 同样有).

+

更多的应用示例和应用信息,可以参看我们 Voice-change-O-matic-float-data 示例 (在 source code 同样有).

 
-

 AnalyserNode 接口表示了一个可以提供实时频域和时域分析信息的节点。它是一个不对音频流作任何改动的 {{domxref("AudioNode")}},同时允许你获取和处理它生成的数据,从而创建音频可视化。

+

AnalyserNode 接口表示了一个可以提供实时频域和时域分析信息的节点。它是一个不对音频流作任何改动的 {{domxref("AudioNode")}},同时允许你获取和处理它生成的数据,从而创建音频可视化。

AnalyzerNode 只有一个输入和输出,即使未连接到输出它也能正常工作。

@@ -46,16 +46,16 @@

构造函数

{{domxref("AnalyserNode.AnalyserNode", "AnalyserNode()")}}
-
创建一个新的 AnalyserNode 对象实例。
+
创建一个新的 AnalyserNode 对象实例。

属性

-

继承属性自 {{domxref("AudioNode")}}。

+

继承属性自 {{domxref("AudioNode")}}。

-
 {{domxref("AnalyserNode.fftSize")}}
-
一个无符号长整形 (unsigned long) 的值,代表了用于计算频域信号时使用的 FFT (快速傅里叶变换) 的窗口大小。
+
{{domxref("AnalyserNode.fftSize")}}
+
一个无符号长整形 (unsigned long) 的值,代表了用于计算频域信号时使用的 FFT (快速傅里叶变换) 的窗口大小。
{{domxref("AnalyserNode.frequencyBinCount")}} {{readonlyInline}}
一个无符号长整形 (unsigned long) 的值,值为 fftSize 的一半。这通常等于将要用于可视化的数据值的数量。
{{domxref("AnalyserNode.minDecibels")}}
@@ -69,7 +69,7 @@

属性

方法

-

继承方法自 {{domxref("AudioNode")}}.

+

继承方法自 {{domxref("AudioNode")}}.

{{domxref("AnalyserNode.getFloatFrequencyData()")}}
@@ -85,20 +85,20 @@

方法

{{domxref("AnalyserNode.getFloatTimeDomainData()")}}
将当前波形,或者时域数据拷贝进{{domxref("Float32Array")}}数组。
{{domxref("AnalyserNode.getByteTimeDomainData()")}}
-
将当前波形,或者时域数据拷贝进 {{domxref("Uint8Array")}}数组(无符号字节数组)。 
+
将当前波形,或者时域数据拷贝进 {{domxref("Uint8Array")}}数组(无符号字节数组)。

例子

-

注意:查看 Visualizations with Web Audio API 指南以获得更多关于创建音频可视化效果的信息。

+

注意:查看 Visualizations with Web Audio API 指南以获得更多关于创建音频可视化效果的信息。

基础用法

-

下面的例子展示了 {{domxref("AudioContext")}} 创建一个 AnalyserNode, 然后用 {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} 和 {{htmlelement("canvas")}} 去反复收集当前音频的时域数据,并绘制为一个示波器风格的输出 (频谱).

+

下面的例子展示了 {{domxref("AudioContext")}} 创建一个 AnalyserNode, 然后用 {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} 和 {{htmlelement("canvas")}} 去反复收集当前音频的时域数据,并绘制为一个示波器风格的输出 (频谱).

-

更多的例子/信息,查看 Voice-change-O-matic 演示 (相关代码在 app.js 的 128 行~205 行).

+

更多的例子/信息,查看 Voice-change-O-matic 演示 (相关代码在 app.js 的 128 行~205 行).

var audioCtx = new(window.AudioContext || window.webkitAudioContext)();
 var analyser = audioCtx.createAnalyser();
diff --git a/files/zh-cn/web/api/analysernode/smoothingtimeconstant/index.html b/files/zh-cn/web/api/analysernode/smoothingtimeconstant/index.html
index eca876a293d2f0..f6edbdd527741e 100644
--- a/files/zh-cn/web/api/analysernode/smoothingtimeconstant/index.html
+++ b/files/zh-cn/web/api/analysernode/smoothingtimeconstant/index.html
@@ -5,14 +5,14 @@
 ---
 

{{ APIRef("Web Audio API") }}

-

{{ domxref("AnalyserNode") }} 接口的 smoothingTimeConstant 属性是一个双精度浮点型 (double) 的值, 表示最后一个分析帧的平均常数。它基本上是当前缓冲区和 AnalyserNode 处理的最后一个缓冲区之间的平均值,并导致在值变化时随着时间推移得到一个更平滑的集合。

+

{{ domxref("AnalyserNode") }} 接口的 smoothingTimeConstant 属性是一个双精度浮点型 (double) 的值, 表示最后一个分析帧的平均常数。它基本上是当前缓冲区和 AnalyserNode 处理的最后一个缓冲区之间的平均值,并导致在值变化时随着时间推移得到一个更平滑的集合。

-

smoothingTimeConstant 属性的默认值为 0.8; 值的范围必须在 0 ~ 1 之间。如果设置为 0,则不进行平均,而值为 1 意味着 "在计算值时重叠上一个缓冲区和当前缓冲区相当多", 它基本上平滑了 {{domxref("AnalyserNode.getFloatFrequencyData")}}/{{domxref("AnalyserNode.getByteFrequencyData")}} 调用的变化。

+

smoothingTimeConstant 属性的默认值为 0.8; 值的范围必须在 0 ~ 1 之间。如果设置为 0,则不进行平均,而值为 1 意味着 "在计算值时重叠上一个缓冲区和当前缓冲区相当多", 它基本上平滑了 {{domxref("AnalyserNode.getFloatFrequencyData")}}/{{domxref("AnalyserNode.getByteFrequencyData")}} 调用的变化。

-

在技术术语中,我们应用一个 布莱克曼窗 并随着时间推移去平滑值。大部分情况下,默认值是较好的。

+

在技术术语中,我们应用一个 布莱克曼窗 并随着时间推移去平滑值。大部分情况下,默认值是较好的。

-

注意:  如果设置了 0~1 范围外的值,将会抛出异常INDEX_SIZE_ERR.

+

注意: 如果设置了 0~1 范围外的值,将会抛出异常INDEX_SIZE_ERR.

语法

@@ -28,11 +28,11 @@

值类型

例子

-

下面的例子展示了 AudioContext 创建一个 AnalyserNode, 然后用 requestAnimationFrame 和 <canvas> 去反复收集当前音频的频率数据,并绘制为一个柱状风格的输出 (频谱).

+

下面的例子展示了 AudioContext 创建一个 AnalyserNode, 然后用 requestAnimationFrame<canvas> 去反复收集当前音频的频率数据,并绘制为一个柱状风格的输出 (频谱).

-

更多的例子/信息,查看 Voice-change-O-matic 演示 (相关代码在 app.js 的 128 行~205 行).

+

更多的例子/信息,查看 Voice-change-O-matic 演示 (相关代码在 app.js 的 128 行~205 行).

-

如果你对 smoothingTimeConstant() 的效果好奇,可以尝试克隆上面的例子并设置 "analyser.smoothingTimeConstant = 0;" 代替。你会发现值的变化更加快速。

+

如果你对 smoothingTimeConstant() 的效果好奇,可以尝试克隆上面的例子并设置 "analyser.smoothingTimeConstant = 0;" 代替。你会发现值的变化更加快速。

var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
 var analyser = audioCtx.createAnalyser();
@@ -50,25 +50,25 @@ 

例子

canvasCtx.clearRect(0, 0, WIDTH, HEIGHT); function draw() { -  drawVisual = requestAnimationFrame(draw); + drawVisual = requestAnimationFrame(draw); -  analyser.getByteFrequencyData(dataArray); + analyser.getByteFrequencyData(dataArray); -  canvasCtx.fillStyle = 'rgb(0, 0, 0)'; -  canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); + canvasCtx.fillStyle = 'rgb(0, 0, 0)'; + canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); -  var barWidth = (WIDTH / bufferLength) * 2.5; -  var barHeight; -  var x = 0; + var barWidth = (WIDTH / bufferLength) * 2.5; + var barHeight; + var x = 0; -  for(var i = 0; i < bufferLength; i++) { -    barHeight = dataArray[i]; + for(var i = 0; i < bufferLength; i++) { + barHeight = dataArray[i]; -    canvasCtx.fillStyle = 'rgb(' + (barHeight+100) + ',50,50)'; -    canvasCtx.fillRect(x,HEIGHT-barHeight/2,barWidth,barHeight/2); + canvasCtx.fillStyle = 'rgb(' + (barHeight+100) + ',50,50)'; + canvasCtx.fillRect(x,HEIGHT-barHeight/2,barWidth,barHeight/2); -    x += barWidth + 1; -  } + x += barWidth + 1; + } }; draw();
diff --git a/files/zh-cn/web/api/animation/animation/index.html b/files/zh-cn/web/api/animation/animation/index.html index 2a00c0ccfd7686..62ba13580b005f 100644 --- a/files/zh-cn/web/api/animation/animation/index.html +++ b/files/zh-cn/web/api/animation/animation/index.html @@ -16,7 +16,7 @@

语法

参数

-
effect {{optional_inline}}
+
effect {{optional_inline}}
将{{domxref("KeyframeEffect")}}对象分配给动画。(在将来,其他类型的效果,如 SequenceEffects 或 GroupEffects 是可能被实现的,但现在,唯一的效果是 KeyframeEffect。)
timeline {{optional_inline}}
指定与动画关联的时间轴。(目前唯一可用的时间轴类型是{{domxref("DocumentTimeline")}},但在将来我会有与手势或滚动相关联的时间轴。)默认为{{domxref("Document.timeline")}}。 这也可以设置为 null。
diff --git a/files/zh-cn/web/api/animation/cancel/index.html b/files/zh-cn/web/api/animation/cancel/index.html index edaf704b6d610d..186b4ac633f5f7 100644 --- a/files/zh-cn/web/api/animation/cancel/index.html +++ b/files/zh-cn/web/api/animation/cancel/index.html @@ -7,10 +7,10 @@ ---

{{ SeeCompatTable() }}{{ APIRef("Web Animations") }}

-

{{domxref("Animation")}} 接口的 Web 动画 API 的 cancel() 方法将清除此动画造成的所有 {{domxref("KeyframeEffect")}},并中止其播放。

+

{{domxref("Animation")}} 接口的 Web 动画 API 的 cancel() 方法将清除此动画造成的所有 {{domxref("KeyframeEffect")}},并中止其播放。

-

当一个动画被取消时,其 {{domxref("Animation.startTime", "startTime")}} 和 {{domxref("Animation.currentTime", "currentTime")}} 被设置为 null。

+

当一个动画被取消时,其 {{domxref("Animation.startTime", "startTime")}} 和 {{domxref("Animation.currentTime", "currentTime")}} 被设置为 null。

语法

diff --git a/files/zh-cn/web/api/animation/cancel_event/index.html b/files/zh-cn/web/api/animation/cancel_event/index.html index b3ad554d6c95f5..d8318b32af199c 100644 --- a/files/zh-cn/web/api/animation/cancel_event/index.html +++ b/files/zh-cn/web/api/animation/cancel_event/index.html @@ -9,9 +9,9 @@ ---

{{ SeeCompatTable() }}{{ APIRef("Web Animations") }}

-

Web Animations API 的 {{domxref("Animation")}} 接口的 oncancel 属性是 {{event("cancel")}} 事件的事件处理程序。

+

Web Animations API 的 {{domxref("Animation")}} 接口的 oncancel 属性是 {{event("cancel")}} 事件的事件处理程序。

-

当动作从其他状态进入 "idle" 播放状态,例如当动画在结束播放后从元素中移除时,cancel 事件可以 {{domxref("Animation.cancel()")}} 被手动触发。 

+

当动作从其他状态进入 "idle" 播放状态,例如当动画在结束播放后从元素中移除时,cancel 事件可以 {{domxref("Animation.cancel()")}} 被手动触发。

在新的动画中,创建一个新的初始的空闲动画不会触发 {{event("cancel")}} 事件。

@@ -25,7 +25,7 @@

语法

-

当动画被取消时,这个函数将会被执行。默认是 null 。

+

当动画被取消时,这个函数将会被执行。默认是 null

例子

diff --git a/files/zh-cn/web/api/animation/effect/index.html b/files/zh-cn/web/api/animation/effect/index.html index 212c73df907b85..ac396608d5eaea 100644 --- a/files/zh-cn/web/api/animation/effect/index.html +++ b/files/zh-cn/web/api/animation/effect/index.html @@ -3,7 +3,7 @@ slug: Web/API/Animation/effect translation_of: Web/API/Animation/effect --- -

{{ SeeCompatTable() }} {{ APIRef("Web Animations API") }}

+

{{ SeeCompatTable() }} {{ APIRef("Web Animations API") }}

Animation.effect 属性可以获取或设置动画的目标效果。 目标效果可以是{{domxref("KeyframeEffect")}}对象或 null。

diff --git a/files/zh-cn/web/api/animation/finish/index.html b/files/zh-cn/web/api/animation/finish/index.html index b247e7908ca1f0..6711afcc103ead 100644 --- a/files/zh-cn/web/api/animation/finish/index.html +++ b/files/zh-cn/web/api/animation/finish/index.html @@ -13,7 +13,7 @@

{{APIRef("Web Animations")}}{{SeeCompatTable}}

-

The finish() method of the Web Animations API's {{domxref("Animation")}} Interface sets the current playback time to the end of the animation corresponding to the current playback direction. That is, if the animation is playing forward, it sets the playback time to the length of the animation sequence, and if the animation is playing in reverse (having had its {{domxref("Animation.reverse", "reverse()")}} method called), it sets the playback time to 0.

+

The finish() method of the Web Animations API's {{domxref("Animation")}} Interface sets the current playback time to the end of the animation corresponding to the current playback direction. That is, if the animation is playing forward, it sets the playback time to the length of the animation sequence, and if the animation is playing in reverse (having had its {{domxref("Animation.reverse", "reverse()")}} method called), it sets the playback time to 0.

语法

@@ -35,7 +35,7 @@

异常

InvalidState
-
The player's playback rate is 0 or the animation's playback rate is greater than 0 and the end time of the animation is infinity.
+
The player's playback rate is 0 or the animation's playback rate is greater than 0 and the end time of the animation is infinity.

例子

diff --git a/files/zh-cn/web/api/animation/id/index.html b/files/zh-cn/web/api/animation/id/index.html index b5a36cb66c6b6b..014df84562efbe 100644 --- a/files/zh-cn/web/api/animation/id/index.html +++ b/files/zh-cn/web/api/animation/id/index.html @@ -7,9 +7,9 @@ ---

{{ SeeCompatTable() }}{{ APIRef("Web Animations API") }}

-

Web Animations API 的 Animation.id 属性可返回或设置用于识别某个动画的唯一标识。

+

Web Animations APIAnimation.id 属性可返回或设置用于识别某个动画的唯一标识。

-

获取与设置 animation.id

+

获取与设置 animation.id

// 获取动画的 id
@@ -22,11 +22,11 @@ 

获取与设置 animation.id返回值

-

当该动画已被分配 id,返回一个 {{domxref("DOMString")}}, 当该动画未被分配 id 则返回 null.

+

当该动画已被分配 id,返回一个 {{domxref("DOMString")}}, 当该动画未被分配 id 则返回 null.

示例

-

Follow the White Rabbit example 这个例子里,你可以像下面的方式一样,为 rabbitDownAnimation 分配一个 id:

+

Follow the White Rabbit example 这个例子里,你可以像下面的方式一样,为 rabbitDownAnimation 分配一个 id:

rabbitDownAnimation.effect.id = "rabbitGo";
 
diff --git a/files/zh-cn/web/api/animation/index.html b/files/zh-cn/web/api/animation/index.html index 88ad834e4784eb..d6b3f1a6312ba8 100644 --- a/files/zh-cn/web/api/animation/index.html +++ b/files/zh-cn/web/api/animation/index.html @@ -54,7 +54,7 @@

属性

获取或设置与此动画相关联的{{domxref("AnimationTimeline", "timeline")}}。
-

 事件处理程序

+

事件处理程序

{{domxref("Animation.oncancel")}}
diff --git a/files/zh-cn/web/api/animation/play/index.html b/files/zh-cn/web/api/animation/play/index.html index 678fe178f2be98..32d6970af1d8e6 100644 --- a/files/zh-cn/web/api/animation/play/index.html +++ b/files/zh-cn/web/api/animation/play/index.html @@ -22,7 +22,7 @@

返回值

例子

-

在 Growing/Shrinking Alice Game 示例中,单击或点击蛋糕会导致 Alice 的增长动画 (aliceChange) 播放,导致她体型变大并触发蛋糕的动画。在以下示例中,使用了一个事件监听器来触发两者的动画:

+

Growing/Shrinking Alice Game 示例中,单击或点击蛋糕会导致 Alice 的增长动画 (aliceChange) 播放,导致她体型变大并触发蛋糕的动画。在以下示例中,使用了一个事件监听器来触发两者的动画:

// 蛋糕拥有其自己的动画:
 var nommingCake = document.getElementById('eat-me_sprite').animate(
diff --git a/files/zh-cn/web/api/animation/playstate/index.html b/files/zh-cn/web/api/animation/playstate/index.html
index 6f372d8b7de37b..12ec01819ad71f 100644
--- a/files/zh-cn/web/api/animation/playstate/index.html
+++ b/files/zh-cn/web/api/animation/playstate/index.html
@@ -10,7 +10,7 @@
 ---
 

{{APIRef("Web Animations")}}{{SeeCompatTable}}

-

作为一个 Web Animations API 的属性,Animation.playState 能够返回并设置一个可枚举值来描述一个动画的回放状态。

+

作为一个 Web Animations API 的属性,Animation.playState 能够返回并设置一个可枚举值来描述一个动画的回放状态。

这个属性只对 CSS Animations 和 Transitions 可读。

@@ -45,22 +45,22 @@

实例

// 创建泪珠动画
 
 tears.forEach(function(el) {
-  el.animate(
-    tearsFalling,
-    {
-      delay: getRandomMsRange(-1000, 1000), // 获取每一滴随机泪珠
-      duration: getRandomMsRange(2000, 6000), // 获取每一滴随机泪珠
-      iterations: Infinity,
-      easing: "cubic-bezier(0.6, 0.04, 0.98, 0.335)"
-    });
-  el.playState = 'paused';
+  el.animate(
+    tearsFalling,
+    {
+      delay: getRandomMsRange(-1000, 1000), // 获取每一滴随机泪珠
+      duration: getRandomMsRange(2000, 6000), // 获取每一滴随机泪珠
+      iterations: Infinity,
+      easing: "cubic-bezier(0.6, 0.04, 0.98, 0.335)"
+    });
+  el.playState = 'paused';
 });
 
 
 // 结尾需要现出时播放眼泪降落动画
 
 tears.forEach(function(el) {
-  el.playState = 'playing';
+  el.playState = 'playing';
 });
 
 
@@ -85,5 +85,5 @@ 

参见

  • Web Animations API
  • {{domxref("Animation")}} 获取更多可用来控制网页动画的方法和属性
  • -
  • {{domxref("Animation.play()")}}, {{domxref("Animation.pause()")}}, {{domxref("Animation.finish()")}},这些方法可以设置一个动画的 playState
  • +
  • {{domxref("Animation.play()")}}, {{domxref("Animation.pause()")}}, {{domxref("Animation.finish()")}},这些方法可以设置一个动画的 playState
diff --git a/files/zh-cn/web/api/animation/starttime/index.html b/files/zh-cn/web/api/animation/starttime/index.html index 2ef253fb4e8aea..be647bd67bcd37 100644 --- a/files/zh-cn/web/api/animation/starttime/index.html +++ b/files/zh-cn/web/api/animation/starttime/index.html @@ -8,7 +8,7 @@

{{ non-standard_header() }}

概述

Returns the time, in milliseconds since the epoch, at which animations started now should be considered to have started. This value should be used instead of, for example, Date.now(), because this value will be the same for all animations started in this window during this refresh interval, allowing them to remain in sync with one another.

-

This also allows JavaScript-based animations to remain synchronized with CSS transitions and SMIL animations triggered during the same refresh interval.

+

This also allows JavaScript-based animations to remain synchronized with CSS transitions and SMIL animations triggered during the same refresh interval.

语法

time = window.mozAnimationStartTime;
 
diff --git a/files/zh-cn/web/api/animationevent/animationevent/index.html b/files/zh-cn/web/api/animationevent/animationevent/index.html index 4eecf079d37628..249598ea1b3672 100644 --- a/files/zh-cn/web/api/animationevent/animationevent/index.html +++ b/files/zh-cn/web/api/animationevent/animationevent/index.html @@ -20,13 +20,13 @@

参数

type
-
{{domxref("DOMString")}} 代表 AnimationEvent 类型的名称。大小写敏感,有三个值可选:'animationstart''animationend' 和 'animationiteration'
+
{{domxref("DOMString")}} 代表 AnimationEvent 类型的名称。大小写敏感,有三个值可选:'animationstart''animationend''animationiteration'
animationName {{optional_inline}}
A {{domxref("DOMString")}} containing the value of the {{cssxref("animation-name")}} CSS property associated with the transition. It defaults to "".
elapsedTime {{optional_inline}}
-
A float giving the amount of time the animation has been running, in seconds, when this event fired, excluding any time the animation was paused. For an "animationstart" event, elapsedTime is 0.0 unless there was a negative value for animation-delay, in which case the event will be fired with elapsedTime containing  (-1 * delay). It defaults to 0.0.
+
A float giving the amount of time the animation has been running, in seconds, when this event fired, excluding any time the animation was paused. For an "animationstart" event, elapsedTime is 0.0 unless there was a negative value for animation-delay, in which case the event will be fired with elapsedTime containing (-1 * delay). It defaults to 0.0.
pseudoElement {{optional_inline}}
-
Is a {{domxref("DOMString")}}, starting with "::", containing the name of the pseudo-element the animation runs on. If the animation doesn't run on a pseudo-element but on the element, an empty string: "". It defaults to ""
+
Is a {{domxref("DOMString")}}, starting with "::", containing the name of the pseudo-element the animation runs on. If the animation doesn't run on a pseudo-element but on the element, an empty string: "". It defaults to "".

标准

diff --git a/files/zh-cn/web/api/animationevent/index.html b/files/zh-cn/web/api/animationevent/index.html index 870300620deaff..382b8cf8bdd3b4 100644 --- a/files/zh-cn/web/api/animationevent/index.html +++ b/files/zh-cn/web/api/animationevent/index.html @@ -21,7 +21,7 @@

Properties

{{domxref("AnimationEvent.animationName")}} {{readonlyInline}}
Is a {{domxref("DOMString")}} containing the value of the {{cssxref("animation-name")}} CSS property associated with the transition.
{{domxref("AnimationEvent.elapsedTime")}} {{readonlyInline}}
-
Is a float giving the amount of time the animation has been running, in seconds, when this event fired, excluding any time the animation was paused. For an "animationstart" event, elapsedTime is 0.0 unless there was a negative value for {{cssxref("animation-delay")}}, in which case the event will be fired with elapsedTime containing  (-1 * delay).
+
Is a float giving the amount of time the animation has been running, in seconds, when this event fired, excluding any time the animation was paused. For an "animationstart" event, elapsedTime is 0.0 unless there was a negative value for {{cssxref("animation-delay")}}, in which case the event will be fired with elapsedTime containing (-1 * delay).
{{domxref("AnimationEvent.pseudoElement")}} {{readonlyInline}}
Is a {{domxref("DOMString")}}, starting with '::', containing the name of the pseudo-element the animation runs on. If the animation doesn't run on a pseudo-element but on the element, an empty string: ''.
diff --git a/files/zh-cn/web/api/atob/index.html b/files/zh-cn/web/api/atob/index.html index 1d5adbc278be75..5d0f39310bf76e 100644 --- a/files/zh-cn/web/api/atob/index.html +++ b/files/zh-cn/web/api/atob/index.html @@ -13,7 +13,7 @@ ---

{{APIRef("HTML DOM")}}

-

atob() 对经过 base-64 编码的字符串进行解码。你可以使用 {{domxref("WindowBase64.btoa","window.btoa()")}} 方法来编码一个可能在传输过程中出现问题的数据,并且在接受数据之后,使用 atob() 方法再将数据解码。例如:你可以编码、传输和解码操作各种字符,比如 0-31 的 ASCII 码值。

+

atob() 对经过 base-64 编码的字符串进行解码。你可以使用 {{domxref("WindowBase64.btoa","window.btoa()")}} 方法来编码一个可能在传输过程中出现问题的数据,并且在接受数据之后,使用 atob() 方法再将数据解码。例如:你可以编码、传输和解码操作各种字符,比如 0-31 的 ASCII 码值。

关于针对 Unicode 或者 UTF-8 的应用方面,请查看 this note at Base64 encoding and decodingbtoa() 的备注

diff --git a/files/zh-cn/web/api/attr/index.html b/files/zh-cn/web/api/attr/index.html index 6d1b6aa26d9e68..5dda3d699d1123 100644 --- a/files/zh-cn/web/api/attr/index.html +++ b/files/zh-cn/web/api/attr/index.html @@ -40,7 +40,7 @@

属性

注意: DOM Level 4 移除了这个方法。由于当你从{{domxref("Element")}}中获得Attr对象时,你应已知相关的元素。
在某些场景下并一定能够得到相关的元素,比如通过{{domxref("Document.evaluate")}}返回的 Attr 对象,最新的 DOM 草案再次引入该属性。

-

Gecko 从 Gecko 7.0 {{geckoRelease("7.0")}}开始会输出一个废弃的提示信息。 该提示信息在 Gecko 49.0 {{geckoRelease("49.0")}}再次被删除。

+

Gecko 从 Gecko 7.0 {{geckoRelease("7.0")}}开始会输出一个废弃的提示信息。 该提示信息在 Gecko 49.0 {{geckoRelease("49.0")}}再次被删除。

{{domxref("Attr.specified", "specified")}} {{readOnlyInline}}
@@ -62,13 +62,13 @@

废弃的属性和方法

attributes
-

当前该属性总是返回 NULL

+

当前该属性总是返回 NULL

childNodes {{Deprecated_Inline}}
当前该属性总是返回一个空的 {{domxref("NodeList")}}.
firstChild {{Deprecated_Inline}}
当前该属性总是返回 NULL
-
isId {{readOnlyInline}}
+
isId {{readOnlyInline}}
表明该属性是否一个“ID 属性”。“ID 属性”的值在整个 DOM 文档中应当是唯一。在 HTML DOM 文档中属性“id”是一个 ID 属性,也是唯一一个 ID 属性;但是在 XML 文档中可以定义其他 ID 属性。一个属性是否是唯一的,通常由{{Glossary("DTD")}}或其他文档模式描述文件决定。
lastChild
当前该属性总是返回 NULL
@@ -158,7 +158,7 @@

规格

{{SpecName("DOM3 Core", "core.html#ID-637646024", "Attr")}} {{Spec2("DOM3 Core")}} -

扩展 schemaTypeInfo, isId

+

扩展 schemaTypeInfo, isId

diff --git a/files/zh-cn/web/api/attr/localname/index.html b/files/zh-cn/web/api/attr/localname/index.html index 0ccec21438563b..38c44e2165921c 100644 --- a/files/zh-cn/web/api/attr/localname/index.html +++ b/files/zh-cn/web/api/attr/localname/index.html @@ -5,7 +5,7 @@ ---
{{APIRef("DOM")}}
-

Attr.localName 为只读属性,返回一个属性限定名称的本名部分(去除命名空间前缀的名字)。

+

Attr.localName 为只读属性,返回一个属性限定名称的本名部分(去除命名空间前缀的名字)。

在之前的 DOM 规范中此 API 被定义在 {{domxref("Node")}} 接口中。

@@ -32,8 +32,8 @@

JavaScript 代码

const element = document.querySelector("#example");
 element.addEventListener("click", function() {
-  const attribute = element.attributes[0];
-  alert(attribute.localName);
+  const attribute = element.attributes[0];
+  alert(attribute.localName);
 });
 
@@ -41,10 +41,10 @@

JavaScript 代码

注意

-

本文档中属性的“本名 (local name)”指的是属性“限定名称 (qualified names)”的命名空间冒号之后的部分。“限定名称”通常作为 XML 文档命名空间的一部分用在 XML 代码内。 

+

本文档中属性的“本名 (local name)”指的是属性“限定名称 (qualified names)”的命名空间冒号之后的部分。“限定名称”通常作为 XML 文档命名空间的一部分用在 XML 代码内。

-

注意:在{{Gecko("1.9.2")}} 以及跟早的版本中,HTML DOM 访问该属性将返回 HTML 节点属性的大写字符串本名(有别于 XML DOM 的 XHTML 属性)。在后来的版本中,为遵循 HTML5 标准,该属性返回 DOM 内部存储的名称,即,不论 HTML DOM 的 HTML 属性还是 XML DOM 的 XHTML 属性都是小写字符串。

+

注意:在{{Gecko("1.9.2")}} 以及跟早的版本中,HTML DOM 访问该属性将返回 HTML 节点属性的大写字符串本名(有别于 XML DOM 的 XHTML 属性)。在后来的版本中,为遵循 HTML5 标准,该属性返回 DOM 内部存储的名称,即,不论 HTML DOM 的 HTML 属性还是 XML DOM 的 XHTML 属性都是小写字符串。

规范

diff --git a/files/zh-cn/web/api/attr/namespaceuri/index.html b/files/zh-cn/web/api/attr/namespaceuri/index.html index ab128f5e08c737..01c71a846b68b4 100644 --- a/files/zh-cn/web/api/attr/namespaceuri/index.html +++ b/files/zh-cn/web/api/attr/namespaceuri/index.html @@ -17,7 +17,7 @@

语法

例子

-

在这个片段中,正在检查一个属性的 {{domxref("localName")}} 和 namespaceURI。如果 namespaceURI 返回 XUL 命名空间,并且 localName 返回 "browser",则该节点被理解为 XUL <browser/>

+

在这个片段中,正在检查一个属性的 {{domxref("localName")}} 和 namespaceURI。如果 namespaceURI 返回 XUL 命名空间,并且 localName 返回 "browser",则该节点被理解为 XUL <browser/>

if (attribute.localName == "value" &&
     attribute.namespaceURI == "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul") {
@@ -34,10 +34,10 @@ 

笔记

您可以使用 DOM Level 2 方法 {{domxref("Element.setAttributeNS")}}创建具有指定 namespaceURI 的属性。

-

根据 Namespaces in XML 规范,属性不会从其附加的元素继承其命名空间。
+

根据 Namespaces in XML 规范,属性不会从其附加的元素继承其命名空间。
如果一个属性没有明确地给出一个命名空间,它没有命名空间。

-

DOM 本身不处理或强制命名空间验证。 DOM 应用程序需要做任何必要的验证。
+

DOM 本身不处理或强制命名空间验证。 DOM 应用程序需要做任何必要的验证。
还要注意,一旦与特定节点相关联,命名空间前缀将无法更改。

规格

diff --git a/files/zh-cn/web/api/attr/prefix/index.html b/files/zh-cn/web/api/attr/prefix/index.html index c375c1f4a0cd6a..5383fb054533fa 100644 --- a/files/zh-cn/web/api/attr/prefix/index.html +++ b/files/zh-cn/web/api/attr/prefix/index.html @@ -5,10 +5,10 @@ ---
{{APIRef("DOM")}}
-

Attr.prefix 为只读属性,返回指定标签属性的名字空间前缀,如果没有前缀则返回 null

+

Attr.prefix 为只读属性,返回指定标签属性的名字空间前缀,如果没有前缀则返回 null

-

在 DOM4 之前此 API 被定义在 {{domxref("Node")}} 接口中。

+

在 DOM4 之前此 API 被定义在 {{domxref("Node")}} 接口中。

语法

diff --git a/files/zh-cn/web/api/audiobuffer/audiobuffer/index.html b/files/zh-cn/web/api/audiobuffer/audiobuffer/index.html index 5fdd0af5518682..feea5c96fe1f05 100644 --- a/files/zh-cn/web/api/audiobuffer/audiobuffer/index.html +++ b/files/zh-cn/web/api/audiobuffer/audiobuffer/index.html @@ -5,7 +5,7 @@ ---

{{APIRef("Web Audio API")}}

-

Web Audio API 的 AudioBuffer 构造函数将创建一个新的 {{domxref("AudioBuffer")}} 对象。

+

Web Audio APIAudioBuffer 构造函数将创建一个新的 {{domxref("AudioBuffer")}} 对象。

语法

@@ -14,24 +14,24 @@

语法

参数

-

继承参数自 {{domxref("AudioNodeOptions")}} 字典.

+

继承参数自 {{domxref("AudioNodeOptions")}} 字典.

context {{Deprecated_Inline}}
-
一个 {{domxref("AudioContext")}} 对象. (这个参数已经被标准移除, 详细信息请参阅浏览器兼容性部分.)
+
一个 {{domxref("AudioContext")}} 对象. (这个参数已经被标准移除, 详细信息请参阅浏览器兼容性部分.)
options {{optional_inline}}
Options are as follows:
  • length: buffer 中采样帧的长度。
  • -
  • numberOfChannels: buffer 的通道数. 默认值为 1. 
  • -
  • sampleRate: buffer 的采样率 (Hz). 默认值为构造此对象时使用的 context 的采样率。
  • +
  • numberOfChannels: buffer 的通道数. 默认值为 1.
  • +
  • sampleRate: buffer 的采样率 (Hz). 默认值为构造此对象时使用的 context 的采样率。

返回值

-

一个新的 {{domxref("AudioBuffer")}} 对象实例。

+

一个新的 {{domxref("AudioBuffer")}} 对象实例。

规范

diff --git a/files/zh-cn/web/api/audiobuffer/getchanneldata/index.html b/files/zh-cn/web/api/audiobuffer/getchanneldata/index.html index 47f76761b486c7..67d2e9d8a680a8 100644 --- a/files/zh-cn/web/api/audiobuffer/getchanneldata/index.html +++ b/files/zh-cn/web/api/audiobuffer/getchanneldata/index.html @@ -5,7 +5,7 @@ ---

{{ APIRef("Web Audio API") }}

-

 {{ domxref("AudioBuffer") }} 接口的 getChannelData() 方法返回一{{domxref("Float32Array")}} ,其中包含与通道关联的 PCM 数据,通道参数定义 (0 表示第一个通道)。

+

{{ domxref("AudioBuffer") }} 接口的 getChannelData() 方法返回一{{domxref("Float32Array")}} ,其中包含与通道关联的 PCM 数据,通道参数定义 (0 表示第一个通道)。

语法

@@ -16,19 +16,19 @@

参数

channel
-
channel 属性是要获取特定通道数据的索引。0 代表第一个通道。 如果索引值大于或等于{{domxref("AudioBuffer.numberOfChannels")}}, 会抛出一个索引大小异常(INDEX_SIZE_ERR )的错误。
+
channel 属性是要获取特定通道数据的索引。0 代表第一个通道。 如果索引值大于或等于{{domxref("AudioBuffer.numberOfChannels")}}, 会抛出一个索引大小异常(INDEX_SIZE_ERR )的错误。

返回值

-

 {{domxref("Float32Array")}}.

+

{{domxref("Float32Array")}}.

例子

-

在下例中,我们创建一个 2 秒钟的缓冲区,用白噪声填充它,然后通过{{domxref("AudioBufferSourceNode") }}来播放它。评论应该会清楚的解释发生的事情。 你也可以实时运行代码,或者查看源代码

+

在下例中,我们创建一个 2 秒钟的缓冲区,用白噪声填充它,然后通过{{domxref("AudioBufferSourceNode") }}来播放它。评论应该会清楚的解释发生的事情。 你也可以实时运行代码,或者查看源代码

var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
 var button = document.querySelector('button');
diff --git a/files/zh-cn/web/api/audiobuffer/index.html b/files/zh-cn/web/api/audiobuffer/index.html
index c32323ead2c2dd..fead36111fa04c 100644
--- a/files/zh-cn/web/api/audiobuffer/index.html
+++ b/files/zh-cn/web/api/audiobuffer/index.html
@@ -6,7 +6,7 @@
 

{{APIRef("Web Audio API")}}

-

AudioBuffer 接口表示存在内存里的一段短小的音频资源,利用{{ domxref("AudioContext.decodeAudioData()") }}方法从一个音频文件构建,或者利用 {{ domxref("AudioContext.createBuffer()") }}从原始数据构建。把音频放入 AudioBuffer 后,可以传入到一个 {{ domxref("AudioBufferSourceNode") }}进行播放。

+

AudioBuffer 接口表示存在内存里的一段短小的音频资源,利用{{ domxref("AudioContext.decodeAudioData()") }}方法从一个音频文件构建,或者利用 {{ domxref("AudioContext.createBuffer()") }}从原始数据构建。把音频放入 AudioBuffer 后,可以传入到一个 {{ domxref("AudioBufferSourceNode") }}进行播放。

这些类型对象被设计来控制小音频片段,往往短于 45 秒。对于更长的声音,通过 {{domxref("MediaElementAudioSourceNode")}}来实现更为合适。缓存区(buffer)包含以下数据:不间断的 IEEE754 32 位线性 PCM,从-1 到 1 的范围额定,就是说,32 位的浮点缓存区的每个样本在-1.0 到 1.0 之间。如果{{domxref("AudioBuffer")}}有不同的频道,他们通常被保存在独立的缓存区。

@@ -90,5 +90,5 @@

浏览器兼容性

可查看

diff --git a/files/zh-cn/web/api/audiobuffersourcenode/audiobuffersourcenode/index.html b/files/zh-cn/web/api/audiobuffersourcenode/audiobuffersourcenode/index.html index 031834df5fea11..60b84b44356469 100644 --- a/files/zh-cn/web/api/audiobuffersourcenode/audiobuffersourcenode/index.html +++ b/files/zh-cn/web/api/audiobuffersourcenode/audiobuffersourcenode/index.html @@ -5,7 +5,7 @@ ---

{{APIRef("Web Audio API")}}

-

 AudioBufferSourceNode() 构造器创建一个新的 {{domxref("AudioBufferSourceNode")}} 实例。

+

AudioBufferSourceNode() 构造器创建一个新的 {{domxref("AudioBufferSourceNode")}} 实例。

Syntax

@@ -13,7 +13,7 @@

Syntax

Parameters

-

从 {{domxref("AudioNodeOptions")}} 字典中继承变量.

+

{{domxref("AudioNodeOptions")}} 字典中继承变量.

内容
@@ -23,8 +23,8 @@

Parameters

  • buffer: An instance of {{domxref("AudioBuffer")}} to be played.
  • detune: A value in cents to modulate the speed of audio stream rendering. Its nominal range is (-∞ to +∞). The default is 0.
  • -
  • loop: A boolean indicating whether the audio should play in a loop. The default is false. If the loop is dynamically modified during playback, the new value will take effect on the next processing block of audio.
  • -
  • loopEnd: An optional value, in seconds, where looping should end if the loop attribute is true. The default is 0. Its value is exclusive to the content of the loop. The sample frames, comprising the loop, run from the values loopStart to loopEnd-(1/sampleRate). It's sensible to set this to a value between 0 and the duration of the buffer. If loopEnd is less than 0, looping will end at 0. If loopEnd is greater than the duration of the buffer, looping will end at the end of the buffer. This attribute is converted to an exact sample frame offset within the buffer, by multiplying by the buffer's sample rate and rounding to the nearest integer value. Thus, its behavior is independent of the value of the playbackRate parameter.
  • +
  • loop: A boolean indicating whether the audio should play in a loop. The default is false. If the loop is dynamically modified during playback, the new value will take effect on the next processing block of audio.
  • +
  • loopEnd: An optional value, in seconds, where looping should end if the loop attribute is true. The default is 0. Its value is exclusive to the content of the loop. The sample frames, comprising the loop, run from the values loopStart to loopEnd-(1/sampleRate). It's sensible to set this to a value between 0 and the duration of the buffer. If loopEnd is less than 0, looping will end at 0. If loopEnd is greater than the duration of the buffer, looping will end at the end of the buffer. This attribute is converted to an exact sample frame offset within the buffer, by multiplying by the buffer's sample rate and rounding to the nearest integer value. Thus, its behavior is independent of the value of the playbackRate parameter.
    diff --git a/files/zh-cn/web/api/audiobuffersourcenode/index.html b/files/zh-cn/web/api/audiobuffersourcenode/index.html index bf8cd675bd94b0..c7fec7aa9782ef 100644 --- a/files/zh-cn/web/api/audiobuffersourcenode/index.html +++ b/files/zh-cn/web/api/audiobuffersourcenode/index.html @@ -9,11 +9,11 @@

    {{InheritanceDiagram}}

    -

    AudioBufferSourceNode 没有输入却有一个输出,其通道数与其 {{domxref("AudioBufferSourceNode.buffer", "buffer")}} 属性所指定的 AudioBuffer 相同。如果没有设置 buffer,也就是说 buffer 属性是 null 的话,输出将包含一个无声的单通道(每个采样点均为 0)。

    +

    AudioBufferSourceNode 没有输入却有一个输出,其通道数与其 {{domxref("AudioBufferSourceNode.buffer", "buffer")}} 属性所指定的 AudioBuffer 相同。如果没有设置 buffer,也就是说 buffer 属性是 null 的话,输出将包含一个无声的单通道(每个采样点均为 0)。

    -

    一个 {{domxref("AudioBufferSourceNode")}} 只能被播放一次,也就是说,每次调用 {{domxref("AudioScheduledSourceNode.start", "start()")}} 之后,如果还想再播放一遍同样的声音,那么就需要再创建一个 AudioBufferSourceNode。庆幸的是,创建该节点的代价并不大,并且想要多次播放声音的话,实际上 AudioBuffer 也可以被重用。事实上,你可以用一种“阅后即焚”的方式来使用这些节点:创建节点,调用 start() 开始播放声音,然后,你甚至不需要再保留这个节点的引用了。声音播放完成之后,垃圾收集器会找个恰当的时机回收资源。

    +

    一个 {{domxref("AudioBufferSourceNode")}} 只能被播放一次,也就是说,每次调用 {{domxref("AudioScheduledSourceNode.start", "start()")}} 之后,如果还想再播放一遍同样的声音,那么就需要再创建一个 AudioBufferSourceNode。庆幸的是,创建该节点的代价并不大,并且想要多次播放声音的话,实际上 AudioBuffer 也可以被重用。事实上,你可以用一种“阅后即焚”的方式来使用这些节点:创建节点,调用 start() 开始播放声音,然后,你甚至不需要再保留这个节点的引用了。声音播放完成之后,垃圾收集器会找个恰当的时机回收资源。

    -

    多次调用 AudioBufferSourceNode.stop() 是允许的。如果这时候 AudioBufferSourceNode 还没有到达缓冲区末尾的话,最近一次的调用将替换上一次的调用。

    +

    多次调用 AudioBufferSourceNode.stop() 是允许的。如果这时候 AudioBufferSourceNode 还没有到达缓冲区末尾的话,最近一次的调用将替换上一次的调用。


    The AudioBufferSourceNode takes the content of an AudioBuffer and m

    @@ -30,14 +30,14 @@ 频道数量 - 由相关的 {{domxref("AudioBuffer")}} 定义 + 由相关的 {{domxref("AudioBuffer")}} 定义

    属性

    -

    从父级的 {{domxref("AudioNode")}} 继承属性.

    +

    从父级的 {{domxref("AudioNode")}} 继承属性.

    {{domxref("AudioBufferSourceNode.buffer")}}
    @@ -63,7 +63,7 @@

    事件

    方法

    -

    从父级的 {{domxref("AudioNode")}} 继承方法

    +

    从父级的 {{domxref("AudioNode")}} 继承方法.

    {{domxref("AudioBufferSourceNode.start()")}}
    @@ -74,10 +74,10 @@

    方法

    例子

    -

    在这个例子中,我们将会创建一个 2 秒的缓冲器,并用白噪音填充它,然后通过{{domxref("AudioBufferSourceNode")}}来播放它.  注释里说明了它的功能。

    +

    在这个例子中,我们将会创建一个 2 秒的缓冲器,并用白噪音填充它,然后通过{{domxref("AudioBufferSourceNode")}}来播放它. 注释里说明了它的功能。

    -

    注意: 你可以 查看在线演示 或 查看源代码.

    +

    注意: 你可以 查看在线演示查看源代码.

    var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
    @@ -121,7 +121,7 @@ 

    例子

    }
    -

    注意: 音频数据解码的例子请查看 {{domxref("AudioContext.decodeAudioData")}} 页面。

    +

    注意: 音频数据解码的例子请查看 {{domxref("AudioContext.decodeAudioData")}} 页面。

    规范

    diff --git a/files/zh-cn/web/api/audiobuffersourcenode/start/index.html b/files/zh-cn/web/api/audiobuffersourcenode/start/index.html index 6f668152b783e3..333d31efd4438d 100644 --- a/files/zh-cn/web/api/audiobuffersourcenode/start/index.html +++ b/files/zh-cn/web/api/audiobuffersourcenode/start/index.html @@ -6,7 +6,7 @@

    {{ APIRef("Web Audio API") }}

    -

     {{ domxref("AudioBufferSourceNode") }} 接口的start()方法用于计划对缓冲区中包含的音频数据的回放,或者立即开始回放。

    +

    {{ domxref("AudioBufferSourceNode") }} 接口的start()方法用于计划对缓冲区中包含的音频数据的回放,或者立即开始回放。

    语法

    @@ -18,11 +18,11 @@

    参数

    when {{optional_inline}}
    -
    The time 声音开始播放的时间,单位是秒,与 {{domxref("AudioContext")}}使用相同的时间坐标系统。如果 when 小于 ({{domxref("AudioContext.currentTime")}}, 或者是 0,声音立即被播放。 默认值是 0。
    +
    The time 声音开始播放的时间,单位是秒,与 {{domxref("AudioContext")}}使用相同的时间坐标系统。如果 when 小于 ({{domxref("AudioContext.currentTime")}}, 或者是 0,声音立即被播放。 默认值是 0。
    offset {{optional_inline}}
    An offset, specified as the number of seconds in the same time coordinate system as the AudioContext, to the time within the audio buffer that playback should begin. For example, to start playback halfway through a 10-second audio clip, offset should be 5. The default value, 0, will begin playback at the beginning of the audio buffer, and offsets past the end of the audio which will be played (based on the audio buffer's {{domxref("AudioBuffer.duration", "duration")}} and/or the {{domxref("AudioBufferSourceNode.loopEnd", "loopEnd")}} property) are silently clamped to the maximum value allowed. The computation of the offset into the sound is performed using the sound buffer's natural sample rate, rather than the current playback rate, so even if the sound is playing at twice its normal speed, the midway point through a 10-second audio buffer is still 5.
    duration {{optional_inline}}
    -
    将要播放的声音的持续时间,指定单位为秒。如果这个参数没有被指定,声音播放到自然结束或者使用{{domxref("AudioScheduledSourceNode.stop", "stop()")}} 方法结束。使用这个参数的功能与调用 start(when, offset) 和调用 stop(when+duration)完全相同。
    +
    将要播放的声音的持续时间,指定单位为秒。如果这个参数没有被指定,声音播放到自然结束或者使用{{domxref("AudioScheduledSourceNode.stop", "stop()")}} 方法结束。使用这个参数的功能与调用 start(when, offset) 和调用 stop(when+duration)完全相同。

    返回值

    diff --git a/files/zh-cn/web/api/audiocontext/audiocontext/index.html b/files/zh-cn/web/api/audiocontext/audiocontext/index.html index 6df812092697bb..973fdf8c644ef0 100644 --- a/files/zh-cn/web/api/audiocontext/audiocontext/index.html +++ b/files/zh-cn/web/api/audiocontext/audiocontext/index.html @@ -8,7 +8,7 @@ ---

    {{APIRef("Web Audio API")}}{{SeeCompatTable}}

    -

    AudioContext() 构造方法创建了一个新的 {{domxref("AudioContext")}} 对象 它代表了一个由音频模块链接而成的音频处理图,每一个模块由 {{domxref("AudioNode")}} 表示。

    +

    AudioContext() 构造方法创建了一个新的 {{domxref("AudioContext")}} 对象 它代表了一个由音频模块链接而成的音频处理图,每一个模块由 {{domxref("AudioNode")}} 表示。

    语法

    @@ -20,7 +20,7 @@

    参数

    options {{optional_inline}}
    Options 如下所示:
      -
    • latencyHint: 这个参数表示了重放的类型,参数是播放效果和资源消耗的一种权衡。可接受的值有 "balanced", "interactive" 和"playback",默认值为 "interactive"。意思是 "平衡音频输出延迟和资源消耗", "提供最小的音频输出延迟最好没有干扰"和 "对比音频输出延迟,优先重放不被中断"。我们也可以用一个双精度的值来定义一个秒级的延迟数值做到更精确的控制。
    • +
    • latencyHint: 这个参数表示了重放的类型,参数是播放效果和资源消耗的一种权衡。可接受的值有 "balanced", "interactive" 和"playback",默认值为 "interactive"。意思是 "平衡音频输出延迟和资源消耗", "提供最小的音频输出延迟最好没有干扰"和 "对比音频输出延迟,优先重放不被中断"。我们也可以用一个双精度的值来定义一个秒级的延迟数值做到更精确的控制。
    diff --git a/files/zh-cn/web/api/audiocontext/close/index.html b/files/zh-cn/web/api/audiocontext/close/index.html index 29dd2be878eab0..e2e7fca278c625 100644 --- a/files/zh-cn/web/api/audiocontext/close/index.html +++ b/files/zh-cn/web/api/audiocontext/close/index.html @@ -19,18 +19,18 @@

    语法

    返回值

    -

    一个 resolve  void 值得 {{jsxref("Promise")}}。 

    +

    一个 resolve void 值得 {{jsxref("Promise")}}。

    例子

    下面这段代码是AudioContext states demo (直接运行) 中的,点击停止按钮调用close()。promise 释放后,回到初始状态。

    stopBtn.onclick = function() {
    -  audioCtx.close().then(function() {
    -    startBtn.removeAttribute('disabled');
    -    susresBtn.setAttribute('disabled','disabled');
    -    stopBtn.setAttribute('disabled','disabled');
    -  });
    +  audioCtx.close().then(function() {
    +    startBtn.removeAttribute('disabled');
    +    susresBtn.setAttribute('disabled','disabled');
    +    stopBtn.setAttribute('disabled','disabled');
    +  });
     }
     
    diff --git a/files/zh-cn/web/api/audiocontext/createmediaelementsource/index.html b/files/zh-cn/web/api/audiocontext/createmediaelementsource/index.html index c474ffc1763bf0..9832c26c84d501 100644 --- a/files/zh-cn/web/api/audiocontext/createmediaelementsource/index.html +++ b/files/zh-cn/web/api/audiocontext/createmediaelementsource/index.html @@ -6,10 +6,10 @@

    {{ APIRef("Web Audio API") }}

    -

    {{ domxref("AudioContext") }} 接口的 createMediaElementSource() 方法用于创建一个新的 {{ domxref("MediaElementAudioSourceNode") }} 对象,输入某个存在的 HTML {{htmlelement("audio")}} or {{htmlelement("video")}} 元素,对应的音频即可被播放或者修改。

    +

    {{ domxref("AudioContext") }} 接口的 createMediaElementSource() 方法用于创建一个新的 {{ domxref("MediaElementAudioSourceNode") }} 对象,输入某个存在的 HTML {{htmlelement("audio")}} or {{htmlelement("video")}} 元素,对应的音频即可被播放或者修改。

    -

    为寻求更多关于媒体元素音频源节点的具体信息,请查阅 {{ domxref("MediaElementAudioSourceNode") }} 参考页。

    +

    为寻求更多关于媒体元素音频源节点的具体信息,请查阅 {{ domxref("MediaElementAudioSourceNode") }} 参考页。

    语法

    @@ -29,10 +29,10 @@

    返回值

    示例

    -

    该示例由 {{htmlelement("audio") }} 元素,通过使用 createMediaElementSource() 方法,创建了一个音源,将其通过 {{ domxref("GainNode") }} 节点,输出到{{ domxref("AudioDestinationNode") }} 节点以播放。当鼠标指针移动时,updatePage() 函数被调用,该函数计算当前鼠标 Y 坐标与页面高度的比值, 改变 {{ domxref("GainNode") }} 节点的值以调整音量。您就可以通过鼠标上下移动而改变音乐的音量了。

    +

    该示例由 {{htmlelement("audio") }} 元素,通过使用 createMediaElementSource() 方法,创建了一个音源,将其通过 {{ domxref("GainNode") }} 节点,输出到{{ domxref("AudioDestinationNode") }} 节点以播放。当鼠标指针移动时,updatePage() 函数被调用,该函数计算当前鼠标 Y 坐标与页面高度的比值, 改变 {{ domxref("GainNode") }} 节点的值以调整音量。您就可以通过鼠标上下移动而改变音乐的音量了。

    -

    Note: 您也可以 浏览该示例的在线演示, 或者 浏览源代码.

    +

    Note: 您也可以 浏览该示例的在线演示, 或者 浏览源代码.

    var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
    diff --git a/files/zh-cn/web/api/audiocontext/createmediastreamdestination/index.html b/files/zh-cn/web/api/audiocontext/createmediastreamdestination/index.html
    index f5068c9b7c0b79..7ca0f84adda4b5 100644
    --- a/files/zh-cn/web/api/audiocontext/createmediastreamdestination/index.html
    +++ b/files/zh-cn/web/api/audiocontext/createmediastreamdestination/index.html
    @@ -6,7 +6,7 @@
     

    {{ APIRef("Web Audio API") }}

    -

    {{ domxref("AudioContext") }}接口的 createMediaStreamDestination() 方法用于创建一个新的对象,该对象关联着表示音频流的一个 WebRTC {{domxref("MediaStream")}},音频流可以存储在本地文件或者被发送到另外一台计算机。

    +

    {{ domxref("AudioContext") }}接口的 createMediaStreamDestination() 方法用于创建一个新的对象,该对象关联着表示音频流的一个 WebRTC {{domxref("MediaStream")}},音频流可以存储在本地文件或者被发送到另外一台计算机。

    The {{domxref("MediaStream")}} is created when the node is created and is accessible via the {{domxref("MediaStreamAudioDestinationNode")}}'s stream attribute. This stream can be used in a similar way as a MediaStream obtained via {{domxref("navigator.getUserMedia") }} — it can, for example, be sent to a remote peer using the RTCPeerConnection addStream() method.

    @@ -26,7 +26,7 @@

    Example

    In the following simple example, we create a {{domxref("MediaStreamAudioDestinationNode")}}, an {{ domxref("OscillatorNode") }} and a {{ domxref("MediaRecorder") }} (the example will therefore only work in Firefox at this time.) The MediaRecorder is set up to record information from the MediaStreamDestinationNode.

    -

    When the button is clicked, the oscillator starts, and the MediaRecorder is started. When the button is stopped, the oscillator and MediaRecorder both stop. Stopping the MediaRecorder causes the dataavailable event to fire, and the event data is pushed into the chunks array. After that, the stop event fires, a new blob is made of type opus — which contains the data in the chunks array, and a new window (tab) is then opened that points to a URL created from the blob.

    +

    When the button is clicked, the oscillator starts, and the MediaRecorder is started. When the button is stopped, the oscillator and MediaRecorder both stop. Stopping the MediaRecorder causes the dataavailable event to fire, and the event data is pushed into the chunks array. After that, the stop event fires, a new blob is made of type opus — which contains the data in the chunks array, and a new window (tab) is then opened that points to a URL created from the blob.

    From here, you can play and save the opus file.

    diff --git a/files/zh-cn/web/api/audiocontext/createmediastreamsource/index.html b/files/zh-cn/web/api/audiocontext/createmediastreamsource/index.html index 71c742588be9f9..870cedec939854 100644 --- a/files/zh-cn/web/api/audiocontext/createmediastreamsource/index.html +++ b/files/zh-cn/web/api/audiocontext/createmediastreamsource/index.html @@ -6,7 +6,7 @@

    {{ APIRef("Web Audio API") }}

    -

    {{ domxref("AudioContext") }}接口的 createMediaStreamSource() 方法用于创建一个新的 {{ domxref("MediaStreamAudioSourceNode") }} 对象,需要传入一个媒体流对象 (MediaStream 对象)(可以从 {{ domxref("navigator.getUserMedia") }} 获得 MediaStream 对象实例), 然后来自 MediaStream 的音频就可以被播放和操作。

    +

    {{ domxref("AudioContext") }}接口的 createMediaStreamSource() 方法用于创建一个新的 {{ domxref("MediaStreamAudioSourceNode") }} 对象,需要传入一个媒体流对象 (MediaStream 对象)(可以从 {{ domxref("navigator.getUserMedia") }} 获得 MediaStream 对象实例), 然后来自 MediaStream 的音频就可以被播放和操作。

    更多关于媒体流音频源 (media stream audio source nodes) 的细节,请参考{{ domxref("MediaStreamAudioSourceNode") }} 页面。

    @@ -25,16 +25,16 @@

    参数

    返回

    -

     {{domxref("MediaStreamAudioSourceNode")}}

    +

    {{domxref("MediaStreamAudioSourceNode")}}

    示例

    -

    本例中,我们从 {{ domxref("navigator.getUserMedia") }}获取媒体 (audio + video) 流,把它传入 {{ htmlelement("video") }}中播放,并把视频调成静音,然后把获取到的 audio 传入 {{ domxref("MediaStreamAudioSourceNode") }}。接下来我们把获取到的 audio 传入{{ domxref("BiquadFilterNode") }} (可以把声音转化为低音),输出到 {{domxref("AudioDestinationNode") }}.

    +

    本例中,我们从 {{ domxref("navigator.getUserMedia") }}获取媒体 (audio + video) 流,把它传入 {{ htmlelement("video") }}中播放,并把视频调成静音,然后把获取到的 audio 传入 {{ domxref("MediaStreamAudioSourceNode") }}。接下来我们把获取到的 audio 传入{{ domxref("BiquadFilterNode") }} (可以把声音转化为低音),输出到 {{domxref("AudioDestinationNode") }}.

    {{ htmlelement("video") }} 元素下面滑动杆控制低音过滤器过滤的程度,滑动杆的值越大,低音更明显

    -

    注意:你可以查看 在线演示,或者 查看源码

    +

    注意:你可以查看 在线演示,或者 查看源码

    var pre = document.querySelector('pre');
    diff --git a/files/zh-cn/web/api/audiocontext/index.html b/files/zh-cn/web/api/audiocontext/index.html
    index 55af16a6209e28..5e78b7cfb94a45 100644
    --- a/files/zh-cn/web/api/audiocontext/index.html
    +++ b/files/zh-cn/web/api/audiocontext/index.html
    @@ -19,7 +19,7 @@ 

    构造函数

    {{domxref("AudioContext.AudioContext", "AudioContext()")}}
    -
    创建并返回一个新的 AudioContext 对象。
    +
    创建并返回一个新的 AudioContext 对象。

    属性

    @@ -85,6 +85,6 @@

    浏览器兼容性

    相关链接

    diff --git a/files/zh-cn/web/api/audiocontext/resume/index.html b/files/zh-cn/web/api/audiocontext/resume/index.html index aa7bc27442a7ca..a303f73d4e3395 100644 --- a/files/zh-cn/web/api/audiocontext/resume/index.html +++ b/files/zh-cn/web/api/audiocontext/resume/index.html @@ -9,7 +9,7 @@ ---

    {{ APIRef("Web Audio API") }}

    -

    {{ domxref("AudioContext") }} 的 resume() 方法,恢复之前暂停播放的音频。

    +

    {{ domxref("AudioContext") }} 的 resume() 方法,恢复之前暂停播放的音频。

    如果在 {{domxref("OfflineAudioContext")}} 上调用,会导致 INVALID_STATE_ERR 错误。

    @@ -25,18 +25,18 @@

    结果

    示例

    -

    下面的代码是 AudioContext states demo (see it running live) 的一部分。当点击暂停/恢复按钮的时候,需要{{domxref("AudioContext.state")}}做判断:如果是运行状态,调用{{domxref("suspend()")}},如果是暂停状态,调用resume()。每次点击事件成功后,按钮的文字也会随着变成对应的状态

    +

    下面的代码是 AudioContext states demo (see it running live) 的一部分。当点击暂停/恢复按钮的时候,需要{{domxref("AudioContext.state")}}做判断:如果是运行状态,调用{{domxref("suspend()")}},如果是暂停状态,调用resume()。每次点击事件成功后,按钮的文字也会随着变成对应的状态

    susresBtn.onclick = function() {
    -  if(audioCtx.state === 'running') {
    -    audioCtx.suspend().then(function() {
    -      susresBtn.textContent = 'Resume context';
    -    });
    -  } else if(audioCtx.state === 'suspended') {
    -    audioCtx.resume().then(function() {
    -      susresBtn.textContent = 'Suspend context';
    -    });
    -  }
    +  if(audioCtx.state === 'running') {
    +    audioCtx.suspend().then(function() {
    +      susresBtn.textContent = 'Resume context';
    +    });
    +  } else if(audioCtx.state === 'suspended') {
    +    audioCtx.resume().then(function() {
    +      susresBtn.textContent = 'Suspend context';
    +    });
    +  }
     }
     
    diff --git a/files/zh-cn/web/api/audiocontext/suspend/index.html b/files/zh-cn/web/api/audiocontext/suspend/index.html index 2b9fb35139e1e7..ee1d45b75f3164 100644 --- a/files/zh-cn/web/api/audiocontext/suspend/index.html +++ b/files/zh-cn/web/api/audiocontext/suspend/index.html @@ -5,9 +5,9 @@ ---

    {{ APIRef("Web Audio API") }}

    -

    {{ domxref("AudioContext") }} 接口的suspend() 方法暂停音频上下文对象中的进度,并暂时剥离进程对音频设备硬件的访问权限,减少 CPU 和电池的使用。 当程序在一段时间内不会使用音频上下文对象时,这个方法对减少硬件资源占用是非常有用的。

    +

    {{ domxref("AudioContext") }} 接口的suspend() 方法暂停音频上下文对象中的进度,并暂时剥离进程对音频设备硬件的访问权限,减少 CPU 和电池的使用。 当程序在一段时间内不会使用音频上下文对象时,这个方法对减少硬件资源占用是非常有用的。

    -

    若对{{domxref("OfflineAudioContext")}} 调用此方法,将会抛出 INVALID_STATE_ERR 错误。

    +

    若对{{domxref("OfflineAudioContext")}} 调用此方法,将会抛出 INVALID_STATE_ERR 错误。

    Syntax

    @@ -24,15 +24,15 @@

    Example

    The following snippet is taken from our AudioContext states demo (see it running live.) When the suspend/resume button is clicked, the {{domxref("AudioContext.state")}} is queried — if it is running, suspend() is called; if it is suspended, {{domxref("resume")}} is called. In each case, the text label of the button is updated as appropriate once the promise resolves.

    susresBtn.onclick = function() {
    -  if(audioCtx.state === 'running') {
    -    audioCtx.suspend().then(function() {
    -      susresBtn.textContent = 'Resume context';
    -    });
    -  } else if(audioCtx.state === 'suspended') {
    -    audioCtx.resume().then(function() {
    -      susresBtn.textContent = 'Suspend context';
    -    });
    -  }
    +  if(audioCtx.state === 'running') {
    +    audioCtx.suspend().then(function() {
    +      susresBtn.textContent = 'Resume context';
    +    });
    +  } else if(audioCtx.state === 'suspended') {
    +    audioCtx.resume().then(function() {
    +      susresBtn.textContent = 'Suspend context';
    +    });
    +  }
     }
     
    diff --git a/files/zh-cn/web/api/audiodestinationnode/index.html b/files/zh-cn/web/api/audiodestinationnode/index.html index 4217118016f57d..8fe530538d045c 100644 --- a/files/zh-cn/web/api/audiodestinationnode/index.html +++ b/files/zh-cn/web/api/audiodestinationnode/index.html @@ -6,7 +6,7 @@

    {{APIRef("Web Audio API")}}

    -

    AudioDestinationNode接口表示音频图形在特定情况下的最终输出地址 - 通常为扬声器。当使用OfflineAudioContext时为音频记录节点。

    +

    AudioDestinationNode接口表示音频图形在特定情况下的最终输出地址 - 通常为扬声器。当使用OfflineAudioContext时为音频记录节点。

    AudioDestinationNode 没有输出(因为它就是输出,它存在于视频图标中后 AudioNode 不能被链接),有一个输入。输入信道的数量必须是 0 至 maxChannelCount 之间的值或是一个异常。

    @@ -53,14 +53,14 @@

    方法

    例子

    -

     AudioDestinationNode 不需要使用复杂的设置 — 在默认情况下只是简单的代表使用者系统的输出 (例如他们的扬声器),这样你就可以使用几行代码来与内置音频图标挂钩:

    +

    AudioDestinationNode 不需要使用复杂的设置 — 在默认情况下只是简单的代表使用者系统的输出 (例如他们的扬声器),这样你就可以使用几行代码来与内置音频图标挂钩:

    var audioCtx = new AudioContext();
     var source = audioCtx.createMediaElementSource(myMediaElement);
     source.connect(gainNode);
     gainNode.connect(audioCtx.destination);
    -

    更多的例子,请查看 MDN Web Audio 示例,例如Voice-change-o-matic 或者 Violent Theremin.

    +

    更多的例子,请查看 MDN Web Audio 示例,例如Voice-change-o-matic 或者 Violent Theremin.

    标准

    diff --git a/files/zh-cn/web/api/audiodestinationnode/maxchannelcount/index.html b/files/zh-cn/web/api/audiodestinationnode/maxchannelcount/index.html index e05cc6b9fad618..74f79d6b50d1fd 100644 --- a/files/zh-cn/web/api/audiodestinationnode/maxchannelcount/index.html +++ b/files/zh-cn/web/api/audiodestinationnode/maxchannelcount/index.html @@ -8,7 +8,7 @@

    {{ domxref("AudioDestinationNode") }} 接口的 maxchannelCount 属性是一个表示物理设备能处理最大通道数的无符号长整型数。

    -

     {{domxref("AudioNode.channelCount")}} 属性值只能在 0 和这个值 (两端包含) 之间。如果 maxChannelCount0,例如在 {{domxref("OfflineAudioContext")}}, 表示音频通道不能被改变。

    +

    {{domxref("AudioNode.channelCount")}} 属性值只能在 0 和这个值 (两端包含) 之间。如果 maxChannelCount0,例如在 {{domxref("OfflineAudioContext")}}, 表示音频通道不能被改变。

    语法

    diff --git a/files/zh-cn/web/api/audiolistener/index.html b/files/zh-cn/web/api/audiolistener/index.html index 57d8aa07b1b84a..8bb85eb28e676f 100644 --- a/files/zh-cn/web/api/audiolistener/index.html +++ b/files/zh-cn/web/api/audiolistener/index.html @@ -5,7 +5,7 @@ ---

    {{ APIRef("Web Audio API") }}

    -

    AudioListener 接口代表了人听音乐场景时声音的位置和方向,和用于音频空间化。 所有{{domxref("PannerNode")}} 相对于 AudioListener 的空间化储存在{{domxref("BaseAudioContext.listener")}} 属性里。

    +

    AudioListener 接口代表了人听音乐场景时声音的位置和方向,和用于音频空间化。 所有{{domxref("PannerNode")}} 相对于 AudioListener 的空间化储存在{{domxref("BaseAudioContext.listener")}} 属性里。

    特别需要注意的是一个环境中只能有一个收听者而且这不是{{domxref("AudioNode")}}.

    @@ -14,28 +14,28 @@

    Properties

    -

    position,forward 和 up 值是以不同的语法设置和检索的。检索是通过访问来实现的,比如说 AudioListener.positionX ,设置相同属性时可以通过使用 AudioListener.positionX.value 来完成。 这就是为什么他们不被标记为只读, 这在规范的接口定义中就是这么说的。

    +

    position,forward 和 up 值是以不同的语法设置和检索的。检索是通过访问来实现的,比如说 AudioListener.positionX ,设置相同属性时可以通过使用 AudioListener.positionX.value 来完成。 这就是为什么他们不被标记为只读, 这在规范的接口定义中就是这么说的。

    {{domxref("AudioListener.positionX")}}
    -
    在笛卡尔右手坐标系中代表一个收听者的水平坐标。默认值是 0.
    +
    在笛卡尔右手坐标系中代表一个收听者的水平坐标。默认值是 0.
    {{domxref("AudioListener.positionY")}}
    -
    Represents the vertical position of the listener in a right-hand cartesian coordinate sytem. The default is 0.
    +
    Represents the vertical position of the listener in a right-hand cartesian coordinate sytem. The default is 0.
    {{domxref("AudioListener.positionZ")}}
    -
    Represents the longitudinal (back and forth) position of the listener in a right-hand cartesian coordinate sytem. The default is 0.
    +
    Represents the longitudinal (back and forth) position of the listener in a right-hand cartesian coordinate sytem. The default is 0.
    {{domxref("AudioListener.forwardX")}}
    -
    在相同的笛卡尔坐标系中代表了收听者的面向的方向的水平坐标,就像 (positionX, positionY, 和 positionZ) 值一样。前方和上方值互相线性无关。默认值是 0.
    +
    在相同的笛卡尔坐标系中代表了收听者的面向的方向的水平坐标,就像 (positionX, positionY, 和 positionZ) 值一样。前方和上方值互相线性无关。默认值是 0.
    {{domxref("AudioListener.forwardY")}}
    -
    Represents the vertical position of the listener's forward direction in the same cartesian coordinate sytem as the position (positionX, positionY, and positionZ) values. The forward and up values are linearly independent of each other. The default is 0.
    +
    Represents the vertical position of the listener's forward direction in the same cartesian coordinate sytem as the position (positionX, positionY, and positionZ) values. The forward and up values are linearly independent of each other. The default is 0.
    {{domxref("AudioListener.forwardZ")}}
    -
    Represents the longitudinal (back and forth) position of the listener's forward direction in the same cartesian coordinate sytem as the position (positionX, positionY, and positionZ) values. The forward and up values are linearly independent of each other. The default is -1.
    +
    Represents the longitudinal (back and forth) position of the listener's forward direction in the same cartesian coordinate sytem as the position (positionX, positionY, and positionZ) values. The forward and up values are linearly independent of each other. The default is -1.
    {{domxref("AudioListener.upX")}}
    -
    代表了收听者头顶在笛卡尔坐标系的水平位置,就像 (positionX, positionY, 和positionZ) 值一样。 前方和上方值线性无关。默认值是 0.
    +
    代表了收听者头顶在笛卡尔坐标系的水平位置,就像 (positionX, positionY, 和positionZ) 值一样。 前方和上方值线性无关。默认值是 0.
    {{domxref("AudioListener.upY")}}
    -
    Represents the vertical position of the top of the listener's head in the same cartesian coordinate sytem as the position (positionX, positionY, and positionZ) values. The forward and up values are linearly independent of each other. The default is 1.
    +
    Represents the vertical position of the top of the listener's head in the same cartesian coordinate sytem as the position (positionX, positionY, and positionZ) values. The forward and up values are linearly independent of each other. The default is 1.
    {{domxref("AudioListener.upZ")}}
    -
    Represents the longitudinal (back and forth) position of the top of the listener's head in the same cartesian coordinate sytem as the position (positionX, positionY, and positionZ) values. The forward and up values are linearly independent of each other. The default is 0.
    +
    Represents the longitudinal (back and forth) position of the top of the listener's head in the same cartesian coordinate sytem as the position (positionX, positionY, and positionZ) values. The forward and up values are linearly independent of each other. The default is 0.

    Methods

    @@ -55,7 +55,7 @@

    Deprecated features

    {{domxref("AudioListener.dopplerFactor")}} {{Deprecated_Inline}}
    -
    一个 Double 值,表示在呈现 多普勒效应 时要使用的音高偏移量。
    +
    一个 Double 值,表示在呈现 多普勒效应 时要使用的音高偏移量。
    {{domxref("AudioListener.speedOfSound")}} {{Deprecated_Inline}}
    一个 Double 值代表了声音的速度,以米每秒的单位计算。
    @@ -70,7 +70,7 @@

    Deprecated features

    Because of these issues, these properties and methods have been removed.

    -

    The setOrientation() and setPosition() methods have been replaced by setting their property value equivilents. For example setPosition(x, y, z) can be achieved by setting positionX.value, positionY.value, and positionZ.value respectively.

    +

    The setOrientation() and setPosition() methods have been replaced by setting their property value equivilents. For example setPosition(x, y, z) can be achieved by setting positionX.value, positionY.value, and positionZ.value respectively.

    diff --git a/files/zh-cn/web/api/audionode/connect/index.html b/files/zh-cn/web/api/audionode/connect/index.html index db0f5e25e2b88d..0841748b29077a 100644 --- a/files/zh-cn/web/api/audionode/connect/index.html +++ b/files/zh-cn/web/api/audionode/connect/index.html @@ -6,7 +6,7 @@

    {{ APIRef("Web Audio API") }}

    -

    {{ domxref("AudioNode") }} 接口的 connect() 方法使你能将一个节点的输出连接到一个指定目标,这个指定的目标可能是另一个 AudioNode(从而将音频数据引导到下一个指定节点)或一个{{domxref("AudioParam")}}, 以便上一个节点的输出数据随着时间流逝能自动地对下一个参数值进行改变。

    +

    {{ domxref("AudioNode") }} 接口的 connect() 方法使你能将一个节点的输出连接到一个指定目标,这个指定的目标可能是另一个 AudioNode(从而将音频数据引导到下一个指定节点)或一个{{domxref("AudioParam")}}, 以便上一个节点的输出数据随着时间流逝能自动地对下一个参数值进行改变。

    语法

    @@ -20,24 +20,24 @@

    属性

    destination
    -
    需要连接的 {{domxref("AudioNode")}} 或 {{domxref("AudioParam")}}.
    +
    需要连接的 {{domxref("AudioNode")}} 或 {{domxref("AudioParam")}}.
    outputIndex {{optional_inline}}
    -
    一个索引,用于描述当前  AudioNode 的哪个输出会连接到 destination。索引数字是由输出频道(详见 Audio channels)的数量来确定的。当你只能将给定的输出连接到给定的输入一次(重复的尝试会被忽略)时,可以通过多次调用 connect() 将一个输出连接到多个输入。可以通过这样来实现扇出。这个参数的默认值为 0。
    +
    一个索引,用于描述当前 AudioNode 的哪个输出会连接到 destination。索引数字是由输出频道(详见 Audio channels)的数量来确定的。当你只能将给定的输出连接到给定的输入一次(重复的尝试会被忽略)时,可以通过多次调用 connect() 将一个输出连接到多个输入。可以通过这样来实现扇出。这个参数的默认值为 0。
    inputIndex {{optional_inline}}
    -
    一个索引,用于描述当前  AudioNode 会连接到 destination 的哪个输入,它的默认值是 0。索引数字是由输入频道(详见 Audio channels)的数量来确定的。将一个  AudioNode 连接回之前的 AudioNode,以此形成一个圈是可行的。 不过只在这个圈里有至少一个 {{domxref("DelayNode")}} 才可行。否则会抛出一个 NotSupportedError 异常。此参数在 destination 是 {{domxref("AudioParam")}}时不可用。
    +
    一个索引,用于描述当前 AudioNode 会连接到 destination 的哪个输入,它的默认值是 0。索引数字是由输入频道(详见 Audio channels)的数量来确定的。将一个 AudioNode 连接回之前的 AudioNode,以此形成一个圈是可行的。 不过只在这个圈里有至少一个 {{domxref("DelayNode")}} 才可行。否则会抛出一个 NotSupportedError 异常。此参数在 destination 是 {{domxref("AudioParam")}}时不可用。

    返回值

    -

    如果 destination 是一个节点, connect() 返回 destination 所表示的  {{domxref("AudioNode")}} 对象的引用,允许你链式地调用数个 connect() 。某些浏览器关于该接口的旧实现会返回 {{jsxref("undefined")}}。

    +

    如果 destination 是一个节点, connect() 返回 destination 所表示的 {{domxref("AudioNode")}} 对象的引用,允许你链式地调用数个 connect() 。某些浏览器关于该接口的旧实现会返回 {{jsxref("undefined")}}。

    -

    如果 destination 是一个 AudioParamconnect() 返回 undefined

    +

    如果 destination 是一个 AudioParamconnect() 返回 undefined

    异常

    IndexSizeError
    -
    这个异常表明 outputIndex 或 inputIndex 与当前输入或输出不符。
    +
    这个异常表明 outputIndexinputIndex 与当前输入或输出不符。
    InvalidAccessError
    目标节点与原节点不在同一个音频上下文。
    NotSupportedError
    diff --git a/files/zh-cn/web/api/audionode/index.html b/files/zh-cn/web/api/audionode/index.html index ce328fd9bf5985..864676918021ba 100644 --- a/files/zh-cn/web/api/audionode/index.html +++ b/files/zh-cn/web/api/audionode/index.html @@ -5,15 +5,15 @@ ---
    {{ APIRef("Web Audio API") }} {{SeeCompatTable}}
    -

    AudioNodes participating in an AudioContext create a audio routing graph.AudioNode 接口是一个处理音频的通用模块,比如一个音频源 (e.g. 一个 HTML {{HTMLElement("audio")}} or {{HTMLElement("video")}} 元素), 一个音频地址或者一个中间处理模块 (e.g. 一个过滤器如 {{domxref("BiquadFilterNode")}}, 或一个音量控制器如 {{domxref("GainNode")}}).

    +

    AudioNodes participating in an AudioContext create a audio routing graph.AudioNode 接口是一个处理音频的通用模块,比如一个音频源 (e.g. 一个 HTML {{HTMLElement("audio")}} or {{HTMLElement("video")}} 元素), 一个音频地址或者一个中间处理模块 (e.g. 一个过滤器如 {{domxref("BiquadFilterNode")}}, 或一个音量控制器如 {{domxref("GainNode")}}).

    -

    一个 AudioNode 既有输入也有输出。输入与输出都有一定数量的通道。只有一个输出而没有输入的 AudioNode 叫做音频源。

    +

    一个 AudioNode 既有输入也有输出。输入与输出都有一定数量的通道。只有一个输出而没有输入的 AudioNode 叫做音频源。

    -

    处理多个 AudioNode 时,一般来说,一个模块读取它的输入,做一些处理。后输出新生成的结果。

    +

    处理多个 AudioNode 时,一般来说,一个模块读取它的输入,做一些处理。后输出新生成的结果。

    -

    不同的模块可以连接在一起构建一个处理图。 这样一个处理图包含 {{domxref("AudioContext")}}。 每个 AudioNode 只有一个这样的上下文。

    +

    不同的模块可以连接在一起构建一个处理图。 这样一个处理图包含 {{domxref("AudioContext")}}。 每个 AudioNode 只有一个这样的上下文。

    -

    一个 AudioNode 可以作为事件的目标,所以它实现了 {{domxref("EventTarget")}} 接口。

    +

    一个 AudioNode 可以作为事件的目标,所以它实现了 {{domxref("EventTarget")}} 接口。

    属性

    @@ -83,19 +83,19 @@

    属性

    Quad - 0: L:  left
    - 1: R:  right
    + 0: L: left
    + 1: R: right
    2: SL: surround left
    3: SR: surround right
    5.1 - 0: L:   left
    - 1: R:   right
    - 2: C:   center
    + 0: L: left
    + 1: R: right
    + 2: C: center
    3: LFE: subwoofer
    - 4: SL:  surround left
    - 5: SR:  surround right
    + 4: SL: surround left
    + 5: SR: surround right
    @@ -125,8 +125,8 @@

    属性

    4 (Quad) Up-mix from mono to quad.
    The M input channel is used for non-surround output channels (L and R). Surround output channels (SL and SR) are silent.
    - output.L  = input.M
    - output.R  = input.M
    + output.L = input.M
    + output.R = input.M
    output.SL = 0
    output.SR = 0
    @@ -135,12 +135,12 @@

    属性

    6 (5.1) Up-mix from mono to 5.1.
    The M input channel is used for the center output channel (C). All the others (L, R, LFE, SL, and SR) are silent.
    - output.L   = 0
    - output.R   = 0

    - output.C   = input.M
    + output.L = 0
    + output.R = 0

    + output.C = input.M
    output.LFE = 0
    - output.SL  = 0
    - output.SR  = 0
    + output.SL = 0
    + output.SR = 0
    2 (Stereo) @@ -154,8 +154,8 @@

    属性

    4 (Quad) Up-mix from stereo to quad.
    The L and R input channels are used for their non-surround respective output channels (L and R). Surround output channels (SL and SR) are silent.
    - output.L  = input.L
    - output.R  = input.R
    + output.L = input.L
    + output.R = input.R
    output.SL = 0
    output.SR = 0
    @@ -164,12 +164,12 @@

    属性

    6 (5.1) Up-mix from stereo to 5.1.
    The L and R input channels are used for their non-surround respective output channels (L and R). Surround output channels (SL and SR), as well as the center (C) and subwoofer (LFE) channels, are left silent.
    - output.L   = input.L
    - output.R   = input.R
    - output.C   = 0
    + output.L = input.L
    + output.R = input.R
    + output.C = 0
    output.LFE = 0
    - output.SL  = 0
    - output.SR  = 0
    + output.SL = 0
    + output.SR = 0
    4 (Quad) @@ -191,12 +191,12 @@

    属性

    6 (5.1) Up-mix from quad to 5.1.
    The L, R, SL, and SR input channels are used for their respective output channels (L and R). Center (C) and subwoofer (LFE) channels are left silent.
    - output.L   = input.L
    - output.R   = input.R
    - output.C   = 0
    + output.L = input.L
    + output.R = input.R
    + output.C = 0
    output.LFE = 0
    - output.SL  = input.SL
    - output.SR  = input.SR
    + output.SL = input.SL
    + output.SR = input.SR
    6 (5.1) @@ -210,18 +210,18 @@

    属性

    2 (Stereo) Down-mix from 5.1 to stereo.
    The central (C) is summed with each lateral surround channels (SL or SR) and mixed to each lateral channel. As it is mixed in two channels, it is mixed at lower power, that is they are multiplied by √2/2. The subwoofer (LFE) channel is lost.
    - output.L   = input.L + 0.7071 * (input.C + input.SL)
    - output.R   = input.R
    + 0.7071 * (input.C + input.SR) + output.L = input.L + 0.7071 * (input.C + input.SL)
    + output.R = input.R
    + 0.7071 * (input.C + input.SR) 6 (5.1) 4 (Quad) Down-mix from 5.1 to quad.
    The central (C) is mixed with the lateral non-surround channels (L and R). As it is mixed in two channels, it is mixed at lower power, that is they are multiplied by √2/2. The surround channels are passed unchanged. The subwoofer (LFE) channel is lost.
    - output.L   = input.L + 0.7071 * input.C
    - output.R   = input.R
    - output.SL  = input.SL
    - output.SR  = input.SR
    + output.L = input.L + 0.7071 * input.C
    + output.R = input.R
    + output.SL = input.SL
    + output.SR = input.SR
    Other diff --git a/files/zh-cn/web/api/audioparam/index.html b/files/zh-cn/web/api/audioparam/index.html index f05d561a80cf16..d27b91b4a39e73 100644 --- a/files/zh-cn/web/api/audioparam/index.html +++ b/files/zh-cn/web/api/audioparam/index.html @@ -6,33 +6,33 @@

    {{APIRef("Web Audio API")}}

    -

    AudioParam 接口代表音频相关的参数, 通常是一个 {{domxref("AudioNode")}} (例如 {{ domxref("GainNode.gain") }}) 的参数。一个 AudioParam 可以被设置为一个具体的值或者数值的改变 ,可以被安排在在一个具体的时刻并且遵循一个特定的模式发生。

    +

    AudioParam 接口代表音频相关的参数, 通常是一个 {{domxref("AudioNode")}} (例如 {{ domxref("GainNode.gain") }}) 的参数。一个 AudioParam 可以被设置为一个具体的值或者数值的改变 ,可以被安排在在一个具体的时刻并且遵循一个特定的模式发生。

    -

    下面有两种类型的 AudioParam, a-rate 和 k-rate 参数:

    +

    下面有两种类型的 AudioParam, a-ratek-rate 参数:

      -
    • 一个 a-rate AudioParam 获取音频信号的每个采样帧的当前音频参数值。
    • -
    • 一个 k-rate AudioParam 对于待处理的整个块使用相同的初始音频参数值,即 128 个采样帧。
    • +
    • 一个 a-rate AudioParam 获取音频信号的每个采样帧的当前音频参数值。
    • +
    • 一个 k-rate AudioParam 对于待处理的整个块使用相同的初始音频参数值,即 128 个采样帧。
    -

    每个 {{domxref("AudioNode")}} 定义了其规格中哪一个参数是 a-rate 或 k-rate

    +

    每个 {{domxref("AudioNode")}} 定义了其规格中哪一个参数是 a-ratek-rate

    -

    每个 AudioParam 有一个事件的列表,初始化时列表为空。该列表定义了什么时候数值怎么改变。当这个列表不是空的时候,使用 AudioParam.value 属性的改变会被忽略 。事件的列表允许我们去有计划地进行必须在非常精确的时间发生的更改,使用任意的基于时间轴的自动化曲线。被使用的时间在{{domxref("AudioContext.currentTime")}} 中被定义。

    +

    每个 AudioParam 有一个事件的列表,初始化时列表为空。该列表定义了什么时候数值怎么改变。当这个列表不是空的时候,使用 AudioParam.value 属性的改变会被忽略 。事件的列表允许我们去有计划地进行必须在非常精确的时间发生的更改,使用任意的基于时间轴的自动化曲线。被使用的时间在{{domxref("AudioContext.currentTime")}} 中被定义。

    属性

    -

    AudioParam 继承的属性来自于它的父类, AudioNode。

    +

    AudioParam 继承的属性来自于它的父类, AudioNode。

    {{domxref("AudioParam.defaultValue")}} {{readonlyInline}}
    -
    代表被具体的{{domxref("AudioNode")}} 创建的 AudioParam 的属性的初始的音量。
    -
    {{domxref("AudioParam.maxValue")}} {{readonlyInline}}
    +
    代表被具体的{{domxref("AudioNode")}} 创建的 AudioParam 的属性的初始的音量。
    +
    {{domxref("AudioParam.maxValue")}} {{readonlyInline}}
    代表参数有效范围的最大可能值。
    {{domxref("AudioParam.minValue")}} {{readonlyinline}}
    代表参数有效范围的最小可能值。
    {{domxref("AudioParam.value")}}
    -
    代表参数的浮点数音量值;初始化设定为 AudioParam.defaultValue 的值。虽然它可以被设置,但是任何发生在自动化事件(事件被计划用于 AudioParam )的修改会被忽略,没有任何例外。
    +
    代表参数的浮点数音量值;初始化设定为 AudioParam.defaultValue 的值。虽然它可以被设置,但是任何发生在自动化事件(事件被计划用于 AudioParam )的修改会被忽略,没有任何例外。

    方法

    @@ -41,24 +41,24 @@

    方法

    {{domxref("AudioParam.setValueAtTime()")}}
    -
    在一个确切的时间,即时更改 AudioParam 的值,按照{{domxref("AudioContext.currentTime")}} 的时间。新的值会被传递到 value 参数。
    +
    在一个确切的时间,即时更改 AudioParam 的值,按照{{domxref("AudioContext.currentTime")}} 的时间。新的值会被传递到 value 参数。
    {{domxref("AudioParam.linearRampToValueAtTime()")}}
    -
    调整 AudioParam 的值,使其逐渐按线性变化。这个改变会从上一个事件指定的事件开始,跟随一个线性“斜坡”到参数给的新值,并在 endTime 参数给定的时间到达新值。
    +
    调整 AudioParam 的值,使其逐渐按线性变化。这个改变会从上一个事件指定的事件开始,跟随一个线性“斜坡”到参数给的新值,并在 endTime 参数给定的时间到达新值。
    {{domxref("AudioParam.exponentialRampToValueAtTime()")}}
    -
    调整 AudioParam 的值,使其逐渐按指数变化。这个改变会从上一个事件指定的事件开始,跟随一个指数“斜坡”到参数给的新值,并在 endTime 参数给定的时间到达新值。
    +
    调整 AudioParam 的值,使其逐渐按指数变化。这个改变会从上一个事件指定的事件开始,跟随一个指数“斜坡”到参数给的新值,并在 endTime 参数给定的时间到达新值。
    {{domxref("AudioParam.setTargetAtTime()")}}
    -
    将开始计划改变 AudioParam 的值。这个改变将从 startTime 指定的时间开始,并且以指定的方式向目标参数给定的值改变。指数衰减速率由 timeConstant 参数定义,time 参数使以秒作为测量单位的时间。
    +
    将开始计划改变 AudioParam 的值。这个改变将从 startTime 指定的时间开始,并且以指定的方式向目标参数给定的值改变。指数衰减速率由 timeConstant 参数定义,time 参数使以秒作为测量单位的时间。
    {{domxref("AudioParam.setValueCurveAtTime()")}}
    -
    调整 AudioParam 的值以跟随一组定义为 {{domxref("Float32Array")}} 的值,数值会缩放到适应给定的间隔,从 startTime 时间开始并具有特定的持续时间(duration)。
    +
    调整 AudioParam 的值以跟随一组定义为 {{domxref("Float32Array")}} 的值,数值会缩放到适应给定的间隔,从 startTime 时间开始并具有特定的持续时间(duration)。
    {{domxref("AudioParam.cancelScheduledValues()")}}
    取消全部在 AudioParam 中的未来计划发生的改变。
    {{domxref("AudioParam.cancelAndHoldAtTime()")}}
    -
    取消全部计划将来对 AudioParam 的改变,但是保持给定时间的值,直到将来的使用其他方法产生改变。新的值会被赋予到 value 属性中。
    +
    取消全部计划将来对 AudioParam 的改变,但是保持给定时间的值,直到将来的使用其他方法产生改变。新的值会被赋予到 value 属性中。

    例子

    -

    首先,一个基础的例子展示了 {{domxref("GainNode")}} 拥有的 gain 一些值合。gain 是一个 a-rate AudioParam 的例子,因为该值可以针对音频的每个样本帧进行不同的设置。

    +

    首先,一个基础的例子展示了 {{domxref("GainNode")}} 拥有的 gain 一些值合。gain 是一个 a-rate AudioParam 的例子,因为该值可以针对音频的每个样本帧进行不同的设置。

    var AudioContext = window.AudioContext || window.webkitAudioContext;
     var audioCtx = new AudioContext();
    diff --git a/files/zh-cn/web/api/audioscheduledsourcenode/index.html b/files/zh-cn/web/api/audioscheduledsourcenode/index.html
    index 592bdd468d051e..73fc84ec446d62 100644
    --- a/files/zh-cn/web/api/audioscheduledsourcenode/index.html
    +++ b/files/zh-cn/web/api/audioscheduledsourcenode/index.html
    @@ -16,7 +16,7 @@
     ---
     
    {{APIRef("Web Audio API")}}
    -

    AudioScheduledSourceNode 接口作为 web 音频 API 的一部分,是几种具有在特定时刻开始与停止能力的音频源节点接口的父接口。更具体地来说,这个接口定义了{{domxref("AudioScheduledSourceNode.start", "start()")}} 和{{domxref("AudioScheduledSourceNode.stop", "stop()")}} 方法,以及{{domxref("AudioScheduledSourceNode.onended", "onended")}}事件

    +

    AudioScheduledSourceNode 接口作为 web 音频 API 的一部分,是几种具有在特定时刻开始与停止能力的音频源节点接口的父接口。更具体地来说,这个接口定义了{{domxref("AudioScheduledSourceNode.start", "start()")}} 和{{domxref("AudioScheduledSourceNode.stop", "stop()")}} 方法,以及{{domxref("AudioScheduledSourceNode.onended", "onended")}}事件

    diff --git a/files/zh-cn/web/api/audioscheduledsourcenode/stop/index.html b/files/zh-cn/web/api/audioscheduledsourcenode/stop/index.html index 0acd90a48afbf2..4f937122d3c09d 100644 --- a/files/zh-cn/web/api/audioscheduledsourcenode/stop/index.html +++ b/files/zh-cn/web/api/audioscheduledsourcenode/stop/index.html @@ -5,12 +5,12 @@ ---

    {{ APIRef("Web Audio API") }}

    -

     {{domxref("AudioScheduledSourceNode")}} 上的stop()方法将声音安排在指定的时间停止播放。如果没有指定时间,声音将立即停止播放。

    +

    {{domxref("AudioScheduledSourceNode")}} 上的stop()方法将声音安排在指定的时间停止播放。如果没有指定时间,声音将立即停止播放。

    -

    每次在同一个节点上调用 stop() 时,指定的时间将替换任何未发生的计划停止时间。如果节点已经停止,则此方法无效。 

    +

    每次在同一个节点上调用 stop() 时,指定的时间将替换任何未发生的计划停止时间。如果节点已经停止,则此方法无效。

    -

    注意: 如果计划的停止时间发生在节点计划的开始时间之前,则节点永远不会开始运行。

    +

    注意: 如果计划的停止时间发生在节点计划的开始时间之前,则节点永远不会开始运行。

    语法

    @@ -22,7 +22,7 @@

    参数

    when {{optional_inline}}
    -
    声音停止播放的时间,单位为秒。 这个值在 {{domxref("AudioContext")}} 用于其 {{domxref("AudioContext.currentTime", "currentTime")}} 属性的同一时间坐标系统中指定。 省略这个参数,设置为 0 或者负值都会立即停止播放。
    +
    声音停止播放的时间,单位为秒。 这个值在 {{domxref("AudioContext")}} 用于其 {{domxref("AudioContext.currentTime", "currentTime")}} 属性的同一时间坐标系统中指定。 省略这个参数,设置为 0 或者负值都会立即停止播放。

    Return value

    @@ -35,7 +35,7 @@

    Exceptions

    InvalidStateNode
    节点还没有通过调用{{domxref("AudioScheduledSourceNode.start", "start()")}}方法被播放。
    RangeError
    -
    当 when 指定为负值时。
    +
    when 指定为负值时。

    Example

    diff --git a/files/zh-cn/web/api/audioworkletnode/index.html b/files/zh-cn/web/api/audioworkletnode/index.html index 73e87af92230be..8a93a0d1b6a651 100644 --- a/files/zh-cn/web/api/audioworkletnode/index.html +++ b/files/zh-cn/web/api/audioworkletnode/index.html @@ -5,15 +5,15 @@ ---

    {{APIRef("Web Audio API")}} {{SeeCompatTable}}

    -
    虽然这个接口可以在 secure contexts 之外调用,但是 {{domxref("BaseAudioContext.audioWorklet")}} 属性不行,从而 {{domxref("AudioWorkletProcessor")}}s 不能在外部定义。
    +
    虽然这个接口可以在 secure contexts 之外调用,但是 {{domxref("BaseAudioContext.audioWorklet")}} 属性不行,从而 {{domxref("AudioWorkletProcessor")}}s 不能在外部定义。
    -

    Web Audio API 中的  AudioWorkletNode  接口代表了用户定义的{{domxref("AudioNode")}}的基类,该基类可以与其他节点一起连接到音频路由图。其具有关联的{{domxref("AudioWorkletProcessor")}}, 它在 Web Audio 执行实际的音频处理。

    +

    Web Audio API 中的 AudioWorkletNode 接口代表了用户定义的{{domxref("AudioNode")}}的基类,该基类可以与其他节点一起连接到音频路由图。其具有关联的{{domxref("AudioWorkletProcessor")}}, 它在 Web Audio 执行实际的音频处理。

    构造函数

    {{domxref("AudioWorkletNode.AudioWorkletNode", "AudioWorkletNode()")}}
    -
    为 AudioWorkletNode 创建一个新的实例对象。
    +
    AudioWorkletNode 创建一个新的实例对象。

    属性

    @@ -24,7 +24,7 @@

    属性

    {{domxref("AudioWorkletNode.port")}} {{readonlyinline}}
    返回一个 {{domxref("MessagePort")}} 用于节点与其关联的 {{domxref("AudioWorkletProcessor")}} 间的双向通讯。另一端在处理器属性{{domxref("AudioWorkletProcessor.port", "port")}} 下可用。
    {{domxref("AudioWorkletNode.parameters")}} {{readonlyinline}}
    -
    返回一个 {{domxref("AudioParamMap")}} —  {{domxref("AudioParam")}} 对象的集合。它们在创建 AudioWorkletProcessor的过程中被实例化. 如果 AudioWorkletProcessor 有一个静态的 {{domxref("AudioWorkletProcessor.parameterDescriptors", "parameterDescriptors")}} getter,从其返回的 {{domxref("AudioParamDescriptor")}} 数组用于在 AudioWorkletNode 创建 AudioParam 对象。通过这种机制,使得 AudioParam 对象可以从 AudioWorkletNode 中访问。你可以在与其关联的 AudioWorkletProcessor 中使用它的值。
    +
    返回一个 {{domxref("AudioParamMap")}} — {{domxref("AudioParam")}} 对象的集合。它们在创建 AudioWorkletProcessor的过程中被实例化. 如果 AudioWorkletProcessor 有一个静态的 {{domxref("AudioWorkletProcessor.parameterDescriptors", "parameterDescriptors")}} getter,从其返回的 {{domxref("AudioParamDescriptor")}} 数组用于在 AudioWorkletNode 创建 AudioParam 对象。通过这种机制,使得 AudioParam 对象可以从 AudioWorkletNode 中访问。你可以在与其关联的 AudioWorkletProcessor 中使用它的值。

    Event handlers

    @@ -42,7 +42,7 @@

    方法

    示例

    -

    在本示例中我们创建了 AudioWorkletNode 对象,它会输出白噪声。

    +

    在本示例中我们创建了 AudioWorkletNode 对象,它会输出白噪声。

    首先,我们需要定义一个自定义的 {{domxref("AudioWorkletProcessor")}}, 它将输出白噪声并进行注册。注意,这需要在一个单独的文件中完成。

    @@ -62,7 +62,7 @@

    示例

    registerProcessor('white-noise-processor', WhiteNoiseProcessor)
-

接下来,在脚本主文件中一个 AudioWorkletNode 实例,并传递处理器的名称,然后将该实例连接到一个 audio graph.

+

接下来,在脚本主文件中一个 AudioWorkletNode 实例,并传递处理器的名称,然后将该实例连接到一个 audio graph.

const audioContext = new AudioContext()
 await audioContext.audioWorklet.addModule('white-noise-processor.js')
diff --git a/files/zh-cn/web/api/authenticatorresponse/clientdatajson/index.html b/files/zh-cn/web/api/authenticatorresponse/clientdatajson/index.html
index e11edcbeb32dc6..7ca724dd439a2d 100644
--- a/files/zh-cn/web/api/authenticatorresponse/clientdatajson/index.html
+++ b/files/zh-cn/web/api/authenticatorresponse/clientdatajson/index.html
@@ -5,7 +5,7 @@
 ---
 

{{APIRef("Web Authentication API")}}{{securecontext_header}}

-

The clientDataJSON property of the {{domxref("AuthenticatorResponse")}} interface stores a JSON string in an {{domxref("ArrayBuffer")}}, representing the client data that was passed to {{domxref("CredentialsContainer.create()")}} or {{domxref("CredentialsContainer.get()")}}. This property is only accessed on one of the child objects of AuthenticatorResponse, specifically {{domxref("AuthenticatorAttestationResponse")}} or {{domxref("AuthenticatorAssertionResponse")}}.

+

The clientDataJSON property of the {{domxref("AuthenticatorResponse")}} interface stores a JSON string in an {{domxref("ArrayBuffer")}}, representing the client data that was passed to {{domxref("CredentialsContainer.create()")}} or {{domxref("CredentialsContainer.get()")}}. This property is only accessed on one of the child objects of AuthenticatorResponse, specifically {{domxref("AuthenticatorAttestationResponse")}} or {{domxref("AuthenticatorAssertionResponse")}}.

语法

@@ -19,7 +19,7 @@

Value

属性

-

After the clientDataJSON object is converted from an ArrayBuffer to a JavaScript object, it will have the following properties:

+

After the clientDataJSON object is converted from an ArrayBuffer to a JavaScript object, it will have the following properties:

type
diff --git a/files/zh-cn/web/api/background_tasks_api/index.html b/files/zh-cn/web/api/background_tasks_api/index.html index 64bb50d849156d..e15e4b067e2450 100644 --- a/files/zh-cn/web/api/background_tasks_api/index.html +++ b/files/zh-cn/web/api/background_tasks_api/index.html @@ -10,22 +10,22 @@ ---
{{DefaultAPISidebar("Background Tasks")}}
-

幕后任务协作调度 API (也叫幕后任务 API 或者简单称为 requestIdleCallback() API) 提供了由用户代理决定,在空闲时间自动执行队列任务的能力。

+

幕后任务协作调度 API (也叫幕后任务 API 或者简单称为 requestIdleCallback() API) 提供了由用户代理决定,在空闲时间自动执行队列任务的能力。

概念和用法

-

浏览器的主线程以其事件循环队列为中心。此代码渲染 {{domxref("Document")}} 上待更新展示的内容,执行页面待运行的 JavaScript 脚本,接收来自输入设备的事件,以及分发事件给需要接收事件的元素。此外,事件循环队列处理与操作系统的交互、浏览器自身用户界面的更新等等。这是一个非常繁忙的代码块,您的主要 JavaScript 代码可能会和这些代码一起也在这个线程中执行。当然,大多数(不是所有)能够更改 DOM 的代码都在主线程中运行,因为用户界面更改通常只对主线程可用。

+

浏览器的主线程以其事件循环队列为中心。此代码渲染 {{domxref("Document")}} 上待更新展示的内容,执行页面待运行的 JavaScript 脚本,接收来自输入设备的事件,以及分发事件给需要接收事件的元素。此外,事件循环队列处理与操作系统的交互、浏览器自身用户界面的更新等等。这是一个非常繁忙的代码块,您的主要 JavaScript 代码可能会和这些代码一起也在这个线程中执行。当然,大多数(不是所有)能够更改 DOM 的代码都在主线程中运行,因为用户界面更改通常只对主线程可用。

-

因为事件处理和屏幕更新是用户关注性能最明显的两种方式。对于您的代码来说,防止在事件队列中出现卡顿是很重要的。在过去,除了编写尽可能高效的代码和将尽可能多的工作移交给 workers 之外,没有其他可靠的方法可以做到这一点。 {{domxref("Window.requestIdleCallback()")}} 允许浏览器告诉您的代码可以安全使用多少时间而不会导致系统延迟,从而有助于确保浏览器的事件循环平稳运行。如果您保持在给定的范围内,您可以使用户体验更好。

+

因为事件处理和屏幕更新是用户关注性能最明显的两种方式。对于您的代码来说,防止在事件队列中出现卡顿是很重要的。在过去,除了编写尽可能高效的代码和将尽可能多的工作移交给 workers 之外,没有其他可靠的方法可以做到这一点。 {{domxref("Window.requestIdleCallback()")}} 允许浏览器告诉您的代码可以安全使用多少时间而不会导致系统延迟,从而有助于确保浏览器的事件循环平稳运行。如果您保持在给定的范围内,您可以使用户体验更好。

充分利用空闲回调

因为 idle callbacks 旨在为代码提供一种与事件循环协作的方式,以确保系统充分利用其潜能,不会过度分配任务,从而导致延迟或其他性能问题,因此您应该考虑如何使用它。

    -
  • 对非高优先级的任务使用空闲回调。 已经创建了多少回调,用户系统的繁忙程度,你的回调多久会执行一次(除非你指定了 timeout),这些都是未知的。不能保证每次事件循环(甚至每次屏幕更新)后都能执行空闲回调;如果事件循环用尽了所有可用时间,那你可就倒霉了(再说一遍,除非你用了 timeout)。 
  • -
  • 空闲回调应尽可能不超支分配到的时间。尽管即使你超出了规定的时间上限,通常来说浏览器、代码、网页也能继续正常运行,这里的时间限制是用来保证系统能留有足够的时间去完成当前的事件循环然后进入下一个循环,而不会导致其他代码卡顿或动画效果延迟。目前,{{domxref("IdleDeadline.timeRemaining", "timeRemaining()")}} 有一个 50 ms 的上限时间,但实际上你能用的时间比这个少,因为在复杂的页面中事件循环可能已经花费了其中的一部分,浏览器的扩展插件也需要处理时间,等等。
  • -
  • 避免在空闲回调中改变 DOM。 空闲回调执行的时候,当前帧已经结束绘制了,所有布局的更新和计算也已经完成。如果你做的改变影响了布局, 你可能会强制停止浏览器并重新计算,而从另一方面来看,这是不必要的。 如果你的回调需要改变 DOM,它应该使用{{domxref("Window.requestAnimationFrame()")}}来调度它。
  • +
  • 对非高优先级的任务使用空闲回调。 已经创建了多少回调,用户系统的繁忙程度,你的回调多久会执行一次(除非你指定了 timeout),这些都是未知的。不能保证每次事件循环(甚至每次屏幕更新)后都能执行空闲回调;如果事件循环用尽了所有可用时间,那你可就倒霉了(再说一遍,除非你用了 timeout)。
  • +
  • 空闲回调应尽可能不超支分配到的时间。尽管即使你超出了规定的时间上限,通常来说浏览器、代码、网页也能继续正常运行,这里的时间限制是用来保证系统能留有足够的时间去完成当前的事件循环然后进入下一个循环,而不会导致其他代码卡顿或动画效果延迟。目前,{{domxref("IdleDeadline.timeRemaining", "timeRemaining()")}} 有一个 50 ms 的上限时间,但实际上你能用的时间比这个少,因为在复杂的页面中事件循环可能已经花费了其中的一部分,浏览器的扩展插件也需要处理时间,等等。
  • +
  • 避免在空闲回调中改变 DOM。 空闲回调执行的时候,当前帧已经结束绘制了,所有布局的更新和计算也已经完成。如果你做的改变影响了布局, 你可能会强制停止浏览器并重新计算,而从另一方面来看,这是不必要的。 如果你的回调需要改变 DOM,它应该使用{{domxref("Window.requestAnimationFrame()")}}来调度它。
  • 避免运行时间无法预测的任务。 你的空闲回调必须避免做任何占用时间不可预测的事情。比如说,应该避免做任何会影响页面布局的事情。你也必须避免 执行{{domxref("Promise")}} 的resolvereject,因为这会在你的回调函数返回后立即引用 Promise 对象对resolvereject的处理程序。
  • 在你需要的时候要用 timeout,但记得只在需要的时候才用。 使用 timeout 可以保证你的代码按时执行,但是在剩余时间不足以强制执行你的代码的同时保证浏览器的性能表现的情况下,timeout 就会造成延迟或者动画不流畅。
@@ -37,14 +37,14 @@

回退到 setTimeout

window.requestIdleCallback = window.requestIdleCallback || function(handler) {
   let startTime = Date.now();
 
-  return setTimeout(function() {
+  return setTimeout(function() {
     handler({
       didTimeout: false,
-      timeRemaining: function() {
+      timeRemaining: function() {
         return Math.max(0, 50.0 - (Date.now() - startTime));
-      }
-    });
-  }, 1);
+      }
+    });
+  }, 1);
 }

如果 {{domxref("Window.requestIdleCallback", "window.requestIdleCallback")}} 是 undefined, 我们在这里把它创建出来。这个函数首先会记录我们调用具体实现的时间。我们将用它计算填充程序{{domxref("IdleDeadline.timeRemaining()", "timeRemaining()")}}返回的值。

@@ -217,9 +217,9 @@

变量声明

接下来我们有了引用要交互 DOM 元素的变量。这些元素是:

    -
  • totalTaskCountElem  {{HTMLElement("span")}} 用于插入我们在进度框显示状态中创建的任务总数。
  • +
  • totalTaskCountElem {{HTMLElement("span")}} 用于插入我们在进度框显示状态中创建的任务总数。
  • currentTaskNumberElem 是我们用来呈现到当前为止处理过的任务数的元素。
  • -
  • progressBarElem  {{HTMLElement("progress")}} ,我们用它来呈现到当前为止处理过任务的百分比。
  • +
  • progressBarElem {{HTMLElement("progress")}} ,我们用它来呈现到当前为止处理过任务的百分比。
  • startButtonElem 是开始按钮。
  • logElem 我们在 {{HTMLElement("div")}} 中显示记录过的文本信息。
diff --git a/files/zh-cn/web/api/baseaudiocontext/createanalyser/index.html b/files/zh-cn/web/api/baseaudiocontext/createanalyser/index.html index 19a22beac79234..e6ab6f54530a77 100644 --- a/files/zh-cn/web/api/baseaudiocontext/createanalyser/index.html +++ b/files/zh-cn/web/api/baseaudiocontext/createanalyser/index.html @@ -41,40 +41,40 @@

例子

function draw() { -      drawVisual = requestAnimationFrame(draw); + drawVisual = requestAnimationFrame(draw); -      analyser.getByteTimeDomainData(dataArray); + analyser.getByteTimeDomainData(dataArray); -      canvasCtx.fillStyle = 'rgb(200, 200, 200)'; -      canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); + canvasCtx.fillStyle = 'rgb(200, 200, 200)'; + canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); -      canvasCtx.lineWidth = 2; -      canvasCtx.strokeStyle = 'rgb(0, 0, 0)'; + canvasCtx.lineWidth = 2; + canvasCtx.strokeStyle = 'rgb(0, 0, 0)'; -      canvasCtx.beginPath(); + canvasCtx.beginPath(); -      var sliceWidth = WIDTH * 1.0 / bufferLength; -      var x = 0; + var sliceWidth = WIDTH * 1.0 / bufferLength; + var x = 0; -      for(var i = 0; i < bufferLength; i++) { + for(var i = 0; i < bufferLength; i++) { -        var v = dataArray[i] / 128.0; -        var y = v * HEIGHT/2; + var v = dataArray[i] / 128.0; + var y = v * HEIGHT/2; -        if(i === 0) { -          canvasCtx.moveTo(x, y); -        } else { -          canvasCtx.lineTo(x, y); -        } + if(i === 0) { + canvasCtx.moveTo(x, y); + } else { + canvasCtx.lineTo(x, y); + } -        x += sliceWidth; -      } + x += sliceWidth; + } -      canvasCtx.lineTo(canvas.width, canvas.height/2); -      canvasCtx.stroke(); -    }; + canvasCtx.lineTo(canvas.width, canvas.height/2); + canvasCtx.stroke(); + }; -    draw();
+ draw();

规范

diff --git a/files/zh-cn/web/api/baseaudiocontext/createbiquadfilter/index.html b/files/zh-cn/web/api/baseaudiocontext/createbiquadfilter/index.html index 6962304f6e70e5..1053c0dec0bca4 100644 --- a/files/zh-cn/web/api/baseaudiocontext/createbiquadfilter/index.html +++ b/files/zh-cn/web/api/baseaudiocontext/createbiquadfilter/index.html @@ -14,7 +14,7 @@

{{ APIRef("Web Audio API") }}

-

{{ domxref("AudioContext") }} 的createBiquadFilter() 方法创建了一个  {{ domxref("BiquadFilterNode") }}, 它提供了一个可以指定多个不同的一般滤波器类型的双二阶滤波器。

+

{{ domxref("AudioContext") }} 的createBiquadFilter() 方法创建了一个 {{ domxref("BiquadFilterNode") }}, 它提供了一个可以指定多个不同的一般滤波器类型的双二阶滤波器。

语法

@@ -28,7 +28,7 @@

返回

示例

-

这个例子展示了一个利用 AudioContext 创建四项滤波器节点(Biquad filter node)的例子。想要查看完整工作的示例,请查看我们的 For voice-change-o-matic 样例(也可以查看  源码 ).

+

这个例子展示了一个利用 AudioContext 创建四项滤波器节点(Biquad filter node)的例子。想要查看完整工作的示例,请查看我们的 For voice-change-o-matic 样例(也可以查看 源码 ).

var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
 
@@ -63,7 +63,7 @@ 

浏览器兼容性

{{Compat("api.BaseAudioContext.createBiquadFilter")}} -

 

+

相关

diff --git a/files/zh-cn/web/api/baseaudiocontext/createbuffer/index.html b/files/zh-cn/web/api/baseaudiocontext/createbuffer/index.html index 1e76523cbffa23..82552bd224f07a 100644 --- a/files/zh-cn/web/api/baseaudiocontext/createbuffer/index.html +++ b/files/zh-cn/web/api/baseaudiocontext/createbuffer/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/BaseAudioContext/createBuffer original_slug: Web/API/AudioContext/createBuffer --- -

音频环境{{ domxref("AudioContext") }} 接口的 createBuffer() 方法用于新建一个空白的 {{ domxref("AudioBuffer") }} 对象,以便用于填充数据,通过 {{ domxref("AudioBufferSourceNode") }} 播放。

+

音频环境{{ domxref("AudioContext") }} 接口的 createBuffer() 方法用于新建一个空白的 {{ domxref("AudioBuffer") }} 对象,以便用于填充数据,通过 {{ domxref("AudioBufferSourceNode") }} 播放。

更多关于音频片段 (Audio Buffer) 的细节,请参考{{ domxref("AudioBuffer") }}页面。

@@ -31,14 +31,14 @@

参数

numOfChannels
一个定义了 buffer 中包含的声频通道数量的整数。
一个标准的实现必须包含至少 32 个声频通道。
-
 
+
length
一个代表 buffer 中的样本帧数的整数。
sampleRate
线性音频样本的采样率,即每一秒包含的关键帧的个数。实现过程中必须支持 22050~96000 的采样率。
-

 

+

返回值

@@ -51,7 +51,7 @@

示例

var audioCtx = new AudioContext();
 var buffer = audioCtx.createBuffer(2, 22050, 44100);
-

如果你这样调用,你将会得到一个立体声(两个声道)的音频片段 (Buffer),当它在一个频率为 44100 赫兹(这是目前大部分声卡处理声音的频率)的音频环境 ({{ domxref("AudioContext") }}) 中播放的时候,会持续 0.5 秒:22050 帧 / 44100 赫兹 = 0.5 秒。

+

如果你这样调用,你将会得到一个立体声(两个声道)的音频片段 (Buffer),当它在一个频率为 44100 赫兹(这是目前大部分声卡处理声音的频率)的音频环境 ({{ domxref("AudioContext") }}) 中播放的时候,会持续 0.5 秒:22050 帧 / 44100 赫兹 = 0.5 秒。

var audioCtx = new AudioContext();
 var buffer = audioCtx.createBuffer(1, 22050, 22050);
@@ -59,10 +59,10 @@

示例

如果你这样调用,你将会得到一个单声道的音频片段 (Buffer),当它在一个频率为 44100 赫兹的音频环境 ({{ domxref("AudioContext") }}) 中播放的时候,将会被自动按照 44100 赫兹*重采样*(因此也会转化为 44100 赫兹的片段),并持续 1 秒:44100 帧 / 44100 赫兹 = 1 秒。

-

注意: 音频重采样与图片的缩放非常类似:比如你有一个 16 x 16 的图像,但是你想把它填充到一个 32 x 32 大小的区域,你就要对它进行缩放(重采样)。得到的结果会是一个低品质的图像(图像会模糊或者有锯齿形的边缘,这取决于缩放采用的算法),但它能缩放原图像,并且缩放后的图像占用空间比相同大小的普通图像要小。重采样的音频原理相同——你能节省一些空间,但由此你也无法得到高频率的声音(高音区)。

+

注意: 音频重采样与图片的缩放非常类似:比如你有一个 16 x 16 的图像,但是你想把它填充到一个 32 x 32 大小的区域,你就要对它进行缩放(重采样)。得到的结果会是一个低品质的图像(图像会模糊或者有锯齿形的边缘,这取决于缩放采用的算法),但它能缩放原图像,并且缩放后的图像占用空间比相同大小的普通图像要小。重采样的音频原理相同——你能节省一些空间,但由此你也无法得到高频率的声音(高音区)。

-

现在让我们来看一个更加复杂的示例,我们将创建一个时长 2 秒的音频片段,并用白噪声填充它,之后通过一个 音频片段源节点 ({{ domxref("AudioBufferSourceNode") }}) 播放。代码中的注释应该能充分解释发生了什么。你可以 在线演示 ,或者 查看源代码

+

现在让我们来看一个更加复杂的示例,我们将创建一个时长 2 秒的音频片段,并用白噪声填充它,之后通过一个 音频片段源节点 ({{ domxref("AudioBufferSourceNode") }}) 播放。代码中的注释应该能充分解释发生了什么。你可以 在线演示 ,或者 查看源代码

var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
 var button = document.querySelector('button');
diff --git a/files/zh-cn/web/api/baseaudiocontext/createbuffersource/index.html b/files/zh-cn/web/api/baseaudiocontext/createbuffersource/index.html
index 2dc440ac9bcd85..5bec952fc5eb5e 100644
--- a/files/zh-cn/web/api/baseaudiocontext/createbuffersource/index.html
+++ b/files/zh-cn/web/api/baseaudiocontext/createbuffersource/index.html
@@ -26,7 +26,7 @@ 

返回

例子

-

在这个例子中,我们将会创建一个 2 秒的缓冲器,并用白噪音填充它,然后通过{{ domxref("AudioBufferSourceNode") }}来播放它. 

+

在这个例子中,我们将会创建一个 2 秒的缓冲器,并用白噪音填充它,然后通过{{ domxref("AudioBufferSourceNode") }}来播放它.

Note: You can also run the code live, or view the source.

diff --git a/files/zh-cn/web/api/baseaudiocontext/createchannelsplitter/index.html b/files/zh-cn/web/api/baseaudiocontext/createchannelsplitter/index.html index f01fec5943d247..65a6aa449996e4 100644 --- a/files/zh-cn/web/api/baseaudiocontext/createchannelsplitter/index.html +++ b/files/zh-cn/web/api/baseaudiocontext/createchannelsplitter/index.html @@ -28,7 +28,7 @@

Returns

Example

-

下面这个简单的例子告诉你怎样分割一个双声道音轨 (或者说一段音乐), 以及对于左右声道不同的处理。要使用它们,你需要用到{{domxref("AudioNode.connect(AudioNode)") }}方法的第二个和第三个参数,他们会指定链接声道源的序号和链接到的声道序号。

+

下面这个简单的例子告诉你怎样分割一个双声道音轨 (或者说一段音乐), 以及对于左右声道不同的处理。要使用它们,你需要用到{{domxref("AudioNode.connect(AudioNode)") }}方法的第二个和第三个参数,他们会指定链接声道源的序号和链接到的声道序号。

var ac = new AudioContext();
 ac.decodeAudioData(someStereoBuffer, function(data) {
diff --git a/files/zh-cn/web/api/baseaudiocontext/createconstantsource/index.html b/files/zh-cn/web/api/baseaudiocontext/createconstantsource/index.html
index e31dfc10b6b128..f17e4f089f99fd 100644
--- a/files/zh-cn/web/api/baseaudiocontext/createconstantsource/index.html
+++ b/files/zh-cn/web/api/baseaudiocontext/createconstantsource/index.html
@@ -5,7 +5,7 @@
 ---
 

{{APIRef("Web Audio API")}}

-

 createConstantSource() 是 {{domxref("BaseAudioContext")}} 接口的一个方法,用于生成一个 {{domxref("ConstantSourceNode")}} 对象,该对象是一个输出单信道(one-channel)音频信号的音频源,这些音频信号都拥有一个恒定的样本值。

+

createConstantSource() 是 {{domxref("BaseAudioContext")}} 接口的一个方法,用于生成一个 {{domxref("ConstantSourceNode")}} 对象,该对象是一个输出单信道(one-channel)音频信号的音频源,这些音频信号都拥有一个恒定的样本值。

Syntax

diff --git a/files/zh-cn/web/api/baseaudiocontext/createconvolver/index.html b/files/zh-cn/web/api/baseaudiocontext/createconvolver/index.html index b9832e81ee9adf..2d32f5c7dbc5c5 100644 --- a/files/zh-cn/web/api/baseaudiocontext/createconvolver/index.html +++ b/files/zh-cn/web/api/baseaudiocontext/createconvolver/index.html @@ -7,7 +7,7 @@

{{ APIRef("Web Audio API") }}

-

{{ domxref("AudioContext") }}的方法createConvolver()能创建一个{{ domxref("ConvolverNode") }},通常用来对你的音频应用混响效果。在 Convolution 规范定义 中查看更多信息。

+

{{ domxref("AudioContext") }}的方法createConvolver()能创建一个{{ domxref("ConvolverNode") }},通常用来对你的音频应用混响效果。在 Convolution 规范定义 中查看更多信息。

语法

@@ -21,9 +21,9 @@

返回值

例子

-

下面的例子展示了一个 AudioContext 创建一个 混响器节点 的基本使用方法。基本前提是你创建一个包含声音样本的 AudioBuffer 用作混响环境 (称之为脉冲响应,) 和在混响器中应用。 下面的例子使用了一个简短的示例音乐厅人群效果,所以混响效果应用深度和回声。

+

下面的例子展示了一个 AudioContext 创建一个 混响器节点 的基本使用方法。基本前提是你创建一个包含声音样本的 AudioBuffer 用作混响环境 (称之为脉冲响应,) 和在混响器中应用。 下面的例子使用了一个简短的示例音乐厅人群效果,所以混响效果应用深度和回声。

-

更多完整例子请查看 Voice-change-O-matic demo (中 app.js 的代码)。

+

更多完整例子请查看 Voice-change-O-matic demo (中 app.js 的代码)。

var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
 var convolver = audioCtx.createConvolver();
@@ -39,12 +39,12 @@ 

例子

ajaxRequest.responseType = 'arraybuffer'; ajaxRequest.onload = function() { -  var audioData = ajaxRequest.response; -  audioCtx.decodeAudioData(audioData, function(buffer) { -      concertHallBuffer = buffer; -      soundSource = audioCtx.createBufferSource(); -      soundSource.buffer = concertHallBuffer; -    }, function(e){"Error with decoding audio data" + e.err}); + var audioData = ajaxRequest.response; + audioCtx.decodeAudioData(audioData, function(buffer) { + concertHallBuffer = buffer; + soundSource = audioCtx.createBufferSource(); + soundSource.buffer = concertHallBuffer; + }, function(e){"Error with decoding audio data" + e.err}); } ajaxRequest.send(); diff --git a/files/zh-cn/web/api/baseaudiocontext/createdelay/index.html b/files/zh-cn/web/api/baseaudiocontext/createdelay/index.html index a12fa91db57c6b..ca0de1097f959b 100644 --- a/files/zh-cn/web/api/baseaudiocontext/createdelay/index.html +++ b/files/zh-cn/web/api/baseaudiocontext/createdelay/index.html @@ -7,9 +7,9 @@

{{ APIRef("Web Audio API") }}

-

  createDelay() 是  {{ domxref("AudioContext") }}   的一个方法,作用是将输入音频信号延迟一定时间。(比如可以实现 对着话筒说句话,然后几秒后 这句话从音响里播放出来)

+

createDelay() 是 {{ domxref("AudioContext") }} 的一个方法,作用是将输入音频信号延迟一定时间。(比如可以实现 对着话筒说句话,然后几秒后 这句话从音响里播放出来)

-

 

+

语法

@@ -30,7 +30,7 @@

返回

以上是原文,大意是返回延时时间,没有设置时默认是 0

-

 

+

示例

@@ -39,10 +39,10 @@

示例

window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext || window.msAudioContext;
 
 try {//音频相关api
-    var audioContext = new window.AudioContext();
+    var audioContext = new window.AudioContext();
     var synthDelay = audioContext.createDelay(5.0);
 } catch (e) {
-    alert("你浏览器不支持");
+    alert("你浏览器不支持");
 }
 
 
@@ -53,46 +53,46 @@ 

示例

navigator.getUserMedia({ "audio": true }, function (stream) { micto(stream); //具体工作 -  }, error); + }, error); }else if(navigator.webkitGetUserMedia) { //webkit api - navigator.webkitGetUserMedia({audio:true, video:  false }, + navigator.webkitGetUserMedia({audio:true, video: false }, function (stream) { micto(stream); //具体工作 -  }, error); - }else if (navigator.mozGetUserMedia) { //火狐 api + }, error); + }else if (navigator.mozGetUserMedia) { //火狐 api navigator.mozGetUserMedia({ "audio": true }, function (stream) { micto(stream);//具体工作 -                }, error); - }else if (navigator.msGetUserMedia) { //ie api + }, error); + }else if (navigator.msGetUserMedia) { //ie api navigator.msGetUserMedia({ "audio": true }, function (stream) { micto(stream);//具体工作 -                }, error); - } else { -   alert("您的浏览器版不支持这个api"); + }, error); + } else { + alert("您的浏览器版不支持这个api"); } - var micto = function(stream) { + var micto = function(stream) { synthDelay.delayTime.value = 3.0; //延迟3秒 -  var source = audioContext.createMediaStreamSource(stream); + var source = audioContext.createMediaStreamSource(stream); -  source.connect(synthDelay); + source.connect(synthDelay); -  synthDelay.connect(audioContext.destination); + synthDelay.connect(audioContext.destination); -      } + }
-

 

+

-

 以下是英文版示例

+

以下是英文版示例

We have created a simple example that allows you to play three different samples on a constant loop — see create-delay (you can also view the source code). If you just press the play buttons, the loops will start immediately; if you slide the sliders up to the right, then press the play buttons, a delay will be introduced, so the looping sounds don't start playing for a short amount of time.

diff --git a/files/zh-cn/web/api/baseaudiocontext/createperiodicwave/index.html b/files/zh-cn/web/api/baseaudiocontext/createperiodicwave/index.html index a90daab9444c96..cb3c3dd6766fbe 100644 --- a/files/zh-cn/web/api/baseaudiocontext/createperiodicwave/index.html +++ b/files/zh-cn/web/api/baseaudiocontext/createperiodicwave/index.html @@ -6,7 +6,7 @@

{{ APIRef("Web Audio API") }}

-

{{ domxref("BaseAudioContext") }} 接口的 createPeriodicWave() 方法用于创建可对 {{ domxref("OscillatorNode") }} 输出进行整形的 {{domxref("PeriodicWave")}}(周期波)。

+

{{ domxref("BaseAudioContext") }} 接口的 createPeriodicWave() 方法用于创建可对 {{ domxref("OscillatorNode") }} 输出进行整形的 {{domxref("PeriodicWave")}}(周期波)。

语法

@@ -21,13 +21,13 @@

参数

real
-
一系列余弦术语 (传统上的 A 项)。
+
一系列余弦术语 (传统上的 A 项)。
imag
-
一系列正弦项 (传统上的 B 项)。
+
一系列正弦项 (传统上的 B 项)。
constraints {{optional_inline}}
一个字典对象,用于指定是否禁用规范化(如果没有指定,则默认启动规范化)。它有一个属性:
    -
  • disableNormalization: 如果设置为 true,对周期波禁用规范化。默认值为 false.
  • +
  • disableNormalization: 如果设置为 true,对周期波禁用规范化。默认值为 false.
@@ -38,7 +38,7 @@

参数

例子

-

下面的例子为 createPeriodicWave() 的简单用法,创建包含简单正弦波的 {{domxref("PeriodicWave")}} 对象。

+

下面的例子为 createPeriodicWave() 的简单用法,创建包含简单正弦波的 {{domxref("PeriodicWave")}} 对象。

var real = new Float32Array(2);
 var imag = new Float32Array(2);
@@ -59,15 +59,15 @@ 

例子

osc.start(); osc.stop(2);
-

 

+

这之所以有用是因为根据定义仅包含基本音调的声音是正弦波。

-

这里,我们创建一个具有两个值的 PeriodicWave (周期波) 。第一个值是 DC(直流) 偏移,它是振荡器启动的值。0 在这里是好的,因为我们想在 [-1.0; 1.0] 范围的中间开始曲线。

+

这里,我们创建一个具有两个值的 PeriodicWave (周期波) 。第一个值是 DC(直流) 偏移,它是振荡器启动的值。0 在这里是好的,因为我们想在 [-1.0; 1.0] 范围的中间开始曲线。

-

第二个值和后续值是正弦和余弦分量。你可以把它看做是傅里叶变换的结果,可以从时域值中获取频域值。这里,使用 createPeriodicWave(),你可以指定频率,浏览器会执行一个逆傅里叶变换,以获得振荡器的时域缓冲。这里,我们只在基础音上设置了一个全音量 (1.0) 的分量,所以我们得到一个正弦波。

+

第二个值和后续值是正弦和余弦分量。你可以把它看做是傅里叶变换的结果,可以从时域值中获取频域值。这里,使用 createPeriodicWave(),你可以指定频率,浏览器会执行一个逆傅里叶变换,以获得振荡器的时域缓冲。这里,我们只在基础音上设置了一个全音量 (1.0) 的分量,所以我们得到一个正弦波。

-

傅里叶变换系数应该按升序给出 (例如. (a+bi)ei,(c+di)e2i,(f+gi)e3i\left(a+bi\right)e^{i} , \left(c+di\right)e^{2i} , \left(f+gi\right)e^{3i}    等.) 可以是正的或者是负的。一个简单的手动获取此类系数的方法是使用图形计算器,尽管这不是最好的。

+

傅里叶变换系数应该按升序给出 (例如. (a+bi)ei,(c+di)e2i,(f+gi)e3i\left(a+bi\right)e^{i} , \left(c+di\right)e^{2i} , \left(f+gi\right)e^{3i} 等.) 可以是正的或者是负的。一个简单的手动获取此类系数的方法是使用图形计算器,尽管这不是最好的。

规格

diff --git a/files/zh-cn/web/api/baseaudiocontext/createscriptprocessor/index.html b/files/zh-cn/web/api/baseaudiocontext/createscriptprocessor/index.html index 677ca29744b5c5..df3d5a28d9087b 100644 --- a/files/zh-cn/web/api/baseaudiocontext/createscriptprocessor/index.html +++ b/files/zh-cn/web/api/baseaudiocontext/createscriptprocessor/index.html @@ -28,7 +28,7 @@

参数

-

重要: Webkit (version 31) 要求调用这个方法的时候必须传入一个有效的 bufferSize .

+

重要: Webkit (version 31) 要求调用这个方法的时候必须传入一个有效的 bufferSize .

@@ -41,10 +41,10 @@

返回

示例

-

下面的例子展示了一个ScriptProcessorNode的基本用法,数据源取自 {{ domxref("AudioContext.decodeAudioData") }}, 给每一个音频样本加一点白噪声,然后通过{{domxref("AudioDestinationNode")}}播放 (其实这个就是系统的扬声器)。 对于每一个声道和样本帧,在把结果当成输出样本之前,scriptNode.onaudioprocess方法关联audioProcessingEvent ,并用它来遍历每输入流的每一个声道,和每一个声道中的每一个样本,并添加一点白噪声。

+

下面的例子展示了一个ScriptProcessorNode的基本用法,数据源取自 {{ domxref("AudioContext.decodeAudioData") }}, 给每一个音频样本加一点白噪声,然后通过{{domxref("AudioDestinationNode")}}播放 (其实这个就是系统的扬声器)。 对于每一个声道和样本帧,在把结果当成输出样本之前,scriptNode.onaudioprocess方法关联audioProcessingEvent ,并用它来遍历每输入流的每一个声道,和每一个声道中的每一个样本,并添加一点白噪声。

-

注意: 完整的示例参照 script-processor-node github (查看源码 source code.)

+

注意: 完整的示例参照 script-processor-node github (查看源码 source code.)

var myScript = document.querySelector('script');
@@ -62,43 +62,43 @@ 

示例

// load in an audio track via XHR and decodeAudioData function getData() { -  request = new XMLHttpRequest(); -  request.open('GET', 'viper.ogg', true); -  request.responseType = 'arraybuffer'; -  request.onload = function() { -    var audioData = request.response; - -    audioCtx.decodeAudioData(audioData, function(buffer) { -    myBuffer = buffer; -    source.buffer = myBuffer; -  }, -    function(e){"Error with decoding audio data" + e.err}); -  } -  request.send(); + request = new XMLHttpRequest(); + request.open('GET', 'viper.ogg', true); + request.responseType = 'arraybuffer'; + request.onload = function() { + var audioData = request.response; + + audioCtx.decodeAudioData(audioData, function(buffer) { + myBuffer = buffer; + source.buffer = myBuffer; + }, + function(e){"Error with decoding audio data" + e.err}); + } + request.send(); } // Give the node a function to process audio events scriptNode.onaudioprocess = function(audioProcessingEvent) { // The input buffer is the song we loaded earlier -  var inputBuffer = audioProcessingEvent.inputBuffer; + var inputBuffer = audioProcessingEvent.inputBuffer; -  // The output buffer contains the samples that will be modified and played -  var outputBuffer = audioProcessingEvent.outputBuffer; + // The output buffer contains the samples that will be modified and played + var outputBuffer = audioProcessingEvent.outputBuffer; -  // Loop through the output channels (in this case there is only one) -  for (var channel = 0; channel < outputBuffer.numberOfChannels; channel++) { -    var inputData = inputBuffer.getChannelData(channel); -    var outputData = outputBuffer.getChannelData(channel); + // Loop through the output channels (in this case there is only one) + for (var channel = 0; channel < outputBuffer.numberOfChannels; channel++) { + var inputData = inputBuffer.getChannelData(channel); + var outputData = outputBuffer.getChannelData(channel); -    // Loop through the 4096 samples -    for (var sample = 0; sample < inputBuffer.length; sample++) { -    // make output equal to the same as the input -      outputData[sample] = inputData[sample]; + // Loop through the 4096 samples + for (var sample = 0; sample < inputBuffer.length; sample++) { + // make output equal to the same as the input + outputData[sample] = inputData[sample]; -      // add noise to each output sample -      outputData[sample] += ((Math.random() * 2) - 1) * 0.2; -    } -  } + // add noise to each output sample + outputData[sample] += ((Math.random() * 2) - 1) * 0.2; + } + } } getData(); @@ -106,14 +106,14 @@

示例

// wire up play button playButton.onclick = function() { source.connect(scriptNode); -  scriptNode.connect(audioCtx.destination); -  source.start(); + scriptNode.connect(audioCtx.destination); + source.start(); } // When the buffer source stops playing, disconnect everything source.onended = function() { source.disconnect(scriptNode); -  scriptNode.disconnect(audioCtx.destination); + scriptNode.disconnect(audioCtx.destination); }
diff --git a/files/zh-cn/web/api/baseaudiocontext/createwaveshaper/index.html b/files/zh-cn/web/api/baseaudiocontext/createwaveshaper/index.html index 56bda42c8ffd6b..f296fa77489901 100644 --- a/files/zh-cn/web/api/baseaudiocontext/createwaveshaper/index.html +++ b/files/zh-cn/web/api/baseaudiocontext/createwaveshaper/index.html @@ -6,7 +6,7 @@ ---

{{ APIRef("Web Audio API") }}

-

{{ domxref("AudioContext") }} 接口的 createWaveShaper() 方法创建了 表示非线性失真的{{ domxref("WaveShaperNode") }}。该节点通常被用来给音频添加失真效果

+

{{ domxref("AudioContext") }} 接口的 createWaveShaper() 方法创建了 表示非线性失真的{{ domxref("WaveShaperNode") }}。该节点通常被用来给音频添加失真效果

语法

@@ -33,17 +33,17 @@

例子

... function makeDistortionCurve(amount) { -  var k = typeof amount === 'number' ? amount : 50, -    n_samples = 44100, -    curve = new Float32Array(n_samples), -    deg = Math.PI / 180, -    i = 0, -    x; -  for ( ; i < n_samples; ++i ) { -    x = i * 2 / n_samples - 1; -    curve[i] = ( 3 + k ) * x * 20 * deg / ( Math.PI + k * Math.abs(x) ); -  } -  return curve; + var k = typeof amount === 'number' ? amount : 50, + n_samples = 44100, + curve = new Float32Array(n_samples), + deg = Math.PI / 180, + i = 0, + x; + for ( ; i < n_samples; ++i ) { + x = i * 2 / n_samples - 1; + curve[i] = ( 3 + k ) * x * 20 * deg / ( Math.PI + k * Math.abs(x) ); + } + return curve; }; ... diff --git a/files/zh-cn/web/api/baseaudiocontext/decodeaudiodata/index.html b/files/zh-cn/web/api/baseaudiocontext/decodeaudiodata/index.html index 6268bdd01ffb60..43483a3c76714c 100644 --- a/files/zh-cn/web/api/baseaudiocontext/decodeaudiodata/index.html +++ b/files/zh-cn/web/api/baseaudiocontext/decodeaudiodata/index.html @@ -37,9 +37,9 @@

举例

旧的回调语法

-

在这个事例中, getData() 方法使用 XHR 加载一个音轨,设置请求的 responsetype 为 ArrayBuffer 使它返回一个 arraybuffer 数据,然后存储在 audioData 变量中。然后我们将这个 arraybuffer 数据置于decodeAudioData()方法中使用,当成功解码PCM Data后通过回调返回, 将返回的结果通过{{ domxref("AudioContext.createBufferSource()") }}接口进行处理并获得一个{{ domxref("AudioBufferSourceNode") }}, 将源连接至{{domxref("AudioContext.destination") }}并将它设置为循环的。

+

在这个事例中, getData() 方法使用 XHR 加载一个音轨,设置请求的 responsetype 为 ArrayBuffer 使它返回一个 arraybuffer 数据,然后存储在 audioData 变量中。然后我们将这个 arraybuffer 数据置于decodeAudioData()方法中使用,当成功解码PCM Data后通过回调返回, 将返回的结果通过{{ domxref("AudioContext.createBufferSource()") }}接口进行处理并获得一个{{ domxref("AudioBufferSourceNode") }}, 将源连接至{{domxref("AudioContext.destination") }}并将它设置为循环的。

-

通过按钮来运行 getData() 来获取音轨并播放它。当使用 stop() 方法后 source 将会被清除。

+

通过按钮来运行 getData() 来获取音轨并播放它。当使用 stop() 方法后 source 将会被清除。

Note: You can run the example live (or view the source.)

@@ -88,14 +88,14 @@

旧的回调语法

// wire up buttons to stop and play audio play.onclick = function() { -  getData(); -  source.start(0); -  play.setAttribute('disabled', 'disabled'); + getData(); + source.start(0); + play.setAttribute('disabled', 'disabled'); } stop.onclick = function() { -  source.stop(0); -  play.removeAttribute('disabled'); + source.stop(0); + play.removeAttribute('disabled'); } diff --git a/files/zh-cn/web/api/baseaudiocontext/listener/index.html b/files/zh-cn/web/api/baseaudiocontext/listener/index.html index 8ea01608ec5079..85cabb23886341 100644 --- a/files/zh-cn/web/api/baseaudiocontext/listener/index.html +++ b/files/zh-cn/web/api/baseaudiocontext/listener/index.html @@ -22,7 +22,7 @@

返回值

例子

-

注意:想要完整的音频空间化例子,可以查看panner-node DEMO

+

注意:想要完整的音频空间化例子,可以查看panner-node DEMO

var AudioContext = window.AudioContext || window.webkitAudioContext;
diff --git a/files/zh-cn/web/api/baseaudiocontext/state/index.html b/files/zh-cn/web/api/baseaudiocontext/state/index.html
index d4a6da3d4ed052..b07034f1061542 100644
--- a/files/zh-cn/web/api/baseaudiocontext/state/index.html
+++ b/files/zh-cn/web/api/baseaudiocontext/state/index.html
@@ -30,7 +30,7 @@ 

例子

下面这段代码是AudioContext states demo (直接运行) 中的,其中{{domxref("AudioContext.onstatechange")}}处理器会在每次当前状态发生变化时把它输出到控制台。

audioCtx.onstatechange = function() {
-  console.log(audioCtx.state);
+  console.log(audioCtx.state);
 }
 
diff --git a/files/zh-cn/web/api/baseaudiocontext/statechange_event/index.html b/files/zh-cn/web/api/baseaudiocontext/statechange_event/index.html index fa5836b7bcae99..50f06eeec1194b 100644 --- a/files/zh-cn/web/api/baseaudiocontext/statechange_event/index.html +++ b/files/zh-cn/web/api/baseaudiocontext/statechange_event/index.html @@ -17,10 +17,10 @@

语法

例子

-

下面这段代码是AudioContext states DEMO (直接运行) 中的,其中onstatechange处理器会在每次当前{{domxref("state")}}发生变化时把它输出到控制台。

+

下面这段代码是AudioContext states DEMO (直接运行) 中的,其中onstatechange处理器会在每次当前{{domxref("state")}}发生变化时把它输出到控制台。

audioCtx.onstatechange = function() {
-  console.log(audioCtx.state);
+  console.log(audioCtx.state);
 }
 
diff --git a/files/zh-cn/web/api/battery_status_api/index.html b/files/zh-cn/web/api/battery_status_api/index.html index 69c6712f42b9c9..4878a7b3a9490d 100644 --- a/files/zh-cn/web/api/battery_status_api/index.html +++ b/files/zh-cn/web/api/battery_status_api/index.html @@ -10,13 +10,13 @@ ---

{{DefaultAPISidebar("Battery API")}}

-

Battery Status API,更多时候被称之为 Battery API, 提供了有关系统充电级别的信息并提供了通过电池等级或者充电状态的改变提醒用户的事件。 这个可以在设备电量低的时候调整应用的资源使用状态,或者在电池用尽前保存应用中的修改以防数据丢失。

+

Battery Status API,更多时候被称之为 Battery API, 提供了有关系统充电级别的信息并提供了通过电池等级或者充电状态的改变提醒用户的事件。 这个可以在设备电量低的时候调整应用的资源使用状态,或者在电池用尽前保存应用中的修改以防数据丢失。

-

Battery Status API 向 {{domxref("window.navigator")}} 扩展了一个 {{domxref("navigator.getBattery")}} 方法,其返回了一个 battery promise, 完成后传递一个 {{domxref("BatteryManager")}} 对象,并提供了一些新的可以操作电池状态的事件。

+

Battery Status API 向 {{domxref("window.navigator")}} 扩展了一个 {{domxref("navigator.getBattery")}} 方法,其返回了一个 battery promise, 完成后传递一个 {{domxref("BatteryManager")}} 对象,并提供了一些新的可以操作电池状态的事件。

例子

-

在这个例子中,我们同时监听放电状态和电池等级和剩余事件的事件(不论是否正在充电还是在使用电池)。这可以通过监听 {{event("chargingchange")}}, {{event("levelchange")}}, {{event("chargingtimechange")}}, {{event("dischargingtimechange")}} 事件完成。

+

在这个例子中,我们同时监听放电状态和电池等级和剩余事件的事件(不论是否正在充电还是在使用电池)。这可以通过监听 {{event("chargingchange")}}, {{event("levelchange")}}, {{event("chargingtimechange")}}, {{event("dischargingtimechange")}} 事件完成。

navigator.getBattery().then(function(battery) {
 
diff --git a/files/zh-cn/web/api/batterymanager/charging/index.html b/files/zh-cn/web/api/batterymanager/charging/index.html
index 5cfad7467255d6..4af40ebe2ae455 100644
--- a/files/zh-cn/web/api/batterymanager/charging/index.html
+++ b/files/zh-cn/web/api/batterymanager/charging/index.html
@@ -9,13 +9,13 @@
 
 

指示设备电池当前是否正在充电的 Boolean 值

-

Syntax 句法

+

Syntax 句法

var charging = battery.charging
-

返回当前是否正在对 {{domxref("BatteryManager")}} 对象的设备充电,如果正在充电则返回 true,否则返回 false.

+

返回当前是否正在对 {{domxref("BatteryManager")}} 对象的设备充电,如果正在充电则返回 true,否则返回 false.

-

Example 例子

+

Example 例子

HTML Content(内容)

diff --git a/files/zh-cn/web/api/batterymanager/index.html b/files/zh-cn/web/api/batterymanager/index.html index be98e2a6b2aefc..05785d88df4081 100644 --- a/files/zh-cn/web/api/batterymanager/index.html +++ b/files/zh-cn/web/api/batterymanager/index.html @@ -5,9 +5,9 @@ ---

{{APIRef}}

-

BatteryManager 接口提供方法获取系统电量。 

+

BatteryManager 接口提供方法获取系统电量。

-

{{domxref("navigator.getBattery")}} 方法返回一个 promise 对象,该 promise 将提供一个 BatteryManager 接口,你可以从Battery Status API 查询到相关信息。

+

{{domxref("navigator.getBattery")}} 方法返回一个 promise 对象,该 promise 将提供一个 BatteryManager 接口,你可以从Battery Status API 查询到相关信息。

属性

@@ -19,7 +19,7 @@

属性

{{domxref("BatteryManager.dischargingTime")}} {{ReadOnlyInline}}
一个数字,代表距离电池耗电至空且挂起需要多少秒。
{{domxref("BatteryManager.level")}} {{ReadOnlyInline}}
-
一个数字,代表电量的放大等级,这个值在 0.0 至 1.0 之间。
+
一个数字,代表电量的放大等级,这个值在 0.0 至 1.0 之间。

事件处理器

diff --git a/files/zh-cn/web/api/beforeinstallpromptevent/index.html b/files/zh-cn/web/api/beforeinstallpromptevent/index.html index 47f5073a82402c..75d923fe40767e 100644 --- a/files/zh-cn/web/api/beforeinstallpromptevent/index.html +++ b/files/zh-cn/web/api/beforeinstallpromptevent/index.html @@ -8,7 +8,7 @@ - 添加快捷方式 translation_of: Web/API/BeforeInstallPromptEvent --- -

{{ ApiRef() }} {{ Non-standard_header }}

+

{{ ApiRef() }} {{ Non-standard_header }}

在一个用户被提示”安装“一个网站到移动设备的一个主屏幕之前,BeforeInstallPromptEvent 被 {{domxref("Window.onbeforeinstallprompt")}} 处理程序触发。

@@ -20,7 +20,7 @@

构造器

{{domxref("new window.BeforeInstallPromptEvent(name, eventInitOptions)")}}
-
创建一个新的 BeforeInstallPromptEvent.
+
创建一个新的 BeforeInstallPromptEvent.

属性

@@ -31,24 +31,24 @@

属性

{{domxref("BeforeInstallPromptEvent.platform")}} {{readonlyinline}}
返回一个包含了调度事件的平台(s)的 {{domxref("DOMString")}} 数组。这是为希望向用户提供版本选择的 user agent 提供的,例如,“web”或“play”允许用户在 web 版本或 Android 版本之间进行选择。
{{domxref("BeforeInstallPromptEvent.userChoice")}} {{readonlyinline}}
-
返回一个可以解析为 {{domxref("DOMString")}} 的 {{jsxref("Promise")}} ,其值为 'installed' 或 'dismissed',用以判断用户是否选择安装该 PWA。
+
返回一个可以解析为 {{domxref("DOMString")}} 的 {{jsxref("Promise")}} ,其值为 'installed' 或 'dismissed',用以判断用户是否选择安装该 PWA。

方法

-
{{domxref("BeforeInstallPromptEvent.prompt()")}} 
+
{{domxref("BeforeInstallPromptEvent.prompt()")}}
立即弹出安装提示。允许开发者按照自己选择的时间弹出安装提示。该方法返回 {{jsxref("Promise")}}。

例子

window.addEventListener("beforeinstallprompt", function(e) {
-  // log the platforms provided as options in an install prompt
-  console.log(e.platforms); // e.g., ["web", "android", "windows"]
-  e.userChoice.then(function(outcome) {
-    console.log(outcome); // either "installed", "dismissed", etc.
-  }, handleError);
+  // log the platforms provided as options in an install prompt
+  console.log(e.platforms); // e.g., ["web", "android", "windows"]
+  e.userChoice.then(function(outcome) {
+    console.log(outcome); // either "installed", "dismissed", etc.
+  }, handleError);
 });
 
diff --git a/files/zh-cn/web/api/beforeinstallpromptevent/prompt/index.html b/files/zh-cn/web/api/beforeinstallpromptevent/prompt/index.html index 0b7fd14474cfa4..174e60fa92d568 100644 --- a/files/zh-cn/web/api/beforeinstallpromptevent/prompt/index.html +++ b/files/zh-cn/web/api/beforeinstallpromptevent/prompt/index.html @@ -10,7 +10,7 @@

{{SeeCompatTable}}

-

{{domxref("BeforeInstallPromptEvent")}} 接口的 prompt()方法允许一个开发人员在自己选择的一个时间显示安装提示。

+

{{domxref("BeforeInstallPromptEvent")}} 接口的 prompt()方法允许一个开发人员在自己选择的一个时间显示安装提示。

句法

diff --git a/files/zh-cn/web/api/beforeunloadevent/index.html b/files/zh-cn/web/api/beforeunloadevent/index.html index f85b0e60a4372e..993a855e025d08 100644 --- a/files/zh-cn/web/api/beforeunloadevent/index.html +++ b/files/zh-cn/web/api/beforeunloadevent/index.html @@ -9,7 +9,7 @@ ---

{{APIRef}}

-

beforeunload 事件触发于 window、document 和它们的资源即将卸载时。 

+

beforeunload 事件触发于 window、document 和它们的资源即将卸载时。

当事件属性 returnValue 被赋值为非空字符串时,会弹出一个对话框,让用户确认是否离开页面(示例如下)。否则,事件被静默处理。一些浏览器实现仅在框架或内置框架接收到用户手势或交互时才显示对话框。在 浏览器兼容性 中查看更多信息。

@@ -67,5 +67,5 @@

参见

  • {{Event("load")}}
  • {{Event("beforeunload")}}
  • {{Event("unload")}}
  • -
  • 卸载文档 — 提示卸载文档
  • +
  • 卸载文档 — 提示卸载文档
  • diff --git a/files/zh-cn/web/api/biquadfilternode/index.html b/files/zh-cn/web/api/biquadfilternode/index.html index cbafec55092674..41f19b03b9e2c3 100644 --- a/files/zh-cn/web/api/biquadfilternode/index.html +++ b/files/zh-cn/web/api/biquadfilternode/index.html @@ -6,7 +6,7 @@

    {{APIRef("Web Audio API")}}

    -

    BiquadFilterNode接口表示一个简单低阶滤波器(双二阶滤波器), 通过 {{ domxref("AudioContext.createBiquadFilter()") }} 方法创建。它是一个能表示不同类型的过滤器,声调控制设备,图形均衡器的{{domxref("AudioNode")}} . 一个BiquadFilterNode(双二阶滤波器) 总是恰好有一个输入和一个输出。

    +

    BiquadFilterNode接口表示一个简单低阶滤波器(双二阶滤波器), 通过 {{ domxref("AudioContext.createBiquadFilter()") }} 方法创建。它是一个能表示不同类型的过滤器,声调控制设备,图形均衡器的{{domxref("AudioNode")}} . 一个BiquadFilterNode(双二阶滤波器) 总是恰好有一个输入和一个输出。

    @@ -36,7 +36,7 @@

    属性

    -

    继承属性自父级的 {{domxref("AudioNode")}}.

    +

    继承属性自父级的 {{domxref("AudioNode")}}.

    {{domxref("BiquadFilterNode.frequency")}}
    diff --git a/files/zh-cn/web/api/blob/arraybuffer/index.html b/files/zh-cn/web/api/blob/arraybuffer/index.html index bba15a7507bf32..3ebc8114fa56f6 100644 --- a/files/zh-cn/web/api/blob/arraybuffer/index.html +++ b/files/zh-cn/web/api/blob/arraybuffer/index.html @@ -5,7 +5,7 @@ ---

    {{APIRef("File API")}}

    -

    arrayBuffer() 方法返回一个 {{jsxref("Promise")}} 对象,包含 blob 中的数据,并在 {{domxref("ArrayBuffer")}} 中以二进制数据的形式呈现。

    +

    arrayBuffer() 方法返回一个 {{jsxref("Promise")}} 对象,包含 blob 中的数据,并在 {{domxref("ArrayBuffer")}} 中以二进制数据的形式呈现。

    @@ -24,7 +24,7 @@

    参数

    返回值

    -

    返回一个 promise 对象,在 resolved 状态中以二进制的形式包含 blob 中的数据,并呈现在 {{domxref("ArrayBuffer")}} 中。

    +

    返回一个 promise 对象,在 resolved 状态中以二进制的形式包含 blob 中的数据,并呈现在 {{domxref("ArrayBuffer")}} 中。

    异常

    @@ -32,7 +32,7 @@

    异常

    使用须知

    -

    {{domxref("FileReader.readAsArrayBuffer()")}} 这个方法与之类似,但 arrayBuffer() 返回一个 promise 对象,而不是像 FileReader 一样返回一个基于事件的 API。

    +

    {{domxref("FileReader.readAsArrayBuffer()")}} 这个方法与之类似,但 arrayBuffer() 返回一个 promise 对象,而不是像 FileReader 一样返回一个基于事件的 API。

    规范

    diff --git a/files/zh-cn/web/api/blob/blob/index.html b/files/zh-cn/web/api/blob/blob/index.html index b076e13a75b6df..6d69d0b127cc15 100644 --- a/files/zh-cn/web/api/blob/blob/index.html +++ b/files/zh-cn/web/api/blob/blob/index.html @@ -5,7 +5,7 @@ ---

    {{APIRef("File API")}}

    -

    Blob() 构造函数返回一个新的 {{domxref("Blob")}} 对象。blob 的内容由参数数组中给出的值的串联组成。

    +

    Blob() 构造函数返回一个新的 {{domxref("Blob")}} 对象。blob 的内容由参数数组中给出的值的串联组成。

    语法

    @@ -16,10 +16,10 @@

    参数

    • array 是一个由{{jsxref("ArrayBuffer")}}, {{domxref("ArrayBufferView")}}, {{domxref("Blob")}}, {{domxref("DOMString")}} 等对象构成的 {{jsxref("Array")}} ,或者其他类似对象的混合体,它将会被放进 {{domxref("Blob")}}。DOMStrings 会被编码为 UTF-8。
    • -
    • options 是一个可选的BlobPropertyBag字典,它可能会指定如下两个属性: +
    • options 是一个可选的BlobPropertyBag字典,它可能会指定如下两个属性:
        -
      • type,默认值为 "",它代表了将会被放入到 blob 中的数组内容的 MIME 类型。
      • -
      • endings,默认值为"transparent",用于指定包含行结束符\n的字符串如何被写入。 它是以下两个值中的一个: "native",代表行结束符会被更改为适合宿主操作系统文件系统的换行符,或者 "transparent",代表会保持 blob 中保存的结束符不变 {{non-standard_inline}}
      • +
      • type,默认值为 "",它代表了将会被放入到 blob 中的数组内容的 MIME 类型。
      • +
      • endings,默认值为"transparent",用于指定包含行结束符\n的字符串如何被写入。 它是以下两个值中的一个: "native",代表行结束符会被更改为适合宿主操作系统文件系统的换行符,或者 "transparent",代表会保持 blob 中保存的结束符不变 {{non-standard_inline}}
    @@ -43,4 +43,4 @@

    参见

  • 被本构造函数取代而弃用的{{domxref("BlobBuilder")}}
  • -

     

    +

    diff --git a/files/zh-cn/web/api/blob/index.html b/files/zh-cn/web/api/blob/index.html index 8c822935c1d588..a2b4983e839717 100644 --- a/files/zh-cn/web/api/blob/index.html +++ b/files/zh-cn/web/api/blob/index.html @@ -12,11 +12,11 @@ ---
    {{APIRef("File API")}}
    -

    Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取,也可以转换成 {{DOMxRef("ReadableStream")}} 来用于数据操作。 

    +

    Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取,也可以转换成 {{DOMxRef("ReadableStream")}} 来用于数据操作。

    Blob 表示的不一定是 JavaScript 原生格式的数据。{{domxref("File")}} 接口基于Blob,继承了 blob 的功能并将其扩展使其支持用户系统上的文件。

    -

    要从其他非 blob 对象和数据构造一个 Blob,请使用 {{domxref("Blob.Blob", "Blob()")}} 构造函数。要创建一个 blob 数据的子集 blob,请使用 {{domxref("Blob.slice()", "slice()")}} 方法。要获取用户文件系统上的文件对应的 Blob 对象,请参阅 {{domxref("File", "File")}} 文档。

    +

    要从其他非 blob 对象和数据构造一个 Blob,请使用 {{domxref("Blob.Blob", "Blob()")}} 构造函数。要创建一个 blob 数据的子集 blob,请使用 {{domxref("Blob.slice()", "slice()")}} 方法。要获取用户文件系统上的文件对应的 Blob 对象,请参阅 {{domxref("File", "File")}} 文档。

    接受 Blob 对象的 API 也被列在 {{domxref("File", "File")}} 文档中。

    @@ -46,11 +46,11 @@

    方法

    {{domxref("Blob.slice()", "Blob.slice([start[, end[, contentType]]])")}}
    返回一个新的 Blob 对象,包含了源 Blob 对象中指定范围内的数据。
    {{domxref("Blob.stream()", "Blob.stream()")}}
    -
    返回一个能读取 blob 内容的 {{domxref("ReadableStream")}}。
    +
    返回一个能读取 blob 内容的 {{domxref("ReadableStream")}}。
    {{domxref("Blob.text()", "Blob.text()")}}
    -
    返回一个 promise 且包含 blob 所有内容的 UTF-8 格式的 {{domxref("USVString")}}。
    +
    返回一个 promise 且包含 blob 所有内容的 UTF-8 格式的 {{domxref("USVString")}}。
    {{domxref("Blob.arrayBuffer()", "Blob.arrayBuffer()")}}
    -
    返回一个 promise 且包含 blob 所有内容的二进制格式的 {{domxref("ArrayBuffer")}} 
    +
    返回一个 promise 且包含 blob 所有内容的二进制格式的 {{domxref("ArrayBuffer")}}

    示例

    diff --git a/files/zh-cn/web/api/blob/slice/index.html b/files/zh-cn/web/api/blob/slice/index.html index 0b2cddd1648889..91474555a4f760 100644 --- a/files/zh-cn/web/api/blob/slice/index.html +++ b/files/zh-cn/web/api/blob/slice/index.html @@ -5,9 +5,9 @@ ---

    {{APIRef("File API")}}

    -

    Blob.slice() 方法用于创建一个包含源 {{domxref("Blob")}}的指定字节范围内的数据的新 {{domxref("Blob")}} 对象。

    +

    Blob.slice() 方法用于创建一个包含源 {{domxref("Blob")}}的指定字节范围内的数据的新 {{domxref("Blob")}} 对象。

    -
    注释: 请注意,在某些浏览器和版本上具有供应商前缀:例如:Firefox 12 及更早版本的 blob.mozSlice() 和 Safari 中的 blob.webkitSlice(). slice() 方法的旧版本,没有供应商前缀,具有不同的语义,并且已过时。
    +
    注释: 请注意,在某些浏览器和版本上具有供应商前缀:例如:Firefox 12 及更早版本的 blob.mozSlice() 和 Safari 中的 blob.webkitSlice(). slice() 方法的旧版本,没有供应商前缀,具有不同的语义,并且已过时。

    语法

    @@ -17,11 +17,11 @@

    参数

    start {{ optional_inline() }}
    -
    这个参数代表 {{domxref("Blob")}} 里的下标,表示第一个会被会被拷贝进新的 {{domxref("Blob")}} 的字节的起始位置。如果你传入的是一个负数,那么这个偏移量将会从数据的末尾从后到前开始计算。举例来说,-10 将会是  {{domxref("Blob")}} 的倒数第十个字节。它的默认值是 0,如果你传入的 start 的长度大于源 {{domxref("Blob")}} 的长度,那么返回的将会是一个长度为 0 并且不包含任何数据的一个 {{domxref("Blob")}} 对象。
    +
    这个参数代表 {{domxref("Blob")}} 里的下标,表示第一个会被会被拷贝进新的 {{domxref("Blob")}} 的字节的起始位置。如果你传入的是一个负数,那么这个偏移量将会从数据的末尾从后到前开始计算。举例来说,-10 将会是 {{domxref("Blob")}} 的倒数第十个字节。它的默认值是 0,如果你传入的 start 的长度大于源 {{domxref("Blob")}} 的长度,那么返回的将会是一个长度为 0 并且不包含任何数据的一个 {{domxref("Blob")}} 对象。
    end {{ optional_inline() }}
    -
    这个参数代表的是 {{domxref("Blob")}} 的一个下标,这个下标 -1 的对应的字节将会是被拷贝进新的{{domxref("Blob")}} 的最后一个字节。如果你传入了一个负数,那么这个偏移量将会从数据的末尾从后到前开始计算。举例来说, -10 将会是 {{domxref("Blob")}} 的倒数第十个字节。它的默认值就是它的原始长度 (size).
    +
    这个参数代表的是 {{domxref("Blob")}} 的一个下标,这个下标 -1 的对应的字节将会是被拷贝进新的{{domxref("Blob")}} 的最后一个字节。如果你传入了一个负数,那么这个偏移量将会从数据的末尾从后到前开始计算。举例来说, -10 将会是 {{domxref("Blob")}} 的倒数第十个字节。它的默认值就是它的原始长度 (size).
    contentType {{ optional_inline() }}
    -
    给新的 {{domxref("Blob")}} 赋予一个新的文档类型。这将会把它的 type 属性设为被传入的值。它的默认值是一个空的字符串。
    +
    给新的 {{domxref("Blob")}} 赋予一个新的文档类型。这将会把它的 type 属性设为被传入的值。它的默认值是一个空的字符串。

    返回值

    diff --git a/files/zh-cn/web/api/blob/text/index.html b/files/zh-cn/web/api/blob/text/index.html index 8929d3624f2d14..489c7cb1a7d782 100644 --- a/files/zh-cn/web/api/blob/text/index.html +++ b/files/zh-cn/web/api/blob/text/index.html @@ -8,7 +8,7 @@ ---
    {{APIRef("File API")}}
    -

    text() 方法返回一个 {{jsxref("Promise")}} 对象,包含 blob 中的内容,使用 UTF-8 格式编码。

    +

    text() 方法返回一个 {{jsxref("Promise")}} 对象,包含 blob 中的内容,使用 UTF-8 格式编码。

    @@ -28,15 +28,15 @@

    参数

    返回值

    -

    返回一个 promise 对象,以 resolve 状态返回一个以文本形式包含 blob 中数据的 {{domxref("USVString")}}。并且该数据总是被识别为 UTF-8 格式。

    +

    返回一个 promise 对象,以 resolve 状态返回一个以文本形式包含 blob 中数据的 {{domxref("USVString")}}。并且该数据总是被识别为 UTF-8 格式。

    使用须知

    -

    {{domxref("FileReader")}} 的 {{domxref("FileReader.readAsText", "readAsText()")}} 方法是一个与之类似的方法,它对 Blob 和 {{domxref("File")}} 对象都适用。下面是两个主要的不同之处:

    +

    {{domxref("FileReader")}} 的 {{domxref("FileReader.readAsText", "readAsText()")}} 方法是一个与之类似的方法,它对 Blob 和 {{domxref("File")}} 对象都适用。下面是两个主要的不同之处:

      -
    • Blob.text() 返回的是一个 promise 对象,而 FileReader.readAsText() 是一个基于事件的 API。
    • -
    • Blob.text() 总是使用 UTF-8 进行编码,而 FileReader.readAsText() 可以使用不同编码方式,取决于 blob 的类型和一个指定的编码名称。
    • +
    • Blob.text() 返回的是一个 promise 对象,而 FileReader.readAsText() 是一个基于事件的 API。
    • +
    • Blob.text() 总是使用 UTF-8 进行编码,而 FileReader.readAsText() 可以使用不同编码方式,取决于 blob 的类型和一个指定的编码名称。

    规范

    diff --git a/files/zh-cn/web/api/bluetooth/index.html b/files/zh-cn/web/api/bluetooth/index.html index c11e942c31b14e..42e5432f36f00f 100644 --- a/files/zh-cn/web/api/bluetooth/index.html +++ b/files/zh-cn/web/api/bluetooth/index.html @@ -9,9 +9,9 @@ - 说明 translation_of: Web/API/Bluetooth --- -

    {{ apiref("Web Bluetooth API") }} {{Non-standard_header()}}

    +

    {{ apiref("Web Bluetooth API") }} {{Non-standard_header()}}

    -

    Web Bluetooth API 的Bluetooth接口返回指代{{domxref("BluetoothDevice")}}带有指定选项的对象的{{jsxref("Promise")}}。

    +

    Web Bluetooth APIBluetooth接口返回指代{{domxref("BluetoothDevice")}}带有指定选项的对象的{{jsxref("Promise")}}。

    接口

    diff --git a/files/zh-cn/web/api/bluetooth/requestdevice/index.html b/files/zh-cn/web/api/bluetooth/requestdevice/index.html index 8d5ed3c223287e..87e3f0b8ecb03b 100644 --- a/files/zh-cn/web/api/bluetooth/requestdevice/index.html +++ b/files/zh-cn/web/api/bluetooth/requestdevice/index.html @@ -22,8 +22,8 @@

    返回值

    参数

    -
    options 
    -
    设置设备请求选项的对象. 可用的选项是: +
    options
    +
    设置设备请求选项的对象. 可用的选项是:
    • filters[]: 一个 BluetoothScanFilters 数组。此过滤器由一个 BluetoothServiceUUID 数组,一个名称参数和一个 namePrefix 参数组成。
    • optionalServices[]: 一个 BluetoothServiceUUID 数组。
    • @@ -71,7 +71,7 @@

      示例

      console.log("出现错误: " + error); }); -

      查看详细示例 

      +

      查看详细示例

      规范

      diff --git a/files/zh-cn/web/api/broadcast_channel_api/index.html b/files/zh-cn/web/api/broadcast_channel_api/index.html index 925fa0a2961852..c93f4761b1f58b 100644 --- a/files/zh-cn/web/api/broadcast_channel_api/index.html +++ b/files/zh-cn/web/api/broadcast_channel_api/index.html @@ -5,7 +5,7 @@ ---

      {{DefaultAPISidebar("Broadcast Channel API")}}

      -

      Broadcast Channel API 可以实现同 {{glossary("origin", "源")}} 下浏览器不同窗口,Tab 页,frame 或者 iframe 下的 {{glossary("browsing context", "浏览器上下文")}} (通常是同一个网站下不同的页面) 之间的简单通讯。

      +

      Broadcast Channel API 可以实现同 {{glossary("origin", "源")}} 下浏览器不同窗口,Tab 页,frame 或者 iframe 下的 {{glossary("browsing context", "浏览器上下文")}} (通常是同一个网站下不同的页面) 之间的简单通讯。

      {{AvailableInWorkers}}

      @@ -19,7 +19,7 @@

      Broadcast Channel 接口

      创建或加入某个频道

      -

      BroadcastChannel 接口非常简单。通过创建一个 {{domxref("BroadcastChannel")}} 对象,一个客户端就加入了某个指定的频道。只需要向 构造函数 传入一个参数:频道名称。如果这是首次连接到该广播频道,相应资源会自动被创建。

      +

      BroadcastChannel 接口非常简单。通过创建一个 {{domxref("BroadcastChannel")}} 对象,一个客户端就加入了某个指定的频道。只需要向 构造函数 传入一个参数:频道名称。如果这是首次连接到该广播频道,相应资源会自动被创建。

      // 连接到广播频道
       var bc = new BroadcastChannel('test_channel');
      @@ -37,7 +37,7 @@ 

      发送消息

      接收消息

      -

      当消息被发送之后,所有连接到该频道的 {{domxref("BroadcastChannel")}} 对象上都会触发 {{event("message")}} 事件。该事件没有默认的行为,但是可以使用 {{domxref("BroadcastChannel.onmessage", "onmessage")}} 事件处理程序来定义一个函数来处理消息。

      +

      当消息被发送之后,所有连接到该频道的 {{domxref("BroadcastChannel")}} 对象上都会触发 {{event("message")}} 事件。该事件没有默认的行为,但是可以使用 {{domxref("BroadcastChannel.onmessage", "onmessage")}} 事件处理程序来定义一个函数来处理消息。

      // 简单示例,用于将事件打印到控制台
       bc.onmessage = function (ev) { console.log(ev); }
      @@ -45,7 +45,7 @@ 

      接收消息

      与频道断开连接

      -

      通过调用 BroadcastChannel 对象的 {{domxref("BroadcastChannel.close", "close()")}} 方法,可以离开频道。这将断开该对象和其关联的频道之间的联系,并允许它被垃圾回收。

      +

      通过调用 BroadcastChannel 对象的 {{domxref("BroadcastChannel.close", "close()")}} 方法,可以离开频道。这将断开该对象和其关联的频道之间的联系,并允许它被垃圾回收。

      // 断开频道连接
       bc.close()
      diff --git a/files/zh-cn/web/api/broadcastchannel/broadcastchannel/index.html b/files/zh-cn/web/api/broadcastchannel/broadcastchannel/index.html
      index 1a94cb2ac01675..b759ef68ff2de5 100644
      --- a/files/zh-cn/web/api/broadcastchannel/broadcastchannel/index.html
      +++ b/files/zh-cn/web/api/broadcastchannel/broadcastchannel/index.html
      @@ -5,7 +5,7 @@
       ---
       

      {{APIRef("BroadCastChannel API")}}

      -

      BroadcastChannel() 构建函数用于创建一个 {{domxref("BroadcastChannel")}} 对象,并与对应的频道相关联。

      +

      BroadcastChannel() 构建函数用于创建一个 {{domxref("BroadcastChannel")}} 对象,并与对应的频道相关联。

      {{AvailableInWorkers}}

      @@ -17,7 +17,7 @@

      channel
      -
      频道名称,类型为 {{domxref("DOMString")}};在相同的 {{glossary("origin", "源")}} 下,一个名称只对应一个频道,所有 {{glossary("browsing context", "浏览器上下文")}} 共用。 
      +
      频道名称,类型为 {{domxref("DOMString")}};在相同的 {{glossary("origin", "源")}} 下,一个名称只对应一个频道,所有 {{glossary("browsing context", "浏览器上下文")}} 共用。

      示例

      diff --git a/files/zh-cn/web/api/broadcastchannel/index.html b/files/zh-cn/web/api/broadcastchannel/index.html index 09a0f23a0f4006..8e9e7dc7b2b6d0 100644 --- a/files/zh-cn/web/api/broadcastchannel/index.html +++ b/files/zh-cn/web/api/broadcastchannel/index.html @@ -13,7 +13,7 @@ ---

      {{APIRef("Broadcast Channel API")}}

      -

      BroadcastChannel 接口代理了一个命名频道,可以让指定 {{glossary("origin")}} 下的任意 {{glossary("browsing context")}} 来订阅它。它允许同源的不同浏览器窗口,Tab 页,frame 或者 iframe 下的不同文档之间相互通信。通过触发一个 {{event("message")}} 事件,消息可以广播到所有监听了该频道的 BroadcastChannel 对象。

      +

      BroadcastChannel 接口代理了一个命名频道,可以让指定 {{glossary("origin")}} 下的任意 {{glossary("browsing context")}} 来订阅它。它允许同源的不同浏览器窗口,Tab 页,frame 或者 iframe 下的不同文档之间相互通信。通过触发一个 {{event("message")}} 事件,消息可以广播到所有监听了该频道的 BroadcastChannel 对象。

      {{AvailableInWorkers}}

      @@ -35,9 +35,9 @@

      属性

      事件处理程序

      {{domxref("BroadcastChannel.onmessage")}}
      -
      {{event("Event_handlers", "event handler")}} ,用于定义当该对象上触发了 {{event("message")}} 事件时要执行的函数。
      +
      {{event("Event_handlers", "event handler")}} ,用于定义当该对象上触发了 {{event("message")}} 事件时要执行的函数。
      {{domxref("BroadcastChannel.onmessageerror")}}
      -
      {{event("Event_handlers", "event handler")}} ,用于定义当该对象上触发了类型为 {{domxref("MessageError")}} 的 {{domxref("MessageEvent")}} 事件时要执行的函数。当接收到一条无法反序列化的消息时会触发此事件。
      +
      {{event("Event_handlers", "event handler")}} ,用于定义当该对象上触发了类型为 {{domxref("MessageError")}} 的 {{domxref("MessageEvent")}} 事件时要执行的函数。当接收到一条无法反序列化的消息时会触发此事件。

    方法

    @@ -47,7 +47,7 @@

    方法

    {{domxref("BroadcastChannel.postMessage()")}}

    -
    向所有监听了相同频道的 BroadcastChannel 对象发送一条消息,消息内容可以是任意类型的数据。 
    +
    向所有监听了相同频道的 BroadcastChannel 对象发送一条消息,消息内容可以是任意类型的数据。
    {{domxref("BroadcastChannel.close()")}}
    关闭频道对象,告诉它不要再接收新的消息,并允许它最终被垃圾回收。
    diff --git a/files/zh-cn/web/api/broadcastchannel/message_event/index.html b/files/zh-cn/web/api/broadcastchannel/message_event/index.html index 8957babe7c8857..10f24ccf6eab6f 100644 --- a/files/zh-cn/web/api/broadcastchannel/message_event/index.html +++ b/files/zh-cn/web/api/broadcastchannel/message_event/index.html @@ -10,7 +10,7 @@ ---
    {{APIRef}}
    -

    当频道收到一条消息时,会在关联的 {{domxref('BroadcastChannel')}} 对象上触发 message 事件。

    +

    当频道收到一条消息时,会在关联的 {{domxref('BroadcastChannel')}} 对象上触发 message 事件。

    @@ -37,7 +37,7 @@

    示例

    实时示例

    -

    在这个例子中,有一个 <iframe> 作为发送者,当用户点击按钮之后,会广播 <textarea> 中的内容。同时,有两个 <iframe> 作为接收者,会监听广播的消息,并将结果写入 <div> 元素。

    +

    在这个例子中,有一个 <iframe> 作为发送者,当用户点击按钮之后,会广播 <textarea> 中的内容。同时,有两个 <iframe> 作为接收者,会监听广播的消息,并将结果写入 <div> 元素。

    发送者

    diff --git a/files/zh-cn/web/api/broadcastchannel/messageerror_event/index.html b/files/zh-cn/web/api/broadcastchannel/messageerror_event/index.html index 2c90486d85e889..1aae5699fe59dc 100644 --- a/files/zh-cn/web/api/broadcastchannel/messageerror_event/index.html +++ b/files/zh-cn/web/api/broadcastchannel/messageerror_event/index.html @@ -30,7 +30,7 @@

    示例

    -

    以下代码使用 addEventListener 来监听消息和错误:

    +

    以下代码使用 addEventListener 来监听消息和错误:

    const channel = new BroadcastChannel('example-channel');
     
    @@ -42,7 +42,7 @@ 

    示例

    console.error(event); });
    -

    使用 onmessageonmessageerror 事件处理程序来实现相同效果:

    +

    使用 onmessageonmessageerror 事件处理程序来实现相同效果:

    const channel = new BroadcastChannel('example-channel');
     
    diff --git a/files/zh-cn/web/api/broadcastchannel/postmessage/index.html b/files/zh-cn/web/api/broadcastchannel/postmessage/index.html
    index 1d86250387f0a5..40eda43ee346fd 100644
    --- a/files/zh-cn/web/api/broadcastchannel/postmessage/index.html
    +++ b/files/zh-cn/web/api/broadcastchannel/postmessage/index.html
    @@ -5,7 +5,7 @@
     ---
     

    {{APIRef("BroadCastChannel API")}}

    -

    可以使用 BroadcastChannel.postMessage() 发送一条任意 {{jsxref("Object")}} 类型的消息,给所有同{{glossary("origin", "源")}}下监听了该频道的所有{{glossary("browsing context", "浏览器上下文")}}。消息以 {{event("message")}} 事件的形式发送给每一个绑定到该频道的广播频道。

    +

    可以使用 BroadcastChannel.postMessage() 发送一条任意 {{jsxref("Object")}} 类型的消息,给所有同{{glossary("origin", "源")}}下监听了该频道的所有{{glossary("browsing context", "浏览器上下文")}}。消息以 {{event("message")}} 事件的形式发送给每一个绑定到该频道的广播频道。

    {{AvailableInWorkers}}

    diff --git a/files/zh-cn/web/api/cache/add/index.html b/files/zh-cn/web/api/cache/add/index.html index cc236ae9136ef0..c6485eab9e7e4e 100644 --- a/files/zh-cn/web/api/cache/add/index.html +++ b/files/zh-cn/web/api/cache/add/index.html @@ -5,7 +5,7 @@ ---

    {{APIRef("Service Workers API")}}{{SeeCompatTable}}

    -

    {{domxref("Cache")}}接口的 add()方法接受一个 URL 作为参数,请求参数指定的 URL,并将返回的 response 对象添加到给定的 cache 中。 add() 方法在功能上等同于以下代码:

    +

    {{domxref("Cache")}}接口的 add()方法接受一个 URL 作为参数,请求参数指定的 URL,并将返回的 response 对象添加到给定的 cache 中。 add() 方法在功能上等同于以下代码:

    fetch(url).then(function (response) {
       if (!response.ok) {
    @@ -17,11 +17,11 @@
     

    对于更复杂的操作,您可以直接使用{{domxref("Cache.put","Cache.put()")}}这个 API。

    -

    注意: add() 将会覆盖之前存储在 cache 中与 request 匹配的任何 key/value 对。

    +

    注意: add() 将会覆盖之前存储在 cache 中与 request 匹配的任何 key/value 对。

    -

    注意: 之前的 Cache  (Blink 和 Gecko 内核版本) 在实现{{domxref("Cache.add")}}, {{domxref("Cache.addAll")}}, 和 {{domxref("Cache.put")}} 的策略是在 response 结果完全写入缓存后才会 resolve 当前的 promise。更新后的规范版本中一旦条目被记录到数据库就会 resolve 当前的 promise,即使当前 response 结果还在传输中。

    +

    注意: 之前的 Cache (Blink 和 Gecko 内核版本) 在实现{{domxref("Cache.add")}}, {{domxref("Cache.addAll")}}, 和 {{domxref("Cache.put")}} 的策略是在 response 结果完全写入缓存后才会 resolve 当前的 promise。更新后的规范版本中一旦条目被记录到数据库就会 resolve 当前的 promise,即使当前 response 结果还在传输中。

    语法

    @@ -35,12 +35,12 @@

    参数

    request
    -
    要添加到 cache 的 request。它可以是一个 {{domxref("Request")}} 对象,也可以是 URL。
    +
    要添加到 cache 的 request。它可以是一个 {{domxref("Request")}} 对象,也可以是 URL。

    返回值

    -

    void 返回值的 {{jsxref("Promise")}} 

    +

    void 返回值的 {{jsxref("Promise")}}

    Exceptions

    @@ -55,9 +55,9 @@

    Exceptions

    diff --git a/files/zh-cn/web/api/cache/addall/index.html b/files/zh-cn/web/api/cache/addall/index.html index 74dbdf51454ac9..d657e56766193c 100644 --- a/files/zh-cn/web/api/cache/addall/index.html +++ b/files/zh-cn/web/api/cache/addall/index.html @@ -10,11 +10,11 @@

    概要

    {{domxref("Cache")}} 接口的 addAll() 方法接受一个 URL 数组,检索它们,并将生成的 response 对象添加到给定的缓存中。 在检索期间创建的 request 对象成为存储的 response 操作的 key。

    -

    NoteaddAll() will overwrite any key/value pairs previously stored in the cache that match the request, but will fail if a resulting put() operation would overwrite a previous cache entry created by the same addAll() method.

    +

    Note: addAll() will overwrite any key/value pairs previously stored in the cache that match the request, but will fail if a resulting put() operation would overwrite a previous cache entry created by the same addAll() method.

    -

    Note: Initial Cache implementations (in both Blink and Gecko) resolve {{domxref("Cache.add")}}, {{domxref("Cache.addAll")}}, and {{domxref("Cache.put")}} promises when the response body is fully written to storage.  More recent spec versions have newer language stating that the browser can resolve the promise as soon as the entry is recorded in the database even if the response body is still streaming in.

    +

    Note: Initial Cache implementations (in both Blink and Gecko) resolve {{domxref("Cache.add")}}, {{domxref("Cache.addAll")}}, and {{domxref("Cache.put")}} promises when the response body is fully written to storage. More recent spec versions have newer language stating that the browser can resolve the promise as soon as the entry is recorded in the database even if the response body is still streaming in.

    语法

    @@ -33,7 +33,7 @@

    参数

    返回值

    -

    A {{jsxref("Promise")}} that resolves with void.

    +

    A {{jsxref("Promise")}} that resolves with void.

    Exceptions

    diff --git a/files/zh-cn/web/api/cache/delete/index.html b/files/zh-cn/web/api/cache/delete/index.html index a369b77a422617..43bb88c69de5ff 100644 --- a/files/zh-cn/web/api/cache/delete/index.html +++ b/files/zh-cn/web/api/cache/delete/index.html @@ -8,7 +8,7 @@ ---

    {{APIRef("Service Workers API")}}{{SeeCompatTable}}

    -

    {{domxref("Cache")}} 接口的 delete() 方法查询 request 为 key 的 {{domxref("Cache")}} 条目,如果找到,则删除该 {{domxref("Cache")}} 条目并返回 resolve 为 true 的 {{jsxref("Promise")}} 。 如果没有找到,则返回 resolve 为 false 的 {{jsxref("Promise")}} 。

    +

    {{domxref("Cache")}} 接口的 delete() 方法查询 request 为 key 的 {{domxref("Cache")}} 条目,如果找到,则删除该 {{domxref("Cache")}} 条目并返回 resolve 为 true 的 {{jsxref("Promise")}} 。 如果没有找到,则返回 resolve 为 false 的 {{jsxref("Promise")}} 。

    语法

    @@ -29,9 +29,9 @@

    参数

    options {{optional_inline}}
    一个对象,其属性控制删除操作中如何处理匹配缓存。可用的选项是:
      -
    • ignoreSearch: 一个 {{domxref("Boolean")}} 值,指定匹配进程中是否忽略 url 中的查询字符串。如果设置为 true,http://foo.com/?value=bar 中的 ?value=bar 部分在执行匹配时会被忽略。默认为 false。
    • +
    • ignoreSearch: 一个 {{domxref("Boolean")}} 值,指定匹配进程中是否忽略 url 中的查询字符串。如果设置为 true,http://foo.com/?value=bar 中的 ?value=bar 部分在执行匹配时会被忽略。默认为 false。
    • ignoreMethod: 一个 {{domxref("Boolean")}} 值,当设置为 true 时,将阻止匹配操作验证{domxref("Request")}} HTTP 方法(通常只允许 GET 和 HEAD)。默认为 false。
    • -
    • ignoreVary: 一个 {{domxref("Boolean")}} 值,当设置为 true 时,告诉匹配操作不执行VARY 头匹配。In other words, if the URL matches you will get a match regardless of  whether the {{domxref("Response")}} object has a VARY header. 默认为 false。
    • +
    • ignoreVary: 一个 {{domxref("Boolean")}} 值,当设置为 true 时,告诉匹配操作不执行VARY 头匹配。In other words, if the URL matches you will get a match regardless of whether the {{domxref("Response")}} object has a VARY header. 默认为 false。
    • cacheName: A {{domxref("DOMString")}} that represents a specific cache to search within. Note that this option is ignored by Cache.delete().
    @@ -40,7 +40,7 @@

    参数

    示例

    caches.open('v1').then(function(cache) {
    -  cache.delete('/images/image.png').then(function(response) {
    +  cache.delete('/images/image.png').then(function(response) {
         someUIUpdateFunction();
       });
     })
    diff --git a/files/zh-cn/web/api/cache/index.html b/files/zh-cn/web/api/cache/index.html index e8e0713b1f445a..06fd45f3f18e76 100644 --- a/files/zh-cn/web/api/cache/index.html +++ b/files/zh-cn/web/api/cache/index.html @@ -11,18 +11,18 @@ ---

    {{APIRef("Service Workers API")}}{{SeeCompatTable}}

    -

    Cache 接口为缓存的 Request / Response  对象对提供存储机制,例如,作为{{domxref("ServiceWorker")}} 生命周期的一部分。请注意,Cache 接口像 workers 一样,是暴露在 window 作用域下的。尽管它被定义在 service worker 的标准中, 但是它不必一定要配合 service worker 使用。

    +

    Cache 接口为缓存的 Request / Response 对象对提供存储机制,例如,作为{{domxref("ServiceWorker")}} 生命周期的一部分。请注意,Cache 接口像 workers 一样,是暴露在 window 作用域下的。尽管它被定义在 service worker 的标准中, 但是它不必一定要配合 service worker 使用。

    -

    一个域可以有多个命名 Cache 对象。你需要在你的脚本 (例如,在 {{domxref("ServiceWorker")}} 中) 中处理缓存更新的方式。除非明确地更新缓存,否则缓存将不会被更新;除非删除,否则缓存数据不会过期。使用 {{domxref("CacheStorage.open", "CacheStorage.open(cacheName)")}} 打开一个 Cache 对象,再使用 Cache 对象的方法去处理缓存。

    +

    一个域可以有多个命名 Cache 对象。你需要在你的脚本 (例如,在 {{domxref("ServiceWorker")}} 中) 中处理缓存更新的方式。除非明确地更新缓存,否则缓存将不会被更新;除非删除,否则缓存数据不会过期。使用 {{domxref("CacheStorage.open", "CacheStorage.open(cacheName)")}} 打开一个 Cache 对象,再使用 Cache 对象的方法去处理缓存。

    -

    你需要定期地清理缓存条目,因为每个浏览器都硬性限制了一个域下缓存数据的大小。缓存配额使用估算值,可以使用 {{domxref("StorageEstimate")}} API 获得。浏览器尽其所能去管理磁盘空间,但它有可能删除一个域下的缓存数据。浏览器要么自动删除特定域的全部缓存,要么全部保留。确保按名称安装版本缓存,并仅从可以安全操作的脚本版本中使用缓存。查看 Deleting old caches 获取更多信息。

    +

    你需要定期地清理缓存条目,因为每个浏览器都硬性限制了一个域下缓存数据的大小。缓存配额使用估算值,可以使用 {{domxref("StorageEstimate")}} API 获得。浏览器尽其所能去管理磁盘空间,但它有可能删除一个域下的缓存数据。浏览器要么自动删除特定域的全部缓存,要么全部保留。确保按名称安装版本缓存,并仅从可以安全操作的脚本版本中使用缓存。查看 Deleting old caches 获取更多信息。

    -

    Note: {{domxref("Cache.put")}}, {{domxref("Cache.add")}}和{{domxref("Cache.addAll")}}只能在GET请求下使用。

    +

    Note: {{domxref("Cache.put")}}, {{domxref("Cache.add")}}和{{domxref("Cache.addAll")}}只能在GET请求下使用。

    -

    Note: Initial Cache implementations (in both Blink and Gecko) resolve {{domxref("Cache.add")}}, {{domxref("Cache.addAll")}}, and {{domxref("Cache.put")}} promises when the response body is fully written to storage.  More recent spec versions have newer language stating that the browser can resolve the promise as soon as the entry is recorded in the database even if the response body is still streaming in.

    +

    Note: Initial Cache implementations (in both Blink and Gecko) resolve {{domxref("Cache.add")}}, {{domxref("Cache.addAll")}}, and {{domxref("Cache.put")}} promises when the response body is fully written to storage. More recent spec versions have newer language stating that the browser can resolve the promise as soon as the entry is recorded in the database even if the response body is still streaming in.

    @@ -41,11 +41,11 @@

    方法

    {{domxref("Cache.match", "Cache.match(request, options)")}}
    -
    返回一个 {{jsxref("Promise")}}对象,resolve 的结果是跟 {{domxref("Cache")}} 对象匹配的第一个已经缓存的请求。
    +
    返回一个 {{jsxref("Promise")}}对象,resolve 的结果是跟 {{domxref("Cache")}} 对象匹配的第一个已经缓存的请求。
    {{domxref("Cache.matchAll", "Cache.matchAll(request, options)")}}
    返回一个{{jsxref("Promise")}} 对象,resolve 的结果是跟{{domxref("Cache")}}对象匹配的所有请求组成的数组。
    {{domxref("Cache.add", "Cache.add(request)")}}
    -
    抓取这个 URL,检索并把返回的 response 对象添加到给定的 Cache 对象。这在功能上等同于调用 fetch(), 然后使用 Cache.put() 将 response 添加到 cache 中。
    +
    抓取这个 URL,检索并把返回的 response 对象添加到给定的 Cache 对象。这在功能上等同于调用 fetch(), 然后使用 Cache.put() 将 response 添加到 cache 中。
    {{domxref("Cache.addAll", "Cache.addAll(requests)")}}
    抓取一个 URL 数组,检索并把返回的 response 对象添加到给定的 Cache 对象。
    {{domxref("Cache.put", "Cache.put(request, response)")}}
    @@ -58,7 +58,7 @@

    方法

    示例

    -

    此代码段来自 service worker selective caching sample. (请参阅 selective caching live) 。该代码使用{{domxref("CacheStorage.open", "CacheStorage.open(cacheName)")}} 打开任何具有以font/开始的Content-Type 头的{{domxref("Cache")}}对象。

    +

    此代码段来自 service worker selective caching sample. (请参阅 selective caching live) 。该代码使用{{domxref("CacheStorage.open", "CacheStorage.open(cacheName)")}} 打开任何具有以font/开始的Content-Type 头的{{domxref("Cache")}}对象。

    代码然后使用{{domxref("Cache.match", "Cache.match(request, options)")}}查看缓存中是否已经有一个匹配的 font,如果是,则返回它。 如果没有匹配的字体,代码将通过网络获取字体,并使用 {{domxref("Cache.put","Cache.put(request, response)")}}来缓存获取的资源。

    @@ -66,7 +66,7 @@

    示例

    该代码片段还展示了服务工作线程使用的缓存版本控制的最佳实践。 虽然在这个例子中只有一个缓存,但同样的方法可用于多个缓存。 它将缓存的速记标识符映射到特定的版本化缓存名称。 代码还会删除命名不在 CURRENT_CACHES 中的所有缓存。

    -
    注意: 在 Chrome 中,请访问 chrome://inspect/#service-workers ,然后单击注册的服务工作线程下面的“inspect”链接,查看 service-worker.js 脚本正在执行的各种操作的日志记录。
    +
    注意: 在 Chrome 中,请访问 chrome://inspect/#service-workers ,然后单击注册的服务工作线程下面的“inspect”链接,查看 service-worker.js 脚本正在执行的各种操作的日志记录。
    var CACHE_VERSION = 1;
     
    diff --git a/files/zh-cn/web/api/cache/keys/index.html b/files/zh-cn/web/api/cache/keys/index.html
    index d8b621c59580d9..ebe8857475f324 100644
    --- a/files/zh-cn/web/api/cache/keys/index.html
    +++ b/files/zh-cn/web/api/cache/keys/index.html
    @@ -5,7 +5,7 @@
     ---
     

    {{APIRef("Service Workers API")}}{{SeeCompatTable}}

    -

     {{domxref("Cache")}} 接口的 keys() 方法返回一个 {{jsxref("Promise")}} ,这个 {{jsxref("Promise")}} 将解析为一个{{domxref("Cache")}} 键的数组。

    +

    {{domxref("Cache")}} 接口的 keys() 方法返回一个 {{jsxref("Promise")}} ,这个 {{jsxref("Promise")}} 将解析为一个{{domxref("Cache")}} 键的数组。

    请求将以它们被插入的顺序返回。

    @@ -22,20 +22,20 @@

    语法

    返回值

    -

    返回一个解析为 {{domxref("Cache")}} 键数组的 {{jsxref("Promise")}}。

    +

    返回一个解析为 {{domxref("Cache")}} 键数组的 {{jsxref("Promise")}}。

    参数

    request {{optional_inline}}
    -
    如果一个相关键被指定,则返对应的 {{domxref("Request")}} 。
    +
    如果一个相关键被指定,则返对应的 {{domxref("Request")}} 。
    options {{optional_inline}}
    一个对象,它的属性决定了 keys 操作中的匹配操作是如何执行的。可选的属性有:
      -
    • ignoreSearch: 一个 {{domxref("Boolean")}} 值,指定了匹配操作是否忽略 url 中的查询部分。如果为 true ,在执行匹配操作时, http://foo.com/?value=bar 的 ?value=bar 部分将会被忽。默认为 false 。
    • -
    • ignoreMethod: 一个 {{domxref("Boolean")}} 值,当为 true 时, 将会阻止匹配操作验证 {{domxref("Request")}} 的 HTTP 方法(通常只有 GET 和 HEAD 方法被允许)。默认为 false 。
    • -
    • ignoreVary: 一个 {{domxref("Boolean")}} 值,当为 true 时,告诉匹配操作不要验证 VARY 头部。换句话说,如果 URL 匹配,你会得到一个匹配而不管 {{domxref("Response")}} 对象是否有 VARY 头部。默认为 false 。
    • -
    • cacheName: 一个 {{domxref("DOMString")}} 值,描述了在一个特定的 cache 中进行匹配。注意这个选项会被 Cache.keys() 方法忽略。
    • +
    • ignoreSearch: 一个 {{domxref("Boolean")}} 值,指定了匹配操作是否忽略 url 中的查询部分。如果为 true ,在执行匹配操作时, http://foo.com/?value=bar?value=bar 部分将会被忽。默认为 false 。
    • +
    • ignoreMethod: 一个 {{domxref("Boolean")}} 值,当为 true 时, 将会阻止匹配操作验证 {{domxref("Request")}} 的 HTTP 方法(通常只有 GET 和 HEAD 方法被允许)。默认为 false 。
    • +
    • ignoreVary: 一个 {{domxref("Boolean")}} 值,当为 true 时,告诉匹配操作不要验证 VARY 头部。换句话说,如果 URL 匹配,你会得到一个匹配而不管 {{domxref("Response")}} 对象是否有 VARY 头部。默认为 false 。
    • +
    • cacheName: 一个 {{domxref("DOMString")}} 值,描述了在一个特定的 cache 中进行匹配。注意这个选项会被 Cache.keys() 方法忽略。
    diff --git a/files/zh-cn/web/api/cache/match/index.html b/files/zh-cn/web/api/cache/match/index.html index 8829b4fc8401d7..bc56beb53a7053 100644 --- a/files/zh-cn/web/api/cache/match/index.html +++ b/files/zh-cn/web/api/cache/match/index.html @@ -10,7 +10,7 @@ ---

    {{APIRef("Service Workers API")}}{{SeeCompatTable}}

    -

    {{domxref("Cache")}} 接口的 match() 方法,返回一个 {{jsxref("Promise")}} 解析为 (resolve to) 与 {{domxref("Cache")}} 对象中的第一个匹配请求相关联的{{domxref("Response")}} 。如果没有找到匹配,{{jsxref("Promise")}} 解析为 {{jsxref("undefined")}}。

    +

    {{domxref("Cache")}} 接口的 match() 方法,返回一个 {{jsxref("Promise")}} 解析为 (resolve to) 与 {{domxref("Cache")}} 对象中的第一个匹配请求相关联的{{domxref("Response")}} 。如果没有找到匹配,{{jsxref("Promise")}} 解析为 {{jsxref("undefined")}}。

    语法

    @@ -21,10 +21,10 @@

    语法

    返回值

    -

    一个 {{jsxref("Promise")}} 对象,该对象解析为第一个匹配请求的 {{domxref("Response")}} 对象,如果没有匹配到,则解析到 {{jsxref("undefined")}} 。

    +

    一个 {{jsxref("Promise")}} 对象,该对象解析为第一个匹配请求的 {{domxref("Response")}} 对象,如果没有匹配到,则解析到 {{jsxref("undefined")}} 。

    -

    Note: Cache.match() 基本上和 {{domxref("Cache.matchAll()")}} 一样,只不过 Cache.match() 只解析为 response[0] (第一个匹配的响应 (response) 对象) 而不是 response[] (所有响应对象组成的数组)。

    +

    Note: Cache.match() 基本上和 {{domxref("Cache.matchAll()")}} 一样,只不过 Cache.match() 只解析为 response[0] (第一个匹配的响应 (response) 对象) 而不是 response[] (所有响应对象组成的数组)。

    参数

    @@ -33,23 +33,23 @@

    参数

    request
    在{{domxref("Cache")}}对象中查找的{{domxref("Request")}}对象对应的 response。这个{{domxref("Request")}}可以是 object 或者是一个 URL.
    options {{optional_inline}}
    -
    一个为 match 操作设置选项的对象。有效的选项如下: +
    一个为 match 操作设置选项的对象。有效的选项如下:
      -
    • ignoreSearch: 一个 {{domxref("Boolean")}} 值用来设置是否忽略 url 中的 query 部分。例如,如果该参数设置为 true ,那么 http://foo.com/?value=bar 中的 ?value=bar 部分就会在匹配中被忽略。该选项默认为 false
    • -
    • ignoreMethod: 一个 {{domxref("Boolean")}} 值,如果设置为 true在匹配时就不会验证 {{domxref("Request")}} 对象的http 方法 (通常只允许是 GET 或 HEAD 。) 该参数默认值为 false
    • -
    • ignoreVary: 一个 {{domxref("Boolean")}} 值,该值如果为 true 则匹配时不进行 VARY 部分的匹配。例如,如果一个 URL 匹配,此时无论{{domxref("Response")}}对象是否包含VARY头部,都会认为是成功匹配。该参数默认为 false
    • -
    • cacheName: 一个 {{domxref("DOMString")}} ,代表一个具体的要被搜索的缓存。注意该选项被 Cache.match()方法忽略。
    • +
    • ignoreSearch: 一个 {{domxref("Boolean")}} 值用来设置是否忽略 url 中的 query 部分。例如,如果该参数设置为 true ,那么 http://foo.com/?value=bar 中的 ?value=bar 部分就会在匹配中被忽略。该选项默认为 false
    • +
    • ignoreMethod: 一个 {{domxref("Boolean")}} 值,如果设置为 true在匹配时就不会验证 {{domxref("Request")}} 对象的http 方法 (通常只允许是 GETHEAD 。) 该参数默认值为 false
    • +
    • ignoreVary: 一个 {{domxref("Boolean")}} 值,该值如果为 true 则匹配时不进行 VARY 部分的匹配。例如,如果一个 URL 匹配,此时无论{{domxref("Response")}}对象是否包含VARY头部,都会认为是成功匹配。该参数默认为 false
    • +
    • cacheName: 一个 {{domxref("DOMString")}} ,代表一个具体的要被搜索的缓存。注意该选项被 Cache.match()方法忽略。

    例子

    -

    这个是个来自 custom offline page 的例子 (live demo)。

    +

    这个是个来自 custom offline page 的例子 (live demo)。

    -

    下面的例子在请求失败时提供特定的数据。 catch() 在 fetch() 的调用抛出异常时触发。在 catch() 语句中, match()用来返回正确的响应。

    +

    下面的例子在请求失败时提供特定的数据。 catch()fetch() 的调用抛出异常时触发。在 catch() 语句中, match()用来返回正确的响应。

    -

    在这个例子中,我们决定只缓存通过 GET 取得的 HTML 文档. 如果 if() 条件是 false,那么这个 fetch 处理器就不会处理这个请求。如果还有其他的 fetch 处理器被注册,它们将有机会调用 event.respondWith() 如果没有 fetch 处理器调用 event.respondWith() ,该请求就会像没有 service worker 介入一样由浏览器处理。如果 fetch() 返回了有效的 HTTP 响应,相应码是 4xx 或 5xx,那么catch() 就不会被调用。

    +

    在这个例子中,我们决定只缓存通过 GET 取得的 HTML 文档. 如果 if() 条件是 false,那么这个 fetch 处理器就不会处理这个请求。如果还有其他的 fetch 处理器被注册,它们将有机会调用 event.respondWith() 如果没有 fetch 处理器调用 event.respondWith() ,该请求就会像没有 service worker 介入一样由浏览器处理。如果 fetch() 返回了有效的 HTTP 响应,相应码是 4xx 或 5xx,那么catch()不会被调用。

    self.addEventListener('fetch', function(event) {
       // 我们只想在用 GET 方法请求 HTML 文档时调用 event.respondWith()。
    diff --git a/files/zh-cn/web/api/cache/matchall/index.html b/files/zh-cn/web/api/cache/matchall/index.html
    index 04ce5341e5d456..bf5cc470e0f9c0 100644
    --- a/files/zh-cn/web/api/cache/matchall/index.html
    +++ b/files/zh-cn/web/api/cache/matchall/index.html
    @@ -5,7 +5,7 @@
     ---
     

    {{APIRef("Service Workers API")}}{{SeeCompatTable}}

    -

    {{domxref("Cache")}} 接口的 matchAll() 方法返回一个 {{jsxref("Promise")}} ,其 resolve 为 {{domxref("Cache")}} 对象中所有匹配请求的数组。

    +

    {{domxref("Cache")}} 接口的 matchAll() 方法返回一个 {{jsxref("Promise")}} ,其 resolve 为 {{domxref("Cache")}} 对象中所有匹配请求的数组。

    语法

    @@ -16,10 +16,10 @@

    语法

    返回值

    -

    一个 {{jsxref("Promise")}},resolve 为 {{domxref("Cache")}} 对象中所有匹配请求的数组。

    +

    一个 {{jsxref("Promise")}},resolve 为 {{domxref("Cache")}} 对象中所有匹配请求的数组。

    -

    注意: {{domxref("Cache.match()")}} 基本上与Cache.matchAll() 相同,除了它 resolve 为 response[0] (即第一个匹配响应) 而不是 response (数组中所有匹配的响应)。

    +

    注意: {{domxref("Cache.match()")}} 基本上与Cache.matchAll() 相同,除了它 resolve 为 response[0] (即第一个匹配响应) 而不是 response (数组中所有匹配的响应)。

    参数

    @@ -28,11 +28,11 @@

    参数

    request {{optional_inline}}
    {{domxref("Cache")}} 中你尝试查找的 The {{domxref("Request")}} . 如果忽略这一参数,你将获取到 cache 中所有 response 的副本。
    options {{optional_inline}}
    -
    一个选项对象,允许你为 match 操作中要做的匹配设置特定控制选项。可用选项包括: +
    一个选项对象,允许你为 match 操作中要做的匹配设置特定控制选项。可用选项包括:
      -
    • ignoreSearch: 一个 {{domxref("Boolean")}} 值用来设置匹配操作是否忽略 url 中的 query 部分。如果该参数设置为 true ,那么 http://foo.com/?value=bar 中的 ?value=bar 部分就会在匹配中被忽略。该选项默认为 false
    • -
    • ignoreMethod: 一个 {{domxref("Boolean")}} 值,如果设置为 true在匹配时就不会验证 {{domxref("Request")}} 对象的http 方法 (通常只允许是 GET 或 HEAD 。) 该参数默认值为 false
    • -
    • ignoreVary: 一个 {{domxref("Boolean")}} 值,该值如果为 true 则匹配时不进行 VARY 部分的匹配。例如,如果一个 URL 匹配,此时无论{{domxref("Response")}}对象是否包含VARY头部,都会认为是成功匹配。该参数默认为 false
    • +
    • ignoreSearch: 一个 {{domxref("Boolean")}} 值用来设置匹配操作是否忽略 url 中的 query 部分。如果该参数设置为 true ,那么 http://foo.com/?value=bar 中的 ?value=bar 部分就会在匹配中被忽略。该选项默认为 false
    • +
    • ignoreMethod: 一个 {{domxref("Boolean")}} 值,如果设置为 true在匹配时就不会验证 {{domxref("Request")}} 对象的http 方法 (通常只允许是 GETHEAD 。) 该参数默认值为 false
    • +
    • ignoreVary: 一个 {{domxref("Boolean")}} 值,该值如果为 true 则匹配时不进行 VARY 部分的匹配。例如,如果一个 URL 匹配,此时无论{{domxref("Response")}}对象是否包含VARY头部,都会认为是成功匹配。该参数默认为 false
    • cacheName: 一个 {{domxref("DOMString")}} ,代表一个具体的要被搜索的缓存。注意该选项被Cache.matchAll()方法忽略。
    diff --git a/files/zh-cn/web/api/cache/put/index.html b/files/zh-cn/web/api/cache/put/index.html index d81daf6ecc17ed..5ced1358a70027 100644 --- a/files/zh-cn/web/api/cache/put/index.html +++ b/files/zh-cn/web/api/cache/put/index.html @@ -5,29 +5,29 @@ ---

    {{APIRef("Service Workers API")}}{{SeeCompatTable}}

    -

    {{domxref("Cache")}} 接口的  put() 方法 允许将键/值对添加到当前的 {{domxref("Cache")}} 对象中。

    +

    {{domxref("Cache")}} 接口的 put() 方法 允许将键/值对添加到当前的 {{domxref("Cache")}} 对象中。

    -

    通常,你只想 {{domxref("GloblFetch.fetch","fetch()")}} 一个或多个请求,然后直接添加结果到 cache 中。这种情况下,最好使用 {{domxref("Cache.add","Cache.add()")}}/{{domxref("Cache.addAll","Cache.addAll()")}},因为它们是一个或者多个这些操作的便捷方法。

    +

    通常,你只想 {{domxref("GloblFetch.fetch","fetch()")}} 一个或多个请求,然后直接添加结果到 cache 中。这种情况下,最好使用 {{domxref("Cache.add","Cache.add()")}}/{{domxref("Cache.addAll","Cache.addAll()")}},因为它们是一个或者多个这些操作的便捷方法。

    fetch(url).then(function(response) {
       if (!response.ok) {
         throw new TypeError('Bad response status');
    -  }
    +  }
       return cache.put(url, response);
     })
     
     
    -

    注意: put() 将覆盖先前存储在匹配请求的 cache 中的任何键/值对。

    +

    注意: put() 将覆盖先前存储在匹配请求的 cache 中的任何键/值对。

    -

    注意: {{domxref("Cache.add")}}/{{domxref("Cache.addAll")}} 不会缓存 Response.status 值不在 200 范围内的响应,而 {{domxref("Cache.put")}} 允许你存储任何请求/响应对。因此,{{domxref("Cache.add")}}/{{domxref("Cache.addAll")}} 不能用于不透明的响应,而 {{domxref("Cache.put")}} 可以。

    +

    注意: {{domxref("Cache.add")}}/{{domxref("Cache.addAll")}} 不会缓存 Response.status 值不在 200 范围内的响应,而 {{domxref("Cache.put")}} 允许你存储任何请求/响应对。因此,{{domxref("Cache.add")}}/{{domxref("Cache.addAll")}} 不能用于不透明的响应,而 {{domxref("Cache.put")}} 可以。

    -

    注意: 当响应主体完全写入磁盘时,初始 Cache 执行 (在 Blink 和 Gecko 中) resolve {{domxref("Cache.add")}}、{{domxref("Cache.addAll")}} 和 {{domxref("Cache.put")}} promise.  更新的规范版本中声明:即使响应主体仍在流式传输,一旦条目被记录到数据库中,浏览器就可以 resolve promise.

    +

    注意: 当响应主体完全写入磁盘时,初始 Cache 执行 (在 Blink 和 Gecko 中) resolve {{domxref("Cache.add")}}、{{domxref("Cache.addAll")}} 和 {{domxref("Cache.put")}} promise. 更新的规范版本中声明:即使响应主体仍在流式传输,一旦条目被记录到数据库中,浏览器就可以 resolve promise.

    语法

    @@ -60,21 +60,21 @@

    示例

    1. Check whether a match for the request is found in the {{domxref("CacheStorage")}} using {{domxref("CacheStorage.match","CacheStorage.match()")}}. If so, serve that.
    2. -
    3. If not, open the v1 cache using open(), put the default network request in the cache using {{domxref("Cache.put","Cache.put()")}} and return a clone of the default network request using return response.clone(). Clone is needed because put() consumes the response body.
    4. +
    5. If not, open the v1 cache using open(), put the default network request in the cache using {{domxref("Cache.put","Cache.put()")}} and return a clone of the default network request using return response.clone(). Clone is needed because put() consumes the response body.
    6. If this fails (e.g., because the network is down), return a fallback response.
    var response;
     var cachedResponse = caches.match(event.request).catch(function() {
    -  return fetch(event.request);
    +  return fetch(event.request);
     }).then(function(r) {
    -  response = r;
    -  caches.open('v1').then(function(cache) {
    -    cache.put(event.request, response);
    -  });
    -  return response.clone();
    +  response = r;
    +  caches.open('v1').then(function(cache) {
    +    cache.put(event.request, response);
    +  });
    +  return response.clone();
     }).catch(function() {
    -  return caches.match('/sw-test/gallery/myLittleVader.jpg');
    +  return caches.match('/sw-test/gallery/myLittleVader.jpg');
     });

    规范

    diff --git a/files/zh-cn/web/api/cachestorage/delete/index.html b/files/zh-cn/web/api/cachestorage/delete/index.html index 0d714b7c0ade92..c75c7ba10ebf7e 100644 --- a/files/zh-cn/web/api/cachestorage/delete/index.html +++ b/files/zh-cn/web/api/cachestorage/delete/index.html @@ -5,7 +5,7 @@ ---

    {{APIRef("Service Workers API")}}{{SeeCompatTable}}

    -

    {{domxref("CacheStorage")}} 接口的 delete() 方法查找匹配 cacheName 的 {{domxref("Cache")}} 对象,如果找到,则删除 {{domxref("Cache")}} 对象并返回一个 resolve 为 true 的 {{jsxref("Promise")}} . 如果未找到 {{domxref("Cache")}} 对象,则返回 false.

    +

    {{domxref("CacheStorage")}} 接口的 delete() 方法查找匹配 cacheName 的 {{domxref("Cache")}} 对象,如果找到,则删除 {{domxref("Cache")}} 对象并返回一个 resolve 为 true 的 {{jsxref("Promise")}} . 如果未找到 {{domxref("Cache")}} 对象,则返回 false.

    语法

    @@ -16,7 +16,7 @@

    语法

    Returns

    -

    如果找到 {{domxref("Cache")}} 对象,删除它,返回一个 resolve 为 true 的 {{jsxref("Promise")}} ,否则,返回 false .

    +

    如果找到 {{domxref("Cache")}} 对象,删除它,返回一个 resolve 为 true 的 {{jsxref("Promise")}} ,否则,返回 false .

    Parameters

    @@ -27,20 +27,20 @@

    Parameters

    实例

    -

    在此代码片段中,我们等待一个 activate 事件,然后运行一个 {{domxref("ExtendableEvent.waitUntil","waitUntil()")}} 块,其在一个新的 service worker 被激活前清除所有旧的、未使用的 cache. 这里我们有一个白名单,其中包含我们想要保留的 cache 的 name. 我们使用 {{domxref("CacheStorage.keys")}} 返回 {{domxref("CacheStorage")}} 对象中 cache 的键,然后检查每个键值,以查看它是否在白名单中。如果没有,我们使用 delete() 删除它。

    +

    在此代码片段中,我们等待一个 activate 事件,然后运行一个 {{domxref("ExtendableEvent.waitUntil","waitUntil()")}} 块,其在一个新的 service worker 被激活前清除所有旧的、未使用的 cache. 这里我们有一个白名单,其中包含我们想要保留的 cache 的 name. 我们使用 {{domxref("CacheStorage.keys")}} 返回 {{domxref("CacheStorage")}} 对象中 cache 的键,然后检查每个键值,以查看它是否在白名单中。如果没有,我们使用 delete() 删除它。

    this.addEventListener('activate', function(event) {
       var cacheWhitelist = ['v2'];
     
       event.waitUntil(
    -    caches.keys().then(function(keyList) {
    -      return Promise.all(keyList.map(function(key) {
    -        if (cacheWhitelist.indexOf(key) === -1) {
    -          return caches.delete(key);
    -        }
    -      }));
    -    })
    -  );
    +    caches.keys().then(function(keyList) {
    +      return Promise.all(keyList.map(function(key) {
    +        if (cacheWhitelist.indexOf(key) === -1) {
    +          return caches.delete(key);
    +        }
    +      }));
    +    })
    +  );
     });

    规范

    diff --git a/files/zh-cn/web/api/cachestorage/has/index.html b/files/zh-cn/web/api/cachestorage/has/index.html index 8f611ffb376198..66be5e6634847b 100644 --- a/files/zh-cn/web/api/cachestorage/has/index.html +++ b/files/zh-cn/web/api/cachestorage/has/index.html @@ -5,7 +5,7 @@ ---

    {{APIRef("Service Workers API")}}{{SeeCompatTable}}

    -

    {{domxref("CacheStorage")}} 对象的 has()方法返回一个 {{jsxref("Promise")}} 对象,当 {{domxref("Cache")}} 对象有 cacheName  时被处理为  true

    +

    {{domxref("CacheStorage")}} 对象的 has()方法返回一个 {{jsxref("Promise")}} 对象,当 {{domxref("Cache")}} 对象有 cacheName 时被处理为 true

    语法

    @@ -16,13 +16,13 @@

    语法

    返回值

    -

    返回一个 {{jsxref("Promise")}} 对象,缓存存在时 resolve 的布尔值为 true 否则为 false 。

    +

    返回一个 {{jsxref("Promise")}} 对象,缓存存在时 resolve 的布尔值为 true 否则为 false

    参数

    cacheName
    -
    一个表示你正在 {{domxref("CacheStorage")}} 中查找的 {{domxref("Cache")}} 对象 name 的 {{domxref("DOMString")}}.
    +
    一个表示你正在 {{domxref("CacheStorage")}} 中查找的 {{domxref("Cache")}} 对象 name 的 {{domxref("DOMString")}}.

    例子

    @@ -31,14 +31,14 @@

    例子

    caches.has('v1').then(function(hasCache) {
       if (!hasCache) {
    -    someCacheSetupfunction();
    +    someCacheSetupfunction();
       } else {
         caches.open('v1').then(function(cache) {
    -      return cache.addAll(myAssets);
    +      return cache.addAll(myAssets);
         });
       }
     }).catch(function() {
    -  // 处理异常
    +  // 处理异常
     });

    规范

    diff --git a/files/zh-cn/web/api/cachestorage/index.html b/files/zh-cn/web/api/cachestorage/index.html index 59e28406f5adce..863f8886a328ad 100644 --- a/files/zh-cn/web/api/cachestorage/index.html +++ b/files/zh-cn/web/api/cachestorage/index.html @@ -9,15 +9,15 @@ ---

    {{APIRef("Service Workers API")}}{{SeeCompatTable}}

    -

    CacheStorage 接口表示 {{domxref("Cache")}} 对象的存储。它提供了一个 {{domxref("ServiceWorker")}} 、其它类型 worker 或者 {{domxref("window")}} 范围内可以访问到的所有命名 cache 的主目录(它并不是一定要和 service workers 一起使用,即使它是在 service workers 规范中定义的),并维护一份字符串名称到相应 {{domxref("Cache")}} 对象的映射。

    +

    CacheStorage 接口表示 {{domxref("Cache")}} 对象的存储。它提供了一个 {{domxref("ServiceWorker")}} 、其它类型 worker 或者 {{domxref("window")}} 范围内可以访问到的所有命名 cache 的主目录(它并不是一定要和 service workers 一起使用,即使它是在 service workers 规范中定义的),并维护一份字符串名称到相应 {{domxref("Cache")}} 对象的映射。

    -

    CacheStorage  同样暴露了 {{domxref("CacheStorage.open()")}} 和 {{domxref("CacheStorage.match()")}}方法。使用 {{domxref("CacheStorage.open()")}} 获取 {{domxref("Cache")}} 实例。使用 {{domxref("CacheStorage.match()")}} 检查给定的 {{domxref("Request")}} 是否是 CacheStorage 对象跟踪的任何 {{domxref("Cache")}} 对象中的键。

    +

    CacheStorage 同样暴露了 {{domxref("CacheStorage.open()")}} 和 {{domxref("CacheStorage.match()")}}方法。使用 {{domxref("CacheStorage.open()")}} 获取 {{domxref("Cache")}} 实例。使用 {{domxref("CacheStorage.match()")}} 检查给定的 {{domxref("Request")}} 是否是 CacheStorage 对象跟踪的任何 {{domxref("Cache")}} 对象中的键。

    -

    你可以通过 {{domxref("WorkerGlobalScope.caches", "caches")}} 属性访问 CacheStorage .

    +

    你可以通过 {{domxref("WorkerGlobalScope.caches", "caches")}} 属性访问 CacheStorage .

    -
    注意: CacheStorage 总是对不受信任的源(即那些不使用 HTTPS,尽管此定义将来很可能变得更加复杂。)使用 SecurityError reject. 测试时,你可以在 Firefox Devtools 选项/齿轮菜单中通过选中"通过 HTTP 启用 Service Workers (当工具箱打开时)" 选项来绕开这个限制。
    +
    注意: CacheStorage 总是对不受信任的源(即那些不使用 HTTPS,尽管此定义将来很可能变得更加复杂。)使用 SecurityError reject. 测试时,你可以在 Firefox Devtools 选项/齿轮菜单中通过选中"通过 HTTP 启用 Service Workers (当工具箱打开时)" 选项来绕开这个限制。
    -
    注意: {{domxref("CacheStorage.match()")}} 是一个便捷方法。匹配 cache 条目的同等功能可以通过执行 {{domxref("CacheStorage.open()")}} 打开 cache,使用 {{domxref("CacheStorage.keys()")}} 返回它包含的条目,并将你所需的条目与 {{domxref("CacheStorage.match()")}} 匹配。
    +
    注意: {{domxref("CacheStorage.match()")}} 是一个便捷方法。匹配 cache 条目的同等功能可以通过执行 {{domxref("CacheStorage.open()")}} 打开 cache,使用 {{domxref("CacheStorage.keys()")}} 返回它包含的条目,并将你所需的条目与 {{domxref("CacheStorage.match()")}} 匹配。

    方法

    @@ -25,60 +25,60 @@

    方法

    {{domxref("CacheStorage.match()")}}
    检查给定的 {{domxref("Request")}} 是否是 {{domxref("CacheStorage")}} 对象跟踪的任何 {{domxref("Cache")}} 对象的键,并返回一个 resolve 为该匹配的 {{jsxref("Promise")}} .
    {{domxref("CacheStorage.has()")}}
    -
    如果存在与 cacheName 匹配的 {{domxref("Cache")}} 对象,则返回一个 resolve 为 true 的 {{jsxref("Promise")}} .
    +
    如果存在与 cacheName 匹配的 {{domxref("Cache")}} 对象,则返回一个 resolve 为 true 的 {{jsxref("Promise")}} .
    {{domxref("CacheStorage.open()")}}
    -
    返回一个 {{jsxref("Promise")}} ,resolve 为匹配  cacheName (如果不存在则创建一个新的 cache)的 {{domxref("Cache")}} 对象
    +
    返回一个 {{jsxref("Promise")}} ,resolve 为匹配 cacheName (如果不存在则创建一个新的 cache)的 {{domxref("Cache")}} 对象
    {{domxref("CacheStorage.delete()")}}
    -
    查找匹配 cacheName 的 {{domxref("Cache")}} 对象,如果找到,则删除 {{domxref("Cache")}} 对象并返回一个 resolve 为 true 的 {{jsxref("Promise")}} 。如果没有找到 {{domxref("Cache")}} 对象,则返回 false.
    +
    查找匹配 cacheName 的 {{domxref("Cache")}} 对象,如果找到,则删除 {{domxref("Cache")}} 对象并返回一个 resolve 为 true 的 {{jsxref("Promise")}} 。如果没有找到 {{domxref("Cache")}} 对象,则返回 false.
    {{domxref("CacheStorage.keys()")}}
    -
    返回一个 {{jsxref("Promise")}} ,它将使用一个包含与 {{domxref("CacheStorage")}} 追踪的所有命名 {{domxref("Cache")}} 对象对应字符串的数组来 resolve. 使用该方法迭代所有 {{domxref("Cache")}} 对象的列表。
    +
    返回一个 {{jsxref("Promise")}} ,它将使用一个包含与 {{domxref("CacheStorage")}} 追踪的所有命名 {{domxref("Cache")}} 对象对应字符串的数组来 resolve. 使用该方法迭代所有 {{domxref("Cache")}} 对象的列表。

    示例

    -

    此代码片段来自于 MDN sw-test example (请参阅sw-test running live.)此 service worker 脚本等待 {{domxref("InstallEvent")}} 触发,然后运行 {{domxref("ExtendableEvent.waitUntil","waitUntil")}} 来处理应用程序的安装过程。这包括调用 {{domxref("CacheStorage.open")}} 创建一个新的 cache,然后使用 {{domxref("Cache.addAll")}} 向其添加一系列资源。

    +

    此代码片段来自于 MDN sw-test example (请参阅sw-test running live.)此 service worker 脚本等待 {{domxref("InstallEvent")}} 触发,然后运行 {{domxref("ExtendableEvent.waitUntil","waitUntil")}} 来处理应用程序的安装过程。这包括调用 {{domxref("CacheStorage.open")}} 创建一个新的 cache,然后使用 {{domxref("Cache.addAll")}} 向其添加一系列资源。

    在第二个代码块,我们等待 {{domxref("FetchEvent")}} 触发。我们构建自定义相应,像这样:

    1. 检查 CacheStorage 中是否找到了匹配请求的内容。如果是,使用匹配内容。
    2. -
    3. 如果没有,从网络获取请求,然后同样打开第一个代码块中创建的 cache,并使用 {{domxref("Cache.put")}} (cache.put(event.request, response.clone()).) 将请求的 clone 副本添加到它。
    4. +
    5. 如果没有,从网络获取请求,然后同样打开第一个代码块中创建的 cache,并使用 {{domxref("Cache.put")}} (cache.put(event.request, response.clone()).) 将请求的 clone 副本添加到它。
    6. 如果此操作失败(例如,因为网络关闭),返回备用相应。
    -

    最后,使用 {{domxref("FetchEvent.respondWith")}} 返回自定义响应最终等于的内容。

    +

    最后,使用 {{domxref("FetchEvent.respondWith")}} 返回自定义响应最终等于的内容。

    this.addEventListener('install', function(event) {
    -  event.waitUntil(
    -    caches.open('v1').then(function(cache) {
    -      return cache.addAll([
    -        '/sw-test/',
    -        '/sw-test/index.html',
    -        '/sw-test/style.css',
    -        '/sw-test/app.js',
    -        '/sw-test/image-list.js',
    -        '/sw-test/star-wars-logo.jpg',
    -        '/sw-test/gallery/bountyHunters.jpg',
    -        '/sw-test/gallery/myLittleVader.jpg',
    -        '/sw-test/gallery/snowTroopers.jpg'
    -      ]);
    -    })
    -  );
    +  event.waitUntil(
    +    caches.open('v1').then(function(cache) {
    +      return cache.addAll([
    +        '/sw-test/',
    +        '/sw-test/index.html',
    +        '/sw-test/style.css',
    +        '/sw-test/app.js',
    +        '/sw-test/image-list.js',
    +        '/sw-test/star-wars-logo.jpg',
    +        '/sw-test/gallery/bountyHunters.jpg',
    +        '/sw-test/gallery/myLittleVader.jpg',
    +        '/sw-test/gallery/snowTroopers.jpg'
    +      ]);
    +    })
    +  );
     });
     
     this.addEventListener('fetch', function(event) {
    -  var response;
    -  event.respondWith(caches.match(event.request).catch(function() {
    -    return fetch(event.request);
    -  }).then(function(r) {
    -    response = r;
    -    caches.open('v1').then(function(cache) {
    -      cache.put(event.request, response);
    -    });
    -    return response.clone();
    -  }).catch(function() {
    -    return caches.match('/sw-test/gallery/myLittleVader.jpg');
    -  }));
    +  var response;
    +  event.respondWith(caches.match(event.request).catch(function() {
    +    return fetch(event.request);
    +  }).then(function(r) {
    +    response = r;
    +    caches.open('v1').then(function(cache) {
    +      cache.put(event.request, response);
    +    });
    +    return response.clone();
    +  }).catch(function() {
    +    return caches.match('/sw-test/gallery/myLittleVader.jpg');
    +  }));
     });

    说明

    diff --git a/files/zh-cn/web/api/cachestorage/keys/index.html b/files/zh-cn/web/api/cachestorage/keys/index.html index 84be082ca31a54..d28c8e4c5507b7 100644 --- a/files/zh-cn/web/api/cachestorage/keys/index.html +++ b/files/zh-cn/web/api/cachestorage/keys/index.html @@ -5,7 +5,7 @@ ---

    {{APIRef("Service Workers API")}}{{SeeCompatTable}}

    -

    {{domxref("CacheStorage")}} 接口的 keys() 方法返回一个 {{jsxref("Promise")}}对象,它使用一个数组 resolve,该数组包含 {{domxref("CacheStorage")}} 对象按创建顺序跟踪的所有命名 {{domxref("Cache")}}  对象对应的字符串。使用此方法迭代所有 {{domxref("Cache")}} 对象。

    +

    {{domxref("CacheStorage")}} 接口的 keys() 方法返回一个 {{jsxref("Promise")}}对象,它使用一个数组 resolve,该数组包含 {{domxref("CacheStorage")}} 对象按创建顺序跟踪的所有命名 {{domxref("Cache")}} 对象对应的字符串。使用此方法迭代所有 {{domxref("Cache")}} 对象。

    语法

    @@ -16,7 +16,7 @@

    语法

    返回

    -

    一个使用 {{domxref("CacheStorage")}} 对象中 {{domxref("Cache")}} 名称数组 resolve 的 {{jsxref("Promise")}} 

    +

    一个使用 {{domxref("CacheStorage")}} 对象中 {{domxref("Cache")}} 名称数组 resolve 的 {{jsxref("Promise")}}

    参数

    @@ -24,7 +24,7 @@

    参数

    示例

    -

    在此代码片段中,我们监听{{domxref("ServiceWorkerGlobalScope.onactivate", "activate")}} 事件,然后运行一个 {{domxref("ExtendableEvent.waitUntil","waitUntil()")}} 方法,该方法在新的 service worker 被激活之前清除老的、无用的 cache。 这里我们设置一个包含缓存名称的白名单。 通过使用 keys() 方法 来返回{{domxref("CacheStorage")}} 对象中的 keys 集合,然后检查缓存 key 是否在白名单中,如果不存在,则使用 {{domxref("CacheStorage.delete")}} 方法来删除该缓存。

    +

    在此代码片段中,我们监听{{domxref("ServiceWorkerGlobalScope.onactivate", "activate")}} 事件,然后运行一个 {{domxref("ExtendableEvent.waitUntil","waitUntil()")}} 方法,该方法在新的 service worker 被激活之前清除老的、无用的 cache。 这里我们设置一个包含缓存名称的白名单。 通过使用 keys() 方法 来返回{{domxref("CacheStorage")}} 对象中的 keys 集合,然后检查缓存 key 是否在白名单中,如果不存在,则使用 {{domxref("CacheStorage.delete")}} 方法来删除该缓存。

    this.addEventListener('activate', function(event) {
       var cacheWhitelist = ['v2'];
    diff --git a/files/zh-cn/web/api/cachestorage/match/index.html b/files/zh-cn/web/api/cachestorage/match/index.html
    index 4413090ae3bdad..a7a286d50a3be8 100644
    --- a/files/zh-cn/web/api/cachestorage/match/index.html
    +++ b/files/zh-cn/web/api/cachestorage/match/index.html
    @@ -5,7 +5,7 @@
     ---
     

    {{APIRef("Service Workers API")}}{{SeeCompatTable}}

    -

    {{domxref("CacheStorage")}} 接口 (可适用于全局性caches) 的 match() 方法检查给定的{{domxref("Request")}} 对象或 url 字符串是否是一个已存储的 {{domxref("Response")}} 对象的 key. 这个方法针对 {{domxref("Response")}} 返回一个 {{jsxref("Promise")}} ,如果没有匹配则返回 undefined

    +

    {{domxref("CacheStorage")}} 接口 (可适用于全局性caches) 的 match() 方法检查给定的{{domxref("Request")}} 对象或 url 字符串是否是一个已存储的 {{domxref("Response")}} 对象的 key. 这个方法针对 {{domxref("Response")}} 返回一个 {{jsxref("Promise")}} ,如果没有匹配则返回 undefined

    cache 对象按创建顺序查询。

    @@ -27,36 +27,36 @@

    参数

    这个对象中的属性控制在匹配操作中如何进行匹配选择。可选择参数如下:
    • ignoreSearch: {{domxref("Boolean")}}值, 指定匹配过程是否应该忽略 url 中查询参数。举个例子,如果该参数设置为true, 那么 ?value=bar 作为 http://foo.com/?value=bar 中的查询参数将会在匹配过程中被忽略。该参数默认 false
    • -
    • ignoreMethod:  {{domxref("Boolean")}} 值,当被设置为 true 时,将会阻止在匹配操作中对 {{domxref("Request")}}请求的 http 方式的验证 (通常只允许 GETHEAD 两种请求方式)。该参数默认为 false.
    • -
    • ignoreVary:  {{domxref("Boolean")}} 值,当该字段被设置为 true, 告知在匹配操作中忽略对VARY头信息的匹配。换句话说,当请求 URL 匹配上,你将获取匹配的 {{domxref("Response")}} 对象,无论请求的 VARY  头存在或者没有。该参数默认为 false.
    • -
    • cacheName:  {{domxref("DOMString")}} 值, 表示所要搜索的缓存名称。
    • +
    • ignoreMethod: {{domxref("Boolean")}} 值,当被设置为 true 时,将会阻止在匹配操作中对 {{domxref("Request")}}请求的 http 方式的验证 (通常只允许 GETHEAD 两种请求方式)。该参数默认为 false.
    • +
    • ignoreVary: {{domxref("Boolean")}} 值,当该字段被设置为 true, 告知在匹配操作中忽略对VARY头信息的匹配。换句话说,当请求 URL 匹配上,你将获取匹配的 {{domxref("Response")}} 对象,无论请求的 VARY 头存在或者没有。该参数默认为 false.
    • +
    • cacheName: {{domxref("DOMString")}} 值, 表示所要搜索的缓存名称。

    返回值

    -

    返回 resolve 为匹配 {{domxref("Response")}} 的 {{jsxref("Promise")}} 对象。如果没有与指定 request 相匹配 response,promise 将使用 undefined resolve.

    +

    返回 resolve 为匹配 {{domxref("Response")}} 的 {{jsxref("Promise")}} 对象。如果没有与指定 request 相匹配 response,promise 将使用 undefined resolve.

    例子

    -

    此示例来自于 MDN sw-test example (请参阅 sw-test running live)。这里,等待 {{domxref("FetchEvent")}} 事件触发。我们构建自定义响应,像这样:

    +

    此示例来自于 MDN sw-test example (请参阅 sw-test running live)。这里,等待 {{domxref("FetchEvent")}} 事件触发。我们构建自定义响应,像这样:

    1. 使用 {{domxref("CacheStorage.match","CacheStorage.match()")}} 检查 {{domxref("CacheStorage")}} 中是否存在匹配请求,如果存在,则使用它。
    2. -
    3. 如果没有,使用  open() 打开 v1 cache,使用 {{domxref("Cache.put","Cache.put()")}}  将默认网络请求放入 cache 中,并只用 return response.clone() 返回默认网络请求的克隆副本。最后一个是必须的,因为 put() 使用响应主体。
    4. +
    5. 如果没有,使用 open() 打开 v1 cache,使用 {{domxref("Cache.put","Cache.put()")}} 将默认网络请求放入 cache 中,并只用 return response.clone() 返回默认网络请求的克隆副本。最后一个是必须的,因为 put() 使用响应主体。
    6. 如果此操作失败(例如,因为网络已关闭),则返回备用响应。
    caches.match(event.request).then(function(response) {
       return response || fetch(event.request).then(function(r) {
    -    caches.open('v1').then(function(cache) {
    -      cache.put(event.request, r);
    -    });
    +    caches.open('v1').then(function(cache) {
    +      cache.put(event.request, r);
    +    });
         return r.clone();
       });
     }).catch(function() {
    -  return caches.match('/sw-test/gallery/myLittleVader.jpg');
    +  return caches.match('/sw-test/gallery/myLittleVader.jpg');
     });

    规范

    diff --git a/files/zh-cn/web/api/cachestorage/open/index.html b/files/zh-cn/web/api/cachestorage/open/index.html index cc4b57d39dc19a..ad176d79280898 100644 --- a/files/zh-cn/web/api/cachestorage/open/index.html +++ b/files/zh-cn/web/api/cachestorage/open/index.html @@ -5,10 +5,10 @@ ---

    {{APIRef("Service Workers API")}}{{SeeCompatTable}}

    -

    {{domxref("CacheStorage")}} 接口的 open() 方法返回一个 resolve 为匹配 cacheName 的 {{domxref("Cache")}} 对象的 {{jsxref("Promise")}} .

    +

    {{domxref("CacheStorage")}} 接口的 open() 方法返回一个 resolve 为匹配 cacheName 的 {{domxref("Cache")}} 对象的 {{jsxref("Promise")}} .

    -

    注意: 如果指定的 {{domxref("Cache")}} 不存在,则使用该 cacheName 创建一个新的 cache,并返回一个 resolve 为该新 {{domxref("Cache")}} 对象的{{jsxref("Promise")}}.

    +

    注意: 如果指定的 {{domxref("Cache")}} 不存在,则使用该 cacheName 创建一个新的 cache,并返回一个 resolve 为该新 {{domxref("Cache")}} 对象的{{jsxref("Promise")}}.

    语法

    @@ -30,27 +30,27 @@

    参数

    返回值

    -

    一个 resolve 为请求的 {{domxref("Cache")}} 对象的 {{jsxref("Promise")}} .

    +

    一个 resolve 为请求的 {{domxref("Cache")}} 对象的 {{jsxref("Promise")}} .

    示例

    -

    此示例来自于 MDN sw-test example (请参阅 sw-test running live)。这里,等待 {{domxref("FetchEvent")}} 事件触发。我们构建自定义响应,像这样:

    +

    此示例来自于 MDN sw-test example (请参阅 sw-test running live)。这里,等待 {{domxref("FetchEvent")}} 事件触发。我们构建自定义响应,像这样:

    1. 使用 {{domxref("CacheStorage.match","CacheStorage.match()")}} 检查 {{domxref("CacheStorage")}} 中是否存在匹配请求,如果存在,则使用它。
    2. -
    3. 如果没有,使用  {{domxref("CacheStorage.open","CacheStorage.open()")}} 打开 v1 cache,使用 {{domxref("Cache.put","Cache.put()")}}  将默认网络请求放入 cache 中,并使用 return response.clone() 返回默认网络请求的克隆副本。最后一个是必须的,因为 put() 使用响应主体。
    4. +
    5. 如果没有,使用 {{domxref("CacheStorage.open","CacheStorage.open()")}} 打开 v1 cache,使用 {{domxref("Cache.put","Cache.put()")}} 将默认网络请求放入 cache 中,并使用 return response.clone() 返回默认网络请求的克隆副本。最后一个是必须的,因为 put() 使用响应主体。
    6. 如果此操作失败(例如,因为网络已关闭),则返回备用响应。
    var cachedResponse = caches.match(event.request).catch(function() {
    -  return fetch(event.request);
    +  return fetch(event.request);
     }).then(function(response) {
    -  caches.open('v1').then(function(cache) {
    -    cache.put(event.request, response);
    -  });
    -  return response.clone();
    +  caches.open('v1').then(function(cache) {
    +    cache.put(event.request, response);
    +  });
    +  return response.clone();
     }).catch(function() {
    -  return caches.match('/sw-test/gallery/myLittleVader.jpg');
    +  return caches.match('/sw-test/gallery/myLittleVader.jpg');
     });

    规范

    diff --git a/files/zh-cn/web/api/canvas_api/a_basic_ray-caster/index.html b/files/zh-cn/web/api/canvas_api/a_basic_ray-caster/index.html index e42ad59bfb9668..24d6ab191fb6ed 100644 --- a/files/zh-cn/web/api/canvas_api/a_basic_ray-caster/index.html +++ b/files/zh-cn/web/api/canvas_api/a_basic_ray-caster/index.html @@ -23,7 +23,7 @@

    为什么?

    怎么做?

    -

    基本思想是对任意延迟的帧速率使用 {{domxref("window.setInterval","setInterval()")}}。每一个间隔后都会调用一个更新函数来重绘画布显示当前视图。我知道我可以从一个简单的例子开始,但我相信 canvas 教程会有,我想看看我能否做到。

    +

    基本思想是对任意延迟的帧速率使用 {{domxref("window.setInterval","setInterval()")}}。每一个间隔后都会调用一个更新函数来重绘画布显示当前视图。我知道我可以从一个简单的例子开始,但我相信 canvas 教程会有,我想看看我能否做到。

    所以,每次更新,射线发射器会检测你最近是否按下任何按键,如果你是闲置状态,会不通过投射来保存计算结果。如果你有按键按下,画布会清空,绘制背景和前景,更新相机的位置或方向,光线被抛弃。当光线与墙壁相交时,他们呈现出一种垂直的帆布条,其颜色和墙壁颜色相匹配,根据离墙壁的距离混合不同深度的颜色。帆布条的高度也会根据相机到墙壁的距离进行调节,并且被绘制在水平线居中位置。

    diff --git a/files/zh-cn/web/api/canvas_api/index.html b/files/zh-cn/web/api/canvas_api/index.html index c81c0aff44ea70..d0530efdb4bd50 100644 --- a/files/zh-cn/web/api/canvas_api/index.html +++ b/files/zh-cn/web/api/canvas_api/index.html @@ -10,9 +10,9 @@ ---
    {{CanvasSidebar}}
    -

    Canvas API 提供了一个通过JavaScript 和 HTML的{{HtmlElement("canvas")}}元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。

    +

    Canvas API 提供了一个通过JavaScriptHTML的{{HtmlElement("canvas")}}元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。

    -

    Canvas API 主要聚焦于 2D 图形。而同样使用<canvas>元素的 WebGL API 则用于绘制硬件加速的 2D 和 3D 图形。

    +

    Canvas API 主要聚焦于 2D 图形。而同样使用<canvas>元素的 WebGL API 则用于绘制硬件加速的 2D 和 3D 图形。

    基础示例

    @@ -25,7 +25,7 @@

    HTML

    JavaScript

    -

    {{domxref("Document.getElementById()")}} 方法获取 HTML <canvas> 元素的引用。接着,{{domxref("HTMLCanvasElement.getContext()")}} 方法获取这个元素的 context——图像稍后将在此被渲染。

    +

    {{domxref("Document.getElementById()")}} 方法获取 HTML <canvas> 元素的引用。接着,{{domxref("HTMLCanvasElement.getContext()")}} 方法获取这个元素的 context——图像稍后将在此被渲染。

    由 {{domxref("CanvasRenderingContext2D")}} 接口完成实际的绘制。{{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} 属性让长方形变成绿色。{{domxref("CanvasRenderingContext2D.fillRect()", "fillRect()")}} 方法将它的左上角放在 (10, 10),把它的大小设置成宽 150 高 100。

    @@ -78,8 +78,8 @@

    教程与指导

    Demo:一个基础的光线追踪器
    运用 canvas 制作的光线追踪动画示例。
    -
    使用 canvas 绘制视频 
    -
    结合{{HTMLElement("video")}}和 {{HTMLElement("canvas")}}来实现实时操作视频数据。
    +
    使用 canvas 绘制视频
    +
    结合{{HTMLElement("video")}}和 {{HTMLElement("canvas")}}来实现实时操作视频数据。

    @@ -87,19 +87,19 @@

    Canvas API 是非常强大的,但不总是很容易使用。以下列出的库能够使创建基于 canvas 的项目更快和更简单。

      -
    • EaselJS 使制作游戏、创作类艺术和其他侧重图形项目更容易的开源 canvas 库
    • +
    • EaselJS 使制作游戏、创作类艺术和其他侧重图形项目更容易的开源 canvas 库
    • Fabric.js 具有 SVG 解析功能的开源 canvas 库
    • -
    • heatmap.js 基于 canvas 的热点图的开源库
    • +
    • heatmap.js 基于 canvas 的热点图的开源库
    • JavaScript InfoVis Toolkit 创建交互式的 2D Canvas 数据可视化
    • -
    • Konva.js 用于桌面端和移动端应用的 2D canvas 库
    • -
    • p5.js 包含给艺术家、设计师、教育者、初学者使用的完整的 canvas 绘制功能
    • +
    • Konva.js 用于桌面端和移动端应用的 2D canvas 库
    • +
    • p5.js 包含给艺术家、设计师、教育者、初学者使用的完整的 canvas 绘制功能
    • Paper.js 运行于 HTML5 Canvas 上的开源矢量图形脚本框架
    • -
    • Phaser 用于基于 Canvas 和 WebGL 的浏览器尤其的快速、自由、有趣的开源框架
    • +
    • Phaser 用于基于 Canvas 和 WebGL 的浏览器尤其的快速、自由、有趣的开源框架
    • Processing.js 用于处理可视化语言
    • -
    • Pts.js 在 canvas 和 SVG 中进行创意性代码写作和可视化的库
    • +
    • Pts.js 在 canvas 和 SVG 中进行创意性代码写作和可视化的库
    • Rekapi 关键帧动画库
    • -
    • Scrawl-canvas 用来创建和编辑 2D 图形的开源库
    • -
    • ZIM 框架为 canvas 上的代码创意性提供方便性、组件和可控性,包括可用性和数百个色彩缤纷的教程
    • +
    • Scrawl-canvas 用来创建和编辑 2D 图形的开源库
    • +
    • ZIM 框架为 canvas 上的代码创意性提供方便性、组件和可控性,包括可用性和数百个色彩缤纷的教程
    @@ -112,7 +112,7 @@

    标准

    浏览器兼容性

    -

    Mozilla 程序从 Gecko 1.8 (Firefox 1.5) 开始支持 <canvas>。它首先是由 Apple 引入的,用于 OS X Dashboard 和 Safari。Internet Explorer 从 IE9 开始支持<canvas> ,更旧版本的 IE 中,页面可以通过引入 Google 的 Explorer Canvas 项目中的脚本来获得<canvas>支持。Google Chrome 和 Opera 9+ 也支持 <canvas>

    +

    Mozilla 程序从 Gecko 1.8 (Firefox 1.5) 开始支持 <canvas>。它首先是由 Apple 引入的,用于 OS X Dashboard 和 Safari。Internet Explorer 从 IE9 开始支持<canvas> ,更旧版本的 IE 中,页面可以通过引入 Google 的 Explorer Canvas 项目中的脚本来获得<canvas>支持。Google Chrome 和 Opera 9+ 也支持 <canvas>

    其它相关

    diff --git a/files/zh-cn/web/api/canvas_api/manipulating_video_using_canvas/index.html b/files/zh-cn/web/api/canvas_api/manipulating_video_using_canvas/index.html index 8fb76cbbb1ab89..22ef6ad7e20c2e 100644 --- a/files/zh-cn/web/api/canvas_api/manipulating_video_using_canvas/index.html +++ b/files/zh-cn/web/api/canvas_api/manipulating_video_using_canvas/index.html @@ -6,17 +6,17 @@
    {{CanvasSidebar}}
    -

    通过在一个 canvas(画布)上结合 video 元素功能,你可以实时地操纵视频数据来合成各种视觉特效到正在呈现的视频画面中。本教程示范如何使用 JavaScript 代码执行色度键控(也被称为“绿屏效果”)。

    +

    通过在一个 canvas(画布)上结合 video 元素功能,你可以实时地操纵视频数据来合成各种视觉特效到正在呈现的视频画面中。本教程示范如何使用 JavaScript 代码执行色度键控(也被称为“绿屏效果”)。

    查看该实例

    文档内容

    -

    以下是用于渲染该内容的 XHTML 文档。

    +

    以下是用于渲染该内容的 XHTML 文档。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    -        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    +        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     <html xmlns="http://www.w3.org/1999/xhtml">
       <head>
         <style>
    @@ -65,11 +65,11 @@ 

    JavaScript 代码

    初始化色键播放器

    -

    当 XHTML 文档最初加载时 doLoad() 方法被调用。这个方法的工作是准备色键处理代码所需的变量,并设置一个监听事件以便我们可以监测用户何时开始播放视频。

    +

    当 XHTML 文档最初加载时 doLoad() 方法被调用。这个方法的工作是准备色键处理代码所需的变量,并设置一个监听事件以便我们可以监测用户何时开始播放视频。

      var processor;
     
    -  processor.doLoad = function doLoad() {
    +  processor.doLoad = function doLoad() {
         this.video = document.getElementById('video');
         this.c1 = document.getElementById('c1');
         this.ctx1 = this.c1.getContext('2d');
    @@ -117,7 +117,7 @@ 

    操作视频帧数据

      processor.computeFrame = function computeFrame() {
         this.ctx1.drawImage(this.video, 0, 0, this.width, this.height);
         let frame = this.ctx1.getImageData(0, 0, this.width, this.height);
    -    let l = frame.data.length / 4;
    +    let l = frame.data.length / 4;
     
         for (let i = 0; i < l; i++) {
           let r = frame.data[i * 4 + 0];
    @@ -141,9 +141,9 @@ 

    操作视频帧数据

    第 3 行通过在第一个上下文里调用 getImageData() 方法获取到视频当前帧的原始图形数据的拷贝。它提供了原始的 32 位像素的图像数据使我们可以继续操作。第 4 行通过用帧的图像数据的总大小除以四来计算图像中的像素数。

    -

    从第 6 行开始 for 循环扫描帧的像素,取出每个像素的红、绿和蓝的值,并和用于检测绿幕的预设的数对比。其中绿幕将用从 foo.png 导入的静态背景图像替换。

    +

    从第 6 行开始 for 循环扫描帧的像素,取出每个像素的红、绿和蓝的值,并和用于检测绿幕的预设的数对比。其中绿幕将用从 foo.png 导入的静态背景图像替换。

    -

    每一个(数值)范围内得到的被认为是绿幕一部分的帧图像数据里的像素具有的 alpha 值被替换为零,以表示该像素完全透明。因此,最终的图像里的整个绿幕的区域 100% 透明,于是在 13 行当它被绘制到目标上下文中时,效果是作为一层遮罩覆于静态背景上面。

    +

    每一个(数值)范围内得到的被认为是绿幕一部分的帧图像数据里的像素具有的 alpha 值被替换为零,以表示该像素完全透明。因此,最终的图像里的整个绿幕的区域 100% 透明,于是在 13 行当它被绘制到目标上下文中时,效果是作为一层遮罩覆于静态背景上面。

    形成的图像像这样:

    diff --git a/files/zh-cn/web/api/canvas_api/tutorial/advanced_animations/index.html b/files/zh-cn/web/api/canvas_api/tutorial/advanced_animations/index.html index 0522396526446b..40671e5cb0293a 100644 --- a/files/zh-cn/web/api/canvas_api/tutorial/advanced_animations/index.html +++ b/files/zh-cn/web/api/canvas_api/tutorial/advanced_animations/index.html @@ -20,7 +20,7 @@

    绘制小球

    <canvas id="canvas" width="600" height="300"></canvas>
     
    -

    跟平常一样,我们需要先画一个 context(画布场景)。为了画出这个球,我们又会创建一个包含一些相关属性以及 draw() 函数的 ball 对象,来完成绘制。

    +

    跟平常一样,我们需要先画一个 context(画布场景)。为了画出这个球,我们又会创建一个包含一些相关属性以及 draw() 函数的 ball 对象,来完成绘制。

    var canvas = document.getElementById('canvas');
     var ctx = canvas.getContext('2d');
    @@ -86,15 +86,15 @@ 

    添加速率

    ball.draw();
    -

    边界  

    +

    边界

    -

    若没有任何的碰撞检测,我们的小球很快就会超出画布。我们需要检查小球的 x 和 y 位置是否已经超出画布的尺寸以及是否需要将速度矢量反转。为了这么做,我们把下面的检查代码添加进 draw 函数:

    +

    若没有任何的碰撞检测,我们的小球很快就会超出画布。我们需要检查小球的 x 和 y 位置是否已经超出画布的尺寸以及是否需要将速度矢量反转。为了这么做,我们把下面的检查代码添加进 draw 函数:

    if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
    -  ball.vy = -ball.vy;
    +  ball.vy = -ball.vy;
     }
     if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
    -  ball.vx = -ball.vx;
    +  ball.vx = -ball.vx;
     }

    首个预览

    @@ -290,7 +290,7 @@
    Third demo

    添加鼠标控制

    -

    为了更好地控制小球,我们可以用 mousemove事件让它跟随鼠标活动。下面例子中,click 事件会释放小球然后让它重新跳起。

    +

    为了更好地控制小球,我们可以用 mousemove事件让它跟随鼠标活动。下面例子中,click 事件会释放小球然后让它重新跳起。

    -

     {{EmbedLiveSample("A_demo_of_the_miterLimit_property", "500", "240", "https://mdn.mozillademos.org/files/240/Canvas_miterlimit.png")}}

    +

    {{EmbedLiveSample("A_demo_of_the_miterLimit_property", "500", "240", "https://mdn.mozillademos.org/files/240/Canvas_miterlimit.png")}}

    使用虚线

    -

    用 setLineDash 方法和 lineDashOffset 属性来制定虚线样式。setLineDash 方法接受一个数组,来指定线段与间隙的交替;lineDashOffset 属性设置起始偏移量。

    +

    setLineDash 方法和 lineDashOffset 属性来制定虚线样式。setLineDash 方法接受一个数组,来指定线段与间隙的交替;lineDashOffset 属性设置起始偏移量。

    在这个例子中,我们要创建一个蚂蚁线的效果。它往往应用在计算机图形程序选区工具动效中。它可以帮助用户通过动画的边界来区分图像背景选区边框。在本教程的后面部分,你可以学习如何实现这一点和其他基本的动画

    @@ -620,7 +620,7 @@

    阴影 Shadows

    {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur = float")}}
    shadowBlur 用于设定阴影的模糊程度,其数值并不跟像素数量挂钩,也不受变换矩阵的影响,默认为 0
    {{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor = color")}}
    -
    shadowColor 是标准的 CSS 颜色值,用于设定阴影颜色效果,默认是全透明的黑色。
    +
    shadowColor 是标准的 CSS 颜色值,用于设定阴影颜色效果,默认是全透明的黑色。

    文字阴影的例子

    @@ -633,11 +633,11 @@

    文字阴影的例子

    ctx.shadowOffsetX = 2; ctx.shadowOffsetY = 2; ctx.shadowBlur = 2; -  ctx.shadowColor = "rgba(0, 0, 0, 0.5)"; + ctx.shadowColor = "rgba(0, 0, 0, 0.5)"; -  ctx.font = "20px Times New Roman"; -  ctx.fillStyle = "Black"; -  ctx.fillText("Sample String", 5, 30); + ctx.font = "20px Times New Roman"; + ctx.fillStyle = "Black"; + ctx.fillText("Sample String", 5, 30); }
    @@ -658,8 +658,8 @@

    Canvas 填充规则

    两个可能的值:

    这个例子,我们用填充规则 evenodd

    diff --git a/files/zh-cn/web/api/canvas_api/tutorial/basic_animations/index.html b/files/zh-cn/web/api/canvas_api/tutorial/basic_animations/index.html index a71e246b2080da..7e86ffa2b130a8 100644 --- a/files/zh-cn/web/api/canvas_api/tutorial/basic_animations/index.html +++ b/files/zh-cn/web/api/canvas_api/tutorial/basic_animations/index.html @@ -39,7 +39,7 @@

    操控动画 Controlling an animation

    因此,为了实现动画,我们需要一些可以定时执行重绘的方法。有两种方法可以实现这样的动画操控。首先可以通过 setIntervalsetTimeout 方法来控制在设定的时间点上执行重绘。

    -

    有安排的更新画布 Scheduled updates

    +

    有安排的更新画布 Scheduled updates

    首先,可以用{{domxref("window.setInterval()")}}, {{domxref("window.setTimeout()")}},和{{domxref("window.requestAnimationFrame()")}}来设定定期执行一个指定函数。

    @@ -56,7 +56,7 @@

    有安排的更新

    如果你并不需要与用户互动,你可以使用 setInterval() 方法,它就可以定期执行指定代码。如果我们需要做一个游戏,我们可以使用键盘或者鼠标事件配合上 setTimeout() 方法来实现。通过设置事件监听,我们可以捕捉用户的交互,并执行相应的动作。

    -

    下面的例子,采用 {{domxref("window.requestAnimationFrame()")}}实现动画效果。这个方法提供了更加平缓并更加有效率的方式来执行动画,当系统准备好了重绘条件的时候,才调用绘制动画帧。一般每秒钟回调函数执行 60 次,也有可能会被降低。想要了解更多关于动画循环的信息,尤其是游戏,可以在Game development zone 参考这篇文章 Anatomy of a video game

    +

    下面的例子,采用 {{domxref("window.requestAnimationFrame()")}}实现动画效果。这个方法提供了更加平缓并更加有效率的方式来执行动画,当系统准备好了重绘条件的时候,才调用绘制动画帧。一般每秒钟回调函数执行 60 次,也有可能会被降低。想要了解更多关于动画循环的信息,尤其是游戏,可以在Game development zone 参考这篇文章 Anatomy of a video game

    太阳系的动画

    @@ -258,59 +258,59 @@

    循环全景照片

    imgW = img.width * scale; imgH = img.height * scale; -  if (imgW > CanvasXSize) { -  // image larger than canvas -  x = CanvasXSize - imgW; -  } if (imgW > CanvasXSize) { -  // image width larger than canvas -  clearX = imgW; -  } else { -  clearX = CanvasXSize; -  } + // image larger than canvas + x = CanvasXSize - imgW; + } + if (imgW > CanvasXSize) { + // image width larger than canvas + clearX = imgW; + } else { + clearX = CanvasXSize; + } if (imgH > CanvasYSize) { -  // image height larger than canvas -  clearY = imgH; -  } else { -  clearY = CanvasYSize; -  } + // image height larger than canvas + clearY = imgH; + } else { + clearY = CanvasYSize; + } // get canvas context ctx = document.getElementById('canvas').getContext('2d'); -  // set refresh rate + // set refresh rate return setInterval(draw, speed); } function draw() { ctx.clearRect(0, 0, clearX, clearY); // clear the canvas -  // if image is <= Canvas Size + // if image is <= Canvas Size if (imgW <= CanvasXSize) { // reset, start from beginning if (x > CanvasXSize) { -  x = -imgW + x; -  } + x = -imgW + x; + } // draw additional image1 if (x > 0) { -  ctx.drawImage(img, -imgW + x, y, imgW, imgH); -  } + ctx.drawImage(img, -imgW + x, y, imgW, imgH); + } // draw additional image2 if (x - imgW > 0) { -  ctx.drawImage(img, -imgW * 2 + x, y, imgW, imgH); -  } + ctx.drawImage(img, -imgW * 2 + x, y, imgW, imgH); + } } // image is > Canvas Size else { // reset, start from beginning if (x > (CanvasXSize)) { -  x = CanvasXSize - imgW; -  } + x = CanvasXSize - imgW; + } // draw aditional image if (x > (CanvasXSize-imgW)) { -  ctx.drawImage(img, x - imgW + 1, y, imgW, imgH); -  } + ctx.drawImage(img, x - imgW + 1, y, imgW, imgH); + } } // draw image ctx.drawImage(img, x, y,imgW, imgH); @@ -322,7 +322,7 @@

    循环全景照片

    <canvas id="canvas" width="800" height="200"></canvas>

    -

    下方就是是图片在其中滑动的 {{HTMLElement("canvas")}}。需要注意的是这里定义的 width 和 height 必须与 JavaScript 代码中的变量值CanvasXZSizeCanvasYSize保持一致。 

    +

    下方就是是图片在其中滑动的 {{HTMLElement("canvas")}}。需要注意的是这里定义的 width 和 height 必须与 JavaScript 代码中的变量值CanvasXZSizeCanvasYSize保持一致。

    <canvas id="canvas" width="800" height="200"></canvas>
    @@ -332,127 +332,127 @@

    鼠标追踪动画

    <!DOCTYPE html>
     <html lang="en">
    -    <head>
    -        <meta charset="UTF-8">
    -        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    -        <meta http-equiv="X-UA-Compatible" content="ie=edge">
    -        <title>Document</title>
    -        <script>
    -            var cn;
    -            //= document.getElementById('cw');
    -            var c;
    -            var u = 10;
    -            const m = {
    -                x: innerWidth / 2,
    -                y: innerHeight / 2
    -            };
    -            window.onmousemove = function(e) {
    -                m.x = e.clientX;
    -                m.y = e.clientY;
    -
    -            }
    -            function gc() {
    -                var s = "0123456789ABCDEF";
    -                var c = "#";
    -                for (var i = 0; i < 6; i++) {
    -                    c += s[Math.ceil(Math.random() * 15)]
    -                }
    -                return c
    -            }
    -            var a = [];
    -            window.onload = function myfunction() {
    -                cn = document.getElementById('cw');
    -                c = cn.getContext('2d');
    -
    -                for (var i = 0; i < 10; i++) {
    -                    var r = 30;
    -                    var x = Math.random() * (innerWidth - 2 * r) + r;
    -                    var y = Math.random() * (innerHeight - 2 * r) + r;
    -                    var t = new ob(innerWidth / 2,innerHeight / 2,5,"red",Math.random() * 200 + 20,2);
    -                    a.push(t);
    -                }
    -                //cn.style.backgroundColor = "#700bc8";
    -
    -                c.lineWidth = "2";
    -                c.globalAlpha = 0.5;
    -                resize();
    -                anim()
    -            }
    -            window.onresize = function() {
    -
    -                resize();
    -
    -            }
    -            function resize() {
    -                cn.height = innerHeight;
    -                cn.width = innerWidth;
    -                for (var i = 0; i < 101; i++) {
    -                    var r = 30;
    -                    var x = Math.random() * (innerWidth - 2 * r) + r;
    -                    var y = Math.random() * (innerHeight - 2 * r) + r;
    -                    a[i] = new ob(innerWidth / 2,innerHeight / 2,4,gc(),Math.random() * 200 + 20,0.02);
    -
    -                }
    -                //  a[0] = new ob(innerWidth / 2, innerHeight / 2, 40, "red", 0.05, 0.05);
    -                //a[0].dr();
    -            }
    -            function ob(x, y, r, cc, o, s) {
    -                this.x = x;
    -                this.y = y;
    -                this.r = r;
    -                this.cc = cc;
    -                this.theta = Math.random() * Math.PI * 2;
    -                this.s = s;
    -                this.o = o;
    -                this.t = Math.random() * 150;
    -
    -                this.o = o;
    -                this.dr = function() {
    -                    const ls = {
    -                        x: this.x,
    -                        y: this.y
    -                    };
    -                    this.theta += this.s;
    -                    this.x = m.x + Math.cos(this.theta) * this.t;
    -                    this.y = m.y + Math.sin(this.theta) * this.t;
    -                    c.beginPath();
    -                    c.lineWidth = this.r;
    -                    c.strokeStyle = this.cc;
    -                    c.moveTo(ls.x, ls.y);
    -                    c.lineTo(this.x, this.y);
    -                    c.stroke();
    -                    c.closePath();
    -
    -                }
    -            }
    -            function anim() {
    -                requestAnimationFrame(anim);
    -                c.fillStyle = "rgba(0,0,0,0.05)";
    -                c.fillRect(0, 0, cn.width, cn.height);
    -                a.forEach(function(e, i) {
    -                    e.dr();
    -                });
    -
    -            }
    -        </script>
    -        <style>
    -            #cw {
    -                position: fixed;
    -                z-index: -1;
    -            }
    -
    -            body {
    -                margin: 0;
    -                padding: 0;
    -                background-color: rgba(0,0,0,0.05);
    -            }
    -        </style>
    -    </head>
    -    <body>
    -        <canvas id="cw"></canvas>
    -        qwerewr
    -
    -    </body>
    +    <head>
    +        <meta charset="UTF-8">
    +        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    +        <meta http-equiv="X-UA-Compatible" content="ie=edge">
    +        <title>Document</title>
    +        <script>
    +            var cn;
    +            //= document.getElementById('cw');
    +            var c;
    +            var u = 10;
    +            const m = {
    +                x: innerWidth / 2,
    +                y: innerHeight / 2
    +            };
    +            window.onmousemove = function(e) {
    +                m.x = e.clientX;
    +                m.y = e.clientY;
    +
    +            }
    +            function gc() {
    +                var s = "0123456789ABCDEF";
    +                var c = "#";
    +                for (var i = 0; i < 6; i++) {
    +                    c += s[Math.ceil(Math.random() * 15)]
    +                }
    +                return c
    +            }
    +            var a = [];
    +            window.onload = function myfunction() {
    +                cn = document.getElementById('cw');
    +                c = cn.getContext('2d');
    +
    +                for (var i = 0; i < 10; i++) {
    +                    var r = 30;
    +                    var x = Math.random() * (innerWidth - 2 * r) + r;
    +                    var y = Math.random() * (innerHeight - 2 * r) + r;
    +                    var t = new ob(innerWidth / 2,innerHeight / 2,5,"red",Math.random() * 200 + 20,2);
    +                    a.push(t);
    +                }
    +                //cn.style.backgroundColor = "#700bc8";
    +
    +                c.lineWidth = "2";
    +                c.globalAlpha = 0.5;
    +                resize();
    +                anim()
    +            }
    +            window.onresize = function() {
    +
    +                resize();
    +
    +            }
    +            function resize() {
    +                cn.height = innerHeight;
    +                cn.width = innerWidth;
    +                for (var i = 0; i < 101; i++) {
    +                    var r = 30;
    +                    var x = Math.random() * (innerWidth - 2 * r) + r;
    +                    var y = Math.random() * (innerHeight - 2 * r) + r;
    +                    a[i] = new ob(innerWidth / 2,innerHeight / 2,4,gc(),Math.random() * 200 + 20,0.02);
    +
    +                }
    +                //  a[0] = new ob(innerWidth / 2, innerHeight / 2, 40, "red", 0.05, 0.05);
    +                //a[0].dr();
    +            }
    +            function ob(x, y, r, cc, o, s) {
    +                this.x = x;
    +                this.y = y;
    +                this.r = r;
    +                this.cc = cc;
    +                this.theta = Math.random() * Math.PI * 2;
    +                this.s = s;
    +                this.o = o;
    +                this.t = Math.random() * 150;
    +
    +                this.o = o;
    +                this.dr = function() {
    +                    const ls = {
    +                        x: this.x,
    +                        y: this.y
    +                    };
    +                    this.theta += this.s;
    +                    this.x = m.x + Math.cos(this.theta) * this.t;
    +                    this.y = m.y + Math.sin(this.theta) * this.t;
    +                    c.beginPath();
    +                    c.lineWidth = this.r;
    +                    c.strokeStyle = this.cc;
    +                    c.moveTo(ls.x, ls.y);
    +                    c.lineTo(this.x, this.y);
    +                    c.stroke();
    +                    c.closePath();
    +
    +                }
    +            }
    +            function anim() {
    +                requestAnimationFrame(anim);
    +                c.fillStyle = "rgba(0,0,0,0.05)";
    +                c.fillRect(0, 0, cn.width, cn.height);
    +                a.forEach(function(e, i) {
    +                    e.dr();
    +                });
    +
    +            }
    +        </script>
    +        <style>
    +            #cw {
    +                position: fixed;
    +                z-index: -1;
    +            }
    +
    +            body {
    +                margin: 0;
    +                padding: 0;
    +                background-color: rgba(0,0,0,0.05);
    +            }
    +        </style>
    +    </head>
    +    <body>
    +        <canvas id="cw"></canvas>
    +        qwerewr
    +
    +    </body>
     </html>
     
    @@ -474,224 +474,224 @@

    Snake Game

    <html lang="en"> <head> -    <meta charset="UTF-8"> -    <meta name="viewport" content="width=device-width,initial-scale=1"> -    <meta http-equiv="X-UA-Compatible" content="ie=edge"> -    <title>Nokia 1100:snake..Member berries</title> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width,initial-scale=1"> + <meta http-equiv="X-UA-Compatible" content="ie=edge"> + <title>Nokia 1100:snake..Member berries</title> </head> <body> -    <div class="keypress hide"> -        <div class="up" onclick="emit(38)">&#8593;</div> -        <div class="right" onclick="emit(39)">&#8594;</div> -        <div class="left" onclick="emit(37)">&#8592;</div> -        <div class="down" onclick="emit(40)">&#8595;</div> -    </div> -    <div class="banner" id="selector"> -        <div> -            Time :<span id="time">0</span> -        </div> -        <div>LousyGames ©</div> -        <div> -            Score :<span id="score">0</span> -        </div> -        <div class="touch off" onclick="touch(this)">touch</div> -    </div> -    <canvas id="main"></canvas> + <div class="keypress hide"> + <div class="up" onclick="emit(38)">&#8593;</div> + <div class="right" onclick="emit(39)">&#8594;</div> + <div class="left" onclick="emit(37)">&#8592;</div> + <div class="down" onclick="emit(40)">&#8595;</div> + </div> + <div class="banner" id="selector"> + <div> + Time :<span id="time">0</span> + </div> + <div>LousyGames ©</div> + <div> + Score :<span id="score">0</span> + </div> + <div class="touch off" onclick="touch(this)">touch</div> + </div> + <canvas id="main"></canvas> </body> <style> -    body { -        margin: 0; -        overflow: hidden; -        background: #000 -    } - -    .banner { -        text-align: center; -        color: #fff; -        background: #3f51b5; -        line-height: 29px; -        position: fixed; -        left: 0; -        top: 0; -        right: 0; -        font-family: monospace; -        height: 30px; -        opacity: .4; -        display: flex; -        transition: .5s -    } - -    .banner:hover { -        opacity: 1 -    } - -    div#selector>div { -        flex-basis: 30% -    } - -    @keyframes diss { -        from { -            opacity: 1 -        } - -        to { -            opacity: 0 -        } -    } - -    .keypress>div { -        border: dashed 3px #fff; -        height: 48%; -        width: 48%; -        display: flex; -        align-content: center; -        justify-content: center; -        align-self: center; -        align-items: center; -        font-size: -webkit-xxx-large; -        font-weight: 900; -        color: #fff; -        transition: .5s; -        opacity: .1; -        border-radius: 7px -    } - -    .keypress { -        position: fixed; -        width: 100vw; -        height: 100vh; -        top: 0; -        left: 0; -        display: flex; -        flex-wrap: wrap; -        justify-content: space-around; -        opacity: 1; -        user-select: none -    } - -    .keypress>div:hover { -        opacity: 1 -    } - -    .touch { -        background: #8bc34a -    } - -    .off { -        background: #f44336 -    } - -    .hide { -        opacity: 0 -    } + body { + margin: 0; + overflow: hidden; + background: #000 + } + + .banner { + text-align: center; + color: #fff; + background: #3f51b5; + line-height: 29px; + position: fixed; + left: 0; + top: 0; + right: 0; + font-family: monospace; + height: 30px; + opacity: .4; + display: flex; + transition: .5s + } + + .banner:hover { + opacity: 1 + } + + div#selector>div { + flex-basis: 30% + } + + @keyframes diss { + from { + opacity: 1 + } + + to { + opacity: 0 + } + } + + .keypress>div { + border: dashed 3px #fff; + height: 48%; + width: 48%; + display: flex; + align-content: center; + justify-content: center; + align-self: center; + align-items: center; + font-size: -webkit-xxx-large; + font-weight: 900; + color: #fff; + transition: .5s; + opacity: .1; + border-radius: 7px + } + + .keypress { + position: fixed; + width: 100vw; + height: 100vh; + top: 0; + left: 0; + display: flex; + flex-wrap: wrap; + justify-content: space-around; + opacity: 1; + user-select: none + } + + .keypress>div:hover { + opacity: 1 + } + + .touch { + background: #8bc34a + } + + .off { + background: #f44336 + } + + .hide { + opacity: 0 + } </style> </html>

    Javascript

    function tmz() {
    -        var e = new Date(t),
    -            i = new Date,
    -            n = Math.abs(i.getMinutes() - e.getMinutes()),
    -            o = Math.abs(i.getSeconds() - e.getSeconds());
    -        return n + " : " + o
    -    }
    -
    -    function coll(t, e) {
    -        return t.x < e.x + e.w && t.x + t.w > e.x && t.y < e.y + e.h && t.h + t.y > e.y
    -    }
    -
    -    function snake() {
    -        this.w = 15, this.h = 15, this.dx = 1, this.dy = 1, this.xf = 1, this.yf = 1, this.sn = [];
    -        for (var t = {
    -            x: w / 2,
    -            y: h / 2
    -        }, e = 0; e < 5; e++) this.sn.push(Object.assign({}, t)), t.x += this.w;
    -        this.draw = function () {
    -            var t = d && d.search("Arrow") > -1,
    -                e = -1;
    -            if (t) {
    -                var i = {
    -                    ...this.sn[0]
    -                };
    -                if ("ArrowUp" == d && (i.y -= this.h), "ArrowDown" == d && (i.y += this.h), "ArrowLeft" == d && (i.x -= this.w), "ArrowRight" == d && (i.x += this.w), i.x >= w ? i.x = 0 : i.x < 0 && (i.x = w - this.w), i.y > h ? i.y = 0 : i.y < 0 && (i.y = h), e = fa.findIndex(t => coll({
    -                    ...this.sn[0],
    -                    h: this.h,
    -                    w: this.w
    -                }, t)), this.sn.unshift(i), -1 != e) return console.log(e), fa[e].renew(), void (document.getElementById("score").innerText = Number(document.getElementById("score").innerText) + 1);
    -                this.sn.pop(), console.log(6)
    -            }
    -            this.sn.forEach((t, e, i) => {
    -                if (0 == e || i.length - 1 == e) {
    -                    var n = c.createLinearGradient(t.x, t.y, t.x + this.w, t.y + this.h);
    -                    i.length - 1 == e ? (n.addColorStop(0, "black"), n.addColorStop(1, "#8BC34A")) : (n.addColorStop(0, "#8BC34A"), n.addColorStop(1, "white")), c.fillStyle = n
    -                } else c.fillStyle = "#8BC34A";
    -                c.fillRect(t.x, t.y, this.w, this.h), c.strokeStyle = "#E91E63", c.font = "30px serif", c.strokeStyle = "#9E9E9E", i.length - 1 != e && 0 != e && c.strokeRect(t.x, t.y, this.w, this.h), 0 == e && (c.beginPath(), c.fillStyle = "#F44336", c.arc(t.x + 10, t.y + 2, 5, 360, 0), c.fill()), c.arc(t.x + 10, t.y + 2, 5, 360, 0), c.fill(), c.beginPath()
    -            })
    -        }
    -    }
    -
    -    function gc() {
    -        for (var t = "0123456789ABCDEF", e = "#", i = 0; i < 6; i++) e += t[Math.ceil(15 * Math.random())];
    -        return e
    -    }
    -
    -    function food() {
    -        this.x = 0, this.y = 0, this.b = 10, this.w = this.b, this.h = this.b, this.color = gc(), this.renew = function () {
    -            this.x = Math.floor(Math.random() * (w - 200) + 10), this.y = Math.floor(Math.random() * (h - 200) + 30), this.color = gc()
    -        }, this.renew(), this.put = (() => {
    -            c.fillStyle = this.color, c.arc(this.x, this.y, this.b - 5, 0, 2 * Math.PI), c.fill(), c.beginPath(), c.arc(this.x, this.y, this.b - 5, 0, Math.PI), c.strokeStyle = "green", c.lineWidth = 10, c.stroke(), c.beginPath(), c.lineWidth = 1
    -        })
    -    }
    -
    -    function init() {
    -        cc.height = h, cc.width = w, c.fillRect(0, 0, w, innerHeight);
    -        for (var t = 0; t < 10; t++) fa.push(new food);
    -        s = new snake(w / 2, h / 2, 400, 4, 4), anima()
    -    }
    -
    -    function anima() {
    -        c.fillStyle = "rgba(0,0,0,0.11)", c.fillRect(0, 0, cc.width, cc.height), fa.forEach(t => t.put()), s.draw(), document.getElementById("time").innerText = tmz(), setTimeout(() => {
    -            requestAnimationFrame(anima)
    -        }, fw)
    -    }
    -
    -    function emit(t) {
    -        key.keydown(t)
    -    }
    -
    -    function touch(t) {
    -        t.classList.toggle("off"), document.getElementsByClassName("keypress")[0].classList.toggle("hide")
    -    }
    -    var t = new Date + "",
    -        d = void 0,
    -        cc = document.getElementsByTagName("canvas")[0],
    -        c = cc.getContext("2d");
    -    key = {}, key.keydown = function (t) {
    -        var e = document.createEvent("KeyboardEvent");
    -        Object.defineProperty(e, "keyCode", {
    -            get: function () {
    -                return this.keyCodeVal
    -            }
    -        }), Object.defineProperty(e, "key", {
    -            get: function () {
    -                return 37 == this.keyCodeVal ? "ArrowLeft" : 38 == this.keyCodeVal ? "ArrowUp" : 39 == this.keyCodeVal ? "ArrowRight" : "ArrowDown"
    -            }
    -        }), Object.defineProperty(e, "which", {
    -            get: function () {
    -                return this.keyCodeVal
    -            }
    -        }), e.initKeyboardEvent ? e.initKeyboardEvent("keydown", !0, !0, document.defaultView, !1, !1, !1, !1, t, t) : e.initKeyEvent("keydown", !0, !0, document.defaultView, !1, !1, !1, !1, t, 0), e.keyCodeVal = t, e.keyCode !== t && alert("keyCode mismatch " + e.keyCode + "(" + e.which + ")"), document.dispatchEvent(e)
    -    };
    -    var o, s, h = innerHeight,
    -        w = innerWidth,
    -        fw = 60,
    -        fa = [];
    -    window.onkeydown = function (t) {
    -        var e = t.key;
    -        (e.search("Arrow") > -1 || "1" == e) && (d = t.key), "i" != e && "I" != e || (console.log("inc"), fw -= 10), "d" != e && "D" != e || (console.log("dec"), fw += 10)
    -    }, init();
    +        var e = new Date(t),
    +            i = new Date,
    +            n = Math.abs(i.getMinutes() - e.getMinutes()),
    +            o = Math.abs(i.getSeconds() - e.getSeconds());
    +        return n + " : " + o
    +    }
    +
    +    function coll(t, e) {
    +        return t.x < e.x + e.w && t.x + t.w > e.x && t.y < e.y + e.h && t.h + t.y > e.y
    +    }
    +
    +    function snake() {
    +        this.w = 15, this.h = 15, this.dx = 1, this.dy = 1, this.xf = 1, this.yf = 1, this.sn = [];
    +        for (var t = {
    +            x: w / 2,
    +            y: h / 2
    +        }, e = 0; e < 5; e++) this.sn.push(Object.assign({}, t)), t.x += this.w;
    +        this.draw = function () {
    +            var t = d && d.search("Arrow") > -1,
    +                e = -1;
    +            if (t) {
    +                var i = {
    +                    ...this.sn[0]
    +                };
    +                if ("ArrowUp" == d && (i.y -= this.h), "ArrowDown" == d && (i.y += this.h), "ArrowLeft" == d && (i.x -= this.w), "ArrowRight" == d && (i.x += this.w), i.x >= w ? i.x = 0 : i.x < 0 && (i.x = w - this.w), i.y > h ? i.y = 0 : i.y < 0 && (i.y = h), e = fa.findIndex(t => coll({
    +                    ...this.sn[0],
    +                    h: this.h,
    +                    w: this.w
    +                }, t)), this.sn.unshift(i), -1 != e) return console.log(e), fa[e].renew(), void (document.getElementById("score").innerText = Number(document.getElementById("score").innerText) + 1);
    +                this.sn.pop(), console.log(6)
    +            }
    +            this.sn.forEach((t, e, i) => {
    +                if (0 == e || i.length - 1 == e) {
    +                    var n = c.createLinearGradient(t.x, t.y, t.x + this.w, t.y + this.h);
    +                    i.length - 1 == e ? (n.addColorStop(0, "black"), n.addColorStop(1, "#8BC34A")) : (n.addColorStop(0, "#8BC34A"), n.addColorStop(1, "white")), c.fillStyle = n
    +                } else c.fillStyle = "#8BC34A";
    +                c.fillRect(t.x, t.y, this.w, this.h), c.strokeStyle = "#E91E63", c.font = "30px serif", c.strokeStyle = "#9E9E9E", i.length - 1 != e && 0 != e && c.strokeRect(t.x, t.y, this.w, this.h), 0 == e && (c.beginPath(), c.fillStyle = "#F44336", c.arc(t.x + 10, t.y + 2, 5, 360, 0), c.fill()), c.arc(t.x + 10, t.y + 2, 5, 360, 0), c.fill(), c.beginPath()
    +            })
    +        }
    +    }
    +
    +    function gc() {
    +        for (var t = "0123456789ABCDEF", e = "#", i = 0; i < 6; i++) e += t[Math.ceil(15 * Math.random())];
    +        return e
    +    }
    +
    +    function food() {
    +        this.x = 0, this.y = 0, this.b = 10, this.w = this.b, this.h = this.b, this.color = gc(), this.renew = function () {
    +            this.x = Math.floor(Math.random() * (w - 200) + 10), this.y = Math.floor(Math.random() * (h - 200) + 30), this.color = gc()
    +        }, this.renew(), this.put = (() => {
    +            c.fillStyle = this.color, c.arc(this.x, this.y, this.b - 5, 0, 2 * Math.PI), c.fill(), c.beginPath(), c.arc(this.x, this.y, this.b - 5, 0, Math.PI), c.strokeStyle = "green", c.lineWidth = 10, c.stroke(), c.beginPath(), c.lineWidth = 1
    +        })
    +    }
    +
    +    function init() {
    +        cc.height = h, cc.width = w, c.fillRect(0, 0, w, innerHeight);
    +        for (var t = 0; t < 10; t++) fa.push(new food);
    +        s = new snake(w / 2, h / 2, 400, 4, 4), anima()
    +    }
    +
    +    function anima() {
    +        c.fillStyle = "rgba(0,0,0,0.11)", c.fillRect(0, 0, cc.width, cc.height), fa.forEach(t => t.put()), s.draw(), document.getElementById("time").innerText = tmz(), setTimeout(() => {
    +            requestAnimationFrame(anima)
    +        }, fw)
    +    }
    +
    +    function emit(t) {
    +        key.keydown(t)
    +    }
    +
    +    function touch(t) {
    +        t.classList.toggle("off"), document.getElementsByClassName("keypress")[0].classList.toggle("hide")
    +    }
    +    var t = new Date + "",
    +        d = void 0,
    +        cc = document.getElementsByTagName("canvas")[0],
    +        c = cc.getContext("2d");
    +    key = {}, key.keydown = function (t) {
    +        var e = document.createEvent("KeyboardEvent");
    +        Object.defineProperty(e, "keyCode", {
    +            get: function () {
    +                return this.keyCodeVal
    +            }
    +        }), Object.defineProperty(e, "key", {
    +            get: function () {
    +                return 37 == this.keyCodeVal ? "ArrowLeft" : 38 == this.keyCodeVal ? "ArrowUp" : 39 == this.keyCodeVal ? "ArrowRight" : "ArrowDown"
    +            }
    +        }), Object.defineProperty(e, "which", {
    +            get: function () {
    +                return this.keyCodeVal
    +            }
    +        }), e.initKeyboardEvent ? e.initKeyboardEvent("keydown", !0, !0, document.defaultView, !1, !1, !1, !1, t, t) : e.initKeyEvent("keydown", !0, !0, document.defaultView, !1, !1, !1, !1, t, 0), e.keyCodeVal = t, e.keyCode !== t && alert("keyCode mismatch " + e.keyCode + "(" + e.which + ")"), document.dispatchEvent(e)
    +    };
    +    var o, s, h = innerHeight,
    +        w = innerWidth,
    +        fw = 60,
    +        fa = [];
    +    window.onkeydown = function (t) {
    +        var e = t.key;
    +        (e.search("Arrow") > -1 || "1" == e) && (d = t.key), "i" != e && "I" != e || (console.log("inc"), fw -= 10), "d" != e && "D" != e || (console.log("dec"), fw += 10)
    +    }, init();
     
    Output
    diff --git a/files/zh-cn/web/api/canvas_api/tutorial/basic_usage/index.html b/files/zh-cn/web/api/canvas_api/tutorial/basic_usage/index.html index b610e5a7ebbd30..08e5d57e61d5d4 100644 --- a/files/zh-cn/web/api/canvas_api/tutorial/basic_usage/index.html +++ b/files/zh-cn/web/api/canvas_api/tutorial/basic_usage/index.html @@ -12,15 +12,15 @@
    {{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Drawing_shapes")}}
    -

    让我们通过了解 {{HTMLElement("canvas")}} {{Glossary("HTML")}} 元素本身开始本教程。在本页结束时,你会了解到如何去设置一个 canvas 2D 上下文以及如何在你的浏览器上创建第一个例子。

    +

    让我们通过了解 {{HTMLElement("canvas")}} {{Glossary("HTML")}} 元素本身开始本教程。在本页结束时,你会了解到如何去设置一个 canvas 2D 上下文以及如何在你的浏览器上创建第一个例子。

    -

     <canvas> 元素

    +

    <canvas> 元素

    <canvas id="tutorial" width="150" height="150"></canvas>
     
    -

    {{HTMLElement("canvas")}} 看起来和 {{HTMLElement("img")}} 元素很相像,唯一的不同就是它并没有 src 和 alt 属性。实际上,<canvas> 标签只有两个属性—— {{htmlattrxref("width", "canvas")}}和{{htmlattrxref("height", "canvas")}}。这些都是可选的,并且同样利用 {{Glossary("DOM")}} properties 来设置。当没有设置宽度和高度的时候,canvas 会初始化宽度为 300 像素和高度为 150 像素。该元素可以使用{{Glossary("CSS")}}来定义大小,但在绘制时图像会伸缩以适应它的框架尺寸:如果 CSS 的尺寸与初始画布的比例不一致,它会出现扭曲。

    +

    {{HTMLElement("canvas")}} 看起来和 {{HTMLElement("img")}} 元素很相像,唯一的不同就是它并没有 src 和 alt 属性。实际上,<canvas> 标签只有两个属性—— {{htmlattrxref("width", "canvas")}}和{{htmlattrxref("height", "canvas")}}。这些都是可选的,并且同样利用 {{Glossary("DOM")}} properties 来设置。当没有设置宽度和高度的时候,canvas 会初始化宽度为 300 像素和高度为 150 像素。该元素可以使用{{Glossary("CSS")}}来定义大小,但在绘制时图像会伸缩以适应它的框架尺寸:如果 CSS 的尺寸与初始画布的比例不一致,它会出现扭曲。

    注意: 如果你绘制出来的图像是扭曲的,尝试用 width 和 height 属性为<canvas>明确规定宽高,而不是使用 CSS。

    @@ -48,15 +48,15 @@

    替换内容

    </canvas> -

     </canvas> 标签不可省

    +

    </canvas> 标签不可省

    -

    与 {{HTMLElement("img")}} 元素不同,{{HTMLElement("canvas")}} 元素需要结束标签 (</canvas>)。如果结束标签不存在,则文档的其余部分会被认为是替代内容,将不会显示出来。

    +

    与 {{HTMLElement("img")}} 元素不同,{{HTMLElement("canvas")}} 元素需要结束标签 (</canvas>)。如果结束标签不存在,则文档的其余部分会被认为是替代内容,将不会显示出来。

    -

    如果不需要替代内容,一个简单的 <canvas id="foo" ...></canvas> 在所有支持 canvas 的浏览器中都是完全兼容的。

    +

    如果不需要替代内容,一个简单的 <canvas id="foo" ...></canvas> 在所有支持 canvas 的浏览器中都是完全兼容的。

    渲染上下文(The rendering context)

    -

    {{HTMLElement("canvas")}} 元素创造了一个固定大小的画布,它公开了一个或多个渲染上下文,其可以用来绘制和处理要展示的内容。我们将会将注意力放在 2D 渲染上下文中。其他种类的上下文也许提供了不同种类的渲染方式;比如, WebGL 使用了基于OpenGL ES的 3D 上下文 ("experimental-webgl") 。

    +

    {{HTMLElement("canvas")}} 元素创造了一个固定大小的画布,它公开了一个或多个渲染上下文,其可以用来绘制和处理要展示的内容。我们将会将注意力放在 2D 渲染上下文中。其他种类的上下文也许提供了不同种类的渲染方式;比如, WebGL 使用了基于OpenGL ES的 3D 上下文 ("experimental-webgl") 。

    canvas 起初是空白的。为了展示,首先脚本需要找到渲染上下文,然后在它的上面绘制。{{HTMLElement("canvas")}} 元素有一个叫做 {{domxref("HTMLCanvasElement.getContext", "getContext()")}} 的方法,这个方法是用来获得渲染上下文和它的绘画功能。getContext()接受一个参数,即上下文的类型。对于 2D 图像而言,如本教程,你可以使用 {{domxref("CanvasRenderingContext2D")}}。

    @@ -64,12 +64,12 @@

    渲染上下文(The render var ctx = canvas.getContext('2d'); -

    代码的第一行通过使用 {{domxref("document.getElementById()")}} 方法来为 {{HTMLElement("canvas")}} 元素得到 DOM 对象。一旦有了元素对象,你可以通过使用它的 getContext() 方法来访问绘画上下文。

    +

    代码的第一行通过使用 {{domxref("document.getElementById()")}} 方法来为 {{HTMLElement("canvas")}} 元素得到 DOM 对象。一旦有了元素对象,你可以通过使用它的 getContext() 方法来访问绘画上下文。

    检查支持性

    -

    替换内容是用于在不支持 {{HTMLElement("canvas")}} 标签的浏览器中展示的。通过简单的测试 getContext() 方法的存在,脚本可以检查编程支持性。上面的代码片段现在变成了这个样子:

    +

    替换内容是用于在不支持 {{HTMLElement("canvas")}} 标签的浏览器中展示的。通过简单的测试 getContext() 方法的存在,脚本可以检查编程支持性。上面的代码片段现在变成了这个样子:

    var canvas = document.getElementById('tutorial');
     
    @@ -112,7 +112,7 @@ 

    一个模板骨架

    </html>
    -

    上面的脚本中包含一个叫做 draw() 的函数,当页面加载结束的时候就会执行这个函数。通过使用在文档上加载事件来完成。只要页面加载结束,这个函数,或者像是这个的,同样可以使用 {{domxref("WindowTimers.setTimeout", "window.setTimeout()")}}, {{domxref("WindowTimers.setInterval", "window.setInterval()")}},或者其他任何事件处理程序来调用。

    +

    上面的脚本中包含一个叫做 draw() 的函数,当页面加载结束的时候就会执行这个函数。通过使用在文档上加载事件来完成。只要页面加载结束,这个函数,或者像是这个的,同样可以使用 {{domxref("WindowTimers.setTimeout", "window.setTimeout()")}}, {{domxref("WindowTimers.setInterval", "window.setInterval()")}},或者其他任何事件处理程序来调用。

    模板看起来会是这样。如这里所示,它最初是空白的。

    diff --git a/files/zh-cn/web/api/canvas_api/tutorial/compositing/example/index.html b/files/zh-cn/web/api/canvas_api/tutorial/compositing/example/index.html index a9aed941653be8..160451806befb4 100644 --- a/files/zh-cn/web/api/canvas_api/tutorial/compositing/example/index.html +++ b/files/zh-cn/web/api/canvas_api/tutorial/compositing/example/index.html @@ -23,11 +23,11 @@

    合成示例

    var canvas1 = document.createElement("canvas");
     var canvas2 = document.createElement("canvas");
     var gco = [ 'source-over','source-in','source-out','source-atop',
    -            'destination-over','destination-in','destination-out','destination-atop',
    -            'lighter', 'copy','xor', 'multiply', 'screen', 'overlay', 'darken',
    -            'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light',
    -            'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity'
    -          ].reverse();
    +            'destination-over','destination-in','destination-out','destination-atop',
    +            'lighter', 'copy','xor', 'multiply', 'screen', 'overlay', 'darken',
    +            'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light',
    +            'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity'
    +          ].reverse();
     var gcoText = [
     '这是默认设置,并在现有画布上下文之上绘制新图形。',
     '新图形只在新图形和目标画布重叠的地方绘制。其他的都是透明的。',
    @@ -55,7 +55,7 @@ 

    合成示例

    '保留底层的亮度(luma)和色调(hue),同时采用顶层的色度(chroma)。', '保留了底层的亮度(luma),同时采用了顶层的色调 (hue) 和色度 (chroma)。', '保持底层的色调(hue)和色度(chroma),同时采用顶层的亮度(luma)。' -          ].reverse(); + ].reverse(); var width = 320; var height = 340;
    @@ -65,95 +65,95 @@

    主程序

    当页面加载时,这部分程序会运行,并执行示例代码:

    window.onload = function() {
    -    // lum in sRGB
    -    var lum = {
    -        r: 0.33,
    -        g: 0.33,
    -        b: 0.33
    -    };
    -    // resize canvas
    -    canvas1.width = width;
    -    canvas1.height = height;
    -    canvas2.width = width;
    -    canvas2.height = height;
    -    lightMix()
    -    colorSphere();
    -    runComposite();
    -    return;
    +    // lum in sRGB
    +    var lum = {
    +        r: 0.33,
    +        g: 0.33,
    +        b: 0.33
    +    };
    +    // resize canvas
    +    canvas1.width = width;
    +    canvas1.height = height;
    +    canvas2.width = width;
    +    canvas2.height = height;
    +    lightMix()
    +    colorSphere();
    +    runComposite();
    +    return;
     };
     

    这部分代码,runComposite(),处理了大部分的工作,但需要依赖于许多效用函数来完成复杂的处理工作。

    function createCanvas() {
    -    var canvas = document.createElement("canvas");
    -    canvas.style.background = "url("+op_8x8.data+")";
    -    canvas.style.border = "1px solid #000";
    -    canvas.style.margin = "5px";
    -    canvas.width = width/2;
    -    canvas.height = height/2;
    -    return canvas;
    +    var canvas = document.createElement("canvas");
    +    canvas.style.background = "url("+op_8x8.data+")";
    +    canvas.style.border = "1px solid #000";
    +    canvas.style.margin = "5px";
    +    canvas.width = width/2;
    +    canvas.height = height/2;
    +    return canvas;
     }
     
     function runComposite() {
    -    var dl = document.createElement("dl");
    -    document.body.appendChild(dl);
    -    while(gco.length) {
    -        var pop = gco.pop();
    -        var dt = document.createElement("dt");
    -        dt.textContent = pop;
    -        dl.appendChild(dt);
    -        var dd = document.createElement("dd");
    -        var p = document.createElement("p");
    -        p.textContent = gcoText.pop();
    -        dd.appendChild(p);
    +    var dl = document.createElement("dl");
    +    document.body.appendChild(dl);
    +    while(gco.length) {
    +        var pop = gco.pop();
    +        var dt = document.createElement("dt");
    +        dt.textContent = pop;
    +        dl.appendChild(dt);
    +        var dd = document.createElement("dd");
    +        var p = document.createElement("p");
    +        p.textContent = gcoText.pop();
    +        dd.appendChild(p);
     
    -        var canvasToDrawOn = createCanvas();
    -        var canvasToDrawFrom = createCanvas();
    -        var canvasToDrawResult = createCanvas();
    +        var canvasToDrawOn = createCanvas();
    +        var canvasToDrawFrom = createCanvas();
    +        var canvasToDrawResult = createCanvas();
     
    -        var ctx = canvasToDrawResult.getContext('2d');
    -        ctx.clearRect(0, 0, width, height)
    -        ctx.save();
    -        ctx.drawImage(canvas1, 0, 0, width/2, height/2);
    -        ctx.globalCompositeOperation = pop;
    -        ctx.drawImage(canvas2, 0, 0, width/2, height/2);
    -        ctx.globalCompositeOperation = "source-over";
    -        ctx.fillStyle = "rgba(0,0,0,0.8)";
    -        ctx.fillRect(0, height/2 - 20, width/2, 20);
    -        ctx.fillStyle = "#FFF";
    -        ctx.font = "14px arial";
    -        ctx.fillText(pop, 5, height/2 - 5);
    -        ctx.restore();
    +        var ctx = canvasToDrawResult.getContext('2d');
    +        ctx.clearRect(0, 0, width, height)
    +        ctx.save();
    +        ctx.drawImage(canvas1, 0, 0, width/2, height/2);
    +        ctx.globalCompositeOperation = pop;
    +        ctx.drawImage(canvas2, 0, 0, width/2, height/2);
    +        ctx.globalCompositeOperation = "source-over";
    +        ctx.fillStyle = "rgba(0,0,0,0.8)";
    +        ctx.fillRect(0, height/2 - 20, width/2, 20);
    +        ctx.fillStyle = "#FFF";
    +        ctx.font = "14px arial";
    +        ctx.fillText(pop, 5, height/2 - 5);
    +        ctx.restore();
     
    -        var ctx = canvasToDrawOn.getContext('2d');
    -        ctx.clearRect(0, 0, width, height)
    -        ctx.save();
    -        ctx.drawImage(canvas1, 0, 0, width/2, height/2);
    -        ctx.fillStyle = "rgba(0,0,0,0.8)";
    -        ctx.fillRect(0, height/2 - 20, width/2, 20);
    -        ctx.fillStyle = "#FFF";
    -        ctx.font = "14px arial";
    -        ctx.fillText('existing content', 5, height/2 - 5);
    -        ctx.restore();
    +        var ctx = canvasToDrawOn.getContext('2d');
    +        ctx.clearRect(0, 0, width, height)
    +        ctx.save();
    +        ctx.drawImage(canvas1, 0, 0, width/2, height/2);
    +        ctx.fillStyle = "rgba(0,0,0,0.8)";
    +        ctx.fillRect(0, height/2 - 20, width/2, 20);
    +        ctx.fillStyle = "#FFF";
    +        ctx.font = "14px arial";
    +        ctx.fillText('existing content', 5, height/2 - 5);
    +        ctx.restore();
     
    -        var ctx = canvasToDrawFrom.getContext('2d');
    -        ctx.clearRect(0, 0, width, height)
    -        ctx.save();
    -        ctx.drawImage(canvas2, 0, 0, width/2, height/2);
    -        ctx.fillStyle = "rgba(0,0,0,0.8)";
    -        ctx.fillRect(0, height/2 - 20, width/2, 20);
    -        ctx.fillStyle = "#FFF";
    -        ctx.font = "14px arial";
    -        ctx.fillText('new content', 5, height/2 - 5);
    -        ctx.restore();
    +        var ctx = canvasToDrawFrom.getContext('2d');
    +        ctx.clearRect(0, 0, width, height)
    +        ctx.save();
    +        ctx.drawImage(canvas2, 0, 0, width/2, height/2);
    +        ctx.fillStyle = "rgba(0,0,0,0.8)";
    +        ctx.fillRect(0, height/2 - 20, width/2, 20);
    +        ctx.fillStyle = "#FFF";
    +        ctx.font = "14px arial";
    +        ctx.fillText('new content', 5, height/2 - 5);
    +        ctx.restore();
     
    -        dd.appendChild(canvasToDrawOn);
    -        dd.appendChild(canvasToDrawFrom);
    -        dd.appendChild(canvasToDrawResult);
    +        dd.appendChild(canvasToDrawOn);
    +        dd.appendChild(canvasToDrawFrom);
    +        dd.appendChild(canvasToDrawResult);
     
    -        dl.appendChild(dd);
    -    }
    +        dl.appendChild(dd);
    +    }
     };
     
    @@ -162,134 +162,134 @@

    效用函数 (Utility functions)

    程序需要依赖许多效用函数。

    var lightMix = function() {
    -    var ctx = canvas2.getContext("2d");
    -    ctx.save();
    -    ctx.globalCompositeOperation = "lighter";
    -    ctx.beginPath();
    -    ctx.fillStyle = "rgba(255,0,0,1)";
    -    ctx.arc(100, 200, 100, Math.PI*2, 0, false);
    -    ctx.fill()
    -    ctx.beginPath();
    -    ctx.fillStyle = "rgba(0,0,255,1)";
    -    ctx.arc(220, 200, 100, Math.PI*2, 0, false);
    -    ctx.fill()
    -    ctx.beginPath();
    -    ctx.fillStyle = "rgba(0,255,0,1)";
    -    ctx.arc(160, 100, 100, Math.PI*2, 0, false);
    -    ctx.fill();
    -    ctx.restore();
    -    ctx.beginPath();
    -    ctx.fillStyle = "#f00";
    -    ctx.fillRect(0,0,30,30)
    -    ctx.fill();
    +    var ctx = canvas2.getContext("2d");
    +    ctx.save();
    +    ctx.globalCompositeOperation = "lighter";
    +    ctx.beginPath();
    +    ctx.fillStyle = "rgba(255,0,0,1)";
    +    ctx.arc(100, 200, 100, Math.PI*2, 0, false);
    +    ctx.fill()
    +    ctx.beginPath();
    +    ctx.fillStyle = "rgba(0,0,255,1)";
    +    ctx.arc(220, 200, 100, Math.PI*2, 0, false);
    +    ctx.fill()
    +    ctx.beginPath();
    +    ctx.fillStyle = "rgba(0,255,0,1)";
    +    ctx.arc(160, 100, 100, Math.PI*2, 0, false);
    +    ctx.fill();
    +    ctx.restore();
    +    ctx.beginPath();
    +    ctx.fillStyle = "#f00";
    +    ctx.fillRect(0,0,30,30)
    +    ctx.fill();
     };
     
    var colorSphere = function(element) {
    -    var ctx = canvas1.getContext("2d");
    -    var width = 360;
    -    var halfWidth = width / 2;
    -    var rotate = (1 / 360) * Math.PI * 2; // per degree
    -    var offset = 0; // scrollbar offset
    -    var oleft = -20;
    -    var otop = -20;
    -    for (var n = 0; n <= 359; n ++) {
    -        var gradient = ctx.createLinearGradient(oleft + halfWidth, otop, oleft + halfWidth, otop + halfWidth);
    -        var color = Color.HSV_RGB({ H: (n + 300) % 360, S: 100, V: 100 });
    -        gradient.addColorStop(0, "rgba(0,0,0,0)");
    -        gradient.addColorStop(0.7, "rgba("+color.R+","+color.G+","+color.B+",1)");
    -        gradient.addColorStop(1, "rgba(255,255,255,1)");
    -        ctx.beginPath();
    -        ctx.moveTo(oleft + halfWidth, otop);
    -        ctx.lineTo(oleft + halfWidth, otop + halfWidth);
    -        ctx.lineTo(oleft + halfWidth + 6, otop);
    -        ctx.fillStyle = gradient;
    -        ctx.fill();
    -        ctx.translate(oleft + halfWidth, otop + halfWidth);
    -        ctx.rotate(rotate);
    -        ctx.translate(-(oleft + halfWidth), -(otop + halfWidth));
    -    }
    -    ctx.beginPath();
    -    ctx.fillStyle = "#00f";
    -    ctx.fillRect(15,15,30,30)
    -    ctx.fill();
    -    return ctx.canvas;
    +    var ctx = canvas1.getContext("2d");
    +    var width = 360;
    +    var halfWidth = width / 2;
    +    var rotate = (1 / 360) * Math.PI * 2; // per degree
    +    var offset = 0; // scrollbar offset
    +    var oleft = -20;
    +    var otop = -20;
    +    for (var n = 0; n <= 359; n ++) {
    +        var gradient = ctx.createLinearGradient(oleft + halfWidth, otop, oleft + halfWidth, otop + halfWidth);
    +        var color = Color.HSV_RGB({ H: (n + 300) % 360, S: 100, V: 100 });
    +        gradient.addColorStop(0, "rgba(0,0,0,0)");
    +        gradient.addColorStop(0.7, "rgba("+color.R+","+color.G+","+color.B+",1)");
    +        gradient.addColorStop(1, "rgba(255,255,255,1)");
    +        ctx.beginPath();
    +        ctx.moveTo(oleft + halfWidth, otop);
    +        ctx.lineTo(oleft + halfWidth, otop + halfWidth);
    +        ctx.lineTo(oleft + halfWidth + 6, otop);
    +        ctx.fillStyle = gradient;
    +        ctx.fill();
    +        ctx.translate(oleft + halfWidth, otop + halfWidth);
    +        ctx.rotate(rotate);
    +        ctx.translate(-(oleft + halfWidth), -(otop + halfWidth));
    +    }
    +    ctx.beginPath();
    +    ctx.fillStyle = "#00f";
    +    ctx.fillRect(15,15,30,30)
    +    ctx.fill();
    +    return ctx.canvas;
     };
     
    // HSV (1978) = H: Hue / S: Saturation / V: Value
     Color = {};
     Color.HSV_RGB = function (o) {
    -    var H = o.H / 360,
    -        S = o.S / 100,
    -        V = o.V / 100,
    -        R, G, B;
    -    var A, B, C, D;
    -    if (S == 0) {
    -        R = G = B = Math.round(V * 255);
    -    } else {
    -        if (H >= 1) H = 0;
    -        H = 6 * H;
    -        D = H - Math.floor(H);
    -        A = Math.round(255 * V * (1 - S));
    -        B = Math.round(255 * V * (1 - (S * D)));
    -        C = Math.round(255 * V * (1 - (S * (1 - D))));
    -        V = Math.round(255 * V);
    -        switch (Math.floor(H)) {
    -            case 0:
    -                R = V;
    -                G = C;
    -                B = A;
    -                break;
    -            case 1:
    -                R = B;
    -                G = V;
    -                B = A;
    -                break;
    -            case 2:
    -                R = A;
    -                G = V;
    -                B = C;
    -                break;
    -            case 3:
    -                R = A;
    -                G = B;
    -                B = V;
    -                break;
    -            case 4:
    -                R = C;
    -                G = A;
    -                B = V;
    -                break;
    -            case 5:
    -                R = V;
    -                G = A;
    -                B = B;
    -                break;
    -        }
    -    }
    -    return {
    -        R: R,
    -        G: G,
    -        B: B
    -    };
    +    var H = o.H / 360,
    +        S = o.S / 100,
    +        V = o.V / 100,
    +        R, G, B;
    +    var A, B, C, D;
    +    if (S == 0) {
    +        R = G = B = Math.round(V * 255);
    +    } else {
    +        if (H >= 1) H = 0;
    +        H = 6 * H;
    +        D = H - Math.floor(H);
    +        A = Math.round(255 * V * (1 - S));
    +        B = Math.round(255 * V * (1 - (S * D)));
    +        C = Math.round(255 * V * (1 - (S * (1 - D))));
    +        V = Math.round(255 * V);
    +        switch (Math.floor(H)) {
    +            case 0:
    +                R = V;
    +                G = C;
    +                B = A;
    +                break;
    +            case 1:
    +                R = B;
    +                G = V;
    +                B = A;
    +                break;
    +            case 2:
    +                R = A;
    +                G = V;
    +                B = C;
    +                break;
    +            case 3:
    +                R = A;
    +                G = B;
    +                B = V;
    +                break;
    +            case 4:
    +                R = C;
    +                G = A;
    +                B = V;
    +                break;
    +            case 5:
    +                R = V;
    +                G = A;
    +                B = B;
    +                break;
    +        }
    +    }
    +    return {
    +        R: R,
    +        G: G,
    +        B: B
    +    };
     };
     
     var createInterlace = function (size, color1, color2) {
    -    var proto = document.createElement("canvas").getContext("2d");
    -    proto.canvas.width = size * 2;
    -    proto.canvas.height = size * 2;
    -    proto.fillStyle = color1; // top-left
    -    proto.fillRect(0, 0, size, size);
    -    proto.fillStyle = color2; // top-right
    -    proto.fillRect(size, 0, size, size);
    -    proto.fillStyle = color2; // bottom-left
    -    proto.fillRect(0, size, size, size);
    -    proto.fillStyle = color1; // bottom-right
    -    proto.fillRect(size, size, size, size);
    -    var pattern = proto.createPattern(proto.canvas, "repeat");
    -    pattern.data = proto.canvas.toDataURL();
    -    return pattern;
    +    var proto = document.createElement("canvas").getContext("2d");
    +    proto.canvas.width = size * 2;
    +    proto.canvas.height = size * 2;
    +    proto.fillStyle = color1; // top-left
    +    proto.fillRect(0, 0, size, size);
    +    proto.fillStyle = color2; // top-right
    +    proto.fillRect(size, 0, size, size);
    +    proto.fillStyle = color2; // bottom-left
    +    proto.fillRect(0, size, size, size);
    +    proto.fillStyle = color1; // bottom-right
    +    proto.fillRect(size, size, size, size);
    +    var pattern = proto.createPattern(proto.canvas, "repeat");
    +    pattern.data = proto.canvas.toDataURL();
    +    return pattern;
     };
     
     var op_8x8 = createInterlace(8, "#FFF", "#eee");
    diff --git a/files/zh-cn/web/api/canvas_api/tutorial/drawing_shapes/index.html b/files/zh-cn/web/api/canvas_api/tutorial/drawing_shapes/index.html index 69be2458e35273..84e39819e27435 100644 --- a/files/zh-cn/web/api/canvas_api/tutorial/drawing_shapes/index.html +++ b/files/zh-cn/web/api/canvas_api/tutorial/drawing_shapes/index.html @@ -48,9 +48,9 @@

    矩形(Rectangular)例子

    @@ -116,9 +116,9 @@

    绘制一个三角形

    @@ -206,9 +206,9 @@

    线

    @@ -274,9 +274,9 @@

    圆弧

    @@ -415,9 +415,9 @@

    组合使用

    diff --git a/files/zh-cn/web/api/canvas_api/tutorial/drawing_text/index.html b/files/zh-cn/web/api/canvas_api/tutorial/drawing_text/index.html index 240d302f9dce24..13f791018a1455 100644 --- a/files/zh-cn/web/api/canvas_api/tutorial/drawing_text/index.html +++ b/files/zh-cn/web/api/canvas_api/tutorial/drawing_text/index.html @@ -6,7 +6,7 @@
    {{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Applying_styles_and_colors", "Web/API/Canvas_API/Tutorial/Using_images")}}
    -

    在前一个章节中看过 应用样式和颜色 之后,我们现在来看一下如何在 canvas 中绘制文本

    +

    在前一个章节中看过 应用样式和颜色 之后,我们现在来看一下如何在 canvas 中绘制文本

    绘制文本

    @@ -58,22 +58,22 @@

    一个文本边框的示例

    有样式的文本

    -

    在上面的例子用我们已经使用了 font 来使文本比默认尺寸大一些。还有更多的属性可以让你改变 canvas 显示文本的方式:

    +

    在上面的例子用我们已经使用了 font 来使文本比默认尺寸大一些。还有更多的属性可以让你改变 canvas 显示文本的方式:

    {{domxref("CanvasRenderingContext2D.font", "font = value")}}
    -
    当前我们用来绘制文本的样式。这个字符串使用和 CSS {{cssxref("font")}} 属性相同的语法。默认的字体是 10px sans-serif
    +
    当前我们用来绘制文本的样式。这个字符串使用和 CSS {{cssxref("font")}} 属性相同的语法。默认的字体是 10px sans-serif
    {{domxref("CanvasRenderingContext2D.textAlign", "textAlign = value")}}
    -
    文本对齐选项。可选的值包括:start, end, left, right or center. 默认值是 start
    +
    文本对齐选项。可选的值包括:start, end, left, right or center. 默认值是 start
    {{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline = value")}}
    -
    基线对齐选项。可选的值包括:top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic。
    +
    基线对齐选项。可选的值包括:top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic。
    {{domxref("CanvasRenderingContext2D.direction", "direction = value")}}
    -
    文本方向。可能的值包括:ltr, rtl, inherit。默认值是 inherit。
    +
    文本方向。可能的值包括:ltr, rtl, inherit。默认值是 inherit。

    如果你之前使用过 CSS,那么这些选项你会很熟悉。

    -

    下面的图片(from the WHATWG)展示了 textBaseline 属性支持的不同的基线情况:

    +

    下面的图片(from the WHATWG)展示了 textBaseline 属性支持的不同的基线情况:

    The top of the em square is
 roughly at the top of the glyphs in a font, the hanging baseline is
@@ -100,8 +100,8 @@ <h6 id=Playable code

    <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
     <div class="playable-buttons">
    -  <input id="edit" type="button" value="Edit" />
    -  <input id="reset" type="button" value="Reset" />
    +  <input id="edit" type="button" value="Edit" />
    +  <input id="reset" type="button" value="Reset" />
     </div>
     <textarea id="code" class="playable-code">
     ctx.font = "48px serif";
    @@ -157,6 +157,6 @@ 

    预测量文本宽度

    Geoko 特性说明

    -

    在 Geoko(Firefox,Firefox OS 及基于 Mozilla 的应用的渲染引擎)中,曾有一些版本较早的 API 实现了在 canvas 上对文本作画的功能,但它们现在已不再使用。

    +

    在 Geoko(Firefox,Firefox OS 及基于 Mozilla 的应用的渲染引擎)中,曾有一些版本较早的 API 实现了在 canvas 上对文本作画的功能,但它们现在已不再使用。

    {{PreviousNext("Web/API/Canvas_API/Tutorial/Applying_styles_and_colors", "Web/API/Canvas_API/Tutorial/Using_images")}}

    diff --git a/files/zh-cn/web/api/canvas_api/tutorial/finale/index.html b/files/zh-cn/web/api/canvas_api/tutorial/finale/index.html index fd1b4421005ea4..d733f557d5afe1 100644 --- a/files/zh-cn/web/api/canvas_api/tutorial/finale/index.html +++ b/files/zh-cn/web/api/canvas_api/tutorial/finale/index.html @@ -5,7 +5,7 @@ - 终曲 translation_of: Web/API/Canvas_API/Tutorial/Finale --- -
     
    +

    恭喜你!你已经结束了 Canvas 的教程!这些知识将帮助你在 web 中创建优秀的 2D 图形。

    @@ -55,7 +55,7 @@

    其他的 Web APIs

    -
     
    +

    解惑

    diff --git a/files/zh-cn/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.html b/files/zh-cn/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.html index 7ef1084d3590f9..ce546fc4c44eb4 100644 --- a/files/zh-cn/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.html +++ b/files/zh-cn/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.html @@ -5,11 +5,11 @@ ---
    {{CanvasSidebar}} {{ PreviousNext("Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas", "Web/API/Canvas_API/Tutorial/Optimizing_canvas") }}
    -
    {{HTMLElement("canvas")}} 标签只是一个位图,它并不提供任何已经绘制在上面的对象的信息。canvas 的内容不能像语义化的 HTML 一样暴露给一些协助工具。一般来说,你应该避免在交互型的网站或者 App 上使用 canvas。接下来的内容能帮助你让 canvas 更加容易交互。
    +
    {{HTMLElement("canvas")}} 标签只是一个位图,它并不提供任何已经绘制在上面的对象的信息。canvas 的内容不能像语义化的 HTML 一样暴露给一些协助工具。一般来说,你应该避免在交互型的网站或者 App 上使用 canvas。接下来的内容能帮助你让 canvas 更加容易交互。

    内容兼容

    -

    <canvas> ... </canvas>标签里的内容被可以对一些不支持 canvas 的浏览器提供兼容。这对残疾用户设备也很有用(比如屏幕阅读器),这样它们就可以读取并解释 DOM 里的子节点。在html5accessibility.com有个很好的例子来演示它如何运作。

    +

    <canvas> ... </canvas>标签里的内容被可以对一些不支持 canvas 的浏览器提供兼容。这对残疾用户设备也很有用(比如屏幕阅读器),这样它们就可以读取并解释 DOM 里的子节点。在html5accessibility.com有个很好的例子来演示它如何运作。

    <canvas>
       <h2>Shapes</h2>
    @@ -26,7 +26,7 @@ 

    内容兼容

    ARIA 规则

    -

    Accessible Rich Internet Applications (ARIA) 定义了让 Web 内容和 Web 应用更容易被有身体缺陷的人获取的办法。你可以用 ARIA 属性来描述 canvas 元素的行为和存在目的。详情见ARIA和 ARIA 技术

    +

    Accessible Rich Internet Applications (ARIA) 定义了让 Web 内容和 Web 应用更容易被有身体缺陷的人获取的办法。你可以用 ARIA 属性来描述 canvas 元素的行为和存在目的。详情见ARIAARIA 技术

    <canvas id="button" tabindex="0" role="button" aria-pressed="false" aria-label="Start game"></canvas>
     
    @@ -57,9 +57,9 @@

    点击区域(hit region)

    ctx.addHitRegion({id: "circle"}); canvas.addEventListener("mousemove", function(event){ -  if(event.region) { -    alert("hit region: " + event.region); -  } + if(event.region) { + alert("hit region: " + event.region); + } }); </script>
    diff --git a/files/zh-cn/web/api/canvas_api/tutorial/index.html b/files/zh-cn/web/api/canvas_api/tutorial/index.html index ae2699a76398d0..ea65a6d0006066 100644 --- a/files/zh-cn/web/api/canvas_api/tutorial/index.html +++ b/files/zh-cn/web/api/canvas_api/tutorial/index.html @@ -27,7 +27,7 @@

    开始之前

    -

    使用 <canvas> 元素不是非常难,但你需要一些基本的HTMLJavaScript知识。除一些过时的浏览器不支持<canvas> 元素外,所有的新版本主流浏览器都支持它。Canvas 的默认大小为 300 像素×150 像素(宽×高,像素的单位是 px)。但是,可以使用 HTML 的高度和宽度属性来自定义 Canvas 的尺寸。为了在 Canvas 上绘制图形,我们使用一个 JavaScript 上下文对象,它能动态创建图像( creates graphics on the fly)。

    +

    使用 <canvas> 元素不是非常难,但你需要一些基本的HTMLJavaScript知识。除一些过时的浏览器不支持<canvas> 元素外,所有的新版本主流浏览器都支持它。Canvas 的默认大小为 300 像素×150 像素(宽×高,像素的单位是 px)。但是,可以使用 HTML 的高度和宽度属性来自定义 Canvas 的尺寸。为了在 Canvas 上绘制图形,我们使用一个 JavaScript 上下文对象,它能动态创建图像( creates graphics on the fly)。

    本教程包含

    @@ -43,7 +43,7 @@

    本教程包含

  • 高级动画
  • 像素处理
  • 点击区域和无障碍访问
  • -
  • 优化 canvas
  • +
  • 优化 canvas
  • 终曲
  • diff --git a/files/zh-cn/web/api/canvas_api/tutorial/optimizing_canvas/index.html b/files/zh-cn/web/api/canvas_api/tutorial/optimizing_canvas/index.html index 89b6dc43475876..b26d40ec0e6295 100644 --- a/files/zh-cn/web/api/canvas_api/tutorial/optimizing_canvas/index.html +++ b/files/zh-cn/web/api/canvas_api/tutorial/optimizing_canvas/index.html @@ -74,7 +74,7 @@

    用 CSS 设置大的背景图

    用 CSS transforms 特性缩放画布

    -

    CSS transforms 使用 GPU,因此速度更快。最好的情况是不直接缩放画布,或者具有较小的画布并按比例放大,而不是较大的画布并按比例缩小。

    +

    CSS transforms 使用 GPU,因此速度更快。最好的情况是不直接缩放画布,或者具有较小的画布并按比例放大,而不是较大的画布并按比例缩小。

    var scaleX = window.innerWidth / canvas.width;
     var scaleY = window.innerHeight / canvas.height;
    @@ -88,7 +88,7 @@ 

    用 CSS transforms 特性缩放画

    关闭透明度

    -

    如果你的游戏使用画布而且不需要透明,当使用 HTMLCanvasElement.getContext() 创建一个绘图上下文时把 alpha 选项设置为 false 。这个选项可以帮助浏览器进行内部优化。

    +

    如果你的游戏使用画布而且不需要透明,当使用 HTMLCanvasElement.getContext() 创建一个绘图上下文时把 alpha 选项设置为 false 。这个选项可以帮助浏览器进行内部优化。

    var ctx = canvas.getContext('2d', { alpha: false });
    @@ -98,10 +98,10 @@

    更多的贴士

  • 将画布的函数调用集合到一起(例如,画一条折线,而不要画多条分开的直线)
  • 避免不必要的画布状态改变
  • 渲染画布中的不同点,而非整个新状态
  • -
  • 尽可能避免 {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}}特性
  • +
  • 尽可能避免 {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}}特性
  • 尽可能避免text rendering
  • 尝试不同的方法来清除画布 ({{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}} vs. {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} vs. 调整 canvas 大小)
  • -
  •  有动画,请使用{{domxref("window.requestAnimationFrame()")}} 而非{{domxref("window.setInterval()")}}
  • +
  • 有动画,请使用{{domxref("window.requestAnimationFrame()")}} 而非{{domxref("window.setInterval()")}}
  • 请谨慎使用大型物理库
  • diff --git a/files/zh-cn/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.html b/files/zh-cn/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.html index 852f68b8956159..6ef428f124ddf3 100644 --- a/files/zh-cn/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.html +++ b/files/zh-cn/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.html @@ -25,9 +25,9 @@

    ImageData 对象

    {{jsxref("Uint8ClampedArray")}}类型的一维数组,包含着 RGBA 格式的整型数据,范围在 0 至 255 之间(包括 255)。
    -

    data 属性返回一个 {{jsxref("Uint8ClampedArray")}},它可以被使用作为查看初始像素数据。每个像素用 4 个 1bytes 值 (按照红,绿,蓝和透明值的顺序; 这就是"RGBA"格式) 来代表。每个颜色值部份用 0 至 255 来代表。每个部份被分配到一个在数组内连续的索引,左上角像素的红色部份在数组的索引 0 位置。像素从左到右被处理,然后往下,遍历整个数组。

    +

    data 属性返回一个 {{jsxref("Uint8ClampedArray")}},它可以被使用作为查看初始像素数据。每个像素用 4 个 1bytes 值 (按照红,绿,蓝和透明值的顺序; 这就是"RGBA"格式) 来代表。每个颜色值部份用 0 至 255 来代表。每个部份被分配到一个在数组内连续的索引,左上角像素的红色部份在数组的索引 0 位置。像素从左到右被处理,然后往下,遍历整个数组。

    -

    {{jsxref("Uint8ClampedArray")}}  包含高度 × 宽度 × 4 bytes 数据,索引值从 0 到 (高度×宽度×4)-1

    +

    {{jsxref("Uint8ClampedArray")}} 包含高度 × 宽度 × 4 bytes 数据,索引值从 0 到 (高度×宽度×4)-1

    例如,要读取图片中位于第 50 行,第 200 列的像素的蓝色部份,你会写以下代码:

    @@ -106,31 +106,31 @@

    颜色选择器

    var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); img.onload = function() { -  ctx.drawImage(img, 0, 0); -  img.style.display = 'none'; + ctx.drawImage(img, 0, 0); + img.style.display = 'none'; }; var hoveredColor = document.getElementById('hovered-color'); var selectedColor = document.getElementById('selected-color'); function pick(event, destination) { -  var x = event.layerX; -  var y = event.layerY; -  var pixel = ctx.getImageData(x, y, 1, 1); -  var data = pixel.data; + var x = event.layerX; + var y = event.layerY; + var pixel = ctx.getImageData(x, y, 1, 1); + var data = pixel.data; -    const rgba = `rgba(${data[0]}, ${data[1]}, ${data[2]}, ${data[3] / 255})`; -    destination.style.background = rgba; -    destination.textContent = rgba; + const rgba = `rgba(${data[0]}, ${data[1]}, ${data[2]}, ${data[3] / 255})`; + destination.style.background = rgba; + destination.textContent = rgba; -    return rgba; + return rgba; } canvas.addEventListener('mousemove', function(event) { -    pick(event, hoveredColor); + pick(event, hoveredColor); }); canvas.addEventListener('click', function(event) { -    pick(event, selectedColor); + pick(event, selectedColor); });

    {{EmbedGHLiveSample("dom-examples/canvas/pixel-manipulation/color-picker.html", '100%', 300)}}

    @@ -214,50 +214,50 @@

    图片灰度和反相颜色

    var ctx = canvas.getContext('2d'); img.onload = function() { -    ctx.drawImage(img, 0, 0); + ctx.drawImage(img, 0, 0); }; var original = function() { -    ctx.drawImage(img, 0, 0); + ctx.drawImage(img, 0, 0); }; var invert = function() { -    ctx.drawImage(img, 0, 0); -    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); -    const data = imageData.data; -    for (var i = 0; i < data.length; i += 4) { -        data[i]     = 255 - data[i];     // red -        data[i + 1] = 255 - data[i + 1]; // green -        data[i + 2] = 255 - data[i + 2]; // blue -    } -    ctx.putImageData(imageData, 0, 0); + ctx.drawImage(img, 0, 0); + const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); + const data = imageData.data; + for (var i = 0; i < data.length; i += 4) { + data[i] = 255 - data[i]; // red + data[i + 1] = 255 - data[i + 1]; // green + data[i + 2] = 255 - data[i + 2]; // blue + } + ctx.putImageData(imageData, 0, 0); }; var grayscale = function() { -    ctx.drawImage(img, 0, 0); -    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); -    const data = imageData.data; -    for (var i = 0; i < data.length; i += 4) { -        var avg = (data[i] + data[i + 1] + data[i + 2]) / 3; -        data[i]     = avg; // red -        data[i + 1] = avg; // green -        data[i + 2] = avg; // blue -    } -    ctx.putImageData(imageData, 0, 0); + ctx.drawImage(img, 0, 0); + const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); + const data = imageData.data; + for (var i = 0; i < data.length; i += 4) { + var avg = (data[i] + data[i + 1] + data[i + 2]) / 3; + data[i] = avg; // red + data[i + 1] = avg; // green + data[i + 2] = avg; // blue + } + ctx.putImageData(imageData, 0, 0); }; const inputs = document.querySelectorAll('[name=color]'); for (const input of inputs) { -    input.addEventListener("change", function(evt) { -        switch (evt.target.value) { -            case "inverted": -                return invert(); -            case "grayscale": -                return grayscale(); -            default: -                return original(); -        } -    }); + input.addEventListener("change", function(evt) { + switch (evt.target.value) { + case "inverted": + return invert(); + case "grayscale": + return grayscale(); + default: + return original(); + } + }); }

    {{EmbedGHLiveSample("dom-examples/canvas/pixel-manipulation/color-manipulation.html", '100%', 300)}}

    @@ -280,8 +280,8 @@
    Zoom example
    <canvas id="zoom" width="300" height="227"></canvas> <div> <label for="smoothbtn"> -  <input type="checkbox" name="smoothbtn" checked="checked" id="smoothbtn"> -  Enable image smoothing + <input type="checkbox" name="smoothbtn" checked="checked" id="smoothbtn"> + Enable image smoothing </label> </div> @@ -326,7 +326,7 @@
    Zoom example

    保存图片

    -

    {{domxref("HTMLCanvasElement")}}  提供一个 toDataURL() 方法,此方法在保存图片的时候非常有用。它返回一个包含被类型参数规定的图像表现格式的数据链接。返回的图片分辨率是 96dpi。

    +

    {{domxref("HTMLCanvasElement")}} 提供一个 toDataURL() 方法,此方法在保存图片的时候非常有用。它返回一个包含被类型参数规定的图像表现格式的数据链接。返回的图片分辨率是 96dpi。

    {{domxref("HTMLCanvasElement.toDataURL", "canvas.toDataURL('image/png')")}}
    diff --git a/files/zh-cn/web/api/canvas_api/tutorial/transformations/index.html b/files/zh-cn/web/api/canvas_api/tutorial/transformations/index.html index cb032f9df60532..80c307521e1150 100644 --- a/files/zh-cn/web/api/canvas_api/tutorial/transformations/index.html +++ b/files/zh-cn/web/api/canvas_api/tutorial/transformations/index.html @@ -171,10 +171,10 @@

    缩放 Scaling

    scale(x, y)
    -
    scale  方法可以缩放画布的水平和垂直的单位。两个参数都是实数,可以为负数,x 为水平缩放因子,y 为垂直缩放因子,如果比 1 小,会缩小图形,如果比 1 大会放大图形。默认值为 1,为实际大小。
    +
    scale 方法可以缩放画布的水平和垂直的单位。两个参数都是实数,可以为负数,x 为水平缩放因子,y 为垂直缩放因子,如果比 1 小,会缩小图形,如果比 1 大会放大图形。默认值为 1,为实际大小。
    -

    画布初始情况下,是以左上角坐标为原点的第一象限。如果参数为负实数,相当于以 x 或 y 轴作为对称轴镜像反转(例如,使用translate(0,canvas.height); scale(1,-1); 以 y 轴作为对称轴镜像反转,就可得到著名的笛卡尔坐标系,左下角为原点)。

    +

    画布初始情况下,是以左上角坐标为原点的第一象限。如果参数为负实数,相当于以 x 或 y 轴作为对称轴镜像反转(例如,使用translate(0,canvas.height); scale(1,-1); 以 y 轴作为对称轴镜像反转,就可得到著名的笛卡尔坐标系,左下角为原点)。

    默认情况下,canvas 的 1 个单位为 1 个像素。举例说,如果我们设置缩放因子是 0.5,1 个单位就变成对应 0.5 个像素,这样绘制出来的形状就会是原先的一半。同理,设置为 2.0 时,1 个单位就对应变成了 2 像素,绘制的结果就是图形放大了 2 倍。

    diff --git a/files/zh-cn/web/api/canvas_api/tutorial/using_images/index.html b/files/zh-cn/web/api/canvas_api/tutorial/using_images/index.html index 47c2f4ef310332..bd61f6dc99b9f0 100644 --- a/files/zh-cn/web/api/canvas_api/tutorial/using_images/index.html +++ b/files/zh-cn/web/api/canvas_api/tutorial/using_images/index.html @@ -26,14 +26,14 @@

    获得需要绘制的图片

    {{domxref("HTMLImageElement")}}
    这些图片是由Image()函数构造出来的,或者任何的{{HTMLElement("img")}}元素
    {{domxref("HTMLVideoElement")}}
    -
    用一个 HTML 的 {{HTMLElement("video")}}元素作为你的图片源,可以从视频中抓取当前帧作为一个图像
    +
    用一个 HTML 的 {{HTMLElement("video")}}元素作为你的图片源,可以从视频中抓取当前帧作为一个图像
    {{domxref("HTMLCanvasElement")}}
    -
    可以使用另一个 {{HTMLElement("canvas")}} 元素作为你的图片源。
    +
    可以使用另一个 {{HTMLElement("canvas")}} 元素作为你的图片源。
    {{domxref("ImageBitmap")}}
    这是一个高性能的位图,可以低延迟地绘制,它可以从上述的所有源以及其它几种源中生成。
    -

    这些源统一由 {{domxref("CanvasImageSource")}}类型来引用。

    +

    这些源统一由 {{domxref("CanvasImageSource")}}类型来引用。

    有几种方式可以获取到我们需要在 canvas 上使用的图片。

    @@ -43,13 +43,13 @@

    使用相同页面内的图片<
    • {{domxref("document.images")}}集合
    • -
    •  {{domxref("document.getElementsByTagName()")}}方法
    • +
    • {{domxref("document.getElementsByTagName()")}}方法
    • 如果你知道你想使用的指定图片的 ID,你可以用{{domxref("document.getElementById()")}}获得这个图片

    使用其它域名下的图片

    -

    在 {{domxref("HTMLImageElement")}}上使用crossOrigin属性,你可以请求加载其它域名上的图片。如果图片的服务器允许跨域访问这个图片,那么你可以使用这个图片而不污染 canvas,否则,使用这个图片将会污染 canvas

    +

    在 {{domxref("HTMLImageElement")}}上使用crossOrigin属性,你可以请求加载其它域名上的图片。如果图片的服务器允许跨域访问这个图片,那么你可以使用这个图片而不污染 canvas,否则,使用这个图片将会污染 canvas

    使用其它 canvas 元素

    @@ -80,7 +80,7 @@

    由零开始创建图像

    通过 data: url 方式嵌入图像

    -

    我们还可以通过 data:url 方式来引用图像。Data urls 允许用一串 Base64 编码的字符串的方式来定义一个图片。

    +

    我们还可以通过 data:url 方式来引用图像。Data urls 允许用一串 Base64 编码的字符串的方式来定义一个图片。

    img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';
     
    @@ -112,7 +112,7 @@

    绘制图片

    -

    SVG 图像必须在 <svg> 根指定元素的宽度和高度。

    +

    SVG 图像必须在 <svg> 根指定元素的宽度和高度。

    例子:一个简单的线图

    @@ -123,9 +123,9 @@

    例子:一个简单的线图

    @@ -155,7 +155,7 @@

    缩放 Scaling

    {{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, x, y, width, height)")}}
    -
    这个方法多了 2 个参数:width 和 height,这两个参数用来控制 当向 canvas 画入时应该缩放的大小
    +
    这个方法多了 2 个参数:widthheight,这两个参数用来控制 当向 canvas 画入时应该缩放的大小

    例子:平铺图像

    @@ -170,9 +170,9 @@

    例子:平铺图像

    @@ -215,13 +215,13 @@

    例子:相框

    我用一个与上面用到的不同的方法来装载图像,直接将图像插入到 HTML 里面,然后通过 CSS 隐藏(display:none)它。两个图像我都赋了 id ,方便后面使用。看下面的脚本,相当简单,首先对犀牛头做好切片(第一次drawImage)放在 canvas 上,然后再上面套个相框(第二次drawImage)。

    <html>
    - <body onload="draw();">
    -   <canvas id="canvas" width="150" height="150"></canvas>
    + <body onload="draw();">
    +   <canvas id="canvas" width="150" height="150"></canvas>
        <div style="display:none;">
          <img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" width="300" height="227">
          <img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150">
        </div>
    - </body>
    + </body>
     </html>
    function draw() {
    @@ -250,23 +250,23 @@ 
     

    下面的代码应该是蛮简单易懂的了。就是遍历图像对象数组,依次创建新的 canvas 元素并添加进去。可能唯一需要注意的,对于那些并不熟悉 DOM 的朋友来说,是 insertBefore 方法的用法。insertBefore 是父节点(单元格)的方法,用于将新节点(canvas 元素)插入到我们想要插入的节点之前。

    <html>
    - <body onload="draw();">
    -     <table>
    -      <tr>
    -        <td><img src="https://mdn.mozillademos.org/files/5399/gallery_1.jpg"></td>
    -        <td><img src="https://mdn.mozillademos.org/files/5401/gallery_2.jpg"></td>
    -        <td><img src="https://mdn.mozillademos.org/files/5403/gallery_3.jpg"></td>
    -        <td><img src="https://mdn.mozillademos.org/files/5405/gallery_4.jpg"></td>
    -      </tr>
    -      <tr>
    -        <td><img src="https://mdn.mozillademos.org/files/5407/gallery_5.jpg"></td>
    -        <td><img src="https://mdn.mozillademos.org/files/5409/gallery_6.jpg"></td>
    -        <td><img src="https://mdn.mozillademos.org/files/5411/gallery_7.jpg"></td>
    -        <td><img src="https://mdn.mozillademos.org/files/5413/gallery_8.jpg"></td>
    -      </tr>
    -     </table>
    + <body onload="draw();">
    +     <table>
    +      <tr>
    +        <td><img src="https://mdn.mozillademos.org/files/5399/gallery_1.jpg"></td>
    +        <td><img src="https://mdn.mozillademos.org/files/5401/gallery_2.jpg"></td>
    +        <td><img src="https://mdn.mozillademos.org/files/5403/gallery_3.jpg"></td>
    +        <td><img src="https://mdn.mozillademos.org/files/5405/gallery_4.jpg"></td>
    +      </tr>
    +      <tr>
    +        <td><img src="https://mdn.mozillademos.org/files/5407/gallery_5.jpg"></td>
    +        <td><img src="https://mdn.mozillademos.org/files/5409/gallery_6.jpg"></td>
    +        <td><img src="https://mdn.mozillademos.org/files/5411/gallery_7.jpg"></td>
    +        <td><img src="https://mdn.mozillademos.org/files/5413/gallery_8.jpg"></td>
    +      </tr>
    +     </table>
          <img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150">
    - </body>
    + </body>
     </html>
    body {
    diff --git a/files/zh-cn/web/api/canvascapturemediastreamtrack/index.html b/files/zh-cn/web/api/canvascapturemediastreamtrack/index.html
    index 00b9fc593659a7..609c9d513d9a74 100644
    --- a/files/zh-cn/web/api/canvascapturemediastreamtrack/index.html
    +++ b/files/zh-cn/web/api/canvascapturemediastreamtrack/index.html
    @@ -10,20 +10,20 @@
     
     

    属性

    -

    此接口继承了其父类 {{domxref("MediaStream")}} 与 {{domxref("EventTarget")}} 的属性。

    +

    此接口继承了其父类 {{domxref("MediaStream")}} 与 {{domxref("EventTarget")}} 的属性。

    {{domxref("CanvasCaptureMediaStream.canvas")}} {{readonlyInline}}
    -
    可返回当前媒体流所对应的 {{domxref("HTMLCanvasElement")}} 元素对象。
    +
    可返回当前媒体流所对应的 {{domxref("HTMLCanvasElement")}} 元素对象。

    方法

    -

    此接口继承了其父类 {{domxref("MediaStream")}} 与 {{domxref("EventTarget")}} 的方法。

    +

    此接口继承了其父类 {{domxref("MediaStream")}} 与 {{domxref("EventTarget")}} 的方法。

    {{domxref("CanvasCaptureMediaStream.requestFrame()")}}
    -
    手动获取媒体流的一帧。 可以捕捉部分渲染帧画面。
    +
    手动获取媒体流的一帧。 可以捕捉部分渲染帧画面。

    说明

    diff --git a/files/zh-cn/web/api/canvasgradient/addcolorstop/index.html b/files/zh-cn/web/api/canvasgradient/addcolorstop/index.html index 8c074123c346f6..b85dbc163e18d0 100644 --- a/files/zh-cn/web/api/canvasgradient/addcolorstop/index.html +++ b/files/zh-cn/web/api/canvasgradient/addcolorstop/index.html @@ -29,7 +29,7 @@

    使用addColorStop方法

    HTML

    -
     <canvas id="canvas"></canvas>
    +
     <canvas id="canvas"></canvas>

    JavaScript

    @@ -50,8 +50,8 @@
    Playable code
    <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
     <div class="playable-buttons">
    -  <input id="edit" type="button" value="Edit" />
    -  <input id="reset" type="button" value="Reset" />
    +  <input id="edit" type="button" value="Edit" />
    +  <input id="reset" type="button" value="Reset" />
     </div>
     <textarea id="code" class="playable-code">
     var gradient = ctx.createLinearGradient(0,0,200,0);
    diff --git a/files/zh-cn/web/api/canvaspattern/settransform/index.html b/files/zh-cn/web/api/canvaspattern/settransform/index.html
    index 76c9900653521f..16f5f12ed2bae8 100644
    --- a/files/zh-cn/web/api/canvaspattern/settransform/index.html
    +++ b/files/zh-cn/web/api/canvaspattern/settransform/index.html
    @@ -5,7 +5,7 @@
     ---
     
    {{APIRef("Canvas API")}} {{SeeCompatTable}}
    -

    CanvasPattern.setTransform() 方法使用 {{domxref("SVGMatrix")}} 对象作为图案的变换矩阵,并在此图案上调用它。

    +

    CanvasPattern.setTransform() 方法使用 {{domxref("SVGMatrix")}} 对象作为图案的变换矩阵,并在此图案上调用它。

    语法

    @@ -23,7 +23,7 @@

    示例

    使用 setTransform 方法

    -

    这是一段简单的代码片段,使用 setTransform 方法创建一个来自 {{domxref("SVGMatrix")}} 具有指定图案变化的{{domxref("CanvasPattern")}} 。如例子所示,如果你把图案赋值给当前的 {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} ,当你使用 {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} 方法时,图案会被应用到 canvas 上绘制出效果。

    +

    这是一段简单的代码片段,使用 setTransform 方法创建一个来自 {{domxref("SVGMatrix")}} 具有指定图案变化的{{domxref("CanvasPattern")}} 。如例子所示,如果你把图案赋值给当前的 {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} ,当你使用 {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} 方法时,图案会被应用到 canvas 上绘制出效果。

    HTML

    diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/addhitregion/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/addhitregion/index.html index 3f24c8ad8f5620..f43be8d7c2d382 100644 --- a/files/zh-cn/web/api/canvasrenderingcontext2d/addhitregion/index.html +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/addhitregion/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef}}
    -

    CanvasRenderingContext2D.addHitRegion() 是 Canvas 2D API 给位图添加点击区域的方法。它允许你很容易地实现一个点击区域,让你触发 DOM 元素的事件, 去探索看不见的画布。

    +

    CanvasRenderingContext2D.addHitRegion() 是 Canvas 2D API 给位图添加点击区域的方法。它允许你很容易地实现一个点击区域,让你触发 DOM 元素的事件, 去探索看不见的画布。

    语法

    @@ -14,11 +14,11 @@

    语法

    选项

    -

    options 参数是可选的。当赋值时, {{jsxref("Object")}} 包含以下属性:

    +

    options 参数是可选的。当赋值时, {{jsxref("Object")}} 包含以下属性:

    path
    -
    {{domxref("Path2D")}} 对象, 描述点击区的区域范围。如果不给此属性赋值, 则会使用当前的路径。
    +
    {{domxref("Path2D")}} 对象, 描述点击区的区域范围。如果不给此属性赋值, 则会使用当前的路径。
    fillRule
    遵循的填充规则(默认是“nonzero”)。
    id
    @@ -26,20 +26,20 @@

    选项

    parentID
    父区域的 ID,为了光标回退或者辅助工具导航。
    cursor
    -
    鼠标移动到点击区时的 {{cssxref("cursor")}}  (默认是 "inherit")。 继承父点击区域的光标,或者 canvas 元素的光标。
    +
    鼠标移动到点击区时的 {{cssxref("cursor")}} (默认是 "inherit")。 继承父点击区域的光标,或者 canvas 元素的光标。
    control
    触发事件的元素(canvas 的子孙元素)。默认为 null。
    label
    如果没有 control 属性,文本标签作为辅助工具,用作点击区域的描述。默认为 null。
    role
    -
     如果没有 control 属性,ARIA role 作为辅助工具,决定如何表示点击区域。 默认为 null.
    +
    如果没有 control 属性,ARIA role 作为辅助工具,决定如何表示点击区域。 默认为 null.

    示例

    使用 addHitRegion 方法

    -

    这是一段使用 addHitRegion 方法的简单的代码片段。

    +

    这是一段使用 addHitRegion 方法的简单的代码片段。

    HTML

    @@ -52,9 +52,9 @@

    JavaScript

    var ctx = canvas.getContext("2d"); canvas.addEventListener("mousemove", function(event){ -  if(event.region) { -    alert("ouch, my eye :("); -  } + if(event.region) { + alert("ouch, my eye :("); + } }); ctx.beginPath(); @@ -82,8 +82,8 @@
    Playable code
    <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
     <div class="playable-buttons">
    -  <input id="edit" type="button" value="Edit" />
    -  <input id="reset" type="button" value="Reset" />
    +  <input id="edit" type="button" value="Edit" />
    +  <input id="reset" type="button" value="Reset" />
     </div>
     <textarea id="code" class="playable-code" style="height:250px">
     ctx.beginPath();
    @@ -295,8 +295,8 @@ 

    浏览器兼容性

    兼容性注解

      -
    • [1] 此特性需要一个特性标志。 设置 ExperimentalCanvasFeatures 标志为 true 进行启用。
    • -
    • [2] 此特性需要一个特性偏好设置。在 about:config 里面,设置 canvas.hitregions.enabled 为 true。
    • +
    • [1] 此特性需要一个特性标志。 设置 ExperimentalCanvasFeatures 标志为 true 进行启用。
    • +
    • [2] 此特性需要一个特性偏好设置。在 about:config 里面,设置 canvas.hitregions.enabled 为 true。

    参见

    diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/arc/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/arc/index.html index 71b50fd8d9921f..31624d2ef32e4c 100644 --- a/files/zh-cn/web/api/canvasrenderingcontext2d/arc/index.html +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/arc/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef}}
    -

    CanvasRenderingContext2D.arc() 是 Canvas 2D API 绘制圆弧路径的方法。圆弧路径的圆心在 (x, y) 位置,半径为 r ,根据anticlockwise (默认为顺时针)指定的方向从 startAngle 开始绘制,到 endAngle 结束。

    +

    CanvasRenderingContext2D.arc() 是 Canvas 2D API 绘制圆弧路径的方法。圆弧路径的圆心在 (x, y) 位置,半径为 r ,根据anticlockwise (默认为顺时针)指定的方向从 startAngle 开始绘制,到 endAngle 结束。

    语法

    @@ -24,9 +24,9 @@

    Parameters

    startAngle
    圆弧的起始点,x 轴方向开始计算,单位以弧度表示。
    endAngle
    -
    圆弧的终点, 单位以弧度表示。
    +
    圆弧的终点, 单位以弧度表示。
    anticlockwise {{optional_inline}}
    -
    可选的{{jsxref("Boolean")}}值 ,如果为 true,逆时针绘制圆弧,反之,顺时针绘制。 
    +
    可选的{{jsxref("Boolean")}}值 ,如果为 true,逆时针绘制圆弧,反之,顺时针绘制。

    示例

    @@ -57,8 +57,8 @@
    Playable code
    <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
     <div class="playable-buttons">
    -  <input id="edit" type="button" value="Edit" />
    -  <input id="reset" type="button" value="Reset" />
    +  <input id="edit" type="button" value="Edit" />
    +  <input id="reset" type="button" value="Reset" />
     </div>
     <textarea id="code" class="playable-code">
     ctx.beginPath();
    diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/arcto/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/arcto/index.html
    index a1cdb39fa1f24f..e8444bd95cca70 100644
    --- a/files/zh-cn/web/api/canvasrenderingcontext2d/arcto/index.html
    +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/arcto/index.html
    @@ -5,7 +5,7 @@
     ---
     
    {{APIRef}}
    -

    CanvasRenderingContext2D.arcTo() 是 Canvas 2D API 根据控制点和半径绘制圆弧路径,使用当前的描点 (前一个 moveTo 或 lineTo 等函数的止点)。根据当前描点与给定的控制点 1 连接的直线,和控制点 1 与控制点 2 连接的直线,作为使用指定半径的圆的切线,画出两条切线之间的弧线路径。

    +

    CanvasRenderingContext2D.arcTo() 是 Canvas 2D API 根据控制点和半径绘制圆弧路径,使用当前的描点 (前一个 moveTo 或 lineTo 等函数的止点)。根据当前描点与给定的控制点 1 连接的直线,和控制点 1 与控制点 2 连接的直线,作为使用指定半径的圆的切线,画出两条切线之间的弧线路径。

    语法

    @@ -78,8 +78,8 @@

    尝试 arcTo 参数

    TypeError -

    URL 的协议不是 http 或 https。

    +

    URL 的协议不是 httphttps。

    -

    请求返回的 http 状态码不是 2xx (不是一个成功的响应) 。这种情况常常发生在请求不成功,或者是一个没有配置 CORS 的跨域请求(这种情况下返回的状态码永远是 0)。

    +

    请求返回的 http 状态码不是 2xx (不是一个成功的响应) 。这种情况常常发生在请求不成功,或者是一个没有配置 CORS 的跨域请求(这种情况下返回的状态码永远是 0)。

    @@ -85,9 +85,9 @@

    示例

    使用纯白色"rgb(255,255,255)"或者透明颜色之外的任何背景,都不是一个好的主意。就像所有浏览器要做的,多数网站期望他们界面透明的部分绘制到白色背景上。

    -

    使用这个方法,可以使用任意内容填充隐藏的 IFRAME(例如:CSS-styled HTML text 或者 SVG)并绘制到 canvas 中。为了适应当前的变形,它会缩放、旋转。

    +

    使用这个方法,可以使用任意内容填充隐藏的 IFRAME(例如:CSS-styled HTML text 或者 SVG)并绘制到 canvas 中。为了适应当前的变形,它会缩放、旋转。

    -

    Ted Mielczarek 的 标签预览 扩展使用这种技术,在 chrome 中提供网页的缩略图。源代码可以作为参考。

    +

    Ted Mielczarek 的 标签预览 扩展使用这种技术,在 chrome 中提供网页的缩略图。源代码可以作为参考。

    规范描述

    diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/ellipse/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/ellipse/index.html index eb7440d050fbd5..c9e0e31e221110 100644 --- a/files/zh-cn/web/api/canvasrenderingcontext2d/ellipse/index.html +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/ellipse/index.html @@ -9,7 +9,7 @@ ---
    {{APIRef}} {{SeeCompatTable}}
    -

    CanvasRenderingContext2D.ellipse() 是 Canvas 2D API 添加椭圆路径的方法。椭圆的圆心在(x,y)位置,半径分别是radiusX 和 radiusY ,按照anticlockwise(默认顺时针)指定的方向,从 startAngle  开始绘制,到 endAngle 结束。

    +

    CanvasRenderingContext2D.ellipse() 是 Canvas 2D API 添加椭圆路径的方法。椭圆的圆心在(x,y)位置,半径分别是radiusXradiusY ,按照anticlockwise(默认顺时针)指定的方向,从 startAngle 开始绘制,到 endAngle 结束。

    语法

    @@ -34,7 +34,7 @@

    参数

    endAngle
    椭圆将要绘制的结束点角度,以弧度表示 (非角度度数)。
    anticlockwise {{optional_inline}}
    -
    {{jsxref("Boolean")}} 选项,如果为 true,逆时针方向绘制椭圆(逆时针),反之顺时针方向绘制。
    +
    {{jsxref("Boolean")}} 选项,如果为 true,逆时针方向绘制椭圆(逆时针),反之顺时针方向绘制。

    示例

    @@ -54,7 +54,7 @@

    JavaScript

    var ctx = canvas.getContext('2d'); ctx.setLineDash([]); ctx.beginPath(); -ctx.ellipse(100, 100, 50, 75, 45 * Math.PI/180, 0, 2 * Math.PI); //倾斜 45°角 +ctx.ellipse(100, 100, 50, 75, 45 * Math.PI/180, 0, 2 * Math.PI); //倾斜 45°角 ctx.stroke(); ctx.setLineDash([5]); ctx.moveTo(0,200); @@ -68,13 +68,13 @@
    Playable code
    <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
     <div class="playable-buttons">
    -  <input id="edit" type="button" value="Edit" />
    -  <input id="reset" type="button" value="Reset" />
    +  <input id="edit" type="button" value="Edit" />
    +  <input id="reset" type="button" value="Reset" />
     </div>
     <textarea id="code" class="playable-code">
     ctx.setLineDash([]);
     ctx.beginPath();
    -ctx.ellipse(100, 100, 50, 75, 45 * Math.PI/180, 0, 2 * Math.PI); //倾斜 45°角
    +ctx.ellipse(100, 100, 50, 75, 45 * Math.PI/180, 0, 2 * Math.PI); //倾斜 45°角
     ctx.stroke();
     ctx.setLineDash([5]);
     ctx.moveTo(0,200);
    diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/fill/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/fill/index.html
    index 93b525e430fa55..b3621793535dee 100644
    --- a/files/zh-cn/web/api/canvasrenderingcontext2d/fill/index.html
    +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/fill/index.html
    @@ -21,7 +21,7 @@ 

    参数

    一种算法,决定点是在路径内还是在路径外。
    允许的值:
    @@ -33,7 +33,7 @@

    示例

    使用 fill 方法

    -

    这是一段简单的代码片段,使用 fill 方法填充路径。

    +

    这是一段简单的代码片段,使用 fill 方法填充路径。

    HTML

    @@ -55,8 +55,8 @@
    Playable code
    <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
     <div class="playable-buttons">
    -  <input id="edit" type="button" value="Edit" />
    -  <input id="reset" type="button" value="Reset" />
    +  <input id="edit" type="button" value="Edit" />
    +  <input id="reset" type="button" value="Reset" />
     </div>
     <textarea id="code" class="playable-code">
     ctx.rect(10, 10, 100, 100);
    diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/fillrect/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/fillrect/index.html
    index 71bd4313a826be..70d8d6897fdd8d 100644
    --- a/files/zh-cn/web/api/canvasrenderingcontext2d/fillrect/index.html
    +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/fillrect/index.html
    @@ -5,16 +5,16 @@
     ---
     
    {{APIRef}}
    -

    CanvasRenderingContext2D.fillRect() 是 Canvas 2D API 绘制填充矩形的方法。当前渲染上下文中的fillStyle 属性决定了对这个矩形对的填充样式。
    +

    CanvasRenderingContext2D.fillRect() 是 Canvas 2D API 绘制填充矩形的方法。当前渲染上下文中的fillStyle 属性决定了对这个矩形对的填充样式。

    - 这个方法是直接在画布上绘制填充,并不修改当前路径,所以在这个方法后面调用 {{domxref("CanvasRenderingContext2D.fill()", "fill()")}} 或者{{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}}方法并不会对这个方法有什么影响。

    + 这个方法是直接在画布上绘制填充,并不修改当前路径,所以在这个方法后面调用 {{domxref("CanvasRenderingContext2D.fill()", "fill()")}} 或者{{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}}方法并不会对这个方法有什么影响。

    语法

    void ctx.fillRect(x, y, width, height);
     
    -

    fillRect()方法绘制一个填充了内容的矩形,这个矩形的开始点(左上点)在(x, y) ,它的宽度和高度分别由width 和 height 确定,填充样式由当前的fillStyle 决定。

    +

    fillRect()方法绘制一个填充了内容的矩形,这个矩形的开始点(左上点)在(x, y) ,它的宽度和高度分别由widthheight 确定,填充样式由当前的fillStyle 决定。

    参数

    @@ -56,8 +56,8 @@
    Playable code
    <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
     <div class="playable-buttons">
    -  <input id="edit" type="button" value="Edit" />
    -  <input id="reset" type="button" value="Reset" />
    +  <input id="edit" type="button" value="Edit" />
    +  <input id="reset" type="button" value="Reset" />
     </div>
     <textarea id="code" class="playable-code">
     ctx.fillStyle = "green";
    @@ -94,7 +94,7 @@ 
    Playable code

    填充整个画布

    -

    下面这个代码片段使用本方法填充了整个画布。这样做通常的目的是在开始绘制其他内容前设置一个背景。为了达到这样的效果,需要让填充的范围和画布的范围相同,需要访问{{HtmlElement("canvas")}}元素的width 和 height 属性。

    +

    下面这个代码片段使用本方法填充了整个画布。这样做通常的目的是在开始绘制其他内容前设置一个背景。为了达到这样的效果,需要让填充的范围和画布的范围相同,需要访问{{HtmlElement("canvas")}}元素的widthheight 属性。

    const canvas = document.getElementById('canvas');
     const ctx = canvas.getContext('2d');
    diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/fillstyle/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/fillstyle/index.html
    index 3c0b0ac9e6d186..01b190525d8fb8 100644
    --- a/files/zh-cn/web/api/canvasrenderingcontext2d/fillstyle/index.html
    +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/fillstyle/index.html
    @@ -8,9 +8,9 @@
     ---
     
    {{APIRef}}
    -

    CanvasRenderingContext2D.fillStyle 是 Canvas 2D API 使用内部方式描述颜色和样式的属性。默认值是 #000 (黑色)。

    +

    CanvasRenderingContext2D.fillStyle 是 Canvas 2D API 使用内部方式描述颜色和样式的属性。默认值是 #000 (黑色)。

    -

    参见  Canvas Tutorial 的 Applying styles and color 章节。

    +

    参见 Canvas TutorialApplying styles and color 章节。

    语法

    @@ -34,7 +34,7 @@

    示例

    使用 fillStyle 属性设置不同的颜色

    -

    这是一段简单的代码片段,使用 fillStyle 属性设置不同的颜色。

    +

    这是一段简单的代码片段,使用 fillStyle 属性设置不同的颜色。

    HTML

    @@ -57,8 +57,8 @@
    Playable code
    <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
     <div class="playable-buttons">
    -  <input id="edit" type="button" value="Edit" />
    -  <input id="reset" type="button" value="Reset" />
    +  <input id="edit" type="button" value="Edit" />
    +  <input id="reset" type="button" value="Reset" />
     </div>
     <textarea id="code" class="playable-code">
     ctx.fillStyle = "blue";
    @@ -93,9 +93,9 @@ 
    Playable code

    {{ EmbedLiveSample('Playable_code', 700, 360) }}

    -

    fillStyle 使用 for 循环的例子

    +

    fillStyle 使用 for 循环的例子

    -

    在这个例子中, 我们使用两个 for 循环绘制一个矩形表格,每个单元格都有不同的颜色。 最终的结果图像看起来像屏幕截图,其实没有令人惊叹的事情发生。我们使用两个变量 i 和 j 为每一个单元格生成唯一的 RGB 颜色,并且只改变红色和绿色的数值。蓝色通道的值是固定不变的。通过修改这些通道,你能生成各种各样的调色板。通过逐步地增加,你能实现类似 Photoshop 的调色板。

    +

    在这个例子中, 我们使用两个 for 循环绘制一个矩形表格,每个单元格都有不同的颜色。 最终的结果图像看起来像屏幕截图,其实没有令人惊叹的事情发生。我们使用两个变量 i 和 j 为每一个单元格生成唯一的 RGB 颜色,并且只改变红色和绿色的数值。蓝色通道的值是固定不变的。通过修改这些通道,你能生成各种各样的调色板。通过逐步地增加,你能实现类似 Photoshop 的调色板。

    - + @@ -42,12 +42,12 @@

    构造函数

    {{domxref("ChannelMergerNode.ChannelMergerNode()", "ChannelMergerNode()")}}
    -
    生成一个新的 ChannelMergerNode 对象实例。
    +
    生成一个新的 ChannelMergerNode 对象实例。

    属性

    -

    没有具体属性;从其父级继承属性, {{domxref("AudioNode")}}。

    +

    没有具体属性;从其父级继承属性, {{domxref("AudioNode")}}。

    方法

    diff --git a/files/zh-cn/web/api/characterdata/index.html b/files/zh-cn/web/api/characterdata/index.html index 5453ee1c79f4b4..eb7cf39f4d45d7 100644 --- a/files/zh-cn/web/api/characterdata/index.html +++ b/files/zh-cn/web/api/characterdata/index.html @@ -5,7 +5,7 @@ ---

    {{APIRef("DOM")}}

    -

    CharacterData 抽象接口(abstract interface)代表 {{domxref("Node")}} 对象包含的字符。这是一个抽象接口,意味着没有 CharacterData 类型的对象。 它是在其他接口中被实现的,如 {{domxref("Text")}}、{{domxref("Comment")}} 或 {{domxref("ProcessingInstruction")}} 这些非抽象接口。

    +

    CharacterData 抽象接口(abstract interface)代表 {{domxref("Node")}} 对象包含的字符。这是一个抽象接口,意味着没有 CharacterData 类型的对象。 它是在其他接口中被实现的,如 {{domxref("Text")}}、{{domxref("Comment")}} 或 {{domxref("ProcessingInstruction")}} 这些非抽象接口。

    属性

    @@ -15,11 +15,11 @@

    属性

    {{domxref("CharacterData.data")}}
    一个 {{domxref("DOMString")}},表示该对象中包含的文本数据。
    {{domxref("CharacterData.length")}} {{readonlyInline}}
    -
    返回一个 unsigned long 的表示 CharacterData.data 包含的字符串的大小。
    +
    返回一个 unsigned long 的表示 CharacterData.data 包含的字符串的大小。
    {{domxref("NonDocumentTypeChildNode.nextElementSibling")}} {{readonlyInline}}
    -
    返回其父节点所在的子节点列表(children list)中紧跟着的元素节点 {{domxref("Element")}},或者 null
    +
    返回其父节点所在的子节点列表(children list)中紧跟着的元素节点 {{domxref("Element")}},或者 null
    {{domxref("NonDocumentTypeChildNode.previousElementSibling")}} {{readonlyInline}}
    -
    返回其父节点所在的子节点列表(children list)中前一个元素节点 {{domxref("Element")}},或者 null
    +
    返回其父节点所在的子节点列表(children list)中前一个元素节点 {{domxref("Element")}},或者 null

    方法

    @@ -28,17 +28,17 @@

    方法

    {{domxref("CharacterData.appendData()")}}
    -
    为 CharacterData.data 字符串追加指定的 {{domxref("DOMString")}} ;当方法返回时,data 包含的是已合并的 {{domxref("DOMString")}}.
    +
    CharacterData.data 字符串追加指定的 {{domxref("DOMString")}} ;当方法返回时,data 包含的是已合并的 {{domxref("DOMString")}}.
    {{domxref("CharacterData.deleteData()")}}
    -
    在 CharacterData.data 字符串中,从指定位置开始,删除指定数量的字符;当方法返回时,data 包含的是缩短了的 {{domxref("DOMString")}}.
    +
    CharacterData.data 字符串中,从指定位置开始,删除指定数量的字符;当方法返回时,data 包含的是缩短了的 {{domxref("DOMString")}}.
    {{domxref("CharacterData.insertData()")}}
    -
    在 CharacterData.data 字符串中,在指定的位置,插入指定的字符;当方法返回时,data 包含的是已修改的 {{domxref("DOMString")}}.
    +
    CharacterData.data 字符串中,在指定的位置,插入指定的字符;当方法返回时,data 包含的是已修改的 {{domxref("DOMString")}}.
    {{domxref("ChildNode.remove()")}} {{experimental_inline}}
    把对象从其父节点的children list中删除。
    {{domxref("CharacterData.replaceData()")}}
    -
    在 CharacterData.data 字符串中,从指定位置开始,把指定数量的字符替换为指定的 {{domxref("DOMString")}}; 当方法返回时, data 包含的是已修改的 {{domxref("DOMString")}}.
    +
    CharacterData.data 字符串中,从指定位置开始,把指定数量的字符替换为指定的 {{domxref("DOMString")}}; 当方法返回时, data 包含的是已修改的 {{domxref("DOMString")}}.
    {{domxref("CharacterData.substringData()")}}
    -
    返回一个包含了从 CharacterData.data 中的指定位置开始,指定长度的 {{domxref("DOMString")}} 。
    +
    返回一个包含了从 CharacterData.data 中的指定位置开始,指定长度的 {{domxref("DOMString")}} 。

    规范

    diff --git a/files/zh-cn/web/api/clearinterval/index.html b/files/zh-cn/web/api/clearinterval/index.html index 22cb718a7cfb48..5109ce8dca26db 100644 --- a/files/zh-cn/web/api/clearinterval/index.html +++ b/files/zh-cn/web/api/clearinterval/index.html @@ -24,7 +24,7 @@

    Parameters

    要取消的定时器的 ID。是由 setInterval() 返回的。
    -

    值得一提的是,{{domxref("setInterval()")}} 和 {{domxref("setTimeout()")}} 共用其定义的 IDs,即可以使用 clearInterval() 和 {{domxref("clearTimeout()")}} 中的任意一个。然而,为了使代码可读性更强,你应该尽量避免这种用法。

    +

    值得一提的是,{{domxref("setInterval()")}} 和 {{domxref("setTimeout()")}} 共用其定义的 IDs,即可以使用 clearInterval() 和 {{domxref("clearTimeout()")}} 中的任意一个。然而,为了使代码可读性更强,你应该尽量避免这种用法。

    返回值

    diff --git a/files/zh-cn/web/api/client/index.html b/files/zh-cn/web/api/client/index.html index 3b594bfeba78be..c9e75028a9783d 100644 --- a/files/zh-cn/web/api/client/index.html +++ b/files/zh-cn/web/api/client/index.html @@ -16,7 +16,7 @@ ---

    {{SeeCompatTable}}{{APIRef("Service Workers API")}}

    -

    Client 接口表示一个可执行的上下文,如{{domxref("Worker")}}或{{domxref("SharedWorker")}}。{{domxref("Window")}} 客户端由更具体的{{domxref("WindowClient")}}表示。你可以从{{domxref("Clients.matchAll","Clients.matchAll()")}} 和{{domxref("Clients.get","Clients.get()")}}等方法获取Client/WindowClient对象。

    +

    Client 接口表示一个可执行的上下文,如{{domxref("Worker")}}或{{domxref("SharedWorker")}}。{{domxref("Window")}} 客户端由更具体的{{domxref("WindowClient")}}表示。你可以从{{domxref("Clients.matchAll","Clients.matchAll()")}} 和{{domxref("Clients.get","Clients.get()")}}等方法获取Client/WindowClient对象。

    Methods

    diff --git a/files/zh-cn/web/api/client/postmessage/index.html b/files/zh-cn/web/api/client/postmessage/index.html index f74722fcaa08d0..4ad9b5f40786cc 100644 --- a/files/zh-cn/web/api/client/postmessage/index.html +++ b/files/zh-cn/web/api/client/postmessage/index.html @@ -5,7 +5,7 @@ ---

    {{SeeCompatTable}}{{APIRef("Client")}}

    -

    {{domxref("Client")}} 接口的 Client.postMessage() 方法允许一个 service worker 客户端向一个  {{domxref("ServiceWorker")}}发送一个消息,会触发 service worker 的 message 事件,通过监听这个事件,可以获取这个消息。

    +

    {{domxref("Client")}} 接口的 Client.postMessage() 方法允许一个 service worker 客户端向一个 {{domxref("ServiceWorker")}}发送一个消息,会触发 service worker 的 message 事件,通过监听这个事件,可以获取这个消息。

    语法

    diff --git a/files/zh-cn/web/api/clients/claim/index.html b/files/zh-cn/web/api/clients/claim/index.html index 2702690dd6dba6..0948944ab5fa9b 100644 --- a/files/zh-cn/web/api/clients/claim/index.html +++ b/files/zh-cn/web/api/clients/claim/index.html @@ -5,9 +5,9 @@ ---

    {{SeeCompatTable}}{{APIRef("Service Worker Clients")}}

    -

    {{domxref("Clients")}} 接口的  claim() 方法允许一个激活的 service worker 将自己设置为其 {{domxref("ServiceWorkerRegistration.scope", "scope")}} 内所有 clients 的{{domxref("ServiceWorkerContainer.controller", "controller")}} . 这会在由此 service worker 控制的任何 clients 中触发 {{domxref("ServiceWorkerContainer","navigator.serviceWorker")}}  上的  "controllerchange"  事件。

    +

    {{domxref("Clients")}} 接口的 claim() 方法允许一个激活的 service worker 将自己设置为其 {{domxref("ServiceWorkerRegistration.scope", "scope")}} 内所有 clients 的{{domxref("ServiceWorkerContainer.controller", "controller")}} . 这会在由此 service worker 控制的任何 clients 中触发 {{domxref("ServiceWorkerContainer","navigator.serviceWorker")}} 上的 "controllerchange" 事件。

    -

    当一个 service worker 被初始注册时,页面在下次加载之前不会使用它。 claim() 方法会立即控制这些页面。请注意,这会导致 service worker 控制通过网络定期加载的页面,或者可能通过不同的 service worker 加载。

    +

    当一个 service worker 被初始注册时,页面在下次加载之前不会使用它。 claim() 方法会立即控制这些页面。请注意,这会导致 service worker 控制通过网络定期加载的页面,或者可能通过不同的 service worker 加载。

    语法

    @@ -24,10 +24,10 @@

    返回

    示例

    -

    The following example uses claim() inside service worker's "activate" event listener so that clients loaded in the same scope do not need to be reloaded before their fetches will go through this service worker.

    +

    The following example uses claim() inside service worker's "activate" event listener so that clients loaded in the same scope do not need to be reloaded before their fetches will go through this service worker.

    self.addEventListener('activate', event => {
    -  event.waitUntil(clients.claim());
    +  event.waitUntil(clients.claim());
     });

    规范

    @@ -49,5 +49,5 @@

    See also

  • The service worker lifecycle
  • Is ServiceWorker ready?
  • {{jsxref("Promise", "Promises")}}
  • -
  • {{domxref("ServiceWorkerGlobalScope.skipWaiting()", "self.skipWaiting()")}} - skip the service worker's waiting phase 
  • +
  • {{domxref("ServiceWorkerGlobalScope.skipWaiting()", "self.skipWaiting()")}} - skip the service worker's waiting phase
  • diff --git a/files/zh-cn/web/api/clients/get/index.html b/files/zh-cn/web/api/clients/get/index.html index 2a90b487f3f55e..f6662dfb741c2b 100644 --- a/files/zh-cn/web/api/clients/get/index.html +++ b/files/zh-cn/web/api/clients/get/index.html @@ -5,7 +5,7 @@ ---
    {{SeeCompatTable}}{{APIRef("Service Workers API")}}
    -

    {{domxref("Clients")}} 接口的 get() 方法 获取给定 id 匹配的 Service Worker client,并在 {{jsxref("Promise")}} 中返回它。

    +

    {{domxref("Clients")}} 接口的 get() 方法 获取给定 id 匹配的 Service Worker client,并在 {{jsxref("Promise")}} 中返回它。

    语法

    @@ -17,13 +17,13 @@

    参数

    id
    -
    一个 {{domxref("DOMString")}} ,表示您想要获取的 client id.
    +
    一个 {{domxref("DOMString")}} ,表示您想要获取的 client id.

    返回

    -
    一个 resolve 为 {{domxref("Client")}} 对象的 Promise .
    +
    一个 resolve 为 {{domxref("Client")}} 对象的 Promise .

    示例

    @@ -44,4 +44,4 @@

    浏览器兼容性

    {{Compat("api.Clients.get")}}

    -

     

    +

    diff --git a/files/zh-cn/web/api/clients/index.html b/files/zh-cn/web/api/clients/index.html index 2b00f6d3897322..3a4b74d4138044 100644 --- a/files/zh-cn/web/api/clients/index.html +++ b/files/zh-cn/web/api/clients/index.html @@ -5,19 +5,19 @@ ---

    {{SeeCompatTable}}{{APIRef("Service Workers API")}}

    -

    Clients 接口提供对 {{domxref("Client")}} 对象的访问。通过在  service worker 中使用 {{domxref("ServiceWorkerGlobalScope", "self")}}.clients 访问它。

    +

    Clients 接口提供对 {{domxref("Client")}} 对象的访问。通过在 service worker 中使用 {{domxref("ServiceWorkerGlobalScope", "self")}}.clients 访问它。

    方法

    {{domxref("Clients.get()")}}
    -
    返回一个匹配给定 {{domxref("Client.id", "id")}} 的 {{domxref("Client")}} 的 {{jsxref("Promise")}} .
    +
    返回一个匹配给定 {{domxref("Client.id", "id")}} 的 {{domxref("Client")}} 的 {{jsxref("Promise")}} .
    {{domxref("Clients.matchAll()")}}
    -
    返回一个 {{domxref("Client")}} 对象数组的 {{jsxref("Promise")}} . options 参数允许您控制返回的 clients 类型. 
    +
    返回一个 {{domxref("Client")}} 对象数组的 {{jsxref("Promise")}} . options 参数允许您控制返回的 clients 类型.
    {{domxref("Clients.openWindow()")}}
    -
    打开给定 URL 的新浏览器窗口,并返回新 {{domxref("WindowClient")}} a 的 {{jsxref("Promise")}} .
    +
    打开给定 URL 的新浏览器窗口,并返回新 {{domxref("WindowClient")}} a 的 {{jsxref("Promise")}} .
    {{domxref("Clients.claim()")}}
    -
    允许一个激活的 service worker 将自己设置为其{{domxref("ServiceWorkerRegistration.scope", "scope")}} 内所有 clients 的 {{domxref("ServiceWorkerContainer.controller", "controller")}} . 
    +
    允许一个激活的 service worker 将自己设置为其{{domxref("ServiceWorkerRegistration.scope", "scope")}} 内所有 clients 的 {{domxref("ServiceWorkerContainer.controller", "controller")}} .

    示例

    @@ -25,34 +25,34 @@

    示例

    下面示例显示一个已有的聊天窗口,或者当用户点击通知时创建新的窗口。

    addEventListener('notificationclick', event => {
    -  event.waitUntil(async function() {
    -    const allClients = await clients.matchAll({
    -      includeUncontrolled: true
    -    });
    -
    -    let chatClient;
    -
    -    // Let's see if we already have a chat window open:
    -    for (const client of allClients) {
    -      const url = new URL(client.url);
    -
    -      if (url.pathname == '/chat/') {
    -        // Excellent, let's use it!
    -        client.focus();
    -        chatClient = client;
    -        break;
    -      }
    -    }
    -
    -    // If we didn't find an existing chat window,
    +  event.waitUntil(async function() {
    +    const allClients = await clients.matchAll({
    +      includeUncontrolled: true
    +    });
    +
    +    let chatClient;
    +
    +    // Let's see if we already have a chat window open:
    +    for (const client of allClients) {
    +      const url = new URL(client.url);
    +
    +      if (url.pathname == '/chat/') {
    +        // Excellent, let's use it!
    +        client.focus();
    +        chatClient = client;
    +        break;
    +      }
    +    }
    +
    +    // If we didn't find an existing chat window,
         // open a new one:
    -    if (!chatClient) {
    -      chatClient = await clients.openWindow('/chat/');
    -    }
    +    if (!chatClient) {
    +      chatClient = await clients.openWindow('/chat/');
    +    }
     
    -    // Message the client:
    -    chatClient.postMessage("New chat messages!");
    -  }());
    +    // Message the client:
    +    chatClient.postMessage("New chat messages!");
    +  }());
     });
     
    diff --git a/files/zh-cn/web/api/clients/matchall/index.html b/files/zh-cn/web/api/clients/matchall/index.html index d71f9f6ad67abf..a1b1d63efabea6 100644 --- a/files/zh-cn/web/api/clients/matchall/index.html +++ b/files/zh-cn/web/api/clients/matchall/index.html @@ -5,7 +5,7 @@ ---
    {{SeeCompatTable}}{{APIRef("Service Workers API")}}
    -

    {{domxref("Clients")}} 接口的  matchAll() 方法返回 service worker {{domxref("Client")}} 对象列表的 Promise . 包含 options 参数以返回域与关联的 service worker 的域相同所有 service worker 的 clients. 如果未包含 options,该方法仅返回由 service worker 控制的 service worker clients.

    +

    {{domxref("Clients")}} 接口的 matchAll() 方法返回 service worker {{domxref("Client")}} 对象列表的 Promise . 包含 options 参数以返回域与关联的 service worker 的域相同所有 service worker 的 clients. 如果未包含 options,该方法仅返回由 service worker 控制的 service worker clients.

    语法

    @@ -16,11 +16,11 @@

    语法

    参数

    -
    options {{optional_inline}}
    +
    options {{optional_inline}}
    一个 options 对象,允许您为匹配操作设置选项。可用选项包括:
    • includeUncontrolled: {{domxref("Boolean")}} — 如果设置为true, 匹配操作将返回与当前服务工作者共享相同源的所有服务工作者客户端。否则,它仅返回由当前服务工作者控制的服务工作者客户端。默认值为false.
    • -
    • type: 设置想要匹配的 clients 类型。可用值包括 window, worker, sharedworker, 和 all. 默认是 all.
    • +
    • type: 设置想要匹配的 clients 类型。可用值包括 window, worker, sharedworker, 和 all. 默认是 all.
    @@ -28,7 +28,7 @@

    参数

    返回值

    -
    resolve 为一个 {{domxref("Client")}} 对象数组的 Promise . 在 Chrome 46/Firefox 54 以及更高版本中,该方法以最近关注的顺序返回 clients , 根据规范更正。
    +
    resolve 为一个 {{domxref("Client")}} 对象数组的 Promise . 在 Chrome 46/Firefox 54 以及更高版本中,该方法以最近关注的顺序返回 clients , 根据规范更正。

    示例

    diff --git a/files/zh-cn/web/api/clients/openwindow/index.html b/files/zh-cn/web/api/clients/openwindow/index.html index 7434d3713ec5fc..1741873163d5ab 100644 --- a/files/zh-cn/web/api/clients/openwindow/index.html +++ b/files/zh-cn/web/api/clients/openwindow/index.html @@ -5,7 +5,7 @@ ---

    {{SeeCompatTable}}{{APIRef("Service Workers API")}}

    -

    {{domxref("Clients")}}接口的 openWindow() 方法创建一个顶级的浏览器上下文并加载给定的 URL. 如果调用脚本没有显示弹出窗口的权限, openWindow() 将抛出 InvalidAccessError.

    +

    {{domxref("Clients")}}接口的 openWindow() 方法创建一个顶级的浏览器上下文并加载给定的 URL. 如果调用脚本没有显示弹出窗口的权限, openWindow() 将抛出 InvalidAccessError.

    在 Firefox 中,只有在作为通知点击事件的结果调用时,才允许该方法显示弹出窗口。

    diff --git a/files/zh-cn/web/api/clipboard/write/index.html b/files/zh-cn/web/api/clipboard/write/index.html index e44519833781d7..42b0a45568dc7b 100644 --- a/files/zh-cn/web/api/clipboard/write/index.html +++ b/files/zh-cn/web/api/clipboard/write/index.html @@ -5,18 +5,18 @@ ---

    {{APIRef("Clipboard API")}}

    -
     
    +
    -

     

    +

    -
     
    +
    -

    {{domxref("Clipboard")}} 的方法 write() 写入图片等任意的数据到剪贴板。 这个方法可以用于实现剪切和复制的功能。

    +

    {{domxref("Clipboard")}} 的方法 write() 写入图片等任意的数据到剪贴板。 这个方法可以用于实现剪切和复制的功能。

    -

    但是你要提前获取 "Permissions API" 的 "clipboard-write" 权限才能将数据写入到剪贴板。

    +

    但是你要提前获取 "Permissions API" 的 "clipboard-write" 权限才能将数据写入到剪贴板。

    -

    注意: 浏览器对这个异步剪贴板的 API 仍然在讨论中。所以在使用它之前请检查 浏览器兼容性 和 {{SectionOnPage("/en-US/docs/Web/API/Clipboard", "Clipboard availability")}} 以获得更多的兼容性信息。

    +

    注意: 浏览器对这个异步剪贴板的 API 仍然在讨论中。所以在使用它之前请检查 浏览器兼容性 和 {{SectionOnPage("/en-US/docs/Web/API/Clipboard", "Clipboard availability")}} 以获得更多的兼容性信息。

    语法

    @@ -32,7 +32,7 @@

    参数

    返回值

    -

    当数据被写入到剪贴板的时候,{{jsxref("Promise")}} resolve 回调被执行。如果剪贴板不能完成剪贴操作,{{jsxref("Promise")}}  reject 回调被执行。

    +

    当数据被写入到剪贴板的时候,{{jsxref("Promise")}} resolve 回调被执行。如果剪贴板不能完成剪贴操作,{{jsxref("Promise")}} reject 回调被执行。

    示例

    @@ -50,7 +50,7 @@

    示例

    } -

    代码创建了一个 {{domxref("DataTransfer")}} 对象,要替换的内容存储在这里。执行 {{domxref("DataTransferItemList.add()")}} 将数据写入进去,然后执行 write() 方法,指定执行成功或错误的结果。

    +

    代码创建了一个 {{domxref("DataTransfer")}} 对象,要替换的内容存储在这里。执行 {{domxref("DataTransferItemList.add()")}} 将数据写入进去,然后执行 write() 方法,指定执行成功或错误的结果。

    规范

    diff --git a/files/zh-cn/web/api/clipboard/writetext/index.html b/files/zh-cn/web/api/clipboard/writetext/index.html index 9775e23169dd5b..807242bc6a9edc 100644 --- a/files/zh-cn/web/api/clipboard/writetext/index.html +++ b/files/zh-cn/web/api/clipboard/writetext/index.html @@ -11,7 +11,7 @@ ---
    {{APIRef("Clipboard API")}}
    -

    {{domxref("Clipboard")}} 接口的 writeText() 方法可以写入特定字符串到操作系统的剪切板。

    +

    {{domxref("Clipboard")}} 接口的 writeText() 方法可以写入特定字符串到操作系统的剪切板。

    Note: 规范要求在写入剪贴板之前使用 Permissions API 获取“剪贴板写入”权限。但是,不同浏览器的具体要求不同,因为这是一个新的 API。有关详细信息,请查看浏览器兼容性 and {{SectionOnPage("/en-US/docs/Web/API/Clipboard", "Clipboard availability")}}。

    diff --git a/files/zh-cn/web/api/clipboard_api/index.html b/files/zh-cn/web/api/clipboard_api/index.html index f56312479c016b..7b385c3032d32c 100644 --- a/files/zh-cn/web/api/clipboard_api/index.html +++ b/files/zh-cn/web/api/clipboard_api/index.html @@ -12,25 +12,25 @@ ---
    {{APIRef("Clipboard API")}}
    -

    剪贴板 Clipboard API 提供了响应剪贴板命令(剪切、复制和粘贴)与异步读写系统剪贴板的能力。从权限 Permissions API 获取权限之后,才能访问剪贴板内容;如果用户没有授予权限,则不允许读取或更改剪贴板内容。

    +

    剪贴板 Clipboard API 提供了响应剪贴板命令(剪切、复制和粘贴)与异步读写系统剪贴板的能力。从权限 Permissions API 获取权限之后,才能访问剪贴板内容;如果用户没有授予权限,则不允许读取或更改剪贴板内容。

    该 API 被设计用来取代使用 {{domxref("document.execCommand()")}} 的剪贴板访问方式。

    访问剪贴板

    -

    除了在实例化中创建一个 Clipboard 对象,你还可以使用全局的 {{domxref("Navigator.clipboard")}} 来访问系统剪贴板。

    +

    除了在实例化中创建一个 Clipboard 对象,你还可以使用全局的 {{domxref("Navigator.clipboard")}} 来访问系统剪贴板。

    navigator.clipboard.readText().then(
       clipText => document.querySelector(".editor").innerText += clipText);
    -

    上述代码提取了剪贴板的文本并将其附在 class 为 editor 的第一个元素后面。因为当剪贴板中不是文本时, {{domxref("Clipboard.readText", "readText()")}} (and {{domxref("Clipboard.read", "read()")}}, for that matter) 会返回一个空字符串,所以这段代码是安全的。

    +

    上述代码提取了剪贴板的文本并将其附在 class 为 editor 的第一个元素后面。因为当剪贴板中不是文本时, {{domxref("Clipboard.readText", "readText()")}} (and {{domxref("Clipboard.read", "read()")}}, for that matter) 会返回一个空字符串,所以这段代码是安全的。

    接口

    -
    {{domxref("Clipboard")}} {{securecontext_inline}}
    -
    提供了一个用于读写系统剪贴板上的文本和数据的接口。规范中被称为异步剪贴板 API(Async Clipboard API)。
    -
    {{domxref("ClipboardEvent")}} {{securecontext_inline}}
    +
    {{domxref("Clipboard")}} {{securecontext_inline}}
    +
    提供了一个用于读写系统剪贴板上的文本和数据的接口。规范中被称为异步剪贴板 API(Async Clipboard API)。
    +
    {{domxref("ClipboardEvent")}} {{securecontext_inline}}
    表示提供了有关剪贴板修改的信息的事件,也就是 {{domxref("Element/cut_event", "cut")}}、{{domxref("Element/copy_event", "copy")}},和 {{domxref("Element/paste_event", "paste")}}。规范中被称为剪贴板事件 API(Clipboard Event API)。
    diff --git a/files/zh-cn/web/api/clipboardevent/clipboarddata/index.html b/files/zh-cn/web/api/clipboardevent/clipboarddata/index.html index 183e527b4c02df..125479b39e2c67 100644 --- a/files/zh-cn/web/api/clipboardevent/clipboarddata/index.html +++ b/files/zh-cn/web/api/clipboardevent/clipboarddata/index.html @@ -38,6 +38,6 @@

    相关链接

      -
    • 与复制相关的事件:{{event("copy")}}, {{event("cut")}}, {{event("paste")}}
    • +
    • 与复制相关的事件:{{event("copy")}}, {{event("cut")}}, {{event("paste")}}
    • 本对象所属的{{domxref("ClipboardEvent")}}接口。
    diff --git a/files/zh-cn/web/api/clipboardevent/clipboardevent/index.html b/files/zh-cn/web/api/clipboardevent/clipboardevent/index.html index af9de741dbcf09..09fb26aadc6117 100644 --- a/files/zh-cn/web/api/clipboardevent/clipboardevent/index.html +++ b/files/zh-cn/web/api/clipboardevent/clipboardevent/index.html @@ -12,7 +12,7 @@ ---

    {{APIRef("Clipboard API")}}{{SeeCompatTable}}

    -

    ClipboardEvent() 构造函数返回一个新建的 {{domxref("ClipboardEvent")}} 对象,这个对象表示与修改剪切板相关的事件,这些事件包括 {{event("cut")}} 、 {{event("copy")}}  和 {{event("paste")}} 事件。

    +

    ClipboardEvent() 构造函数返回一个新建的 {{domxref("ClipboardEvent")}} 对象,这个对象表示与修改剪切板相关的事件,这些事件包括 {{event("cut")}} 、 {{event("copy")}} 和 {{event("paste")}} 事件。

    语法

    @@ -20,17 +20,17 @@

    语法

    参数

    -

    ClipboardEvent() 构造函数也从 {{domxref("Event.Event", "Event()")}} 继承参数。

    +

    ClipboardEvent() 构造函数也从 {{domxref("Event.Event", "Event()")}} 继承参数。

    type
    -
    一个 {{domxref("DOMString")}} 字符串,描述了 ClipboardEvent  事件类型的名字,大小写敏感,可以是:'copy''cut'或者 'paste'
    -
    options {{optional_inline}}
    +
    一个 {{domxref("DOMString")}} 字符串,描述了 ClipboardEvent 事件类型的名字,大小写敏感,可以是:'copy''cut'或者 'paste'
    +
    options {{optional_inline}}
    选项如下:
    • clipboardData: 一个 {{domxref("DataTransfer")}} containing the data concerned by the clipboard event.
    • -
    • dataType{{non-standard_inline}}: A {{domxref("DOMString")}} containing the MIME-type of the data contained in the data argument.
    • -
    • data{{non-standard_inline}}: A {{domxref("DOMString")}} containing the data concerned by the clipboard event.
    • +
    • dataType{{non-standard_inline}}: A {{domxref("DOMString")}} containing the MIME-type of the data contained in the data argument.
    • +
    • data{{non-standard_inline}}: A {{domxref("DOMString")}} containing the data concerned by the clipboard event.
    @@ -48,6 +48,6 @@

    相关链接

      -
    • 与复制相关的事件:{{event("copy")}}, {{event("cut")}}, {{event("paste")}}
    • +
    • 与复制相关的事件:{{event("copy")}}, {{event("cut")}}, {{event("paste")}}
    • 所属的 {{domxref("ClipboardEvent")}} 接口。
    diff --git a/files/zh-cn/web/api/clipboardevent/index.html b/files/zh-cn/web/api/clipboardevent/index.html index 0b7a777459596f..1f6605848c3ae2 100644 --- a/files/zh-cn/web/api/clipboardevent/index.html +++ b/files/zh-cn/web/api/clipboardevent/index.html @@ -20,11 +20,11 @@

    构造函数

    属性

    -

    同样是从其父类  {{domxref("Event")}} 继承的属性。

    +

    同样是从其父类 {{domxref("Event")}} 继承的属性。

    {{domxref("ClipboardEvent.clipboardData")}} {{readonlyInline}}
    -
    是一个 {{domxref("DataTransfer")}} 对象,它包含了由用户发起的 {{event("cut")}}  、 {{event("copy")}}  和 {{event("paste")}}  操作影响的数据,以及它的 MIME 类型。
    +
    是一个 {{domxref("DataTransfer")}} 对象,它包含了由用户发起的 {{event("cut")}} 、 {{event("copy")}} 和 {{event("paste")}} 操作影响的数据,以及它的 MIME 类型。
    @@ -45,5 +45,5 @@

    浏览器兼容性

    相关链接

      -
    • Copy-related events: {{event("copy")}}, {{event("cut")}}, {{event("paste")}}
    • +
    • Copy-related events: {{event("copy")}}, {{event("cut")}}, {{event("paste")}}
    diff --git a/files/zh-cn/web/api/clipboarditem/index.html b/files/zh-cn/web/api/clipboarditem/index.html index 77eabc648755a6..b18c8b0b739972 100644 --- a/files/zh-cn/web/api/clipboarditem/index.html +++ b/files/zh-cn/web/api/clipboarditem/index.html @@ -21,7 +21,7 @@

    The benefit of having the ClipboardItem interface to represent data, is that it enables developers to cope with the varying scope of file types and data easily.

    -

    Access to the contents of the clipboard is gated behind the Permissions API: The clipboard-write permission is granted automatically to pages when they are in the active tab. The clipboard-read permission must be requested, which you can do by trying to read data from the clipboard.

    +

    Access to the contents of the clipboard is gated behind the Permissions API: The clipboard-write permission is granted automatically to pages when they are in the active tab. The clipboard-read permission must be requested, which you can do by trying to read data from the clipboard.

    Note: To work with text see the {{domxref("Clipboard.readText()")}} and {{domxref("Clipboard.writeText()")}} methods of the {{domxref("Clipboard")}} interface.

    @@ -53,7 +53,7 @@

    Methods

    {{domxref("ClipboardItem.getType", "getType()")}}
    -
    Returns a {{jsxref("Promise")}} that resolves with a {{domxref("Blob")}} of the requested {{Glossary("MIME type")}}, or an error if the MIME type is not found.
    +
    Returns a {{jsxref("Promise")}} that resolves with a {{domxref("Blob")}} of the requested {{Glossary("MIME type")}}, or an error if the MIME type is not found.

    Examples

    diff --git a/files/zh-cn/web/api/closeevent/index.html b/files/zh-cn/web/api/closeevent/index.html index 9304cdd813254c..6a1219b8999f04 100644 --- a/files/zh-cn/web/api/closeevent/index.html +++ b/files/zh-cn/web/api/closeevent/index.html @@ -12,13 +12,13 @@ ---

    {{APIRef("Websockets API")}}

    -

    CloseEvent 会在连接关闭时发送给使用 {{Glossary("WebSockets")}} 的客户端。它在 WebSocket 对象的 onclose 事件监听器中使用。

    +

    CloseEvent 会在连接关闭时发送给使用 {{Glossary("WebSockets")}} 的客户端。它在 WebSocket 对象的 onclose 事件监听器中使用。

    构造器

    {{domxref("CloseEvent.CloseEvent", "CloseEvent()")}}
    -
    创建一个 CloseEvent.
    +
    创建一个 CloseEvent.

    属性

    @@ -63,17 +63,17 @@

    属性

    - + - + - + @@ -118,7 +118,7 @@

    属性

    - + @@ -144,7 +144,7 @@

    属性

    输入数量变量; 默认为 6.变量; 默认为 6.
    输出数量
    1004 保留。 其意义可能会在未来定义。保留。 其意义可能会在未来定义。
    1005 CLOSE_NO_STATUS保留。  表示没有收到预期的状态码。保留。 表示没有收到预期的状态码。
    1006 CLOSE_ABNORMAL保留。 用于期望收到状态码时连接非正常关闭 (也就是说,没有发送关闭帧).保留。 用于期望收到状态码时连接非正常关闭 (也就是说,没有发送关闭帧).
    1007
    1015 TLS Handshake保留。 表示连接由于无法完成 TLS 握手而关闭 (例如无法验证服务器证书).保留。 表示连接由于无法完成 TLS 握手而关闭 (例如无法验证服务器证书).
    10161999
    {{domxref("CloseEvent.reason")}} {{readOnlyInline}}
    -
    返回一个 {{domxref("DOMString")}} 用以表示服务器关闭连接的原因。这是由服务器和子协议决定的。
    +
    返回一个 {{domxref("DOMString")}} 用以表示服务器关闭连接的原因。这是由服务器和子协议决定的。
    {{domxref("CloseEvent.wasClean")}} {{readOnlyInline}}
    返回一个 {{jsxref("Boolean")}} 用以表示连接是否完全关闭。
    @@ -155,7 +155,7 @@

    Methods

    {{domxref("CloseEvent.initCloseEvent()")}} {{Non-standard_inline}} {{Deprecated_Inline}}
    -
    初始化创建的 CloseEvent 的值。如果该事件已经被处理,这个方法什么也不做。不要直接使用这个方法,使用 {{domxref("CloseEvent.CloseEvent", "CloseEvent()")}} ?构造器来代替。
    +
    初始化创建的 CloseEvent 的值。如果该事件已经被处理,这个方法什么也不做。不要直接使用这个方法,使用 {{domxref("CloseEvent.CloseEvent", "CloseEvent()")}} ?构造器来代替。

    浏览器兼容性

    diff --git a/files/zh-cn/web/api/comment/comment/index.html b/files/zh-cn/web/api/comment/comment/index.html index e59f84a9b90d3a..8ce65b66647b95 100644 --- a/files/zh-cn/web/api/comment/comment/index.html +++ b/files/zh-cn/web/api/comment/comment/index.html @@ -10,7 +10,7 @@ ---

    {{ApiRef("DOM")}}{{seeCompatTable}}

    -

    构造函数 Comment() 创建一个 {{domxref("Comment")}} 对象并返回,这个对象以可选的 {{domxref("DOMString")}} 参数作为它的文本内容。

    +

    构造函数 Comment() 创建一个 {{domxref("Comment")}} 对象并返回,这个对象以可选的 {{domxref("DOMString")}} 参数作为它的文本内容。

    语法

    @@ -33,7 +33,7 @@

    浏览器兼容性

    {{Compat("api.Comment.Comment")}}

    -

    提示:对于不支持本构造函数的浏览器, {{domxref("Document.createComment()")}} 或许可以使用。

    +

    提示:对于不支持本构造函数的浏览器, {{domxref("Document.createComment()")}} 或许可以使用。

    相关文档

    diff --git a/files/zh-cn/web/api/comment/index.html b/files/zh-cn/web/api/comment/index.html index 7dec4b1c53d0b9..550a3be48b7c76 100644 --- a/files/zh-cn/web/api/comment/index.html +++ b/files/zh-cn/web/api/comment/index.html @@ -10,7 +10,7 @@ ---
    {{ ApiRef("DOM") }}
    -

    Comment 接口代表标签(markup)之间的文本符号(textual notations)。尽管它通常不会显示出来,但是在查看源码时可以看到它们。在 HTML 和 XML 里,注释(Comments)为 '<!--' 和 '-->' 之间的内容。在 XML 里,注释中不能出现字符序列 '--'。

    +

    Comment 接口代表标签(markup)之间的文本符号(textual notations)。尽管它通常不会显示出来,但是在查看源码时可以看到它们。在 HTML 和 XML 里,注释(Comments)为 '<!--' 和 '-->' 之间的内容。在 XML 里,注释中不能出现字符序列 '--'。

    属性

    @@ -20,7 +20,7 @@

    构造函数

    {{ domxref("Comment.Comment()", "Comment()") }} {{experimental_inline}}
    -
    使用文本内容作为参数,返回一个 Comment 对象。
    +
    使用文本内容作为参数,返回一个 Comment 对象。

    方法

    diff --git a/files/zh-cn/web/api/compositionevent/index.html b/files/zh-cn/web/api/compositionevent/index.html index 576d20026f6d1b..f79c9d1f5f4cc1 100644 --- a/files/zh-cn/web/api/compositionevent/index.html +++ b/files/zh-cn/web/api/compositionevent/index.html @@ -11,7 +11,7 @@ ---
    {{APIRef("DOM Events")}}
    -

    DOM 接口 CompositionEvent 表示用户间接输入文本(如使用输入法)时发生的事件。此接口的常用事件有{{domxref("Element/compositionstart_event", "compositionstart")}}, {{domxref("Element/compositionupdate_event", "compositionupdate")}} 和 {{domxref("Element/compositionend_event", "compositionend")}}

    +

    DOM 接口 CompositionEvent 表示用户间接输入文本(如使用输入法)时发生的事件。此接口的常用事件有{{domxref("Element/compositionstart_event", "compositionstart")}}, {{domxref("Element/compositionupdate_event", "compositionupdate")}} 和 {{domxref("Element/compositionend_event", "compositionend")}}

    {{InheritanceDiagram}}

    @@ -19,7 +19,7 @@

    构造函数

    {{domxref("CompositionEvent.CompositionEvent()", "CompositionEvent()")}}
    -
    创建一个新的 CompositionEvent 对象实例。
    +
    创建一个新的 CompositionEvent 对象实例。

    属性

    @@ -28,7 +28,7 @@

    属性

    {{domxref("CompositionEvent.data")}} {{readonlyinline}}
    -
    返回触发事件的输入方法所产生的字符;取决于生成 CompositionEvent 对象的事件类型,结果会有所不同。
    +
    返回触发事件的输入方法所产生的字符;取决于生成 CompositionEvent 对象的事件类型,结果会有所不同。
    {{domxref("CompositionEvent.locale")}} {{readonlyinline}} {{deprecated_inline}}
    返回当前输入方法的场景(例如,使用输入法编辑器进行输入合成时,场景就是键盘布局)。
    @@ -39,7 +39,7 @@

    方法

    {{domxref("CompositionEvent.initCompositionEvent()")}} {{deprecated_inline}}
    -
    初始化 CompositionEvent 对象的所有属性。
    +
    初始化 CompositionEvent 对象的所有属性。

    规范

    diff --git a/files/zh-cn/web/api/console/assert/index.html b/files/zh-cn/web/api/console/assert/index.html index 01cde7f73102a2..c72540771d53e5 100644 --- a/files/zh-cn/web/api/console/assert/index.html +++ b/files/zh-cn/web/api/console/assert/index.html @@ -12,7 +12,7 @@

    {{AvailableInWorkers}}

    -

    console.assert()方法在 Node.js 中的实现和浏览器中可用的console.assert()方法实现是不同的。在浏览器中当console.assert()方法接受到一个值为假断言的时候,会向控制台输出传入的内容,但是并不会中断代码的执行,而在 Node.js v10.0.0 之前,一个值为假的断言也将会导致一个AssertionError被抛出,使得代码执行被打断。v10.0.0 修复了此差异,所以现在console.assert()在 Node 和浏览器中执行行为相同。

    +

    console.assert()方法在 Node.js 中的实现和浏览器中可用的console.assert()方法实现是不同的。在浏览器中当console.assert()方法接受到一个值为假断言的时候,会向控制台输出传入的内容,但是并不会中断代码的执行,而在 Node.js v10.0.0 之前,一个值为假的断言也将会导致一个AssertionError被抛出,使得代码执行被打断。v10.0.0 修复了此差异,所以现在console.assert()在 Node 和浏览器中执行行为相同。

    语法

    @@ -52,12 +52,12 @@

    案例

    // the # is 5 // Assertion failed: {number: 5, errorMsg: "the # is not even"}
    -

    请注意, 你可以在大多数浏览器中使用 console.log 进行格式化输出

    +

    请注意, 你可以在大多数浏览器中使用 console.log 进行格式化输出

    console.log('the word is %s try number %d', 'foo', 123);
     // 输出:the word is foo try number 123
    -

    但是 console.assert 在不同浏览器中可能获得不同的效果:

    +

    但是 console.assert 在不同浏览器中可能获得不同的效果:

    console.assert(false, 'the word is %s', 'foo');
     // correct output in Node (e.g. v8.10.0) and some browsers
    @@ -67,7 +67,7 @@ 

    案例

    // (e.g. Chrome v67.0.3396.87): // Assertion failed: the word is %s foo
    -

    有关详细信息,请参阅 {{Domxref("console")}} 文档中的 输出文本到控制台

    +

    有关详细信息,请参阅 {{Domxref("console")}} 文档中的 输出文本到控制台

    规范

    diff --git a/files/zh-cn/web/api/console/clear/index.html b/files/zh-cn/web/api/console/clear/index.html index ae11fe62c947cc..a39108724cc830 100644 --- a/files/zh-cn/web/api/console/clear/index.html +++ b/files/zh-cn/web/api/console/clear/index.html @@ -9,7 +9,7 @@

    控制台显示的内容将会被一些信息替换,比如‘Console was cleared’这样的信息。

    -

    需要的注意的一点是在 Google Chrome 浏览器中,如果用户在设置中勾选了“Preserve log”选项,console.clear() 将不会起作用。 

    +

    需要的注意的一点是在 Google Chrome 浏览器中,如果用户在设置中勾选了“Preserve log”选项,console.clear() 将不会起作用。

    语法

    diff --git a/files/zh-cn/web/api/console/count/index.html b/files/zh-cn/web/api/console/count/index.html index 3e7345f77fa089..b3696080705dd4 100644 --- a/files/zh-cn/web/api/console/count/index.html +++ b/files/zh-cn/web/api/console/count/index.html @@ -9,7 +9,7 @@

    {{AvailableInWorkers}}

    -

    如果有 label,此函数输出为那个指定的 label 和 count() 被调用的次数。

    +

    如果有 label,此函数输出为那个指定的 label 和 count() 被调用的次数。

    如果 label 被忽略,此函数输出 count() 在其所处位置上被调用的次数。

    @@ -39,7 +39,7 @@

    注意最后一行的日志输出:在 11 行对 count() 的单独调用是被当作一个独立事件来处理的。

    -

    如果把变量 user 当作 label 参数传给前面调用的 count(),把字符串 "alice" 传给后面调用的 count()

    +

    如果把变量 user 当作 label 参数传给前面调用的 count(),把字符串 "alice" 传给后面调用的 count()

    var user = "";
     
    @@ -62,7 +62,7 @@
     "alice: 2"
     "alice: 3"
    -

    现在可以基于不同的 label 值维护不同的数值。由于 11 行的 label 匹配了两次 user 的值,因此它不会被当作独立的事件。

    +

    现在可以基于不同的 label 值维护不同的数值。由于 11 行的 label 匹配了两次 user 的值,因此它不会被当作独立的事件。

    语法

    diff --git a/files/zh-cn/web/api/console/countreset/index.html b/files/zh-cn/web/api/console/countreset/index.html index b5f7a87718e9ca..cbc0981a6e551e 100644 --- a/files/zh-cn/web/api/console/countreset/index.html +++ b/files/zh-cn/web/api/console/countreset/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef("Console API")}}
    -

    重置计数器。此函数有一个可选参数 label

    +

    重置计数器。此函数有一个可选参数 label

    {{AvailableInWorkers}}

    @@ -22,9 +22,9 @@

    参数

    label
    -
    一个字符串,若传入此参数 countReset() 重置此 label 的 count 为 0。
    -
    若忽略此参数  countReset() 重置 count() 默认的 default 字段的 count 为 0
    -  
    +
    一个字符串,若传入此参数 countReset() 重置此 label 的 count 为 0。
    +
    若忽略此参数 countReset() 重置 count() 默认的 default 字段的 count 为 0
    +

    返回值

    @@ -39,11 +39,11 @@

    返回值

    异常情况

    -

    若传入一个不存在的 labelcountReset 返回下面的警告信息:

    +

    若传入一个不存在的 label, countReset 返回下面的警告信息:

    Counter "counter-name" doesn’t exist.
    -

    若 label 没有被传入 并且 count() 也没有被调用过,countReset 返回下面的警告信息:

    +

    label 没有被传入 并且 count() 也没有被调用过,countReset 返回下面的警告信息:

    Counter "default" doesn’t exist.
    @@ -77,9 +77,9 @@

    示例

    Note that the call to console.counterReset() resets the value of the default counter to zero.

    -

    可以看到 调用 console.counterReset() 重置了default 的计数为 0

    +

    可以看到 调用 console.counterReset() 重置了default 的计数为 0

    -

    如果我们把 user 变量做为 label 传入第一次调用的 count()  把字符串 'alice' 作为第二次调用count() 的参数

    +

    如果我们把 user 变量做为 label 传入第一次调用的 count() 把字符串 'alice' 作为第二次调用count() 的参数

    var user = "";
     
    @@ -104,7 +104,7 @@ 

    示例

    "bob: 0" "alice: 3"
    -

    调用 countReset("bod") 只是重置了 "bob" 的计数器值  而 "alice" 的计数器值没有改变。

    +

    调用 countReset("bod") 只是重置了 "bob" 的计数器值 而 "alice" 的计数器值没有改变。

    Specifications

    diff --git a/files/zh-cn/web/api/console/debug/index.html b/files/zh-cn/web/api/console/debug/index.html index 9dca06787340b7..3952c9ae0415b5 100644 --- a/files/zh-cn/web/api/console/debug/index.html +++ b/files/zh-cn/web/api/console/debug/index.html @@ -8,7 +8,7 @@ ---
    {{APIRef("Console API")}}
    -

    {{domxref("Console")}}.debug() 输出“调试”级别的消息且仅仅控制台配置为显示调试输出时才显示该消息。

    +

    {{domxref("Console")}}.debug() 输出“调试”级别的消息且仅仅控制台配置为显示调试输出时才显示该消息。

    {{AvailableInWorkers}}

    diff --git a/files/zh-cn/web/api/console/dir/index.html b/files/zh-cn/web/api/console/dir/index.html index f92e047fdb7b8d..7d6e16c52d1710 100644 --- a/files/zh-cn/web/api/console/dir/index.html +++ b/files/zh-cn/web/api/console/dir/index.html @@ -35,4 +35,4 @@

    相关链接

  • Chrome Console API reference
  • -

     

    +

    diff --git a/files/zh-cn/web/api/console/groupend/index.html b/files/zh-cn/web/api/console/groupend/index.html index bdb5a525bb344c..5b40575a8754b6 100644 --- a/files/zh-cn/web/api/console/groupend/index.html +++ b/files/zh-cn/web/api/console/groupend/index.html @@ -5,7 +5,7 @@ ---

    {{APIRef("Console API")}}

    -

    Web 控制台中退出一格缩进 (结束分组). 请参阅 {{domxref("console")}} 中的Using groups in the console 来获取它的用法和示例。

    +

    Web 控制台中退出一格缩进 (结束分组). 请参阅 {{domxref("console")}} 中的Using groups in the console 来获取它的用法和示例。

    {{AvailableInWorkers}}

    diff --git a/files/zh-cn/web/api/console/index.html b/files/zh-cn/web/api/console/index.html index 8cda512fbf2df2..dc8bc82d4a9126 100644 --- a/files/zh-cn/web/api/console/index.html +++ b/files/zh-cn/web/api/console/index.html @@ -14,7 +14,7 @@

    Console 对象提供了浏览器控制台调试的接口(如:Firefox 的 Web Console)。在不同浏览器上它的工作方式可能不一样,但通常都会提供一套共性的功能。

    -

    Console 对象可以从任何全局对象中访问到,如 浏览器作用域上的 {{domxref("Window")}},以及通过属性控制台作为 workers 中的特定变体的 {{domxref("WorkerGlobalScope")}}。可以通过 {{domxref("Window.console")}} 引用,也可以简单的通过 console 引用。例:

    +

    Console 对象可以从任何全局对象中访问到,如 浏览器作用域上的 {{domxref("Window")}},以及通过属性控制台作为 workers 中的特定变体的 {{domxref("WorkerGlobalScope")}}。可以通过 {{domxref("Window.console")}} 引用,也可以简单的通过 console 引用。例:

    console.log("Failed to open the specified link")
    @@ -23,14 +23,14 @@

    {{AvailableInWorkers}}

    -

    提示: 实际的 console 接口被定义为全小写的形式(比如不是这种形式 Console ),这是历史原因导致的。

    +

    提示: 实际的 console 接口被定义为全小写的形式(比如不是这种形式 Console ),这是历史原因导致的。

    方法

    {{domxref("Console.assert()")}}
    -
    如果第一个参数为 false ,则将消息和堆栈跟踪记录到控制台。
    +
    如果第一个参数为 false ,则将消息和堆栈跟踪记录到控制台。
    {{domxref("Console.clear()")}}
    清空控制台,并输出 Console was cleared
    {{domxref("Console.count()")}}
    @@ -48,11 +48,11 @@

    方法

    {{domxref("Console.exception()")}} {{Non-standard_inline}} {{deprecated_inline}}
    error() 方法的别称。
    {{domxref("Console.group()")}}
    -
    创建一个新的内联 group, 后续所有打印内容将会以子层级的形式展示。调用 groupEnd()来闭合组。
    +
    创建一个新的内联 group, 后续所有打印内容将会以子层级的形式展示。调用 groupEnd()来闭合组。
    {{domxref("Console.groupCollapsed()")}}
    创建一个新的内联 group。使用方法和 group() 相同,不同的是,groupCollapsed() 方法打印出来的内容默认是折叠的。调用groupEnd()来闭合组。
    {{domxref("Console.groupEnd()")}}
    -
    闭合当前内联 group
    +
    闭合当前内联 group
    {{domxref("Console.info()")}}
    打印资讯类说明信息,使用方法可以参考 string substitution
    {{domxref("Console.log()")}}
    @@ -66,11 +66,11 @@

    方法

    {{domxref("Console.time()")}}
    启动一个以入参作为特定名称的计时器,在显示页面中可同时运行的计时器上限为 10,000.
    {{domxref("Console.timeEnd()")}}
    -
    结束特定的 计时器 并以毫秒打印其从开始到结束所用的时间。
    +
    结束特定的 计时器 并以毫秒打印其从开始到结束所用的时间。
    {{domxref("Console.timeLog()")}}
    -
    打印特定 计时器 所运行的时间。
    +
    打印特定 计时器 所运行的时间。
    {{domxref("Console.timeStamp()")}} {{Non-standard_inline}}
    -
    添加一个标记到浏览器的 Timeline 或 Waterfall 工具。
    +
    添加一个标记到浏览器的 TimelineWaterfall 工具。
    {{domxref("Console.trace()")}}
    输出一个 stack trace
    {{domxref("Console.warn()")}}
    @@ -125,7 +125,7 @@

    使用字符串替换

    %d or %i - 打印整数。支持数字格式化。例如,console.log("Foo %.2d", 1.1) 会输出有先导 0 的两位有效数字: Foo 01。 + 打印整数。支持数字格式化。例如,console.log("Foo %.2d", 1.1) 会输出有先导 0 的两位有效数字: Foo 01%s @@ -133,7 +133,7 @@

    使用字符串替换

    %f - 打印浮点数。支持格式化,比如 console.log("Foo %.2f", 1.1) 会输出两位小数: Foo 1.10 + 打印浮点数。支持格式化,比如 console.log("Foo %.2f", 1.1) 会输出两位小数: Foo 1.10 @@ -166,11 +166,11 @@

    为控制台定义样式

    -
    指令前的文本不会受到影响,但指令后的文本将会使用参数中声明的 CSS 样式。
    +
    指令前的文本不会受到影响,但指令后的文本将会使用参数中声明的 CSS 样式。


    - %c 语法可用的属性如下 (至少在 Firefox 中是这样,别的浏览器会有诸多不同):

    + %c 语法可用的属性如下 (至少在 Firefox 中是这样,别的浏览器会有诸多不同):

    • {{cssxref("background")}} 与其全写版本。
    • @@ -187,20 +187,20 @@

      为控制台定义样式

    • {{cssxref("margin")}}
    • {{cssxref("outline")}} 与其全写版本。
    • {{cssxref("padding")}}
    • -
    • {{cssxref("text-transform")}} 这类 text-* 属性 
    • +
    • {{cssxref("text-transform")}} 这类 text-* 属性
    • {{cssxref("white-space")}}
    • {{cssxref("word-spacing")}} 和 {{cssxref("word-break")}}
    • {{cssxref("writing-mode")}}
    -

    注意: 控制台信息的默认行为与行内元素相似。为了应用 paddingmargin 这类效果,你应当这样设置display: inline-block.。

    +

    注意: 控制台信息的默认行为与行内元素相似。为了应用 padding, margin 这类效果,你应当这样设置display: inline-block.。

    在 console 中使用编组

    可以使用嵌套组来把视觉上相关的元素合并,以协助组织你的输出。使用console.group()创建新的嵌套块,或者用console.groupCollapsed() 创建默认折叠的块,这种块需要点击闭合按钮来展开才能读到。

    -

    直接调用 console.groupEnd().就可以退出当前组。比如下面的代码:

    +

    直接调用 console.groupEnd().就可以退出当前组。比如下面的代码:

    console.log("This is the outer level");
     console.group();
    @@ -220,7 +220,7 @@ 

    在 console 中使用编组

    定时器

    -

    你可以使用定时器来计算一段特定操作的周期。使用 console.time() 方法以创建一个计时器,其唯一的参数表示了计时器的名字。使用 console.timeEnd() 方法以关闭计时器,并获取经过的毫秒数,其同样以计时器的名字作为参数。一个页面最多同时只能有 10,000 个计数器运行。

    +

    你可以使用定时器来计算一段特定操作的周期。使用 console.time() 方法以创建一个计时器,其唯一的参数表示了计时器的名字。使用 console.timeEnd() 方法以关闭计时器,并获取经过的毫秒数,其同样以计时器的名字作为参数。一个页面最多同时只能有 10,000 个计数器运行。

    示例::

    @@ -237,7 +237,7 @@

    定时器

    注意无论在开始还是结束的时候都会打印计时器的名字。

    -
    注意: 如果使用计时器来记录网络时间请求的话下面的内容很重要。计时器将会报告传输过程的整个时间,而网络面板里显示的时间只计算了请求头部所需要的时间。如果启用了响应体日志记录,那么列出的响应头部和响应体组合的时间应该与在控制台输出中看到的时间相符。
    +
    注意: 如果使用计时器来记录网络时间请求的话下面的内容很重要。计时器将会报告传输过程的整个时间,而网络面板里显示的时间只计算了请求头部所需要的时间。如果启用了响应体日志记录,那么列出的响应头部和响应体组合的时间应该与在控制台输出中看到的时间相符。

    堆栈跟踪

    @@ -268,15 +268,15 @@

    浏览器兼容性

    注意

      -
    • 在 Firefox 浏览器中,如果页面中自己定义了 console 对象,那么它会覆盖掉浏览器内置的 console对象,在其它浏览器可能也是。
    • +
    • 在 Firefox 浏览器中,如果页面中自己定义了 console 对象,那么它会覆盖掉浏览器内置的 console对象,在其它浏览器可能也是。

    相关文档

    • Tools
    • -
    • Web Console - Firefox 浏览器控制台如何处理 console API 的调用
    • -
    • Remote debugging - 如何在调试移动设备时查看控制台输出。
    • +
    • Web Console - Firefox 浏览器控制台如何处理 console API 的调用
    • +
    • Remote debugging - 如何在调试移动设备时查看控制台输出。

    其他实现

    diff --git a/files/zh-cn/web/api/console/info/index.html b/files/zh-cn/web/api/console/info/index.html index c0c770d722361b..e52ed1ca0867b5 100644 --- a/files/zh-cn/web/api/console/info/index.html +++ b/files/zh-cn/web/api/console/info/index.html @@ -25,9 +25,9 @@

    参数

    subst1 ... substN
    -

         用于替换 msg 内的替换字符串的 JavaScript 对象。可以对输出的格式进行额外的控制。

    +

    用于替换 msg 内的替换字符串的 JavaScript 对象。可以对输出的格式进行额外的控制。

    -

    查看更多细节可访问 {{domxref("console")}} 文件内的Outputting text to the console

    +

    查看更多细节可访问 {{domxref("console")}} 文件内的Outputting text to the console

    规范

    diff --git a/files/zh-cn/web/api/console/profile/index.html b/files/zh-cn/web/api/console/profile/index.html index 832b113960a464..868fc2ddb6bf50 100644 --- a/files/zh-cn/web/api/console/profile/index.html +++ b/files/zh-cn/web/api/console/profile/index.html @@ -15,7 +15,7 @@ ---

    {{APIRef("Console API")}}{{Non-standard_header}}

    -

    开始记录性能描述信息 (例如, Firefox performance tool)。

    +

    开始记录性能描述信息 (例如, Firefox performance tool)。

    你可以选择提供一个参数来命名描述信息,这将允许你在有多个描述信息被记录时来选择只停止那个描述信息(被你命名的那个)。请查阅{{domxref("Console.profileEnd()")}}来确认这个参数是如何被解释的。

    diff --git a/files/zh-cn/web/api/console/profileend/index.html b/files/zh-cn/web/api/console/profileend/index.html index 89af6475467c83..ed534b96083800 100644 --- a/files/zh-cn/web/api/console/profileend/index.html +++ b/files/zh-cn/web/api/console/profileend/index.html @@ -6,7 +6,7 @@

    {{APIRef("Console API")}}{{Non-standard_header}}

    -

    在 console.profile() 之后立刻调用此 API 可能会导致其无法工作.。为解决此问题,请在 setTimeOut 中至少延迟 5 毫秒后再调用。 请看 bug #1173588

    +

    在 console.profile() 之后立刻调用此 API 可能会导致其无法工作.。为解决此问题,请在 setTimeOut 中至少延迟 5 毫秒后再调用。 请看 bug #1173588

    profileEnd 方法会停止记录之前已经由{{domxref("Console.profile()")}}开始记录的性能描述信息

    @@ -14,9 +14,9 @@

    你可以选择提供一个参数来命名需要记录的描述信息。这使得你在记录多个描述信息的时候可以停止记录特定的描述信息。

      -
    • 如果 Console.profileEnd() 传了描述信息名字,并且它与正在记录的描述信息的名字相匹配,则此描述信息将会停止。
    • -
    • 如果 Console.profileEnd() 传了描述信息名字,并且它与正在记录的描述信息的名字不匹配,则不会进行更改。
    • -
    • 如果 Console.profileEnd() 没有传描述信息名字,最近启动记录的描述信息将会停止。
    • +
    • 如果 Console.profileEnd() 传了描述信息名字,并且它与正在记录的描述信息的名字相匹配,则此描述信息将会停止。
    • +
    • 如果 Console.profileEnd() 传了描述信息名字,并且它与正在记录的描述信息的名字不匹配,则不会进行更改。
    • +
    • 如果 Console.profileEnd() 没有传描述信息名字,最近启动记录的描述信息将会停止。

    {{AvailableInWorkers}}

    diff --git a/files/zh-cn/web/api/console/table/index.html b/files/zh-cn/web/api/console/table/index.html index 100f96a2f0d9c1..f4ef99194ddb7f 100644 --- a/files/zh-cn/web/api/console/table/index.html +++ b/files/zh-cn/web/api/console/table/index.html @@ -13,11 +13,11 @@

    将数据以表格的形式显示。

    -

    这个方法需要一个必须参数 datadata 必须是一个数组或者是一个对象;还可以使用一个可选参数 columns

    +

    这个方法需要一个必须参数 datadata 必须是一个数组或者是一个对象;还可以使用一个可选参数 columns

    它会把数据 data 以表格的形式打印出来。数组中的每一个元素(或对象中可枚举的属性)将会以行的形式显示在表格中。

    -

    表格的第一列是 index。如果数据 data 是一个数组,那么这一列的单元格的值就是数组的索引。如果数据是一个对象,那么它们的值就是各对象的属性名称。注意(在 FireFox 中)console.table 被限制为只显示 1000 行(第一行是被标记的索引(原文:labeled index))。

    +

    表格的第一列是 index。如果数据 data 是一个数组,那么这一列的单元格的值就是数组的索引。如果数据是一个对象,那么它们的值就是各对象的属性名称。注意(在 FireFox 中)console.table 被限制为只显示 1000 行(第一行是被标记的索引(原文:labeled index))。

    {{AvailableInWorkers}}

    @@ -34,8 +34,8 @@

    打印单一参数类型

    // 打印一个属性值是字符串的对象
     
     function Person(firstName, lastName) {
    -  this.firstName = firstName;
    -  this.lastName = lastName;
    +  this.firstName = firstName;
    +  this.lastName = lastName;
     }
     
     var me = new Person("John", "Smith");
    diff --git a/files/zh-cn/web/api/console/time/index.html b/files/zh-cn/web/api/console/time/index.html
    index 956b77d0fc1c91..3d4260e5ec6ca8 100644
    --- a/files/zh-cn/web/api/console/time/index.html
    +++ b/files/zh-cn/web/api/console/time/index.html
    @@ -20,7 +20,7 @@ 

    参数

    timerName
    -
    新计时器的名字。用来标记这个计时器,作为参数调用 {{ domxref("console.timeEnd()") }}可以停止计时并将经过的时间在终端中打印出来。
    +
    新计时器的名字。用来标记这个计时器,作为参数调用 {{ domxref("console.timeEnd()") }}可以停止计时并将经过的时间在终端中打印出来。

    规范

    diff --git a/files/zh-cn/web/api/console/timeend/index.html b/files/zh-cn/web/api/console/timeend/index.html index 9aaaf0fe91eba6..1811ac2487b250 100644 --- a/files/zh-cn/web/api/console/timeend/index.html +++ b/files/zh-cn/web/api/console/timeend/index.html @@ -13,7 +13,7 @@

    概述

    注意:该方法在使用时不会将输出的时间返回到 js,它只能用于控制台调试。请勿将该方法作为普通计时器或性能数据收集器的一部分。

    -

    有关详细信息和示例,请参阅 Timers

    +

    有关详细信息和示例,请参阅 Timers

    {{AvailableInWorkers}}

    diff --git a/files/zh-cn/web/api/console/timelog/index.html b/files/zh-cn/web/api/console/timelog/index.html index 6126a0c50819b2..58235ea312c341 100644 --- a/files/zh-cn/web/api/console/timelog/index.html +++ b/files/zh-cn/web/api/console/timelog/index.html @@ -13,11 +13,11 @@ ---
    {{APIRef("Console API")}}
    -
    在控制台输出计时器的值,该计时器必须已经通过 {{domxref("console.time()")}} 启动。
    +
    在控制台输出计时器的值,该计时器必须已经通过 {{domxref("console.time()")}} 启动。
    -

    参阅文档中的 Timers 部分获取详细说明和示例。 

    +

    参阅文档中的 Timers 部分获取详细说明和示例。

    {{AvailableInWorkers}}

    @@ -35,21 +35,21 @@

    参数

    返回值

    -

    如果没有传入 label 参数,则以 default: 作为引导返回数据:

    +

    如果没有传入 label 参数,则以 default: 作为引导返回数据:

    default: 1042ms
    -

    如果传入了一个已经存在的 label ,则会以 label:  作为引导返回数据:

    +

    如果传入了一个已经存在的 label ,则会以 label: 作为引导返回数据:

    label: 1242ms

    异常

    -

    如果计时器未启动, timeLog() 会返回一个警告:

    +

    如果计时器未启动, timeLog() 会返回一个警告:

    Timer “default” doesn’t exist.
    -

    如果传入的 label 索引没有与之对应的计时器,则返回如下警告:

    +

    如果传入的 label 索引没有与之对应的计时器,则返回如下警告:

    Timer “timer name” doesn’t exist. 
    @@ -62,11 +62,11 @@

    示例

    console.timeEnd("answer time");
    -

    上例中的输出分别显示了用户从打开页面到关闭第一个 alert 和第二个 alert 框的时间间隔:

    +

    上例中的输出分别显示了用户从打开页面到关闭第一个 alert 和第二个 alert 框的时间间隔:

    -

    注意:使用 timelog() 输出计时器的值会显示计时器名称。使用 timeEnd() 停止也会显示计时器名称和输出计时器的值,并且,最后的 " - timer ended" 可以清楚的显示计时器不再计时的信息。

    +

    注意:使用 timelog() 输出计时器的值会显示计时器名称。使用 timeEnd() 停止也会显示计时器名称和输出计时器的值,并且,最后的 " - timer ended" 可以清楚的显示计时器不再计时的信息。

    规范

    diff --git a/files/zh-cn/web/api/console/timestamp/index.html b/files/zh-cn/web/api/console/timestamp/index.html index c24d46a80c68c9..8e7104c011f0d3 100644 --- a/files/zh-cn/web/api/console/timestamp/index.html +++ b/files/zh-cn/web/api/console/timestamp/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef("Console API")}}{{Non-standard_header}}
    -

    向浏览器的 Performance 或者 Waterfall 工具添加一个标记。这样可以让你将代码中的一个点和其他在时间轴上已记录的事件相关联,例如布局事件和绘制事件等。

    +

    向浏览器的 Performance 或者 Waterfall 工具添加一个标记。这样可以让你将代码中的一个点和其他在时间轴上已记录的事件相关联,例如布局事件和绘制事件等。

    你可以选择用一个参数来作为时间戳标签,然后标记旁边就会显示这个标签。

    diff --git a/files/zh-cn/web/api/console/trace/index.html b/files/zh-cn/web/api/console/trace/index.html index 58c7a31822a6a4..a8574d71e8d8ae 100644 --- a/files/zh-cn/web/api/console/trace/index.html +++ b/files/zh-cn/web/api/console/trace/index.html @@ -5,7 +5,7 @@ ---

    {{APIRef("Console API")}}

    -

    {{domxref("console")}} 的 trace() 方法向 Web 控制台 输出一个堆栈跟踪。

    +

    {{domxref("console")}} 的 trace() 方法Web 控制台 输出一个堆栈跟踪。

    {{AvailableInWorkers}}

    @@ -18,7 +18,7 @@

    语法

    参数

    -
    ...any, ...data {{optional_inline}}
    +
    ...any, ...data {{optional_inline}}
    Zero or more objects to be output to console along with the trace. These are assembled and formatted the same way they would be if passed to the {{domxref("console.log()")}} method.
    diff --git a/files/zh-cn/web/api/console/warn/index.html b/files/zh-cn/web/api/console/warn/index.html index da08c28f6657be..073afcad7c8770 100644 --- a/files/zh-cn/web/api/console/warn/index.html +++ b/files/zh-cn/web/api/console/warn/index.html @@ -30,7 +30,7 @@

    参数

    零个或多个 Javascript 对象 依次替换 msg 中的替代字符串,你可以在替代字符串中指定对象的输出格式。
    -

    查看 向控制台输出文本 来了解更多 {{domxref("console")}} 的用法。

    +

    查看 向控制台输出文本 来了解更多 {{domxref("console")}} 的用法。

    规范

    diff --git a/files/zh-cn/web/api/convolvernode/index.html b/files/zh-cn/web/api/convolvernode/index.html index cc4594fc0740c4..44d00472a3778e 100644 --- a/files/zh-cn/web/api/convolvernode/index.html +++ b/files/zh-cn/web/api/convolvernode/index.html @@ -8,7 +8,7 @@ ---

    {{APIRef("Web Audio API")}}

    -

    ConvolverNode 接口是一个对给定 {{domxref("AudioBuffer")}} 上执行线性卷积的 {{domxref("AudioNode")}},一般用来做音频混响效果。每一个 ConvolverNode 都会有一个输入值和输出值。

    +

    ConvolverNode 接口是一个对给定 {{domxref("AudioBuffer")}} 上执行线性卷积的 {{domxref("AudioNode")}},一般用来做音频混响效果。每一个 ConvolverNode 都会有一个输入值和输出值。

    注意: 更多线性卷积理论的相关信息,请参阅Convolution article on Wikipedia.

    @@ -43,7 +43,7 @@

    构造函数

    {{domxref("ConvolverNode.ConvolverNode()", "ConvolverNode()")}}
    -
    创建一个新的 ConvolverNode 对象实例。
    +
    创建一个新的 ConvolverNode 对象实例。

    属性

    @@ -52,7 +52,7 @@

    属性

    {{domxref("ConvolverNode.buffer")}}
    -
    一个被 ConvolverNode 用来产生混响效果的单声道、立体声或四声道的音频缓冲器,包含了 (可能是多声道) 脉冲反应 (IR)。
    +
    一个被 ConvolverNode 用来产生混响效果的单声道、立体声或四声道的音频缓冲器,包含了 (可能是多声道) 脉冲反应 (IR)。
    {{domxref("ConvolverNode.normalize")}}
    布尔值,在设置缓冲区属性时,可绝定是否对来自 buffer 的脉冲反应按等功率归一化进行缩放。
    @@ -66,7 +66,7 @@

    ConvolverNode 例子

    下面的示例展示了 AudioContext 创建卷积节点的基础用法。

    -

    注意: 你需要找到一个脉冲反应来完成下面的示例。可查看 此处 的实例。

    +

    注意: 你需要找到一个脉冲反应来完成下面的示例。可查看 此处 的实例。

    let audioCtx = new window.AudioContext();
    diff --git a/files/zh-cn/web/api/createimagebitmap/index.html b/files/zh-cn/web/api/createimagebitmap/index.html
    index a82047de46ccd6..ee6b8e228ed01e 100644
    --- a/files/zh-cn/web/api/createimagebitmap/index.html
    +++ b/files/zh-cn/web/api/createimagebitmap/index.html
    @@ -18,7 +18,7 @@ 

    Parameters

    image
    -
    一个图像源,可以是一个 {{HTMLElement("img")}}, SVG {{SVGElement("image")}}, {{HTMLElement("video")}}, {{HTMLElement("canvas")}}, {{domxref("HTMLImageElement")}}, {{domxref("SVGImageElement")}}, {{domxref("HTMLVideoElement")}}, {{domxref("HTMLCanvasElement")}}, {{domxref("Blob")}}, {{domxref("ImageData")}}, {{domxref("ImageBitmap")}}, 或 {{domxref("OffscreenCanvas")}} 对象。
    +
    一个图像源,可以是一个 {{HTMLElement("img")}}, SVG {{SVGElement("image")}}, {{HTMLElement("video")}}, {{HTMLElement("canvas")}}, {{domxref("HTMLImageElement")}}, {{domxref("SVGImageElement")}}, {{domxref("HTMLVideoElement")}}, {{domxref("HTMLCanvasElement")}}, {{domxref("Blob")}}, {{domxref("ImageData")}}, {{domxref("ImageBitmap")}}, 或 {{domxref("OffscreenCanvas")}} 对象。
    sx
    裁剪点 x 坐标。
    sy
    @@ -30,12 +30,12 @@

    Parameters

    options {{optional_inline}}
    为其设置选项的对象。可用的选项是:
      -
    • imageOrientation: 指示图像是按原样呈现还是垂直翻转.  none (默认不翻转) 或 flipY.
    • -
    • premultiplyAlpha: 指示位图颜色通道由 alpha 通道预乘。选择其一:none, premultiply, 或 default (默认).
    • -
    • colorSpaceConversion: 指示图像是否使用色彩空间转换进行解码. none 或 default (默认). The value default indicates that implementation-specific behavior is used.
    • +
    • imageOrientation: 指示图像是按原样呈现还是垂直翻转. none (默认不翻转) 或 flipY.
    • +
    • premultiplyAlpha: 指示位图颜色通道由 alpha 通道预乘。选择其一:none, premultiply, 或 default (默认).
    • +
    • colorSpaceConversion: 指示图像是否使用色彩空间转换进行解码. nonedefault (默认). The value default indicates that implementation-specific behavior is used.
    • resizeWidth: 指示新宽度的长整数。
    • resizeHeight: 指示新高度的长整数。
    • -
    • resizeQuality: 指定图像缩放算法。选择其一pixelated, low (默认), medium, 或 high.
    • +
    • resizeQuality: 指定图像缩放算法。选择其一pixelated, low (默认), medium, 或 high.
    @@ -79,5 +79,5 @@

    See also

    - +

    diff --git a/files/zh-cn/web/api/credential_management_api/index.html b/files/zh-cn/web/api/credential_management_api/index.html index 56baa0bc5736cc..b577ee9db0c755 100644 --- a/files/zh-cn/web/api/credential_management_api/index.html +++ b/files/zh-cn/web/api/credential_management_api/index.html @@ -19,7 +19,7 @@

    Credential management 概念和

    子域共享凭据(Subdomain-shared credentials)

    -

     

    +

    规范的更高版本允许从不同的子域检索凭证。例如,存储在 login.example.com 中的密码可用于登录 www.example.com。要利用这一点,必须通过调用{{domxref("CredentialsContainer.store()")}}显式存储密码。这有时被称为公共后缀列表(PSL)匹配;但是规范仅建议使用 PSL 来确定凭证的有效范围。它 (子域共享凭据) 不需要它。因此浏览器的实现可能会有所不同。

    @@ -31,7 +31,7 @@

    接口

    {{domxref("CredentialsContainer")}}
    公开请求凭据的方法,并在发生令人关注的事件(如成功登录或注销)时通知用户代理。可以从Navigator.credentials访问此接口。
    {{domxref("FederatedCredential")}}
    -
    提供关于联合身份提供程序的凭据的信息,联合身份提供程序是网站信任的实体,可以正确地对用户进行身份验证,并为此提供 API。 OpenID Connect 就是这种框架的一个例子。
    +
    提供关于联合身份提供程序的凭据的信息,联合身份提供程序是网站信任的实体,可以正确地对用户进行身份验证,并为此提供 API。 OpenID Connect 就是这种框架的一个例子。
    {{domxref("PasswordCredential")}}
    提供有关用户名/密码对的信息。
    {{domxref("PublicKeyCredential")}}
    diff --git a/files/zh-cn/web/api/credentialscontainer/index.html b/files/zh-cn/web/api/credentialscontainer/index.html index a5e922c001ebcd..309f52c17f1bf3 100644 --- a/files/zh-cn/web/api/credentialscontainer/index.html +++ b/files/zh-cn/web/api/credentialscontainer/index.html @@ -5,7 +5,7 @@ ---

    {{SeeCompatTable}}{{APIRef("Credential Management API")}}

    -

    Credential Management API 的 CredentialsContainer 接口提供了请求 credentials 和通知用户代理(当成功登陆或登出事件发生时)的方法。可通过  Navigator.credentials 获得该接口。

    +

    Credential Management APICredentialsContainer 接口提供了请求 credentials 和通知用户代理(当成功登陆或登出事件发生时)的方法。可通过 Navigator.credentials 获得该接口。

    属性

    @@ -15,9 +15,9 @@

    事件

    None.

    -

     

    +

    -

    返回一个带有处理值  Credential(若它能够使用提供的选项创建的话)的 Promise ,或返回  null(若不能创建 Credential)。在特殊情况下,返回的 Promise 对象可能 reject。

    +

    返回一个带有处理值 Credential(若它能够使用提供的选项创建的话)的 Promise ,或返回 null(若不能创建 Credential)。在特殊情况下,返回的 Promise 对象可能 reject。

    方法

    @@ -25,11 +25,11 @@

    方法

    {{domxref("CredentialsContainer.create()")}}
    Returns a {{jsxref("Promise")}} that resolves with a new {{domxref("Credential")}} instance based on the provided options, or null of no Credential object can be created.
    {{domxref("CredentialsContainer.get()")}}
    -
    Returns a {{jsxref("Promise")}} that resolves with the {{domxref("Credential")}} instance that matches the provided parameters.
    +
    Returns a {{jsxref("Promise")}} that resolves with the {{domxref("Credential")}} instance that matches the provided parameters.
    {{domxref("CredentialsContainer.preventSilentAccess()")}}
    -
    Sets a flag that specifies whether automatic log in is allowed for future visits to the current origin, then returns an empty {{jsxref("Promise")}}. For example, you might call this, after a user signs out of a website to ensure that he/she isn't automatically signed in on the next site visit. Earlier versions of the spec called this method requireUserMediation(). See Browser compatibility for support details.
    +
    Sets a flag that specifies whether automatic log in is allowed for future visits to the current origin, then returns an empty {{jsxref("Promise")}}. For example, you might call this, after a user signs out of a website to ensure that he/she isn't automatically signed in on the next site visit. Earlier versions of the spec called this method requireUserMediation(). See Browser compatibility for support details.
    {{domxref("CredentialsContainer.store()")}}
    -
    Stores a set of credentials for a user, inside a provided {{domxref("Credential")}} instance and returns that instance in a {{jsxref("Promise")}}.
    +
    Stores a set of credentials for a user, inside a provided {{domxref("Credential")}} instance and returns that instance in a {{jsxref("Promise")}}.

    示例

    diff --git a/files/zh-cn/web/api/crossoriginisolated/index.html b/files/zh-cn/web/api/crossoriginisolated/index.html index 85ee4670ef1735..2df67174bee70f 100644 --- a/files/zh-cn/web/api/crossoriginisolated/index.html +++ b/files/zh-cn/web/api/crossoriginisolated/index.html @@ -6,7 +6,7 @@ ---
    {{APIRef()}}{{SeeCompatTable}}
    -

    crossOriginIsolated 是 WindowOrWorkerGlobalScope 的一个只读属性,返回一个布尔值,该值指示是否可以通过 {{domxref("Window.postMessage()")}} 调用发送 {{jsxref("SharedArrayBuffer")}}。

    +

    crossOriginIsolatedWindowOrWorkerGlobalScope 的一个只读属性,返回一个布尔值,该值指示是否可以通过 {{domxref("Window.postMessage()")}} 调用发送 {{jsxref("SharedArrayBuffer")}}。

    该值取决于响应中存在的{{httpheader("Cross-Origin-Opener-Policy")}} 和{{httpheader("Cross-Origin-Embedder-Policy")}} 头。

    diff --git a/files/zh-cn/web/api/crypto/getrandomvalues/index.html b/files/zh-cn/web/api/crypto/getrandomvalues/index.html index 64736a110afc12..c9f20a9774799b 100644 --- a/files/zh-cn/web/api/crypto/getrandomvalues/index.html +++ b/files/zh-cn/web/api/crypto/getrandomvalues/index.html @@ -13,7 +13,7 @@ ---

    {{APIRef("Web Crypto API")}}

    -

    Crypto.getRandomValues() 方法让你可以获取符合密码学要求的安全的随机值。传入参数的数组被随机值填充(在加密意义上的随机)。

    +

    Crypto.getRandomValues() 方法让你可以获取符合密码学要求的安全的随机值。传入参数的数组被随机值填充(在加密意义上的随机)。

    为了确保足够的性能,不使用真正的随机数生成器,但是它们正在使用具有足够熵值伪随机数生成器。它所使用的 PRNG 的实现与其他不同,但适用于加密的用途。该实现还需要使用具有足够熵的种子,如系统级熵源。

    @@ -44,7 +44,7 @@

    例子

    console.log("Your lucky numbers:"); for (var i = 0; i < array.length; i++) { -    console.log(array[i]); + console.log(array[i]); }
    diff --git a/files/zh-cn/web/api/crypto_property/index.html b/files/zh-cn/web/api/crypto_property/index.html index 8e41cdf03855ff..3d8d5196fffab6 100644 --- a/files/zh-cn/web/api/crypto_property/index.html +++ b/files/zh-cn/web/api/crypto_property/index.html @@ -6,7 +6,7 @@ ---
    {{APIRef}}
    -

    Window.crypto 只读属性返回与全局对象关联的 {{domxref("Crypto")}}对象。此对象允许网页访问某些加密相关服务。

    +

    Window.crypto 只读属性返回与全局对象关联的 {{domxref("Crypto")}}对象。此对象允许网页访问某些加密相关服务。

    语法

    @@ -15,19 +15,19 @@

    语法

    范例

    -

    使用 {{domxref("Window.crypto")}} 来访问getRandomValues() 方法。

    +

    使用 {{domxref("Window.crypto")}} 来访问getRandomValues() 方法。

    JavaScript

    genRandomNumbers = function getRandomNumbers() {
    -  var array = new Uint32Array(10);
    -  window.crypto.getRandomValues(array);
    -
    -  var randText = document.getElementById("myRandText");
    -  randText.innerHTML = "The random numbers are: "
    -  for (var i = 0; i < array.length; i++) {
    -    randText.innerHTML += array[i] + " ";
    -  }
    +  var array = new Uint32Array(10);
    +  window.crypto.getRandomValues(array);
    +
    +  var randText = document.getElementById("myRandText");
    +  randText.innerHTML = "The random numbers are: "
    +  for (var i = 0; i < array.length; i++) {
    +    randText.innerHTML += array[i] + " ";
    +  }
     }
     
    diff --git a/files/zh-cn/web/api/cryptokey/index.html b/files/zh-cn/web/api/cryptokey/index.html index fdb251b377bf7d..814188888b09fa 100644 --- a/files/zh-cn/web/api/cryptokey/index.html +++ b/files/zh-cn/web/api/cryptokey/index.html @@ -5,9 +5,9 @@ ---

    {{APIRef("Web Crypto API")}}

    -

    CryptoKey 接口表示从特定的密钥算法导出的{{glossary("密钥")}}。

    +

    CryptoKey 接口表示从特定的密钥算法导出的{{glossary("密钥")}}。

    -

    一个 CryptoKey 对象可以使用 {{domxref("SubtleCrypto.generateKey()")}}, {{domxref("SubtleCrypto.deriveKey()")}} or {{domxref("SubtleCrypto.importKey()")}} 获得。

    +

    一个 CryptoKey 对象可以使用 {{domxref("SubtleCrypto.generateKey()")}}, {{domxref("SubtleCrypto.deriveKey()")}} or {{domxref("SubtleCrypto.importKey()")}} 获得。

    属性

    diff --git a/files/zh-cn/web/api/css/escape/index.html b/files/zh-cn/web/api/css/escape/index.html index bcc1b1f89534dd..20ef9c100afd8a 100644 --- a/files/zh-cn/web/api/css/escape/index.html +++ b/files/zh-cn/web/api/css/escape/index.html @@ -10,7 +10,7 @@ ---

    {{APIRef("CSSOM")}}{{SeeCompatTable}}

    -

     CSS.escape() 静态方法返回 {{domxref("DOMString")}} 包含作为参数传递的转义字符串,主要用作 CSS 选择器的一部分。

    +

    CSS.escape() 静态方法返回 {{domxref("DOMString")}} 包含作为参数传递的转义字符串,主要用作 CSS 选择器的一部分。

    语法

    diff --git a/files/zh-cn/web/api/css/index.html b/files/zh-cn/web/api/css/index.html index 408c2cf5d3eee1..c24a0cd0e58ea6 100644 --- a/files/zh-cn/web/api/css/index.html +++ b/files/zh-cn/web/api/css/index.html @@ -14,7 +14,7 @@

    属性

    静态属性

    -
    {{DOMxRef("CSS.paintWorklet")}} {{Experimental_Inline}}{{SecureContext_Inline}}
    +
    {{DOMxRef("CSS.paintWorklet")}} {{Experimental_Inline}}{{SecureContext_Inline}}
    针对所有与绘制相关的类,提供对负责它们的工作集的访问。
    @@ -34,7 +34,7 @@

    静态方法

    {{DOMxRef("CSS.escape()")}}
    可以用来转义一个大多用来当作 CSS 选择器一部分的字符串。
    {{DOMxRef("CSS.factory_functions", 'CSS factory functions')}}
    -
    可以用来返回一个 CSSUnitValue。它的值由传入的数值以及调用的 factory 方法名称组成。
    +
    可以用来返回一个 CSSUnitValue。它的值由传入的数值以及调用的 factory 方法名称组成。
    CSS.em(3) // CSSUnitValue {value: 3, unit: "em"}
    diff --git a/files/zh-cn/web/api/css_object_model/determining_the_dimensions_of_elements/index.html b/files/zh-cn/web/api/css_object_model/determining_the_dimensions_of_elements/index.html index af6bf73185e8c4..19494f6ce4e40d 100644 --- a/files/zh-cn/web/api/css_object_model/determining_the_dimensions_of_elements/index.html +++ b/files/zh-cn/web/api/css_object_model/determining_the_dimensions_of_elements/index.html @@ -13,7 +13,7 @@

    元素占用了多少空间?

    -

    如果你需要知道元素总共占用了多少空间,包括可视内容、滚动条(如果有的话)、内边距和边框的宽度,你会使用  offsetWidthoffsetHeight 属性, 大多数情况下,当元素没有什么形状上的变化时,他们与 getBoundingClientRect()的宽高一致。但是如果发生变化,offsetWidth 和 offsetHeight 将返回元素的布局宽高,而 getBoundingClientRect() 将返回实际渲染的宽高。例如:如果元素的宽 width:100px,变化 transform:scale(0.5),此时 getBoundingClientRect() 将返回宽 50,而 offsetWidth 将返回宽 100.

    +

    如果你需要知道元素总共占用了多少空间,包括可视内容、滚动条(如果有的话)、内边距和边框的宽度,你会使用 offsetWidthoffsetHeight 属性, 大多数情况下,当元素没有什么形状上的变化时,他们与 getBoundingClientRect()的宽高一致。但是如果发生变化,offsetWidth 和 offsetHeight 将返回元素的布局宽高,而 getBoundingClientRect() 将返回实际渲染的宽高。例如:如果元素的宽 width:100px,变化 transform:scale(0.5),此时 getBoundingClientRect() 将返回宽 50,而 offsetWidth 将返回宽 100.

    Image:Dimensions-offset.png

    @@ -25,7 +25,7 @@

    显示内容尺寸是多

    内容有多大?

    -

    如果你想要知道内容区域的实际大小,而不局限于可见区域的话,你会使用 scrollWidthscrollHeight属性。即使使用了滚动条仅有部分内容可见,这两个属性仍会返回元素的完整内容宽高

    +

    如果你想要知道内容区域的实际大小,而不局限于可见区域的话,你会使用 scrollWidthscrollHeight属性。即使使用了滚动条仅有部分内容可见,这两个属性仍会返回元素的完整内容宽高

    例如,一个 300x300 像素 的滚动盒子里放置了一个 600x400 像素的元素,scrollWidth 将会返回 600,scrooHeight 返回 400.

    diff --git a/files/zh-cn/web/api/css_object_model/index.html b/files/zh-cn/web/api/css_object_model/index.html index df22ea9902e595..cc88ef4cb632f8 100644 --- a/files/zh-cn/web/api/css_object_model/index.html +++ b/files/zh-cn/web/api/css_object_model/index.html @@ -9,7 +9,7 @@ - TopicStub translation_of: Web/API/CSS_Object_Model --- -

    CSS Object Model 是一组允许用 JavaScript 操纵 CSS 的 API。 它是继 DOM 和 HTML API 之后,又一个操纵 CSS 的接口,从而能够动态地读取和修改 CSS 样式。

    +

    CSS Object Model 是一组允许用 JavaScript 操纵 CSS 的 API。 它是继 DOM 和 HTML API 之后,又一个操纵 CSS 的接口,从而能够动态地读取和修改 CSS 样式。

    API 参考

    diff --git a/files/zh-cn/web/api/css_object_model/using_dynamic_styling_information/index.html b/files/zh-cn/web/api/css_object_model/using_dynamic_styling_information/index.html index 4e89cd0256da1b..bd35f94bd9347b 100644 --- a/files/zh-cn/web/api/css_object_model/using_dynamic_styling_information/index.html +++ b/files/zh-cn/web/api/css_object_model/using_dynamic_styling_information/index.html @@ -14,9 +14,9 @@

    在很多情况下,如果可能的话,通过 {{ domxref("element.className", "className") }} 属性来动态操作元素类名确实是最好的方式,因为所有的样式钩子的最终外观都可以在一个样式表中控制。这样写出的 JavaScript 代码也会变得更清晰,因为它不专注与样式相关的细节,而是专注于所创作或者操作的每一部分的整体语义,将精细的样式细节留给样式表。然而实际上也有以一些获取或者操作样式规则有用的情况(无论是对于正样式包还是的那个元素),将在下面进一步详细描述。同样应该注意,同操作单独元素的样式一样,当说到操作样式表的时候,并不是真的操作实际的物理文档,而仅仅是文档的内部表示。

    -

    基本样式对象公开了 {{domxref("Stylesheet")}} 和 {{domxref("CSSStylesheet")}} 接口。这些接口包括 insertRuleselectorText 以及 parentStyleSheet 等成员,用于获取和操作组成 CSS 样式表的各个规则。

    +

    基本样式对象公开了 {{domxref("Stylesheet")}} 和 {{domxref("CSSStylesheet")}} 接口。这些接口包括 insertRuleselectorText 以及 parentStyleSheet 等成员,用于获取和操作组成 CSS 样式表的各个规则。

    -

    要从 document 中获取 style 对象,可以使用 {{domxref("document.styleSheets")}} 属性,并使用索引来获取某个对象(例如, document.styleSheets[0] 是该文档中的第一个样式表)。

    +

    要从 document 中获取 style 对象,可以使用 {{domxref("document.styleSheets")}} 属性,并使用索引来获取某个对象(例如, document.styleSheets[0] 是该文档中的第一个样式表)。

    通过 CSSOM 修改样式表

    @@ -25,7 +25,7 @@

    通过 CSSOM 修改样式表

    <title>Modifying a stylesheet rule with CSSOM</title> <style type="text/css"> body { - background-color: red; + background-color: red; } </style> <script type="text/javascript"> @@ -40,13 +40,13 @@

    通过 CSSOM 修改样式表

    {{ EmbedLiveSample('Modify_a_stylesheet_rule') }}

    -

     DOM CSS Properties List 中给出了 DOM 中 style 属性的可用属性列表。

    +

    DOM CSS Properties List 中给出了 DOM 中 style 属性的可用属性列表。

    -

    若要使用 CSS 语法修改文档的样式,可以插入样式规则,或者插入{{HTMLElement("style")}} 标签,并将其 innerHTML 属性设置为期望的 CSS。

    +

    若要使用 CSS 语法修改文档的样式,可以插入样式规则,或者插入{{HTMLElement("style")}} 标签,并将其 innerHTML 属性设置为期望的 CSS。

    修改元素样式

    -

     元素的 {{domxref("HTMLElement.style", "style")}} 属性(见下面的 DOM 样式对象部分)也可以用于获取和设置元素的样式。然而,该属性只能返回通过内敛方式设置的样式属性(例如 <td style="background-color: lightblue"> 返回 "background-color:lightblue",或者直接针对哪个元素使用  element.style.propertyName, 即使样式表中还有该元素上的其他样式)。

    +

    元素的 {{domxref("HTMLElement.style", "style")}} 属性(见下面的 DOM 样式对象部分)也可以用于获取和设置元素的样式。然而,该属性只能返回通过内敛方式设置的样式属性(例如 <td style="background-color: lightblue"> 返回 "background-color:lightblue",或者直接针对哪个元素使用 element.style.propertyName, 即使样式表中还有该元素上的其他样式)。

    此外,当你在元素上设置某个属性的时候,你会覆盖并擦除掉别处为该元素的这个属性设置的值。以设置 border 属性为例,将覆盖掉在 <head> 部分或者外部样式表设置的该元素的 border 属性。然而这并不会影响元素的其他属性,例如 padding、margin 或 font 等。

    @@ -91,13 +91,13 @@

    修改元素样式

    {{ EmbedLiveSample('Modify_an_element_style') }}

    -

    document.defaultView 对象的 {{domxref("window.getComputedStyle", "getComputedStyle()")}} 返回某个元素的所有经过计算的样式。查看Example 6: getComputedStyle 示例章节了解更多使用该方法的信息。.

    +

    document.defaultView 对象的 {{domxref("window.getComputedStyle", "getComputedStyle()")}} 返回某个元素的所有经过计算的样式。查看Example 6: getComputedStyle 示例章节了解更多使用该方法的信息。.

    DOM 样式对象

    -

    style 对象表示了一个单独的样式声明。不像document.styleSheets 集合中每个单独的样式规则,样式规则是通过 document 对象或者应用改样式的元素来访问的。它表示特定元素的内联样式。

    +

    style 对象表示了一个单独的样式声明。不像document.styleSheets 集合中每个单独的样式规则,样式规则是通过 document 对象或者应用改样式的元素来访问的。它表示特定元素的内联样式。

    -

    比这两个属性更重要的是使用 style 对象来给某个元素设置单独的样式属性。

    +

    比这两个属性更重要的是使用 style 对象来给某个元素设置单独的样式属性。

    <!DOCTYPE html>
    @@ -130,7 +130,7 @@ 

    DOM 样式对象

    使用 setAttribute 方法

    -

    注意,你也可以通过获得元素的引用,然后使用它的 setAttribute 方法,指定 CSS 属性和值,来改变该元素的样式。

    +

    注意,你也可以通过获得元素的引用,然后使用它的 setAttribute 方法,指定 CSS 属性和值,来改变该元素的样式。

    var el = document.getElementById('some-element');
     el.setAttribute('style', 'background-color:darkblue;');
    @@ -138,4 +138,4 @@ 

    使用 setAttribute 方法但请注意,setAttribute 会移除该元素样式对象中已经定义的其他样式属性。如果上面的 some-element 有一个行内样式属性:style="font-size: 18px",其值将会因为使用了 setAttribute 方法而被移除。

    +

    但请注意,setAttribute 会移除该元素样式对象中已经定义的其他样式属性。如果上面的 some-element 有一个行内样式属性:style="font-size: 18px",其值将会因为使用了 setAttribute 方法而被移除。

    diff --git a/files/zh-cn/web/api/cssconditionrule/index.html b/files/zh-cn/web/api/cssconditionrule/index.html index 9e02a94464f02f..2c85d0833458a4 100644 --- a/files/zh-cn/web/api/cssconditionrule/index.html +++ b/files/zh-cn/web/api/cssconditionrule/index.html @@ -5,13 +5,13 @@ ---

    {{ APIRef("CSSOM") }}

    -

     

    +

    -

     

    +

    CSSConditionRule 对象表示单个条件 CSS 规则,由条件和语句块组成。继承至 {{domxref("CSSGroupingRule")}}.

    -

    从它派生的两个对象 : {{domxref("CSSMediaRule")}} and {{domxref("CSSSupportsRule")}}.

    +

    从它派生的两个对象 : {{domxref("CSSMediaRule")}} and {{domxref("CSSSupportsRule")}}.

    Syntax

    diff --git a/files/zh-cn/web/api/cssmathsum/index.html b/files/zh-cn/web/api/cssmathsum/index.html index c346ba6639fa5c..2f2a81012b6ffb 100644 --- a/files/zh-cn/web/api/cssmathsum/index.html +++ b/files/zh-cn/web/api/cssmathsum/index.html @@ -13,7 +13,7 @@ ---
    {{APIRef("CSS Typed Object Model API")}}{{SeeCompatTable}}
    -

     {{domxref('CSS Typed Object Model API','','',' ')}} 的  CSSMathSum 接口通过调用{{domxref('CSSNumericValue')}} 的 {{domxref('CSSNumericValue.add','add()')}}, {{domxref('CSSNumericValue.sub','sub()')}}, 或 {{domxref('CSSNumericValue.toSum','toSum()')}} 方法获得结果。

    +

    {{domxref('CSS Typed Object Model API','','',' ')}} 的 CSSMathSum 接口通过调用{{domxref('CSSNumericValue')}} 的 {{domxref('CSSNumericValue.add','add()')}}, {{domxref('CSSNumericValue.sub','sub()')}}, 或 {{domxref('CSSNumericValue.toSum','toSum()')}} 方法获得结果。

    diff --git a/files/zh-cn/web/api/csspagerule/index.html b/files/zh-cn/web/api/csspagerule/index.html index fa396a871da2e4..b20e8482969792 100644 --- a/files/zh-cn/web/api/csspagerule/index.html +++ b/files/zh-cn/web/api/csspagerule/index.html @@ -6,11 +6,11 @@ ---
    {{APIRef("CSSOM")}}
    -

    CSSPageRule  是代表一个 css 接口 {{cssxref("@page")}} 规则。它实现了 {{domxref("CSSRule")}} 类型值为 6 的接口 (CSSRule.PAGE_RULE).

    +

    CSSPageRule 是代表一个 css 接口 {{cssxref("@page")}} 规则。它实现了 {{domxref("CSSRule")}} 类型值为 6 的接口 (CSSRule.PAGE_RULE).

    语法

    -

    这个语法是使用 WebIDL 格式。

    +

    这个语法是使用 WebIDL 格式。

    interface CSSPageRule : CSSRule {
       attribute DOMString selectorText;
    @@ -20,7 +20,7 @@ 

    语法

    Properties

    -

     {{domxref("CSSRule")}}, CSSPageRule 也实现了此接口的属性。 它具有以下特定属性:

    +

    {{domxref("CSSRule")}}, CSSPageRule 也实现了此接口的属性。 它具有以下特定属性:

    {{domxref("CSSPageRule.selectorText")}}
    @@ -31,7 +31,7 @@

    Properties

    Methods

    -

    作为 {{domxref("CSSRule")}}, CSSPageRule 的 CSSPageRule 还实现了该接口的方法。 它没有具体方法。

    +

    作为 {{domxref("CSSRule")}}, CSSPageRule 的 CSSPageRule 还实现了该接口的方法。 它没有具体方法。

    Specifications

    diff --git a/files/zh-cn/web/api/cssrule/csstext/index.html b/files/zh-cn/web/api/cssrule/csstext/index.html index 78c4831dcf4de3..3b1e4dfaa00190 100644 --- a/files/zh-cn/web/api/cssrule/csstext/index.html +++ b/files/zh-cn/web/api/cssrule/csstext/index.html @@ -7,7 +7,7 @@
    {{ APIRef("CSSOM") }}
    -
     
    +
    概述
    diff --git a/files/zh-cn/web/api/cssrule/index.html b/files/zh-cn/web/api/cssrule/index.html index 91ad611628cf81..09e0fe4ac0a0d5 100644 --- a/files/zh-cn/web/api/cssrule/index.html +++ b/files/zh-cn/web/api/cssrule/index.html @@ -22,7 +22,7 @@

    所有 CSSRule 实例共有的属
    {{domxref("CSSRule.cssText")}}
    返回规则的文本表示。例如 "h1,h2 { font-size: 16pt }"
    {{domxref("CSSRule.parentRule")}} {{readonlyinline}}
    -
    返回包含规则,否则返回 null。例如:如果此规则是 {{cssxref("@media")}} 块中的样式规则,则其父规则将是该 {{domxref("CSSMediaRule")}}。
    +
    返回包含规则,否则返回 null。例如:如果此规则是 {{cssxref("@media")}} 块中的样式规则,则其父规则将是该 {{domxref("CSSMediaRule")}}。
    {{domxref("CSSRule.parentStyleSheet")}} {{readonlyinline}}
    返回包含此规则的样式表的 {{domxref("CSSStyleSheet")}} 对象。
    {{domxref("CSSRule.type")}} {{readonlyinline}}
    @@ -153,7 +153,7 @@

    类型常量

    语法

    -

    使用 WebIDL 语法格式进行描述。

    +

    使用 WebIDL 语法格式进行描述。

    interface CSSRule {
         const unsigned short STYLE_RULE = 1;
    diff --git a/files/zh-cn/web/api/cssrule/parentstylesheet/index.html b/files/zh-cn/web/api/cssrule/parentstylesheet/index.html
    index b62b75239ee403..fda100176f5287 100644
    --- a/files/zh-cn/web/api/cssrule/parentstylesheet/index.html
    +++ b/files/zh-cn/web/api/cssrule/parentstylesheet/index.html
    @@ -22,7 +22,7 @@ 

    参数

    例子

    -
    if ( bgRule.parentStyleSheet != mySheet ) {
    +
    if ( bgRule.parentStyleSheet != mySheet ) {
        // alien style rule!
     }
     
    diff --git a/files/zh-cn/web/api/cssstyledeclaration/getpropertycssvalue/index.html b/files/zh-cn/web/api/cssstyledeclaration/getpropertycssvalue/index.html index 41151f1042356a..71ab9bd70c6dbd 100644 --- a/files/zh-cn/web/api/cssstyledeclaration/getpropertycssvalue/index.html +++ b/files/zh-cn/web/api/cssstyledeclaration/getpropertycssvalue/index.html @@ -11,7 +11,7 @@

    CSSStyleDeclaration.getPropertyCSSValue() 方法接口返回一个{{domxref('CSSValue')}} 包含一个属性的 CSS 值。请注意,如果属性名称是速记属性,则返回 null。

    -

    现在你应该使用 {{domxref("CSSStyleDeclaration.getPropertyValue()")}}。

    +

    现在你应该使用 {{domxref("CSSStyleDeclaration.getPropertyValue()")}}。

    语法

    @@ -20,18 +20,18 @@

    语法

    参数

      -
    • property is a {{domxref('DOMString')}} representing the property name to be retrieved.
    • +
    • property is a {{domxref('DOMString')}} representing the property name to be retrieved.

    返回值

      -
    • value is a {{domxref('CSSValue')}} containing the CSS value for a property. If none exists, returns null.
    • +
    • value is a {{domxref('CSSValue')}} containing the CSS value for a property. If none exists, returns null.

    示例

    -

    The following JavaScript code gets an object containing the computed RGB values of the color CSS property:

    +

    The following JavaScript code gets an object containing the computed RGB values of the color CSS property:

    var style = window.getComputedStyle(elem, null);
     var rgbObj = style.getPropertyCSSValue('color').getRGBColorValue();
    diff --git a/files/zh-cn/web/api/cssstyledeclaration/getpropertypriority/index.html b/files/zh-cn/web/api/cssstyledeclaration/getpropertypriority/index.html
    index 22753d3a0fa760..bca3775ccda189 100644
    --- a/files/zh-cn/web/api/cssstyledeclaration/getpropertypriority/index.html
    +++ b/files/zh-cn/web/api/cssstyledeclaration/getpropertypriority/index.html
    @@ -50,12 +50,12 @@ 

    标准

    {{SpecName('CSSOM', '#dom-cssstyledeclaration-getpropertypriority', 'CSSStyleDeclaration.getPropertyPriority()')}} {{Spec2('CSSOM')}} -   + {{SpecName('DOM2 Style', 'css.html#CSS-CSSStyleDeclaration', 'CSSStyleDeclaration')}} {{Spec2('DOM2 Style')}} -   + diff --git a/files/zh-cn/web/api/cssstyledeclaration/getpropertyvalue/index.html b/files/zh-cn/web/api/cssstyledeclaration/getpropertyvalue/index.html index 468b9119aa6b92..dcc44f7afc2a5e 100644 --- a/files/zh-cn/web/api/cssstyledeclaration/getpropertyvalue/index.html +++ b/files/zh-cn/web/api/cssstyledeclaration/getpropertyvalue/index.html @@ -14,7 +14,7 @@ ---

    {{ APIRef("CSSOM") }}

    -

    CSSStyleDeclaration.getPropertyValue() 接口返回一个 {{domxref('DOMString')}} ,其中包含请求的 CSS 属性的值。

    +

    CSSStyleDeclaration.getPropertyValue() 接口返回一个 {{domxref('DOMString')}} ,其中包含请求的 CSS 属性的值。

    语法

    @@ -23,18 +23,18 @@

    语法

    参数

      -
    • property 是一个 {{domxref('DOMString')}},是需要查询的 CSS 属性名称。
    • +
    • property 是一个 {{domxref('DOMString')}},是需要查询的 CSS 属性名称。

    返回值

      -
    • value 是 {{domxref('DOMString')}} ,包含查找属性的值。若对应属性没有设置,则返回空字符串。
    • +
    • value 是 {{domxref('DOMString')}} ,包含查找属性的值。若对应属性没有设置,则返回空字符串。

    示例

    -

    下述示例使用一个 CSS 选择器规则查询对应的margin 属性的值:

    +

    下述示例使用一个 CSS 选择器规则查询对应的margin 属性的值:

    var declaration = document.styleSheets[0].cssRules[0].style;
     var value = declaration.getPropertyValue('margin'); // "1px 2px"
    diff --git a/files/zh-cn/web/api/cssstyledeclaration/index.html b/files/zh-cn/web/api/cssstyledeclaration/index.html
    index 414f37fc133f8f..2bf091942d9e20 100644
    --- a/files/zh-cn/web/api/cssstyledeclaration/index.html
    +++ b/files/zh-cn/web/api/cssstyledeclaration/index.html
    @@ -46,7 +46,7 @@ 

    方法

    {{domxref("CSSStyleDeclaration.setProperty()")}}
    在 CSS 声明块中修改现有属性或设置新属性。
    {{domxref("CSSStyleDeclaration.getPropertyCSSValue()")}} {{Deprecated_Inline}}
    -
    仅在火狐浏览器中支持 getComputedStyle. 返回 {{ domxref("CSSPrimitiveValue") }} or null for shorthand properties.
    +
    仅在火狐浏览器中支持 getComputedStyle. 返回 {{ domxref("CSSPrimitiveValue") }} or null for shorthand properties.

    范例

    diff --git a/files/zh-cn/web/api/cssstyledeclaration/item/index.html b/files/zh-cn/web/api/cssstyledeclaration/item/index.html index 951450f8049c77..76457101f6d264 100644 --- a/files/zh-cn/web/api/cssstyledeclaration/item/index.html +++ b/files/zh-cn/web/api/cssstyledeclaration/item/index.html @@ -5,7 +5,7 @@ ---

    {{ APIRef("CSSOM") }}

    -

    CSSStyleDeclaration.item() 通过下标从 {{domxref('CSSStyleDeclaration')}} 返回一个 CSS 属性值。只要传入参数这个方法就不会抛出异常; 当传入的下标越界时会返回空字符串,当未传入参数时会抛出一个 TypeError 。

    +

    CSSStyleDeclaration.item() 通过下标从 {{domxref('CSSStyleDeclaration')}} 返回一个 CSS 属性值。只要传入参数这个方法就不会抛出异常; 当传入的下标越界时会返回空字符串,当未传入参数时会抛出一个 TypeError

    语法

    @@ -21,7 +21,7 @@

    参数

    Return value

      -
    • propertyName 是一个 {{domxref('DOMString')}} ,是在特定索引位置下的属性的名称。
    • +
    • propertyName 是一个 {{domxref('DOMString')}} ,是在特定索引位置下的属性的名称。

    使用以下的 javascript 语法可以通过索引从 style 的节点列表中获取对应值:

    @@ -48,12 +48,12 @@

    规范

    {{SpecName('CSSOM', '#dom-cssstyledeclaration-item', 'CSSStyleDeclaration.item()')}} {{Spec2('CSSOM')}} -   + {{SpecName('DOM2 Style', 'css.html#CSS-CSSStyleDeclaration', 'CSSStyleDeclaration')}} {{Spec2('DOM2 Style')}} -   + diff --git a/files/zh-cn/web/api/cssstyledeclaration/removeproperty/index.html b/files/zh-cn/web/api/cssstyledeclaration/removeproperty/index.html index 4732a0558e0b2b..a81547d616b5db 100644 --- a/files/zh-cn/web/api/cssstyledeclaration/removeproperty/index.html +++ b/files/zh-cn/web/api/cssstyledeclaration/removeproperty/index.html @@ -10,7 +10,7 @@ ---

    {{ APIRef("CSSOM") }}

    -

    CSSStyleDeclaration.removeProperty() 方法移除 style 对象的一个属性。

    +

    CSSStyleDeclaration.removeProperty() 方法移除 style 对象的一个属性。

    语法

    @@ -19,7 +19,7 @@

    语法

    参数

      -
    • property 是一个 {{domxref('DOMString')}} ,代表要移除的属性名。注意由多个单词组成的属性要用连字符连接各个单词,不接收驼峰命名法的形式。
    • +
    • property 是一个 {{domxref('DOMString')}} ,代表要移除的属性名。注意由多个单词组成的属性要用连字符连接各个单词,不接收驼峰命名法的形式。

    返回值

    @@ -31,12 +31,12 @@

    返回值

    异常

      -
    • {{domxref('DOMException')}} NO_MODIFICATION_ALLOWED_ERR: 如果属性或声明块为只读,抛出此异常。
    • +
    • {{domxref('DOMException')}} NO_MODIFICATION_ALLOWED_ERR: 如果属性或声明块为只读,抛出此异常。

    例子

    -

    下面的 JavaScript 代码从样式表里移除了 margin 属性:

    +

    下面的 JavaScript 代码从样式表里移除了 margin 属性:

    var declaration = document.styleSheets[0].rules[0].style;
     var oldValue = declaration.removeProperty('margin');
    @@ -56,12 +56,12 @@ 

    Specifications

    {{SpecName('CSSOM', '#dom-cssstyledeclaration-removeproperty', 'CSSStyleDeclaration.removeProperty()')}} {{Spec2('CSSOM')}} -   + {{SpecName('DOM2 Style', 'css.html#CSS-CSSStyleDeclaration', 'CSSStyleDeclaration')}} {{Spec2('DOM2 Style')}} -   + diff --git a/files/zh-cn/web/api/cssstyledeclaration/setproperty/index.html b/files/zh-cn/web/api/cssstyledeclaration/setproperty/index.html index eaa9eba8f430df..e977478529c22b 100644 --- a/files/zh-cn/web/api/cssstyledeclaration/setproperty/index.html +++ b/files/zh-cn/web/api/cssstyledeclaration/setproperty/index.html @@ -5,7 +5,7 @@ ---

    {{ APIRef("CSSOM") }}

    -

    CSSStyleDeclaration.setProperty() 方法接口为一个声明了 CSS 样式的对象设置一个新的值 。

    +

    CSSStyleDeclaration.setProperty() 方法接口为一个声明了 CSS 样式的对象设置一个新的值 。

    语法

    @@ -14,13 +14,13 @@

    语法

    参数

      -
    • propertyName 是一个 {{domxref('DOMString')}} ,代表被更改的 CSS 属性。
    • -
    • value{{optional_inline}} 是一个 {{domxref('DOMString')}} ,含有新的属性值。如果没有指定,则当作空字符串。 +
    • propertyName 是一个 {{domxref('DOMString')}} ,代表被更改的 CSS 属性。
    • +
    • value{{optional_inline}} 是一个 {{domxref('DOMString')}} ,含有新的属性值。如果没有指定,则当作空字符串。
        -
      • 注意: value 不能包含 "!important" --那个应该使用 priority 参数。
      • +
      • 注意: value 不能包含 "!important" --那个应该使用 priority 参数。
    • -
    • priority{{optional_inline}} 是一个 {{domxref('DOMString')}} 允许设置 "important" CSS 优先级。如果没有指定,则当作空字符串。
    • +
    • priority{{optional_inline}} 是一个 {{domxref('DOMString')}} 允许设置 "important" CSS 优先级。如果没有指定,则当作空字符串。

    返回值

    @@ -41,7 +41,7 @@

    异常

    示例

    -

    下面的 Javascript 代码为一个选中元素样式的 margin 属性设置一个新的值:

    +

    下面的 Javascript 代码为一个选中元素样式的 margin 属性设置一个新的值:

    var declaration = document.styleSheets[0].rules[0].style;
     declaration.setProperty('margin', '1px 2px');
    @@ -49,7 +49,7 @@ 

    示例

    // declaration.margin = '1px 2px';
    -

      说明

    +

    说明

    @@ -63,12 +63,12 @@

      说明

    - + - +
    {{SpecName('CSSOM', '#dom-cssstyledeclaration-setproperty', 'CSSStyleDeclaration.setProperty()')}} 工作草案 
    {{SpecName('DOM2 Style', 'css.html#CSS-CSSStyleDeclaration', 'CSSStyleDeclaration')}} 被废弃 
    diff --git a/files/zh-cn/web/api/cssstylerule/selectortext/index.html b/files/zh-cn/web/api/cssstylerule/selectortext/index.html index 7a4b7668d1b841..6863ba61a62b2b 100644 --- a/files/zh-cn/web/api/cssstylerule/selectortext/index.html +++ b/files/zh-cn/web/api/cssstylerule/selectortext/index.html @@ -7,7 +7,7 @@

    概述

    -

    CSSRule.selectorText 属性返回 CSS 规则的选择符文本,只读。动态设置 CSS 规则,请看 Using dynamic styling information.

    +

    CSSRule.selectorText 属性返回 CSS 规则的选择符文本,只读。动态设置 CSS 规则,请看 Using dynamic styling information.

    语法

    diff --git a/files/zh-cn/web/api/cssstylerule/style/index.html b/files/zh-cn/web/api/cssstylerule/style/index.html index 19dcba2c16d5c4..d1f0b80bab8dd8 100644 --- a/files/zh-cn/web/api/cssstylerule/style/index.html +++ b/files/zh-cn/web/api/cssstylerule/style/index.html @@ -7,7 +7,7 @@

    概述

    -

    返回 一个 {{ domxref("CSSStyleDeclaration") }}接口对象,它代表了{{ DOMXref("CSSRule") }}的 declaration block

    +

    返回 一个 {{ domxref("CSSStyleDeclaration") }}接口对象,它代表了{{ DOMXref("CSSRule") }}的 declaration block

    语法

    diff --git a/files/zh-cn/web/api/cssstylesheet/index.html b/files/zh-cn/web/api/cssstylesheet/index.html index ad73dcdefbc166..33335316852948 100644 --- a/files/zh-cn/web/api/cssstylesheet/index.html +++ b/files/zh-cn/web/api/cssstylesheet/index.html @@ -14,7 +14,7 @@ ---

    {{ APIRef("CSSOM") }}

    -

    CSSStyleSheet 接口代表一个 CSS 样式表,并允许检查和编辑样式表中的规则列表。它从父类型 {{domxref("StyleSheet")}} 继承属性和方法。

    +

    CSSStyleSheet 接口代表一个 CSS 样式表,并允许检查和编辑样式表中的规则列表。它从父类型 {{domxref("StyleSheet")}} 继承属性和方法。

    一个 CSS 样式表包含了一组表示规则的 {{domxref("CSSRule")}} 对象。每条 CSS 规则可以通过与之相关联的对象进行操作,这些规则被包含在 {{domxref("CSSRuleList")}} 内,可以通过样式表的 {{domxref("CSSStyleSheet.cssRules", "cssRules")}} 属性获取。

    @@ -25,13 +25,13 @@ }
    -

    另一条规则可能是一条“@”规则(at-rule),例如  {{cssxref("@import")}} 或 {{cssxref("@media")}} 等等。

    +

    另一条规则可能是一条“@”规则(at-rule),例如 {{cssxref("@import")}} 或 {{cssxref("@media")}} 等等。

    -

    说明部分中查看 CSSStyleSheet 对象的多种获取方式。

    +

    说明部分中查看 CSSStyleSheet 对象的多种获取方式。

    属性

    -

    继承自 {{domxref("StyleSheet")}}。

    +

    继承自 {{domxref("StyleSheet")}}。

    {{domxref("CSSStyleSheet.cssRules", "cssRules")}} {{ReadOnlyInline}}
    @@ -42,15 +42,15 @@

    属性

    styleSheet.cssRules[i] // where i = 0..cssRules.length-1
    -

    使用CSSStyleSheet 的 {{domxref("CSSStyleSheet.insertRule", "insertRule()")}} 和 {{domxref("CSSStyleSheet.deleteRule", "deleteRule()")}} 方法以在 cssRules 中添加或移除规则。

    +

    使用CSSStyleSheet 的 {{domxref("CSSStyleSheet.insertRule", "insertRule()")}} 和 {{domxref("CSSStyleSheet.deleteRule", "deleteRule()")}} 方法以在 cssRules 中添加或移除规则。

    {{domxref("CSSStyleSheet.ownerRule", "ownerRule")}} {{ReadOnlyInline}}
    -
    如果一个样式表示通过{{cssxref("@import")}} 规则引入文档,那么 ownerRule 属性会返回相应的{{domxref("CSSImportRule")}}对象,否则返回 null
    +
    如果一个样式表示通过{{cssxref("@import")}} 规则引入文档,那么 ownerRule 属性会返回相应的{{domxref("CSSImportRule")}}对象,否则返回 null

    方法

    -

    继承自 {{domxref("StyleSheet")}}。

    +

    继承自 {{domxref("StyleSheet")}}。

    {{domxref("CSSStyleSheet.deleteRule", "deleteRule()")}}
    @@ -65,7 +65,7 @@

    遗留属性

    {{domxref("CSSStyleSheet.rules", "rules")}} {{ReadOnlyInline}}
    -
    rules 属性的功能与标准的{{domxref("CSSStyleSheet.cssRules", "cssRules")}}属性相同;它返回一个实时的 {{domxref("CSSRuleList")}}, 其中包含样式表中所有规则的一个最新列表。
    +
    rules 属性的功能与标准的{{domxref("CSSStyleSheet.cssRules", "cssRules")}}属性相同;它返回一个实时的 {{domxref("CSSRuleList")}}, 其中包含样式表中所有规则的一个最新列表。

    遗留方法

    @@ -87,9 +87,9 @@

    说明

    在一些浏览器中,如果一个样式表加载自不同的域,访问 cssRules 属性时会抛出 SecurityError

    -

    一个样式表最多与一个{{domxref("Document")}}链接,即所应用的那个{{domxref("Document")}}(除非{{domxref("StyleSheet.disabled", "disabled")}})。一个特定文档的 CSSStyleSheet 对象列表可用 {{domxref("document.styleSheets")}} 属性获取。一个特定的样式表也可以通过其所在对象(Node 或 CSSImportRule)获取,如果有的话。

    +

    一个样式表最多与一个{{domxref("Document")}}链接,即所应用的那个{{domxref("Document")}}(除非{{domxref("StyleSheet.disabled", "disabled")}})。一个特定文档的 CSSStyleSheet 对象列表可用 {{domxref("document.styleSheets")}} 属性获取。一个特定的样式表也可以通过其所在对象(NodeCSSImportRule)获取,如果有的话。

    -

    在文档的样式表加载时,一个 CSSStyleSheet 对象由浏览器自动创建并插入至文档的{{domxref("Document.styleSheets")}}列表中。由于样式表列表不能直接修改,我们没有什么有效的手段取手动创建一个新的 CSSStyleSheet 对象(不过Constructable Stylesheet Objects很快会来到 web 平台,而且 Blink 早已支持)。需要创建新的样式表就直接在文档中插入{{HTMLElement("style")}} 或 {{HTMLElement("link")}} 元素吧。

    +

    在文档的样式表加载时,一个 CSSStyleSheet 对象由浏览器自动创建并插入至文档的{{domxref("Document.styleSheets")}}列表中。由于样式表列表不能直接修改,我们没有什么有效的手段取手动创建一个新的 CSSStyleSheet 对象(不过Constructable Stylesheet Objects很快会来到 web 平台,而且 Blink 早已支持)。需要创建新的样式表就直接在文档中插入{{HTMLElement("style")}} 或 {{HTMLElement("link")}} 元素吧。

    以下是将样式表链接到文档的一些方式(可能不完整):

    @@ -98,7 +98,7 @@

    说明

    样式表与文档链接的原因 是否出现在document.
    - styleSheets
     列表中 + styleSheets 列表中 获取样式表对象所在的元素/规则 所在对象的接口 从所在对象获取 CSSStyleSheet 对象 diff --git a/files/zh-cn/web/api/cssstylesheet/insertrule/index.html b/files/zh-cn/web/api/cssstylesheet/insertrule/index.html index bb10a1295f3616..84b510edd99124 100644 --- a/files/zh-cn/web/api/cssstylesheet/insertrule/index.html +++ b/files/zh-cn/web/api/cssstylesheet/insertrule/index.html @@ -11,10 +11,10 @@

    {{ APIRef("CSSOM") }}

    -

    CSSStyleSheet.insertRule() 方法用来给当前样式表插入新的样式规则(CSS rule),并且包含一些限制

    +

    CSSStyleSheet.insertRule() 方法用来给当前样式表插入新的样式规则(CSS rule),并且包含一些限制

    -

    注意:尽管 insertRule() 是 {{domxref("CSSStyleSheet")}} 的一个方法,但它实际插入的地方是 {{domxref("CSSStyleSheet", "", "", "1")}}.cssRules 的内部 {{domxref("CSSRuleList")}}。

    +

    注意:尽管 insertRule() 是 {{domxref("CSSStyleSheet")}} 的一个方法,但它实际插入的地方是 {{domxref("CSSStyleSheet", "", "", "1")}}.cssRules 的内部 {{domxref("CSSRuleList")}}。

    语法

    @@ -26,15 +26,15 @@

    参数

    rule
    -

    一个包含了将要插入的规则的 {{domxref("DOMString")}}。规则字符串必须包含的内容取决于它的类型:

    +

    一个包含了将要插入的规则的 {{domxref("DOMString")}}。规则字符串必须包含的内容取决于它的类型:

      -
    • rule-sets 类型(普通带有选择器的规则)需要选择器和样式声明;
    • -
    • at-rules 类型(以 @ 开头的规则,如 @import, @media 等)需要 at-identifier 和规则内容。
    • +
    • rule-sets 类型(普通带有选择器的规则)需要选择器和样式声明;
    • +
    • at-rules 类型(以 @ 开头的规则,如 @import, @media 等)需要 at-identifier 和规则内容。
    -
    index {{optional_inline}}
    -
    一个小于或等于 stylesheet.cssRules.length 的正整数,表示新插入的规则在{{domxref("CSSStyleSheet", "", "", "1")}}.cssRules 中的位置。默认值是 0。(在过去的实现中,这个参数是必需的,详情参见浏览器兼容性。)
    +
    index {{optional_inline}}
    +
    一个小于或等于 stylesheet.cssRules.length 的正整数,表示新插入的规则在{{domxref("CSSStyleSheet", "", "", "1")}}.cssRules 中的位置。默认值是 0。(在过去的实现中,这个参数是必需的,详情参见浏览器兼容性。)

    返回值

    @@ -46,18 +46,18 @@

    限制

    CSS 中存在一些直观和不是太直观能感受到的限制规则影响着某些样式规则能否被插入。违反这些规则可能会导致一些 DOM 异常({{domxref("DOMException")}})。

      -
    • 如果 index > {{domxref("CSSRuleList", "", "", "1")}}.length,该方法会中止并返回一个 IndexSizeError 错误;
    • -
    • 如果 rule 由于一些 CSS 约束而不能被插入到 index 0,该方法会中止并返回一个 HierarchyRequestError 错误;
    • -
    • 如果 rule 参数中包含超过一条样式规则,该方法会中止并返回一个 SyntaxError
    • -
    • 如果尝试在一条普通规则后插入一条 {{cssxref("@import")}} 这种类型的规则,该方法会中止并返回一个 HierarchyRequestError 错误;
    • -
    • 如果 rule 是 {{cssxref("@namespace")}} 并且规则列表中有另外的 @import 和/或 @namespace 规则,该方法中止并返回一个 InvalidStateError 错误;
    • +
    • 如果 index > {{domxref("CSSRuleList", "", "", "1")}}.length,该方法会中止并返回一个 IndexSizeError 错误;
    • +
    • 如果 rule 由于一些 CSS 约束而不能被插入到 index 0,该方法会中止并返回一个 HierarchyRequestError 错误;
    • +
    • 如果 rule 参数中包含超过一条样式规则,该方法会中止并返回一个 SyntaxError
    • +
    • 如果尝试在一条普通规则后插入一条 {{cssxref("@import")}} 这种类型的规则,该方法会中止并返回一个 HierarchyRequestError 错误;
    • +
    • 如果 rule 是 {{cssxref("@namespace")}} 并且规则列表中有另外的 @import 和/或 @namespace 规则,该方法中止并返回一个 InvalidStateError 错误;

    示例

    在样式表顶部插入新的规则

    -

    下面的代码片段将在样式表 myStyle 的顶部插入一条新规则:

    +

    下面的代码片段将在样式表 myStyle 的顶部插入一条新规则:

     myStyle.insertRule("#blanc { color: white }", 0);
     
    @@ -65,11 +65,11 @@

    在样式表顶部插入新的规

    实现一个添加样式表规则的函数

    /**
    - * 在文档中添加一条样式表规则(这可能是动态改变 class 名的更好的实现方法,
    - * 使得 style 样式内容可以保留在真正的样式表中,以斌面添加额外的元素到 DOM 中)。
    - * 注意这里有必要声明一个数组,因为 ECMAScript 不保证对象按预想的顺序遍历,
    + * 在文档中添加一条样式表规则(这可能是动态改变 class 名的更好的实现方法,
    + * 使得 style 样式内容可以保留在真正的样式表中,以斌面添加额外的元素到 DOM 中)。
    + * 注意这里有必要声明一个数组,因为 ECMAScript 不保证对象按预想的顺序遍历,
      * 并且 CSS 也是依赖于顺序的。
    - * 类型为数组的参数 decls 接受一个 JSON 编译的数组。
    + * 类型为数组的参数 decls 接受一个 JSON 编译的数组。
      * @example
     addStylesheetRules([
       ['h2', // 还接受第二个参数作为数组中的数组
    @@ -110,7 +110,7 @@ 

    实现一个添加样式表规则的函数

    兼容补丁

    -

    以下补丁将会在 IE 5-8 中纠正提供给 insertRule() 的参数,使其标准化。to standardize them in Internet Explorer 5–8. 它通过一个函数对 insertRule() 进行补充,使得在参数传递给原生的 insertRule() 函数之前将其中的选择器从规则中分离出来。

    +

    以下补丁将会在 IE 5-8 中纠正提供给 insertRule() 的参数,使其标准化。to standardize them in Internet Explorer 5–8. 它通过一个函数对 insertRule() 进行补充,使得在参数传递给原生的 insertRule() 函数之前将其中的选择器从规则中分离出来。

    (function(Sheet_proto){
       var originalInsertRule = Sheet_proto.insertRule;
    @@ -165,9 +165,9 @@ 

    浏览器兼容性

    传统浏览器支持

    -

    为了支持 Internet Explorer 8 和更早版本,请使用: addRule(selector, rule [, index]);。例如:addRule('pre', 'font: 14px verdana'); // add rule at end

    +

    为了支持 Internet Explorer 8 和更早版本,请使用: addRule(selector, rule [, index]);。例如:addRule('pre', 'font: 14px verdana'); // add rule at end

    -

    另外注意非标准的 removeRule() 和 .rules 方法分别用 {{domxref("CSSStyleSheet.deleteRule","deleteRule()")}} 和{{domxref("CSSStyleSheet",".cssRules")}} 代替。

    +

    另外注意非标准的 removeRule().rules 方法分别用 {{domxref("CSSStyleSheet.deleteRule","deleteRule()")}} 和{{domxref("CSSStyleSheet",".cssRules")}} 代替。

    相关链接

    diff --git a/files/zh-cn/web/api/csssupportsrule/index.html b/files/zh-cn/web/api/csssupportsrule/index.html index 29cc08a191f445..7673444d805abb 100644 --- a/files/zh-cn/web/api/csssupportsrule/index.html +++ b/files/zh-cn/web/api/csssupportsrule/index.html @@ -17,7 +17,7 @@

    句法

    性能

    -

    作为{{domxref("CSSConditionRule")}} 因此一个 {{domxref("CSSRule 指定规则")}} and 和一{{domxref("CSSGroupingRule")}}, CSSSupportsRule 还实现了,这些接口的属性。它没有特定的属性

    +

    作为{{domxref("CSSConditionRule")}} 因此一个 {{domxref("CSSRule 指定规则")}} and 和一{{domxref("CSSGroupingRule")}}, CSSSupportsRule 还实现了,这些接口的属性。它没有特定的属性

    方法

    diff --git a/files/zh-cn/web/api/cssvaluelist/index.html b/files/zh-cn/web/api/cssvaluelist/index.html index ba94f210d0d46a..8a46e7ae915a55 100644 --- a/files/zh-cn/web/api/cssvaluelist/index.html +++ b/files/zh-cn/web/api/cssvaluelist/index.html @@ -24,7 +24,7 @@

    属性

    从它的父接口 {{domxref("CSSValue")}} 继承属性。

    -
    {{domxref("CSSValueList.length")}} {{readonlyInline}}
    +
    {{domxref("CSSValueList.length")}} {{readonlyInline}}
    一个 unsigned long 数值,表示此列表中 CSSValues 的个数。
    diff --git a/files/zh-cn/web/api/customelementregistry/define/index.html b/files/zh-cn/web/api/customelementregistry/define/index.html index 23d00d15b150c0..e592ab9dbe69bf 100644 --- a/files/zh-cn/web/api/customelementregistry/define/index.html +++ b/files/zh-cn/web/api/customelementregistry/define/index.html @@ -47,7 +47,7 @@

    示例

    自主定制元素

    -

    以下代码取自我们的 popup-info-box-web-component 示例 (see it live also)。

    +

    以下代码取自我们的 popup-info-box-web-component 示例 (see it live also)。

    // Create a class for the element
     class PopUpInfo extends HTMLElement {
    @@ -135,7 +135,7 @@ 

    自主定制元素

    自定义内置元素

    -

    以下代码取自我们的 word-count-web-component 实例 (查看实例效果).

    +

    以下代码取自我们的 word-count-web-component 实例 (查看实例效果).

    // Create a class for the element
     class WordCount extends HTMLParagraphElement {
    diff --git a/files/zh-cn/web/api/customelementregistry/get/index.html b/files/zh-cn/web/api/customelementregistry/get/index.html
    index 2d0e6f4e5716e0..e58c2e78f8be66 100644
    --- a/files/zh-cn/web/api/customelementregistry/get/index.html
    +++ b/files/zh-cn/web/api/customelementregistry/get/index.html
    @@ -10,7 +10,7 @@
     ---
     

    {{APIRef("CustomElementRegistry")}}

    -

     {{domxref("CustomElementRegistry")}} 的get()方法返回以前定义自定义元素的构造函数。

    +

    {{domxref("CustomElementRegistry")}} 的get()方法返回以前定义自定义元素的构造函数。

    语法

    diff --git a/files/zh-cn/web/api/customelementregistry/index.html b/files/zh-cn/web/api/customelementregistry/index.html index aed8dd2a3bbc00..2949e1dd817a16 100644 --- a/files/zh-cn/web/api/customelementregistry/index.html +++ b/files/zh-cn/web/api/customelementregistry/index.html @@ -10,7 +10,7 @@ ---
    {{DefaultAPISidebar("Web Components")}}
    -

    CustomElementRegistry接口提供注册自定义元素和查询已注册元素的方法。要获取它的实例,请使用 {{domxref("window.customElements")}}属性。

    +

    CustomElementRegistry接口提供注册自定义元素和查询已注册元素的方法。要获取它的实例,请使用 {{domxref("window.customElements")}}属性。

    方法

    @@ -27,7 +27,7 @@

    方法

    示例

    -

    以下代码来自我们的 word-count-web-component 示例(see it live also)。请注意我们如何使用 {{domxref("CustomElementRegistry.define()")}} 方法在创建其类后定义自定义元素。

    +

    以下代码来自我们的 word-count-web-component 示例(see it live also)。请注意我们如何使用 {{domxref("CustomElementRegistry.define()")}} 方法在创建其类后定义自定义元素。

    // Create a class for the element
     class WordCount extends HTMLParagraphElement {
    diff --git a/files/zh-cn/web/api/customelementregistry/whendefined/index.html b/files/zh-cn/web/api/customelementregistry/whendefined/index.html
    index b6e2b4b7355d5b..b5d8c38fab0641 100644
    --- a/files/zh-cn/web/api/customelementregistry/whendefined/index.html
    +++ b/files/zh-cn/web/api/customelementregistry/whendefined/index.html
    @@ -5,7 +5,7 @@
     ---
     

    {{APIRef("CustomElementRegistry")}}

    -

    当一个元素被定义时{{domxref("CustomElementRegistry")}} 中的方法whenDefined() 接口返回  {{jsxref("Promise")}}.

    +

    当一个元素被定义时{{domxref("CustomElementRegistry")}} 中的方法whenDefined() 接口返回 {{jsxref("Promise")}}.

    语法

    @@ -37,7 +37,7 @@

    例外

    SyntaxError - 如果提供的 name 不是一个有效的 自定义元素名字, promise 的 reject 回调会接收到一个 SyntaxError. + 如果提供的 name 不是一个有效的 自定义元素名字, promise 的 reject 回调会接收到一个 SyntaxError. diff --git a/files/zh-cn/web/api/customevent/customevent/index.html b/files/zh-cn/web/api/customevent/customevent/index.html index dd04ba0a60a0bd..3a238ab093d72a 100644 --- a/files/zh-cn/web/api/customevent/customevent/index.html +++ b/files/zh-cn/web/api/customevent/customevent/index.html @@ -23,12 +23,12 @@

    Values 参数

    -
    Is a CustomEventInit dictionary, having the following fields:  一个字典类型参数,有如下字段 +
    Is a CustomEventInit dictionary, having the following fields: 一个字典类型参数,有如下字段
      -
    • "detail", optional and defaulting to null, of type any, that is a event-dependant value associated with the event.   可选的默认值是 null 的任意类型数据,是一个与 event 相关的值
    • +
    • "detail", optional and defaulting to null, of type any, that is a event-dependant value associated with the event. 可选的默认值是 null 的任意类型数据,是一个与 event 相关的值
    • bubbles 一个布尔值,表示该事件能否冒泡。来自 {{domxref("Event.Event", "EventInit")}}。注意:测试 chrome 默认为不冒泡。
    • -
    • cancelable 一个布尔值,表示该事件是否可以取消。来自 {{domxref("Event.Event", "EventInit")}}
    • +
    • cancelable 一个布尔值,表示该事件是否可以取消。来自 {{domxref("Event.Event", "EventInit")}}
    @@ -36,9 +36,9 @@

    Values 参数

    CustomerEventInit 字典参数同样接受来自于 Event 类构造函数的 eventInit 字典参数,如下

    -

    bubbles   一个布尔值,表示该事件能否冒泡

    +

    bubbles 一个布尔值,表示该事件能否冒泡

    -

    cancelable  一个布尔值,表示该事件是否可以取消

    +

    cancelable 一个布尔值,表示该事件是否可以取消

    @@ -86,25 +86,25 @@

    Polyfill

    You can polyfill the CustomEvent() constructor functionality in Internet Explorer 9 and higher with the following code:

    (function(){
    -    try{
    -        // a : While a window.CustomEvent object exists, it cannot be called as a constructor.
    -        // b : There is no window.CustomEvent object
    -        new window.CustomEvent('T');
    -    }catch(e){
    -        var CustomEvent = function(event, params){
    -            params = params || { bubbles: false, cancelable: false, detail: undefined };
    +    try{
    +        // a : While a window.CustomEvent object exists, it cannot be called as a constructor.
    +        // b : There is no window.CustomEvent object
    +        new window.CustomEvent('T');
    +    }catch(e){
    +        var CustomEvent = function(event, params){
    +            params = params || { bubbles: false, cancelable: false, detail: undefined };
     
    -            var evt = document.createEvent('CustomEvent');
    +            var evt = document.createEvent('CustomEvent');
     
    -            evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
    +            evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
     
    -            return evt;
    -        };
    +            return evt;
    +        };
     
    -        CustomEvent.prototype = window.Event.prototype;
    +        CustomEvent.prototype = window.Event.prototype;
     
    -        window.CustomEvent = CustomEvent;
    -    }
    +        window.CustomEvent = CustomEvent;
    +    }
     })();

    See also

    diff --git a/files/zh-cn/web/api/customevent/detail/index.html b/files/zh-cn/web/api/customevent/detail/index.html index c70a7655bf36de..38512c256a80ce 100644 --- a/files/zh-cn/web/api/customevent/detail/index.html +++ b/files/zh-cn/web/api/customevent/detail/index.html @@ -5,7 +5,7 @@ ---

    {{APIRef("DOM")}}

    -

    接口 {{domxref("CustomEvent")}} 的只读属性 detail (详情)返回在初始化事件对象时传递过来的任何类型数据。

    +

    接口 {{domxref("CustomEvent")}} 的只读属性 detail (详情)返回在初始化事件对象时传递过来的任何类型数据。

    {{AvailableInWorkers}}

    @@ -65,4 +65,4 @@

    See also

  • {{domxref("CustomEvent")}}
  • -

     

    +

    diff --git a/files/zh-cn/web/api/customevent/index.html b/files/zh-cn/web/api/customevent/index.html index 2924780aee163d..72c38ed309e3a4 100644 --- a/files/zh-cn/web/api/customevent/index.html +++ b/files/zh-cn/web/api/customevent/index.html @@ -5,19 +5,19 @@ ---

    {{APIRef("DOM")}}

    -

    CustomEvent 事件是由程序创建的,可以有任意自定义功能的事件。

    +

    CustomEvent 事件是由程序创建的,可以有任意自定义功能的事件。

    {{AvailableInWorkers}}

    构造函数

    -

    {{domxref("CustomEvent.CustomEvent", "CustomEvent()")}}  创建一个自定义事件。

    +

    {{domxref("CustomEvent.CustomEvent", "CustomEvent()")}} 创建一个自定义事件。

    属性

    {{domxref("CustomEvent.detail")}} {{readonlyinline}} 任何时间初始化时传入的数据

    -

    此接口从父接口继承属性, {{domxref("Event")}}:

    +

    此接口从父接口继承属性, {{domxref("Event")}}:

    {{Page("/zh-CN/docs/Web/API/Event", "Properties")}}

    @@ -30,7 +30,7 @@

    方法

    -

    此接口从父接口继承方法, {{domxref("Event")}}:

    +

    此接口从父接口继承方法, {{domxref("Event")}}:

    {{Page("/zh-CN/docs/Web/API/Event", "Methods")}}

    diff --git a/files/zh-cn/web/api/customevent/initcustomevent/index.html b/files/zh-cn/web/api/customevent/initcustomevent/index.html index 7d592b5dbd5dd3..5c3192d3825953 100644 --- a/files/zh-cn/web/api/customevent/initcustomevent/index.html +++ b/files/zh-cn/web/api/customevent/initcustomevent/index.html @@ -5,14 +5,14 @@ ---

    {{APIRef("DOM")}}{{deprecated_header}}

    -

    CustomEvent.initCustomEvent() 方法初始化了一个 CustomEvent object. 如果该事件已经被分发出去,则不会在初始化过程中重复触发.

    +

    CustomEvent.initCustomEvent() 方法初始化了一个 CustomEvent object. 如果该事件已经被分发出去,则不会在初始化过程中重复触发.

    这类对象一定是由 {{ domxref("Document.createEvent()") }} 方法创建的。该方法被分发之前必须通过{{ domxref("EventTarget.dispatchEvent()") }}方法设置.一旦被分发则,则无法被重新设置.

    该方法已经作废,不要在新项目中继续使用该方法。

    -

    Instead use specific event constructors, like {{domxref("CustomEvent.CustomEvent", "CustomEvent()")}}. The page on Creating and triggering events gives more information about the way to use these.

    +

    Instead use specific event constructors, like {{domxref("CustomEvent.CustomEvent", "CustomEvent()")}}. The page on Creating and triggering events gives more information about the way to use these.

    Syntax

    diff --git a/files/zh-cn/web/api/datatransfer/datatransfer/index.html b/files/zh-cn/web/api/datatransfer/datatransfer/index.html index 6bef768da4e6b4..e1b8782da405df 100644 --- a/files/zh-cn/web/api/datatransfer/datatransfer/index.html +++ b/files/zh-cn/web/api/datatransfer/datatransfer/index.html @@ -9,7 +9,7 @@ ---

    {{APIRef("HTML Drag and Drop API")}}

    -

    通过构造函数 DataTransfer 创建一个新的 {{domxref("DataTransfer")}} 对象。注意,单独创建该对象没有意义,且 Internet Explorer 中 DataTransfer 不是一个构造函数。

    +

    通过构造函数 DataTransfer 创建一个新的 {{domxref("DataTransfer")}} 对象。注意,单独创建该对象没有意义,且 Internet Explorer 中 DataTransfer 不是一个构造函数。

    语法

    @@ -21,7 +21,7 @@

    参数

    返回值

    -

    一个空的 DataTransfer 对象。

    +

    一个空的 DataTransfer 对象。

    规范

    diff --git a/files/zh-cn/web/api/datatransfer/effectallowed/index.html b/files/zh-cn/web/api/datatransfer/effectallowed/index.html index 55b02601568092..e0e52cb4212928 100644 --- a/files/zh-cn/web/api/datatransfer/effectallowed/index.html +++ b/files/zh-cn/web/api/datatransfer/effectallowed/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef("HTML Drag and Drop API")}}
    -

    DataTransfer.effectAllowed 属性指定拖放操作所允许的一个效果。copy 操作用于指示被拖动的数据将从当前位置复制到放置位置。move 操作用于指定被拖动的数据将被移动。 link操作用于指示将在源和放置位置之间创建某种形式的关系或连接。

    +

    DataTransfer.effectAllowed 属性指定拖放操作所允许的一个效果。copy 操作用于指示被拖动的数据将从当前位置复制到放置位置。move 操作用于指定被拖动的数据将被移动。 link操作用于指示将在源和放置位置之间创建某种形式的关系或连接。

    应该在{{event("dragstart")}}事件中设置此属性,以便为拖动源设置所需的拖动效果。在 {{event("dragenter")}} 和{{event("dragover")}} 事件处理程序中,该属性将设置为在{{event("dragstart")}} 事件期间分配的任何值,因此,可以使用effectAllowed来确定允许哪个效果。

    @@ -26,9 +26,9 @@

    copy
    源项目的复制项可能会出现在新位置。
    copyLink
    -
    允许 copy 或者 link 操作。
    +
    允许 copy 或者 link 操作。
    copyMove
    -
    允许 copy 或者 move 操作。
    +
    允许 copy 或者 move 操作。
    link
    可以在新地方建立与源的链接。
    linkMove
    @@ -41,13 +41,13 @@

    效果没有设置时的默认值,则等同于 all
    -

    分配一个没有效果的其他值给 effectAllowed,则保留原值。

    +

    分配一个没有效果的其他值给 effectAllowed,则保留原值。

    Internet Explorer 会将该值改为小写。因此,linkMove将会变为linkmove ,等等。

    举个例子

    -

    此例子展示 effectAllowed 用法 和 {{domxref("DataTransfer.dropEffect", "dropEffect")}} 属性

    +

    此例子展示 effectAllowed 用法 和 {{domxref("DataTransfer.dropEffect", "dropEffect")}} 属性

    <!DOCTYPE html>
     <html lang=en>
    @@ -70,7 +70,7 @@ 

    举个例子

    function dragstart_handler(ev) { console.log("dragStart: dropEffect = " + ev.dataTransfer.dropEffect + " ; effectAllowed = " + ev.dataTransfer.effectAllowed); // 将这个元素的 id 添加到 drag 载荷中, - // 以便 drop 事件知道将哪个元素添加到其树中。 + // 以便 drop 事件知道将哪个元素添加到其树中。
    ev.dataTransfer.setData("text", ev.target.id); ev.dataTransfer.effectAllowed = "move"; } diff --git a/files/zh-cn/web/api/datatransfer/getdata/index.html b/files/zh-cn/web/api/datatransfer/getdata/index.html index 268079a5299ee0..6c5ee0a626223e 100644 --- a/files/zh-cn/web/api/datatransfer/getdata/index.html +++ b/files/zh-cn/web/api/datatransfer/getdata/index.html @@ -7,7 +7,7 @@

    {{APIRef("HTML DOM")}}

    -

    DataTransfer.getData() 方法接受指定类型的拖放(以{{domxref("DOMString")}}的形式)数据。如果拖放行为没有操作任何数据,会返回一个空字符串。

    +

    DataTransfer.getData() 方法接受指定类型的拖放(以{{domxref("DOMString")}}的形式)数据。如果拖放行为没有操作任何数据,会返回一个空字符串。

    数据类型有:text/plaintext/uri-list。

    @@ -32,7 +32,7 @@

    返回值

    注意

    -

    HTML5 拖放规范 规定了一个 drag data store mode。这可能会导致预期外的结果,即 DataTransfer.getData() 没有返回预期值。

    +

    HTML5 拖放规范 规定了一个 drag data store mode。这可能会导致预期外的结果,即 DataTransfer.getData() 没有返回预期值。

    示例

    diff --git a/files/zh-cn/web/api/datatransfer/index.html b/files/zh-cn/web/api/datatransfer/index.html index 165ba42b0eeaf5..a29f94efd6dca2 100644 --- a/files/zh-cn/web/api/datatransfer/index.html +++ b/files/zh-cn/web/api/datatransfer/index.html @@ -17,14 +17,14 @@

    DataTransfer 对象用于保存拖动并放下(drag and drop)过程中的数据。它可以保存一项或多项数据,这些数据项可以是一种或者多种数据类型。关于拖放的更多信息,请参见 Drag and Drop.

    -

    这个对象可以从所有拖动事件 {{domxref("DragEvent","drag events")}} 的 {{domxref("DragEvent.dataTransfer","dataTransfer")}} 属性上获取。

    +

    这个对象可以从所有拖动事件 {{domxref("DragEvent","drag events")}} 的 {{domxref("DragEvent.dataTransfer","dataTransfer")}} 属性上获取。

    构造函数

    {{domxref("DataTransfer.DataTransfer","DataTransfer()")}}

    -
    生成并且返回一个新的 DataTransfer 对象。
    +
    生成并且返回一个新的 DataTransfer 对象。

    属性

    @@ -33,30 +33,30 @@

    标准属性

    {{domxref("DataTransfer.dropEffect")}}
    -
    获取当前选定的拖放操作类型或者设置的为一个新的类型。值必须为  nonecopylink 或 move
    +
    获取当前选定的拖放操作类型或者设置的为一个新的类型。值必须为 none, copy, linkmove
    {{domxref("DataTransfer.effectAllowed")}}
    -
    提供所有可用的操作类型。必须是  nonecopycopyLinkcopyMovelinklinkMovemoveall or uninitialized 之一。
    +
    提供所有可用的操作类型。必须是 none, copy, copyLink, copyMove, link, linkMove, move, all or uninitialized 之一。
    {{domxref("DataTransfer.files")}}
    包含数据传输中可用的所有本地文件的列表。如果拖动操作不涉及拖动文件,则此属性为空列表。
    {{domxref("DataTransfer.items")}} {{readonlyInline}}
    提供一个包含所有拖动数据列表的 {{domxref("DataTransferItemList")}} 对象。
    {{domxref("DataTransfer.types")}} {{readonlyInline}}
    -
    一个提供 {{event("dragstart")}} 事件中设置的格式的 {{domxref("DOMString","strings")}} 数组。
    +
    一个提供 {{event("dragstart")}} 事件中设置的格式的 {{domxref("DOMString","strings")}} 数组。

    Gecko 属性

    {{SeeCompatTable}}

    -
    注意:本节中的所有属性为 Gecko 特有。
    +
    注意:本节中的所有属性为 Gecko 特有。
    {{domxref("DataTransfer.mozCursor")}}
    给出拖动光标的状态。这主要用于在拖动期间控制光标。
    {{domxref("DataTransfer.mozSourceNode")}} {{readonlyInline}}
    -
    按下鼠标按钮按下启动拖动操作时鼠标光标所在的 {{ domxref("Node") }} 。对于外部拖动或调用方无法访问节点,此值为  null 。
    +
    按下鼠标按钮按下启动拖动操作时鼠标光标所在的 {{ domxref("Node") }} 。对于外部拖动或调用方无法访问节点,此值为 null
    {{domxref("DataTransfer.mozUserCancelled")}} {{readonlyInline}}
    -
    此属性仅适用于 dragend 事件,如果通过用户按下 escape 取消拖动操作,则为 true 。在所有其他情况下,这将为 false ,包括由于其他原因(如,放置在无效位置)导致的拖动失败。
    +
    此属性仅适用于 dragend 事件,如果通过用户按下 escape 取消拖动操作,则为 true 。在所有其他情况下,这将为 false ,包括由于其他原因(如,放置在无效位置)导致的拖动失败。

    不推荐的属性

    @@ -72,7 +72,7 @@

    标准方法

    {{domxref("DataTransfer.clearData()")}}
    删除与给定类型关联的数据。类型参数是可选的。如果类型为空或未指定,则删除与所有类型关联的数据。如果指定类型的数据不存在,或者 data transfer 中不包含任何数据,则该方法不会产生任何效果。
    {{domxref("DataTransfer.getData()")}}
    -
    检索给定类型的数据,如果该类型的数据不存在或 data transfer 不包含数据,则返回空字符串。
    +
    检索给定类型的数据,如果该类型的数据不存在或 data transfer 不包含数据,则返回空字符串。
    {{domxref("DataTransfer.setData()")}}
    设置给定类型的数据。如果该类型的数据不存在,则将其添加到末尾,以便类型列表中的最后一项将是新的格式。如果该类型的数据已经存在,则在相同位置替换现有数据。
    {{domxref("DataTransfer.setDragImage()")}}
    @@ -100,7 +100,7 @@

    不推荐的方法

    {{domxref("DataTransfer.mozGetDataAt()")}} {{deprecated_inline}}
    Retrieves the data associated with the given format for an item at the specified index, or null if it does not exist. The index should be in the range from zero to the number of items minus one. Removed in Firefox 71.
    {{domxref("DataTransfer.mozSetDataAt()")}} {{deprecated_inline}}
    -
    A data transfer may store multiple items, each at a given zero-based index. mozSetDataAt() may only be called with an index argument less than mozItemCount in which case an existing item is modified, or equal to mozItemCount in which case a new item is added, and the mozItemCount is incremented by one. Removed in Firefox 71.
    +
    A data transfer may store multiple items, each at a given zero-based index. mozSetDataAt() may only be called with an index argument less than mozItemCount in which case an existing item is modified, or equal to mozItemCount in which case a new item is added, and the mozItemCount is incremented by one. Removed in Firefox 71.
    {{domxref("DataTransfer.mozTypesAt()")}} {{deprecated_inline}}
    Holds a list of the format types of the data that is stored for an item at the specified index. If the index is not in the range from 0 to the number of items minus one, an empty string list is returned. Removed in Firefox 71.
    @@ -124,5 +124,5 @@

    参见

  • 拖动操作
  • 推荐拖动类型
  • 拖动多项
  • -
  • DataTransfer 测试 - 粘贴、拖放
  • +
  • DataTransfer 测试 - 粘贴、拖放
  • diff --git a/files/zh-cn/web/api/datatransfer/items/index.html b/files/zh-cn/web/api/datatransfer/items/index.html index 3604635fb31457..ce396835ea54f1 100644 --- a/files/zh-cn/web/api/datatransfer/items/index.html +++ b/files/zh-cn/web/api/datatransfer/items/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef("HTML Drag and Drop API")}}
    -

    {{domxref("DataTransfer")}}的items 属性只读,是拖动操作中 {{domxref("DataTransferItem","数据传输项")}}的{{domxref("DataTransferItemList","列表")}}。该列表包含了操作中每一项目的对应项,如果操作没有项目,则列表为空。

    +

    {{domxref("DataTransfer")}}的items 属性只读,是拖动操作中 {{domxref("DataTransferItem","数据传输项")}}的{{domxref("DataTransferItemList","列表")}}。该列表包含了操作中每一项目的对应项,如果操作没有项目,则列表为空。

    语法

    @@ -18,7 +18,7 @@

    返回值

    示例

    -

    这个例子演示了 items 和 {{domxref("DataTransfer.types","types")}} 属性的用法。

    +

    这个例子演示了 items 和 {{domxref("DataTransfer.types","types")}} 属性的用法。

    <!DOCTYPE html>
     <html lang=en>
    diff --git a/files/zh-cn/web/api/datatransfer/setdata/index.html b/files/zh-cn/web/api/datatransfer/setdata/index.html
    index 090fb7e0ed4560..3da8ed22eb7416 100644
    --- a/files/zh-cn/web/api/datatransfer/setdata/index.html
    +++ b/files/zh-cn/web/api/datatransfer/setdata/index.html
    @@ -7,13 +7,13 @@
     ---
     
    {{APIRef("HTML Drag and Drop API")}}
    -

    DataTransfer.setData() 方法用来设置拖放操作的{{domxref("DataTransfer","drag data")}}到指定的数据和类型。

    +

    DataTransfer.setData() 方法用来设置拖放操作的{{domxref("DataTransfer","drag data")}}到指定的数据和类型。

    如果给定类型的数据不存在,则将其添加到拖动数据存储的末尾,使得 {{domxref("DataTransfer.types","types")}} 列表中的最后一个项目将是新类型。

    如果给定类型的数据已经存在,现有数据将被替换为相同的位置。也就是说,替换相同类型的数据时 {{domxref("DataTransfer.types","types")}}列表的顺序不会更改。

    -

    示例数据类型为:"text/plain" 和 "text/uri-list".

    +

    示例数据类型为:"text/plain" 和 "text/uri-list".

    语法

    @@ -26,7 +26,7 @@

    参数

    format
    一个{{domxref("DOMString")}} 表示要添加到 {{domxref("DataTransfer","drag object")}}的拖动数据的类型。
    data
    -
    一个 {{domxref("DOMString")}}表示要添加到 {{domxref("DataTransfer","drag object")}}的数据。
    +
    一个 {{domxref("DOMString")}}表示要添加到 {{domxref("DataTransfer","drag object")}}的数据。

    返回值

    @@ -37,72 +37,72 @@

    返回值

    示例

    -

     

    +

    -

    此示例显示了使用 {{domxref("DataTransfer")}} 对象的 {{domxref("DataTransfer.getData","getData()")}}, {{domxref("DataTransfer.setData","setData()")}} }和{{domxref("DataTransfer.clearData","clearData()")}} 方法。

    +

    此示例显示了使用 {{domxref("DataTransfer")}} 对象的 {{domxref("DataTransfer.getData","getData()")}}, {{domxref("DataTransfer.setData","setData()")}} }和{{domxref("DataTransfer.clearData","clearData()")}} 方法。

    <!DOCTYPE html>
     <html lang="zh-CN">
     <head>
    -    <meta charset="UTF-8">
    -    <title>DataTransfer.setData()/.getData()/.clearData()</title>
    -    <style>
    -        div {
    -            margin: 0em;
    -            padding: 2em;
    -        }
    -        #source {
    -            color: blue;
    -            border: 1px solid black;
    -        }
    -        #target {
    -            border: 1px solid black;
    -        }
    -    </style>
    +    <meta charset="UTF-8">
    +    <title>DataTransfer.setData()/.getData()/.clearData()</title>
    +    <style>
    +        div {
    +            margin: 0em;
    +            padding: 2em;
    +        }
    +        #source {
    +            color: blue;
    +            border: 1px solid black;
    +        }
    +        #target {
    +            border: 1px solid black;
    +        }
    +    </style>
     </head>
     <body>
    -    <section>
    -        <h1>
    -            <code>DataTransfer.setData()</code> <br>
    -            <code>DataTransfer.getData()</code> <br>
    -            <code>DataTransfer.clearData()</code>
    -        </h1>
    -        <div>
    -            <p id="source" ondragstart="dragstart_handler(event);" draggable="true">
    -                Select this element, drag it to the Drop Zone and then release the selection to move the element.
    -            </p>
    -        </div>
    -        <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">
    -            Drop Zone
    -        </div>
    -    </section>
    -    <!-- js -->
    -    <script>
    -        function dragstart_handler(ev) {
    -            console.log("dragStart");
    -            // Change the source element's background color to signify drag has started
    -            ev.currentTarget.style.border = "dashed";
    -            // Set the drag's format and data. Use the event target's id for the data
    -            ev.dataTransfer.setData("text/plain", ev.target.id);
    -        }
    -
    -        function dragover_handler(ev) {
    -            console.log("dragOver");
    -            // prevent Default event
    -            ev.preventDefault();
    -        }
    -
    -        function drop_handler(ev) {
    -            console.log("Drop");
    -            ev.preventDefault();
    -            // Get the data, which is the id of the drop target
    -            var data = ev.dataTransfer.getData("text");
    -            // appendChild
    -            ev.target.appendChild(document.getElementById(data));
    -            // Clear the drag data cache (for all formats/types)
    -            ev.dataTransfer.clearData();
    -        }
    -    </script>
    +    <section>
    +        <h1>
    +            <code>DataTransfer.setData()</code> <br>
    +            <code>DataTransfer.getData()</code> <br>
    +            <code>DataTransfer.clearData()</code>
    +        </h1>
    +        <div>
    +            <p id="source" ondragstart="dragstart_handler(event);" draggable="true">
    +                Select this element, drag it to the Drop Zone and then release the selection to move the element.
    +            </p>
    +        </div>
    +        <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">
    +            Drop Zone
    +        </div>
    +    </section>
    +    <!-- js -->
    +    <script>
    +        function dragstart_handler(ev) {
    +            console.log("dragStart");
    +            // Change the source element's background color to signify drag has started
    +            ev.currentTarget.style.border = "dashed";
    +            // Set the drag's format and data. Use the event target's id for the data
    +            ev.dataTransfer.setData("text/plain", ev.target.id);
    +        }
    +
    +        function dragover_handler(ev) {
    +            console.log("dragOver");
    +            // prevent Default event
    +            ev.preventDefault();
    +        }
    +
    +        function drop_handler(ev) {
    +            console.log("Drop");
    +            ev.preventDefault();
    +            // Get the data, which is the id of the drop target
    +            var data = ev.dataTransfer.getData("text");
    +            // appendChild
    +            ev.target.appendChild(document.getElementById(data));
    +            // Clear the drag data cache (for all formats/types)
    +            ev.dataTransfer.clearData();
    +        }
    +    </script>
     </body>
     </html>
     
    diff --git a/files/zh-cn/web/api/datatransfer/setdragimage/index.html b/files/zh-cn/web/api/datatransfer/setdragimage/index.html
    index bac2536261ff20..1003271649e63d 100644
    --- a/files/zh-cn/web/api/datatransfer/setdragimage/index.html
    +++ b/files/zh-cn/web/api/datatransfer/setdragimage/index.html
    @@ -7,33 +7,33 @@
     
     
     
    -

    发生拖动时,从拖动目标 ({{event("dragstart")}}事件触发的元素) 生成半透明图像,并在拖动过程中跟随鼠标指针。这个图片是自动创建的,你不需要自己去创建它。然而,如果想要设置为自定义图像,那么 DataTransfer.setDragImage() 方法就能派上用场。

    +

    发生拖动时,从拖动目标 ({{event("dragstart")}}事件触发的元素) 生成半透明图像,并在拖动过程中跟随鼠标指针。这个图片是自动创建的,你不需要自己去创建它。然而,如果想要设置为自定义图像,那么 DataTransfer.setDragImage() 方法就能派上用场。

    -

    图像通常是一个 {{HTMLElement("image")}} 元素,但也可以是{{HTMLElement("canvas")}} 或任何其他图像元素。该方法的 x 和 y 坐标是图像应该相对于鼠标指针出现的偏移量。

    +

    图像通常是一个 {{HTMLElement("image")}} 元素,但也可以是{{HTMLElement("canvas")}} 或任何其他图像元素。该方法的 x 和 y 坐标是图像应该相对于鼠标指针出现的偏移量。

    坐标指定鼠标指针相对于图片的偏移量。例如,要使图像居中,请使用图像宽度和高度的一半。

    -

    通常在  {{event("dragstart")}} 事件处理程序中调用此方法。

    +

    通常在 {{event("dragstart")}} 事件处理程序中调用此方法。

    语法

    void dataTransfer.setDragImage(img, xOffset, yOffset);
     
    -

      参数

    +

    参数

    -
    img | Element
    -
    用于拖曳反馈图像的图像 {{domxref("Element")}} 元素。
    +
    img | Element
    +
    用于拖曳反馈图像的图像 {{domxref("Element")}} 元素。

    如果 Element 是一个 img 元素,则将拖动位图设置为该元素的图像(保持大小);否则,将拖动数位图设置为从给定元素所生成的图片(当前尚未指定执行此操作的确切机制

    xOffset
    -
    使用 long 指示相对于图片的横向偏移量
    +
    使用 long 指示相对于图片的横向偏移量
    yOffset
    -
    使用 long 指示相对于图片的纵向偏移量 +
    使用 long 指示相对于图片的纵向偏移量
    @@ -47,7 +47,7 @@

    返回值

    举个例子

    -

     这个例子展示如何使用 setDragImage() 方法。请注意,此例子引用了命名为 example.gif 的图片文件。如果此文件存在,它将被用作拖动图像,如果此文件不存在,浏览器会使用其默认的拖动图像。

    +

    这个例子展示如何使用 setDragImage() 方法。请注意,此例子引用了命名为 example.gif 的图片文件。如果此文件存在,它将被用作拖动图像,如果此文件不存在,浏览器会使用其默认的拖动图像。

    <!DOCTYPE html>
     <html lang=en>
    @@ -69,12 +69,12 @@ 

    举个例子

    <script> function dragstart_handler(ev) { console.log("dragStart"); - // 设置拖动的格式和数据。使用事件目标的 id 作为数据 + // 设置拖动的格式和数据。使用事件目标的 id 作为数据 ev.dataTransfer.setData("text/plain", ev.target.id); - // 创建一个图像并且使用它作为拖动图像 - // 请注意: 改变 "example.gif" 为一个已经存在的图片 - // 或者,一个还没有创建出来的图片,那么浏览器将会使用默认的拖动图片 - // 译者注:默认的拖动图片与拖动对象没有联系。一般是一个小型文件图标 + // 创建一个图像并且使用它作为拖动图像 + // 请注意: 改变 "example.gif" 为一个已经存在的图片 + // 或者,一个还没有创建出来的图片,那么浏览器将会使用默认的拖动图片 + // 译者注:默认的拖动图片与拖动对象没有联系。一般是一个小型文件图标 var img = new Image(); img.src = 'example.gif'; ev.dataTransfer.setDragImage(img, 10, 10); @@ -88,7 +88,7 @@

    举个例子

    function drop_handler(ev) { console.log("Drop"); ev.preventDefault(); - // 获取拖放目标的 id 数据 + // 获取拖放目标的 id 数据 var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); } diff --git a/files/zh-cn/web/api/datatransfer/types/index.html b/files/zh-cn/web/api/datatransfer/types/index.html index 723876ee106037..b0ffdb45634395 100644 --- a/files/zh-cn/web/api/datatransfer/types/index.html +++ b/files/zh-cn/web/api/datatransfer/types/index.html @@ -6,7 +6,7 @@

    {{APIRef("HTML Drag and Drop API")}}

    -

    DataTransfer.types 是只读属性。它返回一个我们在{{event("dragstart")}}事件中设置的拖动数据格式 (如 {{domxref("DOMString","字符串")}}) 的数组。 格式顺序与拖动操作中包含的数据顺序相同。  

    +

    DataTransfer.types 是只读属性。它返回一个我们在{{event("dragstart")}}事件中设置的拖动数据格式 (如 {{domxref("DOMString","字符串")}}) 的数组。 格式顺序与拖动操作中包含的数据顺序相同。

    这些格式是指定数据类型或格式的 Unicode 字符串,通常由 MIME 类型给出。 一些非 MIME 类型的值是由于历史遗留原因(例如“text”)而特殊设置的。

    @@ -39,7 +39,7 @@

    举个例子

    <script> function dragstart_handler(ev) { console.log("dragStart: target.id = " + ev.target.id); - // 将这个元素的 id 添加到 drag 载荷中, + // 将这个元素的 id 添加到 drag 载荷中, // 以便 drop 事件知道将哪个元素添加到其树中。 ev.dataTransfer.setData("text/plain", ev.target.id); ev.dataTransfer.effectAllowed = "move"; @@ -51,13 +51,13 @@

    举个例子

    // 得到目标的 id 并且将移动的元素添加到目标 DOM 中 var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); - // 打印每种格式类型 + // 打印每种格式类型 if (ev.dataTransfer.types != null) { for (var i=0; i < ev.dataTransfer.types.length; i++) { console.log("... types[" + i + "] = " + ev.dataTransfer.types[i]); } } - // 打印每个 item 的“kind”和“type”属性值 + // 打印每个 item 的“kind”和“type”属性值 if (ev.dataTransfer.items != null) { for (var i=0; i < ev.dataTransfer.items.length; i++) { console.log("... items[" + i + "].kind = " + ev.dataTransfer.items[i].kind + " ; type = " + ev.dataTransfer.items[i].type); @@ -95,7 +95,7 @@

    规范

    {{SpecName("HTML WHATWG", "interaction.html#dom-datatransfer-types", "types")}} {{Spec2("HTML WHATWG")}} -   + {{SpecName("HTML5.1", "editing.html#dom-datatransfer-types", "types")}} @@ -114,4 +114,4 @@

    参考链接

    {{page("/en-US/docs/Web/API/DataTransfer", "See also")}}

    -

     

    +

    diff --git a/files/zh-cn/web/api/datatransferitem/getasfile/index.html b/files/zh-cn/web/api/datatransferitem/getasfile/index.html index aa563a72f324b3..06823eabdf9aa6 100644 --- a/files/zh-cn/web/api/datatransferitem/getasfile/index.html +++ b/files/zh-cn/web/api/datatransferitem/getasfile/index.html @@ -8,7 +8,7 @@ ---
    {{APIRef("HTML Drag and Drop API")}}
    -

    如果DataTransferItem是一个文件,那 DataTransferItem.getAsFile()  方法将返回拖拽项数据的 {{domxref("File")}} 对象。如果拖拽项的数据不是一个文件,则返回 null.

    +

    如果DataTransferItem是一个文件,那 DataTransferItem.getAsFile() 方法将返回拖拽项数据的 {{domxref("File")}} 对象。如果拖拽项的数据不是一个文件,则返回 null.

    语法

    @@ -23,12 +23,12 @@

    返回值

    {{domxref("File")}}
    -
    如果拖拽项的对象是一个文件,则返回 {{domxref("File")}} 对象; 否则返回 null .
    +
    如果拖拽项的对象是一个文件,则返回 {{domxref("File")}} 对象; 否则返回 null .

    例子

    -

    下面这个例子中使用 getAsFile() 。放在 {{event("drop")}} 事件处理里面。

    +

    下面这个例子中使用 getAsFile() 。放在 {{event("drop")}} 事件处理里面。

    function drop_handler(ev) {
      console.log("Drop");
    diff --git a/files/zh-cn/web/api/datatransferitem/getasstring/index.html b/files/zh-cn/web/api/datatransferitem/getasstring/index.html
    index d8887f9314a5ad..c1459c37da3b7b 100644
    --- a/files/zh-cn/web/api/datatransferitem/getasstring/index.html
    +++ b/files/zh-cn/web/api/datatransferitem/getasstring/index.html
    @@ -5,7 +5,7 @@
     ---
     
    {{APIRef("HTML Drag and Drop API")}}
    -

     DataTransferItem.getAsString()  当 DataTransferItem 对象的 kind 属性是一个普通 Unicode 字符串时,该方法会用 DataTransferItem 对象的 kind 属性作为入参来执行传入的回调函数 (i.e. kind is string).

    +

    DataTransferItem.getAsString() 当 DataTransferItem 对象的 kind 属性是一个普通 Unicode 字符串时,该方法会用 DataTransferItem 对象的 kind 属性作为入参来执行传入的回调函数 (i.e. kind is string).

    示例

    diff --git a/files/zh-cn/web/api/datatransferitem/index.html b/files/zh-cn/web/api/datatransferitem/index.html index 0ca61e8991fc16..9173d890f1c12c 100644 --- a/files/zh-cn/web/api/datatransferitem/index.html +++ b/files/zh-cn/web/api/datatransferitem/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef("HTML Drag and Drop API")}}
    -

    DataTransferItem 描述了一个拖拽项。在一个拖拽操作中,每一个 {{domxref("DragEvent","drag event")}} 都有一个{{domxref("DragEvent.dataTransfer","dataTransfer")}} 属性,它包含一个存有拖拽数据的 {{domxref("DataTransferItemList","list")}} ,其中每一项都是一个 DataTransferItem 。

    +

    DataTransferItem 描述了一个拖拽项。在一个拖拽操作中,每一个 {{domxref("DragEvent","drag event")}} 都有一个{{domxref("DragEvent.dataTransfer","dataTransfer")}} 属性,它包含一个存有拖拽数据的 {{domxref("DataTransferItemList","list")}} ,其中每一项都是一个 DataTransferItem

    这个接口没有构造函数。

    @@ -13,7 +13,7 @@

    属性

    {{domxref("DataTransferItem.kind")}} {{readonlyInline}}
    -
    拖拽项的种类,string 或是 file。
    +
    拖拽项的种类,string 或是 file。
    {{domxref("DataTransferItem.type")}} {{readonlyInline}}
    拖拽项的类型,一般是一个 MIME 类型。
    diff --git a/files/zh-cn/web/api/datatransferitem/kind/index.html b/files/zh-cn/web/api/datatransferitem/kind/index.html index 6b0dbd881cbe39..d08916feedea5c 100644 --- a/files/zh-cn/web/api/datatransferitem/kind/index.html +++ b/files/zh-cn/web/api/datatransferitem/kind/index.html @@ -14,7 +14,7 @@ ---
    {{APIRef("HTML Drag and Drop API")}}
    -

    DataTransferItem.kind 是一个只读属性,它返回一个 {{domxref("DataTransferItem")}} 用来表示拖拽项 (drag data item) 的类型: 一些文本或者一些文件。

    +

    DataTransferItem.kind 是一个只读属性,它返回一个 {{domxref("DataTransferItem")}} 用来表示拖拽项 (drag data item) 的类型: 一些文本或者一些文件。

    语法

    @@ -23,7 +23,7 @@

    语法

    返回值

    -

     {{domxref("DOMString")}} 用来表示拖拽项 (drag data item) 的类型. 它的值必须是以下值中的一个:

    +

    {{domxref("DOMString")}} 用来表示拖拽项 (drag data item) 的类型. 它的值必须是以下值中的一个:

    'file'
    @@ -34,7 +34,7 @@

    返回值

    例子

    -

    下面这个例子是 kind 属性的用法。

    +

    下面这个例子是 kind 属性的用法。

    function drop_handler(ev) {
      console.log("Drop");
    diff --git a/files/zh-cn/web/api/datatransferitem/type/index.html b/files/zh-cn/web/api/datatransferitem/type/index.html
    index 370bfc973956cf..861c7f6ef248ae 100644
    --- a/files/zh-cn/web/api/datatransferitem/type/index.html
    +++ b/files/zh-cn/web/api/datatransferitem/type/index.html
    @@ -5,9 +5,9 @@
     ---
     
    {{APIRef("HTML Drag and Drop API")}}
    -

    只读属性DataTransferItem.type 返回代表拖动数据项的 {{domxref("DataTransferItem")}} 对象的类型(格式)。  type 是一个 Unicode 字符串,通常由 MIME 给出,不过不需要 MIME 类型。

    +

    只读属性DataTransferItem.type 返回代表拖动数据项的 {{domxref("DataTransferItem")}} 对象的类型(格式)。 type 是一个 Unicode 字符串,通常由 MIME 给出,不过不需要 MIME 类型。

    -

    举例一些类型:text/plain 和 text/html.

    +

    举例一些类型:text/plaintext/html.

    语法

    @@ -16,7 +16,7 @@

    语法

    返回值

    -

    一个代表拖动数据项类型的 {{domxref("DOMString")}}。

    +

    一个代表拖动数据项类型的 {{domxref("DOMString")}}。

    示例

    diff --git a/files/zh-cn/web/api/datatransferitem/webkitgetasentry/index.html b/files/zh-cn/web/api/datatransferitem/webkitgetasentry/index.html index 9277575118232d..7e42e8a102f524 100644 --- a/files/zh-cn/web/api/datatransferitem/webkitgetasentry/index.html +++ b/files/zh-cn/web/api/datatransferitem/webkitgetasentry/index.html @@ -19,7 +19,7 @@

    参数

    返回值

    -

    FileSystemEntry基于 A 的对象描述被删除的项目。这将是FileSystemFileEntryFileSystemDirectoryEntry

    +

    FileSystemEntry基于 A 的对象描述被删除的项目。这将是FileSystemFileEntryFileSystemDirectoryEntry

    示例

    @@ -27,7 +27,7 @@

    示例

    HTML 内容

    -

    HTML 建立了放置区本身,它是<div>具有 ID 的元素"dropzone",以及带有 ID 的无序列表元素"listing"

    +

    HTML 建立了放置区本身,它是<div>具有 ID 的元素"dropzone",以及带有 ID 的无序列表元素"listing"

    <p>Drag files and/or directories to the box below!</p>
     
    @@ -101,9 +101,9 @@ 

    JavaScript 内容

    scanFiles()首先创建一个新<li>元素来表示正在扫描的项目,将项目的名称作为文本内容插入其中,然后将其附加到容器中。容器在此示例中始终是列表元素,您很快就会看到。

    -

    一旦当前项目在列表中,isDirectory就会检查项目的属性。如果该项目是目录,我们需要递归到该目录。第一步是创建一个FileSystemDirectoryReaderto 来处理获取目录的内容。这是通过调用 item 的createReader()方法完成的。然后<ul>创建一个 new 并将其附加到父列表; 这将包含列表层次结构中下一级别的目录内容。

    +

    一旦当前项目在列表中,isDirectory就会检查项目的属性。如果该项目是目录,我们需要递归到该目录。第一步是创建一个FileSystemDirectoryReaderto 来处理获取目录的内容。这是通过调用 item 的createReader()方法完成的。然后<ul>创建一个 new 并将其附加到父列表; 这将包含列表层次结构中下一级别的目录内容。

    -

    之后,directoryReader.readEntries()调用读取目录中的所有条目。反过来,这些都被传递到递归调用scanFiles()以处理它们。其中任何文件都只是插入到列表中; 将任何目录插入到列表中,并在下面添加列表层次结构的新级别,依此类推。

    +

    之后,directoryReader.readEntries()调用读取目录中的所有条目。反过来,这些都被传递到递归调用scanFiles()以处理它们。其中任何文件都只是插入到列表中; 将任何目录插入到列表中,并在下面添加列表层次结构的新级别,依此类推。

    然后是事件处理程序。首先,我们阻止dragover事件由默认处理程序处理,以便我们的 drop 区域可以接收 drop:

    diff --git a/files/zh-cn/web/api/datatransferitemlist/index.html b/files/zh-cn/web/api/datatransferitemlist/index.html index c75744ec06c1a6..2f2a0e4a489dbd 100644 --- a/files/zh-cn/web/api/datatransferitemlist/index.html +++ b/files/zh-cn/web/api/datatransferitemlist/index.html @@ -5,7 +5,7 @@ ---

    {{APIRef("HTML Drag and Drop API")}}

    -

    DataTransferItemList 对象是一组代表被拖动项的{{domxref("DataTransferItem")}} 对象的列表。在拖动操作期间,每个{{domxref("DragEvent")}} 都有一个 {{domxref("DragEvent.dataTransfer","dataTransfer")}} 属性,该属性是 DataTransferItemList.

    +

    DataTransferItemList 对象是一组代表被拖动项的{{domxref("DataTransferItem")}} 对象的列表。在拖动操作期间,每个{{domxref("DragEvent")}} 都有一个 {{domxref("DragEvent.dataTransfer","dataTransfer")}} 属性,该属性是 DataTransferItemList.

    该接口没有构造函数

    @@ -13,14 +13,14 @@

    属性

    {{domxref("DataTransferItemList.length")}} {{readonlyInline}}
    -
     无符号长整型 :列表中拖动项的数量。
    +
    无符号长整型 :列表中拖动项的数量。

    方法

    {{domxref("DataTransferItemList.add()")}}
    -
    向拖动项列表中添加新项 ({{domxref("File")}}对象或{{domxref("DOMString","string")}}),该方法返回一个 {{domxref("DataTransferItem")}} 对象。
    +
    向拖动项列表中添加新项 ({{domxref("File")}}对象或{{domxref("DOMString","string")}}),该方法返回一个 {{domxref("DataTransferItem")}} 对象。
    {{domxref("DataTransferItemList.remove()")}}
    根据索引删除拖动项列表中的对象。
    {{domxref("DataTransferItemList.clear()")}}
    diff --git a/files/zh-cn/web/api/datatransferitemlist/length/index.html b/files/zh-cn/web/api/datatransferitemlist/length/index.html index fb32b83ce6051b..57c8ab49641838 100644 --- a/files/zh-cn/web/api/datatransferitemlist/length/index.html +++ b/files/zh-cn/web/api/datatransferitemlist/length/index.html @@ -3,7 +3,7 @@ slug: Web/API/DataTransferItemList/length translation_of: Web/API/DataTransferItemList/length --- -

    {{domxref("DataTransferItemList")}} 接口的只读属性length 返回当前拖动项列表中项目的数量。

    +

    {{domxref("DataTransferItemList")}} 接口的只读属性length 返回当前拖动项列表中项目的数量。

    语法

    diff --git a/files/zh-cn/web/api/dedicatedworkerglobalscope/index.html b/files/zh-cn/web/api/dedicatedworkerglobalscope/index.html index de23b43c725a6b..b823500a51318f 100644 --- a/files/zh-cn/web/api/dedicatedworkerglobalscope/index.html +++ b/files/zh-cn/web/api/dedicatedworkerglobalscope/index.html @@ -22,7 +22,7 @@

    属性

    {{domxref("DedicatedWorkerGlobalScope.name")}} {{readOnlyinline}}
    -
    通过 {{domxref("Worker.Worker", "Worker()")}} 构造器创建 {{domxref("Worker")}} 时,可以选择为其设置一个名称,即此属性的值。这主要用于调试。
    +
    通过 {{domxref("Worker.Worker", "Worker()")}} 构造器创建 {{domxref("Worker")}} 时,可以选择为其设置一个名称,即此属性的值。这主要用于调试。

    从 WorkerGlobalScope 继承的属性

    @@ -31,13 +31,13 @@

    从 WorkerGlobalScope 继承的
    {{domxref("WorkerGlobalScope.self")}}
    返回一个指向 DedicatedWorkerGlobalScope 本身的对象引用。
    {{domxref("WorkerGlobalScope.console")}} {{readOnlyinline}}
    -
    返回与当前 worker 相关联的 {{domxref("Console")}}。
    +
    返回与当前 worker 相关联的 {{domxref("Console")}}。
    {{domxref("WorkerGlobalScope.location")}} {{readOnlyinline}}
    -
    返回与当前 worker 相关联的 {{domxref("WorkerLocation")}}。WorkerLocation 是一个 worker 专有的 location 对象,基本上是浏览器作用域下 {{domxref("Location")}} 的子集,但被被适配给了 worker。
    +
    返回与当前 worker 相关联的 {{domxref("WorkerLocation")}}。WorkerLocation 是一个 worker 专有的 location 对象,基本上是浏览器作用域下 {{domxref("Location")}} 的子集,但被被适配给了 worker。
    {{domxref("WorkerGlobalScope.navigator")}} {{readOnlyinline}}
    -
    返回与当前 worker 相关联的 {{domxref("WorkerNavigator")}}。WorkerNavigator 是一个 worker 专有的 navigator 对象,基本上是浏览器作用域下 {{domxref("Navigator")}} 的子集,但被被适配给了 worker。
    +
    返回与当前 worker 相关联的 {{domxref("WorkerNavigator")}}。WorkerNavigator 是一个 worker 专有的 navigator 对象,基本上是浏览器作用域下 {{domxref("Navigator")}} 的子集,但被被适配给了 worker。
    {{domxref("WorkerGlobalScope.performance")}} {{readOnlyinline}} {{Non-standard_inline}}
    -
    返回与当前 worker 相关联的 {{domxref("Performance")}},是一个正常的 performance 对象,但只有一部分属性和方法可用。
    +
    返回与当前 worker 相关联的 {{domxref("Performance")}},是一个正常的 performance 对象,但只有一部分属性和方法可用。

    事件处理器

    @@ -79,7 +79,7 @@

    从其他来源实现的方法

    {{domxref("WindowBase64.btoa()")}}
    从字符串生成使用 base-64 编码的 ASCII 字符串。
    {{domxref("WindowTimers.clearInterval()")}}
    -
    取消使用 {{domxref("WindowTimers.setInterval()")}} 创建的定时操作。
    +
    取消使用 {{domxref("WindowTimers.setInterval()")}} 创建的定时操作。
    {{domxref("WindowTimers.clearTimeout()")}}
    取消使用 {{domxref("WindowTimers.setTimeout()")}} 创建的定时操作。
    {{domxref("WindowTimers.setInterval()")}}
    diff --git a/files/zh-cn/web/api/devicemotionevent/devicemotionevent/index.html b/files/zh-cn/web/api/devicemotionevent/devicemotionevent/index.html index a756a8e1641fb7..8c2615b733dd2a 100644 --- a/files/zh-cn/web/api/devicemotionevent/devicemotionevent/index.html +++ b/files/zh-cn/web/api/devicemotionevent/devicemotionevent/index.html @@ -5,7 +5,7 @@ ---

    {{APIRef("Device Orientation Events")}}{{Non-standard_header}}

    -

    The DeviceMotionEvent constructor 会创建一个新的 {{DOMxRef("DeviceMotionEvent")}}.

    +

    The DeviceMotionEvent constructor 会创建一个新的 {{DOMxRef("DeviceMotionEvent")}}.

    语法

    @@ -15,14 +15,14 @@

    参数

    type
    -
    必须是 "devicemotion".
    +
    必须是 "devicemotion".
    options{{Optional_Inline}}
    可选项如下:
      -
    • acceleration: 一个对象,包含设备在 X,Y 和 Z 三个轴线上的加速度。加速度的单位为m/s2.
    • -
    • accelerationIncludingGravity: 一个对象,包含设备在 X,Y 和 Z 三个轴线上,重力作用下的加速度。加速度的单位为m/s2.
    • -
    • rotationRate: 一个对象,包含设备的定向在三个定向轴 alpha, beta 和 gamma 上的偏移比率。偏移比率的单位是每秒偏移的角度。
    • -
    • interval: 时间间隔,单位毫秒,表示设备获取数据的间隔时间。
    • +
    • acceleration: 一个对象,包含设备在 X,Y 和 Z 三个轴线上的加速度。加速度的单位为m/s2.
    • +
    • accelerationIncludingGravity: 一个对象,包含设备在 X,Y 和 Z 三个轴线上,重力作用下的加速度。加速度的单位为m/s2.
    • +
    • rotationRate: 一个对象,包含设备的定向在三个定向轴 alpha, beta 和 gamma 上的偏移比率。偏移比率的单位是每秒偏移的角度。
    • +
    • interval: 时间间隔,单位毫秒,表示设备获取数据的间隔时间。
    diff --git a/files/zh-cn/web/api/devicemotionevent/index.html b/files/zh-cn/web/api/devicemotionevent/index.html index 5111c0f6290767..3eb444657a3e07 100644 --- a/files/zh-cn/web/api/devicemotionevent/index.html +++ b/files/zh-cn/web/api/devicemotionevent/index.html @@ -14,7 +14,7 @@ ---

    {{apiref("Device Orientation Events")}}{{SeeCompatTable}}

    -

    DeviceMotionEvent 为 web 开发者提供了关于设备的位置和方向的改变速度的信息。

    +

    DeviceMotionEvent 为 web 开发者提供了关于设备的位置和方向的改变速度的信息。

    警告:目前,Firefox 和 Chrome 处理坐标的方式不同。 使用时要多加注意。

    @@ -23,8 +23,8 @@

    构造函数

    -
    {{DOMxRef("DeviceMotionEvent.DeviceMotionEvent()")}} {{Non-standard_Inline}}
    -
    创建一个新的 DeviceMotionEvent
    +
    {{DOMxRef("DeviceMotionEvent.DeviceMotionEvent()")}} {{Non-standard_Inline}}
    +
    创建一个新的 DeviceMotionEvent

    属性

    @@ -43,7 +43,7 @@

    属性

    示例

    window.addEventListener('devicemotion', function(event) {
    -  console.log(event.acceleration.x + ' m/s2');
    +  console.log(event.acceleration.x + ' m/s2');
     });

    规范

    diff --git a/files/zh-cn/web/api/devicemotioneventacceleration/index.html b/files/zh-cn/web/api/devicemotioneventacceleration/index.html index fcdd90679f3cda..b3cc6670640085 100644 --- a/files/zh-cn/web/api/devicemotioneventacceleration/index.html +++ b/files/zh-cn/web/api/devicemotioneventacceleration/index.html @@ -13,7 +13,7 @@ ---
    {{ ApiRef("Device Orientation Events") }}{{SeeCompatTable}}
    -
     
    +

    设备加速对象可以提供有关设备沿三个轴(x、y、z)的加速度的信息。

    diff --git a/files/zh-cn/web/api/deviceorientationevent/absolute/index.html b/files/zh-cn/web/api/deviceorientationevent/absolute/index.html index 220c6adcbb4838..66f3ad73cd333a 100644 --- a/files/zh-cn/web/api/deviceorientationevent/absolute/index.html +++ b/files/zh-cn/web/api/deviceorientationevent/absolute/index.html @@ -5,7 +5,7 @@ ---

    {{ apiref("Device Orientation Events") }}

    -

    表示该设备是否提供绝对定位数据 (这个数据是关于地球的坐标系) 或者使用了由设备决定的专门的坐标系。查看更多关于 Orientation and motion data explained 的细节。

    +

    表示该设备是否提供绝对定位数据 (这个数据是关于地球的坐标系) 或者使用了由设备决定的专门的坐标系。查看更多关于 Orientation and motion data explained 的细节。

    语法

    diff --git a/files/zh-cn/web/api/deviceorientationevent/alpha/index.html b/files/zh-cn/web/api/deviceorientationevent/alpha/index.html index de654baa856992..62da54966e0f7c 100644 --- a/files/zh-cn/web/api/deviceorientationevent/alpha/index.html +++ b/files/zh-cn/web/api/deviceorientationevent/alpha/index.html @@ -8,7 +8,7 @@ ---

    {{ ApiRef("Device Orientation Events") }}

    -

    返回设备旋转时 Z 轴的值;即:设备围绕屏幕中心扭转的角度。  详细信息请查看方向和运动数据

    +

    返回设备旋转时 Z 轴的值;即:设备围绕屏幕中心扭转的角度。 详细信息请查看方向和运动数据

    Syntax

    @@ -21,11 +21,11 @@

    Specifications

    Browser compatibility

    -

     

    +

    {{Compat("api.DeviceOrientationEvent.alpha")}}

    -

     

    +

    See also

    diff --git a/files/zh-cn/web/api/deviceorientationevent/beta/index.html b/files/zh-cn/web/api/deviceorientationevent/beta/index.html index d56091c5683442..da3a2ca511c8a0 100644 --- a/files/zh-cn/web/api/deviceorientationevent/beta/index.html +++ b/files/zh-cn/web/api/deviceorientationevent/beta/index.html @@ -5,7 +5,7 @@ ---

    {{ ApiRef("Device Orientation Events") }}

    -

    返回设备旋转时 X 轴的值。即: 角度的数值,范围介于-180 ------ 180 之间  表示设备正在向前或向后倾斜。更多信息见  方向和运动数据详解

    +

    返回设备旋转时 X 轴的值。即: 角度的数值,范围介于-180 ------ 180 之间 表示设备正在向前或向后倾斜。更多信息见 方向和运动数据详解

    语法

    diff --git a/files/zh-cn/web/api/deviceorientationevent/index.html b/files/zh-cn/web/api/deviceorientationevent/index.html index dfb5d9cd3020f7..a25cc64d6bf9ae 100644 --- a/files/zh-cn/web/api/deviceorientationevent/index.html +++ b/files/zh-cn/web/api/deviceorientationevent/index.html @@ -8,7 +8,7 @@

    DeviceOrientationEvent 提供给网页开发者当设备(指手机,平板等移动设备)在浏览页面时物理旋转的信息。

    -

    警告: 当前,火狐浏览器和谷歌浏览器并未能用同一种方式实现,在使用请注意。(见后文) 

    +

    警告: 当前,火狐浏览器和谷歌浏览器并未能用同一种方式实现,在使用请注意。(见后文)

    属性

    @@ -18,7 +18,7 @@

    属性

    用来说明设备是提供的旋转数据是否是绝对定位的布尔值。
    {{domxref("DeviceOrientationEvent.alpha")}} {{readonlyinline}}
    一个表示设备绕 z 轴旋转的角度(范围在 0-360 之间)的数字
    -
     
    +
    {{domxref("DeviceOrientationEvent.beta")}} {{readonlyinline}}
    一个表示设备绕 x 轴旋转(范围在-180 到 180 之间)的数字,从前到后的方向为正方向。
    {{domxref("DeviceOrientationEvent.gamma")}} {{readonlyinline}}
    @@ -28,7 +28,7 @@

    属性

    例子

    window.addEventListener('deviceorientation', function(event) {
    -  console.log(event.alpha + ' : ' + event.beta + ' : ' + event.gamma);
    +  console.log(event.alpha + ' : ' + event.beta + ' : ' + event.gamma);
     });

    规范

    diff --git a/files/zh-cn/web/api/deviceproximityevent/index.html b/files/zh-cn/web/api/deviceproximityevent/index.html index 0ea6adf92e5ae5..72b0a1d707f684 100644 --- a/files/zh-cn/web/api/deviceproximityevent/index.html +++ b/files/zh-cn/web/api/deviceproximityevent/index.html @@ -5,7 +5,7 @@ ---

    {{APIRef("Proximity Events")}}{{SeeCompatTable}}

    -

     DeviceProximityEvent 接口利用设备的近距离感应器提供有关邻近物品的距离信息。

    +

    DeviceProximityEvent 接口利用设备的近距离感应器提供有关邻近物品的距离信息。

    属性

    @@ -21,7 +21,7 @@

    属性

    示例

    window.addEventListener('deviceproximity', function(event) {
    -  console.log("value: " + event.value, "max: " + event.max, "min: " + event.min);
    +  console.log("value: " + event.value, "max: " + event.max, "min: " + event.min);
     });

    规范

    diff --git a/files/zh-cn/web/api/document/activeelement/index.html b/files/zh-cn/web/api/document/activeelement/index.html index 4acc70a942c185..85e939f2290a38 100644 --- a/files/zh-cn/web/api/document/activeelement/index.html +++ b/files/zh-cn/web/api/document/activeelement/index.html @@ -6,11 +6,11 @@ ---
    {{APIRef("Shadow DOM")}}
    -

    {{domxref("Document")}} 和 {{domxref("ShadowRoot")}} 接口的 activeElement 只读属性,用来返回当前在 DOM 或者 shadow DOM 树中处于聚焦状态的{{domxref("Element")}}。

    +

    {{domxref("Document")}} 和 {{domxref("ShadowRoot")}} 接口的 activeElement 只读属性,用来返回当前在 DOM 或者 shadow DOM 树中处于聚焦状态的{{domxref("Element")}}。

    -

    通常情况下,如果 {{domxref("HTMLInputElement")}} 或者 {{domxref("HTMLTextAreaElement")}}元素中有文字被选中时, activeElement属性就会返回该元素 。这时,你可以调用该元素的{{domxref("Document.selectionStart", "selectionStart")}} 和 {{domxref("Document.selectionEnd", "selectionEnd")}} 属性获取更多选中文字的信息。其他情况下,焦点元素也可能是{{HTMLElement("select")}}元素 (menu) 或者一个别的 {{HTMLElement("input")}} 元素,比如 "button", "checkbox", 或者 "radio".

    +

    通常情况下,如果 {{domxref("HTMLInputElement")}} 或者 {{domxref("HTMLTextAreaElement")}}元素中有文字被选中时, activeElement属性就会返回该元素 。这时,你可以调用该元素的{{domxref("Document.selectionStart", "selectionStart")}} 和 {{domxref("Document.selectionEnd", "selectionEnd")}} 属性获取更多选中文字的信息。其他情况下,焦点元素也可能是{{HTMLElement("select")}}元素 (menu) 或者一个别的 {{HTMLElement("input")}} 元素,比如 "button", "checkbox", 或者 "radio".

    -

    通常用户可以使用 tab 键来切换页面中的焦点元素获得焦点,使用空格键使元素 active (比如按下一个按钮或者 切换一个 radio). 具体哪些元素可以获得焦点与系统和浏览器的设置有关。比如,在 macOS 系统上,不是 text input 元素默认情况下是不能获得焦点的。

    +

    通常用户可以使用 tab 键来切换页面中的焦点元素获得焦点,使用空格键使元素 active (比如按下一个按钮或者 切换一个 radio). 具体哪些元素可以获得焦点与系统和浏览器的设置有关。比如,在 macOS 系统上,不是 text input 元素默认情况下是不能获得焦点的。

    Note: Focus (可收到 input 事件的元素) 和 selection (目前页面被高亮的部分) 不是一回事。你可以通过 {{domxref("window.getSelection()")}}获取当前用户选择的文本。

    @@ -22,7 +22,7 @@

    Syntax

    Value

    -

    当前获得焦点的 {{domxref('Element')}} ,如果没有焦点元素,会返回 {{HTMLElement("body")}} 或者 null 。

    +

    当前获得焦点的 {{domxref('Element')}} ,如果没有焦点元素,会返回 {{HTMLElement("body")}} 或者 null

    Example

    diff --git a/files/zh-cn/web/api/document/adoptnode/index.html b/files/zh-cn/web/api/document/adoptnode/index.html index 88e2eb5055a12e..cd864b861a44a2 100644 --- a/files/zh-cn/web/api/document/adoptnode/index.html +++ b/files/zh-cn/web/api/document/adoptnode/index.html @@ -5,9 +5,9 @@ ---
    {{ ApiRef("DOM") }}
    -
     
    +
    -

    从其他的 document 文档中获取一个节点。 该节点以及它的子树上的所有节点都会从原文档删除 (如果有这个节点的话), 并且它的ownerDocument 属性会变成当前的 document 文档。 之后你可以把这个节点插入到当前文档中。

    +

    从其他的 document 文档中获取一个节点。 该节点以及它的子树上的所有节点都会从原文档删除 (如果有这个节点的话), 并且它的ownerDocument 属性会变成当前的 document 文档。 之后你可以把这个节点插入到当前文档中。

    从 Gecko 1.9 (Firefox 3) 开始支持

    @@ -17,8 +17,8 @@

    语法

    -
       node
    -
    导入当前文档的新节点。新节点的 parentNode 是 null, 因为它还没有插入当前文档的文档树中,属于游离状态.   
    +
    node
    +
    导入当前文档的新节点。新节点的 parentNodenull, 因为它还没有插入当前文档的文档树中,属于游离状态.
    externalNode
    将要从外部文档导入的节点。
    @@ -28,13 +28,13 @@

    例子

    // 该函数用来从本文档的第一个 iframe 中获取第一个 element 元素,
     // 并插入到当前文档树中
     function getEle(){
    -    var iframe = document.getElementsByTagName("iframe")[0],
    -        ele = iframe.contentWindow.document.body.firstElementChild
    -        if(ele){
    -            document.body.appendChild(document.adoptNode(ele))
    -        }else{
    -            alert("没有更多元素了")
    -        }
    +    var iframe = document.getElementsByTagName("iframe")[0],
    +        ele = iframe.contentWindow.document.body.firstElementChild
    +        if(ele){
    +            document.body.appendChild(document.adoptNode(ele))
    +        }else{
    +            alert("没有更多元素了")
    +        }
     }
     document.getElementById("move").onclick = getEle
     
    diff --git a/files/zh-cn/web/api/document/alinkcolor/index.html b/files/zh-cn/web/api/document/alinkcolor/index.html index f4e13f664ee6e1..5d1c8fa232c518 100644 --- a/files/zh-cn/web/api/document/alinkcolor/index.html +++ b/files/zh-cn/web/api/document/alinkcolor/index.html @@ -26,8 +26,8 @@

    注意

    这个属性在 Mozilla Firefox 浏览器的默认值是红色的(#ee0000 十六进制)。

    - document.alinkcolor 在 DOM Level 2 HTML 中不推荐使用。可以使用 CSS 伪类选择器 {{ Cssxref(":active") }}。
    + document.alinkcolor 在 DOM Level 2 HTML 中不推荐使用。可以使用 CSS 伪类选择器 {{ Cssxref(":active") }}。

    - 另一种选择是使用 document.body.alink,虽然这在 HTML 4.01 中可以用 CSS 使用替代。
    + 另一种选择是使用 document.body.alink,虽然这在 HTML 4.01 中可以用 CSS 使用替代。

    - Gecko 支持 alinkcolor/:active 和 {{ Cssxref(":focus") }}。在 Internet Explorer 6/7 中 alinkcolor/:active 仅在  HTML Elemeint A 上有效。

    + Gecko 支持 alinkcolor/:active 和 {{ Cssxref(":focus") }}。在 Internet Explorer 6/7 中 alinkcolor/:active 仅在 HTML Elemeint A 上有效。

    diff --git a/files/zh-cn/web/api/document/all/index.html b/files/zh-cn/web/api/document/all/index.html index bc1485d4074ef4..0fe62bcc17e1f2 100644 --- a/files/zh-cn/web/api/document/all/index.html +++ b/files/zh-cn/web/api/document/all/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef("DOM")}}{{Deprecated_Header("HTML5")}}
    -

    {{domxref("Document")}} 接口上的一个只读属性。返回一个 {{domxref("HTMLAllCollection")}},包含了页面上的所有元素。

    +

    {{domxref("Document")}} 接口上的一个只读属性。返回一个 {{domxref("HTMLAllCollection")}},包含了页面上的所有元素。

    语法

    @@ -13,7 +13,7 @@

    语法

    -

    返回一个 {{domxref("HTMLAllCollection")}},包含了页面上的所有元素。

    +

    返回一个 {{domxref("HTMLAllCollection")}},包含了页面上的所有元素。

    规范

    diff --git a/files/zh-cn/web/api/document/anchors/index.html b/files/zh-cn/web/api/document/anchors/index.html index 5acef3d078dc90..63ff30242f76b8 100644 --- a/files/zh-cn/web/api/document/anchors/index.html +++ b/files/zh-cn/web/api/document/anchors/index.html @@ -5,11 +5,11 @@ ---

    {{APIRef("DOM")}}

    -

     

    +

    {{deprecated_header()}}

    -

     

    +

    概述

    diff --git a/files/zh-cn/web/api/document/bgcolor/index.html b/files/zh-cn/web/api/document/bgcolor/index.html index 6eb92f0419b22f..a14f49dd4e8ae5 100644 --- a/files/zh-cn/web/api/document/bgcolor/index.html +++ b/files/zh-cn/web/api/document/bgcolor/index.html @@ -5,7 +5,7 @@ ---

    {{APIRef("DOM")}}{{ Deprecated_header() }}

    -

     bgColor 获取/设置当前文档的背景颜色

    +

    bgColor 获取/设置当前文档的背景颜色

    语法

    @@ -16,7 +16,7 @@

    语法

    参数

      -
    • color 表示颜色的字符串如“red”,或者是十六进制的色值如“#ff0000”。
    • +
    • color 表示颜色的字符串如“red”,或者是十六进制的色值如“#ff0000”。

    示例

    @@ -28,4 +28,4 @@

    笔记

    这个属性在 Mozilla Firefox 中的默认值是白色“#ffffff”。

    -

    document.bgColor 在 DOM Level 2 HTML 中已经不推荐使用。 推荐使用 CSS 的 background-color 或者 document.body.style.backgroundColor 来给文档设置背景颜色。 另外一种方式是使用 document.body.bgColor, 这种方式也已经不推荐使用了。

    +

    document.bgColorDOM Level 2 HTML 中已经不推荐使用。 推荐使用 CSS 的 background-color 或者 document.body.style.backgroundColor 来给文档设置背景颜色。 另外一种方式是使用 document.body.bgColor, 这种方式也已经不推荐使用了。

    diff --git a/files/zh-cn/web/api/document/caretrangefrompoint/index.html b/files/zh-cn/web/api/document/caretrangefrompoint/index.html index 430196e18db7b4..501dfd7e163848 100644 --- a/files/zh-cn/web/api/document/caretrangefrompoint/index.html +++ b/files/zh-cn/web/api/document/caretrangefrompoint/index.html @@ -3,9 +3,9 @@ slug: Web/API/Document/caretRangeFromPoint translation_of: Web/API/Document/caretRangeFromPoint --- -

    {{APIRef("DOM")}}{{Non-standard_header}} 

    +

    {{APIRef("DOM")}}{{Non-standard_header}}

    -

    {{domxref("Document")}} 的 caretRangeFromPoint() 方法返回一个 Range 对象(指定坐标的文档片段)。

    +

    {{domxref("Document")}} 的 caretRangeFromPoint() 方法返回一个 Range 对象(指定坐标的文档片段)。

    语法

    @@ -18,7 +18,7 @@

    返回

    • A {{domxref("Range")}}.
    • -
    • Null, 若 x 或 y 不存在、在视图外或在没有文本节点的位置。
    • +
    • Null, 若 xy 不存在、在视图外或在没有文本节点的位置。

    参数

    @@ -45,37 +45,37 @@

    JavaScript Content

    function insertBreakAtPoint(e) {
     
    -    var range;
    -    var textNode;
    -    var offset;
    -
    -    if (document.caretPositionFromPoint) {
    -        range = document.caretPositionFromPoint(e.clientX, e.clientY);
    -        textNode = range.offsetNode;
    -        offset = range.offset;
    -
    -    } else if (document.caretRangeFromPoint) {
    -        range = document.caretRangeFromPoint(e.clientX, e.clientY);
    -        textNode = range.startContainer;
    -        offset = range.startOffset;
    -    }
    -
    -    // only split TEXT_NODEs
    -    if (textNode && textNode.nodeType == 3) {
    -        var replacement = textNode.splitText(offset);
    -        var br = document.createElement('br');
    -        textNode.parentNode.insertBefore(br, replacement);
    -    }
    +    var range;
    +    var textNode;
    +    var offset;
    +
    +    if (document.caretPositionFromPoint) {
    +        range = document.caretPositionFromPoint(e.clientX, e.clientY);
    +        textNode = range.offsetNode;
    +        offset = range.offset;
    +
    +    } else if (document.caretRangeFromPoint) {
    +        range = document.caretRangeFromPoint(e.clientX, e.clientY);
    +        textNode = range.startContainer;
    +        offset = range.startOffset;
    +    }
    +
    +    // only split TEXT_NODEs
    +    if (textNode && textNode.nodeType == 3) {
    +        var replacement = textNode.splitText(offset);
    +        var br = document.createElement('br');
    +        textNode.parentNode.insertBefore(br, replacement);
    +    }
     }
     
     var paragraphs = document.getElementsByTagName("p");
     for (i=0 ; i < paragraphs.length; i++) {
    -    paragraphs[i].addEventListener("click", insertBreakAtPoint, false);
    +    paragraphs[i].addEventListener("click", insertBreakAtPoint, false);
     }

    {{ EmbedLiveSample('Example', '', '', '', 'Web/API/Document/caretRangeFromPoint') }}

    -

     

    +

    浏览器兼容性

    diff --git a/files/zh-cn/web/api/document/cookie/index.html b/files/zh-cn/web/api/document/cookie/index.html index 6ba03afc06e7d0..b65cc9560d4316 100644 --- a/files/zh-cn/web/api/document/cookie/index.html +++ b/files/zh-cn/web/api/document/cookie/index.html @@ -18,7 +18,7 @@
    读取所有可从此位置
    allCookies = document.cookie;
    -

    在上面的代码中,allCookies 被赋值为一个字符串,该字符串包含所有的 Cookie,每条 cookie 以"分号和空格 (; )"分隔 (即, key=value 键值对)。

    +

    在上面的代码中,allCookies 被赋值为一个字符串,该字符串包含所有的 Cookie,每条 cookie 以"分号和空格 (; )"分隔 (即, key=value 键值对)。

    @@ -29,12 +29,12 @@
    • 以下可选的 cookie 属性值可以跟在键值对后,用来具体化对 cookie 的设定/更新,使用分号以作分隔:
        -
      • ;path=path (例如 '/', '/mydir') 如果没有定义,默认为当前文档位置的路径。
      • -
      • ;domain=domain (例如 'example.com', 'subdomain.example.com') 如果没有定义,默认为当前文档位置的路径的域名部分。与早期规范相反的是,在域名前面加 . 符将会被忽视,因为浏览器也许会拒绝设置这样的 cookie。如果指定了一个域,那么子域也包含在内。
      • +
      • ;path=path (例如 '/', '/mydir') 如果没有定义,默认为当前文档位置的路径。
      • +
      • ;domain=domain (例如 'example.com', 'subdomain.example.com') 如果没有定义,默认为当前文档位置的路径的域名部分。与早期规范相反的是,在域名前面加 . 符将会被忽视,因为浏览器也许会拒绝设置这样的 cookie。如果指定了一个域,那么子域也包含在内。
      • ;max-age=max-age-in-seconds (例如一年为 60*60*24*365)
      • -
      • ;expires=date-in-GMTString-format 如果没有定义,cookie 会在对话结束时过期 +
      • ;expires=date-in-GMTString-format 如果没有定义,cookie 会在对话结束时过期
      • ;secure (cookie 只通过 https 协议传输)
      • @@ -44,7 +44,7 @@
      -

      备注: 在{{Gecko("6.0")}}前,被引号括起的路径的引号会被当做路径的一部分,而不是被当做定界符。现在已被修复。

      +

      备注: 在{{Gecko("6.0")}}前,被引号括起的路径的引号会被当做路径的一部分,而不是被当做定界符。现在已被修复。

      示例

      @@ -70,7 +70,7 @@

      示例 2: 得到名为 test2 的 coo

      示例 3: 只执行某事一次

      -

      要使下面的代码工作,请替换所有someCookieName (cookie 的名字) 为自定义的名字。

      +

      要使下面的代码工作,请替换所有someCookieName (cookie 的名字) 为自定义的名字。

      if (document.cookie.replace(/(?:(?:^|.*;\s*)someCookieName\s*\=\s*([^;]*).*$)|^.*$/, "$1") !== "true") {
         alert("Do something here!");
      @@ -83,68 +83,68 @@ 

      一个小框架:一个完整支持 unicode 的 cookie 读取/写入器

      -

      作为一个格式化过的字符串,cookie 的值有时很难被自然地处理。下面的库的目的是通过定义一个和Storage 对象部分一致的对象(docCookies),简化document.cookie 的获取方法。它提供完全的 Unicode 支持。

      +

      作为一个格式化过的字符串,cookie 的值有时很难被自然地处理。下面的库的目的是通过定义一个和Storage 对象部分一致的对象(docCookies),简化document.cookie 的获取方法。它提供完全的 Unicode 支持。

      /*\
       |*|
      -|*|  :: cookies.js ::
      +|*|  :: cookies.js ::
       |*|
      -|*|  A complete cookies reader/writer framework with full unicode support.
      +|*|  A complete cookies reader/writer framework with full unicode support.
       |*|
      -|*|  https://developer.mozilla.org/en-US/docs/DOM/document.cookie
      +|*|  https://developer.mozilla.org/en-US/docs/DOM/document.cookie
       |*|
      -|*|  This framework is released under the GNU Public License, version 3 or later.
      -|*|  http://www.gnu.org/licenses/gpl-3.0-standalone.html
      +|*|  This framework is released under the GNU Public License, version 3 or later.
      +|*|  http://www.gnu.org/licenses/gpl-3.0-standalone.html
       |*|
      -|*|  Syntaxes:
      +|*|  Syntaxes:
       |*|
      -|*|  * docCookies.setItem(name, value[, end[, path[, domain[, secure]]]])
      -|*|  * docCookies.getItem(name)
      -|*|  * docCookies.removeItem(name[, path], domain)
      -|*|  * docCookies.hasItem(name)
      -|*|  * docCookies.keys()
      +|*|  * docCookies.setItem(name, value[, end[, path[, domain[, secure]]]])
      +|*|  * docCookies.getItem(name)
      +|*|  * docCookies.removeItem(name[, path], domain)
      +|*|  * docCookies.hasItem(name)
      +|*|  * docCookies.keys()
       |*|
       \*/
       
       var docCookies = {
      -  getItem: function (sKey) {
      -    return decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURIComponent(sKey).replace(/[-.+*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1")) || null;
      -  },
      -  setItem: function (sKey, sValue, vEnd, sPath, sDomain, bSecure) {
      -    if (!sKey || /^(?:expires|max\-age|path|domain|secure)$/i.test(sKey)) { return false; }
      -    var sExpires = "";
      -    if (vEnd) {
      -      switch (vEnd.constructor) {
      -        case Number:
      -          sExpires = vEnd === Infinity ? "; expires=Fri, 31 Dec 9999 23:59:59 GMT" : "; max-age=" + vEnd;
      -          break;
      -        case String:
      -          sExpires = "; expires=" + vEnd;
      -          break;
      -        case Date:
      -          sExpires = "; expires=" + vEnd.toUTCString();
      -          break;
      -      }
      -    }
      -    document.cookie = encodeURIComponent(sKey) + "=" + encodeURIComponent(sValue) + sExpires + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : "") + (bSecure ? "; secure" : "");
      -    return true;
      -  },
      -  removeItem: function (sKey, sPath, sDomain) {
      -    if (!sKey || !this.hasItem(sKey)) { return false; }
      -    document.cookie = encodeURIComponent(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT" + ( sDomain ? "; domain=" + sDomain : "") + ( sPath ? "; path=" + sPath : "");
      -    return true;
      -  },
      -  hasItem: function (sKey) {
      -    return (new RegExp("(?:^|;\\s*)" + encodeURIComponent(sKey).replace(/[-.+*]/g, "\\$&") + "\\s*\\=")).test(document.cookie);
      -  },
      -  keys: /* optional method: you can safely remove it! */ function () {
      -    var aKeys = document.cookie.replace(/((?:^|\s*;)[^\=]+)(?=;|$)|^\s*|\s*(?:\=[^;]*)?(?:\1|$)/g, "").split(/\s*(?:\=[^;]*)?;\s*/);
      -    for (var nIdx = 0; nIdx < aKeys.length; nIdx++) { aKeys[nIdx] = decodeURIComponent(aKeys[nIdx]); }
      -    return aKeys;
      -  }
      +  getItem: function (sKey) {
      +    return decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURIComponent(sKey).replace(/[-.+*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1")) || null;
      +  },
      +  setItem: function (sKey, sValue, vEnd, sPath, sDomain, bSecure) {
      +    if (!sKey || /^(?:expires|max\-age|path|domain|secure)$/i.test(sKey)) { return false; }
      +    var sExpires = "";
      +    if (vEnd) {
      +      switch (vEnd.constructor) {
      +        case Number:
      +          sExpires = vEnd === Infinity ? "; expires=Fri, 31 Dec 9999 23:59:59 GMT" : "; max-age=" + vEnd;
      +          break;
      +        case String:
      +          sExpires = "; expires=" + vEnd;
      +          break;
      +        case Date:
      +          sExpires = "; expires=" + vEnd.toUTCString();
      +          break;
      +      }
      +    }
      +    document.cookie = encodeURIComponent(sKey) + "=" + encodeURIComponent(sValue) + sExpires + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : "") + (bSecure ? "; secure" : "");
      +    return true;
      +  },
      +  removeItem: function (sKey, sPath, sDomain) {
      +    if (!sKey || !this.hasItem(sKey)) { return false; }
      +    document.cookie = encodeURIComponent(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT" + ( sDomain ? "; domain=" + sDomain : "") + ( sPath ? "; path=" + sPath : "");
      +    return true;
      +  },
      +  hasItem: function (sKey) {
      +    return (new RegExp("(?:^|;\\s*)" + encodeURIComponent(sKey).replace(/[-.+*]/g, "\\$&") + "\\s*\\=")).test(document.cookie);
      +  },
      +  keys: /* optional method: you can safely remove it! */ function () {
      +    var aKeys = document.cookie.replace(/((?:^|\s*;)[^\=]+)(?=;|$)|^\s*|\s*(?:\=[^;]*)?(?:\1|$)/g, "").split(/\s*(?:\=[^;]*)?;\s*/);
      +    for (var nIdx = 0; nIdx < aKeys.length; nIdx++) { aKeys[nIdx] = decodeURIComponent(aKeys[nIdx]); }
      +    return aKeys;
      +  }
       };
      -
      Note: 对于永久 cookie 我们用了Fri, 31 Dec 9999 23:59:59 GMT作为过期日。如果你不想使用这个日期,可使用世界末日Tue, 19 Jan 2038 03:14:07 GMT,它是 32 位带符号整数能表示从 1 January 1970 00:00:00 UTC 开始的最大秒长 (即01111111111111111111111111111111, 是 new Date(0x7fffffff * 1e3)).
      +
      Note: 对于永久 cookie 我们用了Fri, 31 Dec 9999 23:59:59 GMT作为过期日。如果你不想使用这个日期,可使用世界末日Tue, 19 Jan 2038 03:14:07 GMT,它是 32 位带符号整数能表示从 1 January 1970 00:00:00 UTC 开始的最大秒长 (即01111111111111111111111111111111, 是 new Date(0x7fffffff * 1e3)).

      写入 cookie

      @@ -164,11 +164,11 @@
      参数
      value (必要)
      cookie 的值 (string)。
      end (可选)
      -
      最大年龄的秒数 (一年为 31536e3, 永不过期的 cookie 为Infinity) ,或者过期时间的GMTString格式或Date 对象; 如果没有定义则会在会话结束时过期 (number – 有限的或 Infinitystring, Date object or null)。
      +
      最大年龄的秒数 (一年为 31536e3, 永不过期的 cookie 为Infinity) ,或者过期时间的GMTString格式或Date 对象; 如果没有定义则会在会话结束时过期 (number – 有限的或 Infinitystring, Date object or null)。
      path (可选)
      -
      例如 '/', '/mydir'。 如果没有定义,默认为当前文档位置的路径。(string or null)。路径必须为绝对路径(参见 RFC 2965)。关于如何在这个参数使用相对路径的方法请参见这段
      +
      例如 '/', '/mydir'。 如果没有定义,默认为当前文档位置的路径。(string or null)。路径必须为绝对路径(参见 RFC 2965)。关于如何在这个参数使用相对路径的方法请参见这段
      domain (可选)
      -
      例如 'example.com', '.example.com' (包括所有子域名), 'subdomain.example.com'。如果没有定义,默认为当前文档位置的路径的域名部分 (stringnull)。
      +
      例如 'example.com', '.example.com' (包括所有子域名), 'subdomain.example.com'。如果没有定义,默认为当前文档位置的路径的域名部分 (stringnull)。
      secure (可选)
      cookie 只会被 https 传输 (booleannull)。
    @@ -187,7 +187,7 @@
    参数
    name
    -
    读取的 cookie 名 (string).
    +
    读取的 cookie 名 (string).

    移除 cookie

    @@ -206,9 +206,9 @@
    参数
    name
    要移除的 cookie 名 (string).
    path (可选)
    -
    例如 '/', '/mydir'。 如果没有定义,默认为当前文档位置的路径。(string or null)。路径必须为绝对路径(参见 RFC 2965)。关于如何在这个参数使用相对路径的方法请参见这段
    +
    例如 '/', '/mydir'。 如果没有定义,默认为当前文档位置的路径。(string or null)。路径必须为绝对路径(参见 RFC 2965)。关于如何在这个参数使用相对路径的方法请参见这段
    domain (可选)
    -
    例如 'example.com', '.example.com' (包括所有子域名), 'subdomain.example.com'。如果没有定义,默认为当前文档位置的路径的域名部分 (stringnull)。
    +
    例如 'example.com', '.example.com' (包括所有子域名), 'subdomain.example.com'。如果没有定义,默认为当前文档位置的路径的域名部分 (stringnull)。

    检测 cookie

    diff --git a/files/zh-cn/web/api/document/createattribute/index.html b/files/zh-cn/web/api/document/createattribute/index.html index 37758ab4cfe1cd..ca6db1fe3b49ee 100644 --- a/files/zh-cn/web/api/document/createattribute/index.html +++ b/files/zh-cn/web/api/document/createattribute/index.html @@ -29,7 +29,7 @@

    返回值

    异常

      -
    • INVALID_CHARACTER_ERR 如果参数含有非法的 XML 属性字符。
    • +
    • INVALID_CHARACTER_ERR 如果参数含有非法的 XML 属性字符。

    例子

    diff --git a/files/zh-cn/web/api/document/createdocumentfragment/index.html b/files/zh-cn/web/api/document/createdocumentfragment/index.html index 446cee2155207f..34a77f02218ab2 100644 --- a/files/zh-cn/web/api/document/createdocumentfragment/index.html +++ b/files/zh-cn/web/api/document/createdocumentfragment/index.html @@ -11,20 +11,20 @@ ---
    {{ ApiRef("DOM") }}
    -
     
    +
    -

    创建一个新的空白的文档片段 ( DocumentFragment)。

    +

    创建一个新的空白的文档片段 ( DocumentFragment)。

    语法

    let fragment = document.createDocumentFragment();
     
    -

    fragment 是一个指向空{{domxref("DocumentFragment")}}对象的引用。

    +

    fragment 是一个指向空{{domxref("DocumentFragment")}}对象的引用。

    描述

    -

    DocumentFragments 是 DOM 节点。它们不是主 DOM 树的一部分。通常的用例是创建文档片段,将元素附加到文档片段,然后将文档片段附加到 DOM 树。在 DOM 树中,文档片段被其所有的子元素所代替。

    +

    DocumentFragments 是 DOM 节点。它们不是主 DOM 树的一部分。通常的用例是创建文档片段,将元素附加到文档片段,然后将文档片段附加到 DOM 树。在 DOM 树中,文档片段被其所有的子元素所代替。

    因为文档片段存在于内存中,并不在 DOM 树中,所以将子元素插入到文档片段时不会引起页面回流(对元素位置和几何上的计算)。因此,使用文档片段通常会带来更好的性能。

    diff --git a/files/zh-cn/web/api/document/createelement/index.html b/files/zh-cn/web/api/document/createelement/index.html index 86b0a68865c030..ce9aa4eda19fd2 100644 --- a/files/zh-cn/web/api/document/createelement/index.html +++ b/files/zh-cn/web/api/document/createelement/index.html @@ -24,7 +24,7 @@

    参数

    tagName
    指定要创建元素类型的字符串,创建元素时的 {{domxref("Node.nodeName", "nodeName")}} 使用 tagName 的值为初始化,该方法不允许使用限定名称 (如:"html:a"),在 HTML 文档上调用 createElement() 方法创建元素之前会将tagName 转化成小写,在 Firefox、Opera 和 Chrome 内核中,createElement(null) 等同于 createElement("null")
    options{{optional_inline}}
    -
    一个可选的参数 ElementCreationOptions 是包含一个属性名为 is 的对象,该对象的值是用 customElements.define() 方法定义过的一个自定义元素的标签名。为了向前兼容较老版本的 Custom Elements specification, 有一些浏览器会允许你传一个值为自定义元素的标签名的字符串作为该参数的值。可以参考本页下方的 Web component 示例 Google 的 Extending native HTML elements 文档仔细了解如何使用该参数。
    +
    一个可选的参数 ElementCreationOptions 是包含一个属性名为 is 的对象,该对象的值是用 customElements.define() 方法定义过的一个自定义元素的标签名。为了向前兼容较老版本的 Custom Elements specification, 有一些浏览器会允许你传一个值为自定义元素的标签名的字符串作为该参数的值。可以参考本页下方的 Web component 示例 Google 的 Extending native HTML elements 文档仔细了解如何使用该参数。

    返回值

    @@ -72,7 +72,7 @@

    JavaScript

    Web component 示例

    -

    以下示例片段取自我们的 expanding-list-web-component 示例 (实时查看)。 在这个案例中, 我们的自定义元素继承了以 {{htmlelement("ul")}} 元素为代表的 {{domxref("HTMLUListElement")}}.

    +

    以下示例片段取自我们的 expanding-list-web-component 示例 (实时查看)。 在这个案例中, 我们的自定义元素继承了以 {{htmlelement("ul")}} 元素为代表的 {{domxref("HTMLUListElement")}}.

    // 为新元素创建一个类
     class ExpandingList extends HTMLUListElement {
    @@ -96,19 +96,19 @@ 

    Web component 示例

    新元素将被赋予is属性,其值为自定义元素的标签名称。

    -

    Note: 为了兼容之前版本的 Custom Elements specification 规范,某些浏览器将允许您在此处传递字符串而不是对象,其中字符串的值是自定义元素的标记名。

    +

    Note: 为了兼容之前版本的 Custom Elements specification 规范,某些浏览器将允许您在此处传递字符串而不是对象,其中字符串的值是自定义元素的标记名。

    注意

      -
    • 在一个 XUL 文档中,该方法创建指定的 XUL 元素。在其他文档中,它创建一个命名空间 URI 为 null 的元素,这时,新元素会继承文档的命名空间。
    • +
    • 在一个 XUL 文档中,该方法创建指定的 XUL 元素。在其他文档中,它创建一个命名空间 URI 为 null 的元素,这时,新元素会继承文档的命名空间。
    • 若要显式指定元素的命名空间 URI,请使用 document.createElementNS()
    • 当在一个被标记为 HTML 文档的文档对象上执行时,createElement() 优先将参数转换为小写。
    • 当创建一个带限制条件的元素时,请使用{{ domxref("document.createElementNS()") }}。
    • Gecko 2.0{{ geckoRelease("2.0") }}之前,quirks 模式下 tagName 可以包含尖括号 (<和>);从 Gecko2.0 开始,该方法在 quirks 模式和标准模式下表现一致。
    • 从 Gecko19.0{{ geckoRelease("19.0") }}开始, createElement(null)createElement("null") 相同。Opera 也会将 null 字符串化,但是 Chrome 和 IE 都会抛出错误。
    • -
    • 从 Gecko22.0{{geckoRelease("22.0")}}开始,当参数为"bgsounds", "multicol", 或"image"时, createElement() 不再使用 {{domxref("HTMLSpanElement")}} 接口, 参数为 "bgsound" 和 "multicol" 时,使用 HTMLUnknownElement ,为“image”时使用{{domxref("HTMLElement")}} HTMLElement
    • +
    • 从 Gecko22.0{{geckoRelease("22.0")}}开始,当参数为"bgsounds", "multicol", 或"image"时, createElement() 不再使用 {{domxref("HTMLSpanElement")}} 接口, 参数为 "bgsound" 和 "multicol" 时,使用 HTMLUnknownElement ,为“image”时使用{{domxref("HTMLElement")}} HTMLElement
    • createElement 的 Gecko 实现不遵循 XUL 和 XHTML 的 DOM 说明文档:创建元素的localNamenamespaceURI 不会被设置为 null. 更多细节详见 {{Bug(280692)}}。
    diff --git a/files/zh-cn/web/api/document/createelementns/index.html b/files/zh-cn/web/api/document/createelementns/index.html index 90e5f07d0a6294..b0e3def3a7f488 100644 --- a/files/zh-cn/web/api/document/createelementns/index.html +++ b/files/zh-cn/web/api/document/createelementns/index.html @@ -12,7 +12,7 @@

    创建一个具有指定的命名空间 URI 和限定名称的元素。

    -

    要创建一个元素而不指定命名空间 URI,请使用  createElement 方法。

    +

    要创建一个元素而不指定命名空间 URI,请使用 createElement 方法。

    语法

    @@ -24,9 +24,9 @@

    参数

    namespaceURI
    -
    指定与元素相关联的命名空间 URI的字符串。创建的元素的namespaceURI属性使用 namespaceURI 的值进行初始化。 参见有效的命名空间 URL
    +
    指定与元素相关联的命名空间 URI的字符串。创建的元素的namespaceURI属性使用 namespaceURI 的值进行初始化。 参见有效的命名空间 URL
    qualifiedName
    -
    指定要创建的元素的类型的字符串。 创建的元素的nodeName属性使用 qualifiedName 的值进行初始化。
    +
    指定要创建的元素的类型的字符串。 创建的元素的nodeName属性使用 qualifiedName 的值进行初始化。
    options可选的
    一个可选的包含单个属性的 ElementCreationOptions 对象,其值是预先使用 customElements.define() 定义的自定义元素的标签名称。为了向后兼容自定义元素规范的早期版本,一些浏览器允许您在此使用字符串替代对象,其中字符串的值是自定义元素的标签名称。有关如何使用此参数的详情,请参阅原生 HTML 元素
    新元素将被赋予一个属性,其值是自定义元素的标签名称。 自定义元素是实验中的功能,目前仅在某些浏览器中可用。
    @@ -39,10 +39,10 @@

    返回值

    有效的命名空间 URI

      -
    • HTML - 参阅 http://www.w3.org/1999/xhtml
    • -
    • SVG - 参阅 http://www.w3.org/2000/svg
    • +
    • HTML - 参阅 http://www.w3.org/1999/xhtml
    • +
    • SVG - 参阅 http://www.w3.org/2000/svg
    • XBL - 参阅 http://www.mozilla.org/xbl
    • -
    • XUL - 参阅 http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul
    • +
    • XUL - 参阅 http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul

    示例

    diff --git a/files/zh-cn/web/api/document/createevent/index.html b/files/zh-cn/web/api/document/createevent/index.html index 9713212b947a8b..fbb3308bdaa9b9 100644 --- a/files/zh-cn/web/api/document/createevent/index.html +++ b/files/zh-cn/web/api/document/createevent/index.html @@ -4,14 +4,14 @@ translation_of: Web/API/Document/createEvent ---
    -

    createEvent 使用的许多方法,如 initCustomEvent,都被废弃了。请使用 event constructors 来替代。

    +

    createEvent 使用的许多方法,如 initCustomEvent,都被废弃了。请使用 event constructors 来替代。

    {{ ApiRef("DOM") }}
    -
     
    +
    -

    创建一个指定类型的事件。其返回的对象必须先初始化并可以被传递给 element.dispatchEvent

    +

    创建一个指定类型的事件。其返回的对象必须先初始化并可以被传递给 element.dispatchEvent

    语法

    @@ -19,8 +19,8 @@

    语法

      -
    • event 就是被创建的 Event 对象。
    • -
    • type 是一个字符串,表示要创建的事件类型。事件类型可能包括"UIEvents", "MouseEvents", "MutationEvents", 或者 "HTMLEvents"。请查看 Notes 章节获取详细信息 。
    • +
    • event 就是被创建的 Event 对象。
    • +
    • type 是一个字符串,表示要创建的事件类型。事件类型可能包括"UIEvents", "MouseEvents", "MutationEvents", 或者 "HTMLEvents"。请查看 Notes 章节获取详细信息 。

    示例

    @@ -56,7 +56,7 @@

    注意

    事件模块 - 传递给 createEvent 的 Event type + 传递给 createEvent 的 Event type 事件初始化方法 @@ -184,6 +184,6 @@

    规范

  • DOM Level 3 Events: createEvent
  • -

     

    +

    -

     

    +

    diff --git a/files/zh-cn/web/api/document/createnodeiterator/index.html b/files/zh-cn/web/api/document/createnodeiterator/index.html index 5c5d877fb77f7d..2e14c8f71d6741 100644 --- a/files/zh-cn/web/api/document/createnodeiterator/index.html +++ b/files/zh-cn/web/api/document/createnodeiterator/index.html @@ -9,7 +9,7 @@ ---

    {{APIRef("DOM")}}

    -

    返回一个新的 NodeIterator 对象。

    +

    返回一个新的 NodeIterator 对象。

    语法

    @@ -21,7 +21,7 @@

    参数

    root
    {{ domxref("NodeIterator") }}遍历起始处的根节点。
    whatToShow {{ optional_inline() }}
    -
    是一个可选的无符号长整型(unsigned long), 是由节点过滤器(NodeFilter)中的常量属性定义的位掩码。这是筛选特定类型节点的便捷方式。其默认值是 0xFFFFFFFF ,代表 SHOW_ALL 常量。 +
    是一个可选的无符号长整型(unsigned long), 是由节点过滤器(NodeFilter)中的常量属性定义的位掩码。这是筛选特定类型节点的便捷方式。其默认值是 0xFFFFFFFF ,代表 SHOW_ALL 常量。 @@ -31,7 +31,7 @@

    参数

    - + @@ -42,12 +42,12 @@

    参数

    - + - + @@ -87,29 +87,29 @@

    参数

    - + - +
    NodeFilter.SHOW_ALL-1 (即unsigned long 的最大值)-1 (即unsigned long 的最大值) 显示所有节点。
    NodeFilter.SHOW_CDATA_SECTION {{deprecated_inline}} 8显示 {{ domxref("CDATASection") }} 节点。显示 {{ domxref("CDATASection") }} 节点。
    NodeFilter.SHOW_COMMENT 128显示 {{ domxref("Comment") }} 节点。显示 {{ domxref("Comment") }} 节点。
    NodeFilter.SHOW_DOCUMENT
    NodeFilter.SHOW_PROCESSING_INSTRUCTION 64显示 {{ domxref("ProcessingInstruction") }} 节点。显示 {{ domxref("ProcessingInstruction") }} 节点。
    NodeFilter.SHOW_TEXT 4显示 {{ domxref("Text") }} 节点。显示 {{ domxref("Text") }} 节点。
    filter {{ optional_inline() }}
    -
    是实现 {{ domxref("NodeFilter") }} 接口的对象; 其 acceptNode() 方法会对从根节点开始到子树中的每个节点都调用一次,哪些节点需要进入迭代节点列表等待调用则取决于 whatToShow 参数(也可以使用一个简单的回调函数代替acceptNode())。该方法需要返回下列常量之一: NodeFilter.FILTER_ACCEPT ,NodeFilter.FILTER_REJECTNodeFilter.FILTER_SKIP(见NodeFilter),参见示例
    +
    是实现 {{ domxref("NodeFilter") }} 接口的对象; 其 acceptNode() 方法会对从根节点开始到子树中的每个节点都调用一次,哪些节点需要进入迭代节点列表等待调用则取决于 whatToShow 参数(也可以使用一个简单的回调函数代替acceptNode())。该方法需要返回下列常量之一: NodeFilter.FILTER_ACCEPTNodeFilter.FILTER_REJECTNodeFilter.FILTER_SKIP(见NodeFilter),参见示例
    -
    注意: 在 Gecko12.0{{ geckoRelease("12.0") }}以前,这个方法接收第四个可选的参数(entityReferenceExpansion),这不是 DOM4 规范中的一部分,因此被移除了。这个参数表示实体引用节点的子代对于迭代器是否可见。因为浏览器不会创建这样的节点,这个参数没有任何作用。
    +
    注意: 在 Gecko12.0{{ geckoRelease("12.0") }}以前,这个方法接收第四个可选的参数(entityReferenceExpansion),这不是 DOM4 规范中的一部分,因此被移除了。这个参数表示实体引用节点的子代对于迭代器是否可见。因为浏览器不会创建这样的节点,这个参数没有任何作用。

    示例

    const nodeIterator = document.createNodeIterator(
    -    document.body,
    -    NodeFilter.SHOW_ELEMENT,
    -    {
    -      acceptNode(node) {
    +    document.body,
    +    NodeFilter.SHOW_ELEMENT,
    +    {
    +      acceptNode(node) {
             return node.nodeName.toLowerCase() === 'p' ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
           }
         }
    @@ -118,7 +118,7 @@ 

    示例

    let currentNode; while (currentNode = nodeIterator.nextNode()) { -  pars.push(currentNode); + pars.push(currentNode); }
    diff --git a/files/zh-cn/web/api/document/creatensresolver/index.html b/files/zh-cn/web/api/document/creatensresolver/index.html index a22a56f5e54cfd..30d9fbb07ea398 100644 --- a/files/zh-cn/web/api/document/creatensresolver/index.html +++ b/files/zh-cn/web/api/document/creatensresolver/index.html @@ -5,7 +5,7 @@ ---

    {{ ApiRef("DOM") }}

    -

    创建一个 XPathNSResolver which resolves namespaces with respect to the definitions in scope for 指定节点

    +

    创建一个 XPathNSResolver which resolves namespaces with respect to the definitions in scope for 指定节点

    语法

    diff --git a/files/zh-cn/web/api/document/createprocessinginstruction/index.html b/files/zh-cn/web/api/document/createprocessinginstruction/index.html index 75647deb881312..3a6db944174ae4 100644 --- a/files/zh-cn/web/api/document/createprocessinginstruction/index.html +++ b/files/zh-cn/web/api/document/createprocessinginstruction/index.html @@ -5,7 +5,7 @@ ---

    {{APIRef("DOM")}}

    -

    createProcessingInstruction() 创建一个新的处理指令节点,并返回。

    +

    createProcessingInstruction() 创建一个新的处理指令节点,并返回。

    Syntax

    @@ -15,8 +15,8 @@

    Syntax

    Parameters

      -
    • Processing Instruction node 是 {{ domxref("ProcessingInstruction") }} 节点。
    • -
    • target 是指处理指令节点的 target 部分 (i.e., <?target ... ?>
    • +
    • Processing Instruction node 是 {{ domxref("ProcessingInstruction") }} 节点。
    • +
    • target 是指处理指令节点的 target 部分 (i.e., <?target ... ?>
    • data 是一个字符串,包含了将要添加到节点内的数据。
    diff --git a/files/zh-cn/web/api/document/createtreewalker/index.html b/files/zh-cn/web/api/document/createtreewalker/index.html index 1269506fe0cf44..a3ce677b5939c6 100644 --- a/files/zh-cn/web/api/document/createtreewalker/index.html +++ b/files/zh-cn/web/api/document/createtreewalker/index.html @@ -23,7 +23,7 @@

    参数

    root
    是遍历这个 {{domxref("TreeWalker")}} 的根节点 (root {{domxref("Node")}})。通常这是文档的一个元素。
    whatToShow {{optional_inline}}
    -
    一个无符号长整型,表示一个整合自 NodeFilter 常量属性的位掩码。这是筛选特定类型节点的便捷方式。默认为 0xFFFFFFFF,表示 SHOW_ALL 常量。 +
    一个无符号长整型,表示一个整合自 NodeFilter 常量属性的位掩码。这是筛选特定类型节点的便捷方式。默认为 0xFFFFFFFF,表示 SHOW_ALL 常量。 @@ -100,18 +100,18 @@

    参数

    filter {{optional_inline}}
    -
    一个可选的 {{domxref("NodeFilter")}},即一个具有 acceptNode 方法的对象,此方法被 {{domxref("TreeWalker")}} 调用以决定是否接受已通过 whatToShow 检查的节点。
    +
    一个可选的 {{domxref("NodeFilter")}},即一个具有 acceptNode 方法的对象,此方法被 {{domxref("TreeWalker")}} 调用以决定是否接受已通过 whatToShow 检查的节点。
    entityReferenceExpansion {{optional_inline}} {{Deprecated_Inline}}
    -
    一个 {{domxref("Boolean")}} 标识,指示当丢弃一个 {{domxref("EntityReference")}} 时是否同时丢弃其子树。
    +
    一个 {{domxref("Boolean")}} 标识,指示当丢弃一个 {{domxref("EntityReference")}} 时是否同时丢弃其子树。

    返回值

    -

    一个新的 {{domxref("TreeWalker")}} 对象。

    +

    一个新的 {{domxref("TreeWalker")}} 对象。

    示例

    -

    以下示例遍历 body 下的所有节点,将节点集合缩小至元素,简单地传递每个可接受的节点(也可在 acceptNode() 方法中缩小集合),然后利用创建的 TreeWalker 迭代器在节点上推进(现在是所有的元素)并把它们推入一个数组。

    +

    以下示例遍历 body 下的所有节点,将节点集合缩小至元素,简单地传递每个可接受的节点(也可在 acceptNode() 方法中缩小集合),然后利用创建的 TreeWalker 迭代器在节点上推进(现在是所有的元素)并把它们推入一个数组。

    var treeWalker = document.createTreeWalker(
       document.body,
    diff --git a/files/zh-cn/web/api/document/defaultview/index.html b/files/zh-cn/web/api/document/defaultview/index.html
    index 9a31b12f5fdadd..9224757d262d5a 100644
    --- a/files/zh-cn/web/api/document/defaultview/index.html
    +++ b/files/zh-cn/web/api/document/defaultview/index.html
    @@ -25,7 +25,7 @@ 

    备注

    规范

    diff --git a/files/zh-cn/web/api/document/designmode/index.html b/files/zh-cn/web/api/document/designmode/index.html index f4b910b52f2b9e..0eb912948875bf 100644 --- a/files/zh-cn/web/api/document/designmode/index.html +++ b/files/zh-cn/web/api/document/designmode/index.html @@ -14,7 +14,7 @@ ---
    {{ ApiRef()}}
    -

    document.designMode 控制整个文档是否可编辑。有效值为 "on""off" 。根据规范,该属性默认为 "off" 。Firefox 遵循此标准。早期版本的 Chrome 和 IE 默认为 "inherit" 。从 Chrome 43 开始,默认值为 "off" ,并且不再支持  "inherit"。在 IE6 到 IE10 中,该值为大写。

    +

    document.designMode 控制整个文档是否可编辑。有效值为 "on""off" 。根据规范,该属性默认为 "off" 。Firefox 遵循此标准。早期版本的 Chrome 和 IE 默认为 "inherit" 。从 Chrome 43 开始,默认值为 "off" ,并且不再支持 "inherit"。在 IE6 到 IE10 中,该值为大写。

    语法

    diff --git a/files/zh-cn/web/api/document/document/index.html b/files/zh-cn/web/api/document/document/index.html index aa470e48b709ef..a55b33af1fc05b 100644 --- a/files/zh-cn/web/api/document/document/index.html +++ b/files/zh-cn/web/api/document/document/index.html @@ -10,7 +10,7 @@ ---

    {{APIRef}}

    -

    Document 构造器创建一个新的 {{domxref("Document")}} 对象,该对象是在浏览器中加载的页面,并作为页面内容的入口点。

    +

    Document 构造器创建一个新的 {{domxref("Document")}} 对象,该对象是在浏览器中加载的页面,并作为页面内容的入口点。

    语法

    diff --git a/files/zh-cn/web/api/document/documentelement/index.html b/files/zh-cn/web/api/document/documentelement/index.html index 752ac466b8cff8..93c15f989e5575 100644 --- a/files/zh-cn/web/api/document/documentelement/index.html +++ b/files/zh-cn/web/api/document/documentelement/index.html @@ -34,9 +34,9 @@

    备注

    对于任何非空 HTML 文档,调用 document.documentElement 总是会返回一个 {{HTMLElement("html")}} 元素,且它一定是该文档的根元素。借助这个只读属性,能方便地获取到任意文档的根元素。

    -

    HTML 文档通常包含一个子节点 {{HTMLElement("html")}},但在它前面可能还有个 DOCTYPE 声明。XML 文档通常包含多个子节点:根元素,DOCTYPE 声明,和 processing instructions

    +

    HTML 文档通常包含一个子节点 {{HTMLElement("html")}},但在它前面可能还有个 DOCTYPE 声明。XML 文档通常包含多个子节点:根元素,DOCTYPE 声明,和 processing instructions

    -

    所以,应当使用 document.documentElement 来获取根元素,而不是 {{Domxref("document.firstChild")}}。

    +

    所以,应当使用 document.documentElement 来获取根元素,而不是 {{Domxref("document.firstChild")}}。

    规范

    diff --git a/files/zh-cn/web/api/document/documenturi/index.html b/files/zh-cn/web/api/document/documenturi/index.html index b3bfa62a07da90..91f40a509b191d 100644 --- a/files/zh-cn/web/api/document/documenturi/index.html +++ b/files/zh-cn/web/api/document/documenturi/index.html @@ -9,13 +9,13 @@ ---
    {{ApiRef("DOM")}}
    -
    {{domxref("Document")}} 接口的属性 documentURI 以字符串的形式返回文档的位置(location)。
    +
    {{domxref("Document")}} 接口的属性 documentURI 以字符串的形式返回文档的位置(location)。
    -
     
    +
    在最初的 DOM3 定义中,这个属性是可读/写的。在现代的 DOM 标准(DOM4)中,它是只读的。
    -
     
    +

    语法

    @@ -24,7 +24,7 @@

    语法

    备注

    -

    HTML 文档有一个 {{domxref("document.URL")}} 属性返回同样的值。但是不像 URLdocumentURI 适用于所有类型的文档。

    +

    HTML 文档有一个 {{domxref("document.URL")}} 属性返回同样的值。但是不像 URLdocumentURI 适用于所有类型的文档。

    规范

    diff --git a/files/zh-cn/web/api/document/domain/index.html b/files/zh-cn/web/api/document/domain/index.html index 98f6f03d34dacf..9fb1b66f2c49aa 100644 --- a/files/zh-cn/web/api/document/domain/index.html +++ b/files/zh-cn/web/api/document/domain/index.html @@ -77,7 +77,7 @@

    Firefox 备注

    根域名范围内,Mozilla 允许你把 domain 属性的值设置为它的上一级域。例如,在 developer.mozilla.org 域内,可以把 domain 设置为 "mozilla.org" 但不能设置为 "mozilla.com" 或者"org"。

    -

    Mozilla 会区分 document.domain 属性 从没有被设定过值 被显示的设定为跟该文档的 URL 的 domain 一致的值,尽管这两种状况下,该属性会返回同样的值。两个文档,只有在 document.domain 都被设定为同一个值,表明他们打算协作;或者都没有设定 document.domain 属性并且 URL 的域是一致的 (如何判断一致),这两种条件下,一个文档才可以去访问另一个文档。如果没有这个特殊的策略,每一个站点都会成为他的子域的 XSS 攻击的对象(例如,https://bugzilla.mozilla.org 可以被来自 https://bug*.bugzilla.mozilla.org 站点的 bug 附件攻击)。

    +

    Mozilla 会区分 document.domain 属性 从没有被设定过值 被显示的设定为跟该文档的 URL 的 domain 一致的值,尽管这两种状况下,该属性会返回同样的值。两个文档,只有在 document.domain 都被设定为同一个值,表明他们打算协作;或者都没有设定 document.domain 属性并且 URL 的域是一致的 (如何判断一致),这两种条件下,一个文档才可以去访问另一个文档。如果没有这个特殊的策略,每一个站点都会成为他的子域的 XSS 攻击的对象(例如,https://bugzilla.mozilla.org 可以被来自 https://bug*.bugzilla.mozilla.org 站点的 bug 附件攻击)。

    参见

    diff --git a/files/zh-cn/web/api/document/domcontentloaded_event/index.html b/files/zh-cn/web/api/document/domcontentloaded_event/index.html index e223005da9d12e..6bc222b6897e94 100644 --- a/files/zh-cn/web/api/document/domcontentloaded_event/index.html +++ b/files/zh-cn/web/api/document/domcontentloaded_event/index.html @@ -7,7 +7,7 @@ ---
    {{APIRef}}
    -

    当纯 HTML 被完全加载以及解析时,DOMContentLoaded 事件会被触发,而不必等待样式表,图片或者子框架完成加载。

    +

    当纯 HTML 被完全加载以及解析时,DOMContentLoaded 事件会被触发,而不必等待样式表,图片或者子框架完成加载。

    @@ -43,7 +43,7 @@

    基本用法

    }); -

     延迟 DOMContentLoaded

    +

    延迟 DOMContentLoaded

    <script>
       document.addEventListener('DOMContentLoaded', (event) => {
    diff --git a/files/zh-cn/web/api/document/dragover_event/index.html b/files/zh-cn/web/api/document/dragover_event/index.html
    index 7cba9b61d30026..eaf3bbad5e425c 100644
    --- a/files/zh-cn/web/api/document/dragover_event/index.html
    +++ b/files/zh-cn/web/api/document/dragover_event/index.html
    @@ -12,7 +12,7 @@
     ---
     
    {{APIRef}}
    -

    当元素或者选择的文本被拖拽到一个有效的放置目标上时,触发 dragover 事件(每几百毫秒触发一次)。

    +

    当元素或者选择的文本被拖拽到一个有效的放置目标上时,触发 dragover 事件(每几百毫秒触发一次)。

    这个事件在可被放置元素的节点上触发。

    diff --git a/files/zh-cn/web/api/document/dragstart_event/index.html b/files/zh-cn/web/api/document/dragstart_event/index.html index 09b29ec0f79613..3bac5a3eccb426 100644 --- a/files/zh-cn/web/api/document/dragstart_event/index.html +++ b/files/zh-cn/web/api/document/dragstart_event/index.html @@ -8,7 +8,7 @@ - 拖动 translation_of: Web/API/Document/dragstart_event --- -
    当用户开始拖动一个元素或者一个选择文本的时候 dragstart 事件就会触发。
    +
    当用户开始拖动一个元素或者一个选择文本的时候 dragstart 事件就会触发。

    基本信息

    @@ -156,9 +156,9 @@

    示例:dropzone

    HTML 内容

    <div class="dropzone">
    -    <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
    -        This div is draggable
    -    </div>
    +    <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
    +        This div is draggable
    +    </div>
     </div>
     <div class="dropzone"></div>
     <div class="dropzone"></div>
    @@ -166,75 +166,75 @@ 

    HTML 内容

    CSS 内容

    -
      #draggable {
    -    width: 200px;
    -    height: 20px;
    -    text-align: center;
    -    background: white;
    -  }
    +
      #draggable {
    +    width: 200px;
    +    height: 20px;
    +    text-align: center;
    +    background: white;
    +  }
     
    -  .dropzone {
    -    width: 200px;
    -    height: 20px;
    -    background: blueviolet;
    -    margin-bottom: 10px;
    -    padding: 10px;
    -  }
    + .dropzone { + width: 200px; + height: 20px; + background: blueviolet; + margin-bottom: 10px; + padding: 10px; + }

    JavaScript 内容

    -
      var dragged;
    +
      var dragged;
     
    -  /* 可拖动的目标元素会触发事件 */
    -  document.addEventListener("drag", function( event ) {
    +  /* 可拖动的目标元素会触发事件 */
    +  document.addEventListener("drag", function( event ) {
     
    -  }, false);
    +  }, false);
     
    -  document.addEventListener("dragstart", function( event ) {
    -      // 保存拖动元素的引用 (ref.)
    -      dragged = event.target;
    -      // 使其半透明
    -      event.target.style.opacity = .5;
    -  }, false);
    +  document.addEventListener("dragstart", function( event ) {
    +      // 保存拖动元素的引用 (ref.)
    +      dragged = event.target;
    +      // 使其半透明
    +      event.target.style.opacity = .5;
    +  }, false);
     
    -  document.addEventListener("dragend", function( event ) {
    -      // 重置透明度
    -      event.target.style.opacity = "";
    -  }, false);
    +  document.addEventListener("dragend", function( event ) {
    +      // 重置透明度
    +      event.target.style.opacity = "";
    +  }, false);
     
    -  /* 放下目标节点时触发事件 */
    -  document.addEventListener("dragover", function( event ) {
    -      // 阻止默认动作
    -      event.preventDefault();
    -  }, false);
    +  /* 放下目标节点时触发事件 */
    +  document.addEventListener("dragover", function( event ) {
    +      // 阻止默认动作
    +      event.preventDefault();
    +  }, false);
     
    -  document.addEventListener("dragenter", function( event ) {
    -      // 当可拖动的元素进入可放置的目标高亮目标节点
    -      if ( event.target.className == "dropzone" ) {
    -          event.target.style.background = "purple";
    -      }
    +  document.addEventListener("dragenter", function( event ) {
    +      // 当可拖动的元素进入可放置的目标高亮目标节点
    +      if ( event.target.className == "dropzone" ) {
    +          event.target.style.background = "purple";
    +      }
     
    -  }, false);
    +  }, false);
     
    -  document.addEventListener("dragleave", function( event ) {
    -      // 当拖动元素离开可放置目标节点,重置其背景
    -      if ( event.target.className == "dropzone" ) {
    -          event.target.style.background = "";
    -      }
    +  document.addEventListener("dragleave", function( event ) {
    +      // 当拖动元素离开可放置目标节点,重置其背景
    +      if ( event.target.className == "dropzone" ) {
    +          event.target.style.background = "";
    +      }
     
    -  }, false);
    +  }, false);
     
    -  document.addEventListener("drop", function( event ) {
    -      // 阻止默认动作(如打开一些元素的链接)
    -      event.preventDefault();
    -      // 移动拖动的元素到所选择的放置目标节点
    -      if ( event.target.className == "dropzone" ) {
    -          event.target.style.background = "";
    -          dragged.parentNode.removeChild( dragged );
    -          event.target.appendChild( dragged );
    -      }
    +  document.addEventListener("drop", function( event ) {
    +      // 阻止默认动作(如打开一些元素的链接)
    +      event.preventDefault();
    +      // 移动拖动的元素到所选择的放置目标节点
    +      if ( event.target.className == "dropzone" ) {
    +          event.target.style.background = "";
    +          dragged.parentNode.removeChild( dragged );
    +          event.target.appendChild( dragged );
    +      }
     
    -  }, false);
    + }, false);

    {{ EmbedLiveSample('示例:dropzone') }}

    diff --git a/files/zh-cn/web/api/document/drop_event/index.html b/files/zh-cn/web/api/document/drop_event/index.html index ac5900dea7e112..468e890cb78775 100644 --- a/files/zh-cn/web/api/document/drop_event/index.html +++ b/files/zh-cn/web/api/document/drop_event/index.html @@ -16,7 +16,7 @@ ---
    {{APIRef}}
    -

    当一个元素或是选中的文字被拖拽释放到一个有效的释放目标位置时,drop 事件被抛出。

    +

    当一个元素或是选中的文字被拖拽释放到一个有效的释放目标位置时,drop 事件被抛出。

    基本信息

    diff --git a/files/zh-cn/web/api/document/elementfrompoint/index.html b/files/zh-cn/web/api/document/elementfrompoint/index.html index c067855b1d207b..44c1175d59676d 100644 --- a/files/zh-cn/web/api/document/elementfrompoint/index.html +++ b/files/zh-cn/web/api/document/elementfrompoint/index.html @@ -6,7 +6,7 @@ ---

    {{APIRef("Shadow DOM")}}{{SeeCompatTable}}

    -

    {{domxref("DocumentOrShadowRoot")}} 接口的 elementFromPoint() 方法返回给定坐标点下最上层的 {{domxref('element')}} 元素。 

    +

    {{domxref("DocumentOrShadowRoot")}} 接口的 elementFromPoint() 方法返回给定坐标点下最上层的 {{domxref('element')}} 元素。

    If the element at the specified point belongs to another document (for example, an iframe's subdocument), the subdocument's parent element is returned (the iframe itself). If the element at the given point is anonymous or XBL generated content, such as a textbox's scroll bars, then the first non-anonymous ancestor element (for example, the textbox) is returned.

    diff --git a/files/zh-cn/web/api/document/embeds/index.html b/files/zh-cn/web/api/document/embeds/index.html index 9310a875e5e72b..729749e574b41b 100644 --- a/files/zh-cn/web/api/document/embeds/index.html +++ b/files/zh-cn/web/api/document/embeds/index.html @@ -14,7 +14,7 @@ ---

    {{ ApiRef() }}

    -

    {{domxref("Document")}}接口的只读属性embeds 返回当前文档内的<embed>HTML {{htmlelement("object")}}元素列表

    +

    {{domxref("Document")}}接口的只读属性embeds 返回当前文档内的<embed>HTML {{htmlelement("object")}}元素列表

    语法

    diff --git a/files/zh-cn/web/api/document/execcommand/index.html b/files/zh-cn/web/api/document/execcommand/index.html index 36206fad308607..a31a2d4188f5ce 100644 --- a/files/zh-cn/web/api/document/execcommand/index.html +++ b/files/zh-cn/web/api/document/execcommand/index.html @@ -10,9 +10,9 @@ ---
    {{ApiRef("DOM")}}{{deprecated_header}}
    -

    当一个 HTML 文档切换到设计模式时,document暴露 execCommand 方法,该方法允许运行命令来操纵可编辑内容区域的元素。

    +

    当一个 HTML 文档切换到设计模式时,document暴露 execCommand 方法,该方法允许运行命令来操纵可编辑内容区域的元素。

    -

    大多数命令影响document的 selection(粗体,斜体等),当其他命令插入新元素(添加链接)或影响整行(缩进)。当使用contentEditable时,调用 execCommand() 将影响当前活动的可编辑元素。

    +

    大多数命令影响documentselection(粗体,斜体等),当其他命令插入新元素(添加链接)或影响整行(缩进)。当使用contentEditable时,调用 execCommand() 将影响当前活动的可编辑元素。

    语法

    @@ -21,7 +21,7 @@

    语法

    返回值

    -

    一个 {{jsxref('Boolean')}} ,如果是 false 则表示操作不被支持或未被启用。

    +

    一个 {{jsxref('Boolean')}} ,如果是 false 则表示操作不被支持或未被启用。

    注意:在调用一个命令前,不要尝试使用返回值去校验浏览器的兼容性

    @@ -31,7 +31,7 @@

    参数

    aCommandName
    -
    一个 {{domxref("DOMString")}} ,命令的名称。可用命令列表请参阅 命令
    +
    一个 {{domxref("DOMString")}} ,命令的名称。可用命令列表请参阅 命令
    aShowDefaultUI
    一个 {{jsxref("Boolean")}}, 是否展示用户界面,一般为 false。Mozilla 没有实现。
    aValueArgument
    @@ -54,9 +54,9 @@

    命令

    createLink
    将选中内容创建为一个锚链接。这个命令需要一个hrefURI 字符串作为参数值传入。URI 必须包含至少一个字符,例如一个空格。(浏览器会创建一个空链接)
    cut
    -
     剪贴当前选中的文字并复制到剪贴板。启用这个功能的条件因浏览器不同而不同,而且不同时期,其启用条件也不尽相同。使用之前请检查浏览器兼容表,以确定是否可用。
    +
    剪贴当前选中的文字并复制到剪贴板。启用这个功能的条件因浏览器不同而不同,而且不同时期,其启用条件也不尽相同。使用之前请检查浏览器兼容表,以确定是否可用。
    decreaseFontSize
    -
     给选中文字加上 {{HTMLElement("small")}} 标签,或在选中点插入该标签。(IE 浏览器不支持)
    +
    给选中文字加上 {{HTMLElement("small")}} 标签,或在选中点插入该标签。(IE 浏览器不支持)
    defaultParagraphSeparator
    更改在可编辑文本区域中创建新段落时使用的段落分隔符。有关更多详细信息,请参阅标记生成的差异
    delete
    @@ -74,13 +74,13 @@

    命令

    foreColor
    在插入点或者选中文字部分修改字体颜色。需要提供一个颜色值字符串作为参数。
    formatBlock
    -
    添加一个 HTML 块式标签在包含当前选择的行,如果已经存在了,更换包含该行的块元素 (在 Firefox 中,BLOCKQUOTE 是一个例外 -它将包含任何包含块元素). 需要提供一个标签名称字符串作为参数。几乎所有的块样式标签都可以使用 (例如. "H1", "P", "DL", "BLOCKQUOTE"). (IE 浏览器仅仅支持标题标签 H1 - H6, ADDRESS,和 PRE,使用时还必须包含标签分隔符 < >, 例如 "<H1>".)
    +
    添加一个 HTML 块式标签在包含当前选择的行,如果已经存在了,更换包含该行的块元素 (在 Firefox 中,BLOCKQUOTE 是一个例外 -它将包含任何包含块元素). 需要提供一个标签名称字符串作为参数。几乎所有的块样式标签都可以使用 (例如. "H1", "P", "DL", "BLOCKQUOTE"). (IE 浏览器仅仅支持标题标签 H1 - H6, ADDRESS,和 PRE,使用时还必须包含标签分隔符 < >, 例如 "<H1>".)
    forwardDelete
    删除光标所在位置的字符。 和按下删除键一样。
    heading
    添加一个标题标签在光标处或者所选文字上。 需要提供标签名称字符串作为参数 (例如. "H1", "H6"). (IE 和 Safari 不支持)
    hiliteColor
    -
    更改选择或插入点的背景颜色。需要一个颜色值字符串作为值参数传递。 UseCSS 必须开启此功能。(IE 浏览器不支持)
    +
    更改选择或插入点的背景颜色。需要一个颜色值字符串作为值参数传递。 UseCSS 必须开启此功能。(IE 浏览器不支持)
    increaseFontSize
    在选择或插入点周围添加一个 BIG 标签。(IE 浏览器不支持)
    indent
    @@ -102,7 +102,7 @@

    命令

    insertText
    在光标插入位置插入文本内容或者覆盖所选的文本内容。
    italic
    -
    在光标插入点开启或关闭斜体字。 (Internet Explorer 使用 EM 标签,而不是 I )
    +
    在光标插入点开启或关闭斜体字。 (Internet Explorer 使用 EM 标签,而不是 I )
    justifyCenter
    对光标插入位置或者所选内容进行文字居中。
    justifyFull
    @@ -114,7 +114,7 @@

    命令

    outdent
    对光标插入行或者所选行内容减少缩进量。
    paste
    -
    在光标位置粘贴剪贴板的内容,如果有被选中的内容,会被替换。剪贴板功能必须在 user.js 配置文件中启用。参阅 [1].
    +
    在光标位置粘贴剪贴板的内容,如果有被选中的内容,会被替换。剪贴板功能必须在 user.js 配置文件中启用。参阅 [1].
    redo
    重做被撤销的操作。
    removeFormat
    @@ -144,7 +144,7 @@

    命令

    示例

    -

    CodePen 中关于 如何使用 如何使用的一个例子。

    +

    CodePen 中关于 如何使用 如何使用的一个例子。

    规范

    diff --git a/files/zh-cn/web/api/document/exitfullscreen/index.html b/files/zh-cn/web/api/document/exitfullscreen/index.html index f528574747011a..3bc36aed1f3785 100644 --- a/files/zh-cn/web/api/document/exitfullscreen/index.html +++ b/files/zh-cn/web/api/document/exitfullscreen/index.html @@ -5,9 +5,9 @@ ---
    {{ApiRef("Fullscreen API")}}
    -

    Document.exitFullscreen() 方法用于让当前文档退出全屏模式(原文表述不准确,详见备注)。调用这个方法会让文档回退到上一个调用{{domxref("Element.requestFullscreen()")}}方法进入全屏模式之前的状态。

    +

    Document.exitFullscreen() 方法用于让当前文档退出全屏模式(原文表述不准确,详见备注)。调用这个方法会让文档回退到上一个调用{{domxref("Element.requestFullscreen()")}}方法进入全屏模式之前的状态。

    -
    备注: 如果一个元素 A 在请求进去全屏模式之前,已经存在其他元素处于全屏状态,当这个元素 A 退出全屏模式之后,之前的元素仍然处于全屏状态。浏览器内部维护了一个全屏元素栈用于实现这个目的。
    +
    备注: 如果一个元素 A 在请求进去全屏模式之前,已经存在其他元素处于全屏状态,当这个元素 A 退出全屏模式之后,之前的元素仍然处于全屏状态。浏览器内部维护了一个全屏元素栈用于实现这个目的。

    语法

    diff --git a/files/zh-cn/web/api/document/exitpointerlock/index.html b/files/zh-cn/web/api/document/exitpointerlock/index.html index d6adb26c520526..3478011565b5e1 100644 --- a/files/zh-cn/web/api/document/exitpointerlock/index.html +++ b/files/zh-cn/web/api/document/exitpointerlock/index.html @@ -7,7 +7,7 @@

    {{ seeCompatTable }}

    -

    exitPointerLock 方法可异步的解锁鼠标(通过{{domxref("Element.requestPointerLock")}}锁定的)。

    +

    exitPointerLock 方法可异步的解锁鼠标(通过{{domxref("Element.requestPointerLock")}}锁定的)。

    追踪是否解锁成功,需要监听{{event("pointerlockchange")}} 和{{event("pointerlockerror")}} 事件。

    diff --git a/files/zh-cn/web/api/document/fonts/index.html b/files/zh-cn/web/api/document/fonts/index.html index c68b6656b74ccc..54f86746984e46 100644 --- a/files/zh-cn/web/api/document/fonts/index.html +++ b/files/zh-cn/web/api/document/fonts/index.html @@ -3,7 +3,7 @@ slug: Web/API/Document/fonts translation_of: Web/API/Document/fonts --- -

    {{domxref("Document")}}的 fonts 属性接口返回文档的 {{domxref("FontFaceSet")}} 接口。

    +

    {{domxref("Document")}}的 fonts 属性接口返回文档的 {{domxref("FontFaceSet")}} 接口。

    语法

    diff --git a/files/zh-cn/web/api/document/forms/index.html b/files/zh-cn/web/api/document/forms/index.html index e3393d3ef3fb41..6871ab7018c816 100644 --- a/files/zh-cn/web/api/document/forms/index.html +++ b/files/zh-cn/web/api/document/forms/index.html @@ -42,7 +42,7 @@

    例子:获取表单信息

    </html>
    -

     例子:获取表单内的元素

    +

    例子:获取表单内的元素

    var selectForm = document.forms[index];
     var selectFormElement = document.forms[index].elements[index];
    diff --git a/files/zh-cn/web/api/document/fullscreen/index.html b/files/zh-cn/web/api/document/fullscreen/index.html
    index e341e11970e64c..632f061e22b776 100644
    --- a/files/zh-cn/web/api/document/fullscreen/index.html
    +++ b/files/zh-cn/web/api/document/fullscreen/index.html
    @@ -4,7 +4,7 @@
     translation_of: Web/API/Document/fullscreen
     original_slug: Web/API/Document/mozFullScreen
     ---
    -

     

    +

    {{APIRef("Fullscreen API")}}{{Deprecated_Header}}

    @@ -16,7 +16,7 @@

    注意: 由于不推荐使用此属性,您可以通过检查{{DOMxRef("document.fullscreenelement")}}是否为null来确定文档上是否启用全屏模式。

    -

     

    +

    概述

    @@ -31,8 +31,8 @@

    例子

    function isDocumentInFullScreenMode() {
       // 过去由 F11 触发的那种浏览器全屏模式和 HTML5 中内容的全屏模式是不一样的
    -  return (document.fullscreenElement && document.fullscreenElement !== null) ||
    -      (!document.mozFullScreen && !document.webkitIsFullScreen);
    +  return (document.fullscreenElement && document.fullscreenElement !== null) ||
    +      (!document.mozFullScreen && !document.webkitIsFullScreen);
     }
     
    diff --git a/files/zh-cn/web/api/document/fullscreenenabled/index.html b/files/zh-cn/web/api/document/fullscreenenabled/index.html index bd010e662bef6d..e9e6876d89b107 100644 --- a/files/zh-cn/web/api/document/fullscreenenabled/index.html +++ b/files/zh-cn/web/api/document/fullscreenenabled/index.html @@ -14,10 +14,10 @@

    语法

    例子

    function requestFullScreen() {
       if (document.mozFullScreenEnabled) {
    -    videoElement.requestFullScreen();
    -  } else {
    -    console.log('你的浏览器不支持全屏模式!');
    -  }
    +    videoElement.requestFullScreen();
    +  } else {
    +    console.log('你的浏览器不支持全屏模式!');
    +  }
     }
     

    备注

    diff --git a/files/zh-cn/web/api/document/fullscreenerror_event/index.html b/files/zh-cn/web/api/document/fullscreenerror_event/index.html index c20bd3c0308cae..5c47bce58fb922 100644 --- a/files/zh-cn/web/api/document/fullscreenerror_event/index.html +++ b/files/zh-cn/web/api/document/fullscreenerror_event/index.html @@ -6,7 +6,7 @@ ---
    {{ApiRef("Fullscreen API")}}
    -

    Document.onfullscreenerror 属性是一个事件处理器用于处理 {{event("fullscreenchange")}} 事件,在当前文档不能进入全屏模式,即使它被请求时触发。

    +

    Document.onfullscreenerror 属性是一个事件处理器用于处理 {{event("fullscreenchange")}} 事件,在当前文档不能进入全屏模式,即使它被请求时触发。

    语法

    diff --git a/files/zh-cn/web/api/document/getelementbyid/index.html b/files/zh-cn/web/api/document/getelementbyid/index.html index a6133dfe8272cc..b5373feac3c4c1 100644 --- a/files/zh-cn/web/api/document/getelementbyid/index.html +++ b/files/zh-cn/web/api/document/getelementbyid/index.html @@ -10,9 +10,9 @@ ---
    {{ ApiRef("DOM") }}
    -

    {{domxref("Document")}}的方法 {{domxref("Document.getElementById", "getElementById()")}}返回一个匹配特定 ID的元素。由于元素的 ID 在大部分情况下要求是独一无二的,这个方法自然而然地成为了一个高效查找特定元素的方法。

    +

    {{domxref("Document")}}的方法 {{domxref("Document.getElementById", "getElementById()")}}返回一个匹配特定 ID的元素。由于元素的 ID 在大部分情况下要求是独一无二的,这个方法自然而然地成为了一个高效查找特定元素的方法。

    -

    如果需要查找到那些没有 ID 的元素,你可以考虑通过 CSS 选择器使用 {{domxref("Document.querySelector", "querySelector()")}}。

    +

    如果需要查找到那些没有 ID 的元素,你可以考虑通过 CSS 选择器使用 {{domxref("Document.querySelector", "querySelector()")}}。

    语法

    @@ -22,13 +22,13 @@

    语法

    参数

      -
    • element是一个 Element 对象。如果当前文档中拥有特定 ID 的元素不存在则返回 null.
    • +
    • element是一个 Element 对象。如果当前文档中拥有特定 ID 的元素不存在则返回 null.
    • id是大小写敏感的字符串,代表了所要查找的元素的唯一 ID.

    返回值

    -

    返回一个匹配到 ID 的 DOM {{domxref("Element")}} 对象。若在当前 {{domxref("Document")}} 下没有找到,则返回 null。

    +

    返回一个匹配到 ID 的 DOM {{domxref("Element")}} 对象。若在当前 {{domxref("Document")}} 下没有找到,则返回 null。

    示例

    @@ -51,7 +51,7 @@

    JavaScript

    function changeColor(newColor) {
     ​  var elem = document.getElementById('para');
    -  elem.style.color = newColor;
    +  elem.style.color = newColor;
     }
     
    @@ -61,9 +61,9 @@

    执行结果

    注意

    -

    对 “Id” 的拼写一定要正确。如果大小写不匹配,无论看起来多么合情合理,getElementByID() 都是不合理的且永远都不会工作的。

    +

    对 “Id” 的拼写一定要正确。如果大小写不匹配,无论看起来多么合情合理,getElementByID() 都是不合理的且永远都不会工作的。

    -

    不同于其他 Element 查找方法(如{{domxref("Document.querySelector()")}} 以及 {{domxref("Document.querySelectorAll()")}}),getElementById() 只有在作为 document 的方法时才能起作用,而在 DOM 中的其他元素下无法生效。这是因为 ID 值在整个网页中必须保持唯一。因此没有必要为这个方法创建所谓的 “局部” 版本。

    +

    不同于其他 Element 查找方法(如{{domxref("Document.querySelector()")}} 以及 {{domxref("Document.querySelectorAll()")}}),getElementById() 只有在作为 document 的方法时才能起作用,而在 DOM 中的其他元素下无法生效。这是因为 ID 值在整个网页中必须保持唯一。因此没有必要为这个方法创建所谓的 “局部” 版本。

    示例

    @@ -98,7 +98,7 @@

    示例

    var el = document.getElementById('testqq'); // el 是个 null
    -

    非 HTML 文档(Non-HTML documents)。 DOM 的实现必须说明哪个属性是 ID 类型。只有 DTD 定义了'id'是 ID 属性时’id‘才会被认为是 ID 属性。在 XHTMLXUL或者其他文档中,'id'通常被定义为 ID 类型的属性。不知道哪个属性是 ID 类型的实现中,这会返回 null 结果。

    +

    非 HTML 文档(Non-HTML documents)。 DOM 的实现必须说明哪个属性是 ID 类型。只有 DTD 定义了'id'是 ID 属性时’id‘才会被认为是 ID 属性。在 XHTML, XUL或者其他文档中,'id'通常被定义为 ID 类型的属性。不知道哪个属性是 ID 类型的实现中,这会返回 null 结果。

    规范

    @@ -112,6 +112,6 @@

    相关链接

    • document 包含其他用于在文档中查找元素的方法
    • -
    • document.querySelector() 类似'div.myclass'的元素的选择
    • +
    • document.querySelector() 类似'div.myclass'的元素的选择
    • xml:id - has a utility method for allowing getElementById to obtain 'xml:id' in XML documents (such as returned by Ajax calls)
    diff --git a/files/zh-cn/web/api/document/getelementsbyclassname/index.html b/files/zh-cn/web/api/document/getelementsbyclassname/index.html index e1a6a47d5d3292..f8e3385e74ea0e 100644 --- a/files/zh-cn/web/api/document/getelementsbyclassname/index.html +++ b/files/zh-cn/web/api/document/getelementsbyclassname/index.html @@ -17,9 +17,9 @@

    语法

    var elements = rootElement.getElementsByClassName(names);
      -
    • elements 是一个实时{{ domxref("HTMLCollection", "集合") }},包含了找到的所有元素。
    • -
    • names 是一个字符串,表示要匹配的类名列表;类名通过空格分隔
    • -
    • getElementsByClassName 可以在任何元素上调用,不仅仅是 document。 调用这个方法的元素将作为本次查找的根元素。
    • +
    • elements 是一个实时{{ domxref("HTMLCollection", "集合") }},包含了找到的所有元素。
    • +
    • names 是一个字符串,表示要匹配的类名列表;类名通过空格分隔
    • +
    • getElementsByClassName 可以在任何元素上调用,不仅仅是 document。 调用这个方法的元素将作为本次查找的根元素。

    示例

    @@ -36,7 +36,7 @@

    示例

    document.getElementById('main').getElementsByClassName('test');
    -

    我们还可以对任意的  {{ domxref("HTMLCollection") }} 使用 Array.prototype 的方法,调用时传递  HTMLCollection 作为方法的参数。这里我们将查找到所有 class 为 'test' 的 div 元素:

    +

    我们还可以对任意的 {{ domxref("HTMLCollection") }} 使用 Array.prototype 的方法,调用时传递 HTMLCollection 作为方法的参数。这里我们将查找到所有 class 为 'test' 的 div 元素:

    var testElements = document.getElementsByClassName('test');
     var testDivs = Array.prototype.filter.call(testElements, function(testElement){
    @@ -72,7 +72,7 @@ 

    获取第一个类名为 test

    多个 Class 示例

    -

    document.getElementsByClassName 的工作方式与 document.querySelector 和 document.querySelectorAll 很相似。 只有所有 className 都匹配的元素会被选择。

    +

    document.getElementsByClassName 的工作方式与 document.querySelectordocument.querySelectorAll 很相似。 只有所有 className 都匹配的元素会被选择。

    HTML

    diff --git a/files/zh-cn/web/api/document/getelementsbyname/index.html b/files/zh-cn/web/api/document/getelementsbyname/index.html index 3befaad7dd26b7..68e6820bfb7fb4 100644 --- a/files/zh-cn/web/api/document/getelementsbyname/index.html +++ b/files/zh-cn/web/api/document/getelementsbyname/index.html @@ -19,8 +19,8 @@

    语法

      -
    • elements 是一个实时更新的 {{domxref("NodeList")}} 集合。当文档中有同一个 name 属性的元素被添加或移除时,这个集合会自动更新。
    • -
    • name 是元素的 name 属性的值。
    • +
    • elements 是一个实时更新的 {{domxref("NodeList")}} 集合。当文档中有同一个 name 属性的元素被添加或移除时,这个集合会自动更新。
    • +
    • name 是元素的 name 属性的值。

    例子

    @@ -45,16 +45,16 @@

    例子

    注释

    -

    {{domxref("element.name","name")}} 属性只有在 (X)HTML 文档中可用。

    +

    {{domxref("element.name","name")}} 属性只有在 (X)HTML 文档中可用。

    -

    该方法返回一个 live 的 {{domxref("NodeList")}}   集合,这个集合包含 {{domxref("element.name","name")}} 属性为指定值的所有元素,例如{{htmlelement("meta")}} 、{{htmlelement("object")}},甚至那些不支持 {{domxref("element.name","name")}} 属性但是添加了 {{domxref("element.name","name")}} 自定义属性的元素也包含其中。

    +

    该方法返回一个 live 的 {{domxref("NodeList")}} 集合,这个集合包含 {{domxref("element.name","name")}} 属性为指定值的所有元素,例如{{htmlelement("meta")}} 、{{htmlelement("object")}},甚至那些不支持 {{domxref("element.name","name")}} 属性但是添加了 {{domxref("element.name","name")}} 自定义属性的元素也包含其中。

    -

    getElementsByName  在不同的浏览器其中工作方式不同。在 IE 和 Opera 中, getElementsByName()  方法还会返回那些 {{domxref("element.id","id")}} 为指定值的元素。所以你要小心使用该方法,最好不要为元素的 {{domxref("element.name","name")}} 和 {{domxref("element.id","id")}} 赋予相同的值。 

    +

    getElementsByName 在不同的浏览器其中工作方式不同。在 IE 和 Opera 中, getElementsByName() 方法还会返回那些 {{domxref("element.id","id")}} 为指定值的元素。所以你要小心使用该方法,最好不要为元素的 {{domxref("element.name","name")}} 和 {{domxref("element.id","id")}} 赋予相同的值。

    -

    IE 和 Edge 都返回一个 {{domxref("HTMLCollection")}}, 而不是{{domxref("NodeList")}} 。

    +

    IE 和 Edge 都返回一个 {{domxref("HTMLCollection")}}, 而不是{{domxref("NodeList")}} 。

    规范

    @@ -68,6 +68,6 @@

    浏览器兼容性

    参阅

      -
    • {{domxref("document.getElementById()")}} 通过 id 返回对元素的引用
    • -
    • {{domxref("document.querySelector()")}} 通过 CSS 选择器返回对元素的引用,例如 'div.myclass'
    • +
    • {{domxref("document.getElementById()")}} 通过 id 返回对元素的引用
    • +
    • {{domxref("document.querySelector()")}} 通过 CSS 选择器返回对元素的引用,例如 'div.myclass'
    diff --git a/files/zh-cn/web/api/document/getelementsbytagname/index.html b/files/zh-cn/web/api/document/getelementsbytagname/index.html index c8c90661ffba8c..cbb18d5dcc697c 100644 --- a/files/zh-cn/web/api/document/getelementsbytagname/index.html +++ b/files/zh-cn/web/api/document/getelementsbytagname/index.html @@ -5,26 +5,26 @@ ---
    {{ ApiRef("DOM") }}
    -
     
    +
    -

    返回一个包括所有给定标签名称的元素的 HTML 集合{{domxref("HTMLCollection")}}。 整个文件结构都会被搜索,包括根节点。返回的 HTML 集合是动态的,意味着它可以自动更新自己来保持和 DOM 树的同步而不用再次调用 document.getElementsByTagName() 。

    +

    返回一个包括所有给定标签名称的元素的 HTML 集合{{domxref("HTMLCollection")}}。 整个文件结构都会被搜索,包括根节点。返回的 HTML 集合是动态的,意味着它可以自动更新自己来保持和 DOM 树的同步而不用再次调用 document.getElementsByTagName()

    语法

    var elements = document.getElementsByTagName(name);
      -
    • elements 是一个由发现的元素出现在树中的顺序构成的动态的 HTML 集合 {{domxref("HTMLCollection")}} (但是看下面的提示) 。
    • -
    • name 是一个代表元素的名称的字符串。特殊字符 "*" 代表了所有元素。
    • +
    • elements 是一个由发现的元素出现在树中的顺序构成的动态的 HTML 集合 {{domxref("HTMLCollection")}} (但是看下面的提示) 。
    • +
    • name 是一个代表元素的名称的字符串。特殊字符 "*" 代表了所有元素。
    -
    注意: 最新的 W3C 规范 说明这些元素是 HTMLCollection(HTML 集合); 然而,这个方法在 WebKit 内核的浏览器中返回一个 {{domxref("NodeList")}} 。 更多详情请查看 {{bug(14869)}} 。
    +
    注意: 最新的 W3C 规范 说明这些元素是 HTMLCollection(HTML 集合); 然而,这个方法在 WebKit 内核的浏览器中返回一个 {{domxref("NodeList")}} 。 更多详情请查看 {{bug(14869)}} 。

    例子

    在以下的例子中,getElementsByTagName() 开始于一个具体的父级元素并且从它自上而下递归地在DOM 树中搜索符合标签名称参数的子元素。

    -

    注意调用 getElementsByTagName() 的不是那个文件节点 document,事实上是使用这个方法 {{domxref("element.getElementsByTagName()")}}。

    +

    注意调用 getElementsByTagName() 的不是那个文件节点 document,事实上是使用这个方法 {{domxref("element.getElementsByTagName()")}}。

    <!DOCTYPE html>
     <html lang="en">
    @@ -51,7 +51,7 @@ 

    例子

    var num = div2Paras.length; alert("There are " + num + " paragraph in #div2"); } -  </script> + </script> </head> <body style="border: solid green 3px"> <p>Some outer text</p> @@ -68,17 +68,17 @@

    例子

    </div> </div> -  <p>Some outer text</p> -  <p>Some outer text</p> + <p>Some outer text</p> + <p>Some outer text</p> -  <button onclick="getAllParaElems();"> -    show all p elements in document</button><br /> + <button onclick="getAllParaElems();"> + show all p elements in document</button><br /> -  <button onclick="div1ParaElems();"> -    show all p elements in div1 element</button><br /> + <button onclick="div1ParaElems();"> + show all p elements in div1 element</button><br /> -  <button onclick="div2ParaElems();"> -    show all p elements in div2 element</button> + <button onclick="div2ParaElems();"> + show all p elements in div2 element</button> </body> </html> @@ -86,7 +86,7 @@

    例子

    注意

    -

    当在一个 HTML 文件上执行时, getElementsByTagName() 会在执行前把参数转换为小写字母。这是试着在一个 HTML 文件的子树匹配驼峰命名法的 SVG 元素时不希望的。 {{Domxref("document.getElementsByTagNameNS()")}} 在那种情况下会有用。请查看 {{Bug(499656)}}。

    +

    当在一个 HTML 文件上执行时, getElementsByTagName() 会在执行前把参数转换为小写字母。这是试着在一个 HTML 文件的子树匹配驼峰命名法的 SVG 元素时不希望的。 {{Domxref("document.getElementsByTagNameNS()")}} 在那种情况下会有用。请查看 {{Bug(499656)}}。

    document.getElementsByTagName() 类似于 {{domxref("element.getElementsByTagName()")}},除了它会搜索整个文档这点。

    diff --git a/files/zh-cn/web/api/document/getelementsbytagnamens/index.html b/files/zh-cn/web/api/document/getelementsbytagnamens/index.html index 8d40d84dc1e996..0afd9be061bf5a 100644 --- a/files/zh-cn/web/api/document/getelementsbytagnamens/index.html +++ b/files/zh-cn/web/api/document/getelementsbytagnamens/index.html @@ -11,7 +11,7 @@

    返回带有指定名称和命名空间的元素集合。整个文件结构都会被搜索,包括根节点。

    -

     

    +

    语法

    @@ -19,18 +19,18 @@

    语法

      -
    • elements 是一个在树中按顺序查询到的动态的 HTML 集合 HTMLCollection (但是看下面的提示)。
    • -
    • namespace 是所要查询的元素的命名空间 URL(参考 element.namespaceURI)。
    • -
    • name 是所要查询的元素的名称。其中特殊字符 "*" 代表所有元素 (参考 element.localName)。
    • +
    • elements 是一个在树中按顺序查询到的动态的 HTML 集合 HTMLCollection (但是看下面的提示)。
    • +
    • namespace 是所要查询的元素的命名空间 URL(参考 element.namespaceURI)。
    • +
    • name 是所要查询的元素的名称。其中特殊字符 "*" 代表所有元素 (参考 element.localName)。
    -
    注意:在 W3C 文档中,elements是一个 NodeList,而该方法在 Gecko 内核的浏览器和 IE 中返回的是 HTML 集合HTMLCollection. Opera 返回的也是一个 NodeList,但通过 namedItem方法 , 使得它类似于一个HTMLCollection . 截止 2012 年 1 月,只有 WebKit 内核的浏览器返回的值是一个纯 NodeList. 详情请参考 bug 14869 .
    +
    注意:在 W3C 文档中,elements是一个 NodeList,而该方法在 Gecko 内核的浏览器和 IE 中返回的是 HTML 集合HTMLCollection. Opera 返回的也是一个 NodeList,但通过 namedItem方法 , 使得它类似于一个HTMLCollection . 截止 2012 年 1 月,只有 WebKit 内核的浏览器返回的值是一个纯 NodeList. 详情请参考 bug 14869 .

    示例

    -

    在下面的示例中,getElementsByTagNameNS方法从一个特定的父元素开始,并从该父元素的 DOM 中自上而下递归式搜索,查找所有与标签名参数匹配的子元素 。

    +

    在下面的示例中,getElementsByTagNameNS方法从一个特定的父元素开始,并从该父元素的 DOM 中自上而下递归式搜索,查找所有与标签名参数匹配的子元素 。

    -

    注意当调用getElementsByTagName方法获取到的节点不是文档节点时,实际上是调用了element.getElementsByTagNameNS方法 。

    +

    注意当调用getElementsByTagName方法获取到的节点不是文档节点时,实际上是调用了element.getElementsByTagNameNS方法 。

    需要使用以下示例,只需复制/粘贴以下代码到用.xhtml 后缀名保存的新文件中即可。

    @@ -108,7 +108,7 @@

    示例

    针对其他不支持此方法的浏览器的解决方法

    -

    如果所使用的浏览器不支持此方法,可使用另一种方法(例如遍历所有子元素的 DOM,识别所有 @xmlns 实例等等)来查找所有具有本地名称和命名空间的标签,但此方法更快。 (为了兼容 Explorer,在下面的函数中,你可以调用一个 XPath 包,而不仅仅是 XPath (由于 Explorer 支持不同 API 的 XPath ), 例如 this wrapper class.)

    +

    如果所使用的浏览器不支持此方法,可使用另一种方法(例如遍历所有子元素的 DOM,识别所有 @xmlns 实例等等)来查找所有具有本地名称和命名空间的标签,但此方法更快。 (为了兼容 Explorer,在下面的函数中,你可以调用一个 XPath 包,而不仅仅是 XPath (由于 Explorer 支持不同 API 的 XPath ), 例如 this wrapper class.)

    function getElementsByTagNameNSWrapper (ns, elName, doc, context) {
     	if (!doc) {
    diff --git a/files/zh-cn/web/api/document/getselection/index.html b/files/zh-cn/web/api/document/getselection/index.html
    index ce05b8c7612e02..e608bbea3d93e7 100644
    --- a/files/zh-cn/web/api/document/getselection/index.html
    +++ b/files/zh-cn/web/api/document/getselection/index.html
    @@ -6,7 +6,7 @@
     ---
     
    {{APIRef("DOM")}}{{SeeCompatTable}}
    -

    The getSelection() property of the {{DOMxRef("DocumentOrShadowRoot")}} interface returns a {{DOMxRef("Selection")}} object representing the range of text selected by the user, or the current position of the caret.

    +

    The getSelection() property of the {{DOMxRef("DocumentOrShadowRoot")}} interface returns a {{DOMxRef("Selection")}} object representing the range of text selected by the user, or the current position of the caret.

    Syntax

    @@ -18,7 +18,7 @@

    Parameters

    Returns

    -

    A {{DOMxRef("Selection")}} object.

    +

    A {{DOMxRef("Selection")}} object.

    Example

    diff --git a/files/zh-cn/web/api/document/hasstorageaccess/index.html b/files/zh-cn/web/api/document/hasstorageaccess/index.html index b0f07d0bf86680..4557214f1f15d0 100644 --- a/files/zh-cn/web/api/document/hasstorageaccess/index.html +++ b/files/zh-cn/web/api/document/hasstorageaccess/index.html @@ -7,7 +7,7 @@
    {{domxref("Document")}}的hasStorageAccess() 方法返回了一个{{jsxref("Promise")}}来判断该文档是否有访问第一方储存的权限。
    -

    通过 Storage Access API 获取更多信息。

    +

    通过 Storage Access API 获取更多信息。

    语法

    diff --git a/files/zh-cn/web/api/document/head/index.html b/files/zh-cn/web/api/document/head/index.html index 60afaadc047043..b9f689a8590eaa 100644 --- a/files/zh-cn/web/api/document/head/index.html +++ b/files/zh-cn/web/api/document/head/index.html @@ -18,7 +18,7 @@

    示例

    alert( document.head === document.querySelector("head") ); // true

    附注

    -

    document.head 是个只读属性,为该属性赋值只会静默失败,如果在严格模式中,则会抛出TypeError异常。

    +

    document.head 是个只读属性,为该属性赋值只会静默失败,如果在严格模式中,则会抛出TypeError异常。

    浏览器兼容性

    {{Compat("api.Document.head")}} diff --git a/files/zh-cn/web/api/document/height/index.html b/files/zh-cn/web/api/document/height/index.html index 8c35f7d959f21f..67f5e7d71bc6d2 100644 --- a/files/zh-cn/web/api/document/height/index.html +++ b/files/zh-cn/web/api/document/height/index.html @@ -6,10 +6,10 @@
    {{APIRef("DOM")}} {{deprecated_header}}
    -

    Note: 在 Gecko 的 6.0 版本之后, document.height 不再被支持。 使用 document.body.clientHeight 来代替. 详见 {{domxref("element.clientHeight")}}.

    +

    Note: 在 Gecko 的 6.0 版本之后, document.height 不再被支持。 使用 document.body.clientHeight 来代替. 详见 {{domxref("element.clientHeight")}}.

    -

    返回 {{domxref("document")}} 对象的高度。在大多数场景中, 它相当于当前文档的 {{HTMLElement("body")}} 元素。

    +

    返回 {{domxref("document")}} 对象的高度。在大多数场景中, 它相当于当前文档的 {{HTMLElement("body")}} 元素。

    语法

    diff --git a/files/zh-cn/web/api/document/hidden/index.html b/files/zh-cn/web/api/document/hidden/index.html index 7b28f1ef95a35a..1c5a621f762699 100644 --- a/files/zh-cn/web/api/document/hidden/index.html +++ b/files/zh-cn/web/api/document/hidden/index.html @@ -5,7 +5,7 @@ ---

    {{ ApiRef("DOM") }}

    -

    Document.hidden (只读属性)返回布尔值,表示页面是(true)否(false)隐藏。

    +

    Document.hidden (只读属性)返回布尔值,表示页面是(true)否(false)隐藏。

    语法

    diff --git a/files/zh-cn/web/api/document/implementation/index.html b/files/zh-cn/web/api/document/implementation/index.html index 0d5cf3c571ab3d..d6f5ec1e1778a6 100644 --- a/files/zh-cn/web/api/document/implementation/index.html +++ b/files/zh-cn/web/api/document/implementation/index.html @@ -29,7 +29,7 @@

    示例

    说明

    -

    W3C 的 DOM1 级建议值规定了一种检测浏览器对某个DOM模型是否支持的方法——hasFeature 方法(请参考上边的例子以及这篇文章 What does your user agent claim to support?)。如果它可用的话,那么 DOMImplementation 接口的其他方法就可以为操作文档以外的内容提供一些服务了。例如,DOMImplementation 接口包含一个 createDocumentType 方法,它可以为实例管理的文档创建对应的 DTD 文档定义。

    +

    W3C 的 DOM1 级建议值规定了一种检测浏览器对某个DOM模型是否支持的方法——hasFeature 方法(请参考上边的例子以及这篇文章 What does your user agent claim to support?)。如果它可用的话,那么 DOMImplementation 接口的其他方法就可以为操作文档以外的内容提供一些服务了。例如,DOMImplementation 接口包含一个 createDocumentType 方法,它可以为实例管理的文档创建对应的 DTD 文档定义。

    方法

    @@ -41,27 +41,27 @@

    方法

    - + - + - + - + - + diff --git a/files/zh-cn/web/api/document/importnode/index.html b/files/zh-cn/web/api/document/importnode/index.html index 64f979be927186..cc15be986c76dd 100644 --- a/files/zh-cn/web/api/document/importnode/index.html +++ b/files/zh-cn/web/api/document/importnode/index.html @@ -41,13 +41,13 @@

    备注

    源节点不会从外部文档中删除,被导入的节点是源节点的一个拷贝。

    -

     

    +

    将外部文档的节点插入当前文档之前,你必须使用 document.importNode() 从外部文档导入源节点,或者使用 document.adoptNode()导入源节点,想要了解更多的 Node.ownerDocument 问题,请参考 W3C DOM FAQ.

    即使你不执行导入动作,就执行插入外部文档中的节点.Firefox 目前也不会报错 (如果严格按标准执行,很多已有的网站都无法正常运行). 我们鼓励开发者严格按标准修改自己已有的不符合上述标准的代码。

    -

     

    +

    浏览器兼容性

    diff --git a/files/zh-cn/web/api/document/index.html b/files/zh-cn/web/api/document/index.html index b1c4c42934e1bb..e7e2034337394a 100644 --- a/files/zh-cn/web/api/document/index.html +++ b/files/zh-cn/web/api/document/index.html @@ -62,11 +62,11 @@

    属性

    {{DOMxRef("Document.implementation")}} {{ReadOnlyInline}}
    返回与当前文档相关联的 DOM 实现。
    {{DOMxRef("Document.lastStyleSheetSet")}} {{ReadOnlyInline}}
    -
    返回最后启用样式表的名字。在设置{{DOMxRef("document.selectedStyleSheetSet","selectedStyleSheetSet")}} 前值都为 null 。 
    +
    返回最后启用样式表的名字。在设置{{DOMxRef("document.selectedStyleSheetSet","selectedStyleSheetSet")}} 前值都为 null
    {{DOMxRef("Document.links")}} {{ReadOnlyInline}}
    返回一个包含文档中所有超链接的列表。
    {{DOMxRef("Document.mozSyntheticDocument")}} {{Non-standard_Inline}}
    -
    返回 {{JSxRef("Boolean")}} ,仅当此文件是合成的(例如独立图像,视频,音频文件等)时才为 true 。
    +
    返回 {{JSxRef("Boolean")}} ,仅当此文件是合成的(例如独立图像,视频,音频文件等)时才为 true
    {{DOMxRef("Document.plugins")}} {{ReadOnlyInline}}
    返回一个可用插件列表。
    {{DOMxRef("Document.featurePolicy")}} {{ReadOnlyInline}} {{Experimental_Inline}}
    @@ -76,26 +76,26 @@

    属性

    {{DOMxRef("Document.scripts")}} {{ReadOnlyInline}}
    返回文档中所有的 {{HTMLElement("script")}} 元素。
    {{DOMxRef("Document.scrollingElement")}} {{ReadOnlyInline}}
    -
    返回对文档 {{DOMxRef("Element")}} 元素的引用。
    +
    返回对文档 {{DOMxRef("Element")}} 元素的引用。
    {{DOMxRef("Document.selectedStyleSheetSet")}}
    返回当前正使用的样式表集。
    {{DOMxRef("Document.styleSheetSets")}} {{ReadOnlyInline}}
    返回文档上可用样式表的列表。
    {{DOMxRef("Document.timeline")}} {{ReadOnlyInline}}
    -
    返回 {{domxref("DocumentTimeline")}} 的一个实例,该实例是在页面加载时自动创建的。
    +
    返回 {{domxref("DocumentTimeline")}} 的一个实例,该实例是在页面加载时自动创建的。
    {{DOMxRef("Document.undoManager")}} {{ReadOnlyInline}} {{Experimental_Inline}}
    {{DOMxRef("Document.visibilityState")}} {{ReadOnlyInline}}
    -
    返回 string 表明当前文档的可见性。可能的取值有 visible, hidden, prerender, and unloaded 。
    +
    返回 string 表明当前文档的可见性。可能的取值有 visible, hidden, prerender, and unloaded 。
    -

    Document 接口继承自 {{DOMxRef("ParentNode")}} 的接口:

    +

    Document 接口继承自 {{DOMxRef("ParentNode")}} 的接口:

    {{page("/en-US/docs/Web/API/ParentNode","Properties")}}

    HTMLDocument 的扩展

    -

    HTML 文件的 Document 接口继承自 {{DOMxRef("HTMLDocument")}} 接口(从 HTML5 扩展):

    +

    HTML 文件的 Document 接口继承自 {{DOMxRef("HTMLDocument")}} 接口(从 HTML5 扩展):

    {{DOMxRef("Document.cookie")}}
    @@ -124,11 +124,11 @@

    HTMLDocument 的扩展

    DocumentOrShadowRoot 包含的属性

    -

    Document 接口混入(mixin){{DOMxRef("DocumentOrShadowRoot")}} 包含的属性。请注意,这些属性目前仅有 Chrome 实现;其他浏览器仍在 {{DOMxRef("Document")}} 接口上直接实现它们。.

    +

    Document 接口混入(mixin){{DOMxRef("DocumentOrShadowRoot")}} 包含的属性。请注意,这些属性目前仅有 Chrome 实现;其他浏览器仍在 {{DOMxRef("Document")}} 接口上直接实现它们。.

    {{DOMxRef("DocumentOrShadowRoot.activeElement")}} {{ReadOnlyInline}}
    -
    返回阴影树内聚焦的 {{DOMxRef('Element')}} 。
    +
    返回阴影树内聚焦的 {{DOMxRef('Element')}} 。
    {{DOMxRef("Document.fullscreenElement")}} {{ReadOnlyInline}}
    当前文档处于全屏模式下的元素。
    {{DOMxRef("DocumentOrShadowRoot.pointerLockElement")}} {{ReadOnlyInline}} {{Experimental_Inline}}
    @@ -205,7 +205,7 @@

    Deprecated properties

    Methods

    -

    该接口同样继承了 {{DOMxRef("Node")}} 和 {{DOMxRef("EventTarget")}} 接口。

    +

    该接口同样继承了 {{DOMxRef("Node")}} 和 {{DOMxRef("EventTarget")}} 接口。

    {{DOMxRef("Document.adoptNode()")}}
    diff --git a/files/zh-cn/web/api/document/lastmodified/index.html b/files/zh-cn/web/api/document/lastmodified/index.html index 046bc4f0034403..8ae9363f7e0aa8 100644 --- a/files/zh-cn/web/api/document/lastmodified/index.html +++ b/files/zh-cn/web/api/document/lastmodified/index.html @@ -28,4 +28,4 @@

    备注

    {{Compat("api.Document.lastModified")}}

    -

     

    +

    diff --git a/files/zh-cn/web/api/document/laststylesheetset/index.html b/files/zh-cn/web/api/document/laststylesheetset/index.html index 7906844a7cb9d9..1acd5aa57cd06c 100644 --- a/files/zh-cn/web/api/document/laststylesheetset/index.html +++ b/files/zh-cn/web/api/document/laststylesheetset/index.html @@ -12,14 +12,14 @@ ---
    {{APIRef("DOM")}}{{deprecated_header}}
    -

    Document.lastStyleSheetSet 返回最后一个启用的样式表集合。当 {{domxref("document.selectedStyleSheetSet")}} 属性发生变化时,这个属性的值就会随之发生变化。

    +

    Document.lastStyleSheetSet 返回最后一个启用的样式表集合。当 {{domxref("document.selectedStyleSheetSet")}} 属性发生变化时,这个属性的值就会随之发生变化。

    语法

    var lastStyleSheetSet = document.lastStyleSheetSet
     
    -

    返回时,lastStyleSheetSet 指示最近设置的样式表。如果当前样式表集尚未通过设置更改 {{domxref("document.selectedStyleSheetSet")}}, 则返回值为 null

    +

    返回时,lastStyleSheetSet 指示最近设置的样式表。如果当前样式表集尚未通过设置更改 {{domxref("document.selectedStyleSheetSet")}}, 则返回值为 null

    注意: 当{{domxref("document.enableStyleSheetsForSet()")}} 被执行时,该值不会该变。
    diff --git a/files/zh-cn/web/api/document/linkcolor/index.html b/files/zh-cn/web/api/document/linkcolor/index.html index d138d40e8bb21f..a0fa8f452f8e4f 100644 --- a/files/zh-cn/web/api/document/linkcolor/index.html +++ b/files/zh-cn/web/api/document/linkcolor/index.html @@ -27,7 +27,7 @@

    备注

    document.linkColorDOM Level 2 HTML 中已被废弃.

    -

    替代方案是在链接元素上 HTML anchor (<a>)  使用 css {{ Cssxref("color") }} 属性,(比如a {color:red;}) 或者 :link 伪类 ,(比如:link {color:red;}).

    +

    替代方案是在链接元素上 HTML anchor (<a>) 使用 css {{ Cssxref("color") }} 属性,(比如a {color:red;}) 或者 :link 伪类 ,(比如:link {color:red;}).

    另一种方法是使用 document.body.link, 该属也在HTML 4.01中被废弃。

    @@ -38,7 +38,7 @@

    例子

    规范

    -

     

    +

    • {{domxref("document.vlinkColor")}}
    • diff --git a/files/zh-cn/web/api/document/links/index.html b/files/zh-cn/web/api/document/links/index.html index 159fab998c30d1..bc9072f7bd1403 100644 --- a/files/zh-cn/web/api/document/links/index.html +++ b/files/zh-cn/web/api/document/links/index.html @@ -9,7 +9,7 @@ ---

      {{APIRef("DOM")}}

      -

      links 属性返回一个文档中所有具有 href 属性值的 {{HTMLElement("area")}} 元素与 {{HTMLElement("a")}} 元素的集合。

      +

      links 属性返回一个文档中所有具有 href 属性值的 {{HTMLElement("area")}} 元素与 {{HTMLElement("a")}} 元素的集合。

      语法

      diff --git a/files/zh-cn/web/api/document/location/index.html b/files/zh-cn/web/api/document/location/index.html index 13f924423ae1cf..0b7169f402b3dc 100644 --- a/files/zh-cn/web/api/document/location/index.html +++ b/files/zh-cn/web/api/document/location/index.html @@ -5,9 +5,9 @@ ---

      {{APIRef}}

      -

      Document.location 是一个只读属性,返回一个 {{domxref("Location")}} 对象,包含有文档的 URL 相关的信息,并提供了改变该 URL 和加载其他 URL 的方法。

      +

      Document.location 是一个只读属性,返回一个 {{domxref("Location")}} 对象,包含有文档的 URL 相关的信息,并提供了改变该 URL 和加载其他 URL 的方法。

      -

      尽管 Document.location 是一个只读的 Location 对象,你也能够赋给它一个 {{domxref("DOMString")}}。这意味着你能够赋给 document.location 字符串,大多数情况下像这样使用:document.location = 'http://www.example.com',也可写为document.location.href = 'http://www.example.com'

      +

      尽管 Document.location 是一个只读的 Location 对象,你也能够赋给它一个 {{domxref("DOMString")}}。这意味着你能够赋给 document.location 字符串,大多数情况下像这样使用:document.location = 'http://www.example.com',也可写为document.location.href = 'http://www.example.com'

      只是想获取字符串形式的 URL,可以使用只读属性 {{domxref("document.URL")}}。

      diff --git a/files/zh-cn/web/api/document/mozsyntheticdocument/index.html b/files/zh-cn/web/api/document/mozsyntheticdocument/index.html index 407d18a7715122..355bc924dc17c7 100644 --- a/files/zh-cn/web/api/document/mozsyntheticdocument/index.html +++ b/files/zh-cn/web/api/document/mozsyntheticdocument/index.html @@ -29,7 +29,7 @@

      例子

      var isSynthetic = document.mozSyntheticDocument;
       
       if (isSynthetic) {
      -  /* insert your menu item here */
      +  /* insert your menu item here */
       }
       
      diff --git a/files/zh-cn/web/api/document/open/index.html b/files/zh-cn/web/api/document/open/index.html index 31258c9a97c322..d08513fed087a1 100644 --- a/files/zh-cn/web/api/document/open/index.html +++ b/files/zh-cn/web/api/document/open/index.html @@ -29,7 +29,7 @@

      参数

      返回值

      -

      一个 Document 对象实例。

      +

      一个 Document 对象实例。

      示例

      @@ -43,22 +43,22 @@

      示例

      注意

      -

      document.write() 在页面加载后调用,会发生自动的 document.open()调用。

      +

      document.write() 在页面加载后调用,会发生自动的 document.open()调用。

      很多年以来,Firefox 和 IE 浏览器会在清除所有节点的同时,将所有 Javascript 变量等一并清除,但现在已经不采用这一做法。
      document non-spec'ed parameters to document.open

      -

      不要和 window.open() 方法混淆。document.open 可用于重写当前的文档内容或者追加内容,而 window.open 是提供了打开一个新的窗口的方法,当前的网页文档内容会被保留。由于 window 是一个全局对象,直接调用 open(...)  和 window.open(...) 的效果是一样的。你可以使用 document.close()关闭打开的文档。

      +

      不要和 window.open() 方法混淆。document.open 可用于重写当前的文档内容或者追加内容,而 window.open 是提供了打开一个新的窗口的方法,当前的网页文档内容会被保留。由于 window 是一个全局对象,直接调用 open(...) 和 window.open(...) 的效果是一样的。你可以使用 document.close()关闭打开的文档。

      See Security check basics for more about principals.

      -

      如果不想在当前文本追加内容, 使用 open("text/html", "replace") 替换 open() .

      +

      如果不想在当前文本追加内容, 使用 open("text/html", "replace") 替换 open() .

      针对 Gecko 的注意事项

      从 Gecko 1.9 开始,这个方法与其他属性一样受到同源策略的控制,若调用会使文档的源产生变化则不可用。

      -

      从 Gecko 1.9.2 开始,document.open() 使用文档的使用的 URI 的principal大,而不是从 stack 中取来 principal。因此,你无需再在不可信的文档里调用 {{domxref("document.write()")}} ,包括使用wrappedJSObject。关于 principal 的更多信息详见Security check basics

      +

      从 Gecko 1.9.2 开始,document.open() 使用文档的使用的 URI 的principal大,而不是从 stack 中取来 principal。因此,你无需再在不可信的文档里调用 {{domxref("document.write()")}} ,包括使用wrappedJSObject。关于 principal 的更多信息详见Security check basics

      diff --git a/files/zh-cn/web/api/document/origin/index.html b/files/zh-cn/web/api/document/origin/index.html index d55eec5aaa4ac8..d1eb7885980a36 100644 --- a/files/zh-cn/web/api/document/origin/index.html +++ b/files/zh-cn/web/api/document/origin/index.html @@ -5,7 +5,7 @@ ---
      {{APIRef("DOM")}}{{SeeCompatTable}}
      -

      Document.origin (只读属性) 返回文档的来源。通常该属性与 document.defaultView.location.origin 相等。

      +

      Document.origin (只读属性) 返回文档的来源。通常该属性与 document.defaultView.location.origin 相等。

      示例

      @@ -48,5 +48,5 @@

      浏览器兼容性

      参见

        -
      •  {{domxref("URLUtils.origin")}} 属性。
      • +
      • {{domxref("URLUtils.origin")}} 属性。
      diff --git a/files/zh-cn/web/api/document/plugins/index.html b/files/zh-cn/web/api/document/plugins/index.html index 72c3a3e64c6e34..8c61d5c9b7da91 100644 --- a/files/zh-cn/web/api/document/plugins/index.html +++ b/files/zh-cn/web/api/document/plugins/index.html @@ -5,11 +5,11 @@ ---
      {{APIRef("DOM")}}
      -
      {{domxref("Document")}}接口的插件只读属性返回一个{{domxref("HTMLCollection")}} 对象,该对象包含一个或多个{{domxref("HTMLEmbedElement")}}s 表示当前文档中的{{HTMLElement("embed")}} 元素。
      +
      {{domxref("Document")}}接口的插件只读属性返回一个{{domxref("HTMLCollection")}} 对象,该对象包含一个或多个{{domxref("HTMLEmbedElement")}}s 表示当前文档中的{{HTMLElement("embed")}} 元素。
      -
       
      +
      -
      对于已安装的插件列表,请使用 NavigatorPlugins.plugins 插件。
      +
      对于已安装的插件列表,请使用 NavigatorPlugins.plugins 插件。

      语法

      diff --git a/files/zh-cn/web/api/document/preferredstylesheetset/index.html b/files/zh-cn/web/api/document/preferredstylesheetset/index.html index 3f5012c2873458..a885cdd5bd10ad 100644 --- a/files/zh-cn/web/api/document/preferredstylesheetset/index.html +++ b/files/zh-cn/web/api/document/preferredstylesheetset/index.html @@ -5,14 +5,14 @@ ---
      {{APIRef("DOM")}}
      -

      preferredStyleSheetSet 属性会依网页作者的喜好回传阶层样式集。

      +

      preferredStyleSheetSet 属性会依网页作者的喜好回传阶层样式集。

      语法

      preferredStyleSheetSet = document.preferredStyleSheetSet
       
      -

      preferredStyleSheetSet 指的是作者偏好的阶层样式集。内容取决于阶层样式集的次序与 Default-Style HTTP 标头内容。

      +

      preferredStyleSheetSet 指的是作者偏好的阶层样式集。内容取决于阶层样式集的次序与 Default-Style HTTP 标头内容。

      如果作者没有定义偏好的阶层样式集,就会回传空白的 ("") 字符串。

      @@ -28,7 +28,7 @@

      范例

      规范

      浏览器相容性

      diff --git a/files/zh-cn/web/api/document/querycommandenabled/index.html b/files/zh-cn/web/api/document/querycommandenabled/index.html index fa1644d9ae218e..28fd5e7a9d124f 100644 --- a/files/zh-cn/web/api/document/querycommandenabled/index.html +++ b/files/zh-cn/web/api/document/querycommandenabled/index.html @@ -16,7 +16,7 @@ -

      Document.queryCommandEnabled() 方法可查询浏览器中指定的编辑指令是否可用。

      +

      Document.queryCommandEnabled() 方法可查询浏览器中指定的编辑指令是否可用。

      语法

      @@ -33,14 +33,14 @@

      参数

      返回值

      -

      返回 {{jsxref("Boolean")}} 值,true 表示指令可用,false表示指令不可用。

      +

      返回 {{jsxref("Boolean")}} 值,true 表示指令可用,false表示指令不可用。

      备注

        -
      • 经过测试,在部分浏览器它永远返回 false,而 IE 浏览器即使对于同样支持的属性也可能有不同返回值;有时 IE 还会对不支持的属性抛出异常而不是返回 false
      • -
      • 对于 "cut" 和 "copy" 指令,只有当用户启动的线程调用该方法时才返回 true。
      • -
      • "paste" 指令不仅当特性不可用时返回 false ,脚本权限不足时也一样。
      • +
      • 经过测试,在部分浏览器它永远返回 false,而 IE 浏览器即使对于同样支持的属性也可能有不同返回值;有时 IE 还会对不支持的属性抛出异常而不是返回 false
      • +
      • 对于 "cut""copy" 指令,只有当用户启动的线程调用该方法时才返回 true。
      • +
      • "paste" 指令不仅当特性不可用时返回 false ,脚本权限不足时也一样。

      示例

      diff --git a/files/zh-cn/web/api/document/querycommandsupported/index.html b/files/zh-cn/web/api/document/querycommandsupported/index.html index 4d56b71dce7085..c5b5280cbe10d7 100644 --- a/files/zh-cn/web/api/document/querycommandsupported/index.html +++ b/files/zh-cn/web/api/document/querycommandsupported/index.html @@ -8,9 +8,9 @@ ---
      {{ ApiRef("DOM") }}
      -
       
      +
      -

      Document.queryCommandSupported() 方法确定浏览器是否支持指定的编辑指令。

      +

      Document.queryCommandSupported() 方法确定浏览器是否支持指定的编辑指令。

      语法

      @@ -22,7 +22,7 @@

      语法

      待确定是否支持的命令。
    -

    如果命令不被支持,将触发 NotSupportedError 异常。

    +

    如果命令不被支持,将触发 NotSupportedError 异常。

    另外:

    @@ -30,7 +30,7 @@

    语法

  • 如果命令没有值或未启用,将返回空字符串。
  • "fontSize" 命令将被特殊处理,如果值被重写,它将返回最近似标准尺寸的整数倍像素大小。
  • 如果命令的值已被重写,将由重写返回。
  • -
  • 否则,此命令返回命令的值,如同 {{domxref("document.queryCommandValue()")}}.
  • +
  • 否则,此命令返回命令的值,如同 {{domxref("document.queryCommandValue()")}}.
  • 示例

    @@ -58,7 +58,7 @@

    规范

    - +
    {{domxref("DOMImplementation.createDocument","createDocument")}} (namespaceURI, qualifiedNameStr, {{domxref("DocumentType")}} )  {{domxref("document")}}
    {{domxref("DOMImplementation.createDocumentType","createDocumentType")}} ( qualifiedNameStr, publicId, systemId )  {{domxref("DocumentType")}}
    {{domxref("DOMImplementation.createHTMLDocument","createHTMLDocument")}} ( title )  {{domxref("document")}}
    {{domxref("DOMImplementation.getFeature","getFeature")}} ( feature, version )  {{domxref("DOMObject")}}
    {{domxref("DOMImplementation.hasFeature","hasFeature")}} ( feature, version )  {{domxref("Boolean")}}
    {{SpecName('HTML Editing','#querycommandsupported()','querycommandsupported')}} {{Spec2('HTML Editing')}} 
    diff --git a/files/zh-cn/web/api/document/queryselector/index.html b/files/zh-cn/web/api/document/queryselector/index.html index 1014c6acdfe9cb..715e1157eb6f64 100644 --- a/files/zh-cn/web/api/document/queryselector/index.html +++ b/files/zh-cn/web/api/document/queryselector/index.html @@ -11,7 +11,7 @@ ---
    {{ ApiRef("DOM") }}
    -

    文档对象模型{{domxref("Document")}}引用的querySelector()方法返回文档中与指定选择器或选择器组匹配的第一个 {{domxref("Element")}}对象。 如果找不到匹配项,则返回null

    +

    文档对象模型{{domxref("Document")}}引用的querySelector()方法返回文档中与指定选择器或选择器组匹配的第一个 {{domxref("Element")}}对象。 如果找不到匹配项,则返回null

    提示: 匹配是使用深度优先先序遍历,从文档标记中的第一个元素开始,并按子节点的顺序依次遍历。

    @@ -34,7 +34,7 @@

    参数

    返回值

    -

    表示文档中与指定的一组 CSS 选择器匹配的第一个元素,一个 {{domxref("Element")}}对象。如果没有匹配到,则返回 null。

    +

    表示文档中与指定的一组 CSS 选择器匹配的第一个元素,一个 {{domxref("Element")}}对象。如果没有匹配到,则返回 null。

    如果您需要与指定选择器匹配的所有元素的列表,则应该使用{{domxref("Document.querySelectorAll", "querySelectorAll()")}} 。

    diff --git a/files/zh-cn/web/api/document/queryselectorall/index.html b/files/zh-cn/web/api/document/queryselectorall/index.html index 5c93fac2e1f7ce..54d071d91846d4 100644 --- a/files/zh-cn/web/api/document/queryselectorall/index.html +++ b/files/zh-cn/web/api/document/queryselectorall/index.html @@ -20,10 +20,10 @@

    概述

    -

    返回与指定的选择器组匹配的文档中的元素列表 (使用深度优先的先序遍历文档的节点)。返回的对象是 {{domxref("NodeList")}} 。

    +

    返回与指定的选择器组匹配的文档中的元素列表 (使用深度优先的先序遍历文档的节点)。返回的对象是 {{domxref("NodeList")}} 。

    -

    注意:此方法基于{{domxref("ParentNode")}} mixin 的{{domxref("ParentNode.querySelectorAll", "querySelectorAll()")}} 实现。

    +

    注意:此方法基于{{domxref("ParentNode")}} mixin 的{{domxref("ParentNode.querySelectorAll", "querySelectorAll()")}} 实现。

    Syntax

    diff --git a/files/zh-cn/web/api/document/readystate/index.html b/files/zh-cn/web/api/document/readystate/index.html index 21a6ff54ba402c..bfb56d38143ad3 100644 --- a/files/zh-cn/web/api/document/readystate/index.html +++ b/files/zh-cn/web/api/document/readystate/index.html @@ -15,7 +15,7 @@ ---

    {{APIRef("DOM")}}

    -

    Document.readyState 属性描述了{{ domxref("document") }} 的加载状态。

    +

    Document.readyState 属性描述了{{ domxref("document") }} 的加载状态。

    当该属性值发生变化时,会在 {{domxref("document")}} 对象上触发 {{event("readystatechange")}} 事件。

    @@ -25,11 +25,11 @@

    语法

    -

    一个文档的 readyState 可以是以下之一:

    +

    一个文档的 readyState 可以是以下之一:

    loading(正在加载)
    -
    {{ domxref("document") }} 仍在加载。
    +
    {{ domxref("document") }} 仍在加载。
    interactive(可交互)
    文档已被解析,"正在加载"状态结束,但是诸如图像,样式表和框架之类的子资源仍在加载。
    complete(完成)
    @@ -76,7 +76,7 @@

    模拟 load 事件的 readystate } }

    -

    在 DOMContentLoaded 之前使用 readystatechange 作为事件处理程序以插入或修改 DOM

    +

    在 DOMContentLoaded 之前使用 readystatechange 作为事件处理程序以插入或修改 DOM

    document.addEventListener('readystatechange', event => {
       if (event.target.readyState === 'interactive') {
    diff --git a/files/zh-cn/web/api/document/referrer/index.html b/files/zh-cn/web/api/document/referrer/index.html
    index 4544f5f6254dca..006fe618968817 100644
    --- a/files/zh-cn/web/api/document/referrer/index.html
    +++ b/files/zh-cn/web/api/document/referrer/index.html
    @@ -10,7 +10,7 @@
     ---
     
    {{APIRef("DOM")}}
    -

    Document.referrer 返回的是一个 URI, 当前页面就是从这个 URI 所代表的页面 跳转或打开的。

    +

    Document.referrer 返回的是一个 URI, 当前页面就是从这个 URI 所代表的页面 跳转或打开的。

    @@ -23,7 +23,7 @@

    如果用户直接打开了这个页面(不是通过页面跳转,而是通过地址栏或者书签等打开的),则该属性为空字符串。由于该属性只是返回一个字符串,所以不能够通过该属性引用页面的 DOM。

    -

    在{{HTMLElement("iframe")}}中,Document.referrer 会初始化为父窗口{{domxref("Window/location", "Window.location")}}的{{domxref("HTMLHyperlinkElementUtils/href", "href")}}。

    +

    在{{HTMLElement("iframe")}}中,Document.referrer 会初始化为父窗口{{domxref("Window/location", "Window.location")}}的{{domxref("HTMLHyperlinkElementUtils/href", "href")}}。

    规范

    diff --git a/files/zh-cn/web/api/document/registerelement/index.html b/files/zh-cn/web/api/document/registerelement/index.html index 997c18ebefb6f8..d3ae3c9e234162 100644 --- a/files/zh-cn/web/api/document/registerelement/index.html +++ b/files/zh-cn/web/api/document/registerelement/index.html @@ -13,10 +13,10 @@

    警告:不建议使用document.registerElement(),请使用{{DOMxRef("CustomElementRegistry.define()","customElements.define()")}}。

    -

    Document.registerElement() 在浏览器注册一个新的 自定义元素 ,返回一个该元素的构造函数。

    +

    Document.registerElement() 在浏览器注册一个新的 自定义元素 ,返回一个该元素的构造函数。

    -

    注意:这是一项正在试验的技术。你可以在支持 Web Components 的浏览器中使用。参考 在火狐浏览器启用 Web Components 。

    +

    注意:这是一项正在试验的技术。你可以在支持 Web Components 的浏览器中使用。参考 在火狐浏览器启用 Web Components

    语法

    @@ -27,7 +27,7 @@

    参数

    tag-name
    -
    自定义标签的名字。 必须含有一个连字符(-),例如 my-tag。
    +
    自定义标签的名字。 必须含有一个连字符(-),例如 my-tag。
    options {{optional_inline}}
    这个参数是一个用于添加描述自定义元素原型属性和扩展的对象,以扩展现有标签。这个参数是可选的。
    @@ -39,11 +39,11 @@

    示例

    var Mytag = document.registerElement('my-tag');
     
    -

    我们把新标签注册到浏览器。 Mytag 变量拥有一个构造函数,你可以像如下所示一样使用它创造一个新的 my-tag 元素。

    +

    我们把新标签注册到浏览器。 Mytag 变量拥有一个构造函数,你可以像如下所示一样使用它创造一个新的 my-tag 元素。

    document.body.appendChild(new Mytag());
    -

    这样我们就插入了一个空的 my-tag 元素,你可以通过浏览器提供的开发者工具来找到它。如果你使用浏览器来查看源代码它是不可见的。由于现在元素并没有内容,所以我们在页面中是看不到它的。我们可以给它添加一些内容,以便在页面中看到。 下面是一种往新标签里面添加内容的方式。

    +

    这样我们就插入了一个空的 my-tag 元素,你可以通过浏览器提供的开发者工具来找到它。如果你使用浏览器来查看源代码它是不可见的。由于现在元素并没有内容,所以我们在页面中是看不到它的。我们可以给它添加一些内容,以便在页面中看到。 下面是一种往新标签里面添加内容的方式。

    var mytag = document.getElementsByTagName("my-tag")[0];
     mytag.textContent = "I am a my-tag element.";
    diff --git a/files/zh-cn/web/api/document/scripts/index.html b/files/zh-cn/web/api/document/scripts/index.html
    index 14841f96a3f027..77831685cb300e 100644
    --- a/files/zh-cn/web/api/document/scripts/index.html
    +++ b/files/zh-cn/web/api/document/scripts/index.html
    @@ -15,7 +15,7 @@ 

    例子

    var scripts = document.scripts;
     
     if (scripts.length) {
    -  alert("该页面存在 script 标签!");
    +  alert("该页面存在 script 标签!");
     }
     

    浏览器兼容性

    diff --git a/files/zh-cn/web/api/document/scroll_event/index.html b/files/zh-cn/web/api/document/scroll_event/index.html index 4502bbef0b82fb..bc1aae91d24396 100644 --- a/files/zh-cn/web/api/document/scroll_event/index.html +++ b/files/zh-cn/web/api/document/scroll_event/index.html @@ -39,16 +39,16 @@
    -

    注意:在 iOS UIWebViews 中, 滚动进行时不会触发 scroll 事件;只有当滚动结束后事件才会被触发。参见 Bootstrap issue #16202。Safari 和 WKWebViews 则没有这个问题。

    +

    注意:在 iOS UIWebViews 中, 滚动进行时不会触发 scroll 事件;只有当滚动结束后事件才会被触发。参见 Bootstrap issue #16202。Safari 和 WKWebViews 则没有这个问题。

    示例

    Scroll 事件节流

    -

    由于 scroll 事件可被高频触发,事件处理程序不应该执行高性能消耗的操作,如 DOM 操作。而更推荐的做法是使用 {{DOMxRef("Window.requestAnimationFrame()", "requestAnimationFrame()")}}、{{DOMxRef("setTimeout()")}} 或 {{DOMxRef("CustomEvent")}} 给事件节流,如下所述。

    +

    由于 scroll 事件可被高频触发,事件处理程序不应该执行高性能消耗的操作,如 DOM 操作。而更推荐的做法是使用 {{DOMxRef("Window.requestAnimationFrame()", "requestAnimationFrame()")}}、{{DOMxRef("setTimeout()")}} 或 {{DOMxRef("CustomEvent")}} 给事件节流,如下所述。

    -

    然而需要注意的是,输入事件和动画帧常常以差不多的频率被触发,因此以下优化常常不必要。这个例子使用 requestAnimationFrame 优化 scroll 事件。

    +

    然而需要注意的是,输入事件和动画帧常常以差不多的频率被触发,因此以下优化常常不必要。这个例子使用 requestAnimationFrame 优化 scroll 事件。

    // 参见: http://www.html5rocks.com/en/tutorials/speed/animations/
     
    @@ -72,7 +72,7 @@ 

    Scroll 事件节流

    } });
    -

    在 resize 事件页面中查看更多类似的例子。

    +

    resize 事件页面中查看更多类似的例子。

    规范

    diff --git a/files/zh-cn/web/api/document/scrollingelement/index.html b/files/zh-cn/web/api/document/scrollingelement/index.html index 1d8e6ad6b9af83..72b684c5bca778 100644 --- a/files/zh-cn/web/api/document/scrollingelement/index.html +++ b/files/zh-cn/web/api/document/scrollingelement/index.html @@ -5,9 +5,9 @@ ---
    {{APIRef("DOM")}}
    -

    scrollingElement ( {{domxref("Document")}} 的只读属性)返回滚动文档的 {{domxref("Element")}} 对象的引用。 在标准模式下,这是文档的根元素, {{domxref("document.documentElement")}}.

    +

    scrollingElement ( {{domxref("Document")}} 的只读属性)返回滚动文档的 {{domxref("Element")}} 对象的引用。 在标准模式下,这是文档的根元素, {{domxref("document.documentElement")}}.

    -

    当在怪异模式下, scrollingElement 属性返回 HTML body 元素(若不存在返回 null )。

    +

    当在怪异模式下, scrollingElement 属性返回 HTML body 元素(若不存在返回 null )。

    语法

    diff --git a/files/zh-cn/web/api/document/selectedstylesheetset/index.html b/files/zh-cn/web/api/document/selectedstylesheetset/index.html index db0a02f1362be0..82183d1ccd723b 100644 --- a/files/zh-cn/web/api/document/selectedstylesheetset/index.html +++ b/files/zh-cn/web/api/document/selectedstylesheetset/index.html @@ -23,7 +23,7 @@

    语法

    示例

    -
    console.log("Current style sheet set: " + document.selectedStyleSheetSet);
    +
    console.log("Current style sheet set: " + document.selectedStyleSheetSet);
     
     document.selectedStyleSheetSet = "Some other style sheet";
     
    @@ -42,5 +42,5 @@

    参看

    规范

    diff --git a/files/zh-cn/web/api/document/selectionchange_event/index.html b/files/zh-cn/web/api/document/selectionchange_event/index.html index ed0a34228f2cb2..7485cd7cb99013 100644 --- a/files/zh-cn/web/api/document/selectionchange_event/index.html +++ b/files/zh-cn/web/api/document/selectionchange_event/index.html @@ -4,7 +4,7 @@ translation_of: Web/API/Document/selectionchange_event ---
    -

    Selection API 的 selectionchange 事件在文档上的当前文本选择被改变时触发。

    +

    Selection APIselectionchange 事件在文档上的当前文本选择被改变时触发。

    @@ -42,7 +42,7 @@

    例子

    继承

    -

    selectionchange 事件实现了 {{domxref("Event")}} 接口,因此在此接口上定义的属性和方法都可使用。

    +

    selectionchange 事件实现了 {{domxref("Event")}} 接口,因此在此接口上定义的属性和方法都可使用。

    {{InheritanceDiagram('','','', 'Event')}}

    diff --git a/files/zh-cn/web/api/document/selectstart_event/index.html b/files/zh-cn/web/api/document/selectstart_event/index.html index 83f0faa0a59643..4ec0848a87fcb5 100644 --- a/files/zh-cn/web/api/document/selectstart_event/index.html +++ b/files/zh-cn/web/api/document/selectstart_event/index.html @@ -8,7 +8,7 @@ translation_of: Web/API/Document/selectstart_event ---
    -

    Selection API 的 selectstart 事件在用户开始一个新的选择时候触发。

    +

    Selection APIselectstart 事件在用户开始一个新的选择时候触发。

    如果事件被取消,选择将不被触发。

    diff --git a/files/zh-cn/web/api/document/stylesheets/index.html b/files/zh-cn/web/api/document/stylesheets/index.html index 3abb0404777356..28dcfce6d0f1b0 100644 --- a/files/zh-cn/web/api/document/stylesheets/index.html +++ b/files/zh-cn/web/api/document/stylesheets/index.html @@ -6,7 +6,7 @@ ---
    {{SeeCompatTable}}{{APIRef("Shadow DOM")}}
    -

    styleSheets {{domxref("DocumentOrShadowRoot")}} 接口定义的只读属性,它会返回一个 {{domxref('StyleSheetList')}} / {{domxref('CSSStyleSheet')}} 对象,这个对象对应的是通过引入或者嵌入文档中的样式表。

    +

    styleSheets {{domxref("DocumentOrShadowRoot")}} 接口定义的只读属性,它会返回一个 {{domxref('StyleSheetList')}} / {{domxref('CSSStyleSheet')}} 对象,这个对象对应的是通过引入或者嵌入文档中的样式表。

    示例代码

    diff --git a/files/zh-cn/web/api/document/title/index.html b/files/zh-cn/web/api/document/title/index.html index 5c81a43bf74309..82089af0831e87 100644 --- a/files/zh-cn/web/api/document/title/index.html +++ b/files/zh-cn/web/api/document/title/index.html @@ -10,10 +10,10 @@

    概述

    语法

    var docTitle = document.title;
     
    -

    title 是一个包含 document 标题的字符串。如果通过设置 document.title 将标题覆盖,则返回覆盖后的值。否则返回标签里指定的标题(参见下面的 Notes)。

    +

    title 是一个包含 document 标题的字符串。如果通过设置 document.title 将标题覆盖,则返回覆盖后的值。否则返回标签里指定的标题(参见下面的 Notes)。

    document.title = newTitle;
     
    -

    newTitle 是文档的新标题。赋值操作影响 document.title 的返回值,文档的显示标题(即窗口或标签页顶部的标题栏),另外还会影响文档的 DOM,即改变 HTML 文档中 <title> 元素的内容。

    +

    newTitle 是文档的新标题。赋值操作影响 document.title 的返回值,文档的显示标题(即窗口或标签页顶部的标题栏),另外还会影响文档的 DOM,即改变 HTML 文档中 <title> 元素的内容。

    示例

    <!DOCTYPE html>
     <html>
    @@ -33,8 +33,8 @@ 

    示例

    备注

    在 Gecko 中,该属性适应于 HTML、SVG、XUL 和其他文档。

    -

    对于 HTML 文档来说,document.title 的初始值是 <title> 元素的文本内容。对于 XUL 来说,它是 {{XULElem("window")}} 或其他顶级 XUL 元素的 {{XULAttr("title")}} 属性的值。

    -

    在 XUL 里,在文档完全加载之前访问 document.title,会有未定义行为(document.title 可能返回一个空字符串,并且设置 document.title 也无效)。

    +

    对于 HTML 文档来说,document.title 的初始值是 <title> 元素的文本内容。对于 XUL 来说,它是 {{XULElem("window")}} 或其他顶级 XUL 元素的 {{XULAttr("title")}} 属性的值。

    +

    在 XUL 里,在文档完全加载之前访问 document.title,会有未定义行为(document.title 可能返回一个空字符串,并且设置 document.title 也无效)。

    规范

    • DOM Level 2 HTML: document.title
    • diff --git a/files/zh-cn/web/api/document/touchmove_event/index.html b/files/zh-cn/web/api/document/touchmove_event/index.html index c8092f8ba525ab..b8e22d03f6ee03 100644 --- a/files/zh-cn/web/api/document/touchmove_event/index.html +++ b/files/zh-cn/web/api/document/touchmove_event/index.html @@ -107,7 +107,7 @@

      属性

      示例

      -

      这些事件的代码示例在这个页面 Touch events 中均有体现。

      +

      这些事件的代码示例在这个页面 Touch events 中均有体现。

      规范

      diff --git a/files/zh-cn/web/api/document/touchstart_event/index.html b/files/zh-cn/web/api/document/touchstart_event/index.html index 0686338b473a3c..1d7418a60b65e5 100644 --- a/files/zh-cn/web/api/document/touchstart_event/index.html +++ b/files/zh-cn/web/api/document/touchstart_event/index.html @@ -12,7 +12,7 @@ ---
      {{APIRef}}
      -

      当一个或多个触摸点与触控设备表面接触时触发touchstart 事件。

      +

      当一个或多个触摸点与触控设备表面接触时触发touchstart 事件。

    @@ -54,5 +54,5 @@

    参见

    diff --git a/files/zh-cn/web/api/document/visibilitychange_event/index.html b/files/zh-cn/web/api/document/visibilitychange_event/index.html index 97c565a9500399..e01f462c72c567 100644 --- a/files/zh-cn/web/api/document/visibilitychange_event/index.html +++ b/files/zh-cn/web/api/document/visibilitychange_event/index.html @@ -30,14 +30,14 @@

    概述

    使用说明

    -

    该事件不包括文档的更新的可见性状态,但是您可以从文档的  {{domxref("Document.visibilityState", "visibilityState")}} 属性中获取该信息。

    +

    该事件不包括文档的更新的可见性状态,但是您可以从文档的 {{domxref("Document.visibilityState", "visibilityState")}} 属性中获取该信息。

    -

    当 visibleStateState 属性的值转换为 hidden 时,Safari 不会按预期触发visibilitychange; 因此,在这种情况下,您还需要包含代码以侦听 pagehide 事件。

    +

    当 visibleStateState 属性的值转换为 hidden 时,Safari 不会按预期触发visibilitychange; 因此,在这种情况下,您还需要包含代码以侦听 pagehide 事件。

    -

    出于兼容性原因,请确保使用  document.addEventListener 而不是window.addEventListener来注册回调。 Safari <14.0 仅支持前者。

    +

    出于兼容性原因,请确保使用 document.addEventListener 而不是window.addEventListener来注册回调。 Safari <14.0 仅支持前者。

    属性

    diff --git a/files/zh-cn/web/api/document/visibilitystate/index.html b/files/zh-cn/web/api/document/visibilitystate/index.html index 894f2a5cb80bbc..1b393cc267ffc9 100644 --- a/files/zh-cn/web/api/document/visibilitystate/index.html +++ b/files/zh-cn/web/api/document/visibilitystate/index.html @@ -5,15 +5,15 @@ ---

    {{ ApiRef("DOM") }}

    -

     Document.visibilityState (只读属性), 返回{{domxref('document')}}的可见性, 即当前可见元素的上下文环境。由此可以知道当前文档 (即为页面) 是在背后, 或是不可见的隐藏的标签页,或者 (正在) 预渲染。可用的值如下:

    +

    Document.visibilityState (只读属性), 返回{{domxref('document')}}的可见性, 即当前可见元素的上下文环境。由此可以知道当前文档 (即为页面) 是在背后, 或是不可见的隐藏的标签页,或者 (正在) 预渲染。可用的值如下:

      -
    • 'visible' : 此时页面内容至少是部分可见. 即此页面在前景标签页中,并且窗口没有最小化。
    • +
    • 'visible' : 此时页面内容至少是部分可见. 即此页面在前景标签页中,并且窗口没有最小化。
    • 'hidden' : 此时页面对用户不可见。即文档处于背景标签页或者窗口处于最小化状态,或者操作系统正处于 '锁屏状态' .
    • -
    • 'prerender' : 页面此时正在渲染中,因此是不可见的 (considered hidden for purposes of document.hidden). 文档只能从此状态开始,永远不能从其他值变为此状态。注意: 浏览器支持是可选的。
    • +
    • 'prerender' : 页面此时正在渲染中,因此是不可见的 (considered hidden for purposes of document.hidden). 文档只能从此状态开始,永远不能从其他值变为此状态。注意: 浏览器支持是可选的。
    -

    当此属性的值改变时,会递交 {{event('visibilitychange')}} 事件给{{domxref("Document")}}.

    +

    当此属性的值改变时,会递交 {{event('visibilitychange')}} 事件给{{domxref("Document")}}.

    典型用法是防止当页面正在渲染时加载资源,或者当页面在背景中或窗口最小化时禁止某些活动。

    diff --git a/files/zh-cn/web/api/document/write/index.html b/files/zh-cn/web/api/document/write/index.html index 61867c31629f45..5727493cea55ef 100644 --- a/files/zh-cn/web/api/document/write/index.html +++ b/files/zh-cn/web/api/document/write/index.html @@ -12,7 +12,7 @@ ---
    {{ApiRef("DOM")}}
    -

    Document.write() 方法将一个文本字符串写入一个由 {{domxref("document.open()")}} 打开的文档流(document stream)。

    +

    Document.write() 方法将一个文本字符串写入一个由 {{domxref("document.open()")}} 打开的文档流(document stream)。

    注意: 因为 document.write 需要向文档中写入内容,所以,若在一个已关闭(例如,已完成加载)的文档上调用 document.write,就会自动调用 document.open这将清空该文档的内容

    @@ -34,8 +34,8 @@

    示例

    <html>
     
     <head>
    -    <meta charset="UTF-8">
    -    <title><code>document.write()</code> example</title>
    +    <meta charset="UTF-8">
    +    <title><code>document.write()</code> example</title>
     
         <script>
           function newContent() {
    @@ -46,7 +46,7 @@ 

    示例

    </script>
    </head> <body onload="newContent();"> -    <p>Some original document content.</p> + <p>Some original document content.</p> </body> </html> @@ -56,7 +56,7 @@

    示例

    备注

    -

    向一个已经加载,并且没有调用过 {{domxref("document.open()")}} 的文档写入数据时,会自动调用 document.open。一旦完成了数据写入,建议调用 {{domxref("document.close()")}},以告诉浏览器当前页面已经加载完毕。写入的数据会被解析到文档结构模型(DOM)里。在上面的例子里,元素 h1 会成为文档中的一个节点。

    +

    向一个已经加载,并且没有调用过 {{domxref("document.open()")}} 的文档写入数据时,会自动调用 document.open。一旦完成了数据写入,建议调用 {{domxref("document.close()")}},以告诉浏览器当前页面已经加载完毕。写入的数据会被解析到文档结构模型(DOM)里。在上面的例子里,元素 h1 会成为文档中的一个节点。

    如果 document.write() 调用发生在 HTML 里的 <script> 标签中,那么它将不会自动调用 document.open()。详见如下例子:

    @@ -65,11 +65,11 @@

    备注

    </script>
    -
    注意:document.write 和 {{domxref("document.writeln")}} 在 XHTML 文档中不可用(控制台上会显示 "Operation is not supported"[NS_ERROR_DOM_NOT_SUPPORTED_ERR] 的报错信息)。 当打开本地的 .xhtml 格式的文件或任何其他 {{Glossary("MIME type", "MIME 类型")}}为 application/xhtml+xml 的文档时,均会报错。更多信息可查看 W3C XHTML FAQ
    +
    注意:document.write 和 {{domxref("document.writeln")}} 在 XHTML 文档中不可用(控制台上会显示 "Operation is not supported"[NS_ERROR_DOM_NOT_SUPPORTED_ERR] 的报错信息)。 当打开本地的 .xhtml 格式的文件或任何其他 {{Glossary("MIME type", "MIME 类型")}}为 application/xhtml+xml 的文档时,均会报错。更多信息可查看 W3C XHTML FAQ
    -
    注意:在有deferred 或 asynchronous 属性的 script 中,document.write 会被忽略,控制台会显示 "A call to document.write() from an asynchronously-loaded external script was ignored" 的报错信息。
    +
    注意:在有deferredasynchronous 属性的 script 中,document.write 会被忽略,控制台会显示 "A call to document.write() from an asynchronously-loaded external script was ignored" 的报错信息。
    -
    注意:在 Edge 中,在 {{HTMLElement("iframe")}} 内部调用 document.write 多于一次时会引发错误 SCRIPT70: Permission denied。
    +
    注意:在 Edge 中,在 {{HTMLElement("iframe")}} 内部调用 document.write 多于一次时会引发错误 SCRIPT70: Permission denied。
    注意:从 Chrome 55 开始,Chrome(可能)不会运行通过 document.write() 注入的<script>,以防止使用 2G 连接的用户找不到 HTTP 缓存。前往此链接查看这种情况发生需要满足的条件。
    diff --git a/files/zh-cn/web/api/document/writeln/index.html b/files/zh-cn/web/api/document/writeln/index.html index 5daf0b1fb3d843..5d16599422dc49 100644 --- a/files/zh-cn/web/api/document/writeln/index.html +++ b/files/zh-cn/web/api/document/writeln/index.html @@ -11,14 +11,14 @@

    语法

    参数

      -
    • line 为包含文本的字符串
    • +
    • line 为包含文本的字符串

    示例

    document.writeln("<p>enter password:</p>");
     

    备注

    -

    document.writelndocument.write 一样,但是会添加一个换行符。

    +

    document.writelndocument.write 一样,但是会添加一个换行符。

    - Note: document.writeln (like document.write) does not work in XHTML documents (you'll get a "Operation is not supported" (NS_ERROR_DOM_NOT_SUPPORTED_ERR) error on the error console). This is the case if opening a local file with a .xhtml file extension or for any document served with an application/xhtml+xml MIME type. More information is available in the W3C XHTML FAQ.
    + Note: document.writeln (like document.write) does not work in XHTML documents (you'll get a "Operation is not supported" (NS_ERROR_DOM_NOT_SUPPORTED_ERR) error on the error console). This is the case if opening a local file with a .xhtml file extension or for any document served with an application/xhtml+xml MIME type. More information is available in the W3C XHTML FAQ.

    规范

    writeln

    diff --git a/files/zh-cn/web/api/document_object_model/examples/index.html b/files/zh-cn/web/api/document_object_model/examples/index.html index 18a27f82389004..0b8365276e10b8 100644 --- a/files/zh-cn/web/api/document_object_model/examples/index.html +++ b/files/zh-cn/web/api/document_object_model/examples/index.html @@ -6,11 +6,11 @@ - DOM 参考 translation_of: Web/API/Document_Object_Model/Examples --- -

    本章介绍提供了一些长例子来介绍如何使用 DOM 进行 Web 以及 XML 开发。在可能的情况下,例子只使用普通 API ,技巧以及 JavaScript 模式来操作文档对象。

    +

    本章介绍提供了一些长例子来介绍如何使用 DOM 进行 Web 以及 XML 开发。在可能的情况下,例子只使用普通 API ,技巧以及 JavaScript 模式来操作文档对象。

    示例 1: 高度和宽度

    -

    下面的例子展示了在不同尺寸的图片时使用其 height 和 width 属性的情况:

    +

    下面的例子展示了在不同尺寸的图片时使用其 height 和 width 属性的情况:

    <!DOCTYPE html>
     <html lang="en">
    @@ -35,7 +35,7 @@ 

    示例 1: 高度和宽度

    ", style.height=" + arrImages[i].style.height + ", style.width=" + arrImages[i].style.width + "<\/li>"; -  } + } strHtml += "<\/ul>"; @@ -81,14 +81,14 @@

    示例 2: 图片属性

    <body> <p> <img id="img1" -  src="image1.gif" -  style="border: 5px solid green;" -  width="100" height="100" alt="border test"> + src="image1.gif" + style="border: 5px solid green;" + width="100" height="100" alt="border test"> </p> <form name="FormName"> <input type="button" value="Make border 20px-wide" onclick="setBorderWidth(20);" /> -  <input type="button" value="Make border 5px-wide" onclick="setBorderWidth(5);" /> + <input type="button" value="Make border 5px-wide" onclick="setBorderWidth(5);" /> </form> </body> @@ -106,9 +106,9 @@

    示例 3: 操作样式

    <script type="text/javascript"> function changeText() { -  var p = document.getElementById("pid"); + var p = document.getElementById("pid"); -  p.style.color = "blue" + p.style.color = "blue" p.style.fontSize = "18pt" } </script> @@ -154,9 +154,9 @@

    示例 4: 使用样式表

    示例 5: 冒泡事件

    -

    本例以一种简单的方法阐述了事件是如何触发以及在 DOM 中是如何处理的。当这个 HTML 文档 BODY 载入的时候,在 TABLE 的首行注册了一个事件监听器。事件监听器通过执行函数 stopEvent 处理事件,从而改变在该表的底部单元的值。

    +

    本例以一种简单的方法阐述了事件是如何触发以及在 DOM 中是如何处理的。当这个 HTML 文档 BODY 载入的时候,在 TABLE 的首行注册了一个事件监听器。事件监听器通过执行函数 stopEvent 处理事件,从而改变在该表的底部单元的值。

    -

    然而,stopEvent 同时也会调用一个事件对象的方法,event.stopPropagation,其阻止了当前事件在 DOM 的进一步冒泡行为。请注意,表本身有一个 {{domxref("element.onclick","onclick")}} 事件处理程序,当表被点击时其会显示一条消息。但 stopEvent 方法已经阻止了冒泡,所以在表中的数据更新后,该事件事件阶段有效地结束(effectively ended),并且显示一个警告框——证实了有效结束。

    +

    然而,stopEvent 同时也会调用一个事件对象的方法,event.stopPropagation,其阻止了当前事件在 DOM 的进一步冒泡行为。请注意,表本身有一个 {{domxref("element.onclick","onclick")}} 事件处理程序,当表被点击时其会显示一条消息。但 stopEvent 方法已经阻止了冒泡,所以在表中的数据更新后,该事件事件阶段有效地结束(effectively ended),并且显示一个警告框——证实了有效结束。

    <!DOCTYPE html>
     <html>
    @@ -203,9 +203,9 @@ 

    示例 5: 冒泡事件

    示例 6: getComputedStyle

    -

    这个例子演示了如何用{{domxref("window.getComputedStyle")}}方法来获取一个元素的样式而不是使用 style 属性或 JavaScript 的(例如,elt.style.backgroundColor="RGB(173,216,230)")。列举在 DOM CSS Properties List 后面的类型的样式可以用更直接{{domxref("element.style", "elt.style")}} 属性获取。

    +

    这个例子演示了如何用{{domxref("window.getComputedStyle")}}方法来获取一个元素的样式而不是使用 style 属性或 JavaScript 的(例如,elt.style.backgroundColor="RGB(173,216,230)")。列举在 DOM CSS Properties List 后面的类型的样式可以用更直接{{domxref("element.style", "elt.style")}} 属性获取。

    -

    getComputedStyle() 返回了一个 ComputedCSSStyleDeclaration 对象,其独立的样式属性可以用该对象的 getPropertyValue() 方法引用,如同下面的例子一样:

    +

    getComputedStyle() 返回了一个 ComputedCSSStyleDeclaration 对象,其独立的样式属性可以用该对象的 getPropertyValue() 方法引用,如同下面的例子一样:

    <!DOCTYPE html>
     <html lang="en">
    @@ -219,12 +219,12 @@ 

    示例 6: getComputedStyle

    var txtHeight = document.getElementById("t1"); var h_style = document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("height"); -  txtHeight.value = h_style; + txtHeight.value = h_style; var txtWidth = document.getElementById("t2"); var w_style = document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("width"); -  txtWidth.value = w_style; + txtWidth.value = w_style; var txtBackgroundColor = document.getElementById("t3"); var b_style = document.defaultView.getComputedStyle(RefDiv,null).getPropertyValue("background-color"); @@ -235,10 +235,10 @@

    示例 6: getComputedStyle

    <style> #d1 { -  margin-left: 10px; -  background-color: rgb(173, 216, 230); + margin-left: 10px; + background-color: rgb(173, 216, 230); height: 20px; -  max-width: 20px; } + max-width: 20px; } </style> </head> @@ -249,7 +249,7 @@

    示例 6: getComputedStyle

    <form action=""> <p> -  <button type="button" onclick="cStyles();">getComputedStyle</button> + <button type="button" onclick="cStyles();">getComputedStyle</button> height<input id="t1" type="text" value="1"> max-width<input id="t2" type="text" value="2"> bg-color<input id="t3" type="text" value="3"></p> @@ -261,7 +261,7 @@

    示例 6: getComputedStyle

    示例 7: 显示事件对象的属性

    -

    这个例子使用 DOM 方法来显示{{domxref("window.onload")}} {{domxref("event")}}对象的属性及其在 table 中的值。这个方法也展示一个有用的技术即使用了{{jsxref("Statements/for...in", "for...in")}} 循环来遍历一个对象的属性,以得到他们的值。

    +

    这个例子使用 DOM 方法来显示{{domxref("window.onload")}} {{domxref("event")}}对象的属性及其在 table 中的值。这个方法也展示一个有用的技术即使用了{{jsxref("Statements/for...in", "for...in")}} 循环来遍历一个对象的属性,以得到他们的值。

    不同浏览器之间事件对象的属性有很大不同,W3C DOM2 事件规范规定了事件的标准属性,然而,许多浏览器都大大扩展了这些。

    @@ -308,7 +308,7 @@

    示例 7: 显示事件对 for (var p in e) { row = tbody.insertRow(-1); - row.className = (row.rowIndex % 2)? 'odd':'even'; + row.className = (row.rowIndex % 2)? 'odd':'even'; addCell(row, row.rowIndex); addCell(row, p); addCell(row, e[p]); @@ -347,7 +347,7 @@

    示例 8: 使用 DOM Table 接 var table = document.getElementById('table0'); var row = table.insertRow(-1); var cell, -  text; + text; for (var i=0; i<2; i++) { cell = row.insertCell(-1); @@ -361,7 +361,7 @@

    注意

    • 表的{{domxref("element.innerHTML","innerHTML")}}属性不应该被用来修改表,虽然你可以用它来写一个完整的表格或单元格的内容。
    • -
    • 如果用 DOM 核心方法{{domxref("document.createElement")}}和{{domxref("Node.appendChild")}}创建表的行和单元,IE 会要求它们附加到一个 tbody 元素,而其它浏览器允许它们附加到一个 table 元素(行会被添加到最后的 tbody 元素)。
    • +
    • 如果用 DOM 核心方法{{domxref("document.createElement")}}和{{domxref("Node.appendChild")}}创建表的行和单元,IE 会要求它们附加到一个 tbody 元素,而其它浏览器允许它们附加到一个 table 元素(行会被添加到最后的 tbody 元素)。
    • 表接口还有一些可用于创建和修改的表的便利方法。
    diff --git a/files/zh-cn/web/api/document_object_model/how_to_create_a_dom_tree/index.html b/files/zh-cn/web/api/document_object_model/how_to_create_a_dom_tree/index.html index bd0a9043eb7121..2375d676807df9 100644 --- a/files/zh-cn/web/api/document_object_model/how_to_create_a_dom_tree/index.html +++ b/files/zh-cn/web/api/document_object_model/how_to_create_a_dom_tree/index.html @@ -3,7 +3,7 @@ slug: Web/API/Document_Object_Model/How_to_create_a_DOM_tree translation_of: Web/API/Document_object_model/How_to_create_a_DOM_tree --- -

    这个页面讲的是如何利用 JavaScript 中的 DOM Core API 来创建和修改 DOM 对象。它适用于特权(扩展)和非特权(网页)代码中的所有基于 Gecko 的应用程序(如 Firefox)。

    +

    这个页面讲的是如何利用 JavaScript 中的 DOM Core API 来创建和修改 DOM 对象。它适用于特权(扩展)和非特权(网页)代码中的所有基于 Gecko 的应用程序(如 Firefox)。

    Dynamically creating a DOM tree

    @@ -83,43 +83,43 @@

    Dynamically creating a DOM tree

    You can automate the creation of a DOM tree using a JXON reverse algorithm in association with the following JSON representation:

    {
    -  "people": {
    -    "person": [{
    -      "address": [{
    -        "@street": "321 south st",
    -        "@city": "denver",
    -        "@state": "co",
    -        "@country": "usa"
    -      }, {
    -        "@street": "123 main st",
    -        "@city": "arlington",
    -        "@state": "ma",
    -        "@country": "usa"
    -      }],
    -      "@first-name": "eric",
    -      "@middle-initial": "H",
    -      "@last-name": "jung"
    -    }, {
    -      "address": [{
    -        "@street": "321 north st",
    -        "@city": "atlanta",
    -        "@state": "ga",
    -        "@country": "usa"
    -      }, {
    -        "@street": "123 west st",
    -        "@city": "seattle",
    -        "@state": "wa",
    -        "@country": "usa"
    -      }, {
    -        "@street": "321 south avenue",
    -        "@city": "denver",
    -        "@state": "co",
    -        "@country": "usa"
    -      }],
    -      "@first-name": "jed",
    -      "@last-name": "brown"
    -    }]
    -  }
    +  "people": {
    +    "person": [{
    +      "address": [{
    +        "@street": "321 south st",
    +        "@city": "denver",
    +        "@state": "co",
    +        "@country": "usa"
    +      }, {
    +        "@street": "123 main st",
    +        "@city": "arlington",
    +        "@state": "ma",
    +        "@country": "usa"
    +      }],
    +      "@first-name": "eric",
    +      "@middle-initial": "H",
    +      "@last-name": "jung"
    +    }, {
    +      "address": [{
    +        "@street": "321 north st",
    +        "@city": "atlanta",
    +        "@state": "ga",
    +        "@country": "usa"
    +      }, {
    +        "@street": "123 west st",
    +        "@city": "seattle",
    +        "@state": "wa",
    +        "@country": "usa"
    +      }, {
    +        "@street": "321 south avenue",
    +        "@city": "denver",
    +        "@state": "co",
    +        "@country": "usa"
    +      }],
    +      "@first-name": "jed",
    +      "@last-name": "brown"
    +    }]
    +  }
     }
     
    diff --git a/files/zh-cn/web/api/document_object_model/index.html b/files/zh-cn/web/api/document_object_model/index.html index 388a90d8faceac..255697ec31a228 100644 --- a/files/zh-cn/web/api/document_object_model/index.html +++ b/files/zh-cn/web/api/document_object_model/index.html @@ -10,9 +10,9 @@ ---

    {{DefaultAPISidebar("DOM")}}

    -

    文档对象模型 (DOM) 将 web 页面与到脚本或编程语言连接起来。通常是指  JavaScript,但将 HTML、SVG 或 XML 文档建模为对象并不是 JavaScript 语言的一部分。DOM 模型用一个逻辑树来表示一个文档,树的每个分支的终点都是一个节点 (node),每个节点都包含着对象 (objects)。DOM 的方法 (methods) 让你可以用特定方式操作这个树,用这些方法你可以改变文档的结构、样式或者内容。节点可以关联上事件处理器,一旦某一事件被触发了,那些事件处理器就会被执行。

    +

    文档对象模型 (DOM) 将 web 页面与到脚本或编程语言连接起来。通常是指 JavaScript,但将 HTML、SVG 或 XML 文档建模为对象并不是 JavaScript 语言的一部分。DOM 模型用一个逻辑树来表示一个文档,树的每个分支的终点都是一个节点 (node),每个节点都包含着对象 (objects)。DOM 的方法 (methods) 让你可以用特定方式操作这个树,用这些方法你可以改变文档的结构、样式或者内容。节点可以关联上事件处理器,一旦某一事件被触发了,那些事件处理器就会被执行。

    -

    这里还有一篇关于 DOM 的 介绍 。

    +

    这里还有一篇关于 DOM 的 介绍

    DOM 接口

    @@ -60,7 +60,7 @@

    DOM 接口

    过时的 DOM 接口

    -

    DOM 模型已经被高度简化了。为此,以下出现在 DOM level 3 或更早的规范里的接口已经被移除了。  现在不是非常确定是否有一些会被重新引进,但是当前应该把它们看作废弃的,应当避免使用:

    +

    DOM 模型已经被高度简化了。为此,以下出现在 DOM level 3 或更早的规范里的接口已经被移除了。 现在不是非常确定是否有一些会被重新引进,但是当前应该把它们看作废弃的,应当避免使用:

      @@ -80,7 +80,7 @@

      过时的 DOM 接口

    • {{domxref("Notation")}}
    • {{domxref("TypeInfo")}}
    • {{domxref("UserDataHandler")}}
    • -
    •  
    • +
    @@ -88,7 +88,7 @@

    HTML 接口

    {{domxref("HTMLDocument")}} 接口描述了包含 HTML 的文档。注意:HTML 规范也继承了{{domxref("Document")}} 接口。

    -

    一个 HTMLDocument 对象还可以访问浏览器的各种功能:例如使用 {{domxref("Window")}} 接口来绘制的标签或窗口,与之关联的样式 {{domxref("window.style", "Style")}}(通常是 CSS),浏览器相对于上下文的历史记录 {{domxref("window.history", "History")}},以及文档内的选区 {{domxref("Selection")}} 等。

    +

    一个 HTMLDocument 对象还可以访问浏览器的各种功能:例如使用 {{domxref("Window")}} 接口来绘制的标签或窗口,与之关联的样式 {{domxref("window.style", "Style")}}(通常是 CSS),浏览器相对于上下文的历史记录 {{domxref("window.history", "History")}},以及文档内的选区 {{domxref("Selection")}} 等。

    HTML 元素接口

    @@ -295,7 +295,7 @@

    SVG 数据类型接口

    Here are the DOM API for data types used in the definitions of SVG properties and attributes.

    -

    注意: Starting in {{Gecko("5.0")}},the following SVG-related DOM interfaces representing lists of objects are now indexable and can be accessed like arrays; in addition, they have a length property indicating the number of items in the lists: {{domxref("SVGLengthList")}}, {{domxref("SVGNumberList")}}, {{domxref("SVGPathSegList")}}, and {{domxref("SVGPointList")}}.

    +

    注意: Starting in {{Gecko("5.0")}},the following SVG-related DOM interfaces representing lists of objects are now indexable and can be accessed like arrays; in addition, they have a length property indicating the number of items in the lists: {{domxref("SVGLengthList")}}, {{domxref("SVGNumberList")}}, {{domxref("SVGPathSegList")}}, and {{domxref("SVGPointList")}}.

    Static type

    diff --git a/files/zh-cn/web/api/document_object_model/introduction/index.html b/files/zh-cn/web/api/document_object_model/introduction/index.html index d6583cb38c1238..0552cf6ec837b4 100644 --- a/files/zh-cn/web/api/document_object_model/introduction/index.html +++ b/files/zh-cn/web/api/document_object_model/introduction/index.html @@ -10,11 +10,11 @@ ---
    {{APIRef}}
    -
     
    +
    -
    本节提供了一个简单的概念性的 DOM 介绍:DOM 是什么,它是如何组织 HTMLXML 文档,你要如何访问它,这个 API 提供了哪些参考信息和实例。 
    +
    本节提供了一个简单的概念性的 DOM 介绍:DOM 是什么,它是如何组织 HTMLXML 文档,你要如何访问它,这个 API 提供了哪些参考信息和实例。
    -
     
    +

    什么是 DOM?

    @@ -22,9 +22,9 @@

    什么是 DOM?

    一个 web 页面是一个文档。这个文档可以在浏览器窗口或作为 HTML 源码显示出来。但上述两个情况中都是同一份文档。文档对象模型(DOM)提供了对同一份文档的另一种表现,存储和操作的方式。 DOM 是 web 页面的完全的面向对象表述,它能够使用如 JavaScript 等脚本语言进行修改。

    -

     W3C DOM 和WHATWG DOM标准在绝大多数现代浏览器中都有对 DOM 的基本实现。许多浏览器提供了对 W3C 标准的扩展,所以在使用时必须注意,文档可能会在多种浏览器上使用不同的 DOM 来访问。

    +

    W3C DOMWHATWG DOM标准在绝大多数现代浏览器中都有对 DOM 的基本实现。许多浏览器提供了对 W3C 标准的扩展,所以在使用时必须注意,文档可能会在多种浏览器上使用不同的 DOM 来访问。

    -

    例如,W3C DOM 中指定下面代码中的getElementsByTagName方法必须要返回所有<P> 元素的列表:

    +

    例如,W3C DOM 中指定下面代码中的getElementsByTagName方法必须要返回所有<P> 元素的列表:

    paragraphs = document.getElementsByTagName("P");
     // paragraphs[0] is the first <p> element
    @@ -36,7 +36,7 @@ 

    什么是 DOM?

    DOM 和 JavaScript

    -

    上面简短的示例和这个参考文档中几乎所有的示例一样,都使用了JavaScript。也就是说,它虽然是用 JavaScript 编写的, 却可以通过 DOM 来访问文档和其中的元素。DOM 并不是一个编程语言,但如果没有 DOM, JavaScript 语言也不会有任何网页,XML 页面以及涉及到的元素的概念或模型。在文档中的每个元素— 包括整个文档,文档头部, 文档中的表格,表头,表格中的文本 — 都是文档所属于的文档对象模型(DOM)的一部分,因此它们可以使用 DOM 和一个脚本语言如 JavaScript,来访问和处理。

    +

    上面简短的示例和这个参考文档中几乎所有的示例一样,都使用了JavaScript。也就是说,它虽然是用 JavaScript 编写的, 却可以通过 DOM 来访问文档和其中的元素。DOM 并不是一个编程语言,但如果没有 DOM, JavaScript 语言也不会有任何网页,XML 页面以及涉及到的元素的概念或模型。在文档中的每个元素— 包括整个文档,文档头部, 文档中的表格,表头,表格中的文本 — 都是文档所属于的文档对象模型(DOM)的一部分,因此它们可以使用 DOM 和一个脚本语言如 JavaScript,来访问和处理。

    开始的时候,JavaScript 和 DOM 是交织在一起的,但它们最终演变成了两个独立的实体。JavaScript 可以访问和操作存储在 DOM 中的内容,因此我们可以写成这个近似的等式:

    @@ -51,20 +51,20 @@

    DOM 和 JavaScript

    p_list = doc.getElementsByTagName("para");
    -

    要获取更多在网页上使用 JavaScript 的信息,可以参考 JavaScript technologies overview.

    +

    要获取更多在网页上使用 JavaScript 的信息,可以参考 JavaScript technologies overview.

    如何访问 DOM?

    在使用 DOM 时,您不需要做任何其他特殊的操作。不同的浏览器都有对 DOM 不同的实现, 这些实现对当前的 DOM 标准而言,都会呈现出不同程度的一致性,每个 web 浏览器都会使用一些文档对象模型,从而使页面可以被脚本语言访问。

    -

    当您在创建一个脚本时 - 无论是使用内嵌 <script>元素或者使用在 web 页面脚本加载的方法— 您都可以使用 document或 window 元素的 API 来操作文档本身或获取文档的子类(web 页面中的各种元素)。

    +

    当您在创建一个脚本时 - 无论是使用内嵌 <script>元素或者使用在 web 页面脚本加载的方法— 您都可以使用 documentwindow 元素的 API 来操作文档本身或获取文档的子类(web 页面中的各种元素)。

    -

    您的 DOM 编程代码可能会像下面例子一样非常简单,如使用 window对象的alert()函数显示一个警告信息,或者使用比较复杂的方法来创建一个新的内容,如下面内容较长的实例所示。

    +

    您的 DOM 编程代码可能会像下面例子一样非常简单,如使用 window对象的alert()函数显示一个警告信息,或者使用比较复杂的方法来创建一个新的内容,如下面内容较长的实例所示。

    <body onload="window.alert('welcome to my home page!');">
     
    -

    除了定义 JavaScript 的 <script> 元素外, 当文档被装载(以及当整个 DOM 可以被有效使用时),JavaScript 可以设定一个函数来运行。下面的函数会创建一个新的 H1 元素,为元素添加文本,并将 H1 添加在文档树中。 

    +

    除了定义 JavaScript 的 <script> 元素外, 当文档被装载(以及当整个 DOM 可以被有效使用时),JavaScript 可以设定一个函数来运行。下面的函数会创建一个新的 H1 元素,为元素添加文本,并将 H1 添加在文档树中。

    <html>
       <head>
    @@ -87,7 +87,7 @@ 

    如何访问 DOM?

    重要的数据类型

    -

    本参考文档会试图以尽可能简单的方式描述各种对象和类型。但在 API 中传入的不同的数据类型需要我们去注意。为简单起见,在 API 参考文档中的语法实例通常会使用 element(s) 指代节点,使用 nodeList(s)或 element(s)来指代节点数组,使用 attribute(s)来指代属性节点。

    +

    本参考文档会试图以尽可能简单的方式描述各种对象和类型。但在 API 中传入的不同的数据类型需要我们去注意。为简单起见,在 API 参考文档中的语法实例通常会使用 element(s) 指代节点,使用 nodeList(s)或 element(s)来指代节点数组,使用 attribute(s)来指代属性节点。

    下面的表格简单则描述了这些数据类型。

    @@ -95,43 +95,43 @@

    重要的数据类型

    - + - + - + 两种方式是等价的,第一种方式中 item()nodeList 对象中的单独方法。 后面的方式则使用了经典的数组语法来获取列表中的第二个条目。 - + - +
    document当一个成员返回 document 对象(例如,元素的 ownerDocument 属性返回它所属于 document ) ,这个对象就是 root document 对象本身。 DOM document Reference 一章对 document 对象进行了描述。当一个成员返回 document 对象(例如,元素的 ownerDocument 属性返回它所属于 document ) ,这个对象就是 root document 对象本身。 DOM document Reference 一章对 document 对象进行了描述。
    elementelement 是指由 DOM API 中成员返回的类型为 element 的一个元素或节点。 例如, document.createElement() 方法会返回一个 node 的对象引用,也就是说这个方法返回了在 DOM 中创建的 element。 element 对象实现了 DOM Element 接口以及更基本的 Node 接口,参考文档将两者都包含在内。element 是指由 DOM API 中成员返回的类型为 element 的一个元素或节点。 例如, document.createElement() 方法会返回一个 node 的对象引用,也就是说这个方法返回了在 DOM 中创建的 elementelement 对象实现了 DOM Element 接口以及更基本的 Node 接口,参考文档将两者都包含在内。
    nodeList nodeList 是一个元素的数组,如从 document.getElementsByTagName() 方法返回的就是这种类型。 nodeList 中的条目由通过下标有两种方式进行访问: + nodeList 是一个元素的数组,如从 document.getElementsByTagName() 方法返回的就是这种类型。 nodeList 中的条目由通过下标有两种方式进行访问:
    • list.item(1)
    • list[1]
    - 两种方式是等价的,第一种方式中 item() 是 nodeList 对象中的单独方法。 后面的方式则使用了经典的数组语法来获取列表中的第二个条目。
    attribute当 attribute 通过成员函数 (例如,通过 createAttribute()方法) 返回时,它是一个为属性暴露出专门接口的对象引用。DOM 中的属性也是节点,就像元素一样,只不过您可能会很少使用它。attribute 通过成员函数 (例如,通过 createAttribute()方法) 返回时,它是一个为属性暴露出专门接口的对象引用。DOM 中的属性也是节点,就像元素一样,只不过您可能会很少使用它。
    namedNodeMap namedNodeMap 和数组类似,但是条目是由 name 或 index 访问的,虽然后一种方式仅仅是为了枚举方便,因为在 list 中本来就没有特定的顺序。 出于这个目的,  namedNodeMap 有一个 item() 方法,你也可以从  namedNodeMap 添加或移除条目。 namedNodeMap 和数组类似,但是条目是由 name 或 index 访问的,虽然后一种方式仅仅是为了枚举方便,因为在 list 中本来就没有特定的顺序。 出于这个目的, namedNodeMap 有一个 item() 方法,你也可以从 namedNodeMap 添加或移除条目。

    DOM 接口

    -

    本指南对你可以用来操作 DOM 层级的对象以及事物进行了介绍。例如, HTML form 元素从 HTMLFormElement 接口中获取它的 name 属性,从 HTMLElement 接口中获取 className 属性。在上面情况中,您要获取的属性都只在 form 对象中。

    +

    本指南对你可以用来操作 DOM 层级的对象以及事物进行了介绍。例如, HTML form 元素从 HTMLFormElement 接口中获取它的 name 属性,从 HTMLElement 接口中获取 className 属性。在上面情况中,您要获取的属性都只在 form 对象中。

    但是由 DOM 实现的对象和接口间的关系是容易被混淆的,因此本节会尝试去对 DOM 标准中的一些常用的接口进行说明以及它们是怎样生效的。

    接口及对象

    -

    许多对象都实现了多个接口。例如,table 对象实现了 HTML Table Element Interface, 其中包括 createCaption 和 insertRow 方法。但由于 table 对象也是一个 HTML 元素, table 也实现了 Element 接口(在  DOM element Reference 一章有对应描述)。最后,由于 HTML 元素对 DOM 来说也是组成 web 页面或 XML 页面节点树中的一个节点, table 元素也实现更基本的  Node 接口, Element 对象也继承这个接口。

    +

    许多对象都实现了多个接口。例如,table 对象实现了 HTML Table Element Interface, 其中包括 createCaptioninsertRow 方法。但由于 table 对象也是一个 HTML 元素, table 也实现了 Element 接口(在 DOM element Reference 一章有对应描述)。最后,由于 HTML 元素对 DOM 来说也是组成 web 页面或 XML 页面节点树中的一个节点, table 元素也实现更基本的 Node 接口, Element 对象也继承这个接口。

    -

    正如下面的例子,当你得到一个  table 对象的引用时,你经常会轮流使用对象实现的三个不同接口的方法,但并不知其所以然。 

    +

    正如下面的例子,当你得到一个 table 对象的引用时,你经常会轮流使用对象实现的三个不同接口的方法,但并不知其所以然。

    var table = document.getElementById("table");
     var tableAttrs = table.attributes; // Node/Element interface
    @@ -146,9 +146,9 @@ 

    接口及对象

    DOM 中核心接口

    -

    本节列出了在 DOM 中最常用的一些接口。此处并不会描述这些 API 在做什么,但是会让你了解当你使用 DOM 时常用的各种方法和属性。 这些常用的 API 在本文档最后的  DOM Examples 章节中 (包含更长的实例) 中有使用。

    +

    本节列出了在 DOM 中最常用的一些接口。此处并不会描述这些 API 在做什么,但是会让你了解当你使用 DOM 时常用的各种方法和属性。 这些常用的 API 在本文档最后的 DOM Examples 章节中 (包含更长的实例) 中有使用。

    -

    您在 DOM 编程时,通常使用的最多的就是 Document 和 window 对象。简单的说, window 对象表示浏览器中的内容,而 document 对象是文档本身的根节点。Element 继承了通用的 Node 接口, 将这两个接口结合后就提供了许多方法和属性可以供单个元素使用。在处理这些元素所对应的不同类型的数据时,这些元素可能会有专用的接口,如上节中的  table  对象的例子。

    +

    您在 DOM 编程时,通常使用的最多的就是 Documentwindow 对象。简单的说, window 对象表示浏览器中的内容,而 document 对象是文档本身的根节点。Element 继承了通用的 Node 接口, 将这两个接口结合后就提供了许多方法和属性可以供单个元素使用。在处理这些元素所对应的不同类型的数据时,这些元素可能会有专用的接口,如上节中的 table 对象的例子。

    下面是在 web 和 XML 页面脚本中使用 DOM 时,一些常用的 API 简要列表。

    @@ -170,7 +170,7 @@

    DOM 中核心接口

    测试 DOM API

    -

    本文档提供了每一个接口的样本示例,您可以在自身进行 web 开发时使用。在有些情况下, 样例是一个完整的 HTML 页面,通过使用 <script> 元素标签进行 DOM 访问,包含必须的接口 (如 buttons) 来触发表单中的脚本, 以及 DOM 所操作的 HTML 元素。 此时,您可以将实例进行剪切和复制到一个新的 HTML 文档中,保存完成后,在浏览器中运行该实例。

    +

    本文档提供了每一个接口的样本示例,您可以在自身进行 web 开发时使用。在有些情况下, 样例是一个完整的 HTML 页面,通过使用 <script> 元素标签进行 DOM 访问,包含必须的接口 (如 buttons) 来触发表单中的脚本, 以及 DOM 所操作的 HTML 元素。 此时,您可以将实例进行剪切和复制到一个新的 HTML 文档中,保存完成后,在浏览器中运行该实例。

    然而在一些情况下,例子会更简洁。想要运行那些仅仅用来展示 HTML 元素接口之间基本关系的示例,你可能会想创建一个测试页面,在里面你可以通过脚本使用这些接口。下面这个非常简单的网页在 header 中提供了一个<script>元素,这里面你可以使用测试接口的函数,一些你可以获取、设置或者操纵的 HTML 元素及其属性,以及必须的 web user 接口来从浏览器调用这些接口。

    diff --git a/files/zh-cn/web/api/document_object_model/locating_dom_elements_using_selectors/index.html b/files/zh-cn/web/api/document_object_model/locating_dom_elements_using_selectors/index.html index d3af73f57007a1..e7157809393e53 100644 --- a/files/zh-cn/web/api/document_object_model/locating_dom_elements_using_selectors/index.html +++ b/files/zh-cn/web/api/document_object_model/locating_dom_elements_using_selectors/index.html @@ -7,22 +7,22 @@ - 使用选择器定位 DOM 元素 translation_of: Web/API/Document_object_model/Locating_DOM_elements_using_selectors --- -

    Selectors API 提供了通过与一组选择器匹配来快速轻松地从 DOM 检索  Element节点的方法。这比以前的技术要快得多,其中有必要使用 JavaScript 代码中的循环来定位您需要查找的特定项目。

    +

    Selectors API 提供了通过与一组选择器匹配来快速轻松地从 DOM 检索 Element节点的方法。这比以前的技术要快得多,其中有必要使用 JavaScript 代码中的循环来定位您需要查找的特定项目。

    NodeSelector 接口

    -

    此规范向实现  DocumentDocumentFragment,  或 Element 接口的任何对象添加了两种新方法:

    +

    此规范向实现 Document, DocumentFragment, 或 Element 接口的任何对象添加了两种新方法:

    querySelector
    -
    返回节点子树内与之相匹配的第一个 Element 节点。如果没有匹配的节点,则返回 null。
    +
    返回节点子树内与之相匹配的第一个 Element 节点。如果没有匹配的节点,则返回 null。
    querySelectorAll
    -
    返回一个NodeList  包含节点子树内所有与之相匹配的 Element 节点,如果没有相匹配的,则返回一个空节点列表。
    +
    返回一个NodeList 包含节点子树内所有与之相匹配的 Element 节点,如果没有相匹配的,则返回一个空节点列表。
    -
    注意:由 querySelectorAll()返回的节点列表不是动态实时的。这和其他 DOM 查询方法返回动态实时节点列表不一样。
    +
    注意:由 querySelectorAll()返回的节点列表不是动态实时的。这和其他 DOM 查询方法返回动态实时节点列表不一样。
    -

    这里有更多的例子和细节:querySelector() and querySelectorAll() ,Code snippets for querySelector.

    +

    这里有更多的例子和细节:querySelector() and querySelectorAll()Code snippets for querySelector.

    Selectors

    @@ -38,7 +38,7 @@

    Selectors

    执行上面的代码后,el 就包含了文档中元素的 ID 是 main,basic 或 exclamation 的所有元素中的第一个元素。

    -

    querySelector() and querySelectorAll() 里可以使用任何 CSS 选择器。

    +

    querySelector() and querySelectorAll() 里可以使用任何 CSS 选择器。

    另请参阅

    diff --git a/files/zh-cn/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.html b/files/zh-cn/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.html index 21a3267aff7109..0bd38d1acd2a80 100644 --- a/files/zh-cn/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.html +++ b/files/zh-cn/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.html @@ -7,7 +7,7 @@

    什么是内容树?

    -

    很多 HTML 作者认为 HTML 是平面的东西 -- 一堆文字被标签包围在中间。当然还有比这个更多的内容。任何 HTML 文档(或者说任何 SGML 文档或者 XML 文档) 是一个树状结构。 比如,以下的文档和树状结构是相似的 (虽然不是完全一致 -- 更多信息请参考 whitespace in the DOM):

    +

    很多 HTML 作者认为 HTML 是平面的东西 -- 一堆文字被标签包围在中间。当然还有比这个更多的内容。任何 HTML 文档(或者说任何 SGML 文档或者 XML 文档) 是一个树状结构。 比如,以下的文档和树状结构是相似的 (虽然不是完全一致 -- 更多信息请参考 whitespace in the DOM):

    <html>
     <head>
    @@ -24,11 +24,11 @@ 

    什么是内容树?

    当 Mozilla 解析文档的时候,它首先构建一个内容树然后用它来显示这个文档。

    -

    用于描述树状结构的术语通常出现在 DOM Level 1 的核心中。 我上面画的每一个方块都是这个树的一个节点。 节点上面的线条表示父子关系:上面的父节点,而位于下方的是子节点。位于一个父节点下面的两个子节点是相邻的。 类似地,我们可以指代祖先和后代。(不过,表亲们太乱了。)

    +

    用于描述树状结构的术语通常出现在 DOM Level 1 的核心中。 我上面画的每一个方块都是这个树的一个节点。 节点上面的线条表示父子关系:上面的父节点,而位于下方的是子节点。位于一个父节点下面的两个子节点是相邻的。 类似地,我们可以指代祖先和后代。(不过,表亲们太乱了。)

    -

    DOM Level 1 核心能让我们做什么?

    +

    DOM Level 1 核心能让我们做什么?

    -

    W3C 的 DOM Level 1 允许你随意改变内容树。其功能之强大足以从零构建出任何 HTML 文档。它允许作者在任何时候,都可以通过脚本来修改文档里的任何内容。这是网页制作者通过 JavaScript 动态改变 DOM 的最简单途径。在版本较旧的浏览器里,使用 JavaScript 都是通过访问全局对象 document 属性来得到文档。文档对象实现了 W3C 的 DOM Level 1 规定的文档接口

    +

    W3C 的 DOM Level 1 允许你随意改变内容树。其功能之强大足以从零构建出任何 HTML 文档。它允许作者在任何时候,都可以通过脚本来修改文档里的任何内容。这是网页制作者通过 JavaScript 动态改变 DOM 的最简单途径。在版本较旧的浏览器里,使用 JavaScript 都是通过访问全局对象 document 属性来得到文档。文档对象实现了 W3C 的 DOM Level 1 规定的文档接口

    一个简单例子

    @@ -74,9 +74,9 @@

    JavaScript Content

    想学习更多?

    -

    现在您已经熟悉了 DOM 的基本概念,有一个文档解释了 DOM Level 1 的基本方法的基本方法。这是本文的补充。

    +

    现在您已经熟悉了 DOM 的基本概念,有一个文档解释了 DOM Level 1 的基本方法的基本方法。这是本文的补充。

    -

    也可以查看 W3C 的 DOM Level 1 核心规范文档。尽管是正式的规范文档,但十分清晰易于理解。其对于网页制作者主要有用的内容是描述不同的 DOM 对象及其所有属性和方法。可以继续阅读我们其它关于DOM 的文档

    +

    也可以查看 W3C 的 DOM Level 1 核心规范文档。尽管是正式的规范文档,但十分清晰易于理解。其对于网页制作者主要有用的内容是描述不同的 DOM 对象及其所有属性和方法。可以继续阅读我们其它关于DOM 的文档

    Original Document Information

    diff --git a/files/zh-cn/web/api/document_object_model/whitespace/index.html b/files/zh-cn/web/api/document_object_model/whitespace/index.html index 3e0f244c4162a6..becfb471f0b845 100644 --- a/files/zh-cn/web/api/document_object_model/whitespace/index.html +++ b/files/zh-cn/web/api/document_object_model/whitespace/index.html @@ -56,7 +56,7 @@

    助你一臂之 function is_all_ws( nod ) { // Use ECMA-262 Edition 3 String and RegExp features - return !(/[^\t\n\r ]/.test(nod.data)); + return !(/[^\t\n\r ]/.test(nod.data)); } @@ -191,4 +191,4 @@

    原文资讯

    -

     

    +

    diff --git a/files/zh-cn/web/api/documentfragment/documentfragment/index.html b/files/zh-cn/web/api/documentfragment/documentfragment/index.html index d4ccae9b6a0cd4..6122bd765bc7a8 100644 --- a/files/zh-cn/web/api/documentfragment/documentfragment/index.html +++ b/files/zh-cn/web/api/documentfragment/documentfragment/index.html @@ -5,7 +5,7 @@ ---

    {{ApiRef("DOM")}}{{seeCompatTable}}

    -

    DocumentFragment() 构造函数返回一个新创建的 {{domxref("DocumentFragment")}} 对象。

    +

    DocumentFragment() 构造函数返回一个新创建的 {{domxref("DocumentFragment")}} 对象。

    语法

    diff --git a/files/zh-cn/web/api/documentfragment/index.html b/files/zh-cn/web/api/documentfragment/index.html index e9b048478837ad..8bf045b598e511 100644 --- a/files/zh-cn/web/api/documentfragment/index.html +++ b/files/zh-cn/web/api/documentfragment/index.html @@ -31,7 +31,7 @@

    属性

    {{ domxref("ParentNode.lastElementChild") }} {{readonlyInline}}{{experimental_inline}}
    返回 DocumentFragment 的最后一个 {{domxref("Element")}} 类型的子对象,如果没有则返回 null
    {{ domxref("ParentNode.childElementCount") }} {{readonlyInline}}{{experimental_inline}}
    -
    返回一个 unsigned long 给出 DocumentFragment 拥有的子项数量。
    +
    返回一个 unsigned long 给出 DocumentFragment 拥有的子项数量。

    构造函数

    diff --git a/files/zh-cn/web/api/documentfragment/queryselector/index.html b/files/zh-cn/web/api/documentfragment/queryselector/index.html index 003c997714882f..176543dcb36b9d 100644 --- a/files/zh-cn/web/api/documentfragment/queryselector/index.html +++ b/files/zh-cn/web/api/documentfragment/queryselector/index.html @@ -5,11 +5,11 @@ ---
    {{ApiRef("DOM")}}
    -

    DocumentFragment.querySelector() 方法返回第一个在 {{domxref("DocumentFragment")}} 中的、符合选择器的元素。其使用深度优先,前序遍历规则遍历文档中的节点。如果没有匹配结果,返回 null 。

    +

    DocumentFragment.querySelector() 方法返回第一个在 {{domxref("DocumentFragment")}} 中的、符合选择器的元素。其使用深度优先,前序遍历规则遍历文档中的节点。如果没有匹配结果,返回 null

    -

    如果选择器中指定了 ID 而这个 ID 在当前文档(document)被错误地使用了多次,则返回第一个匹配的元素。

    +

    如果选择器中指定了 ID 而这个 ID 在当前文档(document)被错误地使用了多次,则返回第一个匹配的元素。

    -

    如果选择器无效,将抛出一个带有 SYNTAX_ERR 值的 {{domxref("DOMException")}} 异常。

    +

    如果选择器无效,将抛出一个带有 SYNTAX_ERR 值的 {{domxref("DOMException")}} 异常。

    语法

    @@ -26,14 +26,14 @@

    例子

    基本示例

    -

    在该示例中,将返回第一个位于 {{domxref("DocumentFragment")}} 的带有 "myclass" 类的元素。

    +

    在该示例中,将返回第一个位于 {{domxref("DocumentFragment")}} 的带有 "myclass" 类的元素。

    var el = documentfragment.querySelector(".myclass");
     

    CSS 语法和方法的参数问题

    -

    传递给 querySelector 的字符串参数遵循 CSS 语法。如果 ID 或选择器不符合 CSS 语法 (比如使用了半角分号和空格),必须使用双反斜杠对字符做转义。

    +

    传递给 querySelector 的字符串参数遵循 CSS 语法。如果 ID 或选择器不符合 CSS 语法 (比如使用了半角分号和空格),必须使用双反斜杠对字符做转义。

    <div id="foo\bar"></div>
     <div id="foo:bar"></div>
    diff --git a/files/zh-cn/web/api/documenttype/index.html b/files/zh-cn/web/api/documenttype/index.html
    index 634fb611ed7f43..118b13508ee5f6 100644
    --- a/files/zh-cn/web/api/documenttype/index.html
    +++ b/files/zh-cn/web/api/documenttype/index.html
    @@ -11,7 +11,7 @@
     ---
     
    {{APIRef("DOM")}}
    -

    DocumentType 接口表示了一个包含文档类型的节点 {{domxref("Node")}} .

    +

    DocumentType 接口表示了一个包含文档类型的节点 {{domxref("Node")}} .

    {{InheritanceDiagram}}

    @@ -23,7 +23,7 @@

    属性

    {{domxref("DocumentType.entities")}} {{readonlyInline}} {{Deprecated_Inline}}
    一个在文档类型定义 (DTD) 中声明的实体{{domxref("NamedNodeMap")}},在这个映射(map)中的每个节点实现了{{domxref("Entity")}}接口
    {{domxref("DocumentType.internalSubset")}} {{readonlyInline}} {{Deprecated_Inline}}
    -
    一个表示内部子集的{{domxref("DOMString")}},如果没有的话则为null ,例:"<!ELEMENT foo (bar)>"
    +
    一个表示内部子集的{{domxref("DOMString")}},如果没有的话则为null ,例:"<!ELEMENT foo (bar)>"
    {{domxref("DocumentType.name")}} {{readonlyInline}}
    {{domxref("DOMString")}},文档类型的名称,例:<!DOCTYPE HTML>中的“html
    {{domxref("DocumentType.notations")}} {{readonlyInline}} {{Deprecated_Inline}}
    @@ -31,7 +31,7 @@

    属性

    {{domxref("DocumentType.publicId")}} {{readonlyInline}}
    一个{{domxref("DOMString")}},例:HTML5 中的空字符串——"-//W3C//DTD HTML 4.01//EN"
    {{domxref("DocumentType.systemId")}} {{readonlyInline}}
    -
    一个{{domxref("DOMString")}},例:HTML5 中的空字符串—— "http://www.w3.org/TR/html4/strict.dtd"
    +
    一个{{domxref("DOMString")}},例:HTML5 中的空字符串—— "http://www.w3.org/TR/html4/strict.dtd"

    方法

    diff --git a/files/zh-cn/web/api/domerror/index.html b/files/zh-cn/web/api/domerror/index.html index 17320735979404..15cc8b607b57ae 100644 --- a/files/zh-cn/web/api/domerror/index.html +++ b/files/zh-cn/web/api/domerror/index.html @@ -5,7 +5,7 @@ ---

    {{ APIRef("DOM") }}{{deprecated_header}}

    -

     DOMError 接口描述一个错误对象,该对象包含一个错误的名字。

    +

    DOMError 接口描述一个错误对象,该对象包含一个错误的名字。

    属性

    diff --git a/files/zh-cn/web/api/domexception/code/index.html b/files/zh-cn/web/api/domexception/code/index.html index 2bdb40fbdad27f..7b7ecde266c07a 100644 --- a/files/zh-cn/web/api/domexception/code/index.html +++ b/files/zh-cn/web/api/domexception/code/index.html @@ -5,7 +5,7 @@ ---

    {{ APIRef("DOM") }}

    -

    {{domxref("DOMException")}} 接口中的 code 是一个只读属性,他返回了一个包含了 错误常量 的简短数字 ,或者在没有匹配到时返回 0 。这个字段产生于历史原因,在新的 DOM 异常中已停止使用,改为在 {{domxref("DOMException.name")}} 属性中推送此信息。

    +

    {{domxref("DOMException")}} 接口中的 code 是一个只读属性,他返回了一个包含了 错误常量简短数字 ,或者在没有匹配到时返回 0 。这个字段产生于历史原因,在新的 DOM 异常中已停止使用,改为在 {{domxref("DOMException.name")}} 属性中推送此信息。

    语法

    diff --git a/files/zh-cn/web/api/domexception/domexception/index.html b/files/zh-cn/web/api/domexception/domexception/index.html index c86116e3029d73..bcff6fbc0a7539 100644 --- a/files/zh-cn/web/api/domexception/domexception/index.html +++ b/files/zh-cn/web/api/domexception/domexception/index.html @@ -5,7 +5,7 @@ ---

    {{ APIRef("DOM") }}

    -

    DOMException() 构造函数返回一个包含指定的信息和名称的 DOMException 对象。

    +

    DOMException() 构造函数返回一个包含指定的信息和名称的 DOMException 对象。

    语法

    @@ -20,9 +20,9 @@

    参数

    message {{optional_inline}}
    -
    对异常的描述。如果不存在,使用空字符串 '' .
    +
    对异常的描述。如果不存在,使用空字符串 '' .
    name {{optional_inline}}
    -
    返回一个 {{domxref("DOMString")}} 包含与 error constant 错误相关的字符串常数之一。
    +
    返回一个 {{domxref("DOMString")}} 包含与 error constant 错误相关的字符串常数之一。

    返回值

    diff --git a/files/zh-cn/web/api/domexception/index.html b/files/zh-cn/web/api/domexception/index.html index 8fc1a1d2d70d66..5bbf4d017d2706 100644 --- a/files/zh-cn/web/api/domexception/index.html +++ b/files/zh-cn/web/api/domexception/index.html @@ -5,7 +5,7 @@ ---

    {{ APIRef("DOM") }}

    -

     DOMException 接口代表调用方法或访问 Web API 属性时发生的异常事件(被称为异常exception)。 这基本上是在 Web API 中如何描述错误情况的

    +

    DOMException 接口代表调用方法或访问 Web API 属性时发生的异常事件(被称为异常exception)。 这基本上是在 Web API 中如何描述错误情况的

    每个异常都有一个名称 name,一个采用骆驼式命名法的简短字符串,用于描述识别错误或异常情况。

    @@ -17,14 +17,14 @@

    构造函数

    {{domxref("DOMException.DOMException()", "DOMException()")}} {{experimental_inline}}
    -
    返回一个包含指定消息和名称的 DOMException 对象。
    +
    返回一个包含指定消息和名称的 DOMException 对象。

    属性

    {{domxref("DOMException.code")}} {{deprecated_inline}} {{readOnlyInline}}
    -
    返回一个 short,包含错误代码常量中的一个,或者返回 0,如果没有匹配的话。这个字段由于历史原因被使用。现在不再使用这个新的 DOM 异常:他们把这个信息放入 {{domxref("DOMException.name")}} 属性。
    +
    返回一个 short,包含错误代码常量中的一个,或者返回 0,如果没有匹配的话。这个字段由于历史原因被使用。现在不再使用这个新的 DOM 异常:他们把这个信息放入 {{domxref("DOMException.name")}} 属性。
    {{domxref("DOMException.message")}} {{readOnlyInline}}
    返回一个 {{ domxref("DOMString") }} 代表与给定的错误名称有关信息或描述。
    {{domxref("DOMException.name")}} {{readOnlyInline}}
    @@ -65,7 +65,7 @@

    错误名称

    InvalidAccessError
    对象不支持此操作或参数 (Legacy code value: 15 and legacy constant name: INVALID_ACCESS_ERR)
    TypeMismatchError {{deprecated_inline}}
    -
    对象的类型不匹配预期的类型. (Legacy code value: 17 and legacy constant name: TYPE_MISMATCH_ERR) 这个值已被弃用, JavaScript {{jsxref("TypeError")}} 异常被提出而不是DOMException
    +
    对象的类型不匹配预期的类型. (Legacy code value: 17 and legacy constant name: TYPE_MISMATCH_ERR) 这个值已被弃用, JavaScript {{jsxref("TypeError")}} 异常被提出而不是DOMException
    SecurityError {{experimental_inline}}
    操作不安全。 (Legacy code value: 18 and legacy constant name: SECURITY_ERR)
    NetworkError {{experimental_inline}}
    @@ -87,11 +87,11 @@

    错误名称

    NotReadableError {{experimental_inline}}
    输入/输出读操作失败 (没有遗留代码值和常量的名字).
    UnknownError {{experimental_inline}}
    -
    因未知的瞬态的原因使操作失败 (例如 内存不足) (No legacy code value and constant name).
    +
    因未知的瞬态的原因使操作失败 (例如 内存不足) (No legacy code value and constant name).
    ConstraintError {{experimental_inline}}
    条件没满足而导致事件失败的异常操作 (No legacy code value and constant name).
    DataError {{experimental_inline}}
    -
    提供的数据不足 (No legacy code value and constant name).
    +
    提供的数据不足 (No legacy code value and constant name).
    TransactionInactiveError {{experimental_inline}}
    请求被当前不活跃的事件或已完成事件阻止 (No legacy code value and constant name)。
    ReadOnlyError {{experimental_inline}}
    diff --git a/files/zh-cn/web/api/domhighrestimestamp/index.html b/files/zh-cn/web/api/domhighrestimestamp/index.html index b3ac097c1a6f5c..ef828ffb7722fb 100644 --- a/files/zh-cn/web/api/domhighrestimestamp/index.html +++ b/files/zh-cn/web/api/domhighrestimestamp/index.html @@ -19,7 +19,7 @@

    降低时间精度


    - 为了提供对抗时序攻击和记录指纹的保护措施,时间戳可能会四舍五入,这取决于浏览器设置。在火狐浏览器中,privacy.reduceTimerPrecision 首选项默认被启用,并且在或火狐浏览器 59 版本中,它的默认值是 20 微秒。在火狐浏览器 60 版本中,这个默认值将是 2 毫秒。

    + 为了提供对抗时序攻击和记录指纹的保护措施,时间戳可能会四舍五入,这取决于浏览器设置。在火狐浏览器中,privacy.reduceTimerPrecision 首选项默认被启用,并且在或火狐浏览器 59 版本中,它的默认值是 20 微秒。在火狐浏览器 60 版本中,这个默认值将是 2 毫秒。

    // reduced time precision (2ms) in Firefox 60
     event.timeStamp
    @@ -36,7 +36,7 @@ 

    降低时间精度

    // 1519129864400 // ...
    -

    在火狐浏览器中,你也可以启用 privacy.resistFingerprinting ,这使得时间戳的精度变成 100 毫秒或 privacy.resistFingerprinting.reduceTimerPrecision.microseconds 的值,以较大者为准。

    +

    在火狐浏览器中,你也可以启用 privacy.resistFingerprinting ,这使得时间戳的精度变成 100 毫秒或 privacy.resistFingerprinting.reduceTimerPrecision.microseconds 的值,以较大者为准。

    属性

    @@ -44,7 +44,7 @@

    属性

    -

    DOMHighResTimeStamp 的值是一个双精度浮点数,它描述了两个时间点之间的经过的毫秒数(可以精确到 5 微秒,如果设备支持)。开始时间可以是由网站或 app 中的脚本定义的一个特定时间 T,也可以是时间源

    +

    DOMHighResTimeStamp 的值是一个双精度浮点数,它描述了两个时间点之间的经过的毫秒数(可以精确到 5 微秒,如果设备支持)。开始时间可以是由网站或 app 中的脚本定义的一个特定时间 T,也可以是时间源

    时间源

    @@ -53,12 +53,12 @@

    时间源

    • 如果脚本的 {{Glossary("global object")}} 是 {{domxref("Window")}}, 则时间源的确定方式如下:
        -
      • 如果当前 {{domxref("Document")}} 是中加载的第一个 Window, 则时间源是创建浏览器上下文的时间。
      • +
      • 如果当前 {{domxref("Document")}} 是中加载的第一个 Window, 则时间源是创建浏览器上下文的时间。
      • 如果处于卸载窗口中已加载的先前文档的过程中,​​一个确认对话框会显示出来,让用户确认是否离开前一页,则时间源是用户确认导航到新页面的这个时间,这一点是被认同的。
      • -
      • 如果以上方式都不能确定时间源, 那么时间源是创建窗口中当前 Document 的导航发生的时机。
      • +
      • 如果以上方式都不能确定时间源, 那么时间源是创建窗口中当前 Document 的导航发生的时机。
    • -
    • 如果脚本中的全局对象是 {{domxref("WorkerGlobalScope")}} (意味着,该脚本以 web worker 的形式运行), 则时间源是这个 worker 被创建的时刻。 
    • +
    • 如果脚本中的全局对象是 {{domxref("WorkerGlobalScope")}} (意味着,该脚本以 web worker 的形式运行), 则时间源是这个 worker 被创建的时刻。
    • 在所有其他情况下,时间源的值是 undefined。
    @@ -81,7 +81,7 @@

    示例

    let elapsedTime = performance.now() - startTime;
    -

    执行完毕后, elapsedTime 的值是从你在第一行代码记录的时间点开始后经过的毫秒数。

    +

    执行完毕后, elapsedTime 的值是从你在第一行代码记录的时间点开始后经过的毫秒数。

    规范

    diff --git a/files/zh-cn/web/api/domimplementation/createdocument/index.html b/files/zh-cn/web/api/domimplementation/createdocument/index.html index 8c321218318abd..3e23b6505a3646 100644 --- a/files/zh-cn/web/api/domimplementation/createdocument/index.html +++ b/files/zh-cn/web/api/domimplementation/createdocument/index.html @@ -5,7 +5,7 @@ ---

    {{ApiRef("DOM")}}

    -

    DOMImplementation.createDocument()方法创建并返回一个 {{domxref("XMLDocument")}}对象。

    +

    DOMImplementation.createDocument()方法创建并返回一个 {{domxref("XMLDocument")}}对象。

    语法

    @@ -20,12 +20,12 @@

    参数

    qualifiedNameStr
    -
     {{domxref("DOMString")}} 是否包含要创建文档的限定名称,即可选的前缀和冒号,以及本地的根元素。
    +
    {{domxref("DOMString")}} 是否包含要创建文档的限定名称,即可选的前缀和冒号,以及本地的根元素。
    documentType {{optional_inline}}
    -
    文档的 DocumentType 默认为 null.
    +
    文档的 DocumentType 默认为 null.
      diff --git a/files/zh-cn/web/api/domimplementation/createdocumenttype/index.html b/files/zh-cn/web/api/domimplementation/createdocumenttype/index.html index b95329184d1d1e..e5422121d3317c 100644 --- a/files/zh-cn/web/api/domimplementation/createdocumenttype/index.html +++ b/files/zh-cn/web/api/domimplementation/createdocumenttype/index.html @@ -8,7 +8,7 @@ ---

      {{ ApiRef("DOM")}}

      -

      DOMImplementation.createDocumentType() 方法返回一个 {{domxref("DocumentType")}} 对象,它可以在文档创建时用在 {{domxref("DOMImplementation.createDocument")}} ,或者通过{{domxref("Node.insertBefore()")}} 或 {{domxref("Node.replaceChild()")}} 等方法放在文档中。

      +

      DOMImplementation.createDocumentType() 方法返回一个 {{domxref("DocumentType")}} 对象,它可以在文档创建时用在 {{domxref("DOMImplementation.createDocument")}} ,或者通过{{domxref("Node.insertBefore()")}} 或 {{domxref("Node.replaceChild()")}} 等方法放在文档中。

      语法

      @@ -18,17 +18,17 @@

      参数

      qualifiedNameStr
      -
       {{domxref("DOMString")}} 类型的值,包含一个合规的名称,如 svg:svg
      +
      {{domxref("DOMString")}} 类型的值,包含一个合规的名称,如 svg:svg
      publicId
      -
       {{domxref("DOMString")}} 类型的值, 包含 PUBLIC 标识符。
      +
      {{domxref("DOMString")}} 类型的值, 包含 PUBLIC 标识符。
      systemId
      -
       {{domxref("DOMString")}} 类型的值,包含 SYSTEM 标识符。
      +
      {{domxref("DOMString")}} 类型的值,包含 SYSTEM 标识符。

      示例

      diff --git a/files/zh-cn/web/api/domimplementation/index.html b/files/zh-cn/web/api/domimplementation/index.html index 78820dba3ef918..baa71344efb872 100644 --- a/files/zh-cn/web/api/domimplementation/index.html +++ b/files/zh-cn/web/api/domimplementation/index.html @@ -10,7 +10,7 @@ ---

      {{ ApiRef("DOM") }}

      -

      DOMImplementation 接口代表了一个对象,这个对象提供了不依赖于任何 document 的方法。这个对象可以通过{{domxref("Document.implementation")}}属性获得

      +

      DOMImplementation 接口代表了一个对象,这个对象提供了不依赖于任何 document 的方法。这个对象可以通过{{domxref("Document.implementation")}}属性获得

      属性

      diff --git a/files/zh-cn/web/api/dompoint/dompoint/index.html b/files/zh-cn/web/api/dompoint/dompoint/index.html index 4ced8fcffaf0a0..de20d845448504 100644 --- a/files/zh-cn/web/api/dompoint/dompoint/index.html +++ b/files/zh-cn/web/api/dompoint/dompoint/index.html @@ -5,9 +5,9 @@ ---
      {{APIRef("DOM")}}
      -

      DOMPoint()构造函数创建并返回一个 {{domxref("DOMPoint")}} 对象,可提供部分或全部属性值作为其参数。

      +

      DOMPoint()构造函数创建并返回一个 {{domxref("DOMPoint")}} 对象,可提供部分或全部属性值作为其参数。

      -

      也可以通过调用静态方法 {{domxref("DOMPoint.fromPoint()")}} 来创建 DOMPoint 。此方法接受一个 {{domxref("DOMPointInit")}} 兼容对象(DOMPoint 或 {{domxref("DOMPointReadOnly")}})作为参数 。

      +

      也可以通过调用静态方法 {{domxref("DOMPoint.fromPoint()")}} 来创建 DOMPoint 。此方法接受一个 {{domxref("DOMPointInit")}} 兼容对象(DOMPoint 或 {{domxref("DOMPointReadOnly")}})作为参数 。

      语法

      @@ -17,18 +17,18 @@

      参数

      x {{optional_inline}}
      -
      x 坐标。
      +
      x 坐标。
      y {{optional_inline}}
      -
      y 坐标。
      +
      y 坐标。
      z {{optional_inline}}
      -
      z 坐标。
      +
      z 坐标。
      w {{optional_inline}}
      透视值。

      示例

      -

      示例首先创建了一个表示当前窗口左上角的 DOMPoint ,接着根据第一个点创建一个新的 DOMPoint 并将其在垂直和水平方向上偏移 100px。

      +

      示例首先创建了一个表示当前窗口左上角的 DOMPoint ,接着根据第一个点创建一个新的 DOMPoint 并将其在垂直和水平方向上偏移 100px。

      var windTopLeft = new DOMPoint(window.screenX, window.screenY);
       var newTopLeft = DOMPoint.fromPoint(windTopLeft);
      diff --git a/files/zh-cn/web/api/dompoint/w/index.html b/files/zh-cn/web/api/dompoint/w/index.html
      index cec6172f9454d2..771c45ec9da66a 100644
      --- a/files/zh-cn/web/api/dompoint/w/index.html
      +++ b/files/zh-cn/web/api/dompoint/w/index.html
      @@ -5,7 +5,7 @@
       ---
       
      {{APIRef("DOM")}}
      -

      DOMPoint 的 w 属性表示该点的空间透视值。

      +

      DOMPoint 的 w 属性表示该点的空间透视值。

      语法

      @@ -13,7 +13,7 @@

      语法

      -

      双精度浮点值,表示该点的空间透视值。这个值的类型并没有严格限制,意味着它可以是 {{jsxref("NaN")}} 或 {{jsxref("Infinity", "±Infinity")}}。 默认值为 1.0。

      +

      双精度浮点值,表示该点的空间透视值。这个值的类型并没有严格限制,意味着它可以是 {{jsxref("NaN")}} 或 {{jsxref("Infinity", "±Infinity")}}。 默认值为 1.0。

      规范

      diff --git a/files/zh-cn/web/api/dompoint/x/index.html b/files/zh-cn/web/api/dompoint/x/index.html index 51dc1de0519bf4..bd2eb8c8e31c70 100644 --- a/files/zh-cn/web/api/dompoint/x/index.html +++ b/files/zh-cn/web/api/dompoint/x/index.html @@ -5,7 +5,7 @@ ---
      {{APIRef("DOM")}}
      -

      DOMPoint 的 x 属性表示该点的水平坐标。 通常, x 的正值表示右边,负值表示左边,除非改变了默认的轴方向。

      +

      DOMPoint 的 x 属性表示该点的水平坐标。 通常, x 的正值表示右边,负值表示左边,除非改变了默认的轴方向。

      语法

      diff --git a/files/zh-cn/web/api/dompoint/y/index.html b/files/zh-cn/web/api/dompoint/y/index.html index 5cc0c5e91ebb4f..b869853d0bf33b 100644 --- a/files/zh-cn/web/api/dompoint/y/index.html +++ b/files/zh-cn/web/api/dompoint/y/index.html @@ -5,7 +5,7 @@ ---
      {{APIRef("DOM")}}
      -

      DOMPoint 的 y 属性表示该点的垂直坐标。y 值增加表示向下偏移,减小表示向上偏移,除非改变了默认轴方向。

      +

      DOMPointy 属性表示该点的垂直坐标。y 值增加表示向下偏移,减小表示向上偏移,除非改变了默认轴方向。

      语法

      @@ -13,7 +13,7 @@

      语法

      -

      双精度浮点值,表示该点的 y 坐标值。这个值的类型并没有严格限制,意味着它可以是 {{jsxref("NaN")}} 或 {{jsxref("Infinity", "±Infinity")}}。

      +

      双精度浮点值,表示该点的 y 坐标值。这个值的类型并没有严格限制,意味着它可以是 {{jsxref("NaN")}} 或 {{jsxref("Infinity", "±Infinity")}}。

      规范

      diff --git a/files/zh-cn/web/api/dompoint/z/index.html b/files/zh-cn/web/api/dompoint/z/index.html index 877bd1bcc9492c..6d28da61222c1c 100644 --- a/files/zh-cn/web/api/dompoint/z/index.html +++ b/files/zh-cn/web/api/dompoint/z/index.html @@ -5,7 +5,7 @@ ---
      {{APIRef("DOM")}}
      -

      DOMPoint 的 z 属性表示该点的深度坐标。 z 值为 0 表示屏幕平面,正值表示从屏幕前面向靠近用户的方向延伸,负值表示从屏幕后面向远离用户的方向延伸,除非改变了默认的轴方向。

      +

      DOMPointz 属性表示该点的深度坐标。 z 值为 0 表示屏幕平面,正值表示从屏幕前面向靠近用户的方向延伸,负值表示从屏幕后面向远离用户的方向延伸,除非改变了默认的轴方向。

      语法

      diff --git a/files/zh-cn/web/api/domquad/index.html b/files/zh-cn/web/api/domquad/index.html index b6f04fd6ccec53..da5152b2ed1f8f 100644 --- a/files/zh-cn/web/api/domquad/index.html +++ b/files/zh-cn/web/api/domquad/index.html @@ -16,7 +16,7 @@

      Properties

      p1,p2,p3,p4 {{readonlyinline}}
      -
      are {{domxref("DOMPoint")}} objects for each of the DOMQuad object's four corners.
      +
      are {{domxref("DOMPoint")}} objects for each of the DOMQuad object's four corners.

      Methods

      @@ -27,7 +27,7 @@

      Methods

      {{domxref("DOMQuad.fromQuad()")}}
      Returns a new DOMQuad object based on the passed set of coordinates.
      {{domxref("DOMQuad.getBounds()")}}
      -
      Returns a {{domxref("DOMRect")}} object with the coordinates and dimensions of the DOMQuad object.
      +
      Returns a {{domxref("DOMRect")}} object with the coordinates and dimensions of the DOMQuad object.
      {{domxref("DOMQuad.toJSON()")}}
      Returns a JSON representation of the DOMQuad object.
      diff --git a/files/zh-cn/web/api/domrect/domrect/index.html b/files/zh-cn/web/api/domrect/domrect/index.html index ed7a57173a4651..adb59d0da9b9c1 100644 --- a/files/zh-cn/web/api/domrect/domrect/index.html +++ b/files/zh-cn/web/api/domrect/domrect/index.html @@ -15,18 +15,18 @@

      参数

      x
      -
      DOMRect 原点的 x 坐标。
      +
      DOMRect 原点的 x 坐标。
      y
      -
      DOMRect 原点的 y 坐标。
      +
      DOMRect 原点的 y 坐标。
      width
      -
      DOMRect 的宽度。
      +
      DOMRect 的宽度。
      height
      -
      DOMRect 的高度。
      +
      DOMRect 的高度。

      例子

      -

      想生成一个新 DOMRect,你可以运行一行这样的代码:

      +

      想生成一个新 DOMRect,你可以运行一行这样的代码:

      myDOMRect = new DOMRect(0,0,100,100);
       // running 'myDOMRect' in the console would then return
      diff --git a/files/zh-cn/web/api/domrect/index.html b/files/zh-cn/web/api/domrect/index.html
      index 5edf03d986bd90..ccdfa124812786 100644
      --- a/files/zh-cn/web/api/domrect/index.html
      +++ b/files/zh-cn/web/api/domrect/index.html
      @@ -5,9 +5,9 @@
       ---
       

      {{APIRef("Geometry Interfaces")}}

      -

      一个 DOMRect 代表一个矩形。

      +

      一个 DOMRect 代表一个矩形。

      -

      DOMRect 表示的盒子的类型由返回它的方法或属性指定。例如,WebVR API 的 {{domxref("VREyeParameters.renderRect")}} 指定了头戴式显示器的一只眼睛应该呈现的影像所在的 canvas 的视口。

      +

      DOMRect 表示的盒子的类型由返回它的方法或属性指定。例如,WebVR API 的 {{domxref("VREyeParameters.renderRect")}} 指定了头戴式显示器的一只眼睛应该呈现的影像所在的 canvas 的视口。

      它继承自它的父类,{{domxref("DOMRectReadOnly")}}。

      @@ -17,7 +17,7 @@

      构造函数

      {{domxref("DOMRect.DOMRect","DOMRect()")}}
      -
      创建一个新的 DOMRect 对象。
      +
      创建一个新的 DOMRect 对象。

      属性

      @@ -25,25 +25,25 @@

      属性

      -

      DOMRect 从其父类 {{domxref("DOMRectReadOnly")}} 继承属性。不同之处在于它们不再是只读的。

      +

      DOMRect 从其父类 {{domxref("DOMRectReadOnly")}} 继承属性。不同之处在于它们不再是只读的。

      {{domxref("DOMRectReadOnly.x")}}
      -
      DOMRect 原点的 x 坐标。
      +
      DOMRect 原点的 x 坐标。
      {{domxref("DOMRectReadOnly.y")}}
      -
      DOMRect 原点的 y 坐标。
      +
      DOMRect 原点的 y 坐标。
      {{domxref("DOMRectReadOnly.width")}}
      DOMRect 的宽度。
      {{domxref("DOMRectReadOnly.height")}}
      -
      DOMRect 的高度。
      +
      DOMRect 的高度。
      {{domxref("DOMRectReadOnly.top")}}
      -
      返回 DOMRect 的顶坐标值(与 y 具有相同的值,如果 height 为负值,则为 y + height 的值)。
      +
      返回 DOMRect 的顶坐标值(与 y 具有相同的值,如果 height 为负值,则为 y + height 的值)。
      {{domxref("DOMRectReadOnly.right")}}
      -
      返回 DOMRect 的右坐标值(与 x + width 具有相同的值,如果width 为负值,则为 x 的值)。
      +
      返回 DOMRect 的右坐标值(与 x + width 具有相同的值,如果width 为负值,则为 x 的值)。
      {{domxref("DOMRectReadOnly.bottom")}}
      -
      返回 DOMRect 的底坐标值(与 y + height 具有相同的值,如果 height 为负值,则为 y 的值)。
      +
      返回 DOMRect 的底坐标值(与 y + height 具有相同的值,如果 height 为负值,则为 y 的值)。
      {{domxref("DOMRectReadOnly.left")}}
      -
      返回 DOMRect 的左坐标值(与 x 具有相同的值,如果 width 为负值,则为 x + width 的值)。
      +
      返回 DOMRect 的左坐标值(与 x 具有相同的值,如果 width 为负值,则为 x + width 的值)。

      方法

      diff --git a/files/zh-cn/web/api/domrectreadonly/index.html b/files/zh-cn/web/api/domrectreadonly/index.html index 4a941d26bf9e4c..b36390496c3e21 100644 --- a/files/zh-cn/web/api/domrectreadonly/index.html +++ b/files/zh-cn/web/api/domrectreadonly/index.html @@ -5,7 +5,7 @@ ---

      {{APIRef("Geometry Interfaces")}}

      -

      DOMRectReadOnly 接口通过详细列出 {{domxref("DOMRect")}} 所使用的标准属性来定义一个属性不可变的矩形。

      +

      DOMRectReadOnly 接口通过详细列出 {{domxref("DOMRect")}} 所使用的标准属性来定义一个属性不可变的矩形。

      构造函数

      @@ -21,21 +21,21 @@

      属性

      {{domxref("DOMRectReadOnly.x")}} {{readonlyInline}}
      -
      DOMRect 原点的 x 坐标。
      +
      DOMRect 原点的 x 坐标。
      {{domxref("DOMRectReadOnly.y")}} {{readonlyInline}}
      -
      DOMRect 原点的 y 坐标。
      +
      DOMRect 原点的 y 坐标。
      {{domxref("DOMRectReadOnly.width")}} {{readonlyInline}}
      -
      DOMRect 的宽度。
      +
      DOMRect 的宽度。
      {{domxref("DOMRectReadOnly.height")}} {{readonlyInline}}
      -
      DOMRect 的高度。
      +
      DOMRect 的高度。
      {{domxref("DOMRectReadOnly.top")}} {{readonlyInline}}
      -
      返回 DOMRect 的顶部坐标值(通常与 y 相同)。
      +
      返回 DOMRect 的顶部坐标值(通常与 y 相同)。
      {{domxref("DOMRectReadOnly.right")}} {{readonlyInline}}
      -
      返回 DOMRect 的右坐标值(通常与 x + width 相同)。
      +
      返回 DOMRect 的右坐标值(通常与 x + width 相同)。
      {{domxref("DOMRectReadOnly.bottom")}} {{readonlyInline}}
      -
      返回 DOMRect 的底部坐标值(通常与 y + height 相同)。
      +
      返回 DOMRect 的底部坐标值(通常与 y + height 相同)。
      {{domxref("DOMRectReadOnly.left")}} {{readonlyInline}}
      -
      返回 DOMRect 的左坐标值(通常与 x​​​​​​​ 相同)。
      +
      返回 DOMRect 的左坐标值(通常与 x​​​​​​​ 相同)。

      静态方法

      diff --git a/files/zh-cn/web/api/domtokenlist/add/index.html b/files/zh-cn/web/api/domtokenlist/add/index.html index d38d9ec53ff6ad..983f1b8faaeef5 100644 --- a/files/zh-cn/web/api/domtokenlist/add/index.html +++ b/files/zh-cn/web/api/domtokenlist/add/index.html @@ -5,7 +5,7 @@ ---

      {{APIRef("DOM")}}

      -

      {{domxref("DOMTokenList")}} 接口的 add() 方法将给定的标记添加到列表中。 

      +

      {{domxref("DOMTokenList")}} 接口的 add() 方法将给定的标记添加到列表中。

      语法

      @@ -24,7 +24,7 @@

      返回值

      例子

      -

      在下面的例子中,我们使用 {{domxref("Element.classList")}} 将 {{htmlelement("span")}} 元素上设置的类列表检索为 DOMTokenList。然后,我们将新标记添加到列表中,并将列表写入 <span> 元素的{{domxref("Node.textContent")}}。

      +

      在下面的例子中,我们使用 {{domxref("Element.classList")}} 将 {{htmlelement("span")}} 元素上设置的类列表检索为 DOMTokenList。然后,我们将新标记添加到列表中,并将列表写入 <span> 元素的{{domxref("Node.textContent")}}。

      HTML:

      diff --git a/files/zh-cn/web/api/domtokenlist/index.html b/files/zh-cn/web/api/domtokenlist/index.html index 2dd5ed8613c478..d48011e9f0ad24 100644 --- a/files/zh-cn/web/api/domtokenlist/index.html +++ b/files/zh-cn/web/api/domtokenlist/index.html @@ -11,7 +11,7 @@ ---

      {{APIRef}}

      -

      DOMTokenList 接口表示一组空格分隔的标记(tokens)。如由 {{ domxref("Element.classList") }}、{{domxref("HTMLLinkElement.relList")}}、{{domxref("HTMLAnchorElement.relList")}} 或 {{domxref("HTMLAreaElement.relList")}} 返回的一组值。它和 JavaScript {{jsxref("Array")}} 对象一样,索引从 0 开始。DOMTokenList 总是区分大小写(case-sensitive)。

      +

      DOMTokenList 接口表示一组空格分隔的标记(tokens)。如由 {{ domxref("Element.classList") }}、{{domxref("HTMLLinkElement.relList")}}、{{domxref("HTMLAnchorElement.relList")}} 或 {{domxref("HTMLAreaElement.relList")}} 返回的一组值。它和 JavaScript {{jsxref("Array")}} 对象一样,索引从 0 开始。DOMTokenList 总是区分大小写(case-sensitive)。

      属性

      @@ -19,7 +19,7 @@

      属性

      {{ domxref("DOMTokenList.length") }} {{ReadOnlyInline}}
      一个整数,表示存储在该对象里值的个数。
      {{domxref("DOMTokenList.value")}}
      -
      该属性以 {{domxref("DOMString")}} 的形式返回 DOMTokenList 列表的值。
      +
      该属性以 {{domxref("DOMString")}} 的形式返回 DOMTokenList 列表的值。

      方法

      @@ -28,21 +28,21 @@

      方法

      {{domxref("DOMTokenList.item()", "DOMTokenList.item(index)")}}
      根据传入的索引值返回一个值,如果索引值大于等于符号列表的长度(length),则返回 undefinednull,在 {{ gecko("7.0") }} 之前的版本中返回 null
      {{domxref("DOMTokenList.contains()", "DOMTokenList.contains(token)")}}
      -
      如果 DOMTokenList 列表中包括相应的字符串 token,则返回 true,否则返回 false
      -
      {{domxref("DOMTokenList.add()", "DOMTokenList.add(token1[, token2[, ...tokenN]])")}}
      +
      如果 DOMTokenList 列表中包括相应的字符串 token,则返回 true,否则返回 false
      +
      {{domxref("DOMTokenList.add()", "DOMTokenList.add(token1[, token2[, ...tokenN]])")}}
      添加一个或多个标记(token)到 DOMTokenList 列表中。
      -
      {{domxref("DOMTokenList.remove()", "DOMTokenList.remove(token1[, token2[, ...tokenN]])")}}
      +
      {{domxref("DOMTokenList.remove()", "DOMTokenList.remove(token1[, token2[, ...tokenN]])")}}
      DOMTokenList 列表中移除一个或多个标记(token)。
      -
      {{domxref("DOMTokenList.replace()", "DOMTokenList.replace(oldTokennewToken)")}}
      -
      使用 newToken 替换 token 。
      +
      {{domxref("DOMTokenList.replace()", "DOMTokenList.replace(oldToken, newToken)")}}
      +
      使用 newToken 替换 token
      {{domxref("DOMTokenList.supports()", "DOMTokenList.supports(token)")}}
      -
      如果传入的 token 是相关属性(attribute)支持的标记,则返回 true 。
      -
      {{domxref("DOMTokenList.toggle()", "DOMTokenList.toggle(token [, force])")}}
      -
      从 DOMTokenList 字符串中移除标记字串(token),并返回 false。如果传入的字串(token)不存在,则将其添加进去,并返回 true 。force 是一个可选的布尔值,如果传入 true ,且传入的 token 不存在,则将其添加进去并返回 true ,若传入的 token 存在,则直接返回 true ;反之,如果传入 false ,则移除存在的 token ,并返回 false ,如 token 不存在则直接返回 false 。
      +
      如果传入的 token 是相关属性(attribute)支持的标记,则返回 true
      +
      {{domxref("DOMTokenList.toggle()", "DOMTokenList.toggle(token [, force])")}}
      +
      从 DOMTokenList 字符串中移除标记字串(token),并返回 false。如果传入的字串(token)不存在,则将其添加进去,并返回 trueforce 是一个可选的布尔值,如果传入 true ,且传入的 token 不存在,则将其添加进去并返回 true ,若传入的 token 存在,则直接返回 true ;反之,如果传入 false ,则移除存在的 token并返回 false ,如 token 不存在则直接返回 false
      {{domxref("DOMTokenList.entries()")}}
      返回一个迭代器({{jsxref("Iteration_protocols","iterator")}}),以遍历这个对象中的所有键值对。
      -
      {{domxref("DOMTokenList.forEach()", "DOMTokenList.forEach(callback [, thisArg])")}}
      -
      为每个 DOMTokenList 中的元素都调用一次传入的 callback 函数 。
      +
      {{domxref("DOMTokenList.forEach()", "DOMTokenList.forEach(callback [, thisArg])")}}
      +
      为每个 DOMTokenList 中的元素都调用一次传入的 callback 函数 。
      {{domxref("DOMTokenList.keys()")}}
      返回一个迭代器({{jsxref("Iteration_protocols","iterator")}})以遍历这个对象中所有键值对的键。
      {{domxref("DOMTokenList.values()")}}
      @@ -51,7 +51,7 @@

      方法

      示例

      -

      在下面这个简单的例子中,我们使用 {{domxref("Element.classList")}} 获取了 {{htmlelement("p")}} 元素的 class 列表,也就是一个DOMTokenList ,再使用 {{domxref("DOMTokenList.add()")}} 添加了一个 class,然后更新 <p> 元素的{{domxref("Node.textContent")}}以显示这个新的 DOMTokenList

      +

      在下面这个简单的例子中,我们使用 {{domxref("Element.classList")}} 获取了 {{htmlelement("p")}} 元素的 class 列表,也就是一个DOMTokenList ,再使用 {{domxref("DOMTokenList.add()")}} 添加了一个 class,然后更新 <p> 元素的{{domxref("Node.textContent")}}以显示这个新的 DOMTokenList

      HTML:

      @@ -70,7 +70,7 @@

      示例

      去除空格和重复项目

      -

      修改 DOMTokenList 的方法(例如 {{domxref("DOMTokenList.add()")}})会自动去除多余的空格({{Glossary("Whitespace")}})和列表中的重复项目。例如:

      +

      修改 DOMTokenList 的方法(例如 {{domxref("DOMTokenList.add()")}})会自动去除多余的空格({{Glossary("Whitespace")}})和列表中的重复项目。例如:

      <span class="    d   d e f"></span>
      diff --git a/files/zh-cn/web/api/domtokenlist/item/index.html b/files/zh-cn/web/api/domtokenlist/item/index.html index 263cd29070646a..1d7d1281c29fba 100644 --- a/files/zh-cn/web/api/domtokenlist/item/index.html +++ b/files/zh-cn/web/api/domtokenlist/item/index.html @@ -15,7 +15,7 @@

      参数

      index
      -
       {{domxref("DOMString")}} 类型,一个表示要返回的项的索引。
      +
      {{domxref("DOMString")}} 类型,一个表示要返回的项的索引。

      返回值

      diff --git a/files/zh-cn/web/api/domtokenlist/keys/index.html b/files/zh-cn/web/api/domtokenlist/keys/index.html index 87842b67712b4c..0e8897af958335 100644 --- a/files/zh-cn/web/api/domtokenlist/keys/index.html +++ b/files/zh-cn/web/api/domtokenlist/keys/index.html @@ -13,7 +13,7 @@ ---

      {{APIRef("DOM")}}

      -

      {{domxref("DOMTokenList")}} 的 keys() 方法返回一个{{jsxref("Iteration_protocols",'iterator')}}, 可以用来遍历这个对象中的所有的键,键的类型是无符号整型

      +

      {{domxref("DOMTokenList")}}keys() 方法返回一个{{jsxref("Iteration_protocols",'iterator')}}, 可以用来遍历这个对象中的所有的键,键的类型是无符号整型

      语法

      @@ -29,7 +29,7 @@

      返回值

      例子

      -

      在下面的例子中,我们获取了一个使用 {{domxref("Element.classList")}}属性获取了一个 DOMTokenList ,在这里它表示了这个 {{htmlelement("span")}} 元素的所有 class 属性值的键(索引)。然后我们使用了它的  keys()方法获取了一个 iterator, 最后再使用 for ... of 循环来对所有键(这里是索引)进行遍历,将遍历的每一个结果都写到这个 <span> 标签内( 使用{{domxref("Node.textContent")}}属性)显示。

      +

      在下面的例子中,我们获取了一个使用 {{domxref("Element.classList")}}属性获取了一个 DOMTokenList ,在这里它表示了这个 {{htmlelement("span")}} 元素的所有 class 属性值的键(索引)。然后我们使用了它的 keys()方法获取了一个 iterator, 最后再使用 for ... of 循环来对所有键(这里是索引)进行遍历,将遍历的每一个结果都写到这个 <span> 标签内( 使用{{domxref("Node.textContent")}}属性)显示。

      首先,例子使用的 HTML 代码为:

      diff --git a/files/zh-cn/web/api/domtokenlist/length/index.html b/files/zh-cn/web/api/domtokenlist/length/index.html index f74a7b7f5a39db..ddb32c6a1c1997 100644 --- a/files/zh-cn/web/api/domtokenlist/length/index.html +++ b/files/zh-cn/web/api/domtokenlist/length/index.html @@ -5,7 +5,7 @@ ---

      {{APIRef("DOM")}}

      -

       

      +

      lengthDOMTokenList接口的一个只读属性,以整数来表示,代表着当前对象中值的个数。

      @@ -19,9 +19,9 @@

      数值

      示范例子

      -

       

      +

      -

      在示范例子里我们编写了一个 span 元素,使用{{domxref("Element.classList")}}去检索元素{{htmlelement("span")}}拥有的类,放回一个实时的DOMTokenList集合,然后把该集合中的数值个数写进 <span>的 {{domxref("Node.textContent")}} 属性中。

      +

      在示范例子里我们编写了一个 span 元素,使用{{domxref("Element.classList")}}去检索元素{{htmlelement("span")}}拥有的类,放回一个实时的DOMTokenList集合,然后把该集合中的数值个数写进 <span>的 {{domxref("Node.textContent")}} 属性中。

      HTML 代码:

      diff --git a/files/zh-cn/web/api/domtokenlist/remove/index.html b/files/zh-cn/web/api/domtokenlist/remove/index.html index 227d048023afea..6a55336bf4c025 100644 --- a/files/zh-cn/web/api/domtokenlist/remove/index.html +++ b/files/zh-cn/web/api/domtokenlist/remove/index.html @@ -5,7 +5,7 @@ ---

      {{APIRef("DOM")}}

      -

      remove() 方法从 {{domxref("DOMTokenList")}} 中移除指定标记。

      +

      remove() 方法从 {{domxref("DOMTokenList")}} 中移除指定标记。

      语法

      diff --git a/files/zh-cn/web/api/domtokenlist/replace/index.html b/files/zh-cn/web/api/domtokenlist/replace/index.html index 4c4d7873e4e8ba..7126d8836619af 100644 --- a/files/zh-cn/web/api/domtokenlist/replace/index.html +++ b/files/zh-cn/web/api/domtokenlist/replace/index.html @@ -5,7 +5,7 @@ ---

      {{APIRef("DOM")}}

      -

      {{domxref("DOMTokenList")}}接口的 replace() 方法可以将列表中一个已存在的 token 替换为一个新 token。如果第一个参数 token 在列表中不存在, replace() 立刻返回false ,而不会将新 token 字符串添加到列表中。

      +

      {{domxref("DOMTokenList")}}接口的 replace() 方法可以将列表中一个已存在的 token 替换为一个新 token。如果第一个参数 token 在列表中不存在, replace() 立刻返回false ,而不会将新 token 字符串添加到列表中。

      语法

      @@ -22,7 +22,7 @@

      参数

      返回值

      -

      boolean 类型,如果oldToken被成功替换,返回 true ,否则返回false

      +

      boolean 类型,如果oldToken被成功替换,返回 true ,否则返回false

      Note: In older browsers, replace() returns void.

      @@ -30,7 +30,7 @@

      返回值

      Examples

      -

      在下面的例子中,我们使用{{domxref("Element.classList")}}方法,将设置在{{htmlelement("span")}} 元素上的 class 列表检索为DOMTokenList 类型。接着我们替换一个字符串,并且将新列表写入到 <span> 的内容{{domxref("Node.textContent")}}中。

      +

      在下面的例子中,我们使用{{domxref("Element.classList")}}方法,将设置在{{htmlelement("span")}} 元素上的 class 列表检索为DOMTokenList 类型。接着我们替换一个字符串,并且将新列表写入到 <span> 的内容{{domxref("Node.textContent")}}中。

      首先,HTML 代码如下:

      diff --git a/files/zh-cn/web/api/domtokenlist/toggle/index.html b/files/zh-cn/web/api/domtokenlist/toggle/index.html index 5abcec0423d386..bc3b7bddc3f1f0 100644 --- a/files/zh-cn/web/api/domtokenlist/toggle/index.html +++ b/files/zh-cn/web/api/domtokenlist/toggle/index.html @@ -9,7 +9,7 @@ ---

      {{APIRef("DOM")}}

      -

      {{domxref("DOMTokenList")}} 接口的 toggle() 方法从列表中删除一个给定的标记 并返回 false 。 如果标记 不存在,则添加并且函数返回 true

      +

      {{domxref("DOMTokenList")}} 接口的 toggle() 方法从列表中删除一个给定的标记 并返回 false 。 如果标记 不存在,则添加并且函数返回 true

      语法

      @@ -21,12 +21,12 @@

      参数列表

      token
      标记列表中你想探查并切换的 {{domxref("DOMString")}} .
      force {{optional_inline}}
      -
      一个{{domxref("Boolean")}} 值,设置后会将方法变成单向操作。如设置为false, 则会删除标记列表中匹配的给定标记,且不会再度添加。如设置为 true, 则将在标记列表中添加给定标记,且不会再度删除。
      +
      一个{{domxref("Boolean")}} 值,设置后会将方法变成单向操作。如设置为false, 则会删除标记列表中匹配的给定标记,且不会再度添加。如设置为 true, 则将在标记列表中添加给定标记,且不会再度删除。

      返回值

      -

      该方法返回一个{{domxref("Boolean")}}值 — 如给定标记不存在于列表中返回false , 标记存在则返回true 。

      +

      该方法返回一个{{domxref("Boolean")}}值 — 如给定标记不存在于列表中返回false , 标记存在则返回true

      Examples

      diff --git a/files/zh-cn/web/api/dragevent/datatransfer/index.html b/files/zh-cn/web/api/dragevent/datatransfer/index.html index 1afa7c9490d25d..d2000cefea4f2f 100644 --- a/files/zh-cn/web/api/dragevent/datatransfer/index.html +++ b/files/zh-cn/web/api/dragevent/datatransfer/index.html @@ -5,9 +5,9 @@ ---
      {{APIRef("HTML Drag and Drop API")}}
      -
       
      +
      -

      DataEvent.dataTransfer 属性保存着拖拽操作中的数据(作为一个 DataTransfer 对象)

      +

      DataEvent.dataTransfer 属性保存着拖拽操作中的数据(作为一个 DataTransfer 对象)

      This property is {{readonlyInline}}.

      @@ -20,7 +20,7 @@

      返回值

      data
      -
      {{domxref("DataTransfer")}} 对象包含着 {{domxref("DragEvent","drag event's data")}}.
      +
      {{domxref("DataTransfer")}} 对象包含着 {{domxref("DragEvent","drag event's data")}}.

      示例

      diff --git a/files/zh-cn/web/api/dragevent/dragevent/index.html b/files/zh-cn/web/api/dragevent/dragevent/index.html index 90d51a5136461c..a18a3f3ed8b867 100644 --- a/files/zh-cn/web/api/dragevent/dragevent/index.html +++ b/files/zh-cn/web/api/dragevent/dragevent/index.html @@ -9,7 +9,7 @@

      Although this interface has a constructor, it is not possible to create a useful {{domxref("DataTransfer")}} object from script, since {{domxref("DataTransfer")}} objects have a processing and security model that is coordinated by the browser during drag-and-drops.

      -

      该接口继承了 {{domxref("MouseEvent")}} 和 {{domxref("Event")}} 的属性。

      +

      该接口继承了 {{domxref("MouseEvent")}} 和 {{domxref("Event")}} 的属性。

      语法

      diff --git a/files/zh-cn/web/api/dynamicscompressornode/index.html b/files/zh-cn/web/api/dynamicscompressornode/index.html index 05fb70b582ecfa..208491e570f4db 100644 --- a/files/zh-cn/web/api/dynamicscompressornode/index.html +++ b/files/zh-cn/web/api/dynamicscompressornode/index.html @@ -14,7 +14,7 @@

      {{ APIRef("Web Audio API") }}

      -

      DynamicsCompressorNode 接口提供了一个压缩效果器,用以降低信号中最响部分的音量,来协助避免在多个声音同时播放并叠加在一起的时候产生的削波失真。通常用于音乐创作和游戏音效中。DynamicsCompressorNode 是一个 {{domxref("AudioNode")}} ,只有一路输入和一路输出,使用 {{domxref("AudioContext.createDynamicsCompressor()")}} 方法创建。

      +

      DynamicsCompressorNode 接口提供了一个压缩效果器,用以降低信号中最响部分的音量,来协助避免在多个声音同时播放并叠加在一起的时候产生的削波失真。通常用于音乐创作和游戏音效中。DynamicsCompressorNode 是一个 {{domxref("AudioNode")}} ,只有一路输入和一路输出,使用 {{domxref("AudioContext.createDynamicsCompressor()")}} 方法创建。

      @@ -46,31 +46,31 @@

      构造方法

      {{domxref("DynamicsCompressorNode.DynamicsCompressorNode", "DynamicsCompressorNode()")}}
      -
      创建一个新的 DynamicsCompressorNode 对象实例。
      +
      创建一个新的 DynamicsCompressorNode 对象实例。

      属性

      -

      由父类 {{domxref("AudioNode")}} 派生

      +

      由父类 {{domxref("AudioNode")}} 派生

      {{domxref("DynamicsCompressorNode.threshold")}} {{readonlyInline}}
      -
      比例系数 {{domxref("AudioParam")}} 型。分贝高于此值时,将会进行压缩。
      +
      比例系数 {{domxref("AudioParam")}} 型。分贝高于此值时,将会进行压缩。
      {{domxref("DynamicsCompressorNode.knee")}} {{readonlyInline}}
      -
      比例系数 {{domxref("AudioParam")}} 型。当超出 threshold 设置的值之后,曲线在哪个点开始朝着 ratio 设置的部分平滑变换。
      +
      比例系数 {{domxref("AudioParam")}} 型。当超出 threshold 设置的值之后,曲线在哪个点开始朝着 ratio 设置的部分平滑变换。
      {{domxref("DynamicsCompressorNode.ratio")}} {{readonlyInline}}
      -
      比例系数 {{domxref("AudioParam")}} 型。输入增益变化多少来产生 1 dB 的输出。
      +
      比例系数 {{domxref("AudioParam")}} 型。输入增益变化多少来产生 1 dB 的输出。
      {{domxref("DynamicsCompressorNode.reduction")}} {{readonlyInline}}
      -
      float 型。表示当前压缩器使用的增益压缩值。
      +
      float 型。表示当前压缩器使用的增益压缩值。
      {{domxref("DynamicsCompressorNode.attack")}} {{readonlyInline}}
      -
      比例系数 {{domxref("AudioParam")}} 型。降低增益 10 dB 的时间(单位为秒)。
      +
      比例系数 {{domxref("AudioParam")}} 型。降低增益 10 dB 的时间(单位为秒)。
      {{domxref("DynamicsCompressorNode.release")}} {{readonlyInline}}
      -
      比例系数 {{domxref("AudioParam")}} 型。提升增益 10 dB 的时间(单位为秒)。
      +
      比例系数 {{domxref("AudioParam")}} 型。提升增益 10 dB 的时间(单位为秒)。

      方法

      -

      没有自定义的方法,继承父类 {{domxref("AudioNode")}} 中的方法。

      +

      没有自定义的方法,继承父类 {{domxref("AudioNode")}} 中的方法。

      示例

      diff --git a/files/zh-cn/web/api/element/after/index.html b/files/zh-cn/web/api/element/after/index.html index ea111ec412bc02..6cacb6d1e16913 100644 --- a/files/zh-cn/web/api/element/after/index.html +++ b/files/zh-cn/web/api/element/after/index.html @@ -13,7 +13,7 @@ ---
      {{APIRef("DOM")}}
      -

      Element.after() 方法会在其父节点的子节点列表中插入一些 {{domxref("Node")}} 或 {{domxref("DOMString")}} 对象。插入位置为该节点之后。{{domxref("DOMString")}} 对象会被以 {{domxref("Text")}} 的形式插入。

      +

      Element.after() 方法会在其父节点的子节点列表中插入一些 {{domxref("Node")}} 或 {{domxref("DOMString")}} 对象。插入位置为该节点之后。{{domxref("DOMString")}} 对象会被以 {{domxref("Text")}} 的形式插入。

      语法

      @@ -25,7 +25,7 @@

      参数

      nodes
      -
      一组准备插入的 {{domxref("Node")}} 或 {{domxref("DOMString")}} 。
      +
      一组准备插入的 {{domxref("Node")}} 或 {{domxref("DOMString")}} 。

      错误

      diff --git a/files/zh-cn/web/api/element/animate/index.html b/files/zh-cn/web/api/element/animate/index.html index 4da4fe76d57a3d..020a9aff0ebb58 100644 --- a/files/zh-cn/web/api/element/animate/index.html +++ b/files/zh-cn/web/api/element/animate/index.html @@ -7,9 +7,9 @@ - 动画接口 translation_of: Web/API/Element/animate --- -
      {{APIRef('Web Animations')}} {{SeeCompatTable}}
      +
      {{APIRef('Web Animations')}} {{SeeCompatTable}}
      -

      {{domxref("Element")}} 接口的animate() 方法是一个创建新{{domxref("Animation")}}的便捷方法,将它应用于元素,然后运行动画。它将返回一个新建的 {{domxref("Animation")}} 对象实例

      +

      {{domxref("Element")}} 接口的animate() 方法是一个创建新{{domxref("Animation")}}的便捷方法,将它应用于元素,然后运行动画。它将返回一个新建的 {{domxref("Animation")}} 对象实例

      一个元素上可以应用多个动画效果。你可以通过调用此函数获得这些动画效果的一个列表: {{domxref("Element.getAnimations()")}}.

      @@ -17,21 +17,21 @@

      语法

      -
      var animation = element.animate(keyframes, options); 
      +
      var animation = element.animate(keyframes, options); 

      参数

      -
      keyframes 关键帧
      +
      keyframes 关键帧

      一个对象,代表关键帧的一个集合

      -
      options 可选项
      -
      代表动画持续时间的整形数字 (以毫秒为单位), 或者一个包含一个或多个时间属性的对象:
      +
      options 可选项
      +
      代表动画持续时间的整形数字 (以毫秒为单位), 或者一个包含一个或多个时间属性的对象:
      id {{optional_inline}}
      -
      在 animate() 里可作为唯一标识的属性:一个用来引用动画的字符串( DOMString )
      +
      animate() 里可作为唯一标识的属性:一个用来引用动画的字符串( DOMString
      {{Page("/en-US/docs/Web/API/Web_Animations_API/Animation_timing_properties", "Properties")}}
      @@ -41,24 +41,24 @@

      未来的可选项

      下面的可选项目前并非在所有地方都可用,但未来将会被加进来

      -
      composite {{optional_inline}} 合成
      -
      决定动画彼此之间的值如何结合起来,单独的动画不指定自己的特定复合操作。 默认为 replace. +
      composite {{optional_inline}} 合成
      +
      决定动画彼此之间的值如何结合起来,单独的动画不指定自己的特定复合操作。 默认为 replace.
        -
      • add 表示追加影响,每一次连续的迭代建立在前一个的基础上。 比如transform, translateX(-200px) 将不会覆盖 rotate(20deg) 的值,最终结果是 translateX(-200px) rotate(20deg)
      • -
      • accumulate 效果类似但是更智能一些:blur(2) 和blur(5) 的结果为blur(7), 而不是 blur(2) blur(5)
      • -
      • replace 新的值将会覆盖掉旧的
      • +
      • add 表示追加影响,每一次连续的迭代建立在前一个的基础上。 比如transform, translateX(-200px) 将不会覆盖 rotate(20deg) 的值,最终结果是 translateX(-200px) rotate(20deg)
      • +
      • accumulate 效果类似但是更智能一些:blur(2)blur(5) 的结果为blur(7), 而不是 blur(2) blur(5)
      • +
      • replace 新的值将会覆盖掉旧的
      -
      iterationComposite {{optional_inline}} 迭代合成 
      -
      决定动画迭代之间的值如何结合起来, 可以被设置为 accumulate 或者 replace (同上)。默认值为 replace.
      -
      spacing {{optional_inline}}
      -
      决定在动画持续时间内如何分配没有时间偏移的关键帧. 默认值为distribute. +
      iterationComposite {{optional_inline}} 迭代合成
      +
      决定动画迭代之间的值如何结合起来, 可以被设置为 accumulate 或者 replace (同上)。默认值为 replace.
      +
      spacing {{optional_inline}}
      +
      决定在动画持续时间内如何分配没有时间偏移的关键帧. 默认值为distribute.
        -
      • distribute 分配的关键帧位置,使连续关键帧之间的距离相等。也就是说,没有任何偏移时,将会使关键帧均匀分到整个运行时间内
      • +
      • distribute 分配的关键帧位置,使连续关键帧之间的距离相等。也就是说,没有任何偏移时,将会使关键帧均匀分到整个运行时间内
      • paced 分配的关键帧位置,使连续关键帧之间的距离让某个步增的属性值的增长速度相同,也就是说,属性值差异越大,关键帧之间的距离越远
      -

       

      +

      @@ -68,16 +68,16 @@

      返回值

      示例

      -

      在示例 Down the Rabbit Hole (with the Web Animation API) 中, 我们用 animate() 来快速创建并运行使 #tunnel 元素无限循环缓慢升起的动画。注意关键帧的对象数组和时间可选项

      +

      在示例 Down the Rabbit Hole (with the Web Animation API) 中, 我们用 animate() 来快速创建并运行使 #tunnel 元素无限循环缓慢升起的动画。注意关键帧的对象数组和时间可选项

      document.getElementById("tunnel").animate([
      -  // keyframes
      -  { transform: 'translateY(0px)' },
      -  { transform: 'translateY(-300px)' }
      +  // keyframes
      +  { transform: 'translateY(0px)' },
      +  { transform: 'translateY(-300px)' }
       ], {
      -  // timing options
      -  duration: 1000,
      -  iterations: Infinity
      +  // timing options
      +  duration: 1000,
      +  iterations: Infinity
       });
       
      diff --git a/files/zh-cn/web/api/element/animationcancel_event/index.html b/files/zh-cn/web/api/element/animationcancel_event/index.html index 833b1c9d4bdc8f..04e8491ed3a3de 100644 --- a/files/zh-cn/web/api/element/animationcancel_event/index.html +++ b/files/zh-cn/web/api/element/animationcancel_event/index.html @@ -30,7 +30,7 @@

      HTML content

      </div> <div class="button" id="toggleBox"> -  Hide the Box + Hide the Box </div> <pre id="log"></pre> @@ -72,7 +72,7 @@

      CSS content

      font: bold 1.4em "Lucida Grande", "Open Sans", sans-serif; } -  +

      Leaving out some bits of the CSS that don't matter for the discussion here, let's take a look at the styles for the box that we're animating. First is the box itself, with all its properties, including {{cssxref("animation")}}, defined. We go ahead and describe the animation in-place here because the animation is intended to begin as soon as the page loads, rather than based on an event.

      @@ -143,11 +143,11 @@

      JavaScript content

      function toggleBox() {
         if (box.style.display == "none") {
           box.style.display = "flex";
      -    document.getElementById("toggleBox").innerHTML = "Hide the box";
      -  } else {
      -    box.style.display = "none";
      -    document.getElementById("toggleBox").innerHTML = "Show the box";
      -  }
      +    document.getElementById("toggleBox").innerHTML = "Hide the box";
      +  } else {
      +    box.style.display = "none";
      +    document.getElementById("toggleBox").innerHTML = "Show the box";
      +  }
       }

      Toggling the box to display: none has the effect of aborting its animation. In browsers that support {{event("animationcancel")}}, the event is fired and this handler is called.

      @@ -176,7 +176,7 @@

      Specification

      - +
      {{SpecName('CSS3 Animations','#eventdef-animationevent-animationcancel','onanimationcancel')}} {{Spec2('CSS3 Animations')}} 
      diff --git a/files/zh-cn/web/api/element/animationend_event/index.html b/files/zh-cn/web/api/element/animationend_event/index.html index f79c2283451e31..1e966022f85a23 100644 --- a/files/zh-cn/web/api/element/animationend_event/index.html +++ b/files/zh-cn/web/api/element/animationend_event/index.html @@ -35,7 +35,7 @@

      规范

      {{SpecName('CSS3 Animations','#eventdef-animationevent-animationend','onanimationend')}} {{Spec2('CSS3 Animations')}} -   + diff --git a/files/zh-cn/web/api/element/animationiteration_event/index.html b/files/zh-cn/web/api/element/animationiteration_event/index.html index 392a8651d365b7..680b1b757c8113 100644 --- a/files/zh-cn/web/api/element/animationiteration_event/index.html +++ b/files/zh-cn/web/api/element/animationiteration_event/index.html @@ -6,7 +6,7 @@ ---
      {{APIRef("CSS3 Animations")}}
      -

       {{event("animationiteration")}}事件的处理器 . 当 CSS Animation 运动到最后一帧时触发。 An iteration ends when a single pass through the sequence of animation instructions is completed by executing the last animation step.

      +

      {{event("animationiteration")}}事件的处理器 . 当 CSS Animation 运动到最后一帧时触发。 An iteration ends when a single pass through the sequence of animation instructions is completed by executing the last animation step.

      语法

      @@ -33,7 +33,7 @@

      HTML content

      </div> <div class="button" id="play"> -  Begin Demonstration + Begin Demonstration </div>
      @@ -74,7 +74,7 @@

      CSS content

      font: bold 1.4em "Lucida Grande", "Open Sans", sans-serif; } - 
      +

    Leaving out some bits of the CSS that don't matter for the discussion here, let's take a look at the styles for the box that we're animating. First is the box itself. We set its size, position, color, and layout. Note that there's nothing there about animation. That's because we don't want the box to start animating right away. We'll add the {{cssxref("animation")}} style later to start animating the box.

    @@ -129,8 +129,8 @@

    JavaScript content

    Finally, we set up a handler for a click on the button that runs the animation:

    document.getElementById("play").addEventListener("click", function(event) {
    -  box.style.animationPlayState = "running";
    -  iterationCounter++;
    +  box.style.animationPlayState = "running";
    +  iterationCounter++;
     }, false);

    This sets the box element's {{cssxref("animation-play-state")}} to "running" and increments the iteration counter. That's all there is to it!

    @@ -155,7 +155,7 @@

    规范

    {{SpecName('CSS3 Animations','#eventdef-animationevent-animationiteration','onanimationiteration')}} {{Spec2('CSS3 Animations')}} -   + diff --git a/files/zh-cn/web/api/element/animationstart_event/index.html b/files/zh-cn/web/api/element/animationstart_event/index.html index 1582b1cc4c78cb..0c069554659495 100644 --- a/files/zh-cn/web/api/element/animationstart_event/index.html +++ b/files/zh-cn/web/api/element/animationstart_event/index.html @@ -12,7 +12,7 @@ translation_of: Web/API/HTMLElement/animationstart_event original_slug: Web/API/HTMLElement/animationstart_event --- -

    animationstart 事件会在 CSS 动画开始时触发。 如果有 animation-delay 延时,事件会在延迟时效过后立即触发。为负数的延时时长会致使事件被触发时事件的 elapsedTime 属性值等于该时长的绝对值(并且,相应地,动画将直接播放该时长绝对值之后的动画)。

    +

    animationstart 事件会在 CSS 动画开始时触发。 如果有 animation-delay 延时,事件会在延迟时效过后立即触发。为负数的延时时长会致使事件被触发时事件的 elapsedTime 属性值等于该时长的绝对值(并且,相应地,动画将直接播放该时长绝对值之后的动画)。

    基本信息

    @@ -70,7 +70,7 @@

    属性表

    elapsedTime {{ReadOnlyInline}} Float - 动画运行时长,单位为秒,与直到该事件被触发的时间相一致,不包括任何动画暂停时的时长。此值应为 0 除非 animation-delay 是一个负值,这种情况下此值为 (-1 * {{cssxref("animation-delay")}}),并且动画将直接从此值后的序列开始播放。 + 动画运行时长,单位为秒,与直到该事件被触发的时间相一致,不包括任何动画暂停时的时长。此值应为 0 除非 animation-delay 是一个负值,这种情况下此值为 (-1 * {{cssxref("animation-delay")}}),并且动画将直接从此值后的序列开始播放。 diff --git a/files/zh-cn/web/api/element/append/index.html b/files/zh-cn/web/api/element/append/index.html index 0bb3a147ef3693..bb4508aa4f2e74 100644 --- a/files/zh-cn/web/api/element/append/index.html +++ b/files/zh-cn/web/api/element/append/index.html @@ -13,9 +13,9 @@ ---
    {{APIRef("DOM")}}
    -
     Element.append 方法在 Element的最后一个子节点之后插入一组 {{domxref("Node")}} 对象或 {{domxref("DOMString")}} 对象。
    +
    Element.append 方法在 Element的最后一个子节点之后插入一组 {{domxref("Node")}} 对象或 {{domxref("DOMString")}} 对象。
    -
    被插入的 {{domxref("DOMString")}} 对象等价为 {{domxref("Text")}} 节点。
    +
    被插入的 {{domxref("DOMString")}} 对象等价为 {{domxref("Text")}} 节点。
    @@ -24,9 +24,9 @@
      -
    • Element.append()允许追加  {{domxref("DOMString")}} 对象,而 Node.appendChild() 只接受 {{domxref("Node")}} 对象。
    • -
    • Element.append() 没有返回值,而 Node.appendChild() 返回追加的 {{domxref("Node")}} 对象。
    • -
    • Element.append() 可以追加多个节点和字符串,而 Node.appendChild() 只能追加一个节点。
    • +
    • Element.append()允许追加 {{domxref("DOMString")}} 对象,而 Node.appendChild() 只接受 {{domxref("Node")}} 对象。
    • +
    • Element.append() 没有返回值,而 Node.appendChild() 返回追加的 {{domxref("Node")}} 对象。
    • +
    • Element.append() 可以追加多个节点和字符串,而 Node.appendChild() 只能追加一个节点。

    语法

    @@ -45,7 +45,7 @@

    参数

    异常

      -
    • {{domxref("HierarchyRequestError")}}: 在层次结构中的指定点不能插入节点。
    • +
    • {{domxref("HierarchyRequestError")}}: 在层次结构中的指定点不能插入节点。

    示例

    @@ -74,9 +74,9 @@

    插入一个节点,同 console.log(parent.childNodes); // NodeList [ #text "Some text", <p> ]

    -

    Element.append() 方法在 with 语句中不生效

    +

    Element.append() 方法在 with 语句中不生效

    -

    为了保证向后兼容,append 方法在 with 语句中会被特殊处理,详情请看 {{jsxref("Symbol.unscopables")}}。

    +

    为了保证向后兼容,append 方法在 with 语句中会被特殊处理,详情请看 {{jsxref("Symbol.unscopables")}}。

    var parent = document.createElement("div");
     
    @@ -87,7 +87,7 @@ 

    Element.append()

    Polyfill

    -

    下面的 Polyfill 只支持到 IE 9  及以上:

    +

    下面的 Polyfill 只支持到 IE 9 及以上:

    // Source: https://github.com/jserz/js_piece/blob/master/DOM/Element/append()/append().md
     (function (arr) {
    diff --git a/files/zh-cn/web/api/element/assignedslot/index.html b/files/zh-cn/web/api/element/assignedslot/index.html
    index 71b626afeeffd9..f9945a4864a9e1 100644
    --- a/files/zh-cn/web/api/element/assignedslot/index.html
    +++ b/files/zh-cn/web/api/element/assignedslot/index.html
    @@ -14,7 +14,7 @@ 

    Syntax

    Value

    -

    An instance of {{domxref("HTMLSlotElement")}}.

    +

    An instance of {{domxref("HTMLSlotElement")}}.

    Specifications

    diff --git a/files/zh-cn/web/api/element/attachshadow/index.html b/files/zh-cn/web/api/element/attachshadow/index.html index 3f26c562981ace..0ccda28ed83c12 100644 --- a/files/zh-cn/web/api/element/attachshadow/index.html +++ b/files/zh-cn/web/api/element/attachshadow/index.html @@ -10,11 +10,11 @@ ---

    {{APIRef('Shadow DOM')}}

    -

    Element.attachShadow() 方法给指定的元素挂载一个 Shadow DOM,并且返回对 ShadowRoot 的引用。

    +

    Element.attachShadow() 方法给指定的元素挂载一个 Shadow DOM,并且返回对 ShadowRoot 的引用。

    可以被挂载的 shadow DOM 元素

    -

    要注意的是,不是每一种类型的元素都可以附加到 shadow root(影子根)下面。出于安全考虑,一些元素不能使用 shadow DOM(例如{{htmlelement("a")}}),以及许多其他的元素。下面是一个可以挂载 shadow root 的元素列表:

    +

    要注意的是,不是每一种类型的元素都可以附加到 shadow root(影子根)下面。出于安全考虑,一些元素不能使用 shadow DOM(例如{{htmlelement("a")}}),以及许多其他的元素。下面是一个可以挂载 shadow root 的元素列表:

    • 任何带有有效的名称且可独立存在的(autonomous)自定义元素
    • @@ -54,7 +54,7 @@

      参数

      指定 Shadow DOM 树封装模式的字符串,可以是以下值:

        -
      • open shadow root 元素可以从 js 外部访问根节点,例如使用 {{domxref("Element.shadowRoot")}}:
      • +
      • open shadow root 元素可以从 js 外部访问根节点,例如使用 {{domxref("Element.shadowRoot")}}:
      element.shadowRoot; // 返回一个 ShadowRoot 对象
      @@ -66,8 +66,8 @@

      参数

      element.shadowRoot; // 返回 null
      delegatesFocus 焦点委托
      -
      一个布尔值,当设置为 true 时,指定减轻自定义元素的聚焦性能问题行为。
      - 当 shadow DOM 中不可聚焦的部分被点击时,让第一个可聚焦的部分成为焦点,并且 shadow host(影子主机)将提供所有可用的 :focus 样式。
      +
      一个布尔值,当设置为 true 时,指定减轻自定义元素的聚焦性能问题行为。
      + 当 shadow DOM 中不可聚焦的部分被点击时,让第一个可聚焦的部分成为焦点,并且 shadow host(影子主机)将提供所有可用的 :focus 样式。
      @@ -103,7 +103,7 @@

      异常

      示例

      -

      下面的例子取至 word-count-web-component 片段 ( 现场看看 ). 你可以看到使用 attachShadow() 在代码中间创建一个 shadow root,然后我们可以将自定义元素的内容挂载添加到它上面。

      +

      下面的例子取至 word-count-web-component 片段 ( 现场看看 ). 你可以看到使用 attachShadow() 在代码中间创建一个 shadow root,然后我们可以将自定义元素的内容挂载添加到它上面。

      // 为新元素创建一个类
       class WordCount extends HTMLParagraphElement {
      diff --git a/files/zh-cn/web/api/element/attributes/index.html b/files/zh-cn/web/api/element/attributes/index.html
      index e415d4fba45d00..12a1b6390a8434 100644
      --- a/files/zh-cn/web/api/element/attributes/index.html
      +++ b/files/zh-cn/web/api/element/attributes/index.html
      @@ -14,7 +14,7 @@
       ---
       

      {{ APIRef("DOM") }}

      -

      Element.attributes 属性返回该元素所有属性节点的一个实时集合。该集合是一个 {{domxref("NamedNodeMap")}} 对象,不是一个数组,所以它没有 {{jsxref("Array", "数组")}} 的方法,其包含的 {{domxref("Attr", "属性")}} 节点的索引顺序随浏览器不同而不同。更确切地说,attributes 是字符串形式的名/值对,每一对名/值对对应一个属性节点。

      +

      Element.attributes 属性返回该元素所有属性节点的一个实时集合。该集合是一个 {{domxref("NamedNodeMap")}} 对象,不是一个数组,所以它没有 {{jsxref("Array", "数组")}} 的方法,其包含的 {{domxref("Attr", "属性")}} 节点的索引顺序随浏览器不同而不同。更确切地说,attributes 是字符串形式的名/值对,每一对名/值对对应一个属性节点。

      语法

      @@ -83,7 +83,7 @@

      浏览器兼容性

      {{Compat("api.Element.attributes")}}

      -

      在 Firefox 22 版本之前,这个属性是被用在 {{domxref("Node")}} 上(继承至 {{domxref("Element")}})。它需要被使用在其他符合这个接口规范的浏览器上使用。

      +

      在 Firefox 22 版本之前,这个属性是被用在 {{domxref("Node")}} 上(继承至 {{domxref("Element")}})。它需要被使用在其他符合这个接口规范的浏览器上使用。

      IE5.5 返回的是一个 map 形式的键值对而不是一个 attribute 的属性对象。

      @@ -91,5 +91,5 @@

      参见

      • {{domxref("NamedNodeMap")}},返回对象的接口
      • -
      • 跨浏览器兼容性问题可参考: quirksmode
      • +
      • 跨浏览器兼容性问题可参考: quirksmode
      diff --git a/files/zh-cn/web/api/element/auxclick_event/index.html b/files/zh-cn/web/api/element/auxclick_event/index.html index 7edcac2ee35dbd..8cae99096e15e5 100644 --- a/files/zh-cn/web/api/element/auxclick_event/index.html +++ b/files/zh-cn/web/api/element/auxclick_event/index.html @@ -13,7 +13,7 @@
      {{SeeCompatTable}}{{ ApiRef("HTML DOM") }}
      -
       
      +

      onauxclick 属性是一个 {{event("Event_handlers", "event handler")}},当 {{event("auxclick")}} 事件发生时被调用,例如按下了输入设备上的非主按钮 (e.g. 鼠标中键)。

      diff --git a/files/zh-cn/web/api/element/before/index.html b/files/zh-cn/web/api/element/before/index.html index 18e40903d8351e..33d21fd7b69ab3 100644 --- a/files/zh-cn/web/api/element/before/index.html +++ b/files/zh-cn/web/api/element/before/index.html @@ -13,7 +13,7 @@ ---
      {{APIRef("DOM")}} {{SeeCompatTable}}
      -

       ChildNode.before 方法可以在ChildNode 这个节点的父节点中插入一些列的 {{domxref("Node")}} 或者 {{domxref("DOMString")}} 对象,位置就是在ChildNode 节点的前面,{{domxref("DOMString")}} 对象其实和 {{domxref("Text")}} 节点一样的方式来完成插入的。

      +

      ChildNode.before 方法可以在ChildNode 这个节点的父节点中插入一些列的 {{domxref("Node")}} 或者 {{domxref("DOMString")}} 对象,位置就是在ChildNode 节点的前面,{{domxref("DOMString")}} 对象其实和 {{domxref("Text")}} 节点一样的方式来完成插入的。

      语法

      @@ -25,7 +25,7 @@

      Parameters 参数

      nodes
      -
      一系列的 {{domxref("Node")}} 或者 {{domxref("DOMString")}} 
      +
      一系列的 {{domxref("Node")}} 或者 {{domxref("DOMString")}}

      Exceptions

      @@ -74,7 +74,7 @@

      Inserting an e

      Element.before() is unscopable 不可使用区域

      -

      The before() 不能配合 with 声明使用,See {{jsxref("Symbol.unscopables")}} for more information.

      +

      The before() 不能配合 with 声明使用,See {{jsxref("Symbol.unscopables")}} for more information.

      with(node) {
         before("foo");
      @@ -83,7 +83,7 @@ 

      Element.before()

      Polyfill

      -

      兼容 ie9 或者更高版本的方法,You can polyfill the before() method in Internet Explorer 9 and higher with the following code:

      +

      兼容 ie9 或者更高版本的方法,You can polyfill the before() method in Internet Explorer 9 and higher with the following code:

      // from: https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/before()/before().md
       (function (arr) {
      diff --git a/files/zh-cn/web/api/element/blur_event/index.html b/files/zh-cn/web/api/element/blur_event/index.html
      index 3e427abd73553f..d333f95bc42d5d 100644
      --- a/files/zh-cn/web/api/element/blur_event/index.html
      +++ b/files/zh-cn/web/api/element/blur_event/index.html
      @@ -4,7 +4,7 @@
       translation_of: Web/API/Element/blur_event
       original_slug: Web/Events/blur
       ---
      -

      当一个元素失去焦点的时候 blur 事件被触发。它和 focusout 事件的主要区别是 focusout 支持冒泡。

      +

      当一个元素失去焦点的时候 blur 事件被触发。它和 focusout 事件的主要区别是 focusout 支持冒泡。

      常规信息

      @@ -68,13 +68,13 @@

      属性

      事件代理

      -

      有两种方法来为这个事件实现事件代理:在支持 focusout 事件的浏览器中使用 focusout 事件(除了 FireFox 以外的浏览器都支持 focusout)或者通过设置 addEventListener 方法的第三个参数 "useCapture" 为 true:

      +

      有两种方法来为这个事件实现事件代理:在支持 focusout 事件的浏览器中使用 focusout 事件(除了 FireFox 以外的浏览器都支持 focusout)或者通过设置 addEventListener 方法的第三个参数 "useCapture" 为 true:

      HTML Content

      <form id="form">
      -  <input type="text" placeholder="text input">
      -  <input type="password" placeholder="password">
      +  <input type="text" placeholder="text input">
      +  <input type="password" placeholder="password">
       </form>

      JavaScript Content

      diff --git a/files/zh-cn/web/api/element/childelementcount/index.html b/files/zh-cn/web/api/element/childelementcount/index.html index b2e716c4e94d22..a7628f064584b1 100644 --- a/files/zh-cn/web/api/element/childelementcount/index.html +++ b/files/zh-cn/web/api/element/childelementcount/index.html @@ -9,28 +9,28 @@ - Reference browser-compat: api.Element.childElementCount --- -

      {{ APIRef("DOM") }} 

      +

      {{ APIRef("DOM") }}

      -

       Element.childElementCount 只读属性返回一个无符号长整型数字,表示给定元素的子元素数。

      +

      Element.childElementCount 只读属性返回一个无符号长整型数字,表示给定元素的子元素数。

      -

      This property was initially defined in the {{domxref("ElementTraversal")}} pure interface. As this interface contained two distinct set of properties, one aimed at {{domxref("Node")}} that have children, one at those that are children, they have been moved into two separate pure interfaces, {{domxref("Element")}} and {{domxref("ChildNode")}}. In this case, childElementCount moved to {{domxref("Element")}}. This is a fairly technical change that shouldn't affect compatibility.

      +

      This property was initially defined in the {{domxref("ElementTraversal")}} pure interface. As this interface contained two distinct set of properties, one aimed at {{domxref("Node")}} that have children, one at those that are children, they have been moved into two separate pure interfaces, {{domxref("Element")}} and {{domxref("ChildNode")}}. In this case, childElementCount moved to {{domxref("Element")}}. This is a fairly technical change that shouldn't affect compatibility.

      -

       

      +

      语法

      -
      var count = node.childElementCount;
      +
      var count = node.childElementCount;
      var elCount = elementNodeReference.childElementCount;
       
      count
      -
      holds the return value an unsigned long (simply an integer) type.
      +
      holds the return value an unsigned long (simply an integer) type.
      node
      -
      is an object representing a DocumentDocumentFragment or Element.
      +
      is an object representing a Document, DocumentFragment or Element.

      例子

      @@ -43,53 +43,53 @@

      例子

      下例演示了一个元素节点的childElementCount属性以及children属性的用法。

      <head>
      -    <script type="text/javascript">
      -        function GetChildCount () {
      -            var container = document.getElementById ("container");
      -
      -            var childCount = 0;
      -            //如果支持 childElementCount 属性
      -            if ('childElementCount' in container) {
      -                childCount = container.childElementCount;
      -            }
      -            else {
      -            //如果支持 children 属性,IE6/7/8
      -            //译者注:没有判断 nodeType 是否为 1,可能包含注释节点。
      -                if (container.children) {
      -                    childCount = container.children.length;
      -                }
      -                else {  //,如果都不支持,Firefox 3.5 之前版本
      -                    var child = container.firstChild;
      -                    while (child) {
      -                        if (child.nodeType == 1 /*Node.ELEMENT_NODE*/) {
      -                            childCount++;
      -                        }
      -                        child = child.nextSibling;
      -                    }
      -                }
      -            }
      -
      -            alert ("The number of child elements is " + childCount);
      -        }
      -    </script>
      +    <script type="text/javascript">
      +        function GetChildCount () {
      +            var container = document.getElementById ("container");
      +
      +            var childCount = 0;
      +            //如果支持 childElementCount 属性
      +            if ('childElementCount' in container) {
      +                childCount = container.childElementCount;
      +            }
      +            else {
      +            //如果支持 children 属性,IE6/7/8
      +            //译者注:没有判断 nodeType 是否为 1,可能包含注释节点。
      +                if (container.children) {
      +                    childCount = container.children.length;
      +                }
      +                else {  //,如果都不支持,Firefox 3.5 之前版本
      +                    var child = container.firstChild;
      +                    while (child) {
      +                        if (child.nodeType == 1 /*Node.ELEMENT_NODE*/) {
      +                            childCount++;
      +                        }
      +                        child = child.nextSibling;
      +                    }
      +                }
      +            }
      +
      +            alert ("The number of child elements is " + childCount);
      +        }
      +    </script>
       </head>
       <body>
      -    <div id="container" style="width:300px; background-color:#a0d0e0;">
      -        Some text inside the container.
      -        <input type="text" size="40" value="a child element of the container" />
      -        <div>
      -            <div>a descendant element of the container</div>
      -            <div>another descendant element of the container</div>
      -        </div>
      -    </div>
      -    <br /><br />
      -    <button onclick="GetChildCount ();">Get the number of container's child elements</button>
      +    <div id="container" style="width:300px; background-color:#a0d0e0;">
      +        Some text inside the container.
      +        <input type="text" size="40" value="a child element of the container" />
      +        <div>
      +            <div>a descendant element of the container</div>
      +            <div>another descendant element of the container</div>
      +        </div>
      +    </div>
      +    <br /><br />
      +    <button onclick="GetChildCount ();">Get the number of container's child elements</button>
       </body>
       
      -

       

      +

      浏览器兼容性

      @@ -109,4 +109,4 @@

      相关链接

    • previousElementSibling
    -

     

    +

    diff --git a/files/zh-cn/web/api/element/children/index.html b/files/zh-cn/web/api/element/children/index.html index ad6c5e9bc6d06f..7f2256894a535f 100644 --- a/files/zh-cn/web/api/element/children/index.html +++ b/files/zh-cn/web/api/element/children/index.html @@ -13,18 +13,18 @@ ---

    {{ APIRef("DOM") }}

    -

    Element.children 是一个只读属性,返回 一个 Node 的子{{domxref("Element","elements")}} ,是一个动态更新的 {{domxref("HTMLCollection")}}。

    +

    Element.children 是一个只读属性,返回 一个 Node 的子{{domxref("Element","elements")}} ,是一个动态更新的 {{domxref("HTMLCollection")}}。

    语法

    -
    var children = node.children;
    +
    var children = node.children;
    var elList = elementNodeReference.children;
     

    备注

    -

    children 属性为只读属性,对象类型为 {{ domxref("HTMLCollection") }},你可以使用 elementNodeReference.children[1].nodeName 来获取某个子元素的标签名称。

    +

    children 属性为只读属性,对象类型为 {{ domxref("HTMLCollection") }},你可以使用 elementNodeReference.children[1].nodeName 来获取某个子元素的标签名称。

    例子

    diff --git a/files/zh-cn/web/api/element/classlist/index.html b/files/zh-cn/web/api/element/classlist/index.html index 2e7027983eb4e3..806da25fb96dca 100644 --- a/files/zh-cn/web/api/element/classlist/index.html +++ b/files/zh-cn/web/api/element/classlist/index.html @@ -13,7 +13,7 @@ ---
    {{APIRef("DOM")}}
    -

    Element.classList 是一个只读属性,返回一个元素的类属性的实时 {{domxref("DOMTokenList")}} 集合。

    +

    Element.classList 是一个只读属性,返回一个元素的类属性的实时 {{domxref("DOMTokenList")}} 集合。

    相比将 {{domxref("element.className")}} 作为以空格分隔的字符串来使用,classList 是一种更方便的访问元素的类列表的方法。

    @@ -24,7 +24,7 @@

    语法

    返回值

    -

    elementClasses 是一个 {{domxref("DOMTokenList")}} 表示  elementNodeReference 的类属性 。如果类属性未设置或为空,那么 elementClasses.length 返回 0。虽然 element.classList 本身是只读的,但是你可以使用 add() 和 remove() 方法修改它。

    +

    elementClasses 是一个 {{domxref("DOMTokenList")}} 表示 elementNodeReference 的类属性 。如果类属性未设置或为空,那么 elementClasses.length 返回 0。虽然 element.classList 本身是只读的,但是你可以使用 add()remove() 方法修改它。

    示例

    @@ -62,7 +62,7 @@

    示例

    div.classList.replace("foo", "bar");
    -

    Firefox 26 以下的版本并未实现 add/remove/toggle 方法中的所有参数。参见 https://bugzilla.mozilla.org/show_bug.cgi?id=814014

    +

    Firefox 26 以下的版本并未实现 add/remove/toggle 方法中的所有参数。参见 https://bugzilla.mozilla.org/show_bug.cgi?id=814014

    Polyfill

    diff --git a/files/zh-cn/web/api/element/classname/index.html b/files/zh-cn/web/api/element/classname/index.html index 0a7eeefb0263ce..4172327eb62570 100644 --- a/files/zh-cn/web/api/element/classname/index.html +++ b/files/zh-cn/web/api/element/classname/index.html @@ -52,12 +52,12 @@

    规范

    {{SpecName("DOM WHATWG", "#dom-element-classname", "element.className")}} {{Spec2("DOM WHATWG")}} -   + {{SpecName("DOM4", "#dom-element-classname", "element.className")}} {{Spec2("DOM4")}} -   + {{SpecName("DOM2 HTML", "html.html#ID-95362176", "element.className")}} diff --git a/files/zh-cn/web/api/element/click_event/index.html b/files/zh-cn/web/api/element/click_event/index.html index bb8c0bc78a083c..0bedbce47e47a0 100644 --- a/files/zh-cn/web/api/element/click_event/index.html +++ b/files/zh-cn/web/api/element/click_event/index.html @@ -56,7 +56,7 @@

    属性

    view {{readonlyInline}} WindowProxy - document.defaultView (该文档的window 对象) + document.defaultView (该文档的window 对象) detail {{readonlyInline}} @@ -71,7 +71,7 @@

    属性

    relatedTarget {{readonlyInline}} EventTarget - 对于 mouseover, mouseout, mouseentermouseleave 事件:值为与其互补的事件 (比如mouseenter 就为mouseleave). 否则为null. + 对于 mouseover, mouseout, mouseentermouseleave 事件:值为与其互补的事件 (比如mouseenter 就为mouseleave). 否则为null. screenX {{readonlyInline}} @@ -155,7 +155,7 @@

    Internet Explorer

  • 仅对于 IE9:
    • 设置{{cssxref("background-color")}}: rgba(0,0,0,0)
    • -
    • 设置{{cssxref("opacity")}}: 0 并且明确指定{{cssxref("background-color")}}而不是transparent
    • +
    • 设置{{cssxref("opacity")}}: 0 并且明确指定{{cssxref("background-color")}}而不是transparent
  • 对于 IE8 和 IE9:设置filter: alpha(opacity=0);并且明确指定{{cssxref("background-color")}}而不是transparent
  • @@ -163,12 +163,12 @@

    Internet Explorer

    Safari 手机版

    -

    safari 手机版会有一个 bug,当点击事件不是绑定在交互式的元素上(比如说 HTML 的 div),并且也没有直接的事件监听器绑定在他们自身。可以戳 链接 查看演示。也可以看 Safari 的可点击元素 和 点击元素的定义.

    +

    safari 手机版会有一个 bug,当点击事件不是绑定在交互式的元素上(比如说 HTML 的 div),并且也没有直接的事件监听器绑定在他们自身。可以戳 链接 查看演示。也可以看 Safari 的可点击元素点击元素的定义.

    解决方法如下:

      -
    • 为其元素或者祖先元素,添加 cursor: pointer 的样式,使元素具有交互式点击
    • +
    • 为其元素或者祖先元素,添加 cursor: pointer 的样式,使元素具有交互式点击
    • 为需要交互式点击的元素添加onclick="void(0)"的属性,但并不包括 body 元素
    • 使用可点击元素如<a>,代替不可交互式元素如 div
    • 不使用 click 的事件委托。
    • diff --git a/files/zh-cn/web/api/element/clientheight/index.html b/files/zh-cn/web/api/element/clientheight/index.html index 64cfc80c6e2a33..1d1b688a3319c9 100644 --- a/files/zh-cn/web/api/element/clientheight/index.html +++ b/files/zh-cn/web/api/element/clientheight/index.html @@ -14,7 +14,7 @@

      备注: 此属性会将获取的值四舍五入取整数。 如果你需要小数结果,请使用 {{ domxref("element.getBoundingClientRect()") }}.

      -

      备注:上面的有问题 因为使用 element.getBoundingClientRect() 只能获取元素的 width / height,但是这个值是 offsetWidth / offsetHeight ,包括边框的长度,所以不能获取 clientWidth / clientHeight

      +

      备注:上面的有问题 因为使用 element.getBoundingClientRect() 只能获取元素的 width / height,但是这个值是 offsetWidth / offsetHeight ,包括边框的长度,所以不能获取 clientWidth / clientHeight

      语法

      @@ -22,7 +22,7 @@

      语法

      var h = element.clientHeight;
       
      -

      返回整数 h,表示 element 的 clientHeight(单位像素)。

      +

      返回整数 h,表示 elementclientHeight(单位像素)。

      clientHeight 是只读的。

      diff --git a/files/zh-cn/web/api/element/clientleft/index.html b/files/zh-cn/web/api/element/clientleft/index.html index 69d6e7075b143e..c575d83f2c8a68 100644 --- a/files/zh-cn/web/api/element/clientleft/index.html +++ b/files/zh-cn/web/api/element/clientleft/index.html @@ -5,18 +5,18 @@ ---

      {{ APIRef() }}

      -

      表示一个元素的左边框的宽度,以像素表示。如果元素的文本方向是从右向左(RTL, right-to-left),并且由于内容溢出导致左边出现了一个垂直滚动条,则该属性包括滚动条的宽度。clientLeft 不包括左外边距和左内边距。clientLeft 是只读的。

      +

      表示一个元素的左边框的宽度,以像素表示。如果元素的文本方向是从右向左(RTL, right-to-left),并且由于内容溢出导致左边出现了一个垂直滚动条,则该属性包括滚动条的宽度。clientLeft 不包括左外边距和左内边距。clientLeft 是只读的。

      -

      从 Gecko 1.9(Firefox 3 {{ Bug(111207) }})开始,基于 Gecko 的应用支持 clientLeft 属性。该属性在 Firefox 2 及更早的版本中不被支持。

      +

      Gecko 1.9(Firefox 3 {{ Bug(111207) }})开始,基于 Gecko 的应用支持 clientLeft 属性。该属性在 Firefox 2 及更早的版本中不被支持。

      -

      layout.scrollbar.side  preference (译注:这个属性好像是只在火狐浏览器中才有)被设为 1 或 3,且文本方向被设为从右到左(RTL),则垂直滚动条位于左边,这会影响到 clientLeft 属性值的计算。

      +

      layout.scrollbar.side preference (译注:这个属性好像是只在火狐浏览器中才有)被设为 1 或 3,且文本方向被设为从右到左(RTL),则垂直滚动条位于左边,这会影响到 clientLeft 属性值的计算。

      语法

      var left = element.clientLeft;
       
      -

      示例 

      +

      示例

      @@ -42,8 +42,8 @@

      Browser compatibility

      备注

      -

      clientLeft 首次出现于 MS IE DHTML 对象模型中。

      +

      clientLeft 首次出现于 MS IE DHTML 对象模型中。

      -

      元素的文本方向被设为从右到左后,其垂直滚动条的位置取决于 layout.scrollbar.side  preference

      +

      元素的文本方向被设为从右到左后,其垂直滚动条的位置取决于 layout.scrollbar.side preference

      当元素设置 display: inline 后,无论是否有边框,clientLeft 始终返回 0

      diff --git a/files/zh-cn/web/api/element/clienttop/index.html b/files/zh-cn/web/api/element/clienttop/index.html index 68573a52a1cdda..f36fa73174cb2f 100644 --- a/files/zh-cn/web/api/element/clienttop/index.html +++ b/files/zh-cn/web/api/element/clienttop/index.html @@ -9,9 +9,9 @@ ---

      {{ APIRef("DOM") }}

      -

      一个元素顶部边框的宽度(以像素表示)。不包括顶部外边距或内边距。clientTop 是只读的。

      +

      一个元素顶部边框的宽度(以像素表示)。不包括顶部外边距或内边距。clientTop 是只读的。

      -

      基于 Gecko 的应用从 Gecko 1.9(Firefox 3 {{ Bug(111207) }})开始支持 clientTop。该属性在 Firefox 2 或更早的版本中不被支持。

      +

      基于 Gecko 的应用从 Gecko 1.9(Firefox 3 {{ Bug(111207) }})开始支持 clientTop。该属性在 Firefox 2 或更早的版本中不被支持。

      语法

      @@ -27,7 +27,7 @@

      示例

      All Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.

      -

      Cat image and text coming from www.best-cat-art.com

      +

      Cat image and text coming from www.best-cat-art.com

      padding-bottom

      @@ -35,7 +35,7 @@

      示例

      备注

      -

      clientTop 首次出现于 MS IE DHTML 对象模型中。

      +

      clientTop 首次出现于 MS IE DHTML 对象模型中。

      相关链接

      diff --git a/files/zh-cn/web/api/element/closest/index.html b/files/zh-cn/web/api/element/closest/index.html index b1c95272c4b732..4273f896b2a2b9 100644 --- a/files/zh-cn/web/api/element/closest/index.html +++ b/files/zh-cn/web/api/element/closest/index.html @@ -114,7 +114,7 @@

      浏览器兼容性

      兼容性说明

        -
      • 当在 Edge 15-18 里使用 document.createElement(tagName).closest(tagName) ,如果元素不是第一个(直接地或间接地)连接到上下文对象的话将会返回 null ,例如在一般情况下 DOM 中的 Document 对象。
      • +
      • 当在 Edge 15-18 里使用 document.createElement(tagName).closest(tagName) ,如果元素不是第一个(直接地或间接地)连接到上下文对象的话将会返回 null ,例如在一般情况下 DOM 中的 Document 对象。

      相关链接

      diff --git a/files/zh-cn/web/api/element/compositionend_event/index.html b/files/zh-cn/web/api/element/compositionend_event/index.html index e94d822abd4e92..852356f8f951e6 100644 --- a/files/zh-cn/web/api/element/compositionend_event/index.html +++ b/files/zh-cn/web/api/element/compositionend_event/index.html @@ -71,7 +71,7 @@

      Properties

      0. - data {{ReadOnlyInline}} + data {{ReadOnlyInline}} {{domxref("DOMString")}} (string) 正在编辑的原始字符串,否则为空字符串。只读。 diff --git a/files/zh-cn/web/api/element/compositionstart_event/index.html b/files/zh-cn/web/api/element/compositionstart_event/index.html index c84ce8a5370840..cc5df34253b925 100644 --- a/files/zh-cn/web/api/element/compositionstart_event/index.html +++ b/files/zh-cn/web/api/element/compositionstart_event/index.html @@ -13,7 +13,7 @@ ---
      {{APIRef}}
      -

      文本合成系统如 {{glossary("input method editor")}}(即输入法编辑器)开始新的输入合成时会触发 compositionstart 事件。

      +

      文本合成系统如 {{glossary("input method editor")}}(即输入法编辑器)开始新的输入合成时会触发 compositionstart 事件。

      例如,当用户使用拼音输入法开始输入汉字时,这个事件就会被触发。

      diff --git a/files/zh-cn/web/api/element/compositionupdate_event/index.html b/files/zh-cn/web/api/element/compositionupdate_event/index.html index 7b31df7045c3bf..0990b7823c2e90 100644 --- a/files/zh-cn/web/api/element/compositionupdate_event/index.html +++ b/files/zh-cn/web/api/element/compositionupdate_event/index.html @@ -4,7 +4,7 @@ translation_of: Web/API/Element/compositionupdate_event original_slug: Web/Events/compositionupdate --- -

      compositionupdate 事件触发于字符被输入到一段文字的时候(这些可见字符的输入可能需要一连串的键盘操作、语音识别或者点击输入法的备选词)

      +

      compositionupdate 事件触发于字符被输入到一段文字的时候(这些可见字符的输入可能需要一连串的键盘操作、语音识别或者点击输入法的备选词)

      @@ -69,13 +69,13 @@

      属性

      - + - - + + diff --git a/files/zh-cn/web/api/element/contextmenu_event/index.html b/files/zh-cn/web/api/element/contextmenu_event/index.html index b16c0fc6b78f2f..790fd898594d89 100644 --- a/files/zh-cn/web/api/element/contextmenu_event/index.html +++ b/files/zh-cn/web/api/element/contextmenu_event/index.html @@ -17,9 +17,9 @@ ---
      {{APIRef}}
      -

      contextmenu 事件会在用户尝试打开上下文菜单时被触发。该事件通常在鼠标点击右键或者按下键盘上的菜单键时被触发,如果使用菜单键,该上下文菜单会被展示 到所聚焦元素的左下角,但是如果该元素是一棵 DOM 树的话,上下文菜单便会展示在当前这一行的左下角。

      +

      contextmenu 事件会在用户尝试打开上下文菜单时被触发。该事件通常在鼠标点击右键或者按下键盘上的菜单键时被触发,如果使用菜单键,该上下文菜单会被展示 到所聚焦元素的左下角,但是如果该元素是一棵 DOM 树的话,上下文菜单便会展示在当前这一行的左下角。

      -

      任何没有被禁用的鼠标右击事件 (通过调用事件的 {{domxref("Event.preventDefault", "preventDefault()")}} 方法) 将会使得 contextmenu 事件在目标元素上被触发。

      +

      任何没有被禁用的鼠标右击事件 (通过调用事件的 {{domxref("Event.preventDefault", "preventDefault()")}} 方法) 将会使得 contextmenu 事件在目标元素上被触发。

      0.
      data {{ReadOnlyInline}}data {{ReadOnlyInline}} {{domxref("DOMString")}} (string) 要被替换掉的字符串,如果输入时没有字符串被选,则为空字符串。只读。
      locale {{ReadOnlyInline}}{{domxref("DOMString")}} (string)locale {{ReadOnlyInline}}{{domxref("DOMString")}} (string) 输入事件的语言代号,或者空字符串。只读。
      @@ -44,7 +44,7 @@

      示例

      -

      在下面的例子中,第一段内容被触发的 contextmenu 事件的默认行为被 preventDefault() 取消了,因此,在第一段右击鼠标时什么也不会发生,但是右键单击第二段内容时,则会出现标准的菜单内容,与平时右击普通页面出现的菜单内容一致。

      +

      在下面的例子中,第一段内容被触发的 contextmenu 事件的默认行为被 preventDefault() 取消了,因此,在第一段右击鼠标时什么也不会发生,但是右键单击第二段内容时,则会出现标准的菜单内容,与平时右击普通页面出现的菜单内容一致。

      HTML

      diff --git a/files/zh-cn/web/api/element/copy_event/index.html b/files/zh-cn/web/api/element/copy_event/index.html index 1f0f52ccb00f87..ecb9229ea1538a 100644 --- a/files/zh-cn/web/api/element/copy_event/index.html +++ b/files/zh-cn/web/api/element/copy_event/index.html @@ -8,7 +8,7 @@ translation_of: Web/API/Element/copy_event original_slug: Web/Events/copy --- -

      当用户通过浏览器 UI(例如,使用 Ctrl/+C  键盘快捷方式或从菜单中选择“复制”)启动复制操作并响应允许的{{domxref("Document.execCommand","document.execCommand('copy')")}}调用时触发copy事件。

      +

      当用户通过浏览器 UI(例如,使用 Ctrl/+C 键盘快捷方式或从菜单中选择“复制”)启动复制操作并响应允许的{{domxref("Document.execCommand","document.execCommand('copy')")}}调用时触发copy事件。

      基本信息

      diff --git a/files/zh-cn/web/api/element/dblclick_event/index.html b/files/zh-cn/web/api/element/dblclick_event/index.html index d4e75fddbe72b8..ffb4d318eb5dd4 100644 --- a/files/zh-cn/web/api/element/dblclick_event/index.html +++ b/files/zh-cn/web/api/element/dblclick_event/index.html @@ -21,7 +21,7 @@

      常规信息

      目标对象
      元素(Element)
      默认行为
      -
      多种:开始 drag/drop 操作;开始文本选择、开始滚动或移动操作(若支持该操作时,可与鼠标中键协同) 
      +
      多种:开始 drag/drop 操作;开始文本选择、开始滚动或移动操作(若支持该操作时,可与鼠标中键协同)

      属性

      @@ -58,7 +58,7 @@

      属性

      - + @@ -73,7 +73,7 @@

      属性

      - + diff --git a/files/zh-cn/web/api/element/domactivate_event/index.html b/files/zh-cn/web/api/element/domactivate_event/index.html index a25bbd344c0903..0c1b7efd3825ba 100644 --- a/files/zh-cn/web/api/element/domactivate_event/index.html +++ b/files/zh-cn/web/api/element/domactivate_event/index.html @@ -14,7 +14,7 @@

      当元素被激活时发生,例如点击鼠标或键盘按键。

      -

      当元素被激活,如使用鼠标点击或使用键盘导航并激活至这个元素时, DOMActivate 事件被触发。

      +

      当元素被激活,如使用鼠标点击或使用键盘导航并激活至这个元素时, DOMActivate 事件被触发。

      view {{readonlyInline}} WindowProxydocument.defaultView (该文档的window 对象)document.defaultView (该文档的window 对象)
      detail {{readonlyInline}}
      relatedTarget {{readonlyInline}} EventTarget对于 mouseover, mouseout, mouseentermouseleave 事件:值为与其互补的事件 (比如mouseenter 就为mouseleave). 否则为null.对于 mouseover, mouseout, mouseentermouseleave 事件:值为与其互补的事件 (比如mouseenter 就为mouseleave). 否则为null.
      screenX {{readonlyInline}}
      diff --git a/files/zh-cn/web/api/element/firstelementchild/index.html b/files/zh-cn/web/api/element/firstelementchild/index.html index 6b68867d474af2..2b2ec57759cb2a 100644 --- a/files/zh-cn/web/api/element/firstelementchild/index.html +++ b/files/zh-cn/web/api/element/firstelementchild/index.html @@ -11,7 +11,7 @@ ---

      {{ APIRef("DOM") }}

      -

      Element.firstElementChild 只读属性,返回对象的第一个子 {{domxref("元素")}}, 如果没有子元素,则为 null。

      +

      Element.firstElementChild 只读属性,返回对象的第一个子 {{domxref("元素")}}, 如果没有子元素,则为 null。

      他的属性最初是在{{domxref("element 遍历")}}纯接口中定义的。由于这个接口包含两组不同的属性,一个针对具有子元素的{{domxref("Node")}},一个针对子元素的属性,因此它们被移动到两个单独的纯接口中,{{domxref("Element")}}和{{domxref("ChildNode")}}。在本例中,firstElementChild 移动到{{domxref("Element")}}。这是一个相当技术性的更改,不应该影响兼容性。

      diff --git a/files/zh-cn/web/api/element/focus_event/index.html b/files/zh-cn/web/api/element/focus_event/index.html index 93d24c539d0b4d..1355356391d252 100644 --- a/files/zh-cn/web/api/element/focus_event/index.html +++ b/files/zh-cn/web/api/element/focus_event/index.html @@ -4,7 +4,7 @@ translation_of: Web/API/Element/focus_event original_slug: Web/Events/focus --- -

      focus 事件在元素获取焦点时触发。这个事件和 focusin 最大的区别仅仅在于后者会事件冒泡。

      +

      focus 事件在元素获取焦点时触发。这个事件和 focusin 最大的区别仅仅在于后者会事件冒泡。

      基本信息

      @@ -23,7 +23,7 @@

      基本信息

      无。
      -
      注释:这里的接口是指 {{ domxref("Event") }} prior to Gecko 24 {{ geckoRelease(24) }}. ({{ bug(855741) }})
      +
      注释:这里的接口是指 {{ domxref("Event") }} prior to Gecko 24 {{ geckoRelease(24) }}. ({{ bug(855741) }})

      属性

      @@ -66,7 +66,7 @@

      属性

      事件委托

      -

      此事件有两个可以实现事件委托的方法 : 通过在支持的浏览器上使用 focusin 事件 (除了 Firefox 之外的所有浏览器), 或者通过设置 addEventListener 的参数"useCapture" 值为 true:

      +

      此事件有两个可以实现事件委托的方法 : 通过在支持的浏览器上使用 focusin 事件 (除了 Firefox 之外的所有浏览器), 或者通过设置 addEventListener 的参数"useCapture" 值为 true:

      {{ EmbedLiveSample('Event_delegation', '', '', '', 'Web/Events/blur') }}

      diff --git a/files/zh-cn/web/api/element/focusout_event/index.html b/files/zh-cn/web/api/element/focusout_event/index.html index b783f830199903..16254ff6458730 100644 --- a/files/zh-cn/web/api/element/focusout_event/index.html +++ b/files/zh-cn/web/api/element/focusout_event/index.html @@ -4,7 +4,7 @@ translation_of: Web/API/Element/focusout_event original_slug: Web/Events/focusout --- -

      当元素即将失去焦点时,focusout 事件被触发。focusout 事件和 blur 事件之间的主要区别在于后者不会冒泡。

      +

      当元素即将失去焦点时,focusout 事件被触发。focusout 事件和 blur 事件之间的主要区别在于后者不会冒泡。

      基本信息

      diff --git a/files/zh-cn/web/api/element/fullscreenchange_event/index.html b/files/zh-cn/web/api/element/fullscreenchange_event/index.html index 7d1487ab51a950..38a8baa81bcc57 100644 --- a/files/zh-cn/web/api/element/fullscreenchange_event/index.html +++ b/files/zh-cn/web/api/element/fullscreenchange_event/index.html @@ -4,7 +4,7 @@ translation_of: Web/API/Element/onfullscreenchange original_slug: Web/API/Element/onfullscreenchange --- -
      元素接口的 onfullscreenchange 属性是在元素过渡到或过渡到全屏模式时触发的全屏更改事件的事件处理程序。
      +
      元素接口的 onfullscreenchange 属性是在元素过渡到或过渡到全屏模式时触发的全屏更改事件的事件处理程序。

      语法

      @@ -13,11 +13,11 @@

      语法

      -

      当事件处理程序处于 fullscreenchange 模式的时候,表明游戏元素被改变了或者是退出了全屏模式

      +

      当事件处理程序处于 fullscreenchange 模式的时候,表明游戏元素被改变了或者是退出了全屏模式

      Example

      -

      本示例建立一个fullscreenchange 处理程序,handleFullscreenChange ()。此函数通过检查 event.target 的值来确定调用它的元素,然后将文档的fullscreenElement 值与元素进行比较,以查看它们是否为同一节点。

      +

      本示例建立一个fullscreenchange 处理程序,handleFullscreenChange ()。此函数通过检查 event.target 的值来确定调用它的元素,然后将文档的fullscreenElement 值与元素进行比较,以查看它们是否为同一节点。

      这给了我们一个值,即 isFullscreen, 我们将其传递到一个名为 adjustMyControls() 的函数,我们想象它是一个函数,可以对应用的用户界面进行调整,以便在全屏模式下而不是在窗口。

      @@ -57,5 +57,5 @@

      参见

    • Guide to the Fullscreen API
    • fullscreenchange
    • Element.onfullscreenerror
    • -
    • The Document equivalent: onfullscreenchange.
    • +
    • The Document equivalent: onfullscreenchange.
    • diff --git a/files/zh-cn/web/api/element/fullscreenerror_event/index.html b/files/zh-cn/web/api/element/fullscreenerror_event/index.html index 424c12e06eeb41..71f7b5e5d3e358 100644 --- a/files/zh-cn/web/api/element/fullscreenerror_event/index.html +++ b/files/zh-cn/web/api/element/fullscreenerror_event/index.html @@ -6,7 +6,7 @@ ---
      {{ApiRef("Fullscreen API")}}
      -

      {{domxref("Element")}} 接口的 onfullscreenerror 属性是在{{domxref("Element")}} 过渡到或退出全屏模式发生错误后处理事件{{event("fullscreenerror")}}的事件处理程序。

      +

      {{domxref("Element")}} 接口的 onfullscreenerror 属性是在{{domxref("Element")}} 过渡到或退出全屏模式发生错误后处理事件{{event("fullscreenerror")}}的事件处理程序。

      语法

      diff --git a/files/zh-cn/web/api/element/getattribute/index.html b/files/zh-cn/web/api/element/getattribute/index.html index 647664ba73173a..93c16f61af8b11 100644 --- a/files/zh-cn/web/api/element/getattribute/index.html +++ b/files/zh-cn/web/api/element/getattribute/index.html @@ -9,7 +9,7 @@

      概要

      -

      getAttribute() 返回元素上一个指定的属性值。如果指定的属性不存在,则返回  null 或 "" (空字符串);具体细节,请参阅  Notes 部分。

      +

      getAttribute() 返回元素上一个指定的属性值。如果指定的属性不存在,则返回 null"" (空字符串);具体细节,请参阅 Notes 部分。

      语法

      @@ -19,8 +19,8 @@

      语法

      上面:

        -
      • attribute 是一个包含 attributeName 属性值的字符串。
      • -
      • attributeName 是你想要获取的属性值的属性名称。
      • +
      • attribute 是一个包含 attributeName 属性值的字符串。
      • +
      • attributeName 是你想要获取的属性值的属性名称。

      例子

      @@ -33,9 +33,9 @@

      例子

      备注

      -

      当在被标记为 HTML 文档中的一个 HTML 元素上调用此方法时,getAttribute() 会先将其参数转换为小写形式。

      +

      当在被标记为 HTML 文档中的一个 HTML 元素上调用此方法时,getAttribute() 会先将其参数转换为小写形式。

      -

      当指定的属性不存在于元素上时,所有浏览器(Firefox、Internet Explorer、Opera 最新版本、Safari、Konqueror 以及 iCab 等等)都返回 null,这也是当前 DOM 规范草案规定的。然而,旧的 DOM 3 Core specification 认为此时正确的返回值应该是一个空字符串,一些 DOM 实现环境实现了该行为(behavior)。在 XUL (Gecko) 中,getAttribute 的实现遵从 DOM 3 Core specification,返回一个空字符串。因此,如果一个属性可能不存在于指定的元素上,在调用 getAttribute() 之前,你应该使用 {{domxref("element.hasAttribute()")}} 来检测该属性是否存在。

      +

      当指定的属性不存在于元素上时,所有浏览器(Firefox、Internet Explorer、Opera 最新版本、Safari、Konqueror 以及 iCab 等等)都返回 null,这也是当前 DOM 规范草案规定的。然而,旧的 DOM 3 Core specification 认为此时正确的返回值应该是一个空字符串,一些 DOM 实现环境实现了该行为(behavior)。在 XUL (Gecko) 中,getAttribute 的实现遵从 DOM 3 Core specification,返回一个空字符串。因此,如果一个属性可能不存在于指定的元素上,在调用 getAttribute() 之前,你应该使用 {{domxref("element.hasAttribute()")}} 来检测该属性是否存在。

      浏览器兼容性

      diff --git a/files/zh-cn/web/api/element/getattributenames/index.html b/files/zh-cn/web/api/element/getattributenames/index.html index d8daac74d7e7af..302b29f22abe24 100644 --- a/files/zh-cn/web/api/element/getattributenames/index.html +++ b/files/zh-cn/web/api/element/getattributenames/index.html @@ -7,9 +7,9 @@ ---

      {{APIRef("DOM")}}

      -

      Element.getAttributeNames() 返回一个{{jsxref("Array")}},该数组包含指定元素(Element)的所有属性名称,如果该元素不包含任何属性,则返回一个空数组。

      +

      Element.getAttributeNames() 返回一个{{jsxref("Array")}},该数组包含指定元素(Element)的所有属性名称,如果该元素不包含任何属性,则返回一个空数组。

      -

      将 getAttributeNames() 与 {{domxref("Element.getAttribute","getAttribute()")}} 组合使用, 是一种有效替代 {{domxref("Element.attributes")}} 的使用方法。

      +

      getAttributeNames() 与 {{domxref("Element.getAttribute","getAttribute()")}} 组合使用, 是一种有效替代 {{domxref("Element.attributes")}} 的使用方法。

      语法

      diff --git a/files/zh-cn/web/api/element/getattributenode/index.html b/files/zh-cn/web/api/element/getattributenode/index.html index 8d54bb4845d880..268c5e9f2810d7 100644 --- a/files/zh-cn/web/api/element/getattributenode/index.html +++ b/files/zh-cn/web/api/element/getattributenode/index.html @@ -18,7 +18,7 @@

      语法

        -
      • attrNode  获得的属性返回值,是 Attr 节点, nodeType 为 2
      • +
      • attrNode 获得的属性返回值,是 Attr 节点, nodeType 为 2
      • attrName 是一个包含属性名称的 字符串
      @@ -36,7 +36,7 @@

      注意

      Attr 节点继承自 Node,但不被认为是文档树的一部分。Node 上定义的常用属性,如 parentNode, previousSibling,和 nextSibling 对于 Attr 节点来说都为 null。然而,你可以使用 ownerElement 来得到拥有这个属性的元素。

      -

      getAttribute 通常用于替换 getAttributeNode 方法,来获得元素的属性值。性能也更快.  性能对比是 element.id 大于 element.getAttribute('id') 大于 element.getAttributeNode('id').nodeValue.

      +

      getAttribute 通常用于替换 getAttributeNode 方法,来获得元素的属性值。性能也更快. 性能对比是 element.id 大于 element.getAttribute('id') 大于 element.getAttributeNode('id').nodeValue.

      {{ DOMAttributeMethods() }}

      diff --git a/files/zh-cn/web/api/element/getattributenodens/index.html b/files/zh-cn/web/api/element/getattributenodens/index.html index 33c83787134aa2..ad2ee5fc973166 100644 --- a/files/zh-cn/web/api/element/getattributenodens/index.html +++ b/files/zh-cn/web/api/element/getattributenodens/index.html @@ -18,8 +18,8 @@

      语法

        -
      • attributeNode 获取的属性节点。
      • -
      • namespace 命名空间字符串
      • +
      • attributeNode 获取的属性节点。
      • +
      • namespace 命名空间字符串
      • nodeName 属性节点的名称。
      @@ -27,7 +27,7 @@

      语法

      笔记

      -

      getAttributeNodeNS 相比 getAttributeNode 更加具体,允许你在特定的命名空间里获取属性。对应的 setter 方法是 setAttributeNodeNS.

      +

      getAttributeNodeNS 相比 getAttributeNode 更加具体,允许你在特定的命名空间里获取属性。对应的 setter 方法是 setAttributeNodeNS.

      {{ DOMAttributeMethods() }}

      diff --git a/files/zh-cn/web/api/element/getelementsbyclassname/index.html b/files/zh-cn/web/api/element/getelementsbyclassname/index.html index 274b5d369836c4..3e01f255630ac5 100644 --- a/files/zh-cn/web/api/element/getelementsbyclassname/index.html +++ b/files/zh-cn/web/api/element/getelementsbyclassname/index.html @@ -4,19 +4,19 @@ translation_of: Web/API/Element/getElementsByClassName ---

      {{APIRef}}

      -

      Element.getElementsByClassName() 方法返回一个即时更新的(live){{domxref("HTMLCollection")}},包含了所有拥有指定 class 的子元素。当在 document 对象上调用此方法时,会检索整个文档,包括根元素。

      +

      Element.getElementsByClassName() 方法返回一个即时更新的(live){{domxref("HTMLCollection")}},包含了所有拥有指定 class 的子元素。当在 document 对象上调用此方法时,会检索整个文档,包括根元素。

      相似地,{{domxref("Document.getElementsByClassName", "getElementsByClassName()")}} 方法会在整个文档上执行;它返回指定拥有指定 class 名称的 document 根节点的后代元素。

      语法

      var elements = element.getElementsByClassName(names);
        -
      • elements 是一个即时更新的(live){{ domxref("HTMLCollection") }}。
      • -
      • names 是一个字符串,表示要匹配的类名(class names)列表;类名被空白符分隔。
      • -
      • element 是文档中的任一 {{domxref("Element")}}。
      • +
      • elements 是一个即时更新的(live){{ domxref("HTMLCollection") }}。
      • +
      • names 是一个字符串,表示要匹配的类名(class names)列表;类名被空白符分隔。
      • +
      • element 是文档中的任一 {{domxref("Element")}}。

      例子

      获取所有包含 class 名称为 test 的元素:

      element.getElementsByClassName('test');
      -

      获取所有包含 redtest class 名的元素:

      +

      获取所有包含 redtest class 名的元素:

      element.getElementsByClassName('red test');

      获取 idmain 的元素的所有包含一个 test class 名的后代元素:

      document.getElementById('main').getElementsByClassName('test');
      diff --git a/files/zh-cn/web/api/element/getelementsbytagname/index.html b/files/zh-cn/web/api/element/getelementsbytagname/index.html index 155901cb82c9a8..8715994b3911e9 100644 --- a/files/zh-cn/web/api/element/getelementsbytagname/index.html +++ b/files/zh-cn/web/api/element/getelementsbytagname/index.html @@ -9,9 +9,9 @@ ---

      {{ APIRef("DOM") }}

      -

      Element.getElementsByTagName() 方法返回一个动态的包含所有指定标签名的元素的 HTML 集合{{domxref("HTMLCollection")}}。指定的元素的子树会被搜索,不包括元素自己。返回的列表是动态的,这意味着它会随着 DOM 树的变化自动更新自身。所以,使用相同元素和相同参数时,没有必要多次的调用Element.getElementsByTagName() .

      +

      Element.getElementsByTagName() 方法返回一个动态的包含所有指定标签名的元素的 HTML 集合{{domxref("HTMLCollection")}}。指定的元素的子树会被搜索,不包括元素自己。返回的列表是动态的,这意味着它会随着 DOM 树的变化自动更新自身。所以,使用相同元素和相同参数时,没有必要多次的调用Element.getElementsByTagName() .

      -

      如果是 HTML 文档中的某个元素调用了getElementsByTagName 函数, 运行前会将参数转为小写字母形式。故不建议在驼峰式命名的 SVG 元素中使用。 {{ domxref("Element.getElementsByTagNameNS()") }} 适用于那种情况。

      +

      如果是 HTML 文档中的某个元素调用了getElementsByTagName 函数, 运行前会将参数转为小写字母形式。故不建议在驼峰式命名的 SVG 元素中使用。 {{ domxref("Element.getElementsByTagNameNS()") }} 适用于那种情况。

      Element.getElementsByTagName 和 {{domxref("Document.getElementsByTagName()")}}类似,除了它的搜索被限制为指定元素的后代。

      @@ -22,7 +22,7 @@

      语法

      • elements 搜索到的元素的动态 HTML 集合{{domxref("HTMLCollection")}},它们的顺序是在子树中出现的顺序。 如果没有搜索到元素则这个集合为空。
      • element 搜索从 element 开始。请注意只有 element 的后代元素会被搜索,不包括元素自己。
      • -
      • tagName 要查找的限定名。 字符 "*" 代表所有元素。 考虑到兼容 XHTML,应该使用小写。
      • +
      • tagName 要查找的限定名。 字符 "*" 代表所有元素。 考虑到兼容 XHTML,应该使用小写。

      实例

      diff --git a/files/zh-cn/web/api/element/getelementsbytagnamens/index.html b/files/zh-cn/web/api/element/getelementsbytagnamens/index.html index 560c39d9e12cc6..8a3611c963c833 100644 --- a/files/zh-cn/web/api/element/getelementsbytagnamens/index.html +++ b/files/zh-cn/web/api/element/getelementsbytagnamens/index.html @@ -5,17 +5,17 @@ ---
      {{APIRef("DOM")}}
      -

      Element.getElementsByTagNameNS() 方法返回在指定命名空间内带有指定名称的动态 HTML 元素集合(而不是快照),搜索范围限定于指定元素的后代,类似于{{Domxref("Document.getElementsByTagNameNS")}}。

      +

      Element.getElementsByTagNameNS() 方法返回在指定命名空间内带有指定名称的动态 HTML 元素集合(而不是快照),搜索范围限定于指定元素的后代,类似于{{Domxref("Document.getElementsByTagNameNS")}}。

      语法

      elements = element.getElementsByTagNameNS(namespaceURI, localName)
        -
      • elements 是匹配元素的动态 HTML 元素集合{{domxref("HTMLCollection")}},其顺序为遍历树时匹配元素出现的先后。
      • -
      • element 是查找的起始结点,查找范围为该元素的后代,并且不包含该元素自身。
      • -
      • namespaceURI 是所要查询的元素的命名空间 URL (参考 {{domxref("Node.namespaceURI")}}). 举个例子,如果你想查找的是 XHTML 元素,你应该使用 XHTML 的命名空间 URL,http://www.w3.org/1999/xhtml。
      • -
      • localName 是所要查询的元素的名称。其中特殊字符 "*" 代表所有元素 (参考 {{domxref("Node.localName")}}).
      • +
      • elements 是匹配元素的动态 HTML 元素集合{{domxref("HTMLCollection")}},其顺序为遍历树时匹配元素出现的先后。
      • +
      • element 是查找的起始结点,查找范围为该元素的后代,并且不包含该元素自身。
      • +
      • namespaceURI 是所要查询的元素的命名空间 URL (参考 {{domxref("Node.namespaceURI")}}). 举个例子,如果你想查找的是 XHTML 元素,你应该使用 XHTML 的命名空间 URL,http://www.w3.org/1999/xhtml。
      • +
      • localName 是所要查询的元素的名称。其中特殊字符 "*" 代表所有元素 (参考 {{domxref("Node.localName")}}).

      示例

      diff --git a/files/zh-cn/web/api/element/hasattribute/index.html b/files/zh-cn/web/api/element/hasattribute/index.html index 430feb2cd71ea7..be51a797e6da24 100644 --- a/files/zh-cn/web/api/element/hasattribute/index.html +++ b/files/zh-cn/web/api/element/hasattribute/index.html @@ -6,13 +6,13 @@
      {{APIRef}}

      概述

      -

      hasAttribute 返回一个布尔值,指示该元素是否包含有指定的属性(attribute)。

      +

      hasAttribute 返回一个布尔值,指示该元素是否包含有指定的属性(attribute)。

      语法

      var result = element.hasAttribute(attName);
       
        -
      • result 为返回的布尔值:true 或 false
      • -
      • attName 是一个字符串,表示属性的名称。
      • +
      • result 为返回的布尔值:truefalse
      • +
      • attName 是一个字符串,表示属性的名称。

      例子

      // 在为属性设置新值前检测该属性是否存在
      diff --git a/files/zh-cn/web/api/element/hasattributens/index.html b/files/zh-cn/web/api/element/hasattributens/index.html
      index 62db47d929e7e4..a53d60bc4bf42a 100644
      --- a/files/zh-cn/web/api/element/hasattributens/index.html
      +++ b/files/zh-cn/web/api/element/hasattributens/index.html
      @@ -20,7 +20,7 @@ 

      语法

        -
      • result 为返回的布尔值:true 或 false
      • +
      • result 为返回的布尔值:truefalse
      • namespace 是一个字符串,表示属性的命名空间。
      • localName 是一个字符串,表示属性的名称。
      diff --git a/files/zh-cn/web/api/element/id/index.html b/files/zh-cn/web/api/element/id/index.html index 75aecdd9dc9ea5..9ad73582df8890 100644 --- a/files/zh-cn/web/api/element/id/index.html +++ b/files/zh-cn/web/api/element/id/index.html @@ -15,10 +15,10 @@

      同一文档中,若 id 的值不是空字符串 "",便必须是独特的;也就是说,不同元素的 ID 必须是不同的。

      -

      这有助于让常用的 {{domxref("document.getElementById", "getElementById")}} 方法通过 id 的值找到对应的单个元素。另外,在 CSS 中,ID 可作为选择器使用,详见:ID 选择器

      +

      这有助于让常用的 {{domxref("document.getElementById", "getElementById")}} 方法通过 id 的值找到对应的单个元素。另外,在 CSS 中,ID 可作为选择器使用,详见:ID 选择器

      -

      注意:虽然 ID 是区分大小写的,但是不应该同时使用仅大小写有不同的 ID  值。

      +

      注意:虽然 ID 是区分大小写的,但是不应该同时使用仅大小写有不同的 ID 值。

      语法

      diff --git a/files/zh-cn/web/api/element/index.html b/files/zh-cn/web/api/element/index.html index fbdf4aeaaf35ba..f1240a11ae1013 100644 --- a/files/zh-cn/web/api/element/index.html +++ b/files/zh-cn/web/api/element/index.html @@ -270,7 +270,7 @@

      Composition events

      Fired when a new character is received in the context of a text composition session controlled by a text composition system such as an {{glossary("input method editor")}}.
      -

      Focus events

      +

      Focus events

      {{DOMxRef("Element/blur_event", "blur")}}
      @@ -285,7 +285,7 @@

      Focus events

      Fired when an element is about to lose focus.
      -

      Fullscreen events

      +

      Fullscreen events

      {{DOMxRef("Element/fullscreenchange_event", "fullscreenchange")}}
      @@ -358,7 +358,7 @@

      鼠标事件

      Fired after the {{DOMxRef("Element/webkitmouseforcedown_event", "webkitmouseforcedown")}} event as soon as the pressure has been reduced sufficiently to end the "force click".
      -

      Touch events

      +

      Touch events

      {{DOMxRef("Element/touchcancel_event", "touchcancel")}}
      diff --git a/files/zh-cn/web/api/element/innerhtml/index.html b/files/zh-cn/web/api/element/innerhtml/index.html index be3de951e16efd..7e94c5e34b2522 100644 --- a/files/zh-cn/web/api/element/innerhtml/index.html +++ b/files/zh-cn/web/api/element/innerhtml/index.html @@ -11,10 +11,10 @@

      Element.innerHTML 属性设置或获取 HTML 语法表示的元素的后代。

      -

      Note: 如果一个 {{HTMLElement("div")}}, {{HTMLElement("span")}}, 或 {{HTMLElement("noembed")}} 节点有一个文本子节点,该节点包含字符 (&), (<),  或(>)innerHTML 将这些字符分别返回为&amp;, &lt; 和 &gt; 。使用{{domxref("Node.textContent")}}  可获取一个这些文本节点内容的正确副本。

      +

      Note: 如果一个 {{HTMLElement("div")}}, {{HTMLElement("span")}}, 或 {{HTMLElement("noembed")}} 节点有一个文本子节点,该节点包含字符 (&), (<),(>), innerHTML 将这些字符分别返回为&amp;, &lt; 和 &gt; 。使用{{domxref("Node.textContent")}} 可获取一个这些文本节点内容的正确副本。

      -

      如果要向一个元素中插入一段 HTML,而不是替换它的内容,那么请使用 {{domxref("Element.insertAdjacentHTML", "insertAdjacentHTML()")}} 方法。

      +

      如果要向一个元素中插入一段 HTML,而不是替换它的内容,那么请使用 {{domxref("Element.insertAdjacentHTML", "insertAdjacentHTML()")}} 方法。

      语法

      @@ -24,25 +24,25 @@

      语法

      -

      {{domxref("DOMString")}} 包含元素后代的 HTML 序列。设置元素的 innerHTML 将会删除所有该元素的后代并以上面给出的 htmlString 替代。

      +

      {{domxref("DOMString")}} 包含元素后代的 HTML 序列。设置元素的 innerHTML 将会删除所有该元素的后代并以上面给出的 htmlString 替代。

      例外

      -

      SyntaxError 

      +

      SyntaxError

      -

      当 HTML 没有被正确标记时,设置 innerHTML 将会抛出语法错误。

      +

      当 HTML 没有被正确标记时,设置 innerHTML 将会抛出语法错误。

      -

      NoModificationAllowedError 

      +

      NoModificationAllowedError

      -

      当父元素是 {{domxref("Document")}} 时,设置 innerHTML 将会提示不允许修改。

      +

      当父元素是 {{domxref("Document")}} 时,设置 innerHTML 将会提示不允许修改。

      使用说明

      -

      innerHTML 属性可以用来检查当前页面自最初加载到当前的 HTML 源码的变化。

      +

      innerHTML 属性可以用来检查当前页面自最初加载到当前的 HTML 源码的变化。

      获取元素的 HTML

      -

      获取 innerHTML 会导致用户代理序列化 由元素后代组成的 HTML 或者 XML 。返回结果字符串。

      +

      获取 innerHTML 会导致用户代理序列化 由元素后代组成的 HTML 或者 XML 。返回结果字符串。

      let contents = myElement.innerHTML;
       
      @@ -55,33 +55,33 @@

      获取元素的 HTML

      替换元素的内容

      -

      设置 innerHTML 的值可以让你轻松地将当前元素的内容替换为新的内容。

      +

      设置 innerHTML 的值可以让你轻松地将当前元素的内容替换为新的内容。

      -

      举个例子来说,你可以通过文档 {{domxref("Document.body", "body")}}  属性删除 body 的全部内容。

      +

      举个例子来说,你可以通过文档 {{domxref("Document.body", "body")}} 属性删除 body 的全部内容。

      document.body.innerHTML = "";
       
      -

      下面这个例子,首先获取文档当前的 HTML 标记并替换 "<" 字符为 HTML 实体 "&lt;",从本质上来看,它是将 HTML 转换成原始文本,将其包裹在 {{HTMLElement("pre")}} 元素中。然后 innerHTML 的值被替换成新的字符串。最后,文档的内容被替换为页面显示源码。

      +

      下面这个例子,首先获取文档当前的 HTML 标记并替换 "<" 字符为 HTML 实体 "&lt;",从本质上来看,它是将 HTML 转换成原始文本,将其包裹在 {{HTMLElement("pre")}} 元素中。然后 innerHTML 的值被替换成新的字符串。最后,文档的内容被替换为页面显示源码。

      document.documentElement.innerHTML = "<pre>" +
      -         document.documentElement.innerHTML.replace(/</g,"&lt;") +
      +         document.documentElement.innerHTML.replace(/</g,"&lt;") +
                   "</pre>";
       

      其他:

      -

      当给 innerHTML 设置一个值的时候到底发生了什么?用户代理按照以下步骤:

      +

      当给 innerHTML 设置一个值的时候到底发生了什么?用户代理按照以下步骤:

        -
      1. 给定的值被解析为 HTML 或者 XML(取决于文档类型),结果就是 {{domxref("DocumentFragment")}} 对象代表元素新设置的 DOM 节点。
      2. -
      3. 如果元素内容被替换成 {{HTMLElement("template")}}  元素,<template> 元素的 {{domxref("HTMLTemplateElement.content", "content")}} 属性会被替换为步骤 1 中创建的新的 DocumentFragment
      4. -
      5. 对于其他所有元素,元素的内容都被替换为新的 DocumentFragment节点。
      6. +
      7. 给定的值被解析为 HTML 或者 XML(取决于文档类型),结果就是 {{domxref("DocumentFragment")}} 对象代表元素新设置的 DOM 节点。
      8. +
      9. 如果元素内容被替换成 {{HTMLElement("template")}} 元素,<template> 元素的 {{domxref("HTMLTemplateElement.content", "content")}} 属性会被替换为步骤 1 中创建的新的 DocumentFragment
      10. +
      11. 对于其他所有元素,元素的内容都被替换为新的 DocumentFragment节点。

      安全问题

      -

      用 innerHTML 插入文本到网页中并不罕见。但这有可能成为网站攻击的媒介,从而产生潜在的安全风险问题。

      +

      innerHTML 插入文本到网页中并不罕见。但这有可能成为网站攻击的媒介,从而产生潜在的安全风险问题。

      const name = "John";
       // assuming 'el' is an HTML DOM element
      @@ -93,23 +93,23 @@ 

      安全问题

      el.innerHTML = name; // harmless in this case
      -

      尽管这看上去像 {{interwiki("wikipedia", "cross-site scripting")}} 攻击,结果并不会导致什么。HTML 5 中指定不执行由 innerHTML 插入的 {{HTMLElement("script")}} 标签。

      +

      尽管这看上去像 {{interwiki("wikipedia", "cross-site scripting")}} 攻击,结果并不会导致什么。HTML 5 中指定不执行由 innerHTML 插入的 {{HTMLElement("script")}} 标签。

      -

      然而,有很多不依赖 {{HTMLElement("script")}} 标签去执行 JavaScript 的方式。所以当你使用innerHTML 去设置你无法控制的字符串时,这仍然是一个安全问题。例如:

      +

      然而,有很多不依赖 {{HTMLElement("script")}} 标签去执行 JavaScript 的方式。所以当你使用innerHTML 去设置你无法控制的字符串时,这仍然是一个安全问题。例如:

      const name = "<img src='x' onerror='alert(1)'>";
       el.innerHTML = name; // shows the alert
       
      -

      基于这个原因,当插入纯文本时,建议不要使用 innerHTML 。取而代之的是使用 {{domxref("Node.textContent")}} ,它不会把给定的内容解析为 HTML,它仅仅是将原始文本插入给定的位置。

      +

      基于这个原因,当插入纯文本时,建议不要使用 innerHTML 。取而代之的是使用 {{domxref("Node.textContent")}} ,它不会把给定的内容解析为 HTML,它仅仅是将原始文本插入给定的位置。

      -

      警告:如果你的项目将要经过各种形式的安全检查的话,使用 innerHTML 可能导致代码被拒绝。例如,如果你在浏览器扩展使用 innerHTML 并将扩展提交到 addons.mozilla.org 的话,它将会在自动审核过程中被拒绝。

      +

      警告:如果你的项目将要经过各种形式的安全检查的话,使用 innerHTML 可能导致代码被拒绝。例如,如果你在浏览器扩展使用 innerHTML 并将扩展提交到 addons.mozilla.org 的话,它将会在自动审核过程中被拒绝。

      示例

      -

      这个例子使用 innerHTML 创建一种机制用于将消息记录到网页上的框中。

      +

      这个例子使用 innerHTML 创建一种机制用于将消息记录到网页上的框中。

      JavaScript

      @@ -124,7 +124,7 @@

      JavaScript

      log("Logging mouse events inside this container..."); -

      log() 函数通过 {{jsxref("Date")}} 对象的 {{jsxref("Date.toLocaleTimeString", "toLocaleTimeString()")}} 方法获取当前时间,然后将消息文本和时间戳放一起构建一个字符串,最后将其追加到具有 “log” 类的框上。

      +

      log() 函数通过 {{jsxref("Date")}} 对象的 {{jsxref("Date.toLocaleTimeString", "toLocaleTimeString()")}} 方法获取当前时间,然后将消息文本和时间戳放一起构建一个字符串,最后将其追加到具有 “log” 类的框上。

      现在添加第二个方法:记录基于事件 (比如 {{event("mousedown")}}, {{event("click")}}, 和 {{event("mouseenter")}}) 的 {{domxref("MouseEvent")}} 的信息。

      diff --git a/files/zh-cn/web/api/element/insertadjacentelement/index.html b/files/zh-cn/web/api/element/insertadjacentelement/index.html index ccb094cacb3d0d..f02a986b51731f 100644 --- a/files/zh-cn/web/api/element/insertadjacentelement/index.html +++ b/files/zh-cn/web/api/element/insertadjacentelement/index.html @@ -8,7 +8,7 @@ ---

      {{APIRef("DOM")}}

      -

      insertAdjacentElement() 方法将一个给定的元素节点插入到相对于被调用的元素的给定的一个位置。

      +

      insertAdjacentElement() 方法将一个给定的元素节点插入到相对于被调用的元素的给定的一个位置。

      语法

      @@ -65,7 +65,7 @@

      位置命名的可视化展示

      </p> <!-- afterend --> -
      注: 当节点处于 DOM 树中而且有一个父元素的时候 beforebegin 和 afterend 操作才能起作用。
      +
      注: 当节点处于 DOM 树中而且有一个父元素的时候 beforebeginafterend 操作才能起作用。

      例子

      @@ -83,7 +83,7 @@

      例子

      setListener(tempDiv); }); -

      看看我们在 Github(也可以参考 源码)上的 insertAdjacentElement.html 演示。在一个容器当中我们有一组{{htmlelement("div")}} 元素。 点击其中一个 div 时,这个容器会处于选中状态,然后你就可以按下Insert before 或Insert after 按钮通过 insertAdjacentElement() 方法来把一个新的 divs 插入到选中的元素前面或者后面。

      +

      看看我们在 Github(也可以参考 源码)上的 insertAdjacentElement.html 演示。在一个容器当中我们有一组{{htmlelement("div")}} 元素。 点击其中一个 div 时,这个容器会处于选中状态,然后你就可以按下Insert beforeInsert after 按钮通过 insertAdjacentElement() 方法来把一个新的 divs 插入到选中的元素前面或者后面。

      规范

      @@ -99,5 +99,5 @@

      参见

    • {{domxref("Element.insertAdjacentHTML()")}}
    • {{domxref("Element.insertAdjacentText()")}}
    • {{domxref("Node.insertBefore()")}}
    • -
    • {{domxref("Node.appendChild()")}} (same effect as beforeend)
    • +
    • {{domxref("Node.appendChild()")}} (same effect as beforeend)
    • diff --git a/files/zh-cn/web/api/element/insertadjacenthtml/index.html b/files/zh-cn/web/api/element/insertadjacenthtml/index.html index 6a96763670e5f8..570c6c49032fa8 100644 --- a/files/zh-cn/web/api/element/insertadjacenthtml/index.html +++ b/files/zh-cn/web/api/element/insertadjacenthtml/index.html @@ -12,7 +12,7 @@ ---
      {{APIRef("DOM")}}
      -

      insertAdjacentHTML() 方法将指定的文本解析为 {{domxref("Element")}} 元素,并将结果节点插入到 DOM 树中的指定位置。它不会重新解析它正在使用的元素,因此它不会破坏元素内的现有元素。这避免了额外的序列化步骤,使其比直接使用 innerHTML 操作更快。

      +

      insertAdjacentHTML() 方法将指定的文本解析为 {{domxref("Element")}} 元素,并将结果节点插入到 DOM 树中的指定位置。它不会重新解析它正在使用的元素,因此它不会破坏元素内的现有元素。这避免了额外的序列化步骤,使其比直接使用 innerHTML 操作更快。

      语法

      @@ -35,16 +35,16 @@

      语法

      位置名称的可视化

      -
      <!-- beforebegin -->
      +
      <!-- beforebegin -->
       <p>
      -  <!-- afterbegin -->
      +  <!-- afterbegin -->
         foo
      -  <!-- beforeend -->
      +  <!-- beforeend -->
       </p>
      -<!-- afterend -->
      +<!-- afterend -->
       
      -
      注意: beforebegin 和 afterend 位置,仅在节点在树中且节点具有一个 parent 元素时工作。
      +
      注意: beforebegin 和 afterend 位置,仅在节点在树中且节点具有一个 parent 元素时工作。

      示例

      @@ -60,9 +60,9 @@

      注意

      安全问题

      -

      使用 insertAdjacentHTML 插入用户输入的 HTML 内容的时候,需要转义之后才能使用。

      +

      使用 insertAdjacentHTML 插入用户输入的 HTML 内容的时候,需要转义之后才能使用。

      -

      如果只是为了插入文本内容(而不是 HTML 节点),不建议使用这个方法,建议使用node.textContent 或者 node.insertAdjacentText()。因为这样不需要经过 HTML 解释器的转换,性能会好一点。

      +

      如果只是为了插入文本内容(而不是 HTML 节点),不建议使用这个方法,建议使用node.textContent 或者 node.insertAdjacentText()。因为这样不需要经过 HTML 解释器的转换,性能会好一点。

      规范

      @@ -77,7 +77,7 @@

      浏览器兼容性

      相关链接

        -
      • 包括 Henri Sivonen 在内的某些 hacks.mozilla.org 客座文章 显示,insertAdjacentHTML 在某些情况下可以更快。
      • +
      • 包括 Henri Sivonen 在内的某些 hacks.mozilla.org 客座文章 显示,insertAdjacentHTML 在某些情况下可以更快。
      • {{domxref("Element.insertAdjacentElement()")}}
      • {{domxref("Element.insertAdjacentText()")}}
      diff --git a/files/zh-cn/web/api/element/keydown_event/index.html b/files/zh-cn/web/api/element/keydown_event/index.html index 51a5b5e49d4a00..f4e0b611530a9d 100644 --- a/files/zh-cn/web/api/element/keydown_event/index.html +++ b/files/zh-cn/web/api/element/keydown_event/index.html @@ -32,11 +32,11 @@
      -

      keydown 与 keyup 事件捕获了键盘按键的操作,而 keypress 反映了具体输入某个字符的值。比如,小写"a" 在keydown 和 keyup事件中输出的是大写 A 的 Unicode 编码 65,但是在keypress中输出的就是小写"a"的 Unicode 编码 97。大写 "A"在这些事件中输出的都是 Unicode 编码 65。

      +

      keydownkeyup 事件捕获了键盘按键的操作,而 keypress 反映了具体输入某个字符的值。比如,小写"a" 在keydownkeyup事件中输出的是大写 A 的 Unicode 编码 65,但是在keypress中输出的就是小写"a"的 Unicode 编码 97。大写 "A"在这些事件中输出的都是 Unicode 编码 65。

      -

      键盘事件只能由 <inputs>, <textarea> 以及任何具有  contentEditable 或 tabindex="-1"属性的组件触发。

      +

      键盘事件只能由 <inputs>, <textarea> 以及任何具有 contentEditabletabindex="-1"属性的组件触发。

      -

      自 Firefox 65 起,  keydown 与 keyup 事件会在 IME(输入法编辑器)复合事件中被触发,目的是为了提升 CJKT(中日韩台地区)用户跨浏览器性能,({{bug(354358)}}). 若要忽略复合事件中所有 keydown 事件,可以按照如下代码修改 (229 是某个在 IME 中触发的键盘事件对应的 keyCode):

      +

      自 Firefox 65 起, keydownkeyup 事件会在 IME(输入法编辑器)复合事件中被触发,目的是为了提升 CJKT(中日韩台地区)用户跨浏览器性能,({{bug(354358)}}). 若要忽略复合事件中所有 keydown 事件,可以按照如下代码修改 (229 是某个在 IME 中触发的键盘事件对应的 keyCode):

      eventTarget.addEventListener("keydown", event => {
         if (event.isComposing || event.keyCode === 229) {
      @@ -50,7 +50,7 @@ 

      示例

      addEventListener keydown 示例

      -

      这个例子展示了当你在{{HtmlElement("input")}}元素中按下一个按键时, {{domxref("KeyboardEvent.code")}} 的取值 

      +

      这个例子展示了当你在{{HtmlElement("input")}}元素中按下一个按键时, {{domxref("KeyboardEvent.code")}} 的取值

      <input placeholder="Click here, then press down a key." size="40">
       <p id="log"></p>
      diff --git a/files/zh-cn/web/api/element/keyup_event/index.html b/files/zh-cn/web/api/element/keyup_event/index.html index d710baaeac48f5..509c015e15ef6b 100644 --- a/files/zh-cn/web/api/element/keyup_event/index.html +++ b/files/zh-cn/web/api/element/keyup_event/index.html @@ -30,9 +30,9 @@ -

      keydown 和 keyup 事件提供指出哪个键被按下的代码,而 keypress 指出哪些字符被输入。例如,小写字母 “a” 在 keydown 和 keyup 时会被报告为 65,但在 keypress 时为 97。所有事件均将大写字母 “A” 报告为 65。

      +

      keydownkeyup 事件提供指出哪个键被按下的代码,而 keypress 指出哪些字符被输入。例如,小写字母 “a” 在 keydownkeyup 时会被报告为 65,但在 keypress 时为 97。所有事件均将大写字母 “A” 报告为 65。

      -

      从 Firefox 65 开始,keyup 和 keydown 事件在 IME 编辑时也会被触发,以提升 CJKT 用户的跨浏览器兼容性({{bug(354358)}})。要忽略 IME 编辑时的所有 keyup 事件,请执行以下操作(229 是一个关于被 IME 加工过的事件的  keyCode 的特殊值 ):

      +

      从 Firefox 65 开始,keyupkeydown 事件在 IME 编辑时也会被触发,以提升 CJKT 用户的跨浏览器兼容性({{bug(354358)}})。要忽略 IME 编辑时的所有 keyup 事件,请执行以下操作(229 是一个关于被 IME 加工过的事件的 keyCode 的特殊值 ):

      eventTarget.addEventListener("keyup", event => {
         if (event.isComposing || event.keyCode === 229) {
      diff --git a/files/zh-cn/web/api/element/localname/index.html b/files/zh-cn/web/api/element/localname/index.html
      index 445a637b1dddef..ab2b63e12a1874 100644
      --- a/files/zh-cn/web/api/element/localname/index.html
      +++ b/files/zh-cn/web/api/element/localname/index.html
      @@ -18,11 +18,11 @@ 

      语法

      返回值

      -

       {{domxref("DOMString")}} 返回元素限定名的本地部分。

      +

      {{domxref("DOMString")}} 返回元素限定名的本地部分。

      示例

      -

      (必须配合 XML 文档类型,如 text/xml 或 application/xhtml+xml.)

      +

      (必须配合 XML 文档类型,如 text/xmlapplication/xhtml+xml.)

      <html xmlns="http://www.w3.org/1999/xhtml"
             xmlns:svg="http://www.w3.org/2000/svg">
      @@ -62,7 +62,7 @@ 

      说明

      -

      提示: 在 {{Gecko("1.9.2")}} 之前,此属性返回 HTML DOM 的 HTML 元素本地名称的大写版本 (而不是 XML DOM 的 HTML 元素). 在最后一个版本,符合 HTML5 规范下,当 HTML DOM 的 HTML 或 XML DOMs 的 XHTML 的小写元素时此属性返回内部 DOM storage。{{domxref("element.tagName","tagName")}} 属性仍然返回 HTML DOM 的 HTML 元素本地名称的大写版本。

      +

      提示: 在 {{Gecko("1.9.2")}} 之前,此属性返回 HTML DOM 的 HTML 元素本地名称的大写版本 (而不是 XML DOM 的 HTML 元素). 在最后一个版本,符合 HTML5 规范下,当 HTML DOM 的 HTML 或 XML DOMs 的 XHTML 的小写元素时此属性返回内部 DOM storage。{{domxref("element.tagName","tagName")}} 属性仍然返回 HTML DOM 的 HTML 元素本地名称的大写版本。

      规范

      diff --git a/files/zh-cn/web/api/element/matches/index.html b/files/zh-cn/web/api/element/matches/index.html index 358f804810df7c..60c309dd07acba 100644 --- a/files/zh-cn/web/api/element/matches/index.html +++ b/files/zh-cn/web/api/element/matches/index.html @@ -9,10 +9,10 @@ ---

      {{APIRef("DOM")}}

      -

      如果元素被指定的选择器字符串选择,Element.matches()  方法返回 true; 否则返回 false。

      +

      如果元素被指定的选择器字符串选择,Element.matches() 方法返回 true; 否则返回 false。

      -

      有一些浏览器使用前缀,在非标准名称  matchesSelector () 下实现了这个方法!

      +

      有一些浏览器使用前缀,在非标准名称 matchesSelector () 下实现了这个方法!

      语法

      @@ -64,7 +64,7 @@

      异常

      替代方案 (Polyfill)

      -

      对于不支持 Element.matches() 或Element.matchesSelector(),但支持document.querySelectorAll() 方法的浏览器,存在以下替代方案

      +

      对于不支持 Element.matches()Element.matchesSelector(),但支持document.querySelectorAll() 方法的浏览器,存在以下替代方案

       if (!Element.prototype.matches) {
      diff --git a/files/zh-cn/web/api/element/mousedown_event/index.html b/files/zh-cn/web/api/element/mousedown_event/index.html
      index e52c17244ae1dd..c5b9f5d54d751f 100644
      --- a/files/zh-cn/web/api/element/mousedown_event/index.html
      +++ b/files/zh-cn/web/api/element/mousedown_event/index.html
      @@ -21,7 +21,7 @@ 

      常规信息

      目标对象
      元素(Element)
      默认行为
      -
      多种:开始 drag/drop 操作;开始文本选择、开始滚动或移动操作(若支持该操作时,可与鼠标中键协同) 
      +
      多种:开始 drag/drop 操作;开始文本选择、开始滚动或移动操作(若支持该操作时,可与鼠标中键协同)

      属性

      @@ -58,7 +58,7 @@

      属性

      view {{readonlyInline}} {{domxref("WindowProxy")}} - {{domxref("document.defaultView")}} (文档 window) + {{domxref("document.defaultView")}} (文档 window) detail {{readonlyInline}} @@ -75,7 +75,7 @@

      属性

      relatedTarget {{readonlyInline}} {{domxref("EventTarget")}} - 对于 mouseover, mouseout, mouseenter 及 mouseleave 事件: 该事件及其互补事件(如 mouseleave 对应 mouseenter 事件)。不存在时为 null  + 对于 mouseover, mouseout, mouseentermouseleave 事件: 该事件及其互补事件(如 mouseleave 对应 mouseenter 事件)。不存在时为 null screenX {{readonlyInline}} @@ -119,28 +119,28 @@

      属性

      mozPressure {{readonlyInline}} float -

      触发事件时按下触控设备的压力。该值范围最小为 0.0,最大为 1.0

      +

      触发事件时按下触控设备的压力。该值范围最小为 0.0,最大为 1.0

      ctrlKey {{readonlyInline}} boolean - 若事件触发时 control 键按下则为 true,否则为 false。 + 若事件触发时 control 键按下则为 true,否则为 falseshiftKey {{readonlyInline}} boolean - 若事件触发时 shift 键按下则为 true,否则为 false + 若事件触发时 shift 键按下则为 true,否则为 false altKey {{readonlyInline}} boolean - 若事件触发时 alt 键按下则为 true,否则为 false + 若事件触发时 alt 键按下则为 true,否则为 false metaKey {{readonlyInline}} boolean - 若事件触发时 meta 键按下则为 true,否则为 false + 若事件触发时 meta 键按下则为 true,否则为 false diff --git a/files/zh-cn/web/api/element/mouseenter_event/index.html b/files/zh-cn/web/api/element/mouseenter_event/index.html index 5c72375f5fde09..570e14197484c1 100644 --- a/files/zh-cn/web/api/element/mouseenter_event/index.html +++ b/files/zh-cn/web/api/element/mouseenter_event/index.html @@ -10,9 +10,9 @@ ---
      {{APIRef}}
      -

      当定点设备(通常指鼠标)移动到元素上时就会触发 mouseenter 事件

      +

      当定点设备(通常指鼠标)移动到元素上时就会触发 mouseenter 事件

      -

      类似 {{event('mouseover')}},它们两者之间的差别是 mouseenter 不会冒泡(bubble),也就是说当指针从它的子层物理空间移到它的物理空间上时不会触发

      +

      类似 {{event('mouseover')}},它们两者之间的差别是 mouseenter 不会冒泡(bubble),也就是说当指针从它的子层物理空间移到它的物理空间上时不会触发

      mouseenter.png
      @@ -23,7 +23,7 @@

      对于深层次结构,发送的 *mouseover* 事件数量可能非常大并且会导致严重的性能问题。在这种情况下,最好是监听 *mouseenter* 事件。(可使用 chrome 开发者工具选项卡中的 Performance 进行性能测试)

      -

      结合其对称事件,mouseleave, mouseenter DOM 事件的行为方式与 CSS  {{cssxref(':hover')}} 伪类非常相似。.

      +

      结合其对称事件,mouseleave, mouseenter DOM 事件的行为方式与 CSS {{cssxref(':hover')}} 伪类非常相似。.

      General info

      @@ -78,7 +78,7 @@

      Properties 属性列表

      view {{readonlyInline}} {{domxref("WindowProxy")}} - {{domxref("document.defaultView")}} (document 的 window ) + {{domxref("document.defaultView")}} (document 的 window ) detail {{readonlyInline}} @@ -93,7 +93,7 @@

      Properties 属性列表

      relatedTarget {{readonlyInline}} {{domxref("EventTarget")}} - 对于 mouseover, mouseout, mouseenter 和 mouseleave 事件: the target of the complementary event (the mouseleave target in the case of a mouseenter event). null otherwise. + 对于 mouseover, mouseout, mouseentermouseleave 事件: the target of the complementary event (the mouseleave target in the case of a mouseenter event). null otherwise. screenX {{readonlyInline}} @@ -133,29 +133,29 @@

      Properties 属性列表

      ctrlKey {{readonlyInline}} boolean - true 代表当事件触发时按着 ctrl 键。false 反之。 + true 代表当事件触发时按着 ctrl 键。false 反之。 shiftKey {{readonlyInline}} boolean - true 代表当事件触发时按着 shift 键。false 反之。 + true 代表当事件触发时按着 shift 键。false 反之。 altKey {{readonlyInline}} boolean - true 代表当事件触发时按着 alt 键。false 反之。 + true 代表当事件触发时按着 alt 键。false 反之。 metaKey {{readonlyInline}} boolean - true 代表当事件触发时按着 meta 键 (???) false 反之。 + true 代表当事件触发时按着 meta 键 (???) false 反之。

      Examples

      -

      鼠标悬停 ( mouseover ) 文档中有一个示例说明了 mouseover 和 mouseenter 之间的区别。

      +

      鼠标悬停 ( mouseover ) 文档中有一个示例说明了 mouseover 和 mouseenter 之间的区别。

      以下示例说明如何使用 mouseover 模拟 mouseenter 事件的事件委派原则。

      diff --git a/files/zh-cn/web/api/element/mouseleave_event/index.html b/files/zh-cn/web/api/element/mouseleave_event/index.html index 72320ff7ef5503..a63aa1ca1a8d05 100644 --- a/files/zh-cn/web/api/element/mouseleave_event/index.html +++ b/files/zh-cn/web/api/element/mouseleave_event/index.html @@ -7,7 +7,7 @@

      指点设备(通常是鼠标)的指针移出某个元素时,会触发mouseleave事件。

      -

      mouseleave  和 {{event('mouseout')}} 是相似的,但是两者的不同在于mouseleave 不会冒泡而mouseout 会冒泡。
      +

      mouseleave 和 {{event('mouseout')}} 是相似的,但是两者的不同在于mouseleave 不会冒泡而mouseout 会冒泡。
      这意味着当指针离开元素及其所有后代时,会触发mouseleave,而当指针离开元素或离开元素的后代(即使指针仍在元素内)时,会触发mouseout

      @@ -23,7 +23,7 @@
      -

       

      +

      一般信息

      @@ -91,7 +91,7 @@

      属性

      relatedTarget {{readonlyInline}} {{domxref("EventTarget")}} - mouseover, mouseout, mouseenter 和 mouseleave 事件:互补事件的目标 (详情查看relatedTarget)。 + mouseover, mouseout, mouseentermouseleave 事件:互补事件的目标 (详情查看relatedTarget)。 screenX {{readonlyInline}} @@ -159,7 +159,7 @@

      例子

      以下示例说明了如何使用mouseout来模拟mouseleave事件的事件委托原则。

      -

       

      +

      <ul id="test">
         <li>
      diff --git a/files/zh-cn/web/api/element/mousemove_event/index.html b/files/zh-cn/web/api/element/mousemove_event/index.html
      index b5284b40eeaf18..e2554e0def34b3 100644
      --- a/files/zh-cn/web/api/element/mousemove_event/index.html
      +++ b/files/zh-cn/web/api/element/mousemove_event/index.html
      @@ -41,9 +41,9 @@ 

      基本信息

      示例

      -

      下面的例子将使用 {{domxref("Element/mousedown_event", "mousedown")}}, mousemove 以及 {{domxref("Element/mouseup_event", "mouseup")}} 事件,实现一个允许用户在 HTML5 canvas绘图的功能。这个例子的功能很简单:线的粗细设置为 1,颜色始终为黑色。

      +

      下面的例子将使用 {{domxref("Element/mousedown_event", "mousedown")}}, mousemove 以及 {{domxref("Element/mouseup_event", "mouseup")}} 事件,实现一个允许用户在 HTML5 canvas绘图的功能。这个例子的功能很简单:线的粗细设置为 1,颜色始终为黑色。

      -

      当页面加载完成,我们使用变量 myPics 和context分别保存 ID 为myPics的 DOM 元素和接下来需要加工的的 2d 元素。

      +

      当页面加载完成,我们使用变量 myPicscontext分别保存 ID 为myPics的 DOM 元素和接下来需要加工的的 2d 元素。

      mousedown事件被触发时,绘图也开始了。首先,我们将鼠标的x坐标和y坐标分别赋值给变量xy,然后设置isDrawingtrue

      diff --git a/files/zh-cn/web/api/element/mouseout_event/index.html b/files/zh-cn/web/api/element/mouseout_event/index.html index e77e15e29770f4..631cca1cbb0f84 100644 --- a/files/zh-cn/web/api/element/mouseout_event/index.html +++ b/files/zh-cn/web/api/element/mouseout_event/index.html @@ -15,7 +15,7 @@ - 接口 translation_of: Web/API/Element/mouseout_event --- -

      当移动指针设备(通常是鼠标),使指针不再包含在这个元素或其子元素中时,mouseout 事件被触发。当指针从一个元素移入其子元素时,mouseout 也会被触发,因为子元素遮盖了父元素的可视区域。

      +

      当移动指针设备(通常是鼠标),使指针不再包含在这个元素或其子元素中时,mouseout 事件被触发。当指针从一个元素移入其子元素时,mouseout 也会被触发,因为子元素遮盖了父元素的可视区域。

      @@ -40,13 +40,13 @@

      示例

      -

      以下示例将说明如何使用 mouseout 事件。

      +

      以下示例将说明如何使用 mouseout 事件。

      mouseout 和 mouseleave

      -

      以下示例说明了 mouseout 和 mouseleave 事件的区别。当鼠标离开<ul> 时,mouseleave 事件会添加到 {{HTMLElement("ul")}} 以将列表变成紫色。mouseout 在鼠标移出目标元素时被添加到列表,以将目标元素变成橙色。

      +

      以下示例说明了 mouseoutmouseleave 事件的区别。当鼠标离开<ul> 时,mouseleave 事件会添加到 {{HTMLElement("ul")}} 以将列表变成紫色。mouseout 在鼠标移出目标元素时被添加到列表,以将目标元素变成橙色。

      -

      当你尝试的时候,你会发现 mouseout 被添加到单个列表项目上,而 mouseleave 则应用于整个列表,这取决于列表项目的层次关系,而列表项目遮盖了底层的 <ul>

      +

      当你尝试的时候,你会发现 mouseout 被添加到单个列表项目上,而 mouseleave 则应用于整个列表,这取决于列表项目的层次关系,而列表项目遮盖了底层的 <ul>

      HTML

      diff --git a/files/zh-cn/web/api/element/mouseover_event/index.html b/files/zh-cn/web/api/element/mouseover_event/index.html index 74b7ed25324acc..ad9737715d6bd1 100644 --- a/files/zh-cn/web/api/element/mouseover_event/index.html +++ b/files/zh-cn/web/api/element/mouseover_event/index.html @@ -22,39 +22,39 @@

      例子

      <head> <title>onmouseover/onmouseout event example</title> <script type="text/javascript"> -    function initElement() -    { -        var p = document.getElementById("foo"); + function initElement() + { + var p = document.getElementById("foo"); -        p.onmouseover = showMouseOver; -        p.onmouseout = showMouseOut; -    }; + p.onmouseover = showMouseOver; + p.onmouseout = showMouseOut; + }; -    function showMouseOver() -    { -        var notice = document.getElementById("notice"); -        notice.innerHTML = '检测到鼠标移进'; -    } + function showMouseOver() + { + var notice = document.getElementById("notice"); + notice.innerHTML = '检测到鼠标移进'; + } -    function showMouseOut() -    { -        var notice = document.getElementById("notice"); -        notice.innerHTML = '检测到鼠标移出'; -    } + function showMouseOut() + { + var notice = document.getElementById("notice"); + notice.innerHTML = '检测到鼠标移出'; + } </script> <style type="text/css"> -    #foo { -    border: solid blue 2px; -    } + #foo { + border: solid blue 2px; + } </style> </head> <body onload="initElement()";> -    <span id="foo">移动鼠标,在该元素上移进移出</span> -    <div id="notice"></div> + <span id="foo">移动鼠标,在该元素上移进移出</span> + <div id="notice"></div> </body> -</html>  +</html>

      备注

      diff --git a/files/zh-cn/web/api/element/mouseup_event/index.html b/files/zh-cn/web/api/element/mouseup_event/index.html index 9ba986f8e18dbc..45a3d85570b19d 100644 --- a/files/zh-cn/web/api/element/mouseup_event/index.html +++ b/files/zh-cn/web/api/element/mouseup_event/index.html @@ -14,7 +14,7 @@ ---
      {{APIRef}}
      -

      当指针在元素中时, mouseup事件在指针设备(如鼠标或触摸板)按钮放开时触发。mouseup 事件与{{domxref("Element.mousedown_event", "mousedown")}} 事件相反。

      +

      当指针在元素中时, mouseup事件在指针设备(如鼠标或触摸板)按钮放开时触发。mouseup 事件与{{domxref("Element.mousedown_event", "mousedown")}} 事件相反。

      diff --git a/files/zh-cn/web/api/element/namespaceuri/index.html b/files/zh-cn/web/api/element/namespaceuri/index.html index 0fefbe4d9da821..0f46d082dd80fb 100644 --- a/files/zh-cn/web/api/element/namespaceuri/index.html +++ b/files/zh-cn/web/api/element/namespaceuri/index.html @@ -5,7 +5,7 @@ ---
      {{APIRef("DOM")}}
      -

      Element.namespaceURI 是一个只读属性,它返回元素的命名空间,若该元素不在命名空间中则返回null .

      +

      Element.namespaceURI 是一个只读属性,它返回元素的命名空间,若该元素不在命名空间中则返回null .

      在 DOM4 之前, 这个 API 在接口 {{domxref("Node")}} 中定义 .

      @@ -28,9 +28,9 @@

      注意

      这不是一个计算值,它是基于范围内的名称空间声明检查的名称空间查找的结果。节点命名空间在节点创建时被冻结。

      -

      在 Firefox 3.5 以及之前的版本, HTML 文档中的 HTML 元素的名称空间 URI 为 null。 在更早的版本中,符合 HTML5, 它是http://www.w3.org/1999/xhtml 如 XHTML。

      +

      在 Firefox 3.5 以及之前的版本, HTML 文档中的 HTML 元素的名称空间 URI 为 null。 在更早的版本中,符合 HTML5, 它是http://www.w3.org/1999/xhtml 如 XHTML。

      -

      您可以使用 DOM Level 2 方法指定的namespaceURI创建一个元素 document.createElementNS

      +

      您可以使用 DOM Level 2 方法指定的namespaceURI创建一个元素 document.createElementNS

      DOM 本身不处理或执行名称空间验证。 它由 DOM 应用程序完成,以执行任何必要的验证。注意,名称空间前缀一旦与某个特定元素相关联,就不能更改。

      diff --git a/files/zh-cn/web/api/element/nextelementsibling/index.html b/files/zh-cn/web/api/element/nextelementsibling/index.html index 5fbb74211802a3..82a73d1fac2d3f 100644 --- a/files/zh-cn/web/api/element/nextelementsibling/index.html +++ b/files/zh-cn/web/api/element/nextelementsibling/index.html @@ -58,7 +58,7 @@

      Internet Explorer 8 支持补丁

      } -

      Internet Explorer 9+ 和 Safari 支持补丁

      +

      Internet Explorer 9+ 和 Safari 支持补丁

      // Source: https://github.com/jserz/js_piece/blob/master/DOM/NonDocumentTypeChildNode/nextElementSibling/nextElementSibling.md
       (function (arr) {
      diff --git a/files/zh-cn/web/api/element/openorclosedshadowroot/index.html b/files/zh-cn/web/api/element/openorclosedshadowroot/index.html
      index dca4ac1233a17c..30195995ebdb49 100644
      --- a/files/zh-cn/web/api/element/openorclosedshadowroot/index.html
      +++ b/files/zh-cn/web/api/element/openorclosedshadowroot/index.html
      @@ -7,7 +7,7 @@
       
      Note: This API is available only to WebExtensions.
      -

      Element.openOrCloseShadowRoot 是一个只读属性。represents the shadow root hosted by the element, regardless if its {{DOMxRef("ShadowRoot.mode", "mode")}} is open or closed. Use {{DOMxRef("Element.attachShadow()")}} to add a shadow root to an existing element.

      +

      Element.openOrCloseShadowRoot 是一个只读属性。represents the shadow root hosted by the element, regardless if its {{DOMxRef("ShadowRoot.mode", "mode")}} is open or closed. Use {{DOMxRef("Element.attachShadow()")}} to add a shadow root to an existing element.

      Syntax

      @@ -16,7 +16,7 @@

      Syntax

      Value

      -

      A {{DOMxRef("ShadowRoot")}} object instance, regardless if its {{DOMxRef("ShadowRoot.mode", "mode")}} is set to open or closed, or null if no shadow root is present. (See {{DOMxRef("Element.attachShadow()")}} for further details).

      +

      A {{DOMxRef("ShadowRoot")}} object instance, regardless if its {{DOMxRef("ShadowRoot.mode", "mode")}} is set to open or closed, or null if no shadow root is present. (See {{DOMxRef("Element.attachShadow()")}} for further details).

      Specifications

      diff --git a/files/zh-cn/web/api/element/outerhtml/index.html b/files/zh-cn/web/api/element/outerhtml/index.html index 425ad58c36846a..4b021783bac1f8 100644 --- a/files/zh-cn/web/api/element/outerhtml/index.html +++ b/files/zh-cn/web/api/element/outerhtml/index.html @@ -9,9 +9,9 @@ ---

      {{APIRef("DOM")}}

      -

       {{ domxref("element") }}  DOM 接口的outerHTML属性获取描述元素(包括其后代)的序列化 HTML 片段。它也可以设置为用从给定字符串解析的节点替换元素。

      +

      {{ domxref("element") }} DOM 接口的outerHTML属性获取描述元素(包括其后代)的序列化 HTML 片段。它也可以设置为用从给定字符串解析的节点替换元素。

      -

      要仅获取元素内容的 HTML 表示形式或替换元素的内容,请使用 {{domxref("Element.innerHTML", "innerHTML")}} 属性

      +

      要仅获取元素内容的 HTML 表示形式或替换元素的内容,请使用 {{domxref("Element.innerHTML", "innerHTML")}} 属性

      语法

      @@ -32,8 +32,8 @@

      例子

      // HTML:
       /*
       <div id="d">
      -    <p>Content</p>
      -    <p>Further Elaborated</p>
      +    <p>Content</p>
      +    <p>Further Elaborated</p>
       </div>
       */
       
      @@ -51,7 +51,7 @@ 

      例子

      // HTML:
       /*
       <div id="container">
      -    <div id="d">This is a div.</div>
      +    <div id="d">This is a div.</div>
       </div>
       */
       
      @@ -68,7 +68,7 @@ 

      例子

      /* #d div 不再是文档树的一部分,新段替换了它。 -  (不在页面中显示,但仍然在内存中) + (不在页面中显示,但仍然在内存中) */
      @@ -91,7 +91,7 @@

      注意事项

      // 仍然为: "P";
      -

       

      +

      规范

      @@ -105,7 +105,7 @@

      相关链接

      diff --git a/files/zh-cn/web/api/element/paste_event/index.html b/files/zh-cn/web/api/element/paste_event/index.html index 120a5a524dc79f..56132d4b89ccdf 100644 --- a/files/zh-cn/web/api/element/paste_event/index.html +++ b/files/zh-cn/web/api/element/paste_event/index.html @@ -8,7 +8,7 @@ translation_of: Web/API/Element/paste_event original_slug: Web/Events/paste --- -

       {{APIRef}}

      +

      {{APIRef}}

      当用户在浏览器用户界面发起“粘贴”操作时,会触发paste事件。

      @@ -21,9 +21,9 @@ 事件处理属性 {{domxref("HTMLElement/onpaste", "onpaste")}} -

      如果光标位于可编辑的上下文中(例如,在 {{HTMLElement("textarea")}} 或者 contenteditable 属性设置为 true 的元素),则默认操作是将剪贴板的内容插入光标所在位置的文档中。

      +

      如果光标位于可编辑的上下文中(例如,在 {{HTMLElement("textarea")}} 或者 contenteditable 属性设置为 true 的元素),则默认操作是将剪贴板的内容插入光标所在位置的文档中。

      -

      事件处理程序可以通过调用事件的 clipboardData 属性上的 {{domxref("DataTransfer/getData", "getData()")}}访问剪贴板内容。

      +

      事件处理程序可以通过调用事件的 clipboardData 属性上的 {{domxref("DataTransfer/getData", "getData()")}}访问剪贴板内容。

      要覆盖默认行为(例如,插入一些不同的数据或转换剪贴板的内容),事件处理程序必须使用 {{domxref("Event/preventDefault", "event.preventDefault()")}},取消默认操作,然后手动插入想要的数据。

      @@ -68,7 +68,7 @@

      JS

      Result

      -

       {{EmbedLiveSample('Live_example', '100%', '100px')}}

      +

      {{EmbedLiveSample('Live_example', '100%', '100px')}}

      规范

      diff --git a/files/zh-cn/web/api/element/pointerdown_event/index.html b/files/zh-cn/web/api/element/pointerdown_event/index.html index de3713796f66bb..23915c2b87ddc0 100644 --- a/files/zh-cn/web/api/element/pointerdown_event/index.html +++ b/files/zh-cn/web/api/element/pointerdown_event/index.html @@ -6,7 +6,7 @@ ---
      {{ApiRef("HTML DOM")}}
      -

       {{event("pointerdown")}} 事件的 {{domxref("GlobalEventHandlers","全局事件处理程序")}} 

      +

      {{event("pointerdown")}} 事件的 {{domxref("GlobalEventHandlers","全局事件处理程序")}}

      语法

      @@ -17,12 +17,12 @@

      返回值

      downHandler
      -
      pointerdown 事件触发对象的事件处理程序。
      +
      pointerdown 事件触发对象的事件处理程序。

      示例

      -

      当前示例展示两种方式使用 onpointerdown 去设置元素的 pointerdown 事件处理程序。

      +

      当前示例展示两种方式使用 onpointerdown 去设置元素的 pointerdown 事件处理程序。

      <html>
       <script>
      @@ -49,7 +49,7 @@ 

      浏览器支持

      {{Compat("api.GlobalEventHandlers.onpointerdown")}} -

       

      +

      参阅

      diff --git a/files/zh-cn/web/api/element/pointerenter_event/index.html b/files/zh-cn/web/api/element/pointerenter_event/index.html index b9702dfd1ded91..ac706091bc189e 100644 --- a/files/zh-cn/web/api/element/pointerenter_event/index.html +++ b/files/zh-cn/web/api/element/pointerenter_event/index.html @@ -8,7 +8,7 @@
      pointerenter 事件的 GlobalEventHandlers(全局事件处理函数)
      -

       

      +

      var enterHandler = targetElement.onpointerenter;
       
      @@ -19,7 +19,7 @@

      返回值

      enterHandler
      -

            targetElement的 pointerenter 事件处理函数。

      +

      targetElement的 pointerenter 事件处理函数。

      例子

      @@ -65,7 +65,7 @@

      浏览器兼容性

      - @@ -91,7 +91,7 @@

      浏览器兼容性

      - + @@ -101,7 +101,7 @@

      浏览器兼容性

      [1] 这是在bug 248918中实现。

      -

      [2] 依赖于dom.w3c_pointer_events.enabled属性,默认值为 false

      +

      [2] 依赖于dom.w3c_pointer_events.enabled属性,默认值为 false

      相关链接

      diff --git a/files/zh-cn/web/api/element/pointerleave_event/index.html b/files/zh-cn/web/api/element/pointerleave_event/index.html index d9ffaef707d28c..17789e4da04b85 100644 --- a/files/zh-cn/web/api/element/pointerleave_event/index.html +++ b/files/zh-cn/web/api/element/pointerleave_event/index.html @@ -6,7 +6,7 @@ ---
      {{APIRef("HTML DOM")}}
      -

      就像在{{domxref("Element")}}或{{domxref("Window")}}中点击类似,在某目标区域内,发生触点(鼠标指针,触摸等)行为时会触发源于{{event("pointerleave")}}事件{{domxref("GlobalEventHandlers","global event handler", "", 1)}}行为。 这个事件本身属于 Pointer Events API 的一部分。

      +

      就像在{{domxref("Element")}}或{{domxref("Window")}}中点击类似,在某目标区域内,发生触点(鼠标指针,触摸等)行为时会触发源于{{event("pointerleave")}}事件{{domxref("GlobalEventHandlers","global event handler", "", 1)}}行为。 这个事件本身属于 Pointer Events API 的一部分。

      语法

      @@ -23,7 +23,7 @@

      返回值

      样例

      -

      这个样例展示了两种使用 onpointerleave 来设置元素 pointerleave 事件处理器的方式。

      +

      这个样例展示了两种使用 onpointerleave 来设置元素 pointerleave 事件处理器的方式。

      <html>
       <script>
      @@ -42,7 +42,7 @@ 

      样例

      </html>
      -

      查看 Using Pointer Events 以了解更多详情。

      +

      查看 Using Pointer Events 以了解更多详情。

      规格

      @@ -59,5 +59,5 @@

      参考

      • Pointer events
      • Using pointer events
      • -
      • {{event("pointerleave")}} 以及它实现的 {{domxref("PointerEvent")}} 接口
      • +
      • {{event("pointerleave")}} 以及它实现的 {{domxref("PointerEvent")}} 接口
      diff --git a/files/zh-cn/web/api/element/pointermove_event/index.html b/files/zh-cn/web/api/element/pointermove_event/index.html index 330218381316a8..e50ea628f593bd 100644 --- a/files/zh-cn/web/api/element/pointermove_event/index.html +++ b/files/zh-cn/web/api/element/pointermove_event/index.html @@ -13,7 +13,7 @@ ---
      {{ApiRef("HTML DOM")}}
      -

      一个{{domxref("GlobalEventHandlers","global event handler")}}(全局事件) {{event("pointermove")}} 事件。

      +

      一个{{domxref("GlobalEventHandlers","global event handler")}}(全局事件) {{event("pointermove")}} 事件。

      语法

      @@ -24,7 +24,7 @@

      返回值

      moveHandler
      -
      返回 targetElement 元素的 pointermove 事件处理函数。
      +
      返回 targetElement 元素的 pointermove 事件处理函数。

      示例

      diff --git a/files/zh-cn/web/api/element/pointerout_event/index.html b/files/zh-cn/web/api/element/pointerout_event/index.html index 8fec3d205990bf..a328696e33d753 100644 --- a/files/zh-cn/web/api/element/pointerout_event/index.html +++ b/files/zh-cn/web/api/element/pointerout_event/index.html @@ -58,5 +58,5 @@

      相关链接

      - +

      diff --git a/files/zh-cn/web/api/element/pointerover_event/index.html b/files/zh-cn/web/api/element/pointerover_event/index.html index f1deb0b747954c..3e344c98c72e85 100644 --- a/files/zh-cn/web/api/element/pointerover_event/index.html +++ b/files/zh-cn/web/api/element/pointerover_event/index.html @@ -24,12 +24,12 @@

      返回值

      overHandler
      -
       pointerover 事件处理器返回目标元素的overHandler.
      +
      pointerover 事件处理器返回目标元素的overHandler.

      案例

      -

      这里使用两种方式展示了如何去使用 onpointerover 去设置一个元素的 pointerover 事件处理器

      +

      这里使用两种方式展示了如何去使用 onpointerover 去设置一个元素的 pointerover 事件处理器

      <html>
       <script>
      diff --git a/files/zh-cn/web/api/element/pointerup_event/index.html b/files/zh-cn/web/api/element/pointerup_event/index.html
      index b31c0e9fc2ad01..500d3a53ee9d2e 100644
      --- a/files/zh-cn/web/api/element/pointerup_event/index.html
      +++ b/files/zh-cn/web/api/element/pointerup_event/index.html
      @@ -17,7 +17,7 @@ 

      返回值

      upHandler
      -
      返回 targetElement 元素的pointerup事件处理函数。
      +
      返回 targetElement 元素的pointerup事件处理函数。

      示例

      diff --git a/files/zh-cn/web/api/element/prefix/index.html b/files/zh-cn/web/api/element/prefix/index.html index 66f0a413c07794..c4276aaf53574e 100644 --- a/files/zh-cn/web/api/element/prefix/index.html +++ b/files/zh-cn/web/api/element/prefix/index.html @@ -8,7 +8,7 @@

      Element.prefix 只读属性返回指定元素的命名空间前缀,如果未指定前缀,则返回 null。

      -

      在 DOM4 之前,该 API 是在 {{domxref("Node")}}  interface 中定义的。

      +

      在 DOM4 之前,该 API 是在 {{domxref("Node")}} interface 中定义的。

      Syntax

      diff --git a/files/zh-cn/web/api/element/prepend/index.html b/files/zh-cn/web/api/element/prepend/index.html index ef4ca83de1d526..afa3c91cc77dd2 100644 --- a/files/zh-cn/web/api/element/prepend/index.html +++ b/files/zh-cn/web/api/element/prepend/index.html @@ -14,7 +14,7 @@ ---
      {{APIRef("DOM")}}
      -

      Element.prepend 方法可以在父节点的第一个子节点之前插入一系列{{domxref("Node")}}对象或者{{domxref("DOMString")}}对象。{{domxref("DOMString")}}会被当作{{domxref("Text")}}节点对待(也就是说插入的不是 HTML 代码)。

      +

      Element.prepend 方法可以在父节点的第一个子节点之前插入一系列{{domxref("Node")}}对象或者{{domxref("DOMString")}}对象。{{domxref("DOMString")}}会被当作{{domxref("Text")}}节点对待(也就是说插入的不是 HTML 代码)。

      语法

      diff --git a/files/zh-cn/web/api/element/queryselector/index.html b/files/zh-cn/web/api/element/queryselector/index.html index c2df6f28cb95d0..b9c67f06cb9248 100644 --- a/files/zh-cn/web/api/element/queryselector/index.html +++ b/files/zh-cn/web/api/element/queryselector/index.html @@ -23,7 +23,7 @@

      参数

      selectors
      -
      一组用来匹配{{domxref("Element")}} baseElement后代元素的选择器selectors;必须是合法的 css 选择器,否则会引起语法错误。返回匹配指定选择器的第一个元素。
      +
      一组用来匹配{{domxref("Element")}} baseElement后代元素的选择器selectors;必须是合法的 css 选择器,否则会引起语法错误。返回匹配指定选择器的第一个元素。

      返回值

      @@ -81,7 +81,7 @@

      结果

      {{ EmbedLiveSample('整个层次结构有效', 600, 160) }}

      -

      注意,尽管基础元素没有包括选择器中含有的 {{domxref("div")}} 元素,选择器"div span"依旧匹配了其中的{{HTMLElement("span")}}元素。 

      +

      注意,尽管基础元素没有包括选择器中含有的 {{domxref("div")}} 元素,选择器"div span"依旧匹配了其中的{{HTMLElement("span")}}元素。

      更多例子

      @@ -101,17 +101,17 @@

      规范

      - + - + - +
      基本支持 CompatChrome("35") 支持[1] GeckoDesktop(59) 支持支持需-ms 前缀 
      +
      支持需-ms 前缀
      11 支持
      支持程度未知 不支持支持程度未知 Chrome("35") 支持[1] GeckoMobile("29") 支持[2]10 支持需-ms 前缀 10 支持需-ms 前缀 支持程度未知 不支持
      {{SpecName('DOM4','#dom-parentnode-queryselectorallselectors','querySelectorAll()')}} {{Spec2('DOM4')}} 
      {{SpecName('Selectors API Level 2','#queryselectorall','querySelectorAll()')}} {{Spec2('Selectors API Level 2')}} 
      {{SpecName('Selectors API Level 1','#queryselectorall','querySelectorAll()')}} {{Spec2('Selectors API Level 1')}} 
      diff --git a/files/zh-cn/web/api/element/queryselectorall/index.html b/files/zh-cn/web/api/element/queryselectorall/index.html index b0c792578bedf6..ece41478718fa9 100644 --- a/files/zh-cn/web/api/element/queryselectorall/index.html +++ b/files/zh-cn/web/api/element/queryselectorall/index.html @@ -8,7 +8,7 @@

      返回一个 non-live 的NodeList, 它包含所有元素的非活动节点,该元素来自与其匹配指定的 CSS 选择器组的元素。(基础元素本身不包括,即使它匹配。)

      -

      注意:该 API 的定义已被移动到 {{domxref("ParentNode")}} 接口。

      +

      注意:该 API 的定义已被移动到 {{domxref("ParentNode")}} 接口。

      语法

      diff --git a/files/zh-cn/web/api/element/remove/index.html b/files/zh-cn/web/api/element/remove/index.html index 460049a7902486..acca28046f2c65 100644 --- a/files/zh-cn/web/api/element/remove/index.html +++ b/files/zh-cn/web/api/element/remove/index.html @@ -21,7 +21,7 @@

      语法

      示例

      -

      使用 remove()

      +

      使用 remove()

      <div id="div-01">Here is div-01</div>
       <div id="div-02">Here is div-02</div>
      @@ -35,9 +35,9 @@ 

      使用 remove()

      {{EmbedLiveSample('使用_remove()')}}

      -

      Element.remove() 是不可见的

      +

      Element.remove() 是不可见的

      -

      with 语句中,remove() 方法是不可见的。参阅 {{jsxref("Symbol.unscopables")}} 了解更多信息。

      +

      with 语句中,remove() 方法是不可见的。参阅 {{jsxref("Symbol.unscopables")}} 了解更多信息。

      with(node) {
         remove();
      @@ -80,6 +80,6 @@ 

      参见

      • {{domxref("ChildNode")}} 纯接口。
      • -
        实现此纯接口的对象类型: {{domxref("CharacterData")}}、{{domxref("Element")}} , 和 {{domxref("DocumentType")}}.
        +
        实现此纯接口的对象类型: {{domxref("CharacterData")}}、{{domxref("Element")}} , 和 {{domxref("DocumentType")}}.
      diff --git a/files/zh-cn/web/api/element/removeattribute/index.html b/files/zh-cn/web/api/element/removeattribute/index.html index 9aebe8ae9bc71a..acb5d6d276049e 100644 --- a/files/zh-cn/web/api/element/removeattribute/index.html +++ b/files/zh-cn/web/api/element/removeattribute/index.html @@ -32,7 +32,7 @@

      返回值

      使用说明

      -

      若要彻底移除一个属性的效果,应当使用  removeAttribute(),而不是使用 {{domxref("Element.setAttribute", "setAttribute()")}} 将属性值设置为  null。对于许多属性,如果仅将其值设为 null,这不会造达成和预期一样的效果。

      +

      若要彻底移除一个属性的效果,应当使用 removeAttribute(),而不是使用 {{domxref("Element.setAttribute", "setAttribute()")}} 将属性值设置为 null。对于许多属性,如果仅将其值设为 null,这不会造达成和预期一样的效果。

      {{ DOMAttributeMethods() }}

      diff --git a/files/zh-cn/web/api/element/removeattributenode/index.html b/files/zh-cn/web/api/element/removeattributenode/index.html index eac8140b4db8b2..867c08ab9124db 100644 --- a/files/zh-cn/web/api/element/removeattributenode/index.html +++ b/files/zh-cn/web/api/element/removeattributenode/index.html @@ -5,7 +5,7 @@ ---

      {{ APIRef("DOM") }}

      -

      removeAttributeNode 从当前的 element(元素节点) 删除指定的属性

      +

      removeAttributeNode 从当前的 element(元素节点) 删除指定的属性

      Syntax

      @@ -13,8 +13,8 @@

      Syntax

        -
      • attributeNode 是需要被删除的 Attr 节点。
      • -
      • removedAttr 是被删除了的 Attr 节点。
      • +
      • attributeNode 是需要被删除的 Attr 节点。
      • +
      • removedAttr 是被删除了的 Attr 节点。

      例如

      @@ -31,10 +31,10 @@

      注意

      如果删除有默认值的属性,相当于将属性值替换为默认值。属性只有在具有同样的命名空间、本地名称以及原始前缀时,才会在被删除的时候替换为默认值。

      -

      不像 setAttributeNode 和 setAttributeNodeNS 配对使用那样,需要知道要替换哪个现有属性。removeAttributeNode 没有那样的要求,也没有 removeAttributeNodeNS。removeAttributeNode 可以删除命名空间以及非命名空间的属性。

      +

      不像 setAttributeNode 和 setAttributeNodeNS 配对使用那样,需要知道要替换哪个现有属性。removeAttributeNode 没有那样的要求,也没有 removeAttributeNodeNS。removeAttributeNode 可以删除命名空间以及非命名空间的属性。

      {{ DOMAttributeMethods() }}

      规范

      -

      DOM Level 2 Core: removeAttributeNode (DOM Level 1 Core 里面的介绍)

      +

      DOM Level 2 Core: removeAttributeNode (DOM Level 1 Core 里面的介绍)

      diff --git a/files/zh-cn/web/api/element/replacechildren/index.html b/files/zh-cn/web/api/element/replacechildren/index.html index b7b23abb457038..92440015aca347 100644 --- a/files/zh-cn/web/api/element/replacechildren/index.html +++ b/files/zh-cn/web/api/element/replacechildren/index.html @@ -14,7 +14,7 @@ ---
      {{APIRef("DOM")}}{{seecompattable}}
      -

      Element.replaceChildren() 方法将一个 {{domxref("Node")}} 的后代替换为指定的后代集合。这些新的后代可以为 {{domxref("DOMString")}} 或 {{domxref("Node")}} 对象。

      +

      Element.replaceChildren() 方法将一个 {{domxref("Node")}} 的后代替换为指定的后代集合。这些新的后代可以为 {{domxref("DOMString")}} 或 {{domxref("Node")}} 对象。

      语法

      @@ -26,7 +26,7 @@

      参数

      nodesOrDOMStrings
      -
      一组用于替换 Element 现有后代的 {{domxref("Node")}} 或 {{domxref("DOMString")}} 对象。若没有指定替代对象时,Element 的所有后代都将被清空。
      +
      一组用于替换 Element 现有后代的 {{domxref("Node")}} 或 {{domxref("DOMString")}} 对象。若没有指定替代对象时,Element 的所有后代都将被清空。

      异常

      @@ -39,13 +39,13 @@

      例子

      清空一个节点

      -

      replaceChildren() 为清空一个节点的后代提供了非常方便的机制,您只需在父节点不指定任何实参调用该方法即可。

      +

      replaceChildren() 为清空一个节点的后代提供了非常方便的机制,您只需在父节点不指定任何实参调用该方法即可。

      myNode.replaceChildren();

      在父节点之间转移节点

      -

      replaceChildren() 允许您更轻松地在父节点之间转移节点,而无需依赖冗余的循环代码。例如,有一个简单的应用程序让您选择您派对上的食物。它的 HTML 可能如下:

      +

      replaceChildren() 允许您更轻松地在父节点之间转移节点,而无需依赖冗余的循环代码。例如,有一个简单的应用程序让您选择您派对上的食物。它的 HTML 可能如下:

      <h2>派对食物列表</h2>
       
      @@ -114,7 +114,7 @@ 

      在父节点之间转移节点

      我们要做的是,当按下 “是” 按钮时,将 “否” 列表中的所有选定选项都转移到 “是” 列表中,然后当按下“否”按钮时,将 “是” 列表中的所有选定选项都转移到 “否” 列表中。

      -

      为此,我们为每个按钮提供一个 click 事件处理句柄,该事件句柄将所选选项赋值到第一个常量中,将要转移到的列表中的现有的选项赋值到第二个常量中。然后,它会调用列表的 replaceChildren() 方法,使用延展运算符传入两个常量,进而将两个常量中包含的所有选项转移到目标列表。

      +

      为此,我们为每个按钮提供一个 click 事件处理句柄,该事件句柄将所选选项赋值到第一个常量中,将要转移到的列表中的现有的选项赋值到第二个常量中。然后,它会调用列表的 replaceChildren() 方法,使用延展运算符传入两个常量,进而将两个常量中包含的所有选项转移到目标列表。

      const noSelect = document.getElementById('no');
       const yesSelect = document.getElementById('yes');
      diff --git a/files/zh-cn/web/api/element/replacewith/index.html b/files/zh-cn/web/api/element/replacewith/index.html
      index 25819a3ce0f7e8..0299d77cf5ba1c 100644
      --- a/files/zh-cn/web/api/element/replacewith/index.html
      +++ b/files/zh-cn/web/api/element/replacewith/index.html
      @@ -13,7 +13,7 @@
       ---
       
      {{APIRef("DOM")}} {{SeeCompatTable}}
      -

      ChildNode.replaceWith() 的方法用一套 {{domxref("Node")}} 对象或者 {{domxref("DOMString")}} 对象,替换了该节点父节点下的子节点 。{{domxref("DOMString")}} 对象被当做等效的{{domxref("Text")}} 节点插入。

      +

      ChildNode.replaceWith() 的方法用一套 {{domxref("Node")}} 对象或者 {{domxref("DOMString")}} 对象,替换了该节点父节点下的子节点 。{{domxref("DOMString")}} 对象被当做等效的{{domxref("Text")}} 节点插入。

      语法

      @@ -25,7 +25,7 @@

      参数

      节点
      -
      一系列用来替换的{{domxref("Node")}} 对象或者 {{domxref("DOMString")}} 对象。
      +
      一系列用来替换的{{domxref("Node")}} 对象或者 {{domxref("DOMString")}} 对象。

      例外

      diff --git a/files/zh-cn/web/api/element/requestfullscreen/index.html b/files/zh-cn/web/api/element/requestfullscreen/index.html index 3b31b973d9386d..17c4a9391da8b9 100644 --- a/files/zh-cn/web/api/element/requestfullscreen/index.html +++ b/files/zh-cn/web/api/element/requestfullscreen/index.html @@ -5,11 +5,11 @@ ---
      {{APIRef("Fullscreen API")}}
      -

      Element.requestFullscreen() 方法用于发出异步请求使元素进入全屏模式。

      +

      Element.requestFullscreen() 方法用于发出异步请求使元素进入全屏模式。

      调用此 API 并不能保证元素一定能够进入全屏模式。如果元素被允许进入全屏幕模式,返回的{{JSxRef("Promise")}}会 resolve,并且该元素会收到一个{{event("fullscreenchange")}}事件,通知它已经进入全屏模式。如果全屏请求被拒绝,返回的 promise 会变成 rejected 并且该元素会收到一个{{Event('fullscreenerror')}}事件。如果该元素已经从原来的文档中分离,那么该文档将会收到这些事件。

      -

      早期的 Fullscreen API 实现总是会把这些事件发送给 document,而不是调用的元素,所以你自己可能需要处理这样的情况。参考 {{SectionOnPage("/zh-CN/docs/Web/Events/fullscreen", "Browser compatibility")}} 来得知哪些浏览器做了这个改动。

      +

      早期的 Fullscreen API 实现总是会把这些事件发送给 document,而不是调用的元素,所以你自己可能需要处理这样的情况。参考 {{SectionOnPage("/zh-CN/docs/Web/Events/fullscreen", "Browser compatibility")}} 来得知哪些浏览器做了这个改动。

      注意:这个方法只能在用户交互或者设备方向改变的时候调用,否则将会失败。

      @@ -22,17 +22,17 @@

      语法

      参数

      -

      options {{optional_inline}}

      +

      options {{optional_inline}}

      一个{{domxref("FullscreenOptions")}}对象提供切换到全屏模式的控制选项。目前,唯一的选项是{{domxref("FullscreenOptions.navigationUI", "navigationUI")}},这控制了是否在元素处于全屏模式时显示导航条 UI。默认值是"auto",表明这将由浏览器来决定是否显示导航条。

      返回值

      -

      在完成切换全屏模式后,返回一个已经用值 undefined resolved 的{{JSxRef("Promise")}}

      +

      在完成切换全屏模式后,返回一个已经用值 undefined resolved 的{{JSxRef("Promise")}}

      异常

      -

      requestFullscreen() 通过拒绝返回的 Promise来生成错误条件,而不是抛出一个传统的异常。拒绝控制器接收以下的某一个值:

      +

      requestFullscreen() 通过拒绝返回的 Promise来生成错误条件,而不是抛出一个传统的异常。拒绝控制器接收以下的某一个值:

      {{jsxref("TypeError")}}
      @@ -43,7 +43,7 @@

      异常

    • 文档中包含的元素未完全激活,也就是说不是当前活动的元素。
    • 元素不在文档之内。
    • 因为功能策略限制配置或其他访问控制,元素不被允许使用"fullscreen"功能。
    • -
    • 元素和它的文档是同一个节点。 
    • +
    • 元素和它的文档是同一个节点。
    @@ -51,7 +51,7 @@

    异常

    示例

    -

    在调用requestFullScreen() 之前,可以对{{event("fullscreenchange")}} 和 {{event("fullscreenerror")}}事件进行监听,这样在请求进入全屏模式成功或者失败时都能收到事件通知。

    +

    在调用requestFullScreen() 之前,可以对{{event("fullscreenchange")}} 和 {{event("fullscreenerror")}}事件进行监听,这样在请求进入全屏模式成功或者失败时都能收到事件通知。

    规范

    diff --git a/files/zh-cn/web/api/element/scroll/index.html b/files/zh-cn/web/api/element/scroll/index.html index 9422a06289ad75..4f996ccde024da 100644 --- a/files/zh-cn/web/api/element/scroll/index.html +++ b/files/zh-cn/web/api/element/scroll/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef}}
    -

     scroll() 方法是用于在给定的元素中滚动到某个特定坐标的 {{domxref("Element")}} 接口。

    +

    scroll() 方法是用于在给定的元素中滚动到某个特定坐标的 {{domxref("Element")}} 接口。

    Syntax

    @@ -16,14 +16,14 @@

    Syntax

    Parameters

      -
    • x-coord 是指在元素左上方区域横轴方向上想要显示的像素。
    • +
    • x-coord 是指在元素左上方区域横轴方向上想要显示的像素。
    • y-coord 是指在元素左上方区域纵轴方向上想要显示的像素。

    - or -

      -
    • options 是一个 {{domxref("ScrollToOptions")}} 的字典。
    • +
    • options 是一个 {{domxref("ScrollToOptions")}} 的字典。

    例子

    @@ -32,7 +32,7 @@

    例子

    element.scroll(0, 1000);

    -

    使用 options:

    +

    使用 options:

    element.scroll({
       top: 100,
    diff --git a/files/zh-cn/web/api/element/scroll_event/index.html b/files/zh-cn/web/api/element/scroll_event/index.html
    index 34e75eed1de9ef..39453858e3f457 100644
    --- a/files/zh-cn/web/api/element/scroll_event/index.html
    +++ b/files/zh-cn/web/api/element/scroll_event/index.html
    @@ -10,7 +10,7 @@
     ---
     
    {{ ApiRef("HTML DOM") }}
    -

    元素的 scroll 事件处理函数。

    +

    元素的 scroll 事件处理函数。

    语法

    @@ -21,10 +21,10 @@

    参数

    functionReference 是一个函数的引用。当该元素滚动时,会执行该函数。

    -

    备注:不要将 onscroll 与 {{domxref("GlobalEventHandlers.onwheel", "onwheel")}}混淆。onwheel 是鼠标滚轮旋转, 而 onscroll 处理的是对象内部内容区的滚动事件。

    +

    备注:不要将 onscroll 与 {{domxref("GlobalEventHandlers.onwheel", "onwheel")}}混淆。onwheel 是鼠标滚轮旋转, 而 onscroll 处理的是对象内部内容区的滚动事件。

    -

     

    +

    示例

    @@ -104,7 +104,7 @@

    Result

    {{EmbedLiveSample("Example", 700, 200)}}

    注意

    -

    当用户滚动某个元素的内容时 scroll 事件将会被触发。Element.onscroll 同等于 element.addEventListener("scroll" ... )。

    +

    当用户滚动某个元素的内容时 scroll 事件将会被触发。Element.onscroll 同等于 element.addEventListener("scroll" ... )。

    规范

    diff --git a/files/zh-cn/web/api/element/scrollby/index.html b/files/zh-cn/web/api/element/scrollby/index.html index 94abd8344f6cc2..f4dad7e40b5877 100644 --- a/files/zh-cn/web/api/element/scrollby/index.html +++ b/files/zh-cn/web/api/element/scrollby/index.html @@ -11,7 +11,7 @@ ---
    {{ APIRef() }}
    -

     scrollBy() 方法是使得元素滚动一段特定距离的 {{domxref("Element")}} 接口。

    +

    scrollBy() 方法是使得元素滚动一段特定距离的 {{domxref("Element")}} 接口。

    Syntax

    @@ -29,7 +29,7 @@

    Parameters

    - or -

      -
    • options 是一个 {{domxref("ScrollToOptions")}} 字典。
    • +
    • options 是一个 {{domxref("ScrollToOptions")}} 字典。

    例子

    @@ -38,7 +38,7 @@

    例子

    element.scrollBy(300, 300);
    -

    使用 options:

    +

    使用 options:

    element.scrollBy({
       top: 100,
    @@ -50,7 +50,7 @@ 

    规范

    {{Specifications}} -

     浏览器兼容性

    +

    浏览器兼容性

    diff --git a/files/zh-cn/web/api/element/scrollintoview/index.html b/files/zh-cn/web/api/element/scrollintoview/index.html index 12f24ab3b70c66..2723524afb6ae7 100644 --- a/files/zh-cn/web/api/element/scrollintoview/index.html +++ b/files/zh-cn/web/api/element/scrollintoview/index.html @@ -19,20 +19,20 @@

    参数

    alignToTop{{optional_inline}}
    一个{{jsxref("Boolean")}}值:
      -
    • 如果为true,元素的顶端将和其所在滚动区的可视区域的顶端对齐。相应的 scrollIntoViewOptions: {block: "start", inline: "nearest"}。这是这个参数的默认值。
    • +
    • 如果为true,元素的顶端将和其所在滚动区的可视区域的顶端对齐。相应的 scrollIntoViewOptions: {block: "start", inline: "nearest"}。这是这个参数的默认值。
    • 如果为false,元素的底端将和其所在滚动区的可视区域的底端对齐。相应的scrollIntoViewOptions: {block: "end", inline: "nearest"}
    -
    scrollIntoViewOptions {{optional_inline}} {{experimental_inline}}
    +
    scrollIntoViewOptions {{optional_inline}} {{experimental_inline}}
    一个包含下列属性的对象:
    -
    behavior {{optional_inline}}
    -
    定义动画过渡效果, "auto"或 "smooth" 之一。默认为 "auto"
    -
    block {{optional_inline}}
    -
    定义垂直方向的对齐, "start""center""end", 或 "nearest"之一。默认为 "start"
    -
    inline {{optional_inline}}
    -
    定义水平方向的对齐, "start""center""end", 或 "nearest"之一。默认为 "nearest"
    +
    behavior {{optional_inline}}
    +
    定义动画过渡效果, "auto""smooth" 之一。默认为 "auto"
    +
    block {{optional_inline}}
    +
    定义垂直方向的对齐, "start", "center", "end", 或 "nearest"之一。默认为 "start"
    +
    inline {{optional_inline}}
    +
    定义水平方向的对齐, "start", "center", "end", 或 "nearest"之一。默认为 "nearest"
    @@ -61,5 +61,5 @@

    浏览器兼容性

    相关内容

      -
    • {{domxref("Element.scrollIntoViewIfNeeded()")}} {{non-standard_inline}}
    • +
    • {{domxref("Element.scrollIntoViewIfNeeded()")}} {{non-standard_inline}}
    diff --git a/files/zh-cn/web/api/element/scrollleft/index.html b/files/zh-cn/web/api/element/scrollleft/index.html index 1f59b6ea91af19..cb693f47882e05 100644 --- a/files/zh-cn/web/api/element/scrollleft/index.html +++ b/files/zh-cn/web/api/element/scrollleft/index.html @@ -8,12 +8,12 @@ ---

    {{ APIRef("DOM") }}

    -

    Element.scrollLeft 属性可以读取或设置元素滚动条到元素左边的距离。

    +

    Element.scrollLeft 属性可以读取或设置元素滚动条到元素左边的距离。

    注意如果这个元素的内容排列方向({{cssxref("direction")}})是rtl (right-to-left) ,那么滚动条会位于最右侧(内容开始处),并且scrollLeft值为 0。此时,当你从右到左拖动滚动条时,scrollLeft 会从 0 变为负数。

    -

    在使用显示比例缩放的系统上,scrollLeft 可能会是一个小数。

    +

    在使用显示比例缩放的系统上,scrollLeft 可能会是一个小数。

    语法

    @@ -31,9 +31,9 @@

    语法

    scrollLeft 可以是任意整数,然而:

      -
    • 如果元素不能滚动(比如:元素没有溢出),那么scrollLeft 的值是 0。
    • +
    • 如果元素不能滚动(比如:元素没有溢出),那么scrollLeft 的值是 0。
    • 如果给scrollLeft 设置的值小于 0,那么scrollLeft 的值将变为 0。
    • -
    • 如果给scrollLeft 设置的值大于元素内容最大宽度,那么scrollLeft 的值将被设为元素最大宽度。
    • +
    • 如果给scrollLeft 设置的值大于元素内容最大宽度,那么scrollLeft 的值将被设为元素最大宽度。

    示例

    diff --git a/files/zh-cn/web/api/element/scrollleftmax/index.html b/files/zh-cn/web/api/element/scrollleftmax/index.html index 50161c48c0879f..2bfdca488c7b5e 100644 --- a/files/zh-cn/web/api/element/scrollleftmax/index.html +++ b/files/zh-cn/web/api/element/scrollleftmax/index.html @@ -5,7 +5,7 @@ ---

    {{APIRef("DOM")}}{{Non-standard_header}}

    -

    这个 Element.scrollLeftMax  是只读的属性返回一个 {{jsxref("Number")}} 表示一个元素横向滚动条可滚动的最大距离。

    +

    这个 Element.scrollLeftMax 是只读的属性返回一个 {{jsxref("Number")}} 表示一个元素横向滚动条可滚动的最大距离。

    语法

    diff --git a/files/zh-cn/web/api/element/scrollto/index.html b/files/zh-cn/web/api/element/scrollto/index.html index e68d67e5ec36c7..2b9da7528bc395 100644 --- a/files/zh-cn/web/api/element/scrollto/index.html +++ b/files/zh-cn/web/api/element/scrollto/index.html @@ -10,7 +10,7 @@ translation_of: Web/API/Element/scrollTo ---
    {{ APIRef }}
    -{{domxref("Element")}} 的scrollTo() 方法可以使界面滚动到给定元素的指定坐标位置。
    +{{domxref("Element")}} 的scrollTo() 方法可以使界面滚动到给定元素的指定坐标位置。

    语法

    @@ -28,7 +28,7 @@

    参数

    - or -

      -
    • options 是一个{{domxref("ScrollToOptions")}}对象。
    • +
    • options 是一个{{domxref("ScrollToOptions")}}对象。

    例子

    @@ -36,7 +36,7 @@

    例子

    element.scrollTo(0, 1000);
     
    -

    使用 options:

    +

    使用 options:

    element.scrollTo({
       top: 100,
    diff --git a/files/zh-cn/web/api/element/scrolltop/index.html b/files/zh-cn/web/api/element/scrolltop/index.html
    index fab2924ad96c8d..72a254686c0f3f 100644
    --- a/files/zh-cn/web/api/element/scrolltop/index.html
    +++ b/files/zh-cn/web/api/element/scrolltop/index.html
    @@ -10,9 +10,9 @@
     ---
     

    {{ APIRef("DOM") }}

    -

    Element.scrollTop 属性可以获取或设置一个元素的内容垂直滚动的像素数。

    +

    Element.scrollTop 属性可以获取或设置一个元素的内容垂直滚动的像素数。

    -

    一个元素的 scrollTop 值是这个元素的内容顶部(卷起来的)到它的视口可见内容(的顶部)的距离的度量。当一个元素的内容没有产生垂直方向的滚动条,那么它的 scrollTop 值为0

    +

    一个元素的 scrollTop 值是这个元素的内容顶部(卷起来的)到它的视口可见内容(的顶部)的距离的度量。当一个元素的内容没有产生垂直方向的滚动条,那么它的 scrollTop 值为0

    在使用显示比例缩放的系统上,scrollTop可能会提供一个小数。

    @@ -24,18 +24,18 @@

    语法

    var intElemScrollTop = someElement.scrollTop;
    -

    运行此代码后, intElemScrollTop 是一个整数,即{{domxref("element")}}的内容向上滚动的像素数。

    +

    运行此代码后, intElemScrollTop 是一个整数,即{{domxref("element")}}的内容向上滚动的像素数。

    // 设置滚动的距离
     element.scrollTop = intValue;
     
    -

    scrollTop 可以被设置为任何整数值,同时注意:

    +

    scrollTop 可以被设置为任何整数值,同时注意:

      -
    • 如果一个元素不能被滚动(例如,它没有溢出,或者这个元素有一个"non-scrollable"属性), scrollTop将被设置为0
    • -
    • 设置scrollTop的值小于 0,scrollTop 被设为0
    • -
    • 如果设置了超出这个容器可滚动的值,scrollTop 会被设为最大值。
    • +
    • 如果一个元素不能被滚动(例如,它没有溢出,或者这个元素有一个"non-scrollable"属性), scrollTop将被设置为0
    • +
    • 设置scrollTop的值小于 0,scrollTop 被设为0
    • +
    • 如果设置了超出这个容器可滚动的值,scrollTop 会被设为最大值。

    例子

    diff --git a/files/zh-cn/web/api/element/scrollwidth/index.html b/files/zh-cn/web/api/element/scrollwidth/index.html index 3d364c4bd86765..ae7e9262f43cb4 100644 --- a/files/zh-cn/web/api/element/scrollwidth/index.html +++ b/files/zh-cn/web/api/element/scrollwidth/index.html @@ -7,7 +7,7 @@ ---
    {{ APIRef("DOM") }}
    -
    Element.scrollWidth 这个只读属性是元素内容宽度的一种度量,包括由于 overflow 溢出而在屏幕上不可见的内容。
    +
    Element.scrollWidth 这个只读属性是元素内容宽度的一种度量,包括由于 overflow 溢出而在屏幕上不可见的内容。
    @@ -16,7 +16,7 @@

    1. 这个属性会进行四舍五入并返回整数,如果你需要小数形式的值,使用{{ domxref("element.getBoundingClientRect()") }}.

    -

    2. 在实际测试过程中,谷歌获取的 Element.scrollWidth 和 IE,火狐下获取的 Element.scrollWidth 并不相同

    +

    2. 在实际测试过程中,谷歌获取的 Element.scrollWidth 和 IE,火狐下获取的 Element.scrollWidth 并不相同

    语法

    diff --git a/files/zh-cn/web/api/element/setattribute/index.html b/files/zh-cn/web/api/element/setattribute/index.html index b6c6e903b90416..156448969deaa5 100644 --- a/files/zh-cn/web/api/element/setattribute/index.html +++ b/files/zh-cn/web/api/element/setattribute/index.html @@ -35,9 +35,9 @@

    参数

    如果指定的属性已经存在,则其值变为传递的值。如果不存在,则创建指定的属性。

    -

    尽管对于不存在的属性,getAttribute() 返回 null,你还是应该使用 removeAttribute() 代替 elt.setAttribute(attr, null) 来删除属性。

    +

    尽管对于不存在的属性,getAttribute() 返回 null,你还是应该使用 removeAttribute() 代替 elt.setAttribute(attr, null) 来删除属性。

    -

    布尔属性(原文是 Boolean attributes)只要出现在元素上就会被认为是 true ,无论它的值是什么; 一般来说,你应该将 value 设置为空字符串 ("") 。(一些人使用这个属性的名称作为值; 这不会出现什么问题,但这是不规范的). See the example below for a practical demonstration.

    +

    布尔属性(原文是 Boolean attributes)只要出现在元素上就会被认为是 true ,无论它的值是什么; 一般来说,你应该将 value 设置为空字符串 ("") 。(一些人使用这个属性的名称作为值; 这不会出现什么问题,但这是不规范的). See the example below for a practical demonstration.

    由于将指定的值转换为字符串,因此指定 null 不一定能达到您的期望。 而不是删除属性或将其值设置为{{jsxref("null")}},而是将属性的值设置为字符串“ null”。 如果要删除属性,请调用{{domxref("Element.removeAttribute”,“ removeAttribute()")}}}。

    diff --git a/files/zh-cn/web/api/element/setattributenode/index.html b/files/zh-cn/web/api/element/setattributenode/index.html index 266fb2ccc5f0b7..6f0e1e79815c6f 100644 --- a/files/zh-cn/web/api/element/setattributenode/index.html +++ b/files/zh-cn/web/api/element/setattributenode/index.html @@ -9,7 +9,7 @@ ---

    {{ APIRef("DOM") }}

    -

    setAttributeNode() 为指定的 Element 添加属性节点。

    +

    setAttributeNode() 为指定的 Element 添加属性节点。

    Syntax

    @@ -18,7 +18,7 @@

    Syntax

    • attribute 是添加到 element 中的属性节点.
    • -
    • replacedAttr 是被替换掉的属性节点。 如果存在原有属性,则函数返回原有属性节点. 
    • +
    • replacedAttr 是被替换掉的属性节点。 如果存在原有属性,则函数返回原有属性节点.

    Example

    @@ -37,7 +37,7 @@

    Notes

    如果 element 中已经存在该属性名的属性,则函数使用新的属性替换掉原有的属性并将原有属性返回

    -

    这个方法很少被用到,多数情况下使用函数 setAttribute() 修改 element 的属性。

    +

    这个方法很少被用到,多数情况下使用函数 setAttribute() 修改 element 的属性。

    {{ DOMAttributeMethods() }}

    diff --git a/files/zh-cn/web/api/element/setattributenodens/index.html b/files/zh-cn/web/api/element/setattributenodens/index.html index 0b3ed1284d65b4..bc1284132a5796 100644 --- a/files/zh-cn/web/api/element/setattributenodens/index.html +++ b/files/zh-cn/web/api/element/setattributenodens/index.html @@ -5,9 +5,9 @@ ---

    {{ APIRef("DOM") }}

    -

    setAttributeNodeNS 可以给一个元素添加一个新的命名空间的属性节点。

    +

    setAttributeNodeNS 可以给一个元素添加一个新的命名空间的属性节点。

    -

                                                                                                                                   (如果对中文有疑惑,请直接阅读原文)

    +

    (如果对中文有疑惑,请直接阅读原文)

    Syntax

    @@ -15,8 +15,8 @@

    Syntax

      -
    • replacedAttr 是被替换的节点, 如果存在, 由此函数返回。
    • -
    • attributeNode 是一个属性节点。
    • +
    • replacedAttr 是被替换的节点, 如果存在, 由此函数返回。
    • +
    • attributeNode 是一个属性节点。

    Example

    @@ -36,9 +36,9 @@

    Example

    Notes

    -

    如果指定的属性在元素上存在, 接着此属性被新的属性替换的话被替换的属性会被返回。

    +

    如果指定的属性在元素上存在, 接着此属性被新的属性替换的话被替换的属性会被返回。

    -

    注意:如果你尝试设置的时候没有克隆那个节点,Mozia 会抛出一个 NS_ERROR_DOM_INUSE_ATTRIBUTE_ERR :"Attribute already in use" 错误, 因为 DOM 需要克隆属性之后才能重复使用 ( 不像其他节点一样可以被删除 ) 。

    +

    注意:如果你尝试设置的时候没有克隆那个节点,Mozia 会抛出一个 NS_ERROR_DOM_INUSE_ATTRIBUTE_ERR :"Attribute already in use" 错误, 因为 DOM 需要克隆属性之后才能重复使用 ( 不像其他节点一样可以被删除 ) 。

    {{ DOMAttributeMethods() }}

    diff --git a/files/zh-cn/web/api/element/setattributens/index.html b/files/zh-cn/web/api/element/setattributens/index.html index 5cb1e1f29836b4..666423ee7d4ee4 100644 --- a/files/zh-cn/web/api/element/setattributens/index.html +++ b/files/zh-cn/web/api/element/setattributens/index.html @@ -17,7 +17,7 @@

    句法

      -
    • namespace 是指定属性的命名空间的一个字符串。
    • +
    • namespace 是指定属性的命名空间的一个字符串。
    • name 是标识要设置的属性的一个字符串。
    • value 是新属性的所需字符串值。
    diff --git a/files/zh-cn/web/api/element/setpointercapture/index.html b/files/zh-cn/web/api/element/setpointercapture/index.html index f337d2dd670172..34c653df0557b3 100644 --- a/files/zh-cn/web/api/element/setpointercapture/index.html +++ b/files/zh-cn/web/api/element/setpointercapture/index.html @@ -9,9 +9,9 @@ ---

    {{APIRef("DOM")}}

    -

    {{domxref("Element")}}接口的setPointerCapture() 方法用于将特定元素指定为未来指针事件的捕获目标。指针的后续事件将以捕获元素为目标,直到捕获被释放(通过{{domxref("Element.releasePointerCapture()")}})。

    +

    {{domxref("Element")}}接口的setPointerCapture() 方法用于将特定元素指定为未来指针事件的捕获目标。指针的后续事件将以捕获元素为目标,直到捕获被释放(通过{{domxref("Element.releasePointerCapture()")}})。

    -
    一旦设置了 pointer capture,  {{event("pointerover")}}, {{event("pointerout")}} {{event("pointerenter")}}, 和{{event("pointerleave")}}  事件将不会被触发,直到越过设置了 capture 的元素的边界。这是因为其他元素将不能再作为 pointer 事件的目标了。这会影响到这些事件在其他元素上的触发。
    +
    一旦设置了 pointer capture, {{event("pointerover")}}, {{event("pointerout")}} {{event("pointerenter")}}, 和{{event("pointerleave")}} 事件将不会被触发,直到越过设置了 capture 的元素的边界。这是因为其他元素将不能再作为 pointer 事件的目标了。这会影响到这些事件在其他元素上的触发。

    指针捕获概述

    @@ -37,7 +37,7 @@

    返回值

    示例

    -

    当您按下它时,此示例在 {{HtmlElement("div")}} 上设置指针捕获。这使您可以滑动元素,即使指针移动到其边界之外也是如此。

    +

    当您按下它时,此示例在 {{HtmlElement("div")}} 上设置指针捕获。这使您可以滑动元素,即使指针移动到其边界之外也是如此。

    HTML

    diff --git a/files/zh-cn/web/api/element/shadowroot/index.html b/files/zh-cn/web/api/element/shadowroot/index.html index e47c70fa3c01b0..b77487b1c97c02 100644 --- a/files/zh-cn/web/api/element/shadowroot/index.html +++ b/files/zh-cn/web/api/element/shadowroot/index.html @@ -9,7 +9,7 @@ ---

    {{APIRef('Shadow DOM')}}{{SeeCompatTable}}

    -

    Element.shadowRoot 是只读属性,表示元素挂载的 shadow root。可以使用 {{domxref('Element.attachShadow')}} 给一个已存在的元素添加 shadow root。

    +

    Element.shadowRoot 是只读属性,表示元素挂载的 shadow root。可以使用 {{domxref('Element.attachShadow')}} 给一个已存在的元素添加 shadow root。

    语法

    @@ -18,11 +18,11 @@

    语法

    -

    可以是一个{{domxref('ShadowRoot')}}实例对象,但如果一个 shadow root 的 {{domxref("ShadowRoot.mode", "mode")}}被设置为 closed那么它的值将会是 null。(详情请见 {{domxref("Element.attachShadow")}} ).

    +

    可以是一个{{domxref('ShadowRoot')}}实例对象,但如果一个 shadow root 的 {{domxref("ShadowRoot.mode", "mode")}}被设置为 closed那么它的值将会是 null。(详情请见 {{domxref("Element.attachShadow")}} ).

    示例

    -

    下面代码片段取自 life-cycle-callbacks (在线查看), 在这个示例中我们创建了一个在元素属性中指定了大小和颜色的正方形元素。

    +

    下面代码片段取自 life-cycle-callbacks (在线查看), 在这个示例中我们创建了一个在元素属性中指定了大小和颜色的正方形元素。

    <custom-square>标签的 class 定义中我们在生命周期的回调函数里调用了一些外部方法——updateStyle(),正是这个函数使得我们添加的正方形元素可以改变大小和颜色。你可以看到我们将this(即我们创建的正方形元素本身)作为一个参数传入了这个方法。

    diff --git a/files/zh-cn/web/api/element/show_event/index.html b/files/zh-cn/web/api/element/show_event/index.html index e40f62acd4d0c2..215ef0d5ac1adb 100644 --- a/files/zh-cn/web/api/element/show_event/index.html +++ b/files/zh-cn/web/api/element/show_event/index.html @@ -60,13 +60,13 @@

    例子

    <div contextmenu="test"></div>
     <menu type="context" id="test">
    -    <menuitem label="alert" onclick="alert('the alert label has been clicked')" />
    +    <menuitem label="alert" onclick="alert('the alert label has been clicked')" />
     </menu>
     
     <script>
    -  document.getElementById("test").addEventListener("show", function(e){
    -    alert("the context menu will be displayed");
    -  }, false);
    +  document.getElementById("test").addEventListener("show", function(e){
    +    alert("the context menu will be displayed");
    +  }, false);
     </script>
     
    diff --git a/files/zh-cn/web/api/element/slot/index.html b/files/zh-cn/web/api/element/slot/index.html index 96b73db8a8cc86..d1eb2d3e3a70ca 100644 --- a/files/zh-cn/web/api/element/slot/index.html +++ b/files/zh-cn/web/api/element/slot/index.html @@ -27,15 +27,15 @@

    示例

    -

    在示例 simple-template example (在线查看) 中,我们创建了一个简单的自定义元素叫做 <my-paragraph> ,并为它添加了 shadow root,然后使用一个包含以 my-text为名称的 slot 的 template 来填充它。

    +

    在示例 simple-template example (在线查看) 中,我们创建了一个简单的自定义元素叫做 <my-paragraph> ,并为它添加了 shadow root,然后使用一个包含以 my-text为名称的 slot 的 template 来填充它。

    -

    当 <my-paragraph> 在文档中被使用时,slot 标签中的内容会被填充到拥有slot="my-text"属性的元素之中,我们称这种元素为 slotable element。(事实上可以看作是拥有 slot 属性的元素被填充到了 template 中有<slot>标签存在的地方)请看下面的示例:

    +

    <my-paragraph> 在文档中被使用时,slot 标签中的内容会被填充到拥有slot="my-text"属性的元素之中,我们称这种元素为 slotable element。(事实上可以看作是拥有 slot 属性的元素被填充到了 template 中有<slot>标签存在的地方)请看下面的示例:

    <my-paragraph>
       <span slot="my-text">Let's have some different text!</span>
     </my-paragraph>
    -

    在 Javascript 代码中我们获取到上面代码中的 span 的引用,然后将对应的 <slot> 元素的引用的名称打印在控制台中。

    +

    在 Javascript 代码中我们获取到上面代码中的 span 的引用,然后将对应的 <slot> 元素的引用的名称打印在控制台中。

    let slottedSpan = document.querySelector('my-paragraph span')
     console.log(slottedSpan.slot); // logs 'my-text'
    @@ -49,4 +49,4 @@ 

    浏览器兼容性

    {{Compat("api.Element.slot")}}
    -
     
    +
    diff --git a/files/zh-cn/web/api/element/touchcancel_event/index.html b/files/zh-cn/web/api/element/touchcancel_event/index.html index a0f4899605df07..224a6b1070e9a2 100644 --- a/files/zh-cn/web/api/element/touchcancel_event/index.html +++ b/files/zh-cn/web/api/element/touchcancel_event/index.html @@ -53,5 +53,5 @@

    参见

    diff --git a/files/zh-cn/web/api/element/touchmove_event/index.html b/files/zh-cn/web/api/element/touchmove_event/index.html index a6d3c98f47aaa6..6f79f9a0e0841f 100644 --- a/files/zh-cn/web/api/element/touchmove_event/index.html +++ b/files/zh-cn/web/api/element/touchmove_event/index.html @@ -11,7 +11,7 @@

    {{SeeCompatTable}}

    -

    备注:这个属性没有正式标准化。它在 {{SpecName('Touch Events 2')}} {{Spec2('Touch Events 2')}} 规范中提出,而不在 {{SpecName('Touch Events')}} {{Spec2('Touch Events')}} 中。这个属性没有被广泛地实现。

    +

    备注:这个属性没有正式标准化。它在 {{SpecName('Touch Events 2')}} {{Spec2('Touch Events 2')}} 规范中提出,而不在 {{SpecName('Touch Events')}} {{Spec2('Touch Events')}} 中。这个属性没有被广泛地实现。

    语法

    @@ -23,12 +23,12 @@

    Return value

    moveHandler
    -
    someElement元素的 touchmove 事件处理句柄/函数。
    +
    someElement元素的 touchmove 事件处理句柄/函数。

    例子

    -

    这个例子展示了两种通过 ontouchmove 设置元素的 touchmove 事件处理句柄/函数的方式。

    +

    这个例子展示了两种通过 ontouchmove 设置元素的 touchmove 事件处理句柄/函数的方式。

    <html>
     <script>
    diff --git a/files/zh-cn/web/api/element/touchstart_event/index.html b/files/zh-cn/web/api/element/touchstart_event/index.html
    index caa9455b03eeac..a85f571be25024 100644
    --- a/files/zh-cn/web/api/element/touchstart_event/index.html
    +++ b/files/zh-cn/web/api/element/touchstart_event/index.html
    @@ -14,7 +14,7 @@
     ---
     

    {{APIRef}}

    -

    当一个或多个触摸点与触控设备表面接触时触发touchstart 事件。

    +

    当一个或多个触摸点与触控设备表面接触时触发touchstart 事件。

    @@ -55,5 +55,5 @@

    参见

    diff --git a/files/zh-cn/web/api/element/transitioncancel_event/index.html b/files/zh-cn/web/api/element/transitioncancel_event/index.html index b9c9217aa3c836..bf6749d36be485 100644 --- a/files/zh-cn/web/api/element/transitioncancel_event/index.html +++ b/files/zh-cn/web/api/element/transitioncancel_event/index.html @@ -6,7 +6,7 @@ ---
    {{APIRef("CSS3 Transitions")}}
    -

    {{domxref("GlobalEventHandlers")}}混合 的 ontransitioncancel  属性 是处理 {{event("transitioncancel")}} 事件的手柄{{event("Event_handlers", "event handler")}}.

    +

    {{domxref("GlobalEventHandlers")}}混合 的 ontransitioncancel 属性 是处理 {{event("transitioncancel")}} 事件的手柄{{event("Event_handlers", "event handler")}}.

    domxref("GlobalEventHandlers") 与 event("Event_handlers", "event handler"): dom 修订版本的事件手柄。

    @@ -41,7 +41,7 @@

    Example

    在本例中,我们使用{{event("transitionrun")}}和{{event("transitionend")}}事件来检测转换何时开始和结束,从而导致在转换期间发生文本更新。这也可以用来触发动画或其他效果,以允许连锁反应。

    -

    除此之外,我们也使用 {{event("click")}} 事件使盒子消失 (display: none;), 显示如何触发 {{event("transitioncancel")}} 事件。

    +

    除此之外,我们也使用 {{event("click")}} 事件使盒子消失 (display: none;), 显示如何触发 {{event("transitioncancel")}} 事件。

    HTML content

    @@ -57,26 +57,26 @@

    CSS content

    .box {
       margin-left: 70px;
       margin-top: 30px;
    -  border-style: solid;
    -  border-width: 1px;
    -  display: block;
    -  width: 100px;
    -  height: 100px;
    -  background-color: #0000FF;
    +  border-style: solid;
    +  border-width: 1px;
    +  display: block;
    +  width: 100px;
    +  height: 100px;
    +  background-color: #0000FF;
       color: #FFFFFF;
       padding: 20px;
       font: bold 1.6em "Helvetica", "Arial", sans-serif;
    -  -webkit-transition: width 2s, height 2s, background-color 2s, -webkit-transform 2s, color 2s;
    -  transition: width 2s, height 2s, background-color 2s, transform 2s, color 2s;
    +  -webkit-transition: width 2s, height 2s, background-color 2s, -webkit-transform 2s, color 2s;
    +  transition: width 2s, height 2s, background-color 2s, transform 2s, color 2s;
     }
     
     .box:hover {
    -  background-color: #FFCCCC;
    +  background-color: #FFCCCC;
       color: #000000;
    -  width: 200px;
    -  height: 200px;
    -  -webkit-transform: rotate(180deg);
    -  transform: rotate(180deg);
    +  width: 200px;
    +  height: 200px;
    +  -webkit-transform: rotate(180deg);
    +  transform: rotate(180deg);
     }
     
    diff --git a/files/zh-cn/web/api/element/wheel_event/index.html b/files/zh-cn/web/api/element/wheel_event/index.html index e1b9547c16b83d..d80d7b2339c652 100644 --- a/files/zh-cn/web/api/element/wheel_event/index.html +++ b/files/zh-cn/web/api/element/wheel_event/index.html @@ -26,7 +26,7 @@

    概要

    属性

    -

    滚轮事件实现了以下事件的属性: {{domxref("WheelEvent")}}, {{domxref("MouseEvent")}}, {{domxref("UIEvent")}} and {{domxref("Event")}}.

    +

    滚轮事件实现了以下事件的属性: {{domxref("WheelEvent")}}, {{domxref("MouseEvent")}}, {{domxref("UIEvent")}} and {{domxref("Event")}}.

    Properties of WheelEvent

    @@ -74,70 +74,70 @@

    浏览器兼容性

    跨浏览器监听滚动事件

    -

    以下脚本创建了一个全局的 addWheelListener 方法,它可以兼容各浏览器监听滚动事件,并且阻止默认行为。

    +

    以下脚本创建了一个全局的 addWheelListener 方法,它可以兼容各浏览器监听滚动事件,并且阻止默认行为。

    // creates a global "addWheelListener" method
     // example: addWheelListener( elem, function( e ) { console.log( e.deltaY ); e.preventDefault(); } );
     (function(window,document) {
     
    -    var prefix = "", _addEventListener, onwheel, support;
    +    var prefix = "", _addEventListener, onwheel, support;
     
    -    // detect event model
    -    if ( window.addEventListener ) {
    -        _addEventListener = "addEventListener";
    -    } else {
    -        _addEventListener = "attachEvent";
    -        prefix = "on";
    -    }
    +    // detect event model
    +    if ( window.addEventListener ) {
    +        _addEventListener = "addEventListener";
    +    } else {
    +        _addEventListener = "attachEvent";
    +        prefix = "on";
    +    }
     
    -    // detect available wheel event
    +    // detect available wheel event
         support = "onwheel" in document.createElement("div") ? "wheel" : // 各个厂商的高版本浏览器都支持"wheel"
                   document.onmousewheel !== undefined ? "mousewheel" : // Webkit 和 IE 一定支持"mousewheel"
                   "DOMMouseScroll"; // 低版本 firefox
     
    -    window.addWheelListener = function( elem, callback, useCapture ) {
    -        _addWheelListener( elem, support, callback, useCapture );
    -
    -        // handle MozMousePixelScroll in older Firefox
    -        if( support == "DOMMouseScroll" ) {
    -            _addWheelListener( elem, "MozMousePixelScroll", callback, useCapture );
    -        }
    -    };
    -
    -    function _addWheelListener( elem, eventName, callback, useCapture ) {
    -        elem[ _addEventListener ]( prefix + eventName, support == "wheel" ? callback : function( originalEvent ) {
    -            !originalEvent && ( originalEvent = window.event );
    -
    -            // create a normalized event object
    -            var event = {
    -                // keep a ref to the original event object
    -                originalEvent: originalEvent,
    -                target: originalEvent.target || originalEvent.srcElement,
    -                type: "wheel",
    -                deltaMode: originalEvent.type == "MozMousePixelScroll" ? 0 : 1,
    -                deltaX: 0,
    -                deltaZ: 0,
    -                preventDefault: function() {
    -                    originalEvent.preventDefault ?
    -                        originalEvent.preventDefault() :
    -                        originalEvent.returnValue = false;
    -                }
    -            };
    -
    -            // calculate deltaY (and deltaX) according to the event
    -            if ( support == "mousewheel" ) {
    -                event.deltaY = - 1/40 * originalEvent.wheelDelta;
    -                // Webkit also support wheelDeltaX
    -                originalEvent.wheelDeltaX && ( event.deltaX = - 1/40 * originalEvent.wheelDeltaX );
    -            } else {
    -                event.deltaY = originalEvent.detail;
    -            }
    -
    -            // it's time to fire the callback
    -            return callback( event );
    -
    -        }, useCapture || false );
    -    }
    +    window.addWheelListener = function( elem, callback, useCapture ) {
    +        _addWheelListener( elem, support, callback, useCapture );
    +
    +        // handle MozMousePixelScroll in older Firefox
    +        if( support == "DOMMouseScroll" ) {
    +            _addWheelListener( elem, "MozMousePixelScroll", callback, useCapture );
    +        }
    +    };
    +
    +    function _addWheelListener( elem, eventName, callback, useCapture ) {
    +        elem[ _addEventListener ]( prefix + eventName, support == "wheel" ? callback : function( originalEvent ) {
    +            !originalEvent && ( originalEvent = window.event );
    +
    +            // create a normalized event object
    +            var event = {
    +                // keep a ref to the original event object
    +                originalEvent: originalEvent,
    +                target: originalEvent.target || originalEvent.srcElement,
    +                type: "wheel",
    +                deltaMode: originalEvent.type == "MozMousePixelScroll" ? 0 : 1,
    +                deltaX: 0,
    +                deltaZ: 0,
    +                preventDefault: function() {
    +                    originalEvent.preventDefault ?
    +                        originalEvent.preventDefault() :
    +                        originalEvent.returnValue = false;
    +                }
    +            };
    +
    +            // calculate deltaY (and deltaX) according to the event
    +            if ( support == "mousewheel" ) {
    +                event.deltaY = - 1/40 * originalEvent.wheelDelta;
    +                // Webkit also support wheelDeltaX
    +                originalEvent.wheelDeltaX && ( event.deltaX = - 1/40 * originalEvent.wheelDeltaX );
    +            } else {
    +                event.deltaY = originalEvent.detail;
    +            }
    +
    +            // it's time to fire the callback
    +            return callback( event );
    +
    +        }, useCapture || false );
    +    }
     
     })(window,document);
    @@ -145,21 +145,21 @@

    Gecko notes

    滚轮事件和其它的鼠标滚动事件

    -

    如果一个用户真实操作触发的滚轮事件没有被处理,这会触发一个 DOMMouseScroll 事件和一个 MozMousePixelScroll 事件以向下兼容。它们的属性值由滚轮事件 delta 值和最近的 ancestor clipped 元素计算出。(i.e., overflow 不可见). 如果滚轮事件或其它任意一个剩余事件被 {{ domxref("event.preventDefault()") }}阻止,将什么都不会发生。

    +

    如果一个用户真实操作触发的滚轮事件没有被处理,这会触发一个 DOMMouseScroll 事件和一个 MozMousePixelScroll 事件以向下兼容。它们的属性值由滚轮事件 delta 值和最近的 ancestor clipped 元素计算出。(i.e., overflow 不可见). 如果滚轮事件或其它任意一个剩余事件被 {{ domxref("event.preventDefault()") }}阻止,将什么都不会发生。

    以下为事件顺序:

    1. 滚轮事件处于默认事件组 (web 应用和浏览器插件都可以处理这个组的事件)
    2. -
    3. 当连续滚轮事件 deltaY 的值累计大于 1 或小于-1 时,竖直方向的 DOMMouseScroll 事件既属于默认事件组也属于系统事件组
    4. -
    5. 当最近的滚轮事件的 deltaY 值非零时,两个事件组都包含竖直方向的 MozMousePixelScroll 事件
    6. -
    7. 当连续滚轮事件 deltaX 的值累计大于 1 或小于-1 时,两个事件组都包含水平方向的 DOMMouseScroll 事件
    8. -
    9. 当最近的滚轮事件的 deltaX 值非零时,两个事件组都包含水平方向的 MozMousePixelScroll 事件
    10. +
    11. 当连续滚轮事件 deltaY 的值累计大于 1 或小于-1 时,竖直方向的 DOMMouseScroll 事件既属于默认事件组也属于系统事件组
    12. +
    13. 当最近的滚轮事件的 deltaY 值非零时,两个事件组都包含竖直方向的 MozMousePixelScroll 事件
    14. +
    15. 当连续滚轮事件 deltaX 的值累计大于 1 或小于-1 时,两个事件组都包含水平方向的 DOMMouseScroll 事件
    16. +
    17. 当最近的滚轮事件的 deltaX 值非零时,两个事件组都包含水平方向的 MozMousePixelScroll 事件
    18. 一个滚轮事件处于系统事件组 (只有浏览器插件可以处理这个组的事件)
    - + @@ -214,30 +214,30 @@

    滚轮事件和其它的鼠

    各个事件调用 preventDefault() 会发生什么?各个事件调用 preventDefault() 会发生什么?
    -

    如果一个浏览器插件需要知道剩余事件是否被 web 内容所处理,它可以使用第 6 个滚轮事件判断,详细内容请查阅系统事件组 nsIEventListenerService 的文档。

    +

    如果一个浏览器插件需要知道剩余事件是否被 web 内容所处理,它可以使用第 6 个滚轮事件判断,详细内容请查阅系统事件组 nsIEventListenerService 的文档。

    -

    通过设置用户偏好可以修改 delta 值和默认行为 (details), 因此开发者不应该期望在处理这个事件后发生特殊的行为。

    +

    通过设置用户偏好可以修改 delta 值和默认行为 (details), 因此开发者不应该期望在处理这个事件后发生特殊的行为。

    delta 值

    -

    delta 值并不代表默认情况下的实际滚动值,如果用户在滚动滚轮时按住其他键,可能会产生其他行为,比如在浏览记录中前进/回退,或者放大/缩小网页内容。 此外,滚动过程中被滚动的元素不一定是目标元素,滚轮事件的目标元素是由事件触发时光标所在位置计算出的。 That event may not only not be the one actually being scrolled,甚至都不可滚动。

    +

    delta 值并不代表默认情况下的实际滚动值,如果用户在滚动滚轮时按住其他键,可能会产生其他行为,比如在浏览记录中前进/回退,或者放大/缩小网页内容。 此外,滚动过程中被滚动的元素不一定是目标元素,滚轮事件的目标元素是由事件触发时光标所在位置计算出的。 That event may not only not be the one actually being scrolled,甚至都不可滚动。

    deltaMode 值

    -

    在 Windows 下,以下三个原生事件造成了 DOM 滚轮事件。

    +

    在 Windows 下,以下三个原生事件造成了 DOM 滚轮事件。

    WM_MOUSEWHEEL (竖直方向的滚动事件)
    -
    deltaMode 值可以是 DOM_DELTA_LINE 或 DOM_DELTA_PAGE。它取决于 Windows 的用户设置 (默认设置为 DOM_DELTA_LINE)。
    +
    deltaMode 值可以是 DOM_DELTA_LINEDOM_DELTA_PAGE。它取决于 Windows 的用户设置 (默认设置为 DOM_DELTA_LINE)。
    WM_MOUSEHWHEEL (水平方向的滚动事件)
    -
    deltaMode 值可以是 DOM_DELTA_LINE 或 DOM_DELTA_PAGE。然而 Windows 的滚轮速度设置界面和鼠标驱动工具都没有提供改为 page scroll 的选项。 所以这个值通常为 DOM_DELTA_LINE.
    +
    deltaMode 值可以是 DOM_DELTA_LINEDOM_DELTA_PAGE。然而 Windows 的滚轮速度设置界面和鼠标驱动工具都没有提供改为 page scroll 的选项。 所以这个值通常为 DOM_DELTA_LINE.
    WM_GESTURE (Only when caused by panning)
    -
    deltaMode 值总是 DOM_DELTA_PIXEL。但请注意大多数笔记本的触摸板都在模拟鼠标滚轮事件而不是调用这个事件, WM_GESTURE 事件通常被平板电脑使用。
    +
    deltaMode 值总是 DOM_DELTA_PIXEL。但请注意大多数笔记本的触摸板都在模拟鼠标滚轮事件而不是调用这个事件, WM_GESTURE 事件通常被平板电脑使用。
    -

    在 Mac 下 deltaMode 值由设备决定。如果设备支持高分辨率像素级滚动,deltaMode 值就是典型的 DOM_DELTA_PIXEL. 然而用户可以通过加前缀"mousewheel.enable_pixel_scrolling"将其改变为 DOM_DELTA_LINE 。如果设备不支持高分辨率滚动,那么 deltaModel 值将一直为 DOM_DELTA_LINE.

    +

    在 Mac 下 deltaMode 值由设备决定。如果设备支持高分辨率像素级滚动,deltaMode 值就是典型的 DOM_DELTA_PIXEL. 然而用户可以通过加前缀"mousewheel.enable_pixel_scrolling"将其改变为 DOM_DELTA_LINE 。如果设备不支持高分辨率滚动,那么 deltaModel 值将一直为 DOM_DELTA_LINE.

    -

    在其它平台下, deltaMode 值总是 DOM_DELTA_LINE.

    +

    在其它平台下, deltaMode 值总是 DOM_DELTA_LINE.

    Untrusted events

    @@ -249,5 +249,5 @@

    参考

  • {{ domxref("WheelEvent") }}
  • Gecko's legacy events: DOMMouseScroll and MozMousePixelScroll
  • Non-Gecko browsers' legacy event: mousewheel
  • -
  • WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=94081
  • +
  • WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=94081
  • diff --git a/files/zh-cn/web/api/event/cancelbubble/index.html b/files/zh-cn/web/api/event/cancelbubble/index.html index 3b407ccb237729..bc93e1a3c7303d 100644 --- a/files/zh-cn/web/api/event/cancelbubble/index.html +++ b/files/zh-cn/web/api/event/cancelbubble/index.html @@ -6,9 +6,9 @@ translation_of: Web/API/Event/cancelBubble original_slug: Web/API/Event/禁用时间冒泡 --- -

    {{APIRef("DOM Events")}} 

    +

    {{APIRef("DOM Events")}}

    -

    Event.cancelBubble 属性是 {{domxref("Event.stopPropagation()")}}的一个曾用名。在从事件处理程序返回之前将其值设置为 true 可阻止事件的传播。

    +

    Event.cancelBubble 属性是 {{domxref("Event.stopPropagation()")}}的一个曾用名。在从事件处理程序返回之前将其值设置为 true 可阻止事件的传播。

    语法

    @@ -21,14 +21,14 @@

    用例

    ele.onclick = function(e) {
       // 在这儿可以做点儿有趣的事情
    -  e.cancelBubble = true;
    +  e.cancelBubble = true;
     }

    规范

    -

    这个属性的规范并未统一。 因为他还有其他标准 W3C 版: an old Working Draft of W3C DOM Level 2. 微软版: description of it on MSDN.

    +

    这个属性的规范并未统一。 因为他还有其他标准 W3C 版: an old Working Draft of W3C DOM Level 2. 微软版: description of it on MSDN.

    浏览器兼容

    diff --git a/files/zh-cn/web/api/event/comparison_of_event_targets/index.html b/files/zh-cn/web/api/event/comparison_of_event_targets/index.html index efcb6529a0d230..c2f49b7f0f6c39 100644 --- a/files/zh-cn/web/api/event/comparison_of_event_targets/index.html +++ b/files/zh-cn/web/api/event/comparison_of_event_targets/index.html @@ -64,65 +64,65 @@

    Examples

    <!DOCTYPE html>
     <html>
     <head>
    -    <meta charset="utf-8">
    -    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    -    <title>Comparison of Event Targets</title>
    -    <style>
    -        table {
    -            border-collapse: collapse;
    -            height: 150px;
    -            width: 100%;
    -        }
    -        td {
    -            border: 1px solid #ccc;
    -            font-weight: bold;
    -            padding: 5px;
    -            min-height: 30px;
    -        }
    -        .standard {
    -            background-color: #99ff99;
    -        }
    -        .non-standard {
    -            background-color: #902D37;
    -        }
    -    </style>
    +    <meta charset="utf-8">
    +    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    +    <title>Comparison of Event Targets</title>
    +    <style>
    +        table {
    +            border-collapse: collapse;
    +            height: 150px;
    +            width: 100%;
    +        }
    +        td {
    +            border: 1px solid #ccc;
    +            font-weight: bold;
    +            padding: 5px;
    +            min-height: 30px;
    +        }
    +        .standard {
    +            background-color: #99ff99;
    +        }
    +        .non-standard {
    +            background-color: #902D37;
    +        }
    +    </style>
     </head>
     <body>
    -    <table>
    -    <thead>
    -        <tr>
    -            <td class="standard">Original target dispatching the event <small>event.target</small></td>
    -            <td class="standard">Target who's event listener is being processed <small>event.currentTarget</small></td>
    -            <td class="standard">Identify other element (if any) involved in the event <small>event.relatedTarget</small></td>
    -            <td class="non-standard">If there was a retargetting of the event for some reason <small> event.explicitOriginalTarget</small> contains the target before retargetting (never contains anonymous targets)</td>
    -            <td class="non-standard">If there was a retargetting of the event for some reason <small> event.originalTarget</small> contains the target before retargetting (may contain anonymous targets)</td>
    -        </tr>
    -    </thead>
    -    <tr>
    -        <td id="target"></td>
    -        <td id="currentTarget"></td>
    -        <td id="relatedTarget"></td>
    -        <td id="explicitOriginalTarget"></td>
    -        <td id="originalTarget"></td>
    -    </tr>
    +    <table>
    +    <thead>
    +        <tr>
    +            <td class="standard">Original target dispatching the event <small>event.target</small></td>
    +            <td class="standard">Target who's event listener is being processed <small>event.currentTarget</small></td>
    +            <td class="standard">Identify other element (if any) involved in the event <small>event.relatedTarget</small></td>
    +            <td class="non-standard">If there was a retargetting of the event for some reason <small> event.explicitOriginalTarget</small> contains the target before retargetting (never contains anonymous targets)</td>
    +            <td class="non-standard">If there was a retargetting of the event for some reason <small> event.originalTarget</small> contains the target before retargetting (may contain anonymous targets)</td>
    +        </tr>
    +    </thead>
    +    <tr>
    +        <td id="target"></td>
    +        <td id="currentTarget"></td>
    +        <td id="relatedTarget"></td>
    +        <td id="explicitOriginalTarget"></td>
    +        <td id="originalTarget"></td>
    +    </tr>
     </table>
     <p>Clicking on the text will show the difference between explicitOriginalTarget, originalTarget and target</p>
     <script>
    -    function handleClicks(e) {
    -        document.getElementById('target').innerHTML = e.target;
    -        document.getElementById('currentTarget').innerHTML = e.currentTarget;
    -        document.getElementById('relatedTarget').innerHTML = e.relatedTarget;
    -        document.getElementById('explicitOriginalTarget').innerHTML = e.explicitOriginalTarget;
    -        document.getElementById('originalTarget').innerHTML = e.originalTarget;
    -    }
    -
    -    function handleMouseover(e) {
    -        document.getElementById('target').innerHTML = e.target;
    -        document.getElementById('relatedTarget').innerHTML = e.relatedTarget;
    -    }
    -
    -    document.addEventListener('click', handleClicks, false);
    -    document.addEventListener('mouseover', handleMouseover, false);
    +    function handleClicks(e) {
    +        document.getElementById('target').innerHTML = e.target;
    +        document.getElementById('currentTarget').innerHTML = e.currentTarget;
    +        document.getElementById('relatedTarget').innerHTML = e.relatedTarget;
    +        document.getElementById('explicitOriginalTarget').innerHTML = e.explicitOriginalTarget;
    +        document.getElementById('originalTarget').innerHTML = e.originalTarget;
    +    }
    +
    +    function handleMouseover(e) {
    +        document.getElementById('target').innerHTML = e.target;
    +        document.getElementById('relatedTarget').innerHTML = e.relatedTarget;
    +    }
    +
    +    document.addEventListener('click', handleClicks, false);
    +    document.addEventListener('mouseover', handleMouseover, false);
     </script>
     </body>
     </html>
    diff --git a/files/zh-cn/web/api/event/composed/index.html b/files/zh-cn/web/api/event/composed/index.html index cdc5a321e5de90..586abdec5669d6 100644 --- a/files/zh-cn/web/api/event/composed/index.html +++ b/files/zh-cn/web/api/event/composed/index.html @@ -5,7 +5,7 @@ ---

    {{APIRef("Shadow DOM")}}

    -

    {{domxref("Event")}} 接口的只读属性 composed 返回一个 {{jsxref("Boolean")}} 值,用来指示该事件是否可以从 Shadow DOM 传递到一般的 DOM。

    +

    {{domxref("Event")}} 接口的只读属性 composed 返回一个 {{jsxref("Boolean")}} 值,用来指示该事件是否可以从 Shadow DOM 传递到一般的 DOM。

    注意:此属性以前命名为scoped

    @@ -17,9 +17,9 @@

    语法

    -

    如果返回的 {{jsxref("Boolean")}} 值为 true,表明当事件到达 shadow DOM 的根节点(也就是 shadow DOM 中事件开始传播的第一个节点)时,事件可以从 shadow DOM 传递到一般 DOM。当然,事件要具有可传播性,即该事件的 {{domxref("Event.bubbles", "bubbles")}} 属性必须为 true。你也可以通过调用 {{domxref("Event.composedPath", "composedPath()")}} 来查看事件从 shadow DOM 传播到普通 DOM 的路径。

    +

    如果返回的 {{jsxref("Boolean")}} 值为 true,表明当事件到达 shadow DOM 的根节点(也就是 shadow DOM 中事件开始传播的第一个节点)时,事件可以从 shadow DOM 传递到一般 DOM。当然,事件要具有可传播性,即该事件的 {{domxref("Event.bubbles", "bubbles")}} 属性必须为 true。你也可以通过调用 {{domxref("Event.composedPath", "composedPath()")}} 来查看事件从 shadow DOM 传播到普通 DOM 的路径。

    -

    如果属性值为 false,那么事件将不会跨越 shadow DOM 的边界传播。

    +

    如果属性值为 false,那么事件将不会跨越 shadow DOM 的边界传播。

    例子

    diff --git a/files/zh-cn/web/api/event/composedpath/index.html b/files/zh-cn/web/api/event/composedpath/index.html index b9ee5b5bbc31a8..d1196bbc160abd 100644 --- a/files/zh-cn/web/api/event/composedpath/index.html +++ b/files/zh-cn/web/api/event/composedpath/index.html @@ -7,7 +7,7 @@ ---

    {{APIRef("Shadow DOM")}}

    -

    composedPath() 是 {{domxref("Event")}} 接口的一个方法,当对象数组调用该侦听器时返回事件路径。 如果影子根节点被创建并且{{domxref("ShadowRoot.mode")}}是关闭的,那么该路径不包括影子树中的节点。

    +

    composedPath() 是 {{domxref("Event")}} 接口的一个方法,当对象数组调用该侦听器时返回事件路径。 如果影子根节点被创建并且{{domxref("ShadowRoot.mode")}}是关闭的,那么该路径不包括影子树中的节点。

    语法

    @@ -24,7 +24,7 @@

    返回值

    示例

    -

    在我们的 composed-composed-path 例子中,我们定义了两个自定义元素,<open-shadow> 和 <closed-shadow>,两 个全都调用了它们文本属性的内容然后作为<p>  元素的文本内容将它们插入到元素的影子 DOM 中。两者之间唯一的区别是它们影子的根结点是在它们的模式被分别设置成open 和 closed 的情况下连接的。

    +

    在我们的 composed-composed-path 例子中,我们定义了两个自定义元素,<open-shadow><closed-shadow>,两 个全都调用了它们文本属性的内容然后作为<p> 元素的文本内容将它们插入到元素的影子 DOM 中。两者之间唯一的区别是它们影子的根结点是在它们的模式被分别设置成openclosed 的情况下连接的。

    第一个定义就像这样,比如:

    @@ -47,22 +47,22 @@

    示例

    <open-shadow text="I have an open shadow root"></open-shadow>
     <closed-shadow text="I have a closed shadow root"></closed-shadow>
    -

    然后在 <html> 元素中插入一个鼠标点击事件:

    +

    然后在 <html> 元素中插入一个鼠标点击事件:

    document.querySelector('html').addEventListener('click',function(e) {
       console.log(e.composed);
       console.log(e.composedPath());
     });
    -

    当你先后点击 <open-shadow> 和 <closed-shadow> 这两个元素,你将会注意到两件事情。第一, composed 这个属性返回值为 true 因为 click 事件总能够在影子边界中传播。 第二,你将注意到两个元素中composedPath 的值的不同。 <open-shadow> 元素的组成路径是这个:

    +

    当你先后点击 <open-shadow><closed-shadow> 这两个元素,你将会注意到两件事情。第一, composed 这个属性返回值为 true 因为 click 事件总能够在影子边界中传播。 第二,你将注意到两个元素中composedPath 的值的不同。 <open-shadow> 元素的组成路径是这个:

    Array [ p, ShadowRoot, open-shadow, body, html, HTMLDocument https://mdn.github.io/web-components-examples/composed-composed-path/, Window ]
    -

    尽管 <closed-shadow> 元素的组成路径是像下面这样:

    +

    尽管 <closed-shadow> 元素的组成路径是像下面这样:

    Array [ closed-shadow, body, html, HTMLDocument https://mdn.github.io/web-components-examples/composed-composed-path/, Window ]
    -

    在第二个例子中,事件监听器仅能够传播到 <closed-shadow> 元素本身,但是不会到影子边界内的节点。

    +

    在第二个例子中,事件监听器仅能够传播到 <closed-shadow> 元素本身,但是不会到影子边界内的节点。

    规范

    diff --git a/files/zh-cn/web/api/event/currenttarget/index.html b/files/zh-cn/web/api/event/currenttarget/index.html index b1692fdff9684d..48082a437723bc 100644 --- a/files/zh-cn/web/api/event/currenttarget/index.html +++ b/files/zh-cn/web/api/event/currenttarget/index.html @@ -11,7 +11,7 @@ ---

    {{APIRef("DOM")}}

    -

    {{domxref("Event")}} 接口的只读属性 currentTarget 表示的,标识是当事件沿着 DOM 触发时事件的当前目标。它总是指向事件绑定的元素,而 {{domxref("Event.target")}} 则是事件触发的元素。

    +

    {{domxref("Event")}} 接口的只读属性 currentTarget 表示的,标识是当事件沿着 DOM 触发时事件的当前目标。它总是指向事件绑定的元素,而 {{domxref("Event.target")}} 则是事件触发的元素。

    语法

    @@ -23,11 +23,11 @@

    Value

    例子

    -

    当将相同的事件处理程序附加到多个元素时 event.currentTarget 就很有用。

    +

    当将相同的事件处理程序附加到多个元素时 event.currentTarget 就很有用。

    function hide(e){
       e.currentTarget.style.visibility = "hidden";
    -  console.log(e.currentTarget);
    +  console.log(e.currentTarget);
       // 该函数用作事件处理器时: this === e.currentTarget
     }
     
    diff --git a/files/zh-cn/web/api/event/defaultprevented/index.html b/files/zh-cn/web/api/event/defaultprevented/index.html
    index dcc98c7f92a034..e628a7e7d072d1 100644
    --- a/files/zh-cn/web/api/event/defaultprevented/index.html
    +++ b/files/zh-cn/web/api/event/defaultprevented/index.html
    @@ -12,7 +12,7 @@
     
     

    概述

    -

    返回一个布尔值,表明当前事件是否调用了 {{ domxref("event.preventDefault()") }}方法。

    +

    返回一个布尔值,表明当前事件是否调用了 {{ domxref("event.preventDefault()") }}方法。

    注意:你应该使用该属性来代替以前的非标准的已经被废弃的getPreventDefault()方法 (查看{{ bug("691151") }}).
    diff --git a/files/zh-cn/web/api/event/event/index.html b/files/zh-cn/web/api/event/event/index.html index c95774a9c30d79..cd4670f6f42fa8 100644 --- a/files/zh-cn/web/api/event/event/index.html +++ b/files/zh-cn/web/api/event/event/index.html @@ -10,7 +10,7 @@ ---

    {{APIRef("DOM")}}

    -

    Event() 构造函数,创建一个新的事件对象 {{domxref("Event")}}。

    +

    Event() 构造函数,创建一个新的事件对象 {{domxref("Event")}}。

    语法

    @@ -28,9 +28,9 @@

    参数

    EventInit 类型的字典,接受以下字段:
      -
    • "bubbles",可选,{{jsxref("Boolean")}}类型,默认值为 false,表示该事件是否冒泡。
    • -
    • "cancelable",可选,{{jsxref("Boolean")}}类型,默认值为 false, 表示该事件能否被取消。
    • -
    • "composed",可选,{{jsxref("Boolean")}}类型,默认值为 false,指示事件是否会在影子 DOM 根节点之外触发侦听器。
    • +
    • "bubbles",可选,{{jsxref("Boolean")}}类型,默认值为 false,表示该事件是否冒泡。
    • +
    • "cancelable",可选,{{jsxref("Boolean")}}类型,默认值为 false, 表示该事件能否被取消。
    • +
    • "composed",可选,{{jsxref("Boolean")}}类型,默认值为 false,指示事件是否会在影子 DOM 根节点之外触发侦听器。
    diff --git a/files/zh-cn/web/api/event/eventphase/index.html b/files/zh-cn/web/api/event/eventphase/index.html index 0f0fd6edbb4cf2..c19b5a810d20e3 100644 --- a/files/zh-cn/web/api/event/eventphase/index.html +++ b/files/zh-cn/web/api/event/eventphase/index.html @@ -47,7 +47,7 @@

    下面这些 Event.BUBBLING_PHASE 3 - 事件对象逆向向上传播回目标元素的祖先元素,从父亲元素开始,并且最终到达包含元素 {{domxref("Window")}}. 这就是冒泡,并且只有{{domxref("Event.bubbles")}} 值为 true 的时候才会发生。 为这个阶段注册的{{domxref("EventListener", "Event listeners", "", 1)}} 在这个过程中被触发。 + 事件对象逆向向上传播回目标元素的祖先元素,从父亲元素开始,并且最终到达包含元素 {{domxref("Window")}}. 这就是冒泡,并且只有{{domxref("Event.bubbles")}} 值为 true 的时候才会发生。 为这个阶段注册的{{domxref("EventListener", "Event listeners", "", 1)}} 在这个过程中被触发。 @@ -60,22 +60,22 @@

    HTML 内容

    <h4>Event Propagation Chain</h4>
     <ul>
    -  <li>Click 'd1'</li>
    -  <li>Analyse event propagation chain</li>
    -  <li>Click next div and repeat the experience</li>
    -  <li>Change Capturing mode</li>
    -  <li>Repeat the experience</li>
    +  <li>Click 'd1'</li>
    +  <li>Analyse event propagation chain</li>
    +  <li>Click next div and repeat the experience</li>
    +  <li>Change Capturing mode</li>
    +  <li>Repeat the experience</li>
     </ul>
     <input type="checkbox" id="chCapture" />
     <label for="chCapture">Use Capturing</label>
    - <div id="d1">d1
    -  <div id="d2">d2
    -      <div id="d3">d3
    -          <div id="d4">d4</div>
    -      </div>
    -  </div>
    - </div>
    - <div id="divInfo"></div>
    + <div id="d1">d1
    +  <div id="d2">d2
    +      <div id="d3">d3
    +          <div id="d4">d4</div>
    +      </div>
    +  </div>
    + </div>
    + <div id="divInfo"></div>
     

    CSS 内容

    diff --git a/files/zh-cn/web/api/event/index.html b/files/zh-cn/web/api/event/index.html index 5e8b812bbbb7e5..bfa336ada98726 100644 --- a/files/zh-cn/web/api/event/index.html +++ b/files/zh-cn/web/api/event/index.html @@ -21,7 +21,7 @@

    很多 DOM 元素可以被设计接收 (或者监听) 这些事件,并且执行代码去响应(或者处理)它们。通过EventTarget.addEventListener()方法可以将事件处理函数绑定到不同的HTML elements上 (比如<button>, <div>, <span>等等) 。这种绑定事件处理函数的方式基本替换了老版本中使用 HTML event handler attributes来绑定事件处理函数的方式。除此之外,通过正确使用removeEventListener()方法,这些事件处理函数也能被移除。

    -

    Note: 一个元素可以绑定多个事件处理函数,甚至是同一种类型的事件。尤其是这种分离的,并且相互独立的代码模块对同一个元素绑定事件处理函数,每一个模块代码都有着独立的目的。(比如,一个网页同时有着广告模块和统计模块同时监听视频播放元素)

    +

    Note: 一个元素可以绑定多个事件处理函数,甚至是同一种类型的事件。尤其是这种分离的,并且相互独立的代码模块对同一个元素绑定事件处理函数,每一个模块代码都有着独立的目的。(比如,一个网页同时有着广告模块和统计模块同时监听视频播放元素)

    当有很多嵌套的元素,并且每一个元素都有着自己的事件处理函数,事件处理过程会变得非常复杂。尤其当一个父元素和子元素绑定有相同类型的事件处理函数的时候。因为结构上的重叠,事件处理函数可能会依次被触发,触发的顺序取决于事件冒泡和事件捕获在每一个元素上的设置情况。

    @@ -188,7 +188,7 @@

    参考

    • 可用的事件类型:Event 参考
    • -
    • Event 目标的比较(目标 target vs 当前目标 currentTarget vs 相关目标 relatedTarget vs 初始目标 originalTarget
    • +
    • Event 目标的比较(目标 target vs 当前目标 currentTarget vs 相关目标 relatedTarget vs 初始目标 originalTarget
    • 创建和触发自定义事件
    • Firefox 拓展开发:
        diff --git a/files/zh-cn/web/api/event/initevent/index.html b/files/zh-cn/web/api/event/initevent/index.html index 12094ce098c201..218ea3ceea5de2 100644 --- a/files/zh-cn/web/api/event/initevent/index.html +++ b/files/zh-cn/web/api/event/initevent/index.html @@ -5,14 +5,14 @@ ---
        {{ ApiRef("DOM") }}{{deprecated_header}}
        -

        Event.initEvent() 方法可以用来初始化由{{domxref("Document.createEvent()") }} 创建的 {{ domxref("event") }} 实例。

        +

        Event.initEvent() 方法可以用来初始化由{{domxref("Document.createEvent()") }} 创建的 {{ domxref("event") }} 实例。

        用这种方式初始化事件必须是由 {{ domxref("Document.createEvent()") }} 方法创建的实例。本方法必须在事件被触发之前调用(用{{ domxref("EventTarget.dispatchEvent()") }}调用).事件 一旦被调用,便不再做其他任何事。

        不建议再使用此方法(方法已经过时 deprecated)

        -

        可以使用特定的 event 构造器函数,比如 {{domxref("Event.Event", "Event()")}}. 该页有关于这些的更多信息 Creating and triggering events .

        +

        可以使用特定的 event 构造器函数,比如 {{domxref("Event.Event", "Event()")}}. 该页有关于这些的更多信息 Creating and triggering events .

        语法

        diff --git a/files/zh-cn/web/api/event/istrusted/index.html b/files/zh-cn/web/api/event/istrusted/index.html index ddf6aacb8ae574..f4de9f17d8f0da 100644 --- a/files/zh-cn/web/api/event/istrusted/index.html +++ b/files/zh-cn/web/api/event/istrusted/index.html @@ -11,7 +11,7 @@ ---
        {{APIRef("DOM")}}
        -

        {{domxref("Event")}} 接口的 isTrusted 属性是一个只读属性,它是一个布尔值({{domxref("Boolean")}})。当事件是由用户行为生成的时候,这个属性的值为 true ,而当事件是由脚本创建、修改、通过 {{domxref("EventTarget.dispatchEvent()")}} 派发的时候,这个属性的值为 false 。

        +

        {{domxref("Event")}} 接口的 isTrusted 属性是一个只读属性,它是一个布尔值({{domxref("Boolean")}})。当事件是由用户行为生成的时候,这个属性的值为 true ,而当事件是由脚本创建、修改、通过 {{domxref("EventTarget.dispatchEvent()")}} 派发的时候,这个属性的值为 false

        语法

        diff --git a/files/zh-cn/web/api/event/originaltarget/index.html b/files/zh-cn/web/api/event/originaltarget/index.html index 942ae04ace03f2..2514f7e52bf171 100644 --- a/files/zh-cn/web/api/event/originaltarget/index.html +++ b/files/zh-cn/web/api/event/originaltarget/index.html @@ -7,7 +7,7 @@ ---
        {{ ApiRef("DOM") }} {{Non-standard_header}}
        -
         
        +

        简介

        diff --git a/files/zh-cn/web/api/event/preventdefault/index.html b/files/zh-cn/web/api/event/preventdefault/index.html index af0dc9c3163f21..8a4718c2d26231 100644 --- a/files/zh-cn/web/api/event/preventdefault/index.html +++ b/files/zh-cn/web/api/event/preventdefault/index.html @@ -92,7 +92,7 @@

        JavaScript

        var myTextbox = document.getElementById('my-textbox');
         myTextbox.addEventListener('keypress', checkName, false);
        -

         checkName()方法可以监听按键并且决定是否允许按键的默认行为发生。

        +

        checkName()方法可以监听按键并且决定是否允许按键的默认行为发生。

        function checkName(evt) {
           var charCode = evt.charCode;
        @@ -139,7 +139,7 @@ 

        备注

        在事件流的任何阶段调用preventDefault()都会取消事件,这意味着任何通常被该实现触发并作为结果的默认行为都不会发生。

        -

        你可以使用 {{domxref("Event.cancelable")}} 来检查该事件是否支持取消。为一个不支持 cancelable 的事件调用preventDefault()将没有效果。

        +

        你可以使用 {{domxref("Event.cancelable")}} 来检查该事件是否支持取消。为一个不支持 cancelable 的事件调用preventDefault()将没有效果。

        规范

        diff --git a/files/zh-cn/web/api/event/srcelement/index.html b/files/zh-cn/web/api/event/srcelement/index.html index e0f0c2cfab65f2..7aa51b8798bdba 100644 --- a/files/zh-cn/web/api/event/srcelement/index.html +++ b/files/zh-cn/web/api/event/srcelement/index.html @@ -7,15 +7,15 @@

        {{ Non-standard_header() }}

        -

        Event.srcElement 是标准的 {{domxref("Event.target")}} 属性的一个别名。它只对老版本的 IE 浏览器有效。

        +

        Event.srcElement 是标准的 {{domxref("Event.target")}} 属性的一个别名。它只对老版本的 IE 浏览器有效。

        规范

        不属于任何规范

        -

        微软 在 MSDN 有一篇描述。

        +

        微软 在 MSDN 有一篇描述。

        -

         

        +

        浏览器兼容性

        diff --git a/files/zh-cn/web/api/event/target/index.html b/files/zh-cn/web/api/event/target/index.html index c627bb4b65564e..1c78c5adfabe19 100644 --- a/files/zh-cn/web/api/event/target/index.html +++ b/files/zh-cn/web/api/event/target/index.html @@ -16,7 +16,7 @@

        语法

        示例

        -

        event.target 属性可以用来实现事件委托 (event delegation)。

        +

        event.target 属性可以用来实现事件委托 (event delegation)。

        // Make a list
         var ul = document.createElement('ul');
        @@ -28,9 +28,9 @@ 

        示例

        ul.appendChild(li2); function hide(e){ -  // e.target 引用着 <li> 元素 -  // 不像 e.currentTarget 引用着其父级的 <ul> 元素。 -  e.target.style.visibility = 'hidden'; + // e.target 引用着 <li> 元素 + // 不像 e.currentTarget 引用着其父级的 <ul> 元素。 + e.target.style.visibility = 'hidden'; } // 添加监听事件到列表,当每个 <li> 被点击的时候都会触发。 @@ -47,7 +47,7 @@

        浏览器兼容性

        {{Compat("api.Event.target")}}

        -

        在 IE6-8 中,事件模型与标准不同。使用非标准的 element.attachEvent() 方法绑定事件监听器。在该模型中,事件对象有一个 srcElement 属性,等价于target 属性。

        +

        在 IE6-8 中,事件模型与标准不同。使用非标准的 element.attachEvent() 方法绑定事件监听器。在该模型中,事件对象有一个 srcElement 属性,等价于target 属性。

        function hide(e) {
           // 支持 IE6-8
        diff --git a/files/zh-cn/web/api/event/timestamp/index.html b/files/zh-cn/web/api/event/timestamp/index.html
        index a317bebfc29d49..2a92651be519d3 100644
        --- a/files/zh-cn/web/api/event/timestamp/index.html
        +++ b/files/zh-cn/web/api/event/timestamp/index.html
        @@ -10,7 +10,7 @@
         ---
         
        {{APIRef}}
        -
         
        +
        警告: 在 Gecko 中,该属性的值不是事件发生时正确的事件戳。查看 https://bugzilla.mozilla.org/show_bug.cgi?id=238041
        diff --git a/files/zh-cn/web/api/event/type/index.html b/files/zh-cn/web/api/event/type/index.html index 52300afaef561a..3a7cfbb3916656 100644 --- a/files/zh-cn/web/api/event/type/index.html +++ b/files/zh-cn/web/api/event/type/index.html @@ -16,7 +16,7 @@

        传给 {{ domxref("EventTarget.addEventListener()") }} 和 {{ domxref("EventTarget.removeEventListener()") }} 方法的 event 参数的值是忽略大小写的。

        -

        要了解所有的事件类型,请查看 Mozilla 事件类型参考.

        +

        要了解所有的事件类型,请查看 Mozilla 事件类型参考.

        语法

        diff --git a/files/zh-cn/web/api/eventsource/close/index.html b/files/zh-cn/web/api/eventsource/close/index.html index d1898314241f46..966f2c484567cc 100644 --- a/files/zh-cn/web/api/eventsource/close/index.html +++ b/files/zh-cn/web/api/eventsource/close/index.html @@ -6,7 +6,7 @@ ---
        {{APIRef('WebSockets API')}}
        -
         
        +

        {{domxref("EventSource")}} 的方法close()用于关闭当前的连接,如果调用了此方法,则会将{{domxref("EventSource.readyState")}}这个属性值设置为 2 (closed)

        @@ -32,13 +32,13 @@

        例子

        var evtSource = new EventSource('sse.php'); button.onclick = function() { -  console.log('Connection closed'); -  evtSource.close(); + console.log('Connection closed'); + evtSource.close(); }
        -

        Note: 你可以在 Github 上查看这整个例子: Simple SSE demo using PHP.

        +

        Note: 你可以在 Github 上查看这整个例子: Simple SSE demo using PHP.

        规范

        diff --git a/files/zh-cn/web/api/eventsource/error_event/index.html b/files/zh-cn/web/api/eventsource/error_event/index.html index 870f5478bd00d9..59faace70eb8b9 100644 --- a/files/zh-cn/web/api/eventsource/error_event/index.html +++ b/files/zh-cn/web/api/eventsource/error_event/index.html @@ -6,10 +6,10 @@ ---
        {{APIRef('WebSockets API')}}
        -
         
        +
        -

        {{domxref("EventSource")}} 的属性 onerror 是当发生错误且这个错误事件({{event("error")}} )被 EventSource 触发时调用的一个事件处理函数({{event("Event_handlers", "event handler")}})

        +

        {{domxref("EventSource")}} 的属性 onerror 是当发生错误且这个错误事件({{event("error")}} )被 EventSource 触发时调用的一个事件处理函数({{event("Event_handlers", "event handler")}})

        语法

        @@ -22,7 +22,7 @@

        例子

        };
        -

        Note: 你可以在 Github 上查看这个完整例子: Simple SSE demo using PHP.

        +

        Note: 你可以在 Github 上查看这个完整例子: Simple SSE demo using PHP.

        规范

        diff --git a/files/zh-cn/web/api/eventsource/eventsource/index.html b/files/zh-cn/web/api/eventsource/eventsource/index.html index 2f1e4ca63c8742..51e3a2eaa1f71f 100644 --- a/files/zh-cn/web/api/eventsource/eventsource/index.html +++ b/files/zh-cn/web/api/eventsource/eventsource/index.html @@ -20,7 +20,7 @@

        参数

        url
        -
         一个{{domxref("USVString")}} ,它代表远程资源的位置
        +
        一个{{domxref("USVString")}} ,它代表远程资源的位置
        configuration {{optional_inline}}
        为配置新连接提供选项。可选项是:
          @@ -31,7 +31,7 @@

          参数

          返回值

          -

           一个新建的 {{domxref("EventSource")}} 对象,如果指定了configuration, 则按其配置;否则,配置为合适的基本默认值。

          +

          一个新建的 {{domxref("EventSource")}} 对象,如果指定了configuration, 则按其配置;否则,配置为合适的基本默认值。

          @@ -50,7 +50,7 @@

          示例

          }
        -

        备注:你可以在 GitHub 查看完整示例 — 请查看 Simple SSE demo using PHP.

        +

        备注:你可以在 GitHub 查看完整示例 — 请查看 Simple SSE demo using PHP.

        规范

        diff --git a/files/zh-cn/web/api/eventsource/index.html b/files/zh-cn/web/api/eventsource/index.html index a9d2f644bdbe2f..f5e35339bc48d6 100644 --- a/files/zh-cn/web/api/eventsource/index.html +++ b/files/zh-cn/web/api/eventsource/index.html @@ -14,7 +14,7 @@

        一旦连接开启,来自服务端传入的消息会以事件的形式分发至你代码中。如果接收消息中有一个事件字段,触发的事件与事件字段的值相同。如果没有事件字段存在,则将触发通用事件。

        -

        与 WebSockets,不同的是,服务端推送是单向的。数据信息被单向从服务端到客户端分发。当不需要以消息形式将数据从客户端发送到服务器时,这使它们成为绝佳的选择。例如,对于处理社交媒体状态更新,新闻提要或将数据传递到客户端存储机制(如 IndexedDB 或 Web 存储)之类的,EventSource 无疑是一个有效方案。

        +

        WebSockets,不同的是,服务端推送是单向的。数据信息被单向从服务端到客户端分发。当不需要以消息形式将数据从客户端发送到服务器时,这使它们成为绝佳的选择。例如,对于处理社交媒体状态更新,新闻提要或将数据传递到客户端存储机制(如 IndexedDB 或 Web 存储)之类的,EventSource 无疑是一个有效方案。

        构造函数

        diff --git a/files/zh-cn/web/api/eventsource/open_event/index.html b/files/zh-cn/web/api/eventsource/open_event/index.html index deb1047a16dfdd..85a7c1179efaaa 100644 --- a/files/zh-cn/web/api/eventsource/open_event/index.html +++ b/files/zh-cn/web/api/eventsource/open_event/index.html @@ -19,7 +19,7 @@

        语法

        示例

        evtSource.onopen = function() {
        -  console.log("Connection to server opened.");
        +  console.log("Connection to server opened.");
         };
        diff --git a/files/zh-cn/web/api/eventtarget/addeventlistener/index.html b/files/zh-cn/web/api/eventtarget/addeventlistener/index.html index 320684af94f287..da65e6180f2875 100644 --- a/files/zh-cn/web/api/eventtarget/addeventlistener/index.html +++ b/files/zh-cn/web/api/eventtarget/addeventlistener/index.html @@ -14,13 +14,13 @@ ---

        {{APIRef("DOM Events")}}

        -

        EventTarget.addEventListener() 方法将指定的监听器注册到 {{domxref("EventTarget")}} 上,当该对象触发指定的事件时,指定的回调函数就会被执行。 事件目标可以是一个文档上的元素 {{domxref("Element")}},{{domxref("Document")}}和{{domxref("Window")}}或者任何其他支持事件的对象 (比如 XMLHttpRequest)

        +

        EventTarget.addEventListener() 方法将指定的监听器注册到 {{domxref("EventTarget")}} 上,当该对象触发指定的事件时,指定的回调函数就会被执行。 事件目标可以是一个文档上的元素 {{domxref("Element")}},{{domxref("Document")}}和{{domxref("Window")}}或者任何其他支持事件的对象 (比如 XMLHttpRequest)

        addEventListener()的工作原理是将实现{{domxref("EventListener")}}的函数或对象添加到调用它的{{domxref("EventTarget")}}上的指定事件类型的事件侦听器列表中。

        语法

        -
        target.addEventListener(type, listener, options);
        +
        target.addEventListener(type, listener, options);
         target.addEventListener(type, listener, useCapture);
         target.addEventListener(type, listener, useCapture, wantsUntrusted {{
         Non-standard_inline}});  // Gecko/Mozilla only
        @@ -33,26 +33,26 @@ 

        参数

        type
        表示监听事件类型的字符串。
        listener
        -
        当所监听的事件类型触发时,会接收到一个事件通知(实现了 {{domxref("Event")}} 接口的对象)对象。listener 必须是一个实现了 {{domxref("EventListener")}} 接口的对象,或者是一个函数。有关回调本身的详细信息,请参阅事件监听回调 
        +
        当所监听的事件类型触发时,会接收到一个事件通知(实现了 {{domxref("Event")}} 接口的对象)对象。listener 必须是一个实现了 {{domxref("EventListener")}} 接口的对象,或者是一个函数。有关回调本身的详细信息,请参阅事件监听回调
        options {{optional_inline}}
        -
        一个指定有关 listener 属性的可选参数对象。可用的选项如下: +
        一个指定有关 listener 属性的可选参数对象。可用的选项如下:
          -
        • capture:  {{jsxref("Boolean")}},表示 listener 会在该类型的事件捕获阶段传播到该 EventTarget 时触发。
        • -
        • once:  {{jsxref("Boolean")}},表示 listener 在添加之后最多只调用一次。如果是 true, listener 会在其被调用之后自动移除。
        • -
        • passive: {{jsxref("Boolean")}},设置为 true 时,表示 listener 永远不会调用 preventDefault()。如果 listener 仍然调用了这个函数,客户端将会忽略它并抛出一个控制台警告。查看 使用 passive 改善的滚屏性能 了解更多。
        • +
        • capture: {{jsxref("Boolean")}},表示 listener 会在该类型的事件捕获阶段传播到该 EventTarget 时触发。
        • +
        • once: {{jsxref("Boolean")}},表示 listener 在添加之后最多只调用一次。如果是 true, listener 会在其被调用之后自动移除。
        • +
        • passive: {{jsxref("Boolean")}},设置为 true 时,表示 listener 永远不会调用 preventDefault()。如果 listener 仍然调用了这个函数,客户端将会忽略它并抛出一个控制台警告。查看 使用 passive 改善的滚屏性能 了解更多。
        • signal:{{domxref("AbortSignal")}},该 AbortSignal 的 {{domxref("AbortController/abort()", "abort()")}} 方法被调用时,监听器会被移除。
        • -
        • {{non-standard_inline}} mozSystemGroup: 只能在 XBL 或者是 Firefox' chrome 使用,这是个 {{jsxref("Boolean")}},表示 listener 被添加到 system group。
        • +
        • {{non-standard_inline}} mozSystemGroup: 只能在 XBL 或者是 Firefox' chrome 使用,这是个 {{jsxref("Boolean")}},表示 listener 被添加到 system group。
        -
        useCapture  {{optional_inline}}
        -
        {{jsxref("Boolean")}},在 DOM 树中,注册了 listener 的元素, 是否要先于它下面的 EventTarget,调用该 listener。 当 useCapture(设为 true) 时,沿着 DOM 树向上冒泡的事件,不会触发 listener。当一个元素嵌套了另一个元素,并且两个元素都对同一事件注册了一个处理函数时,所发生的事件冒泡和事件捕获是两种不同的事件传播方式。事件传播模式决定了元素以哪个顺序接收事件。进一步的解释可以查看 事件流 及 JavaScript Event order 文档。 如果没有指定, useCapture 默认为 false 。 
        +
        useCapture {{optional_inline}}
        +
        {{jsxref("Boolean")}},在 DOM 树中,注册了 listener 的元素, 是否要先于它下面的 EventTarget,调用该 listener。 当 useCapture(设为 true) 时,沿着 DOM 树向上冒泡的事件,不会触发 listener。当一个元素嵌套了另一个元素,并且两个元素都对同一事件注册了一个处理函数时,所发生的事件冒泡和事件捕获是两种不同的事件传播方式。事件传播模式决定了元素以哪个顺序接收事件。进一步的解释可以查看 事件流JavaScript Event order 文档。 如果没有指定, useCapture 默认为 false 。
        备注: 对于事件目标上的事件监听器来说,事件会处于“目标阶段”,而不是冒泡阶段或者捕获阶段。捕获阶段的事件监听器在任何非捕获阶段的事件监听器之前被调用。
        -
        wantsUntrusted {{optional_inline}} {{Non-standard_inline}}
        -
        如果为 true , 则事件处理程序会接收网页自定义的事件。此参数只适用于 Gecko({{glossary("chrome")}}的默认值为 true,其他常规网页的默认值为 false),主要用于附加组件的代码和浏览器本身。
        +
        wantsUntrusted {{optional_inline}} {{Non-standard_inline}}
        +
        如果为 true , 则事件处理程序会接收网页自定义的事件。此参数只适用于 Gecko({{glossary("chrome")}}的默认值为 true,其他常规网页的默认值为 false),主要用于附加组件的代码和浏览器本身。

        返回值

        @@ -63,9 +63,9 @@

        用法说明

        事件监听回调

        -

        事件监听器可以被指定为回调函数或实现 {{domxref("EventListener")}}的对象,其{{domxref("EventListener.handleEvent", "handleEvent()")}} 方法用作回调函数。

        +

        事件监听器可以被指定为回调函数或实现 {{domxref("EventListener")}}的对象,其{{domxref("EventListener.handleEvent", "handleEvent()")}} 方法用作回调函数。

        -

        回调函数本身具有与handleEvent()方法相同的参数和返回值;也就是说,回调接受一个参数:一个基于{{domxref("Event")}} 的对象,描述已发生的事件,并且它不返回任何内容。

        +

        回调函数本身具有与handleEvent()方法相同的参数和返回值;也就是说,回调接受一个参数:一个基于{{domxref("Event")}} 的对象,描述已发生的事件,并且它不返回任何内容。

        例如,一个可用于处理{{event("fullscreenchange")}}和{{event("fullscreenerror")}}的事件处理函数可以像这样:

        @@ -79,11 +79,11 @@

        事件监听回调

        option 支持的安全检测

        -

        在旧版本的 DOM 的规定中, addEventListener()的第三个参数是一个布尔值表示是否在捕获阶段调用事件处理程序。随着时间的推移,很明显需要更多的选项。与其在方法之中添加更多参数(传递可选值将会变得异常复杂),倒不如把第三个参数改为一个包含了各种属性的对象,这些属性的值用来被配置删除事件侦听器的过程。

        +

        在旧版本的 DOM 的规定中, addEventListener()的第三个参数是一个布尔值表示是否在捕获阶段调用事件处理程序。随着时间的推移,很明显需要更多的选项。与其在方法之中添加更多参数(传递可选值将会变得异常复杂),倒不如把第三个参数改为一个包含了各种属性的对象,这些属性的值用来被配置删除事件侦听器的过程。

        因为旧版本的浏览器(以及一些相对不算古老的)仍然假定第三个参数是布尔值,你需要编写一些代码来有效地处理这种情况。你可以对每一个你感兴趣的 options 值进行特性检测。

        -

        如果你想检测 passive 值可以参考下面这个例子:

        +

        如果你想检测 passive 值可以参考下面这个例子:

        var passiveSupported = false;
         
        @@ -98,7 +98,7 @@ 

        option 支持的安全检测

        } catch(err) {}
        -

        这段代码为 passive 属性创建了一个带有 getter 函数的 options 对象;getter 设定了一个标识, passiveSupported,被调用后就会把其设为true。那意味着如果浏览器检查 options 对象上的 passive 值时, passiveSupported 将会被设置为 true;否则它将保持 false。然后我们调用 addEventListener() 去设置一个指定这些选项的空事件处理器,这样如果浏览器将第三个参数认定为对象的话,这些选项值就会被检查。

        +

        这段代码为 passive 属性创建了一个带有 getter 函数的 options 对象;getter 设定了一个标识, passiveSupported,被调用后就会把其设为true。那意味着如果浏览器检查 options 对象上的 passive 值时, passiveSupported 将会被设置为 true;否则它将保持 false。然后我们调用 addEventListener() 去设置一个指定这些选项的空事件处理器,这样如果浏览器将第三个参数认定为对象的话,这些选项值就会被检查。

        你可以利用这个方法检查 options 之中任一个值。只需使用与上面类似的代码,为选项设定一个 getter。

        @@ -108,17 +108,17 @@

        option 支持的安全检测

        ? { passive: true } : false);
        -

        我们在 someElement 这里添加了一个{{event("mouseup")}}。对于第三个参数,如果 passiveSupported 是 true ,我们传递了一个 passive 值为 true 的 options 对象;如果相反的话,我们知道要传递一个布尔值,于是就传递 false 作为 useCapture 的参数。

        +

        我们在 someElement 这里添加了一个{{event("mouseup")}}。对于第三个参数,如果 passiveSupportedtrue ,我们传递了一个 passive 值为 trueoptions 对象;如果相反的话,我们知道要传递一个布尔值,于是就传递 false 作为 useCapture 的参数。

        -

        如果你愿意,你可以用一个类似 Modernizr 或 Detect It 的第三方库来帮助你做这项测试。

        +

        如果你愿意,你可以用一个类似 ModernizrDetect It 的第三方库来帮助你做这项测试。

        -

        你可以在 Web Incubator Community Group 里关于EventListenerOptions 的文章中了解更多。

        +

        你可以在 Web Incubator Community Group 里关于EventListenerOptions 的文章中了解更多。

        示例

        添加一个简单的监听器

        -

        下面这个例子用来展示如何使用 addEventListener() 监听鼠标点击一个元素。

        +

        下面这个例子用来展示如何使用 addEventListener() 监听鼠标点击一个元素。

        <table id="outside">
             <tr><td id="t1">one</td></tr>
        @@ -128,12 +128,12 @@ 

        添加一个简单的监听器

        // 改变 t2 的函数
         function modifyText() {
        -  var t2 = document.getElementById("t2");
        -  if (t2.firstChild.nodeValue == "three") {
        -    t2.firstChild.nodeValue = "two";
        -  } else {
        -    t2.firstChild.nodeValue = "three";
        -  }
        +  var t2 = document.getElementById("t2");
        +  if (t2.firstChild.nodeValue == "three") {
        +    t2.firstChild.nodeValue = "two";
        +  } else {
        +    t2.firstChild.nodeValue = "three";
        +  }
         }
         
         // 为 table 添加事件监听器
        @@ -141,7 +141,7 @@ 

        添加一个简单的监听器

        el.addEventListener("click", modifyText, false);
        -

        在上个例子中,modifyText() 是一个 click 事件的监听器,通过使用addEventListenter()注册到 table 对象上。在表格中任何位置单击都会触发事件并执行modifyText()

        +

        在上个例子中,modifyText() 是一个 click 事件的监听器,通过使用addEventListenter()注册到 table 对象上。在表格中任何位置单击都会触发事件并执行modifyText()

        结果

        @@ -152,15 +152,15 @@

        带有匿名函数的监听器

        现在我们来看看如何使用匿名函数来为事件监听器进行传参。

        <table id="outside">
        -    <tr><td id="t1">one</td></tr>
        -    <tr><td id="t2">two</td></tr>
        +    <tr><td id="t1">one</td></tr>
        +    <tr><td id="t2">two</td></tr>
         </table>
         
        // 改变 t2 值的函数
         function modifyText(new_text) {
        -  var t2 = document.getElementById("t2");
        -  t2.firstChild.nodeValue = new_text;
        +  var t2 = document.getElementById("t2");
        +  t2.firstChild.nodeValue = new_text;
         }
         
         // 为 table 对象添加事件监听器
        @@ -313,7 +313,7 @@ 

        JavaScript

        结果

        -

        分别点击 outer, middle, inner 以查看选项的工作方式。

        +

        分别点击 outer, middle, inner 以查看选项的工作方式。

        {{ EmbedLiveSample('options 用法示例', 600, 310, '', 'Web/API/EventTarget/addEventListener') }}

        @@ -321,38 +321,38 @@

        结果

        备注

        -

        为什么要使用 addEventListener?

        +

        为什么要使用 addEventListener?

        -

        addEventListener() 是 W3C DOM 规范中提供的注册事件监听器的方法。它的优点包括:

        +

        addEventListener() 是 W3C DOM 规范中提供的注册事件监听器的方法。它的优点包括:

        • 它允许给一个事件注册多个监听器。 特别是在使用{{Glossary("AJAX")}}库,JavaScript 模块,或其他需要第三方库/插件的代码。
        • -
        • 它提供了一种更精细的手段控制 listener 的触发阶段。(即可以选择捕获或者冒泡)。
        • +
        • 它提供了一种更精细的手段控制 listener 的触发阶段。(即可以选择捕获或者冒泡)。
        • 它对任何 DOM 元素都是有效的,而不仅仅只对 HTML 元素有效。
        -

        除了这种方法以外,后文会简单阐述一些注册事件监听器的旧方法

        +

        除了这种方法以外,后文会简单阐述一些注册事件监听器的旧方法

        在事件分派时添加事件处理器

        -

        当一个 EventListener 在 EventTarget 正在处理事件的时候被注册到 EventTarget 上,它不会被立即触发,但可能在事件流后面的事件触发阶段被触发,例如可能在捕获阶段添加,然后在冒泡阶段被触发。

        +

        当一个 EventListener EventTarget 正在处理事件的时候被注册到 EventTarget 上,它不会被立即触发,但可能在事件流后面的事件触发阶段被触发,例如可能在捕获阶段添加,然后在冒泡阶段被触发。

        多个相同的事件处理器

        -

        同一个 EventTarget 注册了多个相同的 EventListener,那么重复的实例会被抛弃。所以这么做不会使得 EventListener 被调用两次,也不需要用 removeEventListener 手动清除多余的EventListener ,因为重复的都被自动抛弃了,前提是options中的capture的参数值一致,如果capture的值不一致,此时就算重复定义,也不会被抛弃掉。

        +

        同一个 EventTarget 注册了多个相同的 EventListener,那么重复的实例会被抛弃。所以这么做不会使得 EventListener 被调用两次,也不需要用 removeEventListener 手动清除多余的EventListener ,因为重复的都被自动抛弃了,前提是options中的capture的参数值一致,如果capture的值不一致,此时就算重复定义,也不会被抛弃掉。

        处理过程中 this 的值的问题

        通常来说 this 的值是触发事件的元素的引用,这种特性在多个相似的元素使用同一个通用事件监听器时非常让人满意。

        -

        当使用 addEventListener() 为一个元素注册事件的时候,句柄里的 this 值是该元素的引用。其与传递给句柄的 event 参数的 currentTarget 属性的值一样。

        +

        当使用 addEventListener() 为一个元素注册事件的时候,句柄里的 this 值是该元素的引用。其与传递给句柄的 event 参数的 currentTarget 属性的值一样。

        如果一个事件的属性 ( 例如. onClick) 是指定在一个 HTML 的元素上的,则这个属性中的 JavaScript 语句实际上会被包裹在一个处理函数中,在这个处理函数中使用 this 的效果和使用 addEventListener 来绑定事件的效果是一样的; this 的出现代表了元素的引用。注意到在一个函数里 this 调用的的效果和标准规则里面是一样的。

        比如下面的例子:

        <table id="t" onclick="modifyText();">
        -. . .
        +. . .
         

        这时modifyText()中的this 的值会变成全局 (window) 对象的引用(在严格模式中为 undefined)

        @@ -433,9 +433,9 @@

        处理过程中 this myObject.register();

        -

        传统的 Internet Explorer 及其 attachEvent 方法

        +

        传统的 Internet Explorer 及其 attachEvent 方法

        -

        对于 Internet Explorer 来说,在 IE 9 之前,你必须使用 attachEvent 而不是使用标准方法 addEventListener。为了支持 IE,前面的例子需要改成这样:

        +

        对于 Internet Explorer 来说,在 IE 9 之前,你必须使用 attachEvent 而不是使用标准方法 addEventListener。为了支持 IE,前面的例子需要改成这样:

        if (el.addEventListener) {
           el.addEventListener('click', modifyText, false);
        @@ -444,90 +444,90 @@ 

        传统的 Internet Explorer 及其 attachEvent 方法 -

        使用 attachEvent 方法有个缺点,this 的值会变成 window 对象的引用而不是触发事件的元素。

        +

        使用 attachEvent 方法有个缺点,this 的值会变成 window 对象的引用而不是触发事件的元素。

        attachEvent()方法可以与onresize事件配对,以检测何时调整网页中的某些元素的大小。专有的mselementresize事件与注册事件处理程序的addEventListener方法配对时,提供与onresize类似的功能,在调整某些 HTML 元素大小时触发。

        兼容性

        -

        在你的 script 的开头添加以下方法,你就可以使用以下如 addEventListenerremoveEventListenerEvent.preventDefault 和Event.stopPropagation 等不被 IE8 支持的方法。 这些代码支持 handleEvent 的使用 ,包含 DOMContentLoaded 事件。

        +

        在你的 script 的开头添加以下方法,你就可以使用以下如 addEventListener, removeEventListener, Event.preventDefaultEvent.stopPropagation 等不被 IE8 支持的方法。 这些代码支持 handleEvent 的使用 ,包含 DOMContentLoaded 事件。

        -
        Note: IE8 不具有任何替代 useCapture 的方法,useCapture 是 IE8 不支持的。 请注意下面的代码只能添加 IE8。另外请注意,下面这个 IE8 polyfill 只适用于标准模式:需要 DOCTYPE 声明。
        +
        Note: IE8 不具有任何替代 useCapture 的方法,useCapture 是 IE8 不支持的。 请注意下面的代码只能添加 IE8。另外请注意,下面这个 IE8 polyfill 只适用于标准模式:需要 DOCTYPE 声明。
        (function() {
        -  if (!Event.prototype.preventDefault) {
        -    Event.prototype.preventDefault=function() {
        -      this.returnValue=false;
        -    };
        -  }
        -  if (!Event.prototype.stopPropagation) {
        -    Event.prototype.stopPropagation=function() {
        -      this.cancelBubble=true;
        -    };
        -  }
        -  if (!Element.prototype.addEventListener) {
        -    var eventListeners=[];
        -
        -    var addEventListener=function(type,listener /*, useCapture (will be ignored) */) {
        -      var self=this;
        -      var wrapper=function(e) {
        -        e.target=e.srcElement;
        -        e.currentTarget=self;
        -        if (typeof listener.handleEvent != 'undefined') {
        -          listener.handleEvent(e);
        -        } else {
        -          listener.call(self,e);
        -        }
        -      };
        -      if (type=="DOMContentLoaded") {
        -        var wrapper2=function(e) {
        -          if (document.readyState=="complete") {
        -            wrapper(e);
        -          }
        -        };
        -        document.attachEvent("onreadystatechange",wrapper2);
        -        eventListeners.push({object:this,type:type,listener:listener,wrapper:wrapper2});
        -
        -        if (document.readyState=="complete") {
        -          var e=new Event();
        -          e.srcElement=window;
        -          wrapper2(e);
        -        }
        -      } else {
        -        this.attachEvent("on"+type,wrapper);
        -        eventListeners.push({object:this,type:type,listener:listener,wrapper:wrapper});
        -      }
        -    };
        -    var removeEventListener=function(type,listener /*, useCapture (will be ignored) */) {
        -      var counter=0;
        -      while (counter<eventListeners.length) {
        -        var eventListener=eventListeners[counter];
        -        if (eventListener.object==this && eventListener.type==type && eventListener.listener==listener) {
        -          if (type=="DOMContentLoaded") {
        -            this.detachEvent("onreadystatechange",eventListener.wrapper);
        -          } else {
        -            this.detachEvent("on"+type,eventListener.wrapper);
        -          }
        -          eventListeners.splice(counter, 1);
        -          break;
        -        }
        -        ++counter;
        -      }
        -    };
        -    Element.prototype.addEventListener=addEventListener;
        -    Element.prototype.removeEventListener=removeEventListener;
        -    if (HTMLDocument) {
        -      HTMLDocument.prototype.addEventListener=addEventListener;
        -      HTMLDocument.prototype.removeEventListener=removeEventListener;
        -    }
        -    if (Window) {
        -      Window.prototype.addEventListener=addEventListener;
        -      Window.prototype.removeEventListener=removeEventListener;
        -    }
        -  }
        +  if (!Event.prototype.preventDefault) {
        +    Event.prototype.preventDefault=function() {
        +      this.returnValue=false;
        +    };
        +  }
        +  if (!Event.prototype.stopPropagation) {
        +    Event.prototype.stopPropagation=function() {
        +      this.cancelBubble=true;
        +    };
        +  }
        +  if (!Element.prototype.addEventListener) {
        +    var eventListeners=[];
        +
        +    var addEventListener=function(type,listener /*, useCapture (will be ignored) */) {
        +      var self=this;
        +      var wrapper=function(e) {
        +        e.target=e.srcElement;
        +        e.currentTarget=self;
        +        if (typeof listener.handleEvent != 'undefined') {
        +          listener.handleEvent(e);
        +        } else {
        +          listener.call(self,e);
        +        }
        +      };
        +      if (type=="DOMContentLoaded") {
        +        var wrapper2=function(e) {
        +          if (document.readyState=="complete") {
        +            wrapper(e);
        +          }
        +        };
        +        document.attachEvent("onreadystatechange",wrapper2);
        +        eventListeners.push({object:this,type:type,listener:listener,wrapper:wrapper2});
        +
        +        if (document.readyState=="complete") {
        +          var e=new Event();
        +          e.srcElement=window;
        +          wrapper2(e);
        +        }
        +      } else {
        +        this.attachEvent("on"+type,wrapper);
        +        eventListeners.push({object:this,type:type,listener:listener,wrapper:wrapper});
        +      }
        +    };
        +    var removeEventListener=function(type,listener /*, useCapture (will be ignored) */) {
        +      var counter=0;
        +      while (counter<eventListeners.length) {
        +        var eventListener=eventListeners[counter];
        +        if (eventListener.object==this && eventListener.type==type && eventListener.listener==listener) {
        +          if (type=="DOMContentLoaded") {
        +            this.detachEvent("onreadystatechange",eventListener.wrapper);
        +          } else {
        +            this.detachEvent("on"+type,eventListener.wrapper);
        +          }
        +          eventListeners.splice(counter, 1);
        +          break;
        +        }
        +        ++counter;
        +      }
        +    };
        +    Element.prototype.addEventListener=addEventListener;
        +    Element.prototype.removeEventListener=removeEventListener;
        +    if (HTMLDocument) {
        +      HTMLDocument.prototype.addEventListener=addEventListener;
        +      HTMLDocument.prototype.removeEventListener=removeEventListener;
        +    }
        +    if (Window) {
        +      Window.prototype.addEventListener=addEventListener;
        +      Window.prototype.removeEventListener=removeEventListener;
        +    }
        +  }
         })();
        -

        注册 listener 的旧方法

        +

        注册 listener 的旧方法

        addEventListener() 在 DOM 2 Events 规范中引入。在这之前,事件监听器应该用以下的方法注册:

        @@ -540,9 +540,9 @@

        注册 listener  };

        -

        这个方法会替换这个元素上所有已存在的 onclick 事件。对于其他事件是类似的,比如 blur (onblur)、 keypress (onkeypress) 等等。

        +

        这个方法会替换这个元素上所有已存在的 onclick 事件。对于其他事件是类似的,比如 blur (onblur)、 keypress (onkeypress) 等等。

        -

        由于这是 DOM 0 规范的基本内容,几乎所有浏览器都支持这个,而且不需要特殊的跨浏览器兼容代码。因此通常这个方法被用于动态地注册事件处理器,除非必须使用 addEventListener() 才能提供的特殊特性。

        +

        由于这是 DOM 0 规范的基本内容,几乎所有浏览器都支持这个,而且不需要特殊的跨浏览器兼容代码。因此通常这个方法被用于动态地注册事件处理器,除非必须使用 addEventListener() 才能提供的特殊特性。

        内存问题

        @@ -587,9 +587,9 @@

        内存问题

        使用 passive 改善的滚屏性能

        -

        根据规范,passive 选项的默认值始终为 false。但是,这引入了处理某些触摸事件(以及其他)的事件监听器在尝试处理滚动时阻止浏览器的主线程的可能性,从而导致滚动处理期间性能可能大大降低。

        +

        根据规范,passive 选项的默认值始终为 false。但是,这引入了处理某些触摸事件(以及其他)的事件监听器在尝试处理滚动时阻止浏览器的主线程的可能性,从而导致滚动处理期间性能可能大大降低。

        -

        为防止出现此问题,某些浏览器(特别是 Chrome 和 Firefox)已将文档级节点 {{domxref("Window")}},{{domxref("Document")}}和{{domxref("Document.body")}}的{{event("touchstart")}}和{{event("touchmove")}}事件的passive选项的默认值更改为 true。这可以防止调用事件监听器,因此在用户滚动时无法阻止页面呈现。

        +

        为防止出现此问题,某些浏览器(特别是 Chrome 和 Firefox)已将文档级节点 {{domxref("Window")}},{{domxref("Document")}}和{{domxref("Document.body")}}的{{event("touchstart")}}和{{event("touchmove")}}事件的passive选项的默认值更改为 true。这可以防止调用事件监听器,因此在用户滚动时无法阻止页面呈现。

        var elem = document.getElementById('elem');
         elem.addEventListener('touchmove', function listener() { /* do something */ }, { passive: true });
        @@ -614,12 +614,12 @@ 

        使用 passive 改善的滚屏性 window.addEventListener('scroll', function(event) { /* do something */ // can't use event.preventDefault(); -  // 不能使用 event.preventDefault() + // 不能使用 event.preventDefault() }, passiveIfSupported );

        在不支持addEventListener()options参数的旧浏览器上,尝试使用它会阻止使用useCapture参数而不正确使用特征检测。

        -

        您无需担心基本{{event("scroll")}} 事件的passive值。由于无法取消,因此事件监听器无法阻止页面呈现。

        +

        您无需担心基本{{event("scroll")}} 事件的passive值。由于无法取消,因此事件监听器无法阻止页面呈现。

        规范

        diff --git a/files/zh-cn/web/api/eventtarget/dispatchevent/index.html b/files/zh-cn/web/api/eventtarget/dispatchevent/index.html index c55c4c8f1f8388..7f118482cf1c7c 100644 --- a/files/zh-cn/web/api/eventtarget/dispatchevent/index.html +++ b/files/zh-cn/web/api/eventtarget/dispatchevent/index.html @@ -9,7 +9,7 @@ ---

        {{APIRef("DOM Events")}}

        -

        向一个指定的事件目标派发一个事件,  并以合适的顺序同步调用目标元素相关的事件处理函数。标准事件处理规则 (包括事件捕获和可选的冒泡过程) 同样适用于通过手动的使用dispatchEvent()方法派发的事件。

        +

        向一个指定的事件目标派发一个事件, 并以合适的顺序同步调用目标元素相关的事件处理函数。标准事件处理规则 (包括事件捕获和可选的冒泡过程) 同样适用于通过手动的使用dispatchEvent()方法派发的事件。

        语法

        @@ -19,17 +19,17 @@

        语法

        参数

          -
        • event 是要被派发的事件对象。
        • -
        • target 被用来初始化 事件 和 决定将会触发 目标。
        • +
        • event 是要被派发的事件对象。
        • +
        • target 被用来初始化 事件 和 决定将会触发 目标。

        返回值

          -
        • 当该事件是可取消的 (cancelable 为 true) 并且至少一个该事件的 事件处理方法 调用了{{domxref("Event.preventDefault()")}},则返回值为false;否则返回true
        • +
        • 当该事件是可取消的 (cancelable 为 true) 并且至少一个该事件的 事件处理方法 调用了{{domxref("Event.preventDefault()")}},则返回值为false;否则返回true
        -

        如果该被派发的事件的事件类型 (event's type) 在方法调用之前没有被经过初始化被指定,就会抛出一个 UNSPECIFIED_EVENT_TYPE_ERR 异常,或者如果事件类型是null或一个空字符串. event handler 就会抛出未捕获的异常; 这些 event handlers 运行在一个嵌套的调用栈中: 他们会阻塞调用直到他们处理完毕,但是异常不会冒泡。

        +

        如果该被派发的事件的事件类型 (event's type) 在方法调用之前没有被经过初始化被指定,就会抛出一个 UNSPECIFIED_EVENT_TYPE_ERR 异常,或者如果事件类型是null或一个空字符串. event handler 就会抛出未捕获的异常; 这些 event handlers 运行在一个嵌套的调用栈中: 他们会阻塞调用直到他们处理完毕,但是异常不会冒泡。

        注意

        @@ -41,7 +41,7 @@

        注意

        例子

        -

        参考 Creating and triggering events.

        +

        参考 Creating and triggering events.

        规范

        diff --git a/files/zh-cn/web/api/eventtarget/eventtarget/index.html b/files/zh-cn/web/api/eventtarget/eventtarget/index.html index 89ff7132d7b58d..e9f4c240dabb16 100644 --- a/files/zh-cn/web/api/eventtarget/eventtarget/index.html +++ b/files/zh-cn/web/api/eventtarget/eventtarget/index.html @@ -6,7 +6,7 @@

        {{APIRef("DOM Events")}}

        -

        EventTarget() 构造方法将会创建一个新的{{domxref("EventTarget")}} 对象实例。

        +

        EventTarget() 构造方法将会创建一个新的{{domxref("EventTarget")}} 对象实例。

        语法

        @@ -24,7 +24,7 @@

        例子

        class MyEventTarget extends EventTarget {
           constructor(mySecret) {
        -    super();
        +    super();
             this._secret = mySecret;
           }
         
        @@ -53,7 +53,7 @@ 

        Specifications

        {{SpecName('DOM WHATWG', '#dom-eventtarget-eventtarget', 'EventTarget() constructor')}} {{Spec2('DOM WHATWG')}} -   + @@ -71,4 +71,4 @@

        另见

    -

     

    +

    diff --git a/files/zh-cn/web/api/eventtarget/index.html b/files/zh-cn/web/api/eventtarget/index.html index df6eed6140e293..8ecddaa62aa63f 100644 --- a/files/zh-cn/web/api/eventtarget/index.html +++ b/files/zh-cn/web/api/eventtarget/index.html @@ -12,7 +12,7 @@

    EventTarget 是一个 DOM 接口,由可以接收事件、并且可以创建侦听器的对象实现。

    -

    {{domxref("Element")}},{{domxref("document")}} 和 {{domxref("window")}} 是最常见的 event targets ,但是其他对象也可以作为 event targets,比如 {{domxref("XMLHttpRequest")}},{{domxref("AudioNode")}},{{domxref("AudioContext")}}  等等。

    +

    {{domxref("Element")}},{{domxref("document")}} 和 {{domxref("window")}} 是最常见的 event targets ,但是其他对象也可以作为 event targets,比如 {{domxref("XMLHttpRequest")}},{{domxref("AudioNode")}},{{domxref("AudioContext")}} 等等。

    许多 event targets(包括 elements, documents 和 windows)支持通过 onevent 特性和属性设置事件处理程序 (event handlers)。

    @@ -22,7 +22,7 @@

    构造函数

    {{domxref("EventTarget.EventTarget()","EventTarget()")}}
    -
    创建一个新的 EventTarget 对象实例。
    +
    创建一个新的 EventTarget 对象实例。

    方法

    @@ -38,11 +38,11 @@

    方法

    Mozilla chrome 代码的其他方法

    -

    Mozilla 扩展,供 JS 实现的事件目标使用以 实现 on* 属性。另见 WebIDL bindings 绑定。

    +

    Mozilla 扩展,供 JS 实现的事件目标使用以 实现 on* 属性。另见 WebIDL bindings 绑定。

      -
    • void setEventHandler(DOMString type, EventHandler handler) {{non-standard_inline}}
    • -
    • EventHandler getEventHandler(DOMString type) {{non-standard_inline}}
    • +
    • void setEventHandler(DOMString type, EventHandler handler) {{non-standard_inline}}
    • +
    • EventHandler getEventHandler(DOMString type) {{non-standard_inline}}

    示例

    @@ -99,7 +99,7 @@

    浏览器兼容性

    相关链接

    diff --git a/files/zh-cn/web/api/eventtarget/removeeventlistener/index.html b/files/zh-cn/web/api/eventtarget/removeeventlistener/index.html index 9dd6280a1592a0..0473730f2e8ec1 100644 --- a/files/zh-cn/web/api/eventtarget/removeeventlistener/index.html +++ b/files/zh-cn/web/api/eventtarget/removeeventlistener/index.html @@ -25,13 +25,13 @@

    参数

    一个字符串,表示需要移除的事件类型,如 "click"
    listener
    需要从目标事件移除的 {{ domxref("EventListener") }} 函数。
    -
    options {{optional_inline}}
    +
    options {{optional_inline}}
    一个指定事件侦听器特征的可选对象。可选项有:
      -
    • capture: 一个 {{jsxref("Boolean")}} 表示这个类型的事件将会被派遣到已经注册的侦听器,然后再派遣到 DOM 树中它下面的任何 EventTarget
    • -
    • {{non-standard_inline}} mozSystemGroup: 仅可运行于 XBL 或者 Firefox Chrome,它是一个 {{jsxref("Boolean")}},用于定义是否将侦听器添加到系统组。
    • +
    • capture: 一个 {{jsxref("Boolean")}} 表示这个类型的事件将会被派遣到已经注册的侦听器,然后再派遣到 DOM 树中它下面的任何 EventTarget
    • +
    • {{non-standard_inline}} mozSystemGroup: 仅可运行于 XBL 或者 Firefox Chrome,它是一个 {{jsxref("Boolean")}},用于定义是否将侦听器添加到系统组。
    @@ -46,29 +46,29 @@

    返回值

    匹配要删除的事件监听

    -

    需要提供以前调用{{domxref("EventTarget.addEventListener", "addEventListener()")}}所提供的监听事件,这样你或许可以达到移除此监听事件的目的。很明显,你需要提供相同的 type 和 listener 参数给 removeEventListener(), 但是 options 或者 useCapture 参数呢?

    +

    需要提供以前调用{{domxref("EventTarget.addEventListener", "addEventListener()")}}所提供的监听事件,这样你或许可以达到移除此监听事件的目的。很明显,你需要提供相同的 typelistener 参数给 removeEventListener(), 但是 options 或者 useCapture 参数呢?

    -

    当使用 addEventListener() 时,如果 options参数不同,那么你可以在相同的type 上多次添加相同的监听,唯一需要 removeEventListener() 检测的是 capture/useCapture 标志。这个标志必须与 removeEventListener() 的对应标志匹配,但是其他的值不需要。

    +

    当使用 addEventListener() 时,如果 options参数不同,那么你可以在相同的type 上多次添加相同的监听,唯一需要 removeEventListener() 检测的是 capture/useCapture 标志。这个标志必须与 removeEventListener() 的对应标志匹配,但是其他的值不需要。

    -

    举个例子,思考一下下面的 addEventListener():

    +

    举个例子,思考一下下面的 addEventListener():

    element.addEventListener("mousedown", handleMouseDown, true);
    -

    现在思考下下面两个 removeEventListener():

    +

    现在思考下下面两个 removeEventListener():

    element.removeEventListener("mousedown", handleMouseDown, false);     // 失败
     element.removeEventListener("mousedown", handleMouseDown, true);      // 成功
     
    -

    第一个调用失败是因为 useCapture 没有匹配。第二个调用成功,是因为useCapture 匹配相同。

    +

    第一个调用失败是因为 useCapture 没有匹配。第二个调用成功,是因为useCapture 匹配相同。

    现在再思考下这个:

    element.addEventListener("mousedown", handleMouseDown, { passive: true });
    -

    这里,我们在options 对象里将 passive 设成 true, 其他options配置都是默认值 false.

    +

    这里,我们在options 对象里将 passive 设成 true, 其他options配置都是默认值 false.

    -

    现在我们看下下面的 removeEventListener() . 当配置 capture 或 useCapture 为 true 时,移除事件失败; 其他所有都是成功的。只有 capture 配置影响 removeEventListener().

    +

    现在我们看下下面的 removeEventListener() . 当配置 captureuseCapturetrue 时,移除事件失败; 其他所有都是成功的。只有 capture 配置影响 removeEventListener().

    element.removeEventListener("mousedown", handleMouseDown, { passive: true });     // Succeeds
     element.removeEventListener("mousedown", handleMouseDown, { capture: false });    // Succeeds
    @@ -77,13 +77,13 @@ 

    匹配要删除的事件监听

    element.removeEventListener("mousedown", handleMouseDown, false); // Succeeds element.removeEventListener("mousedown", handleMouseDown, true); // Fails
    -

    值得注意的是,一些浏览器版本在这方面会有些不一致,除非你有特别的理由, 使用与调用 addEventListener() 时配置的参数去调用removeEventListener() 是明智的.

    +

    值得注意的是,一些浏览器版本在这方面会有些不一致,除非你有特别的理由, 使用与调用 addEventListener() 时配置的参数去调用removeEventListener() 是明智的.

    备注

    一个 {{ domxref("EventTarget") }} 上的 {{ domxref("EventListener") }} 被移除之后,如果此事件正在执行,会立即停止。 {{ domxref("EventListener") }} 移除之后不能被触发,但可以重新绑定。

    -

    EventTarget上使用任何未识别当前注册的{{ domxref("EventListener") }} 调用 removeEventListener() 不会起任何作用。

    +

    EventTarget上使用任何未识别当前注册的{{ domxref("EventListener") }} 调用 removeEventListener() 不会起任何作用。

    示例

    @@ -195,8 +195,8 @@

    注意:

    -

    document.removeEventListener() 方法用于移除由 document.addEventListener() 方法添加的事件句柄。

    +

    document.removeEventListener() 方法用于移除由 document.addEventListener() 方法添加的事件句柄。

    -

    注意: 如果要移除事件句柄,addEventListener() 的执行函数必须使用外部函数,如(myFunction) 匿名函数,类似 "document.removeEventListener("event", function(){ myScript });" 该事件是无法移除的。

    +

    注意: 如果要移除事件句柄,addEventListener() 的执行函数必须使用外部函数,如(myFunction) 匿名函数,类似 "document.removeEventListener("event", function(){ myScript });" 该事件是无法移除的。

    -

    提示: 使用 element.addEventListener() 和 element.removeEventListener() 方法来添加或移除指定元素的事件句柄。

    +

    提示: 使用 element.addEventListener() 和 element.removeEventListener() 方法来添加或移除指定元素的事件句柄。

    diff --git a/files/zh-cn/web/api/extendableevent/index.html b/files/zh-cn/web/api/extendableevent/index.html index 15ebc607a978a0..76c5b43049cbdc 100644 --- a/files/zh-cn/web/api/extendableevent/index.html +++ b/files/zh-cn/web/api/extendableevent/index.html @@ -21,7 +21,7 @@
    如果在ExtendableEvent处理程序之外调用{{domxref("ExtendableEvent.waitUntil","waitUntil()")}},浏览器应该抛出一个InvalidStateError;还要注意,多个调用将堆积起来,结果 promises 将添加到extend lifetime promises.
    -
     
    +

    提示: 上述段落中描述的行为在 firefox 43 中得到了修复(参见 {{bug(1180274)}} )。

    diff --git a/files/zh-cn/web/api/extendableevent/waituntil/index.html b/files/zh-cn/web/api/extendableevent/waituntil/index.html index 1d4bb11329dad7..2e27123670edb2 100644 --- a/files/zh-cn/web/api/extendableevent/waituntil/index.html +++ b/files/zh-cn/web/api/extendableevent/waituntil/index.html @@ -7,11 +7,11 @@

    ExtendableEvent.waitUntil() 方法告诉事件分发器该事件仍在进行。这个方法也可以用于检测进行的任务是否成功。在服务工作线程中,这个方法告诉浏览器事件一直进行,直至 promise 解决,浏览器不应该在事件中的异步操作完成之前终止服务工作线程。

    -

    服务工作线程(service workers)中的 {{domxref("ServiceWorkerGlobalScope/install_event", "install")}} 事件使用 waitUntil() 来将服务工作线程保持在 {{domxref("ServiceWorkerRegistration.installing", "installing")}} 阶段。如果传入 waitUntil() 的 promise 被拒绝,则将此次安装视为失败,丢弃这个服务工作线程。这主要用于确保在服务工作线程安装以前,所有依赖的核心缓存都已经成功载入。

    +

    服务工作线程(service workers)中的 {{domxref("ServiceWorkerGlobalScope/install_event", "install")}} 事件使用 waitUntil() 来将服务工作线程保持在 {{domxref("ServiceWorkerRegistration.installing", "installing")}} 阶段。如果传入 waitUntil() 的 promise 被拒绝,则将此次安装视为失败,丢弃这个服务工作线程。这主要用于确保在服务工作线程安装以前,所有依赖的核心缓存都已经成功载入。

    -

    服务工作线程(service workers)中的 {{domxref("ServiceWorkerGlobalScope/activate_event", "activate")}} 事件使用 waitUntil() 来延迟函数事件,如 fetch 和 push,直至传入 waitUntil() 的 promise 被解决。这让服务工作线程有时间更新数据库架构(database schema)和删除过时缓存({{domxref("Cache", "caches")}}),让其他事件能在一个完成更新的状态下进行。

    +

    服务工作线程(service workers)中的 {{domxref("ServiceWorkerGlobalScope/activate_event", "activate")}} 事件使用 waitUntil() 来延迟函数事件,如 fetchpush,直至传入 waitUntil() 的 promise 被解决。这让服务工作线程有时间更新数据库架构(database schema)和删除过时缓存({{domxref("Cache", "caches")}}),让其他事件能在一个完成更新的状态下进行。

    -

     waitUntil() 方法最初必须在事件回调里调用,在此之后,方法可以被调用多次,直至所有传入的 promise 被解决。

    +

    waitUntil() 方法最初必须在事件回调里调用,在此之后,方法可以被调用多次,直至所有传入的 promise 被解决。

    注意: 上述段落描述的行为已经在 Firefox 43 中被修复 (参见 {{bug(1180274)}}.)

    @@ -27,17 +27,17 @@

    参数

    示例

    -

    在服务工作线程的 install 事件中使用 waitUntil()

    +

    在服务工作线程的 install 事件中使用 waitUntil()

    addEventListener('install', event => {
       const preCache = async () => {
    -    const cache = await caches.open('static-v1');
    -    return cache.addAll([
    -      '/',
    -      '/about/',
    -      '/static/styles.css'
    -    ]);
    -  };
    +    const cache = await caches.open('static-v1');
    +    return cache.addAll([
    +      '/',
    +      '/about/',
    +      '/static/styles.css'
    +    ]);
    +  };
       event.waitUntil(preCache());
     });
    diff --git a/files/zh-cn/web/api/fetch/index.html b/files/zh-cn/web/api/fetch/index.html index 811465fe1b9b6e..fdfe6682532318 100644 --- a/files/zh-cn/web/api/fetch/index.html +++ b/files/zh-cn/web/api/fetch/index.html @@ -13,13 +13,13 @@ ---

    {{APIRef("Fetch")}}

    -

    全局的 fetch() 方法用于发起获取资源的请求。它返回一个 promise,这个 promise 会在请求响应后被 resolve,并传回 {{domxref("Response")}} 对象。

    +

    全局的 fetch() 方法用于发起获取资源的请求。它返回一个 promise,这个 promise 会在请求响应后被 resolve,并传回 {{domxref("Response")}} 对象。

    {{domxref("Window")}} 和 {{domxref("WorkerGlobalScope")}} 都实现了 WorkerOrGlobalScope。 ——这意味着基本在任何场景下只要你想获取资源,都可以使用 位于 WorkerOrGlobalScope 中的 fetch() 方法。

    -

    当遇到网络错误时,{{domxref("fetch()")}} 返回的 promise 会被 reject,并传回 {{jsxref("TypeError")}},虽然这也可能因为权限或其它问题导致。成功的 fetch() 检查不仅要包括 promise 被 resolve,还要包括 {{domxref("Response.ok")}} 属性为 true。HTTP 404 状态并不被认为是网络错误。

    +

    当遇到网络错误时,{{domxref("fetch()")}} 返回的 promise 会被 reject,并传回 {{jsxref("TypeError")}},虽然这也可能因为权限或其它问题导致。成功的 fetch() 检查不仅要包括 promise 被 resolve,还要包括 {{domxref("Response.ok")}} 属性为 true。HTTP 404 状态并不被认为是网络错误。

    -

    fetch() 方法由 Content Security Policy 的 connect-src指令控制,而不是它请求的资源。

    +

    fetch() 方法由 Content Security Policyconnect-src指令控制,而不是它请求的资源。

    备注:{{domxref("fetch()")}} 方法的参数与 {{domxref("Request.Request","Request()")}} 构造器是一样的。

    @@ -36,7 +36,7 @@

    参数

    ?input
    定义要获取的资源。这可能是:
      -
    • 一个 {{domxref("USVString")}} 字符串,包含要获取资源的 URL。一些浏览器会接受 blob: 和 data: 作为 schemes.
    • +
    • 一个 {{domxref("USVString")}} 字符串,包含要获取资源的 URL。一些浏览器会接受 blob:data: 作为 schemes.
    • 一个 {{domxref("Request")}} 对象。
    @@ -44,15 +44,15 @@

    参数

    一个配置项对象,包括所有对请求的设置。可选的参数有:
    • method: 请求使用的方法,如 GETPOST
    • -
    • headers: 请求的头信息,形式为 {{domxref("Headers")}} 的对象或包含 {{domxref("ByteString")}} 值的对象字面量。
    • -
    • body: 请求的 body 信息:可能是一个 {{domxref("Blob")}}、{{domxref("BufferSource")}}、{{domxref("FormData")}}、{{domxref("URLSearchParams")}} 或者 {{domxref("USVString")}} 对象。注意 GET 或 HEAD 方法的请求不能包含 body 信息。
    • +
    • headers: 请求的头信息,形式为 {{domxref("Headers")}} 的对象或包含 {{domxref("ByteString")}} 值的对象字面量。
    • +
    • body: 请求的 body 信息:可能是一个 {{domxref("Blob")}}、{{domxref("BufferSource")}}、{{domxref("FormData")}}、{{domxref("URLSearchParams")}} 或者 {{domxref("USVString")}} 对象。注意 GET 或 HEAD 方法的请求不能包含 body 信息。
    • mode: 请求的模式,如 corsno-cors 或者 same-origin
    • credentials: 请求的 credentials,如 omitsame-origin 或者 include。为了在当前域名内自动发送 cookie,必须提供这个选项,从 Chrome 50 开始,这个属性也可以接受 {{domxref("FederatedCredential")}} 实例或是一个 {{domxref("PasswordCredential")}} 实例。
    • -
    • cache:  请求的 cache 模式:default、 no-storereload 、 no-cache、 force-cache 或者 only-if-cached
    • +
    • cache: 请求的 cache 模式:defaultno-storereloadno-cacheforce-cache 或者 only-if-cached
    • redirect: 可用的 redirect 模式:follow (自动重定向), error (如果产生重定向将自动终止并且抛出一个错误),或者 manual (手动处理重定向)。在 Chrome 中默认使用 follow(Chrome 47 之前的默认值是 manual)。
    • referrer: 一个 {{domxref("USVString")}} 可以是 no-referrerclient 或一个 URL。默认是 client
    • -
    • referrerPolicy: 指定了 HTTP 头部 referer 字段的值。可能为以下值之一:no-referrer、 no-referrer-when-downgradeoriginorigin-when-cross-origin、 unsafe-url
    • -
    • integrity: 包括请求的 subresource integrity 值(例如: sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=)。
    • +
    • referrerPolicy: 指定了 HTTP 头部 referer 字段的值。可能为以下值之一:no-referrerno-referrer-when-downgradeoriginorigin-when-cross-originunsafe-url
    • +
    • integrity: 包括请求的 subresource integrity 值(例如: sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=)。
    @@ -84,7 +84,7 @@

    例外

    示例

    -

    Fetch Request 示例 (参见 Fetch Request live) 中,我们使用对应的构造器创建了一个新的 {{domxref("Request")}} 对象,然后调用 fetch() 方法获取资源。因为我们是在请求一个图片,为了解析正常,我们对响应执行 {{domxref("Body.blob")}} 来设置相应的 MIME 类型。然后创建一个 Object URL,并在 {{htmlelement("img")}} 元素中把它显示出来。

    +

    Fetch Request 示例 (参见 Fetch Request live) 中,我们使用对应的构造器创建了一个新的 {{domxref("Request")}} 对象,然后调用 fetch() 方法获取资源。因为我们是在请求一个图片,为了解析正常,我们对响应执行 {{domxref("Body.blob")}} 来设置相应的 MIME 类型。然后创建一个 Object URL,并在 {{htmlelement("img")}} 元素中把它显示出来。

    var myImage = document.querySelector('img');
     
    @@ -97,7 +97,7 @@ 

    示例

    myImage.src = objectURL; });
    -

    在 Fetch with init then Request 示例 (参见 Fetch Request init live) 中,我们做同样的操作,除了在调用 fetch() 时传入一个 init 对象:

    +

    Fetch with init then Request 示例 (参见 Fetch Request init live) 中,我们做同样的操作,除了在调用 fetch() 时传入一个 init 对象:

    var myImage = document.querySelector('img');
     
    diff --git a/files/zh-cn/web/api/fetch_api/basic_concepts/index.html b/files/zh-cn/web/api/fetch_api/basic_concepts/index.html
    index c4de2a031459b6..dcb09ad80e0d46 100644
    --- a/files/zh-cn/web/api/fetch_api/basic_concepts/index.html
    +++ b/files/zh-cn/web/api/fetch_api/basic_concepts/index.html
    @@ -6,26 +6,26 @@
     

    {{DefaultAPISidebar("Fetch API")}}

    -

    Fetch 是一个现代的概念,等同于 XMLHttpRequest。它提供了许多与 XMLHttpRequest 相同的功能,但被设计成更具可扩展性和高效性。本文介绍了 Fetch API 的一些基本概念。

    +

    Fetch 是一个现代的概念,等同于 XMLHttpRequest。它提供了许多与 XMLHttpRequest 相同的功能,但被设计成更具可扩展性和高效性。本文介绍了 Fetch API 的一些基本概念。

    -

    Note: 这篇文章可能还需要修改。如果你觉得有的概念可以解释的更好,让人们在MDN 论坛上知道,或 Mozilla IRC (#mdn room)。

    +

    Note: 这篇文章可能还需要修改。如果你觉得有的概念可以解释的更好,让人们在MDN 论坛上知道,或 Mozilla IRC (#mdn room)。

    简而言之

    -

    Fetch 的核心在于对 HTTP 接口的抽象,包括 {{domxref("Request")}},{{domxref("Response")}},{{domxref("Headers")}},{{domxref("Body")}},以及用于初始化异步请求的 {{domxref("GlobalFetch.fetch","global fetch")}}。得益于 JavaScript 实现的这些抽象好的 HTTP 模块,其他接口能够很方便的使用这些功能。

    +

    Fetch 的核心在于对 HTTP 接口的抽象,包括 {{domxref("Request")}},{{domxref("Response")}},{{domxref("Headers")}},{{domxref("Body")}},以及用于初始化异步请求的 {{domxref("GlobalFetch.fetch","global fetch")}}。得益于 JavaScript 实现的这些抽象好的 HTTP 模块,其他接口能够很方便的使用这些功能。

    -

    Service Workers 是大量使用 Fetch 的 API 的一个示例。

    +

    Service Workers 是大量使用 Fetch 的 API 的一个示例。

    -

    除此之外,Fetch 还利用到了请求的异步特性——它是基于 {{jsxref("Promise-based","Promise")}} 的。

    +

    除此之外,Fetch 还利用到了请求的异步特性——它是基于 {{jsxref("Promise-based","Promise")}} 的。

    Guard

    -

    Guard 是 {{domxref("Headers")}} 对象的特性,基于不同的情况,它可以有以下取值:immutable、request、request-no-cors、response 或 none。

    +

    Guard 是 {{domxref("Headers")}} 对象的特性,基于不同的情况,它可以有以下取值:immutable、request、request-no-cors、response 或 none。

    -

    当使用 {{domxref("Headers.Headers","Headers()")}} {{glossary("constructor")}} 创建一个新的 {{domxref("Headers")}} 对象的时候,它的 guard 被设置成 none(默认值)。当创建 {{domxref("Request")}} 或 {{domxref("Response")}} 对象的时候,它将拥有一个按照以下规则实现的与之关联的 {{domxref("Headers")}} 对象:

    +

    当使用 {{domxref("Headers.Headers","Headers()")}} {{glossary("constructor")}} 创建一个新的 {{domxref("Headers")}} 对象的时候,它的 guard 被设置成 none(默认值)。当创建 {{domxref("Request")}} 或 {{domxref("Response")}} 对象的时候,它将拥有一个按照以下规则实现的与之关联的 {{domxref("Headers")}} 对象:

    @@ -42,7 +42,7 @@

    Guard

    - + @@ -57,10 +57,10 @@

    Guard

    request
    {{domxref("Request.Request","Request()")}},{{domxref("Request.mode","mode")}} 设置成 no-cors{{domxref("Request.Request","Request()")}},{{domxref("Request.mode","mode")}} 设置成 no-cors request-no-cors
    -

    头信息的 guard 会影响 {{domxref("Headers.set","set()")}}、{{domxref("Headers.delete","delete()")}} 和 {{domxref("Headers.append","append()")}} 方法。如果你试图修改 guard 是 immutable 的 {{domxref("Headers")}} 对象,那么会抛出一个 TypeError。以下情况则不会抛出错误:

    +

    头信息的 guard 会影响 {{domxref("Headers.set","set()")}}、{{domxref("Headers.delete","delete()")}} 和 {{domxref("Headers.append","append()")}} 方法。如果你试图修改 guard 是 immutable 的 {{domxref("Headers")}} 对象,那么会抛出一个 TypeError。以下情况则不会抛出错误:

      -
    • guard 是 request 并且头信息中的 name 不是 {{Glossary("forbidden header name")}}
    • -
    • guard 是 request-no-cors 并且头信息中的 name/value 是 {{Glossary("simple header")}}
    • -
    • guard 是 response 并且头信息中的 name 不是 {{Glossary("forbidden response header name")}}
    • +
    • guard 是 request 并且头信息中的 name 不是 {{Glossary("forbidden header name")}}
    • +
    • guard 是 request-no-cors 并且头信息中的 name/value 是 {{Glossary("simple header")}}
    • +
    • guard 是 response 并且头信息中的 name 不是 {{Glossary("forbidden response header name")}}
    diff --git a/files/zh-cn/web/api/fetch_api/index.html b/files/zh-cn/web/api/fetch_api/index.html index 0cae67fbd80a38..68690479fe775a 100644 --- a/files/zh-cn/web/api/fetch_api/index.html +++ b/files/zh-cn/web/api/fetch_api/index.html @@ -19,16 +19,16 @@

    概念和用法

    它同时还为有关联性的概念,例如 CORS 和 HTTP 原生头信息,提供一种新的定义,取代它们原来那种分离的定义。

    -

    发送请求或者获取资源,需要使用 {{domxref("fetch()")}} 方法。它在很多接口中都被实现了,更具体地说,是在 {{domxref("Window")}} 和 {{domxref("WorkerGlobalScope")}} 接口上。因此在几乎所有环境中都可以用这个方法获取到资源。

    +

    发送请求或者获取资源,需要使用 {{domxref("fetch()")}} 方法。它在很多接口中都被实现了,更具体地说,是在 {{domxref("Window")}} 和 {{domxref("WorkerGlobalScope")}} 接口上。因此在几乎所有环境中都可以用这个方法获取到资源。

    -

    fetch() 必须接受一个参数——资源的路径。无论请求成功与否,它都返回一个 Promise 对象,resolve 对应请求的 {{domxref("Response")}}。你也可以传一个可选的第二个参数 init(参见 {{domxref("Request")}})。

    +

    fetch() 必须接受一个参数——资源的路径。无论请求成功与否,它都返回一个 Promise 对象,resolve 对应请求的 {{domxref("Response")}}。你也可以传一个可选的第二个参数 init(参见 {{domxref("Request")}})。

    -

    一旦 {{domxref("Response")}} 被返回,就可以使用一些方法来定义内容的形式,以及应当如何处理内容(参见 {{domxref("Body")}})。

    +

    一旦 {{domxref("Response")}} 被返回,就可以使用一些方法来定义内容的形式,以及应当如何处理内容(参见 {{domxref("Body")}})。

    -

    你也可以通过 {{domxref("Request.Request","Request()")}} 和 {{domxref("Response.Response","Response()")}} 的构造函数直接创建请求和响应,但是我们不建议这么做。他们应该被用于创建其他 API 的结果(比如,service workers 中的 {{domxref("FetchEvent.respondWith")}})。

    +

    你也可以通过 {{domxref("Request.Request","Request()")}} 和 {{domxref("Response.Response","Response()")}} 的构造函数直接创建请求和响应,但是我们不建议这么做。他们应该被用于创建其他 API 的结果(比如,service workers 中的 {{domxref("FetchEvent.respondWith")}})。

    -

    注意:更多关于 Fetch API 的用法,参考 Using Fetch,以及一些概念 Fetch basic concepts

    +

    注意:更多关于 Fetch API 的用法,参考 Using Fetch,以及一些概念 Fetch basic concepts

    中止 fetch

    diff --git a/files/zh-cn/web/api/fetchevent/index.html b/files/zh-cn/web/api/fetchevent/index.html index ed8f50baa303fd..aba650fede14fd 100644 --- a/files/zh-cn/web/api/fetchevent/index.html +++ b/files/zh-cn/web/api/fetchevent/index.html @@ -22,18 +22,18 @@

    属性

    Inherits properties from its ancestor, {{domxref("Event")}}.

    -
    {{domxref("FetchEvent.isReload")}} {{readonlyInline}}
    +
    {{domxref("FetchEvent.isReload")}} {{readonlyInline}}
    Returns a {{jsxref("Boolean")}} that is true if the event was dispatched with the user's intention for the page to reload, and false otherwise. Typically, pressing the refresh button in a browser is a reload, while clicking a link and pressing the back button is not.
    -
    {{domxref("FetchEvent.request")}} {{readonlyInline}}
    +
    {{domxref("FetchEvent.request")}} {{readonlyInline}}
    Returns the {{domxref("Request")}} that triggered the event handler.
    -
    {{domxref("FetchEvent.clientId")}} {{readonlyInline}}
    +
    {{domxref("FetchEvent.clientId")}} {{readonlyInline}}
    Returns the id of the client that the current service worker is controlling.

    Deprecated properties

    -
    {{domxref("FetchEvent.client")}} {{readonlyInline}}
    +
    {{domxref("FetchEvent.client")}} {{readonlyInline}}
    Returns the {{domxref("Client")}} that the current service worker is controlling.
    @@ -43,16 +43,16 @@

    方法

    {{domxref("FetchEvent.respondWith()")}}
    -
    Resolves by returning a {{domxref("Response")}} or a network error  to Fetch.
    +
    Resolves by returning a {{domxref("Response")}} or a network error to Fetch.
    {{domxref("ExtendableEvent.waitUntil", "ExtendableEvent.waitUntil()")}}
    -

    Extends the lifetime of the event.  It is intended to be called in the {{event("install")}} {{event("Event_handlers", "event handler")}} for the {{domxref("ServiceWorkerRegistration.installing", "installing")}} worker and on the {{event("active")}} {{event("Event_handlers", "event handler")}} for the {{domxref("ServiceWorkerRegistration.active", "active")}} worker.

    +

    Extends the lifetime of the event. It is intended to be called in the {{event("install")}} {{event("Event_handlers", "event handler")}} for the {{domxref("ServiceWorkerRegistration.installing", "installing")}} worker and on the {{event("active")}} {{event("Event_handlers", "event handler")}} for the {{domxref("ServiceWorkerRegistration.active", "active")}} worker.

    示例

    -

    This code snippet is from the service worker fetch sample (run the fetch sample live). In an earlier part of the code,  an {{domxref("InstallEvent")}} controls caching of a number of resources. The {{domxref("ServiceWorkerGlobalScope.onfetch")}} event handler then listens for the {{event("fetch")}} event. When fired, {{domxref("FetchEvent.respondWith()")}} returns a promise back to the controlled page. This promise resolves to the first matching URL request in the {{domxref("Cache")}} object. If no match is found (i.e. that resource wasn't cached in the install phase), the code fetches a response from the network.

    +

    This code snippet is from the service worker fetch sample (run the fetch sample live). In an earlier part of the code, an {{domxref("InstallEvent")}} controls caching of a number of resources. The {{domxref("ServiceWorkerGlobalScope.onfetch")}} event handler then listens for the {{event("fetch")}} event. When fired, {{domxref("FetchEvent.respondWith()")}} returns a promise back to the controlled page. This promise resolves to the first matching URL request in the {{domxref("Cache")}} object. If no match is found (i.e. that resource wasn't cached in the install phase), the code fetches a response from the network.

    The code also handles exceptions thrown from the {{domxref("ServiceWorkerGlobalScope.fetch()")}} operation. Note that a HTTP error response (e.g., 404) doesn't trigger an exception. It returns a normal response object that has the appropriate error code set.

    diff --git a/files/zh-cn/web/api/fetchevent/respondwith/index.html b/files/zh-cn/web/api/fetchevent/respondwith/index.html index 7d3fa9e604fece..cb3ea3cca933e7 100644 --- a/files/zh-cn/web/api/fetchevent/respondwith/index.html +++ b/files/zh-cn/web/api/fetchevent/respondwith/index.html @@ -5,9 +5,9 @@ ---

    {{APIRef("Service Workers API")}}{{SeeCompatTable}}

    -

    {{domxref("FetchEvent")}} 接口的 respondWith() 方法旨在包裹代码,这些代码为来自受控页面的 request 生成自定义的 response。这些代码通过返回一个 {{domxref("Response")}} 、 network error 或者 Fetch的方式resolve。

    +

    {{domxref("FetchEvent")}} 接口的 respondWith() 方法旨在包裹代码,这些代码为来自受控页面的 request 生成自定义的 response。这些代码通过返回一个 {{domxref("Response")}} 、 network error 或者 Fetch的方式resolve。

    -

    有关跨域内容污染的渲染端安全检测与 {{domxref("Response")}} 体的透明度(或者不透明度)相关联,而不是 URL。如果 request 是一个顶级的导航,而返回值是一个类型属性不透明的 {{domxref("Response")}}(即不透明响应体),一个 network error 将被返回给 Fetch。所有成功(非网络错误)响应的最终 URL 是请求的 URL。

    +

    有关跨域内容污染的渲染端安全检测与 {{domxref("Response")}} 体的透明度(或者不透明度)相关联,而不是 URL。如果 request 是一个顶级的导航,而返回值是一个类型属性不透明的 {{domxref("Response")}}(即不透明响应体),一个 network error 将被返回给 Fetch。所有成功(非网络错误)响应的最终 URL 是请求的 URL。

    语法

    @@ -25,9 +25,9 @@

    参数

    示例

    -

    该代码片段来自 service worker fetch sample (run the fetch sample live)。 {{domxref("ServiceWorkerGlobalScope.onfetch")}} 事件处理程序侦听 {{event("fetch")}} 事件。当触发时,{{domxref("FetchEvent.respondWith", "FetchEvent.respondWith(any value)")}} 返回一个 promise 给受控页面。该 promise 在 {{domxref("Cache")}} 对象中查询第一个匹配 URL 请求。如果没有发现匹配项,该代码将转而从网络获取响应。

    +

    该代码片段来自 service worker fetch sample (run the fetch sample live)。 {{domxref("ServiceWorkerGlobalScope.onfetch")}} 事件处理程序侦听 {{event("fetch")}} 事件。当触发时,{{domxref("FetchEvent.respondWith", "FetchEvent.respondWith(any value)")}} 返回一个 promise 给受控页面。该 promise 在 {{domxref("Cache")}} 对象中查询第一个匹配 URL 请求。如果没有发现匹配项,该代码将转而从网络获取响应。

    -

    该代码也处理从 {{domxref("ServiceWorkerGlobalScope.fetch")}} 操作中抛出的异常。请注意,HTTP 错误响应(例如 404)不会触发异常。它将返回具有相应错误代码集的正常响应对象。

    +

    该代码也处理从 {{domxref("ServiceWorkerGlobalScope.fetch")}} 操作中抛出的异常。请注意,HTTP 错误响应(例如 404)不会触发异常。它将返回具有相应错误代码集的正常响应对象。

    self.addEventListener('fetch', function(event) {
       console.log('Handling fetch event for', event.request.url);
    diff --git a/files/zh-cn/web/api/file/file/index.html b/files/zh-cn/web/api/file/file/index.html
    index df1f3ab7777a1e..5c9b4ba248bea9 100644
    --- a/files/zh-cn/web/api/file/file/index.html
    +++ b/files/zh-cn/web/api/file/file/index.html
    @@ -5,7 +5,7 @@
     ---
     

    {{APIRef("File")}}

    -

    File() 构造器创建新的 {{domxref("File")}} 对象实例。

    +

    File() 构造器创建新的 {{domxref("File")}} 对象实例。

    语法

    @@ -15,13 +15,13 @@

    参数

    bits
    -
    一个包含{{jsxref("ArrayBuffer")}},{{domxref("ArrayBufferView")}},{{domxref("Blob")}},或者 {{domxref("DOMString")}} 对象的 {{jsxref("Array")}} — 或者任何这些对象的组合。这是 UTF-8 编码的文件内容。
    +
    一个包含{{jsxref("ArrayBuffer")}},{{domxref("ArrayBufferView")}},{{domxref("Blob")}},或者 {{domxref("DOMString")}} 对象的 {{jsxref("Array")}} — 或者任何这些对象的组合。这是 UTF-8 编码的文件内容。
    name
    {{domxref("USVString")}},表示文件名称,或者文件路径。
    options {{optional_inline}}
    选项对象,包含文件的可选属性。可用的选项如下:
      -
    • type: {{domxref("DOMString")}},表示将要放到文件中的内容的 MIME 类型。默认值为 "" 。
    • +
    • type: {{domxref("DOMString")}},表示将要放到文件中的内容的 MIME 类型。默认值为 ""
    • lastModified: 数值,表示文件最后修改时间的 Unix 时间戳(毫秒)。默认值为 {{jsxref("Date.now()")}}。
    diff --git a/files/zh-cn/web/api/file/index.html b/files/zh-cn/web/api/file/index.html index 79391f577173b0..4657a7c43cec23 100644 --- a/files/zh-cn/web/api/file/index.html +++ b/files/zh-cn/web/api/file/index.html @@ -70,8 +70,8 @@

    浏览器兼容性

    注意事项

      -
    • 在 Gecko 中,你可以从 Chrome 代码中使用这个 API。详细内容参见 Using the DOM File API in chrome code。若要从 chrome 代码,JSM 和引导范围中使用它,你必须使用 Cu.importGlobalProperties(['File']); 来导入它。
    • -
    • 从 Gecko 6.0 {{geckoRelease("6.0")}} 开始,在特权代码(比如扩展中的代码)中,可以将一个 nsIFile 对象传入 File 构造函数,从而生成一个 File 对象。
    • +
    • 在 Gecko 中,你可以从 Chrome 代码中使用这个 API。详细内容参见 Using the DOM File API in chrome code。若要从 chrome 代码,JSM 和引导范围中使用它,你必须使用 Cu.importGlobalProperties(['File']); 来导入它。
    • +
    • 从 Gecko 6.0 {{geckoRelease("6.0")}} 开始,在特权代码(比如扩展中的代码)中,可以将一个 nsIFile 对象传入 File 构造函数,从而生成一个 File 对象。
    • 从 Gecko 8.0 {{geckoRelease("8.0")}} 开始,在 XPCOM 组件代码中,你可以直接使用 new File 来创建一个 File 对象,而不需要像以前那样必须实例化一个 nsIDOMFile 对象。File 对象和 {{domxref("Blob")}} 相反,使用第二个参数作为文件名。文件名可以是任意的字符串。
      new File( Array parts, String filename, BlobPropertyBag properties);
       
      diff --git a/files/zh-cn/web/api/file/lastmodified/index.html b/files/zh-cn/web/api/file/lastmodified/index.html index e397eb00f52e91..86f8bee9d78e4d 100644 --- a/files/zh-cn/web/api/file/lastmodified/index.html +++ b/files/zh-cn/web/api/file/lastmodified/index.html @@ -9,7 +9,7 @@ ---

      {{APIRef("File API")}}

      -

      只读属性 File.lastModified 返回所引用文件最后修改日期,为自 1970 年 1 月 1 日 0:00 以来的毫秒数。没有已知的最后修改时间则会返回当前时间。

      +

      只读属性 File.lastModified 返回所引用文件最后修改日期,为自 1970 年 1 月 1 日 0:00 以来的毫秒数。没有已知的最后修改时间则会返回当前时间。

      语法

      @@ -18,7 +18,7 @@

      语法

      -

      自 1970 年 1 月 1 日 0:00 以来的毫秒数。

      +

      自 1970 年 1 月 1 日 0:00 以来的毫秒数。

      实例

      @@ -30,12 +30,12 @@

      从 INPUT 标签读取文件

      const fileInput = document.getElementById('fileInput');
       fileInput.addEventListener('change', function(event) {
         // files is a FileList object (simliar to NodeList)
      -  const files = event.target.files;
      +  const files = event.target.files;
       
         for (let i = 0; i < files.length; i++) {
      -    const date = new Date(files[i].lastModified);
      -    alert(files[i].name + ' has a last modified date of ' + date);
      -  }
      +    const date = new Date(files[i].lastModified);
      +    alert(files[i].name + ' has a last modified date of ' + date);
      +  }
       });
       
      @@ -48,7 +48,7 @@

      动态创建文件

      如果文件是动态创建的,可以在构造函数{{domxref("File.File()", "new File()")}} 中提供最后修改时间。如果未提供则会继承文件对象被创建时的{{jsxref("Date.now()")}} 。

      var fileWithDate = new File([], 'file.bin', {
      -  lastModified: new Date(2017, 1, 1),
      +  lastModified: new Date(2017, 1, 1),
       });
       console.log(fileWithDate.lastModified); //returns 1485903600000
       
      diff --git a/files/zh-cn/web/api/file/type/index.html b/files/zh-cn/web/api/file/type/index.html
      index ac5aaa73da1b4e..d4cc19cf58d7e5 100644
      --- a/files/zh-cn/web/api/file/type/index.html
      +++ b/files/zh-cn/web/api/file/type/index.html
      @@ -13,7 +13,7 @@ 

      语法

      -

      字符串,包含媒体类型(MIME),表示文本是什么类型,例如 PNG 图像是 "image/png"。 

      +

      字符串,包含媒体类型(MIME),表示文本是什么类型,例如 PNG 图像是 "image/png"。

      示例

      @@ -25,12 +25,12 @@

      示例

      for (var i = 0; i < files.length; i++) { var name = files[i].name; -  var type = files[i].type; + var type = files[i].type; alert("Filename: " + name + " , Type: " + type); } }
      -

      注: 基于当前的实现,浏览器不会实际读取文件的字节流,来判断它的媒体类型。它基于文件扩展来假设;重命名为 .txt 的 PNG 图像文件为 "text/plain" 而不是 "image/png" 。而且,file.type 仅仅对常见文件类型可靠。例如图像、文档、音频和视频。不常见的文件扩展名会返回空字符串。开发者最好不要依靠这个属性,作为唯一的验证方案。

      +

      注: 基于当前的实现,浏览器不会实际读取文件的字节流,来判断它的媒体类型。它基于文件扩展来假设;重命名为 .txt 的 PNG 图像文件为 "text/plain" 而不是 "image/png" 。而且,file.type 仅仅对常见文件类型可靠。例如图像、文档、音频和视频。不常见的文件扩展名会返回空字符串。开发者最好不要依靠这个属性,作为唯一的验证方案。

      规范

      diff --git a/files/zh-cn/web/api/file/webkitrelativepath/index.html b/files/zh-cn/web/api/file/webkitrelativepath/index.html index 7d949afbf91ae3..76f3183bd65b3e 100644 --- a/files/zh-cn/web/api/file/webkitrelativepath/index.html +++ b/files/zh-cn/web/api/file/webkitrelativepath/index.html @@ -5,11 +5,11 @@ ---

      {{APIRef("File API")}}{{non-standard_header}}

      -

      File.webkitRelativePath 是只读属性,包含 {{domxref("USVString")}},它规定了文件的路径,相对于用户在 {{HTMLElement("input")}} 元素中选择的目录,这个元素设置了 {{htmlattrxref("webkitdirectory", "input")}} 属性。

      +

      File.webkitRelativePath 是只读属性,包含 {{domxref("USVString")}},它规定了文件的路径,相对于用户在 {{HTMLElement("input")}} 元素中选择的目录,这个元素设置了 {{htmlattrxref("webkitdirectory", "input")}} 属性。

      语法

      -
       relativePath = File.webkitRelativePath
      +
       relativePath = File.webkitRelativePath

      @@ -42,13 +42,13 @@

      结果

      {{ EmbedLiveSample('Example') }}

      -

      特别提醒:假设文件路径是 C:\f1\f2\f3\file.txt, 用户选择的是 f1 文件夹,则 Chrome、Firefox、Edge 都能正确返回  f2/f3/file.txt 值。而国产的 QQ 浏览器、360 浏览器、UC 浏览器、搜狗浏览器都只能返回 f3/file.txt。也就是国产浏览器调用webkitRelativePath返回的结果都不会是你希望得到的路径,请注意使用时的细微差距。

      +

      特别提醒:假设文件路径是 C:\f1\f2\f3\file.txt, 用户选择的是 f1 文件夹,则 Chrome、Firefox、Edge 都能正确返回 f2/f3/file.txt 值。而国产的 QQ 浏览器、360 浏览器、UC 浏览器、搜狗浏览器都只能返回 f3/file.txt。也就是国产浏览器调用webkitRelativePath返回的结果都不会是你希望得到的路径,请注意使用时的细微差距。

      规范

      {{Specifications}} -

      这个 API 没有官方的 W3C 或者 WHATWG 规范。

      +

      这个 API 没有官方的 W3C 或者 WHATWG 规范。

      浏览器兼容性

      diff --git a/files/zh-cn/web/api/file_and_directory_entries_api/firefox_support/index.html b/files/zh-cn/web/api/file_and_directory_entries_api/firefox_support/index.html index 59a8e9da1201ec..ee49793099a951 100644 --- a/files/zh-cn/web/api/file_and_directory_entries_api/firefox_support/index.html +++ b/files/zh-cn/web/api/file_and_directory_entries_api/firefox_support/index.html @@ -9,7 +9,7 @@

      创建原始文件系统 API 是为了让浏览器实现对访问用户存储设备上沙箱虚拟文件系统的支持。标准化规范的工作早在 2012 年就被放弃了,但到那时,谷歌 Chrome 包含了自己的 API 实现。随着时间的推移,许多流行的站点和 Web 应用程序开始使用它,通常不提供任何退回到标准 API 的方法,甚至在使用之前也没有检查 API 是否可用。相反,Mozilla 选择实现其他 api,这些 api 可以用来解决许多相同的问题,比如IndexedDB;查看博客文章,为什么 Firefox 中没有文件系统 API ?更多的见解。

    -

     

    +

    这导致许多流行的网站无法在 Chrome 以外的浏览器上正常运行。因此,我们尝试创建一个规范,提供可以达成共识的谷歌 API 的特性。结果是文件和目录 API 条目。Chrome 提供的这个 API 子集还没有完全指定;但是,出于 web 兼容性的原因,决定在 Firefox 中实现 API 的一个子集;这是在 Firefox 50 中引入的。

    @@ -70,7 +70,7 @@

    Chrome 规范偏差

    var FileSystemEntry = window.FileSystemEntry || window.Entry;
    -

    Firefox 中的限制

    +

    Firefox 中的限制

    接下来,让我们看看 API 的 Firefox 实现的局限性。概括地说,这些限制可以概括如下:

    diff --git a/files/zh-cn/web/api/file_and_directory_entries_api/introduction/index.html b/files/zh-cn/web/api/file_and_directory_entries_api/introduction/index.html index ee78802ea9d087..94b57e0037115b 100644 --- a/files/zh-cn/web/api/file_and_directory_entries_api/introduction/index.html +++ b/files/zh-cn/web/api/file_and_directory_entries_api/introduction/index.html @@ -12,7 +12,7 @@

    关于这篇文档

    -

    这篇介绍讨论了文件系统 API 中的基本概念和术语。它将给出一个大致的蓝图并引导你理解其中的 关键概念. 它也描述了一些限制,如果你忽略了它们将额能产生安全错误。关于该 API 中使用的更多术语,查看定义部分. 

    +

    这篇介绍讨论了文件系统 API 中的基本概念和术语。它将给出一个大致的蓝图并引导你理解其中的 关键概念. 它也描述了一些限制,如果你忽略了它们将额能产生安全错误。关于该 API 中使用的更多术语,查看定义部分.

    关于文件系统 API 的引用文献部分,查看引用 的登陆页及其子页。

    @@ -20,7 +20,7 @@

    关于这篇文档

    概要

    -

    文件系统 API 包括异步同步两种接口。异步 API 可以应用于当你不想操作锁定 UI 的情况。另一方面,同步 API 允许简单的程序模型,但它必须和WebWorkers 一起使用

    +

    文件系统 API 包括异步同步两种接口。异步 API 可以应用于当你不想操作锁定 UI 的情况。另一方面,同步 API 允许简单的程序模型,但它必须和WebWorkers 一起使用.

    该 API 的用途

    @@ -33,7 +33,7 @@

    该 API 的用途

  • 它提供了一种你的用户已经熟悉的存储 API,正如他们所习惯的文件系统。
  • -

    关于你用该 api 能够创建的特性示例,查看 使用示例 部分。 

    +

    关于你用该 api 能够创建的特性示例,查看 使用示例 部分。

    文件系统 API 和其他存储 API

    @@ -118,7 +118,7 @@

    文件系统 API 拥

    文件系统 API 拥有异步和同步两种版本。两种版本的 API 提供相同的功能和特性。事实上,它们基本相同,除了几个不同点以外。

      -
    • WebWorkers. 异步的 API 可以在文档或WebWorkers 上下文中使用,而同步 API 只能用于 WebWorkers. 
    • +
    • WebWorkers. 异步的 API 可以在文档或WebWorkers 上下文中使用,而同步 API 只能用于 WebWorkers.
    • Callbacks. 异步 API 不会将数据作为返回值;作为替代,你需要传递一个回调函数。你在操作中发送请求,并在回调时得到通知。相反,同步 API 不使用回调函数,因为 API 方法返回值。
    • 异步和同步 API 的全局方法. 异步 API 拥有这些全局方法:requestFileSystem()resolveLocalFileSystemURL(). 这些方法同时是 window 对象和 worker 全局作用域的成员。另一方面,同步 API 使用如下方法:requestFileSystemSync()resolveLocalFileSystemSyncURL(). 这些同步方法只是 worker 全局作用域的成员,而非 window 对象的。
    @@ -144,7 +144,7 @@

    文件系统 API 区分大小写

    文件系统 API 区分大小写并保留大小写。
    -

     

    +

    限制

    @@ -196,7 +196,7 @@

    其他

    规范:http://dev.w3.org/2009/dap/file-system/pub/FileSystem/

    -

    引用: File System API Reference

    +

    引用: File System API Reference

    相关文档:

    diff --git a/files/zh-cn/web/api/file_api/using_files_from_web_applications/index.html b/files/zh-cn/web/api/file_api/using_files_from_web_applications/index.html index e9eb5781b8757a..a1c8cac68e07d7 100644 --- a/files/zh-cn/web/api/file_api/using_files_from_web_applications/index.html +++ b/files/zh-cn/web/api/file_api/using_files_from_web_applications/index.html @@ -12,9 +12,9 @@ ---

    {{APIRef("File API")}}

    -

    通过使用在 HTML5 中加入到 DOM 的 File API,使在 web 内容中让用户选择本地文件然后读取这些文件的内容成为可能。用户可以通过 HTML 中的 {{HTMLElement("input/file", '<input type="file">')}} 元素或者是通过拖拽来选择本地文件。

    +

    通过使用在 HTML5 中加入到 DOM 的 File API,使在 web 内容中让用户选择本地文件然后读取这些文件的内容成为可能。用户可以通过 HTML 中的 {{HTMLElement("input/file", '<input type="file">')}} 元素或者是通过拖拽来选择本地文件。

    -

    如果你想通过扩展或者其它的 chrome 源码浏览器(browser chrome code)使用 DOM File API,是可行的;然而,需要注意有一些附加特性。详细请见 Using the DOM File API in chrome code

    +

    如果你想通过扩展或者其它的 chrome 源码浏览器(browser chrome code)使用 DOM File API,是可行的;然而,需要注意有一些附加特性。详细请见 Using the DOM File API in chrome code

    访问被选择的文件

    @@ -22,7 +22,7 @@

    访问被选择的文件

    <input type="file" id="input">
    -

    通过 File API,我们可以访问 {{DOMxRef("FileList")}},它包含了表示用户所选文件的 {{DOMxRef("File")}} 对象

    +

    通过 File API,我们可以访问 {{DOMxRef("FileList")}},它包含了表示用户所选文件的 {{DOMxRef("File")}} 对象

    如果用户只选择了一个文件,那么只需要考虑列表中的第一个文件。

    @@ -33,21 +33,21 @@

    访问被选择的文件

    通过 change 事件访问被选择的文件

    -

    可以(但不是强制的)通过 change 事件访问 {{DOMxRef("FileList")}}:

    +

    可以(但不是强制的)通过 change 事件访问 {{DOMxRef("FileList")}}:

    <input type="file" id="input" onchange="handleFiles(this.files)">
    -

    当用户选择一个文件时,handleFiles() 方法会用一个 {{DOMxRef("FileList")}} 对象作为参数被调用,{{DOMxRef("FileList")}} 对象包含表示用户选择的文件的 {{DOMxRef("File")}} 对象。

    +

    当用户选择一个文件时,handleFiles() 方法会用一个 {{DOMxRef("FileList")}} 对象作为参数被调用,{{DOMxRef("FileList")}} 对象包含表示用户选择的文件的 {{DOMxRef("File")}} 对象。

    -

    如果你想让用户选择多个文件,只需在 input 元素上使用 multiple 属性:

    +

    如果你想让用户选择多个文件,只需在 input 元素上使用 multiple 属性:

    <input type="file" id="input" multiple onchange="handleFiles(this.files)">
    -

    在这个例子中,对于每个用户选择的文件,传递给 handleFiles()方法的文件列表都包含一个对应的 {{DOMxRef("File")}} 对象。

    +

    在这个例子中,对于每个用户选择的文件,传递给 handleFiles()方法的文件列表都包含一个对应的 {{DOMxRef("File")}} 对象。

    动态添加 change 监听器

    -

    你需要使用 {{DOMxRef("EventTarget.addEventListener()")}} 去添加 change 事件监听器,像这样:

    +

    你需要使用 {{DOMxRef("EventTarget.addEventListener()")}} 去添加 change 事件监听器,像这样:

    const inputElement = document.getElementById("input");
     inputElement.addEventListener("change", handleFiles, false);
    @@ -60,7 +60,7 @@ 

    动态添加 change 监听器获取被选择文件的信息

    -

    DOM 提供 {{ domxref("FileList") }} 对象列出了用户选择的所有文件,每一个文件被指定为一个 {{ domxref("File") }} 对象。你可以通过检查文件列表 {{ domxref("FileList") }} 的 length 属性来确定用户选择了多少个文件:

    +

    DOM 提供 {{ domxref("FileList") }} 对象列出了用户选择的所有文件,每一个文件被指定为一个 {{ domxref("File") }} 对象。你可以通过检查文件列表 {{ domxref("FileList") }} 的 length 属性来确定用户选择了多少个文件:

    const numFiles = files.length;
     
    @@ -74,7 +74,7 @@

    获取被选择文件的信息

    这个循环遍历了文件列表里的所有文件。

    -

     {{ domxref("File") }} 对象提供了三个属性,包含了文件的有用信息。

    +

    {{ domxref("File") }} 对象提供了三个属性,包含了文件的有用信息。

    name
    @@ -82,12 +82,12 @@

    获取被选择文件的信息

    size
    以字节数为单位的文件大小,只读的 64 位整数。
    type
    -
    文件的 MIME 类型,只读字符串,当类型不能确定时为 ""
    +
    文件的 MIME 类型,只读字符串,当类型不能确定时为 ""

    示例:显示文件大小

    -

    下面的例子展示了 size 属性的一种可能用法:

    +

    下面的例子展示了 size 属性的一种可能用法:

    <!DOCTYPE html>
     <html>
    @@ -129,7 +129,7 @@ 

    示例:显示文件大小

    通过 click() 方法使用隐藏的 file input 元素

    -

    你可以隐藏公认难看的 file {{ HTMLElement("input") }} 元素并显示你自己的界面来打开文件选择器,然后显示哪个或哪些文件被用户选中了。你可以通过给 input 元素添加 display:none 的样式,再调用 {{HTMLElement("input") }} 元素的 {{domxref("element.click","click()") }} 方法来实现。

    +

    你可以隐藏公认难看的 file {{ HTMLElement("input") }} 元素并显示你自己的界面来打开文件选择器,然后显示哪个或哪些文件被用户选中了。你可以通过给 input 元素添加 display:none 的样式,再调用 {{HTMLElement("input") }} 元素的 {{domxref("element.click","click()") }} 方法来实现。

    考虑这段 HTML:

    @@ -137,7 +137,7 @@

    通过 click() 方 <button id="fileSelect">Select some files</button>

    -

    处理 click 事件的代码类似于这样:

    +

    处理 click 事件的代码类似于这样:

    const fileSelect = document.getElementById("fileSelect"),
       fileElem = document.getElementById("fileElem");
    @@ -153,7 +153,7 @@ 

    通过 click() 方

    使用 label 元素来触发一个隐藏的 file input 元素

    -

    允许在不使用 JavaScript(click() 方法)来打开文件选择器,可以使用 {{ HTMLElement("label") }} 元素。注意在这种情况下,input 元素不能使用 display: none(或 visibility: hidden)隐藏,否则 label 将无法通过键盘访问。使用 visually-hidden technique 作为替代。

    +

    允许在不使用 JavaScript(click() 方法)来打开文件选择器,可以使用 {{ HTMLElement("label") }} 元素。注意在这种情况下,input 元素不能使用 display: none(或 visibility: hidden)隐藏,否则 label 将无法通过键盘访问。使用 visually-hidden technique 作为替代。

    考虑这段 HTML:

    @@ -179,7 +179,7 @@

    使用 la }

    -

    这里不需要添加任何 JavaScript 代码来调用fileElem.click(),另外,这时你也可以给 label 元素添加你想要的样式。您需要在其 label 上提供隐藏 input 字段的焦点状态的视觉提示,比如上面用的轮廓,或者背景颜色或边框阴影。(截至编写时为止,Firefox 不显示 <input type="file"> 元素的视觉提示。)

    +

    这里不需要添加任何 JavaScript 代码来调用fileElem.click(),另外,这时你也可以给 label 元素添加你想要的样式。您需要在其 label 上提供隐藏 input 字段的焦点状态的视觉提示,比如上面用的轮廓,或者背景颜色或边框阴影。(截至编写时为止,Firefox 不显示 <input type="file"> 元素的视觉提示。)

    使用拖放来选择文件

    @@ -328,7 +328,7 @@

    示例:使用对象 URL 来

    首先,获取 ID 为 fileList 的 {{ HTMLElement("div") }} 。这个区块里我们会插入我们的文件列表,包括缩略图。

    -

    如果传入 handleFiles() 的 {{ domxref("FileList") }} 对象值为 null 时,我们只要简单将这块的内部 HTML 为显示“No files selected!”。否则,我们就需要像下面这样编写我们的文件列表:

    +

    如果传入 handleFiles() 的 {{ domxref("FileList") }} 对象值为 null 时,我们只要简单将这块的内部 HTML 为显示“No files selected!”。否则,我们就需要像下面这样编写我们的文件列表:

    1. 创建一个无序列表 ({{ HTMLElement("ul") }}) 元素。
    2. @@ -400,7 +400,7 @@

      Handl }

    -

    上面的FileUpload() 函数创建了一个“加载中”指示器,用于显示进度信息,然后创建了一个 {{ domxref("XMLHttpRequest") }} 来处理上传数据。

    +

    上面的FileUpload() 函数创建了一个“加载中”指示器,用于显示进度信息,然后创建了一个 {{ domxref("XMLHttpRequest") }} 来处理上传数据。

    实际传输数据前,采取了几道准备步骤:

    @@ -422,54 +422,54 @@

    异步处理文件上传

    <?php
     if (isset($_FILES['myFile'])) {
         // Example:
    -    move_uploaded_file($_FILES['myFile']['tmp_name'], "uploads/" . $_FILES['myFile']['name']);
    -    exit;
    +    move_uploaded_file($_FILES['myFile']['tmp_name'], "uploads/" . $_FILES['myFile']['name']);
    +    exit;
     }
     ?><!DOCTYPE html>
     <html>
     <head>
    -    <title>dnd binary upload</title>
    -    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    -    <script type="application/javascript">
    -        function sendFile(file) {
    -            const uri = "/index.php";
    -            const xhr = new XMLHttpRequest();
    -            const fd = new FormData();
    -
    -            xhr.open("POST", uri, true);
    -            xhr.onreadystatechange = function() {
    -                if (xhr.readyState == 4 && xhr.status == 200) {
    -                    alert(xhr.responseText); // handle response.
    -                }
    -            };
    -            fd.append('myFile', file);
    -            // Initiate a multipart/form-data upload
    -            xhr.send(fd);
    -        }
    -
    -        window.onload = function() {
    -            const dropzone = document.getElementById("dropzone");
    -            dropzone.ondragover = dropzone.ondragenter = function(event) {
    -                event.stopPropagation();
    -                event.preventDefault();
    -            }
    -
    -            dropzone.ondrop = function(event) {
    -                event.stopPropagation();
    -                event.preventDefault();
    -
    -                const filesArray = event.dataTransfer.files;
    -                for (let i=0; i<filesArray.length; i++) {
    -                    sendFile(filesArray[i]);
    -                }
    -            }
    +    <title>dnd binary upload</title>
    +    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    +    <script type="application/javascript">
    +        function sendFile(file) {
    +            const uri = "/index.php";
    +            const xhr = new XMLHttpRequest();
    +            const fd = new FormData();
    +
    +            xhr.open("POST", uri, true);
    +            xhr.onreadystatechange = function() {
    +                if (xhr.readyState == 4 && xhr.status == 200) {
    +                    alert(xhr.responseText); // handle response.
    +                }
    +            };
    +            fd.append('myFile', file);
    +            // Initiate a multipart/form-data upload
    +            xhr.send(fd);
             }
    -    </script>
    +
    +        window.onload = function() {
    +            const dropzone = document.getElementById("dropzone");
    +            dropzone.ondragover = dropzone.ondragenter = function(event) {
    +                event.stopPropagation();
    +                event.preventDefault();
    +            }
    +
    +            dropzone.ondrop = function(event) {
    +                event.stopPropagation();
    +                event.preventDefault();
    +
    +                const filesArray = event.dataTransfer.files;
    +                for (let i=0; i<filesArray.length; i++) {
    +                    sendFile(filesArray[i]);
    +                }
    +            }
    +        }
    +    </script>
     </head>
     <body>
    -    <div>
    -        <div id="dropzone" style="margin:30px; width:500px; height:300px; border:1px dotted grey;">Drag & drop your file here...</div>
    -    </div>
    +    <div>
    +        <div id="dropzone" style="margin:30px; width:500px; height:300px; border:1px dotted grey;">Drag & drop your file here...</div>
    +    </div>
     </body>
     </html>
     
    @@ -478,7 +478,7 @@

    例子:用对象 URL 显示 PDF

    对象 URL 可以用于 image 之外的其它东西!它可以用于显示嵌入的 PDF 文件或任何其它浏览器能显示的资源。

    -

    在 Firefox 中,要让 PDF 嵌入式地显示在 iframe 中(而不是作为下载的文件弹出),必须将pdfjs.disabled设为false {{non-standard_inline()}}.

    +

    在 Firefox 中,要让 PDF 嵌入式地显示在 iframe 中(而不是作为下载的文件弹出),必须将pdfjs.disabled设为false {{non-standard_inline()}}.

    <iframe id="viewer">
     
    diff --git a/files/zh-cn/web/api/fileerror/index.html b/files/zh-cn/web/api/fileerror/index.html index 379f5a7687b5f9..d89e9f0b8d1f87 100644 --- a/files/zh-cn/web/api/fileerror/index.html +++ b/files/zh-cn/web/api/fileerror/index.html @@ -71,5 +71,5 @@

    相关链接

  • {{ domxref("FileReader") }}
  • {{ domxref("File") }}
  • {{ domxref("Blob") }}
  • -
  • {{ spec("http://www.w3.org/TR/FileAPI/#FileErrorInterface", "Specification: FileAPI FileError", "WD") }}
  • +
  • {{ spec("http://www.w3.org/TR/FileAPI/#FileErrorInterface", "Specification: FileAPI FileError", "WD") }}
  • diff --git a/files/zh-cn/web/api/filereader/abort/index.html b/files/zh-cn/web/api/filereader/abort/index.html index 57be11f3a560e8..db0d26dc3def8e 100644 --- a/files/zh-cn/web/api/filereader/abort/index.html +++ b/files/zh-cn/web/api/filereader/abort/index.html @@ -5,7 +5,7 @@ ---

    {{APIRef("File API")}}

    -

    该方法可以取消 FileReader 的读取操作,触发之后 {{domxref("FileReader.readyState","readyState")}} 为已完成(DONE)。

    +

    该方法可以取消 FileReader 的读取操作,触发之后 {{domxref("FileReader.readyState","readyState")}} 为已完成(DONE)。

    语法

    @@ -15,7 +15,7 @@

    例外情况

    DOM_FILE_ABORT_ERR
    -
    对一个没有正在进行读取操作({{domxref("FileReader.readyState","readyState")}} 不是LOADING)的 FileReader 进行 abort 操作,会抛出 DOM_FILE_ABORT_ERR 错误。
    +
    对一个没有正在进行读取操作({{domxref("FileReader.readyState","readyState")}} 不是LOADING)的 FileReader 进行 abort 操作,会抛出 DOM_FILE_ABORT_ERR 错误。

    规范

    diff --git a/files/zh-cn/web/api/filereader/abort_event/index.html b/files/zh-cn/web/api/filereader/abort_event/index.html index 005e6c36412d09..370641d053f06d 100644 --- a/files/zh-cn/web/api/filereader/abort_event/index.html +++ b/files/zh-cn/web/api/filereader/abort_event/index.html @@ -15,7 +15,7 @@ ---
    {{APIRef}}
    -

    在中止读取时会触发 abort 事件:例如程序调用{{domxref("FileReader.abort()")}}.

    +

    在中止读取时会触发 abort 事件:例如程序调用{{domxref("FileReader.abort()")}}.

    diff --git a/files/zh-cn/web/api/filereader/filereader/index.html b/files/zh-cn/web/api/filereader/filereader/index.html index 3a4a8344db8e79..0bc2109a01422c 100644 --- a/files/zh-cn/web/api/filereader/filereader/index.html +++ b/files/zh-cn/web/api/filereader/filereader/index.html @@ -8,9 +8,9 @@ - 构造方法 translation_of: Web/API/FileReader/FileReader --- -

    使用 FileReader() 构造器去创建一个新的 FileReader.

    +

    使用 FileReader() 构造器去创建一个新的 FileReader.

    -

    更多关于 FileReader,  查看在 Web 应用中使用 files

    +

    更多关于 FileReader, 查看在 Web 应用中使用 files

    语法

    @@ -22,14 +22,14 @@

    参数

    例子

    -

    以下代码展示了如何使用 FileReader() 构造器创建 FileReader 对象,和FileReader对象的用法。

    +

    以下代码展示了如何使用 FileReader() 构造器创建 FileReader 对象,和FileReader对象的用法。

    function printFile(file) {
       var reader = new FileReader();
       reader.onload = function(evt) {
    -    console.log(evt.target.result);
    -  };
    -  reader.readAsText(file);
    +    console.log(evt.target.result);
    +  };
    +  reader.readAsText(file);
     }
     
    diff --git a/files/zh-cn/web/api/filereader/index.html b/files/zh-cn/web/api/filereader/index.html index 9948a0017c9d14..96f26bfbd839ec 100644 --- a/files/zh-cn/web/api/filereader/index.html +++ b/files/zh-cn/web/api/filereader/index.html @@ -11,11 +11,11 @@ ---

    {{APIRef("File API")}}

    -

    FileReader 对象允许 Web 应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 {{domxref("File")}} 或 {{domxref("Blob")}} 对象指定要读取的文件或数据。

    +

    FileReader 对象允许 Web 应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 {{domxref("File")}} 或 {{domxref("Blob")}} 对象指定要读取的文件或数据。

    其中 File 对象可以是来自用户在一个{{ HTMLElement("input") }}元素上选择文件后返回的{{ domxref("FileList") }}对象,也可以来自拖放操作生成的 DataTransfer对象,还可以是来自在一个{{ domxref("HTMLCanvasElement") }}上执行mozGetAsFile()方法后返回结果。

    -

    重要提示: FileReader 仅用于以安全的方式从用户(远程)系统读取文件内容 它不能用于从文件系统中按路径名简单地读取文件。要在 JavaScript 中按路径名读取文件,应使用标准 Ajax 解决方案进行服务器端文件读取,如果读取跨域,则使用 CORS 权限。

    +

    重要提示: FileReader 仅用于以安全的方式从用户(远程)系统读取文件内容 它不能用于从文件系统中按路径名简单地读取文件。要在 JavaScript 中按路径名读取文件,应使用标准 Ajax 解决方案进行服务器端文件读取,如果读取跨域,则使用 CORS 权限。

    {{AvailableInWorkers}}

    @@ -32,7 +32,7 @@

    属性

    {{domxref("FileReader.error")}} {{readonlyinline}}
    -
    一个{{domxref("DOMException")}},表示在读取文件时发生的错误 。
    +
    一个{{domxref("DOMException")}},表示在读取文件时发生的错误 。
    {{domxref("FileReader.readyState")}} {{readonlyinline}}
    表示FileReader状态的数字。取值如下:
    @@ -82,7 +82,7 @@

    事件处理

    -

    因为 FileReader 继承自{{domxref("EventTarget")}},所以所有这些事件也可以通过{{domxref("EventTarget.addEventListener()","addEventListener")}}方法使用。

    +

    因为 FileReader 继承自{{domxref("EventTarget")}},所以所有这些事件也可以通过{{domxref("EventTarget.addEventListener()","addEventListener")}}方法使用。

    方法

    @@ -91,7 +91,7 @@

    方法

    {{domxref("FileReader.abort()")}}
    中止读取操作。在返回时,readyState属性为DONE
    {{domxref("FileReader.readAsArrayBuffer()")}}
    -
    开始读取指定的 {{domxref("Blob")}}中的内容,一旦完成,result 属性中保存的将是被读取文件的 {{domxref("ArrayBuffer")}} 数据对象。
    +
    开始读取指定的 {{domxref("Blob")}}中的内容,一旦完成,result 属性中保存的将是被读取文件的 {{domxref("ArrayBuffer")}} 数据对象。
    {{domxref("FileReader.readAsBinaryString()")}} {{non-standard_inline}}
    开始读取指定的{{ domxref("Blob") }}中的内容。一旦完成,result属性中将包含所读取文件的原始二进制数据。
    {{domxref("FileReader.readAsDataURL()")}}
    diff --git a/files/zh-cn/web/api/filereader/load_event/index.html b/files/zh-cn/web/api/filereader/load_event/index.html index 96145495cab8a7..447bbc6a56f558 100644 --- a/files/zh-cn/web/api/filereader/load_event/index.html +++ b/files/zh-cn/web/api/filereader/load_event/index.html @@ -7,7 +7,7 @@ ---
    {{APIRef}}
    -

    当文件成功读取时,执行load 事件

    +

    当文件成功读取时,执行load 事件

    diff --git a/files/zh-cn/web/api/filereader/readasarraybuffer/index.html b/files/zh-cn/web/api/filereader/readasarraybuffer/index.html index 8a219026bacdf2..5fc0ef117934ce 100644 --- a/files/zh-cn/web/api/filereader/readasarraybuffer/index.html +++ b/files/zh-cn/web/api/filereader/readasarraybuffer/index.html @@ -5,7 +5,7 @@ ---

    {{APIRef("File API")}}

    -

    {{domxref("FileReader")}} 接口提供的 readAsArrayBuffer() 方法用于启动读取指定的 {{domxref("Blob")}} 或 {{domxref("File")}} 内容。当读取操作完成时,{{domxref("FileReader.readyState","readyState")}} 变成 DONE(已完成),并触发 {{event("loadend")}} 事件,同时 {{domxref("FileReader.result","result")}} 属性中将包含一个 {{domxref("ArrayBuffer")}} 对象以表示所读取文件的数据。

    +

    {{domxref("FileReader")}} 接口提供的 readAsArrayBuffer() 方法用于启动读取指定的 {{domxref("Blob")}} 或 {{domxref("File")}} 内容。当读取操作完成时,{{domxref("FileReader.readyState","readyState")}} 变成 DONE(已完成),并触发 {{event("loadend")}} 事件,同时 {{domxref("FileReader.result","result")}} 属性中将包含一个 {{domxref("ArrayBuffer")}} 对象以表示所读取文件的数据。

    语法

    @@ -15,7 +15,7 @@

    参数

    blob
    -
    即将被读取的 {{domxref("Blob")}} 或 {{domxref("File")}} 对象。
    +
    即将被读取的 {{domxref("Blob")}} 或 {{domxref("File")}} 对象。

    规范

    diff --git a/files/zh-cn/web/api/filereader/readasbinarystring/index.html b/files/zh-cn/web/api/filereader/readasbinarystring/index.html index 7cf6809b3ef061..0c4801b60ddeb9 100644 --- a/files/zh-cn/web/api/filereader/readasbinarystring/index.html +++ b/files/zh-cn/web/api/filereader/readasbinarystring/index.html @@ -5,11 +5,11 @@ ---
    {{APIRef("File API")}} {{non-standard_header}}
    -
     
    +
    -

    readAsBinaryString 方法会读取指定的 {{domxref("Blob")}} 或 {{domxref("File")}} 对象,当读取完成的时候,{{domxref("FileReader.readyState","readyState")}}  会变成DONE(已完成),并触发 {{event("loadend")}} 事件,同时 {{domxref("FileReader.result","result")}} 属性将包含所读取文件原始二进制格式。

    +

    readAsBinaryString 方法会读取指定的 {{domxref("Blob")}} 或 {{domxref("File")}} 对象,当读取完成的时候,{{domxref("FileReader.readyState","readyState")}} 会变成DONE(已完成),并触发 {{event("loadend")}} 事件,同时 {{domxref("FileReader.result","result")}} 属性将包含所读取文件原始二进制格式。

    -

    注意:从 2012 年 7 月 12 日起,该方法已从 W3C 工作草案废除。

    +

    注意:从 2012 年 7 月 12 日起,该方法已从 W3C 工作草案废除。

    语法

    @@ -19,16 +19,16 @@

    参数

    blob
    -
    即将被读取的 {{domxref("Blob")}} 或者 {{domxref("File")}} 对象。
    +
    即将被读取的 {{domxref("Blob")}} 或者 {{domxref("File")}} 对象。

    示例

    var canvas = document.createElement('canvas');
     var height = 200;
    -var width  = 200;
    +var width  = 200;
     
    -canvas.width  = width;
    +canvas.width  = width;
     canvas.height = height;
     
     var ctx = canvas.getContext('2d');
    @@ -45,12 +45,12 @@ 

    示例

    console.log(reader.result); } -  reader.readAsBinaryString(blob); + reader.readAsBinaryString(blob); });

    规范

    -

    该方法已从 FileAPI 标准移除,请使用 {{domxref("FileReader.readAsArrayBuffer()")}} 代替。

    +

    该方法已从 FileAPI 标准移除,请使用 {{domxref("FileReader.readAsArrayBuffer()")}} 代替。

    浏览器兼容性

    diff --git a/files/zh-cn/web/api/filereader/readasdataurl/index.html b/files/zh-cn/web/api/filereader/readasdataurl/index.html index bbe33c739c5350..c5c72a4e8a2dd6 100644 --- a/files/zh-cn/web/api/filereader/readasdataurl/index.html +++ b/files/zh-cn/web/api/filereader/readasdataurl/index.html @@ -8,7 +8,7 @@ ---
    {{APIRef("File API")}}
    -

    readAsDataURL 方法会读取指定的 {{domxref("Blob")}} 或 {{domxref("File")}} 对象。读取操作完成的时候,{{domxref("FileReader.readyState","readyState")}} 会变成已完成DONE,并触发 {{event("loadend")}} 事件,同时 {{domxref("FileReader.result","result")}} 属性将包含一个data:URL 格式的字符串(base64 编码)以表示所读取文件的内容。

    +

    readAsDataURL 方法会读取指定的 {{domxref("Blob")}} 或 {{domxref("File")}} 对象。读取操作完成的时候,{{domxref("FileReader.readyState","readyState")}} 会变成已完成DONE,并触发 {{event("loadend")}} 事件,同时 {{domxref("FileReader.result","result")}} 属性将包含一个data:URL 格式的字符串(base64 编码)以表示所读取文件的内容。

    语法

    @@ -18,7 +18,7 @@

    参数

    blob
    -
    即将被读取的 {{domxref("Blob")}} 或 {{domxref("File")}} 对象。
    +
    即将被读取的 {{domxref("Blob")}} 或 {{domxref("File")}} 对象。

    示例

    @@ -31,17 +31,17 @@

    HTML

    JavaScript

    function previewFile() {
    -  var preview = document.querySelector('img');
    -  var file    = document.querySelector('input[type=file]').files[0];
    -  var reader  = new FileReader();
    +  var preview = document.querySelector('img');
    +  var file    = document.querySelector('input[type=file]').files[0];
    +  var reader  = new FileReader();
     
    -  reader.addEventListener("load", function () {
    -    preview.src = reader.result;
    -  }, false);
    +  reader.addEventListener("load", function () {
    +    preview.src = reader.result;
    +  }, false);
     
    -  if (file) {
    -    reader.readAsDataURL(file);
    -  }
    +  if (file) {
    +    reader.readAsDataURL(file);
    +  }
     }

    演示

    @@ -88,7 +88,7 @@

    JavaScript

    } -
    注意: Internet Explorer  10 之前的版本并不支持  FileReader() 。关于图片文件预览的兼容性解决方案,可以查看 crossbrowser possible solution for image preview 或者 this more powerful example 。
    +
    注意: Internet Explorer 10 之前的版本并不支持 FileReader() 。关于图片文件预览的兼容性解决方案,可以查看 crossbrowser possible solution for image preview 或者 this more powerful example

    规范

    diff --git a/files/zh-cn/web/api/filereader/readastext/index.html b/files/zh-cn/web/api/filereader/readastext/index.html index fc1db64aaac39d..5bb6e231835b31 100644 --- a/files/zh-cn/web/api/filereader/readastext/index.html +++ b/files/zh-cn/web/api/filereader/readastext/index.html @@ -5,9 +5,9 @@ ---
    {{APIRef("File API")}}
    -
     
    +
    -

    readAsText 方法可以将 Blob 或者 File 对象转根据特殊的编码格式转化为内容 (字符串形式)

    +

    readAsText 方法可以将 Blob 或者 File 对象转根据特殊的编码格式转化为内容 (字符串形式)

    这个方法是异步的,也就是说,只有当执行完成后才能够查看到结果,如果直接查看是无结果的,并返回 undefined

    @@ -23,8 +23,8 @@

    参数

    二进制对象
    -
    Blob类型 或 File类型
    -
    编码类型  (可选)
    +
    Blob类型 或 File类型
    +
    编码类型 (可选)
    传入一个字符串类型的编码类型,如缺省,则默认为“utf-8”类型
    diff --git a/files/zh-cn/web/api/filereader/readystate/index.html b/files/zh-cn/web/api/filereader/readystate/index.html index 972046428d126f..956b506d0271aa 100644 --- a/files/zh-cn/web/api/filereader/readystate/index.html +++ b/files/zh-cn/web/api/filereader/readystate/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef("File API")}}
    -

    提供 FileReader 读取操作时的当前状态。

    +

    提供 FileReader 读取操作时的当前状态。

    语法

    @@ -14,7 +14,7 @@

    语法

    -

    一个数字,用来表示 {{domxref("FileReader")}} API 的三种可能状态。

    +

    一个数字,用来表示 {{domxref("FileReader")}} API 的三种可能状态。

    {{page("/zh-CN/docs/Web/API/FileReader","State constants")}}

    diff --git a/files/zh-cn/web/api/filerequest/index.html b/files/zh-cn/web/api/filerequest/index.html index 4e3d3918a8bc8c..8cf0212e4537cb 100644 --- a/files/zh-cn/web/api/filerequest/index.html +++ b/files/zh-cn/web/api/filerequest/index.html @@ -13,7 +13,7 @@

    概述

    -

    这个 FileRequest 接口继承自 {{domxref("DOMRequest")}} 接口,用来提供一些 {{domxref("LockedFile")}} 对象需要的额外的必要的属性。

    +

    这个 FileRequest 接口继承自 {{domxref("DOMRequest")}} 接口,用来提供一些 {{domxref("LockedFile")}} 对象需要的额外的必要的属性。

    属性

    diff --git a/files/zh-cn/web/api/filesystem/index.html b/files/zh-cn/web/api/filesystem/index.html index 949bb06f7f1393..f805d045a4176e 100644 --- a/files/zh-cn/web/api/filesystem/index.html +++ b/files/zh-cn/web/api/filesystem/index.html @@ -11,12 +11,12 @@

    关于本文档

    -

    本文档的上次更新是 2012 年 3 月 2 日,引用来源是 2011 年 4 月 9 日的草案 W3C Specifications (Working Draft)
    +

    本文档的上次更新是 2012 年 3 月 2 日,引用来源是 2011 年 4 月 9 日的草案 W3C Specifications (Working Draft)
    该草案似乎已经被放弃了,任何实现不应该参考这份草案,也不该引用它。

    基本概念

    -

    你可以通过调用 window.requestFileSystem() 来请求对一个沙盒文件系统的访问权限。调用 requestFileSystem() 会创建一个新的沙盒存储空间。成功调用之后会返回一个 FileSystem 对象。它有两个属性:名称和文件系统的根目录。

    +

    你可以通过调用 window.requestFileSystem() 来请求对一个沙盒文件系统的访问权限。调用 requestFileSystem() 会创建一个新的沙盒存储空间。成功调用之后会返回一个 FileSystem 对象。它有两个属性:名称和文件系统的根目录。

    FileSystem 对象是你访问文件系统所必须的,所以你最好为它创建一个引用,然后储存起来。

    @@ -34,7 +34,7 @@

    属性

    - + @@ -56,4 +56,4 @@

    相关链接

    引用:File System API

    -

    介绍: Basic Concepts About the File System API

    +

    介绍: Basic Concepts About the File System API

    diff --git a/files/zh-cn/web/api/filesystemdirectoryentry/index.html b/files/zh-cn/web/api/filesystemdirectoryentry/index.html index 4ccc0aa7523453..c7896005e7ade9 100644 --- a/files/zh-cn/web/api/filesystemdirectoryentry/index.html +++ b/files/zh-cn/web/api/filesystemdirectoryentry/index.html @@ -5,22 +5,22 @@ ---

    {{APIRef("File System API")}}{{Non-standard_header}}

    -

    文件和目录条目 API 的 FileSystemDirectoryEntry 接口表示文件系统中的目录。它提供了方法,使其能够访问和操作目录中的文件,以及访问目录中的条目。

    +

    文件和目录条目 APIFileSystemDirectoryEntry 接口表示文件系统中的目录。它提供了方法,使其能够访问和操作目录中的文件,以及访问目录中的条目。

    -

    由于这是个非标准的 API,它的规范当前并没有在标准进程中,重要的是要记住,并不是所有浏览器都实现了他,并且实现它的浏览器可能仅仅实现了一小部分。更多细节请查看 Browser compatibility

    +

    由于这是个非标准的 API,它的规范当前并没有在标准进程中,重要的是要记住,并不是所有浏览器都实现了他,并且实现它的浏览器可能仅仅实现了一小部分。更多细节请查看 Browser compatibility

    基本概念

    -

    你可以通过调用 {{domxref("FileSystemDirectoryEntry.getDirectory", "getDirectory()")}} 创建新的目录。如果你打算创建子目录,按需创建每个子目录。如果你尝试使用完整路径创建目录,包含不存在的父目录,会返回错误。所以需要在创建父目录之后,递归添加新的路径来创建层次。

    +

    你可以通过调用 {{domxref("FileSystemDirectoryEntry.getDirectory", "getDirectory()")}} 创建新的目录。如果你打算创建子目录,按需创建每个子目录。如果你尝试使用完整路径创建目录,包含不存在的父目录,会返回错误。所以需要在创建父目录之后,递归添加新的路径来创建层次。

    示例

    下面的代码中,我们创建了一个叫做 "Documents" 的目录。

    // Taking care of the browser-specific prefixes.
    -window.requestFileSystem  = window.requestFileSystem || window.webkitRequestFileSystem;
    +window.requestFileSystem  = window.requestFileSystem || window.webkitRequestFileSystem;
     window.directoryEntry = window.directoryEntry || window.webkitDirectoryEntry;
     
     ...
    @@ -53,7 +53,7 @@ 

    方法

    {{domxref("FileSystemDirectoryEntry.getDirectory", "getDirectory()")}}
    返回 {{domxref("FileSystemDirectoryEntry")}} 对象,表示位于给定路径的目录,相对于方法调用处的目录。
    {{domxref("FileSystemDirectoryEntry.getFile", "getFile()")}}
    -
    返回 {{domxref("FileSystemFileEntry")}}对象,表示在目录层次中的一个文件,提供相对于方法调用处目录的路径。 
    +
    返回 {{domxref("FileSystemFileEntry")}}对象,表示在目录层次中的一个文件,提供相对于方法调用处目录的路径。

    废弃的方法

    @@ -67,7 +67,7 @@

    规范

    {{Specifications}} -

    这个 API 没有官方的 W3C 或者 WHATWG 规范。

    +

    这个 API 没有官方的 W3C 或者 WHATWG 规范。

    浏览器兼容性

    diff --git a/files/zh-cn/web/api/filesystemfileentry/index.html b/files/zh-cn/web/api/filesystemfileentry/index.html index 97058fb9b19a16..b90d585c807218 100644 --- a/files/zh-cn/web/api/filesystemfileentry/index.html +++ b/files/zh-cn/web/api/filesystemfileentry/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef("File System API")}}{{Non-standard_header}}
    -

    文件系统 API 的 FileSystemFileEntry 接口表示文件系统中的文件。它提供了属性,描述文件的属性,以及 {{domxref("FileSystemFileEntry.file", "file()")}} 方法,它创建了可以用于读取文件的 {{domxref("File")}} 对象。

    +

    文件系统 API FileSystemFileEntry 接口表示文件系统中的文件。它提供了属性,描述文件的属性,以及 {{domxref("FileSystemFileEntry.file", "file()")}} 方法,它创建了可以用于读取文件的 {{domxref("File")}} 对象。

    由于这是个非标准 API,它的规范当前并不在标准化过程中。重要的是要记住,并不是所有浏览器都实现了它,并且实现它的浏览器可能仅仅实现一小部分。点击 Browser compatibility 来查看更多细节。

    @@ -31,11 +31,11 @@

    废弃的方法

    基本概念

    -

    为了向文件写入内容,通过调用 {{domxref("FileSystemFileEntry.createWriter", "createWriter()")}} 创建 {{domxref("FileWriter")}} 对象。为了读取文件,通过调用 {{domxref("FileSystemFileEntry.file", "file()")}},获取表示其内容的 {{domxref("File")}} 对象。

    +

    为了向文件写入内容,通过调用 {{domxref("FileSystemFileEntry.createWriter", "createWriter()")}} 创建 {{domxref("FileWriter")}} 对象。为了读取文件,通过调用 {{domxref("FileSystemFileEntry.file", "file()")}},获取表示其内容的 {{domxref("File")}} 对象。

    示例

    -

    下面的代码创建了一个空文件,叫做 "log.txt" (如果不存在的话),并使用文本 "Meow" 来填充。在成功的回调中,设置了事件处理器,来处理 {{event("error")}} error 和 {{event("writeend")}} 事件。通过创建 blob,向其追加文本,以及将 blob 传递给  {{domxref("FileWriter.write()")}},文本数据写入了文件。

    +

    下面的代码创建了一个空文件,叫做 "log.txt" (如果不存在的话),并使用文本 "Meow" 来填充。在成功的回调中,设置了事件处理器,来处理 {{event("error")}} error 和 {{event("writeend")}} 事件。通过创建 blob,向其追加文本,以及将 blob 传递给 {{domxref("FileWriter.write()")}},文本数据写入了文件。

    function onInitFs(fs) {
       fs.root.getFile('log.txt', {create: true}, function(fileEntry) {
    @@ -67,7 +67,7 @@ 

    规范

    {{Specifications}} -

    这个 API 没有官方的 W3C 或者 WHATWG 规范。

    +

    这个 API 没有官方的 W3C 或者 WHATWG 规范。

    浏览器兼容性

    diff --git a/files/zh-cn/web/api/filesystemsync/index.html b/files/zh-cn/web/api/filesystemsync/index.html index d9ad6147a88e57..f3612f0a928bc0 100644 --- a/files/zh-cn/web/api/filesystemsync/index.html +++ b/files/zh-cn/web/api/filesystemsync/index.html @@ -7,17 +7,17 @@

    {{APIRef("File System API")}} {{non-standard_header}}

    -

    在 文件系统 API 中, FileSystemSync 对象表示文件系统。它有两个属性。

    +

    文件系统 API 中, FileSystemSync 对象表示文件系统。它有两个属性。

    关于这个文档

    -

    这个文档最后更新与 2012 年 3 月 2 日,并且遵循 W3C 规范(工作草案),起草于 2011 年 4 月 19 日。

    +

    这个文档最后更新与 2012 年 3 月 2 日,并且遵循 W3C 规范(工作草案),起草于 2011 年 4 月 19 日。

    规范目前已废弃,没有得到大量的关注。

    基本概念

    -

    FileSystemSync 对象是整个 API 的必经之路,你会大量使用它。所以一旦你获得了引用,将对象缓存在全局变量或类属性中。

    +

    FileSystemSync 对象是整个 API 的必经之路,你会大量使用它。所以一旦你获得了引用,将对象缓存在全局变量或类属性中。

    属性

    @@ -54,6 +54,6 @@

    另见

    规范:{{ spec("http://dev.w3.org/2009/dap/file-system/pub/FileSystem/", "File API: Directories and System Specification", "WD") }}

    -

    参考: 文件系统 API

    +

    参考: 文件系统 API

    简介:文件系统 API 的基本概念

    diff --git a/files/zh-cn/web/api/focusevent/index.html b/files/zh-cn/web/api/focusevent/index.html index bbc4302811838a..8ab1623beab72f 100644 --- a/files/zh-cn/web/api/focusevent/index.html +++ b/files/zh-cn/web/api/focusevent/index.html @@ -24,16 +24,16 @@

    构造器

    属性

    -

    此接口从它的父级继承了属性 {{domxref("UIEvent")}}, 间接来自于 {{domxref("Event")}}.

    +

    此接口从它的父级继承了属性 {{domxref("UIEvent")}}, 间接来自于 {{domxref("Event")}}.

    {{domxref("FocusEvent.relatedTarget")}} {{readonlyInline}}
    -
    {{domxref("EventTarget")}} 这个代表此次事件的次要目标。在一些案例中,例如切换浏览器 tab 标签时,为了安全的原因,这个属性可能会被设置为 null 。
    +
    {{domxref("EventTarget")}} 这个代表此次事件的次要目标。在一些案例中,例如切换浏览器 tab 标签时,为了安全的原因,这个属性可能会被设置为 null

    方法

    -

    此接口没有特殊的方法。它从父级 {{domxref("UIEvent")}} 继承方法, 并间接从 {{domxref("Event")}} 继承方法。

    +

    此接口没有特殊的方法。它从父级 {{domxref("UIEvent")}} 继承方法, 并间接从 {{domxref("Event")}} 继承方法。

    规范

    diff --git a/files/zh-cn/web/api/fontface/index.html b/files/zh-cn/web/api/fontface/index.html index c963d4db819085..d90d1fb6b838ba 100644 --- a/files/zh-cn/web/api/fontface/index.html +++ b/files/zh-cn/web/api/fontface/index.html @@ -34,7 +34,7 @@

    Properties

    {{domxref("FontFace.featureSettings")}}
    这是不是一个 {{domxref("DOMString")}} ?是的话将表示该字体的 features 属性,相当于 {{cssxref("@font-face/feature-settings", "feature-settings")}} 。
    {{domxref("FontFace.status")}} {{readonlyinline}}
    -
    返回一个表示字体当前状态的可枚举值,它可能是下列之一: "unloaded", "loading", "loaded""error"
    +
    返回一个表示字体当前状态的可枚举值,它可能是下列之一: "unloaded", "loading", "loaded", "error"
    {{domxref("FontFace.loaded")}} {{readonlyinline}}
    当字体完全加载或加载失败时返回该 FontFace 的{{domxref("Promise")}} 。
    diff --git a/files/zh-cn/web/api/formdata/append/index.html b/files/zh-cn/web/api/formdata/append/index.html index cd5708a23d3202..5f785bb98440c7 100644 --- a/files/zh-cn/web/api/formdata/append/index.html +++ b/files/zh-cn/web/api/formdata/append/index.html @@ -5,12 +5,12 @@ ---

    {{APIRef("XMLHttpRequest")}}

    -

    {{domxref("FormData")}} 接口的append() 方法 会添加一个新值到 FormData 对象内的一个已存在的键中,如果键不存在则会添加该键。

    +

    {{domxref("FormData")}} 接口的append() 方法 会添加一个新值到 FormData 对象内的一个已存在的键中,如果键不存在则会添加该键。

    -

    {{domxref("FormData.set")}} 和 append() 的区别在于,如果指定的键已经存在, {{domxref("FormData.set")}} 会使用新值覆盖已有的值,而 append() 会把新值添加到已有值集合的后面。

    +

    {{domxref("FormData.set")}} 和 append() 的区别在于,如果指定的键已经存在, {{domxref("FormData.set")}} 会使用新值覆盖已有的值,而 append() 会把新值添加到已有值集合的后面。

    -

    提示:这个方法在 Web Workers 中可用。

    +

    提示:这个方法在 Web Workers 中可用。

    语法

    @@ -26,13 +26,13 @@

    参数

    name
    value中包含的数据对应的表单名称。
    value
    -
    表单的值。可以是{{domxref("USVString")}} 或 {{domxref("Blob")}} (包括子类型,如 {{domxref("File")}})。
    +
    表单的值。可以是{{domxref("USVString")}} 或 {{domxref("Blob")}} (包括子类型,如 {{domxref("File")}})。
    filename {{optional_inline}}
    -
    传给服务器的文件名称 (一个 {{domxref("USVString")}}), 当一个 {{domxref("Blob")}} 或 {{domxref("File")}} 被作为第二个参数的时候, {{domxref("Blob")}} 对象的默认文件名是 "blob"。 {{domxref("File")}} 对象的默认文件名是该文件的名称。
    +
    传给服务器的文件名称 (一个 {{domxref("USVString")}}), 当一个 {{domxref("Blob")}} 或 {{domxref("File")}} 被作为第二个参数的时候, {{domxref("Blob")}} 对象的默认文件名是 "blob"。 {{domxref("File")}} 对象的默认文件名是该文件的名称。
    -

    注意: 如果你指定一个 {{domxref("Blob")}} 作为数据添加到 FormData 对象中, 文件名会被放在 "Content-Disposition" 头部(常常会根据浏览器变化而变化)传给服务器。

    +

    注意: 如果你指定一个 {{domxref("Blob")}} 作为数据添加到 FormData 对象中, 文件名会被放在 "Content-Disposition" 头部(常常会根据浏览器变化而变化)传给服务器。

    返回值

    @@ -41,7 +41,7 @@

    返回值

    示例

    -

    下面的代码创建了一个空的 FormData 对象:

    +

    下面的代码创建了一个空的 FormData 对象:

    var formData = new FormData(); // Currently empty
    @@ -50,7 +50,7 @@

    示例

    formData.append('username', 'Chris');
     formData.append('userpic', myFileInput.files[0], 'chris.jpg');
    -

    跟常规表单数据一样,你可以使用同一个名称添加多个值 。例如 (为了与 PHP 命名习惯一致在名称中添加了 []):

    +

    跟常规表单数据一样,你可以使用同一个名称添加多个值 。例如 (为了与 PHP 命名习惯一致在名称中添加了 []):

    formData.append('userpic[]', myFileInput1.files[0], 'chris1.jpg');
     formData.append('userpic[]', myFileInput2.files[0], 'chris2.jpg');
    diff --git a/files/zh-cn/web/api/formdata/entries/index.html b/files/zh-cn/web/api/formdata/entries/index.html index 433a91bd8efe55..66b587dd5c5c36 100644 --- a/files/zh-cn/web/api/formdata/entries/index.html +++ b/files/zh-cn/web/api/formdata/entries/index.html @@ -5,10 +5,10 @@ ---

    {{APIRef("XMLHttpRequest")}}

    -

    The FormData.entries() 方法返回一个 {{jsxref("Iteration_protocols",'iterator')}}对象,此对象可以遍历访问 FormData 中的键值对。其中键值对的 key 是一个 {{domxref("USVString")}} 对象;value 是一个 {{domxref("USVString")}} , 或者 {{domxref("Blob")}}对象。

    +

    The FormData.entries() 方法返回一个 {{jsxref("Iteration_protocols",'iterator')}}对象,此对象可以遍历访问 FormData 中的键值对。其中键值对的 key 是一个 {{domxref("USVString")}} 对象;value 是一个 {{domxref("USVString")}} , 或者 {{domxref("Blob")}}对象。

    -

    Note: 此方法在 Web Workers 可用。

    +

    Note: 此方法在 Web Workers 可用。

    语法

    diff --git a/files/zh-cn/web/api/formdata/formdata/index.html b/files/zh-cn/web/api/formdata/formdata/index.html index a7904fb27a3f30..60ab3cc2bcc081 100644 --- a/files/zh-cn/web/api/formdata/formdata/index.html +++ b/files/zh-cn/web/api/formdata/formdata/index.html @@ -8,7 +8,7 @@

    FormData()构造函数用于创建一个新的{{domxref("FormData")}}对象。

    -

    注意: 该功能在 Web Workers 中可用。

    +

    注意: 该功能在 Web Workers 中可用。

    语法

    diff --git a/files/zh-cn/web/api/formdata/getall/index.html b/files/zh-cn/web/api/formdata/getall/index.html index 39279d3d05bedf..d095f830b6b1f3 100644 --- a/files/zh-cn/web/api/formdata/getall/index.html +++ b/files/zh-cn/web/api/formdata/getall/index.html @@ -8,7 +8,7 @@

    getAll()方法会返回该 {{domxref("FormData")}} 对象指定 key 的所有值。

    -

    注意: 该方法在 Web Workers 中可用。

    +

    注意: 该方法在 Web Workers 中可用。

    语法

    @@ -28,16 +28,16 @@

    返回

    示例

    -

    下列代码会先创建一个空的 FormData 对象:

    +

    下列代码会先创建一个空的 FormData 对象:

    var formData = new FormData();
    -

    使用 {{domxref("FormData.append")}} 添加两个 username 的值:

    +

    使用 {{domxref("FormData.append")}} 添加两个 username 的值:

    formData.append('username', 'Chris');
     formData.append('username', 'Bob');
    -

    下列 getAll() 方法会返回一个数组,包含了所有 username 的值:

    +

    下列 getAll() 方法会返回一个数组,包含了所有 username 的值:

    formData.getAll('username'); // Returns ["Chris", "Bob"]
    diff --git a/files/zh-cn/web/api/formdata/has/index.html b/files/zh-cn/web/api/formdata/has/index.html index e93134b9145bf3..bd48072df6d4ed 100644 --- a/files/zh-cn/web/api/formdata/has/index.html +++ b/files/zh-cn/web/api/formdata/has/index.html @@ -8,7 +8,7 @@

    has()方法会返回一个布尔值,表示该{{domxref("FormData")}}对象是否含有某个 key。

    -

    注意: 该方法在 Web Workers 可用。

    +

    注意: 该方法在 Web Workers 可用。

    语法

    @@ -32,7 +32,7 @@

    示例

    var formData = new FormData();
    -

    下列代码用来检测 FormData对象是否存在username这个key。默认检测一次,使用 {{domxref("FormData.append")}} 插入username之后再检测一次:

    +

    下列代码用来检测 FormData对象是否存在username这个key。默认检测一次,使用 {{domxref("FormData.append")}} 插入username之后再检测一次:

    formData.has('username'); // Returns false
     formData.append('username', 'Chris');
    diff --git a/files/zh-cn/web/api/formdata/index.html b/files/zh-cn/web/api/formdata/index.html
    index e6eb8d519bfa6a..068ed79afb3724 100644
    --- a/files/zh-cn/web/api/formdata/index.html
    +++ b/files/zh-cn/web/api/formdata/index.html
    @@ -12,7 +12,7 @@
     
     

    如果你想构建一个简单的GET请求,并且通过{{HTMLElement("form")}}的形式带有查询参数,可以将它直接传递给{{domxref("URLSearchParams")}}。

    -

    实现了 FormData 接口的对象可以直接在{{jsxref("Statements/for...of", "for...of")}}结构中使用,而不需要调用{{domxref('FormData.entries()', 'entries()')}} : for (var p of myFormData) 的作用和 for (var p of myFormData.entries()) 是相同的。

    +

    实现了 FormData 接口的对象可以直接在{{jsxref("Statements/for...of", "for...of")}}结构中使用,而不需要调用{{domxref('FormData.entries()', 'entries()')}} : for (var p of myFormData) 的作用和 for (var p of myFormData.entries()) 是相同的。

    注意:此特性可用于 Web Workers

    @@ -29,21 +29,21 @@

    方法

    {{domxref("FormData.append()")}}
    -
    向 FormData 中添加新的属性值,FormData 对应的属性值存在也不会覆盖原值,而是新增一个值,如果属性不存在则新增一项属性值。
    +
    FormData 中添加新的属性值,FormData 对应的属性值存在也不会覆盖原值,而是新增一个值,如果属性不存在则新增一项属性值。
    {{domxref("FormData.delete()")}}
    从 FormData 对象里面删除一个键值对。
    {{domxref("FormData.entries()")}}
    返回一个包含所有键值对的{{jsxref("Iteration_protocols","iterator")}}对象。
    {{domxref("FormData.get()")}}
    -
    返回在 FormData 对象中与给定键关联的第一个值。
    +
    返回在 FormData 对象中与给定键关联的第一个值。
    {{domxref("FormData.getAll()")}}
    -
    返回一个包含 FormData 对象中与给定键关联的所有值的数组。
    +
    返回一个包含 FormData 对象中与给定键关联的所有值的数组。
    {{domxref("FormData.has()")}}
    -
    返回一个布尔值表明 FormData 对象是否包含某些键。
    +
    返回一个布尔值表明 FormData 对象是否包含某些键。
    {{domxref("FormData.keys()")}}
    返回一个包含所有键的{{jsxref("Iteration_protocols","iterator")}}对象。
    {{domxref("FormData.set()")}}
    -
    给 FormData 设置属性值,如果FormData 对应的属性值存在则覆盖原值,否则新增一项属性值。
    +
    FormData 设置属性值,如果FormData 对应的属性值存在则覆盖原值,否则新增一项属性值。
    {{domxref("FormData.values()")}}
    返回一个包含所有值的{{jsxref("Iteration_protocols","iterator")}}对象。
    diff --git a/files/zh-cn/web/api/formdata/keys/index.html b/files/zh-cn/web/api/formdata/keys/index.html index 600a29070cf0eb..be297627b721ee 100644 --- a/files/zh-cn/web/api/formdata/keys/index.html +++ b/files/zh-cn/web/api/formdata/keys/index.html @@ -5,10 +5,10 @@ ---

    {{APIRef("XMLHttpRequest")}}

    -

    FormData.keys() 该方法返回一个迭代器({{jsxref("Iteration_protocols",'iterator')}}),遍历了该 formData  包含的所有 key,这些 key 是 {{domxref("USVString")}} 对象。

    +

    FormData.keys() 该方法返回一个迭代器({{jsxref("Iteration_protocols",'iterator')}}),遍历了该 formData 包含的所有 key,这些 key 是 {{domxref("USVString")}} 对象。

    -

    注意: 该方法在 Web Workers 可用。

    +

    注意: 该方法在 Web Workers 可用。

    语法

    diff --git a/files/zh-cn/web/api/formdata/set/index.html b/files/zh-cn/web/api/formdata/set/index.html index c6484415e75b39..355d8c0dfeba3b 100644 --- a/files/zh-cn/web/api/formdata/set/index.html +++ b/files/zh-cn/web/api/formdata/set/index.html @@ -5,12 +5,12 @@ ---

    {{APIRef("XMLHttpRequest")}}

    -

    set() 方法会对 FormData 对象里的某个 key 设置一个新的值,如果该 key 不存在,则添加。

    +

    set() 方法会对 FormData 对象里的某个 key 设置一个新的值,如果该 key 不存在,则添加。

    -

    set() 和 {{domxref("FormData.append")}} 不同之处在于:如果某个 key 已经存在,set() 会直接覆盖所有该 key 对应的值,而 {{domxref("FormData.append")}} 则是在该 key 的最后位置再追加一个值。

    +

    set() 和 {{domxref("FormData.append")}} 不同之处在于:如果某个 key 已经存在,set() 会直接覆盖所有该 key 对应的值,而 {{domxref("FormData.append")}} 则是在该 key 的最后位置再追加一个值。

    -

    注意: 该方法在 Web Workers 可用。

    +

    注意: 该方法在 Web Workers 可用。

    语法

    @@ -38,11 +38,11 @@

    参数

    示例

    -

    先创建一个空的 FormData 对象:

    +

    先创建一个空的 FormData 对象:

    var formData = new FormData(); // Currently empty
    -

    使用 {{domxref("FormData.set")}} 设置键/值 :

    +

    使用 {{domxref("FormData.set")}} 设置键/值 :

    formData.set('username', 'Chris');
     formData.set('userpic', myFileInput.files[0], 'chris.jpg');
    diff --git a/files/zh-cn/web/api/formdata/using_formdata_objects/index.html b/files/zh-cn/web/api/formdata/using_formdata_objects/index.html index b96e03ade9f2ea..d7392b43e149bf 100644 --- a/files/zh-cn/web/api/formdata/using_formdata_objects/index.html +++ b/files/zh-cn/web/api/formdata/using_formdata_objects/index.html @@ -11,7 +11,7 @@ - XMLHttpRequest translation_of: Web/API/FormData/Using_FormData_Objects --- -

    FormData 对象用以将数据编译成键值对,以便用XMLHttpRequest来发送数据。其主要用于发送表单数据,但亦可用于发送带键数据 (keyed data),而独立于表单使用。如果表单enctype属性设为multipart/form-data ,则会使用表单的{{domxref("HTMLFormElement.submit","submit()")}}方法来发送数据,从而,发送数据具有同样形式。

    +

    FormData 对象用以将数据编译成键值对,以便用XMLHttpRequest来发送数据。其主要用于发送表单数据,但亦可用于发送带键数据 (keyed data),而独立于表单使用。如果表单enctype属性设为multipart/form-data ,则会使用表单的{{domxref("HTMLFormElement.submit","submit()")}}方法来发送数据,从而,发送数据具有同样形式。

    从零开始创建 FormData 对象

    @@ -36,9 +36,9 @@

    从零开始创建 FormData 对象

    -
    注意:字段 "userfile" 和 "webmasterfile"  都包含一个文件。字段 "accountnum" 是数字类型,它将被FormData.append()方法转换成字符串类型 (FormData 对象的字段类型可以是 {{ domxref("Blob") }}, {{ domxref("File") }}, 或者 string: 如果它的字段类型不是 Blob 也不是 File,则会被转换成字符串类)。
    +
    注意:字段 "userfile" 和 "webmasterfile" 都包含一个文件。字段 "accountnum" 是数字类型,它将被FormData.append()方法转换成字符串类型 (FormData 对象的字段类型可以是 {{ domxref("Blob") }}, {{ domxref("File") }}, 或者 string: 如果它的字段类型不是 Blob 也不是 File,则会被转换成字符串类)。
    -

    上面的示例创建了一个FormData实例,包含"username", "accountnum", "userfile" 和 "webmasterfile"四个字段,然后使用XMLHttpRequestsend()方法发送表单数据。字段 "webmasterfile" 是 {{domxref("Blob")}}类型。一个 Blob对象表示一个不可变的,原始数据的类似文件对象。Blob 表示的数据不一定是一个 JavaScript 原生格式。 File 接口基于 Blob,继承 blob 功能并将其扩展为支持用户系统上的文件。你可以通过 Blob() 构造函数创建一个 Blob 对象。

    +

    上面的示例创建了一个FormData实例,包含"username", "accountnum", "userfile" 和 "webmasterfile"四个字段,然后使用XMLHttpRequestsend()方法发送表单数据。字段 "webmasterfile" 是 {{domxref("Blob")}}类型。一个 Blob对象表示一个不可变的,原始数据的类似文件对象。Blob 表示的数据不一定是一个 JavaScript 原生格式。 File 接口基于 Blob,继承 blob 功能并将其扩展为支持用户系统上的文件。你可以通过 Blob() 构造函数创建一个 Blob 对象。

    通过 HTML 表单创建 FormData 对象

    @@ -75,13 +75,13 @@

    使用 FormData 对象上传文件

    你还可以使用 FormData 上传文件。使用的时候需要在表单中添加一个文件类型的 input:

    <form enctype="multipart/form-data" method="post" name="fileinfo">
    -  <label>Your email address:</label>
    -  <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /><br />
    -  <label>Custom file label:</label>
    -  <input type="text" name="filelabel" size="12" maxlength="32" /><br />
    -  <label>File to stash:</label>
    -  <input type="file" name="file" required />
    -  <input type="submit" value="Stash the file!" />
    +  <label>Your email address:</label>
    +  <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /><br />
    +  <label>Custom file label:</label>
    +  <input type="text" name="filelabel" size="12" maxlength="32" /><br />
    +  <label>File to stash:</label>
    +  <input type="file" name="file" required />
    +  <input type="submit" value="Stash the file!" />
     </form>
     <div></div>
     
    @@ -91,28 +91,28 @@

    使用 FormData 对象上传文件

    var form = document.forms.namedItem("fileinfo"); form.addEventListener('submit', function(ev) { -  var oOutput = document.querySelector("div"), + var oOutput = document.querySelector("div"), oData = new FormData(form); -  oData.append("CustomField", "This is some extra data"); + oData.append("CustomField", "This is some extra data"); -  var oReq = new XMLHttpRequest(); -  oReq.open("POST", "stash.php", true); -  oReq.onload = function(oEvent) { -    if (oReq.status == 200) { -      oOutput.innerHTML = "Uploaded!"; -    } else { -      oOutput.innerHTML = "Error " + oReq.status + " occurred when trying to upload your file.<br \/>"; -    } -  }; + var oReq = new XMLHttpRequest(); + oReq.open("POST", "stash.php", true); + oReq.onload = function(oEvent) { + if (oReq.status == 200) { + oOutput.innerHTML = "Uploaded!"; + } else { + oOutput.innerHTML = "Error " + oReq.status + " occurred when trying to upload your file.<br \/>"; + } + }; -  oReq.send(oData); + oReq.send(oData); ev.preventDefault(); }, false);
    -

    注意:如果 FormData 对象是通过表单创建的,则表单中指定的请求方式会被应用到方法 open() 中 。

    +

    注意:如果 FormData 对象是通过表单创建的,则表单中指定的请求方式会被应用到方法 open() 中 。

    你还可以直接向 FormData 对象附加 File 或 Blob 类型的文件,如下所示:

    @@ -127,17 +127,17 @@

    使用 FormData 对象上传文件

    var fd = new FormData(document.querySelector("form")); fd.append("CustomField", "This is some extra data"); $.ajax({ -  url: "stash.php", -  type: "POST", -  data: fd, -  processData: false,  // 不处理数据 -  contentType: false // 不设置内容类型 + url: "stash.php", + type: "POST", + data: fd, + processData: false, // 不处理数据 + contentType: false // 不设置内容类型 });

    不使用 FormData 对象,通过 AJAX 提交表单和上传文件

    -

    如果你想知道不使用 FormData 对象的情况下,通过AJAX序列化和提交表单 请点击这里

    +

    如果你想知道不使用 FormData 对象的情况下,通过AJAX序列化和提交表单 请点击这里

    相关链接

    diff --git a/files/zh-cn/web/api/formdata/values/index.html b/files/zh-cn/web/api/formdata/values/index.html index a76bbf8cf9fb55..b141928aee3ce0 100644 --- a/files/zh-cn/web/api/formdata/values/index.html +++ b/files/zh-cn/web/api/formdata/values/index.html @@ -5,10 +5,10 @@ ---

    {{APIRef("XMLHttpRequest")}}

    -

    FormData.values() 方法返回一个允许遍历该对象中所有值的 {{jsxref("Iteration_protocols",'迭代器')}} 。这些值是 {{domxref("USVString")}} 或是{{domxref("Blob")}} 对象。

    +

    FormData.values() 方法返回一个允许遍历该对象中所有值的 {{jsxref("Iteration_protocols",'迭代器')}} 。这些值是 {{domxref("USVString")}} 或是{{domxref("Blob")}} 对象。

    -

    注意: 此方法在 Web Workers 中可用

    +

    注意: 此方法在 Web Workers 中可用

    语法

    diff --git a/files/zh-cn/web/api/fullscreen_api/guide/index.html b/files/zh-cn/web/api/fullscreen_api/guide/index.html index e36049444a832a..781a691caf8cbe 100644 --- a/files/zh-cn/web/api/fullscreen_api/guide/index.html +++ b/files/zh-cn/web/api/fullscreen_api/guide/index.html @@ -25,8 +25,8 @@

    激活全屏模式

    我们来看看 {{HTMLElement("video")}} 这个元素:

    <video controls id="myvideo">
    -  <source src="somevideo.webm"></source>
    -  <source src="somevideo.mp4"></source>
    +  <source src="somevideo.webm"></source>
    +  <source src="somevideo.mp4"></source>
     </video>
     
    @@ -37,37 +37,37 @@

    激活全屏模式

    elem.requestFullscreen(); } -

    这段代码会在调用 requestFullscreen() 方法之前先检验它是否存在。

    +

    这段代码会在调用 requestFullscreen() 方法之前先检验它是否存在。

    显示差异

    -

    值得留意的是,目前 Gecko 和 WebKit 的实现之间的关键差异:Gecko 自动为元素添加了 CSS 规则,使其拉伸以填满屏幕: "width: 100%; height: 100%"。WebKit 没有这样做,相反地,它将全屏元素居中,不改变大小,而屏幕的其他部分为黑色。为了在 Webkit 中获得相同的全屏行为,你需要自行为元素添加 CSS "width: 100%; height: 100%;":

    +

    值得留意的是,目前 Gecko 和 WebKit 的实现之间的关键差异:Gecko 自动为元素添加了 CSS 规则,使其拉伸以填满屏幕: "width: 100%; height: 100%"。WebKit 没有这样做,相反地,它将全屏元素居中,不改变大小,而屏幕的其他部分为黑色。为了在 Webkit 中获得相同的全屏行为,你需要自行为元素添加 CSS "width: 100%; height: 100%;":

    #myvideo:-webkit-full-screen {
    -  width: 100%;
    -  height: 100%;
    +  width: 100%;
    +  height: 100%;
     }
     
    -

    另一方面,如果你尝试在在 Gecko 上模拟 WebKit 的行为,你需要把你想要呈现的元素放在另一个实际调整为全屏幕的元素中, 并使用 CSS 规则调整内部的元素,从而达到你想要的样式。

    +

    另一方面,如果你尝试在在 Gecko 上模拟 WebKit 的行为,你需要把你想要呈现的元素放在另一个实际调整为全屏幕的元素中, 并使用 CSS 规则调整内部的元素,从而达到你想要的样式。

    通知

    -

    当成功进入全屏模式时,包含该元素的文档会收到一个 {{Event("fullscreenchange")}} 事件。当退出全屏模式时,文档会再一次收到 {{Event("fullscreenchange")}} 事件。注意此 {{Event("fullscreenchange")}} 事件,不管在文档进入和退出全屏模式时,都不会提供任何信息,但如果文档的 {{DOMxRef("document.fullscreenElement", "fullscreenElement")}} 为非空(`null`),即处于全屏模式中。

    +

    当成功进入全屏模式时,包含该元素的文档会收到一个 {{Event("fullscreenchange")}} 事件。当退出全屏模式时,文档会再一次收到 {{Event("fullscreenchange")}} 事件。注意此 {{Event("fullscreenchange")}} 事件,不管在文档进入和退出全屏模式时,都不会提供任何信息,但如果文档的 {{DOMxRef("document.fullscreenElement", "fullscreenElement")}} 为非空(`null`),即处于全屏模式中。

    当全屏请求失败时

    -

    你并不总是可以进入全屏模式。例如 {{HTMLElement("iframe")}} 元素具有 {{HTMLAttrXRef("allowfullscreen", "iframe")}} 属性,可选择是否将其内容以全屏模式显示。另外,几种特定的内容,比如窗体插件(windowed plug-ins),不能以全屏模式显示。尝试将不能以全屏模式显示的元素(或者此元素的父元素和后代元素)的时候,全屏请求是无效的。而相应元素会收到一个 mozfullscreenerror 事件。当全屏请求失败时,Firefox 会在 Web 控制台上打一条错误信息解释请求为什么失败。但是在 Chrome 和新版的 Opera 中,不会生成这样的警告。

    +

    你并不总是可以进入全屏模式。例如 {{HTMLElement("iframe")}} 元素具有 {{HTMLAttrXRef("allowfullscreen", "iframe")}} 属性,可选择是否将其内容以全屏模式显示。另外,几种特定的内容,比如窗体插件(windowed plug-ins),不能以全屏模式显示。尝试将不能以全屏模式显示的元素(或者此元素的父元素和后代元素)的时候,全屏请求是无效的。而相应元素会收到一个 mozfullscreenerror 事件。当全屏请求失败时,Firefox 会在 Web 控制台上打一条错误信息解释请求为什么失败。但是在 Chrome 和新版的 Opera 中,不会生成这样的警告。

    -

    注意:全屏请求必须在事件处理函数中调用,否则将会被拒绝。 

    +

    注意:全屏请求必须在事件处理函数中调用,否则将会被拒绝。

    退出全屏模式

    -

     

    +

    -

    用户总是可以自行退出全屏模式;详见 Things your users want to know。你也可以以编程方式通过调用 {{DOMxRef("Document.exitFullscreen()")}} 方法来做到这点。

    +

    用户总是可以自行退出全屏模式;详见 Things your users want to know。你也可以以编程方式通过调用 {{DOMxRef("Document.exitFullscreen()")}} 方法来做到这点。

    其他信息

    @@ -75,72 +75,72 @@

    其他信息

    {{DOMxRef("DocumentOrShadowRoot.fullscreenElement")}}
    -
    fullscreenElement 属性可以告诉你当前以全屏模式显示的元素 {{DOMxRef("Element")}} 。若此项非空,文档处于全屏模式中,否则不在。
    +
    fullscreenElement 属性可以告诉你当前以全屏模式显示的元素 {{DOMxRef("Element")}} 。若此项非空,文档处于全屏模式中,否则不在。
    {{DOMxRef("Document.fullscreenEnabled")}}
    fullscreenEnabled 属性可以告诉你文档当前是否为允许请求进入全屏幕模式的状态。

    你的用户想了解的信息

    -

    你可能想确保使你的用户得知他可以按 ESC  键 (或 F11) 退出全屏模式。

    +

    你可能想确保使你的用户得知他可以按 ESC 键 (或 F11) 退出全屏模式。

    -

    此外,当处在全屏模式中,浏览其他页面、切换标签页、或者切换到其他应用 (例如使用 Alt-Tab)  也会导致退出全屏模式。

    +

    此外,当处在全屏模式中,浏览其他页面、切换标签页、或者切换到其他应用 (例如使用 Alt-Tab) 也会导致退出全屏模式。

    示例

    -

    在这个例子中,网页中显示了一个视频。按下 Return 或 Enter 键让用户在视频的窗口显示和全屏显示之间切换。

    +

    在这个例子中,网页中显示了一个视频。按下 ReturnEnter 键让用户在视频的窗口显示和全屏显示之间切换。

    View Live Examples

    -

    监听 Enter 键

    +

    监听 Enter

    -

    当页面加载完成时,这段代码可以设置一个事件监听器以监听 Enter 键。

    +

    当页面加载完成时,这段代码可以设置一个事件监听器以监听 Enter 键。

    document.addEventListener("keydown", function(e) {
    -  if (e.keyCode == 13) {
    -    toggleFullScreen();
    -  }
    +  if (e.keyCode == 13) {
    +    toggleFullScreen();
    +  }
     }, false);
     

    切换全屏模式

    -

    当用户按下 Enter 键时,这段代码会被调用,像上面示例看到的那样。

    +

    当用户按下 Enter 键时,这段代码会被调用,像上面示例看到的那样。

    function toggleFullScreen() {
    -  if (!document.fullscreenElement) {
    -    document.documentElement.requestFullscreen();
    -  } else {
    -    if (document.exitFullscreen) {
    -      document.exitFullscreen();
    -    }
    -  }
    +  if (!document.fullscreenElement) {
    +    document.documentElement.requestFullscreen();
    +  } else {
    +    if (document.exitFullscreen) {
    +      document.exitFullscreen();
    +    }
    +  }
     }
    -

    这段代码首先检查 {{DOMxRef("document")}} 的fullscreenElement 属性的值(亦要检查带有前缀 mozms、webkit)。如果其为 null,文档当前处于窗口模式中,所以我们需要切换到全屏模式。通过调用{{DOMxRef("element.requestFullscreen()")}},可以切换到全屏模式。

    +

    这段代码首先检查 {{DOMxRef("document")}} 的fullscreenElement 属性的值(亦要检查带有前缀 mozms、webkit)。如果其为 null,文档当前处于窗口模式中,所以我们需要切换到全屏模式。通过调用{{DOMxRef("element.requestFullscreen()")}},可以切换到全屏模式。

    -

    如果全屏模式已经激活 (fullscreenElement 不为 null),我们可以调用 {{DOMxRef("document.exitFullscreen()")}}(或其前缀化的版本,这取决于你使用的浏览器)。

    +

    如果全屏模式已经激活 (fullscreenElement 不为 null),我们可以调用 {{DOMxRef("document.exitFullscreen()")}}(或其前缀化的版本,这取决于你使用的浏览器)。

    前缀

    -

    注意:现在,只有 Firefox 64 和 Chrome 71 支持无前缀。

    +

    注意:现在,只有 Firefox 64 和 Chrome 71 支持无前缀。

    -

    目前并不是所有的浏览器都实现了 API 的无前缀版本(你可以使用 Fscreen 获取跨浏览器全屏 API),这里有一份表格总结了前缀和它们之间的命名区别:

    +

    目前并不是所有的浏览器都实现了 API 的无前缀版本(你可以使用 Fscreen 获取跨浏览器全屏 API),这里有一份表格总结了前缀和它们之间的命名区别:

    name 只读的 DOMString文件系统的名称。The name must be unique across the list of exposed file systems.文件系统的名称。The name must be unique across the list of exposed file systems.
    root
    - + - + - + @@ -201,7 +201,7 @@

    Document.fullscreenEnabled

    扩展链接

      -
    • 全屏 API 
    • +
    • 全屏 API
    • {{DOMxRef("Element.requestFullscreen()")}}
    • {{DOMxRef("Document.exitFullscreen()")}}
    • {{DOMxRef("Document.fullscreen")}}
    • @@ -210,4 +210,4 @@

      扩展链接

    • {{HTMLAttrXRef("allowfullscreen", "iframe")}}
    -

     

    +

    diff --git a/files/zh-cn/web/api/fullscreen_api/index.html b/files/zh-cn/web/api/fullscreen_api/index.html index 3fbedad2a4634a..8512786bd5f621 100644 --- a/files/zh-cn/web/api/fullscreen_api/index.html +++ b/files/zh-cn/web/api/fullscreen_api/index.html @@ -14,12 +14,12 @@ ---

    {{DefaultAPISidebar("Fullscreen API")}}

    -

     全屏 API 为使用用户的整个屏幕展现网络内容提供了一种简单的方式,并且在不需要时退出全屏模式。这种 API 让你可以简单地控制浏览器,使得一个元素与其子元素,如果存在的话,可以占据整个屏幕,并在此期间,从屏幕上隐藏所有的浏览器用户界面以及其他应用。

    +

    全屏 API 为使用用户的整个屏幕展现网络内容提供了一种简单的方式,并且在不需要时退出全屏模式。这种 API 让你可以简单地控制浏览器,使得一个元素与其子元素,如果存在的话,可以占据整个屏幕,并在此期间,从屏幕上隐藏所有的浏览器用户界面以及其他应用。

    可以在全屏 API 指南这篇文章了解更多细节。

    -

    注意:当前并不是所有的浏览器都支持该 API,大多数浏览器需要使用供应商前缀或者尚未实现该规范。下面的浏览器兼容性表 Browser compatibility 可以看到各个浏览器对此的支持(你也可以使用 Fscreen 来提供跨浏览器 API 访问)。

    +

    注意:当前并不是所有的浏览器都支持该 API,大多数浏览器需要使用供应商前缀或者尚未实现该规范。下面的浏览器兼容性表 Browser compatibility 可以看到各个浏览器对此的支持(你也可以使用 Fscreen 来提供跨浏览器 API 访问)。

    接口

    @@ -28,7 +28,7 @@

    接口

    方法

    -

    全屏 API 在 {{DOMxRef("Document")}} 和 {{DOMxRef("Element")}} 接口中增加了一些方法,可用于允许打开关闭全屏模式。

    +

    全屏 API 在 {{DOMxRef("Document")}} 和 {{DOMxRef("Element")}} 接口中增加了一些方法,可用于允许打开关闭全屏模式。

    Document 中的方法

    @@ -50,18 +50,18 @@

    属性

    {{DOMxRef("DocumentOrShadowRoot.fullscreenElement")}}
    -
    fullscreenElement 属性提供了当前在 DOM(或者 shadow DOM)里被展示为全屏模式的 {{DOMxRef("Element")}},如果这个值为 null,文档不处于全屏模式。
    +
    fullscreenElement 属性提供了当前在 DOM(或者 shadow DOM)里被展示为全屏模式的 {{DOMxRef("Element")}},如果这个值为 null,文档不处于全屏模式。
    {{DOMxRef("Document.fullscreenEnabled")}}
    -
    fullscreenEnabled 属性提供了启用全屏模式的可能性。当它的值是 false 的时候,表示全屏模式不可用(可能的原因有 "fullscreen" 特性不被允许,或全屏模式不被支持等)。
    +
    fullscreenEnabled 属性提供了启用全屏模式的可能性。当它的值是 false 的时候,表示全屏模式不可用(可能的原因有 "fullscreen" 特性不被允许,或全屏模式不被支持等)。

    事件处理程序

    -

    Fullscreen API 定义了两个事件,可用于检测全屏模式的打开和关闭,以及在全屏和窗口模式之间切换过程中发生的错误。{{DOMxRef("Document")}}  {{DOMxRef("Element")}} 接口提供了这些事件的事件处理函数。

    +

    Fullscreen API 定义了两个事件,可用于检测全屏模式的打开和关闭,以及在全屏和窗口模式之间切换过程中发生的错误。{{DOMxRef("Document")}} {{DOMxRef("Element")}} 接口提供了这些事件的事件处理函数。

    -

    注意:这些事件处理函数特性不可以当成 HTML 内容属性来使用。换句话说,你无法在 HTML 内容中为 {{Event("fullscreenchange")}} 和 {{Event("fullscreenerror")}} 指定事件处理程序,你必须通过  JavaScript 代码添加它们。

    +

    注意:这些事件处理函数特性不可以当成 HTML 内容属性来使用。换句话说,你无法在 HTML 内容中为 {{Event("fullscreenchange")}} 和 {{Event("fullscreenerror")}} 指定事件处理程序,你必须通过 JavaScript 代码添加它们。

    Document 上的事件处理程序

    @@ -82,15 +82,15 @@

    Element 上的事件处理程序

    {{DOMxRef("Element.onfullscreenchange")}}
    当全屏事件发生时,该事件会被发送到该元素,表明该元素进入或退出全屏模式
    {{DOMxRef("Element.onfullscreenerror")}}
    -
    {{Event("fullscreenerror")}} 事件的处理程序,当指定的 {{DOMxRef("Element")}} 改变全屏模式时候出现错误,该事件将被发送到指定的 {{DOMxRef("Element")}} 上。
    +
    {{Event("fullscreenerror")}} 事件的处理程序,当指定的 {{DOMxRef("Element")}} 改变全屏模式时候出现错误,该事件将被发送到指定的 {{DOMxRef("Element")}} 上。

    废弃属性

    -
    {{DOMxRef("Document.fullscreen")}} {{Deprecated_Inline}}
    +
    {{DOMxRef("Document.fullscreen")}} {{Deprecated_Inline}}
    一个布尔值,文档内任意一个元素以全屏模式程序时该值为true,否则为 false
    -

    Note:请改用 {{DOMxRef("ShadowRoot")}} 或 {{DOMxRef("Document")}} 上的 {{DOMxRef("Document.fullscreenElement", "fullscreenElement")}} 属性;如果它不是 null,则它是就是当前在全屏模式下显示的元素。

    +

    Note:请改用 {{DOMxRef("ShadowRoot")}} 或 {{DOMxRef("Document")}} 上的 {{DOMxRef("Document.fullscreenElement", "fullscreenElement")}} 属性;如果它不是 null,则它是就是当前在全屏模式下显示的元素。

    @@ -101,9 +101,9 @@

    事件

    {{Event("fullscreenchange")}}
    -
    当全屏或退出全屏时发送消息给(监听的)的 {{DOMxRef("Document")}} 或 {{DOMxRef("Element")}} 。
    +
    当全屏或退出全屏时发送消息给(监听的)的 {{DOMxRef("Document")}} 或 {{DOMxRef("Element")}} 。
    {{Event("fullscreenerror")}}
    -
    当全屏或退出全屏是发生了错误时,将错误消息发送给(监听的)的 {{DOMxRef("Document")}} 或 {{DOMxRef("Element")}} 。
    +
    当全屏或退出全屏是发生了错误时,将错误消息发送给(监听的)的 {{DOMxRef("Document")}} 或 {{DOMxRef("Element")}} 。

    Dictionaries

    @@ -115,38 +115,38 @@

    Dictionaries

    访问控制

    -

    全屏模式可由功能策略( Feature Policy)控制。全屏模式功能由字符串“full screen”标识,默认的允许列表值为“self”,这意味着在顶级文档上下文 以及 从与顶级文档相同的源加载的嵌套上下文中允许使用全屏模式。

    +

    全屏模式可由功能策略( Feature Policy)控制。全屏模式功能由字符串“full screen”标识,默认的允许列表值为“self”,这意味着在顶级文档上下文 以及 从与顶级文档相同的源加载的嵌套上下文中允许使用全屏模式。

    -

    请参阅使用功能策略( Feature Policy )以了解有关使用功能策略控制对 API 的访问的更多信息。

    +

    请参阅使用功能策略( Feature Policy )以了解有关使用功能策略控制对 API 的访问的更多信息。

    使用说明

    -

    用户通过按 ESC  键(或 F11)即可退出全屏模式,而不是等着站点或应用的代码来做这件事。确定你在你的用户界面里提供合适的界面元素来告知用户这个可选项。

    +

    用户通过按 ESC 键(或 F11)即可退出全屏模式,而不是等着站点或应用的代码来做这件事。确定你在你的用户界面里提供合适的界面元素来告知用户这个可选项。

    -

    注意:当处在全屏模式中,浏览其他页面,切换标签页,或者切换到其他应用(例如使用 Alt-Tab)也会导致退出全屏模式。

    +

    注意:当处在全屏模式中,浏览其他页面,切换标签页,或者切换到其他应用(例如使用 Alt-Tab)也会导致退出全屏模式。

    示例

    -

    在这个例子中,网页中显示了一个视频。按下 Enter 键让用户在视频的窗口显示和全屏显示之间切换。

    +

    在这个例子中,网页中显示了一个视频。按下 Enter 键让用户在视频的窗口显示和全屏显示之间切换。

    查看在线演示

    -

    监听 Enter 键

    +

    监听 Enter

    -

    当页面加载时,这段代码会运行,设置一个事件监听器以监听 Enter 键。

    +

    当页面加载时,这段代码会运行,设置一个事件监听器以监听 Enter 键。

    document.addEventListener("keydown", function(e) {
    -  if (e.keyCode == 13) {
    -    toggleFullScreen();
    -  }
    +  if (e.keyCode == 13) {
    +    toggleFullScreen();
    +  }
     }, false);
     

    切换全屏模式

    -

    当用户按下 Enter 键时,这段代码会被调用,像上面看到的那样。

    +

    当用户按下 Enter 键时,这段代码会被调用,像上面看到的那样。

    function toggleFullScreen() {
       if (!document.fullscreenElement) {
    @@ -159,9 +159,9 @@ 

    切换全屏模式

    }
    -

    这段代码首先检查 document 的 fullscreenElement 属性的值(亦要检查带有前缀 mozms、webkit)。如果其为 null,文档当前处于窗口模式中,所以我们需要切换到全屏模式。通过调用 element.requestFullscreen(),可以切换到全屏模式。

    +

    这段代码首先检查 documentfullscreenElement 属性的值(亦要检查带有前缀 mozms、webkit)。如果其为 null,文档当前处于窗口模式中,所以我们需要切换到全屏模式。通过调用 element.requestFullscreen(),可以切换到全屏模式。

    -

    如果全屏模式已经激活(fullscreenElement 不为 null),我们可以调用 document.exitFullscreen()(或其前缀化的版本,这取决于你使用的浏览器)。

    +

    如果全屏模式已经激活(fullscreenElement 不为 null),我们可以调用 document.exitFullscreen()(或其前缀化的版本,这取决于你使用的浏览器)。

    规范

    @@ -169,7 +169,7 @@

    规范

    浏览器兼容性

    -

    所有的浏览器都实现了这个 API。然而一些带有前缀的实现在拼写上略微有些差别;例如,不同于 requestFullscreen(),存在一个 MozRequestFullScreen()

    +

    所有的浏览器都实现了这个 API。然而一些带有前缀的实现在拼写上略微有些差别;例如,不同于 requestFullscreen(),存在一个 MozRequestFullScreen()

    {{Compat("api.Document.fullscreen")}}

    diff --git a/files/zh-cn/web/api/gainnode/index.html b/files/zh-cn/web/api/gainnode/index.html index b754bd48b7f4c0..3abc7f87b5a81e 100644 --- a/files/zh-cn/web/api/gainnode/index.html +++ b/files/zh-cn/web/api/gainnode/index.html @@ -11,7 +11,7 @@

    {{ APIRef("Web Audio API") }}

    -

    GainNode 接口表示音量的变化。它是一个{{domxref("AudioNode")}}音频处理模块,在输出前使用给定增益应用到输入。一个 GainNode 总是只有一个输入和一个输出,两者拥有同样数量的声道。

    +

    GainNode 接口表示音量的变化。它是一个{{domxref("AudioNode")}}音频处理模块,在输出前使用给定增益应用到输入。一个 GainNode 总是只有一个输入和一个输出,两者拥有同样数量的声道。

    增益是一个无单位的值,会对所有输入声道的音频进行相应的增加。如果进行了修改,则会立即应用新增益,从而在结果音频中产生奇怪的“咔嗒”声。为了防止这种情况发生,请不要直接更改值,而应在{{domxref("AudioParam")}}接口上使用指数插值方法。

    diff --git a/files/zh-cn/web/api/gamepad/index.html b/files/zh-cn/web/api/gamepad/index.html index 427cfda776a3bc..8dcb62d5936cde 100644 --- a/files/zh-cn/web/api/gamepad/index.html +++ b/files/zh-cn/web/api/gamepad/index.html @@ -5,23 +5,23 @@ ---

    {{APIRef("Gamepad API")}}

    -

    Gamepad API 的 Gamepad 接口,定义了一个独立的游戏手柄或其他控制器,允许访问控制器的信息,譬如按钮按下的状态、坐标输入的位置。游戏手柄或其他控制器,允许访问如按钮按下,和 ID 等信息。

    +

    Gamepad APIGamepad 接口,定义了一个独立的游戏手柄或其他控制器,允许访问控制器的信息,譬如按钮按下的状态、坐标输入的位置。游戏手柄或其他控制器,允许访问如按钮按下,和 ID 等信息。

    -

    Gamepad 对象有两种方式返回值:通过 {{event("gamepadconnected")}} 和 {{event("gamepaddisconnected")}} 事件的  gamepad 属性,或者在任意位置抓取 {{domxref("Navigator.getGamepads()")}} 方法返回的数组。

    +

    Gamepad 对象有两种方式返回值:通过 {{event("gamepadconnected")}} 和 {{event("gamepaddisconnected")}} 事件的 gamepad 属性,或者在任意位置抓取 {{domxref("Navigator.getGamepads()")}} 方法返回的数组。

    属性

    {{domxref("Gamepad.axes")}} {{readonlyInline}}
    -
    一个表示控制器设备上存在的坐标轴的数组 (比如控制器摇杆)。
    +
    一个表示控制器设备上存在的坐标轴的数组 (比如控制器摇杆)。
    {{domxref("Gamepad.buttons")}} {{readonlyInline}}
    一个 {{domxref("gamepadButton")}} 对象的数组,表示设备上的按键的数组。
    {{domxref("Gamepad.connected")}} {{readonlyInline}}
    一个表示控制器是否仍然连接着系统的布尔值。
    {{domxref("Gamepad.displayId")}} {{readonlyInline}}
    -
    返回与 {{domxref("VRDisplay")}} 相关的 {{domxref("VRDisplay.displayId")}} (如果有相关) — 控制器所控制的 VRDisplay 场景。
    +
    返回与 {{domxref("VRDisplay")}} 相关的 {{domxref("VRDisplay.displayId")}} (如果有相关) — 控制器所控制的 VRDisplay 场景。
    {{domxref("Gamepad.id")}} {{readonlyInline}}
    -
    一个包含着控制器标识信息的 {{domxref("DOMString")}}。
    +
    一个包含着控制器标识信息的 {{domxref("DOMString")}}。
    {{domxref("Gamepad.index")}} {{readonlyInline}}
    一个自增的整形数字,对于当前连接到系统的每一个设备是唯一的。
    {{domxref("Gamepad.mapping")}} {{readonlyInline}}
    @@ -31,14 +31,14 @@

    属性

    Gamepad 的实验性扩展

    -

    以下接口被定义于 {{SpecName("GamepadExtensions")}} 规范中,且提供了诸如触觉反馈和 WebVR 控制器姿态方位信息等实验功能的访问。

    +

    以下接口被定义于 {{SpecName("GamepadExtensions")}} 规范中,且提供了诸如触觉反馈和 WebVR 控制器姿态方位信息等实验功能的访问。

    {{domxref("Gamepad.hand")}} {{readonlyInline}}
    一个枚举项,定义了控制器是用哪只手拿着的,或最可能是哪只手拿着的。
    {{domxref("Gamepad.hapticActuators")}} {{readonlyInline}}
    一个包含 {{domxref("GamepadHapticActuator")}} 对象的数组,其中表示控制器上可用的触觉反馈硬件。
    {{domxref("Gamepad.pose")}} {{readonlyInline}}
    -
    一个表示 WebVR 控制器姿态方位信息的 {{domxref("GamepadPose")}} 对象 (比如其在 3D 空间中的位置和方向)。 
    +
    一个表示 WebVR 控制器姿态方位信息的 {{domxref("GamepadPose")}} 对象 (比如其在 3D 空间中的位置和方向)。

    示例

    diff --git a/files/zh-cn/web/api/gamepad_api/index.html b/files/zh-cn/web/api/gamepad_api/index.html index bff5dbf8cd4e39..45b4fe3a2c3d30 100644 --- a/files/zh-cn/web/api/gamepad_api/index.html +++ b/files/zh-cn/web/api/gamepad_api/index.html @@ -11,9 +11,9 @@ ---

    {{DefaultAPISidebar("Gamepad API")}}{{SeeCompatTable}}

    -

     

    +

    -

    Gamepad API 可以给予开发者一种简单、统一的方式来识别并响应游戏控制器(手柄)。其中包含了三个接口、两个事件、一个特殊函数,用来响应控制器的连接与断开、获取其他关于控制器的信息以及识别当前是哪个按键或是哪个控制器被按下了。

    +

    Gamepad API 可以给予开发者一种简单、统一的方式来识别并响应游戏控制器(手柄)。其中包含了三个接口、两个事件、一个特殊函数,用来响应控制器的连接与断开、获取其他关于控制器的信息以及识别当前是哪个按键或是哪个控制器被按下了。

    接口

    @@ -32,10 +32,10 @@

    实验性 Gamepad 扩展

    {{domxref("GamepadHapticActuator")}}
    表示控制器中的硬件,用于向用户提供触觉反馈(如果可用)最常见的是振动硬件。
    {{domxref("GamepadPose")}}
    -
    表示控制器的位置方向(例如,在 3D 空间中的位置和方向)于 WebVR 控制器中。
    +
    表示控制器的位置方向(例如,在 3D 空间中的位置和方向)于 WebVR 控制器中。
    -

    另请参阅  Gamepad 接口扩展,来获取上方的功能的相关信息。

    +

    另请参阅 Gamepad 接口扩展,来获取上方的功能的相关信息。

    其他接口扩展

    @@ -43,7 +43,7 @@
    {{domxref("Navigator.getGamepads()")}}
    -
    于 {{domxref("Navigator")}} 对象中的一个扩展。会返回一个 名为{{domxref("Gamepad")}} 的数组对象,其中每个数组元素对应一个已连接的控制器。
    +
    于 {{domxref("Navigator")}} 对象中的一个扩展。会返回一个 名为{{domxref("Gamepad")}} 的数组对象,其中每个数组元素对应一个已连接的控制器。

    Window 事件

    @@ -73,6 +73,6 @@

    浏览器兼容性

    另请参阅

    diff --git a/files/zh-cn/web/api/gamepad_api/using_the_gamepad_api/index.html b/files/zh-cn/web/api/gamepad_api/using_the_gamepad_api/index.html index 5ba200b3620d6e..2985bb00bd4127 100644 --- a/files/zh-cn/web/api/gamepad_api/using_the_gamepad_api/index.html +++ b/files/zh-cn/web/api/gamepad_api/using_the_gamepad_api/index.html @@ -12,14 +12,14 @@

    {{DefaultAPISidebar("Gamepad API")}}{{ SeeCompatTable() }}

    -

    HTML5 为丰富的交互式游戏开发引入了许多必要的组件。像 <canvas> 、WebGL、 <audio> 和 <video> 这样的技术,随着 JavaScript 的逐渐成熟,许多以前需要 native code 来实现的功能现在都可以实现了。Gamepad(手柄) API 是开发人员和设计者识别和使用游戏控制板和其他游戏控制器的一种方法。

    +

    HTML5 为丰富的交互式游戏开发引入了许多必要的组件。像 <canvas> 、WebGL、 <audio><video> 这样的技术,随着 JavaScript 的逐渐成熟,许多以前需要 native code 来实现的功能现在都可以实现了。Gamepad(手柄) API 是开发人员和设计者识别和使用游戏控制板和其他游戏控制器的一种方法。

    -

    Gamepad API 引入新的事件在 {{ domxref("Window") }} 对象中,来读取手柄和控制器(以下称“控制器”)的状态。除此之外,API 还添加了一个 {{ domxref("Gamepad") }} 对象,你可以用它来查询已连接控制器的状态;还有一个 {{ domxref("navigator.getGamepads()") }} 方法,你可以使用它来获取页面已知的控制器列表。

    +

    Gamepad API 引入新的事件在 {{ domxref("Window") }} 对象中,来读取手柄和控制器(以下称“控制器”)的状态。除此之外,API 还添加了一个 {{ domxref("Gamepad") }} 对象,你可以用它来查询已连接控制器的状态;还有一个 {{ domxref("navigator.getGamepads()") }} 方法,你可以使用它来获取页面已知的控制器列表。

    连接控制器

    -

    当一个新的手柄连接到计算机时,焦点页面 (当前页面) 首先接收一个 {{ event("gamepadconnected") }} 事件。 如果在加载页面时已经连接了手柄,则会在用户按下某个按钮或移动坐标方向 (axes) 时触发焦点页面的 {{ event("gamepadconnected") }} 事件。

    +

    当一个新的手柄连接到计算机时,焦点页面 (当前页面) 首先接收一个 {{ event("gamepadconnected") }} 事件。 如果在加载页面时已经连接了手柄,则会在用户按下某个按钮或移动坐标方向 (axes) 时触发焦点页面的 {{ event("gamepadconnected") }} 事件。

    在 Firefox 中,控制器只会暴露给与用户产生交互的可见页面。这有助于防止控制器被用于获取用户的指纹。一旦有一个手柄与页面产生交互,那么其他连接的控制器将自动对页面可见。

    @@ -28,9 +28,9 @@

    连接控制器

    你可以这样使用 {{ event("gamepadconnected") }} :

    window.addEventListener("gamepadconnected", function(e) {
    -  console.log("控制器已连接于 %d 位: %s. %d 个按钮,%d 个坐标方向。",
    -    e.gamepad.index, e.gamepad.id,
    -    e.gamepad.buttons.length, e.gamepad.axes.length);
    +  console.log("控制器已连接于 %d 位: %s. %d 个按钮,%d 个坐标方向。",
    +    e.gamepad.index, e.gamepad.id,
    +    e.gamepad.buttons.length, e.gamepad.axes.length);
     });
     
    @@ -41,40 +41,40 @@

    断开控制器连接

    当控制器断开连接时,如果页面以前接收过该手柄的数据 (例如 {{ event("gamepadconnected") }}),那么第二个事件 {{ event("gamepaddisconnected") }} 将会分配至焦点页面:

    window.addEventListener("gamepaddisconnected", function(e) {
    -  console.log("控制器已从 %d 位断开: %s",
    -    e.gamepad.index, e.gamepad.id);
    +  console.log("控制器已从 %d 位断开: %s",
    +    e.gamepad.index, e.gamepad.id);
     });
    -

    即使使用相同类型的多个控制器,控制器的 {{domxref("Gamepad.index", "index")}} 属性都会是唯一的,每一个设备都有一个。index 属性还可充当 {{ domxref("Navigator.getGamepads()") }} 返回 {{jsxref("Array")}} 的索引。

    +

    即使使用相同类型的多个控制器,控制器的 {{domxref("Gamepad.index", "index")}} 属性都会是唯一的,每一个设备都有一个。index 属性还可充当 {{ domxref("Navigator.getGamepads()") }} 返回 {{jsxref("Array")}} 的索引。

    var gamepads = {};
     
     function gamepadHandler(event, connecting) {
    -  var gamepad = event.gamepad;
    +  var gamepad = event.gamepad;
       // 注:
       // gamepad === navigator.getGamepads()[gamepad.index]
     
    -  if (connecting) {
    -    gamepads[gamepad.index] = gamepad;
    -  } else {
    -    delete gamepads[gamepad.index];
    -  }
    +  if (connecting) {
    +    gamepads[gamepad.index] = gamepad;
    +  } else {
    +    delete gamepads[gamepad.index];
    +  }
     }
     
     window.addEventListener("gamepadconnected", function(e) { gamepadHandler(e, true); }, false);
     window.addEventListener("gamepaddisconnected", function(e) { gamepadHandler(e, false); }, false);
     
    -

    上面的示例同时演示了在事件完成后如何保存 gamepad 属性,并在之后使用其查询设备状态。

    +

    上面的示例同时演示了在事件完成后如何保存 gamepad 属性,并在之后使用其查询设备状态。

    查询 Gamepad 对象

    -

    正如你看到的,上面讨论的 gamepad 事件,包括事件对象上的 gamepad 属性,会返回一个 {{ domxref("Gamepad") }} 对象。因为可能同时连接不止一个控制器,所以我们可以使用它来确定是哪个控制器 (或者说 ID) 触发了事件。我们可以使用 {{ domxref("Gamepad") }} 对象做很多事,比如保留对象的引用并用其查询,以找出哪些按钮和摇杆在什么时候被按下了。相较于在下次触发,现在立即就可以获取控制器的状态对于游戏或其他交互式网页来说是一般是可取的。

    +

    正如你看到的,上面讨论的 gamepad 事件,包括事件对象上的 gamepad 属性,会返回一个 {{ domxref("Gamepad") }} 对象。因为可能同时连接不止一个控制器,所以我们可以使用它来确定是哪个控制器 (或者说 ID) 触发了事件。我们可以使用 {{ domxref("Gamepad") }} 对象做很多事,比如保留对象的引用并用其查询,以找出哪些按钮和摇杆在什么时候被按下了。相较于在下次触发,现在立即就可以获取控制器的状态对于游戏或其他交互式网页来说是一般是可取的。

    -

    开发者执行此类查询时往往涉及将 {{ domxref("Gamepad") }} 对象和一个动画循环 (例如 {{ domxref("Window.requestAnimationFrame","requestAnimationFrame") }}) 结合在一起,希望根据控制器的状态来对决定当前框架的行为。

    +

    开发者执行此类查询时往往涉及将 {{ domxref("Gamepad") }} 对象和一个动画循环 (例如 {{ domxref("Window.requestAnimationFrame","requestAnimationFrame") }}) 结合在一起,希望根据控制器的状态来对决定当前框架的行为。

    -

    {{ domxref("Navigator.getGamepads()") }} 方法返回当前对网页可见的所有设备的数组,{{ domxref("Gamepad") }} 对象 (初始值始终为 null,所以当没有控制器连接的时候将会返回 null ) 也一样可以用来获取的控制器信息。例如下面将会重写开头的第一个例子:

    +

    {{ domxref("Navigator.getGamepads()") }} 方法返回当前对网页可见的所有设备的数组,{{ domxref("Gamepad") }} 对象 (初始值始终为 null,所以当没有控制器连接的时候将会返回 null ) 也一样可以用来获取的控制器信息。例如下面将会重写开头的第一个例子:

    window.addEventListener("gamepadconnected", function(e) {
    @@ -87,18 +87,18 @@ 

    查询 Gamepad 对象

    以下是 {{ domxref("Gamepad") }} 对象的属性说明:

      -
    • id: 包含一些关于控制器信息的字符串。它的格式没有特定规范,但是在 Firefox 中它将会含有三部分信息并以连接线连接 (-):包含控制器的 USB 供应商、产品 ID 的两个 4 位十六进制字符串以及驱动程序提供的控制器的名称。此信息旨在允许你为设备上的控件查找适当的映射,并向用户显示有用的反馈。
    • +
    • id: 包含一些关于控制器信息的字符串。它的格式没有特定规范,但是在 Firefox 中它将会含有三部分信息并以连接线连接 (-):包含控制器的 USB 供应商、产品 ID 的两个 4 位十六进制字符串以及驱动程序提供的控制器的名称。此信息旨在允许你为设备上的控件查找适当的映射,并向用户显示有用的反馈。
    • index: 每个已连接手柄唯一的索引数字,可以用来区分多个控制器。请注意,断开目前的设备并连接一个新的设备可能会使用之前的索引值。
    • -
    • mapping: 一个用来指示浏览器是否已将设备上的控件重新映射到已知布局的字符串。目前只有一个受支持的已知布局 - standard gamepad(标准控制器)。如果浏览器能够将设备上的控件映射为该布局,mapping 属性将会为字符串 standard
    • -
    • connected: 一个用来指示控制器是否连接到系统的布尔值。如果已连接则为 True;反之则为 False
    • -
    • buttons: 一个表示设备上按钮的 {{ domxref("GamepadButton") }} 数组对象。每个 {{ domxref("GamepadButton") }} 都含有一个 pressed 和一个 value 属性: +
    • mapping: 一个用来指示浏览器是否已将设备上的控件重新映射到已知布局的字符串。目前只有一个受支持的已知布局 - standard gamepad(标准控制器)。如果浏览器能够将设备上的控件映射为该布局,mapping 属性将会为字符串 standard
    • +
    • connected: 一个用来指示控制器是否连接到系统的布尔值。如果已连接则为 True;反之则为 False
    • +
    • buttons: 一个表示设备上按钮的 {{ domxref("GamepadButton") }} 数组对象。每个 {{ domxref("GamepadButton") }} 都含有一个 pressed 和一个 value 属性:
        -
      • pressed 属性是一个表示按钮当前是按下 (true) 还是没按下 (false) 的布尔值。
      • -
      • value 属性是一个表示已触发模拟按钮 (例如目前很多控制器的线性/段式扳机键) 的值的浮点值。值的范围被规范为 0.0 到 1.0。0.0 表示没被按下的按钮,1.0 表示被完全按下的按钮。
      • +
      • pressed 属性是一个表示按钮当前是按下 (true) 还是没按下 (false) 的布尔值。
      • +
      • value 属性是一个表示已触发模拟按钮 (例如目前很多控制器的线性/段式扳机键) 的值的浮点值。值的范围被规范为 0.0 到 1.0。0.0 表示没被按下的按钮,1.0 表示被完全按下的按钮。
    • -
    • axes: 一个表示设备上坐标输入控件 (例如控制器摇杆) 的数组对象。数组中的每个值都是介于 -1.0 到 1.0 的浮点值,来表示坐标方向的最低 (-1.0) 和最大 (1.0) 值。
    • -
    • timestamp: 它将返回一个 {{ domxref("DOMHighResTimeStamp") }} ,该值表示上次更新此控制器数据的时间,以便开发者确定 axesbutton 数据是否已从硬件更新。该值必须相对于 {{ domxref("PerformanceTiming") }} 接口的 navigationStart 对象。值是单调递增的,这意味着可以通过对比大小来确定数据更新的先后顺序,因为新的值始终比旧的值大。请注意 Firefox 当前不支持该属性。
    • +
    • axes: 一个表示设备上坐标输入控件 (例如控制器摇杆) 的数组对象。数组中的每个值都是介于 -1.0 到 1.0 的浮点值,来表示坐标方向的最低 (-1.0) 和最大 (1.0) 值。
    • +
    • timestamp: 它将返回一个 {{ domxref("DOMHighResTimeStamp") }} ,该值表示上次更新此控制器数据的时间,以便开发者确定 axesbutton 数据是否已从硬件更新。该值必须相对于 {{ domxref("PerformanceTiming") }} 接口的 navigationStart 对象。值是单调递增的,这意味着可以通过对比大小来确定数据更新的先后顺序,因为新的值始终比旧的值大。请注意 Firefox 当前不支持该属性。
    @@ -107,9 +107,9 @@

    查询 Gamepad 对象

    使用按键信息

    -

    让我们看一个简单的示例:显示一个控制器的连接信息 (忽略后续连接的控制器) ,并让您使用控制器右侧的四个操作按钮移动屏幕上一个球。你可以 查看在线演示,并可在 Github 上找到源代码

    +

    让我们看一个简单的示例:显示一个控制器的连接信息 (忽略后续连接的控制器) ,并让您使用控制器右侧的四个操作按钮移动屏幕上一个球。你可以 查看在线演示,并可在 Github 上找到源代码

    -

    我们首先声明一些变量:gamepadInfo 用于写入连接信息的段落;ball 是我们希望控制移动的球;start 作为 requestAnimation Frame ID 的初始变量; a 和 b 变量作为球位置动量,并且变量会被用于 {{ domxref("Window.requestAnimationFrame", "requestAnimationFrame()") }} 和 {{ domxref("Window.cancelAnimationFrame", "cancelAnimationFrame()") }} 。(?)

    +

    我们首先声明一些变量:gamepadInfo 用于写入连接信息的段落;ball 是我们希望控制移动的球;start 作为 requestAnimation Frame ID 的初始变量; ab 变量作为球位置动量,并且变量会被用于 {{ domxref("Window.requestAnimationFrame", "requestAnimationFrame()") }} 和 {{ domxref("Window.cancelAnimationFrame", "cancelAnimationFrame()") }} 。(?)

    var gamepadInfo = document.getElementById("gamepad-info");
     var ball = document.getElementById("ball");
    @@ -127,7 +127,7 @@ 

    使用按键信息

    gameLoop(); });
    -

    现在我们再使用 {{ event("gamepaddisconnected") }} 事件来检查如果控制器断开的情况。如果断开了,我们会停止 {{ domxref("Window.requestAnimationFrame", "requestAnimationFrame()") }} 循环 (见下方) 并重置控制器信息到原来的样子。

    +

    现在我们再使用 {{ event("gamepaddisconnected") }} 事件来检查如果控制器断开的情况。如果断开了,我们会停止 {{ domxref("Window.requestAnimationFrame", "requestAnimationFrame()") }} 循环 (见下方) 并重置控制器信息到原来的样子。

    window.addEventListener("gamepaddisconnected", function(e) {
       gamepadInfo.innerHTML = "正在等待控制器。";
    @@ -157,9 +157,9 @@ 

    使用按键信息

    } }
    -

    现在看主要的游戏循环。在每次我们所需的四个按钮被按下的时候进行处理。如果被按下了我就会适当地更新动量变量  a 和 b 的值,然后分别用 ab 的值更新球的 {{ cssxref("left") }} 和 {{ cssxref("top") }} 属性。这样就可以在屏幕上移动数的位置了。在当前版本的 Chrome 中 (版本 34) button 的值是存储为数组的两个值,而不是 {{ domxref("GamepadButton") }} 对象。此问题已于开发者版本修复了。

    +

    现在看主要的游戏循环。在每次我们所需的四个按钮被按下的时候进行处理。如果被按下了我就会适当地更新动量变量 ab 的值,然后分别用 ab 的值更新球的 {{ cssxref("left") }} 和 {{ cssxref("top") }} 属性。这样就可以在屏幕上移动数的位置了。在当前版本的 Chrome 中 (版本 34) button 的值是存储为数组的两个值,而不是 {{ domxref("GamepadButton") }} 对象。此问题已于开发者版本修复了。

    -

    当这些处理好之后,我们使用我们的 requestAnimationFrame() 来请求下一个动画帧,然后运行 gameLoop() 再继续执行。

    +

    当这些处理好之后,我们使用我们的 requestAnimationFrame() 来请求下一个动画帧,然后运行 gameLoop() 再继续执行。

    function buttonPressed(b) {
       if (typeof(b) == "object") {
    @@ -198,126 +198,126 @@ 

    使用坐标方向 (axes) 信息

    完整的例子:显示控制器状态

    -

    这个例子展示了怎样使用 {{ domxref("Gamepad") }} 对象,还有 {{ event("gamepadconnected") }} 和 {{ event("gamepaddisconnected") }} 事件显示所有已连接到系统的控制器的状态。你可以查看在线演示并且可在 Github 上看到完整的源代码

    +

    这个例子展示了怎样使用 {{ domxref("Gamepad") }} 对象,还有 {{ event("gamepadconnected") }} 和 {{ event("gamepaddisconnected") }} 事件显示所有已连接到系统的控制器的状态。你可以查看在线演示并且可在 Github 上看到完整的源代码

    var haveEvents = 'ongamepadconnected' in window;
     var controllers = {};
     
     function connecthandler(e) {
    -  addgamepad(e.gamepad);
    +  addgamepad(e.gamepad);
     }
     
     function addgamepad(gamepad) {
    -  controllers[gamepad.index] = gamepad;
    +  controllers[gamepad.index] = gamepad;
     
       var d = document.createElement("div");
       d.setAttribute("id", "controller" + gamepad.index);
     
       var t = document.createElement("h1");
    -  t.appendChild(document.createTextNode("控制器:" + gamepad.id));
    -  d.appendChild(t);
    -
    -  var b = document.createElement("div");
    -  b.className = "buttons";
    -  for (var i = 0; i < gamepad.buttons.length; i++) {
    -    var e = document.createElement("span");
    -    e.className = "button";
    -    //e.id = "b" + i;
    -    e.innerHTML = i;
    -    b.appendChild(e);
    -  }
    -
    -  d.appendChild(b);
    -
    -  var a = document.createElement("div");
    -  a.className = "axes";
    -
    -  for (var i = 0; i < gamepad.axes.length; i++) {
    -    var p = document.createElement("progress");
    -    p.className = "axis";
    -    //p.id = "a" + i;
    -    p.setAttribute("max", "2");
    -    p.setAttribute("value", "1");
    -    p.innerHTML = i;
    -    a.appendChild(p);
    -  }
    -
    -  d.appendChild(a);
    +  t.appendChild(document.createTextNode("控制器:" + gamepad.id));
    +  d.appendChild(t);
    +
    +  var b = document.createElement("div");
    +  b.className = "buttons";
    +  for (var i = 0; i < gamepad.buttons.length; i++) {
    +    var e = document.createElement("span");
    +    e.className = "button";
    +    //e.id = "b" + i;
    +    e.innerHTML = i;
    +    b.appendChild(e);
    +  }
    +
    +  d.appendChild(b);
    +
    +  var a = document.createElement("div");
    +  a.className = "axes";
    +
    +  for (var i = 0; i < gamepad.axes.length; i++) {
    +    var p = document.createElement("progress");
    +    p.className = "axis";
    +    //p.id = "a" + i;
    +    p.setAttribute("max", "2");
    +    p.setAttribute("value", "1");
    +    p.innerHTML = i;
    +    a.appendChild(p);
    +  }
    +
    +  d.appendChild(a);
     
       // 见 https://github.com/luser/gamepadtest/blob/master/index.html
       var start = document.getElementById("start");
       if (start) {
    -    start.style.display = "none";
    +    start.style.display = "none";
       }
     
    -  document.body.appendChild(d);
    -  requestAnimationFrame(updateStatus);
    +  document.body.appendChild(d);
    +  requestAnimationFrame(updateStatus);
     }
     
     function disconnecthandler(e) {
    -  removegamepad(e.gamepad);
    +  removegamepad(e.gamepad);
     }
     
     function removegamepad(gamepad) {
    -  var d = document.getElementById("controller" + gamepad.index);
    -  document.body.removeChild(d);
    -  delete controllers[gamepad.index];
    +  var d = document.getElementById("controller" + gamepad.index);
    +  document.body.removeChild(d);
    +  delete controllers[gamepad.index];
     }
     
     function updateStatus() {
    -  if (!haveEvents) {
    -    scangamepads();
    -  }
    +  if (!haveEvents) {
    +    scangamepads();
    +  }
     
       var i = 0;
       var j;
     
    -  for (j in controllers) {
    -    var controller = controllers[j];
    -    var d = document.getElementById("controller" + j);
    -    var buttons = d.getElementsByClassName("button");
    -
    -    for (i = 0; i < controller.buttons.length; i++) {
    -      var b = buttons[i];
    -      var val = controller.buttons[i];
    -      var pressed = val == 1.0;
    -      if (typeof(val) == "object") {
    -        pressed = val.pressed;
    -        val = val.value;
    -      }
    -
    -      var pct = Math.round(val * 100) + "%";
    -      b.style.backgroundSize = pct + " " + pct;
    -
    -      if (pressed) {
    -        b.className = "button pressed";
    -      } else {
    -        b.className = "button";
    -      }
    -    }
    -
    -    var axes = d.getElementsByClassName("axis");
    -    for (i = 0; i < controller.axes.length; i++) {
    -      var a = axes[i];
    -      a.innerHTML = i + ": " + controller.axes[i].toFixed(4);
    -      a.setAttribute("value", controller.axes[i] + 1);
    -    }
    -  }
    -
    -  requestAnimationFrame(updateStatus);
    +  for (j in controllers) {
    +    var controller = controllers[j];
    +    var d = document.getElementById("controller" + j);
    +    var buttons = d.getElementsByClassName("button");
    +
    +    for (i = 0; i < controller.buttons.length; i++) {
    +      var b = buttons[i];
    +      var val = controller.buttons[i];
    +      var pressed = val == 1.0;
    +      if (typeof(val) == "object") {
    +        pressed = val.pressed;
    +        val = val.value;
    +      }
    +
    +      var pct = Math.round(val * 100) + "%";
    +      b.style.backgroundSize = pct + " " + pct;
    +
    +      if (pressed) {
    +        b.className = "button pressed";
    +      } else {
    +        b.className = "button";
    +      }
    +    }
    +
    +    var axes = d.getElementsByClassName("axis");
    +    for (i = 0; i < controller.axes.length; i++) {
    +      var a = axes[i];
    +      a.innerHTML = i + ": " + controller.axes[i].toFixed(4);
    +      a.setAttribute("value", controller.axes[i] + 1);
    +    }
    +  }
    +
    +  requestAnimationFrame(updateStatus);
     }
     
     function scangamepads() {
       var gamepads = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads() : []);
    -  for (var i = 0; i < gamepads.length; i++) {
    -    if (gamepads[i]) {
    -      if (gamepads[i].index in controllers) {
    -        controllers[gamepads[i].index] = gamepads[i];
    -      } else {
    -        addgamepad(gamepads[i]);
    -      }
    -    }
    -  }
    +  for (var i = 0; i < gamepads.length; i++) {
    +    if (gamepads[i]) {
    +      if (gamepads[i].index in controllers) {
    +        controllers[gamepads[i].index] = gamepads[i];
    +      } else {
    +        addgamepad(gamepads[i]);
    +      }
    +    }
    +  }
     }
     
     
    @@ -325,7 +325,7 @@ 

    完整的例子:显示控制 window.addEventListener("gamepaddisconnected", disconnecthandler); if (!haveEvents) { -  setInterval(scangamepads, 500); + setInterval(scangamepads, 500); }

    规范

    diff --git a/files/zh-cn/web/api/gamepadbutton/index.html b/files/zh-cn/web/api/gamepadbutton/index.html index 11260a4735f26a..ca62a11379ff8e 100644 --- a/files/zh-cn/web/api/gamepadbutton/index.html +++ b/files/zh-cn/web/api/gamepadbutton/index.html @@ -5,26 +5,26 @@ ---
    {{APIRef("Gamepad API")}}
    -

    GamepadButton 接口定义了在一个手柄或其他控制器的唯一的一个按键,允许访问不同控制器设备可用类型的按钮的当前状态。

    +

    GamepadButton 接口定义了在一个手柄或其他控制器的唯一的一个按键,允许访问不同控制器设备可用类型的按钮的当前状态。

    -

    GamepadButton 对象是由 {{domxref("Gamepad")}} 接口的 buttons 属性返回的可查询任意值的数组返回的。

    +

    GamepadButton 对象是由 {{domxref("Gamepad")}} 接口的 buttons 属性返回的可查询任意值的数组返回的。

    -

    注:上述情况是在 Firefox Gecko 28 及以上的;Chrome 和较早版本的 Firefox 访问此属性时仍然会返回一个双精浮点值的数组。

    +

    注:上述情况是在 Firefox Gecko 28 及以上的;Chrome 和较早版本的 Firefox 访问此属性时仍然会返回一个双精浮点值的数组。

    属性

    {{domxref("GamepadButton.value")}} {{readonlyInline}}
    -
    一个用来表示按钮当前状态的双精浮点值,比如说许多现代控制器都有的扳机键。其值被规范至范围 0.0 —1.0 之间,其中 0.0 表示按钮没有被按下,而 1.0 表示按钮被完全按下 (按到底)。
    +
    一个用来表示按钮当前状态的双精浮点值,比如说许多现代控制器都有的扳机键。其值被规范至范围 0.0 —1.0 之间,其中 0.0 表示按钮没有被按下,而 1.0 表示按钮被完全按下 (按到底)。
    {{domxref("GamepadButton.pressed")}} {{readonlyInline}}
    -
    一个指示当前按钮是被按下 (true) 还是没有被按下 (false) 的布尔值。
    +
    一个指示当前按钮是被按下 (true) 还是没有被按下 (false) 的布尔值。

    示例

    -

    接下来的代码来自于我 (文作者) 的 Gamepad API 按钮示例 (你可以在线查看示例,并在 Github 上查找源代码。) 注意代码分支——在 Chrome 中{{domxref("Navigator.getGamepads")}} 需要一个 webkit 前缀并且按钮值被存储为一个双精浮点值的数组,然而在 Firefox 中 {{domxref("Navigator.getGamepads")}} 不需要前缀,且按钮值被存储为 {{domxref("GamepadButton")}} 对象数组;其中有我们需要的  {{domxref("GamepadButton.value")}} 或 {{domxref("GamepadButton.pressed")}} 属性,这取决于他们是什么类型的按钮。在这个简单的示例中我只是允许了它们。

    +

    接下来的代码来自于我 (文作者) 的 Gamepad API 按钮示例 (你可以在线查看示例,并在 Github 上查找源代码。) 注意代码分支——在 Chrome 中{{domxref("Navigator.getGamepads")}} 需要一个 webkit 前缀并且按钮值被存储为一个双精浮点值的数组,然而在 Firefox 中 {{domxref("Navigator.getGamepads")}} 不需要前缀,且按钮值被存储为 {{domxref("GamepadButton")}} 对象数组;其中有我们需要的 {{domxref("GamepadButton.value")}} 或 {{domxref("GamepadButton.pressed")}} 属性,这取决于他们是什么类型的按钮。在这个简单的示例中我只是允许了它们。

    function gameLoop() {
       if(navigator.webkitGetGamepads) {
    diff --git a/files/zh-cn/web/api/gamepadbutton/pressed/index.html b/files/zh-cn/web/api/gamepadbutton/pressed/index.html
    index 0ebcdd3ccea78a..4aaeb7d26b29f0 100644
    --- a/files/zh-cn/web/api/gamepadbutton/pressed/index.html
    +++ b/files/zh-cn/web/api/gamepadbutton/pressed/index.html
    @@ -5,7 +5,7 @@
     ---
     

    {{APIRef("Gamepad API")}}

    -

    {{domxref("GamepadButton")}}接口下的 GamepadButton.pressed 属性返回一个表示按钮当然是被按下了 (true) 还是没有被按下 (false) 的布尔值。

    +

    {{domxref("GamepadButton")}}接口下的 GamepadButton.pressed 属性返回一个表示按钮当然是被按下了 (true) 还是没有被按下 (false) 的布尔值。

    语法

    @@ -35,5 +35,5 @@

    浏览器兼容性

    另请参阅

    diff --git a/files/zh-cn/web/api/gamepadbutton/value/index.html b/files/zh-cn/web/api/gamepadbutton/value/index.html index 61090dd6f3dc29..037ef893f55da4 100644 --- a/files/zh-cn/web/api/gamepadbutton/value/index.html +++ b/files/zh-cn/web/api/gamepadbutton/value/index.html @@ -5,9 +5,9 @@ ---

    {{APIRef("Gamepad API")}}

    -

    {{domxref("GamepadButton")}}接口下的 GamepadButton.value 属性返回一个双精浮点值来表示许多现代控制器上的模拟按钮的状态,比如说扳机键。

    +

    {{domxref("GamepadButton")}}接口下的 GamepadButton.value 属性返回一个双精浮点值来表示许多现代控制器上的模拟按钮的状态,比如说扳机键。

    -

    其值被规范于范围 0.01.0 内, 0.0 表示按钮没有被按下,1.0 则表示按钮被完全按下。

    +

    其值被规范于范围 0.01.0 内, 0.0 表示按钮没有被按下,1.0 则表示按钮被完全按下。

    语法

    @@ -37,4 +37,4 @@

    浏览器兼容性

    另请参阅

    -

    使用 Gamepad API

    +

    使用 Gamepad API

    diff --git a/files/zh-cn/web/api/gamepadevent/gamepad/index.html b/files/zh-cn/web/api/gamepadevent/gamepad/index.html index 88f5118b0472f5..3ddfc53a1df692 100644 --- a/files/zh-cn/web/api/gamepadevent/gamepad/index.html +++ b/files/zh-cn/web/api/gamepadevent/gamepad/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef("Gamepad API")}}
    -

    {{domxref("GamepadEvent")}} interface 的 GamepadEvent.gamepad 属性返回一个 {{domxref("Gamepad")}} 对象,为触发 {{event("gamepadconnected")}} 和{{event("gamepaddisconnected")}} 事件提供相关联控制器数据的访问。

    +

    {{domxref("GamepadEvent")}} interface GamepadEvent.gamepad 属性返回一个 {{domxref("Gamepad")}} 对象,为触发 {{event("gamepadconnected")}} 和{{event("gamepaddisconnected")}} 事件提供相关联控制器数据的访问。

    语法

    @@ -13,7 +13,7 @@

    语法

    示例

    -

    在触发的 {{domxref("Window.gamepadconnected")}} 事件上调用 gamepad 属性。

    +

    在触发的 {{domxref("Window.gamepadconnected")}} 事件上调用 gamepad 属性。

    window.addEventListener("gamepadconnected", function(e) {
       console.log("控制器已连接于 %d 位:%s. %d 个按钮,%d 个坐标方向。",
    diff --git a/files/zh-cn/web/api/gamepadevent/gamepadevent/index.html b/files/zh-cn/web/api/gamepadevent/gamepadevent/index.html
    index 537cb9395bc6ee..4009bd800768db 100644
    --- a/files/zh-cn/web/api/gamepadevent/gamepadevent/index.html
    +++ b/files/zh-cn/web/api/gamepadevent/gamepadevent/index.html
    @@ -5,7 +5,7 @@
     ---
     

    {{APIRef("Gamepad API")}}

    -

    GamepadEvent_ 构造函数用于创建一个新的 {{domxref("GamepadEvent")}} 对象。

    +

    GamepadEvent_ 构造函数用于创建一个新的 {{domxref("GamepadEvent")}} 对象。

    语法

    @@ -15,7 +15,7 @@

    参数

    typeArg
    -
    一个 {{domxref("DOMString")}} ,必须为 gamepadconnected 或 gamepaddisconnected
    +
    一个 {{domxref("DOMString")}} ,必须为 gamepadconnectedgamepaddisconnected
    options {{optional_inline}}
    选项如下所示:
      diff --git a/files/zh-cn/web/api/gamepadevent/index.html b/files/zh-cn/web/api/gamepadevent/index.html index 078a5aa832c731..d0f6a08d191363 100644 --- a/files/zh-cn/web/api/gamepadevent/index.html +++ b/files/zh-cn/web/api/gamepadevent/index.html @@ -5,13 +5,13 @@ ---

      {{APIRef("Gamepad API")}}

      -

      Gamepad API 的 GamepadEvent 接口包含对连接到系统的控制器的引用,这也是 gamepad 事件 events {{domxref("Window.gamepadconnected")}} 与 {{domxref("Window.gamepaddisconnected")}} 被触发时响应的内容。

      +

      Gamepad API 的 GamepadEvent 接口包含对连接到系统的控制器的引用,这也是 gamepad 事件 events {{domxref("Window.gamepadconnected")}} 与 {{domxref("Window.gamepaddisconnected")}} 被触发时响应的内容。

      构造函数

      {{domxref("GamepadEvent.GamepadEvent","GamepadEvent()")}}
      -
      返回一个新的 GamepadEvent 对象。
      +
      返回一个新的 GamepadEvent 对象。

      属性

      diff --git a/files/zh-cn/web/api/gamepadpose/index.html b/files/zh-cn/web/api/gamepadpose/index.html index 3dd4f0607a339e..78c0c9716555a6 100644 --- a/files/zh-cn/web/api/gamepadpose/index.html +++ b/files/zh-cn/web/api/gamepadpose/index.html @@ -5,9 +5,9 @@ ---
      {{APIRef("Gamepad API")}}{{SeeCompatTable}}
      -

      Gamepad API的接口GamepadPose 表示 WebVR 的控制者在某个给定时间点的姿势, (包括方向、位置、速率、加速度信息)

      +

      Gamepad API的接口GamepadPose 表示 WebVR 的控制者在某个给定时间点的姿势, (包括方向、位置、速率、加速度信息)

      -

      这个接口通过 {{domxref("Gamepad.pose")}} 属性使用。

      +

      这个接口通过 {{domxref("Gamepad.pose")}} 属性使用。

      属性

      diff --git a/files/zh-cn/web/api/geolocation/clearwatch/index.html b/files/zh-cn/web/api/geolocation/clearwatch/index.html index 9e107495fd30d1..b0e6c841b24e3e 100644 --- a/files/zh-cn/web/api/geolocation/clearwatch/index.html +++ b/files/zh-cn/web/api/geolocation/clearwatch/index.html @@ -5,7 +5,7 @@ ---

      {{ APIref("Geolocation API") }}

      -

      Geolocation.clearWatch()这个方法主要用于使用 {{domxref("Geolocation.watchPosition()")}} 注册的 位置/错误 监听器。

      +

      Geolocation.clearWatch()这个方法主要用于使用 {{domxref("Geolocation.watchPosition()")}} 注册的 位置/错误 监听器。

      语法

      @@ -15,7 +15,7 @@

      参数

      id
      -
      希望移除的监听器所对应的 {{domxref("Geolocation.watchPosition()")}} 返回的 ID 数字。
      +
      希望移除的监听器所对应的 {{domxref("Geolocation.watchPosition()")}} 返回的 ID 数字。

      示例

      @@ -57,7 +57,7 @@

      浏览器兼容性

      {{Compat("api.Geolocation.clearWatch")}} -

       

      +

      相关链接

      diff --git a/files/zh-cn/web/api/geolocation/getcurrentposition/index.html b/files/zh-cn/web/api/geolocation/getcurrentposition/index.html index 3f2f7b63561a83..94b6b5c8dbbf28 100644 --- a/files/zh-cn/web/api/geolocation/getcurrentposition/index.html +++ b/files/zh-cn/web/api/geolocation/getcurrentposition/index.html @@ -22,9 +22,9 @@

      参数

      success
      -
      成功得到位置信息时的回调函数,使用{{domxref("Position")}} 对象作为唯一的参数。 
      +
      成功得到位置信息时的回调函数,使用{{domxref("Position")}} 对象作为唯一的参数。
      error {{optional_inline}}
      -
      获取位置信息失败时的回调函数,使用 {{domxref("PositionError")}} 对象作为唯一的参数,这是一个可选项。 
      +
      获取位置信息失败时的回调函数,使用 {{domxref("PositionError")}} 对象作为唯一的参数,这是一个可选项。
      options {{optional_inline}}
      一个可选的{{domxref("PositionOptions")}} 对象。
      diff --git a/files/zh-cn/web/api/geolocation/index.html b/files/zh-cn/web/api/geolocation/index.html index b006125c39f4e5..fa307d464140e8 100644 --- a/files/zh-cn/web/api/geolocation/index.html +++ b/files/zh-cn/web/api/geolocation/index.html @@ -12,9 +12,9 @@ ---
      {{APIRef}}
      -

      Geolocation 接口是一个用来获取设备地理位置的可编程的对象,它可以让 Web 内容访问到设备的地理位置,这将允许 Web 应用基于用户的地理位置提供定制的信息。说实话:其实Geolocation 就是用来获取到当前设备的经纬度(位置)

      +

      Geolocation 接口是一个用来获取设备地理位置的可编程的对象,它可以让 Web 内容访问到设备的地理位置,这将允许 Web 应用基于用户的地理位置提供定制的信息。说实话:其实Geolocation 就是用来获取到当前设备的经纬度(位置)

      -

      带有此接口的对象可以用由 {{domxref("Navigator")}}实现的属性{{domxref("NavigatorGeolocation.geolocation")}} 来获得。  

      +

      带有此接口的对象可以用由 {{domxref("Navigator")}}实现的属性{{domxref("NavigatorGeolocation.geolocation")}} 来获得。

      注意:出于安全考虑,当一个 Web 页尝试获取地理位置信息时,会请求用户批准地理位置访问权限。要知道每个浏览器都有自己请求用户批准该权限的策略和方法。

      @@ -22,19 +22,19 @@

      属性

      -

      Geolocation 接口不实现,也不继承任何属性。

      +

      Geolocation 接口不实现,也不继承任何属性。

      方法

      -

      Geolocation 接口不继承任何方法。

      +

      Geolocation 接口不继承任何方法。

      {{domxref("Geolocation.getCurrentPosition()")}}
      -
      确定设备的位置并返回一个携带位置信息的 {{domxref("Position")}} 对象。
      +
      确定设备的位置并返回一个携带位置信息的 {{domxref("Position")}} 对象。
      {{domxref("Geolocation.watchPosition()")}}
      注册一个位置改变监听器,每当设备位置改变时,返回一个 long 类型的该监听器的 ID 值。
      {{domxref("Geolocation.clearWatch()")}}
      -
      取消由 watchPosition() 注册的位置监听器。
      +
      取消由 watchPosition() 注册的位置监听器。

      规范

      diff --git a/files/zh-cn/web/api/geolocation/watchposition/index.html b/files/zh-cn/web/api/geolocation/watchposition/index.html index 87e40fdd32e1a6..60e4ad3b0dfa81 100644 --- a/files/zh-cn/web/api/geolocation/watchposition/index.html +++ b/files/zh-cn/web/api/geolocation/watchposition/index.html @@ -7,7 +7,7 @@

      Geolocation.watchPosition() 用于注册监听器,在设备的地理位置发生改变的时候自动被调用。也可以选择特定的错误处理函数。

      -

      该方法会返回一个 ID,如要取消监听可以通过  {{domxref("Geolocation.clearWatch()")}} 传入该 ID 实现取消的目的。

      +

      该方法会返回一个 ID,如要取消监听可以通过 {{domxref("Geolocation.clearWatch()")}} 传入该 ID 实现取消的目的。

      语法

      @@ -17,7 +17,7 @@

      参数

      success
      -
      成功时候的回调函数, 同时传入一个 {{domxref("Position")}} 对象当作参数。
      +
      成功时候的回调函数, 同时传入一个 {{domxref("Position")}} 对象当作参数。
      error {{optional_inline}}
      失败时候的回调函数,可选, 会传入一个 {{domxref("PositionError")}} 对象当作参数。
      options {{optional_inline}}
      @@ -57,7 +57,7 @@

      示例

      注意

      -

      如果你的应用程序运行在 firefox OS 上,请参考下 geolocation wake lock ,以便在屏幕关闭的时候,程序可以运行在后台以继续监听位置的变化。

      +

      如果你的应用程序运行在 firefox OS 上,请参考下 geolocation wake lock ,以便在屏幕关闭的时候,程序可以运行在后台以继续监听位置的变化。

      规范

      @@ -72,7 +72,7 @@

      相关链接

      • geolocation wake lock
      • 使用地理位置定位
      • -
      • 该方法属于 {{domxref("Geolocation")}},可以通过 {{domxref("NavigatorGeolocation.geolocation")}} 访问。
      • -
      • 取消监听的方法: {{domxref("Geolocation.clearWatch()")}}
      • -
      • 另一个类似的方法: {{domxref("Geolocation.getCurrentPosition()")}}
      • +
      • 该方法属于 {{domxref("Geolocation")}},可以通过 {{domxref("NavigatorGeolocation.geolocation")}} 访问。
      • +
      • 取消监听的方法: {{domxref("Geolocation.clearWatch()")}}
      • +
      • 另一个类似的方法: {{domxref("Geolocation.getCurrentPosition()")}}
      diff --git a/files/zh-cn/web/api/geolocation_api/index.html b/files/zh-cn/web/api/geolocation_api/index.html index 6ed425135517c5..eda00cc77eae09 100644 --- a/files/zh-cn/web/api/geolocation_api/index.html +++ b/files/zh-cn/web/api/geolocation_api/index.html @@ -23,7 +23,7 @@

      geolocation 对象

    -

    注意: 在 Firefox 24 和之前的浏览器中,即使 API 被禁止,代码 "geolocation" in navigator 也总是会得到 true。这在 Firefox 25 中已经被修复 ({{ bug(884921) }})。

    +

    注意: 在 Firefox 24 和之前的浏览器中,即使 API 被禁止,代码 "geolocation" in navigator 也总是会得到 true。这在 Firefox 25 中已经被修复 ({{ bug(884921) }})。

    获取当前定位

    @@ -119,9 +119,9 @@

    HTML

    <p><button onclick="geoFindMe()">Show my location</button></p>
     <div id="out"></div>
    -

     

    +

    -
     
    +

    JavaScript

    diff --git a/files/zh-cn/web/api/geolocationcoordinates/index.html b/files/zh-cn/web/api/geolocationcoordinates/index.html index a15e8c91461b91..015cdb3c7cfd7c 100644 --- a/files/zh-cn/web/api/geolocationcoordinates/index.html +++ b/files/zh-cn/web/api/geolocationcoordinates/index.html @@ -8,7 +8,7 @@ ---
    {{APIRef("Geolocation API")}}
    -

    Coordinates (坐标)接口表示设备在地球上的位置和海拔,以及计算这些属性的精确度。

    +

    Coordinates (坐标)接口表示设备在地球上的位置和海拔,以及计算这些属性的精确度。

    属性

    @@ -20,7 +20,7 @@

    属性

    {{domxref("Coordinates.longitude")}} {{readonlyInline}}
    Returns a double representing the position's longitude in decimal degrees.
    {{domxref("Coordinates.altitude")}} {{readonlyInline}}
    -
    Returns a double representing the position's altitude in metres, relative to sea level. This value can be null if the implementation cannot provide the data.
    +
    Returns a double representing the position's altitude in metres, relative to sea level. This value can be null if the implementation cannot provide the data.
    {{domxref("Coordinates.accuracy")}} {{readonlyInline}}
    Returns a double representing the accuracy of the latitude and longitude properties, expressed in meters.
    {{domxref("Coordinates.altitudeAccuracy")}} {{readonlyInline}}
    diff --git a/files/zh-cn/web/api/geolocationposition/index.html b/files/zh-cn/web/api/geolocationposition/index.html index e0b65476287a0e..a055e1a99f17ff 100644 --- a/files/zh-cn/web/api/geolocationposition/index.html +++ b/files/zh-cn/web/api/geolocationposition/index.html @@ -9,7 +9,7 @@ ---
    {{APIRef("Geolocation API")}}
    -

    Position  接口表示在给定的时间的相关设备的位置。这个位置,用一个{{domxref("Coordinates")}}对象表示,包括设备在地球上的二维位置, 但也可以包括设备的海拔和速度。      

    +

    Position 接口表示在给定的时间的相关设备的位置。这个位置,用一个{{domxref("Coordinates")}}对象表示,包括设备在地球上的二维位置, 但也可以包括设备的海拔和速度。

    属性

    diff --git a/files/zh-cn/web/api/gestureevent/index.html b/files/zh-cn/web/api/gestureevent/index.html index 171bc6f0cd4013..7b66e02433401a 100644 --- a/files/zh-cn/web/api/gestureevent/index.html +++ b/files/zh-cn/web/api/gestureevent/index.html @@ -9,7 +9,7 @@

    GestureEvent 是 WebKit 的专有接口,提供多点触控的信息。这个接口的事件包括 {{event("gesturestart")}}, {{event("gesturechange")}} 和 {{event("gestureend")}}.

    -

    GestureEvent 继承自 {{domxref("UIEvent")}},后者又继承自{{domxref("Event")}}。

    +

    GestureEvent 继承自 {{domxref("UIEvent")}},后者又继承自{{domxref("Event")}}。

    构造函数

    diff --git a/files/zh-cn/web/api/globaleventhandlers/index.html b/files/zh-cn/web/api/globaleventhandlers/index.html index 762b9ab70356e2..f9e20da5fbb854 100644 --- a/files/zh-cn/web/api/globaleventhandlers/index.html +++ b/files/zh-cn/web/api/globaleventhandlers/index.html @@ -7,10 +7,10 @@
    {{ ApiRef("HTML DOM") }}
    -

    GlobalEventHandlers 描述了一系列 web worker 的事件接口 {{domxref("HTMLElement")}}, {{domxref("Document")}}, {{domxref("Window")}}, 或 {{domxref("WorkerGlobalScope")}}。这里面的每一个接口都可以添加更多的事件句柄。

    +

    GlobalEventHandlers 描述了一系列 web worker 的事件接口 {{domxref("HTMLElement")}}, {{domxref("Document")}}, {{domxref("Window")}}, 或 {{domxref("WorkerGlobalScope")}}。这里面的每一个接口都可以添加更多的事件句柄。

    -

    Note:GlobalEventHandlers 是一个混入对象 (mixin) 而不是一个真正的接口,所以无法创建直接基于GlobalEventHandlers 的对象。

    +

    Note:GlobalEventHandlers 是一个混入对象 (mixin) 而不是一个真正的接口,所以无法创建直接基于GlobalEventHandlers 的对象。

    属性

    @@ -19,19 +19,19 @@

    属性

    Event handlers

    -

    这些事件定义在 {{domxref("GlobalEventHandlers")}} 中,并被混入和实现在{{domxref("HTMLElement")}}, {{domxref("Document")}}, {{domxref("Window")}}上,任意 html 元素、document 对象,window 对象上均可以使用它提供的属性, 即时是全局的{{domxref("WorkerGlobalScope")}}。

    +

    这些事件定义在 {{domxref("GlobalEventHandlers")}} 中,并被混入和实现在{{domxref("HTMLElement")}}, {{domxref("Document")}}, {{domxref("Window")}}上,任意 html 元素、document 对象,window 对象上均可以使用它提供的属性, 即时是全局的{{domxref("WorkerGlobalScope")}}。

    {{domxref("GlobalEventHandlers.onabort")}}
    -
    这是一个事件句柄 {{event("Event_handlers", "event handler")}} ,当停止{{event("abort")}} 事件触发时会被调用。
    +
    这是一个事件句柄 {{event("Event_handlers", "event handler")}} ,当停止{{event("abort")}} 事件触发时会被调用。
    {{domxref("GlobalEventHandlers.onanimationcancel")}} {{Non-standard_inline}}
    -
    这是一个事件句柄 {{event("Event_handlers", "event handler")}} ,当 CSS 动画取消{{event("animationcancel")}}事件触发时被调用,这表示某个正在执行的 CSS 动画被取消了。
    +
    这是一个事件句柄 {{event("Event_handlers", "event handler")}} ,当 CSS 动画取消{{event("animationcancel")}}事件触发时被调用,这表示某个正在执行的 CSS 动画被取消了。
    {{domxref("GlobalEventHandlers.onanimationend")}} {{Non-standard_inline}}
    -
    这是一个事件句柄 {{event("Event_handlers", "event handler")}} ,当 CSS 动画播放完成{{event("animationend")}} 事件触发时被调用,这表示某个 CSS 动画已经播放完成了。
    +
    这是一个事件句柄 {{event("Event_handlers", "event handler")}} ,当 CSS 动画播放完成{{event("animationend")}} 事件触发时被调用,这表示某个 CSS 动画已经播放完成了。
    {{domxref("GlobalEventHandlers.onblur")}}
    -
    这是一个事件句柄 {{event("Event_handlers", "event handler")}} ,当失去焦点 {{event("blur")}} 事件触发时会被调用。
    +
    这是一个事件句柄 {{event("Event_handlers", "event handler")}} ,当失去焦点 {{event("blur")}} 事件触发时会被调用。
    {{domxref("GlobalEventHandlers.onerror")}}
    -
    这是一个错误发生时的事件句柄 {{event("Event_handlers", "event handler")}} ,当发生错误{{event("error")}} 事件时会被调用。
    +
    这是一个错误发生时的事件句柄 {{event("Event_handlers", "event handler")}} ,当发生错误{{event("error")}} 事件时会被调用。
    {{domxref("GlobalEventHandlers.onfocus")}}
    Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("focus")}} event is raised.
    {{domxref("GlobalEventHandlers.oncancel")}}
    diff --git a/files/zh-cn/web/api/globaleventhandlers/oncancel/index.html b/files/zh-cn/web/api/globaleventhandlers/oncancel/index.html index 819df0f3e6b37f..54f5c56f163334 100644 --- a/files/zh-cn/web/api/globaleventhandlers/oncancel/index.html +++ b/files/zh-cn/web/api/globaleventhandlers/oncancel/index.html @@ -13,9 +13,9 @@ ---
    {{ApiRef("HTML DOM")}}
    -

    {{domxref("GlobalEventHandlers")}} 的oncancel 属性是一个{{event("Event_handlers", "event handler")}},它是用来处理发送给{{HTMLElement("dialog")}}元素的{{event("cancel")}} 事件的。

    +

    {{domxref("GlobalEventHandlers")}} 的oncancel 属性是一个{{event("Event_handlers", "event handler")}},它是用来处理发送给{{HTMLElement("dialog")}}元素的{{event("cancel")}} 事件的。

    -

    当用户需要离开一个<dialog>元素的时候就会触发 cancel 事件。这个事件处理器会防止事件向上传递,因此任何父处理器都不会接受到该事件。

    +

    当用户需要离开一个<dialog>元素的时候就会触发 cancel 事件。这个事件处理器会防止事件向上传递,因此任何父处理器都不会接受到该事件。

    语法

    @@ -26,7 +26,7 @@

    参数

    functionRef 是一个函数名 或者 函数表达式. 这个函数接收一个 {{domxref("Event")}} 对象作为它唯一的参数。

    -

    每次只有一个 oncancel 处理器可以被赋值给一个对象。你可能更喜欢用 {{domxref("EventTarget.addEventListener()")}} 方法,因为它更灵活。

    +

    每次只有一个 oncancel 处理器可以被赋值给一个对象。你可能更喜欢用 {{domxref("EventTarget.addEventListener()")}} 方法,因为它更灵活。

    规范

    diff --git a/files/zh-cn/web/api/globaleventhandlers/onerror/index.html b/files/zh-cn/web/api/globaleventhandlers/onerror/index.html index fee9af9b477168..7c9c4dd78612b2 100644 --- a/files/zh-cn/web/api/globaleventhandlers/onerror/index.html +++ b/files/zh-cn/web/api/globaleventhandlers/onerror/index.html @@ -9,7 +9,7 @@ ---
    {{ApiRef("HTML DOM")}}
    -
    混合事件 {{domxref("GlobalEventHandlers")}} 的 onerror 属性是用于处理 {{event("error")}} 的事件
    +
    混合事件 {{domxref("GlobalEventHandlers")}} 的 onerror 属性是用于处理 {{event("error")}} 的事件
    @@ -59,7 +59,7 @@

    element.onerror

    注意事项

    -

    当加载自不同域的脚本中发生语法错误时,为避免信息泄露(参见{{bug("363897")}}),语法错误的细节将不会报告,而代之简单的"Script error."。在某些浏览器中,通过在{{HTMLElement("script")}}使用{{htmlattrxref("crossorigin","script")}}属性并要求服务器发送适当的 CORS HTTP 响应头,该行为可被覆盖。一个变通方案是单独处理"Script error.",告知错误详情仅能通过浏览器控制台查看,无法通过 JavaScript 访问。

    +

    当加载自不同域的脚本中发生语法错误时,为避免信息泄露(参见{{bug("363897")}}),语法错误的细节将不会报告,而代之简单的"Script error."。在某些浏览器中,通过在{{HTMLElement("script")}}使用{{htmlattrxref("crossorigin","script")}}属性并要求服务器发送适当的 CORS HTTP 响应头,该行为可被覆盖。一个变通方案是单独处理"Script error.",告知错误详情仅能通过浏览器控制台查看,无法通过 JavaScript 访问。

    window.onerror = function (msg, url, lineNo, columnNo, error) {
         var string = msg.toLowerCase();
    diff --git a/files/zh-cn/web/api/globaleventhandlers/ongotpointercapture/index.html b/files/zh-cn/web/api/globaleventhandlers/ongotpointercapture/index.html
    index 947daf2670b75c..8df2717616b95d 100644
    --- a/files/zh-cn/web/api/globaleventhandlers/ongotpointercapture/index.html
    +++ b/files/zh-cn/web/api/globaleventhandlers/ongotpointercapture/index.html
    @@ -5,7 +5,7 @@
     ---
     

    {{ApiRef("HTML DOM")}}

    -

    ongotpointercapture 事件是 GlobalEventHandlers 的属性,这个事件返回 gotpointercapture 类型的事件操作。

    +

    ongotpointercapture 事件是 GlobalEventHandlers 的属性,这个事件返回 gotpointercapture 类型的事件操作。

    语法

    diff --git a/files/zh-cn/web/api/globaleventhandlers/oninvalid/index.html b/files/zh-cn/web/api/globaleventhandlers/oninvalid/index.html index c7b61a02ba6c50..4a57ba37e75759 100644 --- a/files/zh-cn/web/api/globaleventhandlers/oninvalid/index.html +++ b/files/zh-cn/web/api/globaleventhandlers/oninvalid/index.html @@ -11,9 +11,9 @@ ---
    {{ ApiRef("HTML DOM") }}
    -

    {{domxref("GlobalEventHandlers")}} 混合的oninvalid属性 是 {{event("Event_handlers", "event handler")}} 处理{{event("invalid")}} 事件。

    +

    {{domxref("GlobalEventHandlers")}} 混合的oninvalid属性 是 {{event("Event_handlers", "event handler")}} 处理{{event("invalid")}} 事件。

    -

    invalid 事件被触发当一个从属元素被勾选 checked 并且与之前的选中方式不同。 有效的从属元素在表单之前被选中,或者在 checkValidity() 方法之后它自己的表单被调用。

    +

    invalid 事件被触发当一个从属元素被勾选 checked 并且与之前的选中方式不同。 有效的从属元素在表单之前被选中,或者在 checkValidity() 方法之后它自己的表单被调用。

    语法

    diff --git a/files/zh-cn/web/api/globaleventhandlers/onloadeddata/index.html b/files/zh-cn/web/api/globaleventhandlers/onloadeddata/index.html index bdcfe4be248e1e..1887e096c6f6d8 100644 --- a/files/zh-cn/web/api/globaleventhandlers/onloadeddata/index.html +++ b/files/zh-cn/web/api/globaleventhandlers/onloadeddata/index.html @@ -8,7 +8,7 @@ ---
    {{ ApiRef("HTML DOM") }}
    -

    {{domxref("GlobalEventHandlers")}}的onloadeddata 属性是事件 {{event("loadeddata")}}的处理{{event("Event_handlers", "event handler")}} 。

    +

    {{domxref("GlobalEventHandlers")}}的onloadeddata 属性是事件 {{event("loadeddata")}}的处理{{event("Event_handlers", "event handler")}} 。

    loadeddata 事件当媒体资源的第一帧加载完成时被触发。

    @@ -32,7 +32,7 @@

    说明

    - +
    StandardWebKit (Safari) / Blink (Chrome & Opera) / EdgeWebKit (Safari) / Blink (Chrome & Opera) / Edge Gecko (Firefox)Internet ExplorerInternet Explorer
    {{DOMxRef("Document.fullscreen")}} {{Deprecated_Inline}}{{DOMxRef("Document.fullscreen")}} {{Deprecated_Inline}} webkitIsFullScreen mozFullScreen -
    {{SpecName('HTML WHATWG','#handler-onloadeddata','onloadeddata')}} {{Spec2('HTML WHATWG')}} 
    diff --git a/files/zh-cn/web/api/globaleventhandlers/onloadend/index.html b/files/zh-cn/web/api/globaleventhandlers/onloadend/index.html index fc4c71efd00240..abb5b1e4b064a0 100644 --- a/files/zh-cn/web/api/globaleventhandlers/onloadend/index.html +++ b/files/zh-cn/web/api/globaleventhandlers/onloadend/index.html @@ -5,7 +5,7 @@ ---
    {{ApiRef}}
    -
    {{domxref("GlobalEventHandlers")}}的onloadend 属性是用来 表示触发{{event("loadend")}}事件时(资源加载进度停止时)的{{event("Event_handlers", "event handler")}}。
    +
    {{domxref("GlobalEventHandlers")}}的onloadend 属性是用来 表示触发{{event("loadend")}}事件时(资源加载进度停止时)的{{event("Event_handlers", "event handler")}}。

    语法

    diff --git a/files/zh-cn/web/api/globaleventhandlers/onloadstart/index.html b/files/zh-cn/web/api/globaleventhandlers/onloadstart/index.html index 2d1efe7f729620..2f71ecd6b72a9b 100644 --- a/files/zh-cn/web/api/globaleventhandlers/onloadstart/index.html +++ b/files/zh-cn/web/api/globaleventhandlers/onloadstart/index.html @@ -5,7 +5,7 @@ ---
    {{ApiRef}}
    -

    The onloadstart property of the {{domxref("GlobalEventHandlers")}} mixin is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("loadstart")}} event is raised (when progress has begun on the loading of a resource.)

    +

    The onloadstart property of the {{domxref("GlobalEventHandlers")}} mixin is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("loadstart")}} event is raised (when progress has begun on the loading of a resource.)

    Syntax

    diff --git a/files/zh-cn/web/api/globaleventhandlers/onlostpointercapture/index.html b/files/zh-cn/web/api/globaleventhandlers/onlostpointercapture/index.html index 9419c8002e9ea1..2181654d7be103 100644 --- a/files/zh-cn/web/api/globaleventhandlers/onlostpointercapture/index.html +++ b/files/zh-cn/web/api/globaleventhandlers/onlostpointercapture/index.html @@ -5,14 +5,14 @@ ---

    {{ApiRef("HTML DOM")}}

    -

    The onlostpointercapture {{event("Event_handlers", "event handler")}} property of the {{domxref("GlobalEventHandlers")}} interface returns the event handler (function) for the {{event("lostpointercapture")}} event type.

    +

    The onlostpointercapture {{event("Event_handlers", "event handler")}} property of the {{domxref("GlobalEventHandlers")}} interface returns the event handler (function) for the {{event("lostpointercapture")}} event type.

    语法

    window.onlostpointercapture = functionReference
     
    -

     

    +

    例子

    @@ -37,7 +37,7 @@

    例子

    {{Specifications}} -

     

    +

    浏览器兼容性

    diff --git a/files/zh-cn/web/api/globaleventhandlers/onpause/index.html b/files/zh-cn/web/api/globaleventhandlers/onpause/index.html index 7cacf5d28adfd3..4308a827b778d9 100644 --- a/files/zh-cn/web/api/globaleventhandlers/onpause/index.html +++ b/files/zh-cn/web/api/globaleventhandlers/onpause/index.html @@ -27,7 +27,7 @@

    说明

    {{SpecName('HTML WHATWG','#handler-onpause','onpause')}} {{Spec2('HTML WHATWG')}} -   + diff --git a/files/zh-cn/web/api/globaleventhandlers/onplay/index.html b/files/zh-cn/web/api/globaleventhandlers/onplay/index.html index ed69fd8a845b53..1eb2f44a915928 100644 --- a/files/zh-cn/web/api/globaleventhandlers/onplay/index.html +++ b/files/zh-cn/web/api/globaleventhandlers/onplay/index.html @@ -13,7 +13,7 @@

    语法

    var handlerFunction = element.onplay;
    -

    handlerFunction 应该是 null 或者 JavaScript function 指定事件的处理程序。

    +

    handlerFunction 应该是 null 或者 JavaScript function 指定事件的处理程序。

    示例

    @@ -47,7 +47,7 @@

    规范

    {{SpecName('HTML WHATWG','webappapis.html#handler-onplay','onplay')}} {{Spec2('HTML WHATWG')}} -

     

    +

    diff --git a/files/zh-cn/web/api/globaleventhandlers/onplaying/index.html b/files/zh-cn/web/api/globaleventhandlers/onplaying/index.html index 48d21ccd83784d..bb64a1b7a5e529 100644 --- a/files/zh-cn/web/api/globaleventhandlers/onplaying/index.html +++ b/files/zh-cn/web/api/globaleventhandlers/onplaying/index.html @@ -15,7 +15,7 @@

    语法

    var handlerFunction = element.onplaying;
    -

    handlerFunction 为 null 或一个函数 指定事件处理程序

    +

    handlerFunctionnull 或一个函数 指定事件处理程序

    规范

    @@ -36,7 +36,7 @@

    规范

    -

     浏览器兼容性

    +

    浏览器兼容性

    diff --git a/files/zh-cn/web/api/hashchangeevent/index.html b/files/zh-cn/web/api/hashchangeevent/index.html index 89a7029e52c9f5..68a7b4ceb121cb 100644 --- a/files/zh-cn/web/api/hashchangeevent/index.html +++ b/files/zh-cn/web/api/hashchangeevent/index.html @@ -21,7 +21,7 @@

    属性

    -

     这个接口也从 {{domxref("Event")}} 中继承属性。

    +

    这个接口也从 {{domxref("Event")}} 中继承属性。

    {{domxref("HashChangeEvent.newURL")}} {{readonlyInline}}
    @@ -69,7 +69,7 @@

    基本示例

    回落方法(Polyfill)

    -

    在 Modernizr GitHub page 中列出了几种回落(fallback)脚本。基本上,这些脚本每隔一段时间检查以此 {{domxref("HTMLHyperlinkElementUtils.hash", "location.hash")}}。这里是其中一个版本,其仅允许一个处理程序(handler)绑定在 {{domxref("Window/hashchange_event", "onhashchange")}} 属性上:

    +

    Modernizr GitHub page 中列出了几种回落(fallback)脚本。基本上,这些脚本每隔一段时间检查以此 {{domxref("HTMLHyperlinkElementUtils.hash", "location.hash")}}。这里是其中一个版本,其仅允许一个处理程序(handler)绑定在 {{domxref("Window/hashchange_event", "onhashchange")}} 属性上:

    (function(window) {
     
    diff --git a/files/zh-cn/web/api/hashchangeevent/newurl/index.html b/files/zh-cn/web/api/hashchangeevent/newurl/index.html
    index 93cc13ab0a4836..09e69f64e02c0b 100644
    --- a/files/zh-cn/web/api/hashchangeevent/newurl/index.html
    +++ b/files/zh-cn/web/api/hashchangeevent/newurl/index.html
    @@ -13,7 +13,7 @@
     
     
     
    -

    newURL 为 {{domxref("HashChangeEvent")}} 接口的只读属性,其值为窗口导航改变后的 URL。

    +

    newURL 为 {{domxref("HashChangeEvent")}} 接口的只读属性,其值为窗口导航改变后的 URL。

    语法

    diff --git a/files/zh-cn/web/api/hashchangeevent/oldurl/index.html b/files/zh-cn/web/api/hashchangeevent/oldurl/index.html index 125053c712fd2a..89d2745ba3e2a7 100644 --- a/files/zh-cn/web/api/hashchangeevent/oldurl/index.html +++ b/files/zh-cn/web/api/hashchangeevent/oldurl/index.html @@ -7,7 +7,7 @@ -

    oldURL 为 {{domxref("HashChangeEvent")}} 接口的只读属性,其值为窗口导航改变前的 URL。

    +

    oldURL 为 {{domxref("HashChangeEvent")}} 接口的只读属性,其值为窗口导航改变前的 URL。

    语法

    diff --git a/files/zh-cn/web/api/headers/append/index.html b/files/zh-cn/web/api/headers/append/index.html index f083c3bf609c33..94adb30db1d133 100644 --- a/files/zh-cn/web/api/headers/append/index.html +++ b/files/zh-cn/web/api/headers/append/index.html @@ -10,7 +10,7 @@

    在一个Headers对象内部,{{domxref("Headers")}}接口的append()方法可以追加一个新值到已存在的 headers 上,或者新增一个原本不存在的 header。

    -

    {{domxref("Headers.set")}} 和 append() 两者之间的不同之处在于当指定 header 是已经存在的并且允许接收多个值时,{{domxref("Headers.set")}}会重写此值为新值,而append()会追加到值序列的尾部。

    +

    {{domxref("Headers.set")}} 和 append() 两者之间的不同之处在于当指定 header 是已经存在的并且允许接收多个值时,{{domxref("Headers.set")}}会重写此值为新值,而append()会追加到值序列的尾部。

    因为安全性原因,一些 headers 仅受用户代理控制。包括{{Glossary("Forbidden_header_name", "forbidden header names", 1)}}和{{Glossary("Forbidden_response_header_name", "forbidden response header names", 1)}}。

    @@ -43,7 +43,7 @@

    例程

    myHeaders.get('Content-Type'); // Returns 'image/jpeg'
    -

    如果指定 header 不存在,append()将会添加这个 header 并赋值 . 如果指定 header 已存在并允许有多个值,append()将会把指定值添加到值队列的末尾。

    +

    如果指定 header 不存在,append()将会添加这个 header 并赋值 . 如果指定 header 已存在并允许有多个值,append()将会把指定值添加到值队列的末尾。

    myHeaders.append('Accept-Encoding', 'deflate');
     myHeaders.append('Accept-Encoding', 'gzip');
    @@ -60,7 +60,7 @@ 

    浏览器兼容性

    {{Compat("api.Headers.append")}}

    -
     
    +

    参见

    diff --git a/files/zh-cn/web/api/headers/delete/index.html b/files/zh-cn/web/api/headers/delete/index.html index bab2afa9701f1c..671fe28d38ac96 100644 --- a/files/zh-cn/web/api/headers/delete/index.html +++ b/files/zh-cn/web/api/headers/delete/index.html @@ -5,7 +5,7 @@ ---

    {{APIRef("Fetch")}}{{ SeeCompatTable() }}

    -

    delete() 方法可以从 Headers 对象中删除指定 header.

    +

    delete() 方法可以从 Headers 对象中删除指定 header.

    下列原因将会导致该方法抛出一个{{jsxref("TypeError")}}:

    @@ -15,7 +15,7 @@
    -

    Note:出于安全原因,部分头信息只能被用户代理控制。这些头信息包括 {{Glossary("Forbidden_header_name", "forbidden header names", 1)}}  和 {{Glossary("Forbidden_response_header_name", "forbidden response header names", 1)}}.

    +

    Note:出于安全原因,部分头信息只能被用户代理控制。这些头信息包括 {{Glossary("Forbidden_header_name", "forbidden header names", 1)}} 和 {{Glossary("Forbidden_response_header_name", "forbidden response header names", 1)}}.

    语法

    diff --git a/files/zh-cn/web/api/headers/entries/index.html b/files/zh-cn/web/api/headers/entries/index.html index 3f8277f71814d6..fa2a3dd3c385d8 100644 --- a/files/zh-cn/web/api/headers/entries/index.html +++ b/files/zh-cn/web/api/headers/entries/index.html @@ -5,10 +5,10 @@ ---

    {{APIRef}}{{SeeCompatTable}}

    -

    Headers.entries() 以 {{jsxref("Iteration_protocols","迭代器")}} 的形式返回 Headers 对象中所有的键值对. 

    +

    Headers.entries() 以 {{jsxref("Iteration_protocols","迭代器")}} 的形式返回 Headers 对象中所有的键值对.

    -

    备注:这个方法在 Web Workers中是可用的。

    +

    备注:这个方法在 Web Workers中是可用的。

    Syntax

    diff --git a/files/zh-cn/web/api/headers/get/index.html b/files/zh-cn/web/api/headers/get/index.html index 3313f6060aebf1..6daf4a8bbc2b71 100644 --- a/files/zh-cn/web/api/headers/get/index.html +++ b/files/zh-cn/web/api/headers/get/index.html @@ -7,10 +7,10 @@ ---

    {{APIRef("Fetch")}}{{ SeeCompatTable() }}

    -

    get() 方法以 {{domxref("ByteString")}} 形式从 Headers 对象中返回指定 header 的全部值。如果 Header 对象中不存在请求的 header,则返回 null

    +

    get() 方法以 {{domxref("ByteString")}} 形式从 Headers 对象中返回指定 header 的全部值。如果 Header 对象中不存在请求的 header,则返回 null

    -

    备注:出于安全原因,部分头信息只能被用户代理控制。这些头信息包括 {{Glossary("Forbidden_header_name", "forbidden header names", 1)}} 和 {{Glossary("Forbidden_response_header_name", "forbidden response header names", 1)}}。

    +

    备注:出于安全原因,部分头信息只能被用户代理控制。这些头信息包括 {{Glossary("Forbidden_header_name", "forbidden header names", 1)}} 和 {{Glossary("Forbidden_response_header_name", "forbidden response header names", 1)}}。

    Syntax

    @@ -48,7 +48,7 @@

    Example

    -

    Note: {{domxref("Headers.getAll")}} used to have this functionality, with {{domxref("Headers.get")}} returning only the first value added to the Headers object. The latest spec has removed getAll(), and updated get() to return all values.

    +

    Note: {{domxref("Headers.getAll")}} used to have this functionality, with {{domxref("Headers.get")}} returning only the first value added to the Headers object. The latest spec has removed getAll(), and updated get() to return all values.

    Specifications

    diff --git a/files/zh-cn/web/api/headers/has/index.html b/files/zh-cn/web/api/headers/has/index.html index 7ca5d988ab7535..b569a1401ee543 100644 --- a/files/zh-cn/web/api/headers/has/index.html +++ b/files/zh-cn/web/api/headers/has/index.html @@ -5,9 +5,9 @@ ---
    {{APIRef("Fetch")}}
    -

    {{domxref("Headers")}} 接口的 has()方法返回一个布尔值来声明一个 Headers对象 是否包含特定的头信息。

    +

    {{domxref("Headers")}} 接口的 has()方法返回一个布尔值来声明一个 Headers对象 是否包含特定的头信息。

    -

    考虑到安全因素,一些头信息只能被 user agent 来管理。这些头信息包括{{Glossary("Forbidden_header_name", "forbidden header names", 1)}}  和{{Glossary("Forbidden_response_header_name", "forbidden response header names", 1)}}.

    +

    考虑到安全因素,一些头信息只能被 user agent 来管理。这些头信息包括{{Glossary("Forbidden_header_name", "forbidden header names", 1)}} 和{{Glossary("Forbidden_response_header_name", "forbidden response header names", 1)}}.

    Syntax

    @@ -30,7 +30,7 @@

    Example

    var myHeaders = new Headers(); // Currently empty
    -

    你可以使用 {{domxref("Headers.append")}} 来向 myHeaders 添加一个头信息,然后使用 has() 方法来测试是否添加成功:

    +

    你可以使用 {{domxref("Headers.append")}} 来向 myHeaders 添加一个头信息,然后使用 has() 方法来测试是否添加成功:

    myHeaders.append('Content-Type', 'image/jpeg');
     myHeaders.has('Content-Type'); // Returns true
    diff --git a/files/zh-cn/web/api/headers/headers/index.html b/files/zh-cn/web/api/headers/headers/index.html
    index d37e23d288b6b8..cb8480df78006b 100644
    --- a/files/zh-cn/web/api/headers/headers/index.html
    +++ b/files/zh-cn/web/api/headers/headers/index.html
    @@ -18,12 +18,12 @@ 

    Parameters

    init {{optional_inline}}
    -
    通过一个包含任意 HTTP headers 的对象来预设你的 Headers. 可以是一个{{domxref("ByteString")}} 对象; 或者是一个已存在的 Headers 对象. 
    +
    通过一个包含任意 HTTP headers 的对象来预设你的 Headers. 可以是一个{{domxref("ByteString")}} 对象; 或者是一个已存在的 Headers 对象.

    Example

    -

    创建一个空的 Headers 对象:

    +

    创建一个空的 Headers 对象:

    var myHeaders = new Headers(); // Currently empty
    diff --git a/files/zh-cn/web/api/headers/index.html b/files/zh-cn/web/api/headers/index.html index 6090ceaed758e1..e894d316153c67 100644 --- a/files/zh-cn/web/api/headers/index.html +++ b/files/zh-cn/web/api/headers/index.html @@ -10,15 +10,15 @@ ---

    {{ APIRef("Fetch") }}

    -

    Fetch API 的 Headers 接口允许您对 HTTP 请求和响应头执行各种操作。 这些操作包括检索,设置,添加和删除。 一个 Headers 对象具有关联的头列表,它最初为空,由零个或多个键值对组成。你可以使用 {{domxref("Headers.append","append()")}} 方法添加 之类的方法添加到此 (参见 示例)。在该接口的所有方法中,标题名称由不区分大小写的字节序列匹配。

    +

    Fetch APIHeaders 接口允许您对 HTTP 请求和响应头执行各种操作。 这些操作包括检索,设置,添加和删除。 一个 Headers 对象具有关联的头列表,它最初为空,由零个或多个键值对组成。你可以使用 {{domxref("Headers.append","append()")}} 方法添加 之类的方法添加到此 (参见 示例)。在该接口的所有方法中,标题名称由不区分大小写的字节序列匹配。

    -

    出于安全考虑,某些头只能由用户代理控制。这些头信息包括 {{Glossary("Forbidden_header_name", "forbidden header names", 1)}}  和 {{Glossary("Forbidden_response_header_name", "forbidden response header names", 1)}}。

    +

    出于安全考虑,某些头只能由用户代理控制。这些头信息包括 {{Glossary("Forbidden_header_name", "forbidden header names", 1)}} 和 {{Glossary("Forbidden_response_header_name", "forbidden response header names", 1)}}。

    -

    一个 Headers 对象也有一个关联的 guard,它具有不可变的值,requestrequest-no-corsresponsenone。 这会影响 {{domxref("Headers.set","set()")}}, {{domxref("Headers.delete","delete()")}}, 和{{domxref("Headers.append","append()")}} 方法 改变 header. 参考更多信息,请看 {{Glossary("Guard")}}.

    +

    一个 Headers 对象也有一个关联的 guard,它具有不可变的值,requestrequest-no-corsresponsenone。 这会影响 {{domxref("Headers.set","set()")}}, {{domxref("Headers.delete","delete()")}}, 和{{domxref("Headers.append","append()")}} 方法 改变 header. 参考更多信息,请看 {{Glossary("Guard")}}.

    -

    你可以通过 {{domxref("Request.headers")}} 和{{domxref("Response.headers")}} 属性检索一个Headers对象,并使用 {{domxref("Headers.Headers()")}} 构造函数创建一个新的Headers 对象。

    +

    你可以通过 {{domxref("Request.headers")}} 和{{domxref("Response.headers")}} 属性检索一个Headers对象,并使用 {{domxref("Headers.Headers()")}} 构造函数创建一个新的Headers 对象。

    -

    一个实现了Headers 的对象可以直接用于 {{jsxref("Statements/for...of", "for...of")}} 结构中,而不是 {{domxref('Headers.entries()', 'entries()')}}: for (var p of myHeaders) 等价于 for (var p of myHeaders.entries()).

    +

    一个实现了Headers 的对象可以直接用于 {{jsxref("Statements/for...of", "for...of")}} 结构中,而不是 {{domxref('Headers.entries()', 'entries()')}}: for (var p of myHeaders) 等价于 for (var p of myHeaders.entries()).

    Note: 您可以通过阅读我们的 HTTP headers参考找到更多关于可用 headers 的信息。

    @@ -64,7 +64,7 @@

    Obsolete methods

    {{domxref("Headers.getAll()")}}
    -
    用于返回具有给定名称的 Headers 对象中所有值的数组; 这个方法现在已经从规范中删除了,{{domxref("Headers.get()")}} 方法现在返回所有的值而不是一个。
    +
    用于返回具有给定名称的 Headers 对象中所有值的数组; 这个方法现在已经从规范中删除了,{{domxref("Headers.get()")}} 方法现在返回所有的值而不是一个。

    示例

    @@ -95,4 +95,4 @@

    相关链接

  • HTTP
  • -

     

    +

    diff --git a/files/zh-cn/web/api/headers/keys/index.html b/files/zh-cn/web/api/headers/keys/index.html index 6c4702db8c9618..46a5d5d5af24ff 100644 --- a/files/zh-cn/web/api/headers/keys/index.html +++ b/files/zh-cn/web/api/headers/keys/index.html @@ -5,10 +5,10 @@ ---
    {{APIRef}}
    -
    Headers.keys() 方法返回一个 headers(Object) 对象所有 key 组成的迭代器,通过迭代器可以遍历 headers 这个对象,返回的迭代器中的元素 key 都是字符串。
    +
    Headers.keys() 方法返回一个 headers(Object) 对象所有 key 组成的迭代器,通过迭代器可以遍历 headers 这个对象,返回的迭代器中的元素 key 都是字符串。
    -

    注意: 这个方法在 Web Workers 也可以使用。

    +

    注意: 这个方法在 Web Workers 也可以使用。

    语法

    @@ -17,7 +17,7 @@

    语法

    返回值

    -

    返回 headers 对象中所有 key 组成的迭代器 {{jsxref("Iteration_protocols","iterator")}}。

    +

    返回 headers 对象中所有 key 组成的迭代器 {{jsxref("Iteration_protocols","iterator")}}。

    示例

    diff --git a/files/zh-cn/web/api/headers/set/index.html b/files/zh-cn/web/api/headers/set/index.html index 88f5eb6477e661..1255e9b0c38639 100644 --- a/files/zh-cn/web/api/headers/set/index.html +++ b/files/zh-cn/web/api/headers/set/index.html @@ -5,11 +5,11 @@ ---
    {{APIRef("Fetch")}}
    -

    headers接口中 set() 方法在可以在已经声明中的headers对象修改已有的一组键值对或者创建一个新的键值对。

    +

    headers接口中 set() 方法在可以在已经声明中的headers对象修改已有的一组键值对或者创建一个新的键值对。

    -

    set() 方法和 append()方法不同的是声明的Headers对象是否已经存在对应的keys是否已经存在并且已经赋值。set() 方法将会覆盖之前的value,然而 append()方法只会在Headers对象的尾部添加一个新的键值对。

    +

    set() 方法和 append()方法不同的是声明的Headers对象是否已经存在对应的keys是否已经存在并且已经赋值。set() 方法将会覆盖之前的value,然而 append()方法只会在Headers对象的尾部添加一个新的键值对。

    -

    为了安全策略,一些 Headers对象中的键值对只能客户端去控制。这些key包括Forbidden response header name 和 Forbidden responese header names 。

    +

    为了安全策略,一些 Headers对象中的键值对只能客户端去控制。这些key包括Forbidden response header nameForbidden responese header names

    语法

    @@ -19,9 +19,9 @@

    参数

    name
    -
    name就是需要对 HTTP header 设置新值的 key,一般为字符串。如果设置的name 不是 HTTP header 规范里面规定的 name,那么将会抛出错误"TypeError"。
    +
    name就是需要对 HTTP header 设置新值的 key,一般为字符串。如果设置的name 不是 HTTP header 规范里面规定的 name,那么将会抛出错误"TypeError"。
    value
    -
     value 就是 name 对应的值。
    +
    value 就是 name 对应的值。

    返回

    @@ -30,11 +30,11 @@

    返回

    Example

    -

    创建一个新的 Headers 对象:

    +

    创建一个新的 Headers 对象:

    var myHeaders = new Headers(); // Currently empty
    -

    你可以用append()方法给Headers 对象增添一个新的键值对,然后用set()方法去改变这个键值对:

    +

    你可以用append()方法给Headers 对象增添一个新的键值对,然后用set()方法去改变这个键值对:

    myHeaders.append('Content-Type', 'image/jpeg');
     myHeaders.set('Content-Type', 'text/html');
    diff --git a/files/zh-cn/web/api/headers/values/index.html b/files/zh-cn/web/api/headers/values/index.html
    index a400467647e577..acb01218dfb96a 100644
    --- a/files/zh-cn/web/api/headers/values/index.html
    +++ b/files/zh-cn/web/api/headers/values/index.html
    @@ -8,7 +8,7 @@
     

    Headers.values()方法返回一个可迭代数值,通过这个数值可以遍历Headers中键值对的value值。返回的value都是ByteString对象。

    -

    注意: 这个方法可以在 Web Workers中使用。

    +

    注意: 这个方法可以在 Web Workers中使用。

    语法

    diff --git a/files/zh-cn/web/api/history/index.html b/files/zh-cn/web/api/history/index.html index 344f1252a59cd2..7f245fc50057ca 100644 --- a/files/zh-cn/web/api/history/index.html +++ b/files/zh-cn/web/api/history/index.html @@ -5,7 +5,7 @@ ---
    {{ APIRef("HTML DOM") }}
    -

    History 接口允许操作浏览器的曾经在标签页或者框架里访问的会话历史记录。

    +

    History 接口允许操作浏览器的曾经在标签页或者框架里访问的会话历史记录。

    属性

    @@ -37,7 +37,7 @@

    方法

    通过当前页面的相对位置从浏览器历史记录 ( 会话记录 ) 加载页面。比如:参数为-1 的时候为上一页,参数为 1 的时候为下一页。当整数参数超出界限时 ( 译者注:原文为 When integerDelta is out of bounds ),例如:如果当前页为第一页,前面已经没有页面了,我传参的值为-1,那么这个方法没有任何效果也不会报错。调用没有参数的 go() 方法或者参数值为 0 时,重新载入当前页面。( 这点与支持字符串作为 url 参数的 IE 有点不同)。
    {{domxref("History.pushState()")}}
    按指定的名称和 URL(如果提供该参数)将数据 push 进会话历史栈,数据被 DOM 进行不透明处理;你可以指定任何可以被序列化的 javascript 对象。注意到 Firefox 现在忽略了这个 title 参数,更多的信息,请看manipulating the browser history。 -
    Note: 在 Gecko 2.0 {{ geckoRelease("2.0") }} 到 Gecko 5.0 {{ geckoRelease("5.0") }}中, 被传递的对象使用 JSON 进行序列化。从 Gecko 6.0 {{ geckoRelease("6.0") }}开始,使用结构化克隆算法进行序列化。这样,就可以让更多类型的对象被安全地传输。
    +
    Note: 在 Gecko 2.0 {{ geckoRelease("2.0") }} 到 Gecko 5.0 {{ geckoRelease("5.0") }}中, 被传递的对象使用 JSON 进行序列化。从 Gecko 6.0 {{ geckoRelease("6.0") }}开始,使用结构化克隆算法进行序列化。这样,就可以让更多类型的对象被安全地传输。
    {{domxref("History.replaceState()")}}
    按指定的数据,名称和 URL(如果提供该参数),更新历史栈上最新的入口。这个数据被 DOM 进行了不透明处理。你可以指定任何可以被序列化的 javascript 对象。注意到 Firefox 现在忽略了这个 title 参数,更多的信息,请看manipulating the browser history。 diff --git a/files/zh-cn/web/api/history/length/index.html b/files/zh-cn/web/api/history/length/index.html index 7da7422c5ec5b2..db3a0df9657df5 100644 --- a/files/zh-cn/web/api/history/length/index.html +++ b/files/zh-cn/web/api/history/length/index.html @@ -7,11 +7,11 @@

    History.length 是一个只读属性,返回当前 session 中的 history 个数,包含当前页面在内。举个例子,对于新开一个 tab 加载的页面当前属性返回值 1。

    -

     

    +

    语法

    -

     

    +

    length = history.length;
     
    diff --git a/files/zh-cn/web/api/history/pushstate/index.html b/files/zh-cn/web/api/history/pushstate/index.html index f9314285b028d4..de8c497b9fd665 100644 --- a/files/zh-cn/web/api/history/pushstate/index.html +++ b/files/zh-cn/web/api/history/pushstate/index.html @@ -25,28 +25,28 @@

    参数

    state
    状态对象是一个 JavaScript 对象,它与pushState()创建的新历史记录条目相关联。 每当用户导航到新状态时,都会触发{{event("popstate")}}事件,并且该事件的状态属性包含历史记录条目的状态对象的副本。
    -
    状态对象可以是任何可以序列化的对象。 因为 Firefox 将状态对象保存到用户的磁盘上,以便用户重新启动浏览器后可以将其还原,所以我们对状态对象的序列化表示施加了 2MiB 的大小限制。 如果将序列化表示形式大于此状态的状态对象传递给pushState(),则该方法将引发异常。 如果您需要更多空间,建议您使用 {{domxref("Window.sessionStorage", "sessionStorage")}}或者{{domxref("Window.localStorage", "localStorage")}}。
    +
    状态对象可以是任何可以序列化的对象。 因为 Firefox 将状态对象保存到用户的磁盘上,以便用户重新启动浏览器后可以将其还原,所以我们对状态对象的序列化表示施加了 2MiB 的大小限制。 如果将序列化表示形式大于此状态的状态对象传递给pushState(),则该方法将引发异常。 如果您需要更多空间,建议您使用 {{domxref("Window.sessionStorage", "sessionStorage")}}或者{{domxref("Window.localStorage", "localStorage")}}。
    title
    当前大多数浏览器都忽略此参数,尽管将来可能会使用它。 在此处传递空字符串应该可以防止将来对方法的更改。 或者,您可以为要移动的状态传递简短的标题。
    url {{optional_inline}}
    -
    新历史记录条目的 URL 由此参数指定。 请注意,浏览器不会在调用pushState() 之后尝试加载此 URL,但可能会稍后尝试加载 URL,例如在用户重新启动浏览器之后。 新的 URL 不必是绝对的。 如果是相对的,则相对于当前 URL 进行解析。 新网址必须与当前网址相同 {{glossary("origin")}}; 否则,pushState()将引发异常。 如果未指定此参数,则将其设置为文档的当前 URL。
    +
    新历史记录条目的 URL 由此参数指定。 请注意,浏览器不会在调用pushState() 之后尝试加载此 URL,但可能会稍后尝试加载 URL,例如在用户重新启动浏览器之后。 新的 URL 不必是绝对的。 如果是相对的,则相对于当前 URL 进行解析。 新网址必须与当前网址相同 {{glossary("origin")}}; 否则,pushState()将引发异常。 如果未指定此参数,则将其设置为文档的当前 URL。

    描述

    -

    从某种程度来说,调用 pushState() 和 window.location = "#foo"基本上一样,他们都会在当前的 document 中创建和激活一个新的历史记录。但是 pushState() 有以下优势:

    +

    从某种程度来说,调用 pushState()window.location = "#foo"基本上一样,他们都会在当前的 document 中创建和激活一个新的历史记录。但是 pushState() 有以下优势:

      -
    • 新的 URL 可以是任何和当前 URL 同源的 URL。但是设置 {{domxref("window.location")}} 只会在你只设置锚的时候才会使当前的 URL。
    • -
    • 非强制修改 URL。相反,设置 window.location = "#foo"; 仅仅会在锚的值不是 #foo 情况下创建一条新的历史记录。
    • +
    • 新的 URL 可以是任何和当前 URL 同源的 URL。但是设置 {{domxref("window.location")}} 只会在你只设置锚的时候才会使当前的 URL。
    • +
    • 非强制修改 URL。相反,设置 window.location = "#foo"; 仅仅会在锚的值不是 #foo 情况下创建一条新的历史记录。
    • 可以在新的历史记录中关联任何数据。window.location = "#foo"形式的操作,你只可以将所需数据写入锚的字符串中。
    -

    注意: pushState() 不会造成 {{event("hashchange")}} 事件调用,即使新的 URL 和之前的 URL 只是锚的数据不同。

    +

    注意: pushState() 不会造成 {{event("hashchange")}} 事件调用,即使新的 URL 和之前的 URL 只是锚的数据不同。

    示例

    -

    以下代码通过设置statetitleurl创建一条新的历史记录。

    +

    以下代码通过设置state, titleurl创建一条新的历史记录。

    JavaScript

    diff --git a/files/zh-cn/web/api/history/replacestate/index.html b/files/zh-cn/web/api/history/replacestate/index.html index 8ad9629f46cf7a..af485e15deba80 100644 --- a/files/zh-cn/web/api/history/replacestate/index.html +++ b/files/zh-cn/web/api/history/replacestate/index.html @@ -5,7 +5,7 @@ ---

    {{APIRef("DOM")}}

    -

    replaceState()方法使用state objects, title,和 URL 作为参数, 修改当前历史记录实体,如果你想更新当前的 state 对象或者当前历史实体的 URL 来响应用户的的动作的话这个方法将会非常有用。

    +

    replaceState()方法使用state objects, title,和 URL 作为参数, 修改当前历史记录实体,如果你想更新当前的 state 对象或者当前历史实体的 URL 来响应用户的的动作的话这个方法将会非常有用。

    语法

    @@ -24,18 +24,18 @@

    参数

    例子

    -

    假设 http://mozilla.org/foo.html 执行下面的 JavaScript 代码:

    +

    假设 http://mozilla.org/foo.html 执行下面的 JavaScript 代码:

    var stateObj = { foo: "bar" };
     history.pushState(stateObj, "", "bar.html");
    -

    上面这两行的解释可以在 "Example of pushState() method"这个章节找到。然后假设 http://mozilla.org/bar.html  执行下面的 JavaScript 代码:

    +

    上面这两行的解释可以在 "Example of pushState() method"这个章节找到。然后假设 http://mozilla.org/bar.html 执行下面的 JavaScript 代码:

    history.replaceState(stateObj, "", "bar2.html");

    这会让 URL 栏显示 http://mozilla.org/bar2.html,但是不会加载 bar2.html 页面,甚至不会检查 bar2.html 是否存在

    -

    假设用户跳转到 http://www.microsoft.com,然后点击返回按钮。这时,URL 栏将会显示 http://mozilla.org/bar2.html 页面。如果用户此时点击返回按钮,URL 栏将会显示 http://mozilla.org/foo.html 页面,最终绕过了 bar.html 页面。

    +

    假设用户跳转到 http://www.microsoft.com,然后点击返回按钮。这时,URL 栏将会显示 http://mozilla.org/bar2.html 页面。如果用户此时点击返回按钮,URL 栏将会显示 http://mozilla.org/foo.html 页面,最终绕过了 bar.html 页面。

    规范

    diff --git a/files/zh-cn/web/api/history/state/index.html b/files/zh-cn/web/api/history/state/index.html index 535d1fbe27acc1..c7bd6f4dd3d615 100644 --- a/files/zh-cn/web/api/history/state/index.html +++ b/files/zh-cn/web/api/history/state/index.html @@ -3,19 +3,19 @@ slug: Web/API/History/state translation_of: Web/API/History/state --- -

    返回在 history 栈顶的 任意 值的拷贝。 通过这种方式可以查看 state 值,不必等待 popstate事件发生后再查看。

    +

    返回在 history 栈顶的 任意 值的拷贝。 通过这种方式可以查看 state 值,不必等待 popstate事件发生后再查看。

    语法

    let currentState = history.state;
    -

    如果不进行下面两种类型的调用,state 的值将会是 null 

    +

    如果不进行下面两种类型的调用,state 的值将会是 null

    {{domxref("History.pushState","pushState()")}} or {{domxref("History.replaceState","replaceState()")}}.

    例子

    -

    下面 log 例句输出 history.state 的值,首先是在没有执行 {{domxref("History.pushState","pushState()")}} 语句进而将值 push 到 history 之前的 log。下面一行 log 语句再次输出 state 值,此时 history.state 已经有值。可以在脚本文件中执行下面语句,或者在控制台直接执行。

    +

    下面 log 例句输出 history.state 的值,首先是在没有执行 {{domxref("History.pushState","pushState()")}} 语句进而将值 push 到 history 之前的 log。下面一行 log 语句再次输出 state 值,此时 history.state 已经有值。可以在脚本文件中执行下面语句,或者在控制台直接执行。

    // 值为 null 因为我们还没有修改 history 栈
     console.log(`History.state before pushState: ${history.state}`);
    diff --git a/files/zh-cn/web/api/history_api/example/index.html b/files/zh-cn/web/api/history_api/example/index.html
    index 4b298e9ea091f5..4a9b1843fe5b15 100644
    --- a/files/zh-cn/web/api/history_api/example/index.html
    +++ b/files/zh-cn/web/api/history_api/example/index.html
    @@ -3,7 +3,7 @@
     slug: Web/API/History_API/Example
     translation_of: Web/API/History_API/Example
     ---
    -

    这是一个仅由三个页面组成的 AJAX 网站示例 (first_page.php, second_page.php and third_page.php). 要查看其如何工作的,请创建以下文件  (或 git clone https://github.com/giabao/mdn-ajax-nav-example.git ):

    +

    这是一个仅由三个页面组成的 AJAX 网站示例 (first_page.php, second_page.php and third_page.php). 要查看其如何工作的,请创建以下文件 (或 git clone https://github.com/giabao/mdn-ajax-nav-example.git ):

    备注: 为了在该机制中很好地整合{{HTMLElement("form")}}元素 , 请看一下这段 Submitting forms and uploading files

    @@ -13,20 +13,20 @@
    <?php
    -    $page_title = "First page";
    +    $page_title = "First page";
     
    -    $as_json = false;
    -    if (isset($_GET["view_as"]) && $_GET["view_as"] == "json") {
    -        $as_json = true;
    -        ob_start();
    -    } else {
    +    $as_json = false;
    +    if (isset($_GET["view_as"]) && $_GET["view_as"] == "json") {
    +        $as_json = true;
    +        ob_start();
    +    } else {
     ?>
     <!doctype html>
     <html>
     <head>
     <?php
    -        include "include/header.php";
    -        echo "<title>" . $page_title . "</title>";
    +        include "include/header.php";
    +        echo "<title>" . $page_title . "</title>";
     ?>
     </head>
     
    @@ -39,21 +39,21 @@
     <div id="ajax-content">
     <?php } ?>
     
    -    <p>This is the content of <strong>first_page.php</strong>.</p>
    +    <p>This is the content of <strong>first_page.php</strong>.</p>
     
     <?php
    -    if ($as_json) {
    -        echo json_encode(array("page" => $page_title, "content" => ob_get_clean()));
    -    } else {
    +    if ($as_json) {
    +        echo json_encode(array("page" => $page_title, "content" => ob_get_clean()));
    +    } else {
     ?>
     </div>
     
     <p>This paragraph is shown only when the navigation starts from <strong>first_page.php</strong>.</p>
     
     <?php
    -        include "include/after_content.php";
    -        echo "</body>\n</html>";
    -    }
    +        include "include/after_content.php";
    +        echo "</body>\n</html>";
    +    }
     ?>
     
    @@ -62,20 +62,20 @@
    <?php
    -    $page_title = "Second page";
    +    $page_title = "Second page";
     
    -    $as_json = false;
    -    if (isset($_GET["view_as"]) && $_GET["view_as"] == "json") {
    -        $as_json = true;
    -        ob_start();
    -    } else {
    +    $as_json = false;
    +    if (isset($_GET["view_as"]) && $_GET["view_as"] == "json") {
    +        $as_json = true;
    +        ob_start();
    +    } else {
     ?>
     <!doctype html>
     <html>
     <head>
     <?php
    -        include "include/header.php";
    -        echo "<title>" . $page_title . "</title>";
    +        include "include/header.php";
    +        echo "<title>" . $page_title . "</title>";
     ?>
     </head>
     
    @@ -88,21 +88,21 @@
     <div id="ajax-content">
     <?php } ?>
     
    -    <p>This is the content of <strong>second_page.php</strong>.</p>
    +    <p>This is the content of <strong>second_page.php</strong>.</p>
     
     <?php
    -    if ($as_json) {
    -        echo json_encode(array("page" => $page_title, "content" => ob_get_clean()));
    -    } else {
    +    if ($as_json) {
    +        echo json_encode(array("page" => $page_title, "content" => ob_get_clean()));
    +    } else {
     ?>
     </div>
     
     <p>This paragraph is shown only when the navigation starts from <strong>second_page.php</strong>.</p>
     
     <?php
    -        include "include/after_content.php";
    -        echo "</body>\n</html>";
    -    }
    +        include "include/after_content.php";
    +        echo "</body>\n</html>";
    +    }
     ?>
     
    @@ -111,19 +111,19 @@
    <?php
    -    $page_title = "Third page";
    -    $page_content = "<p>This is the content of <strong>third_page.php</strong>. This content is stored into a php variable.</p>";
    +    $page_title = "Third page";
    +    $page_content = "<p>This is the content of <strong>third_page.php</strong>. This content is stored into a php variable.</p>";
     
    -    if (isset($_GET["view_as"]) && $_GET["view_as"] == "json") {
    -        echo json_encode(array("page" => $page_title, "content" => $page_content));
    -    } else {
    +    if (isset($_GET["view_as"]) && $_GET["view_as"] == "json") {
    +        echo json_encode(array("page" => $page_title, "content" => $page_content));
    +    } else {
     ?>
     <!doctype html>
     <html>
     <head>
     <?php
    -        include "include/header.php";
    -        echo "<title>" . $page_title . "</title>";
    +        include "include/header.php";
    +        echo "<title>" . $page_title . "</title>";
     ?>
     </head>
     
    @@ -140,9 +140,9 @@
     <p>This paragraph is shown only when the navigation starts from <strong>third_page.php</strong>.</p>
     
     <?php
    -        include "include/after_content.php";
    -        echo "</body>\n</html>";
    -    }
    +        include "include/after_content.php";
    +        echo "</body>\n</html>";
    +    }
     ?>
     
    @@ -150,22 +150,22 @@

    css/style.css:

    #ajax-loader {
    -    position: fixed;
    -    display: table;
    -    top: 0;
    -    left: 0;
    -    width: 100%;
    -    height: 100%;
    +    position: fixed;
    +    display: table;
    +    top: 0;
    +    left: 0;
    +    width: 100%;
    +    height: 100%;
     }
     
     #ajax-loader > div {
    -    display: table-cell;
    -    width: 100%;
    -    height: 100%;
    -    vertical-align: middle;
    -    text-align: center;
    -    background-color: #000000;
    -    opacity: 0.65;
    +    display: table-cell;
    +    width: 100%;
    +    height: 100%;
    +    vertical-align: middle;
    +    text-align: center;
    +    background-color: #000000;
    +    opacity: 0.65;
     }
     
    @@ -199,206 +199,206 @@ const ajaxRequest = new (function () { -    function closeReq () { -        oLoadingBox.parentNode && document.body.removeChild(oLoadingBox); -        bIsLoading = false; -    } - -    function abortReq () { -        if (!bIsLoading) { return; } -        oReq.abort(); -        closeReq(); -    } - -    function ajaxError () { -        alert("Unknown error."); -    } - -    function ajaxLoad () { -        var vMsg, nStatus = this.status; -        switch (nStatus) { -            case 200: -                vMsg = JSON.parse(this.responseText); -                document.title = oPageInfo.title = vMsg.page; -                document.getElementById(sTargetId).innerHTML = vMsg.content; -                if (bUpdateURL) { -                    history.pushState(oPageInfo, oPageInfo.title, oPageInfo.url); -                    bUpdateURL = false; -                } -                break; -            default: -                vMsg = nStatus + ": " + (oHTTPStatus[nStatus] || "Unknown"); -                switch (Math.floor(nStatus / 100)) { -                    /* -                    case 1: -                        // Informational 1xx -                        console.log("Information code " + vMsg); -                        break; -                    case 2: -                        // Successful 2xx -                        console.log("Successful code " + vMsg); -                        break; -                    case 3: -                        // Redirection 3xx -                        console.log("Redirection code " + vMsg); -                        break; -                    */ -                    case 4: -                        /* Client Error 4xx */ -                        alert("Client Error #" + vMsg); -                        break; -                    case 5: -                        /* Server Error 5xx */ -                        alert("Server Error #" + vMsg); -                        break; -                    default: -                        /* Unknown status */ -                        ajaxError(); -                } -        } -        closeReq(); -    } - -    function filterURL (sURL, sViewMode) { -        return sURL.replace(rSearch, "") + ("?" + sURL.replace(rHost, "&").replace(rView, sViewMode ? "&" + sViewKey + "=" + sViewMode : "").slice(1)).replace(rEndQstMark, ""); -    } - -    function getPage (sPage) { -        if (bIsLoading) { return; } -        oReq = new XMLHttpRequest(); -        bIsLoading = true; -        oReq.onload = ajaxLoad; -        oReq.onerror = ajaxError; -        if (sPage) { oPageInfo.url = filterURL(sPage, null); } -        oReq.open("get", filterURL(oPageInfo.url, "json"), true); -        oReq.send(); -        oLoadingBox.parentNode || document.body.appendChild(oLoadingBox); -    } - -    function requestPage (sURL) { -        if (history.pushState) { -            bUpdateURL = true; -            getPage(sURL); -        } else { -            /* Ajax navigation is not supported */ -            location.assign(sURL); -        } -    } - -    function processLink () { -        if (this.className === sAjaxClass) { -            requestPage(this.href); -            return false; -        } -        return true; -    } - -    function init () { -        oPageInfo.title = document.title; + function closeReq () { + oLoadingBox.parentNode && document.body.removeChild(oLoadingBox); + bIsLoading = false; + } + + function abortReq () { + if (!bIsLoading) { return; } + oReq.abort(); + closeReq(); + } + + function ajaxError () { + alert("Unknown error."); + } + + function ajaxLoad () { + var vMsg, nStatus = this.status; + switch (nStatus) { + case 200: + vMsg = JSON.parse(this.responseText); + document.title = oPageInfo.title = vMsg.page; + document.getElementById(sTargetId).innerHTML = vMsg.content; + if (bUpdateURL) { + history.pushState(oPageInfo, oPageInfo.title, oPageInfo.url); + bUpdateURL = false; + } + break; + default: + vMsg = nStatus + ": " + (oHTTPStatus[nStatus] || "Unknown"); + switch (Math.floor(nStatus / 100)) { + /* + case 1: + // Informational 1xx + console.log("Information code " + vMsg); + break; + case 2: + // Successful 2xx + console.log("Successful code " + vMsg); + break; + case 3: + // Redirection 3xx + console.log("Redirection code " + vMsg); + break; + */ + case 4: + /* Client Error 4xx */ + alert("Client Error #" + vMsg); + break; + case 5: + /* Server Error 5xx */ + alert("Server Error #" + vMsg); + break; + default: + /* Unknown status */ + ajaxError(); + } + } + closeReq(); + } + + function filterURL (sURL, sViewMode) { + return sURL.replace(rSearch, "") + ("?" + sURL.replace(rHost, "&").replace(rView, sViewMode ? "&" + sViewKey + "=" + sViewMode : "").slice(1)).replace(rEndQstMark, ""); + } + + function getPage (sPage) { + if (bIsLoading) { return; } + oReq = new XMLHttpRequest(); + bIsLoading = true; + oReq.onload = ajaxLoad; + oReq.onerror = ajaxError; + if (sPage) { oPageInfo.url = filterURL(sPage, null); } + oReq.open("get", filterURL(oPageInfo.url, "json"), true); + oReq.send(); + oLoadingBox.parentNode || document.body.appendChild(oLoadingBox); + } + + function requestPage (sURL) { + if (history.pushState) { + bUpdateURL = true; + getPage(sURL); + } else { + /* Ajax navigation is not supported */ + location.assign(sURL); + } + } + + function processLink () { + if (this.className === sAjaxClass) { + requestPage(this.href); + return false; + } + return true; + } + + function init () { + oPageInfo.title = document.title; history.replaceState(oPageInfo, oPageInfo.title, oPageInfo.url); -        for (var oLink, nIdx = 0, nLen = document.links.length; nIdx < nLen; document.links[nIdx++].onclick = processLink); -    } - -    const - -        /* customizable constants */ -        sTargetId = "ajax-content", sViewKey = "view_as", sAjaxClass = "ajax-nav", - -        /* not customizable constants */ -        rSearch = /\?.*$/, rHost = /^[^\?]*\?*&*/, rView = new RegExp("&" + sViewKey + "\\=[^&]*|&*$", "i"), rEndQstMark = /\?$/, -        oLoadingBox = document.createElement("div"), oCover = document.createElement("div"), oLoadingImg = new Image(), -        oPageInfo = { -            title: null, -            url: location.href -        }, oHTTPStatus = /* http://www.iana.org/assignments/http-status-codes/http-status-codes.xml */ { -            100: "Continue", -            101: "Switching Protocols", -            102: "Processing", -            200: "OK", -            201: "Created", -            202: "Accepted", -            203: "Non-Authoritative Information", -            204: "No Content", -            205: "Reset Content", -            206: "Partial Content", -            207: "Multi-Status", -            208: "Already Reported", -            226: "IM Used", -            300: "Multiple Choices", -            301: "Moved Permanently", -            302: "Found", -            303: "See Other", -            304: "Not Modified", -            305: "Use Proxy", -            306: "Reserved", -            307: "Temporary Redirect", -            308: "Permanent Redirect", -            400: "Bad Request", -            401: "Unauthorized", -            402: "Payment Required", -            403: "Forbidden", -            404: "Not Found", -            405: "Method Not Allowed", -            406: "Not Acceptable", -            407: "Proxy Authentication Required", -            408: "Request Timeout", -            409: "Conflict", -            410: "Gone", -            411: "Length Required", -            412: "Precondition Failed", -            413: "Request Entity Too Large", -            414: "Request-URI Too Long", -            415: "Unsupported Media Type", -            416: "Requested Range Not Satisfiable", -            417: "Expectation Failed", -            422: "Unprocessable Entity", -            423: "Locked", -            424: "Failed Dependency", -            425: "Unassigned", -            426: "Upgrade Required", -            427: "Unassigned", -            428: "Precondition Required", -            429: "Too Many Requests", -            430: "Unassigned", -            431: "Request Header Fields Too Large", -            500: "Internal Server Error", -            501: "Not Implemented", -            502: "Bad Gateway", -            503: "Service Unavailable", -            504: "Gateway Timeout", -            505: "HTTP Version Not Supported", -            506: "Variant Also Negotiates (Experimental)", -            507: "Insufficient Storage", -            508: "Loop Detected", -            509: "Unassigned", -            510: "Not Extended", -            511: "Network Authentication Required" -        }; - -    var - -        oReq, bIsLoading = false, bUpdateURL = false; - -    oLoadingBox.id = "ajax-loader"; -    oCover.onclick = abortReq; -    oLoadingImg.src = "data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA=="; -    oCover.appendChild(oLoadingImg); -    oLoadingBox.appendChild(oCover); - -    onpopstate = function (oEvent) { -        bUpdateURL = false; -        oPageInfo.title = oEvent.state.title; -        oPageInfo.url = oEvent.state.url; -        getPage(); -    }; - -    window.addEventListener ? addEventListener("load", init, false) : window.attachEvent ? attachEvent("onload", init) : (onload = init); - -    // Public methods - -    this.open = requestPage; -    this.stop = abortReq; -    this.rebuildLinks = init; + for (var oLink, nIdx = 0, nLen = document.links.length; nIdx < nLen; document.links[nIdx++].onclick = processLink); + } + + const + + /* customizable constants */ + sTargetId = "ajax-content", sViewKey = "view_as", sAjaxClass = "ajax-nav", + + /* not customizable constants */ + rSearch = /\?.*$/, rHost = /^[^\?]*\?*&*/, rView = new RegExp("&" + sViewKey + "\\=[^&]*|&*$", "i"), rEndQstMark = /\?$/, + oLoadingBox = document.createElement("div"), oCover = document.createElement("div"), oLoadingImg = new Image(), + oPageInfo = { + title: null, + url: location.href + }, oHTTPStatus = /* http://www.iana.org/assignments/http-status-codes/http-status-codes.xml */ { + 100: "Continue", + 101: "Switching Protocols", + 102: "Processing", + 200: "OK", + 201: "Created", + 202: "Accepted", + 203: "Non-Authoritative Information", + 204: "No Content", + 205: "Reset Content", + 206: "Partial Content", + 207: "Multi-Status", + 208: "Already Reported", + 226: "IM Used", + 300: "Multiple Choices", + 301: "Moved Permanently", + 302: "Found", + 303: "See Other", + 304: "Not Modified", + 305: "Use Proxy", + 306: "Reserved", + 307: "Temporary Redirect", + 308: "Permanent Redirect", + 400: "Bad Request", + 401: "Unauthorized", + 402: "Payment Required", + 403: "Forbidden", + 404: "Not Found", + 405: "Method Not Allowed", + 406: "Not Acceptable", + 407: "Proxy Authentication Required", + 408: "Request Timeout", + 409: "Conflict", + 410: "Gone", + 411: "Length Required", + 412: "Precondition Failed", + 413: "Request Entity Too Large", + 414: "Request-URI Too Long", + 415: "Unsupported Media Type", + 416: "Requested Range Not Satisfiable", + 417: "Expectation Failed", + 422: "Unprocessable Entity", + 423: "Locked", + 424: "Failed Dependency", + 425: "Unassigned", + 426: "Upgrade Required", + 427: "Unassigned", + 428: "Precondition Required", + 429: "Too Many Requests", + 430: "Unassigned", + 431: "Request Header Fields Too Large", + 500: "Internal Server Error", + 501: "Not Implemented", + 502: "Bad Gateway", + 503: "Service Unavailable", + 504: "Gateway Timeout", + 505: "HTTP Version Not Supported", + 506: "Variant Also Negotiates (Experimental)", + 507: "Insufficient Storage", + 508: "Loop Detected", + 509: "Unassigned", + 510: "Not Extended", + 511: "Network Authentication Required" + }; + + var + + oReq, bIsLoading = false, bUpdateURL = false; + + oLoadingBox.id = "ajax-loader"; + oCover.onclick = abortReq; + oLoadingImg.src = "data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA=="; + oCover.appendChild(oLoadingImg); + oLoadingBox.appendChild(oCover); + + onpopstate = function (oEvent) { + bUpdateURL = false; + oPageInfo.title = oEvent.state.title; + oPageInfo.url = oEvent.state.url; + getPage(); + }; + + window.addEventListener ? addEventListener("load", init, false) : window.attachEvent ? attachEvent("onload", init) : (onload = init); + + // Public methods + + this.open = requestPage; + this.stop = abortReq; + this.rebuildLinks = init; })();
    diff --git a/files/zh-cn/web/api/history_api/index.html b/files/zh-cn/web/api/history_api/index.html index 9d96f93c2c6631..ececb5e9e7d6bf 100644 --- a/files/zh-cn/web/api/history_api/index.html +++ b/files/zh-cn/web/api/history_api/index.html @@ -9,11 +9,11 @@ ---
    {{DefaultAPISidebar("History API")}}
    -

    DOM {{ domxref("window") }} 对象通过 {{ domxref("window.history", "history") }} 对象提供了对浏览器的会话历史的访问 (不要与 WebExtensions history搞混了)。它暴露了很多有用的方法和属性,允许你在用户浏览历史中向前和向后跳转,同时——从 HTML5 开始——提供了对 history 栈中内容的操作。

    +

    DOM {{ domxref("window") }} 对象通过 {{ domxref("window.history", "history") }} 对象提供了对浏览器的会话历史的访问 (不要与 WebExtensions history搞混了)。它暴露了很多有用的方法和属性,允许你在用户浏览历史中向前和向后跳转,同时——从 HTML5 开始——提供了对 history 栈中内容的操作。

    意义及使用

    -

    使用 {{DOMxRef("History.back","back()")}},  {{DOMxRef("History.forward","forward()")}}和  {{DOMxRef("History.go","go()")}} 方法来完成在用户历史记录中向后和向前的跳转。

    +

    使用 {{DOMxRef("History.back","back()")}}, {{DOMxRef("History.forward","forward()")}}和 {{DOMxRef("History.go","go()")}} 方法来完成在用户历史记录中向后和向前的跳转。

    向前和向后跳转

    @@ -29,16 +29,16 @@

    向前和向后跳转

    window.history.forward();
     
    -

    跳转到 history 中指定的一个点

    +

    跳转到 history 中指定的一个点

    -

    你可以用 go() 方法载入到会话历史中的某一特定页面, 通过与当前页面相对位置来标志 (当前页面的相对位置标志为 0).

    +

    你可以用 go() 方法载入到会话历史中的某一特定页面, 通过与当前页面相对位置来标志 (当前页面的相对位置标志为 0).

    -

    向后移动一个页面 (等同于调用 back()):

    +

    向后移动一个页面 (等同于调用 back()):

    window.history.go(-1);
     
    -

    向前移动一个页面,等同于调用了 forward():

    +

    向前移动一个页面,等同于调用了 forward():

    window.history.go(1);
     
    @@ -56,122 +56,122 @@

    跳转到 history 中指定的

    添加和修改历史记录中的条目

    -

    HTML5 引入了 history.pushState() 和 history.replaceState() 方法,它们分别可以添加和修改历史记录条目。这些方法通常与{{ domxref("window.onpopstate") }} 配合使用。

    +

    HTML5 引入了 history.pushState()history.replaceState() 方法,它们分别可以添加和修改历史记录条目。这些方法通常与{{ domxref("window.onpopstate") }} 配合使用。

    -

    使用 history.pushState() 可以改变 referrer,它在用户发送 XMLHttpRequest 请求时在 HTTP 头部使用,改变 state 后创建的 XMLHttpRequest 对象的 referrer 都会被改变。因为 referrer 是标识创建  XMLHttpRequest 对象时 this 所代表的 window 对象中 document 的 URL。

    +

    使用 history.pushState() 可以改变 referrer,它在用户发送 XMLHttpRequest 请求时在 HTTP 头部使用,改变 state 后创建的 XMLHttpRequest 对象的 referrer 都会被改变。因为 referrer 是标识创建 XMLHttpRequest 对象时 this 所代表的 window 对象中 document 的 URL。

    pushState() 方法的例子

    -

    假设在 http://mozilla.org/foo.html 页面的 console 中执行了以下 JavaScript 代码:

    +

    假设在 http://mozilla.org/foo.html 页面的 console 中执行了以下 JavaScript 代码:

    window.onpopstate = function(e) {
    -   alert(2);
    +   alert(2);
     }
     
     let stateObj = {
    -    foo: "bar",
    +    foo: "bar",
     };
     
     history.pushState(stateObj, "page 2", "bar.html");
     
    -

    这将使浏览器地址栏显示为 http://mozilla.org/bar.html,但并不会导致浏览器加载 bar.html ,甚至不会检查bar.html 是否存在。

    +

    这将使浏览器地址栏显示为 http://mozilla.org/bar.html,但并不会导致浏览器加载 bar.html ,甚至不会检查bar.html 是否存在。

    假如现在用户在 bar.html 点击了返回按钮,将会执行 alert(2)。

    -

    假设现在用户在 bar.html 又访问了 http://google.com,然后点击了返回按钮。此时,地址栏将显示 http://mozilla.org/bar.html,history.state 中包含了 stateObj 的一份拷贝。页面此时展现为bar.html。且因为页面被重新加载了,所以popstate事件将不会被触发,也不会执行 alert(2)。

    +

    假设现在用户在 bar.html 又访问了 http://google.com,然后点击了返回按钮。此时,地址栏将显示 http://mozilla.org/bar.html,history.state 中包含了 stateObj 的一份拷贝。页面此时展现为bar.html。且因为页面被重新加载了,所以popstate事件将不会被触发,也不会执行 alert(2)。

    -

    如果我们再次点击返回按钮,页面 URL 会变为 http://mozilla.org/foo.html,文档对象 document 会触发另外一个 popstate 事件 (如果有 bar.html,且 bar.html 注册了 onpopstate 事件,将会触发此事件,因此也不会执行 foo 页面注册的 onpopstate 事件,也就是不会执行 alert(2)),这一次的事件对象 state object 为 null。 这里也一样,返回并不改变文档的内容,尽管文档在接收 popstate 事件时可能会改变自己的内容,其内容仍与之前的展现一致。

    +

    如果我们再次点击返回按钮,页面 URL 会变为 http://mozilla.org/foo.html,文档对象 document 会触发另外一个 popstate 事件 (如果有 bar.html,且 bar.html 注册了 onpopstate 事件,将会触发此事件,因此也不会执行 foo 页面注册的 onpopstate 事件,也就是不会执行 alert(2)),这一次的事件对象 state object 为 null。 这里也一样,返回并不改变文档的内容,尽管文档在接收 popstate 事件时可能会改变自己的内容,其内容仍与之前的展现一致。

    如果我们再次点击返回按钮,页面 URL 变为其他页面的 url,依然不会执行 alert(2)。因为在返回到 foo 页面的时候并没有 pushState。

    pushState() 方法

    -

    pushState() 需要三个参数:一个状态对象,一个标题 (目前被忽略), 和 (可选的) 一个 URL. 让我们来解释下这三个参数详细内容:

    +

    pushState() 需要三个参数:一个状态对象,一个标题 (目前被忽略), 和 (可选的) 一个 URL. 让我们来解释下这三个参数详细内容:

    • 状态对象 — 状态对象 state 是一个 JavaScript 对象,通过 pushState () 创建新的历史记录条目。无论什么时候用户导航到新的状态,popstate 事件就会被触发,且该事件的 state 属性包含该历史记录条目状态对象的副本。

      -

              状态对象可以是能被序列化的任何东西。原因在于 Firefox 将状态对象保存在用户的磁盘上,以便在用户重启浏览器时使用,我们规定了状态对象在序列化表示后有 640k 的大小限制。如果你给 pushState() 方法传了一个序列化后大于 640k 的状态对象,该方法会抛出异常。如果你需要更大的空间,建议使用 sessionStorage 以及 localStorage.

      +

      状态对象可以是能被序列化的任何东西。原因在于 Firefox 将状态对象保存在用户的磁盘上,以便在用户重启浏览器时使用,我们规定了状态对象在序列化表示后有 640k 的大小限制。如果你给 pushState() 方法传了一个序列化后大于 640k 的状态对象,该方法会抛出异常。如果你需要更大的空间,建议使用 sessionStorage 以及 localStorage.

    • -

      标题 — Firefox 目前忽略这个参数,但未来可能会用到。在此处传一个空字符串应该可以安全的防范未来这个方法的更改。或者,你可以为跳转的 state 传递一个短标题。

      +

      标题 — Firefox 目前忽略这个参数,但未来可能会用到。在此处传一个空字符串应该可以安全的防范未来这个方法的更改。或者,你可以为跳转的 state 传递一个短标题。

    • -

      URL — 该参数定义了新的历史 URL 记录。注意,调用 pushState() 后浏览器并不会立即加载这个 URL,但可能会在稍后某些情况下加载这个 URL,比如在用户重新打开浏览器时。新 URL 不必须为绝对路径。如果新 URL 是相对路径,那么它将被作为相对于当前 URL 处理。新 URL 必须与当前 URL 同源,否则 pushState() 会抛出一个异常。该参数是可选的,缺省为当前 URL。

      +

      URL — 该参数定义了新的历史 URL 记录。注意,调用 pushState() 后浏览器并不会立即加载这个 URL,但可能会在稍后某些情况下加载这个 URL,比如在用户重新打开浏览器时。新 URL 不必须为绝对路径。如果新 URL 是相对路径,那么它将被作为相对于当前 URL 处理。新 URL 必须与当前 URL 同源,否则 pushState() 会抛出一个异常。该参数是可选的,缺省为当前 URL。

    -
    注意: 从 Gecko 2.0 {{ geckoRelease("2.0") }} 到 Gecko 5.0 {{ geckoRelease("5.0") }},传递的对象是使用 JSON 进行序列化的。 从  Gecko 6.0 {{ geckoRelease("6.0") }}开始,该对象的序列化将使用结构化克隆算法。这将会使更多对象可以被安全的传递。
    +
    注意: 从 Gecko 2.0 {{ geckoRelease("2.0") }} 到 Gecko 5.0 {{ geckoRelease("5.0") }},传递的对象是使用 JSON 进行序列化的。 从 Gecko 6.0 {{ geckoRelease("6.0") }}开始,该对象的序列化将使用结构化克隆算法。这将会使更多对象可以被安全的传递。
    -

            在某种意义上,调用 pushState() 与 设置 window.location = "#foo" 类似,二者都会在当前页面创建并激活新的历史记录。但 pushState() 具有如下几条优点:

    +

    在某种意义上,调用 pushState() 与 设置 window.location = "#foo" 类似,二者都会在当前页面创建并激活新的历史记录。但 pushState() 具有如下几条优点:

      -
    • 新的 URL 可以是与当前 URL 同源的任意 URL 。相反,只有在修改哈希时,设置 window.location 才能是同一个 {{ domxref("document") }}。
    • -
    • 如果你不想改 URL,就不用改。相反,设置 window.location = "#foo";在当前哈希不是 #foo 时, 才能创建新的历史记录项。
    • -
    • 你可以将任意数据和新的历史记录项相关联。而基于哈希的方式,要把所有相关数据编码为短字符串。 
    • -
    • 如果 标题 随后还会被浏览器所用到,那么这个数据是可以被使用的(哈希则不是)。
    • +
    • 新的 URL 可以是与当前 URL 同源的任意 URL 。相反,只有在修改哈希时,设置 window.location 才能是同一个 {{ domxref("document") }}。
    • +
    • 如果你不想改 URL,就不用改。相反,设置 window.location = "#foo";在当前哈希不是 #foo 时, 才能创建新的历史记录项。
    • +
    • 你可以将任意数据和新的历史记录项相关联。而基于哈希的方式,要把所有相关数据编码为短字符串。
    • +
    • 如果 标题 随后还会被浏览器所用到,那么这个数据是可以被使用的(哈希则不是)。
    -

    注意 pushState() 绝对不会触发 hashchange 事件,即使新的 URL 与旧的 URL 仅哈希不同也是如此。

    +

    注意 pushState() 绝对不会触发 hashchange 事件,即使新的 URL 与旧的 URL 仅哈希不同也是如此。

    -

    在 XUL 文档中,它创建指定的 XUL 元素。

    +

    XUL 文档中,它创建指定的 XUL 元素。

    在其它文档中,它创建一个命名空间 URI 为null的元素。

    -

    replaceState() 方法

    +

    replaceState() 方法

    -

    history.replaceState() 的使用与 history.pushState() 非常相似,区别在于  replaceState()  是修改了当前的历史记录项而不是新建一个。 注意这并不会阻止其在全局浏览器历史记录中创建一个新的历史记录项。

    +

    history.replaceState() 的使用与 history.pushState() 非常相似,区别在于 replaceState() 是修改了当前的历史记录项而不是新建一个。 注意这并不会阻止其在全局浏览器历史记录中创建一个新的历史记录项。

    -

    replaceState() 的使用场景在于为了响应用户操作,你想要更新状态对象 state 或者当前历史记录的 URL。

    +

    replaceState() 的使用场景在于为了响应用户操作,你想要更新状态对象 state 或者当前历史记录的 URL。

    -

    备注: 从 Gecko 2.0 {{ geckoRelease("2.0") }} 到 Gecko 5.0 {{ geckoRelease("5.0") }},传递的对象是使用 JSON 进行序列化的。 从  Gecko 6.0 {{ geckoRelease("6.0") }} 开始,该对象的序列化将使用结构化克隆算法。这将会使更多对象可以被安全的传递。

    +

    备注: 从 Gecko 2.0 {{ geckoRelease("2.0") }} 到 Gecko 5.0 {{ geckoRelease("5.0") }},传递的对象是使用 JSON 进行序列化的。 从 Gecko 6.0 {{ geckoRelease("6.0") }} 开始,该对象的序列化将使用结构化克隆算法。这将会使更多对象可以被安全的传递。

    replaceState() 方法示例

    -

    假设 http://mozilla.org/foo.html 执行了如下 JavaScript 代码:

    +

    假设 http://mozilla.org/foo.html 执行了如下 JavaScript 代码:

    let stateObj = {
    -    foo: "bar",
    +    foo: "bar",
     };
     
     history.pushState(stateObj, "page 2", "bar.html");
     
    -

    上文 2 行代码可以在 "pushState() 方法示例" 部分找到。然后,假设 http://mozilla.org/bar.html 执行了如下 JavaScript:

    +

    上文 2 行代码可以在 "pushState() 方法示例" 部分找到。然后,假设 http://mozilla.org/bar.html 执行了如下 JavaScript:

    history.replaceState(stateObj, "page 3", "bar2.html");
     
    -

    这将会导致地址栏显示 http://mozilla.org/bar2.html,,但是浏览器并不会去加载bar2.html 甚至都不需要检查 bar2.html 是否存在。

    +

    这将会导致地址栏显示 http://mozilla.org/bar2.html,,但是浏览器并不会去加载bar2.html 甚至都不需要检查 bar2.html 是否存在。

    假设现在用户重新导向到了 http://www.microsoft.com,然后点击了回退按钮。这里,地址栏会显示 http://mozilla.org/bar2.html。假如用户再次点击回退按钮,地址栏会显示 http://mozilla.org/foo.html,完全跳过了 bar.html。

    popstate 事件

    -

            每当活动的历史记录项发生变化时, popstate 事件都会被传递给 window 对象。如果当前活动的历史记录项是被 pushState 创建的,或者是由 replaceState 改变的,那么 popstate 事件的状态属性 state 会包含一个当前历史记录状态对象的拷贝。

    +

    每当活动的历史记录项发生变化时, popstate 事件都会被传递给 window 对象。如果当前活动的历史记录项是被 pushState 创建的,或者是由 replaceState 改变的,那么 popstate 事件的状态属性 state 会包含一个当前历史记录状态对象的拷贝。

    使用示例请参见 {{ domxref("window.onpopstate") }} 。

    获取当前状态

    -

            页面加载时,或许会有个非 null 的状态对象。这是有可能发生的,举个例子,假如页面(通过pushState() 或 replaceState() 方法)设置了状态对象而后用户重启了浏览器。那么当页面重新加载时,页面会接收一个 onload 事件,但没有 popstate 事件。然而,假如你读取了 history.state 属性,你将会得到如同 popstate 被触发时能得到的状态对象。

    +

    页面加载时,或许会有个非 null 的状态对象。这是有可能发生的,举个例子,假如页面(通过pushState()replaceState() 方法)设置了状态对象而后用户重启了浏览器。那么当页面重新加载时,页面会接收一个 onload 事件,但没有 popstate 事件。然而,假如你读取了 history.state 属性,你将会得到如同 popstate 被触发时能得到的状态对象。

    -

    你可以读取当前历史记录项的状态对象 state,而不必等待popstate 事件, 只需要这样使用history.state 属性: 

    +

    你可以读取当前历史记录项的状态对象 state,而不必等待popstate 事件, 只需要这样使用history.state 属性:

      // 尝试通过 pushState 创建历史条目,然后再刷新页面查看 state 状态对象变化;
    -  window.addEventListener('load',() => {
    +  window.addEventListener('load',() => {
         let currentState = history.state;
    -    console.log('currentState',currentState);
    +    console.log('currentState',currentState);
       })
     

    例子

    -

    完整的 AJAX 网站示例,请参阅: Ajax navigation example.

    +

    完整的 AJAX 网站示例,请参阅: Ajax navigation example.

    规范

    diff --git a/files/zh-cn/web/api/history_api/working_with_the_history_api/index.html b/files/zh-cn/web/api/history_api/working_with_the_history_api/index.html index cc8aa54d378df7..4a9984f4fc4275 100644 --- a/files/zh-cn/web/api/history_api/working_with_the_history_api/index.html +++ b/files/zh-cn/web/api/history_api/working_with_the_history_api/index.html @@ -7,14 +7,14 @@

    添加和修改历史记录

    -

    Using {{DOMxRef("History.pushState","pushState()")}} changes the referrer that gets used in the HTTP header for {{domxref("XMLHttpRequest")}} objects created after you change the state. The referrer will be the URL of the document whose window is this at the time of creation of the {{domxref("XMLHttpRequest")}} object.

    +

    Using {{DOMxRef("History.pushState","pushState()")}} changes the referrer that gets used in the HTTP header for {{domxref("XMLHttpRequest")}} objects created after you change the state. The referrer will be the URL of the document whose window is this at the time of creation of the {{domxref("XMLHttpRequest")}} object.

    pushState() 方法实例

    -

    假设 http://mozilla.org/foo.html 执行下面的 JavaScript:

    +

    假设 http://mozilla.org/foo.html 执行下面的 JavaScript:

    let stateObj = {
    -    foo: "bar",
    +    foo: "bar",
     }
     
     history.pushState(stateObj, "page 2", "bar.html")
    @@ -24,22 +24,22 @@ 

    -

    Note: Calling history.back() normally behaves the same way as clicking the Back button. But there is one important exception:

    +

    Note: Calling history.back() normally behaves the same way as clicking the Back button. But there is one important exception:

    -

    After using history.pushState(), calling history.back() does not raise a popstate event. Clicking the browser's Back button (still) does.

    +

    After using history.pushState(), calling history.back() does not raise a popstate event. Clicking the browser's Back button (still) does.

    -

    The pushState() method

    +

    The pushState() method

    pushState() takes three parameters: a state object; a title (currently ignored); and (optionally), a URL.

    Let's examine each of these three parameters in more detail.

    -
    state object 
    +
    state object
    The state object is a JavaScript object which is associated with the new history entry created by pushState(). Whenever the user navigates to the new state, a popstate event is fired, and the state property of the event contains a copy of the history entry's state object.
    The state object can be anything that can be serialized. Because Firefox saves state objects to the user's disk so they can be restored after the user restarts the browser, we impose a size limit of 640k characters on the serialized representation of a state object. If you pass a state object whose serialized representation is larger than this to pushState(), the method will throw an exception. If you need more space than this, you're encouraged to use sessionStorage and/or localStorage.
    @@ -73,7 +73,7 @@

    The pushState() method

    In other documents, it creates an element with a null namespace URI.

    -

    The replaceState() method

    +

    The replaceState() method

    history.replaceState() operates exactly like history.pushState(), except that replaceState() modifies the current history entry instead of creating a new one. Note that this doesn't prevent the creation of a new entry in the global browser history.

    @@ -89,7 +89,7 @@

    Example of replaceState() method

    history.pushState(stateObj, "page 2", "bar.html")
    -

    The explanation of these two lines above can be found at the above section Example of pushState() method section.

    +

    The explanation of these two lines above can be found at the above section Example of pushState() method section.

    Next, suppose http://mozilla.org/bar.html executes the following JavaScript:

    @@ -98,19 +98,19 @@

    Example of replaceState() method

    This will cause the URL bar to display http://mozilla.org/bar2.html, but won't cause the browser to load bar2.html or even check that bar2.html exists.

    -

    Suppose now that the user navigates to http://www.microsoft.com, then clicks the Back button. At this point, the URL bar will display http://mozilla.org/bar2.html. If the user now clicks Back again, the URL bar will display http://mozilla.org/foo.html, and totally bypass bar.html.

    +

    Suppose now that the user navigates to http://www.microsoft.com, then clicks the Back button. At this point, the URL bar will display http://mozilla.org/bar2.html. If the user now clicks Back again, the URL bar will display http://mozilla.org/foo.html, and totally bypass bar.html.

    The popstate event

    -

    A popstate event is dispatched to the window every time the active history entry changes. If the history entry being activated was created by a call to {{DOMxRef("History.pushState","pushState")}} or affected by a call to {{DOMxRef("History.replaceState","replaceState")}}, the popstate event's state property contains a copy of the history entry's state object.

    +

    A popstate event is dispatched to the window every time the active history entry changes. If the history entry being activated was created by a call to {{DOMxRef("History.pushState","pushState")}} or affected by a call to {{DOMxRef("History.replaceState","replaceState")}}, the popstate event's state property contains a copy of the history entry's state object.

    See {{ domxref("Window.onpopstate") }} for sample usage.

    Reading the current state

    -

    When your page loads, it might have a non-null state object.  This can happen, for example, if the page sets a state object (using {{DOMxRef("History.pushState","pushState()")}} or {{DOMxRef("History.replaceState","replaceState()")}}) and then the user restarts their browser. When the page reloads, the page will receive an onload event, but no popstate event. However, if you read the {{DOMxRef("History.state","history.state")}} property, you'll get back the state object you would have gotten if a popstate had fired.

    +

    When your page loads, it might have a non-null state object. This can happen, for example, if the page sets a state object (using {{DOMxRef("History.pushState","pushState()")}} or {{DOMxRef("History.replaceState","replaceState()")}}) and then the user restarts their browser. When the page reloads, the page will receive an onload event, but no popstate event. However, if you read the {{DOMxRef("History.state","history.state")}} property, you'll get back the state object you would have gotten if a popstate had fired.

    -

    You can read the state of the current history entry without waiting for a popstate event using the {{DOMxRef("History.state","history.state")}} property like this:

    +

    You can read the state of the current history entry without waiting for a popstate event using the {{DOMxRef("History.state","history.state")}} property like this:

    let currentState = history.state
     
    diff --git a/files/zh-cn/web/api/html_dom_api/index.html b/files/zh-cn/web/api/html_dom_api/index.html index e2f7abc2ae67c1..fa31146ed964f2 100644 --- a/files/zh-cn/web/api/html_dom_api/index.html +++ b/files/zh-cn/web/api/html_dom_api/index.html @@ -378,7 +378,7 @@

    JavaScript

    } });
    -

    This code uses the {{domxref("Document")}} interface's {{domxref("Document.getElementById", "getElementById()")}} method to get the DOM object representing the {{HTMLElement("input")}} elements whose IDs are userName and sendButton.  With these, we can access the properties and methods that provide information about and grant control over these elements.

    +

    This code uses the {{domxref("Document")}} interface's {{domxref("Document.getElementById", "getElementById()")}} method to get the DOM object representing the {{HTMLElement("input")}} elements whose IDs are userName and sendButton. With these, we can access the properties and methods that provide information about and grant control over these elements.

    The {{domxref("HTMLInputElement")}} object for the "Send" button's {{domxref("HTMLInputElement.disabled", "disabled")}} property is set to true, which disables the "Send" button so it can't be clicked. In addition, the user name input field is made the active focus by calling the {{domxref("HTMLElement.focus", "focus()")}} method it inherits from {{domxref("HTMLElement")}}.

    @@ -392,15 +392,15 @@

    HTML

    <p>Please provide the information below. Items marked with "*" are required.</p>
     <form action="" method="get">
    -  <p>
    -    <label for="userName" required>Your name:</label>
    -    <input type="text" id="userName"> (*)
    -  </p>
    -  <p>
    -    <label for="email">Email:</label>
    -    <input type="email" id="userEmail">
    -  </p>
    -  <input type="submit" value="Send" id="sendButton">
    +  <p>
    +    <label for="userName" required>Your name:</label>
    +    <input type="text" id="userName"> (*)
    +  </p>
    +  <p>
    +    <label for="email">Email:</label>
    +    <input type="email" id="userEmail">
    +  </p>
    +  <input type="submit" value="Send" id="sendButton">
     </form>
     
    diff --git a/files/zh-cn/web/api/html_dom_api/microtask_guide/in_depth/index.html b/files/zh-cn/web/api/html_dom_api/microtask_guide/in_depth/index.html index b910bb4241867c..706fb1b69b0705 100644 --- a/files/zh-cn/web/api/html_dom_api/microtask_guide/in_depth/index.html +++ b/files/zh-cn/web/api/html_dom_api/microtask_guide/in_depth/index.html @@ -12,23 +12,23 @@ ---

    {{APIRef("HTML DOM")}}{{Draft("This page is very much a work in progress; it contains technical details that may be useful while considering using—and while using—microtasks, but it is not absolutely necessary for most people to know. Additionally, there may be errors here as this draft is just that rough. ~~Sheppy")}}

    -

    当你在调试的时候,或者在决定如何以最佳的方式为任务队列和微任务队列安排调度顺序的时候,如果你了解关于 JavaScript 运行时是如何在背后执行这一切的,那将对你的理解会非常有帮助。这就是本节涵盖的内容。

    +

    当你在调试的时候,或者在决定如何以最佳的方式为任务队列和微任务队列安排调度顺序的时候,如果你了解关于 JavaScript 运行时是如何在背后执行这一切的,那将对你的理解会非常有帮助。这就是本节涵盖的内容。

    介绍

    JavaScript 本质上是一门单线程语言。对于在它被设计出来的那个年代来说,这样的设计是一个很好的选择。那个时候的人们很少有多处理器计算机,并且当时也只是打算用 JavaScript 来编写少量的代码。

    -

    当然,随着时间的流逝,电脑的性能得到了飞速的提升。JavaScript 也变成了众多流行语言中的一员。许多非常受欢迎的应用或多或少都有 JavaScript 的影子。为此,找到一种可以突破传统单线程语言限制的方法变得很有必要。

    +

    当然,随着时间的流逝,电脑的性能得到了飞速的提升。JavaScript 也变成了众多流行语言中的一员。许多非常受欢迎的应用或多或少都有 JavaScript 的影子。为此,找到一种可以突破传统单线程语言限制的方法变得很有必要。

    -

    自从 ({{domxref("window.setTimeout", "setTimeout()")}} 和 {{domxref("window.setInterval", "setInterval()")}}) 加入到 Web API 后,浏览器提供的 JavaScript 环境就已经逐渐开始包含了任务安排、多线程应用开发等强大的特性。了解 JavaScript 运行时是如何安排和运行代码的对了解 queueMicrotask() 会非常有作用。

    +

    自从 ({{domxref("window.setTimeout", "setTimeout()")}} 和 {{domxref("window.setInterval", "setInterval()")}}) 加入到 Web API 后,浏览器提供的 JavaScript 环境就已经逐渐开始包含了任务安排、多线程应用开发等强大的特性。了解 JavaScript 运行时是如何安排和运行代码的对了解 queueMicrotask() 会非常有作用。

    -

    JavaScript 执行上下文

    +

    JavaScript 执行上下文

    -

    注意:对于大多数 JavaScript 开发人员来说,这些细节并不重要。这里提供的信息只用于了解为什么微任务非常有用以及它们是如何工作的。如果你并不关心这些内容,你可以跳过这部分或者在你觉得需要的时候再倒回来查看。

    +

    注意:对于大多数 JavaScript 开发人员来说,这些细节并不重要。这里提供的信息只用于了解为什么微任务非常有用以及它们是如何工作的。如果你并不关心这些内容,你可以跳过这部分或者在你觉得需要的时候再倒回来查看。

    -

    当一段 JavaScript 代码在运行的时候,它实际上是运行在执行上下文中。下面 3 种类型的代码会创建一个新的执行上下文:

    +

    当一段 JavaScript 代码在运行的时候,它实际上是运行在执行上下文中。下面 3 种类型的代码会创建一个新的执行上下文:

    • 全局上下文是为运行代码主体而创建的执行上下文,也就是说它是为那些存在于 JavaScript 函数之外的任何代码而创建的。
    • @@ -36,7 +36,7 @@

      JavaScript 执行上下文

    • 使用 {{jsxref("Global_Objects/eval", "eval()")}} 函数也会创建一个新的执行上下文。
    -

    每一个上下文在本质上都是一种作用域层级。每个代码段开始执行的时候都会创建一个新的上下文来运行它,并且在代码退出的时候销毁掉。看看下面这段 JavaScript 程序:

    +

    每一个上下文在本质上都是一种作用域层级。每个代码段开始执行的时候都会创建一个新的上下文来运行它,并且在代码退出的时候销毁掉。看看下面这段 JavaScript 程序:

    let outputElem = document.getElementById("output");
     
    @@ -73,23 +73,23 @@ 

    JavaScript 执行上下文

    • 程序开始运行时,全局上下文就会被创建好。
        -
      • 当执行到 greetUser("Mike") 的时候会为 greetUser() 函数创建一个它的上下文。这个执行上下文会被推入执行上下文栈中。 +
      • 当执行到 greetUser("Mike") 的时候会为 greetUser() 函数创建一个它的上下文。这个执行上下文会被推入执行上下文栈中。
          -
        • 当 greetUser() 调用 localGreeting()的时候会为该方法创建一个新的上下文。并且在 localGreeting() 退出的时候它的上下文也会从执行栈中弹出并销毁。 程序会从栈中获取下一个上下文并恢复执行, 也就是从 greetUser() 剩下的部分开始执行。
        • -
        • greetUser() 执行完毕并退出,其上下文也从栈中弹出并销毁。
        • +
        • greetUser() 调用 localGreeting()的时候会为该方法创建一个新的上下文。并且在 localGreeting() 退出的时候它的上下文也会从执行栈中弹出并销毁。 程序会从栈中获取下一个上下文并恢复执行, 也就是从 greetUser() 剩下的部分开始执行。
        • +
        • greetUser() 执行完毕并退出,其上下文也从栈中弹出并销毁。
      • -
      • 当 greetUser("Teresa") 开始执行时,程序又会为它创建一个上下文并推入栈顶。 +
      • greetUser("Teresa") 开始执行时,程序又会为它创建一个上下文并推入栈顶。
          -
        • 当 greetUser() 调用 localGreeting()的时候另一个上下文被创建并用于运行该函数。 当 localGreeting() 退出的时候它的上下文也从栈中弹出并销毁。 greetUser() 得到恢复并继续执行剩下的部分。
        • -
        • greetUser() 执行完毕并退出,其上下文也从栈中弹出并销毁。
        • +
        • greetUser() 调用 localGreeting()的时候另一个上下文被创建并用于运行该函数。 当 localGreeting() 退出的时候它的上下文也从栈中弹出并销毁。 greetUser() 得到恢复并继续执行剩下的部分。
        • +
        • greetUser() 执行完毕并退出,其上下文也从栈中弹出并销毁。
      • -
      • 然后执行到 greetUser("Veronica") 又再为它创建一个上下文并推入栈顶。 +
      • 然后执行到 greetUser("Veronica") 又再为它创建一个上下文并推入栈顶。
          -
        • 当 greetUser() 调用 localGreeting()的时候,另一个上下文被创建用于执行该函数。当 localGreeting()执行完毕,它的上下文也从栈中弹出并销毁。
        • -
        • greetUser() 执行完毕退出,其上下文也从栈中弹出并销毁。
        • +
        • greetUser() 调用 localGreeting()的时候,另一个上下文被创建用于执行该函数。当 localGreeting()执行完毕,它的上下文也从栈中弹出并销毁。
        • +
        • greetUser() 执行完毕退出,其上下文也从栈中弹出并销毁。
      @@ -99,11 +99,11 @@

      JavaScript 执行上下文

      以这种方式来使用执行上下文,使得每个程序和函数都能够拥有自己的变量和其他对象。每个上下文还能够额外的跟踪程序中下一行需要执行的代码以及一些对上下文非常重要的信息。以这种方式来使用上下文和上下文栈,使得我们可以对程序运行的一些基础部分进行管理,包括局部和全局变量、函数的调用与返回等。

      -

      关于递归函数——即多次调用自身的函数,需要特别注意:每次递归调用自身都会创建一个新的上下文。这使得 JavaScript 运行时能够追踪递归的层级以及从递归中得到的返回值,但这也意味着每次递归都会消耗内存来创建新的上下文。

      +

      关于递归函数——即多次调用自身的函数,需要特别注意:每次递归调用自身都会创建一个新的上下文。这使得 JavaScript 运行时能够追踪递归的层级以及从递归中得到的返回值,但这也意味着每次递归都会消耗内存来创建新的上下文。

      JavaScript 运行时

      -

      在执行 JavaScript 代码的时候,JavaScript 运行时实际上维护了一组用于执行 JavaScript 代码的代理。每个代理由一组执行上下文的集合、执行上下文栈、主线程、一组可能创建用于执行 worker 的额外的线程集合、一个任务队列以及一个微任务队列构成。除了主线程(某些浏览器在多个代理之间共享的主线程)之外,其它组成部分对该代理都是唯一的。

      +

      在执行 JavaScript 代码的时候,JavaScript 运行时实际上维护了一组用于执行 JavaScript 代码的代理。每个代理由一组执行上下文的集合、执行上下文栈、主线程、一组可能创建用于执行 worker 的额外的线程集合、一个任务队列以及一个微任务队列构成。除了主线程(某些浏览器在多个代理之间共享的主线程)之外,其它组成部分对该代理都是唯一的。

      现在我们来更加详细的了解一下运行时是如何工作的。

      @@ -112,24 +112,24 @@

      JavaScript 运行时

      事件循环(Event loops)

      -

      每个代理都是由事件循环驱动的,事件循环负责收集用事件(包括用户事件以及其他非用户事件等)、对任务进行排队以便在合适的时候执行回调。然后它执行所有处于等待中的 JavaScript 任务(宏任务),然后是微任务,然后在开始下一次循环之前执行一些必要的渲染和绘制操作。

      +

      每个代理都是由事件循环驱动的,事件循环负责收集用事件(包括用户事件以及其他非用户事件等)、对任务进行排队以便在合适的时候执行回调。然后它执行所有处于等待中的 JavaScript 任务(宏任务),然后是微任务,然后在开始下一次循环之前执行一些必要的渲染和绘制操作。

      -

      网页或者 app 的代码和浏览器本身的用户界面程序运行在相同的 {{Glossary("线程")}}中, 共享相同的 事件循环。 该线程就是 {{Glossary("main thread", "主线程")}},它除了运行网页本身的代码之外,还负责收集和派发用户和其它事件,以及渲染和绘制网页内容等。

      +

      网页或者 app 的代码和浏览器本身的用户界面程序运行在相同的 {{Glossary("线程")}}中, 共享相同的 事件循环。 该线程就是 {{Glossary("main thread", "主线程")}},它除了运行网页本身的代码之外,还负责收集和派发用户和其它事件,以及渲染和绘制网页内容等。

      然后,事件循环会驱动发生在浏览器中与用户交互有关的一切,但在这里,对我们来说更重要的是需要了解它是如何负责调度和执行在其线程中执行的每段代码的。

      有如下三种事件循环:

      -
      Window 事件循环
      -
      window 事件循环驱动所有同源的窗口 (though there are further limits to this as described elsewhere in this article XXXX ????).
      -
      Worker 事件循环
      -
      worker 事件循环顾名思义就是驱动 worker 的事件循环。这包括了所有种类的 worker:最基本的 web worker 以及 shared worker 和 service worker。 Worker 被放在一个或多个独立于 “主代码” 的代理中。浏览器可能会用单个或多个事件循环来处理给定类型的所有 worker。
      -
      Worklet 事件循环
      -
      worklet 事件循环用于驱动运行 worklet 的代理。这包含了 {{domxref("Worklet")}}、{{domxref("AudioWorklet")}} 以及 {{domxref("PaintWorklet")}}。
      +
      Window 事件循环
      +
      window 事件循环驱动所有同源的窗口 (though there are further limits to this as described elsewhere in this article XXXX ????).
      +
      Worker 事件循环
      +
      worker 事件循环顾名思义就是驱动 worker 的事件循环。这包括了所有种类的 worker:最基本的 web worker 以及 shared workerservice worker。 Worker 被放在一个或多个独立于 “主代码” 的代理中。浏览器可能会用单个或多个事件循环来处理给定类型的所有 worker。
      +
      Worklet 事件循环
      +
      worklet 事件循环用于驱动运行 worklet 的代理。这包含了 {{domxref("Worklet")}}、{{domxref("AudioWorklet")}} 以及 {{domxref("PaintWorklet")}}。
      -

      多个同{{Glossary("源")}}(译者注:此处同源的源应该不是指同源策略中的源,而是指由同一个窗口打开的多个子窗口或同一个窗口中的多个 iframe 等,意味着起源的意思,下一段内容就会对这里进行说明)窗口可能运行在相同的事件循环中,每个队列任务进入到事件循环中以便处理器能够轮流对它们进行处理。记住这里的网络术语 “window” 实际上指的用于运行网页内容的浏览器级容器,包括实际的 window,一个 tab 标签或者一个 frame。

      +

      多个同{{Glossary("源")}}(译者注:此处同源的源应该不是指同源策略中的源,而是指由同一个窗口打开的多个子窗口或同一个窗口中的多个 iframe 等,意味着起源的意思,下一段内容就会对这里进行说明)窗口可能运行在相同的事件循环中,每个队列任务进入到事件循环中以便处理器能够轮流对它们进行处理。记住这里的网络术语 “window” 实际上指的用于运行网页内容的浏览器级容器,包括实际的 window,一个 tab 标签或者一个 frame。

      在特定情况下,同源窗口之间共享事件循环,例如:

      @@ -141,9 +141,9 @@

      事件循环(Event loops)

      这种特定情况依赖于浏览器的具体实现,各个浏览器可能并不一样。

      -

      任务 vs 微任务

      +

      任务 vs 微任务

      -

      一个任务就是指计划由标准机制来执行的任何 JavaScript,如程序的初始化、事件触发的回调等。 除了使用事件,你还可以使用 {{domxref("window.setTimeout", "setTimeout()")}} 或者 {{domxref("window.setInterval", "setInterval()")}} 来添加任务

      +

      一个任务就是指计划由标准机制来执行的任何 JavaScript,如程序的初始化、事件触发的回调等。 除了使用事件,你还可以使用 {{domxref("window.setTimeout", "setTimeout()")}} 或者 {{domxref("window.setInterval", "setInterval()")}} 来添加任务

      任务队列和微任务队列的区别很简单,但却很重要:

      @@ -160,13 +160,13 @@

      问题

      解决方案

      -

      使用 web workers 可以让主线程另起新的线程来运行脚本,这能够缓解上面的情况。一个设计良好的网站或应用会把一些复杂的或者耗时的操作交给 worker 去做,这样可以让主线程除了更新、布局和渲染网页之外,尽可能少的去做其他事情。

      +

      使用 web workers 可以让主线程另起新的线程来运行脚本,这能够缓解上面的情况。一个设计良好的网站或应用会把一些复杂的或者耗时的操作交给 worker 去做,这样可以让主线程除了更新、布局和渲染网页之外,尽可能少的去做其他事情。

      -

      通过使用像 promises 这样的 异步 JavaScript 技术可以使得主线程在等待请求返回结果的同时继续往下执行,这能够更进一步减轻上面提到的情况。然而,一些更接近于基础功能的代码——比如一些框架代码,可能更需要将代码安排在主线程上一个安全的时间来运行,它与任何请求的结果或者任务无关。

      +

      通过使用像 promises 这样的 异步 JavaScript 技术可以使得主线程在等待请求返回结果的同时继续往下执行,这能够更进一步减轻上面提到的情况。然而,一些更接近于基础功能的代码——比如一些框架代码,可能更需要将代码安排在主线程上一个安全的时间来运行,它与任何请求的结果或者任务无关。

      微任务是另一种解决该问题的方案,通过将代码安排在下一次事件循环开始之前运行而不是必须要等到下一次开始之后才执行,这样可以提供一个更好的访问级别。

      -

      微任务队列已经存在有一段时间了,但之前它仅仅被内部使用来驱动诸如 promise 这些。queueMicrotask()的加入可以让开发者创建一个统一的微任务队列,它能够在任何时候即便是当 JavaScript 执行上下文栈中没有执行上下文剩余时也可以将代码安排在一个安全的时间运行。 在多个实例、所有浏览器以及运行时中,一个标准的微任务队列机制意味着这些微任务可以非常可靠的以相同的顺序执行,从而避免一些潜在的难以发现的错误。

      +

      微任务队列已经存在有一段时间了,但之前它仅仅被内部使用来驱动诸如 promise 这些。queueMicrotask()的加入可以让开发者创建一个统一的微任务队列,它能够在任何时候即便是当 JavaScript 执行上下文栈中没有执行上下文剩余时也可以将代码安排在一个安全的时间运行。 在多个实例、所有浏览器以及运行时中,一个标准的微任务队列机制意味着这些微任务可以非常可靠的以相同的顺序执行,从而避免一些潜在的难以发现的错误。

      更多

      diff --git a/files/zh-cn/web/api/html_dom_api/microtask_guide/index.html b/files/zh-cn/web/api/html_dom_api/microtask_guide/index.html index cd97d3065fcb83..159b3d7175acd1 100644 --- a/files/zh-cn/web/api/html_dom_api/microtask_guide/index.html +++ b/files/zh-cn/web/api/html_dom_api/microtask_guide/index.html @@ -5,9 +5,9 @@ ---

      {{APIRef("HTML DOM")}}

      -

      一个 微任务(microtask)就是一个简短的函数,当创建该函数的函数执行之后,并且 只有当 Javascript 调用栈为空,而控制权尚未返还给被 {{Glossary("user agent")}} 用来驱动脚本执行环境的事件循环之前,该微任务才会被执行。 事件循环既可能是浏览器的主事件循环也可能是被一个 web worker 所驱动的事件循环。这使得给定的函数在没有其他脚本执行干扰的情况下运行,也保证了微任务能在用户代理有机会对该微任务带来的行为做出反应之前运行。

      +

      一个 微任务(microtask)就是一个简短的函数,当创建该函数的函数执行之后,并且 只有当 Javascript 调用栈为空,而控制权尚未返还给被 {{Glossary("user agent")}} 用来驱动脚本执行环境的事件循环之前,该微任务才会被执行。 事件循环既可能是浏览器的主事件循环也可能是被一个 web worker 所驱动的事件循环。这使得给定的函数在没有其他脚本执行干扰的情况下运行,也保证了微任务能在用户代理有机会对该微任务带来的行为做出反应之前运行。

      -

      JavaScript 中的 promisesMutation Observer API 都使用微任务队列去运行它们的回调函数,但当能够推迟工作直到当前事件循环过程完结时,也是可以执行微任务的时机。为了允许第三方库、框架、polyfills 能使用微任务,{{domxref("Window")}} 暴露了 {{domxref("queueMicrotask()")}} 方法,而 {{domxref("Worker")}} 接口则通过 WindowOrWorkerGlobalScope mixin 提供了同名的 queueMicrotask() 方法。

      +

      JavaScript 中的 promisesMutation Observer API 都使用微任务队列去运行它们的回调函数,但当能够推迟工作直到当前事件循环过程完结时,也是可以执行微任务的时机。为了允许第三方库、框架、polyfills 能使用微任务,{{domxref("Window")}} 暴露了 {{domxref("queueMicrotask()")}} 方法,而 {{domxref("Worker")}} 接口则通过 WindowOrWorkerGlobalScope mixin 提供了同名的 queueMicrotask() 方法。

      任务 vs 微任务

      @@ -15,12 +15,12 @@

      任务 vs 微任务

      任务(Tasks)

      -

      一个 任务 就是由执行诸如从头执行一段程序、执行一个事件回调或一个 interval/timeout 被触发之类的标准机制而被调度的任意 JavaScript 代码。这些都在 任务队列(task queue)上被调度。

      +

      一个 任务 就是由执行诸如从头执行一段程序、执行一个事件回调或一个 interval/timeout 被触发之类的标准机制而被调度的任意 JavaScript 代码。这些都在 任务队列(task queue)上被调度。

      在以下时机,任务会被添加到任务队列:

        -
      • 一段新程序或子程序被直接执行时(比如从一个控制台,或在一个 {{HTMLElement("script")}} 元素中运行代码)。
      • +
      • 一段新程序或子程序被直接执行时(比如从一个控制台,或在一个 {{HTMLElement("script")}} 元素中运行代码)。
      • 触发了一个事件,将其回调函数添加到任务队列时。
      • 执行到一个由 {{domxref("setTimeout()")}} 或 {{domxref("setInterval()")}} 创建的 timeout 或 interval,以致相应的回调函数被添加到任务队列时。
      @@ -35,7 +35,7 @@

      微任务(Microtasks)

      首先,每当一个任务存在,事件循环都会检查该任务是否正把控制权交给其他 JavaScript 代码。如若不然,事件循环就会运行微任务队列中的所有微任务。接下来微任务循环会在事件循环的每次迭代中被处理多次,包括处理完事件和其他回调之后。

      -

      其次,如果一个微任务通过调用  {{domxref("queueMicrotask()")}}, 向队列中加入了更多的微任务,则那些新加入的微任务 会早于下一个任务运行 。这是因为事件循环会持续调用微任务直至队列中没有留存的,即使是在有更多微任务持续被加入的情况下。

      +

      其次,如果一个微任务通过调用 {{domxref("queueMicrotask()")}}, 向队列中加入了更多的微任务,则那些新加入的微任务 会早于下一个任务运行 。这是因为事件循环会持续调用微任务直至队列中没有留存的,即使是在有更多微任务持续被加入的情况下。

      注意: 因为微任务自身可以入列更多的微任务,且事件循环会持续处理微任务直至队列为空,那么就存在一种使得事件循环无尽处理微任务的真实风险。如何处理递归增加微任务是要谨慎而行的。

      @@ -47,11 +47,11 @@

      使用微任务

      入列微任务

      -

      就其本身而言,应该使用微任务的典型情况,要么只有在没有其他办法的时候,要么是当创建框架或库时需要使用微任务达成其功能。虽然在过去要使得入列微任务成为可能有可用的技巧(比如创建一个立即 resolve 的 promise),但新加入的 {{domxref("queueMicrotask()")}} 方法增加了一种标准的方式,可以安全的引入微任务而避免使用额外的技巧。

      +

      就其本身而言,应该使用微任务的典型情况,要么只有在没有其他办法的时候,要么是当创建框架或库时需要使用微任务达成其功能。虽然在过去要使得入列微任务成为可能有可用的技巧(比如创建一个立即 resolve 的 promise),但新加入的 {{domxref("queueMicrotask()")}} 方法增加了一种标准的方式,可以安全的引入微任务而避免使用额外的技巧。

      通过引入 queueMicrotask(),由晦涩地使用 promise 去创建微任务而带来的风险就可以被避免了。举例来说,当使用 promise 创建微任务时,由回调抛出的异常被报告为 rejected promises 而不是标准异常。同时,创建和销毁 promise 带来了事件和内存方面的额外开销,这是正确入列微任务的函数应该避免的。

      -

      简单的传入一个 JavaScript {{jsxref("Function")}} ,以在 queueMicrotask() 方法中处理微任务时供其上下文调用即可;取决于当前执行上下文, queueMicrotask() 以定义的形式被暴露在 {{domxref("Window")}} 或 {{domxref("Worker")}} 接口上。

      +

      简单的传入一个 JavaScript {{jsxref("Function")}} ,以在 queueMicrotask() 方法中处理微任务时供其上下文调用即可;取决于当前执行上下文, queueMicrotask() 以定义的形式被暴露在 {{domxref("Window")}} 或 {{domxref("Worker")}} 接口上。

      queueMicrotask(() => {
         /* 微任务中将运行的代码 */
      @@ -70,7 +70,7 @@ 

      何时使用微任务

      保证条件性使用 promises 时的顺序

      -

      微任务可被用来确保执行顺序总是一致的一种情形,是当 promise 被用在一个 if...else 语句(或其他条件性语句)中、但并不在其他子句中的时候。考虑如下代码:

      +

      微任务可被用来确保执行顺序总是一致的一种情形,是当 promise 被用在一个 if...else 语句(或其他条件性语句)中、但并不在其他子句中的时候。考虑如下代码:

      customElement.prototype.getData = url => {
         if (this.cache[url]) {
      @@ -201,7 +201,7 @@ 

      JavaScript

      let log = s => logElem.innerHTML += s + "<br>";
      -

      在下面的代码中,我们看到对 {{domxref("queueMicrotask()")}} 的一次调用被用来调度一个微任务以使其运行。这次调用包含了 log(),一个简单的向屏幕输出文字的自定义函数。

      +

      在下面的代码中,我们看到对 {{domxref("queueMicrotask()")}} 的一次调用被用来调度一个微任务以使其运行。这次调用包含了 log(),一个简单的向屏幕输出文字的自定义函数。

      log("Before enqueueing the microtask");
       queueMicrotask(() => {
      @@ -215,7 +215,7 @@ 

      结果

      timeout 和微任务的示例

      -

      在这个例子中,一个 timeout 在 0 毫秒后被触发(或者 "尽可能快")。这演示了当调用一个新任务(如通过使用  setTimeout())时的“尽可能快”意味着什么,以及比之于使用一个微任务的不同。

      +

      在这个例子中,一个 timeout 在 0 毫秒后被触发(或者 "尽可能快")。这演示了当调用一个新任务(如通过使用 setTimeout())时的“尽可能快”意味着什么,以及比之于使用一个微任务的不同。

      -

      属性 {{htmlattrxref("draggable")}} 设置为 "true",所以这个元素变成可拖拽的。如果该属性被省略或被设置为 "false",则该元素将不可拖拽,此时拖拽只会选中文本。

      +

      属性 {{htmlattrxref("draggable")}} 设置为 "true",所以这个元素变成可拖拽的。如果该属性被省略或被设置为 "false",则该元素将不可拖拽,此时拖拽只会选中文本。

      -

      {{htmlattrxref("draggable")}} 属性可在任意元素上设置,包括图像和链接。然而,对于后两者,该属性的默认值是 true,所以你只会在禁用这二者的拖拽时使用到 {{htmlattrxref("draggable")}} 属性,将其设置为 false

      +

      {{htmlattrxref("draggable")}} 属性可在任意元素上设置,包括图像和链接。然而,对于后两者,该属性的默认值是 true,所以你只会在禁用这二者的拖拽时使用到 {{htmlattrxref("draggable")}} 属性,将其设置为 false

      注意:当一个元素被设置成可拖拽时, 元素中的文本和其他子元素不能再以正常的方式(通过鼠标点击和拖拽)被选中。用户必须按住 alt 键,再用鼠标选择文本,或者使用键盘选择。

      @@ -57,7 +57,7 @@

      开始拖拽操作

      在这个例子中,{{event("dragstart")}} 事件监听程序被添加到可拖拽元素本身;然而,你可以监听一个祖先元素,因为就像大多数其他事件一样,拖拽事件会冒泡。

      -

      在 {{event("dragstart")}} 事件中,你可以指定拖拽数据、反馈图像和拖拽效果,所有这些都将在下面描述。不过,我们只需要设置拖拽数据,因为在大多数情况下默认的图像和拖拽效果都是适用的。

      +

      在 {{event("dragstart")}} 事件中,你可以指定拖拽数据、反馈图像和拖拽效果,所有这些都将在下面描述。不过,我们只需要设置拖拽数据,因为在大多数情况下默认的图像和拖拽效果都是适用的。

      拖拽数据

      @@ -65,18 +65,18 @@

      拖拽数据

      当拖拽发生时,数据必须与被拖拽的项目相关联。例如,当在文本框中拖拽选定的文本时,与拖拽数据项相关联的数据就是文本本身。类似地,当在 Web 页面上拖拽链接时,拖拽数据项就是链接的 URL 。

      -

      {{domxref("DataTransfer","拖拽数据")}} 包含两个信息,数据的类型(或格式)和数据值。格式是一个类型字符串(例如文本数据的格式是 text/plain),值是一个文本字符串。拖拽开始时,你提供数据类型和数据值。在拖拽过程中,在 {{event("dragenter")}} 和 {{event("dragover")}} 事件监听程序中,你使用拖拽数据的类型来检查是否允许放置(drop)。例如,接受链接的放置目标将检查链接类型 text/uri-list。在放置事件中,监听程序将取回拖拽数据,并将其插入到放置位置。

      +

      {{domxref("DataTransfer","拖拽数据")}} 包含两个信息,数据的类型(或格式)和数据值。格式是一个类型字符串(例如文本数据的格式是 text/plain),值是一个文本字符串。拖拽开始时,你提供数据类型和数据值。在拖拽过程中,在 {{event("dragenter")}}{{event("dragover")}} 事件监听程序中,你使用拖拽数据的类型来检查是否允许放置(drop)。例如,接受链接的放置目标将检查链接类型 text/uri-list。在放置事件中,监听程序将取回拖拽数据,并将其插入到放置位置。

      -

      {{domxref("DataTransfer","拖拽数据")}} 的 {{domxref("DataTransfer.types","类型")}} 属性返回一个类似 {{domxref("DOMString")}} 的 MIME-type 的列表,如 text/plain 或 image/jpeg。你还可以创建自己的类型。最常用的类型列在文章 推荐拖拽类型 中。

      +

      {{domxref("DataTransfer","拖拽数据")}} 的 {{domxref("DataTransfer.types","类型")}} 属性返回一个类似 {{domxref("DOMString")}} 的 MIME-type 的列表,如 text/plainimage/jpeg。你还可以创建自己的类型。最常用的类型列在文章 推荐拖拽类型 中。

      -

      一次拖拽可能包括几个不同类型的数据项。这使得数据可以更具体的类型提供,通常是自定义类型,但若放置目标不支持这些具体类型,则会提供回退(fallback)数据。通常情况下,最不具体的类型是 text/plain 类型的普通文本数据,即一些简单的文本表示。

      +

      一次拖拽可能包括几个不同类型的数据项。这使得数据可以更具体的类型提供,通常是自定义类型,但若放置目标不支持这些具体类型,则会提供回退(fallback)数据。通常情况下,最不具体的类型是 text/plain 类型的普通文本数据,即一些简单的文本表示。

      要在 {{domxref("DragEvent.dataTransfer","dataTransfer")}} 中设置拖拽数据项,使用 {{domxref("DataTransfer.setData","setData()")}} 方法。这个方法接收两个参数,即数据类型和数据值。例如:

      event.dataTransfer.setData("text/plain", "Text to drag");
       
      -

      在这个例子中,数据值是 “Text to drag”,数据类型是 text/plain 格式。

      +

      在这个例子中,数据值是 “Text to drag”,数据类型是 text/plain 格式。

      你可以提供多种格式的数据。要做到这一点,可以用不同的格式多次调用 {{domxref("DataTransfer.setData","setData()")}} 方法。你应该传入尽量具体的格式。

      @@ -86,11 +86,11 @@

      拖拽数据

      dt.setData("text/plain", "http://www.mozilla.org");
    -

    在这里,数据被添加到三种不同的类型中。第一个类型 application/x-bookmark 是一种自定义类型。其他应用程序不会支持这个类型,但你可以在同一站点或同以应用程序之间使用自定义类型。

    +

    在这里,数据被添加到三种不同的类型中。第一个类型 application/x-bookmark 是一种自定义类型。其他应用程序不会支持这个类型,但你可以在同一站点或同以应用程序之间使用自定义类型。

    -

    通过提供其他类型的数据,我们还可使用不那么具体的形式支持拖拽到其他应用程序。application/x.bookmark 类型可以提供更多的数据,以便在应用程序中使用,而另两个类型则只包含一个 URL 或文本版本。

    +

    通过提供其他类型的数据,我们还可使用不那么具体的形式支持拖拽到其他应用程序。application/x.bookmark 类型可以提供更多的数据,以便在应用程序中使用,而另两个类型则只包含一个 URL 或文本版本。

    -

    注意,在本例中,text/uri-list 和 text/plain 包含相同的数据。这通常是正确的,但不一定要这么做。

    +

    注意,在本例中,text/uri-listtext/plain 包含相同的数据。这通常是正确的,但不一定要这么做。

    如果你试图以相同的格式添加两次数据,那么新的数据将替换旧的数据。你可以使用 {{domxref("DataTransfer.clearData","clearData()")}} 方法清除这些数据,该方法接收一个参数,即要删除的数据类型。

    @@ -106,7 +106,7 @@

    设置拖拽反馈图像

    event.dataTransfer.setDragImage(image, xOffset, yOffset);
     
    -

    这三个参数都是必要的。第一个是图像的引用。这个引用通常是一个 <img> 元素,但也可以是 <canvas> 或任何其他元素。生成的反馈图像就是该图像在屏幕上的样子,以图像原始的大小绘制。{{domxref("DataTransfer.setDragImage","setDragImage()")}} 方法的第二、三个参数是图像位置相对于鼠标指针位置的偏移量。

    +

    这三个参数都是必要的。第一个是图像的引用。这个引用通常是一个 <img> 元素,但也可以是 <canvas> 或任何其他元素。生成的反馈图像就是该图像在屏幕上的样子,以图像原始的大小绘制。{{domxref("DataTransfer.setDragImage","setDragImage()")}} 方法的第二、三个参数是图像位置相对于鼠标指针位置的偏移量。

    也可以使用不在文档中的图像和画布。这种技术在使用 canvas 元素绘制自定义的拖拽反馈图像时非常有用,如下面的例子:

    @@ -132,9 +132,9 @@

    设置拖拽反馈图像

    拖拽效果

    -

    拖拽过程中可能会执行一些操作。 copy 操作用来指示被拖拽的数据将从当前位置复制到放置位置。 move 操作指示被拖拽的数据会被移动,link 操作表示在源和放置位置之间将会创建某种形式的关系或连接。

    +

    拖拽过程中可能会执行一些操作。 copy 操作用来指示被拖拽的数据将从当前位置复制到放置位置。 move 操作指示被拖拽的数据会被移动,link 操作表示在源和放置位置之间将会创建某种形式的关系或连接。

    -

    你可以在 {{event("dragstart")}} 事件监听程序中设置 {{domxref("DataTransfer.effectAllowed","effectAllowed")}}  属性以指定允许拖拽源头执行三种操作中的哪几种。

    +

    你可以在 {{event("dragstart")}} 事件监听程序中设置 {{domxref("DataTransfer.effectAllowed","effectAllowed")}} 属性以指定允许拖拽源头执行三种操作中的哪几种。

    event.dataTransfer.effectAllowed = "copy";
     
    @@ -164,32 +164,32 @@

    拖拽效果

    注意,这些值必须像上面列出的那样使用。例如,将 {{domxref("DataTransfer.effectAllowed","effectAllowed")}} 属性设置为copyMove 允许复制或移动操作,但阻止用户执行链接操作。属性默认允许以上所有的操作(all),所以你不需要调整这个属性,除非你想要排除某个特定操作。

    -

    在拖拽操作期间,{{event("dragenter")}} 或 {{event("dragover")}} 事件的监听程序可以检查 {{domxref("DataTransfer.effectAllowed","effectAllowed")}}  属性,以查看哪些操作是允许的。相关的 {{domxref("DataTransfer.dropEffect","dropEffect")}} 属性应该在其中的一个事件中设置,来指定应该执行哪一个单项操作。{{domxref("DataTransfer.dropEffect","dropEffect")}} 是 none, copy, move, 或 link。这个属性不使用上述的组合值。

    +

    在拖拽操作期间,{{event("dragenter")}}{{event("dragover")}} 事件的监听程序可以检查 {{domxref("DataTransfer.effectAllowed","effectAllowed")}} 属性,以查看哪些操作是允许的。相关的 {{domxref("DataTransfer.dropEffect","dropEffect")}} 属性应该在其中的一个事件中设置,来指定应该执行哪一个单项操作。{{domxref("DataTransfer.dropEffect","dropEffect")}} 是 none, copy, move, 或 link。这个属性不使用上述的组合值。

    -

    在 {{event("dragenter")}}{{event("dragover")}} 事件中,{{domxref("DataTransfer.dropEffect","dropEffect")}} 属性被初始化为用户请求的效果。用户可以通过按下修饰键来修改为所需的效果。尽管使用什么修饰键取决于不同的平台,但典型情况下,ShiftCtrl 键用于在复制、移动和链接之间切换。鼠标指针会改变样式以指示需要的操作;例如,对于"复制"操作,光标可能会在旁边出现加号。

    +

    {{event("dragenter")}}{{event("dragover")}} 事件中,{{domxref("DataTransfer.dropEffect","dropEffect")}} 属性被初始化为用户请求的效果。用户可以通过按下修饰键来修改为所需的效果。尽管使用什么修饰键取决于不同的平台,但典型情况下,ShiftCtrl 键用于在复制、移动和链接之间切换。鼠标指针会改变样式以指示需要的操作;例如,对于"复制"操作,光标可能会在旁边出现加号。

    -

    你可以在 {{event("dragenter")}} 或 {{event("dragover")}} 事件期间修改 {{domxref("DataTransfer.dropEffect","dropEffect")}} 属性,例如将某个放置目标设置为只支持某些操作。你可以修改 {{domxref("DataTransfer.dropEffect","dropEffect")}} 属性来覆盖用户指定的效果,并强制修改为一个特定的放置操作。 注意,这个效果必须是 {{domxref("DataTransfer.effectAllowed","effectAllowed")}} 属性中的一个。否则,它将被设置为允许的替代值。

    +

    你可以在 {{event("dragenter")}}{{event("dragover")}} 事件期间修改 {{domxref("DataTransfer.dropEffect","dropEffect")}} 属性,例如将某个放置目标设置为只支持某些操作。你可以修改 {{domxref("DataTransfer.dropEffect","dropEffect")}} 属性来覆盖用户指定的效果,并强制修改为一个特定的放置操作。 注意,这个效果必须是 {{domxref("DataTransfer.effectAllowed","effectAllowed")}} 属性中的一个。否则,它将被设置为允许的替代值。

    event.dataTransfer.dropEffect = "copy";
     

    在这个例子中,放置效果是复制。

    -

    你可以使用 none 表示在这个位置不允许任何放置,尽管在这种情况下,最好不要取消事件。

    +

    你可以使用 none 表示在这个位置不允许任何放置,尽管在这种情况下,最好不要取消事件。

    -

    在 {{event("drop")}} 和 {{event("dragend")}} 事件中,你可以检查 {{domxref("DataTransfer.dropEffect","dropEffect")}} 属性,以确定最终选择了哪种效果。如果所选的效果是 "move",那么应该在 {{event("dragend")}} 事件中从拖拽源头删除拖拽数据。

    +

    {{event("drop")}}{{event("dragend")}} 事件中,你可以检查 {{domxref("DataTransfer.dropEffect","dropEffect")}} 属性,以确定最终选择了哪种效果。如果所选的效果是 "move",那么应该在 {{event("dragend")}} 事件中从拖拽源头删除拖拽数据。

    指定放置目标

    -

    {{event("dragenter")}} 或 {{event("dragover")}} 事件的监听程序用于表示有效的放置目标,也就是被拖拽项目可能放置的地方。网页或应用程序的大多数区域都不是放置数据的有效位置。因此,这些事件的默认处理是不允许放置。

    +

    {{event("dragenter")}}{{event("dragover")}} 事件的监听程序用于表示有效的放置目标,也就是被拖拽项目可能放置的地方。网页或应用程序的大多数区域都不是放置数据的有效位置。因此,这些事件的默认处理是不允许放置。

    -

    如果你想要允许放置,你必须取消 dragenter 和 dragover 事件来阻止默认的处理。你可以在属性定义的事件监听程序返回 false,或者调用事件的 {{domxref("Event.preventDefault","preventDefault()")}} 方法来实现这一点。在一个独立脚本中的定义的函数里,可能后者更可行。

    +

    如果你想要允许放置,你必须取消 dragenterdragover 事件来阻止默认的处理。你可以在属性定义的事件监听程序返回 false,或者调用事件的 {{domxref("Event.preventDefault","preventDefault()")}} 方法来实现这一点。在一个独立脚本中的定义的函数里,可能后者更可行。

    <div ondragover="return false">
     <div ondragover="event.preventDefault()">
     
    -

    在 {{event("dragenter")}} 和 {{event("dragover")}} 事件中调用  {{domxref("Event.preventDefault","preventDefault()")}} 方法将表明在该位置允许放置 。但是,你通常希望只在某些情况下调用 {{domxref("Event.preventDefault","preventDefault()")}} 方法(如只当拖拽的是链接时)。

    +

    {{event("dragenter")}}{{event("dragover")}} 事件中调用 {{domxref("Event.preventDefault","preventDefault()")}} 方法将表明在该位置允许放置 。但是,你通常希望只在某些情况下调用 {{domxref("Event.preventDefault","preventDefault()")}} 方法(如只当拖拽的是链接时)。

    要做到这一点,调用一个函数以检查条件,并且只在满足条件时取消事件。如果条件未满足,则不取消事件,此时用户释放鼠标按钮不会执行放置。

    @@ -206,16 +206,16 @@

    指定放置目标

    var isLink = contains( event.dataTransfer.types, "text/uri-list"); if (isLink) { event.preventDefault(); -  } + } }
    -

    在本例中,我们使用 includes 方法来检查 text/uri-list 是否出现在类型列表中。如果出现了,我们将取消这个事件以允许放置。如果拖拽数据不包含链接,则不取消事件,此位置也不允许放置。

    +

    在本例中,我们使用 includes 方法来检查 text/uri-list 是否出现在类型列表中。如果出现了,我们将取消这个事件以允许放置。如果拖拽数据不包含链接,则不取消事件,此位置也不允许放置。

    如果你希望更具体地限制操作类型,你可能还需要设置 {{domxref("DataTransfer.effectAllowed","effectAllowed")}} 或 {{domxref("DataTransfer.dropEffect","dropEffect")}} 属性,或者两者都设置。当然,如果你不取消这个事件,改变这两个属性不会有任何效果。

    放置反馈

    -

    有几种方法可以向用户表明哪个位置允许放置。鼠标指针将根据 {{domxref("DataTransfer.dropEffect","dropEffect")}}  属性的值做必要的更新。鼠标指针具体的外观取决于用户平台,典型的如加号图标会出现在 'copy' 中,而不允许放置时,会出现禁止放置的图标。在许多情况下,鼠标指针反馈就足够了。

    +

    有几种方法可以向用户表明哪个位置允许放置。鼠标指针将根据 {{domxref("DataTransfer.dropEffect","dropEffect")}} 属性的值做必要的更新。鼠标指针具体的外观取决于用户平台,典型的如加号图标会出现在 'copy' 中,而不允许放置时,会出现禁止放置的图标。在许多情况下,鼠标指针反馈就足够了。

    但是,你还可以根据需要更新用户界面,如添加一个插入标记或使用高亮显示。对于简单的高亮显示,你可以在放置目标上使用 -moz-drag-over CSS 伪类。

    @@ -224,27 +224,27 @@

    放置反馈

    }
    -

    在这个例子中,当带有 droparea 类的元素是一个有效的放置目标时,即在该元素的 {{event("dragenter")}} 事件中调用 {{domxref("Event.preventDefault","preventDefault()")}} 方法时,元素会出现一个 1 像素的黑色轮廓。

    +

    在这个例子中,当带有 droparea 类的元素是一个有效的放置目标时,即在该元素的 {{event("dragenter")}} 事件中调用 {{domxref("Event.preventDefault","preventDefault()")}} 方法时,元素会出现一个 1 像素的黑色轮廓。

    -

    注意:要使这个伪类生效,你必须在 {{event("dragenter")}} 事件中调用 {{domxref("Event.preventDefault","preventDefault()")}} 方法,因为这个伪类状态不会检查 {{event("dragover")}} 事件(译者注:即在 {{event("dragover")}} 事件中调用 {{domxref("Event.preventDefault","preventDefault()")}} 方法也不会使伪类生效,尽管这个伪类叫做“-moz-drag-over”)。

    +

    注意:要使这个伪类生效,你必须在 {{event("dragenter")}} 事件中调用 {{domxref("Event.preventDefault","preventDefault()")}} 方法,因为这个伪类状态不会检查 {{event("dragover")}} 事件(译者注:即在 {{event("dragover")}} 事件中调用 {{domxref("Event.preventDefault","preventDefault()")}} 方法也不会使伪类生效,尽管这个伪类叫做“-moz-drag-over”)。

    -

    对于更复杂的视觉效果,你可以在 {{event("dragenter")}} 事件中执行其他操作。例如在放置位置插入一个元素,这样的元素可以表示一个插入标记,或表示被拖拽的元素移动到了新位置。为此你可以在 {{event("dragenter")}} 事件中创建一个新元素,然后将其插入到文档中。

    +

    对于更复杂的视觉效果,你可以在 {{event("dragenter")}} 事件中执行其他操作。例如在放置位置插入一个元素,这样的元素可以表示一个插入标记,或表示被拖拽的元素移动到了新位置。为此你可以在 {{event("dragenter")}} 事件中创建一个新元素,然后将其插入到文档中。

    -

    {{event("dragover")}} 事件在鼠标指向的元素上触发。自然,你可能需要将插入标记移动到事件发生的位置附近。你可以使用事件的 {{domxref("MouseEvent.clientX","clientX")}} 和 {{domxref("MouseEvent.clientY","clientY")}} 属性,还有其他鼠标事件的属性来确定鼠标的位置。

    +

    {{event("dragover")}} 事件在鼠标指向的元素上触发。自然,你可能需要将插入标记移动到事件发生的位置附近。你可以使用事件的 {{domxref("MouseEvent.clientX","clientX")}} 和 {{domxref("MouseEvent.clientY","clientY")}} 属性,还有其他鼠标事件的属性来确定鼠标的位置。

    -

    最后,{{event("dragleave")}} 事件会在拖拽离开元素时在该元素上触发。这是移除插入标记或高亮的好时机。你不需要取消这个事件(译者注:即不需要使用 {{domxref("Event.preventDefault","preventDefault()")}} )。使用 -moz-drag-over 伪类设置的高亮或其他视觉效果会被自动移除。即使拖拽被取消了,{{event("dragleave")}} 事件也会照常触发,所以你可以确保在这个事件中对任何插入标记的清除操作都一定可以完成。

    +

    最后,{{event("dragleave")}} 事件会在拖拽离开元素时在该元素上触发。这是移除插入标记或高亮的好时机。你不需要取消这个事件(译者注:即不需要使用 {{domxref("Event.preventDefault","preventDefault()")}} )。使用 -moz-drag-over 伪类设置的高亮或其他视觉效果会被自动移除。即使拖拽被取消了,{{event("dragleave")}} 事件也会照常触发,所以你可以确保在这个事件中对任何插入标记的清除操作都一定可以完成。

    执行放置

    当用户放开鼠标,拖放操作就会结束。

    -

    如果在有效的放置目标元素(即取消了 {{event("dragenter")}} 或 {{event("dragover")}} 的元素)上放开鼠标,放置会成功实现,{{event("drop")}} 事件在目标元素上被触发。否则,拖拽会被取消,不会触发 {{event("drop")}} 事件。

    +

    如果在有效的放置目标元素(即取消了 {{event("dragenter")}}{{event("dragover")}} 的元素)上放开鼠标,放置会成功实现,{{event("drop")}} 事件在目标元素上被触发。否则,拖拽会被取消,不会触发 {{event("drop")}} 事件。

    -

    在 {{event("drop")}} 事件中,你应该取回放置的数据并将其插入到放置的位置。你可以使用 {{domxref("DataTransfer.dropEffect","dropEffect")}} 属性来确定需要哪种拖拽操作。

    +

    {{event("drop")}} 事件中,你应该取回放置的数据并将其插入到放置的位置。你可以使用 {{domxref("DataTransfer.dropEffect","dropEffect")}} 属性来确定需要哪种拖拽操作。

    -

    在所有拖拽操作相关的事件中,事件的 {{domxref("DragEvent.dataTransfer","dataTransfer")}} 属性会一直保存着拖拽数据。可使用 {{domxref("DataTransfer.getData","getData()")}} 方法来取回数据。

    +

    在所有拖拽操作相关的事件中,事件的 {{domxref("DragEvent.dataTransfer","dataTransfer")}} 属性会一直保存着拖拽数据。可使用 {{domxref("DataTransfer.getData","getData()")}} 方法来取回数据。

    function onDrop(event) {
       const data = event.dataTransfer.getData("text/plain");
    @@ -252,13 +252,13 @@ 

    执行放置

    event.preventDefault(); }
    -

    {{domxref("DataTransfer.getData","getData()")}} 方法接收一个参数,取回数据的类型。这个方法会返回拖拽操作开始时调用 {{domxref("DataTransfer.setData","setData()")}} 方法设置的字符串值。如果不存在传入类型的数据,则会返回空字符串。自然,你应该知道哪种类型的数据可用,因为之前你应该已经在 {{event("dragover")}} 事件中检查过数据类型了。

    +

    {{domxref("DataTransfer.getData","getData()")}} 方法接收一个参数,取回数据的类型。这个方法会返回拖拽操作开始时调用 {{domxref("DataTransfer.setData","setData()")}} 方法设置的字符串值。如果不存在传入类型的数据,则会返回空字符串。自然,你应该知道哪种类型的数据可用,因为之前你应该已经在 {{event("dragover")}} 事件中检查过数据类型了。

    -

    在上面的例子中,我们一取回数据就把它作为文本内容插入到目标中。实际效果就是拖拽文本被插入到放置位置,假设放置目标是文本区域,例如 p 或 div 元素。

    +

    在上面的例子中,我们一取回数据就把它作为文本内容插入到目标中。实际效果就是拖拽文本被插入到放置位置,假设放置目标是文本区域,例如 pdiv 元素。

    在一个网页中,如果你想接收一个放置,不想让浏览器的默认处理程序处理放置数据,你应该调用事件的 {{domxref("Event.preventDefault","preventDefault()")}} 方法。例如,当拖拽一个链接到网页时,Firefox 会打开这个链接。而你可以通过取消事件来阻止这样的行为。

    -

    你可以取回其他类型的数据。如果数据是一个链接,其类型应为 text/uri-list。你可以将链接插入到内容中。

    +

    你可以取回其他类型的数据。如果数据是一个链接,其类型应为 text/uri-list。你可以将链接插入到内容中。

    function doDrop(event) {
       const lines = event.dataTransfer.getData("text/uri-list").split("\n");
    @@ -272,16 +272,16 @@ 

    执行放置

    event.preventDefault(); }
    -

    这个例子使用拖拽数据插入链接。顾名思义,text/uri-list 类型可包含一个 URL 列表,每行一个 URL。在上述代码中,我们使用 split 方法将字符串按行分割,然后迭代列表的每一行,将每一个链接都插入到文档中。注意到我们跳过了井号(#)开头的链接,因为那些只是注释。

    +

    这个例子使用拖拽数据插入链接。顾名思义,text/uri-list 类型可包含一个 URL 列表,每行一个 URL。在上述代码中,我们使用 split 方法将字符串按行分割,然后迭代列表的每一行,将每一个链接都插入到文档中。注意到我们跳过了井号(#)开头的链接,因为那些只是注释。

    -

    在简单的情况中,你可以使用一个特别的类型 URL 来取回列表中第一个有效的 URL。例如:

    +

    在简单的情况中,你可以使用一个特别的类型 URL 来取回列表中第一个有效的 URL。例如:

    var link = event.dataTransfer.getData("URL");
     

    这样就不需要检查注释或者迭代每一行了。但这样就只能取回列表中的第一个 URL。

    -

    URL 类型是一个特别的类型,只作为简写类型,不在 {{domxref("DataTransfer.types","types")}} 属性规定的类型列表中出来。

    +

    URL 类型是一个特别的类型,只作为简写类型,不在 {{domxref("DataTransfer.types","types")}} 属性规定的类型列表中出来。

    有时你可能支持不同的格式,而你希望取回数据的格式是支持格式中最具体的一种。在这个例子中,放置目标支持三种格式。

    @@ -299,15 +299,15 @@

    执行放置

    完成拖拽

    -

    一旦拖拽完成,{{event("dragend")}} 事件会在拖拽源头(即触发 {{event("dragstart")}} 的元素)上发生。无论拖拽是成功还是被取消,这个事件都会被触发。然而,你可以使用 {{domxref("DataTransfer.dropEffect","dropEffect")}} 属性来决定执行什么放置操作。

    +

    一旦拖拽完成,{{event("dragend")}} 事件会在拖拽源头(即触发 {{event("dragstart")}} 的元素)上发生。无论拖拽是成功还是被取消,这个事件都会被触发。然而,你可以使用 {{domxref("DataTransfer.dropEffect","dropEffect")}} 属性来决定执行什么放置操作。

    -

    如果在{{event("dragend")}} 事件中,{{domxref("DataTransfer.dropEffect","dropEffect")}} 属性值为 none,则拖拽会被取消。否则,这个属性会规定需要执行什么操作。源头元素可使用这个信息以在拖拽操作完成后从原来的位置移除被拖拽的项目。{{domxref("DataTransfer.mozUserCancelled","mozUserCancelled")}} 属性会在用户取消拖拽(按下 Esc 键)时设置为 true,在拖拽因为其他原因如无效放置目标等被取消时,或拖拽成功时,则设置为 false。

    +

    如果在{{event("dragend")}} 事件中,{{domxref("DataTransfer.dropEffect","dropEffect")}} 属性值为 none,则拖拽会被取消。否则,这个属性会规定需要执行什么操作。源头元素可使用这个信息以在拖拽操作完成后从原来的位置移除被拖拽的项目。{{domxref("DataTransfer.mozUserCancelled","mozUserCancelled")}} 属性会在用户取消拖拽(按下 Esc 键)时设置为 true,在拖拽因为其他原因如无效放置目标等被取消时,或拖拽成功时,则设置为 false。

    -

    放置可发生在同一窗口或另一个应用程序中。两种情况都会触发 {{event("dragend")}} 事件。事件的 {{domxref("MouseEvent.screenX","screenX")}} 和 {{domxref("MouseEvent.screenY","screenY")}} 属性会被设置为放置发生时鼠标在屏幕上的坐标。

    +

    放置可发生在同一窗口或另一个应用程序中。两种情况都会触发 {{event("dragend")}} 事件。事件的 {{domxref("MouseEvent.screenX","screenX")}} 和 {{domxref("MouseEvent.screenY","screenY")}} 属性会被设置为放置发生时鼠标在屏幕上的坐标。

    -

    {{event("dragend")}} 事件结束后,整个拖放操作就完成了。

    +

    {{event("dragend")}} 事件结束后,整个拖放操作就完成了。

    -

    [1] 在 Gecko 内核中,如果源头节点在拖拽过程中(如放置或 {{event("dragover")}} 中)被移动或移除了,则不会触发 {{event("dragend")}} 事件。参见 bug 460801

    +

    [1] 在 Gecko 内核中,如果源头节点在拖拽过程中(如放置或 {{event("dragover")}} 中)被移动或移除了,则不会触发 {{event("dragend")}} 事件。参见 bug 460801

    参见

    diff --git a/files/zh-cn/web/api/html_drag_and_drop_api/file_drag_and_drop/index.html b/files/zh-cn/web/api/html_drag_and_drop_api/file_drag_and_drop/index.html index d8a64c9f86bb72..e30d3940c1cd3b 100644 --- a/files/zh-cn/web/api/html_drag_and_drop_api/file_drag_and_drop/index.html +++ b/files/zh-cn/web/api/html_drag_and_drop_api/file_drag_and_drop/index.html @@ -13,13 +13,13 @@

    定义拖放区域

    -

    触发 {{event("drop")}} 事件的目标元素需要一个{{domxref("GlobalEventHandlers.ondrop","ondrop")}} 事件处理函数 。下面这一段代码以一个 {{HTMLelement("div")}} 元素为例展示了这些工作是如何完成的:

    +

    触发 {{event("drop")}} 事件的目标元素需要一个{{domxref("GlobalEventHandlers.ondrop","ondrop")}} 事件处理函数 。下面这一段代码以一个 {{HTMLelement("div")}} 元素为例展示了这些工作是如何完成的:

    <div id="drop_zone" ondrop="dropHandler(event);">
       <p>Drag one or more files to this Drop Zone ...</p>
     </div>
    -

    一般来说,在实际应用中需要定义一个 {{event("dragover")}} 事件的处理函数并在其中加入关闭浏览器默认拖放行为的代码。你需要定义一个 {{domxref("GlobalEventHandlers.ondragover","ondragover")}} 事件处理函数:

    +

    一般来说,在实际应用中需要定义一个 {{event("dragover")}} 事件的处理函数并在其中加入关闭浏览器默认拖放行为的代码。你需要定义一个 {{domxref("GlobalEventHandlers.ondragover","ondragover")}} 事件处理函数:

    <div id="drop_zone" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);">
       <p>Drag one or more files to this Drop Zone ...</p>
    @@ -36,14 +36,14 @@ 

    定义拖放区域

    -

    注意当执行将文件拖入浏览器的操作时操作系统并不会触发 dragstart 和 dragend 事件。

    +

    注意当执行将文件拖入浏览器的操作时操作系统并不会触发 dragstartdragend 事件。

    执行释放事件

    -

    当用户释放文件时 {{event("drop")}} 事件将会被触发。在下面的 drop 处理函数中,如果浏览器支持 {{domxref("DataTransferItemList")}} 接口,则可以使用 {{domxref("DataTransferItem.getAsFile","getAsFile()")}} 来获取每个文件;否则使用 {{domxref("DataTransfer")}} 接口的 {{domxref("DataTransfer.files","files")}} 属性来获取每个文件。

    +

    当用户释放文件时 {{event("drop")}} 事件将会被触发。在下面的 drop 处理函数中,如果浏览器支持 {{domxref("DataTransferItemList")}} 接口,则可以使用 {{domxref("DataTransferItem.getAsFile","getAsFile()")}} 来获取每个文件;否则使用 {{domxref("DataTransfer")}} 接口的 {{domxref("DataTransfer.files","files")}} 属性来获取每个文件。

    -

    这个示例展示了如何讲每个被拖动的文件的名字输出到控制台。在实际应用中可能会用到 {{domxref("File","File API")}} 来处理一个文件。

    +

    这个示例展示了如何讲每个被拖动的文件的名字输出到控制台。在实际应用中可能会用到 {{domxref("File","File API")}} 来处理一个文件。

    注意在这个例子中,任何被拖动的非文件内容都会被忽略。

    @@ -63,7 +63,7 @@

    执行释放事件

    } } } else { -  // Use DataTransfer interface to access the file(s) + // Use DataTransfer interface to access the file(s) for (var i = 0; i < ev.dataTransfer.files.length; i++) { console.log('... file[' + i + '].name = ' + ev.dataTransfer.files[i].name); } @@ -72,7 +72,7 @@

    执行释放事件

    阻止浏览器的默认释放行为

    -

    下面的 {{event("dragover")}} 事件处理函数调用  {{domxref("Event.preventDefault","preventDefault()")}} 来关闭浏览器的默认拖动和释放行为。

    +

    下面的 {{event("dragover")}} 事件处理函数调用 {{domxref("Event.preventDefault","preventDefault()")}} 来关闭浏览器的默认拖动和释放行为。

    function dragOverHandler(ev) {
       console.log('File(s) in drop zone');
    diff --git a/files/zh-cn/web/api/html_drag_and_drop_api/index.html b/files/zh-cn/web/api/html_drag_and_drop_api/index.html
    index 206bf2ed41d715..02a552c6037b68 100644
    --- a/files/zh-cn/web/api/html_drag_and_drop_api/index.html
    +++ b/files/zh-cn/web/api/html_drag_and_drop_api/index.html
    @@ -90,7 +90,7 @@ 

    接口

    给应用程序添加 HTML 拖放功能,{{domxref("DragEvent")}} 和 {{domxref("DataTransfer")}} 接口应该是唯二需要的接口(Firefox 给 {{domxref("DataTransfer")}} 添加了一些 Gecko 专有的扩展功能,但这些扩展只在 Firefox 上可用)。

    -

    每个 {{domxref("DataTransfer")}} 都包含一个  {{domxref("DataTransfer.items","items")}} 属性,这个属性是 {{domxref("DataTransferItem")}} 对象的 {{domxref("DataTransferItemList","list")}}。一个 {{domxref("DataTransferItem")}} 代表一个拖拽项目,每个项目都有一个 {{domxref("DataTransferItem.kind","kind")}} 属性(string 或 file)和一个表示数据项目 MIME 类型的 {{domxref("DataTransferItem.type","type")}} 属性。{{domxref("DataTransferItem")}} 对象也有获取拖拽项目数据的方法。

    +

    每个 {{domxref("DataTransfer")}} 都包含一个 {{domxref("DataTransfer.items","items")}} 属性,这个属性是 {{domxref("DataTransferItem")}} 对象的 {{domxref("DataTransferItemList","list")}}。一个 {{domxref("DataTransferItem")}} 代表一个拖拽项目,每个项目都有一个 {{domxref("DataTransferItem.kind","kind")}} 属性(stringfile)和一个表示数据项目 MIME 类型的 {{domxref("DataTransferItem.type","type")}} 属性。{{domxref("DataTransferItem")}} 对象也有获取拖拽项目数据的方法。

    {{domxref("DataTransferItemList")}} 对象是 {{domxref("DataTransferItem")}} 对象的列表。这个列表对象包含以下方法:向列表中添加拖拽项,从列表中移除拖拽项和清空列表中所有的拖拽项。

    @@ -100,7 +100,7 @@

    接口

    Gecko 专用接口

    -

    Mozilla 和 Firefox 支持一些不在标准拖放模型中的特性。 它们是一些帮助实现拖拽多个项目和拖拽非文本内容(如文件)的便捷函数。想要了解更多信息,请参见 拖放多个项目。另外,请查看 {{domxref("DataTransfer")}} 参考页以获取所有 Gecko 专有属性Gecko 专有方法

    +

    Mozilla 和 Firefox 支持一些不在标准拖放模型中的特性。 它们是一些帮助实现拖拽多个项目和拖拽非文本内容(如文件)的便捷函数。想要了解更多信息,请参见 拖放多个项目。另外,请查看 {{domxref("DataTransfer")}} 参考页以获取所有 Gecko 专有属性Gecko 专有方法

    基础

    @@ -126,7 +126,7 @@

    确定什么是可拖拽的

    <p id="p1" draggable="true">This element is draggable.</p>
    -

    查看更多 draggable 属性 和 拖拽操作指南

    +

    查看更多 draggable 属性拖拽操作指南

    定义拖拽数据

    @@ -142,7 +142,7 @@

    定义拖拽数据

    }
    -

    查看 推荐拖拽类型 了解可拖拽的常见数据类型(如文本、HTML、链接和文件),移步 拖拽数据 获取更多有关拖拽数据的信息。

    +

    查看 推荐拖拽类型 了解可拖拽的常见数据类型(如文本、HTML、链接和文件),移步 拖拽数据 获取更多有关拖拽数据的信息。

    定义拖拽图像

    @@ -158,7 +158,7 @@

    定义拖拽图像

    } -

    欲了解更多关于拖拽图像的信息,见 设置拖拽图像

    +

    欲了解更多关于拖拽图像的信息,见 设置拖拽图像

    定义拖拽效果

    @@ -205,7 +205,7 @@

    定义一个放置区

    注意每个处理程序调用 {{domxref("Event.preventDefault","preventDefault()")}} 来阻止对这个事件的其它处理过程(如触点事件或指针事件)。

    -

    欲了解更多信息,参见 指定释放目标

    +

    欲了解更多信息,参见 指定释放目标

    处理放置效果

    @@ -235,17 +235,17 @@

    处理放置效果

    <div id="target" ondrop="drop_handler(event)" ondragover="dragover_handler(event)">Drop Zone</div> -

    更多信息请参见 执行释放

    +

    更多信息请参见 执行释放

    拖拽结束

    拖拽操作结束时,在源元素(开始拖拽时的目标元素)上触发 {{event("dragend")}} 事件。不管拖拽是完成还是被取消这个事件都会被触发。{{event("dragend")}} 事件处理程序可以检查{{domxref("DataTransfer.dropEffect","dropEffect")}} 属性的值来确认拖拽成功与否。

    -

    更多关于处理拖拽结束的信息请参见 结束拖拽

    +

    更多关于处理拖拽结束的信息请参见 结束拖拽

    互操作性

    -

    在 数据交换对象接口的浏览器兼容性表 中可以看到拖放在桌面浏览器中相对支持得比较完整(除了 {{domxref("DataTransferItem")}} 和 {{domxref("DataTransferItemList")}} 接口支持得较少)。这个数据也显示出拖放操作在移动浏览器中支持得非常弱。

    +

    数据交换对象接口的浏览器兼容性表 中可以看到拖放在桌面浏览器中相对支持得比较完整(除了 {{domxref("DataTransferItem")}} 和 {{domxref("DataTransferItemList")}} 接口支持得较少)。这个数据也显示出拖放操作在移动浏览器中支持得非常弱。

    示例和演示

    @@ -254,7 +254,7 @@

    示例和演示

  • 使用 DataTransferListItem 接口拷贝和移动元素
  • 拖放文件;仅 Firefox 支持:http://jsfiddle.net/9C2EF/
  • 拖放文件;所有浏览器支持:https://jsbin.com/hiqasek/
  • -
  • 使用了拖放 API 的停车小页面:https://park.glitch.me/ (在 这里 编辑)
  • +
  • 使用了拖放 API 的停车小页面:https://park.glitch.me/ (在 这里 编辑)
  • 规范

    diff --git a/files/zh-cn/web/api/html_drag_and_drop_api/multiple_items/index.html b/files/zh-cn/web/api/html_drag_and_drop_api/multiple_items/index.html index 67792135ad9eaf..2cd85a16bd083e 100644 --- a/files/zh-cn/web/api/html_drag_and_drop_api/multiple_items/index.html +++ b/files/zh-cn/web/api/html_drag_and_drop_api/multiple_items/index.html @@ -7,12 +7,12 @@

    重要:
    - 所有带有 moz 前缀的属性和方法(例如 mozSetDataAt() )都是 Gecko 浏览器引擎所特有的接口。这些接口只能在基于 Gecko 引擎的浏览器上使用。

    + 所有带有 moz 前缀的属性和方法(例如 mozSetDataAt() )都是 Gecko 浏览器引擎所特有的接口。这些接口只能在基于 Gecko 引擎的浏览器上使用。

    -

    Mozilla 提供了一些额外的非标准方法来支持多个元素的拖拽。这些方法中映射了 {{domxref("DataTransfer.types","types")}} 属性以及 {{domxref("DataTransfer.getData","getData()")}},{{domxref("DataTransfer.setData","setData()")}} 和 {{domxref("DataTransfer.clearData","clearData()")}} 方法。不过,这些方法可以接受额外的参数来指定需要获取、修改或是移除的元素的下标。

    +

    Mozilla 提供了一些额外的非标准方法来支持多个元素的拖拽。这些方法中映射了 {{domxref("DataTransfer.types","types")}} 属性以及 {{domxref("DataTransfer.getData","getData()")}},{{domxref("DataTransfer.setData","setData()")}} 和 {{domxref("DataTransfer.clearData","clearData()")}} 方法。不过,这些方法可以接受额外的参数来指定需要获取、修改或是移除的元素的下标。

    -

    本文中描述的拖拽过程均使用 {{domxref("DataTransfer")}} 接口。该过程不会使用 {{domxref("DataTransferItem")}} 接口,也不会使用 {{domxref("DataTransferItemList")}} 接口。

    +

    本文中描述的拖拽过程均使用 {{domxref("DataTransfer")}} 接口。该过程不会使用 {{domxref("DataTransferItem")}} 接口,也不会使用 {{domxref("DataTransferItemList")}} 接口。

    基于索引的添加和获取

    @@ -30,7 +30,7 @@

    基于索引的添加和获取

    event.dataTransfer.mozClearDataAt("text/plain", 1);
     
    -

    注意:移除一个元素中的全部类型的数据项后将会使整个元素移除,导致后面的元素往前移动,索引将会产生变化(相应减小)。 例如:

    +

    注意:移除一个元素中的全部类型的数据项后将会使整个元素移除,导致后面的元素往前移动,索引将会产生变化(相应减小)。 例如:

    var dt = event.dataTransfer;
     dt.mozSetDataAt("text/uri-list", "URL1", 0);
    @@ -60,11 +60,11 @@ 

    基于索引的添加和获取

    比较常见的使用多元素拖拽的场景,例如多个文件或者多个书签的拖拽中,记得给每个元素设置合适的数据项类型。尽管不是必须的,但你应该为所有元素设置一致的数据项类型,这可以确保目标元素接收到和预期一致的数据。

    -

    你可以通过检查 {{domxref("DataTransfer.mozItemCount","mozItemCount")}} 属性来判断是否有多个元素被拖拽。该属性的值等于当前被拖拽的元素的个数。如果某个拖拽的目标元素只接受单个拖拽元素,它可以直接拒绝这次拖拽操作或者只接受其中的第一个元素。若需要拒绝这些元素,你可以不阻止 {{event("dragover")}} 事件,或者设置 {{domxref("DataTransfer.effectAllowed","effectAllowed")}} 属性为 none。最好将两者结合使用,因为有可能另一个监听函数已经阻止了事件。

    +

    你可以通过检查 {{domxref("DataTransfer.mozItemCount","mozItemCount")}} 属性来判断是否有多个元素被拖拽。该属性的值等于当前被拖拽的元素的个数。如果某个拖拽的目标元素只接受单个拖拽元素,它可以直接拒绝这次拖拽操作或者只接受其中的第一个元素。若需要拒绝这些元素,你可以不阻止 {{event("dragover")}} 事件,或者设置 {{domxref("DataTransfer.effectAllowed","effectAllowed")}} 属性为 none。最好将两者结合使用,因为有可能另一个监听函数已经阻止了事件。

    若只接受拖拽的第一个元素,可以使用 {{domxref("DataTransfer.getData","getData()")}} 方法,就和处理单个元素一样。拖拽的目标只需支持单个元素的拖拽而无需任何额外的操作就可以适用于这个场景。

    -

    同时,你也可以使用 {{domxref("DataTransfer.mozGetDataAt","mozGetDataAt()")}} 方法来获取指定的拖拽元素。下面这个例子展示了如何获取到拖拽元素中的所有文件类型数据,并将他们加入到一个数组中。

    +

    同时,你也可以使用 {{domxref("DataTransfer.mozGetDataAt","mozGetDataAt()")}} 方法来获取指定的拖拽元素。下面这个例子展示了如何获取到拖拽元素中的所有文件类型数据,并将他们加入到一个数组中。

    function onDrop(event)
     {
    @@ -75,21 +75,21 @@ 

    基于索引的添加和获取

    }
    -

    如果你想知道指定的类型在某个元素上是否存在,你可以使用 {{domxref("DataTransfer.mozTypesAt","mozTypesAt")}} 方法。与{{domxref("DataTransfer.types","types")}} 属性类似,它返回元素的数据类型列表。访问 {{domxref("DataTransfer.types","types ")}} 属性就相当于取索引为 0 的元素的数据类型列表。

    +

    如果你想知道指定的类型在某个元素上是否存在,你可以使用 {{domxref("DataTransfer.mozTypesAt","mozTypesAt")}} 方法。与{{domxref("DataTransfer.types","types")}} 属性类似,它返回元素的数据类型列表。访问 {{domxref("DataTransfer.types","types ")}} 属性就相当于取索引为 0 的元素的数据类型列表。

    var types = event.dataTransfer.mozTypesAt(1);
     

    拖拽非字符串的数据

    -

    上述方法不仅限于字符串类型的数据;你可以为数据指定任意类型。例如,文件数据使用 application/x-moz-file 类型,存储为 nsIFile 对象。但是因为 {{domxref("DataTransfer.setData","setData()")}} 方法只支持字符串,所以在这种情况下不能用来指定文件。应该使用的是 {{domxref("DataTransfer.mozSetDataAt","mozSetDataAt()")}} 方法。

    +

    上述方法不仅限于字符串类型的数据;你可以为数据指定任意类型。例如,文件数据使用 application/x-moz-file 类型,存储为 nsIFile 对象。但是因为 {{domxref("DataTransfer.setData","setData()")}} 方法只支持字符串,所以在这种情况下不能用来指定文件。应该使用的是 {{domxref("DataTransfer.mozSetDataAt","mozSetDataAt()")}} 方法。

    dt.mozSetDataAt("application/x-moz-file", file, 0);
     

    通过使用这个方法,你可以传输任意的对象,尽管你可能不需要支持多元素的拖拽,但还是应该传入 0 当作索引。

    -

    同样的,你将需要使用 {{domxref("DataTransfer.mozGetDataAt","mozGetDataAt()")}} 方法来获取这个文件对象或是任何其他对象。如果你使用 {{domxref("DataTransfer.getData","getData()")}} 方法,非字符类型数据将可能会使你得到一个空字符串。不过一些简单类型,像数字,是可以被转换成字符串的,所以在这种情况下使用 {{domxref("DataTransfer.getData","getData()")}} 是安全的。

    +

    同样的,你将需要使用 {{domxref("DataTransfer.mozGetDataAt","mozGetDataAt()")}} 方法来获取这个文件对象或是任何其他对象。如果你使用 {{domxref("DataTransfer.getData","getData()")}} 方法,非字符类型数据将可能会使你得到一个空字符串。不过一些简单类型,像数字,是可以被转换成字符串的,所以在这种情况下使用 {{domxref("DataTransfer.getData","getData()")}} 是安全的。

    举个例子

    @@ -144,9 +144,9 @@

    举个例子

    </body> </html>
    -

    这个例子中通过调用 {{domxref("Event.preventDefault","preventDefault()")}} 方法,阻止了 {{event("dragenter")}} 和 {{event("dragover")}} 事件。这使放置事件可以在该的元素上被触发。

    +

    这个例子中通过调用 {{domxref("Event.preventDefault","preventDefault()")}} 方法,阻止了 {{event("dragenter")}}{{event("dragover")}} 事件。这使放置事件可以在该的元素上被触发。

    -

    当放下一个元素时, dodrop 事件处理函数将会被调用。它会检查 {{domxref("DataTransfer.mozItemCount","mozItemCount")}} 属性来获取有多少元素被放下并且遍历他们。对于每个元素,都会通过调用 {{domxref("DataTransfer.mozTypesAt","mozTypesAt()")}} 方法来获得类型列表。数据类型列表也将被遍历以获取到所有和被拖拽元素相关的信息。

    +

    当放下一个元素时, dodrop 事件处理函数将会被调用。它会检查 {{domxref("DataTransfer.mozItemCount","mozItemCount")}} 属性来获取有多少元素被放下并且遍历他们。对于每个元素,都会通过调用 {{domxref("DataTransfer.mozTypesAt","mozTypesAt()")}} 方法来获得类型列表。数据类型列表也将被遍历以获取到所有和被拖拽元素相关的信息。

    当你希望检查所有拖拽元素含有的数据时,这个流程是很有用的。只需要将元素拖拽到目标上就可以看到被拖拽元素本身以及它的类型和包含的数据。

    diff --git a/files/zh-cn/web/api/html_drag_and_drop_api/recommended_drag_types/index.html b/files/zh-cn/web/api/html_drag_and_drop_api/recommended_drag_types/index.html index de59ff6f15c017..e14ae27dddb87e 100644 --- a/files/zh-cn/web/api/html_drag_and_drop_api/recommended_drag_types/index.html +++ b/files/zh-cn/web/api/html_drag_and_drop_api/recommended_drag_types/index.html @@ -172,7 +172,7 @@

    将文件拖动到一个操作系统文件夹

    dataProvider.prototype = { QueryInterface : function(iid) { if (iid.equals(Components.interfaces.nsIFlavorDataProvider) -                  || iid.equals(Components.interfaces.nsISupports)) + || iid.equals(Components.interfaces.nsISupports)) return this; throw Components.results.NS_NOINTERFACE; }, diff --git a/files/zh-cn/web/api/htmlanchorelement/hash/index.html b/files/zh-cn/web/api/htmlanchorelement/hash/index.html index 70d566e03caa6f..ddd4e04fdd31e3 100644 --- a/files/zh-cn/web/api/htmlanchorelement/hash/index.html +++ b/files/zh-cn/web/api/htmlanchorelement/hash/index.html @@ -10,7 +10,7 @@

    HTMLHyperlinkElementUtils.hash 属性返回一个包含“#”的 {{domxref("DOMString")}} , 后跟URL的片段标识符。

    -

    片段没有百分比解码。如果URL没有包含片段标识符,这个属性为一个空的字符串, "".

    +

    片段没有百分比解码。如果URL没有包含片段标识符,这个属性为一个空的字符串, "".

    Syntax

    diff --git a/files/zh-cn/web/api/htmlanchorelement/href/index.html b/files/zh-cn/web/api/htmlanchorelement/href/index.html index 606bef498cff4e..7e46e15d769981 100644 --- a/files/zh-cn/web/api/htmlanchorelement/href/index.html +++ b/files/zh-cn/web/api/htmlanchorelement/href/index.html @@ -8,7 +8,7 @@ ---

    {{ApiRef("URL API")}}

    -

    HTMLHyperlinkElementUtils.href 属性是一个包含整个URL的 {{domxref("USVString")}}。

    +

    HTMLHyperlinkElementUtils.href 属性是一个包含整个URL的 {{domxref("USVString")}}。

    Syntax

    diff --git a/files/zh-cn/web/api/htmlanchorelement/index.html b/files/zh-cn/web/api/htmlanchorelement/index.html index b55a163c8a6d3e..3e34f73960234d 100644 --- a/files/zh-cn/web/api/htmlanchorelement/index.html +++ b/files/zh-cn/web/api/htmlanchorelement/index.html @@ -5,15 +5,15 @@ ---
    {{APIRef("HTML DOM")}}
    -

    HTMLAnchorElement 接口表示超链接元素,并提供一些特别的属性和方法(除了那些继承自普通 {{domxref("HTMLElement")}}对象接口的之外)以用于操作这些元素的布局和显示。

    +

    HTMLAnchorElement 接口表示超链接元素,并提供一些特别的属性和方法(除了那些继承自普通 {{domxref("HTMLElement")}}对象接口的之外)以用于操作这些元素的布局和显示。

    属性(Properties)

    -

    继承其父类 {{domxref("HTMLElement")}} 的属性,并实现 {{domxref("URLUtils")}} 中(定义)的(属性)。

    +

    继承其父类 {{domxref("HTMLElement")}} 的属性,并实现 {{domxref("URLUtils")}} 中(定义)的(属性)。

    {{domxref("HTMLAnchorElement.accessKey")}}
    -
    是一个代表了单个字符的 {{domxref("DOMString")}},单个字符可以切换输入焦点到超链接。
    +
    是一个代表了单个字符的 {{domxref("DOMString")}},单个字符可以切换输入焦点到超链接。
    {{domxref("HTMLAnchorElement.charset")}} {{Deprecated_Inline}}
    Is a {{domxref("DOMString")}} representing the character encoding of the linked resource.
    {{domxref("HTMLAnchorElement.coords")}} {{Deprecated_Inline}}
    @@ -72,7 +72,7 @@

    Methods

    {{domxref("HTMLElement.blur()")}}
    -
    Removes the  keyboard focus from the current element.
    +
    Removes the keyboard focus from the current element.
    {{domxref("HTMLElement.focus()")}}
    Gives the keyboard focus to the current element.
    {{domxref("URLUtils.toString()")}}
    diff --git a/files/zh-cn/web/api/htmlanchorelement/origin/index.html b/files/zh-cn/web/api/htmlanchorelement/origin/index.html index ed3b61824f7c8c..39aeebda5a31f6 100644 --- a/files/zh-cn/web/api/htmlanchorelement/origin/index.html +++ b/files/zh-cn/web/api/htmlanchorelement/origin/index.html @@ -8,7 +8,7 @@ ---

    {{APIRef("URL API")}}

    -

    HTMLHyperlinkElementUtils.origin 只读属性是一个 {{domxref("USVString")}} ,其中包含代表URL的原始码的Unicode序列化,即:

    +

    HTMLHyperlinkElementUtils.origin 只读属性是一个 {{domxref("USVString")}} ,其中包含代表URL的原始码的Unicode序列化,即:

    • for URL using the http or https, the scheme followed by '://', followed by the domain, followed by ':', followed by the port (the default port, 80 and 443 respectively, if explicitely specified);
    • diff --git a/files/zh-cn/web/api/htmlanchorelement/referrerpolicy/index.html b/files/zh-cn/web/api/htmlanchorelement/referrerpolicy/index.html index a2276cb093e07d..c7427309528efc 100644 --- a/files/zh-cn/web/api/htmlanchorelement/referrerpolicy/index.html +++ b/files/zh-cn/web/api/htmlanchorelement/referrerpolicy/index.html @@ -6,7 +6,7 @@ ---
      {{APIRef}}{{SeeCompatTable}}
      -

      HTMLAnchorElement.referrer 属性对应于 HTML 中 {{HTMLElement("a")}} 标签的 {{htmlattrxref("referrer","a")}} 属性,它可以控制用户在点击这个链接时所发出的 HTTP 请求的 Referer 请求头的值。

      +

      HTMLAnchorElement.referrer 属性对应于 HTML 中 {{HTMLElement("a")}} 标签的 {{htmlattrxref("referrer","a")}} 属性,它可以控制用户在点击这个链接时所发出的 HTTP 请求的 Referer 请求头的值。

      语法

      @@ -18,9 +18,9 @@

      属性值

        -
      • "no-referrer" 意味着不要发送 Referer 请求头。
      • -
      • "origin"  意味着所发送的 Referer 请求头的值为当前页面的源,即 location.origin 的值。
      • -
      • "unsafe-url" 意味着所发送的 Referrer 请求头的值为当前页面完整的 url(即 location.href)去掉尾部的哈希(即 location.hash)之后的值。正如该选项的名字所言(unsafe),此选项是不安全的,它可以将一个 HTTPS 页面的路径信息透露给第三方。
      • +
      • "no-referrer" 意味着不要发送 Referer 请求头。
      • +
      • "origin" 意味着所发送的 Referer 请求头的值为当前页面的源,即 location.origin 的值。
      • +
      • "unsafe-url" 意味着所发送的 Referrer 请求头的值为当前页面完整的 url(即 location.href)去掉尾部的哈希(即 location.hash)之后的值。正如该选项的名字所言(unsafe),此选项是不安全的,它可以将一个 HTTPS 页面的路径信息透露给第三方。
      diff --git a/files/zh-cn/web/api/htmlareaelement/index.html b/files/zh-cn/web/api/htmlareaelement/index.html index 6ad8874ad77d50..70e15db8250bbc 100644 --- a/files/zh-cn/web/api/htmlareaelement/index.html +++ b/files/zh-cn/web/api/htmlareaelement/index.html @@ -7,7 +7,7 @@
      {{APIRef("HTML DOM")}}
      -

      HTMLAreaElement 接口提供了一些属性和方法 (除了常见的对象{{domxref("HTMLElement")}} 接口提供的属性和方法通过继承也能获取到) 用来控制一个area元素的布局和展现。

      +

      HTMLAreaElement 接口提供了一些属性和方法 (除了常见的对象{{domxref("HTMLElement")}} 接口提供的属性和方法通过继承也能获取到) 用来控制一个area元素的布局和展现。

      属性

      @@ -66,7 +66,7 @@

      属性

      Methods

      -

      Inherits methods from its parent, {{domxref("HTMLElement")}} and  implement those from {{domxref("URLUtils")}}.

      +

      Inherits methods from its parent, {{domxref("HTMLElement")}} and implement those from {{domxref("URLUtils")}}.

      {{domxref("URLUtils.toString()")}}
      diff --git a/files/zh-cn/web/api/htmlaudioelement/index.html b/files/zh-cn/web/api/htmlaudioelement/index.html index f11aacd890ac5c..92a2f069fa9edb 100644 --- a/files/zh-cn/web/api/htmlaudioelement/index.html +++ b/files/zh-cn/web/api/htmlaudioelement/index.html @@ -5,7 +5,7 @@ ---
      {{APIRef("HTML DOM")}}
      -

      HTMLAudioElement 接口提供对 {{HTMLElement("audio")}} 元素的属性访问及一系列操控它的方法,它基于并从 {{domxref("HTMLMediaElement")}} 接口继承属性和方法。

      +

      HTMLAudioElement 接口提供对 {{HTMLElement("audio")}} 元素的属性访问及一系列操控它的方法,它基于并从 {{domxref("HTMLMediaElement")}} 接口继承属性和方法。

      {{InheritanceDiagram(600, 120)}}

      @@ -13,16 +13,16 @@

      构造函数

      {{domxref("HTMLAudioElement.Audio", "Audio()")}}
      -
      创建并返回一个新的 HTMLAudioElement 对象,如果提供音频文件 URL,则开始加载音频文件。
      +
      创建并返回一个新的 HTMLAudioElement 对象,如果提供音频文件 URL,则开始加载音频文件。

      属性

      -

      没有具体的属性;从父类 {{domxref("HTMLMediaElement")}} 和 {{domxref("HTMLElement")}} 继承属性。

      +

      没有具体的属性;从父类 {{domxref("HTMLMediaElement")}} 和 {{domxref("HTMLElement")}} 继承属性。

      方法

      -

      从父类 {{domxref("HTMLMediaElement")}} 和 {{domxref("HTMLElement")}} 继承方法,自身不提供方法。

      +

      从父类 {{domxref("HTMLMediaElement")}} 和 {{domxref("HTMLElement")}} 继承方法,自身不提供方法。

      废弃的且仅适用于 Mozilla 的方法

      @@ -41,7 +41,7 @@

      示例

      基本用法

      -

      你可以完全使用 JavaScript 的 {{domxref("HTMLAudioElement.Audio", "Audio()")}} 构造函数来创建一个 HTMLAudioElement :

      +

      你可以完全使用 JavaScript 的 {{domxref("HTMLAudioElement.Audio", "Audio()")}} 构造函数来创建一个 HTMLAudioElement

      var audioElement = new Audio('car_horn.wav');
       
      @@ -51,10 +51,10 @@

      基本用法

      audioElement.play();
      -

      一个常见的需求是在页面加载后马上去播放音频,现代浏览器的默认自动播放策略会阻止这一行为,参见 firefox 和 chrome 寻找最佳实践和解决方案。

      +

      一个常见的需求是在页面加载后马上去播放音频,现代浏览器的默认自动播放策略会阻止这一行为,参见 firefoxchrome 寻找最佳实践和解决方案。

      -

      一些经常被使用的属性,包括 {{domxref("HTMLMediaElement.src", "src")}}、{{domxref("HTMLMediaElement.currentTime", "currentTime")}}、{{domxref("HTMLMediaElement.duration", "duration")}}、{{domxref("HTMLMediaElement.paused", "paused")}}、{{domxref("HTMLMediaElement.muted", "muted")}} 和 {{domxref("HTMLMediaElement.volume", "volume")}}。以下这段代码赋值音频文件的播放时长给一个变量:

      +

      一些经常被使用的属性,包括 {{domxref("HTMLMediaElement.src", "src")}}、{{domxref("HTMLMediaElement.currentTime", "currentTime")}}、{{domxref("HTMLMediaElement.duration", "duration")}}、{{domxref("HTMLMediaElement.paused", "paused")}}、{{domxref("HTMLMediaElement.muted", "muted")}} 和 {{domxref("HTMLMediaElement.volume", "volume")}}。以下这段代码赋值音频文件的播放时长给一个变量:

      var audioElement = new Audio('car_horn.wav');
       audioElement.addEventListener('loadeddata', () => {
      @@ -67,7 +67,7 @@ 

      基本用法

      事件

      -

      从父类 {{domxref("HTMLMediaElement")}} 和祖先 {{domxref("HTMLElement")}} 继承方法. 使用 addEventListener() 监听事件或者赋值一个事件监听器给这个接口的 oneventname 属性。

      +

      从父类 {{domxref("HTMLMediaElement")}} 和祖先 {{domxref("HTMLElement")}} 继承方法. 使用 addEventListener() 监听事件或者赋值一个事件监听器给这个接口的 oneventname 属性。

      规范

      diff --git a/files/zh-cn/web/api/htmlbaseelement/index.html b/files/zh-cn/web/api/htmlbaseelement/index.html index 0dcfb227b66f25..51c69e64525493 100644 --- a/files/zh-cn/web/api/htmlbaseelement/index.html +++ b/files/zh-cn/web/api/htmlbaseelement/index.html @@ -9,24 +9,24 @@
      {{APIRef("HTML DOM")}}
      -
       
      +
      -

      HTMLBaseElement 接口包含一份HTML文件的基础 URI设定,该对象继承了所有 {{domxref("HTMLElement")}} 接口中定义的方法与属性。

      +

      HTMLBaseElement 接口包含一份HTML文件的基础 URI设定,该对象继承了所有 {{domxref("HTMLElement")}} 接口中定义的方法与属性。

      属性

      -

      继承了其父级 {{domxref("HTMLElement")}} 的所有属性

      +

      继承了其父级 {{domxref("HTMLElement")}} 的所有属性

      {{domxref("HTMLBaseElement.href")}}
      -
      映射自 {{domxref("DOMString")}}  HTML {{htmlattrxref("href", "base")}} 特性,包含了当前文档中所有相对 URL 地址的基准URL。
      +
      映射自 {{domxref("DOMString")}} HTML {{htmlattrxref("href", "base")}} 特性,包含了当前文档中所有相对 URL 地址的基准URL。
      {{domxref("HTMLBaseElement.target")}}
      Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("target", "base")}} HTML attribute, containing a default target browsing context or frame for elements that do not have a target reference specified.

      方法

      -

      没有特殊的方法,继承了其父级 {{domxref("HTMLElement")}} 的所有特性。

      +

      没有特殊的方法,继承了其父级 {{domxref("HTMLElement")}} 的所有特性。

      Specifications

      diff --git a/files/zh-cn/web/api/htmlbodyelement/index.html b/files/zh-cn/web/api/htmlbodyelement/index.html index 33fd5300a090b6..2b1822de6f9c93 100644 --- a/files/zh-cn/web/api/htmlbodyelement/index.html +++ b/files/zh-cn/web/api/htmlbodyelement/index.html @@ -5,9 +5,9 @@ ---
      {{APIRef("HTML DOM")}}
      -
      HTMLBodyElement 接口提供了特殊的属性(除了它们继承的常规的{{ domxref("HTMLElement") }}接口)以外,还可以处理 body 元素。
      +
      HTMLBodyElement 接口提供了特殊的属性(除了它们继承的常规的{{ domxref("HTMLElement") }}接口)以外,还可以处理 body 元素。
      -
       
      +

      {{InheritanceDiagram(600, 120)}}

      @@ -50,7 +50,7 @@

      事件处理

      {{domxref("window.languagechange_event", "HTMLBodyElement.onlanguagechange")}} {{experimental_inline}}
      Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("languagechange")}} event is raised.
      {{domxref("window.message_event", "HTMLBodyElement.onmessage")}}
      -
      Is an {{event("Event_handlers", "event handler")}} called whenever an object receives a {{event("message")}} event.  
      +
      Is an {{event("Event_handlers", "event handler")}} called whenever an object receives a {{event("message")}} event.
      {{domxref("window.messageerror_event", "HTMLBodyElement.onmessageerror")}}
      Is an {{event("Event_handlers", "event handler")}} called whenever an object receives a {{event("messageerror")}} event.
      {{domxref("window.offline_event", "HTMLBodyElement.onoffline")}}
      diff --git a/files/zh-cn/web/api/htmlbuttonelement/index.html b/files/zh-cn/web/api/htmlbuttonelement/index.html index ad35675077e97e..0d89ce654a1cc4 100644 --- a/files/zh-cn/web/api/htmlbuttonelement/index.html +++ b/files/zh-cn/web/api/htmlbuttonelement/index.html @@ -70,7 +70,7 @@

      属性

      一个名字或关键字,用于表明显示服务器响应的页面。如果指定该属性,会覆盖拥有该元素的{{HTMLElement("form")}} 元素的.{{htmlattrxref("target", "form")}}属性。 - labels {{readonlyInline}} + labels {{readonlyInline}} {{domxref("NodeList")}} 一个{{HTMLElement("label")}} 元素表,说明哪些标签是归属这个button的。 @@ -102,12 +102,12 @@

      属性

      - validationMessage {{readonlyInline}} + validationMessage {{readonlyInline}} {{domxref("DOMString")}} 报告该控件不满足验证要求的,提示给用户的看的信息。如果这个控件没有验证约束(willValidate值为false),或者满足验证的要求,那么这个属性为空字符串。 - validity {{readonlyInline}} + validity {{readonlyInline}} {{domxref("ValidityState")}} 这个控件当前的验证状态。 diff --git a/files/zh-cn/web/api/htmlcanvaselement/capturestream/index.html b/files/zh-cn/web/api/htmlcanvaselement/capturestream/index.html index ee0309788c4d89..c55b6ed19c8cc9 100644 --- a/files/zh-cn/web/api/htmlcanvaselement/capturestream/index.html +++ b/files/zh-cn/web/api/htmlcanvaselement/capturestream/index.html @@ -16,7 +16,7 @@

      语法

      参数

      -
      frameRate 可选
      +
      frameRate 可选
      设置双精准度浮点值为每个帧的捕获速率。如果未设置,则每次画布更改时都会捕获一个新帧。如果设置为0,则会捕获单个帧。
      diff --git a/files/zh-cn/web/api/htmlcanvaselement/getcontext/index.html b/files/zh-cn/web/api/htmlcanvaselement/getcontext/index.html index c35ec1cb3db837..8916fa88b37887 100644 --- a/files/zh-cn/web/api/htmlcanvaselement/getcontext/index.html +++ b/files/zh-cn/web/api/htmlcanvaselement/getcontext/index.html @@ -8,7 +8,7 @@ ---
      {{APIRef("Canvas API")}}
      -

      HTMLCanvasElement.getContext() 方法返回{{jsxref("canvas")}} 的上下文,如果上下文没有定义则返回 {{jsxref("null")}} .

      +

      HTMLCanvasElement.getContext() 方法返回{{jsxref("canvas")}} 的上下文,如果上下文没有定义则返回 {{jsxref("null")}} .

      在同一个 canvas 上以相同的 contextType 多次调用此方法只会返回同一个上下文。

      @@ -24,9 +24,9 @@

      参数

      是一个指示使用何种上下文的 {{domxref("DOMString")}} 。可能的值是:
      • "2d", 建立一个 {{domxref("CanvasRenderingContext2D")}} 二维渲染上下文。
      • -
      • "webgl" (或"experimental-webgl") 这将创建一个 {{domxref("WebGLRenderingContext")}} 三维渲染上下文对象。只在实现WebGL 版本 1(OpenGL ES 2.0) 的浏览器上可用。
      • -
      • "webgl2" (或 "experimental-webgl2") 这将创建一个 {{domxref("WebGL2RenderingContext")}} 三维渲染上下文对象。只在实现 WebGL 版本 2 (OpenGL ES 3.0) 的浏览器上可用。{{experimental_inline}}
      • -
      • "bitmaprenderer" 这将创建一个只提供将 canvas 内容替换为指定{{domxref("ImageBitmap")}}功能的{{domxref("ImageBitmapRenderingContext")}}  。
      • +
      • "webgl" (或"experimental-webgl") 这将创建一个 {{domxref("WebGLRenderingContext")}} 三维渲染上下文对象。只在实现WebGL 版本 1(OpenGL ES 2.0) 的浏览器上可用。
      • +
      • "webgl2" (或 "experimental-webgl2") 这将创建一个 {{domxref("WebGL2RenderingContext")}} 三维渲染上下文对象。只在实现 WebGL 版本 2 (OpenGL ES 3.0) 的浏览器上可用。{{experimental_inline}}
      • +
      • "bitmaprenderer" 这将创建一个只提供将 canvas 内容替换为指定{{domxref("ImageBitmap")}}功能的{{domxref("ImageBitmapRenderingContext")}} 。
      @@ -44,7 +44,7 @@

      参数

      • alpha: {{jsxref("boolean")}}值表明{{jsxref("canvas")}}包含一个{{jsxref("alpha")}}通道。如果设置为{{jsxref("false")}}, 浏览器将认为{{jsxref("canvas")}}背景总是不透明的,这样可以加速绘制透明的内容和图片。
      • -
      • {{non-standard_inline}} (Gecko only) willReadFrequently: {{jsxref("boolean")}}值表明是否有重复读取计划。经常使用{{domxref("CanvasRenderingContext2D.getImageData", "getImageData()")}},这将迫使软件使用 2D {{jsxref("canvas")}} 并 节省内存(而不是硬件加速)。这个方案适用于存在属性 gfx.canvas.willReadFrequently的环境。并设置为{{jsxref("true")}} (缺省情况下,只有 B2G / Firefox OS).
      • +
      • {{non-standard_inline}} (Gecko only) willReadFrequently: {{jsxref("boolean")}}值表明是否有重复读取计划。经常使用{{domxref("CanvasRenderingContext2D.getImageData", "getImageData()")}},这将迫使软件使用 2D {{jsxref("canvas")}} 并 节省内存(而不是硬件加速)。这个方案适用于存在属性 gfx.canvas.willReadFrequently的环境。并设置为{{jsxref("true")}} (缺省情况下,只有 B2G / Firefox OS).
      • {{non-standard_inline}} (Blink only) storage: {{jsxref("string")}} 这样表示使用哪种方式存储 (默认为:持久("persistent")).
      WebGL 上下文属性: @@ -95,7 +95,7 @@

      返回值

      {{domxref("RenderingContext")}} 返回值是下列之一:

        -
      • {{domxref("CanvasRenderingContext2D")}} 为 "2d",
      • +
      • {{domxref("CanvasRenderingContext2D")}} 为 "2d",
      • {{domxref("WebGLRenderingContext")}} 为"webgl""experimental-webgl",
      • {{domxref("WebGL2RenderingContext")}} 为"webgl2""experimental-webgl2", 或者
      • {{domxref("ImageBitmapRenderingContext")}} 为"bitmaprenderer".
      • @@ -110,7 +110,7 @@

        例子

        <canvas id="canvas" width="300" height="300"></canvas>
         
        -

        通过如下代码可以获取 {{jsxref("canvas")}}2d 上下文:

        +

        通过如下代码可以获取 {{jsxref("canvas")}}2d 上下文:

        var canvas = document.getElementById("canvas");
         var ctx = canvas.getContext("2d");
        @@ -134,5 +134,5 @@ 

        另请参阅

        • {{domxref("HTMLCanvasElement")}}.
        • {{domxref("OffscreenCanvas.getContext()")}}
        • -
        • 可用的上下文: {{domxref("CanvasRenderingContext2D")}}, {{domxref("WebGLRenderingContext")}} 和 {{domxref("WebGL2RenderingContext")}} and {{domxref("ImageBitmapRenderingContext")}}.
        • +
        • 可用的上下文: {{domxref("CanvasRenderingContext2D")}}, {{domxref("WebGLRenderingContext")}} 和 {{domxref("WebGL2RenderingContext")}} and {{domxref("ImageBitmapRenderingContext")}}.
        diff --git a/files/zh-cn/web/api/htmlcanvaselement/height/index.html b/files/zh-cn/web/api/htmlcanvaselement/height/index.html index 73d8108ca48ef1..054055c35e4d42 100644 --- a/files/zh-cn/web/api/htmlcanvaselement/height/index.html +++ b/files/zh-cn/web/api/htmlcanvaselement/height/index.html @@ -9,7 +9,7 @@
      -

      HTMLCanvasElement.height 属性是一个正整数 ,使用了{{HTMLElement("canvas")}} 元素的 HTML 属性{{htmlattrxref("height", "canvas")}}来反映该元素高度的 CSS 像素值。当该属性没有被定义,或被定义为一个无效值(如负值)时, 将使用150作为它的默认值。

      +

      HTMLCanvasElement.height 属性是一个正整数 ,使用了{{HTMLElement("canvas")}} 元素的 HTML 属性{{htmlattrxref("height", "canvas")}}来反映该元素高度的 CSS 像素值。当该属性没有被定义,或被定义为一个无效值(如负值)时, 将使用150作为它的默认值。

      控制 canvas 元素大小的属性有两个,这是其中一个,还有一个是{{domxref("HTMLCanvasElement.width")}}。

      diff --git a/files/zh-cn/web/api/htmlcanvaselement/index.html b/files/zh-cn/web/api/htmlcanvaselement/index.html index 6463ba06d51afd..df210fa8941121 100644 --- a/files/zh-cn/web/api/htmlcanvaselement/index.html +++ b/files/zh-cn/web/api/htmlcanvaselement/index.html @@ -15,13 +15,13 @@

      属性

      {{domxref("HTMLCanvasElement.height")}}
      -
      是一个正整数,反映了{{HTMLElement("canvas")}} 元素的{{htmlattrxref("height", "canvas")}} HTML 属性,以 CSS 像素表示。 如果未指定属性,或者将其设置为无效值(例如负数),则使用默认值 150。
      +
      是一个正整数,反映了{{HTMLElement("canvas")}} 元素的{{htmlattrxref("height", "canvas")}} HTML 属性,以 CSS 像素表示。 如果未指定属性,或者将其设置为无效值(例如负数),则使用默认值 150。
      {{domxref("HTMLCanvasElement.width")}}
      -
      是一个正整数,反映了{{HTMLElement("canvas")}} 元素的{{htmlattrxref("width", "canvas")}} HTML 属性,以 CSS 像素表示。 如果未指定属性,或者将其设置为无效值(例如负数),则使用默认值 300。
      +
      是一个正整数,反映了{{HTMLElement("canvas")}} 元素的{{htmlattrxref("width", "canvas")}} HTML 属性,以 CSS 像素表示。 如果未指定属性,或者将其设置为无效值(例如负数),则使用默认值 300。
      {{domxref("HTMLCanvasElement.mozOpaque")}} {{non-standard_inline}} {{deprecated_inline}}
      是反映 {{HTMLElement("canvas")}}元素的{{htmlattrxref("moz-opaque", "canvas")}} 属性的{{jsxref("Boolean")}}。 它让画布知道半透明性是否会成为一个因素。 如果画布知道没有透明感,则可以优化绘画性能。 仅基于 Mozilla 的浏览器支持此功能, 可以使用标准化的{{domxref("HTMLCanvasElement.getContext()", "canvas.getContext('2d', { alpha: false })")}} 代替。
      {{domxref("HTMLCanvasElement.mozPrintCallback")}}{{non-standard_inline}}
      -
      是最初为空的函数。 Web 内容可以将其设置为 JavaScript 函数,该函数将在打印页面时重新绘制画布时调用。 调用时,回调将传递一个实现了MozCanvasPrintState接口的“ printState”对象。 回调可以从 printState 对象获取要绘制的上下文,然后必须在完成时在其上调用 done() 。 mozPrintCallback 的目的是在所使用打印机的分辨率下获得较高分辨率的画布渲染。 请参阅此博客文章
      +
      是最初为空的函数。 Web 内容可以将其设置为 JavaScript 函数,该函数将在打印页面时重新绘制画布时调用。 调用时,回调将传递一个实现了MozCanvasPrintState接口的“ printState”对象。 回调可以从 printState 对象获取要绘制的上下文,然后必须在完成时在其上调用 done() 。 mozPrintCallback 的目的是在所使用打印机的分辨率下获得较高分辨率的画布渲染。 请参阅此博客文章

      方法

      @@ -32,7 +32,7 @@

      方法

      {{domxref("HTMLCanvasElement.captureStream()")}} {{experimental_inline}}
      返回{{domxref("CanvasCaptureMediaStream")}} ,它是对画布表面的实时视频捕获。
      {{domxref("HTMLCanvasElement.getContext()")}}
      -
      返回画布上的绘图上下文;如果不支持上下文 ID,则返回 null。 绘图上下文可让您在画布上绘图。 调用 getContext 传入"2d" 可以返回一个{{domxref("CanvasRenderingContext2D")}}对象,也可以传入"webgl"(或"experimental-webgl")返回一个{{domxref("WebGLRenderingContext")}} 对象。 此上下文仅在实现WebGL的浏览器上可用。
      +
      返回画布上的绘图上下文;如果不支持上下文 ID,则返回 null。 绘图上下文可让您在画布上绘图。 调用 getContext 传入"2d" 可以返回一个{{domxref("CanvasRenderingContext2D")}}对象,也可以传入"webgl"(或"experimental-webgl")返回一个{{domxref("WebGLRenderingContext")}} 对象。 此上下文仅在实现WebGL的浏览器上可用。
      {{domxref("HTMLCanvasElement.toDataURL()")}}
      返回一个数据 URL,该 URL 包含由类型参数指定的格式的图像(默认为png)。 返回的图像分辨率为 96dpi。
      {{domxref("HTMLCanvasElement.toBlob()")}}
      @@ -43,7 +43,7 @@

      方法

      过时的方法

      {{domxref("HTMLCanvasElement.mozGetAsFile()")}} {{non-standard_inline}} {{Deprecated_Inline}}
      -
      返回代表画布中包含的图像的 {{domxref("File")}} 对象;该文件是基于内存的文件,具有指定的名称。如果未指定类型,则图像类型为 image/png。
      +
      返回代表画布中包含的图像的 {{domxref("File")}} 对象;该文件是基于内存的文件,具有指定的名称。如果未指定类型,则图像类型为 image/png。

      事件

      @@ -52,11 +52,11 @@

      事件

      webglcontextcreationerror
      -
      如果用户代理无法创建WebGLRenderingContext 或WebGL2RenderingContext 上下文,则触发该事件。
      +
      如果用户代理无法创建WebGLRenderingContextWebGL2RenderingContext 上下文,则触发该事件。
      webglcontextlost
      -
      如果用户代理检测到与WebGLRenderingContext 或WebGL2RenderingContext 对象关联的绘图缓冲区已丢失,则触发此事件。
      +
      如果用户代理检测到与WebGLRenderingContextWebGL2RenderingContext 对象关联的绘图缓冲区已丢失,则触发此事件。
      webglcontextrestored
      -
      如果用户代理为WebGLRenderingContext 或WebGL2RenderingContext 对象恢复绘图缓冲区,则触发该事件。
      +
      如果用户代理为WebGLRenderingContextWebGL2RenderingContext 对象恢复绘图缓冲区,则触发该事件。

      规范

      @@ -71,12 +71,12 @@

      规范

      {{SpecName('HTML WHATWG', "#htmlcanvaselement", "HTMLCanvasElement")}} {{Spec2('HTML WHATWG')}} - Primary definition of HTMLCanvasElement. + Primary definition of HTMLCanvasElement. {{SpecName('Media Capture DOM Elements', '#html-canvas-element-media-capture-extensions', 'HTMLCanvasElement')}} {{Spec2('Media Capture DOM Elements')}} - Adds the method captureStream(). + Adds the method captureStream(). diff --git a/files/zh-cn/web/api/htmlcanvaselement/mozopaque/index.html b/files/zh-cn/web/api/htmlcanvaselement/mozopaque/index.html index b02efc120f06df..faa2e027844a81 100644 --- a/files/zh-cn/web/api/htmlcanvaselement/mozopaque/index.html +++ b/files/zh-cn/web/api/htmlcanvaselement/mozopaque/index.html @@ -9,7 +9,7 @@ ---
      {{APIRef("Canvas API")}}{{non-standard_header}}
      -

      非标准的 HTMLCanvasElement.mozOpaque 是一种 {{jsxref("Boolean")}} 的数据反映了{{HTMLElement("canvas")}}元素的{htmlattrxref("moz-opaque", "canvas")} HTML 属性。它能够让画布(canvas)将半透明作为一个参考因素。如果画布知道没有半透明因素,作画的性能可以优化。

      +

      非标准的 HTMLCanvasElement.mozOpaque 是一种 {{jsxref("Boolean")}} 的数据反映了{{HTMLElement("canvas")}}元素的{htmlattrxref("moz-opaque", "canvas")} HTML 属性。它能够让画布(canvas)将半透明作为一个参考因素。如果画布知道没有半透明因素,作画的性能可以优化。

      当使用{{domxref("HTMLCanvasElement.getContext()")}}创建绘图上下文时,该 api 将被标准化为将 alpha 选项设置为 false。应该避免使用 mozOpaque。Firefox 将在未来停止支持它。

      @@ -26,7 +26,7 @@

      示例

      <canvas id="canvas" width="300" height="300" moz-opaque></canvas>
       
      -

      你可以获取或设置 mozOpaque 属性。例如,当 mimeType == 'image/jpeg'或类似值时,可以将其属性值设置为 true,以在不需要半透明度的情况下提高应用程序的性能。

      +

      你可以获取或设置 mozOpaque 属性。例如,当 mimeType == 'image/jpeg'或类似值时,可以将其属性值设置为 true,以在不需要半透明度的情况下提高应用程序的性能。

      var canvas = document.getElementById('canvas');
       console.log(canvas.mozOpaque); // true
      diff --git a/files/zh-cn/web/api/htmlcanvaselement/todataurl/index.html b/files/zh-cn/web/api/htmlcanvaselement/todataurl/index.html
      index a21b40243ac6e0..facf5514f35189 100644
      --- a/files/zh-cn/web/api/htmlcanvaselement/todataurl/index.html
      +++ b/files/zh-cn/web/api/htmlcanvaselement/todataurl/index.html
      @@ -9,7 +9,7 @@
       
       
       
      -

      HTMLCanvasElement.toDataURL() 方法返回一个包含图片展示的 data URI 。可以使用 type 参数其类型,默认为 PNG 格式。图片的分辨率为 96dpi。

      +

      HTMLCanvasElement.toDataURL() 方法返回一个包含图片展示的 data URI 。可以使用 type 参数其类型,默认为 PNG 格式。图片的分辨率为 96dpi。

      • 如果画布的高度或宽度是 0,那么会返回字符串“data:,”。
      • @@ -26,14 +26,14 @@

        参数

        type {{optional_inline}}
        -
        图片格式,默认为 image/png
        +
        图片格式,默认为 image/png
        encoderOptions {{optional_inline}}
        -
        在指定图片格式为 image/jpeg 或 image/webp 的情况下,可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围,将会使用默认值 0.92。其他参数会被忽略。
        +
        在指定图片格式为 image/jpeg 或 image/webp 的情况下,可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围,将会使用默认值 0.92。其他参数会被忽略。

        返回值

        -

        包含 data URI 的{{domxref("DOMString")}}。

        +

        包含 data URI 的{{domxref("DOMString")}}。

        示例

        @@ -42,7 +42,7 @@

        示例

        <canvas id="canvas" width="5" height="5"></canvas>
         
        -

        可以用这样的方式获取一个 data-URL

        +

        可以用这样的方式获取一个 data-URL

        var canvas = document.getElementById("canvas");
         var dataURL = canvas.toDataURL();
        diff --git a/files/zh-cn/web/api/htmlcanvaselement/transfercontroltooffscreen/index.html b/files/zh-cn/web/api/htmlcanvaselement/transfercontroltooffscreen/index.html
        index 401b07c8bd110c..cc322dac54d4ed 100644
        --- a/files/zh-cn/web/api/htmlcanvaselement/transfercontroltooffscreen/index.html
        +++ b/files/zh-cn/web/api/htmlcanvaselement/transfercontroltooffscreen/index.html
        @@ -9,7 +9,7 @@
         ---
         
        {{APIRef("Canvas API")}} {{SeeCompatTable}}
        -

        方法 HTMLCanvasElement.transferControlToOffscreen() 将控制转移到一个在主线程或者 web worker 的 {{domxref("OffscreenCanvas")}} 对象上。

        +

        方法 HTMLCanvasElement.transferControlToOffscreen() 将控制转移到一个在主线程或者 web worker 的 {{domxref("OffscreenCanvas")}} 对象上。

        用法

        diff --git a/files/zh-cn/web/api/htmlcanvaselement/webglcontextlost_event/index.html b/files/zh-cn/web/api/htmlcanvaselement/webglcontextlost_event/index.html index 87ad2d1f22fe71..d89d40e5deaab4 100644 --- a/files/zh-cn/web/api/htmlcanvaselement/webglcontextlost_event/index.html +++ b/files/zh-cn/web/api/htmlcanvaselement/webglcontextlost_event/index.html @@ -8,7 +8,7 @@
        -

        如果浏览器检测到与 {{domxref("WebGLRenderingContext")}}对象关联的图形缓冲区已丢失,则会触发WebGL API 中的webglcontextlost 事件。

        +

        如果浏览器检测到与 {{domxref("WebGLRenderingContext")}}对象关联的图形缓冲区已丢失,则会触发WebGL API 中的webglcontextlost 事件。

        @@ -34,7 +34,7 @@

        例子

        -

        在 {{domxref("WEBGL_lose_context")}} 扩展的帮助下,您可以模拟 webglcontextlost 事件:

        +

        在 {{domxref("WEBGL_lose_context")}} 扩展的帮助下,您可以模拟 webglcontextlost 事件:

        const canvas = document.getElementById('canvas');
         const gl = canvas.getContext('webgl');
        @@ -43,7 +43,7 @@ 

        例子

        console.log(event); }); -//WEBGL_lose_context 是 webgl 是属于 WebGLAPI 的一个扩展 API,它提供一组方法用来模拟一个 WebGLRenderingContext 上下文的丢失和恢复。 +//WEBGL_lose_context 是 webgl 是属于 WebGLAPI 的一个扩展 API,它提供一组方法用来模拟一个 WebGLRenderingContext 上下文的丢失和恢复。 gl.getExtension('WEBGL_lose_context').loseContext(); // "webglcontextlost" event is logged.
        diff --git a/files/zh-cn/web/api/htmlcanvaselement/width/index.html b/files/zh-cn/web/api/htmlcanvaselement/width/index.html index f0fd402d42beb9..52e144fdabb2ef 100644 --- a/files/zh-cn/web/api/htmlcanvaselement/width/index.html +++ b/files/zh-cn/web/api/htmlcanvaselement/width/index.html @@ -9,7 +9,7 @@ -

        HTMLCanvasElement.width 属性是一个对应 {{HTMLElement("canvas")}} 元素 CSS 像素 {{htmlattrxref("width", "canvas")}} 的正整数。当这个属性没有指定时,或者被赋予一个不合法的值,比如一个负值,默认使用 300.

        +

        HTMLCanvasElement.width 属性是一个对应 {{HTMLElement("canvas")}} 元素 CSS 像素 {{htmlattrxref("width", "canvas")}} 的正整数。当这个属性没有指定时,或者被赋予一个不合法的值,比如一个负值,默认使用 300.

        这是其中之一,另一个是 {{domxref("HTMLCanvasElement.height")}}, 它们控制了 canvas 的大小尺寸。

        diff --git a/files/zh-cn/web/api/htmlcontentelement/index.html b/files/zh-cn/web/api/htmlcontentelement/index.html index e7ead2dbcbb34a..0949104070a441 100644 --- a/files/zh-cn/web/api/htmlcontentelement/index.html +++ b/files/zh-cn/web/api/htmlcontentelement/index.html @@ -20,7 +20,7 @@

        属性

        {{domxref("HTMLContentElement.select")}}
        -
        Is a {{domxref("DOMString")}} that reflects the {{ htmlattrxref("select", "content") }} HTML attribute. The value is a comma-separated list of CSS selectors that select the content to insert in place of the <content> element.
        +
        Is a {{domxref("DOMString")}} that reflects the {{ htmlattrxref("select", "content") }} HTML attribute. The value is a comma-separated list of CSS selectors that select the content to insert in place of the <content> element.

        方法

        @@ -29,7 +29,7 @@

        方法

        {{domxref("HTMLContentElement.getDistributedNodes()")}}
        -
        Returns a static {{domxref("NodeList")}} of the {{glossary("distributed nodes")}} associated with this <content> element. 
        +
        Returns a static {{domxref("NodeList")}} of the {{glossary("distributed nodes")}} associated with this <content> element.

        规范

        diff --git a/files/zh-cn/web/api/htmldataelement/value/index.html b/files/zh-cn/web/api/htmldataelement/value/index.html index 8802d8c764df44..930019e41b0106 100644 --- a/files/zh-cn/web/api/htmldataelement/value/index.html +++ b/files/zh-cn/web/api/htmldataelement/value/index.html @@ -5,7 +5,7 @@ ---

        {{APIRef("HTML DOM")}}

        -

        {{domxref("HTMLDataElement")}} 接口的 value 属性返回反映   {{htmlattrxref("value", "data")}} HTML 属性的{{domxref("DOMString")}} 。

        +

        {{domxref("HTMLDataElement")}} 接口的 value 属性返回反映 {{htmlattrxref("value", "data")}} HTML 属性的{{domxref("DOMString")}} 。

        Syntax

        diff --git a/files/zh-cn/web/api/htmldetailselement/index.html b/files/zh-cn/web/api/htmldetailselement/index.html index 3e734f07adb652..7b1146275cc48e 100644 --- a/files/zh-cn/web/api/htmldetailselement/index.html +++ b/files/zh-cn/web/api/htmldetailselement/index.html @@ -5,7 +5,7 @@ ---

        {{APIRef("HTML DOM")}}

        -

        HTMLDetailsElement 接口提供了特殊的属性 (除了常规的 {{domxref("HTMLElement")}} 接口之外,它还可以通过继承获得这些属性) 用于操作 {{HTMLElement("details")}} 元素.

        +

        HTMLDetailsElement 接口提供了特殊的属性 (除了常规的 {{domxref("HTMLElement")}} 接口之外,它还可以通过继承获得这些属性) 用于操作 {{HTMLElement("details")}} 元素.

        {{InheritanceDiagram(600, 120)}}

        @@ -15,12 +15,12 @@

        属性

        {{domxref("HTMLDetailsElement.open")}}
        -
        是一个 {{domxref("boolean")}} 反射 {{htmlattrxref("open", "details")}} HTML属性, 指示是否向用户显示元素的内容 (不包括 {{HTMLElement("summary")}})
        +
        是一个 {{domxref("boolean")}} 反射 {{htmlattrxref("open", "details")}} HTML属性, 指示是否向用户显示元素的内容 (不包括 {{HTMLElement("summary")}})

        方法

        -

        没有特定的方法;继承其父方法 {{domxref("HTMLElement")}}.

        +

        没有特定的方法;继承其父方法 {{domxref("HTMLElement")}}.

        规格

        @@ -40,5 +40,5 @@

        浏览器兼容性

        另见

          -
        • 实现此接口的HTML元素: {{HTMLElement("details")}}
        • +
        • 实现此接口的HTML元素: {{HTMLElement("details")}}
        diff --git a/files/zh-cn/web/api/htmldialogelement/close_event/index.html b/files/zh-cn/web/api/htmldialogelement/close_event/index.html index 864a9b97d09a19..a00f00a4372b18 100644 --- a/files/zh-cn/web/api/htmldialogelement/close_event/index.html +++ b/files/zh-cn/web/api/htmldialogelement/close_event/index.html @@ -16,12 +16,12 @@ ---
        {{ApiRef("HTML DOM")}} {{SeeCompatTable}}
        -

        {{domxref("GlobalEventHandlers")}} mixin 的 onclose 属性是一个 {{event("Event_handlers", "event handler")}}, 用来处理发送给 {{HTMLElement("dialog")}} 元素的 {{event("close")}} 事件。

        +

        {{domxref("GlobalEventHandlers")}} mixin 的 onclose 属性是一个 {{event("Event_handlers", "event handler")}}, 用来处理发送给 {{HTMLElement("dialog")}} 元素的 {{event("close")}} 事件。

        -

        当用户关闭一个 <dialog> 时,close 事件将被触发。

        +

        当用户关闭一个 <dialog> 时,close 事件将被触发。

        -

        注意:如果要处理 window 的关闭,使用 {{domxref("Window/beforeunload_event", "onbeforeunload")}} 或 {{domxref("Window/unload_event", "onunload")}}.

        +

        注意:如果要处理 window 的关闭,使用 {{domxref("Window/beforeunload_event", "onbeforeunload")}} 或 {{domxref("Window/unload_event", "onunload")}}.

        语法

        @@ -32,7 +32,7 @@

        参数

        functionRef 是一个函数名称或 函数表达式。 该函数接受一个 {{domxref("Event")}} 对象作为它唯一的参数。

        -

        每次只能给一个对象添加 onclose 回调。 你可能更喜欢使用 {{domxref("EventTarget.addEventListener()")}} 方法,因为它更加灵活。

        +

        每次只能给一个对象添加 onclose 回调。 你可能更喜欢使用 {{domxref("EventTarget.addEventListener()")}} 方法,因为它更加灵活。

        规范

        diff --git a/files/zh-cn/web/api/htmldialogelement/index.html b/files/zh-cn/web/api/htmldialogelement/index.html index 74706b102c02fb..68bf676018b30c 100644 --- a/files/zh-cn/web/api/htmldialogelement/index.html +++ b/files/zh-cn/web/api/htmldialogelement/index.html @@ -12,11 +12,11 @@

        {{ SeeCompatTable() }}

        -

        HTMLDialogElement接口提供操作{{HTMLElement("dialog")}} 元素的方法.。此接口的方法和属性继承自 {{domxref("HTMLElement")}} 接口。

        +

        HTMLDialogElement接口提供操作{{HTMLElement("dialog")}} 元素的方法.。此接口的方法和属性继承自 {{domxref("HTMLElement")}} 接口。

        属性

        -

        继承自父接口, {{domxref("HTMLElement")}}。

        +

        继承自父接口, {{domxref("HTMLElement")}}。

        diff --git a/files/zh-cn/web/api/htmldocument/index.html b/files/zh-cn/web/api/htmldocument/index.html index 47560032316821..2e85b496b5a8d1 100644 --- a/files/zh-cn/web/api/htmldocument/index.html +++ b/files/zh-cn/web/api/htmldocument/index.html @@ -5,9 +5,9 @@ ---

        {{ APIRef("HTML DOM") }}

        -

        HTMLDocument 是 DOM 的一个抽象接口,它提供了 XML 文档里没有出现的特殊属性和方法。

        +

        HTMLDocumentDOM 的一个抽象接口,它提供了 XML 文档里没有出现的特殊属性和方法。

        -

        它的属性和方法包含在 {{domxref("Document")}} 接口页面中,并且每个属性和方法都分成小节进行了介绍。

        +

        它的属性和方法包含在 {{domxref("Document")}} 接口页面中,并且每个属性和方法都分成小节进行了介绍。

        HTMLDocument 对象继承了 Document 接口和 HTMLDocument 接口。因此它有比 Document 更多的属性。并且与 XMLDocument 不同的是,HTMLDocument 是具有外观的,并且要管理它后代的 HTMLElement。

        diff --git a/files/zh-cn/web/api/htmlelement/accesskey/index.html b/files/zh-cn/web/api/htmlelement/accesskey/index.html index 499c82ddc6be69..fa0aee759336a8 100644 --- a/files/zh-cn/web/api/htmlelement/accesskey/index.html +++ b/files/zh-cn/web/api/htmlelement/accesskey/index.html @@ -11,14 +11,14 @@ ---
        {{APIRef("DOM")}}
        -
         
        +
        -

        元素的 Element.accessKey 属性设置了这样一个按键——用户通过敲击这个键把焦点跳转到这个元素上。

        +

        元素的 Element.accessKey 属性设置了这样一个按键——用户通过敲击这个键把焦点跳转到这个元素上。

        -

        备注: Element.accessKey 属性很少使用,因为它很容易与现代浏览器自带的快捷键冲突。为了解决这个问题,浏览器约定 accessKey 键与特定按键一起按(比如 Alt + accessKey)来生效快捷键行为。

        +

        备注: Element.accessKey 属性很少使用,因为它很容易与现代浏览器自带的快捷键冲突。为了解决这个问题,浏览器约定 accessKey 键与特定按键一起按(比如 Alt + accessKey)来生效快捷键行为。

        -

         

        +

        -

         

        +

        diff --git a/files/zh-cn/web/api/htmlelement/accesskeylabel/index.html b/files/zh-cn/web/api/htmlelement/accesskeylabel/index.html index d169ac3a2f2500..b22249435918ad 100644 --- a/files/zh-cn/web/api/htmlelement/accesskeylabel/index.html +++ b/files/zh-cn/web/api/htmlelement/accesskeylabel/index.html @@ -7,7 +7,7 @@
        {{ APIRef("HTML DOM") }}
        -

        HTMLElement.accessKeyLabel 只读属性返回一个 {{jsxref("String")}} 表示这个元素分配的访问密钥 (如果有的话); 否则返回一个空字符串。

        +

        HTMLElement.accessKeyLabel 只读属性返回一个 {{jsxref("String")}} 表示这个元素分配的访问密钥 (如果有的话); 否则返回一个空字符串。

        语法

        diff --git a/files/zh-cn/web/api/htmlelement/beforeinput_event/index.html b/files/zh-cn/web/api/htmlelement/beforeinput_event/index.html index 48b273953de36e..f2897d788d68dd 100644 --- a/files/zh-cn/web/api/htmlelement/beforeinput_event/index.html +++ b/files/zh-cn/web/api/htmlelement/beforeinput_event/index.html @@ -12,9 +12,9 @@ ---
        {{APIRef}} {{SeeCompatTable}}
        -

        DOM 事件 beforeinput 在{{HTMLElement("input")}}, {{HTMLElement("select")}} 或 {{HTMLElement("textarea")}} 的值即将被修改前触发。这个事件也可以在 {{domxref("HTMLElement.contentEditable", "contenteditable")}} 被设置为 true 的元素和打开 {{domxref("Document.designMode", "designMode")}} 后的任何元素上被触发。

        +

        DOM 事件 beforeinput 在{{HTMLElement("input")}}, {{HTMLElement("select")}} 或 {{HTMLElement("textarea")}} 的值即将被修改前触发。这个事件也可以在 {{domxref("HTMLElement.contentEditable", "contenteditable")}} 被设置为 true 的元素和打开 {{domxref("Document.designMode", "designMode")}} 后的任何元素上被触发。

        -

        In the case of contenteditable and designMode,  the event target is the editing host. If these properties apply to multiple elements, the editing host is the nearest ancestor element whose parent isn't editable.

        +

        In the case of contenteditable and designMode, the event target is the editing host. If these properties apply to multiple elements, the editing host is the nearest ancestor element whose parent isn't editable.

        diff --git a/files/zh-cn/web/api/htmlelement/change_event/index.html b/files/zh-cn/web/api/htmlelement/change_event/index.html index d1e5766eebd837..a2e8a1027be88a 100644 --- a/files/zh-cn/web/api/htmlelement/change_event/index.html +++ b/files/zh-cn/web/api/htmlelement/change_event/index.html @@ -14,7 +14,7 @@ ---

        {{APIRef}}

        -

        当用户更改{{HTMLElement("input")}}、{{HTMLElement("select")}}和{{HTMLElement("textarea")}} 元素的值并提交这个更改时,change 事件在这些元素上触发。和 {{domxref("HTMLElement/input_event", "input")}} 事件不一样,change 事件并不是每次元素的 value 改变时都会触发。

        +

        当用户更改{{HTMLElement("input")}}、{{HTMLElement("select")}}和{{HTMLElement("textarea")}} 元素的值并提交这个更改时,change 事件在这些元素上触发。和 {{domxref("HTMLElement/input_event", "input")}} 事件不一样,change 事件并不是每次元素的 value 改变时都会触发。

        @@ -37,12 +37,12 @@
        -

        基于表单元素的类型和用户对标签的操作的不同,change 事件触发的时机也不同:

        +

        基于表单元素的类型和用户对标签的操作的不同,change 事件触发的时机也不同:

          -
        • 当元素是 :checked 状态时(通过点击或者使用键盘),见于 {{HTMLElement('input/radio', '<input type="radio">')}} 和 {{HTMLElement('input/checkbox', '<input type="checkbox">')}}
        • -
        • 当用户显式提交改变时(例如:点击了 {{HTMLElement("select")}}中的一个选项,从 {{HTMLElement('input/date', '<input type="date">')}} 标签选择了一个日期,通过 {{HTMLElement('input/file', '<input type="file">')}} 标签上传了一个文件等);
        • -
        • 当标签的值被修改并且失去焦点后,但未提交时(例如:对{{HTMLElement("textarea")}} 或者 {{HTMLElement('input/text', '<input type="text">')}}的值进行编辑后)。
        • +
        • 当元素是 :checked 状态时(通过点击或者使用键盘),见于 {{HTMLElement('input/radio', '<input type="radio">')}}{{HTMLElement('input/checkbox', '<input type="checkbox">')}}
        • +
        • 当用户显式提交改变时(例如:点击了 {{HTMLElement("select")}}中的一个选项,从 {{HTMLElement('input/date', '<input type="date">')}} 标签选择了一个日期,通过 {{HTMLElement('input/file', '<input type="file">')}} 标签上传了一个文件等);
        • +
        • 当标签的值被修改并且失去焦点后,但未提交时(例如:对{{HTMLElement("textarea")}} 或者 {{HTMLElement('input/text', '<input type="text">')}}的值进行编辑后)。

        示例

        @@ -92,7 +92,7 @@

        结果

        文本输入元素

        -

        对于一些元素,包括 <input type="text">change 事件在控件失去焦点前都不会触发。试一下在下面的输入框输入一些文字,然后点击输入框外的地方来触发事件。

        +

        对于一些元素,包括 <input type="text">change 事件在控件失去焦点前都不会触发。试一下在下面的输入框输入一些文字,然后点击输入框外的地方来触发事件。

        HTML

        @@ -118,7 +118,7 @@

        浏览器兼容性

        {{Compat("api.GlobalEventHandlers.onchange")}}

        -

        对于一些特定类型的交互是否要触发 change 事件,不同浏览器的意见并不总是一致的。例如在 {{HTMLElement("select")}} 元素中使用键盘导航在 Gecko 中不会触发 change 事件,直到用户按下 Enter 键或将焦点从 <select> 上移走(参见 {{bug("126379")}})。但从 Firefox 63(Quantum)开始,这个行为在已经在主流浏览器中达成一致。

        +

        对于一些特定类型的交互是否要触发 change 事件,不同浏览器的意见并不总是一致的。例如在 {{HTMLElement("select")}} 元素中使用键盘导航在 Gecko 中不会触发 change 事件,直到用户按下 Enter 键或将焦点从 <select> 上移走(参见 {{bug("126379")}})。但从 Firefox 63(Quantum)开始,这个行为在已经在主流浏览器中达成一致。

        参见

        diff --git a/files/zh-cn/web/api/htmlelement/contenteditable/index.html b/files/zh-cn/web/api/htmlelement/contenteditable/index.html index d45d048e90bdc9..836bdd23fead06 100644 --- a/files/zh-cn/web/api/htmlelement/contenteditable/index.html +++ b/files/zh-cn/web/api/htmlelement/contenteditable/index.html @@ -11,10 +11,10 @@

        概述

        -

        HTMLElement.contentEditable 属性用于表明元素是否是可编辑的。该枚举属性(enumerated attribute)可以具有下面的几种值之一:

        +

        HTMLElement.contentEditable 属性用于表明元素是否是可编辑的。该枚举属性(enumerated attribute)可以具有下面的几种值之一:

          -
        • "true" 表明该元素可编辑。
        • +
        • "true" 表明该元素可编辑。
        • "false" 表明该元素不可编辑。
        • "inherit" 表明该元素继承了其父元素的可编辑状态。
        @@ -34,13 +34,13 @@

        浏览器兼容性

        {{Compat("api.HTMLElement.contentEditable")}}

        -

        在 IE 浏览器中,contenteditable 不能直接用在 {{htmlelement("table")}}、 {{htmlelement("col")}}、 {{htmlelement("colgroup")}}、 {{htmlelement("tbody")}}、 {{htmlelement("td")}}、 {{htmlelement("tfoot")}}、 {{htmlelement("th")}}、 {{htmlelement("thead")}} 和 {{htmlelement("tr")}} 标签上。一个可编辑的 {{htmlelement("span")}} 或者 {{htmlelement("div")}} 标签可以放在表格单元格内部。

        +

        在 IE 浏览器中,contenteditable 不能直接用在 {{htmlelement("table")}}、 {{htmlelement("col")}}、 {{htmlelement("colgroup")}}、 {{htmlelement("tbody")}}、 {{htmlelement("td")}}、 {{htmlelement("tfoot")}}、 {{htmlelement("th")}}、 {{htmlelement("thead")}} 和 {{htmlelement("tr")}} 标签上。一个可编辑的 {{htmlelement("span")}} 或者 {{htmlelement("div")}} 标签可以放在表格单元格内部。

        相关链接

        diff --git a/files/zh-cn/web/api/htmlelement/contextmenu/index.html b/files/zh-cn/web/api/htmlelement/contextmenu/index.html index 33a27427fb5e02..7119c848f9401c 100644 --- a/files/zh-cn/web/api/htmlelement/contextmenu/index.html +++ b/files/zh-cn/web/api/htmlelement/contextmenu/index.html @@ -7,7 +7,7 @@ ---
        {{APIRef("HTML DOM")}}{{deprecated_header()}}
        -

        HTMLElement.contextMenu 特性指的是某一元素用{{htmlattrxref("contextmenu")}} 特性所创建的右键快捷菜单。该菜单本身源于 {{HTMLElement("menu")}} 元素所构建。

        +

        HTMLElement.contextMenu 特性指的是某一元素用{{htmlattrxref("contextmenu")}} 特性所创建的右键快捷菜单。该菜单本身源于 {{HTMLElement("menu")}} 元素所构建。

        语法

        diff --git a/files/zh-cn/web/api/htmlelement/dir/index.html b/files/zh-cn/web/api/htmlelement/dir/index.html index 53f3f99829e6a5..c6acbd3a972354 100644 --- a/files/zh-cn/web/api/htmlelement/dir/index.html +++ b/files/zh-cn/web/api/htmlelement/dir/index.html @@ -19,7 +19,7 @@

        语法

        elementNodeReference.dir = NewWritingDirection;
        -

        CurrentWritingDirection是一个字符串,表示当前元素的元素内容的文本书写方向. NewWritingDirection 是一个变量,表示当前元素新的文本书写方向。

        +

        CurrentWritingDirection是一个字符串,表示当前元素的元素内容的文本书写方向. NewWritingDirection 是一个变量,表示当前元素新的文本书写方向。

        dir 的值可以是ltr, 表示从左到右, 和rtl, 表示从右到左.

        diff --git a/files/zh-cn/web/api/htmlelement/hidden/index.html b/files/zh-cn/web/api/htmlelement/hidden/index.html index d9922ea91f28b7..2f08292b7bad80 100644 --- a/files/zh-cn/web/api/htmlelement/hidden/index.html +++ b/files/zh-cn/web/api/htmlelement/hidden/index.html @@ -50,8 +50,8 @@

        JavaScript

        document.getElementById("okButton")
                 .addEventListener("click", function() {
        -  document.getElementById("welcome").hidden = true;
        -  document.getElementById("awesome").hidden = false;
        +  document.getElementById("welcome").hidden = true;
        +  document.getElementById("awesome").hidden = false;
         }, false);

        这段代码用来为 welcome 面板中的按钮绑定一个事件监听器,这个事件监听器会隐藏 welcome 面板并在其原位置显示出 follow-up 面板。

        diff --git a/files/zh-cn/web/api/htmlelement/index.html b/files/zh-cn/web/api/htmlelement/index.html index a32696e5148f62..d0a5faf298c8da 100644 --- a/files/zh-cn/web/api/htmlelement/index.html +++ b/files/zh-cn/web/api/htmlelement/index.html @@ -5,11 +5,11 @@ ---
        {{APIRef}}
        -

        HTMLElement 接口表示所有的 HTML 元素。一些 HTML 元素直接实现了 HTMLElement 接口,其它的间接实现 HTMLElement 接口。

        +

        HTMLElement 接口表示所有的 HTML 元素。一些 HTML 元素直接实现了 HTMLElement 接口,其它的间接实现 HTMLElement 接口。

        属性

        -

        继承自父接口{{domxref("Element")}}和 {{domxref("GlobalEventHandlers")}}的属性  

        +

        继承自父接口{{domxref("Element")}}和 {{domxref("GlobalEventHandlers")}}的属性

        @@ -67,7 +67,7 @@

        属性

        - + @@ -77,32 +77,32 @@

        属性

        - + - + - + - + - + - + @@ -137,12 +137,12 @@

        属性

        - + - + @@ -160,7 +160,7 @@

        属性

        - + @@ -217,7 +217,7 @@

        方法

        - +
        {{domxref("HTMLElement.dropzone")}} {{readonlyInline}} {{domxref("DOMSettableTokenList")}} 
        {{domxref("HTMLElement.hidden")}}
        {{domxref("HTMLElement.itemScope")}} {{experimental_inline}} {{domxref("Boolean")}} 
        {{domxref("HTMLElement.itemType")}} {{readonlyInline}}{{experimental_inline}} {{domxref("DOMSettableTokenList")}} 
        {{domxref("HTMLElement.itemId")}} {{experimental_inline}} {{domxref("DOMString")}} 
        {{domxref("HTMLElement.itemRef")}} {{readonlyInline}}{{experimental_inline}} {{domxref("DOMSettableTokenList")}} 
        {{domxref("HTMLElement.itemProp")}} {{readonlyInline}}{{experimental_inline}} {{domxref("DOMSettableTokenList")}} 
        {{domxref("HTMLElement.itemValue")}} {{experimental_inline}} {{domxref("object")}} 
        {{domxref("HTMLElement.lang")}}
        {{domxref("HTMLElement.properties")}} {{readonlyInline}}{{experimental_inline}} {{domxref("HTMLPropertiesCollection")}} 
        {{domxref("HTMLElement.spellcheck")}} {{domxref("Boolean")}} 
        {{domxref("HTMLElement.style")}} 获取/设置元素的 title 属性
        {{domxref("HTMLElement.translate")}} {{domxref("HTMLElement.translate")}} {{domxref("Boolean")}} 获取/设置元素是否可以被翻译
        {{domxref("HTMLElement.forceSpellCheck()")}} {{experimental_inline}} void 
        diff --git a/files/zh-cn/web/api/htmlelement/innertext/index.html b/files/zh-cn/web/api/htmlelement/innertext/index.html index d891596d48da48..3ace4bc0694ddc 100644 --- a/files/zh-cn/web/api/htmlelement/innertext/index.html +++ b/files/zh-cn/web/api/htmlelement/innertext/index.html @@ -17,7 +17,7 @@

        innerText 属性表示一个节点及其后代的“渲染”文本内容。 As a getter, it approximates the text the user would get if they highlighted the contents of the element with the cursor and then copied it to the clipboard.

        -

        Note: innerText 很容易与{{domxref("Node.textContent")}}混淆,但这两个属性间实际上有很重要的区别。大体来说,innerText 可操作已被渲染的内容, 而 textContent 则不会。

        +

        Note: innerText 很容易与{{domxref("Node.textContent")}}混淆,但这两个属性间实际上有很重要的区别。大体来说,innerText 可操作已被渲染的内容, 而 textContent 则不会。

        语法

        @@ -27,11 +27,11 @@

        语法

        输出值

        -

        一段 {{domxref("DOMString")}} 表示一个元素中已被渲染的内容。如果元素自身没有 被渲染 (e.g 被从文档中删除或没有在视图中显示), 这时返回值与 {{domxref("Node.textContent")}} 属性相同。

        +

        一段 {{domxref("DOMString")}} 表示一个元素中已被渲染的内容。如果元素自身没有 被渲染 (e.g 被从文档中删除或没有在视图中显示), 这时返回值与 {{domxref("Node.textContent")}} 属性相同。

        示例

        -

        这个示例对比了 innerText 和 {{domxref("Node.textContent")}}. 这时 innerText 代表的含义就像 {{htmlElement("br")}} 标签,并且忽略了隐藏的元素。

        +

        这个示例对比了 innerText 和 {{domxref("Node.textContent")}}. 这时 innerText 代表的含义就像 {{htmlElement("br")}} 标签,并且忽略了隐藏的元素。

        HTML

        diff --git a/files/zh-cn/web/api/htmlelement/input_event/index.html b/files/zh-cn/web/api/htmlelement/input_event/index.html index 71f4bd4ed77828..cedea2dd2bf046 100644 --- a/files/zh-cn/web/api/htmlelement/input_event/index.html +++ b/files/zh-cn/web/api/htmlelement/input_event/index.html @@ -14,7 +14,7 @@ ---

        {{APIRef}}

        -

        当一个 {{HTMLElement("input")}}, {{HTMLElement("select")}}, 或 {{HTMLElement("textarea")}} 元素的 value 被修改时,会触发 input 事件。

        +

        当一个 {{HTMLElement("input")}}, {{HTMLElement("select")}}, 或 {{HTMLElement("textarea")}} 元素的 value 被修改时,会触发 input 事件。

        @@ -37,12 +37,12 @@
        -

        input 事件也适用于启用了 {{domxref("HTMLElement.contentEditable", "contenteditable")}} 的元素,以及开启了 {{domxref("Document.designMode", "designMode")}} 的任意元素。在contenteditable 和 designMode 的情况下,事件的 target 为当前正在编辑的宿主。如果这些属性应用于多个元素上,当前正在编辑的宿主为最近的父节点不可编辑的祖先元素。

        +

        input 事件也适用于启用了 {{domxref("HTMLElement.contentEditable", "contenteditable")}} 的元素,以及开启了 {{domxref("Document.designMode", "designMode")}} 的任意元素。在contenteditabledesignMode 的情况下,事件的 target 为当前正在编辑的宿主。如果这些属性应用于多个元素上,当前正在编辑的宿主为最近的父节点不可编辑的祖先元素。

        -

        对于 type=checkboxtype=radioinput 元素,每当用户切换控件(通过触摸、鼠标或键盘)时(HTML5 规范),input 事件都应该触发。然而,历史事实并非如此。请检查兼容性,或使用 {{event("change")}} 事件代替这些类型的元素。

        +

        对于 type=checkboxtype=radioinput 元素,每当用户切换控件(通过触摸、鼠标或键盘)时(HTML5 规范),input 事件都应该触发。然而,历史事实并非如此。请检查兼容性,或使用 {{event("change")}} 事件代替这些类型的元素。

        -

        注意: 每当元素的 value 改变,input 事件都会被触发。这与 {{domxref("HTMLInputElement.change_event", "change")}} 事件不同。change 事件仅当 value 被提交时触发,如按回车键,从一个 options 列表中选择一个值等。

        +

        注意: 每当元素的 value 改变,input 事件都会被触发。这与 {{domxref("HTMLInputElement.change_event", "change")}} 事件不同。change 事件仅当 value 被提交时触发,如按回车键,从一个 options 列表中选择一个值等。

        示例

        @@ -114,13 +114,13 @@

        浏览器兼容性

        -

        [1] 在 Gecko 12.0 {{geckoRelease("12.0")}} 之前,用户在输入法中输入时,或者 dead keys were used on Mac OS X 时,Gecko 不触发 input 事件。

        +

        [1] 在 Gecko 12.0 {{geckoRelease("12.0")}} 之前,用户在输入法中输入时,或者 dead keys were used on Mac OS X 时,Gecko 不触发 input 事件。

        -

        [2] IE 9 在用户删除输入的文字时不触发 input 事件 (例如,按 Backspace 或者删除键,或者“剪切”文字).

        +

        [2] IE 9 在用户删除输入的文字时不触发 input 事件 (例如,按 Backspace 或者删除键,或者“剪切”文字).

        -

        [3] Opera 在用户把文字拖进输入框时,不触发 input 事件。

        +

        [3] Opera 在用户把文字拖进输入框时,不触发 input 事件。

        -

        [4] 事件 target 是光标所在的最内侧的元素。

        +

        [4] 事件 target 是光标所在的最内侧的元素。

        参见

        @@ -134,7 +134,7 @@

        参见

      • {{domxref("HTMLInputElement/invalid_event", "invalid")}}
      -

      此外,还有一个类似的 change 事件。change 触发的频率低于 input - 它只会在用户提交更改时触发。

      +

      此外,还有一个类似的 change 事件。change 触发的频率低于 input - 它只会在用户提交更改时触发。

      diff --git a/files/zh-cn/web/api/htmlelement/iscontenteditable/index.html b/files/zh-cn/web/api/htmlelement/iscontenteditable/index.html index 8f17ac5dc7797e..41aaf94cccf717 100644 --- a/files/zh-cn/web/api/htmlelement/iscontenteditable/index.html +++ b/files/zh-cn/web/api/htmlelement/iscontenteditable/index.html @@ -11,7 +11,7 @@

      概述

      -

      HTMLElement.isContentEditable 只读属性返回一个{{jsxref("Boolean", "布尔值")}}:如果当前元素的内容为可编辑状态,则返回 true,否则返回 false

      +

      HTMLElement.isContentEditable 只读属性返回一个{{jsxref("Boolean", "布尔值")}}:如果当前元素的内容为可编辑状态,则返回 true,否则返回 false

      语法

      @@ -30,7 +30,7 @@

      相关链接

      -

       

      +

      diff --git a/files/zh-cn/web/api/htmlelement/lang/index.html b/files/zh-cn/web/api/htmlelement/lang/index.html index 7e6be776ab9429..4ff22820b56148 100644 --- a/files/zh-cn/web/api/htmlelement/lang/index.html +++ b/files/zh-cn/web/api/htmlelement/lang/index.html @@ -4,14 +4,14 @@ translation_of: Web/API/HTMLElement/lang ---

      {{ APIRef() }}

      -

      HTMLElement.lang 属性用来获取或设置元素属性值或文本内容的基语言(base language)。

      -

      该属性返回的语言代码(language code)被定义在 RFC 1766。通常,"en" 表示英语(English)、"ja" 表示(Japanese)、"zh-cn" 表示简体中文等等。该属性的默认值未知(unknown)。尽管该属性可以应用在单独的元素上,但是通常在文档的根元素(html)上指定。

      -

      该属性只对 lang 属性(attribute)有效,不适用于 xml:lang

      +

      HTMLElement.lang 属性用来获取或设置元素属性值或文本内容的基语言(base language)。

      +

      该属性返回的语言代码(language code)被定义在 RFC 1766。通常,"en" 表示英语(English)、"ja" 表示(Japanese)、"zh-cn" 表示简体中文等等。该属性的默认值未知(unknown)。尽管该属性可以应用在单独的元素上,但是通常在文档的根元素(html)上指定。

      +

      该属性只对 lang 属性(attribute)有效,不适用于 xml:lang

      语法

      var languageUsed = elementNodeReference.lang; // 获取 lang 值
       elementNodeReference.lang = NewLanguage; // 为 lang 设置新值
       
      -

      languageUsed 是一个字符串变量,可以获取当前元素的文本是用什么语言写的。NewLanguage 是一个字符串变量,其值用来作为当前元素的文本的语言。

      +

      languageUsed 是一个字符串变量,可以获取当前元素的文本是用什么语言写的。NewLanguage 是一个字符串变量,其值用来作为当前元素的文本的语言。

      示例

      // 该代码比较了基语言(base language),然后
       // 重定向到了基于该语言的 url
      diff --git a/files/zh-cn/web/api/htmlelement/nonce/index.html b/files/zh-cn/web/api/htmlelement/nonce/index.html
      index ef5ee4b389905f..a28045867b74a6 100644
      --- a/files/zh-cn/web/api/htmlelement/nonce/index.html
      +++ b/files/zh-cn/web/api/htmlelement/nonce/index.html
      @@ -15,7 +15,7 @@
       ---
       

      {{SeeCompatTable}}{{APIRef("HTML DOM")}}

      -

      {{domxref("HTMLElement")}} 接口的 nonce 属性返回只使用一次的加密数字,被内容安全政策用来决定这次请求是否被允许处理。

      +

      {{domxref("HTMLElement")}} 接口的 nonce 属性返回只使用一次的加密数字,被内容安全政策用来决定这次请求是否被允许处理。

      在接下来的实现中,有 nonce 属性的元素只能在脚本中使用(不可以在其他渠道使用,比如 css 属性选择器)。

      @@ -26,11 +26,11 @@

      语法

      访问 nonce 属性值

      -

      以前,并不是所有的浏览器都支持 nonce IDL 属性,因此在实际应用场景中,尝试使用getAttribute 作为备选:

      +

      以前,并不是所有的浏览器都支持 nonce IDL 属性,因此在实际应用场景中,尝试使用getAttribute 作为备选:

      let nonce = script['nonce'] || script.getAttribute('nonce');
      -

      然而,最新的浏览器版本都隐藏了 nonce 值(返回一个空值)。IDL 属 (script['nonce']) 成为唯一的访问方式。

      +

      然而,最新的浏览器版本都隐藏了 nonce 值(返回一个空值)。IDL 属 (script['nonce']) 成为唯一的访问方式。

      隐藏 Nonce 是为了阻止攻击者通过某种机制提取出 nonce 值,比如下面这种方式:

      diff --git a/files/zh-cn/web/api/htmlelement/offsetheight/index.html b/files/zh-cn/web/api/htmlelement/offsetheight/index.html index 349433696795ef..d46e88f3331b03 100644 --- a/files/zh-cn/web/api/htmlelement/offsetheight/index.html +++ b/files/zh-cn/web/api/htmlelement/offsetheight/index.html @@ -13,11 +13,11 @@ ---
      {{ APIRef("HTML DOM") }}
      -

       HTMLElement.offsetHeight 是一个只读属性,它返回该元素的像素高度,高度包含该元素的垂直内边距和边框,且是一个整数。

      +

      HTMLElement.offsetHeight 是一个只读属性,它返回该元素的像素高度,高度包含该元素的垂直内边距和边框,且是一个整数。

      通常,元素的 offsetHeight 是一种元素 CSS 高度的衡量标准,包括元素的边框、内边距和元素的水平滚动条(如果存在且渲染的话),不包含:before 或:after 等伪类元素的高度。

      -

      对于文档的 body 对象,它包括代替元素的 CSS 高度线性总含量高。浮动元素的向下延伸内容高度是被忽略的。 

      +

      对于文档的 body 对象,它包括代替元素的 CSS 高度线性总含量高。浮动元素的向下延伸内容高度是被忽略的。

      如果元素被隐藏(例如 元素或者元素的祖先之一的元素的 style.display 被设置为 none),则返回 0

      @@ -56,6 +56,6 @@

      相关链接

    • {{domxref("Element.clientHeight")}}
    • {{domxref("Element.scrollHeight")}}
    • {{domxref("HTMLElement.offsetWidth")}}
    • -
    • Determining the dimensions of elements 如何选择(计算)元素占用的空间
    • +
    • Determining the dimensions of elements 如何选择(计算)元素占用的空间
    • MSDN Measuring Element Dimension and Location
    diff --git a/files/zh-cn/web/api/htmlelement/offsetleft/index.html b/files/zh-cn/web/api/htmlelement/offsetleft/index.html index ac56b8f8a38069..ab8df3798982c7 100644 --- a/files/zh-cn/web/api/htmlelement/offsetleft/index.html +++ b/files/zh-cn/web/api/htmlelement/offsetleft/index.html @@ -11,11 +11,11 @@ ---
    {{ APIRef("HTML DOM") }}
    -

     HTMLElement.offsetLeft 是一个只读属性,返回当前元素左上角相对于  {{domxref("HTMLElement.offsetParent")}} 节点的左边界偏移的像素值。

    +

    HTMLElement.offsetLeft 是一个只读属性,返回当前元素左上角相对于 {{domxref("HTMLElement.offsetParent")}} 节点的左边界偏移的像素值。

    对块级元素来说,offsetTopoffsetLeftoffsetWidthoffsetHeight 描述了元素相对于 offsetParent 的边界框。

    -

    然而,对于可被截断到下一行的行内元素(如 span),offsetTopoffsetLeft 描述的是第一个边界框的位置(使用 {{domxref("Element.getClientRects()")}} 来获取其宽度和高度),而 offsetWidthoffsetHeight 描述的是边界框的尺寸(使用 {{domxref("Element.getBoundingClientRect")}} 来获取其位置)。因此,使用 offsetLeft、offsetTop、offsetWidthoffsetHeight 来对应 left、top、width 和 height 的一个盒子将不会是文本容器 span 的盒子边界。

    +

    然而,对于可被截断到下一行的行内元素(如 span),offsetTopoffsetLeft 描述的是第一个边界框的位置(使用 {{domxref("Element.getClientRects()")}} 来获取其宽度和高度),而 offsetWidthoffsetHeight 描述的是边界框的尺寸(使用 {{domxref("Element.getBoundingClientRect")}} 来获取其位置)。因此,使用 offsetLeft、offsetTop、offsetWidthoffsetHeight 来对应 left、top、width 和 height 的一个盒子将不会是文本容器 span 的盒子边界。

    语法

    diff --git a/files/zh-cn/web/api/htmlelement/offsetparent/index.html b/files/zh-cn/web/api/htmlelement/offsetparent/index.html index 9bf0c6fbe64388..76f5009a585406 100644 --- a/files/zh-cn/web/api/htmlelement/offsetparent/index.html +++ b/files/zh-cn/web/api/htmlelement/offsetparent/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef}}
    -

    HTMLElement.offsetParent 是一个只读属性,返回一个指向最近的(指包含层级上的最近)包含该元素的定位元素或者最近的 table,td,th,body元素。当元素的 style.display 设置为 "none" 时,offsetParent 返回 nulloffsetParent 很有用,因为 {{domxref("HTMLElement.offsetTop","offsetTop")}} 和 {{domxref("HTMLElement.offsetLeft","offsetLeft")}} 都是相对于其内边距边界的。

    +

    HTMLElement.offsetParent 是一个只读属性,返回一个指向最近的(指包含层级上的最近)包含该元素的定位元素或者最近的 table,td,th,body元素。当元素的 style.display 设置为 "none" 时,offsetParent 返回 nulloffsetParent 很有用,因为 {{domxref("HTMLElement.offsetTop","offsetTop")}} 和 {{domxref("HTMLElement.offsetLeft","offsetLeft")}} 都是相对于其内边距边界的。

    语法

    @@ -18,9 +18,9 @@

    语法

    浏览器兼容性

    -

    在 Webkit 中,如果元素为隐藏的(该元素或其祖先元素的 style.display 为 "none"),或者该元素的 style.position 被设为 "fixed",则该属性返回 null

    +

    在 Webkit 中,如果元素为隐藏的(该元素或其祖先元素的 style.display 为 "none"),或者该元素的 style.position 被设为 "fixed",则该属性返回 null

    -

    在 IE 9 中,如果该元素的 style.position 被设置为 "fixed",则该属性返回 null。(display:none 无影响。)

    +

    在 IE 9 中,如果该元素的 style.position 被设置为 "fixed",则该属性返回 null。(display:none 无影响。)

    规范

    diff --git a/files/zh-cn/web/api/htmlelement/outertext/index.html b/files/zh-cn/web/api/htmlelement/outertext/index.html index 6e493e1e091c87..72a4a663775a18 100644 --- a/files/zh-cn/web/api/htmlelement/outertext/index.html +++ b/files/zh-cn/web/api/htmlelement/outertext/index.html @@ -21,7 +21,7 @@

    规范

    不属于任何规范。关于标准规范的讨论:whatwg/html#668

    -

    微软 在 MSDN 有一篇描述。

    +

    微软 在 MSDN 有一篇描述。

    浏览器兼容

    diff --git a/files/zh-cn/web/api/htmlelement/paste_event/index.html b/files/zh-cn/web/api/htmlelement/paste_event/index.html index 2021c7274582fc..6d271024bd8576 100644 --- a/files/zh-cn/web/api/htmlelement/paste_event/index.html +++ b/files/zh-cn/web/api/htmlelement/paste_event/index.html @@ -31,7 +31,7 @@

    例子

    function pasteIntercept(evt) { -       evt.preventDefault(); + evt.preventDefault(); log("粘贴被阻止"); } diff --git a/files/zh-cn/web/api/htmlelement/title/index.html b/files/zh-cn/web/api/htmlelement/title/index.html index c7ad2cf259a49b..37ce4e38532730 100644 --- a/files/zh-cn/web/api/htmlelement/title/index.html +++ b/files/zh-cn/web/api/htmlelement/title/index.html @@ -5,9 +5,9 @@ ---

    {{ APIRef() }}

    -

    HTMLElement.title 属性表示元素的 title。当鼠标移到节点上时,会以“工具提示”(tool tip)的弹出形式显示该属性的属性值文本。

    +

    HTMLElement.title 属性表示元素的 title。当鼠标移到节点上时,会以“工具提示”(tool tip)的弹出形式显示该属性的属性值文本。

    -

    如果一个节点没有 title 属性(attribute),默认继承其父节点的相应属性,父节点可能是从父节点的父节点继承,依此类推。

    +

    如果一个节点没有 title 属性(attribute),默认继承其父节点的相应属性,父节点可能是从父节点的父节点继承,依此类推。

    语法

    diff --git a/files/zh-cn/web/api/htmlfieldsetelement/index.html b/files/zh-cn/web/api/htmlfieldsetelement/index.html index 14ebae98679df2..2b266188922783 100644 --- a/files/zh-cn/web/api/htmlfieldsetelement/index.html +++ b/files/zh-cn/web/api/htmlfieldsetelement/index.html @@ -35,7 +35,7 @@

    属性

    name DOMString - Reflects the {{ htmlattrxref("name", "fieldset") }} HTML attribute, containing the name of the field set, used for submitting the form. + Reflects the {{ htmlattrxref("name", "fieldset") }} HTML attribute, containing the name of the field set, used for submitting the form. type @@ -45,7 +45,7 @@

    属性

    validationMessage readonly DOMString - A localized message that describes the validation constraints that the element does not satisfy (if any). This is the empty string if the element  is not a candidate for constraint validation (willValidate is false), or it satisfies its constraints. + A localized message that describes the validation constraints that the element does not satisfy (if any). This is the empty string if the element is not a candidate for constraint validation (willValidate is false), or it satisfies its constraints. validity diff --git a/files/zh-cn/web/api/htmlformelement/action/index.html b/files/zh-cn/web/api/htmlformelement/action/index.html index 822d1ad8c7dcd9..da357769d381d5 100644 --- a/files/zh-cn/web/api/htmlformelement/action/index.html +++ b/files/zh-cn/web/api/htmlformelement/action/index.html @@ -10,7 +10,7 @@ ---
    {{APIRef("HTML DOM")}}
    -

    HTMLFormElement.action 这个 js 语句能够定义一个{{HTMLElement("form")}}元素中的 action 属性

    +

    HTMLFormElement.action 这个 js 语句能够定义一个{{HTMLElement("form")}}元素中的 action 属性

    表单的 action 属性是在服务器上提交表单,这个属性可以被检索或者设置。

    diff --git a/files/zh-cn/web/api/htmlformelement/elements/index.html b/files/zh-cn/web/api/htmlformelement/elements/index.html index efe7d2ab277dc5..5b4028288f29e2 100644 --- a/files/zh-cn/web/api/htmlformelement/elements/index.html +++ b/files/zh-cn/web/api/htmlformelement/elements/index.html @@ -5,7 +5,7 @@ ---
    小结

    elements 返回一个 {{domxref("HTMLFormControlsCollection")}} (HTMLCollection) 其中包含 FORM 的所有控件。需要注意的是,其中不包括 type 等于 imageinput 元素。

    -

    你可以通过 name 或 id来访问对应的控件。

    +

    你可以通过 nameid来访问对应的控件。

    语法

    nodeList = HTMLFormElement.elements
     
    diff --git a/files/zh-cn/web/api/htmlformelement/enctype/index.html b/files/zh-cn/web/api/htmlformelement/enctype/index.html index af448a29e357c3..51605c0d67ebde 100644 --- a/files/zh-cn/web/api/htmlformelement/enctype/index.html +++ b/files/zh-cn/web/api/htmlformelement/enctype/index.html @@ -9,11 +9,11 @@
    • application/x-www-form-urlencoded: 初始的默认值
    • -
    • multipart/form-data:  适用于使用{{HTMLElement("input")}} 标签上传文件
    • +
    • multipart/form-data: 适用于使用{{HTMLElement("input")}} 标签上传文件
    • text/plain: HTML5 引入的类型
    -

    这些值可以通过元素 {{HTMLElement("button")}} or {{HTMLElement("input")}} 的属性 form.enctype 来改写

    +

    这些值可以通过元素 {{HTMLElement("button")}} or {{HTMLElement("input")}} 的属性 form.enctype 来改写

    语法

    diff --git a/files/zh-cn/web/api/htmlformelement/index.html b/files/zh-cn/web/api/htmlformelement/index.html index d5132c334dff90..f1bcc7de4fcb97 100644 --- a/files/zh-cn/web/api/htmlformelement/index.html +++ b/files/zh-cn/web/api/htmlformelement/index.html @@ -13,23 +13,23 @@

    属性

    {{domxref("HTMLFormElement.acceptCharset")}}
    -
    Is a {{domxref("DOMString")}} that reflects the {{ htmlattrxref("accept-charset", "form") }} HTML attribute, containing a list of character encodings that the server accepts.
    +
    Is a {{domxref("DOMString")}} that reflects the {{ htmlattrxref("accept-charset", "form") }} HTML attribute, containing a list of character encodings that the server accepts.
    {{domxref("HTMLFormElement.action")}}
    -
    Is a {{domxref("DOMString")}} that reflects the {{ htmlattrxref("action", "form") }} HTML attribute, containing the URI of a program that processes the information submitted by the form.
    +
    Is a {{domxref("DOMString")}} that reflects the {{ htmlattrxref("action", "form") }} HTML attribute, containing the URI of a program that processes the information submitted by the form.
    {{domxref("HTMLFormElement.autocomplete")}}
    -
    Is a {{domxref("DOMString")}} that reflects the {{ htmlattrxref("autocomplete", "form") }} HTML attribute, containing a string that indicates whether the controls in this form can have their values automatically populated by the browser.
    +
    Is a {{domxref("DOMString")}} that reflects the {{ htmlattrxref("autocomplete", "form") }} HTML attribute, containing a string that indicates whether the controls in this form can have their values automatically populated by the browser.
    {{domxref("HTMLFormElement.elements")}} {{readonlyinline}}
    Returns a live {{domxref("HTMLFormControlsCollection")}} containing all the form controls belonging to this form element.
    {{domxref("HTMLFormElement.encoding")}}
    Is a synonym for enctype.
    {{domxref("HTMLFormElement.enctype")}}
    -
    Is a {{domxref("DOMString")}} reflects the {{ htmlattrxref("enctype", "form") }} HTML attribute, indicating the type of content that is used to transmit the form to the server. Only specified values can be set.
    +
    Is a {{domxref("DOMString")}} reflects the {{ htmlattrxref("enctype", "form") }} HTML attribute, indicating the type of content that is used to transmit the form to the server. Only specified values can be set.
    {{domxref("HTMLFormElement.length")}} {{readonlyinline}}
    Returns a long that represents the number of controls in the form.
    {{domxref("HTMLFormElement.method")}}
    -
    Is a {{domxref("DOMString")}} that reflects the {{ htmlattrxref("method", "form") }} HTML attribute, indicating the HTTP method used to submit the form. Only specified values can be set.
    +
    Is a {{domxref("DOMString")}} that reflects the {{ htmlattrxref("method", "form") }} HTML attribute, indicating the HTTP method used to submit the form. Only specified values can be set.
    {{domxref("HTMLFormElement.name")}}
    -
    Is a {{domxref("DOMString")}} that reflects the {{ htmlattrxref("name", "form") }} HTML attribute, containing the name of the form.
    +
    Is a {{domxref("DOMString")}} that reflects the {{ htmlattrxref("name", "form") }} HTML attribute, containing the name of the form.
    {{domxref("HTMLFormElement.noValidate")}}
    Is a {{jsxref("Boolean")}} that reflects the {{ htmlattrxref("novalidate", "form") }} HTML attribute, indicating that the form should not be validated.
    {{domxref("HTMLFormElement.target")}}
    @@ -38,15 +38,15 @@

    属性

    方法

    -

    这个元素继承了 {{domxref("HTMLElement")}} 的属性。

    +

    这个元素继承了 {{domxref("HTMLElement")}} 的属性。

    {{domxref("HTMLFormElement.checkValidity()")}}
    -
    Returns a {{jsxref("Boolean")}} that is true if the element's child controls are subject to constraint validation and satify those contraints, or false if some controls do not satisfy their constraints. Fires an event named {{event("invalid")}} at any control that does not satisfy its constraints; such controls are considered invalid if the event is not canceled. It is up to the programmer to decide how to respond to false.
    +
    Returns a {{jsxref("Boolean")}} that is true if the element's child controls are subject to constraint validation and satify those contraints, or false if some controls do not satisfy their constraints. Fires an event named {{event("invalid")}} at any control that does not satisfy its constraints; such controls are considered invalid if the event is not canceled. It is up to the programmer to decide how to respond to false.
    {{domxref("HTMLFormElement.item()")}}
    Gets the item in the elements collection at the specified index, or null if there is no item at that index. You can also specify the index in array-style brackets or parentheses after the form object name, without calling this method explicitly.
    {{domxref("HTMLFormElement.namedItem()")}}
    -
    从元素集合中获取 name 或者 id 与指定名称匹配的项,没有匹配项则返回 null。您也可以像调用数组那样用圆括号或方括号来指定名称, 而不必显式地调用这个方法。
    +
    从元素集合中获取 name 或者 id 与指定名称匹配的项,没有匹配项则返回 null。您也可以像调用数组那样用圆括号或方括号来指定名称, 而不必显式地调用这个方法。
    {{domxref("HTMLFormElement.submit()")}}
    Submits the form to the server.
    {{domxref("HTMLFormElement.reset()")}}
    @@ -55,7 +55,7 @@

    方法

    {{domxref("HTMLFormElement.reportValidity()")}}
    -
    Returns true if the element's child controls satisfy their validation constraints. When false is returned, cancelable invalid events are fired for each invalid child and validation problems are reported to the user.
    +
    Returns true if the element's child controls satisfy their validation constraints. When false is returned, cancelable invalid events are fired for each invalid child and validation problems are reported to the user.

    Examples

    @@ -135,22 +135,22 @@

    Examples

    <title>MDN Example</title> <script type="text/javascript"> function popupSend (oFormElement) { -  if (oFormElement.method && oFormElement.method.toLowerCase() !== "get") { -    alert("This script supports the GET method only."); -    return; -  } -  var oField, sFieldType, nFile, sSearch = ""; -  for (var nItem = 0; nItem < oFormElement.elements.length; nItem++) { -    oField = oFormElement.elements[nItem]; -    if (!oField.hasAttribute("name")) { continue; } -    sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT"; -    if (sFieldType === "FILE") { -      for (nFile = 0; nFile < oField.files.length; sSearch += "&" + escape(oField.name) + "=" + escape(oField.files[nFile++].name)); -    } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) { -      sSearch += "&" + escape(oField.name) + "=" + escape(oField.value); -    } -  } -  open(oFormElement.action.replace(/(?:\?.*)?$/, sSearch.replace(/^&/, "?")), "submit-" + (oFormElement.name || Math.floor(Math.random() * 1e6)), "resizable=yes,scrollbars=yes,status=yes"); + if (oFormElement.method && oFormElement.method.toLowerCase() !== "get") { + alert("This script supports the GET method only."); + return; + } + var oField, sFieldType, nFile, sSearch = ""; + for (var nItem = 0; nItem < oFormElement.elements.length; nItem++) { + oField = oFormElement.elements[nItem]; + if (!oField.hasAttribute("name")) { continue; } + sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT"; + if (sFieldType === "FILE") { + for (nFile = 0; nFile < oField.files.length; sSearch += "&" + escape(oField.name) + "=" + escape(oField.files[nFile++].name)); + } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) { + sSearch += "&" + escape(oField.name) + "=" + escape(oField.value); + } + } + open(oFormElement.action.replace(/(?:\?.*)?$/, sSearch.replace(/^&/, "?")), "submit-" + (oFormElement.name || Math.floor(Math.random() * 1e6)), "resizable=yes,scrollbars=yes,status=yes"); } </script> @@ -159,13 +159,13 @@

    Examples

    <body> <form name="yourForm" action="test.php" method="get" onsubmit="popupSend(this); return false;"> -  <p>First name: <input type="text" name="firstname" /><br /> -  Last name: <input type="text" name="lastname" /><br /> -  Password: <input type="password" name="pwd" /><br /> -  <input type="radio" name="sex" value="male" /> Male <input type="radio" name="sex" value="female" /> Female</p> -  <p><input type="checkbox" name="vehicle" value="Bike" />I have a bike<br /> -  <input type="checkbox" name="vehicle" value="Car" />I have a car</p> -  <p><input type="submit" value="Submit" /></p> + <p>First name: <input type="text" name="firstname" /><br /> + Last name: <input type="text" name="lastname" /><br /> + Password: <input type="password" name="pwd" /><br /> + <input type="radio" name="sex" value="male" /> Male <input type="radio" name="sex" value="female" /> Female</p> + <p><input type="checkbox" name="vehicle" value="Bike" />I have a bike<br /> + <input type="checkbox" name="vehicle" value="Car" />I have a car</p> + <p><input type="submit" value="Submit" /></p> </form> </body> diff --git a/files/zh-cn/web/api/htmlformelement/reportvalidity/index.html b/files/zh-cn/web/api/htmlformelement/reportvalidity/index.html index ded2bf6049f67a..8f74eb4e98b10a 100644 --- a/files/zh-cn/web/api/htmlformelement/reportvalidity/index.html +++ b/files/zh-cn/web/api/htmlformelement/reportvalidity/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef("HTML DOM")}}
    -

    方法 HTMLFormElement.reportValidity() 返回布尔值,如果 form 表单的子表单控件满足验证限制条件,则该方法返回 true ,否则返回false。当返回 false 时,每个不合法的子控件的 invalid 事件将会被触发,并且验证中存在的问题会报告该用户。 

    +

    方法 HTMLFormElement.reportValidity() 返回布尔值,如果 form 表单的子表单控件满足验证限制条件,则该方法返回 true ,否则返回false。当返回 false 时,每个不合法的子控件的 invalid 事件将会被触发,并且验证中存在的问题会报告该用户。

    Syntax

    diff --git a/files/zh-cn/web/api/htmlhtmlelement/index.html b/files/zh-cn/web/api/htmlhtmlelement/index.html index e46574dc94deaf..c8966877700cba 100644 --- a/files/zh-cn/web/api/htmlhtmlelement/index.html +++ b/files/zh-cn/web/api/htmlhtmlelement/index.html @@ -8,9 +8,9 @@ ---
    {{ APIRef("HTML DOM") }}
    -

    HTMLHtmlElement 接口是给定HTML文档的根节点。它继承了 {{domxref("HTMLElement")}} 对象的属性和方法。

    +

    HTMLHtmlElement 接口是给定HTML文档的根节点。它继承了 {{domxref("HTMLElement")}} 对象的属性和方法。

    -

    您可以通过读取{{domxref("document.documentElement")}}属性的值来获取文档的 HTMLHtmlElement对象

    +

    您可以通过读取{{domxref("document.documentElement")}}属性的值来获取文档的 HTMLHtmlElement对象

    {{InheritanceDiagram(600,120)}}

    @@ -20,7 +20,7 @@

    属性

    {{domxref("HTMLHtmlElement.version")}} {{Deprecated_Inline}}
    -
    这是一个用于表示管理此文档的HTML文档类型定义(DTD)版本的 {{domxref("DOMString")}}。 但此属性不应再使用,因为它不符合要求。请仅忽略它。
    +
    这是一个用于表示管理此文档的HTML文档类型定义(DTD)版本的 {{domxref("DOMString")}}。 但此属性不应再使用,因为它不符合要求。请仅忽略它。

    方法

    diff --git a/files/zh-cn/web/api/htmlhtmlelement/version/index.html b/files/zh-cn/web/api/htmlhtmlelement/version/index.html index d14cd7cf44614f..bae39a70b000eb 100644 --- a/files/zh-cn/web/api/htmlhtmlelement/version/index.html +++ b/files/zh-cn/web/api/htmlhtmlelement/version/index.html @@ -5,8 +5,8 @@ ---
    {{ APIRef("HTML DOM") }}
    -

    概述 

    +

    概述

    -

    它返回有关文档的文档类型定义(DTD)的版本信息。 尽管此属性能够被Mozilla识别, 但此属性的返回值始终是空字符串。

    +

    它返回有关文档的文档类型定义(DTD)的版本信息。 尽管此属性能够被Mozilla识别, 但此属性的返回值始终是空字符串。

    此属性已被W3C的HTML 4.01技术建议声明弃用,赞成使用DTD来获取文档的版本信息。
    diff --git a/files/zh-cn/web/api/htmliframeelement/contentwindow/index.html b/files/zh-cn/web/api/htmliframeelement/contentwindow/index.html index 694a41feed8850..e13ea1ca41ef17 100644 --- a/files/zh-cn/web/api/htmliframeelement/contentwindow/index.html +++ b/files/zh-cn/web/api/htmliframeelement/contentwindow/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef("HTML DOM")}}
    -

    contentWindow 属性返回当前HTMLIFrameElementWindow对象. 你可以使用这个Window 对象去访问这个iframe的文档和它内部的DOM. 这个是可读属性, 但是它的属性像全局Window 一样是可以操作的. 

    +

    contentWindow 属性返回当前HTMLIFrameElementWindow对象. 你可以使用这个Window 对象去访问这个iframe的文档和它内部的DOM. 这个是可读属性, 但是它的属性像全局Window 一样是可以操作的.

    关于contentWindow的示例

    diff --git a/files/zh-cn/web/api/htmliframeelement/index.html b/files/zh-cn/web/api/htmliframeelement/index.html index 0e66c5c8036eac..72058efe5ebbec 100644 --- a/files/zh-cn/web/api/htmliframeelement/index.html +++ b/files/zh-cn/web/api/htmliframeelement/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef("HTML DOM")}}
    -

    HTMLIFrameElement 接口提供了除 {{domxref("HTMLElement")}} 之外的一些特殊属性和方法(当然也包括了继承自 {{domxref("HTMLElement")}} 的部分)。这些方法用于操作内联frame元素的布局和展示。

    +

    HTMLIFrameElement 接口提供了除 {{domxref("HTMLElement")}} 之外的一些特殊属性和方法(当然也包括了继承自 {{domxref("HTMLElement")}} 的部分)。这些方法用于操作内联frame元素的布局和展示。

    属性

    @@ -15,7 +15,7 @@

    属性

    {{domxref("HTMLIFrameElement.align")}} {{Deprecated_Inline}}
    一个 {{domxref("DOMString")}} 指定了相对于当前上下文的对齐方式。
    {{domxref("HTMLIFrameElement.allowfullscreen")}} {{experimental_inline}}
    -
    一个 {{domxref("Boolean")}} 标识了该内联frame是否愿意被全屏防止。详情请参考 Using full-screen mode 。
    +
    一个 {{domxref("Boolean")}} 标识了该内联frame是否愿意被全屏防止。详情请参考 Using full-screen mode
    {{domxref("HTMLIFrameElement.contentDocument")}} {{readonlyInline}}
    返回一个 {{domxref("Document")}},该内联frame嵌套的浏览上下文中活跃的document对象。
    {{domxref("HTMLIFrameElement.contentWindow")}} {{readonlyInline}}
    @@ -23,7 +23,7 @@

    属性

    {{domxref("HTMLIFrameElement.frameBorder")}} {{Deprecated_Inline}}
    一个 {{domxref("DOMString")}} 标识了是否在frame之间创建边框。
    {{domxref("HTMLIFrameElement.height")}}
    -
    一个 {{domxref("DOMString")}} 反映着 {{htmlattrxref("height", "iframe")}} HTML 属性,标识了该frame的高度。
    +
    一个 {{domxref("DOMString")}} 反映着 {{htmlattrxref("height", "iframe")}} HTML 属性,标识了该frame的高度。
    {{domxref("HTMLIFrameElement.longDesc")}} {{Deprecated_Inline}}
    一个 {{domxref("DOMString")}} 包含着该frame的详细描述的URI。
    {{domxref("HTMLIFrameElement.marginHeight")}} {{Deprecated_Inline}}
    @@ -31,19 +31,19 @@

    属性

    {{domxref("HTMLIFrameElement.marginWidth")}} {{Deprecated_Inline}}
    一个 {{domxref("DOMString")}} ,该frame的外边距宽度。
    {{domxref("HTMLIFrameElement.name")}}
    -
    一个 {{domxref("DOMString")}} 反映着 {{htmlattrxref("name", "iframe")}} HTML 属性,包含着用来引用该frame的名字。
    +
    一个 {{domxref("DOMString")}} 反映着 {{htmlattrxref("name", "iframe")}} HTML 属性,包含着用来引用该frame的名字。
    {{domxref("HTMLIFrameElement.referrerPolicy")}} {{experimental_inline}}
    一个 {{domxref("DOMString")}} 反映着 {{htmlattrxref("referrerPolicy", "iframe")}} HTML 属性,标识了获取关联资源时要使用哪个referrer。
    {{domxref("HTMLIFrameElement.sandbox")}}
    -
    一个 {{domxref("DOMSettableTokenList")}} 反映着 {{htmlattrxref("sandbox", "iframe")}} HTML 属性,指示着对嵌套内容额外的限制。
    +
    一个 {{domxref("DOMSettableTokenList")}} 反映着 {{htmlattrxref("sandbox", "iframe")}} HTML 属性,指示着对嵌套内容额外的限制。
    {{domxref("HTMLIFrameElement.scrolling")}} {{Deprecated_Inline}}
    一个 {{domxref("DOMString")}} 指示着浏览器是否应该为该frame提供滚动条。
    {{domxref("HTMLIFrameElement.src")}}
    -
    一个 {{domxref("DOMString")}} 反映着 {{htmlattrxref("src", "iframe")}} HTML 属性,包含被嵌入内容的地址。
    +
    一个 {{domxref("DOMString")}} 反映着 {{htmlattrxref("src", "iframe")}} HTML 属性,包含被嵌入内容的地址。
    {{domxref("HTMLIFrameElement.srcdoc")}}
    一个 {{domxref("DOMString")}} ,表示该frame中要显示的内容。
    {{domxref("HTMLIFrameElement.width")}}
    -
    一个 {{domxref("DOMString")}} 反映着 {{htmlattrxref("width", "iframe")}} HTML 属性,标识着该frame的宽度。
    +
    一个 {{domxref("DOMString")}} 反映着 {{htmlattrxref("width", "iframe")}} HTML 属性,标识着该frame的宽度。

    方法

    @@ -52,7 +52,7 @@

    方法

    浏览器 API 方法

    -

    为支持浏览器{{HTMLElement("iframe")}}的需求,HTMLIFrameElement已经扩展了一些新的方法来让{{HTMLElement("iframe")}}有更多的能力。他们并未成为规范(参见 Browser compatibility)。

    +

    为支持浏览器{{HTMLElement("iframe")}}的需求,HTMLIFrameElement已经扩展了一些新的方法来让{{HTMLElement("iframe")}}有更多的能力。他们并未成为规范(参见 Browser compatibility)。

    导航方法

    @@ -93,7 +93,7 @@

    管理方法

    {{domxref("HTMLIFrameElement.setInputMethodActive()")}}
    设置当前浏览器{{HTMLElement("iframe")}}是活动的输入法编辑器窗口而其他不是。当一个顶层应用希望激活一个窗口作为输入法编辑器(如键盘)时有用。
    {{domxref("HTMLIFrameElement.setNfcFocus()")}}
    -
    Firefox 操作系统 NFC API 的一部分,扩展了Browser API,这个集合设置浏览器{{htmlelement("iframe")}}是否可以接收一个NFC事件。
    +
    Firefox 操作系统 NFC API 的一部分,扩展了Browser API,这个集合设置浏览器{{htmlelement("iframe")}}是否可以接收一个NFC事件。

    音频相关方法

    @@ -115,11 +115,11 @@

    音频相关方法

    Search methods

    -

    New methods are provided to allow programmatic searches of browser {{HTMLElement("iframe")}}s to be carried out.

    +

    New methods are provided to allow programmatic searches of browser {{HTMLElement("iframe")}}s to be carried out.

    {{domxref("HTMLIFrameElement.findAll()")}}
    -
    Searches for a string in a browser {{HTMLElement("iframe")}}'s content; if found, the first instance of the string relative to the caret position will be highlighted.
    +
    Searches for a string in a browser {{HTMLElement("iframe")}}'s content; if found, the first instance of the string relative to the caret position will be highlighted.
    {{domxref("HTMLIFrameElement.findNext()")}}
    Highlights the next or previous instance of a search result after a {{domxref("HTMLIFrameElement.findAll","findAll()")}} search has been carried out.
    {{domxref("HTMLIFrameElement.clearMatch()")}}
    diff --git a/files/zh-cn/web/api/htmlimageelement/complete/index.html b/files/zh-cn/web/api/htmlimageelement/complete/index.html index 5d56c5955b9653..4d3b9b0fda3685 100644 --- a/files/zh-cn/web/api/htmlimageelement/complete/index.html +++ b/files/zh-cn/web/api/htmlimageelement/complete/index.html @@ -5,7 +5,7 @@ ---

    {{APIRef("HTML DOM")}}

    -

    {{domxref("HTMLImageElement")}} 的只读属性 complete 是一个布尔值, 表示图片是否完全加载完成。

    +

    {{domxref("HTMLImageElement")}} 的只读属性 complete 是一个布尔值, 表示图片是否完全加载完成。

    语法

    @@ -13,42 +13,42 @@

    语法

    -

    当图片完全加载完成时值为 true ; 否则,值为 false

    +

    当图片完全加载完成时值为 true ; 否则,值为 false

    以下任意一条为 true 则认为图片完全加载完成:

    • Neither the {{htmlattrxref("src", "img")}} nor the {{htmlattrxref("srcset", "img")}} attribute is specified.
    • -
    • The srcset attribute is absent and the src attribute, while specified, is the empty string ("").
    • +
    • The srcset attribute is absent and the src attribute, while specified, is the empty string ("").
    • The image resource has been fully fetched and has been queued for rendering/compositing.
    • The image element has previously determined that the image is fully available and ready for use.
    • The image is "broken;" that is, the image failed to load due to an error or because image loading is disabled.
    -

    It's worth noting that due to the image potentially being received asynchronously, the value of complete may change while your script is running.

    +

    It's worth noting that due to the image potentially being received asynchronously, the value of complete may change while your script is running.

    Example

    -

    Consider a photo library app that provides the ability to open images into a lightbox mode for improved viewing as well as editing of the image. These photos may be very large, so you don't want to wait for them to load, so your code uses async/await to load the images in the background.

    +

    Consider a photo library app that provides the ability to open images into a lightbox mode for improved viewing as well as editing of the image. These photos may be very large, so you don't want to wait for them to load, so your code uses async/await to load the images in the background.

    But imagine that you have other code that needs to only run when the image has completed loading, such as a command that performs red-eye removal on the image in the lightbox. While ideally this command wouldn't even be executed if the image hasn't fully loaded, for improved reliability you want to check to ensure this is the case.

    -

    So the fixRedEyeCommand() function, which is called by the button that triggers red-eye removal, checks the value of the lightbox image's complete property before attempting to do its work. This is demonstrated in the code below.

    +

    So the fixRedEyeCommand() function, which is called by the button that triggers red-eye removal, checks the value of the lightbox image's complete property before attempting to do its work. This is demonstrated in the code below.

    let lightboxElem = document.querySelector("#lightbox");
     let lightboxImgElem = lightboxElem.querySelector("img");
     let lightboxControlsElem = lightboxElem.querySelector(".toolbar");
     
     async function loadImage(url, elem) {
    -  return new Promise((resolve, reject) => {
    -    elem.onload = () => resolve(elem);
    -    elem.onerror = reject;
    -    elem.src = src;
    -  });
    +  return new Promise((resolve, reject) => {
    +    elem.onload = () => resolve(elem);
    +    elem.onerror = reject;
    +    elem.src = src;
    +  });
     }
     
     async function lightBox(url) {
    -  lightboxElem.style.display = "block";
    +  lightboxElem.style.display = "block";
       await loadImage("https://somesite.net/huge-image.jpg", lightboxImgElem);
       lightboxControlsElem.disabled = false;
     }
    @@ -59,7 +59,7 @@ 

    Example

    if (lightboxElem.style.display === "block" && lightboxImgElem.complete) { fixRedEye(lightboxImgElem); } else { -  /* can't start doing this until the image is fully loaded */ + /* can't start doing this until the image is fully loaded */ } }
    diff --git a/files/zh-cn/web/api/htmlimageelement/decode/index.html b/files/zh-cn/web/api/htmlimageelement/decode/index.html index 300600ded2a1f0..007e3f7a7f83a9 100644 --- a/files/zh-cn/web/api/htmlimageelement/decode/index.html +++ b/files/zh-cn/web/api/htmlimageelement/decode/index.html @@ -6,7 +6,7 @@

    {{APIRef("HTML DOM")}}

    -

    {{domxref("HTMLImageElement")}} 接口的 decode() 方法返回一个当图片解码后可安全用于附加到 DOM 上时 resolves 的 {{jsxref("Promise")}} 对象。 这可用于在将图片附加到一个 DOM 中的元素(或作为一个新元素加入 DOM 中)之前启动加载,所以在将图像添加到 DOM 时可以立即渲染图像。这反过来,防止了将图像加入 DOM 后图像的加载造成下一帧渲染的延迟。

    +

    {{domxref("HTMLImageElement")}} 接口的 decode() 方法返回一个当图片解码后可安全用于附加到 DOM 上时 resolves 的 {{jsxref("Promise")}} 对象。 这可用于在将图片附加到一个 DOM 中的元素(或作为一个新元素加入 DOM 中)之前启动加载,所以在将图像添加到 DOM 时可以立即渲染图像。这反过来,防止了将图像加入 DOM 后图像的加载造成下一帧渲染的延迟。

    语法

    @@ -27,11 +27,11 @@

    异常

    使用提示

    -

    一个 decode() 的潜在用例:当在加载一个非常大的图片时(例如,一个在线相册),你可以在加载初期提供一个低分辨率的缩略图,之后通过实例化一个 {{domxref("HTMLImageElement")}} 将该图像替换为一个全分辨率图像,设置其 source 为全分辨率图像 URL,使用 decode() 获取一旦全分辨率图像准备好被使用时 resolved 的 promise 对象。这时你可以使用当前可用的全分辨率图像替换之前的低分辨率图像。

    +

    一个 decode() 的潜在用例:当在加载一个非常大的图片时(例如,一个在线相册),你可以在加载初期提供一个低分辨率的缩略图,之后通过实例化一个 {{domxref("HTMLImageElement")}} 将该图像替换为一个全分辨率图像,设置其 source 为全分辨率图像 URL,使用 decode() 获取一旦全分辨率图像准备好被使用时 resolved 的 promise 对象。这时你可以使用当前可用的全分辨率图像替换之前的低分辨率图像。

    例子

    -

    以下例子展示了如何使用 decode() 方法来控制一个图像插入 DOM 的时机。若不使用 {{domxref('Promise')}} 返回方法,你将在图像的 {{event("load")}} 事件处理函数中将图像加入 DOM 中,通过 {{event("error")}} 事件处理函数处理错误。

    +

    以下例子展示了如何使用 decode() 方法来控制一个图像插入 DOM 的时机。若不使用 {{domxref('Promise')}} 返回方法,你将在图像的 {{event("load")}} 事件处理函数中将图像加入 DOM 中,通过 {{event("error")}} 事件处理函数处理错误。

    const img = new Image();
     img.src = 'nebula.jpg';
    diff --git a/files/zh-cn/web/api/htmlimageelement/decoding/index.html b/files/zh-cn/web/api/htmlimageelement/decoding/index.html
    index 2daaa731cc71f7..9be52949e04780 100644
    --- a/files/zh-cn/web/api/htmlimageelement/decoding/index.html
    +++ b/files/zh-cn/web/api/htmlimageelement/decoding/index.html
    @@ -5,7 +5,7 @@
     ---
     
    {{APIRef}}
    -
    {{domxref("HTMLImageElement")}} 接口的 decoding 属性用于告诉浏览器使用何种方式解析图像数据。
    +
    {{domxref("HTMLImageElement")}} 接口的 decoding 属性用于告诉浏览器使用何种方式解析图像数据。

    Syntax

    @@ -28,7 +28,7 @@

    Values

    Usage notes

    -

    decoding 属性使您可以控制是否允许浏览器尝试异步加载图像。如果这样做会引起问题,您可指定值为 sync 禁止异步加载。异步加载对 {{HTMLElement("img")}} 元素很有用,对屏幕外的图像对象可能会更有用。

    +

    decoding 属性使您可以控制是否允许浏览器尝试异步加载图像。如果这样做会引起问题,您可指定值为 sync 禁止异步加载。异步加载对 {{HTMLElement("img")}} 元素很有用,对屏幕外的图像对象可能会更有用。

    Examples

    diff --git a/files/zh-cn/web/api/htmlimageelement/image/index.html b/files/zh-cn/web/api/htmlimageelement/image/index.html index 95ac7583e69c06..d04b58bd32e307 100644 --- a/files/zh-cn/web/api/htmlimageelement/image/index.html +++ b/files/zh-cn/web/api/htmlimageelement/image/index.html @@ -9,7 +9,7 @@

    Image()函数将会创建一个新的{{domxref("HTMLImageElement")}}实例。

    -

    它的功能等价于 {{domxref("Document.createElement()", "document.createElement('img')")}}

    +

    它的功能等价于 {{domxref("Document.createElement()", "document.createElement('img')")}}

    语法

    diff --git a/files/zh-cn/web/api/htmlimageelement/index.html b/files/zh-cn/web/api/htmlimageelement/index.html index 63affdc5117fb1..66b0711bd0ce95 100644 --- a/files/zh-cn/web/api/htmlimageelement/index.html +++ b/files/zh-cn/web/api/htmlimageelement/index.html @@ -28,8 +28,8 @@

    属性

    {{domxref("HTMLImageElement.crossOrigin")}}
    一个 {{domxref("DOMString")}} 表示这个 img 元素的 CORS 设置。参考 CORS settings attributes。This may be null if CORS is not used.
    {{domxref("HTMLImageElement.currentSrc")}} {{readonlyInline}}
    -
    返回一个 {{domxref("DOMString")}}  表示加载当前显示的图像的 URL。
    - 这可能会改变,因为图像是调整,由于不断变化的条件,由任何 media queries 的地方。
    +
    返回一个 {{domxref("DOMString")}} 表示加载当前显示的图像的 URL。
    + 这可能会改变,因为图像是调整,由于不断变化的条件,由任何 media queries 的地方。
    {{domxref("HTMLImageElement.decoding")}}
    An optional {{domxref("DOMString")}} representing a hint given to the browser on how it should decode the image. If this value is provided, it must be one of the possible permitted values: sync to decode the image synchronously, async to decode it asynchronously, or auto to indicate no preference (which is the default). Read the {{domxref("HTMLImageElement.decoding", "decoding")}} page for details on the implications of this property's values.
    {{domxref("HTMLImageElement.height")}}
    @@ -49,7 +49,7 @@

    属性

    {{domxref("HTMLImageElement.srcset")}} {{experimental_inline}}
    一个 {{domxref("DOMString")}} 表示 HTML 属性 {{htmlattrxref("srcset", "img")}},包含了候选图像列表,用逗号分隔(',', U+002C COMMA)。一个候选的图像是一个 URL 跟着一个 'w' 表示图像的宽度,或者一个 'x' 表示像素密度。
    {{domxref("HTMLImageElement.useMap")}}
    -
    一个 {{domxref("DOMString")}} 表示 HTML 属性 {{htmlattrxref("usemap", "img")}},包含一个 {{HTMLElement("map")}} 元素的页面本地 URL。The page-local URL is a pound (hash) symbol (#) followed by the ID of the <map> element, such as #my-map-element. The <map> in turn contains {{HTMLElement("area")}} elements indicating the clickable areas in the image.
    +
    一个 {{domxref("DOMString")}} 表示 HTML 属性 {{htmlattrxref("usemap", "img")}},包含一个 {{HTMLElement("map")}} 元素的页面本地 URL。The page-local URL is a pound (hash) symbol (#) followed by the ID of the <map> element, such as #my-map-element. The <map> in turn contains {{HTMLElement("area")}} elements indicating the clickable areas in the image.
    {{domxref("HTMLImageElement.width")}}
    一个整数,表示 HTML 属性 {{htmlattrxref("width", "img")}},说明图像在 CSS 像素中渲染的宽度。
    {{domxref("HTMLImageElement.x")}} {{readonlyInline}}{{experimental_inline}}
    diff --git a/files/zh-cn/web/api/htmlimageelement/loading/index.html b/files/zh-cn/web/api/htmlimageelement/loading/index.html index 78ecb4dcddcbea..26284f3814002c 100644 --- a/files/zh-cn/web/api/htmlimageelement/loading/index.html +++ b/files/zh-cn/web/api/htmlimageelement/loading/index.html @@ -7,7 +7,7 @@ ---

    {{APIRef("HTML DOM")}}

    -

    {{domxref("HTMLImageElement")}} 的loading属性为一个字符串,它的值会提示 {{Glossary("用户代理")}} 告诉浏览器不在{{Glossary("可视视口")}}内的图片该如何加载。这样一来,通过推迟图片加载仅让其在需要的时候加载而非页面初始载入时立刻加载,优化了页面的载入。 

    +

    {{domxref("HTMLImageElement")}} 的loading属性为一个字符串,它的值会提示 {{Glossary("用户代理")}} 告诉浏览器不在{{Glossary("可视视口")}}内的图片该如何加载。这样一来,通过推迟图片加载仅让其在需要的时候加载而非页面初始载入时立刻加载,优化了页面的载入。

    语法

    @@ -21,47 +21,47 @@

    eager
    -
    默认行为, eager 告诉浏览器当处理 <img> 标签时立即加载图片。
    +
    默认行为, eager 告诉浏览器当处理 <img> 标签时立即加载图片。
    lazy
    -
    告诉用户代理推迟图片加载直到浏览器认为其需要立即加载时才去加载。例如,如果用户正在往下滚动页面,值为 lazy 会导致图片仅在马上要出现在 {{Glossary("可视视口")}}中时开始加载。
    +
    告诉用户代理推迟图片加载直到浏览器认为其需要立即加载时才去加载。例如,如果用户正在往下滚动页面,值为 lazy 会导致图片仅在马上要出现在 {{Glossary("可视视口")}}中时开始加载。

    使用说明

    load 事件的时机

    -

      {{domxref("Window.load_event","load")}} 事件在文档被完整的处理完成时触发。当图片使用立即加载 (默认值) 时,文档中的所有图片都会在 load 事件触发前载入。

    +

    {{domxref("Window.load_event","load")}} 事件在文档被完整的处理完成时触发。当图片使用立即加载 (默认值) 时,文档中的所有图片都会在 load 事件触发前载入。

    -

    当 loading 值设为 lazy 时,图片不再会在请求,下载,处理的时间内推迟 load 事件触发。

    +

    loading 值设为 lazy 时,图片不再会在请求,下载,处理的时间内推迟 load 事件触发。

    -

     loading 属性值设为 lazy 但是在页面初次加载时就在可视视口内的图片会立即加载但它们也不会推迟 load 事件。换句话说,这些图片不会在处理  <img> 元素时立即加载,但仍会作为页面初始加载的一部分而加载。他们只是不会影响 load 事件。

    +

    loading 属性值设为 lazy 但是在页面初次加载时就在可视视口内的图片会立即加载但它们也不会推迟 load 事件。换句话说,这些图片不会在处理 <img> 元素时立即加载,但仍会作为页面初始加载的一部分而加载。他们只是不会影响 load 事件。

    -

    这表明当 load 触发时,可视区域内懒加载的图片可能不可见。

    +

    这表明当 load 触发时,可视区域内懒加载的图片可能不可见。

    防止元素在图片懒加载时出现移位

    -

    当一个加载被 loading 属性设为 lazy 的图片最后加载时,浏览器会根据{{HTMLElement("img")}} 元素的尺寸和图片自身大小重排文档,更新被图片影响的元素的位置。

    +

    当一个加载被 loading 属性设为 lazy 的图片最后加载时,浏览器会根据{{HTMLElement("img")}} 元素的尺寸和图片自身大小重排文档,更新被图片影响的元素的位置。

    -

    为了防止重排发生,你需要使用 {{htmlattrxref("width", "img")}} 和 {{htmlattrxref("height", "img")}} 属性明确设置图片大小。通过这样建立固有长宽比,你防止了元素的移位。取决于实际的加载时间和重排,移位造成的最小的影响可能只是使用户困惑和不适,最坏的影响则是导致用户点错目标。

    +

    为了防止重排发生,你需要使用 {{htmlattrxref("width", "img")}} 和 {{htmlattrxref("height", "img")}} 属性明确设置图片大小。通过这样建立固有长宽比,你防止了元素的移位。取决于实际的加载时间和重排,移位造成的最小的影响可能只是使用户困惑和不适,最坏的影响则是导致用户点错目标。

    示例

    -

    下面展示的 addImageToList() 函数将一个照片缩略图添加到一个物品列表中,使用懒加载防止请求图片,直到其真正需要显示。

    +

    下面展示的 addImageToList() 函数将一个照片缩略图添加到一个物品列表中,使用懒加载防止请求图片,直到其真正需要显示。

    function addImageToList(url) {
    -  const list = document.querySelector("div.photo-list");
    +  const list = document.querySelector("div.photo-list");
     
       let newItem = document.createElement("div");
    -  newItem.className = "photo-item";
    +  newItem.className = "photo-item";
     
    -  let newImg = document.createElement("img");
    -  newImg.loading = "lazy";
    -  newImg.width = 320;
    -  newImg.height = 240;
    +  let newImg = document.createElement("img");
    +  newImg.loading = "lazy";
    +  newImg.width = 320;
    +  newImg.height = 240;
       newImg.src = url;
     
    -  newItem.appendChild(newImg);
    -  list.appendChild(newItem);
    +  newItem.appendChild(newImg);
    +  list.appendChild(newItem);
     }
     
    @@ -78,6 +78,6 @@

    参见

    • The {{HTMLElement("img")}} element
    • Web performance in the MDN Learning Area
    • -
    • Lazy loading in the MDN web performance guide
    • +
    • Lazy loading in the MDN web performance guide
    • {{SectionOnPage("/en-US/docs/Learn/HTML/Howto/Author_fast-loading_HTML_pages", "Use lazy loading for images")}}
    diff --git a/files/zh-cn/web/api/htmlimageelement/referrerpolicy/index.html b/files/zh-cn/web/api/htmlimageelement/referrerpolicy/index.html index be80084f752c5d..f59a7a982d63e5 100644 --- a/files/zh-cn/web/api/htmlimageelement/referrerpolicy/index.html +++ b/files/zh-cn/web/api/htmlimageelement/referrerpolicy/index.html @@ -7,7 +7,7 @@ -

    HTMLImageElement.referrerPolicy 反映了 {{HTMLElement("img")}} 元素的 HTML 属性 {{htmlattrxref("referrerpolicy","img")}} 的定义,这个属性定义了{{HTMLElement("img")}} 元素在获取资源时的引用方式。

    +

    HTMLImageElement.referrerPolicy 反映了 {{HTMLElement("img")}} 元素的 HTML 属性 {{htmlattrxref("referrerpolicy","img")}} 的定义,这个属性定义了{{HTMLElement("img")}} 元素在获取资源时的引用方式。

    @@ -21,8 +21,8 @@

      -
    • "no-referrer" 表示 HTTP 头部信息将不会发送 referrer
    • -
    • "origin" 表示 referrer 只包含策略、主机名、端口等页面源的信息。
    • +
    • "no-referrer" 表示 HTTP 头部信息将不会发送 referrer
    • +
    • "origin" 表示 referrer 只包含策略、主机名、端口等页面源的信息。
    • "unsafe-url" 这意味着引用者将包括源站和路径(但不包括片段、密码或用户名)。这种情况是不安全的,因为它可能会泄漏路径信息,这些信息已被使用 TLS 隐藏到第三方。
    diff --git a/files/zh-cn/web/api/htmlimageelement/srcset/index.html b/files/zh-cn/web/api/htmlimageelement/srcset/index.html index c732e768cdb942..897f31f2da4ec6 100644 --- a/files/zh-cn/web/api/htmlimageelement/srcset/index.html +++ b/files/zh-cn/web/api/htmlimageelement/srcset/index.html @@ -5,7 +5,7 @@ ---

    {{APIRef("HTML DOM")}}

    -

    {{domxref("HTMLImageElement")}} 的 srcset 的值是一个字符串,用来定义一个或多个图像候选地址,以 ,分割,每个候选地址将在特定条件下得以使用。候选地址包含图片 URL 和一个可选的宽度描述符和像素密度描述符,该候选地址用来在特定条件下替代原始地址成为 {{domxref("HTMLImageElement.src", "src")}}  的属性。

    +

    {{domxref("HTMLImageElement")}} 的 srcset 的值是一个字符串,用来定义一个或多个图像候选地址,以 ,分割,每个候选地址将在特定条件下得以使用。候选地址包含图片 URL 和一个可选的宽度描述符和像素密度描述符,该候选地址用来在特定条件下替代原始地址成为 {{domxref("HTMLImageElement.src", "src")}} 的属性。

    srcset属性和{{domxref("HTMLImageElement.sizes", "sizes")}} 属性是响应式网页设计中至关重要的组件,可以搭配使用来创建根据展示场景使用图像的页面。

    @@ -71,7 +71,7 @@

    CSS

    JavaScript

    -

    The following code is run within a handler for the {{domxref("Window", "window")}}'s {{domxref("Window.load_event", "load")}} event.  It uses the image's  {{domxref("HTMLImageElement.currentSrc", "currentSrc")}} property to fetch and display the URL selected by the browser from the srcset.

    +

    The following code is run within a handler for the {{domxref("Window", "window")}}'s {{domxref("Window.load_event", "load")}} event. It uses the image's {{domxref("HTMLImageElement.currentSrc", "currentSrc")}} property to fetch and display the URL selected by the browser from the srcset.

    以下代码在 {{domxref("Window", "window")}} 的 {{domxref("Window.load_event", "load")}} 事件的处理程序中运行。它使用图像的 {{domxref("HTMLImageElement.currentSrc", "currentSrc")}} 属性来获取并显示浏览器从 srcset 中选择的 URL。

    let box = document.querySelector(".box");
     let image = box.querySelector("img");
    diff --git a/files/zh-cn/web/api/htmlinputelement/index.html b/files/zh-cn/web/api/htmlinputelement/index.html
    index 33c2c3d72905d1..877472a4090e23 100644
    --- a/files/zh-cn/web/api/htmlinputelement/index.html
    +++ b/files/zh-cn/web/api/htmlinputelement/index.html
    @@ -13,7 +13,7 @@
     ---
     
    {{ APIRef("HTML DOM") }}
    -

    HTMLInputElement 接口提供了特定的属性和方法(继承自常规的{{domxref("HTMLElement", "HTML元素")}}接口)用于管理输入元素的布局和外观。

    +

    HTMLInputElement 接口提供了特定的属性和方法(继承自常规的{{domxref("HTMLElement", "HTML元素")}}接口)用于管理输入元素的布局和外观。

    {{InheritanceDiagram(600,120)}}

    @@ -26,15 +26,15 @@

    属性

    form {{readonlyInline}} - {{domxref("HTMLFormElement")}} object:  返回一个父表单元素的引用。 + {{domxref("HTMLFormElement")}} object: 返回一个父表单元素的引用。 formAction - string: 返回/ 设置 元素的 {{ htmlattrxref("formaction", "input") }} 属性, 包含处理元素提交信息程序的URI. 这会重写父表单的 {{ htmlattrxref("action", "form") }} 属性. + string: 返回/ 设置 元素的 {{ htmlattrxref("formaction", "input") }} 属性, 包含处理元素提交信息程序的URI. 这会重写父表单的 {{ htmlattrxref("action", "form") }} 属性. formEncType - string: 返回/ 设置 元素的 {{ htmlattrxref("formenctype", "input") }} 属性, 包含将表单提交到服务器的内容类型. 这会重写父表单的 {{ htmlattrxref("enctype", "form") }} 属性. + string: 返回/ 设置 元素的 {{ htmlattrxref("formenctype", "input") }} 属性, 包含将表单提交到服务器的内容类型. 这会重写父表单的 {{ htmlattrxref("enctype", "form") }} 属性. formMethod @@ -64,11 +64,11 @@

    属性

    disabled - boolean: 返回/ 设置 元素的 {{ htmlattrxref("disabled", "input") }} 属性, 表示是否禁用 {{ HTMLElement("input") }}. 该元素的值将不会被提交. 也可以查看 {{ htmlattrxref("readOnly", "input") }}  + boolean: 返回/ 设置 元素的 {{ htmlattrxref("disabled", "input") }} 属性, 表示是否禁用 {{ HTMLElement("input") }}. 该元素的值将不会被提交. 也可以查看 {{ htmlattrxref("readOnly", "input") }} autofocus - boolean: 返回/ 设置 元素的 {{ htmlattrxref("autofocus", "input") }} 属性, 指定的 {{ HTMLElement("input") }} 在页面加载时应当具有输入焦点, 例如通过键入不同的控件. 在文档中只有一个表单元素可以拥有 {{htmlattrxref("autofocus","input")}} 属性. 如果 {{htmlattrxref("type","input")}} 属性被设置为 hidden 则无效(即不可为隐藏控件设置自动焦点). + boolean: 返回/ 设置 元素的 {{ htmlattrxref("autofocus", "input") }} 属性, 指定的 {{ HTMLElement("input") }} 在页面加载时应当具有输入焦点, 例如通过键入不同的控件. 在文档中只有一个表单元素可以拥有 {{htmlattrxref("autofocus","input")}} 属性. 如果 {{htmlattrxref("type","input")}} 属性被设置为 hidden 则无效(即不可为隐藏控件设置自动焦点). required @@ -76,7 +76,7 @@

    属性

    value - string: 返回/ 设置 当前控件的值. + string: 返回/ 设置 当前控件的值.

    提示: 如果用户输入与预期不同,可能会返回空.

    @@ -86,7 +86,7 @@

    属性

    validationMessage {{readonlyInline}} - string: Returns a localized message that describes the validation constraints that the control does not satisfy (if any). This is the empty string if the control is not a candidate for constraint validation ({{htmlattrxref("willValidate","input")}} is false), or it satisfies its constraints. + string: Returns a localized message that describes the validation constraints that the control does not satisfy (if any). This is the empty string if the control is not a candidate for constraint validation ({{htmlattrxref("willValidate","input")}} is false), or it satisfies its constraints. willValidate {{readonlyInline}} @@ -100,7 +100,7 @@

    属性

    checked -  boolean: 返回/ 设置 当前选中状态,当控件{{htmlattrxref("type","input")}} 是 checkbox 或 radio时. + boolean: 返回/ 设置 当前选中状态,当控件{{htmlattrxref("type","input")}} 是 checkboxradio时. defaultChecked @@ -180,7 +180,7 @@

    属性

    pattern - string: 返回/ 设置 元素的 {{ htmlattrxref("pattern", "input") }} 属性, 包含 a regular expression that the control's value is checked against.  Use the {{htmlattrxref("title","input")}} 属性to describe the pattern to help the user. This 属性applies when the value of the {{htmlattrxref("type","input")}} 属性is text, search, tel, url or email; otherwise it is ignored. + string: 返回/ 设置 元素的 {{ htmlattrxref("pattern", "input") }} 属性, 包含 a regular expression that the control's value is checked against. Use the {{htmlattrxref("title","input")}} 属性to describe the pattern to help the user. This 属性applies when the value of the {{htmlattrxref("type","input")}} 属性is text, search, tel, url or email; otherwise it is ignored. placeholder @@ -212,7 +212,7 @@

    属性

    string: 返回/ 设置 the direction in which selection occurred. Possible values are:
    "forward" if selection was performed in the start-to-end direction of the current locale,
    "backward" for the opposite direction,
    - "none" if the direction is unknown." + "none" if the direction is unknown." @@ -230,7 +230,7 @@

    属性

    accessKey - string: 返回 a string 包含 a single character that switches input focus to the control when pressed. + string: 返回 a string 包含 a single character that switches input focus to the control when pressed. list {{readonlyInline}} @@ -242,11 +242,11 @@

    属性

    files - {{domxref("FileList")}} array: 返回the list of selected files. + {{domxref("FileList")}} array: 返回the list of selected files. {{domxref("HTMLInputElement.labels")}} {{readonlyInline}} - {{domxref("NodeList")}} array: 返回a list of {{ HTMLElement("label") }} elements that are labels for this element. + {{domxref("NodeList")}} array: 返回a list of {{ HTMLElement("label") }} elements that are labels for this element. step @@ -268,7 +268,7 @@

    属性

    autocapitalize {{experimental_inline}} - string: 定义 the capitalization behavior for user input. Valid values are none, off, characters, words, or sentences. + string: 定义 the capitalization behavior for user input. Valid values are none, off, characters, words, or sentences. @@ -309,7 +309,7 @@

    方法

    -

    Replaces a range of text with the new text. If the start and end arguments are not provided, the range is assumed to be the selection.The final argument determines how the selection should be set after the text has been replaced. The possible values are:

    +

    Replaces a range of text with the new text. If the start and end arguments are not provided, the range is assumed to be the selection.The final argument determines how the selection should be set after the text has been replaced. The possible values are:

    "select"
    @@ -343,7 +343,7 @@

    方法

  • if the method is not applicable to for the current {{htmlattrxref("type","input")}} value,
  • if the element has no {{htmlattrxref("step","input")}} value,
  • if the {{htmlattrxref("value","input")}} cannot be converted to a number,
  • -
  • if the resulting value is above the {{htmlattrxref("max","input")}} or below the {{htmlattrxref("min","input")}}. 
  • +
  • if the resulting value is above the {{htmlattrxref("max","input")}} or below the {{htmlattrxref("min","input")}}.
  • {{domxref("HTMLInputElement.stepUp()")}}
    @@ -356,11 +356,11 @@

    方法

    {{domxref("HTMLInputElement.mozSetFileArray()")}}{{non-standard_inline}}
    -
    Sets the files selected on the input to the given array of {{domxref("File")}} objects.  This is an alternative to mozSetFileNameArray() which can be used in frame scripts: a chrome script can open files as File objects and send them via message manager.
    +
    Sets the files selected on the input to the given array of {{domxref("File")}} objects. This is an alternative to mozSetFileNameArray() which can be used in frame scripts: a chrome script can open files as File objects and send them via message manager.
    {{domxref("HTMLInputElement.mozGetFileNameArray()")}}{{non-standard_inline}}
    Returns an array of all the file names from the input.
    {{domxref("HTMLInputElement.mozSetFileNameArray()")}}{{non-standard_inline}}
    -
    Sets the filenames for the files selected on the input.  Not for use in frame scripts, because it accesses the file system.
    +
    Sets the filenames for the files selected on the input. Not for use in frame scripts, because it accesses the file system.
    diff --git a/files/zh-cn/web/api/htmlinputelement/invalid_event/index.html b/files/zh-cn/web/api/htmlinputelement/invalid_event/index.html index d047f1e5a0bd80..cd0205c1171be8 100644 --- a/files/zh-cn/web/api/htmlinputelement/invalid_event/index.html +++ b/files/zh-cn/web/api/htmlinputelement/invalid_event/index.html @@ -12,7 +12,7 @@ ---
    {{APIRef}}
    -

    若一个可提交元素在检查有效性时,不符合对它的约束条件,则会触发 invalid 事件。

    +

    若一个可提交元素在检查有效性时,不符合对它的约束条件,则会触发 invalid 事件。

    @@ -35,13 +35,13 @@
    -

    这个事件可用于展示提交表单时所出现的问题的概览。当表单提交时,若任一表单控件无效,则会触发 invalid 事件。对可提交元素有效性的检查是在提交父元素 {{HtmlElement("form")}} 之前或调用父元素 <form> 或元素自己的 checkValidity() 方法之后。

    +

    这个事件可用于展示提交表单时所出现的问题的概览。当表单提交时,若任一表单控件无效,则会触发 invalid 事件。对可提交元素有效性的检查是在提交父元素 {{HtmlElement("form")}} 之前或调用父元素 <form> 或元素自己的 checkValidity() 方法之后。

    这个事件不会在 {{Event("blur")}} 事件中触发。

    示例

    -

    如果表单提交时有无效值,检查可提交元素时发现了错误,则 invalid 事件会在那个无效元素上触发。在这个例子中,当输入无效值触发 invalid 事件时,这个无效值被记录下来。

    +

    如果表单提交时有无效值,检查可提交元素时发现了错误,则 invalid 事件会在那个无效元素上触发。在这个例子中,当输入无效值触发 invalid 事件时,这个无效值被记录下来。

    HTML

    diff --git a/files/zh-cn/web/api/htmlinputelement/labels/index.html b/files/zh-cn/web/api/htmlinputelement/labels/index.html index a19328e0f93237..d0fe943bfa39be 100644 --- a/files/zh-cn/web/api/htmlinputelement/labels/index.html +++ b/files/zh-cn/web/api/htmlinputelement/labels/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef("DOM")}}
    -

     HTMLInputElement.labels 为只读属性,它返回一个{{domxref("NodeList")}} 实例,绑定当前的{{HTMLElement("input")}} 节点的{{HTMLElement("label")}} 元素。

    +

    HTMLInputElement.labels 为只读属性,它返回一个{{domxref("NodeList")}} 实例,绑定当前的{{HTMLElement("input")}} 节点的{{HTMLElement("label")}} 元素。

    @@ -16,7 +16,7 @@

    语法

    Return value

    -

     {{domxref("NodeList")}} 包含 <label> 元素和 <input> 元素.

    +

    {{domxref("NodeList")}} 包含 <label> 元素和 <input> 元素.

    实例

    diff --git a/files/zh-cn/web/api/htmlinputelement/multiple/index.html b/files/zh-cn/web/api/htmlinputelement/multiple/index.html index d99a4c11537bdb..379c64361f8918 100644 --- a/files/zh-cn/web/api/htmlinputelement/multiple/index.html +++ b/files/zh-cn/web/api/htmlinputelement/multiple/index.html @@ -5,7 +5,7 @@ ---
    {{ APIRef("HTML DOM") }}
    -

    HTMLInputElement.multiple 属性表示一个input是否可以有多个值。目前只有火狐支持 <input type="file">存有多个值。

    +

    HTMLInputElement.multiple 属性表示一个input是否可以有多个值。目前只有火狐支持 <input type="file">存有多个值。

    实例

    diff --git a/files/zh-cn/web/api/htmlinputelement/select_event/index.html b/files/zh-cn/web/api/htmlinputelement/select_event/index.html index de55a896c67ecd..0ec35ddf70ed68 100644 --- a/files/zh-cn/web/api/htmlinputelement/select_event/index.html +++ b/files/zh-cn/web/api/htmlinputelement/select_event/index.html @@ -10,7 +10,7 @@

    select 选择某些文本时会触发事件。

    -

    该事件不适用于所有语言的所有元素。例如,在 HTML,select事件只能在表单{{HtmlElement('input/text', '<input type="text">')}}和 {{HtmlElement("textarea")}}元素上触发。

    +

    该事件不适用于所有语言的所有元素。例如,在 HTML,select事件只能在表单{{HtmlElement('input/text', '<input type="text">')}}和 {{HtmlElement("textarea")}}元素上触发。

    General info

    diff --git a/files/zh-cn/web/api/htmlinputelement/selectionchange_event/index.html b/files/zh-cn/web/api/htmlinputelement/selectionchange_event/index.html index aa2511cf72c949..1a62dde2ac80e3 100644 --- a/files/zh-cn/web/api/htmlinputelement/selectionchange_event/index.html +++ b/files/zh-cn/web/api/htmlinputelement/selectionchange_event/index.html @@ -6,7 +6,7 @@ ---
    {{ApiRef('DOM')}}{{SeeCompatTable}}
    -

    GlobalEventHandlers.onselectionchange  属性表示当一个 {{event("selectstart")}} 事件被触发,比如在页面上选中文字变化时,会执行绑定的事件处理器

    +

    GlobalEventHandlers.onselectionchange 属性表示当一个 {{event("selectstart")}} 事件被触发,比如在页面上选中文字变化时,会执行绑定的事件处理器

    Syntax

    diff --git a/files/zh-cn/web/api/htmlinputelement/setselectionrange/index.html b/files/zh-cn/web/api/htmlinputelement/setselectionrange/index.html index 73f2beb6f71dfe..62ddf50d8baa90 100644 --- a/files/zh-cn/web/api/htmlinputelement/setselectionrange/index.html +++ b/files/zh-cn/web/api/htmlinputelement/setselectionrange/index.html @@ -12,15 +12,15 @@ ---
    {{APIRef("HTML DOM")}}
    -

    HTMLInputElement.setSelectionRange 方法用于设定{{HTMLElement("input")}} 或 {{HTMLElement("textarea")}} 元素中当前选中文本的起始和结束位置。

    +

    HTMLInputElement.setSelectionRange 方法用于设定{{HTMLElement("input")}} 或 {{HTMLElement("textarea")}} 元素中当前选中文本的起始和结束位置。

    在较新的浏览器中,你可以通过一个可选的 selectionDirection 来指定文本选中的方向。比如通过点击和拖动从结束位置往起始位置选中一个字符串。

    -

    每次调用这个这个方法都会更新 HTMLInputElementselectionStart, selectionEnd 和 selectionDirection 属性。

    +

    每次调用这个这个方法都会更新 HTMLInputElementselectionStart, selectionEndselectionDirection 属性。

    -

    要注意的是,在 WHATWG forms spec 中,selectionStartselectionEnd 属性和 setSelectionRange 方法只能应用于类型为文本、搜索、链接、电话号码和密码的输入。Chrome 从版本 33 开始会在访问其余类型的这些属性和方法时抛出异常。例如,输入类型为数字时会抛出:“不能从'HTMLInputElement'中读取'selectionStart'属性:输入元素的类型('number')不支持选择(Failed to read the 'selectionStart' property from 'HTMLInputElement': The input element's type ('number') does not support selection)”。

    +

    要注意的是,在 WHATWG forms spec 中,selectionStart, selectionEnd 属性和 setSelectionRange 方法只能应用于类型为文本、搜索、链接、电话号码和密码的输入。Chrome 从版本 33 开始会在访问其余类型的这些属性和方法时抛出异常。例如,输入类型为数字时会抛出:“不能从'HTMLInputElement'中读取'selectionStart'属性:输入元素的类型('number')不支持选择(Failed to read the 'selectionStart' property from 'HTMLInputElement': The input element's type ('number') does not support selection)”。

    -

    如果你希望全选输入元素中的文本,你可以使用 HTMLInputElement.select() 方法。

    +

    如果你希望全选输入元素中的文本,你可以使用 HTMLInputElement.select() 方法。

    语法

    @@ -28,21 +28,21 @@

    语法

    参数

    -

    如果 selectionEnd 小于 selectionStart,则二者都会被看作 selectionEnd

    +

    如果 selectionEnd 小于 selectionStart,则二者都会被看作 selectionEnd

    selectionStart
    被选中的第一个字符的位置索引,从0开始。如果这个值比元素的 value 长度还大,则会被看作 value 最后一个位置的索引。
    selectionEnd
    被选中的最后一个字符的 下一个 位置索引。如果这个值比元素的value长度还大,则会被看作value最后一个位置的索引。
    -
    selectionDirection {{optional_inline}}
    +
    selectionDirection {{optional_inline}}
    一个表示选择方向的字符串,可能的值有:
    • "forward"
    • "backward"
    • -
    • "none" 默认值,表示方向未知或不相关。
    • +
    • "none" 默认值,表示方向未知或不相关。

    示例

    diff --git a/files/zh-cn/web/api/htmlinputelement/webkitdirectory/index.html b/files/zh-cn/web/api/htmlinputelement/webkitdirectory/index.html index 1693d7a5853a26..9ba33706730f2f 100644 --- a/files/zh-cn/web/api/htmlinputelement/webkitdirectory/index.html +++ b/files/zh-cn/web/api/htmlinputelement/webkitdirectory/index.html @@ -24,7 +24,7 @@

    语法

     HTMLInputElement.webkitdirectory = boolValue
    + class="brush: js"> HTMLInputElement.webkitdirectory = boolValue

    diff --git a/files/zh-cn/web/api/htmllabelelement/index.html b/files/zh-cn/web/api/htmllabelelement/index.html index cef8db5f6c1ff5..4df301e50bb4d3 100644 --- a/files/zh-cn/web/api/htmllabelelement/index.html +++ b/files/zh-cn/web/api/htmllabelelement/index.html @@ -5,7 +5,7 @@ ---
    {{ APIRef("HTML DOM") }}
    -

    The HTMLLabelElement interface gives access to properties specific to {{HTMLElement("label")}} elements. It inherits from {{domxref("HTMLElement")}}. 

    +

    The HTMLLabelElement interface gives access to properties specific to {{HTMLElement("label")}} elements. It inherits from {{domxref("HTMLElement")}}.

    Properties

    @@ -26,12 +26,12 @@

    Properties

    Reflects the {{htmlattrxref("accesskey", "label")}} HTML attribute. - control {{readonlyInline}} + control {{readonlyInline}} {{domxref("HTMLElement")}} The labeled control. - form {{readonlyInline}} + form {{readonlyInline}} {{domxref("HTMLFormElement")}} The form owner of this label. diff --git a/files/zh-cn/web/api/htmllinkelement/index.html b/files/zh-cn/web/api/htmllinkelement/index.html index b4f451d9763dfa..1704cc339ea13b 100644 --- a/files/zh-cn/web/api/htmllinkelement/index.html +++ b/files/zh-cn/web/api/htmllinkelement/index.html @@ -24,23 +24,23 @@

    Properties

    Inherits properties from its parent, {{domxref("HTMLElement")}}, and {{domxref("LinkStyle")}}.

    -
     
    +
    {{domxref("HTMLLinkElement.as")}}
    Is a {{domxref("DOMString")}} representing the type of content being loaded by the HTML link.
    {{domxref("HTMLLinkElement.crossOrigin")}} {{experimental_inline}}
    -
    Is a {{domxref("DOMString")}} that corresponds to the CORS setting for this link element. See CORS settings attributes for details.
    +
    Is a {{domxref("DOMString")}} that corresponds to the CORS setting for this link element. See CORS settings attributes for details.
    {{domxref("HTMLLinkElement.disabled")}}
    Is a Boolean which represents whether the link is disabled; currently only used with style sheet links.
    {{domxref("HTMLLinkElement.href")}}
    -
    Is a {{domxref("DOMString")}} representing the URI for the target resource.
    +
    Is a {{domxref("DOMString")}} representing the URI for the target resource.
    {{domxref("HTMLLinkElement.hreflang")}}
    -
    Is a {{domxref("DOMString")}} representing the language code for the linked resource.
    +
    Is a {{domxref("DOMString")}} representing the language code for the linked resource.
    {{domxref("HTMLLinkElement.media")}}
    Is a {{domxref("DOMString")}} representing a list of one or more media formats to which the resource applies.
    {{domxref("HTMLLinkElement.referrerPolicy")}} {{experimental_inline}}
    Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("referrerpolicy", "link")}} HTML attribute indicating which referrer to use.
    {{domxref("HTMLLinkElement.rel")}}
    -
    Is a {{domxref("DOMString")}} representing the forward relationship of the linked resource from the document to the resource.
    +
    Is a {{domxref("DOMString")}} representing the forward relationship of the linked resource from the document to the resource.
    {{domxref("HTMLLinkElement.relList")}} {{readonlyInline}}
    Is a {{domxref("DOMTokenList")}} that reflects the {{htmlattrxref("rel", "link")}} HTML attribute, as a list of tokens.
    {{domxref("HTMLLinkElement.sizes")}} {{readonlyInline}}
    @@ -48,7 +48,7 @@

    Properties

    {{domxref("LinkStyle.sheet")}} {{readonlyInline}}
    Returns the {{domxref("StyleSheet")}} object associated with the given element, or null if there is none.
    {{domxref("HTMLLinkElement.type")}}
    -
    Is a {{domxref("DOMString")}} representing the MIME type of the linked resource.
    +
    Is a {{domxref("DOMString")}} representing the MIME type of the linked resource.

    Obsolete properties

    @@ -61,7 +61,7 @@

    Obsolete properties

    Note: Currently the W3C HTML 5.2 spec states that rev is no longer obsolete, whereas the WHATWG living standard still has it labeled obsolete. Until this discrepancy is resolved, you should still assume it is obsolete.
    {{domxref("HTMLLinkElement.target")}} {{Deprecated_Inline}}
    -
    Is a {{domxref("DOMString")}} representing the name of the target frame to which the resource applies.
    +
    Is a {{domxref("DOMString")}} representing the name of the target frame to which the resource applies.

    Methods

    diff --git a/files/zh-cn/web/api/htmllinkelement/referrerpolicy/index.html b/files/zh-cn/web/api/htmllinkelement/referrerpolicy/index.html index 9df4ab4c8e7a4f..671555fd29dfda 100644 --- a/files/zh-cn/web/api/htmllinkelement/referrerpolicy/index.html +++ b/files/zh-cn/web/api/htmllinkelement/referrerpolicy/index.html @@ -5,13 +5,13 @@ ---
    {{APIRef}}{{SeeCompatTable}}
    -

     

    +

    -

    HTMLLinkElement.referrerPolicy 反映了 {{HTMLElement("link")}} 元素的HTML属性 {{htmlattrxref("referrerpolicy","link")}} 的定义,这个属性定义了{{HTMLElement("link")}} 元素在获取资源时的引用方式。

    +

    HTMLLinkElement.referrerPolicy 反映了 {{HTMLElement("link")}} 元素的HTML属性 {{htmlattrxref("referrerpolicy","link")}} 的定义,这个属性定义了{{HTMLElement("link")}} 元素在获取资源时的引用方式。

    -

    详情请参考HTTP header中的  {{HTTPHeader("Referrer-Policy")}} 。

    +

    详情请参考HTTP header中的 {{HTTPHeader("Referrer-Policy")}} 。

    -

     

    +

    语法

    diff --git a/files/zh-cn/web/api/htmlmediaelement/abort_event/index.html b/files/zh-cn/web/api/htmlmediaelement/abort_event/index.html index 031475d2c5fa71..d851d391b207ac 100644 --- a/files/zh-cn/web/api/htmlmediaelement/abort_event/index.html +++ b/files/zh-cn/web/api/htmlmediaelement/abort_event/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef}}
    -

    资源没有被完全加载时就会触发 abort 事件,但错误不会触发该事件。

    +

    资源没有被完全加载时就会触发 abort 事件,但错误不会触发该事件。

    diff --git a/files/zh-cn/web/api/htmlmediaelement/audiotracks/index.html b/files/zh-cn/web/api/htmlmediaelement/audiotracks/index.html index 30c07e76908156..5240bc8fc24c26 100644 --- a/files/zh-cn/web/api/htmlmediaelement/audiotracks/index.html +++ b/files/zh-cn/web/api/htmlmediaelement/audiotracks/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef("HTML DOM")}}
    -

     HTMLMediaElement.audioTracks 获得可用音频轨道的数量

    +

    HTMLMediaElement.audioTracks 获得可用音频轨道的数量

    语法

    @@ -13,7 +13,7 @@

    语法

    返回值

    -

    AudioTrackList    对象 表示音频/视频的可用音频轨道

    +

    AudioTrackList 对象 表示音频/视频的可用音频轨道

    用例

    diff --git a/files/zh-cn/web/api/htmlmediaelement/autoplay/index.html b/files/zh-cn/web/api/htmlmediaelement/autoplay/index.html index 593957ebefe12e..bc270191407758 100644 --- a/files/zh-cn/web/api/htmlmediaelement/autoplay/index.html +++ b/files/zh-cn/web/api/htmlmediaelement/autoplay/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef("HTML DOM")}}
    -

    HTMLMediaElement.autoplay 属性等同于 HTML 属性中的 {{htmlattrxref("autoplay", "video")}}, 它表示当 player 下载到足够可以播放的媒体文件时,是否自动播放视频。

    +

    HTMLMediaElement.autoplay 属性等同于 HTML 属性中的 {{htmlattrxref("autoplay", "video")}}, 它表示当 player 下载到足够可以播放的媒体文件时,是否自动播放视频。

    注意:一些版本的 Chrome 只支持autostart, 不支持autoplay

    @@ -40,5 +40,5 @@

    浏览器支持

    看看这里

      -
    • 接口定义: {{domxref("HTMLMediaElement")}}.
    • +
    • 接口定义: {{domxref("HTMLMediaElement")}}.
    diff --git a/files/zh-cn/web/api/htmlmediaelement/buffered/index.html b/files/zh-cn/web/api/htmlmediaelement/buffered/index.html index 51f279be4c73e9..bf1a096de6a29e 100644 --- a/files/zh-cn/web/api/htmlmediaelement/buffered/index.html +++ b/files/zh-cn/web/api/htmlmediaelement/buffered/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef("HTML DOM")}}
    -

    HTMLMediaElement.buffered 返回一个只读 {{domxref("TimeRanges")}} 对象 返回媒体已缓冲的区域

    +

    HTMLMediaElement.buffered 返回一个只读 {{domxref("TimeRanges")}} 对象 返回媒体已缓冲的区域

    Note: This feature is not available in Web Workers.
    @@ -19,7 +19,7 @@

    返回值

    length - 获得音频/视频中已缓冲范围的数量

    -

    buffered.start 开始的区域 

    +

    buffered.start 开始的区域

    buffered.end 结束的区域

    diff --git a/files/zh-cn/web/api/htmlmediaelement/canplaytype/index.html b/files/zh-cn/web/api/htmlmediaelement/canplaytype/index.html index bb646ac12020a9..84203059b49c94 100644 --- a/files/zh-cn/web/api/htmlmediaelement/canplaytype/index.html +++ b/files/zh-cn/web/api/htmlmediaelement/canplaytype/index.html @@ -9,7 +9,7 @@ ---
    {{APIRef("HTML DOM")}}
    -

     HTMLMediaElement.canPlayType() 方法会判断传递的媒体格式参数是否能够被播放。

    +

    HTMLMediaElement.canPlayType() 方法会判断传递的媒体格式参数是否能够被播放。

    Note: This feature is not available in Web Workers.
    @@ -27,7 +27,7 @@

    参数

    返回值

    -

    {{jsxref('String')}}. 有可能的值为:

    +

    {{jsxref('String')}}. 有可能的值为:

    • 'probably': 这种媒体文件似乎是可播放的。
    • @@ -36,7 +36,7 @@

      返回值

    -

    提醒: 以前 canPlayType('video/webm') 会返回 'probably'。从 Gecko 28 {{geckoRelease(28)}} 开始, 将返回 'maybe'。 ({{bug(884275)}})

    +

    提醒: 以前 canPlayType('video/webm') 会返回 'probably'。从 Gecko 28 {{geckoRelease(28)}} 开始, 将返回 'maybe'。 ({{bug(884275)}})

    示例

    @@ -56,5 +56,5 @@

    浏览器兼容性

    其他

      -
    • 接口定义, {{domxref("HTMLMediaElement")}}.
    • +
    • 接口定义, {{domxref("HTMLMediaElement")}}.
    diff --git a/files/zh-cn/web/api/htmlmediaelement/controller/index.html b/files/zh-cn/web/api/htmlmediaelement/controller/index.html index 0e20d65f381860..5c10dee2d44e12 100644 --- a/files/zh-cn/web/api/htmlmediaelement/controller/index.html +++ b/files/zh-cn/web/api/htmlmediaelement/controller/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef("HTML DOM")}}
    -

    TMLMediaElement.controller 属性表示对应媒体元素的控制器。

    +

    TMLMediaElement.controller 属性表示对应媒体元素的控制器。

    语法

    @@ -13,7 +13,7 @@

    语法

    Value

    -

    属性的值是一个 {{domxref("MediaController")}} 对象,如果没有对应的媒体元素值为null,默认值为null。 

    +

    属性的值是一个 {{domxref("MediaController")}} 对象,如果没有对应的媒体元素值为null,默认值为null

    示例

    diff --git a/files/zh-cn/web/api/htmlmediaelement/controlslist/index.html b/files/zh-cn/web/api/htmlmediaelement/controlslist/index.html index b020f83bbd2d30..3283292d1fea82 100644 --- a/files/zh-cn/web/api/htmlmediaelement/controlslist/index.html +++ b/files/zh-cn/web/api/htmlmediaelement/controlslist/index.html @@ -5,7 +5,7 @@ ---

    {{SeeCompatTable}}{{APIRef("HTML DOM")}}

    -

    HTMLMediaElement接口的controlsList 属性返回 DOMTokenList,帮助用户在显示其自己的控件集时选择要在媒体元素上显示的控件。DOMTokenList 可以设置以下三个可能值中的一个或多个:nodownload,nofullscreen 和 noremoteplayback(值是一组无序的空格分隔标记,这些标记ASCII 不区分大小写的)。

    +

    HTMLMediaElement接口的controlsList 属性返回 DOMTokenList,帮助用户在显示其自己的控件集时选择要在媒体元素上显示的控件。DOMTokenList 可以设置以下三个可能值中的一个或多个:nodownload,nofullscreen 和 noremoteplayback(值是一组无序的空格分隔标记,这些标记ASCII 不区分大小写的)。

    1. nodownload关键字暗示的下载控制应使用用户代理自己的一套媒体元素控件时被隐藏。
    2. @@ -44,5 +44,5 @@

      浏览器兼容性

      参阅

      diff --git a/files/zh-cn/web/api/htmlmediaelement/crossorigin/index.html b/files/zh-cn/web/api/htmlmediaelement/crossorigin/index.html index 7c3d5d4b1f0f68..3dc2caaec47aac 100644 --- a/files/zh-cn/web/api/htmlmediaelement/crossorigin/index.html +++ b/files/zh-cn/web/api/htmlmediaelement/crossorigin/index.html @@ -5,7 +5,7 @@ ---
      {{APIRef("HTML DOM")}}
      -

      HTMLMediaElement.crossOrigin 属性是当前图片元素的跨域资源共享 (CORS) 设置,详情可参考 CORS 设置。

      +

      HTMLMediaElement.crossOrigin 属性是当前图片元素的跨域资源共享 (CORS) 设置,详情可参考 CORS 设置。

      规范

      diff --git a/files/zh-cn/web/api/htmlmediaelement/currentsrc/index.html b/files/zh-cn/web/api/htmlmediaelement/currentsrc/index.html index 4ec683b97b6b17..967653eb2d75c1 100644 --- a/files/zh-cn/web/api/htmlmediaelement/currentsrc/index.html +++ b/files/zh-cn/web/api/htmlmediaelement/currentsrc/index.html @@ -5,7 +5,7 @@ ---
      {{APIRef("HTML DOM")}}
      -

      HTMLMediaElement.currentSrc 属性包含所选媒体源的绝对 URL 路径。例如当程序会根据用户显示器分辨率选择不同媒体文件时会用到这个属性,显然它是只读的。当networkState值为EMPTY时,本属性值为空字符串(empty string).

      +

      HTMLMediaElement.currentSrc 属性包含所选媒体源的绝对 URL 路径。例如当程序会根据用户显示器分辨率选择不同媒体文件时会用到这个属性,显然它是只读的。当networkState值为EMPTY时,本属性值为空字符串(empty string).

      语法

      @@ -13,7 +13,7 @@

      语法

      -

      一个 {{domxref("DOMString")}} 对象包含所选媒体源的绝对 URL 路径。当 networkState == EMPTY 时,其值为空字符串(empty string); 否则,它会是 {{domxref("HTMLSourceElement")}} 所包含媒体列表中的一个,或者是 {{HTMLElement("source")}} 标签的 src 值。

      +

      一个 {{domxref("DOMString")}} 对象包含所选媒体源的绝对 URL 路径。当 networkState == EMPTY 时,其值为空字符串(empty string); 否则,它会是 {{domxref("HTMLSourceElement")}} 所包含媒体列表中的一个,或者是 {{HTMLElement("source")}} 标签的 src 值。

      示例

      diff --git a/files/zh-cn/web/api/htmlmediaelement/currenttime/index.html b/files/zh-cn/web/api/htmlmediaelement/currenttime/index.html index 7650cf7053f783..4b46474f3ab6e7 100644 --- a/files/zh-cn/web/api/htmlmediaelement/currenttime/index.html +++ b/files/zh-cn/web/api/htmlmediaelement/currenttime/index.html @@ -5,14 +5,14 @@ ---
      {{APIRef("HTML DOM")}}
      -
       
      +
      -
      HTMLMediaElement.currentTime 属性会以秒为单位返回当前媒体元素的播放时间。设置这个属性会改变媒体元素当前播放位置。
      +
      HTMLMediaElement.currentTime 属性会以秒为单位返回当前媒体元素的播放时间。设置这个属性会改变媒体元素当前播放位置。
      -
       
      +
      -

      该处原文:The HTMLMediaElement.currentTime property gives the current playback time in seconds. Setting this value seeks the media to the new time.

      +

      该处原文:The HTMLMediaElement.currentTime property gives the current playback time in seconds. Setting this value seeks the media to the new time.

      语法

      @@ -20,11 +20,11 @@

      语法

      var cTime = video.currentTime;
       video.currentTime = 35;
      -

       

      +

      返回值

      -

      一个 double 双精度浮点数。

      +

      一个 double 双精度浮点数。

      示例

      diff --git a/files/zh-cn/web/api/htmlmediaelement/duration/index.html b/files/zh-cn/web/api/htmlmediaelement/duration/index.html index 76ca4139a82a56..e29654cbbc461d 100644 --- a/files/zh-cn/web/api/htmlmediaelement/duration/index.html +++ b/files/zh-cn/web/api/htmlmediaelement/duration/index.html @@ -18,7 +18,7 @@

      语法

      -

       如果媒体数据可用但长度未知,则此值为 NaN。 如果媒体流式传输且没有预定义长度,则值为 Inf。

      +

      如果媒体数据可用但长度未知,则此值为 NaN。 如果媒体流式传输且没有预定义长度,则值为 Inf。

      例子

      diff --git a/files/zh-cn/web/api/htmlmediaelement/durationchange_event/index.html b/files/zh-cn/web/api/htmlmediaelement/durationchange_event/index.html index 785346366363ac..937871d5896cf9 100644 --- a/files/zh-cn/web/api/htmlmediaelement/durationchange_event/index.html +++ b/files/zh-cn/web/api/htmlmediaelement/durationchange_event/index.html @@ -12,7 +12,7 @@ ---

      {{APIRef("HTMLMediaElement")}}

      -

      durationchange 事件会在 duration 属性更新时被触发。

      +

      durationchange 事件会在 duration 属性更新时被触发。

    @@ -49,9 +49,9 @@

    例子

    -

    下面的例子为 HTMLMediaElement 的 durationchange  事件添加事件监听器,然后在事件触发时发送一个消息。

    +

    下面的例子为 HTMLMediaElement 的 durationchange 事件添加事件监听器,然后在事件触发时发送一个消息。

    -

    使用 addEventListener():

    +

    使用 addEventListener():

    const video = document.querySelector('video');
     
    @@ -59,7 +59,7 @@ 

    例子

    console.log('Not sure why, but the duration of the video has changed.'); });
    -

    使用 ondurationchange 事件处理器属性:

    +

    使用 ondurationchange 事件处理器属性:

    const video = document.querySelector('video');
     
    diff --git a/files/zh-cn/web/api/htmlmediaelement/error_event/index.html b/files/zh-cn/web/api/htmlmediaelement/error_event/index.html
    index 04060d628189b4..d2f000a98ea597 100644
    --- a/files/zh-cn/web/api/htmlmediaelement/error_event/index.html
    +++ b/files/zh-cn/web/api/htmlmediaelement/error_event/index.html
    @@ -5,7 +5,7 @@
     ---
     
    {{APIRef}}
    -

    事件 error 会在因为一些错误(如网络连接错误)导致无法加载资源的时候触发。

    +

    事件 error 会在因为一些错误(如网络连接错误)导致无法加载资源的时候触发。

    diff --git a/files/zh-cn/web/api/htmlmediaelement/index.html b/files/zh-cn/web/api/htmlmediaelement/index.html index fa4d923f74b55d..1db30aaa08b60a 100644 --- a/files/zh-cn/web/api/htmlmediaelement/index.html +++ b/files/zh-cn/web/api/htmlmediaelement/index.html @@ -12,7 +12,7 @@ ---
    {{APIRef("HTML DOM")}}
    -
    HTML 媒体元素接口在属性和方法中添加了 {{domxref("HTMLElement", "HTML 元素")}}来支持基础的媒体相关的能力,就像 audio 和 video 一样。{{domxref("HTMLVideoElement", "HTML 视频元素")}}和 {{domxref("HTMLAudioElement", "HTML 音频元素")}}元素都继承自此接口。
    +
    HTML 媒体元素接口在属性和方法中添加了 {{domxref("HTMLElement", "HTML 元素")}}来支持基础的媒体相关的能力,就像 audio 和 video 一样。{{domxref("HTMLVideoElement", "HTML 视频元素")}}和 {{domxref("HTMLAudioElement", "HTML 音频元素")}}元素都继承自此接口。
    @@ -20,7 +20,7 @@

    特性

    -

    从父级 {{domxref("HTMLElement")}}, {{domxref("Element")}}, {{domxref("Node")}}, 和 {{domxref("EventTarget")}} 继承属性

    +

    从父级 {{domxref("HTMLElement")}}, {{domxref("Element")}}, {{domxref("Node")}}, 和 {{domxref("EventTarget")}} 继承属性

    @@ -65,7 +65,7 @@

    特性

    - + @@ -85,12 +85,12 @@

    特性

    - + - + @@ -100,7 +100,7 @@

    特性

    - + @@ -110,7 +110,7 @@

    特性

    - + @@ -120,7 +120,7 @@

    特性

    - + @@ -130,7 +130,7 @@

    特性

    - + @@ -154,7 +154,7 @@

    特性

    - + @@ -170,7 +170,7 @@

    特性

    - + @@ -237,7 +237,7 @@

    特性

    - + @@ -326,7 +326,7 @@

    Methods

    @@ -338,7 +338,7 @@

    Methods

    - + @@ -363,7 +363,7 @@

    Methods

    - + diff --git a/files/zh-cn/web/api/htmlmediaelement/load/index.html b/files/zh-cn/web/api/htmlmediaelement/load/index.html index 8f94efdbea6507..2ac63702f250ac 100644 --- a/files/zh-cn/web/api/htmlmediaelement/load/index.html +++ b/files/zh-cn/web/api/htmlmediaelement/load/index.html @@ -5,9 +5,9 @@ ---
    {{APIRef("HTML DOM")}}
    -

     load() 方法重置媒体成初始化状态,选择一个播放源, 为载入媒体重新播放做准备。 媒体预播放的信息是由 preload 这个参数决定的。

    +

    load() 方法重置媒体成初始化状态,选择一个播放源, 为载入媒体重新播放做准备。 媒体预播放的信息是由 preload 这个参数决定的。

    -

    此方法只在对媒体做动态更改时管用,要么更改src属性,要么添加或删除source 。 load() 将会重置元素重新扫描可用的源,从而让改动生效。

    +

    此方法只在对媒体做动态更改时管用,要么更改src属性,要么添加或删除sourceload() 将会重置元素重新扫描可用的源,从而让改动生效。

    语法

    @@ -23,23 +23,23 @@

    返回值

    用法

    -

    调用 load() 会使媒体上所有正在进行的操作中止,然后根据 audio 或者 video 元素的 src 或者 source 属性里寻找合适的播放源并重新加载媒体内容。 更多查看  Supporting multiple formats 和 Video and audio content 。

    +

    调用 load() 会使媒体上所有正在进行的操作中止,然后根据 audio 或者 video 元素的 src 或者 source 属性里寻找合适的播放源并重新加载媒体内容。 更多查看 Supporting multiple formatsVideo and audio content

    The process of aborting any ongoing activities will cause any outstanding {{jsxref("Promise")}}s returned by {{domxref("HTMLMediaElement.play", "play()")}} being resolved or rejected as appropriate based on their status before the loading of new media can begin. Pending play promises are aborted with an "AbortError" {{domxref("DOMException")}}.

    在 load 过程中 合适的事件会发生并通知给媒体本身,包括:

      -
    • 如果已经是 load 过了,则 abort 事件发送给媒体。
    • +
    • 如果已经是 load 过了,则 abort 事件发送给媒体。
    • If the element has already been initialized with media, the {{event("emptied")}} event is sent.
    • -
    • 如果重置播放位置到开始,通常指修改播放位置,timeupdate 事件触发。
    • -
    • 当已经选择了源并且已经准备加载内容了,loadstart 事件触发。
    • +
    • 如果重置播放位置到开始,通常指修改播放位置,timeupdate 事件触发。
    • +
    • 当已经选择了源并且已经准备加载内容了,loadstart 事件触发。
    • 之前的几点,媒体加载并且事件已经送达

    例子

    -

    例子中有一个 {{HTMLElement("video")}} 元素然后重置它 load().

    +

    例子中有一个 {{HTMLElement("video")}} 元素然后重置它 load().

    var mediaElem = document.querySelector("video");
     mediaElem.load();
    diff --git a/files/zh-cn/web/api/htmlmediaelement/loadstart_event/index.html b/files/zh-cn/web/api/htmlmediaelement/loadstart_event/index.html
    index be1fd47ee0f739..cc1ca68b180b22 100644
    --- a/files/zh-cn/web/api/htmlmediaelement/loadstart_event/index.html
    +++ b/files/zh-cn/web/api/htmlmediaelement/loadstart_event/index.html
    @@ -5,7 +5,7 @@
     ---
     
    {{APIRef}}
    -

    loadstart 事件当浏览器开始载入一个资源文件时 fired.

    +

    loadstart 事件当浏览器开始载入一个资源文件时 fired.

    crossOrigin {{ domxref("DOMString") }}一个表示媒体元素 CORS 设置的{{ domxref("DOMString") }}。从 CORS settings attributes 查看更多详情一个表示媒体元素 CORS 设置的{{ domxref("DOMString") }}。从 CORS settings attributes 查看更多详情
    currentSrc {{readonlyinline}}
    defaultPlaybackRate double控制媒体的播放速度。1.0 表示正常的播放速度,如果值小于 1.0,则播放速度会比”正常速度“慢,如果值大于 1.0,则播放速度会比”正常速度“快。0.0 是一个无效的值,并且会抛出 NOT_SUPPORTED_ERR 错误。控制媒体的播放速度。1.0 表示正常的播放速度,如果值小于 1.0,则播放速度会比”正常速度“慢,如果值大于 1.0,则播放速度会比”正常速度“快。0.0 是一个无效的值,并且会抛出 NOT_SUPPORTED_ERR 错误。
    duration {{readonlyinline}} double媒体以秒为单位的总长度时间,如果媒体不可用,则为 0.  如果媒体可用,但时间长度未知,值为 NAN. 如果媒体是以 stream 形式传输并且没有预定长度,则值为 Inf。媒体以秒为单位的总长度时间,如果媒体不可用,则为 0. 如果媒体可用,但时间长度未知,值为 NAN. 如果媒体是以 stream 形式传输并且没有预定长度,则值为 Inf。
    ended {{readonlyinline}}
    error {{readonlyinline}} {{ domxref("MediaError") }}{{domxref("MediaError")}} 对象表示最近的错误,如果没有错误则值为 null{{domxref("MediaError")}} 对象表示最近的错误,如果没有错误则值为 null
    initialTime {{readonlyinline}} {{ non-standard_inline() }} {{deprecated_inline}}
    loop {{domxref("Boolean")}}会映射在 HTML 标签  {{ htmlattrxref("loop", "video") }} 属性 , 决定该媒体是否循环播放。会映射在 HTML 标签 {{ htmlattrxref("loop", "video") }} 属性 , 决定该媒体是否循环播放。
    mediaGroup
    mediaKeys {{experimental_inline}}{{readonlyinline}} {{domxref("MediaKeys")}}Returns a reference to the {{domxref("MediaKeys")}} interface, which is a set of keys that an associated HTMLMediaElement can use for decription of media data during playback.Returns a reference to the {{domxref("MediaKeys")}} interface, which is a set of keys that an associated HTMLMediaElement can use for decription of media data during playback.
    mozAudioChannelType {{ non-standard_inline() }}
    mozChannels {{readonlyinline}} {{ non-standard_inline() }} long声道数 (比如 2 是立体声). 声道数 (比如 2 是立体声).
    mozFrameBufferLength {{ non-standard_inline() }}
    muted {{domxref("Boolean")}}静音时为 true ,否则是false .静音时为 true ,否则是false .
    networkState
    NETWORK_EMPTY 0还没数据。readyState 是 HAVE_NOTHING.还没数据。readyStateHAVE_NOTHING.
    NETWORK_IDLE
    HAVE_METADATA 1Enough of the media resource has been retrieved that the metadata attributes are initialized.  Seeking will no longer raise an exception.Enough of the media resource has been retrieved that the metadata attributes are initialized. Seeking will no longer raise an exception.
    HAVE_CURRENT_DATA Determines whether the specified media type can be played back.
    -

    Note: Previously canPlayType('video/webm') returned 'probably'. Starting with Gecko 28 {{geckoRelease(28)}}, it returns 'maybe'. ({{ bug(884275) }})

    +

    Note: Previously canPlayType('video/webm') returned 'probably'. Starting with Gecko 28 {{geckoRelease(28)}}, it returns 'maybe'. ({{ bug(884275) }})

    load() voidReset the media element and restart selecting the media resource.  Any pending events are discarded.  How much media data is fetched is still affected by the preload attribute.  This method can be useful for releasing resources after any src attribute and source element descendants have been removed.  Otherwise, it is usually unnecessary to use this method, unless required to rescan source element children after dynamic changes.Reset the media element and restart selecting the media resource. Any pending events are discarded. How much media data is fetched is still affected by the preload attribute. This method can be useful for releasing resources after any src attribute and source element descendants have been removed. Otherwise, it is usually unnecessary to use this method, unless required to rescan source element children after dynamic changes.
    mozGetMetadata(){{ non-standard_inline() }} 开始播放。
    setMediaKeys {{experimental_inline}}setMediaKeys {{experimental_inline}} {{jsxref("Promise")}} Sets the {{domxref("MediaKeys")}} keys to use when decrypting media during playback.
    diff --git a/files/zh-cn/web/api/htmlmediaelement/loop/index.html b/files/zh-cn/web/api/htmlmediaelement/loop/index.html index 48eba7376c8904..533e514f2f454b 100644 --- a/files/zh-cn/web/api/htmlmediaelement/loop/index.html +++ b/files/zh-cn/web/api/htmlmediaelement/loop/index.html @@ -5,11 +5,11 @@ ---
    {{APIRef("HTML DOM")}}
    -
     
    +
    -
    HTMLMediaElement.loop 属性是 HTML 标签 {{htmlattrxref("loop", "video")}} 属性的映射,它决定了媒体元素播放结束时是否重新开始。
    +
    HTMLMediaElement.loop 属性是 HTML 标签 {{htmlattrxref("loop", "video")}} 属性的映射,它决定了媒体元素播放结束时是否重新开始。
    -
     
    +

    原文:The HTMLMediaElement.loop property reflects the {{htmlattrxref("loop", "video")}} HTML attribute, which controls whether the media element should start over when it reaches the end.

    diff --git a/files/zh-cn/web/api/htmlmediaelement/networkstate/index.html b/files/zh-cn/web/api/htmlmediaelement/networkstate/index.html index 00a1847fc27ae9..f1b6cc54b834e9 100644 --- a/files/zh-cn/web/api/htmlmediaelement/networkstate/index.html +++ b/files/zh-cn/web/api/htmlmediaelement/networkstate/index.html @@ -11,7 +11,7 @@ ---
    {{APIRef("HTML DOM")}}
    -

     HTMLMediaElement.networkState 属性表示在网络上获取媒体的当前状态。

    +

    HTMLMediaElement.networkState 属性表示在网络上获取媒体的当前状态。

    语法

    @@ -25,7 +25,7 @@

    取值

    - + @@ -33,7 +33,7 @@

    取值

    - + @@ -48,7 +48,7 @@

    取值

    - +
    常量 值  描述
    NETWORK_EMPTY 0还没有数据。并且 readyState 的值是 HAVE_NOTHING还没有数据。并且 readyState 的值是 HAVE_NOTHING
    NETWORK_IDLE
    NETWORK_NO_SOURCE 3没有找到 HTMLMediaElement src。没有找到 HTMLMediaElement src。
    diff --git a/files/zh-cn/web/api/htmlmediaelement/pause/index.html b/files/zh-cn/web/api/htmlmediaelement/pause/index.html index 6c2c334ac7c599..7c2c0439ace85e 100644 --- a/files/zh-cn/web/api/htmlmediaelement/pause/index.html +++ b/files/zh-cn/web/api/htmlmediaelement/pause/index.html @@ -9,7 +9,7 @@ ---

    {{APIRef("HTML DOM")}}

    -

    HTMLMediaElement.pause() 方法可用来暂停媒体的播放,如果媒体已经处于暂停状态,该方法没有效果。

    +

    HTMLMediaElement.pause() 方法可用来暂停媒体的播放,如果媒体已经处于暂停状态,该方法没有效果。

    语法

    diff --git a/files/zh-cn/web/api/htmlmediaelement/pause_event/index.html b/files/zh-cn/web/api/htmlmediaelement/pause_event/index.html index 9fcf362c464cfe..787f072fd68d4e 100644 --- a/files/zh-cn/web/api/htmlmediaelement/pause_event/index.html +++ b/files/zh-cn/web/api/htmlmediaelement/pause_event/index.html @@ -7,7 +7,7 @@ -

    当暂停媒体播放时 pause 事件触发, 并且媒体进入暂停状态,最常见的是通过pause()方法来触发。 当pause() 触发时pause状态只改变 1 次,并且媒体的pause变成 true

    +

    当暂停媒体播放时 pause 事件触发, 并且媒体进入暂停状态,最常见的是通过pause()方法来触发。 当pause() 触发时pause状态只改变 1 次,并且媒体的pause变成 true

    General info

    @@ -46,9 +46,9 @@

    General info

    例子

    -

    下面例子给媒体添加 pause 事件监听 handler,然后事件发生时会给 handler 发送一个提醒信息

    +

    下面例子给媒体添加 pause 事件监听 handler,然后事件发生时会给 handler 发送一个提醒信息

    -

    使用 addEventListener():

    +

    使用 addEventListener():

    const video = document.querySelector('video');
     
    @@ -57,7 +57,7 @@ 

    例子

    'pause() method was called or the autoplay attribute was toggled.'); });
    -

    使用 onpause 事件监听属性:

    +

    使用 onpause 事件监听属性:

    const video = document.querySelector('video');
     
    diff --git a/files/zh-cn/web/api/htmlmediaelement/paused/index.html b/files/zh-cn/web/api/htmlmediaelement/paused/index.html
    index 25866ebe878716..94b72ecc17222a 100644
    --- a/files/zh-cn/web/api/htmlmediaelement/paused/index.html
    +++ b/files/zh-cn/web/api/htmlmediaelement/paused/index.html
    @@ -5,7 +5,7 @@
     ---
     
    {{APIRef("HTML DOM")}}
    -

    属性 (只读)HTMLMediaElement.paused 告诉视频是否正在暂停

    +

    属性 (只读)HTMLMediaElement.paused 告诉视频是否正在暂停

    语法

    @@ -13,7 +13,7 @@

    语法

    返回值

    -

    类型{{domxref("Boolean")}}。true 暂停中 false 没有暂停

    +

    类型{{domxref("Boolean")}}。true 暂停中 false 没有暂停

    仅限暂停状态 因网络原因造成的缓冲状态仍然会告诉你不在暂停状态

    diff --git a/files/zh-cn/web/api/htmlmediaelement/play/index.html b/files/zh-cn/web/api/htmlmediaelement/play/index.html index 8b13117fae1a78..053188de8fb71d 100644 --- a/files/zh-cn/web/api/htmlmediaelement/play/index.html +++ b/files/zh-cn/web/api/htmlmediaelement/play/index.html @@ -15,7 +15,7 @@ ---

    {{APIRef("HTML DOM")}}

    -

    HTMLMediaElement.play() 方法会尝试播放媒体。这个方法返回一个 {{jsxref("Promise")}},当媒体成功开始播放时被解决(resolved)。当播放因为任何原因失败时,这个 promise 被拒绝(rejected)。

    +

    HTMLMediaElement.play() 方法会尝试播放媒体。这个方法返回一个 {{jsxref("Promise")}},当媒体成功开始播放时被解决(resolved)。当播放因为任何原因失败时,这个 promise 被拒绝(rejected)。

    语法

    @@ -27,10 +27,10 @@

    参数

    返回值

    -

     一个 {{jsxref("Promise")}},当媒体成功开始播放时被解决,当播放因为任何原因失败时则被被拒绝。

    +

    一个 {{jsxref("Promise")}},当媒体成功开始播放时被解决,当播放因为任何原因失败时则被被拒绝。

    -

    注意:旧版本的浏览器可能不会从 play() 返回值。

    +

    注意:旧版本的浏览器可能不会从 play() 返回值。

    异常

    @@ -48,15 +48,15 @@

    异常

    使用说明

    -

    虽然“autoplay”这个词常常被用于描述当媒体加载完成时立即开始播放,浏览器的自动播放策略其实也应用于脚本驱动的媒体播放,包括调用 play()

    +

    虽然“autoplay”这个词常常被用于描述当媒体加载完成时立即开始播放,浏览器的自动播放策略其实也应用于脚本驱动的媒体播放,包括调用 play()

    -

    如果 {{Glossary("user agent")}} 被设置为不允许自动或脚本驱动的媒体播放,调用 play() 会导致返回的 promise 被立即以 NotAllowedError 拒绝。网页应该对这种情况做好准备。举个例子,一个网页不应该假定播放已经自动开始而直接展示相应的用户界面,而应该在返回的 promise 被解决或拒绝后再更新用户界面。更多信息参见 示例

    +

    如果 {{Glossary("user agent")}} 被设置为不允许自动或脚本驱动的媒体播放,调用 play() 会导致返回的 promise 被立即以 NotAllowedError 拒绝。网页应该对这种情况做好准备。举个例子,一个网页不应该假定播放已经自动开始而直接展示相应的用户界面,而应该在返回的 promise 被解决或拒绝后再更新用户界面。更多信息参见 示例

    -

    注意:play() 方法可能会让用户被询问是否给予播放媒体的权限,这可能会使返回的 promise 延迟解决。你应该确保你的代码不需要即时响应。

    +

    注意:play() 方法可能会让用户被询问是否给予播放媒体的权限,这可能会使返回的 promise 延迟解决。你应该确保你的代码不需要即时响应。

    -

    关于自动播放和禁止自动播放的更多深度内容,参见我们的文章 Autoplay guide for media and Web Audio APIs

    +

    关于自动播放和禁止自动播放的更多深度内容,参见我们的文章 Autoplay guide for media and Web Audio APIs

    示例

    @@ -86,11 +86,11 @@

    示例

    } }
    -

    在这个例子中,视频的播放由 async playVideo() 函数控制。函数尝试播放视频,如果播放成功,将 playButton 元素的类名称设为 "playing"。如果播放失败,去除 playButton 元素的类名称,恢复其原来的样式。通过监视 play() 返回的 {{jsxref("Promise")}} 是被解决还是被拒绝以保证播放按钮的外观与实际的播放状态相匹配。

    +

    在这个例子中,视频的播放由 async playVideo() 函数控制。函数尝试播放视频,如果播放成功,将 playButton 元素的类名称设为 "playing"。如果播放失败,去除 playButton 元素的类名称,恢复其原来的样式。通过监视 play() 返回的 {{jsxref("Promise")}} 是被解决还是被拒绝以保证播放按钮的外观与实际的播放状态相匹配。

    -

    上述代码开始执行时,先获取 {{HTMLElement("video")}} 元素和用于切换播放、暂停的 {{HTMLElement("button")}} 元素的引用。在切换按钮上添加 {{event("click")}} 事件的处理程序。最后调用 playVideo() 尝试自动开始播放。

    +

    上述代码开始执行时,先获取 {{HTMLElement("video")}} 元素和用于切换播放、暂停的 {{HTMLElement("button")}} 元素的引用。在切换按钮上添加 {{event("click")}} 事件的处理程序。最后调用 playVideo() 尝试自动开始播放。

    -

    你可以在 这里 查看或修改这个例子。

    +

    你可以在 这里 查看或修改这个例子。

    规范

    @@ -108,7 +108,7 @@

    参见

    diff --git a/files/zh-cn/web/api/htmlmediaelement/play_event/index.html b/files/zh-cn/web/api/htmlmediaelement/play_event/index.html index 8a71923a600673..eaf6d387551caa 100644 --- a/files/zh-cn/web/api/htmlmediaelement/play_event/index.html +++ b/files/zh-cn/web/api/htmlmediaelement/play_event/index.html @@ -5,7 +5,7 @@ ---

    {{APIRef("HTMLMediaElement")}}

    -

    当 paused 属性由 true 转换为 false 时触发 play 事件,事件触发原因一般为 play() 方法调用,或者 autoplay 标签设置。

    +

    paused 属性由 true 转换为 false 时触发 play 事件,事件触发原因一般为 play() 方法调用,或者 autoplay 标签设置。

    @@ -42,7 +42,7 @@

    Examples

    -

    下方的例子监听了 HTMLMediaElement 标签的 play 事件,并且在事件触发后在控制台打印相应的信息。

    +

    下方的例子监听了 HTMLMediaElement 标签的 play 事件,并且在事件触发后在控制台打印相应的信息。

    Using addEventListener():

    diff --git a/files/zh-cn/web/api/htmlmediaelement/playbackrate/index.html b/files/zh-cn/web/api/htmlmediaelement/playbackrate/index.html index f5ae49f4a334e7..563d6814a68ec7 100644 --- a/files/zh-cn/web/api/htmlmediaelement/playbackrate/index.html +++ b/files/zh-cn/web/api/htmlmediaelement/playbackrate/index.html @@ -10,9 +10,9 @@ ---
    {{APIRef("HTML DOM")}}
    -

    HTMLMediaElement.playbackRate 属性设置媒体文件播放时的速率。这用于实现让用户控制快放、慢放等。 正常播放速率乘以该值表示当前的播放速率,所以 1.0 表示一个正常的播放速率。

    +

    HTMLMediaElement.playbackRate 属性设置媒体文件播放时的速率。这用于实现让用户控制快放、慢放等。 正常播放速率乘以该值表示当前的播放速率,所以 1.0 表示一个正常的播放速率。

    -

    将 playbackRate 设为负值不可以实现倒播。

    +

    playbackRate 设为负值不可以实现倒播。

    媒体文件倒着播放时,或者播放速率低于或高于浏览器内核规定的可用范围(比如,Gecko 约定范围是 0.25~5.0)时,播放过程将静音。

    @@ -27,7 +27,7 @@

    语法

    赋值说明

    -

    浮点数 1.0 是 "正常速度", 比 1.0 小的值使媒体文件播放的慢于正常速度,比 1.0 大的值使播放变得快于正常速度。

    +

    浮点数 1.0 是 "正常速度", 比 1.0 小的值使媒体文件播放的慢于正常速度,比 1.0 大的值使播放变得快于正常速度。

    示例

    diff --git a/files/zh-cn/web/api/htmlmediaelement/readystate/index.html b/files/zh-cn/web/api/htmlmediaelement/readystate/index.html index dea51defc034b8..4697c608d241e8 100644 --- a/files/zh-cn/web/api/htmlmediaelement/readystate/index.html +++ b/files/zh-cn/web/api/htmlmediaelement/readystate/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef("HTML DOM")}}
    -

    HTMLMediaElement.readyState 属性返回音频/视频的当前就绪状态。

    +

    HTMLMediaElement.readyState 属性返回音频/视频的当前就绪状态。

    语法

    @@ -13,7 +13,7 @@

    语法

    返回值

    -

    无符号整型 An unsigned short.

    +

    无符号整型 An unsigned short.

    @@ -47,14 +47,14 @@

    返回值

    - +
    HAVE_ENOUGH_DATA 4 可用数据足以开始播放 - 如果网速得到保障 那么视频可以一直播放到底 可用数据足以开始播放 - 如果网速得到保障 那么视频可以一直播放到底

    实例

    -

    这个例子会监听 id 为 example 的 audio 的数据。他会检查当前位置是否可以播放,会的话执行播放。

    +

    这个例子会监听 id 为 example 的 audio 的数据。他会检查当前位置是否可以播放,会的话执行播放。

    <audio id="example" preload="auto">
      <source src="sound.ogg" type="audio/ogg" />
    diff --git a/files/zh-cn/web/api/htmlmediaelement/src/index.html b/files/zh-cn/web/api/htmlmediaelement/src/index.html
    index 71432e5c1a11d9..d3cdb42b105295 100644
    --- a/files/zh-cn/web/api/htmlmediaelement/src/index.html
    +++ b/files/zh-cn/web/api/htmlmediaelement/src/index.html
    @@ -8,7 +8,7 @@
     
    HTMLMediaElement.src属性反映 HTML 媒体元素的src 属性的值,该属性指示要在元素中使用的媒体资源的 URL。
    -

    备注: 了解此元素中当前正在使用的媒体资源的 URL 的最佳方法是查看 {{domxref("HTMLMediaElement.currentSrc", "currentSrc")}}属性的值,该属性还考虑从 {{domxref("HTMLSourceElement")}} (代表 {{HTMLElement("source")}} 元素) 中提供的列表中选择最佳或首选媒体资源

    +

    备注: 了解此元素中当前正在使用的媒体资源的 URL 的最佳方法是查看 {{domxref("HTMLMediaElement.currentSrc", "currentSrc")}}属性的值,该属性还考虑从 {{domxref("HTMLSourceElement")}} (代表 {{HTMLElement("source")}} 元素) 中提供的列表中选择最佳或首选媒体资源

    Syntax

    diff --git a/files/zh-cn/web/api/htmlmediaelement/srcobject/index.html b/files/zh-cn/web/api/htmlmediaelement/srcobject/index.html index dd03b4733d73da..3e83c411710b82 100644 --- a/files/zh-cn/web/api/htmlmediaelement/srcobject/index.html +++ b/files/zh-cn/web/api/htmlmediaelement/srcobject/index.html @@ -5,10 +5,10 @@ ---

    {{SeeCompatTable}}{{APIRef("")}}

    -

    {{domxref("HTMLMediaElement")}} 接口的 srcObject 属性设定或返回一个对象,这个对象提供了一个与{{domxref("HTMLMediaElement")}}关联的媒体源,这个对象通常是 {{domxref("MediaStream")}} ,但根据规范可以是 {{domxref("MediaSource")}}, {{domxref("Blob")}} 或者 {{domxref("File")}}。

    +

    {{domxref("HTMLMediaElement")}} 接口的 srcObject 属性设定或返回一个对象,这个对象提供了一个与{{domxref("HTMLMediaElement")}}关联的媒体源,这个对象通常是 {{domxref("MediaStream")}} ,但根据规范可以是 {{domxref("MediaSource")}}, {{domxref("Blob")}} 或者 {{domxref("File")}}。

    -

    备注: 截至 2020 年 3 月,只有 Safari 支持设置 MediaStream  之外的对象。在其他浏览器跟上之前,对MediaSource, Blob 和 File, 请考虑返回创建具有{domxref("URL.createObjectURL()")}} 的 URL, 并将其赋值给{{domxref("HTMLMediaElement.src")}} 有关示例,请参阅下文。

    +

    备注: 截至 2020 年 3 月,只有 Safari 支持设置 MediaStream 之外的对象。在其他浏览器跟上之前,对MediaSource, BlobFile, 请考虑返回创建具有{domxref("URL.createObjectURL()")}} 的 URL, 并将其赋值给{{domxref("HTMLMediaElement.src")}} 有关示例,请参阅下文。

    diff --git a/files/zh-cn/web/api/htmlmediaelement/timeupdate_event/index.html b/files/zh-cn/web/api/htmlmediaelement/timeupdate_event/index.html index 98b83f1d5f9370..9317137e2577f1 100644 --- a/files/zh-cn/web/api/htmlmediaelement/timeupdate_event/index.html +++ b/files/zh-cn/web/api/htmlmediaelement/timeupdate_event/index.html @@ -52,9 +52,9 @@

    示例

    -

    These examples add an event listener for the HTMLMediaElement's timeupdate event, then post a message when that event handler has reacted to the event firing. Remember, the event frequency is dependant on the system load.

    +

    These examples add an event listener for the HTMLMediaElement's timeupdate event, then post a message when that event handler has reacted to the event firing. Remember, the event frequency is dependant on the system load.

    -

    Using addEventListener():

    +

    Using addEventListener():

    const video = document.querySelector('video');
     
    @@ -62,7 +62,7 @@ 

    示例

    console.log('The currentTime attribute has been updated. Again.'); });
    -

    Using the ontimeupdate event handler property:

    +

    Using the ontimeupdate event handler property:

    const video = document.querySelector('video');
     
    diff --git a/files/zh-cn/web/api/htmlmediaelement/videotracks/index.html b/files/zh-cn/web/api/htmlmediaelement/videotracks/index.html
    index 2ab39154101c48..c828ded9ef8570 100644
    --- a/files/zh-cn/web/api/htmlmediaelement/videotracks/index.html
    +++ b/files/zh-cn/web/api/htmlmediaelement/videotracks/index.html
    @@ -5,9 +5,9 @@
     ---
     
    {{APIRef("HTML DOM")}}
    -

     videoTracks 为 {{DOMxRef("HTMLMediaElement")}} 的只读属性,它是一个 {{DOMxRef("VideoTrackList")}} 列表,列表中包含相应媒体元素的视频轨, 视频轨为{{DOMxRef("VideoTrack")}} 类型对象。

    +

    videoTracks 为 {{DOMxRef("HTMLMediaElement")}} 的只读属性,它是一个 {{DOMxRef("VideoTrackList")}} 列表,列表中包含相应媒体元素的视频轨, 视频轨为{{DOMxRef("VideoTrack")}} 类型对象。

    -

    它是一个实时列表; 当相应的媒体元素增加或删除视频轨时,返回列表会发生动态的改变。由此你可以监控和检测视频轨发生的变化。学习 {{SectionOnPage("/en-US/docs/Web/API/VideoTrackList", "Event handlers")}} 可以获得更多关于 media element 视频轨的知识。

    +

    它是一个实时列表; 当相应的媒体元素增加或删除视频轨时,返回列表会发生动态的改变。由此你可以监控和检测视频轨发生的变化。学习 {{SectionOnPage("/en-US/docs/Web/API/VideoTrackList", "Event handlers")}} 可以获得更多关于 media element 视频轨的知识。

    Syntax

    @@ -15,9 +15,9 @@

    Syntax

    返回值

    -

    返回的是一个{{DOMxRef("VideoTrackList")}} 类型值,为相应媒体元素的视频轨列表。可以用访问数组的方法访问这个值,或 {{domxref("VideoTrackList.getTrackById", "getTrackById()")}} 方法访问它。

    +

    返回的是一个{{DOMxRef("VideoTrackList")}} 类型值,为相应媒体元素的视频轨列表。可以用访问数组的方法访问这个值,或 {{domxref("VideoTrackList.getTrackById", "getTrackById()")}} 方法访问它。

    -

    列表中包含的每一个 {{DOMxRef("VideoTrack")}} 代表其中的一个视频轨。

    +

    列表中包含的每一个 {{DOMxRef("VideoTrack")}} 代表其中的一个视频轨。

    Specifications

    diff --git a/files/zh-cn/web/api/htmlmediaelement/volume/index.html b/files/zh-cn/web/api/htmlmediaelement/volume/index.html index ab1b3c75ed930a..63d6fc8ebe0bb3 100644 --- a/files/zh-cn/web/api/htmlmediaelement/volume/index.html +++ b/files/zh-cn/web/api/htmlmediaelement/volume/index.html @@ -5,7 +5,7 @@ ---

    {{APIRef("HTML DOM")}}

    -

    HTMLMediaElement.volume 属性可设置媒体播放时的音量。

    +

    HTMLMediaElement.volume 属性可设置媒体播放时的音量。

    语法

    diff --git a/files/zh-cn/web/api/htmloptgroupelement/index.html b/files/zh-cn/web/api/htmloptgroupelement/index.html index 1bf21e3fd15a9c..542d4c0ea3de60 100644 --- a/files/zh-cn/web/api/htmloptgroupelement/index.html +++ b/files/zh-cn/web/api/htmloptgroupelement/index.html @@ -12,7 +12,7 @@ ---
    {{ APIRef("HTML DOM") }}
    -

    HTMLOptGroupElement 接口提供一些特别的属性和方法(除了从 {{domxref("HTMLElement")}} 对象接口中继承的以外)以调整 {{HTMLElement("optgroup")}} 元素的布局和显示。

    +

    HTMLOptGroupElement 接口提供一些特别的属性和方法(除了从 {{domxref("HTMLElement")}} 对象接口中继承的以外)以调整 {{HTMLElement("optgroup")}} 元素的布局和显示。

    {{InheritanceDiagram(600, 120)}}

    diff --git a/files/zh-cn/web/api/htmloptionelement/index.html b/files/zh-cn/web/api/htmloptionelement/index.html index 31abad05081550..99f11ad9aa7044 100644 --- a/files/zh-cn/web/api/htmloptionelement/index.html +++ b/files/zh-cn/web/api/htmloptionelement/index.html @@ -38,7 +38,7 @@

    属性

    disabled {{domxref("Boolean")}} - 反映了{{htmlattrxref("disabled", "option")}} HTML 特性 的值 , 这意味着选项(option)是不可选的。如果一个选项是关闭的{{HTMLElement("optgroup")}}元素的子元素,那么它也可被关闭。  + 反映了{{htmlattrxref("disabled", "option")}} HTML 特性 的值 , 这意味着选项(option)是不可选的。如果一个选项是关闭的{{HTMLElement("optgroup")}}元素的子元素,那么它也可被关闭。 form{{readonlyInline}} diff --git a/files/zh-cn/web/api/htmloptionelement/option/index.html b/files/zh-cn/web/api/htmloptionelement/option/index.html index 16e65993276e60..cfbc6ec727d923 100644 --- a/files/zh-cn/web/api/htmloptionelement/option/index.html +++ b/files/zh-cn/web/api/htmloptionelement/option/index.html @@ -23,7 +23,7 @@

    参数

    值{{optional_inline}}
    表示{{domxref("HTMLOptionElement")}}的值的{{domxref("DOMString")}},即value等价的{{htmlelement("option")}} 的属性。如果未指定,则将文本的值用作值,例如,将表单提交给服务器时,相关联的{{htmlelement("select")}}元素的值。
    defaultSelected {{optional_inline}}
    -
    设置{{htmlattrxref("selected", "option")}}属性值的{{domxref("Boolean")}},也就是说这个{{htmlelement("option")}}是默认值当第一次加载页面时,在{{htmlelement("select")}}元素中选择。如果没有指定,false则使用默认值。请注意,true 如果选项尚未被选中,则该值不会将选项设置为选中状态。 
    +
    设置{{htmlattrxref("selected", "option")}}属性值的{{domxref("Boolean")}},也就是说这个{{htmlelement("option")}}是默认值当第一次加载页面时,在{{htmlelement("select")}}元素中选择。如果没有指定,false则使用默认值。请注意,true 如果选项尚未被选中,则该值不会将选项设置为选中状态。
    选中{{optional_inline}}
    A {{domxref("Boolean")}}设置选项的选择状态; 默认是false(未选中)。如果省略,即使defaultSelected参数是true,该选项没有被选中。
    diff --git a/files/zh-cn/web/api/htmlparagraphelement/index.html b/files/zh-cn/web/api/htmlparagraphelement/index.html index 3b4fc96e1c7f9b..5aad4ac2b2057e 100644 --- a/files/zh-cn/web/api/htmlparagraphelement/index.html +++ b/files/zh-cn/web/api/htmlparagraphelement/index.html @@ -9,7 +9,7 @@ -

    HTMLParagraphElement 接口可以提供超过其继承的{{domxref("HTMLElement")}} 对象额外的属性 ,用以操作 {{HTMLElement("p")}} 元素.

    +

    HTMLParagraphElement 接口可以提供超过其继承的{{domxref("HTMLElement")}} 对象额外的属性 ,用以操作 {{HTMLElement("p")}} 元素.

    {{InheritanceDiagram(600, 120)}}

    diff --git a/files/zh-cn/web/api/htmlscriptelement/index.html b/files/zh-cn/web/api/htmlscriptelement/index.html index e06975a4c8e31c..1dfcc44fdcfe4b 100644 --- a/files/zh-cn/web/api/htmlscriptelement/index.html +++ b/files/zh-cn/web/api/htmlscriptelement/index.html @@ -6,12 +6,12 @@
    {{ APIRef("HTML DOM") }}

    HTML脚本元素暴露HTMLScriptElement接口,它提供了特殊的属性和方法(超出了常规HTMLElement对象接口,他们也可以通过继承操纵<脚本>元素的布局和演示。)
    -  

    +

    Properties

    从其父类中继承的属性, {{domxref("HTMLElement")}}。
    -  

    +

    @@ -23,7 +23,7 @@

    Properties

    - + @@ -43,7 +43,7 @@

    Properties

    - + @@ -81,24 +81,24 @@

    Properties

    Methods

    -

    没有具体的方法;属性从其父类继承, {{domxref("HTMLElement")}}。

    +

    没有具体的方法;属性从其父类继承, {{domxref("HTMLElement")}}。

    例子

    动态导入脚本

    -

    让我们创建一个名为importScript的函数,它能够在一个文档中导入新的脚本,创建一个{{HTMLElement("script")}} 节点,并立即插入到宿主{{HTMLElement("script")}} 之前 (通过 {{domxref("document.currentScript")}} 可以获取宿主script标签)。这些脚本将异步执行。更多细节,请参见defer和async属性。

    +

    让我们创建一个名为importScript的函数,它能够在一个文档中导入新的脚本,创建一个{{HTMLElement("script")}} 节点,并立即插入到宿主{{HTMLElement("script")}} 之前 (通过 {{domxref("document.currentScript")}} 可以获取宿主script标签)。这些脚本将异步执行。更多细节,请参见defer和async属性。

    function loadError (oError) {
    -  throw new URIError("The script " + oError.target.src + " is not accessible.");
    +  throw new URIError("The script " + oError.target.src + " is not accessible.");
     }
     
     function importScript (sSrc, fOnload) {
    -  var oScript = document.createElement("script");
    -  oScript.type = "text\/javascript";
    -  oScript.onerror = loadError;
    -  if (fOnload) { oScript.onload = fOnload; }
    -  document.currentScript.parentNode.insertBefore(oScript, document.currentScript);
    +  var oScript = document.createElement("script");
    +  oScript.type = "text\/javascript";
    +  oScript.onerror = loadError;
    +  if (fOnload) { oScript.onload = fOnload; }
    +  document.currentScript.parentNode.insertBefore(oScript, document.currentScript);
       oScript.src = sSrc;
     }
    @@ -108,18 +108,18 @@

    动态导入脚本

    var importScript = (function (oHead) {
     
    -  function loadError (oError) {
    -    throw new URIError("The script " + oError.target.src + " is not accessible.");
    -  }
    +  function loadError (oError) {
    +    throw new URIError("The script " + oError.target.src + " is not accessible.");
    +  }
     
    -  return function (sSrc, fOnload) {
    -    var oScript = document.createElement("script");
    -    oScript.type = "text\/javascript";
    -    oScript.onerror = loadError;
    -    if (fOnload) { oScript.onload = fOnload; }
    -    oHead.appendChild(oScript);
    +  return function (sSrc, fOnload) {
    +    var oScript = document.createElement("script");
    +    oScript.type = "text\/javascript";
    +    oScript.onerror = loadError;
    +    if (fOnload) { oScript.onload = fOnload; }
    +    oHead.appendChild(oScript);
         oScript.src = sSrc;
    -  }
    +  }
     
     })(document.head || document.getElementsByTagName("head")[0]);
     
    diff --git a/files/zh-cn/web/api/htmlselectelement/add/index.html b/files/zh-cn/web/api/htmlselectelement/add/index.html index 20aaf51397dcd1..f648021d09b3e9 100644 --- a/files/zh-cn/web/api/htmlselectelement/add/index.html +++ b/files/zh-cn/web/api/htmlselectelement/add/index.html @@ -11,7 +11,7 @@ ---

    {{APIRef("HTML DOM")}}

    -

    HTMLSelectElement.add() 方法用于向 select 元素的 option 元素集合中添加一个元素。

    +

    HTMLSelectElement.add() 方法用于向 select 元素的 option 元素集合中添加一个元素。

    语法

    @@ -21,14 +21,14 @@

    语法

    参数

      -
    • item 是一个 {{domxref("HTMLOptionElement")}} 或 {{domxref("HTMLOptGroupElement")}}
    • -
    • before 是可选的,是集合中的一个元素或者类型为 long 的一个索引,表示上面的 item 在此之前插入。如果这个参数是 null(或索引不存在),新元素会添加在集合的末尾。
    • +
    • item 是一个 {{domxref("HTMLOptionElement")}} 或 {{domxref("HTMLOptGroupElement")}}
    • +
    • before 是可选的,是集合中的一个元素或者类型为 long 的一个索引,表示上面的 item 在此之前插入。如果这个参数是 null(或索引不存在),新元素会添加在集合的末尾。

    异常

      -
    • 如果传入的 item 是 {{domxref("HTMLSelectElement")}} 的祖先元素,HierarchyRequestError 类型的 {{domxref("DOMError")}} 会被抛出。
    • +
    • 如果传入的 item {{domxref("HTMLSelectElement")}} 的祖先元素,HierarchyRequestError 类型的 {{domxref("DOMError")}} 会被抛出。

    示例

    diff --git a/files/zh-cn/web/api/htmlselectelement/checkvalidity/index.html b/files/zh-cn/web/api/htmlselectelement/checkvalidity/index.html index 17d12458418ba8..dbbd26cdfaa5fc 100644 --- a/files/zh-cn/web/api/htmlselectelement/checkvalidity/index.html +++ b/files/zh-cn/web/api/htmlselectelement/checkvalidity/index.html @@ -5,7 +5,7 @@ ---
    {{ APIRef("HTML DOM") }}
    -

    HTMLSelectElement.checkValidity() 会检查元素是否有任何输入约束条件,并且检查值是否符合约束条件. 如果值是不符合约束条件的, 浏览器就会在该元素上触发一个可以撤销的 {{event("invalid")}} 事件,  然后返回 false.

    +

    HTMLSelectElement.checkValidity() 会检查元素是否有任何输入约束条件,并且检查值是否符合约束条件. 如果值是不符合约束条件的, 浏览器就会在该元素上触发一个可以撤销的 {{event("invalid")}} 事件, 然后返回 false.

    Syntax

    diff --git a/files/zh-cn/web/api/htmlselectelement/index.html b/files/zh-cn/web/api/htmlselectelement/index.html index 174b04ef8358f1..516ab55ba459fe 100644 --- a/files/zh-cn/web/api/htmlselectelement/index.html +++ b/files/zh-cn/web/api/htmlselectelement/index.html @@ -14,7 +14,7 @@

    {{APIRef("HTML DOM")}}

    -

    HTMLSelectElement 接口表示一个 {{HTMLElement("select")}} HTML 元素。这个元素也通过 {{domxref("HTMLElement")}} 接口从其他 HTML 元素共享所有属性和方法。

    +

    HTMLSelectElement 接口表示一个 {{HTMLElement("select")}} HTML 元素。这个元素也通过 {{domxref("HTMLElement")}} 接口从其他 HTML 元素共享所有属性和方法。

    {{InheritanceDiagram(600, 120)}}

    @@ -39,7 +39,7 @@

    属性

    {{domxref("HTMLSelectElement.name")}}
    A {{domxref("DOMString")}} reflecting the {{htmlattrxref("name", "select")}} HTML attribute, containing the name of this control used by servers and DOM search functions.
    {{domxref("HTMLSelectElement.options")}}{{ReadOnlyInline}}
    -
    An {{domxref("HTMLOptionsCollection")}} representing the set of {{HTMLElement("option")}} ({{domxref("HTMLOptionElement")}}) elements contained by this element.
    +
    An {{domxref("HTMLOptionsCollection")}} representing the set of {{HTMLElement("option")}} ({{domxref("HTMLOptionElement")}}) elements contained by this element.
    {{domxref("HTMLSelectElement.required")}}
    A {{jsxref("Boolean")}} reflecting the {{htmlattrxref("required", "select")}} HTML attribute, which indicates whether the user is required to select a value before submitting the form.
    {{domxref("HTMLSelectElement.selectedIndex")}}
    @@ -55,7 +55,7 @@

    属性

    {{domxref("HTMLSelectElement.validity")}}{{ReadOnlyInline}}
    A {{domxref("ValidityState")}} reflecting the validity state that this control is in.
    {{domxref("HTMLSelectElement.value")}}
    -
    A {{domxref("DOMString")}} reflecting the value of the form control. Returns the value property of the first selected option element if there is one, otherwise the empty string.
    +
    A {{domxref("DOMString")}} reflecting the value of the form control. Returns the value property of the first selected option element if there is one, otherwise the empty string.
    {{domxref("HTMLSelectElement.willValidate")}}{{ReadOnlyInline}}
    A {{jsxref("Boolean")}} that indicates whether the button is a candidate for constraint validation. It is false if any conditions bar it from constraint validation.
    @@ -87,7 +87,7 @@

    方法

    事件

    -

    使用 {{domxref("EventTarget/addEventListener", "addEventListener()")}} 或给下面接口的 oneventname 属性分配一个监听程序来监听这些事件:

    +

    使用 {{domxref("EventTarget/addEventListener", "addEventListener()")}} 或给下面接口的 oneventname 属性分配一个监听程序来监听这些事件:

    {{domxref("HTMLElement/input_event", "input")}} 事件
    diff --git a/files/zh-cn/web/api/htmlselectelement/remove/index.html b/files/zh-cn/web/api/htmlselectelement/remove/index.html index ea76b3bdc2105b..97ab522cf60eaa 100644 --- a/files/zh-cn/web/api/htmlselectelement/remove/index.html +++ b/files/zh-cn/web/api/htmlselectelement/remove/index.html @@ -5,7 +5,7 @@ ---
    {{ APIRef("HTML DOM") }}
    -

    HTMLSelectElement.remove() 方法从一个 select 元素中删除指定序数的 option 元素。没有传参时为删除当前元素本身:ChildNode.remove()

    +

    HTMLSelectElement.remove() 方法从一个 select 元素中删除指定序数的 option 元素。没有传参时为删除当前元素本身:ChildNode.remove()

    语法

    diff --git a/files/zh-cn/web/api/htmlselectelement/selectedindex/index.html b/files/zh-cn/web/api/htmlselectelement/selectedindex/index.html index c3200e6c1abf32..f4852a7294bb94 100644 --- a/files/zh-cn/web/api/htmlselectelement/selectedindex/index.html +++ b/files/zh-cn/web/api/htmlselectelement/selectedindex/index.html @@ -12,7 +12,7 @@ ---
    {{APIRef("HTML DOM")}}
    -

    HTMLSelectElement.selectedIndex 是一个长整型数,它反映了被选中的第一个 {{HTMLElement("option")}} 元素的索引值。值为-1时表明没有元素被选中。

    +

    HTMLSelectElement.selectedIndex 是一个长整型数,它反映了被选中的第一个 {{HTMLElement("option")}} 元素的索引值。值为-1时表明没有元素被选中。

    语法

    diff --git a/files/zh-cn/web/api/htmlselectelement/setcustomvalidity/index.html b/files/zh-cn/web/api/htmlselectelement/setcustomvalidity/index.html index cee7f137384a3f..152a2d7cad1b1d 100644 --- a/files/zh-cn/web/api/htmlselectelement/setcustomvalidity/index.html +++ b/files/zh-cn/web/api/htmlselectelement/setcustomvalidity/index.html @@ -18,7 +18,7 @@

    语法

    Parameters

      -
    • string 将作为错误信息包含到 {{domxref("DOMString")}} 之中。
    • +
    • string 将作为错误信息包含到 {{domxref("DOMString")}} 之中。

    Specifications

    diff --git a/files/zh-cn/web/api/htmlslotelement/name/index.html b/files/zh-cn/web/api/htmlslotelement/name/index.html index 9d1cd31ddcb897..c170883fa86817 100644 --- a/files/zh-cn/web/api/htmlslotelement/name/index.html +++ b/files/zh-cn/web/api/htmlslotelement/name/index.html @@ -11,7 +11,7 @@ ---

    {{APIRef("Shadow DOM API")}}

    -

     元素{{domxref("HTMLSlotElement")}}的name属性, 可以获取和设置属性值. 插槽提供了web组件的摆放位置,辅助用户布局。

    +

    元素{{domxref("HTMLSlotElement")}}的name属性, 可以获取和设置属性值. 插槽提供了web组件的摆放位置,辅助用户布局。

    语法

    @@ -25,12 +25,12 @@

    例子

    -

    下面的片段来自 slotchange example (see it live also).

    +

    下面的片段来自 slotchange example (see it live also).

    let slots = this.shadowRoot.querySelectorAll('slot');
     slots[1].addEventListener('slotchange', function(e) {
    -  let nodes = slots[1].assignedNodes();
    -  console.log('Element in Slot "' + slots[1].name + '" changed to "' + nodes[0].outerHTML + '".');
    +  let nodes = slots[1].assignedNodes();
    +  console.log('Element in Slot "' + slots[1].name + '" changed to "' + nodes[0].outerHTML + '".');
     });

    这里我们获取所有插槽的引用, 然后给模板里的第二个插槽增加事件— 跟踪内容变化.

    diff --git a/files/zh-cn/web/api/htmlspanelement/index.html b/files/zh-cn/web/api/htmlspanelement/index.html index da66f539f00313..a983b047307734 100644 --- a/files/zh-cn/web/api/htmlspanelement/index.html +++ b/files/zh-cn/web/api/htmlspanelement/index.html @@ -40,4 +40,4 @@

    另请参阅

  • The HTML element implementing this interface: {{HTMLElement("span")}}.
  • -
     
    +
    diff --git a/files/zh-cn/web/api/htmlstyleelement/index.html b/files/zh-cn/web/api/htmlstyleelement/index.html index 8799d773dc9a0a..cb94b6770ee4e2 100644 --- a/files/zh-cn/web/api/htmlstyleelement/index.html +++ b/files/zh-cn/web/api/htmlstyleelement/index.html @@ -12,7 +12,7 @@
    {{APIRef("HTML DOM")}}
    -

    HTMLStyleElement 接口表示 {{HTMLElement("style")}} 元素。它从 {{domxref("HTMLElement")}} 和 {{domxref("LinkStyle")}} 中继承属性和方法。

    +

    HTMLStyleElement 接口表示 {{HTMLElement("style")}} 元素。它从 {{domxref("HTMLElement")}} 和 {{domxref("LinkStyle")}} 中继承属性和方法。

    这个接口不允许修改包含其中的CSS(大多数情况下)。如果需要修改CSS,前往关于使用动态样式的信息查看在DOM中用于修改特定CSS属性的对象。

    diff --git a/files/zh-cn/web/api/htmltableelement/createcaption/index.html b/files/zh-cn/web/api/htmltableelement/createcaption/index.html index 9930a17dcc90f6..ede49c35860a99 100644 --- a/files/zh-cn/web/api/htmltableelement/createcaption/index.html +++ b/files/zh-cn/web/api/htmltableelement/createcaption/index.html @@ -9,7 +9,7 @@ -

    这个 HTMLTableElement.createCaption() 方法返回这个 table 元素的 caption(HTMLTableCaptionElement). 如果这个 table 没有 caption,这个方法创建并返回 caption.

    +

    这个 HTMLTableElement.createCaption() 方法返回这个 table 元素的 caption(HTMLTableCaptionElement). 如果这个 table 没有 caption,这个方法创建并返回 caption.

    语法

    diff --git a/files/zh-cn/web/api/htmltableelement/index.html b/files/zh-cn/web/api/htmltableelement/index.html index 8ee8f990800e1b..30ef2083b90d9b 100644 --- a/files/zh-cn/web/api/htmltableelement/index.html +++ b/files/zh-cn/web/api/htmltableelement/index.html @@ -10,7 +10,7 @@ ---

    {{APIRef("HTML DOM")}}

    -

    HTMLTableElement 接口在常用的 {{DOMxRef("HTMLElement")}} 接口的基础上,提供了专门的属性和方法来处理 HTML 文档中表格的布局与展示。通过继承,它也可以访问父接口 {{DOMxRef("HTMLElement")}} 中的成员。

    +

    HTMLTableElement 接口在常用的 {{DOMxRef("HTMLElement")}} 接口的基础上,提供了专门的属性和方法来处理 HTML 文档中表格的布局与展示。通过继承,它也可以访问父接口 {{DOMxRef("HTMLElement")}} 中的成员。

    {{InheritanceDiagram(600, 120)}}

    @@ -20,11 +20,11 @@

    属性

    {{DOMxRef("HTMLTableElement.caption")}}
    -
    这是一个 {{DOMxRef("HTMLTableCaptionElement")}} ,表示作为子元素中的第一个 {{HTMLElement("caption")}} ,如果找不到则为 null。当设置此属性时,如果给出的对象不是一个 <caption>,一个带有 HierarchyRequestError 名字的异常 {{DOMxRef("DOMException")}} 会被抛出。如果设置了正确的对象,它会被作为第一个子元素插入DOM树中,同时子元素中的第一个 <caption> 会被移除,如果存在的话。
    +
    这是一个 {{DOMxRef("HTMLTableCaptionElement")}} ,表示作为子元素中的第一个 {{HTMLElement("caption")}} ,如果找不到则为 null。当设置此属性时,如果给出的对象不是一个 <caption>,一个带有 HierarchyRequestError 名字的异常 {{DOMxRef("DOMException")}} 会被抛出。如果设置了正确的对象,它会被作为第一个子元素插入DOM树中,同时子元素中的第一个 <caption> 会被移除,如果存在的话。
    {{DOMxRef("HTMLTableElement.tHead")}}
    -
    这是一个 {{DOMxRef("HTMLTableSectionElement")}},表示子元素中的第一个 {{HTMLElement("thead")}},如果找不到则为 null 。当设置此属性时,如果给出的对象不是一个 <thead>, 一个带有 HierarchyRequestError 名字的异常 {{DOMxRef("DOMException")}} 会被抛出。如果设置了正确的对象,它会被立即插入到DOM树中既不是 {{HTMLElement("caption")}} 也不是 {{HTMLElement("colgroup")}} 的第一个元素之前,或者直接被作为最后一个元素插入(如果找不到上述元素的话),同时子元素中的第一个 <thead> 会被移除,如果存在的话。
    +
    这是一个 {{DOMxRef("HTMLTableSectionElement")}},表示子元素中的第一个 {{HTMLElement("thead")}},如果找不到则为 null 。当设置此属性时,如果给出的对象不是一个 <thead>, 一个带有 HierarchyRequestError 名字的异常 {{DOMxRef("DOMException")}} 会被抛出。如果设置了正确的对象,它会被立即插入到DOM树中既不是 {{HTMLElement("caption")}} 也不是 {{HTMLElement("colgroup")}} 的第一个元素之前,或者直接被作为最后一个元素插入(如果找不到上述元素的话),同时子元素中的第一个 <thead> 会被移除,如果存在的话。
    {{DOMxRef("HTMLTableElement.tFoot")}}
    -
    这是一个 {{DOMxRef("HTMLTableSectionElement")}}, 表示子元素中的第一个 {{HTMLElement("tfoot")}},如果找不到则为 null。当设置此属性时,如果给出的对象不是一个 <tfoot>,一个带有 HierarchyRequestError 名字的异常 {{DOMxRef("DOMException")}} 会被抛出。如果设置了正确的对象,它会被立即插入到DOM树中既不是 {{HTMLElement("caption")}}、{{HTMLElement("colgroup")}} 也不是 {{HTMLElement("thead")}} 的第一个元素之前,或者直接被作为最后一个元素插入(如果找不到上述元素的话),同时子元素中的第一个 <tfoot> 会被移除,如果存在的话。
    +
    这是一个 {{DOMxRef("HTMLTableSectionElement")}}, 表示子元素中的第一个 {{HTMLElement("tfoot")}},如果找不到则为 null。当设置此属性时,如果给出的对象不是一个 <tfoot>,一个带有 HierarchyRequestError 名字的异常 {{DOMxRef("DOMException")}} 会被抛出。如果设置了正确的对象,它会被立即插入到DOM树中既不是 {{HTMLElement("caption")}}、{{HTMLElement("colgroup")}} 也不是 {{HTMLElement("thead")}} 的第一个元素之前,或者直接被作为最后一个元素插入(如果找不到上述元素的话),同时子元素中的第一个 <tfoot> 会被移除,如果存在的话。
    {{DOMxRef("HTMLTableElement.rows")}}{{ReadOnlyInline}}
    返回一个实时的 {{DOMxRef("HTMLCollection")}},它包含元素中的所有行,也就是子元素中的所有 {{HTMLElement("tr")}},或者是 {{HTMLElement("thead")}}、{{HTMLElement("tbody")}} 和 {{HTMLElement("tfoot")}} 三者子元素中的其中一个子元素。<thead> 中的行会按照DOM树的顺序出现在首位,<tbody> 中的行出现在末位,也会按照DOM树的顺序。HTMLCollection 对象是实时的,当 HTMLTableElement 发生变化时会自动更新。
    {{DOMxRef("HTMLTableElement.tBodies")}}{{ReadOnlyInline}}
    diff --git a/files/zh-cn/web/api/htmltableelement/rows/index.html b/files/zh-cn/web/api/htmltableelement/rows/index.html index 9e93e1f80c23f0..d7580d343aa2b3 100644 --- a/files/zh-cn/web/api/htmltableelement/rows/index.html +++ b/files/zh-cn/web/api/htmltableelement/rows/index.html @@ -15,7 +15,7 @@ -

    HTMLTableElement.rows 只读属性返回表中所有行的一个活的 {{domxref("HTMLCollection")}}。HTMLTableElement.rows 包括与之相关的{{HTMLElement("thead")}}, {{HTMLElement("tfoot")}} 和 {{HTMLElement("tbody")}} 元素.

    +

    HTMLTableElement.rows 只读属性返回表中所有行的一个活的 {{domxref("HTMLCollection")}}。HTMLTableElement.rows 包括与之相关的{{HTMLElement("thead")}}, {{HTMLElement("tfoot")}} 和 {{HTMLElement("tbody")}} 元素.

    Although the property is read-only, the returned object is live and allows the modification of its content.

    diff --git a/files/zh-cn/web/api/htmltablerowelement/index.html b/files/zh-cn/web/api/htmltablerowelement/index.html index 3b379687d6c459..b3b4bf74bc2865 100644 --- a/files/zh-cn/web/api/htmltablerowelement/index.html +++ b/files/zh-cn/web/api/htmltablerowelement/index.html @@ -67,5 +67,5 @@

    See also

    -
     
    +
    diff --git a/files/zh-cn/web/api/htmltemplateelement/index.html b/files/zh-cn/web/api/htmltemplateelement/index.html index 963f299f68725b..9e5fbda5105ed2 100644 --- a/files/zh-cn/web/api/htmltemplateelement/index.html +++ b/files/zh-cn/web/api/htmltemplateelement/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef("Web Components")}}
    -

    可以使用HTMLTemplateElement 接口来访问 HTML {{HTMLElement("template")}}元素的内容。

    +

    可以使用HTMLTemplateElement 接口来访问 HTML {{HTMLElement("template")}}元素的内容。

    {{InheritanceDiagram(600, 120)}}

    diff --git a/files/zh-cn/web/api/htmlunknownelement/index.html b/files/zh-cn/web/api/htmlunknownelement/index.html index fb0ae7d9e234c3..4fa301500f5554 100644 --- a/files/zh-cn/web/api/htmlunknownelement/index.html +++ b/files/zh-cn/web/api/htmlunknownelement/index.html @@ -9,11 +9,11 @@
    {{ APIRef("HTML DOM") }}
    -

    HTMLUnknownElement 代表着一个无效的HTML元素,派生自 {{domxref("HTMLElement")}} 接口,,但它没有任何可用的附加属性或方法.

    +

    HTMLUnknownElement 代表着一个无效的HTML元素,派生自 {{domxref("HTMLElement")}} 接口,,但它没有任何可用的附加属性或方法.

    属性

    -

    没有特效属性,继承自父级 {{domxref("HTMLElement")}}.

    +

    没有特效属性,继承自父级 {{domxref("HTMLElement")}}.

    方法

    diff --git a/files/zh-cn/web/api/htmlvideoelement/index.html b/files/zh-cn/web/api/htmlvideoelement/index.html index 93e9d7dfc21401..525e52c826d56b 100644 --- a/files/zh-cn/web/api/htmlvideoelement/index.html +++ b/files/zh-cn/web/api/htmlvideoelement/index.html @@ -13,9 +13,9 @@
    {{APIRef("HTML DOM")}}
    -

    HTMLVideoElement 接口提供了用于操作视频对象的特殊属性和方法。它同时还继承了{{domxref("HTMLMediaElement")}} 和 {{domxref("HTMLElement")}} 的属性与方法。

    +

    HTMLVideoElement 接口提供了用于操作视频对象的特殊属性和方法。它同时还继承了{{domxref("HTMLMediaElement")}} 和 {{domxref("HTMLElement")}} 的属性与方法。

    -

    在不同浏览器中 支持的媒体格式 是不一样的。因此在提供媒体文件的时候,或者提供一种所有浏览器都支持的格式,或者提供格式不同的多个视频源来支持不同浏览器,保证你想要支持的浏览器都能够播放。

    +

    在不同浏览器中 支持的媒体格式 是不一样的。因此在提供媒体文件的时候,或者提供一种所有浏览器都支持的格式,或者提供格式不同的多个视频源来支持不同浏览器,保证你想要支持的浏览器都能够播放。

    {{InheritanceDiagram(600, 140)}}

    diff --git a/files/zh-cn/web/api/idbcursor/direction/index.html b/files/zh-cn/web/api/idbcursor/direction/index.html index 4bb05bec1337f8..6ac6d039a3a672 100644 --- a/files/zh-cn/web/api/idbcursor/direction/index.html +++ b/files/zh-cn/web/api/idbcursor/direction/index.html @@ -26,7 +26,7 @@

    取值

    @@ -39,7 +39,7 @@

    取值

    +
    type {{domxref("DOMString")}}代表了脚本的MIME类型。它反映了{{htmlattrxref("type","script")}} 属性。如何解析奇异的编程语言,请阅读这篇文章。代表了脚本的MIME类型。它反映了{{htmlattrxref("type","script")}} 属性。如何解析奇异的编程语言,请阅读这篇文章。
    src
    charset {{domxref("DOMString")}}代表外部脚本资源的字符编码。它反映了{{htmlattrxref("charset","script")}} 属性。代表外部脚本资源的字符编码。它反映了{{htmlattrxref("charset","script")}} 属性。
    async
    nextunique -

     

    +

    从数据源开始遍历;当取值有重复时,只获取一次。

    prevunique 从数据源的最后位置开始取值,只获取一次。
    -  
    @@ -47,11 +47,11 @@

    例子

    在这个简单的例子中,我们首先创建一个事物对象,返回一个对象仓库 (store), 然后使用邮编遍历整个数据仓库。在每次迭代中我们记录了游标的方向,例如 prev(倒序遍历)

    prev
    -  
    +

    注意:我们不能改变游标的取值,因为这是个只读属性;应该在{{domxref("IDBObjectStore.openCursor")}}方法调用的第二个参数指定游标遍历的方向;

    -

    使用游标遍历数据时,可以不需要我们指定在特定字段选择数据;我们可以直接获取所有数据,同时在每次循环迭代过程当中,我们可以通过 cursor.value.foo 获取数据,如下是一个完整的游标遍历数据的例子; IDBCursor example (view example live.)

    +

    使用游标遍历数据时,可以不需要我们指定在特定字段选择数据;我们可以直接获取所有数据,同时在每次循环迭代过程当中,我们可以通过 cursor.value.foo 获取数据,如下是一个完整的游标遍历数据的例子; IDBCursor example (view example live.)

    function backwards() {
       list.innerHTML = '';
       var transaction = db.transaction(['rushAlbumList'], 'readonly');
    @@ -79,7 +79,7 @@ 

    浏览器兼容性

    {{Compat("api.IDBCursor.direction")}} -

     

    +

    参考资料

    • Using IndexedDB
    • diff --git a/files/zh-cn/web/api/idbcursor/index.html b/files/zh-cn/web/api/idbcursor/index.html index f6009c0ae6bea4..37eeb3f61c6ebd 100644 --- a/files/zh-cn/web/api/idbcursor/index.html +++ b/files/zh-cn/web/api/idbcursor/index.html @@ -31,7 +31,7 @@

      属性

      {{domxref("IDBCursor.source")}} {{readonlyInline}}
      -
      返回一个游标正在迭代的 {{domxref("IDBObjectStore")}}  或者 {{domxref("IDBIndex")}} 。这个方法永远不会返回一个空或者抛出异常,即使游标当前正在被迭代,已迭代超过其结束,再或者其事务没有处于活动状态。
      +
      返回一个游标正在迭代的 {{domxref("IDBObjectStore")}} 或者 {{domxref("IDBIndex")}} 。这个方法永远不会返回一个空或者抛出异常,即使游标当前正在被迭代,已迭代超过其结束,再或者其事务没有处于活动状态。
      {{domxref("IDBCursor.direction")}} {{readonlyInline}}
      返回光标遍历方向。请查看 常数 中可能的值。
      {{domxref("IDBCursor.key")}} {{readonlyInline}}
      @@ -57,7 +57,7 @@

      常量

      示例

      -

      在这个简单的代码片段中,我们创建了一个事务和检索一个对象存储,之后使用一个游标遍历存储对象中所有的记录。游标不是必须使用主键来选则数据库,我们可以把它全部拿出来。同时需要注意在每次循环遍历中,你可以在当前记录下的游标对象中使用  cursor.value.foo 抓取数据。对于完整的工作示例,请查看我们的 IDBCursor example (在线查看示例)。

      +

      在这个简单的代码片段中,我们创建了一个事务和检索一个对象存储,之后使用一个游标遍历存储对象中所有的记录。游标不是必须使用主键来选则数据库,我们可以把它全部拿出来。同时需要注意在每次循环遍历中,你可以在当前记录下的游标对象中使用 cursor.value.foo 抓取数据。对于完整的工作示例,请查看我们的 IDBCursor example (在线查看示例)。

      function displayData() {
         var transaction = db.transaction(['rushAlbumList'], "readonly");
      diff --git a/files/zh-cn/web/api/idbcursor/key/index.html b/files/zh-cn/web/api/idbcursor/key/index.html
      index 3d6bf2a42b4298..7c51fe0f74656e 100644
      --- a/files/zh-cn/web/api/idbcursor/key/index.html
      +++ b/files/zh-cn/web/api/idbcursor/key/index.html
      @@ -23,7 +23,7 @@ 

      示例

      在该示例中,我们创建一个事务,检索一个存储对象,然后使用游标遍历所有存储在 object store 中的记录。遍历的过程中,我们把类似(相簿标题,这是我们的键 key),游标的 key 打印出来。

      -

      我们可以不根据游标的 key 来选取数据;我们可以抓取所有。还要注意,在循环的每个迭代中,您可以使用 cursor.value.foo 从当前记录下获取数据。完整示例,请看IDBCursor example (view example live.)

      +

      我们可以不根据游标的 key 来选取数据;我们可以抓取所有。还要注意,在循环的每个迭代中,您可以使用 cursor.value.foo 从当前记录下获取数据。完整示例,请看IDBCursor example (view example live.)

      function displayData() {
         var transaction = db.transaction(['rushAlbumList'], "readonly");
      diff --git a/files/zh-cn/web/api/idbcursorsync/index.html b/files/zh-cn/web/api/idbcursorsync/index.html
      index db25c331d16270..dc60ef932e4cfd 100644
      --- a/files/zh-cn/web/api/idbcursorsync/index.html
      +++ b/files/zh-cn/web/api/idbcursorsync/index.html
      @@ -15,7 +15,7 @@
       

      {{APIRef("IndexedDB")}}

      -

      注意: 同步 IndexedDB API 版本 本来计划仅用于Web Workers, 事实上由于本身存在一些问题已经被移除。当然,如果 Web 开发人员有足够的需求,   IndexedDB API 的 IDBCursorSync表示用于遍历数据库中多个记录的游标。 你只能设置 一个IDBCursorSync 代表一种游标实例,但同时可以有无限数量的游标。.此操作在基础索引或对象存储上执行。它使应用程序能够同步处理光标范围内的所有记录。

      +

      注意: 同步 IndexedDB API 版本 本来计划仅用于Web Workers, 事实上由于本身存在一些问题已经被移除。当然,如果 Web 开发人员有足够的需求, IndexedDB APIIDBCursorSync表示用于遍历数据库中多个记录的游标。 你只能设置 一个IDBCursorSync 代表一种游标实例,但同时可以有无限数量的游标。.此操作在基础索引或对象存储上执行。它使应用程序能够同步处理光标范围内的所有记录。

      方法概述

      @@ -65,9 +65,9 @@

      属性

      DATA_ERR
      -
      如果潜在的对象存储使用 in-line keys 并且 在 key path 中的属性不能匹配这个游标的位置 key
      +
      如果潜在的对象存储使用 in-line keys 并且 在 key path 中的属性不能匹配这个游标的位置 key
      NOT_ALLOWED_ERR
      -
      如果在READ_ONLY 或者 SNAPSHOT_READ模式下,潜在的下标或者对象存储不支持更新这个记录 , 或者由于潜在的 index 设置为auto-populated.某个 index 记录不能被更新
      +
      如果在READ_ONLY 或者 SNAPSHOT_READ模式下,潜在的下标或者对象存储不支持更新这个记录 , 或者由于潜在的 index 设置为auto-populated.某个 index 记录不能被更新
      SERIAL_ERR
      如果存储的数据不能被内部结构化克隆算法序列化。
      @@ -142,5 +142,5 @@
      Exceptions
      NOT_ALLOWED_ERR
      -
      如果在READ_ONLY 或者 SNAPSHOT_READ模式下,潜在的下标或者对象存储不支持更新这个记录 ,
      +
      如果在READ_ONLY 或者 SNAPSHOT_READ模式下,潜在的下标或者对象存储不支持更新这个记录 ,
      diff --git a/files/zh-cn/web/api/idbdatabase/createobjectstore/index.html b/files/zh-cn/web/api/idbdatabase/createobjectstore/index.html index c6df1017079fa1..f8ee205f35bd54 100644 --- a/files/zh-cn/web/api/idbdatabase/createobjectstore/index.html +++ b/files/zh-cn/web/api/idbdatabase/createobjectstore/index.html @@ -6,7 +6,7 @@

      {{ APIRef("IndexedDB") }}

      -

      {{domxref("IDBDatabase")}} 接口的 createObjectStore() 方法创建并返回一个新的 object store 或 index。

      +

      {{domxref("IDBDatabase")}} 接口的 createObjectStore() 方法创建并返回一个新的 object store 或 index。

      此方法接受一个参数作为 store 的名称,也接受一个可选的参数对象让你可以定义重要的可选属性。你可以用这个属性唯一的标识此 store 中的每个对象。因为参数是一个标识符,所以 store 中的每一个对象都应有此属性并保证此属性唯一。

      @@ -25,7 +25,7 @@

      参数

      name
      -
      被创建的 object store 的名称。请注意创建空名称的 object store 是被允许的。
      +
      被创建的 object store 的名称。请注意创建空名称的 object store 是被允许的。
      optionalParameters {{optional_inline}}

      可选的对象,它的属性是此方法的可选参数,其中包括以下的属性:

      @@ -41,12 +41,12 @@

      参数

      keyPath -

      key path 被用在新的 object store 上。如果为空或未指定,object store 创建时将没有 key path,而是使用 out-of-line keys 。你也能传一个数组作为 keyPath 。

      +

      key path 被用在新的 object store 上。如果为空或未指定,object store 创建时将没有 key path,而是使用 out-of-line keys 。你也能传一个数组作为 keyPath

      autoIncrement - 如果为 true,  object store 有一个 key generator. 默认为 false。 + 如果为 true, object store 有一个 key generator. 默认为 false。 @@ -83,7 +83,7 @@

      异常

      TransactionInactiveError -

      如果对不存在的源数据库发出请求(例如,已被删除的)。此外,在 Firefox 版本小于 41 中,会抛出误导性的 InvalidStateError 错误,这一问题现已修复(请参阅 {{Bug("1176165")}})。

      +

      如果对不存在的源数据库发出请求(例如,已被删除的)。此外,在 Firefox 版本小于 41 中,会抛出误导性的 InvalidStateError 错误,这一问题现已修复(请参阅 {{Bug("1176165")}})。

      @@ -95,7 +95,7 @@

      异常

      InvalidAccessError -

      如果 autoIncrement 设置为 true,并且 keyPath 是空字符串或包含空字符串的数组。

      +

      如果 autoIncrement 设置为 true,并且 keyPath 是空字符串或包含空字符串的数组。

      @@ -107,10 +107,10 @@

      Example

      var request = window.indexedDB.open("toDoList", 4); // This handler is called when a new version of the database -  // is created, either when one has not been created before -  // or when a new version number is submitted by calling -  // window.indexedDB.open(). -  // This handler is only supported in recent browsers. + // is created, either when one has not been created before + // or when a new version number is submitted by calling + // window.indexedDB.open(). + // This handler is only supported in recent browsers. request.onupgradeneeded = function(event) { var db = event.target.result; diff --git a/files/zh-cn/web/api/idbdatabase/deleteobjectstore/index.html b/files/zh-cn/web/api/idbdatabase/deleteobjectstore/index.html index 7f68948d1c8f48..0c1e1c2ec31494 100644 --- a/files/zh-cn/web/api/idbdatabase/deleteobjectstore/index.html +++ b/files/zh-cn/web/api/idbdatabase/deleteobjectstore/index.html @@ -6,7 +6,7 @@

      {{ APIRef("IndexedDB") }}

      -

      deleteObjectStore() 方法从 {{domxref("IDBDatabase")}} 中销毁指定名称的对象存储,及这个对象存储所包含的任何索引。

      +

      deleteObjectStore() 方法从 {{domxref("IDBDatabase")}} 中销毁指定名称的对象存储,及这个对象存储所包含的任何索引。

      与 {{ domxref("IDBDatabase.createObjectStore") }} 一样,此方法只能versionchange事务中调用。

      @@ -26,7 +26,7 @@

      参数

      异常

      -

      此方法可能会引发下列 {{domxref("DOMException")}}  异常:

      +

      此方法可能会引发下列 {{domxref("DOMException")}} 异常:

      @@ -38,7 +38,7 @@

      异常

      - + @@ -58,17 +58,17 @@

      示例

      var request = indexedDB.open(dbName, dbVersion); request.onupgradeneeded = function(e) { -  var db = request.result; -  if (e.oldVersion < 1) { -    db.createObjectStore("store1"); -  } + var db = request.result; + if (e.oldVersion < 1) { + db.createObjectStore("store1"); + } -  if (e.oldVersion < 2) { -    db.deleteObjectStore("store1"); -    db.createObjectStore("store2"); -  } + if (e.oldVersion < 2) { + db.deleteObjectStore("store1"); + db.createObjectStore("store2"); + } -  // etc. for version < 3, 4... + // etc. for version < 3, 4... };

      Specification

      diff --git a/files/zh-cn/web/api/idbdatabase/index.html b/files/zh-cn/web/api/idbdatabase/index.html index 24e2351fa954ff..829e7f2a41cb69 100644 --- a/files/zh-cn/web/api/idbdatabase/index.html +++ b/files/zh-cn/web/api/idbdatabase/index.html @@ -8,7 +8,7 @@

      {{APIRef("IndexedDB")}}

      -

      IndexedDB 中的 IDBDatabase 接口提供一个到 数据库的连接; 你可以使用 IDBDatabase 对象在数据库中打开一个transaction , 然后进行操作或者删除数据库中的对象。这是唯一一个能够访问和管理数据库版本的接口。 

      +

      IndexedDB 中的 IDBDatabase 接口提供一个到 数据库的连接; 你可以使用 IDBDatabase 对象在数据库中打开一个transaction , 然后进行操作或者删除数据库中的对象。这是唯一一个能够访问和管理数据库版本的接口。

      @@ -20,7 +20,7 @@
      -

      注意:请注意,从 Firefox 40 开始,IndexedDB 事务具有宽松的持久性保证以提高性能(请参阅bug 1112702)以前在readwrite事务中IDBTransaction.oncomplete被触发只有当所有数据都保证已刷新到磁盘时。在 Firefox 40+ 中,complete事件在操作系统被告知写入数据之后被触发,但可能在该数据实际上被刷新到磁盘之前。该complete因此,事件可以比以前更快地传递,但是,如果操作系统崩溃或者在将数据刷新到磁盘之前系统电源丢失,则整个事务将丢失的可能性很小。由于这种灾难性事件很少见,大多数消费者不应该进一步关注自己。如果由于某种原因必须确保持久性(例如,您要存储以后无法重新计算的关键数据),则可以complete通过使用实验(非标准)readwriteflush模式创建事务来强制事务在传递事件之前刷新到磁盘(请参阅IDBDatabase.transaction)。

      +

      注意:请注意,从 Firefox 40 开始,IndexedDB 事务具有宽松的持久性保证以提高性能(请参阅bug 1112702)以前在readwrite事务中IDBTransaction.oncomplete被触发只有当所有数据都保证已刷新到磁盘时。在 Firefox 40+ 中,complete事件在操作系统被告知写入数据之后被触发,但可能在该数据实际上被刷新到磁盘之前。该complete因此,事件可以比以前更快地传递,但是,如果操作系统崩溃或者在将数据刷新到磁盘之前系统电源丢失,则整个事务将丢失的可能性很小。由于这种灾难性事件很少见,大多数消费者不应该进一步关注自己。如果由于某种原因必须确保持久性(例如,您要存储以后无法重新计算的关键数据),则可以complete通过使用实验(非标准)readwriteflush模式创建事务来强制事务在传递事件之前刷新到磁盘(请参阅IDBDatabase.transaction)。

      方法

      @@ -33,18 +33,18 @@

      方法

      {{domxref("IDBDatabase.createObjectStore()")}}
      创建并返回一个新的 object store 或者 index。
      {{domxref("IDBDatabase.deleteObjectStore()")}}
      -
      根据给定的名字,删除在当前连接的数据库中的 object store 和 相关的索引。 
      +
      根据给定的名字,删除在当前连接的数据库中的 object store 和 相关的索引。
      {{domxref("IDBDatabase.transaction()")}}
      -
      立即返回一个包含{{domxref("IDBTransaction.objectStore")}} 方法的 transaction 对象。你可以用这个对象来操作 object store。这个操作是在一个单独的线程中执行的。
      +
      立即返回一个包含{{domxref("IDBTransaction.objectStore")}} 方法的 transaction 对象。你可以用这个对象来操作 object store。这个操作是在一个单独的线程中执行的。

      属性

      {{domxref("IDBDatabase.name")}} {{readonlyInline}}
      -
      {{ domxref("DOMString") }}类型,当前连接数据库名  。
      +
      {{ domxref("DOMString") }}类型,当前连接数据库名 。
      {{domxref("IDBDatabase.version")}} {{readonlyInline}}
      -
      64-bit 整型数,当前连接数据库的版本 。当数据第一次被创建时,这个属性是一个空的字符串。 
      +
      64-bit 整型数,当前连接数据库的版本 。当数据第一次被创建时,这个属性是一个空的字符串。
      {{domxref("IDBDatabase.objectStoreNames")}} {{readonlyInline}}
      {{ domxref("DOMStringList") }}类型,当前连接连接数据库中所有的 object store 名字列表。
      @@ -60,13 +60,13 @@

      Event handlers

      当数据库结构发生更改时触发

      -

      ({{domxref("IDBOpenDBRequest.onupgradeneeded")}}事件或在其他地方请求 {{domxref("IDBFactory.deleteDatabase")}} 时(最可能在同一台计算机上的另一个窗口/选项卡中)这与版本更改事务(请参阅参考资料{{domxref("IDBVersionChangeEvent")}}) 不同,但它是相关的。

      +

      ({{domxref("IDBOpenDBRequest.onupgradeneeded")}}事件或在其他地方请求 {{domxref("IDBFactory.deleteDatabase")}} 时(最可能在同一台计算机上的另一个窗口/选项卡中)这与版本更改事务(请参阅参考资料{{domxref("IDBVersionChangeEvent")}}) 不同,但它是相关的。

      示例

      -

      在下面的代码中,异步打开了一个数据库连接 ({{domxref("IDBFactory")}}), 并处理成功或者异常事件,如果触发了 upgrade 事件就需要创建一个新的 object store  ({{ domxref("IDBdatabase") }})。如果想看完整的例子,可以使用 To-do Notifications 应用 (view example live.)

      +

      在下面的代码中,异步打开了一个数据库连接 ({{domxref("IDBFactory")}}), 并处理成功或者异常事件,如果触发了 upgrade 事件就需要创建一个新的 object store ({{ domxref("IDBdatabase") }})。如果想看完整的例子,可以使用 To-do Notifications 应用 (view example live.)

       // 我们先打开一个数据库
      @@ -138,4 +138,4 @@ 

      See also

    • Reference example: To-do Notifications (view example live.)
    • -

       

      +

      diff --git a/files/zh-cn/web/api/idbdatabase/versionchange_event/index.html b/files/zh-cn/web/api/idbdatabase/versionchange_event/index.html index 17c1c6aec7f99b..58054fdf5177d1 100644 --- a/files/zh-cn/web/api/idbdatabase/versionchange_event/index.html +++ b/files/zh-cn/web/api/idbdatabase/versionchange_event/index.html @@ -6,10 +6,10 @@ ---

      {{ APIRef("IndexedDB") }}

      -

       {{domxref("IDBDatabase")}} 中的 onversionchange 事件处理器能处理版本更新事件,此事件能在任意地方 (很可能在同一台计算机上的另一个窗口/选项卡中) 导致数据库结构更改({{ domxref("IDBOpenDBRequest.onupgradeneeded")}} 事件 或 {{ domxref("IDBFactory.deleteDatabase")}} 事件)的时候被触发 。

      +

      {{domxref("IDBDatabase")}} 中的 onversionchange 事件处理器能处理版本更新事件,此事件能在任意地方 (很可能在同一台计算机上的另一个窗口/选项卡中) 导致数据库结构更改({{ domxref("IDBOpenDBRequest.onupgradeneeded")}} 事件 或 {{ domxref("IDBFactory.deleteDatabase")}} 事件)的时候被触发 。

      -

      onversionchange 与 versionchange 是不相同的事件(但两者是有关联的)。

      +

      onversionchangeversionchange 是不相同的事件(但两者是有关联的)。

      {{AvailableInWorkers}}

      @@ -20,7 +20,7 @@

      语法

      举例

      -

      本例展示了一个创建新对象仓库的 {{domxref("IDBOpenDBRequest.onupgradeneeded")}} 代码块;代码中包含用于处理失败操作的 onerror 和 onabort 函数,以及一个 onversionchange 函数用以在数据库结构被改变时通知用户。

      +

      本例展示了一个创建新对象仓库的 {{domxref("IDBOpenDBRequest.onupgradeneeded")}} 代码块;代码中包含用于处理失败操作的 onerroronabort 函数,以及一个 onversionchange 函数用以在数据库结构被改变时通知用户。

      request.onupgradeneeded = function(event) {
         var db = event.target.result;
      @@ -68,12 +68,12 @@ 

      格式

      - + - +
      InvalidStateErrorOccurs if the method was not called from a versionchange transaction callback. For older WebKit browsers, you must call {{ APIRef("IDBVersionChangeRequest.setVersion")}} first.Occurs if the method was not called from a versionchange transaction callback. For older WebKit browsers, you must call {{ APIRef("IDBVersionChangeRequest.setVersion")}} first.
      TransactionInactiveError
      {{SpecName('IndexedDB', '#widl-IDBDatabase-onversionchange', 'onversionchange')}} {{Spec2('IndexedDB')}} 
      {{SpecName("IndexedDB 2", "#dom-idbdatabase-onversionchange", "onversionchange")}} {{Spec2("IndexedDB 2")}} 
      diff --git a/files/zh-cn/web/api/idbenvironment/index.html b/files/zh-cn/web/api/idbenvironment/index.html index 98e1dc6d258a25..1d75d5b62bb0da 100644 --- a/files/zh-cn/web/api/idbenvironment/index.html +++ b/files/zh-cn/web/api/idbenvironment/index.html @@ -6,10 +6,10 @@

      {{APIRef()}}

      -

      警告:对于 Firefox 52, the property defined in this mixin has been moved to the WindowOrWorkerGlobalScope mixin, and other browsers will follow suit. Look to that page for up-to-date details.  IndexedDB API

      +

      警告:对于 Firefox 52, the property defined in this mixin has been moved to the WindowOrWorkerGlobalScope mixin, and other browsers will follow suit. Look to that page for up-to-date details. IndexedDB API

      -

       IndexedDB API提供的帮助类IDBEnvironment包含了一个 indexedDB 属性, 这个属性可以比较方便的操作 IndexedDB. 它是由{{domxref("window")}} 和{{domxref("Worker")}} 实现的最顶级 IndexedDB 接口。

      +

      IndexedDB API提供的帮助类IDBEnvironment包含了一个 indexedDB 属性, 这个属性可以比较方便的操作 IndexedDB. 它是由{{domxref("window")}} 和{{domxref("Worker")}} 实现的最顶级 IndexedDB 接口。

      {{AvailableInWorkers}}

      @@ -17,12 +17,12 @@

      属性

      {{domxref("IDBEnvironment.indexedDB")}} {{readonlyInline}}
      -
      该属性为应用程序提供了异步访问索引数据库 (IndexedDB) 的构件。它包含一个 {{domxref("IDBFactory")}} 对象
      +
      该属性为应用程序提供了异步访问索引数据库 (IndexedDB) 的构件。它包含一个 {{domxref("IDBFactory")}} 对象

      示例

      -

      下述代码演示了如何创建一个异步打开数据库的请求,当该请求的onsuccess 回调被执行时,该数据库被打开。

      +

      下述代码演示了如何创建一个异步打开数据库的请求,当该请求的onsuccess 回调被执行时,该数据库被打开。

      var db;
       function openDB() {
      @@ -45,7 +45,7 @@ 

      规范

      {{SpecName('IndexedDB', '#idl-def-IDBEnvironment', 'IDBEnvironment')}} {{Spec2('IndexedDB')}} -   + diff --git a/files/zh-cn/web/api/idbfactory/index.html b/files/zh-cn/web/api/idbfactory/index.html index c08d9023f54ad3..35f40e031c3f22 100644 --- a/files/zh-cn/web/api/idbfactory/index.html +++ b/files/zh-cn/web/api/idbfactory/index.html @@ -6,7 +6,7 @@

      {{APIRef("IndexedDB")}}

      -

      IndexedDB API 的IDBFactory 接口让程序可以异步存取 indexed databases。window.indexedDB 对象实现了这个接口。你可以通过这个对象而不是直接使用IDBFactory接口打开—— 创建或者连接 —— 和删除一个数据库。

      +

      IndexedDB APIIDBFactory 接口让程序可以异步存取 indexed databases。window.indexedDB 对象实现了这个接口。你可以通过这个对象而不是直接使用IDBFactory接口打开—— 创建或者连接 —— 和删除一个数据库。

      Methods

      @@ -44,14 +44,14 @@

      Example

      // these two event handlers act on the database being opened successfully, or not DBOpenRequest.onerror = function(event) { -  note.innerHTML += '<li>Error loading database.</li>'; + note.innerHTML += '<li>Error loading database.</li>'; }; DBOpenRequest.onsuccess = function(event) { -  note.innerHTML += '<li>Database initialised.</li>'; + note.innerHTML += '<li>Database initialised.</li>'; -  // store the result of opening the database in the db variable. This is used a lot later on, for opening transactions and suchlike. -  db = request.result; + // store the result of opening the database in the db variable. This is used a lot later on, for opening transactions and suchlike. + db = request.result; };
      diff --git a/files/zh-cn/web/api/idbfactory/open/index.html b/files/zh-cn/web/api/idbfactory/open/index.html index 9d5b45c2c8e328..c71c10ad8d8990 100644 --- a/files/zh-cn/web/api/idbfactory/open/index.html +++ b/files/zh-cn/web/api/idbfactory/open/index.html @@ -5,7 +5,7 @@ ---

      {{APIRef("IDBFactory")}}

      -

      IDBFactory.open 方法用于打开一个数据库连接。本方法立即返回一个 {{domxref("IDBOpenDBRequest")}} 对象,但打开数据库的操作是异步执行的。

      +

      IDBFactory.open 方法用于打开一个数据库连接。本方法立即返回一个 {{domxref("IDBOpenDBRequest")}} 对象,但打开数据库的操作是异步执行的。

      连接数据库在一个单独的线程中进行,包括以下几个步骤:

        @@ -15,12 +15,12 @@
      1. 如果数据库已计划删除,那等着删除完成。
    -
  • 如果已有数据库版本高于给定的 version,中止操作并返回类型为 VersionError 的 DOMError 。
  • -
  • 如果已有数据库版本低于给定的 version,触发一个 versionchange 操作。
  • +
  • 如果已有数据库版本高于给定的 version,中止操作并返回类型为 VersionError 的 DOMError
  • +
  • 如果已有数据库版本低于给定的 version,触发一个 versionchange 操作。
  • 如果数据库不存在,创建指定名称的数据库,将版本号设置为给定版本,如果给定版本号,则设置为 1,and no object stores.
  • 创建数据库连接。
  • -

    如果操作成功执行,将触发 success 事件 on the request object that is returned from this method, with its result attribute set to the new {{domxref("IDBDatabase")}} object for the connection.

    +

    如果操作成功执行,将触发 success 事件 on the request object that is returned from this method, with its result attribute set to the new {{domxref("IDBDatabase")}} object for the connection.

    If an error occurs while the database connection is being opened, then an error event is fired on the request object returned from this method.

    Syntax

    For the current standard:

    @@ -41,14 +41,14 @@

    参数

    version
    - 指定数据库版本,当你想要更改数据库格式(比如增加对象存储,非增加记录),必须指定更高版本,通过 versionchange 来更改
    + 指定数据库版本,当你想要更改数据库格式(比如增加对象存储,非增加记录),必须指定更高版本,通过 versionchange 来更改
    options (version and storage) {{ NonStandardBadge() }}
    In Gecko, since version 26, you can include an options object as a parameter of {{ domxref("IDBFactory.open") }} that contains the version number of the database, plus a storage value that specifies whether you want to use permanent (the default value) storage for the IndexedDB, or temporary storage (aka shared pool.) See {{ bug("785884") }} for more details. This is a non-standard feature that we are looking to standardise sometime in the future.
    -

    Note: Data in temporary storage persists until the global limit for the pool is reached. The global limit calculation is relatively complex, but we are considering changing it (see  {{ Bug("968272") }}). When the global limit is reached, then data for the least recently used origin is deleted. There's also a group limit (eTLD+1 group/domain) which is currently 20% of the global limit. All requets that would exceed the group limit are just rejected.

    +

    Note: Data in temporary storage persists until the global limit for the pool is reached. The global limit calculation is relatively complex, but we are considering changing it (see {{ Bug("968272") }}). When the global limit is reached, then data for the least recently used origin is deleted. There's also a group limit (eTLD+1 group/domain) which is currently 20% of the global limit. All requets that would exceed the group limit are just rejected.

    返回

    diff --git a/files/zh-cn/web/api/idbfilehandle/index.html b/files/zh-cn/web/api/idbfilehandle/index.html index 90df8f0a4dee6d..17cc4baf99a82e 100644 --- a/files/zh-cn/web/api/idbfilehandle/index.html +++ b/files/zh-cn/web/api/idbfilehandle/index.html @@ -13,15 +13,15 @@

    概要

    -

    LockedFile 接口提供了处理给定文件的所有必要锁定工具

    +

    LockedFile 接口提供了处理给定文件的所有必要锁定工具

    属性

    {{domxref("LockedFile.fileHandle")}} {{readonlyinline}}
    -
    从被打开的锁定文件返回一个 {{domxref("FileHandle")}} 对象。
    +
    从被打开的锁定文件返回一个 {{domxref("FileHandle")}} 对象。
    {{domxref("LockedFile.mode")}} {{readonlyinline}}
    -
    访问文件的方式; 返回readonly 或 readwrite。
    +
    访问文件的方式; 返回readonlyreadwrite。
    {{domxref("LockedFile.active")}} {{readonlyinline}}
    指示文件是否可以访问,返回 true 或 false。
    {{domxref("LockedFile.location")}}
    @@ -32,9 +32,9 @@

    事件处理

    {{domxref("LockedFile.oncomplete")}}
    -
    每次读取或写入操作成功时触发 {{event("complete")}} 事件。
    +
    每次读取或写入操作成功时触发 {{event("complete")}} 事件。
    {{domxref("LockedFile.onabort")}}
    -
    每次调用{{domxref("LockedFile.abort()","abort()")}} 方法时会触发{{event("abort")}}事件。
    +
    每次调用{{domxref("LockedFile.abort()","abort()")}} 方法时会触发{{event("abort")}}事件。
    {{domxref("LockedFile.onerror")}}
    在每次出现问题时触发{{event("error")}}事件。
    @@ -49,7 +49,7 @@

    方法

    {{domxref("LockedFile.readAsText()")}}
    允许以字符串形式检索文件内容的一部分。返回{{domxref("FileRequest")}}对象。
    {{domxref("LockedFile.write()")}}
    -
    允许从{{domxref("LockedFile.location","location")}} 偏移量开始在文件中写入一些数据。返回{{domxref("FileRequest")}}对象。
    +
    允许从{{domxref("LockedFile.location","location")}} 偏移量开始在文件中写入一些数据。返回{{domxref("FileRequest")}}对象。
    {{domxref("LockedFile.append()")}}
    允许从文件末尾写入一些数据。返回{{domxref("FileRequest")}}对象。
    {{domxref("LockedFile.truncate()")}}
    diff --git a/files/zh-cn/web/api/idbindex/index.html b/files/zh-cn/web/api/idbindex/index.html index b4a370ff8888a6..6325bc0db05b1f 100644 --- a/files/zh-cn/web/api/idbindex/index.html +++ b/files/zh-cn/web/api/idbindex/index.html @@ -9,11 +9,11 @@

    你可以通过记录的键或使用一个 index 取回一个 object store 中的这些记录 (cursors 提供了第三种方式:请见 {{ domxref("IDBCursor") }})。一个 index 可以让你在 object store 的 records 中,通过使用 records 的 properties(属性)来寻找 records。

    -

    index 是一个持久的键 - 值存储,其中其记录的值部分是被引用 object store 中的 record 的关键部分。在 object store 中新增、更新或是删除 records 时,索引中的 records 将自动填充。索引中的每条记录只能指向其引用的 object  store 中的唯一一条记录,但是多个索引可以引用同一个 object store。当 object store 变更时,所有引用 object store 的索引都会自动更新。

    +

    index 是一个持久的键 - 值存储,其中其记录的值部分是被引用 object store 中的 record 的关键部分。在 object store 中新增、更新或是删除 records 时,索引中的 records 将自动填充。索引中的每条记录只能指向其引用的 object store 中的唯一一条记录,但是多个索引可以引用同一个 object store。当 object store 变更时,所有引用 object store 的索引都会自动更新。

    索引中的 records 总是按照 records 的 key 进行排序。然而,不像 object stores,一个给定的 index 可以包含具有相同 key 的多条记录。这些 records 将根据被引用 object store 中的主键进一步排序。

    -

    你可以设置在一个范围内的 key,点击这里查看更多: {{domxref("IDBKeyRange")}}.

    +

    你可以设置在一个范围内的 key,点击这里查看更多: {{domxref("IDBKeyRange")}}.

    Methods

    @@ -48,7 +48,7 @@

    Properties

    {{domxref("IDBIndex.multiEntry")}} {{readonlyInline}}
    影响 index 的 key 路径的计算结果生成数组时索引的行为方式。如果为 true,那么对于 key 数组中的每一项,索引中都有一条记录。如果为 false,那么对于数组中的每个 key 都有一条记录。
    {{domxref("IDBIndex.unique")}} {{readonlyInline}}
    -
    如果为 true,这个 index 不会允许 key 有重复值。 
    +
    如果为 true,这个 index 不会允许 key 有重复值。

    Examples

    diff --git a/files/zh-cn/web/api/idbkeyrange/index.html b/files/zh-cn/web/api/idbkeyrange/index.html index b424a7ad076a48..8c875118a5c9ac 100644 --- a/files/zh-cn/web/api/idbkeyrange/index.html +++ b/files/zh-cn/web/api/idbkeyrange/index.html @@ -16,7 +16,7 @@

    {{APIRef("IndexedDB")}}

    -

    IndexedDB API 的IDBKeyRange接口表示一些数据类型上的键的连续间隔。可以使用一个键或某个范围的键从{{domxref("IDBObjectStore")}} 和{{domxref("IDBIndex")}} 对象中检索记录。您也可以指定键的上界和下界来限制范围。例如,您可以遍历值范围 a - z 中的键的所有值。

    +

    IndexedDB APIIDBKeyRange接口表示一些数据类型上的键的连续间隔。可以使用一个键或某个范围的键从{{domxref("IDBObjectStore")}} 和{{domxref("IDBIndex")}} 对象中检索记录。您也可以指定键的上界和下界来限制范围。例如,您可以遍历值范围 a - z 中的键的所有值。

    键范围可以是单个值,也可以是具有上界、下界或端点的范围。如果键范围同时有上界或下界,那么它是有界的,否则是无界的。有界键范围可以是开放的(不包含端点)或闭合的(包含了端点)。要检索一定范围内的所有键值,可以使用以下的代码结构:

    @@ -124,7 +124,7 @@

    Instance methods

    Examples

    -

    以下示例用以说明该如果使用键范围。在此我们将 keyRangeValue 声明为 A~F 之间的范围。我们打开一个事务 (使用 {{domxref("IDBTransaction")}}) 和一个对象存储,并用 {{domxref("IDBObjectStore.openCursor")}}打开一个游标,其中keyRangeValue是一个可选的键范围值,指定之后游标将只检索键在该范围内的记录。这里的键范围包括了“A”和“F”,因为我们还没声明键范围为开放边界。如果我们使用 IDBKeyRange.bound("A", "F", true, true);,那么这个键范围将不包括“A”和“F”,只包含它们之间的值。

    +

    以下示例用以说明该如果使用键范围。在此我们将 keyRangeValue 声明为 A~F 之间的范围。我们打开一个事务 (使用 {{domxref("IDBTransaction")}}) 和一个对象存储,并用 {{domxref("IDBObjectStore.openCursor")}}打开一个游标,其中keyRangeValue是一个可选的键范围值,指定之后游标将只检索键在该范围内的记录。这里的键范围包括了“A”和“F”,因为我们还没声明键范围为开放边界。如果我们使用 IDBKeyRange.bound("A", "F", true, true);,那么这个键范围将不包括“A”和“F”,只包含它们之间的值。

    Note: For a more complete example allowing you to experiment with key range, have a look at our IDBKeyRange-example repo (view the example live too.)

    diff --git a/files/zh-cn/web/api/idbkeyrange/lowerbound/index.html b/files/zh-cn/web/api/idbkeyrange/lowerbound/index.html index 30f7be4e282311..9db56704ce663e 100644 --- a/files/zh-cn/web/api/idbkeyrange/lowerbound/index.html +++ b/files/zh-cn/web/api/idbkeyrange/lowerbound/index.html @@ -20,9 +20,9 @@

    Syntax

    Parameters

    -
    lower 
    +
    lower
    指定新键范围的下限。
    -
    open {{optional_inline}}
    +
    open {{optional_inline}}
    指示下限是否排除端点值。默认值为 false。
    @@ -55,10 +55,10 @@

    Exceptions

    Example

    -

    下面的示例演示如何使用下限键范围。在这里,我们声明keyRangeValue = IDBKeyRange.lowerBound("F", false);— 一个包含值“F”及其后所有内容的范围。我们打开一个事务(使用 {{domxref("IDBTransaction")}})和一个对象存储,并使用 {{domxref("IDBObjectStore.openCursor")}}打开一个游标,声明keyRangeValue 为其可选的键范围值。这意味着光标将只检索键值为“F”及其后面的所有记录。如果使用IDBKeyRange.lowerBound("F", true);,则该范围将不包括端点“F”,仅包括其后面的值。

    +

    下面的示例演示如何使用下限键范围。在这里,我们声明keyRangeValue = IDBKeyRange.lowerBound("F", false);— 一个包含值“F”及其后所有内容的范围。我们打开一个事务(使用 {{domxref("IDBTransaction")}})和一个对象存储,并使用 {{domxref("IDBObjectStore.openCursor")}}打开一个游标,声明keyRangeValue 为其可选的键范围值。这意味着光标将只检索键值为“F”及其后面的所有记录。如果使用IDBKeyRange.lowerBound("F", true);,则该范围将不包括端点“F”,仅包括其后面的值。

    -

    Note: 要获得一个更完整的示例,使您能够使用键范围进行实验,请查看我们的 IDBKeyRange-example实时查看该示例)。

    +

    Note: 要获得一个更完整的示例,使您能够使用键范围进行实验,请查看我们的 IDBKeyRange-example实时查看该示例)。

    function displayData() {
    diff --git a/files/zh-cn/web/api/idbobjectstore/add/index.html b/files/zh-cn/web/api/idbobjectstore/add/index.html
    index 37ba7c6cbe234c..948326ada66e74 100644
    --- a/files/zh-cn/web/api/idbobjectstore/add/index.html
    +++ b/files/zh-cn/web/api/idbobjectstore/add/index.html
    @@ -26,7 +26,7 @@ 

    参数

    value
    需要存储的值。
    -
    key {{optional_inline}}
    +
    key {{optional_inline}}
    关键字用于识别记录。如果未指明,即为空。
    @@ -76,7 +76,7 @@

    异常

    DataCloneError 通过内部结构的克隆算法,被存储的数据无法被克隆
    -   + ConstraintError @@ -98,7 +98,7 @@

    示例

    note.innerHTML += '<li>Database initialised.</li>'; // store the result of opening the database in the db variable. -  // This is used a lot below + // This is used a lot below db = DBOpenRequest.result; // Run the addData() function to add the data to the database @@ -114,7 +114,7 @@

    示例

    // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(event) { -  note.innerHTML += '<li>Transaction completed.</li>'; + note.innerHTML += '<li>Transaction completed.</li>'; }; transaction.onerror = function(event) { @@ -127,10 +127,10 @@

    示例

    // Make a request to add our newItem object to the object store var objectStoreRequest = objectStore.add(newItem[0]); -  objectStoreRequest.onsuccess = function(event) { -    // report the success of our request -    note.innerHTML += '<li>Request successful.</li>'; -  }; + objectStoreRequest.onsuccess = function(event) { + // report the success of our request + note.innerHTML += '<li>Request successful.</li>'; + }; };

    Specification

    diff --git a/files/zh-cn/web/api/idbobjectstore/autoincrement/index.html b/files/zh-cn/web/api/idbobjectstore/autoincrement/index.html index eb4e14bbf87c11..c923663a8c583a 100644 --- a/files/zh-cn/web/api/idbobjectstore/autoincrement/index.html +++ b/files/zh-cn/web/api/idbobjectstore/autoincrement/index.html @@ -38,7 +38,7 @@

    Value

    false 当前 objectStore 不会自增
    -   + @@ -54,7 +54,7 @@

    例子

    note.innerHTML += '<li>Database initialised.</li>'; // store the result of opening the database in the db variable. -  // This is used a lot below + // This is used a lot below db = DBOpenRequest.result; // Run the addData() function to add the data to the database @@ -70,7 +70,7 @@

    例子

    // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(event) { -  note.innerHTML += '<li>Transaction completed.</li>'; + note.innerHTML += '<li>Transaction completed.</li>'; }; transaction.onerror = function(event) { @@ -84,10 +84,10 @@

    例子

    // Make a request to add our newItem object to the object store var objectStoreRequest = objectStore.add(newItem[0]); -  objectStoreRequest.onsuccess = function(event) { -    // report the success of our request -    note.innerHTML += '<li>Request successful.</li>'; -  }; + objectStoreRequest.onsuccess = function(event) { + // report the success of our request + note.innerHTML += '<li>Request successful.</li>'; + }; };

    规范

    diff --git a/files/zh-cn/web/api/idbobjectstore/get/index.html b/files/zh-cn/web/api/idbobjectstore/get/index.html index 48d855d27db432..01ce49ce05f8bd 100644 --- a/files/zh-cn/web/api/idbobjectstore/get/index.html +++ b/files/zh-cn/web/api/idbobjectstore/get/index.html @@ -51,20 +51,20 @@

    异常

    DataError -

    The key or key range provided contains an invalid key.

    +

    The key or key range provided contains an invalid key.

    InvalidStateError The {{domxref("IDBObjectStore")}} has been deleted or removed.
    -   +

    例子

    -

    在以下的代码段中,我们在数据库上打开一个“读/写 事务(read/write transaction)”,并使用 get() 从“对象储存( object store )”中获取一个特定的记录——一个带有“Walk dog”键的示例记录。一旦检索到这个数据对象,你就可以使用普通的 JavaScript 更新它,然后使用 {{domxref("IDBObjectStore.put")}} 操作将其放回数据库。有关完整的工作示例,查看我们的 To-do Notifications app (view example live.)

    +

    在以下的代码段中,我们在数据库上打开一个“读/写 事务(read/write transaction)”,并使用 get() 从“对象储存( object store )”中获取一个特定的记录——一个带有“Walk dog”键的示例记录。一旦检索到这个数据对象,你就可以使用普通的 JavaScript 更新它,然后使用 {{domxref("IDBObjectStore.put")}} 操作将其放回数据库。有关完整的工作示例,查看我们的 To-do Notifications app (view example live.)

    // Let us open our database
     var DBOpenRequest = window.indexedDB.open("toDoList", 4);
    @@ -73,7 +73,7 @@ 

    例子

    note.innerHTML += '<li>Database initialised.</li>'; // store the result of opening the database in the db variable. -  // This is used a lot below + // This is used a lot below db = DBOpenRequest.result; // Run the getData() function to get the data from the database @@ -86,7 +86,7 @@

    例子

    // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(event) { -  note.innerHTML += '<li>Transaction completed.</li>'; + note.innerHTML += '<li>Transaction completed.</li>'; }; transaction.onerror = function(event) { @@ -99,12 +99,12 @@

    例子

    // Make a request to get a record by key from the object store var objectStoreRequest = objectStore.get("Walk dog"); -  objectStoreRequest.onsuccess = function(event) { -    // report the success of our request -    note.innerHTML += '<li>Request successful.</li>'; + objectStoreRequest.onsuccess = function(event) { + // report the success of our request + note.innerHTML += '<li>Request successful.</li>'; var myRecord = objectStoreRequest.result; -  }; + }; };
    diff --git a/files/zh-cn/web/api/idbobjectstore/index.html b/files/zh-cn/web/api/idbobjectstore/index.html index bd7ff5665a5990..3952e8dd04eb73 100644 --- a/files/zh-cn/web/api/idbobjectstore/index.html +++ b/files/zh-cn/web/api/idbobjectstore/index.html @@ -11,7 +11,7 @@ ---

    {{APIRef("IndexedDB")}}

    -

    IndexedDB API  的 IDBObjectStore 接口表示数据库中的 一个 对象库 (object store) 。对象库中的记录根据其键值进行排序。这种排序可以实现快速插入,查找和有序检索。

    +

    IndexedDB APIIDBObjectStore 接口表示数据库中的 一个 对象库 (object store) 。对象库中的记录根据其键值进行排序。这种排序可以实现快速插入,查找和有序检索。

    {{AvailableInWorkers}}

    @@ -25,31 +25,31 @@

    方法预览

    IDBRequest add (in any value, in optional any key) raises (DOMException); - IDBRequest clear () raises (DOMException); + IDBRequest clear () raises (DOMException); IDBRequest count (in optional any key) raises(DOMException); - IDBIndex createIndex  (in DOMString name, in DOMString keyPath, in optional boolean unique) raises (DOMException); + IDBIndex createIndex (in DOMString name, in DOMString keyPath, in optional boolean unique) raises (DOMException); - IDBRequest delete (in any key) raises (DOMException); + IDBRequest delete (in any key) raises (DOMException); - void deleteIndex (in any DOMString indexName) raises (DOMException); + void deleteIndex (in any DOMString indexName) raises (DOMException); - IDBRequest get (in any key) raises (DOMException); + IDBRequest get (in any key) raises (DOMException); - IDBIndex index (in DOMString name) raises (DOMException); + IDBIndex index (in DOMString name) raises (DOMException); IDBRequest openCursor (in optional IDBKeyRange range, in optional unsigned short direction) raises(DOMException); - IDBRequest put (in any value, in optional any key) raises (DOMException); + IDBRequest put (in any value, in optional any key) raises (DOMException); @@ -135,7 +135,7 @@
    异常
    ReadOnlyError - The transaction associated with this operation is in read-only mode. + The transaction associated with this operation is in read-only mode. TransactionInactiveError @@ -156,7 +156,7 @@
    异常
    InvalidStateError - The IDBObjectStore has been deleted or removed. + The IDBObjectStore has been deleted or removed. DataCloneError @@ -167,7 +167,7 @@
    异常

    clear()

    -

    创建并立即返回一个 IDBRequest 对象,并且在一个单独的线程中清除这个对象存储。清除对象存储包括从对象存储中删除所有的记录,并删除对象存储引用的索引中的所有记录。

    +

    创建并立即返回一个 IDBRequest 对象,并且在一个单独的线程中清除这个对象存储。清除对象存储包括从对象存储中删除所有的记录,并删除对象存储引用的索引中的所有记录。

    IDBRequest clear () raises (DOMException);
    @@ -192,7 +192,7 @@
    Exceptions
    ReadOnlyError - The transaction associated with this operation is in read-only mode. + The transaction associated with this operation is in read-only mode. TransactionInactiveError @@ -203,7 +203,7 @@
    Exceptions

    count()

    -

    立即返回一个 IDBRequest 对象,并在新线程中计算符合条件的对象的数量,该方法的参数可以是键,或键范围(key range)。在 IDBRequest 对象中,source 属性就是 IDBObjectStore 对象,result 属性持有计算后的数量值。如果参数非法将会抛出异常。

    +

    立即返回一个 IDBRequest 对象,并在新线程中计算符合条件的对象的数量,该方法的参数可以是键,或键范围(key range)。在 IDBRequest 对象中,source 属性就是 IDBObjectStore 对象,result 属性持有计算后的数量值。如果参数非法将会抛出异常。

    IDBRequest count (in optional any key) raises(DOMException);
    @@ -300,7 +300,7 @@
    Returns
    Exceptions
    -

    This method may raise a DOMException with a DOMError of the following types:

    +

    This method may raise a DOMException with a DOMError of the following types:

    @@ -312,12 +312,12 @@
    Exceptions
    - + +
    InvalidStateErrorThe IDBObjectStore has been deleted or removed or the method was not called from a versionchange transaction mode callback.The IDBObjectStore has been deleted or removed or the method was not called from a versionchange transaction mode callback.
    ConstraintError An index with the same name (case-sensitive) already exists in the database.
    -  
    @@ -347,7 +347,7 @@
    Returns
    Exceptions
    -

    This method may raise a DOMException with a DOMError of the following types:

    +

    This method may raise a DOMException with a DOMError of the following types:

    @@ -364,7 +364,7 @@
    Exceptions
    @@ -387,7 +387,7 @@
    Exceptions

    deleteIndex()

    -

    Destroys the index with the specified name in the connected database. Note that this method must be called only from a VersionChange transaction mode callback. Note that this method synchronously modifies the indexNames property.

    +

    Destroys the index with the specified name in the connected database. Note that this method must be called only from a VersionChange transaction mode callback. Note that this method synchronously modifies the indexNames property.

    void deleteIndex (in any DOMString indexName) raises (DOMException);
    @@ -402,7 +402,7 @@
    Parameters
    Exceptions
    -

    This method may raise a DOMException with a DOMError of the following types:

    +

    This method may raise a DOMException with a DOMError of the following types:

    ReadOnlyError -

    The transaction associated with this operation is in read-only mode.

    +

    The transaction associated with this operation is in read-only mode.

    @@ -414,7 +414,7 @@
    Exceptions
    - + @@ -425,7 +425,7 @@
    Exceptions

    get()

    -

    Immediately returns an IDBRequest object, and retrieves the requested record from the object store in a separate thread. If the operation is successful, then a success event is fired on the returned object, with its result set to the retrieved value, and transaction set to the transaction in which this object store is opened. 

    +

    Immediately returns an IDBRequest object, and retrieves the requested record from the object store in a separate thread. If the operation is successful, then a success event is fired on the returned object, with its result set to the retrieved value, and transaction set to the transaction in which this object store is opened.

    IDBRequest get (in any key) raises (DOMException);
    @@ -449,7 +449,7 @@
    Returns
    Exceptions
    -

    This method may raise a DOMException with a DOMError of the following types:

    +

    This method may raise a DOMException with a DOMError of the following types:

    InvalidStateErrorThe method was not called from a versionchange transaction mode callback.The method was not called from a versionchange transaction mode callback.
    NotFoundError
    @@ -471,8 +471,8 @@
    Exceptions
    - +
    InvalidStateErrorThe IDBObjectStore has been deleted or removed.
    -  
    The IDBObjectStore has been deleted or removed.
    +
    @@ -499,7 +499,7 @@
    Returns
    Exceptions
    -

    This method may raise a DOMException with a DOMError of the following types:

    +

    This method may raise a DOMException with a DOMError of the following types:

    @@ -516,7 +516,7 @@
    Exceptions
    +
    NotFoundError There is no index with the given name (case-sensitive) in the database.
    -  
    @@ -533,7 +533,7 @@
    Parameters
    range
    The key range to use as the cursor's range. If this parameter is unspecified or null, then the range includes all the records in the object store.
    direction
    -
    The cursor's direction.
    +
    The cursor's direction.
    Returns
    @@ -545,7 +545,7 @@
    Returns
    Exceptions
    -

    This method may raise a DOMException with a DOMError of the following types:

    +

    This method may raise a DOMException with a DOMError of the following types:

    @@ -567,7 +567,7 @@
    Exceptions
    - + @@ -578,7 +578,7 @@
    Exceptions

    put()

    -

    Returns an IDBRequest object, and, in a separate thread, creates a structured clone of the value, and stores the cloned value in the object store. If the record is successfully stored, then a success event is fired on the returned request object with the result set to the key for the stored record, and transaction set to the transaction in which this object store is opened.

    +

    Returns an IDBRequest object, and, in a separate thread, creates a structured clone of the value, and stores the cloned value in the object store. If the record is successfully stored, then a success event is fired on the returned request object with the result set to the key for the stored record, and transaction set to the transaction in which this object store is opened.

    The put method is an update or insert method. See also the add() method.

    @@ -602,7 +602,7 @@
    Returns
    Exceptions
    -

    This method may raise a DOMException with a DOMError of the following types:

    +

    This method may raise a DOMException with a DOMError of the following types:

    InvalidStateErrorThe IDBObjectStore has been deleted or removed.The IDBObjectStore has been deleted or removed.
    TypeError
    @@ -635,7 +635,7 @@
    Exceptions
    - + @@ -652,7 +652,7 @@

    Example

    -

    This example shows a variety of different uses of object stores, from updating the data structure with {{domxref("IDBObjectStore.createIndex")}} inside an onupgradeneededfunction, to adding a new item to our object store with {{domxref("IDBObjectStore.add")}}. For a full working example, see our To-do Notifications app (view example live.)

    +

    This example shows a variety of different uses of object stores, from updating the data structure with {{domxref("IDBObjectStore.createIndex")}} inside an onupgradeneededfunction, to adding a new item to our object store with {{domxref("IDBObjectStore.add")}}. For a full working example, see our To-do Notifications app (view example live.)

    // Let us open our database
     var DBOpenRequest = window.indexedDB.open("toDoList", 4);
    @@ -724,7 +724,7 @@ 

    Specifications

    Browser compatibility

    -

    The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-dataand send us a pull request.

    +

    The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-dataand send us a pull request.

    {{Compat}}

    @@ -737,7 +737,7 @@

    See also

  • Setting a range of keys: {{domxref("IDBKeyRange")}}
  • Retrieving and making changes to your data: {{domxref("IDBObjectStore")}}
  • Using cursors: {{domxref("IDBCursor")}}
  • -
  • Reference example: To-do Notifications (view example live.)
  • +
  • Reference example: To-do Notifications (view example live.)
  • diff --git a/files/zh-cn/web/api/idbobjectstore/indexnames/index.html b/files/zh-cn/web/api/idbobjectstore/indexnames/index.html index 7a9601cba92301..9855dbee35dcd2 100644 --- a/files/zh-cn/web/api/idbobjectstore/indexnames/index.html +++ b/files/zh-cn/web/api/idbobjectstore/indexnames/index.html @@ -6,7 +6,7 @@

    {{ APIRef("IndexedDB") }}

    -

    {{domxref("IDBObjectStore")}} 的只读属性 indexNames 返回此对象存储中对象的 indexes 名称(name)列表。

    +

    {{domxref("IDBObjectStore")}} 的只读属性 indexNames 返回此对象存储中对象的 indexes 名称(name)列表。

    {{AvailableInWorkers}}

    @@ -21,7 +21,7 @@

    Value

    Example

    -

    在下面的代码片段中,我们在数据库上打开一个读/写事务并使用 add() 向对象存储添加一些数据。创建对象存储后,我们将打印 objectStore.indexNames 到控制台。有关完整的工作示例,请参阅我们的 待办事项通知应用程序 ( 实时查看示例 )

    +

    在下面的代码片段中,我们在数据库上打开一个读/写事务并使用 add() 向对象存储添加一些数据。创建对象存储后,我们将打印 objectStore.indexNames 到控制台。有关完整的工作示例,请参阅我们的 待办事项通知应用程序 ( 实时查看示例 )

    // 让我们来打开我们的数据库
     var DBOpenRequest = window.indexedDB.open("toDoList", 4);
    @@ -30,7 +30,7 @@ 

    Example

    note.innerHTML += '<li>Database initialised.</li>'; // 将打开数据库的结果存储在 db 变量中 -  // 下面经常用到这个 + // 下面经常用到这个 db = this.result; // 运行 addData() 函数将数据添加到数据库 @@ -46,7 +46,7 @@

    Example

    // 当所有事情都完成时,报告事务完成的成功情况 transaction.oncomplete = function(event) { -  note.innerHTML += '<li>Transaction completed.</li>'; + note.innerHTML += '<li>Transaction completed.</li>'; }; @@ -86,7 +86,7 @@

    查看其它内容

  • 启动事务 : {{domxref("IDBDatabase")}}
  • 使用事务 : {{domxref("IDBTransaction")}}
  • 设置键的范围 : {{domxref("IDBKeyRange")}}
  • -
  • 检索和更改数据 : {{domxref("IDBObjectStore")}}
  • +
  • 检索和更改数据 : {{domxref("IDBObjectStore")}}
  • 使用游标 : {{domxref("IDBCursor")}}
  • 参考示例 : To-do Notifications (view example live.)
  • diff --git a/files/zh-cn/web/api/idbobjectstore/keypath/index.html b/files/zh-cn/web/api/idbobjectstore/keypath/index.html index 9b217c9c448ba6..48deb5b157a711 100644 --- a/files/zh-cn/web/api/idbobjectstore/keypath/index.html +++ b/files/zh-cn/web/api/idbobjectstore/keypath/index.html @@ -36,7 +36,7 @@

    例子

    note.innerHTML += '<li>Database initialised.</li>'; // store the result of opening the database in the db variable. -  // This is used a lot below + // This is used a lot below db = DBOpenRequest.result; // Run the addData() function to add the data to the database @@ -52,7 +52,7 @@

    例子

    // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(event) { -  note.innerHTML += '<li>Transaction completed.</li>'; + note.innerHTML += '<li>Transaction completed.</li>'; }; transaction.onerror = function(event) { @@ -66,10 +66,10 @@

    例子

    // Make a request to add our newItem object to the object store var objectStoreRequest = objectStore.add(newItem[0]); -  objectStoreRequest.onsuccess = function(event) { -    // report the success of our request -    note.innerHTML += '<li>Request successful.</li>'; -  }; + objectStoreRequest.onsuccess = function(event) { + // report the success of our request + note.innerHTML += '<li>Request successful.</li>'; + }; };

    规范

    diff --git a/files/zh-cn/web/api/idbobjectstore/opencursor/index.html b/files/zh-cn/web/api/idbobjectstore/opencursor/index.html index 8aceefe499dbbc..b53d864b97a040 100644 --- a/files/zh-cn/web/api/idbobjectstore/opencursor/index.html +++ b/files/zh-cn/web/api/idbobjectstore/opencursor/index.html @@ -6,10 +6,10 @@

    {{ APIRef("IDBObjectStore") }}

    -

    {{domxref("IDBObjectStore")}} 的 openCursor() 方法 返回一个{{domxref("IDBRequest")}} 对象,并在一个单独的线程中,返回一个新的 {{domxref("IDBCursorWithValue")}} 对象。此方法目的是用一个游标来遍历一个对象存储空间。

    +

    {{domxref("IDBObjectStore")}} 的 openCursor() 方法 返回一个{{domxref("IDBRequest")}} 对象,并在一个单独的线程中,返回一个新的 {{domxref("IDBCursorWithValue")}} 对象。此方法目的是用一个游标来遍历一个对象存储空间。

    -

    若要确认此操作是否成功完成,请监听结果的 success 事件。

    +

    若要确认此操作是否成功完成,请监听结果的 success 事件。

    {{AvailableInWorkers}}

    @@ -23,7 +23,7 @@

    参数

    query {{optional_inline}}
    要查询的键或者 {{domxref("IDBKeyRange")}} 。如果传一个有效的键,则会默认为只包含此键的范围。如果此参数不传值,则默认为一个选择了该对象存储空间全部记录的键范围。
    direction {{optional_inline}}
    -
    一个 {{domxref("IDBCursorDirection")}} 来告诉游标要移动的方向。有效的值有 "next" 、"nextunique" 、"prev" 和 "prevunique"。默认值是 "next"
    +
    一个 {{domxref("IDBCursorDirection")}} 来告诉游标要移动的方向。有效的值有 "next""nextunique""prev""prevunique"。默认值是 "next"

    返回

    @@ -76,7 +76,7 @@

    例子

    };
    -

    规范 

    +

    规范

    {{Specifications}} diff --git a/files/zh-cn/web/api/idbobjectstore/put/index.html b/files/zh-cn/web/api/idbobjectstore/put/index.html index 319e2e2667b2cd..ad36080967bef5 100644 --- a/files/zh-cn/web/api/idbobjectstore/put/index.html +++ b/files/zh-cn/web/api/idbobjectstore/put/index.html @@ -8,12 +8,12 @@

    {{domxref("IDBObjectStore")}} 接口的 put() 方法更新一条给定的数据库记录,如果给出的值不存在,则插入一个新的记录

    -

    它返回一个 {{domxref("IDBRequest")}} 对象,并且在一个单独的线程 ,创建一个值的 structured clone ,并且把它的值储存在对象仓库 (object store) 中. 当事务的模式是readwrite 时,这个方法用来添加新的记录,或者更新一条对象仓库 (object store) 中已存在的记录 . 如果记录被成功储存,then a success event is fired on the returned request object with the result set to the key for the stored record, and the transaction set to the transaction in which this object store is opened.

    +

    它返回一个 {{domxref("IDBRequest")}} 对象,并且在一个单独的线程 ,创建一个值的 structured clone ,并且把它的值储存在对象仓库 (object store) 中. 当事务的模式是readwrite 时,这个方法用来添加新的记录,或者更新一条对象仓库 (object store) 中已存在的记录 . 如果记录被成功储存,then a success event is fired on the returned request object with the result set to the key for the stored record, and the transaction set to the transaction in which this object store is opened.

    -

    put 方法是一个插入或更新对象仓库的方法。参考仅用于插入的方法 {{domxref("IDBObjectStore.add")}} 方法。

    +

    put 方法是一个插入或更新对象仓库的方法。参考仅用于插入的方法 {{domxref("IDBObjectStore.add")}} 方法。

    -

    谨记,如果你有一条 {{domxref("cursor","IDBCursor")}} 记录想要更新,使用{{domxref("IDBCursor.update()")}} 方法更新,比 {{domxref("IDBObjectStore.put()")}} 方法更合适。这样做可以清楚地表明将更新现有记录,而不是插入新记录。

    +

    谨记,如果你有一条 {{domxref("cursor","IDBCursor")}} 记录想要更新,使用{{domxref("IDBCursor.update()")}} 方法更新,比 {{domxref("IDBObjectStore.put()")}} 方法更合适。这样做可以清楚地表明将更新现有记录,而不是插入新记录。

    {{AvailableInWorkers}}

    @@ -28,12 +28,12 @@

    参数

    item
    你想要更新 (或插入) 的记录。
    key {{optional_inline}}
    -
    你想要更新记录的主键 (e.g. from {{domxref("IDBCursor.primaryKey")}}). This is only needed for object stores that have an autoIncrement primary key, therefore the key is not in a field on the record object. In such cases, calling put(item) will always insert a new record, because it doesn't know what existing record you might want to modify.
    +
    你想要更新记录的主键 (e.g. from {{domxref("IDBCursor.primaryKey")}}). This is only needed for object stores that have an autoIncrement primary key, therefore the key is not in a field on the record object. In such cases, calling put(item) will always insert a new record, because it doesn't know what existing record you might want to modify.

    返回值

    -

    一个 {{domxref("IDBRequest")}} 对象 ,在该对象上触发与此操作相关的后续事件。

    +

    一个 {{domxref("IDBRequest")}} 对象 ,在该对象上触发与此操作相关的后续事件。

    异常

    @@ -49,7 +49,7 @@

    异常

    - + @@ -75,7 +75,7 @@

    异常

    +
    InvalidStateErrorThe IDBObjectStore has been deleted or removed.The IDBObjectStore has been deleted or removed.
    DataCloneError
    ReadOnlyErrorThe transaction associated with this operation is in read-only mode.The transaction associated with this operation is in read-only mode.
    TransactionInactiveError
    DataCloneError The data being stored could not be cloned by the internal structured cloning algorithm.
    -  
    @@ -91,7 +91,7 @@

    参数

    Example

    -

    The following example requests a given record title; when that request is successful the onsuccess function gets the associated record from the {{domxref("IDBObjectStore")}} (made available as objectStoreTitleRequest.result), updates one property of the record, and then puts the updated record back into the object store in another request with put(). For a full working example, see our To-do Notifications app (view example live.)

    +

    The following example requests a given record title; when that request is successful the onsuccess function gets the associated record from the {{domxref("IDBObjectStore")}} (made available as objectStoreTitleRequest.result), updates one property of the record, and then puts the updated record back into the object store in another request with put(). For a full working example, see our To-do Notifications app (view example live.)

    var title = "Walk dog";
     
    diff --git a/files/zh-cn/web/api/idbopendbrequest/index.html b/files/zh-cn/web/api/idbopendbrequest/index.html
    index bdce13ed83681a..efcbd25bdb8d3d 100644
    --- a/files/zh-cn/web/api/idbopendbrequest/index.html
    +++ b/files/zh-cn/web/api/idbopendbrequest/index.html
    @@ -6,7 +6,7 @@
     

    {{APIRef("IndexedDB")}}

    -

    IndexedDB API 的 IDBOpenDBRequest 接口提供了访问打开或删除数据库的请求的结果(通过调用 {{domxref("IDBFactory.open")}} and {{domxref("IDBFactory.deleteDatabase")}}),途径就是使用特殊的事件处理器属性。

    +

    IndexedDB API 的 IDBOpenDBRequest 接口提供了访问打开或删除数据库的请求的结果(通过调用 {{domxref("IDBFactory.open")}} and {{domxref("IDBFactory.deleteDatabase")}}),途径就是使用特殊的事件处理器属性。

    {{AvailableInWorkers}}

    @@ -23,7 +23,7 @@

    Events

    {{domxref("IDBOpenDBRequest.onblocked")}}
    The event handler for the blocked event. This event is triggered when the upgradeneeded event should be triggered because of a version change but the database is still in use (i.e. not closed) somewhere, even after the versionchange event was sent.
    {{domxref("IDBOpenDBRequest.onupgradeneeded")}}
    -
    upgradeneeded 事件的事件处理器,会在当一个数据库的版本比已经存在的版本还高的时候触发。
    +
    upgradeneeded 事件的事件处理器,会在当一个数据库的版本比已经存在的版本还高的时候触发。

    Methods

    @@ -49,11 +49,11 @@

    Example

    note.innerHTML += '<li>Database initialised.</li>'; // store the result of opening the database in the db -  // variable. This is used a lot below + // variable. This is used a lot below db = DBOpenRequest.result; // Run the displayData() function to populate the task -  // listwith all the to-do list data already in the IDB + // listwith all the to-do list data already in the IDB displayData(); }; @@ -74,12 +74,12 @@

    Example

    // define what data items the objectStore will contain -  objectStore.createIndex("hours", "hours", { unique: false }); -  objectStore.createIndex("minutes", "minutes", { unique: false }); -  objectStore.createIndex("day", "day", { unique: false }); -  objectStore.createIndex("month", "month", { unique: false }); -  objectStore.createIndex("year", "year", { unique: false }); -  objectStore.createIndex("notified", "notified", { unique: false }); + objectStore.createIndex("hours", "hours", { unique: false }); + objectStore.createIndex("minutes", "minutes", { unique: false }); + objectStore.createIndex("day", "day", { unique: false }); + objectStore.createIndex("month", "month", { unique: false }); + objectStore.createIndex("year", "year", { unique: false }); + objectStore.createIndex("notified", "notified", { unique: false }); };

    Specifications

    diff --git a/files/zh-cn/web/api/idbrequest/index.html b/files/zh-cn/web/api/idbrequest/index.html index 5a2b13fe1b94b5..9b6178cfbf8658 100644 --- a/files/zh-cn/web/api/idbrequest/index.html +++ b/files/zh-cn/web/api/idbrequest/index.html @@ -60,25 +60,25 @@

    Attributes

    Returns the result of the request.

    -

    If the the request failed and the result is not available, the InvalidStateError exception is thrown.

    +

    If the the request failed and the result is not available, the InvalidStateError exception is thrown.

    error - readonly DOMError + readonly DOMError

    The following error codes are returned under certain conditions:

      -
    • AbortError — If you abort the transaction, then all requests still in progress receive this error.
    • -
    • ConstraintError — If you insert data that doesn't conform to a constraint. It's an exception type for creating stores and indexes. You get this error, for example, if you try to add a new key that already exists in the record.
    • -
    • QuotaExceededError — If you run out of disk quota and the user declined to grant you more space.
    • +
    • AbortError — If you abort the transaction, then all requests still in progress receive this error.
    • +
    • ConstraintError — If you insert data that doesn't conform to a constraint. It's an exception type for creating stores and indexes. You get this error, for example, if you try to add a new key that already exists in the record.
    • +
    • QuotaExceededError — If you run out of disk quota and the user declined to grant you more space.
    • UnknownError — If the operation failed for reasons unrelated to the database itself. A failure due to disk IO errors is such an example.
    • NoError — If the request succeeds.
    • -
    • VersionError — If you try to open a database with a version lower than the one it already has.
    • +
    • VersionError — If you try to open a database with a version lower than the one it already has.
    -

    In addition to the error codes sent to the IDBRequest object, asynchronous operations can also raise exceptions. The list describes problems that could occur when the request is being executed, but you might also encounter other problems when the request is being made. For example, if the the request failed and the result is not available, the InvalidStateError exception is thrown.

    +

    In addition to the error codes sent to the IDBRequest object, asynchronous operations can also raise exceptions. The list describes problems that could occur when the request is being executed, but you might also encounter other problems when the request is being made. For example, if the the request failed and the result is not available, the InvalidStateError exception is thrown.

    @@ -97,7 +97,7 @@

    Attributes

    readyState readonly enum -

    The state of the request. Every request starts in the pending state. The state changes to done when the request completes successfully or when an error occurs.

    +

    The state of the request. Every request starts in the pending state. The state changes to done when the request completes successfully or when an error occurs.

    diff --git a/files/zh-cn/web/api/idbtransaction/db/index.html b/files/zh-cn/web/api/idbtransaction/db/index.html index d4d9865c170d44..47c12e19424e57 100644 --- a/files/zh-cn/web/api/idbtransaction/db/index.html +++ b/files/zh-cn/web/api/idbtransaction/db/index.html @@ -21,7 +21,7 @@

    Example

    -

    In the following code snippet, we open a read/write transaction on our database and add some data to an object store. Note also the functions attached to transaction event handlers to report on the outcome of the transaction opening in the event of success or failure. At the end, we return the associated database connection using db. For a full working example, see our To-do Notifications app (view example live.)

    +

    In the following code snippet, we open a read/write transaction on our database and add some data to an object store. Note also the functions attached to transaction event handlers to report on the outcome of the transaction opening in the event of success or failure. At the end, we return the associated database connection using db. For a full working example, see our To-do Notifications app (view example live.)

    // Let us open our database
     var DBOpenRequest = window.indexedDB.open("toDoList", 4);
    @@ -30,7 +30,7 @@ 

    Example

    note.innerHTML += '<li>Database initialised.</li>'; // store the result of opening the database in the db variable. -  // This is used a lot below + // This is used a lot below db = DBOpenRequest.result; // Run the addData() function to add the data to the database @@ -59,11 +59,11 @@

    Example

    // add our newItem object to the object store var objectStoreRequest = objectStore.add(newItem[0]); -  objectStoreRequest.onsuccess = function(event) { -    // report the success of the request (this does not mean the item -    // has been stored successfully in the DB - for that you need transaction.onsuccess) -    note.innerHTML += '<li>Request successful.</li>'; -  }; + objectStoreRequest.onsuccess = function(event) { + // report the success of the request (this does not mean the item + // has been stored successfully in the DB - for that you need transaction.onsuccess) + note.innerHTML += '<li>Request successful.</li>'; + }; // Return the database (IDBDatabase) connection with which this transaction is associated transaction.db; diff --git a/files/zh-cn/web/api/idbtransaction/index.html b/files/zh-cn/web/api/idbtransaction/index.html index dc169ed937798e..c1eab040d12879 100644 --- a/files/zh-cn/web/api/idbtransaction/index.html +++ b/files/zh-cn/web/api/idbtransaction/index.html @@ -144,7 +144,7 @@

    模式常量

    Example

    -

    In the following code snippet, we open a read/write transaction on our database and add some data to an object store. Note also the functions attached to transaction event handlers to report on the outcome of the transaction opening in the event of success or failure. For a full working example, see our To-do Notifications app (view example live.)

    +

    In the following code snippet, we open a read/write transaction on our database and add some data to an object store. Note also the functions attached to transaction event handlers to report on the outcome of the transaction opening in the event of success or failure. For a full working example, see our To-do Notifications app (view example live.)

    // Let us open our database
     var DBOpenRequest = window.indexedDB.open("toDoList", 4);
    diff --git a/files/zh-cn/web/api/idledeadline/index.html b/files/zh-cn/web/api/idledeadline/index.html
    index 8eb570702df2b9..76f5992af85b66 100644
    --- a/files/zh-cn/web/api/idledeadline/index.html
    +++ b/files/zh-cn/web/api/idledeadline/index.html
    @@ -6,7 +6,7 @@
     
    {{APIRef("Background Tasks")}}
    -

    IdleDeadline interface 在 {{domxref("Window.requestIdleCallback()")}}被调用的时候做为一个IdleDeadline interface 类型的参数传递给 requestIdleCallback 方法的回调函数。它提供了一个方法,可以让你判断用户代理 (浏览器) 还剩余多少闲置时间可以用来执行耗时任务{{domxref("..timeRemaining", "timeRemaining()")}},{{domxref("IdleDeadline.didTimeout", "didTimeout")}}, didTimeout 属性用来判断当前的回调函数是否被执行因为回调函数存在过期时间 (requestIdleCallback 的第二个参数用来指定执行超时时间,即回调函数在规定的时间内是否被执行,如果没有执行 didTimeout 属性将为 ture,如果任务是急需完成的此时应该忽略剩余时间逻辑上强制执行回调函数)。

    +

    IdleDeadline interface 在 {{domxref("Window.requestIdleCallback()")}}被调用的时候做为一个IdleDeadline interface 类型的参数传递给 requestIdleCallback 方法的回调函数。它提供了一个方法,可以让你判断用户代理 (浏览器) 还剩余多少闲置时间可以用来执行耗时任务{{domxref("..timeRemaining", "timeRemaining()")}},{{domxref("IdleDeadline.didTimeout", "didTimeout")}}, didTimeout 属性用来判断当前的回调函数是否被执行因为回调函数存在过期时间 (requestIdleCallback 的第二个参数用来指定执行超时时间,即回调函数在规定的时间内是否被执行,如果没有执行 didTimeout 属性将为 ture,如果任务是急需完成的此时应该忽略剩余时间逻辑上强制执行回调函数)。

    学习更多的 request callbacks 工作原理请参考Collaborative Scheduling of Background Tasks.

    @@ -22,7 +22,7 @@

    Methods

    {{domxref("IdleDeadline.timeRemaining()")}}
    -
    返回一个时间{{domxref("DOMHighResTimeStamp")}}, 并且是浮点类型的数值,它用来表示当前闲置周期的预估剩余毫秒数。如果 idle period 已经结束,则它的值是 0。你的回调函数 (传给 requestIdleCallback 的函数) 可以重复的访问这个属性用来判断当前线程的闲置时间是否可以在结束前执行更多的任务。
    +
    返回一个时间{{domxref("DOMHighResTimeStamp")}}, 并且是浮点类型的数值,它用来表示当前闲置周期的预估剩余毫秒数。如果 idle period 已经结束,则它的值是 0。你的回调函数 (传给 requestIdleCallback 的函数) 可以重复的访问这个属性用来判断当前线程的闲置时间是否可以在结束前执行更多的任务。
    @@ -30,7 +30,7 @@

    Methods

    Example

    -

    实例complete example (在 Cooperative Scheduling of Background Tasks API.文章内)

    +

    实例complete example (在 Cooperative Scheduling of Background Tasks API.文章内)

    Specifications

    diff --git a/files/zh-cn/web/api/imagebitmap/height/index.html b/files/zh-cn/web/api/imagebitmap/height/index.html index 5a2969c4bc2d64..c39abc3b7b7227 100644 --- a/files/zh-cn/web/api/imagebitmap/height/index.html +++ b/files/zh-cn/web/api/imagebitmap/height/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef("Canvas API")}}
    -

    只读属性 ImageBitmap.height 返回 {{domxref("ImageBitmap")}} 对象的 CSS 像素高度。

    +

    只读属性 ImageBitmap.height 返回 {{domxref("ImageBitmap")}} 对象的 CSS 像素高度。

    规范

    diff --git a/files/zh-cn/web/api/imagebitmap/width/index.html b/files/zh-cn/web/api/imagebitmap/width/index.html index fdee6cac8866b8..4e1241bebae6b8 100644 --- a/files/zh-cn/web/api/imagebitmap/width/index.html +++ b/files/zh-cn/web/api/imagebitmap/width/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef("Canvas API")}}
    -

    只读属性 ImageBitmap.width 返回 {{domxref("ImageBitmap")}} 对象的 CSS 像素宽度。

    +

    只读属性 ImageBitmap.width 返回 {{domxref("ImageBitmap")}} 对象的 CSS 像素宽度。

    规范

    diff --git a/files/zh-cn/web/api/imagebitmaprenderingcontext/index.html b/files/zh-cn/web/api/imagebitmaprenderingcontext/index.html index 7f80de054794b9..e396c39c79917f 100644 --- a/files/zh-cn/web/api/imagebitmaprenderingcontext/index.html +++ b/files/zh-cn/web/api/imagebitmaprenderingcontext/index.html @@ -12,9 +12,9 @@ ---
    {{APIRef("Canvas API")}} {{SeeCompatTable}}
    -

    ImageBitmapRenderingContext 接口是 canvas 的渲染上下文,它只提供了使用给定 {{domxref("ImageBitmap")}} 替换 canvas 的功能。它的上下文 ID ({{domxref("HTMLCanvasElement.getContext()")}} 或 {{domxref("OffscreenCanvas.getContext()")}} 的第一个参数)  是 "bitmaprenderer"。

    +

    ImageBitmapRenderingContext 接口是 canvas 的渲染上下文,它只提供了使用给定 {{domxref("ImageBitmap")}} 替换 canvas 的功能。它的上下文 ID ({{domxref("HTMLCanvasElement.getContext()")}} 或 {{domxref("OffscreenCanvas.getContext()")}} 的第一个参数) 是 "bitmaprenderer"。

    -

    这个接口可用于 window context 和 worker context.

    +

    这个接口可用于 window context 和 worker context.

    方法

    diff --git a/files/zh-cn/web/api/imagedata/data/index.html b/files/zh-cn/web/api/imagedata/data/index.html index ca562b21861fe2..c49057ff3cd135 100644 --- a/files/zh-cn/web/api/imagedata/data/index.html +++ b/files/zh-cn/web/api/imagedata/data/index.html @@ -5,7 +5,7 @@ ---

    {{APIRef("Canvas API")}}

    -

    只读的 ImageData.data 属性,返回 {{jsxref("Uint8ClampedArray")}} ,描述一个一维数组,包含以 RGBA 顺序的数据,数据使用  0 至 255(包含)的整数表示。 

    +

    只读的 ImageData.data 属性,返回 {{jsxref("Uint8ClampedArray")}} ,描述一个一维数组,包含以 RGBA 顺序的数据,数据使用 0255(包含)的整数表示。

    语法

    diff --git a/files/zh-cn/web/api/imagedata/height/index.html b/files/zh-cn/web/api/imagedata/height/index.html index 210d0397b5b5c4..5f61e0223a404b 100644 --- a/files/zh-cn/web/api/imagedata/height/index.html +++ b/files/zh-cn/web/api/imagedata/height/index.html @@ -5,7 +5,7 @@ ---

    {{APIRef("Canvas API")}}

    -

    只读的 ImageData.height 属性,返回在图像数据对象中的行的数量。

    +

    只读的 ImageData.height 属性,返回在图像数据对象中的行的数量。

    语法

    diff --git a/files/zh-cn/web/api/imagedata/imagedata/index.html b/files/zh-cn/web/api/imagedata/imagedata/index.html index ea3106c4ad662d..4d9467a83a15f8 100644 --- a/files/zh-cn/web/api/imagedata/imagedata/index.html +++ b/files/zh-cn/web/api/imagedata/imagedata/index.html @@ -5,7 +5,7 @@ ---

    {{APIRef("Canvas API")}}

    -

    ImageData() 构造函数返回一个新的实例化的 ImageData 对象,  此对象由给定的类型化数组和指定的宽度与高度组成。

    +

    ImageData() 构造函数返回一个新的实例化的 ImageData 对象, 此对象由给定的类型化数组和指定的宽度与高度组成。

    这个构造器是创建像这种对象首选的方式。

    @@ -22,8 +22,8 @@

    参数

    包含图像隐藏像素的 {{jsxref("Uint8ClampedArray")}} 数组。如果数组没有给定,指定大小的黑色矩形图像将会被创建。
    width
    无符号长整型(unsigned long)数值,描述图像的宽度。
    -
     height
    -
          无符号长整型(unsigned long)数值,描述图像的高度。
    +
    height
    +
    无符号长整型(unsigned long)数值,描述图像的高度。
    如果已给定数组,这个值是可选的:它将通过它的大小和给定的宽度进行推断。
    diff --git a/files/zh-cn/web/api/imagedata/index.html b/files/zh-cn/web/api/imagedata/index.html index afa49f8c2437cc..5e81fad3df6a73 100644 --- a/files/zh-cn/web/api/imagedata/index.html +++ b/files/zh-cn/web/api/imagedata/index.html @@ -5,25 +5,25 @@ ---
    {{APIRef("Canvas API")}}
    -

    ImageData 接口描述 {{HTMLElement("canvas")}} 元素的一个隐含像素数据的区域。使用 {{domxref("ImageData.ImageData", "ImageData()")}} 构造函数创建或者使用和 canvas 在一起的 {{domxref("CanvasRenderingContext2D")}} 对象的创建方法: {{domxref("CanvasRenderingContext2D.createImageData", "createImageData()")}} 和 {{domxref("CanvasRenderingContext2D.getImageData", "getImageData()")}}。也可以使用 {{domxref("CanvasRenderingContext2D.putImageData", "putImageData()")}} 设置 canvas 的一部分。

    +

    ImageData 接口描述 {{HTMLElement("canvas")}} 元素的一个隐含像素数据的区域。使用 {{domxref("ImageData.ImageData", "ImageData()")}} 构造函数创建或者使用和 canvas 在一起的 {{domxref("CanvasRenderingContext2D")}} 对象的创建方法: {{domxref("CanvasRenderingContext2D.createImageData", "createImageData()")}} 和 {{domxref("CanvasRenderingContext2D.getImageData", "getImageData()")}}。也可以使用 {{domxref("CanvasRenderingContext2D.putImageData", "putImageData()")}} 设置 canvas 的一部分。

    构造函数

    {{domxref("ImageData.ImageData", "ImageData()")}} {{experimental_inline}}
    三个参数,第一个 是{{jsxref("Uint8ClampedArray")}}的实例,第二个和第三个表示的是 width 和 height,必须保证 Uint8ClampedArray 的 length = 4*width*height 才不会报错,如果第一个参数 Uint8ClampedArray 没有的话,自动按照 width 和 height 的大小,以 0 填充整个像素矩阵。
    -
    使用给定的{{jsxref("Uint8ClampedArray")}}创建一个 ImageData 对象,并包含图像的大小。如果不给定数组,会创建一个“完全透明”(因为透明度值为 0) 的黑色矩形图像。注意,这是最常见的方式去创建这样一个对象,在 {{domxref("CanvasRenderingContext2D.createImageData", "createImageData()")}} 不可用时。
    +
    使用给定的{{jsxref("Uint8ClampedArray")}}创建一个 ImageData 对象,并包含图像的大小。如果不给定数组,会创建一个“完全透明”(因为透明度值为 0) 的黑色矩形图像。注意,这是最常见的方式去创建这样一个对象,在 {{domxref("CanvasRenderingContext2D.createImageData", "createImageData()")}} 不可用时。

    属性

    {{domxref("ImageData.data")}} {{readonlyInline}}
    -
    {{jsxref("Uint8ClampedArray")}} 描述了一个一维数组,包含以 RGBA 顺序的数据,数据使用  0 至 255(包含)的整数表示。 
    +
    {{jsxref("Uint8ClampedArray")}} 描述了一个一维数组,包含以 RGBA 顺序的数据,数据使用 0255(包含)的整数表示。
    {{domxref("ImageData.height")}} {{readonlyInline}}
    -
    无符号长整型(unsigned long),使用像素描述 ImageData 的实际高度。
    +
    无符号长整型(unsigned long),使用像素描述 ImageData 的实际高度。
    {{domxref("ImageData.width")}} {{readonlyInline}}
    -
    无符号长整型(unsigned long),使用像素描述 ImageData 的实际宽度。
    +
    无符号长整型(unsigned long),使用像素描述 ImageData 的实际宽度。

    规范

    @@ -38,5 +38,5 @@

    参见

    • {{domxref("CanvasRenderingContext2D")}}
    • -
    • {{HTMLElement("canvas")}} 元素及其相关的接口 {{domxref("HTMLCanvasElement")}}。
    • +
    • {{HTMLElement("canvas")}} 元素及其相关的接口 {{domxref("HTMLCanvasElement")}}。
    diff --git a/files/zh-cn/web/api/imagedata/width/index.html b/files/zh-cn/web/api/imagedata/width/index.html index 1129fd8f7c0f42..b7c23631deba58 100644 --- a/files/zh-cn/web/api/imagedata/width/index.html +++ b/files/zh-cn/web/api/imagedata/width/index.html @@ -5,7 +5,7 @@ ---

    {{APIRef("Canvas API")}}

    -

    只读的 ImageData.width 属性,返回在图像数据对象中每一行像素的数量。

    +

    只读的 ImageData.width 属性,返回在图像数据对象中每一行像素的数量。

    语法

    diff --git a/files/zh-cn/web/api/indexeddb/index.html b/files/zh-cn/web/api/indexeddb/index.html index 4160aa36a6e00f..b3ab4ce1fc64d5 100644 --- a/files/zh-cn/web/api/indexeddb/index.html +++ b/files/zh-cn/web/api/indexeddb/index.html @@ -14,7 +14,7 @@ ---

    {{ APIRef() }}

    -

    indexedDB 是 WindowOrWorkerGlobalScope 的一个只读属性,它集成了为应用程序提供异步访问索引数据库的功能的机制。.

    +

    indexedDBWindowOrWorkerGlobalScope 的一个只读属性,它集成了为应用程序提供异步访问索引数据库的功能的机制。.

    语法

    diff --git a/files/zh-cn/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.html b/files/zh-cn/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.html index 8a15b3ec825dda..3caf9d09ce7dbc 100644 --- a/files/zh-cn/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.html +++ b/files/zh-cn/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.html @@ -49,7 +49,7 @@

    数据存储的不同类型

    一般来说,数据存储的的类型主要有以下两种:

      -
    • 持久化存储:这种数据是希望长久保留的,只有的当用户选择清除才会被删除掉(比如,在 Firefox 中,您可以通过转到“首选项”并使用“ 隐私和安全”>“Cookie 和站点数据”下的选项,选择删除所有存储的数据或仅删除所选来源的存储数据)。
    • +
    • 持久化存储:这种数据是希望长久保留的,只有的当用户选择清除才会被删除掉(比如,在 Firefox 中,您可以通过转到“首选项”并使用“ 隐私和安全”>“Cookie 和站点数据”下的选项,选择删除所有存储的数据或仅删除所选来源的存储数据)。
    • 临时存储:这种数据不用保存很久,当最近一次使用时储存限制达到限制大小就会被自动清理掉(LRU 策略)。
    @@ -62,10 +62,10 @@

    数据存储在哪里?

    每种存储类型代表一个单独的存储库。这是用户 Firefox 配置文件下目录的实际映射(其他浏览器可能略有不同):

      -
    • <profile>/storage — 配额管理器维护的主要顶级目录(见下文)
    • -
    • <profile>/storage/permanent — 持久数据存储库
    • -
    • <profile>/storage/temporary —临时数据存储库
    • -
    • <profile>/storage/default — 默认数据存储库
    • +
    • <profile>/storage — 配额管理器维护的主要顶级目录(见下文)
    • +
    • <profile>/storage/permanent — 持久数据存储库
    • +
    • <profile>/storage/temporary —临时数据存储库
    • +
    • <profile>/storage/default — 默认数据存储库
    @@ -73,7 +73,7 @@

    数据存储在哪里?

    -

    注意:在 Firefox 中,可以通过about:support在 URL 栏中输入,然后按“ 配置文件夹”标题旁边的“在...中显示...”按钮(例如,在 Mac OS X 上的“在 Finder 中显示”)来查找您的配置文件文件夹

    +

    注意:在 Firefox 中,可以通过about:support在 URL 栏中输入,然后按“ 配置文件夹”标题旁边的“在...中显示...”按钮(例如,在 Mac OS X 上的“在 Finder 中显示”)来查找您的配置文件文件夹

    @@ -94,7 +94,7 @@

    储存限制

  • mozilla.org——组 1,源 1
  • www.mozilla.org——组 1,源 2
  • joe.blogs.mozilla.org——组 1,源 3
  • -
  • firefox.com ——组 2,源 4
  • +
  • firefox.com ——组 2,源 4
  • 在这个组中,mozilla.orgwww.mozilla.orgjoe.blogs.mozilla.org可以聚合使用最多 20%的全局限制。 firefox.com 单独最多使用 20%。

    @@ -127,6 +127,6 @@

    LRU 策略

    参见

    diff --git a/files/zh-cn/web/api/indexeddb_api/checking_when_a_deadline_is_due/index.html b/files/zh-cn/web/api/indexeddb_api/checking_when_a_deadline_is_due/index.html index 96f8a21b65a696..992241667783c6 100644 --- a/files/zh-cn/web/api/indexeddb_api/checking_when_a_deadline_is_due/index.html +++ b/files/zh-cn/web/api/indexeddb_api/checking_when_a_deadline_is_due/index.html @@ -29,7 +29,7 @@

    Recording the date information

  • {{HTMLElement("select")}} 是用于输入截止日期的日期,月份和年份的元素。因为这些值对于用户来说是最模糊的(7,星期日,太阳?04,4,4 月,4 月?2013,'13,13?),我认为最好的解决方案是给他们一个选择,这也为移动用户节省了恼人的打字。日期记录为月份的数字天数,月份记录为完整月份名称,年份记录为完整的四位数年份数字
  • -

    当我们点击 submit 按钮是,将会运行函数 addData() , 示例:

    +

    当我们点击 submit 按钮是,将会运行函数 addData() , 示例:

    function addData(e) {
       e.preventDefault();
    @@ -146,7 +146,7 @@ 

    Checking whether a deadlin alert('Incorrect month entered in database.'); }

    -

    我们要做的第一件事是将我们存储在数据库中的月份名称转换为 JavaScript 将理解的月份号码。如前所述,JavaScript Date 对象将月份值创建为 0 到 11 之间的数字。   

    +

    我们要做的第一件事是将我们存储在数据库中的月份名称转换为 JavaScript 将理解的月份号码。如前所述,JavaScript Date 对象将月份值创建为 0 到 11 之间的数字。

          if(+(cursor.value.hours) == hourCheck &&
              +(cursor.value.minutes) == minuteCheck &&
    diff --git a/files/zh-cn/web/api/indexeddb_api/index.html b/files/zh-cn/web/api/indexeddb_api/index.html
    index b8b75d23979636..58274510c80fd6 100644
    --- a/files/zh-cn/web/api/indexeddb_api/index.html
    +++ b/files/zh-cn/web/api/indexeddb_api/index.html
    @@ -11,12 +11,12 @@
     ---
     

    {{DefaultAPISidebar("IndexedDB")}}

    -

    IndexedDB 是一种底层 API,用于在客户端存储大量的结构化数据(也包括文件/二进制大型对象(blobs))。该 API 使用索引实现对数据的高性能搜索。虽然 Web Storage 在存储较少量的数据很有用,但对于存储更大量的结构化数据来说力不从心。而 IndexedDB 提供了这种场景的解决方案。本页面 MDN IndexedDB 的主要引导页 - 这里,我们提供了完整的 API 参考和使用指南,浏览器支持细节,以及关键概念的一些解释的链接。

    +

    IndexedDB 是一种底层 API,用于在客户端存储大量的结构化数据(也包括文件/二进制大型对象(blobs))。该 API 使用索引实现对数据的高性能搜索。虽然 Web Storage 在存储较少量的数据很有用,但对于存储更大量的结构化数据来说力不从心。而 IndexedDB 提供了这种场景的解决方案。本页面 MDN IndexedDB 的主要引导页 - 这里,我们提供了完整的 API 参考和使用指南,浏览器支持细节,以及关键概念的一些解释的链接。

    {{AvailableInWorkers}}

    -

    注意:IndexedDB API 是强大的,但对于简单的情况可能看起来太复杂。如果你更喜欢一个简单的 API,请尝试  localForagedexie.jsPouchDBidbidb-keyvalJsStore 或者 lovefield  之类的库,这些库使 IndexedDB 对开发者来说更加友好。

    +

    注意:IndexedDB API 是强大的,但对于简单的情况可能看起来太复杂。如果你更喜欢一个简单的 API,请尝试 localForagedexie.jsPouchDBidbidb-keyvalJsStore 或者 lovefield 之类的库,这些库使 IndexedDB 对开发者来说更加友好。

    关键概念和用法

    @@ -24,9 +24,9 @@

    关键概念和用法

    IndexedDB 是一个事务型数据库系统,类似于基于 SQL 的 RDBMS。 然而,不像 RDBMS 使用固定列表,IndexedDB 是一个基于 JavaScript 的面向对象数据库。IndexedDB 允许您存储和检索用索引的对象;可以存储结构化克隆算法支持的任何对象。您只需要指定数据库模式,打开与数据库的连接,然后检索和更新一系列事务

    @@ -35,7 +35,7 @@

    关键概念和用法

    同步和异步(Synchronous、asynchronous)

    -

    使用 IndexedDB 执行的操作是异步执行的,以免阻塞应用程序。IndexedDB 最初包括同步和异步 API。同步 API 仅用于 Web Workers,且已从规范中移除,因为尚不清晰是否需要。但如果 Web 开发人员有足够的需求,可以重新引入同步 API。

    +

    使用 IndexedDB 执行的操作是异步执行的,以免阻塞应用程序。IndexedDB 最初包括同步和异步 API。同步 API 仅用于 Web Workers,且已从规范中移除,因为尚不清晰是否需要。但如果 Web 开发人员有足够的需求,可以重新引入同步 API。

    储存限制和回收标准

    @@ -43,7 +43,7 @@

    储存限制和回收标准

    接口

    -

    为了获取数据库的访问权限,需要在 window 对象的 indexedDB 属性上调用 open() 方法。该方法返回一个 {{domxref("IDBRequest")}} 对象;异步操作通过在 {{domxref("IDBRequest")}} 对象上触发事件来和调用程序进行通信。

    +

    为了获取数据库的访问权限,需要在 window 对象的 indexedDB 属性上调用 open() 方法。该方法返回一个 {{domxref("IDBRequest")}} 对象;异步操作通过在 {{domxref("IDBRequest")}} 对象上触发事件来和调用程序进行通信。

    连接数据库

    @@ -66,7 +66,7 @@

    接收和修改数据

    {{domxref("IDBObjectStore")}}
    表示允许访问通过主键查找的 IndexedDB 数据库中的一组数据的对象存储区。
    {{domxref("IDBIndex")}}
    -
    也是为了允许访问 IndexedDB 数据库中的数据子集,但使用索引来检索记录而不是主键。这有时比使用 IDBObjectStore 更快。
    +
    也是为了允许访问 IndexedDB 数据库中的数据子集,但使用索引来检索记录而不是主键。这有时比使用 IDBObjectStore 更快。
    {{domxref("IDBCursor")}}
    迭代对象存储和索引。
    {{domxref("IDBCursorWithValue")}}
    @@ -74,14 +74,14 @@

    接收和修改数据

    {{domxref("IDBKeyRange")}}
    定义可用于从特定范围内的数据库检索数据的键范围。
    {{domxref("IDBLocaleAwareKeyRange")}} {{Non-standard_inline}}
    -
    定义一个键范围,可用于从特定范围内的数据库中检索数据,并根据为特定索引指定的语言环境的规则进行排序(详见 createIndex() 的参数)。这个接口不再是 2.0 规范的一部分。
    +
    定义一个键范围,可用于从特定范围内的数据库中检索数据,并根据为特定索引指定的语言环境的规则进行排序(详见 createIndex() 的参数)。这个接口不再是 2.0 规范的一部分。

    自定义事件接口

    此规范使用以下自定义接口触发事件:

    {{domxref("IDBVersionChangeEvent")}}
    -
    作为 {{domxref("IDBOpenDBRequest.onupgradeneeded")}} 事件的处理程序的结果,IDBVersionChangeEvent 接口表示数据库的版本已经发生了改变。
    +
    作为 {{domxref("IDBOpenDBRequest.onupgradeneeded")}} 事件的处理程序的结果,IDBVersionChangeEvent 接口表示数据库的版本已经发生了改变。

    过时的接口

    @@ -110,8 +110,8 @@

    过时的接口

    示例

    @@ -142,14 +142,14 @@

    规范

    参见

      -
    • localForage:一个简单的 Polyfill,提供了简单的客户端数据存储的值语法。它在后台使用 IndexedDB,并在不支持 IndexedDB 的浏览器中回退到   WebSQL 或 localStorage。
    • +
    • localForage:一个简单的 Polyfill,提供了简单的客户端数据存储的值语法。它在后台使用 IndexedDB,并在不支持 IndexedDB 的浏览器中回退到 WebSQL 或 localStorage。
    • Dexie.js:IndexedDB 的包装,通过简单的语法,可以更快地进行代码开发。
    • ZangoDB:类似 MongoDB 的 IndexedDB 接口,支持 MongoDB 的大多数熟悉的过滤、投影、排序、更新和聚合功能。
    • JsStore:一个带有 SQL 语法的 IndexedDB 包装器。
    • MiniMongo:由 localstorage 支持的客户端内存中的 mongodb,通过 http 进行服务器同步。MeteorJS 使用 MiniMongo。
    • PouchDB:使用 IndexedDB 在浏览器中实现 CouchDB 的客户端。
    • -
    • idb:一个微小的(〜1.15k)库,大多 API 与 IndexedDB 类似,但做了一些小的改进,让数据库的可用性得到了大大的提升。
    • +
    • idb:一个微小的(〜1.15k)库,大多 API 与 IndexedDB 类似,但做了一些小的改进,让数据库的可用性得到了大大的提升。
    • idb-keyval:使用 IndexedDB 实现的超级简单且小巧的(~600B)基于 Promise 的键值对存储。
    • -
    • sifrr-storage:一个非常小的(~2kB)基于 Promise 的客户端键值数据库。基于 IndexedDB、localStorage、WebSQL 和 Cookies 实现。它可以自动选择上述支持的数据库,并按照优先顺序使用。
    • +
    • sifrr-storage:一个非常小的(~2kB)基于 Promise 的客户端键值数据库。基于 IndexedDB、localStorage、WebSQL 和 Cookies 实现。它可以自动选择上述支持的数据库,并按照优先顺序使用。
    • lovefield:Lovefield 是一个用于 Web App 的关系型数据库,使用 JavaScript 编写,可以在不同的浏览器环境中运行,提供了类似 SQL 的 API,速度快、安全且易用。
    diff --git a/files/zh-cn/web/api/indexeddb_api/using_indexeddb/index.html b/files/zh-cn/web/api/indexeddb_api/using_indexeddb/index.html index dfa95eae2eaaf5..ebe868e665605a 100644 --- a/files/zh-cn/web/api/indexeddb_api/using_indexeddb/index.html +++ b/files/zh-cn/web/api/indexeddb_api/using_indexeddb/index.html @@ -39,7 +39,7 @@

    生成和构建一个对象存

    使用实验版本的 IndexedDB

    -

    如果你希望在仍旧使用前缀的浏览器中测试你的代码,可以使用下列代码:  

    +

    如果你希望在仍旧使用前缀的浏览器中测试你的代码,可以使用下列代码:

    // In the following line, you should include the prefixes of implementations you want to test.
     window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
    @@ -66,7 +66,7 @@ 

    打开数据库

    看到了吗? 打开数据库就像任何其他操作一样 — 你必须进行 "request"。

    -

    open 请求不会立即打开数据库或者开始一个事务。 对 open() 函数的调用会返回一个我们可以作为事件来处理的包含 result(成功的话)或者错误值的 IDBOpenDBRequest 对象。在 IndexedDB 中的大部分异步方法做的都是同样的事情 - 返回一个包含 result 或错误的 IDBRequest 对象。open 函数的结果是一个 IDBDatabase 对象的实例。

    +

    open 请求不会立即打开数据库或者开始一个事务。 对 open() 函数的调用会返回一个我们可以作为事件来处理的包含 result(成功的话)或者错误值的 IDBOpenDBRequest 对象。在 IndexedDB 中的大部分异步方法做的都是同样的事情 - 返回一个包含 result 或错误的 IDBRequest 对象。open 函数的结果是一个 IDBDatabase 对象的实例。

    该 open 方法接受第二个参数,就是数据库的版本号。数据库的版本决定了数据库架构,即数据库的对象仓库(object store)和他的结构。如果数据库不存在,open 操作会创建该数据库,然后 onupgradeneeded 事件被触发,你需要在该事件的处理函数中创建数据库模式。如果数据库已经存在,但你指定了一个更高的数据库版本,会直接触发 onupgradeneeded 事件,允许你在处理函数中更新数据库模式。我们在后面的更新数据库的版本号和 {{ domxref("IDBFactory.open") }} 中会提到更多有关这方面的内容。

    @@ -86,9 +86,9 @@

    生成处理函数

    // Do something with request.result! };
    -

    onsuccess() 和 onerror() 这两个函数哪个被调用呢?如果一切顺利的话,一个 success 事件(即一个 type 属性被设置成 "success" 的 DOM 事件)会被触发,request 会作为它的 target。 一旦它被触发的话,相关 requestonsuccess() 处理函数就会被触发,使用 success 事件作为它的参数。 否则,如果不是所有事情都成功的话,一个 error 事件(即 type 属性被设置成 "error" 的 DOM 事件)会在 request 上被触发。这将会触发使用 error 事件作为参数的 onerror() 方法。

    +

    onsuccess()onerror() 这两个函数哪个被调用呢?如果一切顺利的话,一个 success 事件(即一个 type 属性被设置成 "success" 的 DOM 事件)会被触发,request 会作为它的 target。 一旦它被触发的话,相关 requestonsuccess() 处理函数就会被触发,使用 success 事件作为它的参数。 否则,如果不是所有事情都成功的话,一个 error 事件(即 type 属性被设置成 "error" 的 DOM 事件)会在 request 上被触发。这将会触发使用 error 事件作为参数的 onerror() 方法。

    -

    IndexedDB 的 API 被设计来尽可能地减少对错误处理的需求,所以你可能不会看到有很多的错误事件(起码,不会在你已经习惯了这些 API 之后!)。然而在打开数据库的情况下,还是有一些会产生错误事件的常见情况。最有可能出现的问题是用户决定不允许你的 web app 访问以创建一个数据库。IndexedDB 的主要设计目标之一就是允许大量数据可以被存储以供离线使用。(要了解关于针对每个浏览器你可以有多少存储空间的更多内容,请参见 存储限制)。  

    +

    IndexedDB 的 API 被设计来尽可能地减少对错误处理的需求,所以你可能不会看到有很多的错误事件(起码,不会在你已经习惯了这些 API 之后!)。然而在打开数据库的情况下,还是有一些会产生错误事件的常见情况。最有可能出现的问题是用户决定不允许你的 web app 访问以创建一个数据库。IndexedDB 的主要设计目标之一就是允许大量数据可以被存储以供离线使用。(要了解关于针对每个浏览器你可以有多少存储空间的更多内容,请参见 存储限制)。

    显然,浏览器不希望允许某些广告网络或恶意网站来污染你的计算机,所以浏览器会在任意给定的 web app 首次尝试打开一个 IndexedDB 存储时对用户进行提醒。用户可以选择允许访问或者拒绝访问。还有,IndexedDB 在浏览器的隐私模式(Firefox 的 Private Browsing 模式和 Chrome 的 Incognito 模式)下是被完全禁止的。 隐私浏览的全部要点在于不留下任何足迹,所以在这种模式下打开数据库的尝试就失败了。

    @@ -121,7 +121,7 @@

    创建和更新数据库版本号

    当你创建一个新的数据库或者增加已存在的数据库的版本号(当打开数据库时,指定一个比之前更大的版本号), onupgradeneeded 事件会被触发,IDBVersionChangeEvent 对象会作为参数传递给绑定在 request.result(例如例子中的 db)上的 onversionchange 事件处理函数,你应该在此创建该版本需要的对象仓库(object store)。

    -

    要更新数据库的 schema,也就是创建或者删除对象存储空间,需要实现 onupgradeneeded 处理程序,这个处理程序将会作为一个允许你处理对象存储空间的 versionchange 事务的一部分被调用。

    +

    要更新数据库的 schema,也就是创建或者删除对象存储空间,需要实现 onupgradeneeded 处理程序,这个处理程序将会作为一个允许你处理对象存储空间的 versionchange 事务的一部分被调用。

    // 该事件仅在较新的浏览器中实现了
     request.onupgradeneeded = function(event) {
    @@ -138,13 +138,13 @@ 

    创建和更新数据库版本号

    如果 onupgradeneeded 事件成功执行完成,打开数据库请求的 onsuccess 处理函数会被触发。

    -

    WebKit/Blink 支持当前版本的规范,同时 Chrome 23+ 、Opera 17+ 以及 IE 10+ 同样支持。其他和更旧的实现没有实现当前版本的规范,因此还不支持 indexedDB.open(name, version).onupgradeneeded 签名。有关如何在较旧 Webkit/Blink 上升级数据库版本的更多信息,请参见 IDBDatabase 参考文档

    +

    WebKit/Blink 支持当前版本的规范,同时 Chrome 23+ 、Opera 17+ 以及 IE 10+ 同样支持。其他和更旧的实现没有实现当前版本的规范,因此还不支持 indexedDB.open(name, version).onupgradeneeded 签名。有关如何在较旧 Webkit/Blink 上升级数据库版本的更多信息,请参见 IDBDatabase 参考文档

    构建数据库

    现在来构建数据库。IndexedDB 使用对象存仓库而不是表,并且一个单独的数据库可以包含任意数量的对象存储空间。每当一个值被存储进一个对象存储空间时,它会被和一个键相关联。键的提供可以有几种不同的方法,这取决于对象存储空间是使用 key path 还是 key generator

    -

    下面的表格显示了几种不同的提供键的方法。 

    +

    下面的表格显示了几种不同的提供键的方法。

    @@ -233,15 +233,15 @@

    构建数据库

    正如前面提到的,onupgradeneeded 是我们唯一可以修改数据库结构的地方。在这里面,我们可以创建和删除对象存储空间以及构建和删除索引。

    -

    对象仓库仅调用 createObjectStore() 就可以创建。这个方法使用仓库的名称,和一个参数对象。即便这个参数对象是可选的,它还是非常重要的,因为它可以让你定义重要的可选属性,并完善你希望创建的对象存储空间的类型。在我们的示例中,我们创建了一个名为“customers” 的对象仓库并且定义了一个使得每个仓库中每个对象都独一无二的 keyPath 。在这个示例中的属性是 “ssn”,因为社会安全号码被确保是唯一的。被存储在该仓库中的所有对象都必须存在“ssn”。

    +

    对象仓库仅调用 createObjectStore() 就可以创建。这个方法使用仓库的名称,和一个参数对象。即便这个参数对象是可选的,它还是非常重要的,因为它可以让你定义重要的可选属性,并完善你希望创建的对象存储空间的类型。在我们的示例中,我们创建了一个名为“customers” 的对象仓库并且定义了一个使得每个仓库中每个对象都独一无二的 keyPath 。在这个示例中的属性是 “ssn”,因为社会安全号码被确保是唯一的。被存储在该仓库中的所有对象都必须存在“ssn”。

    -

    我们也请求了一个名为 “name” 的着眼于存储的对象的 name 属性的索引。如同 createObjectStore()createIndex() 提供了一个可选地 options 对象,该对象细化了我们希望创建的索引类型。新增一个不带 name 属性的对象也会成功,但是这个对象不会出现在 "name" 索引中。

    +

    我们也请求了一个名为 “name” 的着眼于存储的对象的 name 属性的索引。如同 createObjectStore()createIndex() 提供了一个可选地 options 对象,该对象细化了我们希望创建的索引类型。新增一个不带 name 属性的对象也会成功,但是这个对象不会出现在 "name" 索引中。

    我们现在可以使用存储的用户对象的 ssn 直接从对象存储空间中把它们提取出来,或者通过使用索引来使用他们的 name 进行提取。要了解这些是如何实现的,请参见 使用索引 章节。

    使用键生成器

    -

    在创建对象仓库时设置 autoIncrement 标记会为该仓库开启键生成器。默认该设置是不开启的。

    +

    在创建对象仓库时设置 autoIncrement 标记会为该仓库开启键生成器。默认该设置是不开启的。

    使用键生成器,当你向对象仓库新增记录时键会自动生成。对象仓库生成的键往往从 1 开始,然后自动生成的新的键会在之前的键的基础上加 1。生成的键的值从来不会减小,除非数据库操作结果被回滚,比如,数据库事务被中断。因此删除一条记录,甚至清空对象仓库里的所有记录都不会影响对象仓库的键生成器。

    @@ -266,18 +266,18 @@

    使用键生成器

    }); }; -

    更多关于键生成器的细节,请查阅  "W3C Key Generators"

    +

    更多关于键生成器的细节,请查阅 "W3C Key Generators"

    增加、读取和删除数据

    你需要开启一个事务才能对你的创建的数据库进行操作。事务来自于数据库对象,而且你必须指定你想让这个事务跨越哪些对象仓库。一旦你处于一个事务中,你就可以目标对象仓库发出请求。你要决定是对数据库进行更改还是只需从中读取数据。事务提供了三种模式:readonlyreadwriteversionchange

    -

    想要修改数据库模式或结构——包括新建或删除对象仓库或索引,只能在 versionchange 事务中才能实现。该事务由一个指定了 version 的 {{domxref("IDBFactory.open")}} 方法启动。(在仍未实现最新标准的 WebKit 浏览器 ,{{domxref("IDBFactory.open")}} 方法只接受一个参数,即数据库的 name,这样你必须调用 {{domxref("IDBVersionChangeRequest.setVersion")}} 来建立 versionchange 事务。

    +

    想要修改数据库模式或结构——包括新建或删除对象仓库或索引,只能在 versionchange 事务中才能实现。该事务由一个指定了 version 的 {{domxref("IDBFactory.open")}} 方法启动。(在仍未实现最新标准的 WebKit 浏览器 ,{{domxref("IDBFactory.open")}} 方法只接受一个参数,即数据库的 name,这样你必须调用 {{domxref("IDBVersionChangeRequest.setVersion")}} 来建立 versionchange 事务。

    -

    使用 readonlyreadwrite 模式都可以从已存在的对象仓库里读取记录。但只有在 readwrite 事务中才能修改对象仓库。你需要使用 {{domxref("IDBDatabase.transaction")}} 启动一个事务。该方法接受两个参数:storeNames (作用域,一个你想访问的对象仓库的数组),事务模式 mode(readonly 或 readwrite)。该方法返回一个包含 {{domxref("IDBIndex.objectStore")}} 方法的事务对象,使用 {{domxref("IDBIndex.objectStore")}} 你可以访问你的对象仓库。未指定 mode 时,默认为 readonly 模式。

    +

    使用 readonlyreadwrite 模式都可以从已存在的对象仓库里读取记录。但只有在 readwrite 事务中才能修改对象仓库。你需要使用 {{domxref("IDBDatabase.transaction")}} 启动一个事务。该方法接受两个参数:storeNames (作用域,一个你想访问的对象仓库的数组),事务模式 mode(readonly 或 readwrite)。该方法返回一个包含 {{domxref("IDBIndex.objectStore")}} 方法的事务对象,使用 {{domxref("IDBIndex.objectStore")}} 你可以访问你的对象仓库。未指定 mode 时,默认为 readonly 模式。

    -

    从 Firfox 40 起,IndexedDB 事务放松了对持久性的保证以提高性能(参见 Bug1112702)以前在 readwrite 事务中,只有当所有的数据确保被写入磁盘时才会触发 {{domxref("IDBTransaction.oncomplete")}}。在 Firefox 40+ 中,当操作系统被告知去写入数据后 complete 事件便被触发,但此时数据可能还没有真正的写入磁盘。complete 事件触发因此变得更快,但这样会有极小的机会发生以下情况:如果操作系统崩溃或在数据被写入磁盘前断电,那么整个事务都将丢失。由于这种灾难事件是罕见的,大多数使用者并不需要过分担心。如果由于某些原因你必须确保数据的持久性(例如你要保存一个无法再次计算的关键数据),你可以使用实验性(非标准的)readwriteflush 模式来创建事务以强制 complete 事件在数据写入磁盘后触发(查看 {{domxref("IDBDatabase.transaction")}})。

    +

    从 Firfox 40 起,IndexedDB 事务放松了对持久性的保证以提高性能(参见 Bug1112702)以前在 readwrite 事务中,只有当所有的数据确保被写入磁盘时才会触发 {{domxref("IDBTransaction.oncomplete")}}。在 Firefox 40+ 中,当操作系统被告知去写入数据后 complete 事件便被触发,但此时数据可能还没有真正的写入磁盘。complete 事件触发因此变得更快,但这样会有极小的机会发生以下情况:如果操作系统崩溃或在数据被写入磁盘前断电,那么整个事务都将丢失。由于这种灾难事件是罕见的,大多数使用者并不需要过分担心。如果由于某些原因你必须确保数据的持久性(例如你要保存一个无法再次计算的关键数据),你可以使用实验性(非标准的)readwriteflush 模式来创建事务以强制 complete 事件在数据写入磁盘后触发(查看 {{domxref("IDBDatabase.transaction")}})。

    你可以通过使用合适的作用域和模式来加速数据库访问,这有两个提示:

    @@ -300,7 +300,7 @@

    向数据库中增加数据

    现在我们已经有了一个事务,我们需要理解它的生命周期。事务和事件循环的联系非常密切。如果你创建了一个事务但是并没有使用它就返回给事件循环,那么事务将会失活。保持事务活跃的唯一方法就是在其上构建一个请求。当请求完成时你将会得到一个 DOM 事件,并且,假设请求成功了,你将会有另外一个机会在回调中来延长这个事务。如果你没有延长事务就返回到了事件循环,那么事务将会变得不活跃,依此类推。只要还有待处理的请求事务就会保持活跃。事务生命周期真的很简单但是可能需要一点时间你才能对它变得习惯。还有就是来几个例子也会有所帮助。如果你开始看到 TRANSACTION_INACTIVE_ERR 错误代码,那么你已经把某些事情搞乱了。

    -

    事务接收三种不同的 DOM 事件:errorabortcomplete。我们已经提及 error 事件是冒泡机制,所以事务会接收由它产生的所有请求所产生的错误。更微妙的一点,错误会中断它所处的事务。除非你在错误发生的第一时间就调用了 stopPropagation 并执行了其他操作来处理错误,不然整个事务将会回滚。这种机制迫使你考虑和处理错误场景,如果觉得细致的错误处理太繁琐,你可以在数据库上添加一个全局的错误处理。如果你在事务中没有处理一个已发生的错误或者调用 abort 方法,那么该事务会被回滚,并触发 abort 事件。另外,在所有请求完成后,事务的 complete 事件会被触发。如果你进行大量数据库操作,跟踪事务而不是具体的请求会使逻辑更加清晰。

    +

    事务接收三种不同的 DOM 事件:errorabortcomplete。我们已经提及 error 事件是冒泡机制,所以事务会接收由它产生的所有请求所产生的错误。更微妙的一点,错误会中断它所处的事务。除非你在错误发生的第一时间就调用了 stopPropagation 并执行了其他操作来处理错误,不然整个事务将会回滚。这种机制迫使你考虑和处理错误场景,如果觉得细致的错误处理太繁琐,你可以在数据库上添加一个全局的错误处理。如果你在事务中没有处理一个已发生的错误或者调用 abort 方法,那么该事务会被回滚,并触发 abort 事件。另外,在所有请求完成后,事务的 complete 事件会被触发。如果你进行大量数据库操作,跟踪事务而不是具体的请求会使逻辑更加清晰。

    现在你拥有了一个事务,你需要从中取出一个对象仓库。你只能在创建事务时指定的对象仓库中取出一个对象仓库。然后你可以添加任何你需要的数据。

    @@ -321,7 +321,7 @@

    向数据库中增加数据

    }; }); -

    调用 call() 方法产生的请求的 result 是被添加的数据的键。所以在该例中,它应该全等于被添加对象的 ssn 属性,因为对象仓库使用 ssn 属性作为键路径(key path)。注意,add() 方法的调用时,对象仓库中不能存在相同键的对象。如果你想修改一个已存在的条目,或者你不关心该数据是否已存在,你可以使用 put() 方法,就像下面 更新数据库中的记录 模块所展示的。

    +

    调用 call() 方法产生的请求的 result 是被添加的数据的键。所以在该例中,它应该全等于被添加对象的 ssn 属性,因为对象仓库使用 ssn 属性作为键路径(key path)。注意,add() 方法的调用时,对象仓库中不能存在相同键的对象。如果你想修改一个已存在的条目,或者你不关心该数据是否已存在,你可以使用 put() 方法,就像下面 更新数据库中的记录 模块所展示的。

    从数据库中删除数据

    @@ -355,7 +355,7 @@

    从数据库中获取数据

    alert("Name for SSN 444-44-4444 is " + event.target.result.name); }; -

    看看这是怎么回事。因为这里只用到一个对象仓库,你可以只传该对象仓库的名字作为参数,而不必传一个列表。并且,你只需读取数据,所以不需要 readwrite 事务。不指定事务模式来调用 transaction 你会得到一个 readonly 事务。另外一个微妙的地方在于你并没有保存请求对象到变量中。因为 DOM 事件把请求作为他的目标(target),你可以使用该事件来获取 result 属性。

    +

    看看这是怎么回事。因为这里只用到一个对象仓库,你可以只传该对象仓库的名字作为参数,而不必传一个列表。并且,你只需读取数据,所以不需要 readwrite 事务。不指定事务模式来调用 transaction 你会得到一个 readonly 事务。另外一个微妙的地方在于你并没有保存请求对象到变量中。因为 DOM 事件把请求作为他的目标(target),你可以使用该事件来获取 result 属性。

    注意,你可以通过限制事务的作用域和模式来加速数据库访问。这里有两个提醒:

    @@ -393,7 +393,7 @@

    更新数据库中的记录

    所以这里我们创建了一个 objectStore,并通过指定 ssn 值(444-44-4444)从中请求了一条客户记录。然后我们把请求的结果保存在变量 data 中,并更新了该对象的 age 属性,之后创建了第二个请求(requestUpdate)将客户数据放回 objectStore 来覆盖之前的值。

    -

    注意:In this case we've had to specify a readwrite transaction because we want to write to the database, not just read from it.在这个例子中我们必须指定一个 readwrite 事务,因为我们想要写入一个数据库,而不仅仅是从中读取。

    +

    注意:In this case we've had to specify a readwrite transaction because we want to write to the database, not just read from it.在这个例子中我们必须指定一个 readwrite 事务,因为我们想要写入一个数据库,而不仅仅是从中读取。

    使用游标

    @@ -433,7 +433,7 @@

    使用游标

    注意:可选地,你可以使用 getAll() 来处理这种情况(以及 getAllKeys())。下面的代码的效果和上例相同:

    -

    Alternatively, you can use getAll() to handle this case (and getAllKeys()) . The following code does precisely the same thing as above:

    +

    Alternatively, you can use getAll() to handle this case (and getAllKeys()) . The following code does precisely the same thing as above:

    objectStore.getAll().onsuccess = function(event) {
       alert("Got all customers: " + event.target.result);
    @@ -527,7 +527,7 @@ 

    指定游标的范围和方向

    } };
    -

    因为 “name” 索引不是唯一的,那就有可能存在具有相同 name 的多条记录。要注意的是这种情况不可能发生在对象存储空间上,因为键必须永远是唯一的。如果你想要在游标在索引迭代过程中过滤出重复的,你可以传递 nextunique (或 prevunique 如果你正在向后寻找)作为方向参数。 当 nextunique 或是 prevunique 被使用时,被返回的那个总是键最小的记录。

    +

    因为 “name” 索引不是唯一的,那就有可能存在具有相同 name 的多条记录。要注意的是这种情况不可能发生在对象存储空间上,因为键必须永远是唯一的。如果你想要在游标在索引迭代过程中过滤出重复的,你可以传递 nextunique (或 prevunique 如果你正在向后寻找)作为方向参数。 当 nextunique 或是 prevunique 被使用时,被返回的那个总是键最小的记录。

    index.openKeyCursor(null, IDBCursor.nextunique).onsuccess = function(event) {
       var cursor = event.target.result;
    @@ -579,19 +579,19 @@ 

    安全

    IndexedDB 使用同源原则,这意味着它把存储空间绑定到了创建它的站点的源(典型情况下,就是站点的域或是子域),所以它不能被任何其他源访问。

    -

    第三方窗口内容(比如 {{htmlelement("iframe")}} 内容)可以访问它所嵌入的源的 IndexedDB 仓库,除非浏览器被设置成从不接受第三方 cookies(参见 {{bug("1147821")}})。

    +

    第三方窗口内容(比如 {{htmlelement("iframe")}} 内容)可以访问它所嵌入的源的 IndexedDB 仓库,除非浏览器被设置成从不接受第三方 cookies(参见 {{bug("1147821")}})。

    浏览器关闭警告

    当浏览器关闭(由于用户选择关闭或退出选项),包含数据库的磁盘被意外移除,或者数据库存储的权限丢失,将发生以下问题:

      -
    1. 受影响的数据库(在浏览器关闭的场景下,所有打开的数据库)的所有事务会以 AbortError 错误中断。该影响和在每个事务中调用 {{domxref("IDBTransaction.abort()")}} 相同。
    2. +
    3. 受影响的数据库(在浏览器关闭的场景下,所有打开的数据库)的所有事务会以 AbortError 错误中断。该影响和在每个事务中调用 {{domxref("IDBTransaction.abort()")}} 相同。
    4. 所有的事务完成后,数据库连接就会关闭。
    5. -
    6. 最终,表示数据库连接的 {{domxref("IDBDatabase")}} 对象收到一个 {{event("close")}} 事件。你可以使用 {{domxref("IDBDatabase.onclose")}} 事件句柄来监听这些事件,这样你就可以知道什么时候数据库被意外关闭了。
    7. +
    8. 最终,表示数据库连接的 {{domxref("IDBDatabase")}} 对象收到一个 {{event("close")}} 事件。你可以使用 {{domxref("IDBDatabase.onclose")}} 事件句柄来监听这些事件,这样你就可以知道什么时候数据库被意外关闭了。
    -

    上述的行为只在 Firefox 50、Google Chrome 31(近似的) 发行版本中支持。

    +

    上述的行为只在 Firefox 50、Google Chrome 31(近似的) 发行版本中支持。

    在这些版本之前的浏览器,事务会静默中断,并且 {{event("close")}} 事件不会触发,这样就无法察觉数据库的异常关闭。

    @@ -618,14 +618,14 @@

    地区化的排序

  • á
  • -

    这显然不是用户想要的数据排序方式,例如 Aaron 和 Áaron 在通讯录中理应相邻地排列。如果要获取国际化的排序,需要将整个数据内容调入内存,然后由客户端 JavaScript 实现排序,显然这样做不是很高效。

    +

    这显然不是用户想要的数据排序方式,例如 Aaron 和 Áaron 在通讯录中理应相邻地排列。如果要获取国际化的排序,需要将整个数据内容调入内存,然后由客户端 JavaScript 实现排序,显然这样做不是很高效。

    -

    这是一个新的功能,它允许开发者在使用 {{domxref("IDBObjectStore.createIndex()")}}(查看它的参数)创建索引时指定一个地区。在这种情况下,一个游标会被用来遍历数据,如果你想指定地区性的排序,你可以使用专门的 {{domxref("IDBLocaleAwareKeyRange")}}。

    +

    这是一个新的功能,它允许开发者在使用 {{domxref("IDBObjectStore.createIndex()")}}(查看它的参数)创建索引时指定一个地区。在这种情况下,一个游标会被用来遍历数据,如果你想指定地区性的排序,你可以使用专门的 {{domxref("IDBLocaleAwareKeyRange")}}。

    -

    {{domxref("IDBIndex")}}  还添加了新的属性如果它已经被指定了一个地区,它们是 locale(返回被指定的地区或 null)和 isAutoLocale(如果创建索引时使用了自动的地区,即使用了平台默认的地区,则返回 true;否则返回 false)。

    +

    {{domxref("IDBIndex")}} 还添加了新的属性如果它已经被指定了一个地区,它们是 locale(返回被指定的地区或 null)和 isAutoLocale(如果创建索引时使用了自动的地区,即使用了平台默认的地区,则返回 true;否则返回 false)。

    -

    注意: 现在该特性由一个标志隐藏——在 about:config 中开启 dom.indexedDB.experimental 来启用和实验该特性。

    +

    注意: 现在该特性由一个标志隐藏——在 about:config 中开启 dom.indexedDB.experimental 来启用和实验该特性。

    一个完整的 IndexedDB 示例

    @@ -1306,7 +1306,7 @@

    JavaScript 内容

    {{ LiveSampleLink('Full_IndexedDB_example', "Test the online live demo") }}

    -

    注意:window.indexedDB.open() 是异步的。该方法在 success 事件触发前很长一段时间就执行完毕。这意味着一个调用 open()onsuccess 的方法(例如 openDb()),会在 onsuccess 句柄开始运行前就已经返回了。这种情况同样适用于其他请求方法,比如 transaction()get()

    +

    注意:window.indexedDB.open() 是异步的。该方法在 success 事件触发前很长一段时间就执行完毕。这意味着一个调用 open()onsuccess 的方法(例如 openDb()),会在 onsuccess 句柄开始运行前就已经返回了。这种情况同样适用于其他请求方法,比如 transaction()get()

    另请参阅

    @@ -1316,8 +1316,8 @@

    另请参阅

    参考

      -
    • IndexedDB 接口参考
    • -
    • Indexed Database 接口说明
    • +
    • IndexedDB 接口参考
    • +
    • Indexed Database 接口说明
    • 在 Chrome 中使用 IndexedDB
    • 在 Firefox 中使用 JavaScript 生成器
    • Firefox 源码中的 IndexedDB 接口文件
    • @@ -1327,13 +1327,13 @@

      教程和指导

        -
      • localForage: 一个提供 name:value 的简单语法的客户端数据存储垫片(Polyfill),它基于 IndexedDB 实现,并在不持支 IndexedDB 的浏览器中自动回退只 WebSQL 和 localStorage。
      • +
      • localForage: 一个提供 name:value 的简单语法的客户端数据存储垫片(Polyfill),它基于 IndexedDB 实现,并在不持支 IndexedDB 的浏览器中自动回退只 WebSQL 和 localStorage。
      • dexie.js: 对 IndexedDB 的封装,通过提供更友好和简单语法以进行快速的编码开发。
      • ZangoDB: 一个类 MongoDB 的 IndexedDB 接口实现,提供了诸如过滤、投影、排序、更新和聚合等大多数 MongoDB 常见的特性。
      • JsStore: 一个具备类 SQL 语法的简单和先进的 IndexedDB 封装实现。
      • diff --git a/files/zh-cn/web/api/inputevent/data/index.html b/files/zh-cn/web/api/inputevent/data/index.html index e1289ee0011184..212db8e46fe2bd 100644 --- a/files/zh-cn/web/api/inputevent/data/index.html +++ b/files/zh-cn/web/api/inputevent/data/index.html @@ -11,10 +11,10 @@

        {{SeeCompatTable}}{{APIRef("DOM Events")}}

        -

        请注意,data 属性在使用键盘输入时会返回输入的字符内容,但在粘贴、拖动时可能会返回 null,这取决于浏览器。浏览器也可能把一些数据保存在 {{domxref("InputEvent.dataTransfer")}},而不是该 data 属性中。

        +

        请注意,data 属性在使用键盘输入时会返回输入的字符内容,但在粘贴、拖动时可能会返回 null,这取决于浏览器。浏览器也可能把一些数据保存在 {{domxref("InputEvent.dataTransfer")}},而不是该 data 属性中。

        -

        {{domxref("InputEvent")}} 接口中的只读属性 data 返回含有插入字符数据的 {{domxref("DOMString")}}。如果更改未插入文本(例如删除字符时),则其可能为空字符串。

        +

        {{domxref("InputEvent")}} 接口中的只读属性 data 返回含有插入字符数据的 {{domxref("DOMString")}}。如果更改未插入文本(例如删除字符时),则其可能为空字符串。

        语法

        @@ -26,7 +26,7 @@

        返回值

        示例

        -

        在下面的简单示例中,我们在 input 事件上设置了一个事件监听器,以便在对 {{htmlelement("input")}} 元素的内容进行任何更改时(通过键入或粘贴),通过 InputEvent.data 属性检索添加的文本,并在 <input> 下面的段落中报告。

        +

        在下面的简单示例中,我们在 input 事件上设置了一个事件监听器,以便在对 {{htmlelement("input")}} 元素的内容进行任何更改时(通过键入或粘贴),通过 InputEvent.data 属性检索添加的文本,并在 <input> 下面的段落中报告。

        <p>Some text to copy and paste.</p>
         
        diff --git a/files/zh-cn/web/api/inputevent/datatransfer/index.html b/files/zh-cn/web/api/inputevent/datatransfer/index.html
        index 63762598b21769..de721485c2ee51 100644
        --- a/files/zh-cn/web/api/inputevent/datatransfer/index.html
        +++ b/files/zh-cn/web/api/inputevent/datatransfer/index.html
        @@ -10,7 +10,7 @@
         ---
         

        {{SeeCompatTable}}{{APIRef("DOM Events")}}

        -

        {{domxref("InputEvent")}} 接口中的只读属性 dataTransfer 返回一个 {{domxref("DataTransfer")}} 对象,该对象包含有关要添加到可编辑内容,或从可编辑内容中删除的富文本或纯文本数据的信息。

        +

        {{domxref("InputEvent")}} 接口中的只读属性 dataTransfer 返回一个 {{domxref("DataTransfer")}} 对象,该对象包含有关要添加到可编辑内容,或从可编辑内容中删除的富文本或纯文本数据的信息。

        语法

        @@ -22,7 +22,7 @@

        返回值

        示例

        -

        在下面的简单示例中,我们在 input 事件上设置了一个事件监听器,以便在将任何内容粘贴到 {{htmlelement("p")}} 元素时,通过 InputEvent.dataTransfer.getData() 方法检索其 HTML 源代码,并在输入框下面的段落中报告。

        +

        在下面的简单示例中,我们在 input 事件上设置了一个事件监听器,以便在将任何内容粘贴到 {{htmlelement("p")}} 元素时,通过 InputEvent.dataTransfer.getData() 方法检索其 HTML 源代码,并在输入框下面的段落中报告。

        尝试复制并粘贴提供的部分内容以查看效果。注意,部分浏览器对其支持不佳。

        diff --git a/files/zh-cn/web/api/inputevent/index.html b/files/zh-cn/web/api/inputevent/index.html index 6415d9c77a2f8c..f4a78b390c7aa8 100644 --- a/files/zh-cn/web/api/inputevent/index.html +++ b/files/zh-cn/web/api/inputevent/index.html @@ -5,13 +5,13 @@ ---

        {{APIRef("DOM Events")}}

        {{SeeCompatTable}}<
        -

        InputEvent 接口用来构造和字符输入相关的事件对象。

        +

        InputEvent 接口用来构造和字符输入相关的事件对象。

        构造函数

        {{domxref("InputEvent.InputEvent", "InputEvent()")}}
        -
        创建一个 InputEvent 对象。
        +
        创建一个 InputEvent 对象。

        属性

        @@ -22,7 +22,7 @@

        属性

        {{domxref("InputEvent.data")}} {{readOnlyInline}}
        返回当前输入的字符串,如果是删除操作,则该值为空字符串。
        {{domxref("InputEvent.isComposing")}}{{readOnlyInline}}
        -
        返回一个布尔值,表明该事件是在触发 {{event("compositionstart")}} 事件之后且触发 {{event("compositionend")}} 事件之前触发的,也就是表明当前输入的字符是输入法的中途输入。
        +
        返回一个布尔值,表明该事件是在触发 {{event("compositionstart")}} 事件之后且触发 {{event("compositionend")}} 事件之前触发的,也就是表明当前输入的字符是输入法的中途输入。

        方法

        diff --git a/files/zh-cn/web/api/inputevent/inputevent/index.html b/files/zh-cn/web/api/inputevent/inputevent/index.html index 9d26c324894a1b..1f45d60dd686e1 100644 --- a/files/zh-cn/web/api/inputevent/inputevent/index.html +++ b/files/zh-cn/web/api/inputevent/inputevent/index.html @@ -11,7 +11,7 @@ ---

        {{APIRef("DOM Events")}}{{SeeCompatTable}}

        -

        构造函数 InputEvent() 返回一个新创建的 {{domxref("InputEvent")}} 对象。

        +

        构造函数 InputEvent() 返回一个新创建的 {{domxref("InputEvent")}} 对象。

        语法

        @@ -25,14 +25,14 @@

        参数

        inputEventInit{{optional_inline}}
        -

        一个 InputEventInit 字典,有以下字段:

        +

        一个 InputEventInit 字典,有以下字段:

        • inputType(可选),指定可编辑内容更改类型的字符串,例如插入、删除或格式化文本。
        • data(可选),包含要插入的字符的字符串。如果更改未插入文本(例如删除字符时),则其可能为空字符串。
        • -
        • dataTransfer(可选),一个 {{domxref("DataTransfer")}} 对象,其中包含有关添加到可编辑内容,或从可编辑内容中删除的富文本或纯文本数据的信息。
        • -
        • isComposing(可选),一个布尔值,指示事件是组合会话的一部分,这意味着它在 {{event("compositionstart")}} 事件之后,但在 {{event("compositionend")}} 事件之前。默认值为 false
        • -
        • ranges(可选),一个静态 {{domxref("Range")}} 数组,如果输入事件没有被取消,它将受到对 DOM 的更改的影响。
        • +
        • dataTransfer(可选),一个 {{domxref("DataTransfer")}} 对象,其中包含有关添加到可编辑内容,或从可编辑内容中删除的富文本或纯文本数据的信息。
        • +
        • isComposing(可选),一个布尔值,指示事件是组合会话的一部分,这意味着它在 {{event("compositionstart")}} 事件之后,但在 {{event("compositionend")}} 事件之前。默认值为 false
        • +
        • ranges(可选),一个静态 {{domxref("Range")}} 数组,如果输入事件没有被取消,它将受到对 DOM 的更改的影响。

        InputEventInit 字典也接受来自 {{domxref("UIEvent.UIEvent", "UIEventInit")}} 以及 {{domxref("Event.Event", "EventInit")}} 字典的值。

        diff --git a/files/zh-cn/web/api/installevent/index.html b/files/zh-cn/web/api/installevent/index.html index a67eada43f5f07..173e51568acda9 100644 --- a/files/zh-cn/web/api/installevent/index.html +++ b/files/zh-cn/web/api/installevent/index.html @@ -5,7 +5,7 @@ ---
        {{APIRef("Service Workers API")}}{{SeeCompatTable}}
        -

        该参数传递到 {{domxref("ServiceWorkerGlobalScope.oninstall", "oninstall")}} 事件处理程序,InstallEvent 接口表示一个 {{domxref("ServiceWorker")}} 的 {{domxref("ServiceWorkerGlobalScope")}} 上分派的安装操作。作为 {{domxref("ExtendableEvent")}} 的一个子类,它确保在安装期间不调度诸如 {{domxref("FetchEvent")}} 之类的功能事件。

        +

        该参数传递到 {{domxref("ServiceWorkerGlobalScope.oninstall", "oninstall")}} 事件处理程序,InstallEvent 接口表示一个 {{domxref("ServiceWorker")}} 的 {{domxref("ServiceWorkerGlobalScope")}} 上分派的安装操作。作为 {{domxref("ExtendableEvent")}} 的一个子类,它确保在安装期间不调度诸如 {{domxref("FetchEvent")}} 之类的功能事件。

        该接口继承自 {{domxref("ExtendableEvent")}} 接口。

        @@ -23,7 +23,7 @@

        属性

        从它的祖先{{domxref("Event")}}继承属性。

        -
        {{domxref("InstallEvent.activeWorker")}} {{readonlyInline}}
        +
        {{domxref("InstallEvent.activeWorker")}} {{readonlyInline}}
        返回当前处于激活状态,控制页面的{{domxref("ServiceWorker")}}。
        @@ -33,7 +33,7 @@

        方法

        示例

        -

        该代码片段来自 service worker prefetch sample (请参阅 prefetch running live)。代码在{{domxref("ServiceWorkerGlobalScope.oninstall")}}中调用{{domxref("ExtendableEvent.waitUntil", "ExtendableEvent.waitUntil(any value)")}},并延迟将{{domxref("ServiceWorkerRegistration.installing")}} worker 视为已安装的,直到传递的 promise 被成功地 resolve。当所有资源已经获取并缓存,或者有任何异常发生时,promise 才会 resolve。

        +

        该代码片段来自 service worker prefetch sample (请参阅 prefetch running live)。代码在{{domxref("ServiceWorkerGlobalScope.oninstall")}}中调用{{domxref("ExtendableEvent.waitUntil", "ExtendableEvent.waitUntil(any value)")}},并延迟将{{domxref("ServiceWorkerRegistration.installing")}} worker 视为已安装的,直到传递的 promise 被成功地 resolve。当所有资源已经获取并缓存,或者有任何异常发生时,promise 才会 resolve。

        该代码片段也展示了服务工作线程使用的缓存版本控制的最佳实践。虽然此示例只有一个缓存,但您可以将此方法用于多个缓存。 代码将缓存的速记标识映射到特定的版本化缓存名称。

        @@ -80,7 +80,7 @@

        规范

    - +
    {{SpecName('Service Workers')}} {{Spec2('Service Workers')}}As of May 2015, the install event is an instance of {{domxref("ExtendableEvent")}} rather than a child of it.As of May 2015, the install event is an instance of {{domxref("ExtendableEvent")}} rather than a child of it.
    diff --git a/files/zh-cn/web/api/intersection_observer_api/index.html b/files/zh-cn/web/api/intersection_observer_api/index.html index 46ca54adb138ae..6136260f62bb2f 100644 --- a/files/zh-cn/web/api/intersection_observer_api/index.html +++ b/files/zh-cn/web/api/intersection_observer_api/index.html @@ -53,7 +53,7 @@

    Intersection observer 的概

    创建一个 intersection observer

    -

    创建一个 IntersectionObserver 对象,并传入相应参数和回调用函数,该回调函数将会在目标 (target) 元素和根 (root) 元素的交集大小超过阈值 (threshold) 规定的大小时候被执行。

    +

    创建一个 IntersectionObserver 对象,并传入相应参数和回调用函数,该回调函数将会在目标 (target) 元素和根 (root) 元素的交集大小超过阈值 (threshold) 规定的大小时候被执行。

    let options = {
       root: document.querySelector('#scrollArea'),
    @@ -90,7 +90,7 @@ 

    Targeting an element to be observed

    每当目标满足该 IntersectionObserver 指定的 threshold 值,回调被调用。

    -

    只要目标满足为 IntersectionObserver 指定的阈值,就会调用回调。回调接收 {{domxref("IntersectionObserverEntry")}} 对象和观察者的列表:

    +

    只要目标满足为 IntersectionObserver 指定的阈值,就会调用回调。回调接收 {{domxref("IntersectionObserverEntry")}} 对象和观察者的列表:

    let callback =(entries, observer) => {
       entries.forEach(entry => {
    @@ -134,7 +134,7 @@ 

    Thresholds

    例如,当你想要在 target 在 root 元素中中的可见性每超过 25% 或者减少 25% 的时候都通知一次。你可以在创建 observer 的时候指定 thresholds 属性值为 [0, 0.25, 0.5, 0.75, 1],你可以通过检测在每次交集发生变化的时候的都会传递回调函数的参数 {{domxref("IntersectionObserverEntry.isIntersecting", "isIntersecting")}} 的属性值来判断 target 元素在 root 元素中的可见性是否发生变化。如果 isIntersecting 为真,target 元素的至少已经达到 thresholds 属性值当中规定的其中一个阈值,如果为假,则 target 元素不在给定的阈值范围内可见。

    -

    Note that it's possible to have a non-zero intersection rectangle, which can happen if the intersection is exactly along the boundary between the two or the area of {{domxref("IntersectionObserverEntry.boundingClientRect", "boundingClientRect")}} is zero. This state of the target and root sharing a boundary line is not considered enough to be considered transitioning into an intersecting state.

    +

    Note that it's possible to have a non-zero intersection rectangle, which can happen if the intersection is exactly along the boundary between the two or the area of {{domxref("IntersectionObserverEntry.boundingClientRect", "boundingClientRect")}} is zero. This state of the target and root sharing a boundary line is not considered enough to be considered transitioning into an intersecting state.

    为了让我们感受下 thresholds 是如何工作的,尝试滚动以下的例子,每一个 colored box 的四个边角都会展示自身在 root 元素中的可见程度百分比,所以在你滚动 root 的时候你将会看到四个边角的数值一直在发生变化。 每一个 box 都有不同的 thresholds:

    @@ -318,7 +318,7 @@

    Clipping and the intersection r

    Intersection change callbacks

    -

    When the amount of a target element which is visible within the root element crosses one of the visibility thresholds, the {{domxref("IntersectionObserver")}} object's callback is executed. The callback receives as input an array of all of {{domxref("IntersectionObserverEntry")}} objects, one for each threshold which was crossed, and a reference to the IntersectionObserver object itself.

    +

    When the amount of a target element which is visible within the root element crosses one of the visibility thresholds, the {{domxref("IntersectionObserver")}} object's callback is executed. The callback receives as input an array of all of {{domxref("IntersectionObserverEntry")}} objects, one for each threshold which was crossed, and a reference to the IntersectionObserver object itself.

    Each entry in the list of thresholds is an {{domxref("IntersectionObserverEntry")}} object describing one threshold that was crossed; that is, each entry describes how much of a given element is intersecting with the root element, whether or not the element is considered to be intersecting or not, and the direction in which the transition occurred.

    diff --git a/files/zh-cn/web/api/intersection_observer_api/timing_element_visibility/index.html b/files/zh-cn/web/api/intersection_observer_api/timing_element_visibility/index.html index 8f10f7ba778431..542cadeb03698b 100644 --- a/files/zh-cn/web/api/intersection_observer_api/timing_element_visibility/index.html +++ b/files/zh-cn/web/api/intersection_observer_api/timing_element_visibility/index.html @@ -8,7 +8,7 @@
    交叉点观察者 API 使得当感兴趣的元素或多或少被共享祖先节点或元素遮蔽时,可以方便地异步通知,包括 {{domxref("Document")}}本身。
    -
     
    +

    The Intersection Observer API makes it easy to be asynchronously notified when elements of interest become more or less obscured by a shared ancestor node or element, including the {{domxref("Document")}} itself. In this article, we'll build a mock blog which has a number of ads interspersed among the contents of the page, then use the Intersection Observer API to track how much time each ad is visible to the user. When an ad exceeds one minute of visible time, it will be replaced with a new one.

    diff --git a/files/zh-cn/web/api/intersectionobserver/disconnect/index.html b/files/zh-cn/web/api/intersectionobserver/disconnect/index.html index 92a8b99ff149a6..d95bed0f33d49d 100644 --- a/files/zh-cn/web/api/intersectionobserver/disconnect/index.html +++ b/files/zh-cn/web/api/intersectionobserver/disconnect/index.html @@ -12,7 +12,7 @@ ---
    {{APIRef("Intersection Observer API")}}
    -
     {{domxref("IntersectionObserver")}} 的disconnect()方法终止对所有目标元素可见性变化的观察。
    +
    {{domxref("IntersectionObserver")}} 的disconnect()方法终止对所有目标元素可见性变化的观察。

    语法

    @@ -31,7 +31,7 @@

    说明

    {{Specifications}} -

    浏览器兼容性 

    +

    浏览器兼容性

    {{Compat}}

    diff --git a/files/zh-cn/web/api/intersectionobserver/index.html b/files/zh-cn/web/api/intersectionobserver/index.html index c876969a416a0d..7fae2103cc8b28 100644 --- a/files/zh-cn/web/api/intersectionobserver/index.html +++ b/files/zh-cn/web/api/intersectionobserver/index.html @@ -13,7 +13,7 @@ ---
    {{APIRef("Intersection Observer API")}}
    -

    IntersectionObserver接口 (从属于Intersection Observer API) 提供了一种异步观察目标元素与其祖先元素或顶级文档视窗 ({{Glossary('viewport')}}) 交叉状态的方法。祖先元素与视窗 ({{Glossary('viewport')}}) 被称为根 (root)。

    +

    IntersectionObserver接口 (从属于Intersection Observer API) 提供了一种异步观察目标元素与其祖先元素或顶级文档视窗 ({{Glossary('viewport')}}) 交叉状态的方法。祖先元素与视窗 ({{Glossary('viewport')}}) 被称为根 (root)。

    当一个IntersectionObserver对象被创建时,其被配置为监听根中一段给定比例的可见区域。一旦 IntersectionObserver 被创建,则无法更改其配置,所以一个给定的观察者对象只能用来监听可见区域的特定变化值;然而,你可以在同一个观察者对象中配置监听多个目标元素。

    @@ -30,7 +30,7 @@

    属性

    {{domxref("IntersectionObserver.root")}} {{readonlyinline}}
    所监听对象的具体祖先元素 ({{domxref("element")}})。如果未传入值或值为null,则默认使用顶级文档的视窗。
    {{domxref("IntersectionObserver.rootMargin")}} {{readonlyinline}}
    -
    计算交叉时添加到根 (root)边界盒{{Glossary('bounding box')}}的矩形偏移量, 可以有效的缩小或扩大根的判定范围从而满足计算需要。此属性返回的值可能与调用构造函数时指定的值不同,因此可能需要更改该值,以匹配内部要求。所有的偏移量均可用像素 (pixel)(px) 或百分比 (percentage)(%) 来表达,默认值为"0px 0px 0px 0px"。
    +
    计算交叉时添加到根 (root)边界盒{{Glossary('bounding box')}}的矩形偏移量, 可以有效的缩小或扩大根的判定范围从而满足计算需要。此属性返回的值可能与调用构造函数时指定的值不同,因此可能需要更改该值,以匹配内部要求。所有的偏移量均可用像素 (pixel)(px) 或百分比 (percentage)(%) 来表达,默认值为"0px 0px 0px 0px"。
    {{domxref("IntersectionObserver.thresholds")}} {{readonlyinline}}
    一个包含阈值的列表,按升序排列,列表中的每个阈值都是监听对象的交叉区域与边界区域的比率。当监听对象的任何阈值被越过时,都会生成一个通知 (Notification)。如果构造器未传入值,则默认值为 0。

    @@ -79,4 +79,4 @@

    参考

  • {{domxref('ResizeObserver')}}
  • -

     

    +

    diff --git a/files/zh-cn/web/api/intersectionobserver/intersectionobserver/index.html b/files/zh-cn/web/api/intersectionobserver/intersectionobserver/index.html index 5e963dceebab24..8066db67678dfd 100644 --- a/files/zh-cn/web/api/intersectionobserver/intersectionobserver/index.html +++ b/files/zh-cn/web/api/intersectionobserver/intersectionobserver/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef("Intersection Observer API")}}
    -

    IntersectionObserver()构造器创建并返回一个{{domxref("IntersectionObserver")}}对象。 如果指定rootMargin则会检查其是否符合语法规定,检查阈值以确保全部在 0.0 到 1.0 之间,并且阈值列表会按升序排列。如果阈值列表为空,则默认为一个 [0.0] 的数组。

    +

    IntersectionObserver()构造器创建并返回一个{{domxref("IntersectionObserver")}}对象。 如果指定rootMargin则会检查其是否符合语法规定,检查阈值以确保全部在 0.0 到 1.0 之间,并且阈值列表会按升序排列。如果阈值列表为空,则默认为一个 [0.0] 的数组。

    语法

    @@ -29,7 +29,7 @@

    参数

    root
    监听元素的祖先元素{{domxref("Element")}}对象,其边界盒将被视作视口。目标在根的可见区域的的任何不可见部分都会被视为不可见。
    rootMargin
    -
    一个在计算交叉值时添加至根的边界盒 ({{Glossary('bounding_box')}}) 中的一组偏移量,类型为字符串 (string) ,可以有效的缩小或扩大根的判定范围从而满足计算需要。语法大致和 CSS 中的{{cssxref("margin")}} 属性等同; 可以参考 {{SectionOnPage("/en-US/docs/Web/API/Intersection_Observer_API", "The root element and root margin")}}来深入了解 margin 的工作原理及其语法。默认值是"0px 0px 0px 0px"。
    +
    一个在计算交叉值时添加至根的边界盒 ({{Glossary('bounding_box')}}) 中的一组偏移量,类型为字符串 (string) ,可以有效的缩小或扩大根的判定范围从而满足计算需要。语法大致和 CSS 中的{{cssxref("margin")}} 属性等同; 可以参考 {{SectionOnPage("/en-US/docs/Web/API/Intersection_Observer_API", "The root element and root margin")}}来深入了解 margin 的工作原理及其语法。默认值是"0px 0px 0px 0px"。
    threshold
    规定了一个监听目标与边界盒交叉区域的比例值,可以是一个具体的数值或是一组 0.0 到 1.0 之间的数组。若指定值为 0.0,则意味着监听元素即使与根有 1 像素交叉,此元素也会被视为可见。若指定值为 1.0,则意味着整个元素都在可见范围内时才算可见。可以参考{{SectionOnPage("/en-US/docs/Web/API/Intersection_Observer_API", "Thresholds")}} 来深入了解阈值是如何使用的。阈值的默认值为 0.0。
    diff --git a/files/zh-cn/web/api/intersectionobserver/observe/index.html b/files/zh-cn/web/api/intersectionobserver/observe/index.html index 848aba3999ca1a..d80e72c0b5a9c5 100644 --- a/files/zh-cn/web/api/intersectionobserver/observe/index.html +++ b/files/zh-cn/web/api/intersectionobserver/observe/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef("Intersection Observer API")}}{{SeeCompatTable}}
    -

    {{domxref("IntersectionObserver")}} 对象的observe() 方法向 IntersectionObserver 对象监听的目标集合添加一个元素。一个监听者有一组阈值和一个根, 但是可以监视多个目标元素,以查看这些目标元素可见区域的变化。调用{{domxref("IntersectionObserver.unobserve()")}}方法可以停止观察元素。

    +

    {{domxref("IntersectionObserver")}} 对象的observe() 方法向 IntersectionObserver 对象监听的目标集合添加一个元素。一个监听者有一组阈值和一个根, 但是可以监视多个目标元素,以查看这些目标元素可见区域的变化。调用{{domxref("IntersectionObserver.unobserve()")}}方法可以停止观察元素。

    当指定元素的可见区域超过监听者的可见区域阈值之一时(阈值列表{{domxref("IntersectionObserver.thresholds")}}),监听者的回调会被传入代表当前发生的交叉变化{{domxref("IntersectionObserverEntry")}}并执行。请注意,这种设计允许通过调用一次回调,给回调传入 IntersectionObserverEntry 对象数组,来实现同时处理多个被监听元素的交叉变化。

    diff --git a/files/zh-cn/web/api/intersectionobserver/rootmargin/index.html b/files/zh-cn/web/api/intersectionobserver/rootmargin/index.html index c9f66b871d45af..98762ac8d36cd2 100644 --- a/files/zh-cn/web/api/intersectionobserver/rootmargin/index.html +++ b/files/zh-cn/web/api/intersectionobserver/rootmargin/index.html @@ -20,7 +20,7 @@

    这个属性返回的字符串也许会与{{domxref("IntersectionObserver")}}被配置时所指定的值有所差别。浏览器可以改变这些值。

    -

    如果 rootMargin 在对象初始化的时候未被指定,它将被设置成默认值"0px 0px 0px 0px",这将意味着在原根节点边界框与目标边界之间计算交叉值。  {{SectionOnPage("/en-US/docs/Web/API/Intersection_Observer_API", "The root element and root margin")}} 描述了 rootMargin 的更加深入的使用方法。

    +

    如果 rootMargin 在对象初始化的时候未被指定,它将被设置成默认值"0px 0px 0px 0px",这将意味着在原根节点边界框与目标边界之间计算交叉值。 {{SectionOnPage("/en-US/docs/Web/API/Intersection_Observer_API", "The root element and root margin")}} 描述了 rootMargin 的更加深入的使用方法。

    规范

    diff --git a/files/zh-cn/web/api/intersectionobserver/takerecords/index.html b/files/zh-cn/web/api/intersectionobserver/takerecords/index.html index 14e31e8500a5bf..8266e61347cb3a 100644 --- a/files/zh-cn/web/api/intersectionobserver/takerecords/index.html +++ b/files/zh-cn/web/api/intersectionobserver/takerecords/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef("Intersection Observer API")}}
    -

    {{domxref("IntersectionObserver")}} 的方法takeRecords() 返回一个 {{domxref("IntersectionObserverEntry")}} 对象数组,每个对象的目标元素都包含每次相交的信息,可以显式通过调用此方法或隐式地通过观察者的回调自动调用。

    +

    {{domxref("IntersectionObserver")}} 的方法takeRecords() 返回一个 {{domxref("IntersectionObserverEntry")}} 对象数组,每个对象的目标元素都包含每次相交的信息,可以显式通过调用此方法或隐式地通过观察者的回调自动调用。

    Note: 如果使用回调来监视这些更改,则无需调用此方法。调用此方法会清除挂起的相交状态列表,因此不会运行回调。

    @@ -21,7 +21,7 @@

    参数

    返回值

    -

     {{domxref("IntersectionObserverEntry")}} 对象数组,每个对象包含目标元素与根每次的相交信息。

    +

    {{domxref("IntersectionObserverEntry")}} 对象数组,每个对象包含目标元素与根每次的相交信息。

    diff --git a/files/zh-cn/web/api/intersectionobserverentry/index.html b/files/zh-cn/web/api/intersectionobserverentry/index.html index 9453c17c42b2bb..c759d5a5f5c23e 100644 --- a/files/zh-cn/web/api/intersectionobserverentry/index.html +++ b/files/zh-cn/web/api/intersectionobserverentry/index.html @@ -5,25 +5,25 @@ ---
    {{SeeCompatTable}}{{APIRef("Intersection Observer API")}}
    -

     IntersectionObserverEntry 接口 (从属于 Intersection Observer API ) 描述了目标元素与其根元素容器在某一特定过渡时刻的交叉状态.  IntersectionObserverEntry 的实例作为 entries 参数被传递到一个 {{domxref("IntersectionObserver")}} 的回调函数中; 此外,这些对象只能通过调用{{domxref("IntersectionObserver.takeRecords()")}} 来获取。

    +

    IntersectionObserverEntry 接口 (从属于 Intersection Observer API ) 描述了目标元素与其根元素容器在某一特定过渡时刻的交叉状态. IntersectionObserverEntry 的实例作为 entries 参数被传递到一个 {{domxref("IntersectionObserver")}} 的回调函数中; 此外,这些对象只能通过调用{{domxref("IntersectionObserver.takeRecords()")}} 来获取。

    属性

    {{domxref("IntersectionObserverEntry.boundingClientRect")}} {{readonlyinline}}
    -
    返回包含目标元素的边界信息的{{domxref("DOMRectReadOnly")}}. 边界的计算方式与  {{domxref("Element.getBoundingClientRect()")}} 相同。
    +
    返回包含目标元素的边界信息的{{domxref("DOMRectReadOnly")}}. 边界的计算方式与 {{domxref("Element.getBoundingClientRect()")}} 相同。
    {{domxref("IntersectionObserverEntry.intersectionRatio")}} {{readonlyinline}}
    -
    返回intersectionRect 与 boundingClientRect 的比例值。
    +
    返回intersectionRectboundingClientRect 的比例值。
    {{domxref("IntersectionObserverEntry.intersectionRect")}} {{readonlyinline}}
    返回一个 {{domxref("DOMRectReadOnly")}} 用来描述根和目标元素的相交区域。
    {{domxref("IntersectionObserverEntry.isIntersecting")}} {{ReadOnlyInline}}
    -
    返回一个布尔值,如果目标元素与交叉区域观察者对象 (intersection observer) 的根相交,则返回 true .如果返回 true, 则 IntersectionObserverEntry 描述了变换到交叉时的状态; 如果返回 false, 那么可以由此判断,变换是从交叉状态到非交叉状态。
    +
    返回一个布尔值,如果目标元素与交叉区域观察者对象 (intersection observer) 的根相交,则返回 true .如果返回 true, 则 IntersectionObserverEntry 描述了变换到交叉时的状态; 如果返回 false, 那么可以由此判断,变换是从交叉状态到非交叉状态。
    {{domxref("IntersectionObserverEntry.rootBounds")}} {{readonlyinline}}
    返回一个 {{domxref("DOMRectReadOnly")}} 用来描述交叉区域观察者 (intersection observer) 中的根。
    {{domxref("IntersectionObserverEntry.target")}} {{ReadOnlyInline}}
    -
    与根出现相交区域改变的元素 ({{domxref("Element")}}).
    +
    与根出现相交区域改变的元素 ({{domxref("Element")}}).
    {{domxref("IntersectionObserverEntry.time")}} {{readonlyinline}}
    -
    返回一个记录从 IntersectionObserver 的时间原点 (time origin) 到交叉被触发的时间的时间戳 ({{domxref("DOMHighResTimeStamp")}}).
    +
    返回一个记录从 IntersectionObserver 的时间原点 (time origin) 到交叉被触发的时间的时间戳 ({{domxref("DOMHighResTimeStamp")}}).

    方法

    diff --git a/files/zh-cn/web/api/issecurecontext/index.html b/files/zh-cn/web/api/issecurecontext/index.html index 3565acade38500..711976d7009612 100644 --- a/files/zh-cn/web/api/issecurecontext/index.html +++ b/files/zh-cn/web/api/issecurecontext/index.html @@ -23,7 +23,7 @@

    语法

    类型

    -

     {{domxref("Boolean")}}.

    +

    {{domxref("Boolean")}}.

    规范

    diff --git a/files/zh-cn/web/api/keyboard/index.html b/files/zh-cn/web/api/keyboard/index.html index 1524099802264c..7d18b9e77e2fce 100644 --- a/files/zh-cn/web/api/keyboard/index.html +++ b/files/zh-cn/web/api/keyboard/index.html @@ -16,11 +16,11 @@

    Properties

    Methods

    -
    {{domxref('Keyboard.getLayoutMap()')}} {{experimental_inline}}
    +
    {{domxref('Keyboard.getLayoutMap()')}} {{experimental_inline}}
    Returns a {{jsxref('Promise')}} that resolves with an instance of {{domxref('KeyboardLayoutMap')}} which is a map-like object with functions for retrieving the strings associated with specific physical keys.
    -
    {{domxref('Keyboard.lock()')}} {{experimental_inline}}
    +
    {{domxref('Keyboard.lock()')}} {{experimental_inline}}
    Returns a {{jsxref('Promise')}} after enabling the capture of keypresses for any or all of the keys on the physical keyboard.
    -
    {{domxref('Keyboard.unlock()')}} {{experimental_inline}}
    +
    {{domxref('Keyboard.unlock()')}} {{experimental_inline}}
    Unlocks all keys captured by the lock() method and returns synchronously.
    diff --git a/files/zh-cn/web/api/keyboardevent/altkey/index.html b/files/zh-cn/web/api/keyboardevent/altkey/index.html index a9d50b3534b224..f086991e8430f1 100644 --- a/files/zh-cn/web/api/keyboardevent/altkey/index.html +++ b/files/zh-cn/web/api/keyboardevent/altkey/index.html @@ -11,7 +11,7 @@ ---

    {{APIRef("DOM Events")}}

    -

    KeyboardEvent.altKey 只读属性返回一个 {{jsxref("Boolean")}} 值,表示事件触发时 alt 键 (OS X 系统上的 Option 或  键) 是 (true) 否 (false) 被按下。

    +

    KeyboardEvent.altKey 只读属性返回一个 {{jsxref("Boolean")}} 值,表示事件触发时 alt 键 (OS X 系统上的 Option 键) 是 (true) 否 (false) 被按下。

    语法

    diff --git a/files/zh-cn/web/api/keyboardevent/charcode/index.html b/files/zh-cn/web/api/keyboardevent/charcode/index.html index 11309fc6c0ea00..d16cc32ef945a1 100644 --- a/files/zh-cn/web/api/keyboardevent/charcode/index.html +++ b/files/zh-cn/web/api/keyboardevent/charcode/index.html @@ -12,14 +12,14 @@ ---

    {{ ApiRef("DOM Events") }}{{non-standard_header}}{{deprecated_header}}

    -

    {{domxref("KeyboardEvent.charCode")}} 只读属性,返回 {{ domxref("element.onkeypress", "keypress") }} 事件触发时按下的字符键的字符 Unicode 值。

    +

    {{domxref("KeyboardEvent.charCode")}} 只读属性,返回 {{ domxref("element.onkeypress", "keypress") }} 事件触发时按下的字符键的字符 Unicode 值。

    -

    与这些数值代码等价的常量,请参考 {{ domxref("KeyboardEvent", "KeyEvent") }}.

    +

    与这些数值代码等价的常量,请参考 {{ domxref("KeyboardEvent", "KeyEvent") }}.

    该属性已被废弃,请勿再使用该属性。

    -

    请使用 {{domxref("KeyboardEvent.key")}} 取代。

    +

    请使用 {{domxref("KeyboardEvent.key")}} 取代。

    语法

    @@ -28,7 +28,7 @@

    语法

      -
    • value 被按下的字符键的字符 Unicode 值
    • +
    • value 被按下的字符键的字符 Unicode 值

    示例

    @@ -56,17 +56,17 @@

    示例

    注意

    -

    在{{ domxref("element.onkeypress", "keypress") }} 事件中,按键的 Unicode 值保存在 {{ domxref("event.keyCode", "keyCode") }} 或 {{ domxref("event.charCode", "charCode") }} 属性其中之一,不会二者同时都有。如果按下的是字符键 (例如 'a'), charCode 被设置为字符的代码值,并区分大小写。(即 charCode 会考虑 Shift 键是否被按下)。 否则,被按下的键的代码被存储在 keyCode 中。

    +

    在{{ domxref("element.onkeypress", "keypress") }} 事件中,按键的 Unicode 值保存在 {{ domxref("event.keyCode", "keyCode") }}{{ domxref("event.charCode", "charCode") }} 属性其中之一,不会二者同时都有。如果按下的是字符键 (例如 'a'), charCode 被设置为字符的代码值,并区分大小写。(即 charCode 会考虑 Shift 键是否被按下)。 否则,被按下的键的代码被存储在 keyCode 中。

    -

    如果有一个或多个修饰键被按下,有一些复杂的规则来产生 charCode 的值,细节可参考  Gecko Keypress 事件 。

    +

    如果有一个或多个修饰键被按下,有一些复杂的规则来产生 charCode 的值,细节可参考 Gecko Keypress 事件

    -

    charCode 用于不会在 {{ domxref("element.onkeydown", "keydown") }} 和 {{ domxref("element.onkeyup", "keyup") }} 事件中被设置。这两种情况下,keyCode 会被设置。

    +

    charCode 用于不会在 {{ domxref("element.onkeydown", "keydown") }} 和 {{ domxref("element.onkeyup", "keyup") }} 事件中被设置。这两种情况下,keyCode 会被设置。

    -

    要获取按键代码而不考虑是 keyCode 还是charCode, 请使用 {{ domxref("event.which", "which") }} 属性。

    +

    要获取按键代码而不考虑是 keyCode 还是charCode, 请使用 {{ domxref("event.which", "which") }} 属性。

    -

    通过输入法输入的字符,不会被设置到注册到通过 keyCode 和 charCode。 Actually with the Chinese IME I'm using, entering the IME results in a keypress event with keyCode = 229 and no other key events fire until the IME exits (which may happen after multiple characters are inputted). I'm not sure if other IME's work this way.

    +

    通过输入法输入的字符,不会被设置到注册到通过 keyCodecharCode。 Actually with the Chinese IME I'm using, entering the IME results in a keypress event with keyCode = 229 and no other key events fire until the IME exits (which may happen after multiple characters are inputted). I'm not sure if other IME's work this way.

    -

    要查看特定按键的 charCode 值的列表,运行这个示例页面 Gecko DOM Reference:Examples #Example 7: Displaying Event Object Constants ,然后查看 HTML 表格结果。

    +

    要查看特定按键的 charCode 值的列表,运行这个示例页面 Gecko DOM Reference:Examples #Example 7: Displaying Event Object Constants ,然后查看 HTML 表格结果。

    规范

    diff --git a/files/zh-cn/web/api/keyboardevent/code/index.html b/files/zh-cn/web/api/keyboardevent/code/index.html index a675d6fc202f37..860d0768fc2d8e 100644 --- a/files/zh-cn/web/api/keyboardevent/code/index.html +++ b/files/zh-cn/web/api/keyboardevent/code/index.html @@ -62,7 +62,7 @@

    HTML

    <p>Use the WASD (ZQSD on AZERTY) keys to move and steer.</p>
     <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="world">
    -  <polygon id="spaceship" points="15,0 0,30 30,30"/>
    +  <polygon id="spaceship" points="15,0 0,30 30,30"/>
     </svg>
     <script>refresh();</script>
     
    @@ -202,7 +202,7 @@

    Code values on Windows

    - + @@ -1075,8 +1075,8 @@

    Code values on Windows

    - - + + @@ -1146,7 +1146,7 @@

    Code values on Windows

    Prior to Firefox 48, this key code is reported as "VolumeDown".

    - + @@ -1168,7 +1168,7 @@

    Code values on Windows

    Prior to Firefox 48, this key code is reported as "VolumeUp".

    - + @@ -1802,18 +1802,18 @@

    Code values on Mac

    - - + + - - + + - - + + @@ -2629,18 +2629,18 @@

    Code values on

    - - + + - - + + - - + + diff --git a/files/zh-cn/web/api/keyboardevent/ctrlkey/index.html b/files/zh-cn/web/api/keyboardevent/ctrlkey/index.html index 540548ddb9f11e..d7e5507c89402d 100644 --- a/files/zh-cn/web/api/keyboardevent/ctrlkey/index.html +++ b/files/zh-cn/web/api/keyboardevent/ctrlkey/index.html @@ -11,7 +11,7 @@ ---

    {{APIRef("DOM Events")}}

    -

    KeyboardEvent.ctrlKey 只读属性返回一个 {{jsxref("Boolean")}} 值,表示事件触发时 control 键是 (true) 否 (false) 按下。

    +

    KeyboardEvent.ctrlKey 只读属性返回一个 {{jsxref("Boolean")}} 值,表示事件触发时 control 键是 (true) 否 (false) 按下。

    语法

    diff --git a/files/zh-cn/web/api/keyboardevent/index.html b/files/zh-cn/web/api/keyboardevent/index.html index 745a826d7aa344..1d13bc1dd366a2 100644 --- a/files/zh-cn/web/api/keyboardevent/index.html +++ b/files/zh-cn/web/api/keyboardevent/index.html @@ -15,24 +15,24 @@ ---

    {{APIRef("DOM Events")}}

    -

    KeyboardEvent 对象描述了用户与键盘的交互。 每个事件都描述了用户与一个按键(或一个按键和修饰键的组合)的单个交互;事件类型keydownkeypresskeyup 用于识别不同的键盘活动类型。

    +

    KeyboardEvent 对象描述了用户与键盘的交互。 每个事件都描述了用户与一个按键(或一个按键和修饰键的组合)的单个交互;事件类型keydownkeypresskeyup 用于识别不同的键盘活动类型。

    -
     注意:KeyboardEvent 只在低级别提示用户与一个键盘按键的交互是什么,不涉及这个交互的上下文含义。 当你需要处理文本输入的时候,使用 {{event("input")}} 事件代替。用户使用其他方式输入文本时,如使用平板电脑的手写系统或绘图板, 键盘事件可能不会触发。
    +
    注意:KeyboardEvent 只在低级别提示用户与一个键盘按键的交互是什么,不涉及这个交互的上下文含义。 当你需要处理文本输入的时候,使用 {{event("input")}} 事件代替。用户使用其他方式输入文本时,如使用平板电脑的手写系统或绘图板, 键盘事件可能不会触发。

    构造函数

    {{domxref("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}
    -
    创建一个 KeyboardEvent 对象。
    +
    创建一个 KeyboardEvent 对象。

    常量

    -

    KeyboardEvent 接口定义了以下常量。

    +

    KeyboardEvent 接口定义了以下常量。

    键盘定位

    -

    下述常量用于识别产生按键事件的键盘位置,以类似 KeyboardEvent.DOM_KEY_LOCATION_STANDARD 的形式来访问。

    +

    下述常量用于识别产生按键事件的键盘位置,以类似 KeyboardEvent.DOM_KEY_LOCATION_STANDARD 的形式来访问。

      KeyboardEvent.code value
    0xE020"AudioVolumeMute" (was "VolumeMute" until Firefox 49)"AudioVolumeMute" (was "VolumeMute" until Chrome 50)"AudioVolumeMute" (was "VolumeMute" until Firefox 49)"AudioVolumeMute" (was "VolumeMute" until Chrome 50)
    0xE021 "VolumeDown" (was "VolumeDown" until Chrome 50)"VolumeDown" (was "VolumeDown" until Chrome 50)
    0xE02F "VolumeUp" (was "VolumeUp" until Chrome 50)"VolumeUp" (was "VolumeUp" until Chrome 50)
    0xE031
    kVK_VolumeUp (0x48)"AudioVolumeUp" (was "VolumeUp" until Firefox 48)"AudioVolumeUp" (was "VolumeUp" until Chrome 50)"AudioVolumeUp" (was "VolumeUp" until Firefox 48)"AudioVolumeUp" (was "VolumeUp" until Chrome 50)
    kVK_VolumeDown (0x49)"AudioVolumeDown" (was "VolumeDown" until Firefox 49)"AudioVolumeDown" (was "VolumeDown" until Chrome 50)"AudioVolumeDown" (was "VolumeDown" until Firefox 49)"AudioVolumeDown" (was "VolumeDown" until Chrome 50)
    kVK_Mute (0x4A)"AudioVolumeMute" (was "VolumeMute" until Firefox 49)"AudioVolumeMute" (was "VolumeMute" until Chrome 50)"AudioVolumeMute" (was "VolumeMute" until Firefox 49)"AudioVolumeMute" (was "VolumeMute" until Chrome 50)
    kVK_ANSI_KeypadDivide (0x4B)
    0x0079"AudioVolumeMute" (was "VolumeMute" until Firefox 49)"AudioVolumeMute" (was "VolumeMute" until Chrome 50)"AudioVolumeMute" (was "VolumeMute" until Firefox 49)"AudioVolumeMute" (was "VolumeMute" until Chrome 50)
    0x007A"AudioVolumeDown" (was "VolumeDown" until Firefox 49)"AudioVolumeDown" (was "VolumeDown" until Chrome 50)"AudioVolumeDown" (was "VolumeDown" until Firefox 49)"AudioVolumeDown" (was "VolumeDown" until Chrome 50)
    0x007B"AudioVolumeUp" (was "VolumeUp" until Firefox 49)"AudioVolumeUp" (was "VolumeUp" until Chrome 50)"AudioVolumeUp" (was "VolumeUp" until Firefox 49)"AudioVolumeUp" (was "VolumeUp" until Chrome 50)
    0x007C
    @@ -92,13 +92,13 @@

    属性

    {{domxref("KeyboardEvent.altKey")}} {{Readonlyinline}}
    -
    返回一个 {{jsxref("Boolean")}},如果按键事件产生时, Alt (OS X 中是 Option 或  )键被按下,则该值为 true 。
    +
    返回一个 {{jsxref("Boolean")}},如果按键事件产生时, Alt (OS X 中是 Option )键被按下,则该值为 true
    {{domxref("KeyboardEvent.code")}} {{Readonlyinline}}
    返回一个 {{domxref("DOMString")}},其 code 值代表触发事件的物理按键。
    警告:这个属性会忽略用户的键盘布局,所以如果用户在 QWERTY 布局的键盘上按下“Y”位置(第一行字母按键的中间)的按键时,这个属性会返回“KeyY”,即使用户使用 QWERTZ 布局的键盘(此时用户输入的就是“Z”,其他属性也会提示“Z”)或 Dvorak 键盘(此时用户输入的就是“F”)也是如此。
    {{domxref("KeyboardEvent.ctrlKey")}} {{Readonlyinline}}
    -
    返回一个 {{jsxref("Boolean")}},如果按键事件发生时 Ctrl 键被按下,则该值为 true 。
    +
    返回一个 {{jsxref("Boolean")}},如果按键事件发生时 Ctrl 键被按下,则该值为 true
    {{domxref("KeyboardEvent.isComposing")}} {{Readonlyinline}}
    Returns a {{jsxref("Boolean")}} that is true if the event is fired between after compositionstart and before compositionend.
    {{domxref("KeyboardEvent.key")}} {{Readonlyinline}}
    @@ -262,22 +262,22 @@

    示例

    } if (event.ctrlKey) { -    // Even though event.key is not 'Control' (e.g., 'a' is pressed), -    // event.ctrlKey may be true if Ctrl key is pressed at the same time. -    alert(`Combination of ctrlKey + ${keyName}`); -  } else { -    alert(`Key pressed ${keyName}`); -  } + // Even though event.key is not 'Control' (e.g., 'a' is pressed), + // event.ctrlKey may be true if Ctrl key is pressed at the same time. + alert(`Combination of ctrlKey + ${keyName}`); + } else { + alert(`Key pressed ${keyName}`); + } }, false); document.addEventListener('keyup', (event) => { -  const keyName = event.key; + const keyName = event.key; -  // As the user releases the Ctrl key, the key is no longer active, -  // so event.ctrlKey is false. -  if (keyName === 'Control') { -    alert('Control key was released'); -  } + // As the user releases the Ctrl key, the key is no longer active, + // so event.ctrlKey is false. + if (keyName === 'Control') { + alert('Control key was released'); + } }, false); </script> diff --git a/files/zh-cn/web/api/keyboardevent/initkeyevent/index.html b/files/zh-cn/web/api/keyboardevent/initkeyevent/index.html index a396df018a66a8..04571932266da5 100644 --- a/files/zh-cn/web/api/keyboardevent/initkeyevent/index.html +++ b/files/zh-cn/web/api/keyboardevent/initkeyevent/index.html @@ -9,7 +9,7 @@ - 参考 translation_of: Web/API/KeyboardEvent/initKeyEvent --- -

     

    +

    {{ ApiRef("DOM Events") }}{{non-standard_header}}{{deprecated_header}}

    @@ -82,4 +82,4 @@

    Specification

    keyLocationArg of type unsigned long modifiersList of type DOMString); -

     

    +

    diff --git a/files/zh-cn/web/api/keyboardevent/iscomposing/index.html b/files/zh-cn/web/api/keyboardevent/iscomposing/index.html index 2fa8ca5c8d15e9..62ac195f6ba372 100644 --- a/files/zh-cn/web/api/keyboardevent/iscomposing/index.html +++ b/files/zh-cn/web/api/keyboardevent/iscomposing/index.html @@ -11,7 +11,7 @@ ---

    {{APIRef("DOM Events")}}

    -

    KeyboardEvent.isComposing 只读属性,返回一个 {{jsxref("Boolean")}} 值,表示该事件是否在 {{event("compositionstart")}} 之后和 {{event("compositionend")}} 之前被触发。

    +

    KeyboardEvent.isComposing 只读属性,返回一个 {{jsxref("Boolean")}} 值,表示该事件是否在 {{event("compositionstart")}} 之后和 {{event("compositionend")}} 之前被触发。

    语法

    diff --git a/files/zh-cn/web/api/keyboardevent/key/index.html b/files/zh-cn/web/api/keyboardevent/key/index.html index 49652253fd2d44..fbd22b64beb155 100644 --- a/files/zh-cn/web/api/keyboardevent/key/index.html +++ b/files/zh-cn/web/api/keyboardevent/key/index.html @@ -10,31 +10,31 @@ ---

    {{APIRef("DOM Events")}}

    -

    只读属性 KeyboardEvent.key 返回用户按下的物理按键的值。它还与 shiftKey 等调节性按键的状态和键盘的区域 / 和布局有关。它的值由以下因素决定:

    +

    只读属性 KeyboardEvent.key 返回用户按下的物理按键的值。它还与 shiftKey 等调节性按键的状态和键盘的区域 / 和布局有关。它的值由以下因素决定:

    • 如果按下的键拥有可打印的内容,则返回一个非空的 Unicode 字符来代表这个键的可打印内容。
    • 如果按下的键是一个控制键或特殊字符,则返回一个事先定义好的值,见预定义键值列表
    • -
    • 如果 KeyboardEvent 显示按下的键是一个死键(dead key),则键值为 "Dead"
    • -
    • 有些特殊键盘的键(比如多媒体键盘上用来控制媒体播放的扩展按键)在 Windows 下会触发 WM_APPCOMMAND 事件,而不会产生按键代码。虽然没有按键代码,这些事件将映射到 DOM 键盘事件中,并将列入 Windows 的“虚拟按键码”列表中。
    • -
    • 如果按键无法识别,则返回 "Unidentified"
    • +
    • 如果 KeyboardEvent 显示按下的键是一个死键(dead key),则键值为 "Dead"
    • +
    • 有些特殊键盘的键(比如多媒体键盘上用来控制媒体播放的扩展按键)在 Windows 下会触发 WM_APPCOMMAND 事件,而不会产生按键代码。虽然没有按键代码,这些事件将映射到 DOM 键盘事件中,并将列入 Windows 的“虚拟按键码”列表中。
    • +
    • 如果按键无法识别,则返回 "Unidentified"

    KeyboardEvent 次序

    -

    KeyboardEvent 事件以一个预设的次序触发,理解这一点对于理解特定 KeyboardEventkey 属性值大有帮助。对于一个给定的按键操作,KeyboardEvent 将假定 {{domxref("Event.preventDefault")}} 未调用并按下面次序触发:

    +

    KeyboardEvent 事件以一个预设的次序触发,理解这一点对于理解特定 KeyboardEventkey 属性值大有帮助。对于一个给定的按键操作,KeyboardEvent 将假定 {{domxref("Event.preventDefault")}} 未调用并按下面次序触发:

    1. 首先触发 {{event("keydown")}} 事件。如果按键长按且生成一个字符,则事件将以一个与平台实现方式相关的时间间隔持续发出,同时将只读属性 {{domxref("KeyboardEvent.repeat")}} 设定为 true
    2. -
    3. 如果按键生成的字符即将插入某个 {{HTMLElement("input")}}、{{HTMLElement("textarea")}} 或其它某个 {{domxref("HTMLElement.contentEditable")}} 设为 true 的元素,则依次触发 {{event("beforeinput")}}、{{event("input")}}事件。注意某些实现中若支持 {{event("keypress")}} 事件则可能将其触发。当按键长按时重复触发。
    4. +
    5. 如果按键生成的字符即将插入某个 {{HTMLElement("input")}}、{{HTMLElement("textarea")}} 或其它某个 {{domxref("HTMLElement.contentEditable")}} 设为 true 的元素,则依次触发 {{event("beforeinput")}}、{{event("input")}}事件。注意某些实现中若支持 {{event("keypress")}} 事件则可能将其触发。当按键长按时重复触发。
    6. 当按键松开时触发 {{event("keyup")}} 事件。操作结束。
    -

    在次序 1、3 中,KeyboardEvent.key 属性按照事先定义的规则设定为恰当的值。

    +

    在次序 1、3 中,KeyboardEvent.key 属性按照事先定义的规则设定为恰当的值。

    KeyboardEvent 次序示例

    @@ -50,11 +50,11 @@

    KeyboardEvent 次序示例

    HTML

    <div class="flex flex-left">
    -    <textarea rows="5" id="test-target"></textarea>
    -    <button id="btn-clear-console">清空控制台</button>
    +    <textarea rows="5" id="test-target"></textarea>
    +    <button id="btn-clear-console">清空控制台</button>
     </div>
     <div class="flex flex-right">
    -    <div id="console-log"></div>
    +    <div id="console-log"></div>
     </div>
     <script src="main.js"></script>
    @@ -102,36 +102,36 @@

    JavaScript

    btnClearConsole = document.getElementById('btn-clear-console'); function logMessage(message) { -  let p = document.createElement('p'); -  p.appendChild(document.createTextNode(message)); -  consoleLog.appendChild(p); + let p = document.createElement('p'); + p.appendChild(document.createTextNode(message)); + consoleLog.appendChild(p); } textarea.addEventListener('keydown', (e) => { -  if (!e.repeat) -    logMessage(`第一个 keydown 事件。key 属性的值为"${e.key}"`); -  else -    logMessage(`keydown 事件重复。key 属性的值为"${e.key}"`); + if (!e.repeat) + logMessage(`第一个 keydown 事件。key 属性的值为"${e.key}"`); + else + logMessage(`keydown 事件重复。key 属性的值为"${e.key}"`); }); textarea.addEventListener('beforeinput', (e) => { -  logMessage(`beforeinput 事件。你准备输入"${e.data}"`); + logMessage(`beforeinput 事件。你准备输入"${e.data}"`); }); textarea.addEventListener('input', (e) => { -  logMessage(`input 事件。你刚刚输入了"${e.data}"`); + logMessage(`input 事件。你刚刚输入了"${e.data}"`); }); textarea.addEventListener('keyup', (e) => { -  logMessage(`keyup 事件。key 属性的值为"${e.key}"`); + logMessage(`keyup 事件。key 属性的值为"${e.key}"`); }); btnClearConsole.addEventListener('click', (e) => { -  let child = consoleLog.firstChild; -  while (child) { -   consoleLog.removeChild(child); -   child = consoleLog.firstChild; -  } + let child = consoleLog.firstChild; + while (child) { + consoleLog.removeChild(child); + child = consoleLog.firstChild; + } });

    运行结果

    @@ -209,21 +209,21 @@
    Key

    用例 1

    -

    当按下 shift 键时,首先触发 {{event("keydown")}} 事件,然后将 key 属性的值设为 "Shift" 字符串。如果继续长按 shift 键,由于不会生成字符按键值,{{event("keydown")}} 事件不会继续重复触发。

    +

    当按下 shift 键时,首先触发 {{event("keydown")}} 事件,然后将 key 属性的值设为 "Shift" 字符串。如果继续长按 shift 键,由于不会生成字符按键值,{{event("keydown")}} 事件不会继续重复触发。

    -

    当按下 key 2 时,另一个 {{event("keydown")}} 事件将会为这个新的按键动作触发,若使用的是美式键盘,它的 key 属性将被设为 "@" 字符,若为英式键盘,则会设为 """ 字符。这是因为 key 属性 "shift" 处于激活状态。由于生成了一个字符的按键值,{{event("beforeinput")}} 和 {{event("input")}} 事件随后触发。

    +

    当按下 key 2 时,另一个 {{event("keydown")}} 事件将会为这个新的按键动作触发,若使用的是美式键盘,它的 key 属性将被设为 "@" 字符,若为英式键盘,则会设为 """ 字符。这是因为 key 属性 "shift" 处于激活状态。由于生成了一个字符的按键值,{{event("beforeinput")}} 和 {{event("input")}} 事件随后触发。

    松开 key 2 时,{{event("keyup")}} 事件将触发,key 属性将会为不同键盘布局设定合适的字符值,比如 "@""""

    -

    最后在松开 shift 键时,另一个 {{event("keyup")}} 事件触发,key 值将保持 "Shift" 不变。

    +

    最后在松开 shift 键时,另一个 {{event("keyup")}} 事件触发,key 值将保持 "Shift" 不变。

    用例 2

    -

    当按下 shift 键时,首先触发 {{event("keydown")}} 事件,然后将 key 属性的值设为 "Shift" 字符串。如果继续长按 shift 键,由于不会生成字符按键值,{{event("keydown")}} 事件不会继续重复触发。

    +

    当按下 shift 键时,首先触发 {{event("keydown")}} 事件,然后将 key 属性的值设为 "Shift" 字符串。如果继续长按 shift 键,由于不会生成字符按键值,{{event("keydown")}} 事件不会继续重复触发。

    -

    当按下 key 2 时,另一个 {{event("keydown")}} 事件将会为这个新的按键动作触发,若使用的是美式键盘,它的 key 属性将被设为 "@" 字符,若为英式键盘,则会设为 """ 字符。这是因上档键处于激活状态。由于生成了一个字符的按键值,{{event("beforeinput")}} 和 {{event("input")}} 事件随后触发。如果继续长按 2 键,则 {{event("keydown")}} 事件将持续重复触发,同时将 {{domxref("KeyboardEvent.repeat")}} 属性设置为 true。{{event("beforeinput")}} 和 {{event("input")}} 事件也将持续重复触发。

    +

    当按下 key 2 时,另一个 {{event("keydown")}} 事件将会为这个新的按键动作触发,若使用的是美式键盘,它的 key 属性将被设为 "@" 字符,若为英式键盘,则会设为 """ 字符。这是因上档键处于激活状态。由于生成了一个字符的按键值,{{event("beforeinput")}} 和 {{event("input")}} 事件随后触发。如果继续长按 2 键,则 {{event("keydown")}} 事件将持续重复触发,同时将 {{domxref("KeyboardEvent.repeat")}} 属性设置为 true。{{event("beforeinput")}} 和 {{event("input")}} 事件也将持续重复触发。

    -

    当松开 shift 键时,{{event("keyup")}} 事件随之触发,且 key 属性保留为 "Shift"。此时请注意为  key 2 长按触发的重复 keydown 事件的 key 值会变成 "2",因为上档键不再处于激活状态。{{event("beforeinput")}} 与 {{event("input")}} 事件的 {{domxref("InputEvent.data")}} 属性同理。

    +

    当松开 shift 键时,{{event("keyup")}} 事件随之触发,且 key 属性保留为 "Shift"。此时请注意为 key 2 长按触发的重复 keydown 事件的 key 值会变成 "2",因为上档键不再处于激活状态。{{event("beforeinput")}} 与 {{event("input")}} 事件的 {{domxref("InputEvent.data")}} 属性同理。

    最终 key 2 松开,{{event("keyup")}} 事件触发,但两种键盘布局的 key 属性均为 "2"。就是因为没有激活上档键。

    diff --git a/files/zh-cn/web/api/keyboardevent/keyboardevent/index.html b/files/zh-cn/web/api/keyboardevent/keyboardevent/index.html index 33d0340df758bf..2fcf72bfb3a91a 100644 --- a/files/zh-cn/web/api/keyboardevent/keyboardevent/index.html +++ b/files/zh-cn/web/api/keyboardevent/keyboardevent/index.html @@ -10,7 +10,7 @@ ---

    {{APIRef("DOM Events")}}

    -

    KeyboardEvent() 构造函数新建一个 {{domxref("KeyboardEvent")}} 实例。

    +

    KeyboardEvent() 构造函数新建一个 {{domxref("KeyboardEvent")}} 实例。

    语法

    @@ -25,25 +25,25 @@

    -
    KeyboardEventInit 字典,有以下几种值: +
    KeyboardEventInit 字典,有以下几种值:
      -
    • "key", 可选,默认为 "",  {{domxref("DOMString")}} 类型,设置 {{domxref("KeyboardEvent.key")}} 的值。
    • +
    • "key", 可选,默认为 "", {{domxref("DOMString")}} 类型,设置 {{domxref("KeyboardEvent.key")}} 的值。
    • "code", 可选,默认为 "", {{domxref("DOMString")}} 类型,设置{{domxref("KeyboardEvent.code")}} 的值。
    • -
    • "location", 可选,默认为 0,  unsigned long类型,设置 {{domxref("KeyboardEvent.location")}} 的值。
    • +
    • "location", 可选,默认为 0, unsigned long类型,设置 {{domxref("KeyboardEvent.location")}} 的值。
    • "ctrlKey", 可选,默认为 false, {{jsxref("Boolean")}} 类型,设置 {{domxref("KeyboardEvent.ctrlKey")}} 的值。
    • "shiftKey", 可选,默认为 false, {{jsxref("Boolean")}} 类型,设置{{domxref("KeyboardEvent.shiftKey")}} 的值。
    • "altKey", 可选,默认为 false, {{jsxref("Boolean")}} 类型,设置 {{domxref("KeyboardEvent.altKey")}} 的值。
    • "metaKey", 可选,默认为 false, {{jsxref("Boolean")}} 类型,设置 {{domxref("KeyboardEvent.metaKey")}} 的值。
    • "repeat", 可选,默认为 false, {{jsxref("Boolean")}} 类型,设置 {{domxref("KeyboardEvent.repeat")}} 的值。
    • "isComposing", 可选,默认为 false, {{jsxref("Boolean")}} 类型,设置 {{domxref("KeyboardEvent.isComposing")}} 的值。
    • -
    • "charCode", 可选,默认为 0, unsigned long 类型,设置 {{domxref("KeyboardEvent.charCode")}} (已废弃) 的值。
    • -
    • "keyCode", 可选,默认为 0, unsigned long 类型,设置{{domxref("KeyboardEvent.keyCode")}} (已废弃) 的值。
    • -
    • "which", 可选,默认为 0, unsigned long 类型,设置{{domxref("KeyboardEvent.which")}} (已废弃) 的值。
    • +
    • "charCode", 可选,默认为 0, unsigned long 类型,设置 {{domxref("KeyboardEvent.charCode")}} (已废弃) 的值。
    • +
    • "keyCode", 可选,默认为 0, unsigned long 类型,设置{{domxref("KeyboardEvent.keyCode")}} (已废弃) 的值。
    • +
    • "which", 可选,默认为 0, unsigned long 类型,设置{{domxref("KeyboardEvent.which")}} (已废弃) 的值。
    -

    KeyboardEventInit 字典也可以接受来自 {{domxref("UIEvent.UIEvent", "UIEventInit")}} 和 {{domxref("Event.Event", "EventInit")}} 的字典字段值。

    +

    KeyboardEventInit 字典也可以接受来自 {{domxref("UIEvent.UIEvent", "UIEventInit")}} 和 {{domxref("Event.Event", "EventInit")}} 的字典字段值。

    @@ -59,5 +59,5 @@

    浏览器兼容性

    参考

      -
    • {{domxref("KeyboardEvent")}} 构造的相关对象的接口
    • +
    • {{domxref("KeyboardEvent")}} 构造的相关对象的接口
    diff --git a/files/zh-cn/web/api/keyboardevent/keycode/index.html b/files/zh-cn/web/api/keyboardevent/keycode/index.html index c2a2df32383bff..02a2083b9c01e6 100644 --- a/files/zh-cn/web/api/keyboardevent/keycode/index.html +++ b/files/zh-cn/web/api/keyboardevent/keycode/index.html @@ -5,9 +5,9 @@ ---

    {{APIRef("DOM Events")}}{{deprecated_header()}}

    -

    这个只读的属性 KeyboardEvent.keyCode 代表着一个唯一标识的所按下的键的未修改值,它依据于一个系统和实现相关的数字代码。这通常是与密钥对应的二进制的 ASCII ({{RFC(20)}}) 或 Windows 1252 码。如果这个键不能被标志,这个值为 0。

    +

    这个只读的属性 KeyboardEvent.keyCode 代表着一个唯一标识的所按下的键的未修改值,它依据于一个系统和实现相关的数字代码。这通常是与密钥对应的二进制的 ASCII ({{RFC(20)}}) 或 Windows 1252 码。如果这个键不能被标志,这个值为 0。

    -

    你应该尽量避免使用它;它已经被弃用了一段时间。相反的,如果它在你的浏览器中被实现了的话,你应该使用{{domxref("KeyboardEvent.code")}}。 不幸的是,有一些浏览器还是没有实现它,所以你在使用之前必须要小心,确认你所使用的那个被所有目标浏览器所支持。

    +

    你应该尽量避免使用它;它已经被弃用了一段时间。相反的,如果它在你的浏览器中被实现了的话,你应该使用{{domxref("KeyboardEvent.code")}}。 不幸的是,有一些浏览器还是没有实现它,所以你在使用之前必须要小心,确认你所使用的那个被所有目标浏览器所支持。

    在处理 keydown 和 keyup 事件时,Web 开发人员不应使用可打印字符的 keycode 属性。如上所述,keycode 属性对可打印字符不有用,尤其是那些按下 shift 或 alt 键的输入。在实现快捷键处理程序时,事件(“keypress”)事件通常更好(至少当 gecko 是正在使用的运行时)。详情请参见 Gecko 按键事件。

    @@ -340,7 +340,7 @@

    标准位置的可打印键

    - + @@ -772,7 +772,7 @@

    标准位置的可打印键

    - + @@ -976,7 +976,7 @@

    标准位置的可打印键

    + diff --git a/files/zh-cn/web/api/keyboardevent/location/index.html b/files/zh-cn/web/api/keyboardevent/location/index.html index de34ea398286f7..9b2c00b5a7cbb8 100644 --- a/files/zh-cn/web/api/keyboardevent/location/index.html +++ b/files/zh-cn/web/api/keyboardevent/location/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef("DOM Events")}}
    -

    KeyboardEvent.location 是一个只读属性,返回一个无符号的长整型 unsigned long,表示按键在键盘或其他设备上的位置

    +

    KeyboardEvent.location 是一个只读属性,返回一个无符号的长整型 unsigned long,表示按键在键盘或其他设备上的位置

    可选值:

    diff --git a/files/zh-cn/web/api/keyboardevent/metakey/index.html b/files/zh-cn/web/api/keyboardevent/metakey/index.html index a9339a1a73684d..0babd759f444dd 100644 --- a/files/zh-cn/web/api/keyboardevent/metakey/index.html +++ b/files/zh-cn/web/api/keyboardevent/metakey/index.html @@ -8,10 +8,10 @@ ---

    {{APIRef("DOM Events")}}

    -

    KeyboardEvent.metaKey 为只读属性,返回一个 {{jsxref("Boolean", "布尔值")}},在事件发生时,用于指示 Meta 键是按下状态(true),还是释放状态(false)。

    +

    KeyboardEvent.metaKey 为只读属性,返回一个 {{jsxref("Boolean", "布尔值")}},在事件发生时,用于指示 Meta 键是按下状态(true),还是释放状态(false)。

    -

    备注:在 MAC 键盘上,表示 Command 键(),在 Windows 键盘上,表示 Windows 键()。

    +

    备注:在 MAC 键盘上,表示 Command 键(),在 Windows 键盘上,表示 Windows 键()。

    语法

    diff --git a/files/zh-cn/web/api/keyboardevent/shiftkey/index.html b/files/zh-cn/web/api/keyboardevent/shiftkey/index.html index 5725df28a20fc5..b7f3d39e07a435 100644 --- a/files/zh-cn/web/api/keyboardevent/shiftkey/index.html +++ b/files/zh-cn/web/api/keyboardevent/shiftkey/index.html @@ -11,7 +11,7 @@ ---

    {{APIRef("DOM Events")}}

    -

    KeyboardEvent.shiftKey 只读属性返回一个 {{jsxref("Boolean")}} 值,表示事件触发时 shift 键是 (true) 否 (false) 按下。

    +

    KeyboardEvent.shiftKey 只读属性返回一个 {{jsxref("Boolean")}} 值,表示事件触发时 shift 键是 (true) 否 (false) 按下。

    语法

    diff --git a/files/zh-cn/web/api/keyframeeffect/keyframeeffect/index.html b/files/zh-cn/web/api/keyframeeffect/keyframeeffect/index.html index 16fd91e84ee073..86f49b250714d2 100644 --- a/files/zh-cn/web/api/keyframeeffect/keyframeeffect/index.html +++ b/files/zh-cn/web/api/keyframeeffect/keyframeeffect/index.html @@ -6,10 +6,10 @@ ---
    {{ SeeCompatTable() }}{{ APIRef("Web Animations") }}
    -

    这个{{domxref("EffectTiming")}} 词的 easing 属性在 Web Animations API 指定用于缩放时间以产生缓和效果的计时函数,easing 是动画随时间变化的速率。

    +

    这个{{domxref("EffectTiming")}} 词的 easing 属性在 Web Animations API 指定用于缩放时间以产生缓和效果的计时函数,easing 是动画随时间变化的速率。

    -

    {{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}}, and {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} all accept an object of timing properties including easing. The value of easing corresponds directly to {{domxref("AnimationEffectTimingReadOnly.easing")}} in {{domxref("AnimationEffectReadOnly.timing", "timing")}} objects returned by {{domxref("AnimationEffectReadOnly")}}, {{domxref("KeyframeEffectReadOnly")}}, and {{domxref("KeyframeEffect")}}.

    +

    {{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}}, and {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} all accept an object of timing properties including easing. The value of easing corresponds directly to {{domxref("AnimationEffectTimingReadOnly.easing")}} in {{domxref("AnimationEffectReadOnly.timing", "timing")}} objects returned by {{domxref("AnimationEffectReadOnly")}}, {{domxref("KeyframeEffectReadOnly")}}, and {{domxref("KeyframeEffect")}}.

    Syntax

    @@ -23,22 +23,22 @@

    Syntax

    Value

    -

    A string defining the timing function to use for easing transitions during the animation process. Accepts several pre-defined {{domxref("DOMString")}} values, a steps() timing function like steps(5, end), or a custom cubic-bezier value like cubic-bezier(0.42, 0, 0.58, 1). Defaults to linear. Available values include:

    +

    A string defining the timing function to use for easing transitions during the animation process. Accepts several pre-defined {{domxref("DOMString")}} values, a steps() timing function like steps(5, end), or a custom cubic-bezier value like cubic-bezier(0.42, 0, 0.58, 1). Defaults to linear. Available values include:

    linear
    -
    A constant rate of change, neither accelerating nor deccelerating. 
    +
    A constant rate of change, neither accelerating nor deccelerating.
    cubic-bezier(<number>, <number>, <number>, <number>)
    A diagram showing the points of a cubic bezier timing function.
    Specifies a cubic Bézier timing function. The four numbers specify points P1 and P2 of the curve as (x1, y1, x2, y2). Both x values must be in the range [0, 1] or the definition is invalid.
    ease
    -
    A decelerated rate of change, going from fast to slow. Equivalent to cubic-bezier(0.25, 0.1, 0.25, 1).
    +
    A decelerated rate of change, going from fast to slow. Equivalent to cubic-bezier(0.25, 0.1, 0.25, 1).
    ease-in
    An accelerated rate of change, going from slow to fast. Equivalent to cubic-bezier(0.42, 0, 1, 1).
    ease-out
    变化速率变慢了,从快到慢, 等价于cubic-bezier(0, 0, 0.58, 1).
    ease-in-out
    -
    This rate of change speeds up in the middle. Equivalent to cubic-bezier(0.42, 0, 0.58, 1).
    +
    This rate of change speeds up in the middle. Equivalent to cubic-bezier(0.42, 0, 0.58, 1).
    frames(<integer>)
    Specifies a frames timing function, which breaks the animation down into a number of equal time intervals but also displays the start (0%) and end (100%) states for an equal amount of time to the other intervals. The browser flips to a different static frame when each interval is reached, rather than animating smoothly. See GitHub for a simple example that illustrates the difference between steps() and frames().
    steps(<integer>[, [ start | end ] ]?)
    @@ -52,7 +52,7 @@

    Value

    Examples

    -

    In the Red Queen's Race example, we animate Alice and the Red Queen by passing an easing of steps(7, end) to animate():

    +

    In the Red Queen's Race example, we animate Alice and the Red Queen by passing an easing of steps(7, end) to animate():

    // Define the key frames
     var spriteFrames = [
    @@ -85,7 +85,7 @@ 

    See also

    • Web Animations API
    • -
    • {{domxref("Element.animate()")}}, {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}}, and {{domxref("AnimationEffect.updateTiming()")}} all accept an object of timing properties including this one.
    • -
    • The value of this property corresponds to the one in {{domxref("EffectTiming")}} (which is returned from {{domxref("AnimationEffect.getTiming()")}} and {{domxref("AnimationEffect.getComputedTiming()")}}).
    • +
    • {{domxref("Element.animate()")}}, {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}}, and {{domxref("AnimationEffect.updateTiming()")}} all accept an object of timing properties including this one.
    • +
    • The value of this property corresponds to the one in {{domxref("EffectTiming")}} (which is returned from {{domxref("AnimationEffect.getTiming()")}} and {{domxref("AnimationEffect.getComputedTiming()")}}).
    • CSS's animation-timing-function and transition-timing-function.
    diff --git a/files/zh-cn/web/api/location/hash/index.html b/files/zh-cn/web/api/location/hash/index.html index a25d361e15e75d..c018d67a5a528d 100644 --- a/files/zh-cn/web/api/location/hash/index.html +++ b/files/zh-cn/web/api/location/hash/index.html @@ -5,7 +5,7 @@ ---
    {{ APIRef("Location") }}
    -

    {{domxref("Location")}} 接口的 hash 属性返回一个 {{domxref("USVString")}},其中会包含 URL 标识中的 '#' 和 后面 URL 片段标识符。

    +

    {{domxref("Location")}} 接口的 hash 属性返回一个 {{domxref("USVString")}},其中会包含 URL 标识中的 '#' 和 后面 URL 片段标识符。

    这里 fragment 不会经过百分比编码(URL 编码)。如果 URL 中没有 fragment,该属性会包含一个空字符串,""

    diff --git a/files/zh-cn/web/api/location/host/index.html b/files/zh-cn/web/api/location/host/index.html index ac4de5ad7d8fc1..1aa42003fdb32a 100644 --- a/files/zh-cn/web/api/location/host/index.html +++ b/files/zh-cn/web/api/location/host/index.html @@ -5,7 +5,7 @@ ---
    {{ApiRef("Location")}}
    -

    {{domxref("Location")}} 接口的 host 属性是包含了主机的一段 {{domxref("USVString")}},其中包含:主机名,如果 URL 的端口号是非空的,还会跟上一个 ':' ,最后是 URL 的端口号。

    +

    {{domxref("Location")}} 接口的 host 属性是包含了主机的一段 {{domxref("USVString")}},其中包含:主机名,如果 URL 的端口号是非空的,还会跟上一个 ':' ,最后是 URL 的端口号。

    Syntax

    diff --git a/files/zh-cn/web/api/location/hostname/index.html b/files/zh-cn/web/api/location/hostname/index.html index 036e140469df63..3b1eccc8769fd8 100644 --- a/files/zh-cn/web/api/location/hostname/index.html +++ b/files/zh-cn/web/api/location/hostname/index.html @@ -5,7 +5,7 @@ ---

    {{ApiRef("URL API")}}

    -

    {{domxref("Location")}}的 hostname 属性是包含了域名的一段 {{domxref("USVString")}}。

    +

    {{domxref("Location")}}的 hostname 属性是包含了域名的一段 {{domxref("USVString")}}。

    Syntax

    diff --git a/files/zh-cn/web/api/location/href/index.html b/files/zh-cn/web/api/location/href/index.html index 723790dd2e70b1..36e0a4a61b482d 100644 --- a/files/zh-cn/web/api/location/href/index.html +++ b/files/zh-cn/web/api/location/href/index.html @@ -5,7 +5,7 @@ ---

    {{ApiRef("Location")}}

    -

    {{domxref("Location")}} 接口的 href 属性是一个字符串化转换器 (stringifier), 返回一个包含了完整 URL 的 {{domxref("USVString")}} 值,且允许 href 的更新。

    +

    {{domxref("Location")}} 接口的 href 属性是一个字符串化转换器 (stringifier), 返回一个包含了完整 URL 的 {{domxref("USVString")}} 值,且允许 href 的更新。

    语法

    diff --git a/files/zh-cn/web/api/location/index.html b/files/zh-cn/web/api/location/index.html index be344eb227506d..e99df6f366d364 100644 --- a/files/zh-cn/web/api/location/index.html +++ b/files/zh-cn/web/api/location/index.html @@ -9,11 +9,11 @@ ---

    {{APIRef("URLUtils")}}

    -

    Location 接口表示其链接到的对象的位置(URL)。所做的修改反映在与之相关的对象上。 {{domxref("Document")}} 和 {{domxref("Window")}} 接口都有这样一个链接的 Location,分别通过 {{domxref("Document.location")}}和{{domxref("Window.location")}} 访问。

    +

    Location 接口表示其链接到的对象的位置(URL)。所做的修改反映在与之相关的对象上。 {{domxref("Document")}} 和 {{domxref("Window")}} 接口都有这样一个链接的 Location,分别通过 {{domxref("Document.location")}}和{{domxref("Window.location")}} 访问。

    属性

    -

    Location 接口不继承任何属性,但是实现了那些来自 {{domxref("URLUtils")}} 的属性。

    +

    Location 接口不继承任何属性,但是实现了那些来自 {{domxref("URLUtils")}} 的属性。

    {{domxref("Location.href")}}
    @@ -29,7 +29,7 @@

    属性

    {{domxref("Location.pathname")}}
    包含 URL 中路径部分的一个{{domxref("DOMString")}},开头有一个“/"。
    {{domxref("Location.search")}}
    -
     包含 URL 参数的一个{{domxref("DOMString")}},开头有一个“?”
    +
    包含 URL 参数的一个{{domxref("DOMString")}},开头有一个“?”
    {{domxref("Location.hash")}}
    包含块标识符的{{domxref("DOMString")}},开头有一个“#”。
    {{domxref("Location.username")}}
    @@ -87,5 +87,5 @@

    另见

    -
     
    +
    diff --git a/files/zh-cn/web/api/location/replace/index.html b/files/zh-cn/web/api/location/replace/index.html index f610d8207eb5f3..db2ca3d668fb54 100644 --- a/files/zh-cn/web/api/location/replace/index.html +++ b/files/zh-cn/web/api/location/replace/index.html @@ -27,7 +27,7 @@

    参数

    url
    -
     {{domxref("DOMString")}} 类型,指定所导航到的页面的 URL 地址。
    +
    {{domxref("DOMString")}} 类型,指定所导航到的页面的 URL 地址。

    示例

    diff --git a/files/zh-cn/web/api/location/search/index.html b/files/zh-cn/web/api/location/search/index.html index 131392ee5fb86f..180ba4ebdb0618 100644 --- a/files/zh-cn/web/api/location/search/index.html +++ b/files/zh-cn/web/api/location/search/index.html @@ -5,9 +5,9 @@ ---
    {{ApiRef("Location")}}
    -

    {{domxref("Location")}} 接口的 search 属性会返回一段 {{domxref("USVString")}},其中包含一个 URL 标识中的 '?' 以及跟随其后的一串 URL 查询参数。

    +

    {{domxref("Location")}} 接口的 search 属性会返回一段 {{domxref("USVString")}},其中包含一个 URL 标识中的 '?' 以及跟随其后的一串 URL 查询参数。

    -

    现代浏览器提供 URLSearchParams 和 URL.searchParams 两个接口,使得从查询字符串中解析出查询参数变得更加容易。

    +

    现代浏览器提供 URLSearchParamsURL.searchParams 两个接口,使得从查询字符串中解析出查询参数变得更加容易。

    Syntax

    diff --git a/files/zh-cn/web/api/long_tasks_api/index.html b/files/zh-cn/web/api/long_tasks_api/index.html index 13ffba2179f74e..443c0ed8bfcb88 100644 --- a/files/zh-cn/web/api/long_tasks_api/index.html +++ b/files/zh-cn/web/api/long_tasks_api/index.html @@ -7,7 +7,7 @@

    目的

    -

    Long Tasks,这是一个实验性 API,它可以直观地告诉我们哪些任务执行耗费了 50 毫秒或更多时间。50 毫秒这个阈值标准来源于《RAIL Model》中 "Response: process events in under 50ms" 章节。

    +

    Long Tasks,这是一个实验性 API,它可以直观地告诉我们哪些任务执行耗费了 50 毫秒或更多时间。50 毫秒这个阈值标准来源于《RAIL Model》中 "Response: process events in under 50ms" 章节。

    阻塞主线程达 50 毫秒或以上的任务会导致以下问题:

    @@ -80,6 +80,6 @@

    浏览器兼容性

    相关推荐

    diff --git a/files/zh-cn/web/api/media_source_extensions_api/index.html b/files/zh-cn/web/api/media_source_extensions_api/index.html index 2e2bdcce577e89..53b7e2c20df0ca 100644 --- a/files/zh-cn/web/api/media_source_extensions_api/index.html +++ b/files/zh-cn/web/api/media_source_extensions_api/index.html @@ -79,4 +79,4 @@

    参见

  • {{domxref("HTMLMediaElement")}}、{{domxref("HTMLVideoElement")}}、{{domxref("HTMLAudioElement")}}。
  • - + diff --git a/files/zh-cn/web/api/media_streams_api/index.html b/files/zh-cn/web/api/media_streams_api/index.html index 83b161aadf898a..43008776360ca9 100644 --- a/files/zh-cn/web/api/media_streams_api/index.html +++ b/files/zh-cn/web/api/media_streams_api/index.html @@ -12,15 +12,15 @@ ---

    {{SeeCompatTable}}

    -

    媒体流处理 API(通常被称为媒体流 API 或流 API)是描述音频或视频数据流的 WebRTC 的一部分,处理它们的方法,与数据类型相关的约束,成功和错误 当异步使用数据时的回调以及在处理期间触发的事件。

    +

    媒体流处理 API(通常被称为媒体流 API 或流 API)是描述音频或视频数据流的 WebRTC 的一部分,处理它们的方法,与数据类型相关的约束,成功和错误 当异步使用数据时的回调以及在处理期间触发的事件。

    基本概念

    -

    这个 API 是基于操纵一个 MediaStream 对象代表音频或视频相关数据的流量。 通常一个 MediaStream 是作为一个简单的 URL string 它可以用来引用存储在 DOM 中的数据 {{domxref("File")}}, 或者一个 {{domxref("Blob")}} 对象建立 {{domxref("window.URL.createObjectURL()")}}, 如视频所描述的

    +

    这个 API 是基于操纵一个 MediaStream 对象代表音频或视频相关数据的流量。 通常一个 MediaStream 是作为一个简单的 URL string 它可以用来引用存储在 DOM 中的数据 {{domxref("File")}}, 或者一个 {{domxref("Blob")}} 对象建立 {{domxref("window.URL.createObjectURL()")}}, 如视频所描述的

    -

    一个 MediaStream 包含零个或更多的 MediaStreamTrack 对象,代表着各种的声轨和视频轨。 每一个 MediaStreamTrack 可能有一个或更多的通道。这个通道代表着媒体流的最小单元,比如一个音频信号对应着一个对应的扬声器,像是在立体声音轨中的左通道或右通道。

    +

    一个 MediaStream 包含零个或更多的 MediaStreamTrack 对象,代表着各种的声轨和视频轨。 每一个 MediaStreamTrack 可能有一个或更多的通道。这个通道代表着媒体流的最小单元,比如一个音频信号对应着一个对应的扬声器,像是在立体声音轨中的左通道或右通道。

    -

    MediaStream 对象有着单一的输入和输出。由 getUserMedia() 创建的 MediaStream 对象是在本地借助用户相机和麦克风的源输入。非本地的 MediaStream 代表了一个媒体元素,像是{{HTMLElement("video")}} 元素或是 {{HTMLElement("audio")}}元素, 一般是源自网络的流,并通过 WebRTC PeerConnection API 或使用 Web Audio API 获得{{domxref("MediaStreamAudioSourceNode")}} 元素。MediaStream 对象的输出能链接到一个用户。 它可以是一个媒体元素,像是 <audio> 或者 <video>, the WebRTC PeerConnection API 或是 Web Audio API {{domxref("MediaStreamAudioDestinationNode")}}。

    +

    MediaStream 对象有着单一的输入和输出。由 getUserMedia() 创建的 MediaStream 对象是在本地借助用户相机和麦克风的源输入。非本地的 MediaStream 代表了一个媒体元素,像是{{HTMLElement("video")}} 元素或是 {{HTMLElement("audio")}}元素, 一般是源自网络的流,并通过 WebRTC PeerConnection API 或使用 Web Audio API 获得{{domxref("MediaStreamAudioSourceNode")}} 元素。MediaStream 对象的输出能链接到一个用户。 它可以是一个媒体元素,像是 <audio> 或者 <video>, the WebRTC PeerConnection API 或是 Web Audio API {{domxref("MediaStreamAudioDestinationNode")}}。

    参考

    @@ -50,7 +50,7 @@

    参考

    -

     

    +

    浏览器支持

    @@ -59,7 +59,7 @@

    浏览器支持

    See Also

    diff --git a/files/zh-cn/web/api/media_streams_api/taking_still_photos/index.html b/files/zh-cn/web/api/media_streams_api/taking_still_photos/index.html index 0ebc74b069537d..b4ab20b33b1e2b 100644 --- a/files/zh-cn/web/api/media_streams_api/taking_still_photos/index.html +++ b/files/zh-cn/web/api/media_streams_api/taking_still_photos/index.html @@ -18,7 +18,7 @@

    WebRTC-based image capture app — on the left we have a video stream taken from a webcam and a take photo button, on the right we have the still image output from taking the photo

    -

    如果你喜欢,你也可以直接跳转到 GitHub 上的代码

    +

    如果你喜欢,你也可以直接跳转到 GitHub 上的代码

    HTML 标记

    @@ -26,22 +26,22 @@

    HTML 标记

    左边的面板包含两个组件:一个 {{HTMLElement("video")}} 元素,它将接收来自 WebRTC 的流,以及用户点击捕获视频帧的 {{HTMLElement("button")}}。

    -
      <div class="camera">
    -    <video id="video">Video stream not available.</video>
    -    <button id="startbutton">Take photo</button>
    -  </div>
    +
      <div class="camera">
    +    <video id="video">Video stream not available.</video>
    +    <button id="startbutton">Take photo</button>
    +  </div>

    这很简单,当我们进入 JavaScript 代码时,我们将看到他们是如何紧密联系在一起的。

    -

    接下来,我们有一个 {{HTMLElement("canvas")}} 元素,捕获的帧被存储到其中,可能以某种方式进行操作,然后转换为输出图像文件。 通过使用样式 {{cssxref("display")}}:none 将画布保持隐藏,以避免画面的混乱 —— 用户不需要看到这个中间过程。

    +

    接下来,我们有一个 {{HTMLElement("canvas")}} 元素,捕获的帧被存储到其中,可能以某种方式进行操作,然后转换为输出图像文件。 通过使用样式 {{cssxref("display")}}:none 将画布保持隐藏,以避免画面的混乱 —— 用户不需要看到这个中间过程。

    -

    我们还有一个 {{HTMLElement("img")}} 元素,我们将涌起绘制图像——这是让用户看到的最终显示。

    +

    我们还有一个 {{HTMLElement("img")}} 元素,我们将涌起绘制图像——这是让用户看到的最终显示。

    -
      <canvas id="canvas">
    -  </canvas>
    -  <div class="output">
    -    <img id="photo" alt="The screen capture will appear in this box.">
    -  </div>
    +
      <canvas id="canvas">
    +  </canvas>
    +  <div class="output">
    +    <img id="photo" alt="The screen capture will appear in this box.">
    +  </div>

    这是所有相关的 HTML。 其余的只是一些页面布局和提供一个返回页面链接的些许文本。

    @@ -74,13 +74,13 @@

    初始化

    streaming
    指示当前是否有活动的视频流正在运行。
    video
    -
    这将是页面加载完成后对 {{HTMLElement("video")}} 元素的引用。
    +
    这将是页面加载完成后对 {{HTMLElement("video")}} 元素的引用。
    canvas
    -
    这将是页面加载完成后对 {{HTMLElement("canvas")}} 元素的引用。
    +
    这将是页面加载完成后对 {{HTMLElement("canvas")}} 元素的引用。
    photo
    -
    这将在页面加载完成后引用 {{HTMLElement("img")}} 元素。
    +
    这将在页面加载完成后引用 {{HTMLElement("img")}} 元素。
    startbutton
    -
    这将引用用于触发捕获的 {{HTMLElement("button")}} 元素。 我们会在页面加载完成之后得到。
    +
    这将引用用于触发捕获的 {{HTMLElement("button")}} 元素。 我们会在页面加载完成之后得到。

    startup( ) 函数

    @@ -111,17 +111,17 @@

    获取流媒体

    });
    -

    在这里,我们正在调用 {{domxref("MediaDevices.getUserMedia()")}}  并请求视频流(无音频)。 它返回一个 promise,我们给它附加成功和失败情况下的回调方法。

    +

    在这里,我们正在调用 {{domxref("MediaDevices.getUserMedia()")}} 并请求视频流(无音频)。 它返回一个 promise,我们给它附加成功和失败情况下的回调方法。

    -

    成功回调接收一个 stream 对象作为输入。它是新视频的 {{HTMLElement("video")}} 元素的源。

    +

    成功回调接收一个 stream 对象作为输入。它是新视频的 {{HTMLElement("video")}} 元素的源。

    -

    一旦流被链接到 {{HTMLElement("video")}} 元素,我们通过调用 HTMLMediaElement.play() 开始播放。

    +

    一旦流被链接到 {{HTMLElement("video")}} 元素,我们通过调用 HTMLMediaElement.play() 开始播放。

    如果打开流失败,则调用失败回调函数。 在没有连接兼容的相机,或者用户拒绝访问时,则会发生这种情况。

    监听视频开始播放

    -

    在 {{HTMLElement("video")}} 上调用 HTMLMediaElement.play() 之后,在视频流开始流动之前,有一段(希望简短)的时间段过去了。 为了避免在此之前一直阻塞,我们为 {{HTMLElement("video")}} 加上一个 {{event("canplay")}} 事件的监听器,当视频播放实际开始时会触发该事件。 那时,视频对象中的所有属性都已基于流的格式进行配置。

    +

    {{HTMLElement("video")}} 上调用 HTMLMediaElement.play() 之后,在视频流开始流动之前,有一段(希望简短)的时间段过去了。 为了避免在此之前一直阻塞,我们为 {{HTMLElement("video")}} 加上一个 {{event("canplay")}} 事件的监听器,当视频播放实际开始时会触发该事件。 那时,视频对象中的所有属性都已基于流的格式进行配置。

        video.addEventListener('canplay', function(ev){
           if (!streaming) {
    @@ -227,6 +227,6 @@ 

    另请参阅

  • Try this sample
  • Sample code on Github
  • Navigator.getUserMedia()
  • -
  • "Using frames from a video" in Using images
  • +
  • "Using frames from a video" in Using images
  • CanvasRenderingContext2D.drawImage()
  • diff --git a/files/zh-cn/web/api/mediacapabilities/encodinginfo/index.html b/files/zh-cn/web/api/mediacapabilities/encodinginfo/index.html index 56712708030087..c011e3dca65d09 100644 --- a/files/zh-cn/web/api/mediacapabilities/encodinginfo/index.html +++ b/files/zh-cn/web/api/mediacapabilities/encodinginfo/index.html @@ -6,19 +6,19 @@ ---

    {{APIRef("Media Capabilities API")}}

    -

     Media Capabilities APIMediaCapabilitiesInfo 接口在 {{domxref("MediaCapabilities")}}接口的  {{domxref("MediaCapabilities.encodingInfo()")}} 或 {{domxref("MediaCapabilities.decodingInfo()")}} 方法返回的 promise 完成时变得可用。它提供了媒体类型是否支持,在编码或解码此媒体时是否流畅和能效等信息。

    +

    Media Capabilities APIMediaCapabilitiesInfo 接口在 {{domxref("MediaCapabilities")}}接口的 {{domxref("MediaCapabilities.encodingInfo()")}} 或 {{domxref("MediaCapabilities.decodingInfo()")}} 方法返回的 promise 完成时变得可用。它提供了媒体类型是否支持,在编码或解码此媒体时是否流畅和能效等信息。

    属性

    -

    MediaCapabilitiesInfo 接口包含 3 个布尔属性:

    +

    MediaCapabilitiesInfo 接口包含 3 个布尔属性:

      -
    • supported: 给出 {{domxref("MediaConfiguration")}} 中定义的属性,确定指定的媒体内容能否完全被 编码 (如果 {{domxref("MediaEncodingConfiguration")}} 已设置) 或 解码 (如果 {{domxref("MediaDecodingConfiguration")}} 已设置) 。 如果是,supported 为 true. 否则为 false.
    • -
    • smooth: 给出 {{domxref("MediaConfiguration")}} 中定义的属性, 确定指定的媒体内容在回放时能否高质量和流畅。 如果 supported 为 true, 并且回放时将流畅,smooth 为 true, 否则为 false.
    • -
    • powerEfficient: 给出 {{domxref("MediaConfiguration")}} 中定义的属性,确定指定的媒体内容在回放时能否高能效。如果 supported 为 true, 并且回放时将高能效,powerEfficient 为 true, 否则为 false.
    • +
    • supported: 给出 {{domxref("MediaConfiguration")}} 中定义的属性,确定指定的媒体内容能否完全被 编码 (如果 {{domxref("MediaEncodingConfiguration")}} 已设置) 或 解码 (如果 {{domxref("MediaDecodingConfiguration")}} 已设置) 。 如果是,supportedtrue. 否则为 false.
    • +
    • smooth: 给出 {{domxref("MediaConfiguration")}} 中定义的属性, 确定指定的媒体内容在回放时能否高质量和流畅。 如果 supportedtrue, 并且回放时将流畅,smoothtrue, 否则为 false.
    • +
    • powerEfficient: 给出 {{domxref("MediaConfiguration")}} 中定义的属性,确定指定的媒体内容在回放时能否高能效。如果 supportedtrue, 并且回放时将高能效,powerEfficienttrue, 否则为 false.
    -

    浏览器将报告一个支持的媒体配置为 smooth 和 powerEfficient 直到此设备的统计信息被记录。所有受支持的音频编解码器将报告为高能效。

    +

    浏览器将报告一个支持的媒体配置为 smoothpowerEfficient 直到此设备的统计信息被记录。所有受支持的音频编解码器将报告为高能效。

    范例

    @@ -38,7 +38,7 @@

    范例

    console.log('This configuration is ' + (result.supported ? '' : 'not ') + 'supported, ' + // 配置的媒体能否被用户代理解码? (result.smooth ? '' : 'not ') + 'smooth, and ' + // 是否流畅? - (result.powerEfficient ? '' : 'not ') + 'power efficient.').  // 是否高能效? + (result.powerEfficient ? '' : 'not ') + 'power efficient.'). // 是否高能效? });

    规范

    diff --git a/files/zh-cn/web/api/mediadevices/devicechange_event/index.html b/files/zh-cn/web/api/mediadevices/devicechange_event/index.html index 41b56dbc8ee302..e011fc0189d5aa 100644 --- a/files/zh-cn/web/api/mediadevices/devicechange_event/index.html +++ b/files/zh-cn/web/api/mediadevices/devicechange_event/index.html @@ -3,7 +3,7 @@ slug: Web/API/MediaDevices/devicechange_event translation_of: Web/API/MediaDevices/devicechange_event --- -

    每当媒体设备(例如相机,麦克风或扬声器)连接到系统或从系统中移除时,devicechange 事件就会被发送到 {{domxref("MediaDevices")}}  实例。 这是一个没有附加属性的通用 {{domxref("Event")}} 。

    +

    每当媒体设备(例如相机,麦克风或扬声器)连接到系统或从系统中移除时,devicechange 事件就会被发送到 {{domxref("MediaDevices")}} 实例。 这是一个没有附加属性的通用 {{domxref("Event")}} 。

    一般信息

    diff --git a/files/zh-cn/web/api/mediadevices/getdisplaymedia/index.html b/files/zh-cn/web/api/mediadevices/getdisplaymedia/index.html index 4347f6d215e7d3..ec60563f084f62 100644 --- a/files/zh-cn/web/api/mediadevices/getdisplaymedia/index.html +++ b/files/zh-cn/web/api/mediadevices/getdisplaymedia/index.html @@ -20,9 +20,9 @@ ---
    {{DefaultAPISidebar("Screen Capture API")}}
    -

    这个 {{domxref("MediaDevices")}}  接口的 getDisplayMedia() 方法提示用户去选择和授权捕获展示的内容或部分内容(如一个窗口)在一个  {{domxref("MediaStream")}} 里. 然后,这个媒体流可以通过使用 MediaStream Recording API 被记录或者作为WebRTC 会话的一部分被传输。

    +

    这个 {{domxref("MediaDevices")}} 接口的 getDisplayMedia() 方法提示用户去选择和授权捕获展示的内容或部分内容(如一个窗口)在一个 {{domxref("MediaStream")}} 里. 然后,这个媒体流可以通过使用 MediaStream Recording API 被记录或者作为WebRTC 会话的一部分被传输。

    -

    去 Using the Screen Capture API 查找更多详情和例子。

    +

    Using the Screen Capture API 查找更多详情和例子。

    语法

    @@ -32,7 +32,7 @@

    语法

    参数

    -
    constraints {{optional_inline}}
    +
    constraints {{optional_inline}}
    一个可选的{{domxref("MediaStreamConstraints")}}对象,它指定了返回的{{domxref("MediaStream")}}的要求。 因为getDisplayMedia()需要视频轨道,所以即使constraints 对象没有明确请求视频轨道,返回的流也会有一个。
    @@ -41,7 +41,7 @@

    返回值

    一个被解析为 {{domxref("MediaStream")}} 的 {{jsxref("Promise")}},其中包含一个视频轨道。视频轨道的内容来自用户选择的屏幕区域以及一个可选的音频轨道。

    -

    Note: 浏览器对音频的支持程度各不相同,既取决于是否支持,也取决于音频源。点击 浏览器兼容性 来查看各个浏览器的支持性。

    +

    Note: 浏览器对音频的支持程度各不相同,既取决于是否支持,也取决于音频源。点击 浏览器兼容性 来查看各个浏览器的支持性。

    异常

    diff --git a/files/zh-cn/web/api/mediadevices/getsupportedconstraints/index.html b/files/zh-cn/web/api/mediadevices/getsupportedconstraints/index.html index 4198c68654ee74..ae79a6a61dd766 100644 --- a/files/zh-cn/web/api/mediadevices/getsupportedconstraints/index.html +++ b/files/zh-cn/web/api/mediadevices/getsupportedconstraints/index.html @@ -5,7 +5,7 @@ ---

    {{APIRef("Media Capture and Streams")}}

    -

     

    +

    {{domxref("MediaDevices")}} 接口的 getSupportedConstraints() 方法返回一个基于 {{domxref("MediaTrackSupportedConstraints")}} 的对象,其成员字段都是客户端({{Glossary("user agent")}})所支持的约束属性(如帧率,窗口大小)。

    @@ -36,7 +36,7 @@

    HTML 内容

    CSS 内容

    body {
    -  font: 15px Arial, sans-serif;
    +  font: 15px Arial, sans-serif;
     }

    JavaScript 内容

    diff --git a/files/zh-cn/web/api/mediadevices/getusermedia/index.html b/files/zh-cn/web/api/mediadevices/getusermedia/index.html index 79ebe213f37b24..e4fdb3766231c4 100644 --- a/files/zh-cn/web/api/mediadevices/getusermedia/index.html +++ b/files/zh-cn/web/api/mediadevices/getusermedia/index.html @@ -6,9 +6,9 @@
    {{APIRef("WebRTC")}}
    -

    MediaDevices.getUserMedia() 会提示用户给予使用媒体输入的许可,媒体输入会产生一个{{domxref("MediaStream")}},里面包含了请求的媒体类型的轨道。此流可以包含一个视频轨道(来自硬件或者虚拟视频源,比如相机、视频采集设备和屏幕共享服务等等)、一个音频轨道(同样来自硬件或虚拟音频源,比如麦克风、A/D 转换器等等),也可能是其它轨道类型。

    +

    MediaDevices.getUserMedia() 会提示用户给予使用媒体输入的许可,媒体输入会产生一个{{domxref("MediaStream")}},里面包含了请求的媒体类型的轨道。此流可以包含一个视频轨道(来自硬件或者虚拟视频源,比如相机、视频采集设备和屏幕共享服务等等)、一个音频轨道(同样来自硬件或虚拟音频源,比如麦克风、A/D 转换器等等),也可能是其它轨道类型。

    -

    它返回一个 {{jsxref("Promise")}} 对象,成功后会resolve回调一个 {{domxref("MediaStream")}} 对象。若用户拒绝了使用权限,或者需要的媒体源不可用,promisereject回调一个  PermissionDeniedError 或者 NotFoundError 。

    +

    它返回一个 {{jsxref("Promise")}} 对象,成功后会resolve回调一个 {{domxref("MediaStream")}} 对象。若用户拒绝了使用权限,或者需要的媒体源不可用,promisereject回调一个 PermissionDeniedError 或者 NotFoundError

    @@ -27,7 +27,7 @@

    语法

    -
    var promise = navigator.mediaDevices.getUserMedia(constraints);
    +
    var promise = navigator.mediaDevices.getUserMedia(constraints);

    参数

    @@ -36,13 +36,13 @@

    参数

    作为一个{{domxref("MediaStreamConstraints")}} 对象,指定了请求的媒体类型和相对应的参数。

    -

    constraints 参数是一个包含了videoaudio两个成员的MediaStreamConstraints 对象,用于说明请求的媒体类型。必须至少一个类型或者两个同时可以被指定。如果浏览器无法找到指定的媒体类型或者无法满足相对应的参数要求,那么返回的 Promise 对象就会处于 rejected[失败]状态,NotFoundError作为 rejected[失败]回调的参数。 

    +

    constraints 参数是一个包含了videoaudio两个成员的MediaStreamConstraints 对象,用于说明请求的媒体类型。必须至少一个类型或者两个同时可以被指定。如果浏览器无法找到指定的媒体类型或者无法满足相对应的参数要求,那么返回的 Promise 对象就会处于 rejected[失败]状态,NotFoundError作为 rejected[失败]回调的参数。

    以下同时请求不带任何参数的音频和视频:

    { audio: true, video: true }
    -

    如果为某种媒体类型设置了 true ,得到的结果的流中就需要有此种类型的轨道。如果其中一个由于某种原因无法获得,getUserMedia() 将会产生一个错误。

    +

    如果为某种媒体类型设置了 true ,得到的结果的流中就需要有此种类型的轨道。如果其中一个由于某种原因无法获得,getUserMedia() 将会产生一个错误。

    当由于隐私保护的原因,无法访问用户的摄像头和麦克风信息时,应用可以使用额外的 constraints 参数请求它所需要或者想要的摄像头和麦克风能力。下面演示了应用想要使用 1280x720 的摄像头分辨率:

    @@ -53,7 +53,7 @@

    参数

    浏览器会试着满足这个请求参数,但是如果无法准确满足此请求中参数要求或者用户选择覆盖了请求中的参数时,有可能返回其它的分辨率。

    -

    强制要求获取特定的尺寸时,可以使用关键字minmax 或者 exact(就是 min == max)。以下参数表示要求获取最低为 1280x720 的分辨率。

    +

    强制要求获取特定的尺寸时,可以使用关键字minmax 或者 exact(就是 min == max)。以下参数表示要求获取最低为 1280x720 的分辨率。

    {
       audio: true,
    @@ -65,7 +65,7 @@ 

    参数

    如果摄像头不支持请求的或者更高的分辨率,返回的 Promise 会处于 rejected 状态,NotFoundError 作为rejected 回调的参数,而且用户将不会得到要求授权的提示。

    -

    造成不同表现的原因是,相对于简单的请求值和ideal关键字而言,关键字min, max, 和 exact有着内在关联的强制性,请看一个更详细的例子:

    +

    造成不同表现的原因是,相对于简单的请求值和ideal关键字而言,关键字min, max, 和 exact有着内在关联的强制性,请看一个更详细的例子:

    {
       audio: true,
    @@ -99,11 +99,11 @@ 

    参数

    返回值

    -

    返回一个 {{jsxref("Promise")}},这个 Promise 成功后的回调函数带一个 {{domxref("MediaStream")}} 对象作为其参数。

    +

    返回一个 {{jsxref("Promise")}},这个 Promise 成功后的回调函数带一个 {{domxref("MediaStream")}} 对象作为其参数。

    异常

    -

    返回一个失败状态的 Promise,这个 Promise 失败后的回调函数带一个{{domxref("DOMException")}}对象作为其参数。 可能的异常有:

    +

    返回一个失败状态的 Promise,这个 Promise 失败后的回调函数带一个{{domxref("DOMException")}}对象作为其参数。 可能的异常有:

    AbortError[中止错误]
    @@ -123,7 +123,7 @@

    异常

    因为这个异常甚至可以在用户尚未授权使用当前设备的情况下抛出,所以应当可以当作一个探测设备能力属性的手段[fingerprinting surface]。
    SecurityError[安全错误]
    -
    getUserMedia() 被调用的 {{domxref("Document")}} 上面,使用设备媒体被禁止。这个机制是否开启或者关闭取决于单个用户的偏好设置。
    +
    getUserMedia() 被调用的 {{domxref("Document")}} 上面,使用设备媒体被禁止。这个机制是否开启或者关闭取决于单个用户的偏好设置。
    TypeError[类型错误]
    constraints 对象未设置[空],或者都被设置为false
    @@ -132,7 +132,7 @@

    示例

    宽度和高度

    -

    这个例子设置了摄像头分辨率,并把结果的 {{domxref("MediaStream")}} 分配给了一个 video 元素。 

    +

    这个例子设置了摄像头分辨率,并把结果的 {{domxref("MediaStream")}} 分配给了一个 video 元素。

    // 想要获取一个最接近 1280x720 的相机分辨率
     var constraints = { audio: true, video: { width: 1280, height: 720 } };
    @@ -149,7 +149,7 @@ 

    宽度和高度

    在旧的浏览器中使用新的 API

    -

    这是一个使用 navigator.mediaDevices.getUserMedia()的例子,带一个 polyfill 以适应旧的浏览器。 要注意的是这个 polyfill 并不能修正一些约束语法上的遗留差异,这表示约束在某些浏览器上可能不会很好地运行。推荐使用处理了约束的 adapter.js polyfill 来替代。

    +

    这是一个使用 navigator.mediaDevices.getUserMedia()的例子,带一个 polyfill 以适应旧的浏览器。 要注意的是这个 polyfill 并不能修正一些约束语法上的遗留差异,这表示约束在某些浏览器上可能不会很好地运行。推荐使用处理了约束的 adapter.js polyfill 来替代。

    // 老的浏览器可能根本没有实现 mediaDevices,所以我们可以先设置一个空的对象
     if (navigator.mediaDevices === undefined) {
    @@ -214,7 +214,7 @@ 

    前置或者后置摄像头

    权限

    -

    在一个可安装的 app(如Firefox OS app)中使用 getUserMedia() ,你需要在声明文件中指定以下的权限:

    +

    在一个可安装的 app(如Firefox OS app)中使用 getUserMedia() ,你需要在声明文件中指定以下的权限:

    "permissions": {
       "audio-capture": {
    @@ -225,7 +225,7 @@ 

    权限

    } }
    -

    参见 permission: audio-capturepermission: video-capture 来获取更多信息。

    +

    参见 permission: audio-capturepermission: video-capture 来获取更多信息。

    规范

    @@ -238,9 +238,9 @@

    浏览器兼容性

    参考

    diff --git a/files/zh-cn/web/api/mediadevices/index.html b/files/zh-cn/web/api/mediadevices/index.html index f53bd96c144305..62605c6699d1e9 100644 --- a/files/zh-cn/web/api/mediadevices/index.html +++ b/files/zh-cn/web/api/mediadevices/index.html @@ -39,7 +39,7 @@

    方法

    {{ domxref("MediaDevices.enumerateDevices()") }}
    获取有关系统中可用的媒体输入和输出设备的一系列信息。
    {{domxref("MediaDevices.getSupportedConstraints", "getSupportedConstraints()")}}
    -
    返回一个符合 {{domxref("MediaTrackSupportedConstraints")}} 的对象。该对象指明了 {{domxref("MediaStreamTrack")}} 接口支持的可约束的属性。查看 {{SectionOnPage("/en-US/docs/Web/API/Media_Streams_API", "Capabilities and constraints")}} 去了解更多相关信息。
    +
    返回一个符合 {{domxref("MediaTrackSupportedConstraints")}} 的对象。该对象指明了 {{domxref("MediaStreamTrack")}} 接口支持的可约束的属性。查看 {{SectionOnPage("/en-US/docs/Web/API/Media_Streams_API", "Capabilities and constraints")}} 去了解更多相关信息。
    {{domxref("MediaDevices.getDisplayMedia", "getDisplayMedia()")}}
    提示用户选择显示器或显示器的一部分(例如窗口)以捕获为{{domxref("MediaStream")}} 以便共享或记录。返回解析为 MediaStream 的 Promise。
    {{ domxref("MediaDevices.getUserMedia()") }}
    diff --git a/files/zh-cn/web/api/mediaelementaudiosourcenode/index.html b/files/zh-cn/web/api/mediaelementaudiosourcenode/index.html index 86726215de74d0..8687c757f8a22b 100644 --- a/files/zh-cn/web/api/mediaelementaudiosourcenode/index.html +++ b/files/zh-cn/web/api/mediaelementaudiosourcenode/index.html @@ -9,7 +9,7 @@

    MediaElementAudioSourceNode 接口代表着某个由 HTML5 {{ htmlelement("audio") }} 或 {{ htmlelement("video") }} 元素所组成的音频源。该接口作为扮演音源的 {{domxref("AudioNode")}} 节点。

    -

    MediaElementSourceNode 没有输入,只有一个输出,其由使用{{domxref("AudioContext.createMediaElementSource")}}方法创建。输出的频道数目与节点创建时引用音频 {{domxref("HTMLMediaElement")}}  的频道数目一致,或当 {{domxref("HTMLMediaElement")}} 无音频时,频道数目为 1.

    +

    MediaElementSourceNode 没有输入,只有一个输出,其由使用{{domxref("AudioContext.createMediaElementSource")}}方法创建。输出的频道数目与节点创建时引用音频 {{domxref("HTMLMediaElement")}} 的频道数目一致,或当 {{domxref("HTMLMediaElement")}} 无音频时,频道数目为 1.

    键盘定位标识符
    "KeyD" 0x44 (68) 0x44 (68)0x44 (68) 0x44 (68) 0x44 (68) 0x44 (68) 0x44 (68) 0xBA (186) 0xDE (222) 0xDE (222)0xBA (186)  *10xBA (186) *1 0xDE (222) 0xDE (222) 0x3A (58) 0x00 (0) *4 0xDC (220)
    -  
    *4 0xBD (189) 0xBD (189)
    @@ -32,7 +32,7 @@

    构造函数

    {{domxref("MediaElementAudioSourceNode.MediaElementAudioSourceNode()")}}
    -
    创建一个新的 MediaElementAudioSourceNode 实例。
    +
    创建一个新的 MediaElementAudioSourceNode 实例。

    属性

    diff --git a/files/zh-cn/web/api/mediakeysession/index.html b/files/zh-cn/web/api/mediakeysession/index.html index b75f3a5e4326fc..989c3a6eee1f7c 100644 --- a/files/zh-cn/web/api/mediakeysession/index.html +++ b/files/zh-cn/web/api/mediakeysession/index.html @@ -17,19 +17,19 @@ ---

    {{APIRef("EncryptedMediaExtensions")}}{{SeeCompatTable}}

    -

    The MediaKeySession interface of the EncryptedMediaExtensions API represents a context for message exchange with a content decryption module (CDM).

    +

    The MediaKeySession interface of the EncryptedMediaExtensions API represents a context for message exchange with a content decryption module (CDM).

    Properties

    -
    {{domxref("MediaKeySession.closed")}} {{readonlyInline}}
    -
    Returns a {{jsxref("Promise")}} signaling when a MediaKeySession closes. This promise can only be fulfilled and is never rejected. Closing a session means that licenses and keys associated with it are no longer valid for decrypting media data. 
    -
    {{domxref("MediaKeySession.expiration")}} {{readonlyInline}}
    -
    The time after which the keys in the current session can no longer be used to decrypt media data, or NaN if no such time exists. This value is determined by the CDM and measured in milliseconds since January 1, 1970, UTC. This value may change during a session lifetime, such as when an action triggers the start of a window.
    -
    {{domxref("MediaKeySession.keyStatuses")}} {{readonlyInline}}
    -
    Contains a reference to a read-only {{domxref("MediaKeyStatusMap")}} of the current session's keys and their statuses.
    -
    {{domxref("MediaKeySession.sessionId")}} {{readonlyInline}}
    -
    Contains a unique string generated by the CDM for the current media object and its associated keys or licenses.
    +
    {{domxref("MediaKeySession.closed")}} {{readonlyInline}}
    +
    Returns a {{jsxref("Promise")}} signaling when a MediaKeySession closes. This promise can only be fulfilled and is never rejected. Closing a session means that licenses and keys associated with it are no longer valid for decrypting media data.
    +
    {{domxref("MediaKeySession.expiration")}} {{readonlyInline}}
    +
    The time after which the keys in the current session can no longer be used to decrypt media data, or NaN if no such time exists. This value is determined by the CDM and measured in milliseconds since January 1, 1970, UTC. This value may change during a session lifetime, such as when an action triggers the start of a window.
    +
    {{domxref("MediaKeySession.keyStatuses")}} {{readonlyInline}}
    +
    Contains a reference to a read-only {{domxref("MediaKeyStatusMap")}} of the current session's keys and their statuses.
    +
    {{domxref("MediaKeySession.sessionId")}} {{readonlyInline}}
    +
    Contains a unique string generated by the CDM for the current media object and its associated keys or licenses.

    Event handlers

    @@ -46,16 +46,16 @@

    Methods

    {{domxref("MediaKeySession.close()")}}
    -

    Returns a {{jsxref("Promise")}} after notifying the current media session is no longer needed and that the CDM should release any resources associated with this object and close it.

    +

    Returns a {{jsxref("Promise")}} after notifying the current media session is no longer needed and that the CDM should release any resources associated with this object and close it.

    {{domxref("MediaKeySession.generateRequest()")}}
    -
    Returns a {{jsxref("Promise")}} after generating a media request based on initialization data.
    +
    Returns a {{jsxref("Promise")}} after generating a media request based on initialization data.
    {{domxref("MediaKeySession.load()")}}
    -
    Returns a {{jsxref("Promise")}} that resolves to a boolean value after loading data for a specified session object. 
    +
    Returns a {{jsxref("Promise")}} that resolves to a boolean value after loading data for a specified session object.
    {{domxref("MediaKeySession.remove()")}}
    -
    Returns a {{jsxref("Promise")}} after removing any session data associated with the current object.
    +
    Returns a {{jsxref("Promise")}} after removing any session data associated with the current object.
    {{domxref("MediaKeySession.update()")}}
    -
    Returns a {{jsxref("Promise")}} after loading messages and licenses to the CDM.
    +
    Returns a {{jsxref("Promise")}} after loading messages and licenses to the CDM.

    Examples

    diff --git a/files/zh-cn/web/api/medialist/index.html b/files/zh-cn/web/api/medialist/index.html index e89a7e40c4370e..55f9462d85fd00 100644 --- a/files/zh-cn/web/api/medialist/index.html +++ b/files/zh-cn/web/api/medialist/index.html @@ -11,35 +11,35 @@ ---
    {{APIRef("CSSOM")}}
    -

    MediaList 接口表示样式表的媒体查询,例如使用了 media 属性的{{htmlelement("link")}} 元素。

    +

    MediaList 接口表示样式表的媒体查询,例如使用了 media 属性的{{htmlelement("link")}} 元素。

    -

    注意:MediaList 是一个实时列表;使用以下属性或方法更新列表会立刻更新文档的表现。

    +

    注意:MediaList 是一个实时列表;使用以下属性或方法更新列表会立刻更新文档的表现。

    属性

    {{domxref("MediaList.mediaText")}}
    -
    一个字符串转化器,返回一个{{domxref("DOMString")}},以文本形式表示 MediaList,也可以通过这个方法设置新的 MediaList
    +
    一个字符串转化器,返回一个{{domxref("DOMString")}},以文本形式表示 MediaList,也可以通过这个方法设置新的 MediaList
    {{domxref("MediaList.length")}} {{readonlyInline}}
    -
    返回 MediaList 中媒体查询的数量。
    +
    返回 MediaList 中媒体查询的数量。

    方法

    {{domxref("MediaList.appendMedium()")}}
    -
    向 MediaList 中添加一个媒体查询。
    +
    MediaList 中添加一个媒体查询。
    {{domxref("MediaList.deleteMedium()")}}
    -
    从 MediaList 中移除一个媒体查询。
    +
    MediaList 中移除一个媒体查询。
    {{domxref("MediaList.item()")}}
    -
    一个获取函数,返回一个{{domxref("CSSOMString")}},表示文本形式的媒体查询,需要提供媒体查询在 MediaList 中的索引位置。
    +
    一个获取函数,返回一个{{domxref("CSSOMString")}},表示文本形式的媒体查询,需要提供媒体查询在 MediaList 中的索引位置。

    示例

    -

    下述例子会在控制台记录 MediaList 的文本表示,其来自应用到当前文档的第一个样式表。

    +

    下述例子会在控制台记录 MediaList 的文本表示,其来自应用到当前文档的第一个样式表。

    const stylesheets = document.styleSheets;
     let stylesheet = stylesheets[0];
    diff --git a/files/zh-cn/web/api/mediarecorder/audiobitspersecond/index.html b/files/zh-cn/web/api/mediarecorder/audiobitspersecond/index.html
    index b7889e597b2a06..1cd7fee471b0f4 100644
    --- a/files/zh-cn/web/api/mediarecorder/audiobitspersecond/index.html
    +++ b/files/zh-cn/web/api/mediarecorder/audiobitspersecond/index.html
    @@ -5,7 +5,7 @@
     ---
     

    {{SeeCompatTable}}{{APIRef("MediaStream Recording")}}

    -

    audioBitsPerSecond  {{domxref("MediaRecorder")}} 接口的只读属性。它返回录制器所使用的音频编码码率. 或许与构造函数中指定的比特率有些不同(如果调用构造函数的时候有指定)。

    +

    audioBitsPerSecond {{domxref("MediaRecorder")}} 接口的只读属性。它返回录制器所使用的音频编码码率. 或许与构造函数中指定的比特率有些不同(如果调用构造函数的时候有指定)。

    语法

    diff --git a/files/zh-cn/web/api/mediarecorder/dataavailable_event/index.html b/files/zh-cn/web/api/mediarecorder/dataavailable_event/index.html index cd1cd9f6a579ce..52ab3e23b6465a 100644 --- a/files/zh-cn/web/api/mediarecorder/dataavailable_event/index.html +++ b/files/zh-cn/web/api/mediarecorder/dataavailable_event/index.html @@ -6,7 +6,7 @@ ---

    {{APIRef("MediaStream Recording")}}

    -

    MediaRecorder.ondataavailable 事件处理程序 (part of the MediaStream 记录 API) 处理{{event("dataavailable")}}事件,让您在响应运行代码{{domxref("Blob")}}数据被提供使用。

    +

    MediaRecorder.ondataavailable 事件处理程序 (part of the MediaStream 记录 API) 处理{{event("dataavailable")}}事件,让您在响应运行代码{{domxref("Blob")}}数据被提供使用。

    dataavailable当 MediaRecorder 将媒体数据传递到您的应用程序以供使用时,将触发该事件。数据在包含数据的{{domxref("Blob")}}对象中提供。这在四种情况下发生:

    diff --git a/files/zh-cn/web/api/mediarecorder/index.html b/files/zh-cn/web/api/mediarecorder/index.html index 5a32eb9bda75d9..57e036d6861fcd 100644 --- a/files/zh-cn/web/api/mediarecorder/index.html +++ b/files/zh-cn/web/api/mediarecorder/index.html @@ -5,13 +5,13 @@ ---
    {{APIRef("Media Recorder API")}}
    -

    MediaRecorder 是 MediaStream Recording API 提供的用来进行媒体轻松录制的接口,他需要通过调用 {{domxref("MediaRecorder.MediaRecorder", "MediaRecorder()")}} 构造方法进行实例化。

    +

    MediaRecorderMediaStream Recording API 提供的用来进行媒体轻松录制的接口,他需要通过调用 {{domxref("MediaRecorder.MediaRecorder", "MediaRecorder()")}} 构造方法进行实例化。

    构造函数

    {{domxref("MediaRecorder.MediaRecorder()")}}
    -
        创建一个新的MediaRecorder对象,对指定的{{domxref("MediaStream")}} 对象进行录制,支持的配置项包括设置容器的 MIME 类型 (例如"video/webm" 或者 "video/mp4") 和音频及视频的码率或者二者同用一个码率
    +
    创建一个新的MediaRecorder对象,对指定的{{domxref("MediaStream")}} 对象进行录制,支持的配置项包括设置容器的 MIME 类型 (例如"video/webm" 或者 "video/mp4") 和音频及视频的码率或者二者同用一个码率
    @@ -19,20 +19,20 @@

    配置项

    {{domxref("MediaRecorder.mimeType")}} {{readonlyInline}}
    -
        返回 MediaRecorder 对象创建时选择器选择的录制容器的 MIME type
    +
    返回 MediaRecorder 对象创建时选择器选择的录制容器的 MIME type
    {{domxref("MediaRecorder.state")}} {{readonlyInline}}
    -
        返回录制对象MediaRecorder  的当前状态 (闲置中,录制中或者暂停 ) (inactive, recording, or paused.)
    +
    返回录制对象MediaRecorder 的当前状态 (闲置中,录制中或者暂停 ) (inactive, recording, or paused.)
    {{domxref("MediaRecorder.stream")}} {{readonlyInline}}
    -
        返回录制器对象 MediaRecorder 创建时构造函数传入的 stream 对象
    +
    返回录制器对象 MediaRecorder 创建时构造函数传入的 stream 对象
    {{domxref("MediaRecorder.ignoreMutedMedia")}}
    -
        用以指定 MediaRecorder是否录制无声的输入源。如果这个属性是 false. 录制器对象MediaRecorder  会录制无声的音频或者黑屏的视频,默认值是 false
    +
    用以指定 MediaRecorder是否录制无声的输入源。如果这个属性是 false. 录制器对象MediaRecorder 会录制无声的音频或者黑屏的视频,默认值是 false
    {{domxref("MediaRecorder.videoBitsPerSecond")}} {{readonlyInline}}
    -
    返回视频采用的编码比率。它可能和构造函数的设置比率不同.  (if it was provided).
    +
    返回视频采用的编码比率。它可能和构造函数的设置比率不同. (if it was provided).
    {{domxref("MediaRecorder.audioBitsPerSecond")}} {{readonlyInline}}
    -
    返回音频采用的编码比率,它可能和构造函数中设置的比率不同. (if it was provided).
    +
    返回音频采用的编码比率,它可能和构造函数中设置的比率不同. (if it was provided).
    @@ -44,7 +44,7 @@

    方法

    {{domxref("MediaRecorder.pause()")}}
    暂停媒体录制
    {{domxref("MediaRecorder.requestData()")}}
    -
    请求一个从开始到当前接收到的,存储为{{domxref("Blob")}}类型的录制内容. (或者是返回从上一次调用requestData() 方法之后到现在的内容).  调用这个方法后,录制将会继续进行,但是会创建一个新的Blob对象
    +
    请求一个从开始到当前接收到的,存储为{{domxref("Blob")}}类型的录制内容. (或者是返回从上一次调用requestData() 方法之后到现在的内容). 调用这个方法后,录制将会继续进行,但是会创建一个新的Blob对象
    {{domxref("MediaRecorder.resume()")}}
    继续录制之前被暂停的录制动作。
    {{domxref("MediaRecorder.start()")}}
    @@ -66,7 +66,7 @@

    事件处理

    {{domxref("MediaRecorder.ondataavailable")}}
    -
    调用它用来处理 {{event("dataavailable")}} 事件,该事件可用于获取录制的媒体资源 (在事件的 data 属性中会提供一个可用的 {{domxref("Blob")}} 对象.)
    +
    调用它用来处理 {{event("dataavailable")}} 事件,该事件可用于获取录制的媒体资源 (在事件的 data 属性中会提供一个可用的 {{domxref("Blob")}} 对象.)
    {{domxref("MediaRecorder.onerror")}}
    An {{event("Event_handlers", "event handler")}} called to handle the {{event("recordingerror")}} event, including reporting errors that arise with media recording. These are fatal errors that stop recording.
    {{domxref("MediaRecorder.onpause")}}
    @@ -74,19 +74,19 @@

    事件处理

    {{domxref("MediaRecorder.onresume")}}
    用来处理 {{event("resume")}} 事件,该事件在暂停后回复录制视频时触发({{domxref("MediaRecorder.resume()")}}).
    {{domxref("MediaRecorder.onstart")}}
    -
    用来处理 {{event("start")}} 事件,该事件在媒体开始录制时触发({{domxref("MediaRecorder.start()")}}).
    +
    用来处理 {{event("start")}} 事件,该事件在媒体开始录制时触发({{domxref("MediaRecorder.start()")}}).
    {{domxref("MediaRecorder.onstop")}}
    用来处理 {{event("stop")}} 事件,该事件会在媒体录制结束时、媒体流({{domxref("MediaStream")}})结束时、或者调用{{domxref("MediaRecorder.stop()")}} 方法后触发。

    事件

    -

    Listen to these events using addEventListener() or by assigning an event listener to the oneventname property of this interface.

    +

    Listen to these events using addEventListener() or by assigning an event listener to the oneventname property of this interface.

    error
    Fired when an error occurs: for example because recording wasn't allowed or was attempted using an unsupported codec.
    - Also available via the onerror property.
    + Also available via the onerror property.
    diff --git a/files/zh-cn/web/api/mediarecorder/istypesupported/index.html b/files/zh-cn/web/api/mediarecorder/istypesupported/index.html index 18e836b8b44d7e..dcec44b2c700dd 100644 --- a/files/zh-cn/web/api/mediarecorder/istypesupported/index.html +++ b/files/zh-cn/web/api/mediarecorder/istypesupported/index.html @@ -12,7 +12,7 @@ ---

    {{APIRef("MediaStream Recording")}}

    -

     MediaRecorder.isTypeSupported()方法会判断其 MIME 格式能否被客户端录制。

    +

    MediaRecorder.isTypeSupported()方法会判断其 MIME 格式能否被客户端录制。

    语法

    diff --git a/files/zh-cn/web/api/mediarecorder/mediarecorder/index.html b/files/zh-cn/web/api/mediarecorder/mediarecorder/index.html index f80af36ee32f14..aff4c88200a59a 100644 --- a/files/zh-cn/web/api/mediarecorder/mediarecorder/index.html +++ b/files/zh-cn/web/api/mediarecorder/mediarecorder/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef("MediaStream Recording")}}
    -

     MediaRecorder() 构造函数会创建一个对指定的 {{domxref("MediaStream")}} 进行录制的 {{domxref("MediaRecorder")}} 对象

    +

    MediaRecorder() 构造函数会创建一个对指定的 {{domxref("MediaStream")}} 进行录制的 {{domxref("MediaRecorder")}} 对象

    语法

    @@ -47,13 +47,13 @@

    例子

    var chunks = []; var onSuccess = function(stream) { -    var options = { -      audioBitsPerSecond : 128000, -      videoBitsPerSecond : 2500000, -      mimeType : 'video/mp4' -    } -    var mediaRecorder = new MediaRecorder(stream,options); -    m = mediaRecorder; + var options = { + audioBitsPerSecond : 128000, + videoBitsPerSecond : 2500000, + mimeType : 'video/mp4' + } + var mediaRecorder = new MediaRecorder(stream,options); + m = mediaRecorder; ...
    diff --git a/files/zh-cn/web/api/mediasession/index.html b/files/zh-cn/web/api/mediasession/index.html index 90737840e5f134..cc36eebda6b0f3 100644 --- a/files/zh-cn/web/api/mediasession/index.html +++ b/files/zh-cn/web/api/mediasession/index.html @@ -14,7 +14,7 @@ ---

    {{SeeCompatTable}}{{APIRef("Media Session API")}}

    -

    Media Session API 的 MediaSession 接口允许页面为标准媒体交互提供自定义行为。

    +

    Media Session APIMediaSession 接口允许页面为标准媒体交互提供自定义行为。

    属性

    @@ -22,7 +22,7 @@

    属性

    {{domxref("MediaSession.metadata")}}
    指向一个 {{domxref("MediaMetadata")}} 的实例,其包含富媒体的元数据。该数据将用于平台显示。
    {{domxref("MediaSession.playbackState")}}
    -
    展示当前 mediasession 是否处于播放状态。有效值为"none", "paused",  "playing".
    +
    展示当前 mediasession 是否处于播放状态。有效值为"none", "paused", "playing".

    方法

    @@ -37,18 +37,18 @@

    例子

    下面的例子创建了一个新的 media session,并且给其绑定了一些动作句柄:

    if ('mediaSession' in navigator){
    -  navigator.mediaSession.metadata = new MediaMetadata({
    +  navigator.mediaSession.metadata = new MediaMetadata({
         title: "Podcast Episode Title",
         artist: "Podcast Host",
         album: "Podcast Name",
         artwork: [{src: "podcast.jpg"}]
       });
    -  navigator.mediaSession.setActionHandler('play', function() {});
    -  navigator.mediaSession.setActionHandler('pause', function() {});
    -  navigator.mediaSession.setActionHandler('seekbackward', function() {});
    -  navigator.mediaSession.setActionHandler('seekforward', function() {});
    -  navigator.mediaSession.setActionHandler('previoustrack', function() {});
    -  navigator.mediaSession.setActionHandler('nexttrack', function() {});
    +  navigator.mediaSession.setActionHandler('play', function() {});
    +  navigator.mediaSession.setActionHandler('pause', function() {});
    +  navigator.mediaSession.setActionHandler('seekbackward', function() {});
    +  navigator.mediaSession.setActionHandler('seekforward', function() {});
    +  navigator.mediaSession.setActionHandler('previoustrack', function() {});
    +  navigator.mediaSession.setActionHandler('nexttrack', function() {});
     }

    下面例子为暂停和播放设置了时间句柄:

    @@ -60,13 +60,13 @@

    例子

    navigator.mediaSession.setActionHandler('pause', pause); function play() { -  audio.play(); -  navigator.mediaSession.playbackState = "playing"; + audio.play(); + navigator.mediaSession.playbackState = "playing"; } function pause() { -  audio.pause(); -  navigator.mediaSession.playbackState = "Paused"; + audio.pause(); + navigator.mediaSession.playbackState = "Paused"; }

    规范

    diff --git a/files/zh-cn/web/api/mediasession/setactionhandler/index.html b/files/zh-cn/web/api/mediasession/setactionhandler/index.html index 3d491059659086..3e1095ddb328a9 100644 --- a/files/zh-cn/web/api/mediasession/setactionhandler/index.html +++ b/files/zh-cn/web/api/mediasession/setactionhandler/index.html @@ -5,7 +5,7 @@ ---

    {{APIRef("Media Session API")}}{{SeeCompatTable}}

    -

    {{domxref("MediaSession")}} 接口的属性 setActionHandler() 为 media session 动作设置一个监听器。这些动作让网页程序在用户操作设备的内置物理或屏上媒体控制项时收到消息,例如播放、停止或搜寻按钮。

    +

    {{domxref("MediaSession")}} 接口的属性 setActionHandler() 为 media session 动作设置一个监听器。这些动作让网页程序在用户操作设备的内置物理或屏上媒体控制项时收到消息,例如播放、停止或搜寻按钮。

    语法

    @@ -15,7 +15,7 @@

    参数

    type
    -
    一个提供要监听的动作类型的 {{domxref("DOMString")}} 。它可以是 playpauseseekbackwardseekforwardprevioustrack 或 nexttrack
    +
    一个提供要监听的动作类型的 {{domxref("DOMString")}} 。它可以是 playpauseseekbackwardseekforwardprevioustracknexttrack
    callback
    一个在指定动作被调用时要调用的方法。回调方法不会收到参数,并且不应该返回值。
    @@ -26,25 +26,25 @@

    返回值

    使用说明

    -

    要移除一个已经存在的监听器,再调用一次 setActionHandler() ,将 null 作为回调方法。

    +

    要移除一个已经存在的监听器,再调用一次 setActionHandler() ,将 null 作为回调方法。

    示例

    下面的示例创建一个新的 media session 并且为它添加监听器(不做任何事情)。

    if ('mediaSession' in navigator){
    -  navigator.mediaSession.metadata = new MediaMetadata({
    +  navigator.mediaSession.metadata = new MediaMetadata({
         title: "播客音乐名字",
         artist: "播客主持人",
         album: "播客名字",
         artwork: [{src: "podcast.jpg"}]
       });
    -  navigator.mediaSession.setActionHandler('play', function() {});
    -  navigator.mediaSession.setActionHandler('pause', function() {});
    -  navigator.mediaSession.setActionHandler('seekbackward', function() {});
    -  navigator.mediaSession.setActionHandler('seekforward', function() {});
    -  navigator.mediaSession.setActionHandler('previoustrack', function() {});
    -  navigator.mediaSession.setActionHandler('nexttrack', function() {});
    +  navigator.mediaSession.setActionHandler('play', function() {});
    +  navigator.mediaSession.setActionHandler('pause', function() {});
    +  navigator.mediaSession.setActionHandler('seekbackward', function() {});
    +  navigator.mediaSession.setActionHandler('seekforward', function() {});
    +  navigator.mediaSession.setActionHandler('previoustrack', function() {});
    +  navigator.mediaSession.setActionHandler('nexttrack', function() {});
     }
     
    @@ -53,14 +53,14 @@

    示例

    let skipTime = 10; // 要跳过的秒数
     
     navigator.mediaSession.setActionHandler('seekbackward', evt => {
    -  // 用户点击了“向后搜寻”的媒体按钮
    -  audio.currentTime = Math.max(audio.currentTime - skipTime, 0);
    +  // 用户点击了“向后搜寻”的媒体按钮
    +  audio.currentTime = Math.max(audio.currentTime - skipTime, 0);
     });
     
     navigator.mediaSession.setActionHandler('seekforward', evt => {
    -  // 用户点击了“向前搜寻”的媒体按钮
    -  audio.currentTime = Math.min(audio.currentTime + skipTime,
    -                               audio.duration);
    +  // 用户点击了“向前搜寻”的媒体按钮
    +  audio.currentTime = Math.min(audio.currentTime + skipTime,
    +                               audio.duration);
     });

    要移除一个监听器,将它设为 null。

    diff --git a/files/zh-cn/web/api/mediasource/addsourcebuffer/index.html b/files/zh-cn/web/api/mediasource/addsourcebuffer/index.html index 9f9e1104a08ebb..ebe2497e2cb41f 100644 --- a/files/zh-cn/web/api/mediasource/addsourcebuffer/index.html +++ b/files/zh-cn/web/api/mediasource/addsourcebuffer/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef("Media Source Extensions")}}{{SeeCompatTable}}
    -

    {{domxref("MediaSource")}} 的 addSourceBuffer() 方法会根据给定的 MIME 类型创建一个新的 {{domxref("SourceBuffer")}} 对象,然后会将它追加到 MediaSource 的 {{domxref("SourceBuffers")}} 列表中。

    +

    {{domxref("MediaSource")}} 的 addSourceBuffer() 方法会根据给定的 MIME 类型创建一个新的 {{domxref("SourceBuffer")}} 对象,然后会将它追加到 MediaSource 的 {{domxref("SourceBuffers")}} 列表中。

    语法

    @@ -15,7 +15,7 @@

    参数

    mimeType
    -
    你想创建的 source buffer 的 MIME 类型。
    +
    你想创建的 source buffer 的 MIME 类型。

    返回

    @@ -36,15 +36,15 @@

    错误( Errors )

    - + - + - + diff --git a/files/zh-cn/web/api/mediasource/duration/index.html b/files/zh-cn/web/api/mediasource/duration/index.html index 9d7344d54294e6..ad44e1ac6cb4df 100644 --- a/files/zh-cn/web/api/mediasource/duration/index.html +++ b/files/zh-cn/web/api/mediasource/duration/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef("Media Source Extensions")}}{{SeeCompatTable}}
    -

    {{domxref("MediaSource")}} 接口的属性 duration 用来获取或者设置当前媒体展示的时长。

    +

    {{domxref("MediaSource")}} 接口的属性 duration 用来获取或者设置当前媒体展示的时长。

    语法

    @@ -31,18 +31,18 @@

    错误

    - + - +
    InvalidAccessError提交的 mimeType 是一个空字符串。提交的 mimeType 是一个空字符串。
    InvalidStateError{{domxref("MediaSource.readyState")}} 的值不等于 open.{{domxref("MediaSource.readyState")}} 的值不等于 open.
    NotSupportedError当前浏览器不支持你提交的 mimeType , 或者 it is not compatible with the mimeTypes specified for the {{domxref("SourceBuffer")}} objects that already exist in {{domxref("MediaSource.sourceBuffers")}}.当前浏览器不支持你提交的 mimeType , 或者 it is not compatible with the mimeTypes specified for the {{domxref("SourceBuffer")}} objects that already exist in {{domxref("MediaSource.sourceBuffers")}}.
    QuotaExceededError
    InvalidAccessError时长尝试设置一个负数,或者 NaN.时长尝试设置一个负数,或者 NaN.
    InvalidStateError{{domxref("MediaSource.readyState")}} 状态不是 open, 或者 一个或多个 {{domxref("SourceBuffer")}} 对象在 {{domxref("MediaSource.sourceBuffers")}} 中被更新  (例如。该 {{domxref("SourceBuffer.updating")}}属性 为 true.){{domxref("MediaSource.readyState")}} 状态不是 open, 或者 一个或多个 {{domxref("SourceBuffer")}} 对象在 {{domxref("MediaSource.sourceBuffers")}} 中被更新 (例如。该 {{domxref("SourceBuffer.updating")}}属性 为 true.)

    例子

    -

    下面的代码片段取自 Nick Desaulniers 写的简单例子 (想进一步了解 查看完整例子, 或者 下载源代码 .)

    +

    下面的代码片段取自 Nick Desaulniers 写的简单例子 (想进一步了解 查看完整例子, 或者 下载源代码 .)

    function sourceOpen (_) {
       //console.log(this.readyState); // open
    diff --git a/files/zh-cn/web/api/mediasource/index.html b/files/zh-cn/web/api/mediasource/index.html
    index e610ec4e4b8107..b15748df5be10b 100644
    --- a/files/zh-cn/web/api/mediasource/index.html
    +++ b/files/zh-cn/web/api/mediasource/index.html
    @@ -5,13 +5,13 @@
     ---
     

    {{APIRef("Media Source Extensions")}}{{SeeCompatTable}}

    -

    MediaSourceMedia Source Extensions API 表示媒体资源{{domxref("HTMLMediaElement")}}对象的接口。MediaSource 对象可以附着在{{domxref("HTMLMediaElement")}}在客户端进行播放。

    +

    MediaSourceMedia Source Extensions API 表示媒体资源{{domxref("HTMLMediaElement")}}对象的接口。MediaSource 对象可以附着在{{domxref("HTMLMediaElement")}}在客户端进行播放。

    构造函数

    {{domxref("MediaSource.MediaSource", "MediaSource()")}}
    -
    构造并且返回一个新的MediaSource的空对象(with no associated source buffers)。
    +
    构造并且返回一个新的MediaSource的空对象(with no associated source buffers)。

    属性

    @@ -20,8 +20,8 @@

    属性

    {{domxref("MediaSource.sourceBuffers")}} {{readonlyInline}}
    返回一个 {{domxref("SourceBufferList")}} 对象,包含了这个 MediaSource 的 {{domxref("SourceBuffer")}}的对象列表。
    {{domxref("MediaSource.activeSourceBuffers")}} {{readonlyInline}}
    -
    返回一个 {{domxref("SourceBufferList")}} 对象,包含了这个{{domxref("MediaSource.sourceBuffers")}}中的{{domxref("SourceBuffer")}} 子集的对象—即提供当前被选中的视频轨 (video track),启用的音频轨 (audio tracks) 以及显示/隐藏的字幕轨 (text tracks) 的对象列表。
    -
     
    +
    返回一个 {{domxref("SourceBufferList")}} 对象,包含了这个{{domxref("MediaSource.sourceBuffers")}}中的{{domxref("SourceBuffer")}} 子集的对象—即提供当前被选中的视频轨 (video track),启用的音频轨 (audio tracks) 以及显示/隐藏的字幕轨 (text tracks) 的对象列表。
    +
    {{domxref("MediaSource.readyState")}} {{readonlyInline}}
    返回一个包含当前 MediaSource状态的集合,即使它当前没有附着到一个 media 元素 (closed),或者已附着并准备接收{{domxref("SourceBuffer")}} 对象 (open),亦或者已附着但这个流已被{{domxref("MediaSource.endOfStream()")}}关闭 (ended.)
    {{domxref("MediaSource.duration")}}
    @@ -40,7 +40,7 @@

    方法

    {{domxref("MediaSource.addSourceBuffer()")}}
    -
    创建一个带有给定 MIME 类型的新的 {{domxref("SourceBuffer")}} 并添加到 MediaSource 的 {{domxref("SourceBuffers")}} 列表。
    +
    创建一个带有给定 MIME 类型的新的 {{domxref("SourceBuffer")}} 并添加到 MediaSource 的 {{domxref("SourceBuffers")}} 列表。
    {{domxref("MediaSource.removeSourceBuffer()")}}
    删除指定的{{domxref("SourceBuffer")}} 从这个MediaSource对象中的 {{domxref("SourceBuffers")}}列表。
    {{domxref("MediaSource.endOfStream()")}}
    @@ -54,7 +54,7 @@

    静态方法

    示例

    -

    这个例子尽可能快地逐块加载视频,并在加载好后立刻播放。 这个示例是由 Nick Desaulniers 编写,你可以点这里查看  (你也可以点这里下载来进一步研究)。

    +

    这个例子尽可能快地逐块加载视频,并在加载好后立刻播放。 这个示例是由 Nick Desaulniers 编写,你可以点这里查看 (你也可以点这里下载来进一步研究)。

    var video = document.querySelector('video');
     
    diff --git a/files/zh-cn/web/api/mediasource/mediasource/index.html b/files/zh-cn/web/api/mediasource/mediasource/index.html
    index 1b411c00b15b0d..a2614789acead7 100644
    --- a/files/zh-cn/web/api/mediasource/mediasource/index.html
    +++ b/files/zh-cn/web/api/mediasource/mediasource/index.html
    @@ -5,7 +5,7 @@
     ---
     
    {{APIRef("Media Source Extensions")}}{{SeeCompatTable}}
    -

    MediaSource() 是 {{domxref("MediaSource")}} 的构造函数 返回一个没有分配 source buffers 新的 MediaSource 对象。

    +

    MediaSource() 是 {{domxref("MediaSource")}} 的构造函数 返回一个没有分配 source buffers 新的 MediaSource 对象。

    语法

    @@ -17,7 +17,7 @@

    参数

    例子

    -

    下面的代码片段取自 Nick Desaulniers 写的简单例子 (想进一步了解 查看完整例子 或者 下载源代码 .)

    +

    下面的代码片段取自 Nick Desaulniers 写的简单例子 (想进一步了解 查看完整例子 或者 下载源代码 .)

    var video = document.querySelector('video');
     
    diff --git a/files/zh-cn/web/api/mediastream/active/index.html b/files/zh-cn/web/api/mediastream/active/index.html
    index 2a3a9a7566621d..e23ef052a6b0ae 100644
    --- a/files/zh-cn/web/api/mediastream/active/index.html
    +++ b/files/zh-cn/web/api/mediastream/active/index.html
    @@ -11,7 +11,7 @@
     ---
     

    {{APIRef("Media Capture and Streams")}}

    -

    active 是 {{domxref("MediaStream")}} 接口的只读属性,返回布尔值,如果媒体流当前为活动状态时,返回 true ,否则返回 false。 至少有一条 {{domxref("MediaStreamTrack")}} 的媒体流不是{{domxref("MediaStreamTrack.ended")}} 状态时才认为是 活动的 。当所有轨道关闭时,媒体流的属性置为 false。

    +

    active 是 {{domxref("MediaStream")}} 接口的只读属性,返回布尔值,如果媒体流当前为活动状态时,返回 true ,否则返回 false。 至少有一条 {{domxref("MediaStreamTrack")}} 的媒体流不是{{domxref("MediaStreamTrack.ended")}} 状态时才认为是 活动的 。当所有轨道关闭时,媒体流的属性置为 false。

    语法

    @@ -19,20 +19,20 @@

    语法

    Value

    -

    布尔值,当媒体流当前为活动状态时为 true ; 否则为 false.

    +

    布尔值,当媒体流当前为活动状态时为 true ; 否则为 false.

    样例

    在这个例子中,使用{{domxref("MediaDevices.getUserMedia", "getUserMedia()")}}请求源为用户本地摄像机和麦克风的一条新流,当流可用时(即满足返回的{{jsxref("Promise")}}),根据该流当前是否处于活动状态来更新页面上的按钮。

    var promise = navigator.mediaDevices.getUserMedia({
    -  audio: true,
    -  video: true
    +  audio: true,
    +  video: true
     });
     
     promise.then(function(stream) {
       var startBtn = document.querySelector('#startBtn');
    -  startBtn.disabled = stream.active;
    +  startBtn.disabled = stream.active;
     };)

    规范

    diff --git a/files/zh-cn/web/api/mediastream/addtrack/index.html b/files/zh-cn/web/api/mediastream/addtrack/index.html index 80f87206725444..e9109cbb701f03 100644 --- a/files/zh-cn/web/api/mediastream/addtrack/index.html +++ b/files/zh-cn/web/api/mediastream/addtrack/index.html @@ -6,7 +6,7 @@ ---

    {{APIRef("Media Capture and Streams")}}

    -

    MediaStream.addTrack() 方法会给流添加一个新轨道。指定一个{{domxref("MediaStreamTrack")}}对象作为参数。

    +

    MediaStream.addTrack() 方法会给流添加一个新轨道。指定一个{{domxref("MediaStreamTrack")}}对象作为参数。

    如果指定的 track 已经存在于流的 track set 里的话,该方法不会产生作用。

    @@ -26,7 +26,7 @@

    Parameters

    Example

    -

     

    +

    Specifications

    diff --git a/files/zh-cn/web/api/mediastream/clone/index.html b/files/zh-cn/web/api/mediastream/clone/index.html index 049a0e74513a70..f5d42b516319e5 100644 --- a/files/zh-cn/web/api/mediastream/clone/index.html +++ b/files/zh-cn/web/api/mediastream/clone/index.html @@ -5,7 +5,7 @@ ---

    {{APIRef("Media Capture and Streams")}}

    -

    The clone() method of the {{domxref("MediaStream")}} interface creates a duplicate of the MediaStream. This new MediaStream object has a new unique {{domxref("MediaStream.id", "id")}} and contains clones of every {{domxref("MediaStreamTrack")}} contained by the MediaStream on which clone() was called.

    +

    The clone() method of the {{domxref("MediaStream")}} interface creates a duplicate of the MediaStream. This new MediaStream object has a new unique {{domxref("MediaStream.id", "id")}} and contains clones of every {{domxref("MediaStreamTrack")}} contained by the MediaStream on which clone() was called.

    Syntax

    diff --git a/files/zh-cn/web/api/mediastream/getaudiotracks/index.html b/files/zh-cn/web/api/mediastream/getaudiotracks/index.html index 2fe0ed9878822a..c0e1eae4140890 100644 --- a/files/zh-cn/web/api/mediastream/getaudiotracks/index.html +++ b/files/zh-cn/web/api/mediastream/getaudiotracks/index.html @@ -15,7 +15,7 @@ ---

    {{APIRef("Media Capture and Streams")}}

    -

    {{domxref("MediaStream")}} 接口下的 getAudioTracks() 方法会返回一个包含 track set 流中所有 {{domxref("MediaStreamTrack.kind")}} 为 audio 的 {{domxref("MediaStreamTrack")}} 对象序列。

    +

    {{domxref("MediaStream")}} 接口下的 getAudioTracks() 方法会返回一个包含 track set 流中所有 {{domxref("MediaStreamTrack.kind")}} 为 audio 的 {{domxref("MediaStreamTrack")}} 对象序列。

    语法

    @@ -27,17 +27,17 @@

    参数

    返回值

    -

    {{domxref("MediaStreamTrack")}} 对象数组,包含流中所有的音轨。音轨的 {{domxref("MediaStreamTrack.kind", "kind")}} 值为 audio 。如果流中不包含音轨,则数组为空。

    +

    {{domxref("MediaStreamTrack")}} 对象数组,包含流中所有的音轨。音轨的 {{domxref("MediaStreamTrack.kind", "kind")}} 值为 audio 。如果流中不包含音轨,则数组为空。

    -

    注意:数组中返回的顺序并不是由规范定义的,事实上,每次调用 getAudioTracks() 的结果都可能有所不同。

    +

    注意:数组中返回的顺序并不是由规范定义的,事实上,每次调用 getAudioTracks() 的结果都可能有所不同。

    更早版本的本 API 中,包含一个用做列表中每个音频类型的 AudioStreamTrack 接口;现在已被合并至 {{domxref("MediaStreamTrack")}} 主接口中。

    示例

    -

    本示例使用 {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}} 获取视频流中的网络摄像机的音频和视频,并将媒体流绑定到 {{HTMLElement("video")}} 元素,然后设置一个计时器,计时器到期时会停止在该媒体流中找到的第一个音轨。

    +

    本示例使用 {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}} 获取视频流中的网络摄像机的音频和视频,并将媒体流绑定到 {{HTMLElement("video")}} 元素,然后设置一个计时器,计时器到期时会停止在该媒体流中找到的第一个音轨。

    navigator.mediaDevices.getUserMedia({audio: true, video: true})
     .then(mediaStream => {
    diff --git a/files/zh-cn/web/api/mediastream/gettracks/index.html b/files/zh-cn/web/api/mediastream/gettracks/index.html
    index 9a202de76f3a5e..5c47cac70b431f 100644
    --- a/files/zh-cn/web/api/mediastream/gettracks/index.html
    +++ b/files/zh-cn/web/api/mediastream/gettracks/index.html
    @@ -11,7 +11,7 @@
     ---
     

    {{APIRef("Media Capture and Streams")}}{{SeeCompatTable}}

    -

    {{domxref("MediaStream")}} 接口的getTracks() 方法会返回一个包含  track set 流中所有 {{domxref("MediaStreamTrack")}}  对象的序列, 序列内容与{{domxref("MediaStreamTrack.kind")}} 无关。

    +

    {{domxref("MediaStream")}} 接口的getTracks() 方法会返回一个包含 track set 流中所有 {{domxref("MediaStreamTrack")}} 对象的序列, 序列内容与{{domxref("MediaStreamTrack.kind")}} 无关。

    语法

    diff --git a/files/zh-cn/web/api/mediastream/id/index.html b/files/zh-cn/web/api/mediastream/id/index.html index 52d47785836bb1..fa2294143ead95 100644 --- a/files/zh-cn/web/api/mediastream/id/index.html +++ b/files/zh-cn/web/api/mediastream/id/index.html @@ -5,7 +5,7 @@ ---

    {{APIRef("WebRTC")}}

    -

    MediaStream.id 只读属性,一个包含 36 个字符的 {{domxref("DOMString")}} ,用来作为这个对象的唯一标识符 (GUID) 。

    +

    MediaStream.id 只读属性,一个包含 36 个字符的 {{domxref("DOMString")}} ,用来作为这个对象的唯一标识符 (GUID) 。

    语法

    diff --git a/files/zh-cn/web/api/mediastream/index.html b/files/zh-cn/web/api/mediastream/index.html index b2de2be8c8d50d..45338f7522980c 100644 --- a/files/zh-cn/web/api/mediastream/index.html +++ b/files/zh-cn/web/api/mediastream/index.html @@ -16,7 +16,7 @@

    属性

    {{domxref("MediaStream.active")}} {{readonlyinline}}
    布尔型。如果这个流处于活动状态值为 true,反之为 false
    {{domxref("MediaStream.ended")}} {{readonlyInline}}{{Deprecated_Inline}}
    -
    布尔型。如果 {{event("ended (MediaStream)", "ended")}} 事件在这个对象上触发了,也就是说这个流已经被完全读取,值为 true。 如果还没有到达这个流的尾部,值为 false。
    +
    布尔型。如果 {{event("ended (MediaStream)", "ended")}} 事件在这个对象上触发了,也就是说这个流已经被完全读取,值为 true。 如果还没有到达这个流的尾部,值为 false。
    @@ -70,7 +70,7 @@

    方法

    {{domxref("MediaStream.removeTrack()")}}
    -
    移除作为参数传入的 {{domxref("MediaStreamTrack")}}。 如果这个轨道不在MediaStream 对象中什么也不会发生; 如果目标轨道为“完成”状态,一个 INVALID_STATE_RAISE 异常会产生。
    +
    移除作为参数传入的 {{domxref("MediaStreamTrack")}}。 如果这个轨道不在MediaStream 对象中什么也不会发生; 如果目标轨道为“完成”状态,一个 INVALID_STATE_RAISE 异常会产生。

    规范

    diff --git a/files/zh-cn/web/api/mediastream/mediastream/index.html b/files/zh-cn/web/api/mediastream/mediastream/index.html index a85cd4d28295ac..06272fc839d2e0 100644 --- a/files/zh-cn/web/api/mediastream/mediastream/index.html +++ b/files/zh-cn/web/api/mediastream/mediastream/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef("Media Capture and Streams")}}
    -

     构造函数MediaStream() 返回新建的 {{domxref("MediaStream")}} 实例,该实例作为媒体流的内容的集合载体,其可能包含多个媒体数据轨,每个数据轨则由一个 {{domxref("MediaStreamTrack")}} 对象表示。如果给出相应参数,在指定的数据轨则被添加到新的流中。否则,该流中不包含任何数据轨。

    +

    构造函数MediaStream() 返回新建的 {{domxref("MediaStream")}} 实例,该实例作为媒体流的内容的集合载体,其可能包含多个媒体数据轨,每个数据轨则由一个 {{domxref("MediaStreamTrack")}} 对象表示。如果给出相应参数,在指定的数据轨则被添加到新的流中。否则,该流中不包含任何数据轨。

    语法

    @@ -18,9 +18,9 @@

    参数

    stream
    -
    这是另一个 {{domxref("MediaStream")}} 对象,其数据轨会被自动添加到新建的流中。且这些数据轨不会从原流中移除,即变成了两条流共享的数据。
    +
    这是另一个 {{domxref("MediaStream")}} 对象,其数据轨会被自动添加到新建的流中。且这些数据轨不会从原流中移除,即变成了两条流共享的数据。
    tracks
    -
    这是 {{domxref("MediaStreamTrack")}} 对象的 {{jsxref("Array")}} 类型的成员,代表了每一个添加到流中的数据轨。
    +
    这是 {{domxref("MediaStreamTrack")}} 对象的 {{jsxref("Array")}} 类型的成员,代表了每一个添加到流中的数据轨。

    返回值

    diff --git a/files/zh-cn/web/api/mediastream_recording_api/index.html b/files/zh-cn/web/api/mediastream_recording_api/index.html index e17f41b60aefe1..ad825baea4b0ce 100644 --- a/files/zh-cn/web/api/mediastream_recording_api/index.html +++ b/files/zh-cn/web/api/mediastream_recording_api/index.html @@ -17,31 +17,31 @@ ---
    {{DefaultAPISidebar("MediaStream Recording")}}
    -
    MediaStream Recording API 有时简称为Media Recording API 或者 MediaRecorder API, 与 Media Capture and Streams API 和 WebRTC API 密切相关. MediaStream Recording API 使得捕获通过 {{domxref("MediaStream")}} 或者{{domxref("HTMLMediaElement")}} 对象产生的用于分析、加工或者保存到硬盘的数据成为可能。它也非常容易让人们使用。
    +
    MediaStream Recording API 有时简称为Media Recording API 或者 MediaRecorder API, 与 Media Capture and Streams APIWebRTC API 密切相关. MediaStream Recording API 使得捕获通过 {{domxref("MediaStream")}} 或者{{domxref("HTMLMediaElement")}} 对象产生的用于分析、加工或者保存到硬盘的数据成为可能。它也非常容易让人们使用。

    基本概念

    -

    MediaStream Recording API 由一个主接口{{domxref("MediaRecorder")}}组成,这个接口负责的所有工作是从{{domxref("MediaStream")}}获取数据并将其传递给你进行处理。数据通过一系列{{event("dataavailable")}}事件传递,这些数据已经成为你创建 MediaRecorder 时所声明的格式。然后,您可以进一步处理数据,或者根据需要将其写入文件。

    +

    MediaStream Recording API 由一个主接口{{domxref("MediaRecorder")}}组成,这个接口负责的所有工作是从{{domxref("MediaStream")}}获取数据并将其传递给你进行处理。数据通过一系列{{event("dataavailable")}}事件传递,这些数据已经成为你创建 MediaRecorder 时所声明的格式。然后,您可以进一步处理数据,或者根据需要将其写入文件。

    录制过程概述

    记录一个流的过程是非常容易的:

      -
    1. 建立一个 {{domxref("MediaStream")}}或者{{domxref("HTMLMediaElement")}} (以 {{HTMLElement("audio")}} 或 {{HTMLElement("video")}} 元素的形式) 来充当媒体数据的源。
    2. -
    3. 创建一个 {{domxref("MediaRecorder")}} 对象,指定源以及任何有需求的的选项 (比如容器的 MIME 类型或它轨道所需的比特率).
    4. +
    5. 建立一个 {{domxref("MediaStream")}}或者{{domxref("HTMLMediaElement")}} (以 {{HTMLElement("audio")}} 或 {{HTMLElement("video")}} 元素的形式) 来充当媒体数据的源。
    6. +
    7. 创建一个 {{domxref("MediaRecorder")}} 对象,指定源以及任何有需求的的选项 (比如容器的 MIME 类型或它轨道所需的比特率).
    8. 给 {{event("dataavailable")}} 事件设置{{domxref("MediaRecorder.ondataavailable")}} 事件处理函数; 会在数据可利用时候调用。
    9. -
    10. 一旦媒体源播放,你已经准备好录制,使用 {{domxref("MediaRecorder.start()")}} 开始录制。
    11. -
    12. {{event("dataavailable")}} 事件处理函数正如你所愿的在每次数据准备好时调用; 这个事件有一个值为包含媒体数据的{{domxref("Blob")}} 类型的 data 属性。你可以强制 dataavailable 事件发生,因此会给你传递最新的声音以至于可以让你过滤、保存或者做一些其他的事情。
    13. +
    14. 一旦媒体源播放,你已经准备好录制,使用 {{domxref("MediaRecorder.start()")}} 开始录制。
    15. +
    16. {{event("dataavailable")}} 事件处理函数正如你所愿的在每次数据准备好时调用; 这个事件有一个值为包含媒体数据的{{domxref("Blob")}} 类型的 data 属性。你可以强制 dataavailable 事件发生,因此会给你传递最新的声音以至于可以让你过滤、保存或者做一些其他的事情。
    17. 当源媒体停止播放时候,录制自动结束。
    18. 你可以随时结束录制通过使用 {{domxref("MediaRecorder.stop()")}}.
    -

    注意: 单单使用包含已经录制好媒体切片的{{domxref("Blob")}}s 将大可不能单独播放。媒体在重放之前需要重新组装 .

    +

    注意: 单单使用包含已经录制好媒体切片的{{domxref("Blob")}}s 将大可不能单独播放。媒体在重放之前需要重新组装 .

    -

    如果在录制过程中出错,{{event("error")}} 事件将会传给MediaRecorder. 你可以设置{{domxref("MediaRecorder.onerror", "onerror")}}去监听 error 事件。

    +

    如果在录制过程中出错,{{event("error")}} 事件将会传给MediaRecorder. 你可以设置{{domxref("MediaRecorder.onerror", "onerror")}}去监听 error 事件。

    例子中,我们使用 Canvas 作为{{domxref("MediaStream")}}的源,在 9 秒后停止录音。

    @@ -90,13 +90,13 @@

    录制过程概述

    检查 and 控制记录器的状态

    -

    你也可以使用 MediaRecorder 对象的属性去决定录制过程的状态,用 {{domxref("MediaRecorder.pause", "pause()")}} 和 {{domxref("MediaRecorder.resume", "resume()")}} 方法暂停或者继续媒体源的录制。

    +

    你也可以使用 MediaRecorder 对象的属性去决定录制过程的状态,用 {{domxref("MediaRecorder.pause", "pause()")}} 和 {{domxref("MediaRecorder.resume", "resume()")}} 方法暂停或者继续媒体源的录制。

    如果你需要检查一个特殊的 MIME 类型是否被支持,使用{{domxref("MediaRecorder.isTypeSupported()")}}.

    检查潜在的输入源

    -

    如果你的目标是记录摄像头或麦克风输入,您可能希望在构建 MediaRecorder 之前检查可用的输入设备。这时,你需要调用 {{domxref("MediaDevices.enumerateDevices", "navigator.mediaDevices.enumerateDevices()")}} 来得到可使用的媒体设备。你可以检查此列表,发现潜在的设备,甚至在有需要的时候过滤掉设备。

    +

    如果你的目标是记录摄像头或麦克风输入,您可能希望在构建 MediaRecorder 之前检查可用的输入设备。这时,你需要调用 {{domxref("MediaDevices.enumerateDevices", "navigator.mediaDevices.enumerateDevices()")}} 来得到可使用的媒体设备。你可以检查此列表,发现潜在的设备,甚至在有需要的时候过滤掉设备。

    在这块代码中,enumerateDevices() 被用来检查可利用的设备,找到那些音频输入设备,创建{{HTMLElement("option")}} 元素,之后添加到{{HTMLElement("select")}}元素,代表输入源选择器 .

    @@ -117,7 +117,7 @@

    检查潜在的输入源

    更多信息

    -

    更多关于 MediaStream Recording API 的使用,查看 Using the MediaStream Recording API, 这个显示了如何使用 API 来记录音频剪辑。另一篇文章,Recording a media element, 介绍了如何从 {{HTMLElement("audio")}} 或{{HTMLElement("video")}} 元素 接收信息流和如何使用接收到的信息流(这个案例中,接收、存到硬盘)。 

    +

    更多关于 MediaStream Recording API 的使用,查看 Using the MediaStream Recording API, 这个显示了如何使用 API 来记录音频剪辑。另一篇文章,Recording a media element, 介绍了如何从 {{HTMLElement("audio")}} 或{{HTMLElement("video")}} 元素 接收信息流和如何使用接收到的信息流(这个案例中,接收、存到硬盘)。

    参考

    @@ -151,5 +151,5 @@

    参阅

  • FingerSpell: Sign Language Fingerspelling practice using getUserMedia and the MediaRecorder API to create and download recordings, MediaRecorder API supported desktop browsers only (source on GitHub)
  • Simple video recording demo
  • Advanced media stream recorder sample
  • -
  • OpenLang: HTML5 video language lab web application using MediaDevices and the MediaStream Recording API for video recording (source on GitHub)
  • +
  • OpenLang: HTML5 video language lab web application using MediaDevices and the MediaStream Recording API for video recording (source on GitHub)
  • diff --git a/files/zh-cn/web/api/mediastream_recording_api/using_the_mediastream_recording_api/index.html b/files/zh-cn/web/api/mediastream_recording_api/using_the_mediastream_recording_api/index.html index cba5b710d3faca..e63e8c2610cae3 100644 --- a/files/zh-cn/web/api/mediastream_recording_api/using_the_mediastream_recording_api/index.html +++ b/files/zh-cn/web/api/mediastream_recording_api/using_the_mediastream_recording_api/index.html @@ -223,7 +223,7 @@

    抓取并使用 blob 数据

    <button>Delete</button> </article>
    -

    之后,我们从录制的音频块中创建组合{{domxref("Blob")}},并使用 window.URL.createObjectURL(blob) 创建指向它的对象 URL。然后我们将 {{HTMLElement("audio")}}元素的{{htmlattrxref("src", "audio")}}属性的值设置为对象 URL,以便在音频播放器上按下播放按钮时,它会播放音频。

    +

    之后,我们从录制的音频块中创建组合{{domxref("Blob")}},并使用 window.URL.createObjectURL(blob) 创建指向它的对象 URL。然后我们将 {{HTMLElement("audio")}}元素的{{htmlattrxref("src", "audio")}}属性的值设置为对象 URL,以便在音频播放器上按下播放按钮时,它会播放音频。

    最后,我们监听删除按钮的 onclick 事件,以便能够删除整个剪辑 HTML 结构。

    @@ -240,5 +240,5 @@

    See also

    diff --git a/files/zh-cn/web/api/mediastreamaudiosourcenode/index.html b/files/zh-cn/web/api/mediastreamaudiosourcenode/index.html index 12ffafe0f32224..1939fc5b25f5ce 100644 --- a/files/zh-cn/web/api/mediastreamaudiosourcenode/index.html +++ b/files/zh-cn/web/api/mediastreamaudiosourcenode/index.html @@ -9,10 +9,10 @@

    {{APIRef("Web Audio API")}}

    -

    MediaStreamAudioSourceNode 接口代表一个音频接口,是WebRTC {{domxref("MediaStream")}} (比如一个摄像头或者麦克风) 的一部分。是个表现为音频源的{{domxref("AudioNode")}}。

    +

    MediaStreamAudioSourceNode 接口代表一个音频接口,是WebRTC {{domxref("MediaStream")}} (比如一个摄像头或者麦克风) 的一部分。是个表现为音频源的{{domxref("AudioNode")}}。

    -

    MediaElementSourceNode 没有输入,并且只有一个输出。创建之后使用 {{domxref("AudioContext.createMediaStreamSource")}}方法。输出通道的数量和{{domxref("AudioMediaStreamTrack")}}的通道数量相同。如果没有有效的媒体流,输出通道就变成一个静音的通道。

    +

    MediaElementSourceNode 没有输入,并且只有一个输出。创建之后使用 {{domxref("AudioContext.createMediaStreamSource")}}方法。输出通道的数量和{{domxref("AudioMediaStreamTrack")}}的通道数量相同。如果没有有效的媒体流,输出通道就变成一个静音的通道。

    diff --git a/files/zh-cn/web/api/mediastreamevent/index.html b/files/zh-cn/web/api/mediastreamevent/index.html index 9c2fefe7b5dbdd..842b4435e6c554 100644 --- a/files/zh-cn/web/api/mediastreamevent/index.html +++ b/files/zh-cn/web/api/mediastreamevent/index.html @@ -5,7 +5,7 @@ ---

    {{APIRef("WebRTC")}}{{SeeCompatTable}}

    -

     MediaStreamEvent 接口表示发生在 {{domxref("MediaStream")}}中的事件。这种类型返回两个事件: {{event("addstream")}} 和 {{event("removestream")}}.

    +

    MediaStreamEvent 接口表示发生在 {{domxref("MediaStream")}}中的事件。这种类型返回两个事件: {{event("addstream")}} 和 {{event("removestream")}}.

    Properties

    @@ -20,12 +20,12 @@

    Constructors

    {{domxref("MediaStreamEvent.MediaStreamEvent()", "MediaStreamEvent()")}}
    -
    返回一个新的 MediaStreamEvent.  它需要两个参数,第一个为 {{domxref("DOMString")}} 代表事件的类型; 第二个是一个 {{domxref("MediaStream")}}集合 .
    +
    返回一个新的 MediaStreamEvent. 它需要两个参数,第一个为 {{domxref("DOMString")}} 代表事件的类型; 第二个是一个 {{domxref("MediaStream")}}集合 .

    Methods

    -

    一个 {{domxref("MediaStreamEvent")}} 作为一个 {{domxref("Event")}}, 这个事件也实现了这些属性没有特定的 {{domxref("MediaStreamEvent")}} 方法。

    +

    一个 {{domxref("MediaStreamEvent")}} 作为一个 {{domxref("Event")}}, 这个事件也实现了这些属性. 没有特定的 {{domxref("MediaStreamEvent")}} 方法。

    Examples

    diff --git a/files/zh-cn/web/api/mediastreamtrack/getcapabilities/index.html b/files/zh-cn/web/api/mediastreamtrack/getcapabilities/index.html index 98bd7c673f96af..e5dbe8d09c4bfc 100644 --- a/files/zh-cn/web/api/mediastreamtrack/getcapabilities/index.html +++ b/files/zh-cn/web/api/mediastreamtrack/getcapabilities/index.html @@ -12,9 +12,9 @@ ---

    {{APIRef("Media Capture and Streams")}}

    -

    {{domxref("MediaStreamTrack")}} 接口的 getCapabilities() 方法返回一个  {{domxref('MediaTrackCapabilities')}} 对象,此对象表示每个可调节属性的值或者范围,该特性依赖于平台和{{Glossary("user agent")}}.

    +

    {{domxref("MediaStreamTrack")}} 接口的 getCapabilities() 方法返回一个 {{domxref('MediaTrackCapabilities')}} 对象,此对象表示每个可调节属性的值或者范围,该特性依赖于平台和{{Glossary("user agent")}}.

    -

    一旦你知道了浏览器的功能,你的脚本可以通过调用 {{domxref("MediaStreamTrack.applyConstraints", "applyConstraints()")}} 来请求配置为匹配理想或可接受的设置。参考{{SectionOnPage("/zh-CN/docs/Web/API/Media_Streams_API", "Capabilities and constraints")}} 以了解受限制属性的具体细节。

    +

    一旦你知道了浏览器的功能,你的脚本可以通过调用 {{domxref("MediaStreamTrack.applyConstraints", "applyConstraints()")}} 来请求配置为匹配理想或可接受的设置。参考{{SectionOnPage("/zh-CN/docs/Web/API/Media_Streams_API", "Capabilities and constraints")}} 以了解受限制属性的具体细节。

    语法

    @@ -26,7 +26,7 @@

    参数

    返回值

    -

    A {{domxref('MediaTrackCapabilities')}} object which specifies the value or range of values which are supported for each of the user agent's supported constrainable properties.

    +

    A {{domxref('MediaTrackCapabilities')}} object which specifies the value or range of values which are supported for each of the user agent's supported constrainable properties.

    规范

    diff --git a/files/zh-cn/web/api/mediastreamtrack/index.html b/files/zh-cn/web/api/mediastreamtrack/index.html index 964ae440ab19cb..47435848669bec 100644 --- a/files/zh-cn/web/api/mediastreamtrack/index.html +++ b/files/zh-cn/web/api/mediastreamtrack/index.html @@ -54,15 +54,15 @@

    方法

    {{domxref("MediaStreamTrack.getConstraints()")}}
    -
     
    +
    {{domxref("MediaStreamTrack.applyConstraints()")}}
    -
     
    +
    {{domxref("MediaStreamTrack.getSettings()")}}
    -
     
    +
    {{domxref("MediaStreamTrack.getCapabilities()")}}
    -
     
    +
    {{domxref("MediaStreamTrack.clone()")}}
    -
     
    +
    {{domxref("MediaStreamTrack.stop()")}}
    停止播放轨道对应的源,源与轨道将脱离关联,同时轨道状态将设为“ended”。
    diff --git a/files/zh-cn/web/api/mediastreamtrack/stop/index.html b/files/zh-cn/web/api/mediastreamtrack/stop/index.html index 36b3d46ba40cd6..602aa274ee2fb2 100644 --- a/files/zh-cn/web/api/mediastreamtrack/stop/index.html +++ b/files/zh-cn/web/api/mediastreamtrack/stop/index.html @@ -25,7 +25,7 @@

    语法

    说明

    -

    调用stop()告诉{{glossary("user agent")}} ,{{domxref("MediaStreamTrack")}}不再需要轨道的来源,无论该来源是什么,包括文件,网络流,本地摄像机或麦克风。由于多个音轨可能使用同一音源(例如,如果两个选项卡使用设备的麦克风),则音源本身并不一定会立即停止。 而是从轨道取消关联,并且停止跟踪对象。 一旦没有媒体轨道正在使用源,则实际上可能会完全停止该源。

    +

    调用stop()告诉{{glossary("user agent")}} ,{{domxref("MediaStreamTrack")}}不再需要轨道的来源,无论该来源是什么,包括文件,网络流,本地摄像机或麦克风。由于多个音轨可能使用同一音源(例如,如果两个选项卡使用设备的麦克风),则音源本身并不一定会立即停止。 而是从轨道取消关联,并且停止跟踪对象。 一旦没有媒体轨道正在使用源,则实际上可能会完全停止该源。

    调用stop()之后,{{domxref("MediaStreamTrack.readyState", "readyState")}}属性立即设置为ended

    @@ -46,7 +46,7 @@

    停止视频流

    videoElem.srcObject = null; } -

    这是通过从其{{domxref("HTMLMediaElement.srcObject", "srcObject")}} 属性获得视频元素的流来实现的。 然后,通过调用其{{domxref("MediaStream.getTracks", "getTracks()")}}方法来获取流的轨道列表。 从那里开始,剩下要做的就是使用{{jsxref("Array.forEach", "forEach()")}}遍历轨道列表并调用每个轨道的stop()方法。

    +

    这是通过从其{{domxref("HTMLMediaElement.srcObject", "srcObject")}} 属性获得视频元素的流来实现的。 然后,通过调用其{{domxref("MediaStream.getTracks", "getTracks()")}}方法来获取流的轨道列表。 从那里开始,剩下要做的就是使用{{jsxref("Array.forEach", "forEach()")}}遍历轨道列表并调用每个轨道的stop()方法。

    最后,将srcObject设置为null以切断与{{domxref("MediaStream")}} 对象的链接,以便将其释放。

    diff --git a/files/zh-cn/web/api/mediatrackconstraints/index.html b/files/zh-cn/web/api/mediatrackconstraints/index.html index bb7b8ff137f19f..609622b9254cbf 100644 --- a/files/zh-cn/web/api/mediatrackconstraints/index.html +++ b/files/zh-cn/web/api/mediatrackconstraints/index.html @@ -55,9 +55,9 @@

    Properties of image tracks

    {{domxref("MediaTrackConstraints.focusMode","focusMode")}}
    A {{jsxref("String")}} specifying one of "none", "manual", "sigle-shot", or "continuous".
    {{domxref("MediaTrackConstraints.pointsOfInterest","pointsOfInterest")}}
    -
    The pixel coordinates on the sensor of one or more points of interest. This is either an object in the form { x:value, y:value } or an array of such objects, where value  is a double-precision integer.
    +
    The pixel coordinates on the sensor of one or more points of interest. This is either an object in the form { x:value, y:value } or an array of such objects, where value is a double-precision integer.
    {{domxref("MediaTrackConstraints.expsureCompensation","exposureCompensation")}}
    -
    A {{domxref("ConstrainDouble")}} (a double-precision integer) specifying f-stop adjustment by up to ±3. 
    +
    A {{domxref("ConstrainDouble")}} (a double-precision integer) specifying f-stop adjustment by up to ±3.
    {{domxref("MediaTrackConstraints.colorTemperature","colorTemperature")}}
    A {{domxref("ConstrainDouble")}} (a double-precision integer) specifying a desired color temperature in degrees kelvin.
    {{domxref("MediaTrackConstraints.iso","iso")}}
    @@ -73,7 +73,7 @@

    Properties of image tracks

    {{domxref("MediaTrackConstraints.focusDistance","focusDistance")}}
    A {{domxref("ConstrainDouble")}} (a double-precision integer) specifying distance to a focused object.
    {{domxref("MediaTrackConstraints.zoom","zoom")}}
    -
    A {{domxref("ConstrainDouble")}} (a double-precision integer) specifying the desired focal length.
    +
    A {{domxref("ConstrainDouble")}} (a double-precision integer) specifying the desired focal length.
    {{domxref("MediaTrackConstraints.torch","torch")}}
    A {{jsxref("Boolean")}} whter the fill light continuously connected, meaning it stays on as long as the track is active.
    diff --git a/files/zh-cn/web/api/messagechannel/index.html b/files/zh-cn/web/api/messagechannel/index.html index 1a24406bea26b0..9c3b0d46fa0c94 100644 --- a/files/zh-cn/web/api/messagechannel/index.html +++ b/files/zh-cn/web/api/messagechannel/index.html @@ -12,7 +12,7 @@ ---

    {{APIRef("HTML DOM")}}

    -

    Channel Messaging API 的MessageChannel 接口允许我们创建一个新的消息通道,并通过它的两个{{domxref("MessagePort")}} 属性发送数据。

    +

    Channel Messaging API 的MessageChannel 接口允许我们创建一个新的消息通道,并通过它的两个{{domxref("MessagePort")}} 属性发送数据。

    {{AvailableInWorkers}}

    @@ -55,7 +55,7 @@

    示例

    para.innerHTML = e.data; } -

    一个完整的运行示例,可以在 GitHub 上查看 channel messaging basic demo  (run it live too).

    +

    一个完整的运行示例,可以在 GitHub 上查看 channel messaging basic demo (run it live too).

    规范

    diff --git a/files/zh-cn/web/api/messagechannel/messagechannel/index.html b/files/zh-cn/web/api/messagechannel/messagechannel/index.html index 72322e09bc1f65..ccf0693547fa5c 100644 --- a/files/zh-cn/web/api/messagechannel/messagechannel/index.html +++ b/files/zh-cn/web/api/messagechannel/messagechannel/index.html @@ -12,7 +12,7 @@ ---

    {{APIRef("HTML DOM")}}

    -

    {{domxref("MessageChannel")}} 接口的 MessageChannel() 构造函数返回一个新的 {{domxref("MessageChannel")}} 对象,返回的对象中包含两个 {{domxref("MessagePort")}} 对象。

    +

    {{domxref("MessageChannel")}} 接口的 MessageChannel() 构造函数返回一个新的 {{domxref("MessageChannel")}} 对象,返回的对象中包含两个 {{domxref("MessagePort")}} 对象。

    {{AvailableInWorkers}}

    @@ -26,7 +26,7 @@

    返回值

    例子

    -

    在下面的代码块中,你会看到一个由 {{domxref("MessageChannel()", "MessageChannel.MessageChannel")}}  构造函数创建的新 Channel. 当 IFrame 被加载后,我们使用 {{domxref("MessagePort.postMessage")}} 把 port2 和一条消息一起发送给 IFrame. 然后 handleMessage 回调响应 IFrame 发回的消息(使用 {{domxref("MessagePort.onmessage")}}),并把它渲染到页面段落中。{{domxref("MessageChannel.port1")}} 用来监听,当消息到达时,会进行处理。

    +

    在下面的代码块中,你会看到一个由 {{domxref("MessageChannel()", "MessageChannel.MessageChannel")}} 构造函数创建的新 Channel. 当 IFrame 被加载后,我们使用 {{domxref("MessagePort.postMessage")}} 把 port2 和一条消息一起发送给 IFrame. 然后 handleMessage 回调响应 IFrame 发回的消息(使用 {{domxref("MessagePort.onmessage")}}),并把它渲染到页面段落中。{{domxref("MessageChannel.port1")}} 用来监听,当消息到达时,会进行处理。

    var channel = new MessageChannel();
     var para = document.querySelector('p');
    @@ -45,7 +45,7 @@ 

    例子

    para.innerHTML = e.data; }
    -

    要查看完整可运行的例子,参考我们在 Github 上的 channel messaging basic demo (在线运行)。

    +

    要查看完整可运行的例子,参考我们在 Github 上的 channel messaging basic demo (在线运行)。

    规范

    @@ -62,5 +62,5 @@

    浏览器兼容性

    参见

    diff --git a/files/zh-cn/web/api/messagechannel/port1/index.html b/files/zh-cn/web/api/messagechannel/port1/index.html index 258660461bc598..89d356b0780ff8 100644 --- a/files/zh-cn/web/api/messagechannel/port1/index.html +++ b/files/zh-cn/web/api/messagechannel/port1/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef("HTML DOM")}}
    -

    {{domxref("MessageChannel")}} 的只读属性 port1 返回消息通道的第一个端口,此端口连接到源上下文通道。

    +

    {{domxref("MessageChannel")}} 的只读属性 port1 返回消息通道的第一个端口,此端口连接到源上下文通道。

    {{AvailableInWorkers}}

    @@ -39,7 +39,7 @@

    示例

    } -

    一个完整的运行示例,可以在 GitHub 上查看 channel messaging basic demo  (run it live too).

    +

    一个完整的运行示例,可以在 GitHub 上查看 channel messaging basic demo (run it live too).

    规范

    diff --git a/files/zh-cn/web/api/messagechannel/port2/index.html b/files/zh-cn/web/api/messagechannel/port2/index.html index 3ad042325169a8..491d8b3975cacc 100644 --- a/files/zh-cn/web/api/messagechannel/port2/index.html +++ b/files/zh-cn/web/api/messagechannel/port2/index.html @@ -5,7 +5,7 @@ ---

    {{APIRef("HTML DOM")}}

    -

    {{domxref("MessageChannel")}}接口的 port2 是一个只读属性,返回消息通道的第二个端口,该端口连接到通道另一端的上下文,也就是发送消息时的目的地。

    +

    {{domxref("MessageChannel")}}接口的 port2 是一个只读属性,返回消息通道的第二个端口,该端口连接到通道另一端的上下文,也就是发送消息时的目的地。

    {{AvailableInWorkers}}

    @@ -17,11 +17,11 @@

    表示通道第二个端口的一个{{domxref("MessagePort")}}对象,该端口附加到通道另一端的上下文。

    -

     

    +

    示例

    -

    如下代码所示,通过{{domxref("MessageChannel()", "MessageChannel.MessageChannel")}}构造函数创建了一个新的通道。当 IFrame 加载完毕,我们使用{{domxref("MessagePort.postMessage")}}将一条消息以及 port2 传递给 IFrame。handleMessage 处理程序响应从 IFrame 发回的消息(使用 {{domxref("MessagePort.onmessage")}}),将其放入段落中。{{domxref("MessageChannel.port1")}}已经监听,以检测消息何时到达。

    +

    如下代码所示,通过{{domxref("MessageChannel()", "MessageChannel.MessageChannel")}}构造函数创建了一个新的通道。当 IFrame 加载完毕,我们使用{{domxref("MessagePort.postMessage")}}将一条消息以及 port2 传递给 IFrame。handleMessage 处理程序响应从 IFrame 发回的消息(使用 {{domxref("MessagePort.onmessage")}}),将其放入段落中。{{domxref("MessageChannel.port1")}}已经监听,以检测消息何时到达。

    var channel = new MessageChannel();
     var para = document.querySelector('p');
    @@ -40,7 +40,7 @@ 

    示例

    para.innerHTML = e.data; }
    -

    有关完整的运行示例,请参阅我们在 GitHub 的 channel messaging basic demo  (run it live too).

    +

    有关完整的运行示例,请参阅我们在 GitHub 的 channel messaging basic demo (run it live too).

    Specifications

    diff --git a/files/zh-cn/web/api/messageevent/index.html b/files/zh-cn/web/api/messageevent/index.html index 00b1d3c486d1a9..6a82a1a726066a 100644 --- a/files/zh-cn/web/api/messageevent/index.html +++ b/files/zh-cn/web/api/messageevent/index.html @@ -12,7 +12,7 @@ ---

    {{APIRef("HTML DOM")}}

    -

      MessageEvent  是接口代表一段被目标对象接收的消息。

    +

    MessageEvent 是接口代表一段被目标对象接收的消息。

    用来代表下列情况的消息

    @@ -34,7 +34,7 @@

    构造函数

    {{domxref("MessageEvent.MessageEvent", "MessageEvent()")}}
    -
    创建一个新的 消息事件 
    +
    创建一个新的 消息事件

    属性

    @@ -45,7 +45,7 @@

    属性

    {{domxref("MessageEvent.data")}} {{ReadonlyInline}}
    返回 {{domxref("DOMString")}}, {{domxref("Blob")}} 或者 {{domxref("ArrayBuffer")}},包含来自发送者的数据。
    {{domxref("MessageEvent.origin")}}
    -
     返回一个表示消息发送者来源的{{domxref("USVString")}} 
    +
    返回一个表示消息发送者来源的{{domxref("USVString")}}
    {{domxref("MessageEvent.lastEventId")}} {{readonlyInline}}
    {{domxref("DOMString")}} representing a unique ID for the event.
    {{domxref("MessageEvent.source")}}
    @@ -63,7 +63,7 @@

    方法

    不要再使用: 使用 {{domxref("MessageEvent.MessageEvent", "MessageEvent()")}}。
    -

     

    +

    示例

    @@ -77,7 +77,7 @@

    示例

    myWorker.port.start();
    -

    当端口被打开,两份脚本各自都可用 port.postMessage() 向 worker 传消息并用  port.onmessage处理它(worker)传来的消息:

    +

    当端口被打开,两份脚本各自都可用 port.postMessage() 向 worker 传消息并用 port.onmessage处理它(worker)传来的消息:

    first.onchange = function() {
       myWorker.port.postMessage([first.value,second.value]);
    diff --git a/files/zh-cn/web/api/messageevent/messageevent/index.html b/files/zh-cn/web/api/messageevent/messageevent/index.html
    index ee803f279b8de1..ec2d676cb06eea 100644
    --- a/files/zh-cn/web/api/messageevent/messageevent/index.html
    +++ b/files/zh-cn/web/api/messageevent/messageevent/index.html
    @@ -5,7 +5,7 @@
     ---
     
    {{APIRef("HTML DOM")}}
    -

    MessageEvent() 构造函数创建一个新的 {{domxref("MessageEvent")}} 对象实例。

    +

    MessageEvent() 构造函数创建一个新的 {{domxref("MessageEvent")}} 对象实例。

    语法

    @@ -26,8 +26,8 @@

    参数

  • data: 您希望包含在 MessageEvent 中的数据。这可以是任何数据类型,如果没有指定,则默认为 null。
  • origin: {{domxref("USVString")}} 表示消息发送源。如果没有指定,则默认为空字符串 ("")。
  • lastEventId: {{domxref("DOMString")}} 表示事件的唯一 ID。如果没有指定,则默认为空字符串 ("")。
  • -
  • source: MessageEventSource (可以是 {{domxref("WindowProxy")}}, {{domxref("MessagePort")}}, 或 {{domxref("ServiceWorker")}} 对象) 表示消息发送对象。如果没有设置,则默认为 null。
  • -
  • ports: {{domxref("MessagePort")}} 对象数组,表示正在通过的消息通道关联的端口 (在适当的情况下,例如在通道消息传递或向共享工作者发送消息时)。如果没有指定,则默认为空数组 ([])。
  • +
  • source: MessageEventSource (可以是 {{domxref("WindowProxy")}}, {{domxref("MessagePort")}}, 或 {{domxref("ServiceWorker")}} 对象) 表示消息发送对象。如果没有设置,则默认为 null。
  • +
  • ports: {{domxref("MessagePort")}} 对象数组,表示正在通过的消息通道关联的端口 (在适当的情况下,例如在通道消息传递或向共享工作者发送消息时)。如果没有指定,则默认为空数组 ([])。
  • @@ -35,7 +35,7 @@

    参数

    示例

    var myMessage = new MessageEvent('worker', {
    -  data : 'hello'
    +  data : 'hello'
     });
     
    diff --git a/files/zh-cn/web/api/messageport/index.html b/files/zh-cn/web/api/messageport/index.html index 4aa7be9bd9f771..19b6a3d3e54548 100644 --- a/files/zh-cn/web/api/messageport/index.html +++ b/files/zh-cn/web/api/messageport/index.html @@ -13,7 +13,7 @@ ---

    {{APIRef("HTML DOM")}}

    -

    Channel Messaging API 的 MessagePort 接口代表 {{domxref("MessageChannel")}} 的两个端口之一, 它可以让你从一个端口发送消息,并在消息到达的另一个端口监听它们。

    +

    Channel Messaging APIMessagePort 接口代表 {{domxref("MessageChannel")}} 的两个端口之一, 它可以让你从一个端口发送消息,并在消息到达的另一个端口监听它们。

    {{AvailableInWorkers}}

    @@ -25,7 +25,7 @@

    方法

    {{domxref("MessagePort.postMessage")}}
    从端口发送一条消息,并且可选是否将对象的所有权交给其他浏览器上下文。
    {{domxref("MessagePort.start")}}
    -
    开始发送该端口中的消息队列 (只有使用 {{domxref("EventTarget.addEventListener")}} 的时候才需要调用;当使用 {{domxref("MessagePort.onmessage")}} 时,是默认开始的。)
    +
    开始发送该端口中的消息队列 (只有使用 {{domxref("EventTarget.addEventListener")}} 的时候才需要调用;当使用 {{domxref("MessagePort.onmessage")}} 时,是默认开始的。)
    {{domxref("MessagePort.close")}}
    断开端口连接,它将不再是激活状态。
    @@ -36,29 +36,29 @@

    事件回调

    {{domxref("MessagePort.onmessage")}}
    -
    是一个 {{domxref("EventListener")}}, 当类型为 message 的 {{domxref("MessageEvent")}} 在该端口触发时,它将会被调用──也就是说,该端口收到了一条消息。
    +
    是一个 {{domxref("EventListener")}}, 当类型为 message 的 {{domxref("MessageEvent")}} 在该端口触发时,它将会被调用──也就是说,该端口收到了一条消息。
    {{domxref("MessagePort.onmessageerror","onmessageerror")}}
    -
    是一个 {{domxref("EventListener")}}, 当类型为 {{domxref("MessageError")}} 的 {{domxref("MessageEvent")}} 被触发时,它将会被调用──这意味着,端口收到了一条无法被反序列化的消息。
    +
    是一个 {{domxref("EventListener")}}, 当类型为 {{domxref("MessageError")}} 的 {{domxref("MessageEvent")}} 被触发时,它将会被调用──这意味着,端口收到了一条无法被反序列化的消息。

    事件

    {{domxref("MessagePort.message_event","message")}}
    -
    当 MessagePort 对象收到消息时会触发。
    - 也可以通过 {{domxref("MessagePort.onmessage","onmessage")}} 属性使用。
    +
    MessagePort 对象收到消息时会触发。
    + 也可以通过 {{domxref("MessagePort.onmessage","onmessage")}} 属性使用。
    {{domxref("MessagePort.messageerror_event","messageerror")}}
    -
    当 MessagePort 对象收到无法被反序列化的消息时触发。
    +
    MessagePort 对象收到无法被反序列化的消息时触发。
    也可以通过 {{domxref("MessagePort.onmessageerror","onmessageerror")}} 属性使用。

    例子

    -

    在下面的例子中,你可以看到一个使用 {{domxref("MessageChannel.MessageChannel","MessageChannel()")}} 构造函数创建出的新 channel. 

    +

    在下面的例子中,你可以看到一个使用 {{domxref("MessageChannel.MessageChannel","MessageChannel()")}} 构造函数创建出的新 channel.

    -

    当 IFrame 加载完成后,我们给 {{domxref("MessageChannel.port1")}} 注册了一个 {{domxref("MessagePort.onmessage","onmessage")}} 回调,并且使用 {{domxref("window.postMessage")}} 方法把  {{domxref("MessageChannel.port2")}} 和一条消息一起传给 IFrame.

    +

    当 IFrame 加载完成后,我们给 {{domxref("MessageChannel.port1")}} 注册了一个 {{domxref("MessagePort.onmessage","onmessage")}} 回调,并且使用 {{domxref("window.postMessage")}} 方法把 {{domxref("MessageChannel.port2")}} 和一条消息一起传给 IFrame.

    -

    当从 IFrame 收到消息时,onMessage 方法会把消息输出到一个段落里。

    +

    当从 IFrame 收到消息时,onMessage 方法会把消息输出到一个段落里。

    var channel = new MessageChannel();
     var output = document.querySelector('.output');
    @@ -81,7 +81,7 @@ 

    例子

    output.innerHTML = e.data; }
    -

    要查看可运行的完整示例,参考我们在 Github 上的 channel messaging basic demo (也可以在线运行).

    +

    要查看可运行的完整示例,参考我们在 Github 上的 channel messaging basic demo (也可以在线运行).

    规范

    @@ -94,5 +94,5 @@

    浏览器兼容性

    参见

    diff --git a/files/zh-cn/web/api/messageport/message_event/index.html b/files/zh-cn/web/api/messageport/message_event/index.html index bc21879aea28e9..c5d8b577ef22f7 100644 --- a/files/zh-cn/web/api/messageport/message_event/index.html +++ b/files/zh-cn/web/api/messageport/message_event/index.html @@ -6,7 +6,7 @@ ---
    {{APIRef("HTML DOM")}}
    -

     {{domxref("MessagePort")}} 接口的 onmessage 事件处理程序是一个 {{domxref("EventListener")}}, 当在端口上触发一个类型为 message 的{{domxref("MessageEvent")}} 时被调用 - 即,当端口接收到消息时。

    +

    {{domxref("MessagePort")}} 接口的 onmessage 事件处理程序是一个 {{domxref("EventListener")}}, 当在端口上触发一个类型为 message 的{{domxref("MessageEvent")}} 时被调用 - 即,当端口接收到消息时。

    {{AvailableInWorkers}}

    diff --git a/files/zh-cn/web/api/midiaccess/index.html b/files/zh-cn/web/api/midiaccess/index.html index 6eea5eeff07958..ec8f51bc9e0bd0 100644 --- a/files/zh-cn/web/api/midiaccess/index.html +++ b/files/zh-cn/web/api/midiaccess/index.html @@ -8,9 +8,9 @@ - 接口 translation_of: Web/API/MIDIAccess --- -

    {{SeeCompatTable}}{{APIRef("Web MIDI API")}} 

    +

    {{SeeCompatTable}}{{APIRef("Web MIDI API")}}

    -

    Web MIDI API 的 MIDIAccess 接口提供查询 MIDI 输入和输出设备的列表以及获取这些设备的使用权限。

    +

    Web MIDI APIMIDIAccess 接口提供查询 MIDI 输入和输出设备的列表以及获取这些设备的使用权限。

    属性

    diff --git a/files/zh-cn/web/api/midiconnectionevent/index.html b/files/zh-cn/web/api/midiconnectionevent/index.html index d4a2f118d35116..bf8ebdcfd8a3a3 100644 --- a/files/zh-cn/web/api/midiconnectionevent/index.html +++ b/files/zh-cn/web/api/midiconnectionevent/index.html @@ -10,13 +10,13 @@ ---

    {{APIRef("Web MIDI API")}}{{SeeCompatTable}}

    -

    The MIDIConnectionEvent interface of the Web MIDI API is the event passed to the {{domxref("MIDIAccess.onstatechange","onstatechange")}} event of the {{domxref("MIDIAccess")}} interface and the {{domxref("MIDIPorts.onstatechange","onstatechange")}} event of the {{domxref("MIDIPorts")}} interface. This occurs any time a new port becomes available, or when a previously available port becomes unavailable. 例如,这个事件无论是在一个 MIDI 设备插入或拔出设备时都会触发。

    +

    The MIDIConnectionEvent interface of the Web MIDI API is the event passed to the {{domxref("MIDIAccess.onstatechange","onstatechange")}} event of the {{domxref("MIDIAccess")}} interface and the {{domxref("MIDIPorts.onstatechange","onstatechange")}} event of the {{domxref("MIDIPorts")}} interface. This occurs any time a new port becomes available, or when a previously available port becomes unavailable. 例如,这个事件无论是在一个 MIDI 设备插入或拔出设备时都会触发。

    构造函数

    {{domxref("MIDIConnectionEvent.MIDIConnectionEvent")}}
    -
    创建一个新的 MIDIConnectionEvent 对象。
    +
    创建一个新的 MIDIConnectionEvent 对象。

    属性

    @@ -28,7 +28,7 @@

    属性

    举例

    -

     

    +

    规范

    diff --git a/files/zh-cn/web/api/mimetype/index.html b/files/zh-cn/web/api/mimetype/index.html index 4e4f7e45d418eb..44d8475a5fb92a 100644 --- a/files/zh-cn/web/api/mimetype/index.html +++ b/files/zh-cn/web/api/mimetype/index.html @@ -5,7 +5,7 @@ ---

    {{SeeCompatTable}}{{APIRef("HTML DOM")}}

    -

    这 MimeType 接口提供了包含以下信息 MIME 与特定插件关联的类型。{{domxref("NavigatorPlugins.mimeTypes")}} 返回此对象的数组。

    +

    MimeType 接口提供了包含以下信息 MIME 与特定插件关联的类型。{{domxref("NavigatorPlugins.mimeTypes")}} 返回此对象的数组。

    属性

    diff --git a/files/zh-cn/web/api/mouseevent/altkey/index.html b/files/zh-cn/web/api/mouseevent/altkey/index.html index 2bfe65eba59d05..ec692e72e0ebd3 100644 --- a/files/zh-cn/web/api/mouseevent/altkey/index.html +++ b/files/zh-cn/web/api/mouseevent/altkey/index.html @@ -10,7 +10,7 @@ ---

    {{APIRef("DOM Events")}}

    -

    MouseEvent.altKey 只读属性是一个{{jsxref("Boolean")}}变量。当事件触发时,如果alt 被按下,则返回 true,否则返回 false。

    +

    MouseEvent.altKey 只读属性是一个{{jsxref("Boolean")}}变量。当事件触发时,如果alt 被按下,则返回 true,否则返回 false。

    语法

    diff --git a/files/zh-cn/web/api/mouseevent/button/index.html b/files/zh-cn/web/api/mouseevent/button/index.html index 80d60fec5a0334..d4bc47b020589b 100644 --- a/files/zh-cn/web/api/mouseevent/button/index.html +++ b/files/zh-cn/web/api/mouseevent/button/index.html @@ -7,7 +7,7 @@

    MouseEvent.button是只读属性,它返回一个值,代表用户按下并触发了事件的鼠标按键。

    -

    这个属性只能够表明在触发事件的单个或多个按键按下或释放过程中哪些按键被按下了。因此,它对判断{{event("mouseenter")}}, {{event("mouseleave")}}, {{event("mouseover")}}, {{event("mouseout")}} {{event("mousemove")}}这些事件并不可靠。

    +

    这个属性只能够表明在触发事件的单个或多个按键按下或释放过程中哪些按键被按下了。因此,它对判断{{event("mouseenter")}}, {{event("mouseleave")}}, {{event("mouseover")}}, {{event("mouseout")}} {{event("mousemove")}}这些事件并不可靠。

    用户可能会改变鼠标按键的配置,因此当一个事件的MouseEvent.button值为 0 时,它可能不是由物理上设备最左边的按键触发的。但是对于一个标准按键布局的鼠标来说就会是左键。

    diff --git a/files/zh-cn/web/api/mouseevent/buttons/index.html b/files/zh-cn/web/api/mouseevent/buttons/index.html index 4659ef8fd05db4..dec55744c38f1b 100644 --- a/files/zh-cn/web/api/mouseevent/buttons/index.html +++ b/files/zh-cn/web/api/mouseevent/buttons/index.html @@ -12,7 +12,7 @@

    每一个按键都用一个给定的数(见下文)表示。如果同时多个按键被按下,buttons 的值为各键对应值做与计算(+)后的值。例如,如果右键(2)和滚轮键(4)被同时按下,buttons 的值为 2 + 4 = 6。

    -

    注意:属性 MouseEvent.button 和 MouseEvent.buttons 是不同的。MouseEvent.buttons 可指示任意鼠标事件中鼠标的按键情况,而 MouseEvent.button 只能保证在由按下和释放一个或多个按键时触发的事件中获得正确的值。

    +

    注意:属性 MouseEvent.button 和 MouseEvent.buttons 是不同的。MouseEvent.buttons 可指示任意鼠标事件中鼠标的按键情况,而 MouseEvent.button 只能保证在由按下和释放一个或多个按键时触发的事件中获得正确的值。

    语法

    @@ -25,12 +25,12 @@

    返回值

    一个数字,用来标识鼠标按下的一个或者多个按键。如果按下的键为多个,则值等于所有按键对应数值进行或 (|) 运算的结果。

      -
    • : 没有按键或者是没有初始化
    • -
    • : 鼠标左键
    • -
    • : 鼠标右键
    • -
    • : 鼠标滚轮或者是中键
    • -
    • : 第四按键 (通常是“浏览器后退”按键)
    • -
    • 16 : 第五按键 (通常是“浏览器前进”)
    • +
    • 0 : 没有按键或者是没有初始化
    • +
    • 1 : 鼠标左键
    • +
    • 2 : 鼠标右键
    • +
    • 4 : 鼠标滚轮或者是中键
    • +
    • 8 : 第四按键 (通常是“浏览器后退”按键)
    • +
    • 16 : 第五按键 (通常是“浏览器前进”)

    Specifications

    diff --git a/files/zh-cn/web/api/mouseevent/clientx/index.html b/files/zh-cn/web/api/mouseevent/clientx/index.html index 8127befd05f8b2..458e25b56cfb0d 100644 --- a/files/zh-cn/web/api/mouseevent/clientx/index.html +++ b/files/zh-cn/web/api/mouseevent/clientx/index.html @@ -9,7 +9,7 @@ ---

    {{APIRef("DOM Events")}}

    -

    MouseEvent.clientX 是只读属性, 它提供事件发生时的应用客户端区域的水平坐标 (与页面坐标不同)。例如,不论页面是否有水平滚动,当你点击客户端区域的左上角时,鼠标事件的 clientX 值都将为 0 。最初这个属性被定义为长整型(long integer),如今 CSSOM 视图模块将其重新定义为双精度浮点数(double float)。你可以查阅浏览器兼容性部分的文档来进一步了解有关信息。

    +

    MouseEvent.clientX 是只读属性, 它提供事件发生时的应用客户端区域的水平坐标 (与页面坐标不同)。例如,不论页面是否有水平滚动,当你点击客户端区域的左上角时,鼠标事件的 clientX 值都将为 0 。最初这个属性被定义为长整型(long integer),如今 CSSOM 视图模块将其重新定义为双精度浮点数(double float)。你可以查阅浏览器兼容性部分的文档来进一步了解有关信息。

    语法

    @@ -19,7 +19,7 @@

    语法

    返回值

    -

    被 CSSOM View Module 重新定义为一个 double 类型的浮点值。原来这个属性是被定义为一个 long 整数。可以在 "浏览器兼容性" 那里查看详细内容。

    +

    被 CSSOM View Module 重新定义为一个 double 类型的浮点值。原来这个属性是被定义为一个 long 整数。可以在 "浏览器兼容性" 那里查看详细内容。

    示例

    diff --git a/files/zh-cn/web/api/mouseevent/clienty/index.html b/files/zh-cn/web/api/mouseevent/clienty/index.html index 36d5560c579a0c..df12c2423b330c 100644 --- a/files/zh-cn/web/api/mouseevent/clienty/index.html +++ b/files/zh-cn/web/api/mouseevent/clienty/index.html @@ -8,7 +8,7 @@ ---

    {{APIRef("DOM Events")}}

    -

    MouseEvent.clientY 是只读属性, 它提供事件发生时的应用客户端区域的垂直坐标 (与页面坐标不同)。例如,当你点击客户端区域的左上角时,鼠标事件的 clientY 值为 0 ,这一值与页面是否有垂直滚动无关。

    +

    MouseEvent.clientY 是只读属性, 它提供事件发生时的应用客户端区域的垂直坐标 (与页面坐标不同)。例如,当你点击客户端区域的左上角时,鼠标事件的 clientY 值为 0 ,这一值与页面是否有垂直滚动无关。

    语法

    @@ -17,7 +17,7 @@

    语法

    Return value

    -

    被 CSSOM View Module 重新定义为一个 double 类型的浮点值。原来这个属性是被定义为一个 long 整数。可以在 "浏览器兼容性" 那里查看详细内容。

    +

    被 CSSOM View Module 重新定义为一个 double 类型的浮点值。原来这个属性是被定义为一个 long 整数。可以在 "浏览器兼容性" 那里查看详细内容。

    Example

    diff --git a/files/zh-cn/web/api/mouseevent/getmodifierstate/index.html b/files/zh-cn/web/api/mouseevent/getmodifierstate/index.html index 358e0f5f52f0f1..bddc026bfce1fb 100644 --- a/files/zh-cn/web/api/mouseevent/getmodifierstate/index.html +++ b/files/zh-cn/web/api/mouseevent/getmodifierstate/index.html @@ -7,7 +7,7 @@

    The MouseEvent.getModifierState() method returns the current state of the specified modifier key: true if the modifier is active (i.e., the modifier key is pressed or locked), otherwise, false.

    -

    See the document of {{domxref("KeyboardEvent.getModifierState","KeyboardEvent.getModifierState()")}} for details.

    +

    See the document of {{domxref("KeyboardEvent.getModifierState","KeyboardEvent.getModifierState()")}} for details.

    语法

    diff --git a/files/zh-cn/web/api/mouseevent/index.html b/files/zh-cn/web/api/mouseevent/index.html index 1e5a7d84c7778a..b2374652a48e5e 100644 --- a/files/zh-cn/web/api/mouseevent/index.html +++ b/files/zh-cn/web/api/mouseevent/index.html @@ -7,7 +7,7 @@

    MouseEvent 接口指用户与指针设备(如鼠标)交互时发生的事件。使用此接口的常见事件包括:{{event("click")}}、{{event("dblclick")}}、{{event("mouseup")}}、{{event("mousedown")}}。

    -

    MouseEvent 派生自 {{domxref("UIEvent")}},{{domxref("UIEvent")}} 派生自 {{domxref("Event")}}。虽然 MouseEvent.initMouseEvent() 方法保持向后兼容性,但是应该使用 MouseEvent() 构造函数创建一个 MouseEvent 对象。

    +

    MouseEvent 派生自 {{domxref("UIEvent")}},{{domxref("UIEvent")}} 派生自 {{domxref("Event")}}。虽然 MouseEvent.initMouseEvent() 方法保持向后兼容性,但是应该使用 MouseEvent() 构造函数创建一个 MouseEvent 对象。

    一些具体的事件都派生自 MouseEvent:{{domxref("WheelEvent")}} 和{{domxref("DragEvent")}}。

    @@ -22,7 +22,7 @@

    构造函数

    属性

    -

    这个接口也继承了{{domxref("UIEvent")}} 和 {{domxref("Event")}}原型上的方法,

    +

    这个接口也继承了{{domxref("UIEvent")}} 和 {{domxref("Event")}}原型上的方法,

    {{domxref("MouseEvent.altKey")}} {{readonlyinline}}
    @@ -76,13 +76,13 @@

    属性

    {{domxref("MouseEvent.mozPressure")}} {{non-standard_inline()}} {{readonlyinline}}
    点击事件发生时施加在触摸屏或者平板设备的压力量。这个数值在 0.0(最小压力)和 1.0(最大压力)之间。
    {{domxref("MouseEvent.mozInputSource")}} {{non-standard_inline()}} {{readonlyinline}}
    -
    生成事件的类型(若干 MOZ_SOURCE_* 常量如下列出)。可通过该属性获知鼠标事件是否由真实鼠标设备触发,亦或通过触摸事件触发(这可能影响处理坐标事件时的精确程度)。
    +
    生成事件的类型(若干 MOZ_SOURCE_* 常量如下列出)。可通过该属性获知鼠标事件是否由真实鼠标设备触发,亦或通过触摸事件触发(这可能影响处理坐标事件时的精确程度)。
    {{domxref("MouseEvent.webkitForce")}} {{non-standard_inline()}} {{readonlyinline}}
    点击时施加的压力量。
    {{domxref("MouseEvent.x")}} {{experimental_inline}}{{readonlyinline}}
    {{domxref("MouseEvent.clientX")}}的别名。
    {{domxref("MouseEvent.y")}} {{experimental_inline}}{{readonlyinline}}
    -
     {{domxref("MouseEvent.clientY")}}的别名。
    +
    {{domxref("MouseEvent.clientY")}}的别名。

    常量

    diff --git a/files/zh-cn/web/api/mouseevent/initmouseevent/index.html b/files/zh-cn/web/api/mouseevent/initmouseevent/index.html index ac8698d2b4b97a..0f9e0a8fbc9ebf 100644 --- a/files/zh-cn/web/api/mouseevent/initmouseevent/index.html +++ b/files/zh-cn/web/api/mouseevent/initmouseevent/index.html @@ -5,14 +5,14 @@ ---

    {{APIRef("DOM Events")}}{{deprecated_header}}

    -

    MouseEvent.initMouseEvent() 方法用以在鼠标事件创建时 (一般用 {{domxref("Document.createEvent()")}}方法创建) 初始化其属性的值。

    +

    MouseEvent.initMouseEvent() 方法用以在鼠标事件创建时 (一般用 {{domxref("Document.createEvent()")}}方法创建) 初始化其属性的值。

    -

    事件初始化是在事件被{{ domxref("Document.createEvent()") }}方法创建后必需的。这个方法必须在事件被{{ domxref("EventTarget.dispatchEvent()") }}方法发送出来前调用。一旦事件被发送后,它将不再起任何作用。 

    +

    事件初始化是在事件被{{ domxref("Document.createEvent()") }}方法创建后必需的。这个方法必须在事件被{{ domxref("EventTarget.dispatchEvent()") }}方法发送出来前调用。一旦事件被发送后,它将不再起任何作用。

    不要再用此方法,已过时。

    -

    使用特定的事件构造器来替代它,像 {{domxref("MouseEvent.MouseEvent", "MouseEvent()")}}。创建并发送事件 页面里有更多的使用信息。

    +

    使用特定的事件构造器来替代它,像 {{domxref("MouseEvent.MouseEvent", "MouseEvent()")}}。创建并发送事件 页面里有更多的使用信息。

    语法

    @@ -44,7 +44,7 @@

    形参

    clientY
    事件的客户端 y 坐标。取值集合见{{domxref("MouseEvent.clientY")}}。
    ctrlKey
    -
    事件发生时 control 键是否被按下。取值集合见{{domxref("MouseEvent.ctrlKey")}}。
    +
    事件发生时 control 键是否被按下。取值集合见{{domxref("MouseEvent.ctrlKey")}}。
    altKey
    事件发生时 alt 键是否被按下。取值集合见{{domxref("MouseEvent.altKey")}}。
    shiftKey
    @@ -54,9 +54,9 @@

    形参

    button
    鼠标按键值 {{domxref("MouseEvent.button", "button")}}。
    relatedTarget
    -
    事件的相关对象。只在某些事件类型有用 (例如 mouseover ?和 mouseout)。其它的传 null。
    +
    事件的相关对象。只在某些事件类型有用 (例如 mouseover ?和 mouseout)。其它的传 null。
    -

     

    +

    示例

    diff --git a/files/zh-cn/web/api/mouseevent/metakey/index.html b/files/zh-cn/web/api/mouseevent/metakey/index.html index 38c9a273301173..c36dfd8313d6f3 100644 --- a/files/zh-cn/web/api/mouseevent/metakey/index.html +++ b/files/zh-cn/web/api/mouseevent/metakey/index.html @@ -5,10 +5,10 @@ ---

    {{APIRef("DOM Events")}}

    -

    MouseEvent.metaKey 为只读属性,返回一个 {{jsxref("Boolean", "布尔值")}},在鼠标事件发生时,用于指示 Meta 键是按下状态(true),还是释放状态(false)。

    +

    MouseEvent.metaKey 为只读属性,返回一个 {{jsxref("Boolean", "布尔值")}},在鼠标事件发生时,用于指示 Meta 键是按下状态(true),还是释放状态(false)。

    -

    备注:在 MAC 键盘上,表示 Command 键(),在 Windows 键盘上,表示 Windows 键()。

    +

    备注:在 MAC 键盘上,表示 Command 键(),在 Windows 键盘上,表示 Windows 键()。

    语法

    diff --git a/files/zh-cn/web/api/mouseevent/mouseevent/index.html b/files/zh-cn/web/api/mouseevent/mouseevent/index.html index e405944fb6f3e0..4410e4b08342b0 100644 --- a/files/zh-cn/web/api/mouseevent/mouseevent/index.html +++ b/files/zh-cn/web/api/mouseevent/mouseevent/index.html @@ -14,7 +14,7 @@ ---

    {{APIRef("DOM Events")}}

    -

    MouseEvent() 构造器创建一个 {{domxref("MouseEvent")}}。

    +

    MouseEvent() 构造器创建一个 {{domxref("MouseEvent")}}。

    语法

    @@ -29,17 +29,17 @@

    形参

    -
    初始化 MouseEvent 的字典,有下列属性字段: +
    初始化 MouseEvent 的字典,有下列属性字段:
    • "screenX"long 型可选,默认为 0,设置鼠标事件发生时相对于用户屏幕的水平坐标位置;该操作并不会改变真实鼠标的位置。
    • "screenY"long 型可选,默认为 0,设置鼠标事件发生时相对于用户屏幕的垂直坐标位置;该操作并不会改变真实鼠标的位置。
    • "clientX"long 型可选,默认为 0,设置鼠标事件时相对于客户端窗口的水平坐标位置;该操作并不会改变真实鼠标的位置。
    • "clientY"long 型可选,默认为 0,设置鼠标事件时相对于客户端窗口的垂直坐标位置;该操作并不会改变真实鼠标的位置。
    • -
    • "ctrlKey",{{jsxref("Boolean")}} 型可选,默认为false,标明是否同时按下 ctrl 键。
    • -
    • "shiftKey",{{jsxref("Boolean")}} 型可选,默认为false,标明是否同时按下 shift 键。
    • -
    • "altKey",{{jsxref("Boolean")}} 型可选,默认为 false,标明是否同时按下 alt 键。
    • -
    • "metaKey",{{jsxref("Boolean")}} 型可选,默认为false,标明是否同时按下 meta 键。
    • +
    • "ctrlKey",{{jsxref("Boolean")}} 型可选,默认为false,标明是否同时按下 ctrl 键。
    • +
    • "shiftKey",{{jsxref("Boolean")}} 型可选,默认为false,标明是否同时按下 shift 键。
    • +
    • "altKey",{{jsxref("Boolean")}} 型可选,默认为 false,标明是否同时按下 alt 键。
    • +
    • "metaKey",{{jsxref("Boolean")}} 型可选,默认为false,标明是否同时按下 meta 键。
    • "button"short 型可选,默认为 0,描述了当事件发生时,哪个按键被按下或释放:
    @@ -93,14 +93,14 @@

    形参

    -
  • "relatedTarget",{{domxref("EventTarget")}} 型可选,默认为 null,若事件为 {{event("mouseenter")}} 或 {{event("mouseover")}},则表示刚离开的元素;若事件为 {{event("mouseout")}} 或 {{event("mouseleave")}},则表示刚进入的元素。
  • +
  • "relatedTarget",{{domxref("EventTarget")}} 型可选,默认为 null,若事件为 {{event("mouseenter")}} 或 {{event("mouseover")}},则表示刚离开的元素;若事件为 {{event("mouseout")}} 或 {{event("mouseleave")}},则表示刚进入的元素。
  • "region",{{domxref("DOMString")}} 型可选,默认为null,标明点击事件影响的区域 DOM 的 id。不影响任何区域的话,请传null值。
  • 在一些实现中,passing anything other than a number for the screen and client fields will throw a TypeError.

    -

    上述 MouseEventInit 字典字段还包括从 {{domxref("UIEvent.UIEvent", "UIEventInit")}} 和 {{domxref("Event.Event", "EventInit")}} 继承来的字典字段。

    +

    上述 MouseEventInit 字典字段还包括从 {{domxref("UIEvent.UIEvent", "UIEventInit")}} 和 {{domxref("Event.Event", "EventInit")}} 继承来的字典字段。

    diff --git a/files/zh-cn/web/api/mouseevent/movementx/index.html b/files/zh-cn/web/api/mouseevent/movementx/index.html index 90dc08a7f267c7..8fb11aa92264d6 100644 --- a/files/zh-cn/web/api/mouseevent/movementx/index.html +++ b/files/zh-cn/web/api/mouseevent/movementx/index.html @@ -5,7 +5,7 @@ ---

    {{APIRef("DOM Events")}}

    -

     MouseEvent.movementX 是只读属性,它提供了当前事件和上一个{{event("mousemove")}}事件之间鼠标在水平方向上的移动值。换句话说,这个值是这样计算的 : currentEvent.movementX = currentEvent.screenX - previousEvent.screenX.

    +

    MouseEvent.movementX 是只读属性,它提供了当前事件和上一个{{event("mousemove")}}事件之间鼠标在水平方向上的移动值。换句话说,这个值是这样计算的 : currentEvent.movementX = currentEvent.screenX - previousEvent.screenX.

    语法

    diff --git a/files/zh-cn/web/api/mouseevent/movementy/index.html b/files/zh-cn/web/api/mouseevent/movementy/index.html index e3faee1a0e3470..988d9948e5a888 100644 --- a/files/zh-cn/web/api/mouseevent/movementy/index.html +++ b/files/zh-cn/web/api/mouseevent/movementy/index.html @@ -5,7 +5,7 @@ ---

    {{APIRef("DOM Events")}}

    -

    MouseEvent.movementY 是只读属性,它提供了当前事件和上一个 {{event("mousemove")}} 事件之间鼠标在水平方向上的移动值。换句话说,这个值是这样计算的 :currentEvent.movementY = currentEvent.screenY - previousEvent.screenY.

    +

    MouseEvent.movementY 是只读属性,它提供了当前事件和上一个 {{event("mousemove")}} 事件之间鼠标在水平方向上的移动值。换句话说,这个值是这样计算的 :currentEvent.movementY = currentEvent.screenY - previousEvent.screenY.

    语法

    diff --git a/files/zh-cn/web/api/mouseevent/offsetx/index.html b/files/zh-cn/web/api/mouseevent/offsetx/index.html index 7980e2d2f63989..44809503373af4 100644 --- a/files/zh-cn/web/api/mouseevent/offsetx/index.html +++ b/files/zh-cn/web/api/mouseevent/offsetx/index.html @@ -19,7 +19,7 @@

    语法

    返回值

    -

    一个双精度 浮点值。早期的规范将其规定为整数值。详见浏览器兼容性部分。

    +

    一个双精度 浮点值。早期的规范将其规定为整数值。详见浏览器兼容性部分。

    规范

    diff --git a/files/zh-cn/web/api/mouseevent/offsety/index.html b/files/zh-cn/web/api/mouseevent/offsety/index.html index 87fb256a848a71..58cdd35bdfe86d 100644 --- a/files/zh-cn/web/api/mouseevent/offsety/index.html +++ b/files/zh-cn/web/api/mouseevent/offsety/index.html @@ -18,7 +18,7 @@

    语法

    返回值

    -

    一个双精度 浮点值。早期的规范将其规定为整数值。详见浏览器兼容性部分。

    +

    一个双精度 浮点值。早期的规范将其规定为整数值。详见浏览器兼容性部分。

    规范

    diff --git a/files/zh-cn/web/api/mouseevent/pagex/index.html b/files/zh-cn/web/api/mouseevent/pagex/index.html index 125c89bd3f5286..acd2bfc3637955 100644 --- a/files/zh-cn/web/api/mouseevent/pagex/index.html +++ b/files/zh-cn/web/api/mouseevent/pagex/index.html @@ -5,11 +5,11 @@ ---

    {{APIRef("DOM Events")}}

    -

    pageX 是一个由 {{domxref("MouseEvent")}} 接口返回的相对于整个文档的 x(水平)坐标以像素为单位的只读属性。

    +

    pageX 是一个由 {{domxref("MouseEvent")}} 接口返回的相对于整个文档的 x(水平)坐标以像素为单位的只读属性。

    这个属性将基于文档的边缘,考虑任何页面的水平方向上的滚动。举个例子,如果页面向右滚动 200px 并出现了滚动条,这部分在窗口之外,然后鼠标点击距离窗口左边 100px 的位置,pageX 所返回的值将是 300。

    -

     起初这个属性被定义为长整型。 CSSOM 视图模块将它重新定位为双浮点数类型。请参阅浏览器兼容性部分了解详情。

    +

    起初这个属性被定义为长整型。 CSSOM 视图模块将它重新定位为双浮点数类型。请参阅浏览器兼容性部分了解详情。

    语法

    diff --git a/files/zh-cn/web/api/mouseevent/pagey/index.html b/files/zh-cn/web/api/mouseevent/pagey/index.html index fc847f9cba0b94..1c305a7c20aa72 100644 --- a/files/zh-cn/web/api/mouseevent/pagey/index.html +++ b/files/zh-cn/web/api/mouseevent/pagey/index.html @@ -5,7 +5,7 @@ ---

    {{APIRef("DOM Events")}}

    -

    pageY是一个只读属性,它返回触发事件的位置相对于整个 document 的 Y 坐标值。由于其参考物是整个 dom,所以这个值受页面垂直方向的滚动影响。例如:当你垂直方向向下滚动了 50 pixel,那么你在顶端进行点击的时候,获取的pageY为 50pixed 而不是 0。最初这个属性被定义为长整型(long integer),如今 CSSOM 视图模块将其重新定义为双精度浮点数(double float)。你可以查阅浏览器兼容性部分的文档来进一步了解有关信息。

    +

    pageY是一个只读属性,它返回触发事件的位置相对于整个 document 的 Y 坐标值。由于其参考物是整个 dom,所以这个值受页面垂直方向的滚动影响。例如:当你垂直方向向下滚动了 50 pixel,那么你在顶端进行点击的时候,获取的pageY为 50pixed 而不是 0。最初这个属性被定义为长整型(long integer),如今 CSSOM 视图模块将其重新定义为双精度浮点数(double float)。你可以查阅浏览器兼容性部分的文档来进一步了解有关信息。

    语法

    diff --git a/files/zh-cn/web/api/mouseevent/relatedtarget/index.html b/files/zh-cn/web/api/mouseevent/relatedtarget/index.html index cd661df4466e23..a4ab7bb814a7f6 100644 --- a/files/zh-cn/web/api/mouseevent/relatedtarget/index.html +++ b/files/zh-cn/web/api/mouseevent/relatedtarget/index.html @@ -66,7 +66,7 @@

    语法

    返回值

    -

     {{domxref("EventTarget")}} 对象或者 null.

    +

    {{domxref("EventTarget")}} 对象或者 null.

    示例

    @@ -75,11 +75,11 @@

    示例

    HTML

    <body id="body">
    -  <div id="outer">
    -    <div id="red"></div>
    -    <div id="blue"></div>
    -  </div>
    -  <p id="log"></p>
    +  <div id="outer">
    +    <div id="red"></div>
    +    <div id="blue"></div>
    +  </div>
    +  <p id="log"></p>
     </body>

    CSS

    diff --git a/files/zh-cn/web/api/mouseevent/shiftkey/index.html b/files/zh-cn/web/api/mouseevent/shiftkey/index.html index d256627240fbd3..c70fab864339ce 100644 --- a/files/zh-cn/web/api/mouseevent/shiftkey/index.html +++ b/files/zh-cn/web/api/mouseevent/shiftkey/index.html @@ -5,7 +5,7 @@ ---

    {{APIRef("DOM Events")}}

    -

    MouseEvent.shiftKey 是只读属性,指出触发鼠标事件时是否按住了 shift

    +

    MouseEvent.shiftKey 是只读属性,指出触发鼠标事件时是否按住了 shift

    Syntax

    diff --git a/files/zh-cn/web/api/mouseevent/y/index.html b/files/zh-cn/web/api/mouseevent/y/index.html index ff97ea4e616020..335d60cef0c95f 100644 --- a/files/zh-cn/web/api/mouseevent/y/index.html +++ b/files/zh-cn/web/api/mouseevent/y/index.html @@ -9,7 +9,7 @@ ---

    {{APIRef}}{{SeeCompatTable}}

    -

    MouseEvent.y 属性是 {{domxref("MouseEvent.clientY")}} 属性的别称。

    +

    MouseEvent.y 属性是 {{domxref("MouseEvent.clientY")}} 属性的别称。

    规范

    diff --git a/files/zh-cn/web/api/mutationobserver/disconnect/index.html b/files/zh-cn/web/api/mutationobserver/disconnect/index.html index 796cafb11b6588..98828f05f148b3 100644 --- a/files/zh-cn/web/api/mutationobserver/disconnect/index.html +++ b/files/zh-cn/web/api/mutationobserver/disconnect/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef("DOM WHATWG")}}
    -

    {{domxref("MutationObserver")}} 的 disconnect() 方法告诉观察者停止观察变动。 可以通过调用其 {{domxref("MutationObserver.observe", "observe()")}} 方法来重用观察者。

    +

    {{domxref("MutationObserver")}} 的 disconnect() 方法告诉观察者停止观察变动。 可以通过调用其 {{domxref("MutationObserver.observe", "observe()")}} 方法来重用观察者。

    diff --git a/files/zh-cn/web/api/mutationobserver/index.html b/files/zh-cn/web/api/mutationobserver/index.html index 6e9e9588c68a00..830a2738725135 100644 --- a/files/zh-cn/web/api/mutationobserver/index.html +++ b/files/zh-cn/web/api/mutationobserver/index.html @@ -19,7 +19,7 @@

    构造函数

    {{domxref("MutationObserver.MutationObserver", "MutationObserver()")}}
    -
    创建并返回一个新的 MutationObserver 它会在指定的 DOM 发生变化时被调用。
    +
    创建并返回一个新的 MutationObserver 它会在指定的 DOM 发生变化时被调用。

    方法

    @@ -49,7 +49,7 @@

    示例

    // 当观察到变动时执行的回调函数 const callback = function(mutationsList, observer) { -  // Use traditional 'for loops' for IE 11 + // Use traditional 'for loops' for IE 11 for(let mutation of mutationsList) { if (mutation.type === 'childList') { console.log('A child node has been added or removed.'); diff --git a/files/zh-cn/web/api/mutationobserver/mutationobserver/index.html b/files/zh-cn/web/api/mutationobserver/mutationobserver/index.html index bb27220c86ec3f..b53a8bbebdf4b4 100644 --- a/files/zh-cn/web/api/mutationobserver/mutationobserver/index.html +++ b/files/zh-cn/web/api/mutationobserver/mutationobserver/index.html @@ -12,7 +12,7 @@ ---
    {{APIRef("DOM WHATWG")}}
    -

    DOM 规范中的 MutationObserver() 构造函数——是 {{domxref("MutationObserver")}} 接口内容的一部分——创建并返回一个新的观察器,它会在触发指定 DOM 事件时,调用指定的回调函数。MutationObserver 对 DOM 的观察不会立即启动;而必须先调用 {{domxref("MutationObserver.observe", "observe()")}} 方法来确定,要监听哪一部分的 DOM 以及要响应哪些更改。

    +

    DOM 规范中的 MutationObserver() 构造函数——是 {{domxref("MutationObserver")}} 接口内容的一部分——创建并返回一个新的观察器,它会在触发指定 DOM 事件时,调用指定的回调函数。MutationObserver 对 DOM 的观察不会立即启动;而必须先调用 {{domxref("MutationObserver.observe", "observe()")}} 方法来确定,要监听哪一部分的 DOM 以及要响应哪些更改。

    语法

    @@ -51,7 +51,7 @@

    回调函数

    } -

    调用 {{domxref("MutationObserver.observe", "observe()")}} 即可开始观察 DOM。当观察者 observer 发现匹配观察请求中指定的配置项的更改时,callback() 方法便会被调用。

    +

    调用 {{domxref("MutationObserver.observe", "observe()")}} 即可开始观察 DOM。当观察者 observer 发现匹配观察请求中指定的配置项的更改时,callback() 方法便会被调用。

    使用 {{domxref("MutationRecord.type", "mutation.type")}} 获取发生的变动类别(无论是子节点的变动,还是节点属性的变动)。

    @@ -63,17 +63,17 @@

    创建并使用 observer

    var observerOptions = { childList: true, // 观察目标子节点的变化,是否有添加或者删除 attributes: true, // 观察属性变动 -  subtree: true // 观察后代节点,默认为 false + subtree: true // 观察后代节点,默认为 false } var observer = new MutationObserver(callback); observer.observe(targetNode, observerOptions); -

    使用 ID someElement 来获取目标节点树。observerOptions 中设定了观察者的选项,通过设定 childList 和 attributes 为 true 来获取所需信息。

    +

    使用 ID someElement 来获取目标节点树。observerOptions 中设定了观察者的选项,通过设定 childListattributestrue 来获取所需信息。

    -

    当 observer 实例化时,指定 callback() 函数。之后指定目标节点与记录选项,我们开始观察使用 observe() 指定的 DOM 节点。

    +

    当 observer 实例化时,指定 callback() 函数。之后指定目标节点与记录选项,我们开始观察使用 observe() 指定的 DOM 节点。

    -

    从现在开始直到调用 {{domxref("MutationObserver.disconnect", "disconnect()")}} ,每次以 targetNode 为根节点的 DOM 树添加或移除元素时,以及这些元素的任意属性改变时,callback() 都会被调用。

    +

    从现在开始直到调用 {{domxref("MutationObserver.disconnect", "disconnect()")}} ,每次以 targetNode 为根节点的 DOM 树添加或移除元素时,以及这些元素的任意属性改变时,callback() 都会被调用。

    规范

    diff --git a/files/zh-cn/web/api/mutationobserver/observe/index.html b/files/zh-cn/web/api/mutationobserver/observe/index.html index 8c25e1329280cf..915043dbc16ff9 100644 --- a/files/zh-cn/web/api/mutationobserver/observe/index.html +++ b/files/zh-cn/web/api/mutationobserver/observe/index.html @@ -26,7 +26,7 @@

    参数

    target
    -
    DOM 树中的一个要观察变化的 DOM {{domxref("Node")}} (可能是一个 {{domxref("Element")}}),或者是被观察的子节点树的根节点。
    +
    DOM 树中的一个要观察变化的 DOM {{domxref("Node")}} (可能是一个 {{domxref("Element")}}),或者是被观察的子节点树的根节点。
    options {{optional_inline}}
    一个可选的 {{domxref("MutationObserverInit")}} 对象,此对象的配置项描述了 DOM 的哪些变化应该提供给当前观察者的 callback
    @@ -42,8 +42,8 @@

    异常

    以下任一情况都会抛出异常:
    • 配置选项使得实际上不会监视任何内容(例如,如果 {{domxref("MutationObserverInit.childList")}},{{domxref("MutationObserverInit.attributes")}} 和 {{domxref("MutationObserverInit.characterData")}} 都为 false)。
    • -
    • attributes 选项为 false(表示不监视属性更改)但是attributeOldValue 为 true 并且/或者 attributeFilter 配置存在。
    • -
    • {{domxref("MutaitonObserverInit.characterDataOldValue", "characterDataOldValue")}} 选项为 true 但是 {{domxref("MutationObserverInit.characterData")}} 为 false(表示不跟踪字符更改)。
    • +
    • attributes 选项为 false(表示不监视属性更改)但是attributeOldValuetrue 并且/或者 attributeFilter 配置存在。
    • +
    • {{domxref("MutaitonObserverInit.characterDataOldValue", "characterDataOldValue")}} 选项为 true 但是 {{domxref("MutationObserverInit.characterData")}} 为 false(表示不跟踪字符更改)。
    diff --git a/files/zh-cn/web/api/mutationobserver/takerecords/index.html b/files/zh-cn/web/api/mutationobserver/takerecords/index.html index 3a3e0b9d5e2724..1e3ae1825b7a27 100644 --- a/files/zh-cn/web/api/mutationobserver/takerecords/index.html +++ b/files/zh-cn/web/api/mutationobserver/takerecords/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef("DOM WHATWG")}}
    -

    {{domxref("MutationObserver")}} 的 takeRecords() 方法返回已检测到但尚未由观察者的回调函数处理的所有匹配 DOM 更改的列表,使变更队列保持为空。 此方法最常见的使用场景是在断开观察者之前立即获取所有未处理的更改记录,以便在停止观察者时可以处理任何未处理的更改。

    +

    {{domxref("MutationObserver")}} 的 takeRecords() 方法返回已检测到但尚未由观察者的回调函数处理的所有匹配 DOM 更改的列表,使变更队列保持为空。 此方法最常见的使用场景是在断开观察者之前立即获取所有未处理的更改记录,以便在停止观察者时可以处理任何未处理的更改。

    @@ -53,7 +53,7 @@

    示例

    observer.disconnect(); -

    代码中第 12-17 行抓取了所有未处理的变更记录,然后调用回调,并将变更记录列表传递给回调,以保证所有变更记录都被处理。这是在调用 {{domxref("MutationObserver.disconnect", "disconnect()")}} 之前完成的,以便停止观察 DOM。 

    +

    代码中第 12-17 行抓取了所有未处理的变更记录,然后调用回调,并将变更记录列表传递给回调,以保证所有变更记录都被处理。这是在调用 {{domxref("MutationObserver.disconnect", "disconnect()")}} 之前完成的,以便停止观察 DOM。

    规范

    diff --git a/files/zh-cn/web/api/namednodemap/index.html b/files/zh-cn/web/api/namednodemap/index.html index eb34c889ffc48a..4672b2c58b41e0 100644 --- a/files/zh-cn/web/api/namednodemap/index.html +++ b/files/zh-cn/web/api/namednodemap/index.html @@ -5,12 +5,12 @@ ---
    {{APIRef}}
    -

    NamedNodeMap 接口表示属性节点 {{domxref("Attr")}} 对象的集合。尽管在 NamedNodeMap 里面的对象可以像数组一样通过索引来访问,但是它和 {{ domxref("NodeList") }} 不一样,对象的顺序没有指定。

    +

    NamedNodeMap 接口表示属性节点 {{domxref("Attr")}} 对象的集合。尽管在 NamedNodeMap 里面的对象可以像数组一样通过索引来访问,但是它和 {{ domxref("NodeList") }} 不一样,对象的顺序没有指定。

    -

    NamedNodeMap 对象是即时的 (live),因此,如果它内部包含的对象发生改变的话,该对象会自动更新到最新的状态。

    +

    NamedNodeMap 对象是即时的 (live),因此,如果它内部包含的对象发生改变的话,该对象会自动更新到最新的状态。

    -

    尽管被称为 NamedNodeMap,但这个接口不是用来处理节点对象 ({{domxref("Node")}}),而是用来处理属性节点对象 ({{domxref("Attr")}}),属性节点原来是一种特殊的节点 ({{domxref("Node")}}),仍然在某些实现环境(浏览器)中有效。

    +

    尽管被称为 NamedNodeMap,但这个接口不是用来处理节点对象 ({{domxref("Node")}}),而是用来处理属性节点对象 ({{domxref("Attr")}}),属性节点原来是一种特殊的节点 ({{domxref("Node")}}),仍然在某些实现环境(浏览器)中有效。

    属性

    @@ -34,7 +34,7 @@

    方法

    {{domxref("NamedNodeMap.removeNamedItem()")}}
    移除一个属性节点({{ domxref("Attr") }})。
    {{domxref("NamedNodeMap.item()")}}
    -
    返回指定索引处的属性节点({{ domxref("Attr") }}),或者,当索引超出或等于属性节点的数量时,返回 null
    +
    返回指定索引处的属性节点({{ domxref("Attr") }}),或者,当索引超出或等于属性节点的数量时,返回 null
    {{domxref("NamedNodeMap.getNamedItemNS()")}}
    根据给定的命名空间参数和 name 参数返回一个 {{domxref("Attr")}} 对象。
    {{domxref("NamedNodeMap.setNamedItemNS()")}}
    diff --git a/files/zh-cn/web/api/navigation_timing_api/index.html b/files/zh-cn/web/api/navigation_timing_api/index.html index 7e8833c2b3c104..e4132b4a5d8854 100644 --- a/files/zh-cn/web/api/navigation_timing_api/index.html +++ b/files/zh-cn/web/api/navigation_timing_api/index.html @@ -27,13 +27,13 @@

    Interfaces

    曾被用来获取 {{domxref("Performance.timing", "timing")}} 的值,用来衡量页面性能。

    -

    {{deprecated_inline}}  {{domxref("PerformanceNavigation")}}

    +

    {{deprecated_inline}} {{domxref("PerformanceNavigation")}}

    曾被用来获取 {{domxref("Performance.navigation", "navigation")}} 的值,用来描述加载相关的操作。

    -

     

    +

    -

     

    +

    以下示例显示了如何测量感知加载时间:

    @@ -44,7 +44,7 @@

    Interfaces

    } -

    还有很多以毫秒为单位呈现的测量事件,你可以通过 {{domxref("PerformanceTiming")}} 接口得到它们。按照事件发生的先后顺序,这些事件的列表如下:

    +

    还有很多以毫秒为单位呈现的测量事件,你可以通过 {{domxref("PerformanceTiming")}} 接口得到它们。按照事件发生的先后顺序,这些事件的列表如下:

    • navigationStart
    • @@ -87,7 +87,7 @@

      Interfaces

      TYPE_NAVIGATE 0 -

      导航开始于点击链接、或者在用户代理中输入 URL、或者表单提交、或者通过除下表中 TYPE_RELOAD 和 TYPE_BACK_FORWARD 的脚本初始化操作。

      +

      导航开始于点击链接、或者在用户代理中输入 URL、或者表单提交、或者通过除下表中 TYPE_RELOAD 和 TYPE_BACK_FORWARD 的脚本初始化操作。

      diff --git a/files/zh-cn/web/api/navigation_timing_api/using_navigation_timing/index.html b/files/zh-cn/web/api/navigation_timing_api/using_navigation_timing/index.html index 64cd80354dce3a..98c3b210841728 100644 --- a/files/zh-cn/web/api/navigation_timing_api/using_navigation_timing/index.html +++ b/files/zh-cn/web/api/navigation_timing_api/using_navigation_timing/index.html @@ -10,7 +10,7 @@ ---

      {{DefaultAPISidebar("Navigation Timing")}}

      -

      Navigation Timing 接口使你可以轻松获取详细且高度准确的计时信息,以帮助从你的网站代码或资源隔离出性能问题。与其他工具或库不同,Navigation Timing 接口使你可以收集这些只有浏览器才能提供的信息,其准确性要比其他技术大大提高。它还具有能够提供用户所感知的计时信息而不是与用户体验无关的数据的优势。

      +

      Navigation Timing 接口使你可以轻松获取详细且高度准确的计时信息,以帮助从你的网站代码或资源隔离出性能问题。与其他工具或库不同,Navigation Timing 接口使你可以收集这些只有浏览器才能提供的信息,其准确性要比其他技术大大提高。它还具有能够提供用户所感知的计时信息而不是与用户体验无关的数据的优势。

      收集计时信息

      @@ -50,7 +50,7 @@

      CSS

      确定导航类型

      -

      为了将从 {{domxref("PerformanceTiming")}} 获取到的计时信息放入正确的观点,你需要更多地了解发生了哪种加载操作。特别是你需要知道:

      +

      为了将从 {{domxref("PerformanceTiming")}} 获取到的计时信息放入正确的观点,你需要更多地了解发生了哪种加载操作。特别是你需要知道:

      • 这是加载还是重新加载?
      • @@ -109,7 +109,7 @@

        CSS

        {{EmbedLiveSample("确定导航类型", 500, 120)}}

        -

        列出的值适用于展示示例的 {{HTMLElement("iframe")}}。

        +

        列出的值适用于展示示例的 {{HTMLElement("iframe")}}。

        也可以看看

        diff --git a/files/zh-cn/web/api/navigator/buildid/index.html b/files/zh-cn/web/api/navigator/buildid/index.html index c7c3525851ca68..07e22c112714d3 100644 --- a/files/zh-cn/web/api/navigator/buildid/index.html +++ b/files/zh-cn/web/api/navigator/buildid/index.html @@ -10,7 +10,7 @@ ---

        {{ ApiRef("HTML DOM") }}

        -

        返回所使用浏览器的构建标识符。现代浏览器中,这个属性返回一个固定的时间戳作为私有的计量方法,比如 Firefox 64 及以后的版本返回 20181001000000

        +

        返回所使用浏览器的构建标识符。现代浏览器中,这个属性返回一个固定的时间戳作为私有的计量方法,比如 Firefox 64 及以后的版本返回 20181001000000

        语法

        diff --git a/files/zh-cn/web/api/navigator/canshare/index.html b/files/zh-cn/web/api/navigator/canshare/index.html index 1fa30f43d09eaa..afa591c9520673 100644 --- a/files/zh-cn/web/api/navigator/canshare/index.html +++ b/files/zh-cn/web/api/navigator/canshare/index.html @@ -7,7 +7,7 @@ -
        如果对 Navigator.share() 的调用成功,则 Web Share API 的 Navigator.canShare() 方法将返回 true。
        +
        如果对 Navigator.share() 的调用成功,则 Web Share API 的 Navigator.canShare() 方法将返回 true。

        语法

        @@ -16,7 +16,7 @@

        语法

        参数

        -
        data {{optional_inline}}
        +
        data {{optional_inline}}
        包含要共享的数据的对象,该对象要与 {{domxref("Navigator.share()")}} 方法传递的数据相匹配。
        diff --git a/files/zh-cn/web/api/navigator/connection/index.html b/files/zh-cn/web/api/navigator/connection/index.html index 9807abec560f47..548982b12bd7d7 100644 --- a/files/zh-cn/web/api/navigator/connection/index.html +++ b/files/zh-cn/web/api/navigator/connection/index.html @@ -5,7 +5,7 @@ ---
        {{APIRef("Network Information API")}}{{SeeCompatTable}}
        -

        Navigator.connection 是只读的,提供一个 {{domxref("NetworkInformation")}} 对象来获取设备的网络连接信息。例如用户设备的当前带宽或连接是否被计量,这可以用于基于用户的连接来选择高清晰度内容或低清晰度内容。

        +

        Navigator.connection 是只读的,提供一个 {{domxref("NetworkInformation")}} 对象来获取设备的网络连接信息。例如用户设备的当前带宽或连接是否被计量,这可以用于基于用户的连接来选择高清晰度内容或低清晰度内容。

        语法

        diff --git a/files/zh-cn/web/api/navigator/credentials/index.html b/files/zh-cn/web/api/navigator/credentials/index.html index 5b8b2222947bb8..e49fb03152ad57 100644 --- a/files/zh-cn/web/api/navigator/credentials/index.html +++ b/files/zh-cn/web/api/navigator/credentials/index.html @@ -18,12 +18,12 @@

        返回值

        示例

        if ('credentials' in navigator) {
        -  navigator.credentials.get({password: true})
        -  .then(function(creds) {
        -    //Do something with the credentials.
        -  });
        +  navigator.credentials.get({password: true})
        +  .then(function(creds) {
        +    //Do something with the credentials.
        +  });
         } else {
        -  //Handle sign-in the way you did before.
        +  //Handle sign-in the way you did before.
         };
         
        diff --git a/files/zh-cn/web/api/navigator/devicememory/index.html b/files/zh-cn/web/api/navigator/devicememory/index.html index f5165c8f4bf3bf..3885eb1200a0c0 100644 --- a/files/zh-cn/web/api/navigator/devicememory/index.html +++ b/files/zh-cn/web/api/navigator/devicememory/index.html @@ -5,7 +5,7 @@ ---

        {{SeeCompatTable}}{{APIRef("Device Memory")}}

        -

        deviceMemory 只读属性返回千兆字节为单位的大概的机器内存。这个值是一个 2 的次方数除以 1024,舍去小数点的近似值。并且,上下边界也用来保护那些拥有非常低端或者高端设备的用户的隐私。

        +

        deviceMemory 只读属性返回千兆字节为单位的大概的机器内存。这个值是一个 2 的次方数除以 1024,舍去小数点的近似值。并且,上下边界也用来保护那些拥有非常低端或者高端设备的用户的隐私。

        语法

        diff --git a/files/zh-cn/web/api/navigator/donottrack/index.html b/files/zh-cn/web/api/navigator/donottrack/index.html index df0d1c1caf82f1..ad1d253ff73d15 100644 --- a/files/zh-cn/web/api/navigator/donottrack/index.html +++ b/files/zh-cn/web/api/navigator/donottrack/index.html @@ -24,7 +24,7 @@

        例子

        规范

        -

        Tracking Preference Expression (工作草案)

        +

        Tracking Preference Expression (工作草案)

        相关链接

        diff --git a/files/zh-cn/web/api/navigator/getbattery/index.html b/files/zh-cn/web/api/navigator/getbattery/index.html index 1bc593f4689592..4655a0b53650d7 100644 --- a/files/zh-cn/web/api/navigator/getbattery/index.html +++ b/files/zh-cn/web/api/navigator/getbattery/index.html @@ -11,7 +11,7 @@

        语法

        navigator.getBattery().then(funcRef);
        -

        funcRef 是{{domxref("navigator.getBattery")}} 返回的 battery promise 对象被 resolve 后执行的函数,即回调函数。

        +

        funcRef 是{{domxref("navigator.getBattery")}} 返回的 battery promise 对象被 resolve 后执行的函数,即回调函数。

        规范

        diff --git a/files/zh-cn/web/api/navigator/getgamepads/index.html b/files/zh-cn/web/api/navigator/getgamepads/index.html index f234fbe1994e9f..f8b11157003a65 100644 --- a/files/zh-cn/web/api/navigator/getgamepads/index.html +++ b/files/zh-cn/web/api/navigator/getgamepads/index.html @@ -5,7 +5,7 @@ ---

        {{APIRef("Gamepad API")}}{{SeeCompatTable}}

        -

        调用 Navigator.getGamepads() 方法会返回一个数组:第一个值为 null ,其他的值均为 {{ domxref("Gamepad") }} 对象,表示每一个与设备连接的游戏手柄。所以如果没有连接任何游戏手柄,这个方法将只会返回 null

        +

        调用 Navigator.getGamepads() 方法会返回一个数组:第一个值为 null ,其他的值均为 {{ domxref("Gamepad") }} 对象,表示每一个与设备连接的游戏手柄。所以如果没有连接任何游戏手柄,这个方法将只会返回 null

        语法

        diff --git a/files/zh-cn/web/api/navigator/getusermedia/index.html b/files/zh-cn/web/api/navigator/getusermedia/index.html index b32bfb73840a00..96da7bd4d02bcf 100644 --- a/files/zh-cn/web/api/navigator/getusermedia/index.html +++ b/files/zh-cn/web/api/navigator/getusermedia/index.html @@ -9,7 +9,7 @@

        {{APIRef}}{{deprecated_header}}

        -

        Navigator.getUserMedia() 方法提醒用户需要使用音频(0 或者 1)和(0 或者 1)视频输入设备,比如相机,屏幕共享,或者麦克风。如果用户给予许可,successCallback 回调就会被调用,{{domxref("MediaStream")}} 对象作为回调函数的参数。如果用户拒绝许可或者没有媒体可用,errorCallback 就会被调用,类似的,PermissionDeniedError 或者 NotFoundError 对象作为它的参数。注意,有可能以上两个回调函数都不被调用,因为不要求用户一定作出选择(允许或者拒绝)。

        +

        Navigator.getUserMedia() 方法提醒用户需要使用音频(0 或者 1)和(0 或者 1)视频输入设备,比如相机,屏幕共享,或者麦克风。如果用户给予许可,successCallback 回调就会被调用,{{domxref("MediaStream")}} 对象作为回调函数的参数。如果用户拒绝许可或者没有媒体可用,errorCallback 就会被调用,类似的,PermissionDeniedError 或者 NotFoundError 对象作为它的参数。注意,有可能以上两个回调函数都不被调用,因为不要求用户一定作出选择(允许或者拒绝)。

        语法

        @@ -17,9 +17,9 @@

        语法

        参数

        -

        constraints 

        +

        constraints

        -

        {{domxref("MediaStreamConstaints")}} 对象指定了请求使用媒体的类型,还有每个类型的所需要的参数。具体细节请参见 {{domxref("MediaDevices.getUserMedia()")}} 方法下面的 constraints 部分。

        +

        {{domxref("MediaStreamConstaints")}} 对象指定了请求使用媒体的类型,还有每个类型的所需要的参数。具体细节请参见 {{domxref("MediaDevices.getUserMedia()")}} 方法下面的 constraints 部分。

        successCallback

        @@ -101,7 +101,7 @@

        权限

        } }
        -

        参见 permission: audio-capture 和 permission: video-capture 以查看更多信息。

        +

        参见 permission: audio-capturepermission: video-capture 以查看更多信息。

        规格

        @@ -128,11 +128,11 @@

        浏览器兼容性

        {{Compat("api.Navigator.getUserMedia")}} -

        更多参见 

        +

        更多参见

        • {{domxref("MediaDevices.getUserMedia()")}} 替代了当前废弃的版本。
        • -
        • WebRTC - the introductory page to the API
        • -
        • MediaStream API - the API for the media stream objects
        • -
        • Taking webcam photos - a tutorial on using getUserMedia() for taking photos rather than video.
        • +
        • WebRTC - the introductory page to the API
        • +
        • MediaStream API - the API for the media stream objects
        • +
        • Taking webcam photos - a tutorial on using getUserMedia() for taking photos rather than video.
        diff --git a/files/zh-cn/web/api/navigator/index.html b/files/zh-cn/web/api/navigator/index.html index a9aa4c13d91ea0..a441ed812c7048 100644 --- a/files/zh-cn/web/api/navigator/index.html +++ b/files/zh-cn/web/api/navigator/index.html @@ -12,11 +12,11 @@

        Navigator 接口表示用户代理的状态和标识。它允许脚本查询它和注册自己进行一些活动。

        -

        可以使用只读的 {{domxref("window.navigator")}} 属性检索 navigator 对象。

        +

        可以使用只读的 {{domxref("window.navigator")}} 属性检索 navigator 对象。

        属性

        -

        不从 {{domxref("NavigatorID")}}、{{domxref("NavigatorLanguage")}}、{{domxref("NavigatorOnLine")}}、{{domxref("NavigatorGeolocation")}}、{{domxref("NavigatorPlugins")}}、{{domxref("NavigatorUserMedia")}} 和 {{domxref("NetworkInformation")}} 中继承任何属性,但是实现了定义在这些对象中的如下属性。

        +

        不从 {{domxref("NavigatorID")}}、{{domxref("NavigatorLanguage")}}、{{domxref("NavigatorOnLine")}}、{{domxref("NavigatorGeolocation")}}、{{domxref("NavigatorPlugins")}}、{{domxref("NavigatorUserMedia")}}{{domxref("NetworkInformation")}} 中继承任何属性,但是实现了定义在这些对象中的如下属性。

        标准属性

        @@ -26,11 +26,11 @@

        标准属性

        {{domxref("NavigatorID.appCodeName")}} {{readonlyInline}}{{deprecated_inline}}
        返回当前浏览器的内部 “开发代号” 名称。不能保证此属性返回的值是正确的。
        {{domxref("NavigatorID.appName")}} {{readonlyInline}}{{deprecated_inline}}
        -
        以 {{domxref("DOMString")}} 的形式返回浏览器官方名称。不能保证此属性返回的值是正确的。
        +
        以 {{domxref("DOMString")}} 的形式返回浏览器官方名称。不能保证此属性返回的值是正确的。
        {{domxref("NavigatorID.appVersion")}} {{readonlyInline}}{{deprecated_inline}}
        以 {{domxref("DOMString")}} 的形式返回浏览器版本。不能保证此属性返回的值是正确的。
        {{domxref("Navigator.battery")}} {{readonlyInline}}{{deprecated_inline}}
        -
        返回一个 {{domxref("BatteryManager")}} 对象,你可以用它来获取一些电池充电状态的信息。
        +
        返回一个 {{domxref("BatteryManager")}} 对象,你可以用它来获取一些电池充电状态的信息。
        {{domxref("Navigator.connection")}} {{readonlyInline}}{{experimental_inline}}
        提供一个 {{domxref("NetworkInformation")}} 对象来获取设备的网络连接信息。
        {{domxref("Navigator.cookieEnabled")}} {{readonlyinline}}
        diff --git a/files/zh-cn/web/api/navigator/maxtouchpoints/index.html b/files/zh-cn/web/api/navigator/maxtouchpoints/index.html index f0bd4687fba14b..46edac53fc50e2 100644 --- a/files/zh-cn/web/api/navigator/maxtouchpoints/index.html +++ b/files/zh-cn/web/api/navigator/maxtouchpoints/index.html @@ -7,7 +7,7 @@
        返回当前设备能够支持的最大同时触摸的点数。
        -
         
        +

        语法

        diff --git a/files/zh-cn/web/api/navigator/mediadevices/index.html b/files/zh-cn/web/api/navigator/mediadevices/index.html index e334de216370d0..0d1dc222b5f855 100644 --- a/files/zh-cn/web/api/navigator/mediadevices/index.html +++ b/files/zh-cn/web/api/navigator/mediadevices/index.html @@ -15,7 +15,7 @@ ---
        {{APIRef("Media Capture and Streams")}}
        -
         
        +
        mediaDevices 是 Navigator 只读属性,返回一个 {{domxref("MediaDevices")}} 对象,该对象可提供对相机和麦克风等媒体输入设备的连接访问,也包括屏幕共享。
        @@ -24,7 +24,7 @@

        语法

        var mediaDevices = navigator.mediaDevices;
         
        -

         返回值

        +

        返回值

        {{domxref("MediaDevices")}} 是一个单例对象。通常,您只需直接使用此对象的成员,例如通过调用{{domxref("navigator.mediaDevices.getUserMedia()")}}。

        diff --git a/files/zh-cn/web/api/navigator/oscpu/index.html b/files/zh-cn/web/api/navigator/oscpu/index.html index 3e23fbfcc2f567..8a24f9a905d07a 100644 --- a/files/zh-cn/web/api/navigator/oscpu/index.html +++ b/files/zh-cn/web/api/navigator/oscpu/index.html @@ -30,7 +30,7 @@

        语法

        Windows CE - WindowsCE x.y1 + WindowsCE x.y1 Windows 64-bit (64-bit build) @@ -42,15 +42,15 @@

        语法

        Windows 32-bit - Windows NT x.y + Windows NT x.y - Mac OS X (PPC build) - PPC Mac OS X x.y + Mac OS X (PPC build) + PPC Mac OS X x.y - Mac OS X (i386/x64 build) - Intel Mac OS X x.y + Mac OS X (i386/x64 build) + Intel Mac OS X x.y Linux 64-bit (32-bit build) @@ -68,7 +68,7 @@

        语法

        例子

        function osInfo() {
        -  alert(window.navigator.oscpu);
        +  alert(window.navigator.oscpu);
         }
         // 可能返回:"Windows NT 6.1",表示 windows 7
         
        diff --git a/files/zh-cn/web/api/navigator/permissions/index.html b/files/zh-cn/web/api/navigator/permissions/index.html index b82a334e689a93..027c0d5d60f56b 100644 --- a/files/zh-cn/web/api/navigator/permissions/index.html +++ b/files/zh-cn/web/api/navigator/permissions/index.html @@ -9,7 +9,7 @@ ---

        {{APIRef("HTML DOM")}}{{SeeCompatTable}}

        -

        permissions 是 Navigator 读属性,返回一个可用于查询或更新某些 APIs(由 Permissions API 覆盖)的权限状态的对象。

        +

        permissionsNavigator 读属性,返回一个可用于查询或更新某些 APIs(由 Permissions API 覆盖)的权限状态的对象。

        语法

        @@ -23,12 +23,12 @@

        例子

        navigator.permissions.query({name:'geolocation'}).then(function(result) {
        -  if (result.state === 'granted') {
        -    showMap();
        -  } else if (result.state === 'prompt') {
        -    showButtonToEnableMap();
        -  }
        -  // 如果被拒绝,请不要做任何操作。
        +  if (result.state === 'granted') {
        +    showMap();
        +  } else if (result.state === 'prompt') {
        +    showButtonToEnableMap();
        +  }
        +  // 如果被拒绝,请不要做任何操作。
         });
         
        diff --git a/files/zh-cn/web/api/navigator/productsub/index.html b/files/zh-cn/web/api/navigator/productsub/index.html index b0a306d9e424f0..d33638eb8b99c6 100644 --- a/files/zh-cn/web/api/navigator/productsub/index.html +++ b/files/zh-cn/web/api/navigator/productsub/index.html @@ -10,7 +10,7 @@ ---
        {{ ApiRef("HTML DOM") }}
        -

        Navigator.productSub 只读属性返回当前浏览器的编译版本号。 

        +

        Navigator.productSub 只读属性返回当前浏览器的编译版本号。

        语法

        diff --git a/files/zh-cn/web/api/navigator/registerprotocolhandler/index.html b/files/zh-cn/web/api/navigator/registerprotocolhandler/index.html index e4e5ab589b362a..220054c3a52100 100644 --- a/files/zh-cn/web/api/navigator/registerprotocolhandler/index.html +++ b/files/zh-cn/web/api/navigator/registerprotocolhandler/index.html @@ -13,9 +13,9 @@ ---
        {{APIRef("HTML DOM")}}{{securecontext_header}}
        -

        {{domxref("Navigator")}} 的方法 registerProtocolHandler() 让 web 站点为自身注册用于打开或处理特定 URL 方案(又名协议)的能力。

        +

        {{domxref("Navigator")}} 的方法 registerProtocolHandler() 让 web 站点为自身注册用于打开或处理特定 URL 方案(又名协议)的能力。

        -

        举个例子,此 API 允许 Web 邮件站点打开 mailto: URL,或让  VoIP  站点打开 tel: URL。

        +

        举个例子,此 API 允许 Web 邮件站点打开 mailto: URL,或让 VoIP 站点打开 tel: URL。

        语法

        @@ -23,27 +23,27 @@

        语法

        -

        Note: 最近更新为 navigator.registerProtocolHandler(schemeurl), 但目前没有浏览器支持该版本。

        +

        Note: 最近更新为 navigator.registerProtocolHandler(scheme, url), 但目前没有浏览器支持该版本。

        参数

        scheme
        -
        一个包含站点希望处理的协议的字符串。例如,你可以通过传入 "sms" 来注册处理 SMS 文本信息链接。
        +
        一个包含站点希望处理的协议的字符串。例如,你可以通过传入 "sms" 来注册处理 SMS 文本信息链接。
        url
        -
        处理器的 URL,string 类型。这个字符串应该包含一个"%s"的占位符,其会被将要受理的文档的 escaped 链接所替换。这个链接(译者按:指将要受理的文档的 escaped 链接,也就是替换占位符的字符串)可能是一个真实的 URL,或者是一个电话号码,邮件地址之类的。
        +
        处理器的 URL,string 类型。这个字符串应该包含一个"%s"的占位符,其会被将要受理的文档的 escaped 链接所替换。这个链接(译者按:指将要受理的文档的 escaped 链接,也就是替换占位符的字符串)可能是一个真实的 URL,或者是一个电话号码,邮件地址之类的。
        -
        这个处理器的 URL 必须以 http 或者 https 协议标记作为开头,最好是 https ,以满足一些浏览器出于安全考虑的要求。
        +
        这个处理器的 URL 必须以 http 或者 https 协议标记作为开头,最好是 https ,以满足一些浏览器出于安全考虑的要求。
        title {{Deprecated_Inline}}
        一个用户可理解的处理器标题。标题会展示给用户,例如弹出对话框“允许这个站点处理 [scheme] 链接吗?”或者在浏览器设置中列出注册的处理器时。
        -

        Note: 出于欺骗的考虑,标题已从规范中删除,但当前所有的浏览器仍要求使用该标题。 建议始终设置标题,因为支持更新规范的浏览器很可能会向后兼容,并且仍接受标题(但不使用它)。

        +

        Note: 出于欺骗的考虑,标题已从规范中删除,但当前所有的浏览器仍要求使用该标题。 建议始终设置标题,因为支持更新规范的浏览器很可能会向后兼容,并且仍接受标题(但不使用它)。

        @@ -52,8 +52,8 @@

        参数

        异常

          -
        • 指定了一个非法的协议标记,例如一个浏览器自身的标记(https:about: 等)。
        • -
        • 处理器 URL 的 origin 与调用这个 API 的页面的 origin 不匹配。
        • +
        • 指定了一个非法的协议标记,例如一个浏览器自身的标记(https:, about: 等)。
        • +
        • 处理器 URL 的 origin 与调用这个 API 的页面的 origin 不匹配。
        • 浏览器要求这个函数由安全的上下文调用。
        • 浏览器要求处理器的 URL 使用 HTTPS 协议。
        @@ -67,7 +67,7 @@

        异常

        允许的协议标记

        -

        出于安全考虑,registerProtocolHandler() 严格限制了允许注册的协议标记。以 web+ 作为前缀的方式可以注册一个自定义的标记协议,至少要有 5 个字符的长度 (包括 web+ 前缀),而且只能使用小写的 ASCII 字母作为名称。例如 web+burger ,如下面的示例所示。

        +

        出于安全考虑,registerProtocolHandler() 严格限制了允许注册的协议标记。以 web+ 作为前缀的方式可以注册一个自定义的标记协议,至少要有 5 个字符的长度 (包括 web+ 前缀),而且只能使用小写的 ASCII 字母作为名称。例如 web+burger ,如下面的示例所示。

        除此之外,还可以使用下文所列的白名单中的协议标记:

        @@ -105,7 +105,7 @@

        示例

        "Burger handler"); -

        这将创建一个处理程序,该处理程序允许使用 web+burger: 链接将用户发送到您的网站,并将访问的 Burger URL 插入%s占位符。

        +

        这将创建一个处理程序,该处理程序允许使用 web+burger: 链接将用户发送到您的网站,并将访问的 Burger URL 插入%s占位符。

        该脚本必须从与处理程序 URL 相同的源运行(因此, https://www.google.com/ 上的任何页面),并且处理程序 URL 必须为 http https

        diff --git a/files/zh-cn/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.html b/files/zh-cn/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.html index 8d9154ddb17505..83fece601c49b1 100644 --- a/files/zh-cn/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.html +++ b/files/zh-cn/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.html @@ -125,5 +125,5 @@

        See also

      • window.navigator.registerContentHandler
      • nsIProtocolHandler (XUL only)
      • RegisterProtocolHandler Enhancing the Federated Web at Mozilla Webdev
      • -
      • Register a custom protocolHandler at Google Developers.
      • +
      • Register a custom protocolHandler at Google Developers.
      diff --git a/files/zh-cn/web/api/navigator/serviceworker/index.html b/files/zh-cn/web/api/navigator/serviceworker/index.html index 63ffdcf32f926f..0c2de285d0dc82 100644 --- a/files/zh-cn/web/api/navigator/serviceworker/index.html +++ b/files/zh-cn/web/api/navigator/serviceworker/index.html @@ -5,7 +5,7 @@ ---

      {{APIRef("Service Workers API")}}

      -

      Navigator.serviceWorker 只读属性,返回 关联文件 的 {{domxref("ServiceWorkerContainer")}} 对象,它提供对{{domxref("ServiceWorker")}} 的注册,删除,升级和通信的访问。。

      +

      Navigator.serviceWorker 只读属性,返回 关联文件 的 {{domxref("ServiceWorkerContainer")}} 对象,它提供对{{domxref("ServiceWorker")}} 的注册,删除,升级和通信的访问。。

      语法

      diff --git a/files/zh-cn/web/api/navigator/share/index.html b/files/zh-cn/web/api/navigator/share/index.html index 489c15b7f4c41f..8cd193a9121838 100644 --- a/files/zh-cn/web/api/navigator/share/index.html +++ b/files/zh-cn/web/api/navigator/share/index.html @@ -24,9 +24,9 @@

      参数

        -
      • url: 要共享的 URL( {{domxref("USVString")}} )
      • -
      • text: 要共享的文本( {{domxref("USVString")}} )
      • -
      • title: 要共享的标题( {{domxref("USVString")}})
      • +
      • url: 要共享的 URL( {{domxref("USVString")}} )
      • +
      • text: 要共享的文本( {{domxref("USVString")}} )
      • +
      • title: 要共享的标题( {{domxref("USVString")}})
      • files: 要共享的文件(“FrozenArray”)
      diff --git a/files/zh-cn/web/api/navigator/vendor/index.html b/files/zh-cn/web/api/navigator/vendor/index.html index 6535714de1b6db..2d00547d42a506 100644 --- a/files/zh-cn/web/api/navigator/vendor/index.html +++ b/files/zh-cn/web/api/navigator/vendor/index.html @@ -17,7 +17,7 @@

      语法

      参数

        -
      • venString 浏览器供应商。
      • +
      • venString 浏览器供应商。

      例子

      diff --git a/files/zh-cn/web/api/navigator/vibrate/index.html b/files/zh-cn/web/api/navigator/vibrate/index.html index 0b97d9cc11bd4b..5cdc841b52ea0f 100644 --- a/files/zh-cn/web/api/navigator/vibrate/index.html +++ b/files/zh-cn/web/api/navigator/vibrate/index.html @@ -16,10 +16,10 @@

      语法

      pattern
      -
      提供一个震动、暂停间隔的模式。每一个值表示交替震动或者暂停的毫秒数。你可以提供一个单个的值(震动一次的毫秒数)或者一个包含整数的数组来交替的震动、暂停、震动。详情参见 Vibration API
      +
      提供一个震动、暂停间隔的模式。每一个值表示交替震动或者暂停的毫秒数。你可以提供一个单个的值(震动一次的毫秒数)或者一个包含整数的数组来交替的震动、暂停、震动。详情参见 Vibration API
      -

      传递一个 0、一个空数组或者一个元素全部为 0 的数组会结束当前正在运行中的震动模式。

      +

      传递一个 0、一个空数组或者一个元素全部为 0 的数组会结束当前正在运行中的震动模式。

      示例

      diff --git a/files/zh-cn/web/api/networkinformation/index.html b/files/zh-cn/web/api/networkinformation/index.html index 99f63ffc430d94..24e631adc785f6 100644 --- a/files/zh-cn/web/api/networkinformation/index.html +++ b/files/zh-cn/web/api/networkinformation/index.html @@ -5,7 +5,7 @@ ---
      {{APIRef("Network Information API")}}{{SeeCompatTable}}
      -

      NetworkInformation 提供有关设备正在使用的连接与网络进行通信的信息,并提供了在连接类型更改时通知脚本的事件。NetworkInformation 接口不能被是实例化, 而是通过 {{domxref("Navigator")}} 的 connection 属性进行访问。

      +

      NetworkInformation 提供有关设备正在使用的连接与网络进行通信的信息,并提供了在连接类型更改时通知脚本的事件。NetworkInformation 接口不能被是实例化, 而是通过 {{domxref("Navigator")}} 的 connection 属性进行访问。

      {{AvailableInWorkers}}

      @@ -35,7 +35,7 @@

      Event handlers

      {{domxref("NetworkInformation.onchange")}}
      -
      当连接信息更改并在此对象上触发更改时触发的 {{event("change")}}  。
      +
      当连接信息更改并在此对象上触发更改时触发的 {{event("change")}} 。

      Methods

      diff --git a/files/zh-cn/web/api/networkinformation/rtt/index.html b/files/zh-cn/web/api/networkinformation/rtt/index.html index d0b7aac0f4874c..b67d9d7363d258 100644 --- a/files/zh-cn/web/api/networkinformation/rtt/index.html +++ b/files/zh-cn/web/api/networkinformation/rtt/index.html @@ -3,9 +3,9 @@ slug: Web/API/NetworkInformation/rtt translation_of: Web/API/NetworkInformation/rtt --- -

      {{apiref("Network Information API")}}{{SeeCompatTable}}

      +

      {{apiref("Network Information API")}}{{SeeCompatTable}}

      -

      NetworkInformation.rtt 是一个只读属性,返回了当前连接下评估的往返时延(RTT, round-trip time ),并保留该值为 25 千分秒的最接近的整数倍。该值基于最近使用中被监测的最近保持活跃连接的应用层上的 RTT 测量值。它排除了到私有地址空间的连接。如果没有最近的测量数据,该值就基于底层连接技术的属性。

      +

      NetworkInformation.rtt 是一个只读属性,返回了当前连接下评估的往返时延(RTT, round-trip time ),并保留该值为 25 千分秒的最接近的整数倍。该值基于最近使用中被监测的最近保持活跃连接的应用层上的 RTT 测量值。它排除了到私有地址空间的连接。如果没有最近的测量数据,该值就基于底层连接技术的属性。

      {{AvailableInWorkers}}

      diff --git a/files/zh-cn/web/api/networkinformation/savedata/index.html b/files/zh-cn/web/api/networkinformation/savedata/index.html index dd22dc5524b4e8..c9dc591d48997e 100644 --- a/files/zh-cn/web/api/networkinformation/savedata/index.html +++ b/files/zh-cn/web/api/networkinformation/savedata/index.html @@ -5,7 +5,7 @@ ---
      {{APIRef("Network Information API")}}{{SeeCompatTable}}
      -

      NetworkInformation.saveData 是 {{domxref("NetworkInformation")}} 接口的只读属性, 如果用户设备上设置了减少数据使用的选项时返回 true .

      +

      NetworkInformation.saveData 是 {{domxref("NetworkInformation")}} 接口的只读属性, 如果用户设备上设置了减少数据使用的选项时返回 true .

      语法

      diff --git a/files/zh-cn/web/api/node/appendchild/index.html b/files/zh-cn/web/api/node/appendchild/index.html index b88625c3bb2dee..5aa39f39db40df 100644 --- a/files/zh-cn/web/api/node/appendchild/index.html +++ b/files/zh-cn/web/api/node/appendchild/index.html @@ -14,9 +14,9 @@

      Node.appendChild() 方法将一个节点附加到指定父节点的子节点列表的末尾处。如果将被插入的节点已经存在于当前文档的文档树中,那么 appendChild() 只会将它从原先的位置移动到新的位置(不需要事先移除要移动的节点)。

      -

      这意味着,一个节点不可能同时出现在文档的不同位置。所以,如果某个节点已经拥有父节点,在被传递给此方法后,它首先会被移除,再被插入到新的位置。若要保留已在文档中的节点,可以先使用  {{domxref("Node.cloneNode()")}} 方法来为它创建一个副本,再将副本附加到目标父节点下。请注意,用 cloneNode 制作的副本不会自动保持同步。

      +

      这意味着,一个节点不可能同时出现在文档的不同位置。所以,如果某个节点已经拥有父节点,在被传递给此方法后,它首先会被移除,再被插入到新的位置。若要保留已在文档中的节点,可以先使用 {{domxref("Node.cloneNode()")}} 方法来为它创建一个副本,再将副本附加到目标父节点下。请注意,用 cloneNode 制作的副本不会自动保持同步。

      -

      如果给定的子节点是 {{domxref("DocumentFragment")}},那么 {{domxref("DocumentFragment")}} 的全部内容将转移到指定父节点的子节点列表中。

      +

      如果给定的子节点是 {{domxref("DocumentFragment")}},那么 {{domxref("DocumentFragment")}} 的全部内容将转移到指定父节点的子节点列表中。

      有更加新的 API 可供使用!
      @@ -36,7 +36,7 @@

      参数

      返回值

      -

      返回追加后的子节点 (aChild),除非 aChild 是一个文档片段({{domxref("DocumentFragment")}}),这种情况下将返回空文档片段({{domxref("DocumentFragment")}})。

      +

      返回追加后的子节点 (aChild),除非 aChild 是一个文档片段({{domxref("DocumentFragment")}}),这种情况下将返回空文档片段({{domxref("DocumentFragment")}})。

      附注

      @@ -46,11 +46,11 @@

      附注

      备注

      -

      由于 appendChild() 返回的是被附加的子元素,所以链式调用可能无法按照你的预期去执行:

      +

      由于 appendChild() 返回的是被附加的子元素,所以链式调用可能无法按照你的预期去执行:

      let aBlock = document.createElement('block').appendChild( document.createElement('b') );
      -

      (上述代码)只会将 aBlock 设置为 <b></b> ,这可能不是你所想要的。

      +

      (上述代码)只会将 aBlock 设置为 <b></b> ,这可能不是你所想要的。

      示例

      diff --git a/files/zh-cn/web/api/node/baseuri/index.html b/files/zh-cn/web/api/node/baseuri/index.html index 3a534f66532282..36c3d2a19e74b9 100644 --- a/files/zh-cn/web/api/node/baseuri/index.html +++ b/files/zh-cn/web/api/node/baseuri/index.html @@ -14,11 +14,11 @@
      {{APIRef("DOM")}}
      -

      Node.baseURI 是只读属性,返回一个节点的绝对基址 URL。

      +

      Node.baseURI 是只读属性,返回一个节点的绝对基址 URL。

      -

      当浏览器要获取绝对 URL 时,就需要用基 URL 去解析相对 URL。例如,解析 HTML {{HTMLElement("img")}} 元素的 src 属性时,或者 处理 XML xlink:href 属性时—。

      +

      当浏览器要获取绝对 URL 时,就需要用基 URL 去解析相对 URL。例如,解析 HTML {{HTMLElement("img")}} 元素的 src 属性时,或者 处理 XML xlink:href 属性时—。

      -

      一般情况下,基 URL 是 document 的 location ,但是它受诸多方面因素的影响,例如 HTML 的 {{HTMLElement("base")}} 元素和 XML xml:base 属性。

      +

      一般情况下,基 URL 是 document 的 location ,但是它受诸多方面因素的影响,例如 HTML 的 {{HTMLElement("base")}} 元素和 XML xml:base 属性。

      语法

      @@ -26,7 +26,7 @@

      语法

        -
      • baseURI 是一个 {{ domxref("DOMString") }} 代表当前 {{domxref("Node", "节点")}} 所在文档的基 URI 。如果无法获取则可能返回 null
      • +
      • baseURI 是一个 {{ domxref("DOMString") }} 代表当前 {{domxref("Node", "节点")}} 所在文档的基 URI 。如果无法获取则可能返回 null
      • node.baseURI 是只读的。
      • node.baseURI 可能会随时间发生变化。
      @@ -50,7 +50,7 @@

      元素的基 URL

      元素的基 URL 一般和其所在的文档相同。

      -

      如果文档中有 xml:base 属性(不要在 HTML 文档中这样做),在 node.baseURI 计算基 URL 时,会把 xml:base 属性考虑进去。参考 xml:base 来了解更多。

      +

      如果文档中有 xml:base 属性(不要在 HTML 文档中这样做),在 node.baseURI 计算基 URL 时,会把 xml:base 属性考虑进去。参考 xml:base 来了解更多。

      可以通过 {{domxref("element")}}.baseURI 获取某个元素的基 URL。

      diff --git a/files/zh-cn/web/api/node/childnodes/index.html b/files/zh-cn/web/api/node/childnodes/index.html index 3d7d10185bab36..459d41229535ee 100644 --- a/files/zh-cn/web/api/node/childnodes/index.html +++ b/files/zh-cn/web/api/node/childnodes/index.html @@ -13,7 +13,7 @@

      概述

      语法

      var ndList = elementNodeReference.childNodes;
       
      -

      ndList 变量为 {{domxref("NodeList")}} 类型,且为只读。

      +

      ndList 变量为 {{domxref("NodeList")}} 类型,且为只读。

      例子

      // parg 是一个对 <p> 元素的引用
       if (parg.hasChildNodes())
      @@ -35,7 +35,7 @@ 

      例子

      };

      备注

      -

      集合的元素是一个节点而不是字符串。要从集合的元素获取数据,你必须使用它们的属性(例如:用 elementNodeReference.childNodes{{ mediawiki.external("1") }}.nodeName 获取它们的名称,等等)。

      +

      集合的元素是一个节点而不是字符串。要从集合的元素获取数据,你必须使用它们的属性(例如:用 elementNodeReference.childNodes{{ mediawiki.external("1") }}.nodeName 获取它们的名称,等等)。

      document节点 (文档节点) 包含两个子节点: Doctype 声明和根节点。根节点通常为 documentElement 引用,且在 (X)HTML 文档中为 HTML 元素。

      规范

        diff --git a/files/zh-cn/web/api/node/clonenode/index.html b/files/zh-cn/web/api/node/clonenode/index.html index bc219230dd3456..f707c1d00b3d5b 100644 --- a/files/zh-cn/web/api/node/clonenode/index.html +++ b/files/zh-cn/web/api/node/clonenode/index.html @@ -27,9 +27,9 @@

        语法

        -

        注意: 在 DOM4 规范中 (实现于 Gecko 13.0{{geckoRelease("13.0")}}),deep是一个可选参数。如果省略的话,参数的默认值为 true,也就是说默认是深度克隆。如果想使用浅克隆,你需要将该参数设置为 false。

        +

        注意: 在 DOM4 规范中 (实现于 Gecko 13.0{{geckoRelease("13.0")}}),deep是一个可选参数。如果省略的话,参数的默认值为 true,也就是说默认是深度克隆。如果想使用浅克隆,你需要将该参数设置为 false。

        -

        在最新的规范里,该方法的行为已经改变了,其默认值变成了 false。虽然该参数仍旧是可选的,但是你必须要为该方法设置 deep 参数,无论是为了向前还是向后兼容考虑。假如开发者没设置参数的话,Gecko 28.0 {{geckoRelease(28)}}) 版本的控制台会发出警告。从 Gecko 29.0 {{geckoRelease(29)}}) 开始该方法默认为浅复制而不是深度复制。

        +

        在最新的规范里,该方法的行为已经改变了,其默认值变成了 false。虽然该参数仍旧是可选的,但是你必须要为该方法设置 deep 参数,无论是为了向前还是向后兼容考虑。假如开发者没设置参数的话,Gecko 28.0 {{geckoRelease(28)}}) 版本的控制台会发出警告。从 Gecko 29.0 {{geckoRelease(29)}}) 开始该方法默认为浅复制而不是深度复制。

        示例

        diff --git a/files/zh-cn/web/api/node/comparedocumentposition/index.html b/files/zh-cn/web/api/node/comparedocumentposition/index.html index a2039840f45ae2..06245620ff908b 100644 --- a/files/zh-cn/web/api/node/comparedocumentposition/index.html +++ b/files/zh-cn/web/api/node/comparedocumentposition/index.html @@ -13,7 +13,7 @@ ---
        {{ ApiRef("DOM") }}
        -

        Node.compareDocumentPosition() 可以比较当前节点与任意文档中的另一个节点的位置关系。

        +

        Node.compareDocumentPosition() 可以比较当前节点与任意文档中的另一个节点的位置关系。

        返回值是一个具有以下值的位掩码:

        @@ -68,12 +68,12 @@

        参数

        otherNode
        -
        用于比较位置的 Node 。
        +
        用于比较位置的 Node

        返回值

        -

        一个表示 NodeotherNode 在 {{domxref("Document")}} 中关系的整数值。在一些场景下,可能设置了不止一位比特值。比如 otherNode 在文档中是靠前的且包含了 Node, 那么DOCUMENT_POSITION_CONTAINSDOCUMENT_POSITION_PRECEDING 位都会设置,所以结果会是 0x0A 即十进制下的 10。

        +

        一个表示 NodeotherNode 在 {{domxref("Document")}} 中关系的整数值。在一些场景下,可能设置了不止一位比特值。比如 otherNode 在文档中是靠前的且包含了 Node, 那么DOCUMENT_POSITION_CONTAINSDOCUMENT_POSITION_PRECEDING 位都会设置,所以结果会是 0x0A 即十进制下的 10。

        例子

        @@ -89,7 +89,7 @@

        例子

        注: 因为compareDocumentPosition返回的是一个位掩码,所以必须再使用按位与运算符才能得到有意义的值。

    -

    注意第一条语句使用了带有参数 0 的 {{domxref("NodeList.item()")}} 方法,它和 getElementsByTagName('head')[0] 是一样的。

    +

    注意第一条语句使用了带有参数 0 的 {{domxref("NodeList.item()")}} 方法,它和 getElementsByTagName('head')[0] 是一样的。

    规范

    @@ -103,7 +103,7 @@

    规范

    {{SpecName('DOM WHATWG','#dom-node-comparedocumentposition','Node.compareDocumentPosition()')}} {{Spec2('DOM WHATWG')}} -   + {{SpecName('DOM3 Core','core.html#Node3-compareDocumentPosition','Node.compareDocumentPosition()')}} diff --git a/files/zh-cn/web/api/node/firstchild/index.html b/files/zh-cn/web/api/node/firstchild/index.html index 576711b0a9111f..05c57141269886 100644 --- a/files/zh-cn/web/api/node/firstchild/index.html +++ b/files/zh-cn/web/api/node/firstchild/index.html @@ -30,7 +30,7 @@

    示例 1

    这个例子演示了firstChild属性的用法以及空白符节点对该属性的使用可能造成的影响。参见备注部分了解 Gecko DOM 中关于处理空白符的更多信息。

    <p id="para-01">
    -  <span>First span</span>
    +  <span>First span</span>
     </p>
     
     <script type="text/javascript">
    diff --git a/files/zh-cn/web/api/node/getrootnode/index.html b/files/zh-cn/web/api/node/getrootnode/index.html
    index 3190384626f3a9..fe5f2b725466c1 100644
    --- a/files/zh-cn/web/api/node/getrootnode/index.html
    +++ b/files/zh-cn/web/api/node/getrootnode/index.html
    @@ -21,16 +21,16 @@ 

    参数

    options {{optional_inline}}
    -
    获取根节点时的可选参数对象. 下列值可供选择: +
    获取根节点时的可选参数对象. 下列值可供选择:
      -
    • composed:  {{jsxref('Boolean')}} 如果检索到 shadow Root 需要返回,则设置为(false,默认值),如果跳过 shadow Root 检索普通 Root 则设置为(true)。
    • +
    • composed: {{jsxref('Boolean')}} 如果检索到 shadow Root 需要返回,则设置为(false,默认值),如果跳过 shadow Root 检索普通 Root 则设置为(true)。

    返回值

    -

    返回一个继承自 {{domxref('Node')}} 的对象。返回值会因为 getRootNode() 调用的地方不同而不同; 比如说:

    +

    返回一个继承自 {{domxref('Node')}} 的对象。返回值会因为 getRootNode() 调用的地方不同而不同; 比如说:

    • 在标准的网页中调用将会返回一个 {{domxref("HTMLDocument")}} 对象表示整个网页。
    • diff --git a/files/zh-cn/web/api/node/index.html b/files/zh-cn/web/api/node/index.html index 236e8ab27abb76..f38cca2fdf355d 100644 --- a/files/zh-cn/web/api/node/index.html +++ b/files/zh-cn/web/api/node/index.html @@ -12,7 +12,7 @@ ---

      {{APIRef("DOM")}}

      -

      Node 是一个接口,各种类型的 DOM API 对象会从这个接口继承。它允许我们使用相似的方式对待这些不同类型的对象;比如,继承同一组方法,或者用同样的方式测试。

      +

      Node 是一个接口,各种类型的 DOM API 对象会从这个接口继承。它允许我们使用相似的方式对待这些不同类型的对象;比如,继承同一组方法,或者用同样的方式测试。

      以下接口都从 Node 继承其方法和属性:

      @@ -28,14 +28,14 @@

      属性

      {{DOMxRef("Node.baseURI")}}{{ReadOnlyInline}}
      -
      返回一个表示 base URL 的{{DOMxRef("DOMString")}}。不同语言中的 base URL 的概念都不一样。 在 HTML 中,base URL 表示协议和域名,以及一直到最后一个'/'之前的文件目录。
      +
      返回一个表示 base URL 的{{DOMxRef("DOMString")}}。不同语言中的 base URL 的概念都不一样。 在 HTML 中,base URL 表示协议和域名,以及一直到最后一个'/'之前的文件目录。
      -
      {{DOMxRef("Node.baseURIObject")}} {{Non-standard_inline}}
      +
      {{DOMxRef("Node.baseURIObject")}} {{Non-standard_inline}}
      (不适用于网页内容) 只读的 nsIURI 对象表示元素的 base URI.
      {{DOMxRef("Node.childNodes")}}{{ReadOnlyInline}}
      -
      返回一个包含了该节点所有子节点的实时的{{DOMxRef("NodeList")}}。{{DOMxRef("NodeList")}} 是动态变化的。如果该节点的子节点发生了变化,{{DOMxRef("NodeList")}}对象就会自动更新。 
      +
      返回一个包含了该节点所有子节点的实时的{{DOMxRef("NodeList")}}。{{DOMxRef("NodeList")}} 是动态变化的。如果该节点的子节点发生了变化,{{DOMxRef("NodeList")}}对象就会自动更新。
      {{DOMxRef("Node.firstChild")}} {{ReadonlyInline}}
      返回该节点的第一个子节点{{DOMxRef("Node")}},如果该节点没有子节点则返回null
      {{DOMxRef("Node.isConnected")}}{{ReadOnlyInline}}
      @@ -43,9 +43,9 @@

      属性

      {{DOMxRef("Node.lastChild")}} {{ReadonlyInline}}
      返回该节点的最后一个子节点{{DOMxRef("Node")}},如果该节点没有子节点则返回null
      {{DOMxRef("Node.nextSibling")}} {{ReadonlyInline}}
      -
      返回与该节点同级的下一个节点 {{DOMxRef("Node")}},如果没有返回null
      +
      返回与该节点同级的下一个节点 {{DOMxRef("Node")}},如果没有返回null
      {{DOMxRef("Node.nodeName")}} {{ReadonlyInline}}
      -
      返回一个包含该节点名字的{{DOMxRef("DOMString")}}。节点的名字的结构和节点类型不同。比如{{DOMxRef("HTMLElement")}}的名字跟它所关联的标签对应,就比如{{DOMxRef("HTMLAudioElement")}}的就是 'audio' ,{{DOMxRef("Text")}}节点对应的是 '#text' 还有{{DOMxRef("Document")}}节点对应的是 '#document'
      +
      返回一个包含该节点名字的{{DOMxRef("DOMString")}}。节点的名字的结构和节点类型不同。比如{{DOMxRef("HTMLElement")}}的名字跟它所关联的标签对应,就比如{{DOMxRef("HTMLAudioElement")}}的就是 'audio' ,{{DOMxRef("Text")}}节点对应的是 '#text' 还有{{DOMxRef("Document")}}节点对应的是 '#document'
      {{DOMxRef("Node.nodeType")}}{{ReadonlyInline}}
      返回一个与该节点类型对应的无符号短整型的值,可能的值如下: @@ -59,7 +59,7 @@

      属性

      - + @@ -71,11 +71,11 @@

      属性

      - + - + @@ -99,7 +99,7 @@

      属性

      - + @@ -110,7 +110,7 @@

      属性

      {{DOMxRef("Node.ownerDocument")}} {{readonlyInline}}
      返回这个元素属于的 {{DOMxRef("Document")}}对象 。 如果没有 Document 对象与之关联,返回 null。
      {{DOMxRef("Node.parentNode")}} {{readonlyInline}}
      -
      返回一个当前节点 {{DOMxRef("Node")}}的父节点 。如果没有这样的节点,比如说像这个节点是树结构的顶端或者没有插入一棵树中, 这个属性返回 null。
      +
      返回一个当前节点 {{DOMxRef("Node")}}的父节点 。如果没有这样的节点,比如说像这个节点是树结构的顶端或者没有插入一棵树中, 这个属性返回 null。
      {{DOMxRef("Node.parentElement")}} {{readonlyInline}}
      返回一个当前节点的父节点 {{DOMxRef("Element")}} 。 如果当前节点没有父节点或者说父节点不是一个元素 ({{DOMxRef("Element")}}), 这个属性返回 null。
      {{DOMxRef("Node.previousSibling")}} {{readonlyInline}}
      @@ -139,7 +139,7 @@

      废弃的属性

      {{DOMxRef("Node.prefix")}} {{Deprecated_Inline}}{{ReadOnlyInline}}
      返回一个节点命名空间的前缀 {{DOMxRef("DOMString")}} , 当前缀不存在时返回 null
      {{DOMxRef("Node.rootNode")}} {{Deprecated_Inline}}{{ReadOnlyInline}}
      -
      返回一个 DOM 树中顶层节点的  {{DOMxRef("Node")}} 对象,如果顶层节点不 DOM 树中,则返回当前节点。该属性已被 {{DOMxRef("Node.getRootNode()")}} 方法所代替。
      +
      返回一个 DOM 树中顶层节点的 {{DOMxRef("Node")}} 对象,如果顶层节点不 DOM 树中,则返回当前节点。该属性已被 {{DOMxRef("Node.getRootNode()")}} 方法所代替。

      方法

      @@ -185,7 +185,7 @@

      废弃的方法

      {{DOMxRef("Node.getFeature()")}} {{Deprecated_Inline}}
      {{DOMxRef("Node.getUserData()")}} {{Deprecated_Inline}}
      -
      允许用户从节点的 {{DOMxRef("DOMUserData")}} 获得数据。
      +
      允许用户从节点的 {{DOMxRef("DOMUserData")}} 获得数据。
      {{DOMxRef("Node.hasAttributes()")}} {{Deprecated_Inline}}
      返回一个 {{jsxref("Boolean")}} 指定该元素是否存在某一属性。
      {{DOMxRef("Node.isSupported()")}} {{Deprecated_Inline}}
      @@ -251,7 +251,7 @@

      参数

      rootNode
      需要进行后代节点遍历的 Node 对象。
      callback
      -
      一个可选的回调函数,接受一个节点作为唯一参数。如果没有设定, eachNode 返回一个包含了 rootNode 所有后代节点以及 rootNode 自身的{{jsxref("Array")}}
      +
      一个可选的回调函数,接受一个节点作为唯一参数。如果没有设定, eachNode 返回一个包含了 rootNode 所有后代节点以及 rootNode 自身的{{jsxref("Array")}}

      使用示例

      @@ -281,7 +281,7 @@

      使用示例

      真实案例

      -

      下述例子反应了 eachNode 函数是如何在真实场景中使用的:搜索网页中的文本。我们使用一个包装函数 grep 去执行搜索:

      +

      下述例子反应了 eachNode 函数是如何在真实场景中使用的:搜索网页中的文本。我们使用一个包装函数 grep 去执行搜索:

      function grep(parentNode, pattern){
       	var matches = [];
      diff --git a/files/zh-cn/web/api/node/insertbefore/index.html b/files/zh-cn/web/api/node/insertbefore/index.html
      index f954e0dcf7c14e..b83567683a82bf 100644
      --- a/files/zh-cn/web/api/node/insertbefore/index.html
      +++ b/files/zh-cn/web/api/node/insertbefore/index.html
      @@ -27,13 +27,13 @@ 

      语法

        -
      • insertedNode 被插入节点 (newNode)
      • +
      • insertedNode 被插入节点 (newNode)
      • parentNode 新插入节点的父节点
      • newNode 用于插入的节点
      • referenceNode newNode 将要插在这个节点之前
      -

      如果 referenceNode 为 nullnewNode 将被插入到子节点的末尾

      +

      如果 referenceNodenullnewNode 将被插入到子节点的末尾

      referenceNode 引用节点不是可选参数——你必须显式传入一个 Node 或者 null。如果不提供节点或者传入无效值,在不同的浏览器中会有不同表现

      diff --git a/files/zh-cn/web/api/node/isconnected/index.html b/files/zh-cn/web/api/node/isconnected/index.html index 9953764bf4f69b..1f431587940a7d 100644 --- a/files/zh-cn/web/api/node/isconnected/index.html +++ b/files/zh-cn/web/api/node/isconnected/index.html @@ -13,7 +13,7 @@ ---
      {{APIRef("DOM")}}
      -

      isConnected 是 {{domxref("Node")}} 的一个只读属性接口。无论节点是否与 DOM 树连接,该属性都会返回一个{{domxref("Boolean", "布尔值")}}。例如: {{domxref("Document")}} 对象与一般 DOM 树连接,{{domxref("ShadowRoot")}} 与 shadow DOM 连接。

      +

      isConnected 是 {{domxref("Node")}} 的一个只读属性接口。无论节点是否与 DOM 树连接,该属性都会返回一个{{domxref("Boolean", "布尔值")}}。例如: {{domxref("Document")}} 对象与一般 DOM 树连接,{{domxref("ShadowRoot")}} 与 shadow DOM 连接。

      语法

      diff --git a/files/zh-cn/web/api/node/isdefaultnamespace/index.html b/files/zh-cn/web/api/node/isdefaultnamespace/index.html index 18f471a6993fe9..b5f6e3d4ea8507 100644 --- a/files/zh-cn/web/api/node/isdefaultnamespace/index.html +++ b/files/zh-cn/web/api/node/isdefaultnamespace/index.html @@ -21,5 +21,5 @@

      例子

      规范

      diff --git a/files/zh-cn/web/api/node/isequalnode/index.html b/files/zh-cn/web/api/node/isequalnode/index.html index f3d090d9864673..f4d2929eb398c0 100644 --- a/files/zh-cn/web/api/node/isequalnode/index.html +++ b/files/zh-cn/web/api/node/isequalnode/index.html @@ -12,7 +12,7 @@ ---
      {{ ApiRef("DOM") }}
      -

       Node.isEqualNode() 方法可以判断两个节点是否相等。当两个节点的类型相同,定义特征 (defining characteristics) 相同(对元素来说,即 id,孩子节点的数量等等),属性一致等,这两个节点就是相等的。一些具体的数据指出:多数时候的比较是根据节点的类型来的。

      +

      Node.isEqualNode() 方法可以判断两个节点是否相等。当两个节点的类型相同,定义特征 (defining characteristics) 相同(对元素来说,即 id,孩子节点的数量等等),属性一致等,这两个节点就是相等的。一些具体的数据指出:多数时候的比较是根据节点的类型来的。

      语法

      @@ -20,12 +20,12 @@

      语法

        -
      • otherNode: 比较是否相等的节点。
      • +
      • otherNode: 比较是否相等的节点。

      示例

      -

      在本例中,我们创建了三个 {{HTMLElement("div")}} 块。第一个和第三个 div 都拥有相同的内容和属性,第二个则不一样。然后我们运行 JavaScript ,使用 isEqualNode() 来比较这几个节点。

      +

      在本例中,我们创建了三个 {{HTMLElement("div")}} 块。第一个和第三个 div 都拥有相同的内容和属性,第二个则不一样。然后我们运行 JavaScript ,使用 isEqualNode() 来比较这几个节点。

      HTML

      diff --git a/files/zh-cn/web/api/node/lastchild/index.html b/files/zh-cn/web/api/node/lastchild/index.html index cdb358fd8224bd..d603e5da4b57b2 100644 --- a/files/zh-cn/web/api/node/lastchild/index.html +++ b/files/zh-cn/web/api/node/lastchild/index.html @@ -7,7 +7,7 @@ ---

      {{APIRef()}}

      概述

      -

      Node.lastChild 是一个只读属性,返回当前节点的最后一个子节点。如果父节点为一个元素节点,则子节点通常为一个元素节点,或一个文本节点,或一个注释节点。如果没有子节点,则返回 null

      +

      Node.lastChild 是一个只读属性,返回当前节点的最后一个子节点。如果父节点为一个元素节点,则子节点通常为一个元素节点,或一个文本节点,或一个注释节点。如果没有子节点,则返回 null

      语法

      var last_child = element.lastChild

      示例

      diff --git a/files/zh-cn/web/api/node/lookupnamespaceuri/index.html b/files/zh-cn/web/api/node/lookupnamespaceuri/index.html index 08de80ef0f1fd4..d0b3be7cf62e8f 100644 --- a/files/zh-cn/web/api/node/lookupnamespaceuri/index.html +++ b/files/zh-cn/web/api/node/lookupnamespaceuri/index.html @@ -13,5 +13,5 @@

      相关链接

      diff --git a/files/zh-cn/web/api/node/lookupprefix/index.html b/files/zh-cn/web/api/node/lookupprefix/index.html index b270b9fb45f8f0..35b3cda7ece6bb 100644 --- a/files/zh-cn/web/api/node/lookupprefix/index.html +++ b/files/zh-cn/web/api/node/lookupprefix/index.html @@ -13,5 +13,5 @@

      相关链接

      diff --git a/files/zh-cn/web/api/node/nextsibling/index.html b/files/zh-cn/web/api/node/nextsibling/index.html index 220160b684f5dd..fc175e7b91e91c 100644 --- a/files/zh-cn/web/api/node/nextsibling/index.html +++ b/files/zh-cn/web/api/node/nextsibling/index.html @@ -5,7 +5,7 @@ ---
      {{APIRef}}
      -

      Node.nextSibling 是一个只读属性,返回其父节点的 {{domxref("Node.childNodes","childNodes")}} 列表中紧跟在其后面的节点,如果指定的节点为最后一个节点,则返回 null

      +

      Node.nextSibling 是一个只读属性,返回其父节点的 {{domxref("Node.childNodes","childNodes")}} 列表中紧跟在其后面的节点,如果指定的节点为最后一个节点,则返回 null

      语法

      @@ -14,13 +14,13 @@

      语法

      备注

      -

       

      +

      Gecko 内核的浏览器会在源代码中标签内部有空白符的地方插入一个文本结点到文档中。因此,使用诸如 Node.firstChildNode.previousSibling 之类的方法可能会引用到一个空白符文本节点,而不是使用者所预期得到的节点。

      详情请参见 DOM 中的空白符W3C DOM 3 FAQ: 为什么一些文本节点是空的.

      -

       

      +

      示例

      @@ -54,7 +54,7 @@

      示例

      **************************************************/ -

      从上面的例子中可以看出,在两个标签之间(即一个元素的闭合标签之后,下一个元素的起始标签之前)有空白出现时,会有#text 节点被插入到 DOM 中。使用 document.write 语句插入的两个元素之间不会有空白。

      +

      从上面的例子中可以看出,在两个标签之间(即一个元素的闭合标签之后,下一个元素的起始标签之前)有空白出现时,会有#text 节点被插入到 DOM 中。使用 document.write 语句插入的两个元素之间不会有空白。

      The possible inclusion of text nodes in the DOM must be allowed for when traversing the DOM using nextSibling. See the resources in the Notes section.

      diff --git a/files/zh-cn/web/api/node/nodename/index.html b/files/zh-cn/web/api/node/nodename/index.html index 35f9d05179b3a4..d09e4e19286abf 100644 --- a/files/zh-cn/web/api/node/nodename/index.html +++ b/files/zh-cn/web/api/node/nodename/index.html @@ -6,7 +6,7 @@
      {{APIRef}}
      -  
      +
      概述

      返回当前节点的节点名称

      diff --git a/files/zh-cn/web/api/node/nodetype/index.html b/files/zh-cn/web/api/node/nodetype/index.html index 52ffe39eebe8c6..90291877794b97 100644 --- a/files/zh-cn/web/api/node/nodetype/index.html +++ b/files/zh-cn/web/api/node/nodetype/index.html @@ -13,18 +13,18 @@
      {{APIRef("DOM")}}
      -

      只读属性 Node.nodeType 表示的是该节点的类型。

      +

      只读属性 Node.nodeType 表示的是该节点的类型。

      描述

      -

      nodeType 属性可用来区分不同类型的节点,比如 {{domxref("Element", "元素")}}, {{domxref("Text", "文本")}} 和 {{domxref("Comment", "注释")}}。

      +

      nodeType 属性可用来区分不同类型的节点,比如 {{domxref("Element", "元素")}}, {{domxref("Text", "文本")}} 和 {{domxref("Comment", "注释")}}。

      语法

      var type = node.nodeType;
       
      -

      返回一个整数,其代表的是节点类型。其所有可能的值请参考 节点类型常量.

      +

      返回一个整数,其代表的是节点类型。其所有可能的值请参考 节点类型常量.

      常量

      @@ -47,7 +47,7 @@

      节点类型常量

      - + @@ -57,7 +57,7 @@

      节点类型常量

      - + @@ -72,7 +72,7 @@

      节点类型常量

      - + @@ -106,7 +106,7 @@

      已弃用的节点

      - + diff --git a/files/zh-cn/web/api/node/nodevalue/index.html b/files/zh-cn/web/api/node/nodevalue/index.html index e644b65124825f..de162dafdebe10 100644 --- a/files/zh-cn/web/api/node/nodevalue/index.html +++ b/files/zh-cn/web/api/node/nodevalue/index.html @@ -10,7 +10,7 @@ ---

      {{APIRef("DOM")}}

      -

      {{domxref("Node")}} 的 nodeValue 属性返回或设置当前节点的值。

      +

      {{domxref("Node")}} 的 nodeValue 属性返回或设置当前节点的值。

      语法

      diff --git a/files/zh-cn/web/api/node/ownerdocument/index.html b/files/zh-cn/web/api/node/ownerdocument/index.html index bfaa9602132e0d..2d244eb8f03aee 100644 --- a/files/zh-cn/web/api/node/ownerdocument/index.html +++ b/files/zh-cn/web/api/node/ownerdocument/index.html @@ -19,7 +19,7 @@

      语法

        -
      • document 是当前元素的 document 对象,其是当前元素的祖先。
      • +
      • document 是当前元素的 document 对象,其是当前元素的祖先。

      例子

      diff --git a/files/zh-cn/web/api/node/removechild/index.html b/files/zh-cn/web/api/node/removechild/index.html index 8d61a726272954..3d322c6ca09930 100644 --- a/files/zh-cn/web/api/node/removechild/index.html +++ b/files/zh-cn/web/api/node/removechild/index.html @@ -7,7 +7,7 @@ ---
      {{APIRef("DOM")}}
      -

      Node.removeChild() 方法从 DOM 中删除一个子节点。返回删除的节点。

      +

      Node.removeChild() 方法从 DOM 中删除一个子节点。返回删除的节点。

      语法

      @@ -36,7 +36,7 @@

      示例

      var top = document.getElementById("top"); var nested = document.getElementById("nested"); var garbage = top.removeChild(nested); -  //Test Case 2: the method throws the exception (2) + //Test Case 2: the method throws the exception (2) </script> <!--Sample HTML code--> @@ -48,9 +48,9 @@

      示例

      var top = document.getElementById("top"); var nested = document.getElementById("nested"); var garbage = top.removeChild(nested); -  // This first call remove correctly the node + // This first call remove correctly the node garbage = top.removeChild(nested); -  // Test Case 1: the method in the second call here, throws the exception (1) + // Test Case 1: the method in the second call here, throws the exception (1) </script>
      <!--示例 HTML 代码-->
      diff --git a/files/zh-cn/web/api/node/textcontent/index.html b/files/zh-cn/web/api/node/textcontent/index.html
      index 9bed26a409f86a..0570da4e4f8348 100644
      --- a/files/zh-cn/web/api/node/textcontent/index.html
      +++ b/files/zh-cn/web/api/node/textcontent/index.html
      @@ -10,10 +10,10 @@
       ---
       
      {{APIRef("DOM")}}
      -

      {{domxref ("Node")}} 接口的 textContent 属性表示一个节点及其后代的文本内容。

      +

      {{domxref ("Node")}} 接口的 textContent 属性表示一个节点及其后代的文本内容。

      -

      注意: textContent 和 {{domxref("HTMLElement.innerText")}} 容易混淆,但这两个属性在重要方面有不同之处 。

      +

      注意: textContent 和 {{domxref("HTMLElement.innerText")}} 容易混淆,但这两个属性在重要方面有不同之处

      语法

      @@ -23,44 +23,44 @@

      语法

      返回值

      -

      一个字符串或 null.

      +

      一个字符串或 null.

      描述

      -

      textContent 的值取决于具体情况:

      +

      textContent 的值取决于具体情况:

        -
      • 如果节点是一个 {{domxref("document")}},或者一个 DOCTYPE ,则 textContent 返回 null。 +
      • 如果节点是一个 {{domxref("document")}},或者一个 DOCTYPE ,则 textContent 返回 null
        -

        如果你要获取整个文档的文本以及 CDATA data ,可以使用 document.documentElement.textContent

        +

        如果你要获取整个文档的文本以及 CDATA data ,可以使用 document.documentElement.textContent

      • -
      • 如果节点是个 CDATA section、注释、processing instruction 或者 text nodetextContent 返回节点内部的文本内容,例如 {{domxref("Node.nodeValue")}}。
      • +
      • 如果节点是个 CDATA section、注释、processing instruction 或者 text nodetextContent 返回节点内部的文本内容,例如 {{domxref("Node.nodeValue")}}。
      • 对于其他节点类型,textContent 将所有子节点的 textContent 合并后返回,除了注释和 processing instructions。(如果该节点没有子节点的话,返回一个空字符串。)

      在节点上设置 textContent 属性的话,会删除它的所有子节点,并替换为一个具有给定值的文本节点。

      -

      与 innerText 的区别

      +

      innerText 的区别

      -

      不要被 Node.textContent 和 {{domxref("HTMLElement.innerText")}} 的区别搞混了。虽然名字看起来很相似,但有重要的不同之处:

      +

      不要被 Node.textContent 和 {{domxref("HTMLElement.innerText")}} 的区别搞混了。虽然名字看起来很相似,但有重要的不同之处:

        -
      • textContent 会获取所有元素的内容,包括 {{HTMLElement("script")}} 和 {{HTMLElement("style")}} 元素,然而 innerText 只展示给人看的元素。
      • -
      • textContent 会返回节点中的每一个元素。相反,innerText 受 CSS 样式的影响,并且不会返回隐藏元素的文本, +
      • textContent 会获取所有元素的内容,包括 {{HTMLElement("script")}} 和 {{HTMLElement("style")}} 元素,然而 innerText 只展示给人看的元素。
      • +
      • textContent 会返回节点中的每一个元素。相反,innerText 受 CSS 样式的影响,并且不会返回隐藏元素的文本,
          -
        • 此外,由于 innerText 受 CSS 样式的影响,它会触发回流( reflow )去确保是最新的计算样式。(回流在计算上可能会非常昂贵,因此应尽可能避免。)
        • +
        • 此外,由于 innerText 受 CSS 样式的影响,它会触发回流( reflow )去确保是最新的计算样式。(回流在计算上可能会非常昂贵,因此应尽可能避免。)
      • -
      • 与 textContent 不同的是,在 Internet Explorer (小于和等于 11 的版本) 中对 innerText 进行修改, 不仅会移除当前元素的子节点,而且还会永久性地破坏所有后代文本节点。在之后不可能再次将节点再次插入到任何其他元素或同一元素中。
      • +
      • textContent 不同的是,在 Internet Explorer (小于和等于 11 的版本) 中对 innerText 进行修改, 不仅会移除当前元素的子节点,而且还会永久性地破坏所有后代文本节点。在之后不可能再次将节点再次插入到任何其他元素或同一元素中。
      -

      与 innerHTML 的区别

      +

      innerHTML 的区别

      -

      正如其名称,{{domxref("Element.innerHTML")}} 返回 HTML。通常,为了在元素中检索或写入文本,人们使用 innerHTML。但是,textContent 通常具有更好的性能,因为文本不会被解析为 HTML。

      +

      正如其名称,{{domxref("Element.innerHTML")}} 返回 HTML。通常,为了在元素中检索或写入文本,人们使用 innerHTML。但是,textContent 通常具有更好的性能,因为文本不会被解析为 HTML。

      -

      此外,使用 textContent 可以防止 XSS 攻击

      +

      此外,使用 textContent 可以防止 XSS 攻击

      例子

      @@ -68,7 +68,7 @@

      例子

      <div id="divA">This is <span>some</span> text!</div>
      -

      你可以使用 textContent 去获取该元素的文本内容:

      +

      你可以使用 textContent 去获取该元素的文本内容:

      let text = document.getElementById('divA').textContent;
       // The text variable is now: 'This is some text!'
      @@ -141,5 +141,5 @@

      相关链接

      diff --git a/files/zh-cn/web/api/nodeiterator/index.html b/files/zh-cn/web/api/nodeiterator/index.html index e92318cfea54d4..52f90a9657683a 100644 --- a/files/zh-cn/web/api/nodeiterator/index.html +++ b/files/zh-cn/web/api/nodeiterator/index.html @@ -43,12 +43,12 @@

      属性

      - + - + @@ -65,17 +65,17 @@

      属性

      - + - + - + @@ -85,7 +85,7 @@

      属性

      - + @@ -95,7 +95,7 @@

      属性

      - +
      1
      ATTRIBUTE_NODE {{Deprecated_Inline}}ATTRIBUTE_NODE {{Deprecated_Inline}} 2
      4
      ENTITY_REFERENCE_NODE {{Deprecated_Inline}}ENTITY_REFERENCE_NODE {{Deprecated_Inline}} 5
      ENTITY_NODE {{Deprecated_Inline}}ENTITY_NODE {{Deprecated_Inline}} 6
      11
      NOTATION_NODE {{Deprecated_Inline}}NOTATION_NODE {{Deprecated_Inline}} 12
      Node.TEXT_NODE 3{{domxref("Element")}} 或者 {{domxref("Attr")}} 中实际的  {{domxref("Text", "文字")}}{{domxref("Element")}} 或者 {{domxref("Attr")}} 中实际的 {{domxref("Text", "文字")}}
      Node.CDATA_SECTION_NODE
      Node.PROCESSING_INSTRUCTION_NODE 7一个用于 XML 文档的 {{domxref("ProcessingInstruction")}} ,例如 <?xml-stylesheet ... ?> 声明。一个用于 XML 文档的 {{domxref("ProcessingInstruction")}} ,例如 <?xml-stylesheet ... ?> 声明。
      Node.COMMENT_NODE
      Node.DOCUMENT_TYPE_NODE 10描述文档类型的 {{domxref("DocumentType")}} 节点。例如 <!DOCTYPE html>  就是用于 HTML5 的。描述文档类型的 {{domxref("DocumentType")}} 节点。例如 <!DOCTYPE html> 就是用于 HTML5 的。
      Node.DOCUMENT_FRAGMENT_NODE
      Node.ENTITY_NODE 6一个 XML <!ENTITY ...>  节点。 在 {{SpecName("DOM4")}} 规范中被移除。一个 XML <!ENTITY ...> 节点。 在 {{SpecName("DOM4")}} 规范中被移除。
      Node.NOTATION_NODE
      NodeFilter.SHOW_CDATA_SECTION {{Deprecated_Inline}} 8显示{{ domxref("CDATASection") }} 节点。显示{{ domxref("CDATASection") }} 节点。
      NodeFilter.SHOW_COMMENT 128显示{{ domxref("Comment") }} 节点。显示{{ domxref("Comment") }} 节点。
      NodeFilter.SHOW_DOCUMENT
      NodeFilter.SHOW_DOCUMENT_TYPE 512显示{{ domxref("DocumentType") }} 节点。显示{{ domxref("DocumentType") }} 节点。
      NodeFilter.SHOW_ELEMENT 1显示{{ domxref("Element") }} 节点。显示{{ domxref("Element") }} 节点。
      NodeFilter.SHOW_ENTITY {{Deprecated_Inline}} 32显示 {{ domxref("Entity") }} 节点。只有当用一个 {{ domxref("Entity") }} 节点作为它的根节点来创建一个 {{ domxref("NodeIterator") }} 时才有意义; 在这种情况下,  {{ domxref("Entity") }} 节点会出现在迭代或遍历的首位。因为 {{ domxref("Entity") }} 永远不会是其它节点的子节点,当遍历整个文档树时它们不会出现。显示 {{ domxref("Entity") }} 节点。只有当用一个 {{ domxref("Entity") }} 节点作为它的根节点来创建一个 {{ domxref("NodeIterator") }} 时才有意义; 在这种情况下, {{ domxref("Entity") }} 节点会出现在迭代或遍历的首位。因为 {{ domxref("Entity") }} 永远不会是其它节点的子节点,当遍历整个文档树时它们不会出现。
      NodeFilter.SHOW_ENTITY_REFERENCE {{Deprecated_Inline}}
      NodeFilter.SHOW_NOTATION {{Deprecated_Inline}} 2048显示 {{ domxref("Notation") }} 节点。只有当用一个 {{ domxref("Notation") }} 节点作为它的根节点时来创建一个 {{ domxref("NodeIterator") }} 才有意义; 在这种情况下,  {{ domxref("Notation") }} 节点会出现在迭代或遍历的首位。因为 {{ domxref("Notation") }}  永远不会是其它节点的子节点,当遍历整个文档树时它们不会出现。显示 {{ domxref("Notation") }} 节点。只有当用一个 {{ domxref("Notation") }} 节点作为它的根节点时来创建一个 {{ domxref("NodeIterator") }} 才有意义; 在这种情况下, {{ domxref("Notation") }} 节点会出现在迭代或遍历的首位。因为 {{ domxref("Notation") }} 永远不会是其它节点的子节点,当遍历整个文档树时它们不会出现。
      NodeFilter.SHOW_PROCESSING_INSTRUCTION
      NodeFilter.SHOW_TEXT 4显示{{ domxref("Text") }} 节点。显示{{ domxref("Text") }} 节点。
      @@ -105,7 +105,7 @@

      属性

      {{domxref("NodeIterator.expandEntityReferences")}} {{readonlyInline}} {{deprecated_inline}}
      Is a {{domxref("Boolean")}} indicating if, when discarding an {{domxref("EntityReference")}} its whole sub-tree must be discarded at the same time.
      {{domxref("NodeIterator.referenceNode")}} {{readonlyInline}} {{experimental_inline() }}
      -
      返回当前遍历到的 {{domxref("Node")}} .
      +
      返回当前遍历到的 {{domxref("Node")}} .
      {{domxref("NodeIterator.pointerBeforeReferenceNode")}} {{readonlyInline}} {{ experimental_inline() }}
      Returns a {{domxref("Boolean")}} flag that indicates whether the {{domxref("NodeIterator")}} is anchored before, the flag being true, or after, the flag being false, the anchor node.
      @@ -116,9 +116,9 @@

      方法

      {{domxref("NodeIterator.detach()")}} {{Deprecated_Inline}}
      -
      这个方法不是必需的。它现在什么也不做. 之前用来告诉引擎,NodeIterator 已经不会再使用,现在已经不做任何事情。
      +
      这个方法不是必需的。它现在什么也不做. 之前用来告诉引擎,NodeIterator 已经不会再使用,现在已经不做任何事情。
      {{domxref("NodeIterator.previousNode()")}}
      -
      返回前一个 {{domxref("Node")}},如果不存在则返回 null.
      +
      返回前一个 {{domxref("Node")}},如果不存在则返回 null.
      {{domxref("NodeIterator.nextNode()")}}
      返回下一个 {{domxref("Node")}}, 如果不存在则返回null .
      diff --git a/files/zh-cn/web/api/nodelist/entries/index.html b/files/zh-cn/web/api/nodelist/entries/index.html index 3dffc97d4ede7b..68b1c1fbd3a887 100644 --- a/files/zh-cn/web/api/nodelist/entries/index.html +++ b/files/zh-cn/web/api/nodelist/entries/index.html @@ -60,7 +60,7 @@

      浏览器兼容性

      {{Compat("api.NodeList.entries")}} -

       

      +

      相关链接

      diff --git a/files/zh-cn/web/api/nodelist/foreach/index.html b/files/zh-cn/web/api/nodelist/foreach/index.html index 2b8928ce00c356..ff8277a5b01568 100644 --- a/files/zh-cn/web/api/nodelist/foreach/index.html +++ b/files/zh-cn/web/api/nodelist/foreach/index.html @@ -5,7 +5,7 @@ ---

      {{APIRef("DOM")}}

      -

      {{domxref("NodeList")}}接口的 forEach() 方法按插入顺序为列表中的每个值对调用一次参数中给定的回调。

      +

      {{domxref("NodeList")}}接口的 forEach() 方法按插入顺序为列表中的每个值对调用一次参数中给定的回调。

      语法

      @@ -17,7 +17,7 @@

      参数

      callback
      -

      为 someNodeList的每一个元素执行函数。它接受以下三个参数:

      +

      someNodeList的每一个元素执行函数。它接受以下三个参数:

      currentValue
      @@ -25,11 +25,11 @@

      参数

      currentIndex {{Optional_inline}}
      someNodeList中的currentValue所对应的索引值。
      listObj {{Optional_inline}}
      -
      someNodeList 在 forEach() 方法中所属的 NodeList 对象。
      +
      someNodeListforEach() 方法中所属的 NodeList 对象。
      thisArg {{Optional_inline}}
      -
      传递 callback 的值一般用{{jsxref("this")}}值。
      +
      传递 callback 的值一般用{{jsxref("this")}}值。

      返回值

      @@ -85,7 +85,7 @@

      Polyfill

      NodeList.prototype.forEach = Array.prototype.forEach; }
    -

    上面的代码是大部分浏览器实现的 NodeList.prototype.forEach()(例如 Chrome)。

    +

    上面的代码是大部分浏览器实现的 NodeList.prototype.forEach()(例如 Chrome)。

    Specifications

    diff --git a/files/zh-cn/web/api/nodelist/index.html b/files/zh-cn/web/api/nodelist/index.html index acc52a61fbdfc3..839c0fcd92f719 100644 --- a/files/zh-cn/web/api/nodelist/index.html +++ b/files/zh-cn/web/api/nodelist/index.html @@ -13,9 +13,9 @@

    NodeList 对象是节点的集合,通常是由属性,如{{domxref("Node.childNodes")}} 和 方法,如{{domxref("document.querySelectorAll")}} 返回的。

    -

    NodeList 不是一个数组,是一个类似数组的对象 (Like Array Object)。虽然 NodeList 不是一个数组,但是可以使用 forEach() 来迭代。你还可以使用 {{jsxref("Array.from()")}} 将其转换为数组。

    +

    NodeList 不是一个数组,是一个类似数组的对象 (Like Array Object)。虽然 NodeList 不是一个数组,但是可以使用 forEach() 来迭代。你还可以使用 {{jsxref("Array.from()")}} 将其转换为数组。

    -

    不过,有些浏览器较为过时,没有实现 NodeList.forEach() 和 Array.from()。你可以用 {{jsxref("Array.forEach()", "Array.prototype.forEach()")}} 来规避这一问题。请查看该例

    +

    不过,有些浏览器较为过时,没有实现 NodeList.forEach()Array.from()。你可以用 {{jsxref("Array.forEach()", "Array.prototype.forEach()")}} 来规避这一问题。请查看该例

    在一些情况下,NodeList 是一个实时集合,也就是说,如果文档中的节点树发生变化,NodeList 也会随之变化。例如,{{domxref("Node.childNodes")}} 是实时的:

    @@ -26,7 +26,7 @@ parent.appendChild(document.createElement('div')); console.log(child_nodes.length); // 但此时的输出是“3” -

    在其他情况下,NodeList 是一个静态集合,也就意味着随后对文档对象模型的任何改动都不会影响集合的内容。比如  {{domxref("document.querySelectorAll")}} 就会返回一个静态 NodeList

    +

    在其他情况下,NodeList 是一个静态集合,也就意味着随后对文档对象模型的任何改动都不会影响集合的内容。比如 {{domxref("document.querySelectorAll")}} 就会返回一个静态 NodeList

    最好牢记这种不同,尤其是在当你选择 NodeList 中所有项遍历的方式,或缓存它的长度的时候。

    diff --git a/files/zh-cn/web/api/nodelist/length/index.html b/files/zh-cn/web/api/nodelist/length/index.html index 2e3c66c6729999..78355be3f9956f 100644 --- a/files/zh-cn/web/api/nodelist/length/index.html +++ b/files/zh-cn/web/api/nodelist/length/index.html @@ -9,7 +9,7 @@

    摘要

    -

    返回 NodeList 集合中子节点数量

    +

    返回 NodeList 集合中子节点数量

    语法

    @@ -17,7 +17,7 @@

    语法

      -
    • numItems 是一个整数,表示 NodeList 子节点的数量。
    • +
    • numItems 是一个整数,表示 NodeList 子节点的数量。

    例子

    diff --git a/files/zh-cn/web/api/notification/badge/index.html b/files/zh-cn/web/api/notification/badge/index.html index ce37f73994c045..cfdeb9d2aa6fb0 100644 --- a/files/zh-cn/web/api/notification/badge/index.html +++ b/files/zh-cn/web/api/notification/badge/index.html @@ -10,7 +10,7 @@ ---

    {{SeeCompatTable}}{{APIRef("Notifications API")}}

    -

    当没有足够的空间来显示通知本身时,{{domxref("Notification")}}接口的 badge 属性返回用于表示通知的图像 URL。

    +

    当没有足够的空间来显示通知本身时,{{domxref("Notification")}}接口的 badge 属性返回用于表示通知的图像 URL。

    语法

    diff --git a/files/zh-cn/web/api/notification/body/index.html b/files/zh-cn/web/api/notification/body/index.html index 0e4729bcf1d8e7..d288b7a4a4a60f 100644 --- a/files/zh-cn/web/api/notification/body/index.html +++ b/files/zh-cn/web/api/notification/body/index.html @@ -5,7 +5,7 @@ ---

    {{APIRef("Web Notifications")}}

    -

     {{domxref("Notification")}} 的只读属性 body 返回了构造函数{{domxref("Notification")}}实例化时,options 所使用的 body 值。

    +

    {{domxref("Notification")}} 的只读属性 body 返回了构造函数{{domxref("Notification")}}实例化时,options 所使用的 body 值。

    {{AvailableInWorkers}}

    @@ -20,7 +20,7 @@

    示例

    -

    在 Emogotchi demo (see source code) 中,我们在激活一个桌面通知时,调用了spawnNotification()函数—函数被传入了指定的参数 body、icon、title , 创建了一个必选对象传入{{domxref("Notification.Notification","Notification()")}} 构造函数创建了一个实例。

    +

    Emogotchi demo (see source code) 中,我们在激活一个桌面通知时,调用了spawnNotification()函数—函数被传入了指定的参数 body、icon、title , 创建了一个必选对象传入{{domxref("Notification.Notification","Notification()")}} 构造函数创建了一个实例。

    function spawnNotification(theBody,theIcon,theTitle) {
       var options = {
    diff --git a/files/zh-cn/web/api/notification/click_event/index.html b/files/zh-cn/web/api/notification/click_event/index.html
    index 53b9298202fc43..f5f29a93462800 100644
    --- a/files/zh-cn/web/api/notification/click_event/index.html
    +++ b/files/zh-cn/web/api/notification/click_event/index.html
    @@ -8,7 +8,7 @@
     ---
     

    {{APIRef("Web Notifications")}}

    -

    {{domxref("Notification")}} 接口的 onclick 属性指定一个事件侦听器来接收 {{event("click")}} 事件。

    +

    {{domxref("Notification")}} 接口的 onclick 属性指定一个事件侦听器来接收 {{event("click")}} 事件。

    当用户点击一个显示的{{domxref("Notification")}}时,会发生这些事件。

    @@ -17,7 +17,7 @@

    Syntax

    Notification.onclick = function(event) { ... };
     
    -

    该方法的默认行为是将焦点移到与该通知相关联的 browsing context 的窗口。如果你不希望这样,可以在 event 对象上调用 preventDefault().

    +

    该方法的默认行为是将焦点移到与该通知相关联的 browsing context 的窗口。如果你不希望这样,可以在 event 对象上调用 preventDefault().

    Examples

    diff --git a/files/zh-cn/web/api/notification/close/index.html b/files/zh-cn/web/api/notification/close/index.html index f14885c492ef2f..a776c61906bfff 100644 --- a/files/zh-cn/web/api/notification/close/index.html +++ b/files/zh-cn/web/api/notification/close/index.html @@ -7,7 +7,7 @@ ---
    {{APIRef("Web Notifications")}}
    -

    {{domxref("Notification")}} 接口的 close() 的方法用于关闭一个以前显示的通知。

    +

    {{domxref("Notification")}} 接口的 close() 的方法用于关闭一个以前显示的通知。

    Syntax

    @@ -23,16 +23,16 @@

    Returns

    Examples

    -

    以下是 Emogotchi 示例在线演示)中的一段代码 ,定义了一个简单的函数 spawnNotification,当 spawnNotification 被调用时会创建一个对象并生成一个新的 Notification。在函数的最后,它在{{domxref("WindowTimers.setTimeout","setTimeout()")}} 中调用了 close() 函数来实现在 4s 后关闭 Notification(有些浏览器会自动关闭弹出的 Notification,但有些不是,例如 Chrome,Opera)。还要注意 bind() 的使用,来确保 close() 方法绑定到 Notification 的实例上。

    +

    以下是 Emogotchi 示例在线演示)中的一段代码 ,定义了一个简单的函数 spawnNotification,当 spawnNotification 被调用时会创建一个对象并生成一个新的 Notification。在函数的最后,它在{{domxref("WindowTimers.setTimeout","setTimeout()")}} 中调用了 close() 函数来实现在 4s 后关闭 Notification(有些浏览器会自动关闭弹出的 Notification,但有些不是,例如 Chrome,Opera)。还要注意 bind() 的使用,来确保 close() 方法绑定到 Notification 的实例上。

    function spawnNotification(theBody,theIcon,theTitle) {
    -  var options = {
    -      body: theBody,
    -      icon: theIcon
    -  }
    +  var options = {
    +      body: theBody,
    +      icon: theIcon
    +  }
     
    -  var n = new Notification(theTitle,options);
    -  setTimeout(n.close.bind(n), 4000);
    +  var n = new Notification(theTitle,options);
    +  setTimeout(n.close.bind(n), 4000);
     }
     
    diff --git a/files/zh-cn/web/api/notification/close_event/index.html b/files/zh-cn/web/api/notification/close_event/index.html index 66305150d0ff4f..606ff56fccad93 100644 --- a/files/zh-cn/web/api/notification/close_event/index.html +++ b/files/zh-cn/web/api/notification/close_event/index.html @@ -10,7 +10,7 @@

    Summary

    -

    {{domxref("Notification")}}  接口的 onclose属性指定一个事件侦听器来接收 {{event("close")}}事件。

    +

    {{domxref("Notification")}} 接口的 onclose属性指定一个事件侦听器来接收 {{event("close")}}事件。

    当一个{{domxref("Notification")}}关闭时,会发生这些事件。

    diff --git a/files/zh-cn/web/api/notification/data/index.html b/files/zh-cn/web/api/notification/data/index.html index 95367b2012373d..eddcae778e4bc5 100644 --- a/files/zh-cn/web/api/notification/data/index.html +++ b/files/zh-cn/web/api/notification/data/index.html @@ -13,7 +13,7 @@

    附加语法糖:关于克隆对象的速度研究。

    -

    https://dassur.ma/things/deep-copy/ 

    +

    https://dassur.ma/things/deep-copy/

    博客作者认为目前(参考)最快的 object 克隆、复制方式。

    diff --git a/files/zh-cn/web/api/notification/dir/index.html b/files/zh-cn/web/api/notification/dir/index.html index d9922b61b22d60..87d52a4ff9ecfe 100644 --- a/files/zh-cn/web/api/notification/dir/index.html +++ b/files/zh-cn/web/api/notification/dir/index.html @@ -5,7 +5,7 @@ ---

    {{APIRef("Web Notifications")}}

    -

    {{domxref("Notification")}} 的`dir`是一个只读属性,它表示 Notification 中显示的文本方向 会{{domxref("Notification.Notification","Notification()")}} 构造函数里制定的`dir` 属性的值来设定。

    +

    {{domxref("Notification")}} 的`dir`是一个只读属性,它表示 Notification 中显示的文本方向 会{{domxref("Notification.Notification","Notification()")}} 构造函数里制定的`dir` 属性的值来设定。

    {{AvailableInWorkers}}

    @@ -16,10 +16,10 @@

    语法

    -

    一个表示文本方向的{{domxref("DOMString")}}变量。 可能的取值为:

    +

    一个表示文本方向的{{domxref("DOMString")}}变量。 可能的取值为:

      -
    • auto: 继承浏览器的语言设置里制定的方向 (默认)
    • +
    • auto: 继承浏览器的语言设置里制定的方向 (默认)
    • ltr: 从左到右
    • rtl : 从右到左
    diff --git a/files/zh-cn/web/api/notification/error_event/index.html b/files/zh-cn/web/api/notification/error_event/index.html index 356968a6d4dfe1..2364774387c6d6 100644 --- a/files/zh-cn/web/api/notification/error_event/index.html +++ b/files/zh-cn/web/api/notification/error_event/index.html @@ -10,11 +10,11 @@

    Summary

    -

    {{domxref("Notification")}}  接口的 onerror 属性指定一个事件侦听器来接收 {{event("error")}} 事件。

    +

    {{domxref("Notification")}} 接口的 onerror 属性指定一个事件侦听器来接收 {{event("error")}} 事件。

    当一个 {{domxref("Notification")}} 发生错误时,会发生这些事件(在许多情况下,一个错误阻止显示通知)。

    -

     

    +

    Syntax

    diff --git a/files/zh-cn/web/api/notification/icon/index.html b/files/zh-cn/web/api/notification/icon/index.html index 94510d44c58d6a..e22962de9a4aba 100644 --- a/files/zh-cn/web/api/notification/icon/index.html +++ b/files/zh-cn/web/api/notification/icon/index.html @@ -23,7 +23,7 @@

    示例

    -

    在此示例中,当我们想要发出一个通知时,我们运行一个简单的 spawnNotification() 函数——这是传递参数来指定我们想要的主体、图标和标题,然后它创建必要的options对象,并使用{{domxref("Notification.Notification","Notification()")}}构造函数来触发通知。

    +

    在此示例中,当我们想要发出一个通知时,我们运行一个简单的 spawnNotification() 函数——这是传递参数来指定我们想要的主体、图标和标题,然后它创建必要的options对象,并使用{{domxref("Notification.Notification","Notification()")}}构造函数来触发通知。

    function spawnNotification(theBody,theIcon,theTitle) {
       var options = {
    diff --git a/files/zh-cn/web/api/notification/image/index.html b/files/zh-cn/web/api/notification/image/index.html
    index d8c77f673ad4dd..681da21daa7e76 100644
    --- a/files/zh-cn/web/api/notification/image/index.html
    +++ b/files/zh-cn/web/api/notification/image/index.html
    @@ -5,7 +5,7 @@
     ---
     

    {{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}

    -

     image 是{{domxref("Notification")}} 接口的只读属性,包含了需要显示在通知信息里的图片的 URL,可通过{{domxref("Notification.Notification","Notification()")}}构造函数的 image 选项指定。

    +

    image 是{{domxref("Notification")}} 接口的只读属性,包含了需要显示在通知信息里的图片的 URL,可通过{{domxref("Notification.Notification","Notification()")}}构造函数的 image 选项指定。

    语法

    diff --git a/files/zh-cn/web/api/notification/index.html b/files/zh-cn/web/api/notification/index.html index cfc13717441e86..8cedf68773fe0c 100644 --- a/files/zh-cn/web/api/notification/index.html +++ b/files/zh-cn/web/api/notification/index.html @@ -15,7 +15,7 @@ -

    Notifications API 的通知接口用于向用户配置和显示桌面通知。

    +

    Notifications API通知接口用于向用户配置和显示桌面通知。

    构造方法

    @@ -47,7 +47,7 @@

    静态属性

    {{domxref("Notification.permission")}} {{readonlyinline}}
    -
    一个用于表明当前通知显示授权状态的字符串。可能的值包括:denied (用户拒绝了通知的显示), granted (用户允许了通知的显示), 或 default (因为不知道用户的选择,所以浏览器的行为与 denied 时相同).
    +
    一个用于表明当前通知显示授权状态的字符串。可能的值包括:denied (用户拒绝了通知的显示), granted (用户允许了通知的显示), 或 default (因为不知道用户的选择,所以浏览器的行为与 denied 时相同).

    实例属性

    @@ -128,12 +128,12 @@

    Example

    // 否则我们需要向用户获取权限 else if (Notification.permission !== "denied") { -  Notification.requestPermission().then(function (permission) { -  // 如果用户接受权限,我们就可以发起一条消息 -  if (permission === "granted") { -  var notification = new Notification("Hi there!"); -  } -  }); + Notification.requestPermission().then(function (permission) { + // 如果用户接受权限,我们就可以发起一条消息 + if (permission === "granted") { + var notification = new Notification("Hi there!"); + } + }); } @@ -170,6 +170,6 @@

    请参见

    https://codepen.io/xgqfrms/pen/vxaQKe


    -  

    +

    diff --git a/files/zh-cn/web/api/notification/notification/index.html b/files/zh-cn/web/api/notification/notification/index.html index 817aed65f712bd..fe48187f3631d5 100644 --- a/files/zh-cn/web/api/notification/notification/index.html +++ b/files/zh-cn/web/api/notification/notification/index.html @@ -7,7 +7,7 @@ ---

    {{APIRef("Web Notifications")}}

    -

    Notification() 构造函数创建一个新的{{domxref("Notification")}}对象实例。

    +

    Notification() 构造函数创建一个新的{{domxref("Notification")}}对象实例。

    {{AvailableInWorkers}}

    @@ -23,15 +23,15 @@

    参数

    options {{optional_inline}}
    options 对象包含应用于通知的任何自定义设置选项。选项有:
      -
    • dir: 显示通知的方向。默认是 auto,跟随浏览器语言设置行为,你也可以通过设置 ltr 和 rtl 的值来覆盖该行为(虽然大多数浏览器似乎忽略这些设置)
    • -
    • lang: 通知的语言,如使用代表一个BCP 47 语言标签的  {{domxref("DOMString")}} 指定的。请参阅 Sitepoint ISO 2 字母语言代码页面,以获得简单的参考。
    • +
    • dir: 显示通知的方向。默认是 auto,跟随浏览器语言设置行为,你也可以通过设置 ltr 和 rtl 的值来覆盖该行为(虽然大多数浏览器似乎忽略这些设置)
    • +
    • lang: 通知的语言,如使用代表一个BCP 47 语言标签的 {{domxref("DOMString")}} 指定的。请参阅 Sitepoint ISO 2 字母语言代码页面,以获得简单的参考。
    • badge: 一个 {{domxref("USVString")}} 包含用于表示通知的图像的 URL,当没有足够的空间来显示通知本身时。
    • body: 一个 {{domxref("DOMString")}} 表示通知的正文,将显示在标题下方。
    • -
    • tag:  一个 {{domxref("DOMString")}} 代表通知的 一个识别标签。
    • -
    • icon:  一个 {{domxref("USVString")}} 包含要在通知中显示的图标的 URL。
    • +
    • tag: 一个 {{domxref("DOMString")}} 代表通知的 一个识别标签。
    • +
    • icon: 一个 {{domxref("USVString")}} 包含要在通知中显示的图标的 URL。
    • image: 一个 {{domxref("USVSTring")}}包含要在通知中显示的图像的 URL。
    • data: 您想要与通知相关联的任意数据。这可以是任何数据类型。
    • -
    • vibrate: 一个振动模式 vibration pattern 设备的振动硬件在通知触发时发出。
    • +
    • vibrate: 一个振动模式 vibration pattern 设备的振动硬件在通知触发时发出。
    • renotify: 一个 {{domxref("Boolean")}} 指定在新通知替换旧通知后是否应通知用户。默认值为 false,这意味着它们不会被通知。
    • requireInteraction: 表示通知应保持有效,直到用户点击或关闭它,而不是自动关闭。默认值为 false。
    @@ -45,7 +45,7 @@

    参数

  • sticky: 一个 {{domxref("Boolean")}} 指明通知是否应该是“粘”, 即不易被用户清理。默认值为 false,这意味着它不会粘。
  • -

     

    +

    diff --git a/files/zh-cn/web/api/notification/permission/index.html b/files/zh-cn/web/api/notification/permission/index.html index 96542a5ba8cfc0..645770d1ddf9a8 100644 --- a/files/zh-cn/web/api/notification/permission/index.html +++ b/files/zh-cn/web/api/notification/permission/index.html @@ -20,7 +20,7 @@

    Value

    • granted: 用户已经明确的授予了显示通知的权限。.
    • denied: 用户已经明确的拒绝了显示通知的权限。
    • -
    • default: 用户还未被询问是否授权; 这种情况下权限将视为 denied.
    • +
    • default: 用户还未被询问是否授权; 这种情况下权限将视为 denied.

    Examples

    diff --git a/files/zh-cn/web/api/notification/renotify/index.html b/files/zh-cn/web/api/notification/renotify/index.html index e41160c02358f4..c4df4fad6146c5 100644 --- a/files/zh-cn/web/api/notification/renotify/index.html +++ b/files/zh-cn/web/api/notification/renotify/index.html @@ -24,7 +24,7 @@

    例子

    var options = {
       body: 'Do you like my body?',
    -  tag: 'renotify',
    +  tag: 'renotify',
       renotify: true
     }
     
    @@ -34,7 +34,7 @@ 

    例子

    使用注意

    -

    renotify 覆盖通知选项必须搭配 tag 标签选项进行使用,否则会收到错误通知。

    +

    renotify 覆盖通知选项必须搭配 tag 标签选项进行使用,否则会收到错误通知。

    Notifications which set the renotify flag must specify a non-empty tag.
    diff --git a/files/zh-cn/web/api/notification/requestpermission/index.html b/files/zh-cn/web/api/notification/requestpermission/index.html index 4572ef7eeaf54f..81680f69136707 100644 --- a/files/zh-cn/web/api/notification/requestpermission/index.html +++ b/files/zh-cn/web/api/notification/requestpermission/index.html @@ -7,7 +7,7 @@ ---

    {{APIRef("Web Notifications")}}

    -

    {{domxref("Notification")}} 接口的 requestPermission() 方法请求用户当前来源的权限以显示通知。

    +

    {{domxref("Notification")}} 接口的 requestPermission() 方法请求用户当前来源的权限以显示通知。

    语法

    @@ -28,7 +28,7 @@

    参数

    返回值

    -

    一个 {{jsxref("Promise")}} ,将解析为一个 {{domxref("DOMString")}} ,它是用户对权限请求的选择。这个字符串可以是 granted(被授予), denied(被拒绝) 或者 default(默认)。

    +

    一个 {{jsxref("Promise")}} ,将解析为一个 {{domxref("DOMString")}} ,它是用户对权限请求的选择。这个字符串可以是 granted(被授予), denied(被拒绝) 或者 default(默认)。

    实例

    diff --git a/files/zh-cn/web/api/notification/requireinteraction/index.html b/files/zh-cn/web/api/notification/requireinteraction/index.html index ca97f064fe4dfd..43d55e319576c0 100644 --- a/files/zh-cn/web/api/notification/requireinteraction/index.html +++ b/files/zh-cn/web/api/notification/requireinteraction/index.html @@ -9,10 +9,10 @@ ---

    {{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}

    -

    {{domxref("Notification")}} 接口的 requireInteraction 属性是只读属性,它返回一个 {{jsxref("Boolean")}}(布尔值),指示在用户点击或关闭通知前,通知应该保持活动状态,而不是自动关闭。

    +

    {{domxref("Notification")}} 接口的 requireInteraction 属性是只读属性,它返回一个 {{jsxref("Boolean")}}(布尔值),指示在用户点击或关闭通知前,通知应该保持活动状态,而不是自动关闭。

    -

    注意: 此属性可以在创建通知时通过在 {{domxref("Notification.Notification()")}} 构造器的 options 参数接收的对象上设置 requireInteraction 属性为 true 来进行设置

    +

    注意: 此属性可以在创建通知时通过在 {{domxref("Notification.Notification()")}} 构造器的 options 参数接收的对象上设置 requireInteraction 属性为 true 来进行设置

    语法

    diff --git a/files/zh-cn/web/api/notification/show_event/index.html b/files/zh-cn/web/api/notification/show_event/index.html index ba2a0da292bfb0..9b4bda7ff4eb22 100644 --- a/files/zh-cn/web/api/notification/show_event/index.html +++ b/files/zh-cn/web/api/notification/show_event/index.html @@ -10,7 +10,7 @@

    Summary

    -

    {{domxref("Notification")}} 接口的 onshow 属性指定一个事件侦听器来接收 {{event("show")}}事件。

    +

    {{domxref("Notification")}} 接口的 onshow 属性指定一个事件侦听器来接收 {{event("show")}}事件。

    当一个 {{domxref("Notification")}} 显示时,会发生这些事件。

    diff --git a/files/zh-cn/web/api/notifications_api/index.html b/files/zh-cn/web/api/notifications_api/index.html index 8617608fd92e64..89df55fbfd12b1 100644 --- a/files/zh-cn/web/api/notifications_api/index.html +++ b/files/zh-cn/web/api/notifications_api/index.html @@ -7,11 +7,11 @@ ---

    {{DefaultAPISidebar("Web Notifications")}}

    -

    Notifications API 允许网页控制向最终用户显示系统通知 —这些都在顶级浏览上下文视口之外,因此即使用户已经切换标签页或移动到不同的应用程序,也可以显示。该 API 被设计成与不同平台上的现有通知系统兼容。

    +

    Notifications API 允许网页控制向最终用户显示系统通知 —这些都在顶级浏览上下文视口之外,因此即使用户已经切换标签页或移动到不同的应用程序,也可以显示。该 API 被设计成与不同平台上的现有通知系统兼容。

    概念和用法

    -

    在支持该接口的平台上,显示一个系统通知通常涉及两件事。首先,用户需要授予当前源的权限以显示系统通知,这通常在应用或站点初始化时,使用{{domxref("Notification.requestPermission()")}} 方法来完成。

    +

    在支持该接口的平台上,显示一个系统通知通常涉及两件事。首先,用户需要授予当前源的权限以显示系统通知,这通常在应用或站点初始化时,使用{{domxref("Notification.requestPermission()")}} 方法来完成。

    这将产生一个请求对话框,沿着以下几行:

    @@ -21,17 +21,17 @@

    概念和用法

    从这里,用户可以选择允许来自此来源的通知,阻止来自此来源的通知,或不选择此点。一旦做出选择,该设置通常将持续用于当前会话。

    -

    :从 Firefox 44 开始, 通知(Notifications)和推送(Push)的权限已合并。如果为通知授予权限,推送也将启用。

    +

    :从 Firefox 44 开始, 通知(Notifications)和推送(Push)的权限已合并。如果为通知授予权限,推送也将启用。

    -

    接下来,使用 {{domxref("Notification.Notification","Notification()")}} 构造函数创建一个新通知。这个方法可以传入两个参数。这必须传递一个标题参数,并可以选择性地传递一个选项对象来指定选项,如文本方向,正文,显示图标,通知声音播放,等等。

    +

    接下来,使用 {{domxref("Notification.Notification","Notification()")}} 构造函数创建一个新通知。这个方法可以传入两个参数。这必须传递一个标题参数,并可以选择性地传递一个选项对象来指定选项,如文本方向,正文,显示图标,通知声音播放,等等。

    {{AvailableInWorkers}}

    -

    此外, Notifications API 规范对  ServiceWorker API指定了多个添加,以允许 service workers 发送通知。

    +

    此外, Notifications API 规范对 ServiceWorker API指定了多个添加,以允许 service workers 发送通知。

    -

    :想了解怎么在你的应用里使用通知接口,请阅读  Using the Notifications API

    +

    :想了解怎么在你的应用里使用通知接口,请阅读 Using the Notifications API

    接口(Notifications interfaces)

    @@ -45,7 +45,7 @@

    附加参数(Service worke
    {{domxref("ServiceWorkerRegistration")}}
    -
    该对象包含 {{domxref("ServiceWorkerRegistration.showNotification()")}} 和 {{domxref("ServiceWorkerRegistration.getNotifications()")}} 方法,用于控制通知的显示。
    +
    该对象包含 {{domxref("ServiceWorkerRegistration.showNotification()")}} 和 {{domxref("ServiceWorkerRegistration.getNotifications()")}} 方法,用于控制通知的显示。
    {{domxref("ServiceWorkerGlobalScope")}}
    该对象包含 {{domxref("ServiceWorkerGlobalScope.onnotificationclick")}} 事件处理函数,用于通知被点击的时候触发绑定的事件处理函数。
    {{domxref("NotificationEvent")}}
    @@ -62,7 +62,7 @@

    浏览器兼容性

    Firefox OS permissions

    -

    当你在 Firefox OS app 中使用通知时,请确保在 manifest 文件中添加了desktop-notification 权限 。 Notifications can be used at any permission level, hosted or above:

    +

    当你在 Firefox OS app 中使用通知时,请确保在 manifest 文件中添加了desktop-notification 权限 。 Notifications can be used at any permission level, hosted or above:

    "permissions": {
       "desktop-notification": {}
    diff --git a/files/zh-cn/web/api/notifications_api/using_the_notifications_api/index.html b/files/zh-cn/web/api/notifications_api/using_the_notifications_api/index.html
    index 10f5c2ce787cee..6fbf8d054e106f 100644
    --- a/files/zh-cn/web/api/notifications_api/using_the_notifications_api/index.html
    +++ b/files/zh-cn/web/api/notifications_api/using_the_notifications_api/index.html
    @@ -23,7 +23,7 @@
     
     

    系统通知系统当然会因平台和浏览器而异,但无需担心,通知 API 被编写为通用的,足以与大多数系统通知系统兼容。

    -

    Web Notifications API 使页面可以发出通知,通知将被显示在页面之外的系统层面上(通常使用操作系统的标准通知机制,但是在不同的平台和浏览器上的表现会有差异)。这个功能使  web 应用可以向用户发送信息,即使应用处于空闲状态。最明显的用例之一是一个网页版电子邮件应用程序,每当用户收到了一封新的电子邮件都需要通知用户,即使用户正在使用另一个应用程序。

    +

    Web Notifications API 使页面可以发出通知,通知将被显示在页面之外的系统层面上(通常使用操作系统的标准通知机制,但是在不同的平台和浏览器上的表现会有差异)。这个功能使 web 应用可以向用户发送信息,即使应用处于空闲状态。最明显的用例之一是一个网页版电子邮件应用程序,每当用户收到了一封新的电子邮件都需要通知用户,即使用户正在使用另一个应用程序。

    要显示一条通知,你需要先请求适当的权限,然后你可以实例化一个 {{domxref("Notification")}} 实例:

    diff --git a/files/zh-cn/web/api/notifyaudioavailableevent/index.html b/files/zh-cn/web/api/notifyaudioavailableevent/index.html index f6c9986d7c9e04..abf928bcf5e7f0 100644 --- a/files/zh-cn/web/api/notifyaudioavailableevent/index.html +++ b/files/zh-cn/web/api/notifyaudioavailableevent/index.html @@ -7,13 +7,13 @@

    非标准的、过时的,NotifyAudioAvailableEvent事件接口定义当音频缓冲器满时发送到音频元素的事件。

    -

     

    +

    属性

    -
    frameBuffer {{ReadOnlyInline}}
    +
    frameBuffer {{ReadOnlyInline}}
    {{jsxref("Float32Array")}}包含从解码音频获得的原始 32 位浮点音频数据(例如,原始数据被发送到音频硬件与编码音频)。数据是一系列音频样本,每个样本每个音频通道包含一个 32 位值。默认情况下,所有音频帧被标准化为包含 1024 个样本,但如果用户使用mozFrameBufferLength属性设置了不同长度,则可以是 512 到 16384 个样本之间的任何长度。
    time
    一个浮点值,代表音频轨道开始后的frameBuffer数组中第一个样本的时间(以秒为单位)。
    diff --git a/files/zh-cn/web/api/oes_vertex_array_object/index.html b/files/zh-cn/web/api/oes_vertex_array_object/index.html index 6eb196d7c1f994..0857e518d597b0 100644 --- a/files/zh-cn/web/api/oes_vertex_array_object/index.html +++ b/files/zh-cn/web/api/oes_vertex_array_object/index.html @@ -7,15 +7,15 @@

    拓展OES_vertex_array_objectWebGL API的一部分,它提供了顶点数组对象 (VAOs) 可以用来封装顶点数组的状态。These objects keep pointers to vertex data and provide names for different sets of vertex data.

    -

    WebGL extensions are available using the {{domxref("WebGLRenderingContext.getExtension()")}} method. 更多详细信息, 参见 Using Extensions in the WebGL tutorial.

    +

    WebGL extensions are available using the {{domxref("WebGLRenderingContext.getExtension()")}} method. 更多详细信息, 参见 Using Extensions in the WebGL tutorial.

    -

    Availability: 此拓展只在{{domxref("WebGLRenderingContext", "WebGL1", "", 1)}}中有效。在{{domxref("WebGL2RenderingContext", "WebGL2", "", 1)}}当中, 这些功能可以被直接使用,且去掉了前缀 "OES"。

    +

    Availability: 此拓展只在{{domxref("WebGLRenderingContext", "WebGL1", "", 1)}}中有效。在{{domxref("WebGL2RenderingContext", "WebGL2", "", 1)}}当中, 这些功能可以被直接使用,且去掉了前缀 "OES"。

    常量

    -

    这个拓展提供了一个新的常量, 它可以在{{domxref("WebGLRenderingContext.getParameter()", "gl.getParameter()")}} 当中作为一个参数传递:

    +

    这个拓展提供了一个新的常量, 它可以在{{domxref("WebGLRenderingContext.getParameter()", "gl.getParameter()")}} 当中作为一个参数传递:

    ext.VERTEX_ARRAY_BINDING_OES
    @@ -37,7 +37,7 @@

    函数

    {{domxref("OES_vertex_array_object.isVertexArrayOES()", "ext.isVertexArrayOES()")}}
    -

    如果参数是一个 {{domxref("WebGLVertexArrayObject")}}则返回 true 。

    +

    如果参数是一个 {{domxref("WebGLVertexArrayObject")}}则返回 true

    {{domxref("OES_vertex_array_object.bindVertexArrayOES()", "ext.bindVertexArrayOES()")}}
    diff --git a/files/zh-cn/web/api/offlineaudiocontext/index.html b/files/zh-cn/web/api/offlineaudiocontext/index.html index d3c3894ebc0416..45812990aba11c 100644 --- a/files/zh-cn/web/api/offlineaudiocontext/index.html +++ b/files/zh-cn/web/api/offlineaudiocontext/index.html @@ -5,13 +5,13 @@ ---
    {{APIRef("Web Audio API")}}
    -

    OfflineAudioContext 接口是一个 {{domxref("AudioContext")}} 的接口,代表由多个 {{domxref("AudioNode")}} 连接在一起构成的音频处理图。与 {{domxref("AudioContext")}} 标准相反的是, OfflineAudioContext 不在硬件设备渲染音频;相反,它尽可能快地生成音频,输出一个 {{domxref("AudioBuffer")}} 作为结果。

    +

    OfflineAudioContext 接口是一个 {{domxref("AudioContext")}} 的接口,代表由多个 {{domxref("AudioNode")}} 连接在一起构成的音频处理图。与 {{domxref("AudioContext")}} 标准相反的是, OfflineAudioContext 不在硬件设备渲染音频;相反,它尽可能快地生成音频,输出一个 {{domxref("AudioBuffer")}} 作为结果。

    构造函数

    {{domxref("OfflineAudioContext.OfflineAudioContext()")}}
    -
    创建一个新的 OfflineAudioContext 实例。
    +
    创建一个新的 OfflineAudioContext 实例。

    属性

    @@ -32,7 +32,7 @@

    事件处理程序

    方法

    -

    从父级 {{domxref("AudioContext")}} 和 {{domxref("EventTarget")}} 获取方法的实现。

    +

    从父级 {{domxref("AudioContext")}} 和 {{domxref("EventTarget")}} 获取方法的实现。

    {{domxref("OfflineAudioContext.resume()")}}
    @@ -45,14 +45,14 @@

    方法

    例子

    -

    这个简单的例子中,我们声明了 {{domxref("AudioContext")}} 和 OfflineAudioContext 对象。我们使用 AudioContext 去加载一个 XHR({{domxref("AudioContext.decodeAudioData")}})获取的音轨,然后使用 OfflineAudioContext 去渲染音频并得到一个 into an {{domxref("AudioBufferSourceNode")}},并播放这个音轨。在离线音频处理图建立后,你需要去使用 {{domxref("OfflineAudioContext.startRendering")}} 来渲染它成为 {{domxref("AudioBuffer")}}。

    +

    这个简单的例子中,我们声明了 {{domxref("AudioContext")}} 和 OfflineAudioContext 对象。我们使用 AudioContext 去加载一个 XHR({{domxref("AudioContext.decodeAudioData")}})获取的音轨,然后使用 OfflineAudioContext 去渲染音频并得到一个 into an {{domxref("AudioBufferSourceNode")}},并播放这个音轨。在离线音频处理图建立后,你需要去使用 {{domxref("OfflineAudioContext.startRendering")}} 来渲染它成为 {{domxref("AudioBuffer")}}。

    -

    当 startRendering() 的 Promise 解决后,渲染也完成了,在 Promise 内可以获得输出的 AudioBuffer。

    +

    startRendering() 的 Promise 解决后,渲染也完成了,在 Promise 内可以获得输出的 AudioBuffer。

    -

    在此刻,我们创建了一个另外的音频上下文,在它里面创建了一个 {{domxref("AudioBufferSourceNode")}},并且设置它的 buffer 为之前生成的 Promise 中的 AudioBuffer。这样它就可以作为简单标准音频图来播放了

    +

    在此刻,我们创建了一个另外的音频上下文,在它里面创建了一个 {{domxref("AudioBufferSourceNode")}},并且设置它的 buffer 为之前生成的 Promise 中的 AudioBuffer。这样它就可以作为简单标准音频图来播放了

    -

    注意: 为了获取可以运行的例子,请看我们在 Github 的仓库 offline-audio-context-promise (也可以看到 源代码。)

    +

    注意: 为了获取可以运行的例子,请看我们在 Github 的仓库 offline-audio-context-promise (也可以看到 源代码。)

    // 定义一个在线或者离线的音频上下文
    diff --git a/files/zh-cn/web/api/offlineaudiocontext/length/index.html b/files/zh-cn/web/api/offlineaudiocontext/length/index.html
    index b2d1952d9c91c6..5d0651bf890769 100644
    --- a/files/zh-cn/web/api/offlineaudiocontext/length/index.html
    +++ b/files/zh-cn/web/api/offlineaudiocontext/length/index.html
    @@ -5,7 +5,7 @@
     ---
     

    {{SeeCompatTable}}{{ APIRef("Web Audio API") }}

    -

    {{domxref("OfflineAudioContext")}} 接口的 length 属性返回一个代表采样帧的缓冲区大小的整数。

    +

    {{domxref("OfflineAudioContext")}} 接口的 length 属性返回一个代表采样帧的缓冲区大小的整数。

    语法

    diff --git a/files/zh-cn/web/api/offlineaudiocontext/offlineaudiocontext/index.html b/files/zh-cn/web/api/offlineaudiocontext/offlineaudiocontext/index.html index d6a25b9c0d4861..a7239123d5965a 100644 --- a/files/zh-cn/web/api/offlineaudiocontext/offlineaudiocontext/index.html +++ b/files/zh-cn/web/api/offlineaudiocontext/offlineaudiocontext/index.html @@ -22,10 +22,10 @@

    参数

    采样帧每一秒的线性音频数据的采样率。该实现必须支持在 22050 到 96000 之间的采样率,44100 是最经常用到的采样率。
    -

    这里有个重要的警告,你可以通过不带参数的使用 new AudioContext() 构造函数创建一个新的 {{domxref("AudioContext")}},但是 OfflineAudioContext() 构造函数必须带上三个参数。当你通过 {{domxref("AudioContext.createBuffer")}} 方法创建一个新的{{domxref("AudioBuffer")}} 时,你也是需要做一样的事情。想要知道更多信息,请阅读我们的基本概念指南的 音频片段:帧,样本和声道

    +

    这里有个重要的警告,你可以通过不带参数的使用 new AudioContext() 构造函数创建一个新的 {{domxref("AudioContext")}},但是 OfflineAudioContext() 构造函数必须带上三个参数。当你通过 {{domxref("AudioContext.createBuffer")}} 方法创建一个新的{{domxref("AudioBuffer")}} 时,你也是需要做一样的事情。想要知道更多信息,请阅读我们的基本概念指南的 音频片段:帧,样本和声道

    -

    注意:像普通的 AudioContextOfflineAudioContext 可以成为事件的目标,因此它的实现是 {{domxref("EventTarget")}} 接口。

    +

    注意:像普通的 AudioContextOfflineAudioContext 可以成为事件的目标,因此它的实现是 {{domxref("EventTarget")}} 接口。

    例子

    @@ -41,7 +41,7 @@

    例子

    -

    备注: 想要获取完整的例子,请看我们在 Github 仓库的 offline-audio-context-promise (也可以看 源代码 )

    +

    备注: 想要获取完整的例子,请看我们在 Github 仓库的 offline-audio-context-promise (也可以看 源代码

    规范

    diff --git a/files/zh-cn/web/api/offlineaudiocontext/suspend/index.html b/files/zh-cn/web/api/offlineaudiocontext/suspend/index.html index 5d94487442fc7f..6241ebb5561e18 100644 --- a/files/zh-cn/web/api/offlineaudiocontext/suspend/index.html +++ b/files/zh-cn/web/api/offlineaudiocontext/suspend/index.html @@ -5,7 +5,7 @@ ---

    {{ APIRef("Web Audio API") }}

    -

    The suspend() method of the {{ domxref("OfflineAudioContext") }} interface schedules a suspension of the time progression in the audio context at the specified time and returns a promise. This is generally useful at the time of manipulating the audio graph synchronously on OfflineAudioContext.

    +

    The suspend() method of the {{ domxref("OfflineAudioContext") }} interface schedules a suspension of the time progression in the audio context at the specified time and returns a promise. This is generally useful at the time of manipulating the audio graph synchronously on OfflineAudioContext.

    Note that the maximum precision of suspension is the size of the render quantum and the specified suspension time will be rounded down to the nearest render quantum boundary. For this reason, it is not allowed to schedule multiple suspends at the same quantized frame. Also scheduling should be done while the context is not running to ensure the precise suspension.

    diff --git a/files/zh-cn/web/api/offscreencanvas/index.html b/files/zh-cn/web/api/offscreencanvas/index.html index ec065effa7c3ea..f4d4348669418b 100644 --- a/files/zh-cn/web/api/offscreencanvas/index.html +++ b/files/zh-cn/web/api/offscreencanvas/index.html @@ -44,7 +44,7 @@

    方法

    {{domxref("OffscreenCanvas.transferToImageBitmap()")}}
    -
    OffscreenCanvas 最近渲染的图像创建一个 {{domxref("ImageBitmap")}} 对象。
    +
    OffscreenCanvas 最近渲染的图像创建一个 {{domxref("ImageBitmap")}} 对象。

    例子

    @@ -81,9 +81,9 @@

    同步显示 OffscreenCanvas two.transferFromImageBitmap(bitmapTwo);

    -

     异步显示 OffscreenCanvas 生成的帧

    +

    异步显示 OffscreenCanvas 生成的帧

    -

    另一种使用 OffscreenCanvas API 的方式,是在一个{{HTMLElement("canvas")}}元素上调用{{domxref("HTMLCanvasElement.transferControlToOffscreen", "transferControlToOffscreen()")}}, 也可以在worker或主线程,上调用,这将从主线程的{{domxref("HTMLCanvasElement")}}对象返回一个OffscreenCanvas 对象。调用{{domxref("OffscreenCanvas.getContext", "getContext()")}} 会从这个 OffscreenCanvas 获取一个RenderingContext

    +

    另一种使用 OffscreenCanvas API 的方式,是在一个{{HTMLElement("canvas")}}元素上调用{{domxref("HTMLCanvasElement.transferControlToOffscreen", "transferControlToOffscreen()")}}, 也可以在worker或主线程,上调用,这将从主线程的{{domxref("HTMLCanvasElement")}}对象返回一个OffscreenCanvas 对象。调用{{domxref("OffscreenCanvas.getContext", "getContext()")}} 会从这个 OffscreenCanvas 获取一个RenderingContext

    main.js (主线程代码):

    @@ -110,14 +110,14 @@

     异步显示 OffscreenC

    也可以在 worker 中使用 requestAnimationFrame

    onmessage = function(evt) {
    -  const canvas = evt.data.canvas;
    -  const gl = canvas.getContext("webgl");
    -
    -  function render(time) {
    -    // ... some drawing using the gl context ...
    -    requestAnimationFrame(render);
    -  }
    -  requestAnimationFrame(render);
    +  const canvas = evt.data.canvas;
    +  const gl = canvas.getContext("webgl");
    +
    +  function render(time) {
    +    // ... some drawing using the gl context ...
    +    requestAnimationFrame(render);
    +  }
    +  requestAnimationFrame(render);
     };

    规范

    diff --git a/files/zh-cn/web/api/offscreencanvas/offscreencanvas/index.html b/files/zh-cn/web/api/offscreencanvas/offscreencanvas/index.html index a773bff086785f..21e0304d2706f7 100644 --- a/files/zh-cn/web/api/offscreencanvas/offscreencanvas/index.html +++ b/files/zh-cn/web/api/offscreencanvas/offscreencanvas/index.html @@ -26,7 +26,7 @@

    参数

    示例

    -

    创建一个离屏 Canvas 并且初始一个 WebGL 上下文:

    +

    创建一个离屏 Canvas 并且初始一个 WebGL 上下文:

    var offscreen = new OffscreenCanvas(256, 256);
     var gl = offscreen.getContext("webgl");
    diff --git a/files/zh-cn/web/api/origin/index.html b/files/zh-cn/web/api/origin/index.html
    index b127bf6aadb149..1cedc343efa846 100644
    --- a/files/zh-cn/web/api/origin/index.html
    +++ b/files/zh-cn/web/api/origin/index.html
    @@ -10,7 +10,7 @@
     ---
     {{APIRef()}}{{SeeCompatTable}}
       
    -

    WindowOrWorkerGlobalScope 接口的 origin 只读属性返回全局范围的 origin, 序列化为一个字符串。

    +

    WindowOrWorkerGlobalScope 接口的 origin 只读属性返回全局范围的 origin, 序列化为一个字符串。

    Syntax

    diff --git a/files/zh-cn/web/api/oscillatornode/detune/index.html b/files/zh-cn/web/api/oscillatornode/detune/index.html index 9d3d1c8ab7537d..88b35e2ac639d7 100644 --- a/files/zh-cn/web/api/oscillatornode/detune/index.html +++ b/files/zh-cn/web/api/oscillatornode/detune/index.html @@ -6,7 +6,7 @@

    {{ APIRef("Web Audio API") }}

    -

    {{ domxref("OscillatorNode") }} 的 detune 属性的接口是 a-rate {{domxref("AudioParam")}} ,代表振荡频率的失谐量(cents)。

    +

    {{ domxref("OscillatorNode") }} 的 detune 属性的接口a-rate {{domxref("AudioParam")}} ,代表振荡频率的失谐量(cents)。

    语法

    @@ -15,16 +15,16 @@

    语法

    oscillator.detune.value = 100; // value in cents
    -

    Note: 虽然返回的 AudioParam 是只读的,但是它表示的值不是。

    +

    Note: 虽然返回的 AudioParam 是只读的,但是它表示的值不是。

    -

     值

    +

    -

    一个 a-rate {{domxref("AudioParam")}} 的值

    +

    一个 a-rate {{domxref("AudioParam")}} 的值

    示例

    -

    下面的例子使用 {{ domxref("AudioContext") }} 创建了一个 oscillator node。 这是已经在运行的例子,查看 Violent Theremin demo (see app.js 是相关源码)。

    +

    下面的例子使用 {{ domxref("AudioContext") }} 创建了一个 oscillator node。 这是已经在运行的例子,查看 Violent Theremin demo (see app.js 是相关源码)。

    // create web audio api context
     var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
    diff --git a/files/zh-cn/web/api/oscillatornode/frequency/index.html b/files/zh-cn/web/api/oscillatornode/frequency/index.html
    index 5eec96b8d76c1e..a420b55f33107a 100644
    --- a/files/zh-cn/web/api/oscillatornode/frequency/index.html
    +++ b/files/zh-cn/web/api/oscillatornode/frequency/index.html
    @@ -6,7 +6,7 @@
     

    {{ APIRef("Web Audio API") }}

    -

    {{ domxref("OscillatorNode") }} 的 frequency 属性的接口a-rate {{domxref("AudioParam")}},表示振荡的频率,单位 HZ(hertz)

    +

    {{ domxref("OscillatorNode") }} 的 frequency 属性的接口a-rate {{domxref("AudioParam")}},表示振荡的频率,单位 HZ(hertz)

    语法

    @@ -15,16 +15,16 @@

    语法

    oscillator.frequency.value = 440; // value in hertz
    -

    Note: 虽然返回的 AudioParam 是只读的,但是它表示的值不是。

    +

    Note: 虽然返回的 AudioParam 是只读的,但是它表示的值不是。

    -

    一个 a-rate {{domxref("AudioParam")}} 的值

    +

    一个 a-rate {{domxref("AudioParam")}} 的值

    示例

    -

    下列示例使用 {{ domxref("AudioContext") }} 创建了一个 oscillator node. 这是一个用于展示的示例,查看 Violent Theremin demo (see app.js 是相关代码).

    +

    下列示例使用 {{ domxref("AudioContext") }} 创建了一个 oscillator node. 这是一个用于展示的示例,查看 Violent Theremin demo (see app.js 是相关代码).

    // create web audio api context
     var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
    diff --git a/files/zh-cn/web/api/oscillatornode/index.html b/files/zh-cn/web/api/oscillatornode/index.html
    index 1e580459247e26..9a6e7936260103 100644
    --- a/files/zh-cn/web/api/oscillatornode/index.html
    +++ b/files/zh-cn/web/api/oscillatornode/index.html
    @@ -5,9 +5,9 @@
     ---
     

    {{APIRef("Web Audio API")}}

    -

    OscillatorNode 接口表示一个振荡器,它产生一个周期的波形信号(如正弦波)。它是一个 {{domxref("AudioScheduledSourceNode")}} 音频处理模块, 这个模块会生成一个指定频率的波形信号(即一个固定的音调)

    +

    OscillatorNode 接口表示一个振荡器,它产生一个周期的波形信号(如正弦波)。它是一个 {{domxref("AudioScheduledSourceNode")}} 音频处理模块, 这个模块会生成一个指定频率的波形信号(即一个固定的音调)

    -

    一个 OscillatorNode 对象是通过 {{domxref("AudioContext.createOscillator()")}} 方法创建的。它总是有一个输出,但没有输入。它的基础属性(定义见 {{domxref("AudioNode")}} )默认如下:

    +

    一个 OscillatorNode 对象是通过 {{domxref("AudioContext.createOscillator()")}} 方法创建的。它总是有一个输出,但没有输入。它的基础属性(定义见 {{domxref("AudioNode")}} )默认如下:

    @@ -38,40 +38,40 @@

    构造函数

    {{domxref("OscillatorNode.OscillatorNode", "OscillatorNode()")}}
    -
    创建一个 OscillatorNode 对象的示例,为 node属性提供可选的一个定义默认值的对象.  如果默认值可接受,你可以简单地调用{{domxref("AudioContext.createOscillator()")}}工厂方法。
    +
    创建一个 OscillatorNode 对象的示例,为 node属性提供可选的一个定义默认值的对象. 如果默认值可接受,你可以简单地调用{{domxref("AudioContext.createOscillator()")}}工厂方法。

    属性

    -

    继承自父类 {{domxref("AudioScheduledSourceNode")}},并添加下列属性:

    +

    继承自父类 {{domxref("AudioScheduledSourceNode")}},并添加下列属性:

    {{domxref("OscillatorNode.frequency")}}
    -
    一个 a-rate {{domxref("AudioParam")}} 对象的属性代表了振动的频率(单位为赫兹 hertz) (虽然返回的AudioParam 是只读的,但是它所表示的值是可以修改的)。 默认值是 440 Hz (基本的中 A 音高).
    +
    一个 a-rate {{domxref("AudioParam")}} 对象的属性代表了振动的频率(单位为赫兹 hertz) (虽然返回的AudioParam 是只读的,但是它所表示的值是可以修改的)。 默认值是 440 Hz (基本的中 A 音高).
    {{domxref("OscillatorNode.detune")}}
    -
    一个 a-rate {{domxref("AudioParam")}} 对象的属性代表振动的音高微调(单位是 cent 音分) (虽然返回的AudioParam 是只读的,但是它所表示的值是可以修改的).。默认值是 0。
    +
    一个 a-rate {{domxref("AudioParam")}} 对象的属性代表振动的音高微调(单位是 cent 音分) (虽然返回的AudioParam 是只读的,但是它所表示的值是可以修改的).。默认值是 0。
    {{domxref("OscillatorNode.type")}}
    -
    一个字符串,决定 OscillatorNode 播放的声音的周期波形; 它的值可以是基础值中的一个或者用户使用 {{domxref("PeriodicWave")}}。不同的波形可以产生不同的声调。 基础值有 "sine", "square", "sawtooth", "triangle" and "custom". 默认值是"sine"。
    +
    一个字符串,决定 OscillatorNode 播放的声音的周期波形; 它的值可以是基础值中的一个或者用户使用 {{domxref("PeriodicWave")}}。不同的波形可以产生不同的声调。 基础值有 "sine", "square", "sawtooth", "triangle" and "custom". 默认值是"sine"。

    方法

    -

    继承自父级, {{domxref("AudioScheduledSourceNode")}}, 自有方法如下:

    +

    继承自父级, {{domxref("AudioScheduledSourceNode")}}, 自有方法如下:

    {{domxref("OscillatorNode.setPeriodicWave()")}}
    -
    设置一个 {{domxref("PeriodicWave")}} ,它描述了一个周期的波形常常替代标准波形之一; 调用这个方法来设置用户自定义的波形。它取代了已经废弃了的 {{domxref("OscillatorNode.setWaveTable()")}} 方法。
    +
    设置一个 {{domxref("PeriodicWave")}} ,它描述了一个周期的波形常常替代标准波形之一; 调用这个方法来设置用户自定义的波形。它取代了已经废弃了的 {{domxref("OscillatorNode.setWaveTable()")}} 方法。

    示例

    -

    下面示例展示了 {{ domxref("AudioContext") }} 的基本使用 来创建一个 oscillator 节点 并使用它来播放音乐。这是已经在运行的例子,可以看这里 Violent Theremin demo (see app.js 是相关代码).

    +

    下面示例展示了 {{ domxref("AudioContext") }} 的基本使用 来创建一个 oscillator 节点 并使用它来播放音乐。这是已经在运行的例子,可以看这里 Violent Theremin demo (see app.js 是相关代码).

    // create web audio api context
     var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
    diff --git a/files/zh-cn/web/api/oscillatornode/oscillatornode/index.html b/files/zh-cn/web/api/oscillatornode/oscillatornode/index.html
    index 8b256a6a41cb9c..a7d4244e499b56 100644
    --- a/files/zh-cn/web/api/oscillatornode/oscillatornode/index.html
    +++ b/files/zh-cn/web/api/oscillatornode/oscillatornode/index.html
    @@ -5,9 +5,9 @@
     ---
     

    {{APIRef("Web Audio API")}}{{SeeCompatTable}}

    -

    OscillatorNode() 构造器创建了一个新的 {{domxref("OscillatorNode")}} 对象,也是 {{domxref("AudioNode")}} 类型,表示一个周期的波形,例如正弦波,用来在不同的对象中定义其可选属性的值

    +

    OscillatorNode() 构造器创建了一个新的 {{domxref("OscillatorNode")}} 对象,也是 {{domxref("AudioNode")}} 类型,表示一个周期的波形,例如正弦波,用来在不同的对象中定义其可选属性的值

    -

    如果属性的默认值可接受,也可以选择使用 {{domxref("AudioContext.createOscillator()")}} 工厂方法构造 {{domxref("OscillatorNode")}} 对象。

    +

    如果属性的默认值可接受,也可以选择使用 {{domxref("AudioContext.createOscillator()")}} 工厂方法构造 {{domxref("OscillatorNode")}} 对象。

    语法

    @@ -22,11 +22,11 @@

    参数

    一个用来给 oscillator node 的属性指定值得对象,该对象中省略的属性都将采用默认值
    type
    -
    oscillator node 产生的波形的形状。可用的值有 'sine', 'square', 'sawtooth', 'triangle' 和 'custom',默认值是'sine'。
    +
    oscillator node 产生的波形的形状。可用的值有 'sine', 'square', 'sawtooth', 'triangle' 和 'custom',默认值是'sine'。
    detune
    -
    音高微调值(cents)可以对给定的频率值进行偏移。 默认值是 0.
    +
    音高微调值(cents)可以对给定的频率值进行偏移。 默认值是 0.
    frequency
    -
    周期性波形的频率 (in {{interwiki("wikipedia", "hertz")}})。 默认值是 440.
    +
    周期性波形的频率 (in {{interwiki("wikipedia", "hertz")}})。 默认值是 440.
    periodicWave
    任意的周期性波形,通过一个 {{domxref("PeriodicWave")}} 对象描述。
    diff --git a/files/zh-cn/web/api/oscillatornode/setperiodicwave/index.html b/files/zh-cn/web/api/oscillatornode/setperiodicwave/index.html index f704ccb8ab1152..322bfc7783ebab 100644 --- a/files/zh-cn/web/api/oscillatornode/setperiodicwave/index.html +++ b/files/zh-cn/web/api/oscillatornode/setperiodicwave/index.html @@ -5,7 +5,7 @@ ---

    {{ APIRef("Web Audio API") }}

    -

     {{ domxref("OscillatorNode") }} 接口的 setPeriodicWave() 方法用来指向 {{domxref("PeriodicWave")}},PeriodicWave 定义了一个周期性波形能够形成 oscillator 的输出,当{{domxref("OscillatorNode.type", "type")}} 是 custom 的时候。

    +

    {{ domxref("OscillatorNode") }} 接口的 setPeriodicWave() 方法用来指向 {{domxref("PeriodicWave")}},PeriodicWave 定义了一个周期性波形能够形成 oscillator 的输出,当{{domxref("OscillatorNode.type", "type")}} 是 custom 的时候。

    该方法取代了废弃的 {{ domxref("OscillatorNode.setWaveTable()")}}.

    @@ -19,7 +19,7 @@

    参数

    wave
    -
    一个 {{domxref("PeriodicWave")}} 对象, 表示特定的波形用来形成 oscillator 的输出。
    +
    一个 {{domxref("PeriodicWave")}} 对象, 表示特定的波形用来形成 oscillator 的输出。

    返回值

    @@ -28,7 +28,7 @@

    返回值

    示例

    -

    下面示例说明了 createPeriodicWave() 方法的简单使用, 从一个周期波形中重新生成了一个正弦波形。

    +

    下面示例说明了 createPeriodicWave() 方法的简单使用, 从一个周期波形中重新生成了一个正弦波形。

    var real = new Float32Array(2);
     var imag = new Float32Array(2);
    @@ -53,7 +53,7 @@ 

    示例

    这里,我们用两个值创建一个{{domxref("PeriodicWave")}}。第一个值是直流偏移,是 oscillator 开始的时候的值。这里 0 很合适,因为我们想要在 [-1.0; 1.0] 这个范围的中间值开始。

    -

    第二个和后面的值是正弦和余弦内容。可以把它看做傅里叶变换的结果,使得可以从时间阈值得到频率阈值。这里通过 createPeriodicWave() 方法,可以指定频率,并且浏览器执行逆傅里叶变换来得到一个时间阈值缓冲。Here, we only set one component at full volume (1.0) on the fundamental tone, so we get a sine wave.

    +

    第二个和后面的值是正弦和余弦内容。可以把它看做傅里叶变换的结果,使得可以从时间阈值得到频率阈值。这里通过 createPeriodicWave() 方法,可以指定频率,并且浏览器执行逆傅里叶变换来得到一个时间阈值缓冲。Here, we only set one component at full volume (1.0) on the fundamental tone, so we get a sine wave.

    规范

    diff --git a/files/zh-cn/web/api/page_visibility_api/index.html b/files/zh-cn/web/api/page_visibility_api/index.html index 34b84a2f011936..4e29ad3ead42ac 100644 --- a/files/zh-cn/web/api/page_visibility_api/index.html +++ b/files/zh-cn/web/api/page_visibility_api/index.html @@ -30,7 +30,7 @@

    使用情景

  • 当设备进入待机模式时,网站想要关闭设备声音(用户按下电源键关闭屏幕)
  • -

    开发者在过去使用不完善的代理来检测页面的可见性。比如,通过监听 {{event("blur")}} 和 {{event("focus")}} 事件来了解页面是否处于活动状态,但是它并没有告诉你页面是对用户隐藏的。页面可见性 API 解决了这个问题。

    +

    开发者在过去使用不完善的代理来检测页面的可见性。比如,通过监听 {{event("blur")}} 和 {{event("focus")}} 事件来了解页面是否处于活动状态,但是它并没有告诉你页面是对用户隐藏的。页面可见性 API 解决了这个问题。

    注意:虽然{{domxref("GlobalEventHandlers.onblur", "onblur")}}和{{domxref("GlobalEventHandlers.onfocus", "onfocus")}}会告诉你用户是否切换窗口,但不一定意味着它是隐藏的。当用户切换选项卡或最小化包含选项卡的浏览器窗口时,页面才会隐藏。

    @@ -46,7 +46,7 @@

    制定有助于后台页面
  • Budget-based background timeout throttling is now available in modern browsers (Firefox 58+, Chrome 57+), placing an additional limit on background timer CPU usage. This operates in a similar way across modern browsers, with the details being as follows:
    • In Firefox, windows in background tabs each have their own time budget in milliseconds — a max and a min value of +50 ms and -150 ms, respectively. Chrome is very similar except that the budget is specified in seconds.
    • -
    • Windows are subjected to throttling after 30 seconds, with the same throttling delay rules as specified for window timers (again, see Reasons for delays longer than specified). In Chrome, this value is 10 seconds.
    • +
    • Windows are subjected to throttling after 30 seconds, with the same throttling delay rules as specified for window timers (again, see Reasons for delays longer than specified). In Chrome, this value is 10 seconds.
    • Timer tasks are only permitted when the budget is non-negative.
    • Once a timer's code has finished running, the duration of time it took to execute is subtracted from its window's timeout budget.
    • The budget regenerates at a rate of 10 ms per second, in both Firefox and Chrome.
    • @@ -58,13 +58,13 @@

      制定有助于后台页面
      • Tabs which are playing audio are considered foreground and aren’t throttled.
      • -
      • Tabs running code that's using real-time network connections (WebSockets and WebRTC) go unthrottled in order to avoid closing these connections timing out and getting unexpectedly closed.
      • -
      • IndexedDB processes are also left unthrottled in order to avoid timeouts.
      • +
      • Tabs running code that's using real-time network connections (WebSockets and WebRTC) go unthrottled in order to avoid closing these connections timing out and getting unexpectedly closed.
      • +
      • IndexedDB processes are also left unthrottled in order to avoid timeouts.

      示例

      -

      看一个 在线的例子 (带声音的视频)

      +

      看一个 在线的例子 (带声音的视频)

      在此例中,当你切换到另一个标签时视频会暂停,当你返回到当前标签时视频会再次播放,代码如下:

      @@ -123,7 +123,7 @@

      属性

      是一个用来展示文档当前的可见性的{{domxref("DOMString")}} 。该属性的值为以下值之一:
      • visible : 页面内容至少是部分可见。 在实际中,这意味着页面是非最小化窗口的前景选项卡。
      • -
      • hidden : 页面内容对用户不可见。 在实际中,这意味着文档可以是一个后台标签,或是最小化窗口的一部分,或是在操作系统锁屏激活的状态下。
      • +
      • hidden : 页面内容对用户不可见。 在实际中,这意味着文档可以是一个后台标签,或是最小化窗口的一部分,或是在操作系统锁屏激活的状态下。
      • prerender : 页面内容正在被预渲染且对用户是不可见的 (被 document.hidden 当做隐藏). 文档可能初始状态为 prerender,但绝不会从其它值转为该值。>
      • 注释:有的浏览器不支持此功能unloaded : 页面正在从内存中卸载。
      • 注释:有的浏览器不支持此功能
      • diff --git a/files/zh-cn/web/api/pagetransitionevent/index.html b/files/zh-cn/web/api/pagetransitionevent/index.html index 756e0c81d04b46..2163eb65cefc6d 100644 --- a/files/zh-cn/web/api/pagetransitionevent/index.html +++ b/files/zh-cn/web/api/pagetransitionevent/index.html @@ -11,12 +11,12 @@

        DOM Information

        -

         

        +

        Inheritance Hierarchy

        -
         Event -
           PageTransitionEvent
        +
        Event +
        PageTransitionEvent

        Example

        @@ -70,4 +70,4 @@

        Properties

  • -

     

    +

    diff --git a/files/zh-cn/web/api/path2d/addpath/index.html b/files/zh-cn/web/api/path2d/addpath/index.html index 4c6a07242e2c35..7230022f93e615 100644 --- a/files/zh-cn/web/api/path2d/addpath/index.html +++ b/files/zh-cn/web/api/path2d/addpath/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef("Canvas API")}}
    -

    Path2D.addPath() 是 Canvas 2D API 根据指定路径变量添加路径的方法。

    +

    Path2D.addPath() 是 Canvas 2D API 根据指定路径变量添加路径的方法。

    语法

    @@ -25,7 +25,7 @@

    示例

    使用 addPath 方法

    -

    这是一段使用 addPath 方法的简单的代码片段。

    +

    这是一段使用 addPath 方法的简单的代码片段。

    var canvas = document.getElementById("canvas");
     var ctx = canvas.getContext("2d");
    @@ -58,8 +58,8 @@ 
    Playable code
    <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
     <div class="playable-buttons">
    -  <input id="edit" type="button" value="Edit" />
    -  <input id="reset" type="button" value="Reset" />
    +  <input id="edit" type="button" value="Edit" />
    +  <input id="reset" type="button" value="Reset" />
     </div>
     <textarea id="code" class="playable-code" style="height:220px;">
     var p1 = new Path2D();
    diff --git a/files/zh-cn/web/api/path2d/index.html b/files/zh-cn/web/api/path2d/index.html
    index 5fd453491901ea..d1a0856c13049c 100644
    --- a/files/zh-cn/web/api/path2d/index.html
    +++ b/files/zh-cn/web/api/path2d/index.html
    @@ -5,13 +5,13 @@
     ---
     
    {{APIRef("Canvas API")}} {{SeeCompatTable}}
    -

    Canvas 2D API 的接口 Path2D 用来声明路径,此路径稍后会被{{domxref("CanvasRenderingContext2D")}} 对象使用。CanvasRenderingContext2D 接口的 路径方法 也存在于 Path2D 这个接口中,允许你在 canvas 中根据需要创建可以保留并重用的路径。

    +

    Canvas 2D API 的接口 Path2D 用来声明路径,此路径稍后会被{{domxref("CanvasRenderingContext2D")}} 对象使用。CanvasRenderingContext2D 接口的 路径方法 也存在于 Path2D 这个接口中,允许你在 canvas 中根据需要创建可以保留并重用的路径。

    构造函数

    {{domxref("Path2D.Path2D", "Path2D()")}}
    -
    Path2D 构造函数。 创建一个新的 Path2D 对象。
    +
    Path2D 构造函数。 创建一个新的 Path2D 对象。

    方法

    @@ -20,23 +20,23 @@

    方法

    {{domxref("Path2D.addPath()")}}
    添加一条新路径到对当前路径。
    {{domxref("CanvasRenderingContext2D.closePath", "Path2D.closePath()")}}
    -
    使笔点返回到当前子路径的起始点。它尝试从当前点到起始点绘制一条直线。 如果图形已经是封闭的或者只有一个点,那么此函数不会做任何操作。
    +
    使笔点返回到当前子路径的起始点。它尝试从当前点到起始点绘制一条直线。 如果图形已经是封闭的或者只有一个点,那么此函数不会做任何操作。
    {{domxref("CanvasRenderingContext2D.moveTo()", "Path2D.moveTo()")}}
    将一个新的子路径的起始点移动到 (x,y) 坐标。
    {{domxref("CanvasRenderingContext2D.lineTo()", "Path2D.lineTo()")}}
    -
    使用直线连接子路径的终点到 x, y  坐标。
    +
    使用直线连接子路径的终点到 x, y 坐标。
    {{domxref("CanvasRenderingContext2D.bezierCurveTo()", "Path2D.bezierCurveTo()")}}
    -
    添加一条三次贝赛尔曲线到当前路径。 该方法需要三个点。 第一、第二个点是控制点,第三个点是结束点。起始点是当前路径的最后一个点,绘制贝赛尔曲线前,可以通过调用 moveTo() 进行修改。
    +
    添加一条三次贝赛尔曲线到当前路径。 该方法需要三个点。 第一、第二个点是控制点,第三个点是结束点。起始点是当前路径的最后一个点,绘制贝赛尔曲线前,可以通过调用 moveTo() 进行修改。
    {{domxref("CanvasRenderingContext2D.quadraticCurveTo()", "Path2D.quadraticCurveTo()")}}
    -
    添加一条二次贝赛尔曲线到当前路径。 
    +
    添加一条二次贝赛尔曲线到当前路径。
    {{domxref("CanvasRenderingContext2D.arc()", "Path2D.arc()")}}
    -
    添加一条圆弧路径。 圆弧路径的圆心在 (x, y) 位置,半径为 r ,根据anticlockwise (默认为顺时针)指定的方向从 startAngle 开始绘制,到 endAngle 结束。
    +
    添加一条圆弧路径。 圆弧路径的圆心在 (x, y) 位置,半径为 r ,根据anticlockwise (默认为顺时针)指定的方向从 startAngle 开始绘制,到 endAngle 结束。
    {{domxref("CanvasRenderingContext2D.arcTo()", "Path2D.arcTo()")}}
    根据控制点和半径添加一条圆弧路径,使用直线连接前一个点。
    {{domxref("CanvasRenderingContext2D.ellipse()", "Path2D.ellipse()")}}
    -
    添加一条椭圆路径。椭圆的圆心在(x,y)位置,半径分别是radiusX 和 radiusY ,按照anticlockwise (默认顺时针)指定的方向,从 startAngle  开始绘制,到 endAngle 结束。
    +
    添加一条椭圆路径。椭圆的圆心在(x,y)位置,半径分别是radiusXradiusY ,按照anticlockwise (默认顺时针)指定的方向,从 startAngle 开始绘制,到 endAngle 结束。
    {{domxref("CanvasRenderingContext2D.rect()", "Path2D.rect()")}}
    -
    创建一条矩形路径,矩形的起点位置是 (x, y) ,尺寸为 width 和 height
    +
    创建一条矩形路径,矩形的起点位置是 (x, y) ,尺寸为 widthheight

    规范

    diff --git a/files/zh-cn/web/api/path2d/path2d/index.html b/files/zh-cn/web/api/path2d/path2d/index.html index 9376c9dd4f5fd6..ba1257eb570e30 100644 --- a/files/zh-cn/web/api/path2d/path2d/index.html +++ b/files/zh-cn/web/api/path2d/path2d/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef("Canvas API")}}{{seeCompatTable}}
    -

    Path2D() 构造函数返回一个新的 Path2D 对象的实例,可以选择另一条路径作为参数(创建一个拷贝),或者选择 SVG path 数据构成的字符串。

    +

    Path2D() 构造函数返回一个新的 Path2D 对象的实例,可以选择另一条路径作为参数(创建一个拷贝),或者选择 SVG path 数据构成的字符串。

    语法

    @@ -18,9 +18,9 @@

    参数

    path {{optional_inline}}
    -
    当调用另一个 Path2D 对象时,会创建一个 path 变量的拷贝。
    +
    当调用另一个 Path2D 对象时,会创建一个 path 变量的拷贝。
    d {{optional_inline}}
    -
    当调用 SVG path 数据构成的字符串时,会根据描述创建一个新的路径。
    +
    当调用 SVG path 数据构成的字符串时,会根据描述创建一个新的路径。
    @@ -30,7 +30,7 @@

    示例

    创建和拷贝路径

    -

    这是一段简单的代码片段,创建和拷贝 Path2D 路径。

    +

    这是一段简单的代码片段,创建和拷贝 Path2D 路径。

    var canvas = document.getElementById("canvas");
     var ctx = canvas.getContext("2d");
    @@ -52,8 +52,8 @@ 
    Playable code
    <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
     <div class="playable-buttons">
    -  <input id="edit" type="button" value="Edit" />
    -  <input id="reset" type="button" value="Reset" />
    +  <input id="edit" type="button" value="Edit" />
    +  <input id="reset" type="button" value="Reset" />
     </div>
     <textarea id="code" class="playable-code" style="height: 150px">
     var path1 = new Path2D();
    @@ -96,7 +96,7 @@ 
    Playable code

    使用 SVG 路径

    -

    这是一段简单的代码片段,使用 SVG path data 创建一个 Path2D 路径。路径将会移动到点 (M10 10) ,然后向右侧水平移动 80 个点 (h 80),然后向下 80 个点 (v 80),然后向左 80 个点 (h -80),最后回到起始点 (z)。

    +

    这是一段简单的代码片段,使用 SVG path data 创建一个 Path2D 路径。路径将会移动到点 (M10 10) ,然后向右侧水平移动 80 个点 (h 80),然后向下 80 个点 (v 80),然后向左 80 个点 (h -80),最后回到起始点 (z)。

    var canvas = document.getElementById("canvas");
     var ctx = canvas.getContext("2d");
    @@ -112,8 +112,8 @@ 
    Playable code2
    <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
     <div class="playable-buttons">
    -  <input id="edit" type="button" value="Edit" />
    -  <input id="reset" type="button" value="Reset" />
    +  <input id="edit" type="button" value="Edit" />
    +  <input id="reset" type="button" value="Reset" />
     </div>
     <textarea id="code" class="playable-code">
     var p = new Path2D("M10 10 h 80 v 80 h -80 Z");
    diff --git a/files/zh-cn/web/api/payment_request_api/concepts/index.html b/files/zh-cn/web/api/payment_request_api/concepts/index.html
    index 9c46bf2eddc41c..ff4cca42723d69 100644
    --- a/files/zh-cn/web/api/payment_request_api/concepts/index.html
    +++ b/files/zh-cn/web/api/payment_request_api/concepts/index.html
    @@ -69,8 +69,8 @@ 

    交易处理机的功能

    {{Glossary("user agent")}}内部机制支持不同类型的交易。另外,你还可以调用交易处理 API来支持更多相应的支付方式提供方(前提是你使用的浏览器支持这些 API 的使用)。不论使用哪种方式,交易处理机的功能都是如下几条:

      -
    1. 确保交易正确进行。 交易正确进行的条件取决于不同的支付类型和用户的支付请求;例如,如果用户选择了信用卡支付,而收款方并不支持这种方式,交易就无法正确进行。
    2. -
    3. 响应用户代理发起的对商家进行认证的请求(在处理机支持商家认证的前提下)。 详细说明请参考商家认证
    4. +
    5. 确保交易正确进行。 交易正确进行的条件取决于不同的支付类型和用户的支付请求;例如,如果用户选择了信用卡支付,而收款方并不支持这种方式,交易就无法正确进行。
    6. +
    7. 响应用户代理发起的对商家进行认证的请求(在处理机支持商家认证的前提下)。 详细说明请参考商家认证
    8. 验证用户提交的信息有资格发起一次有效交易。这一步骤会创建并返回一个基于具体支付方式的对象,此对象包含处理交易所需要的信息。
    diff --git a/files/zh-cn/web/api/paymentaddress/index.html b/files/zh-cn/web/api/paymentaddress/index.html index 1b84e69c08ed7a..078e50556663f6 100644 --- a/files/zh-cn/web/api/paymentaddress/index.html +++ b/files/zh-cn/web/api/paymentaddress/index.html @@ -14,34 +14,34 @@ ---

    {{SeeCompatTable}}{{APIRef("Payment Request API")}}

    -

    The PaymentAddress interface of the Payment Request API stores address information.

    +

    The PaymentAddress interface of the Payment Request API stores address information.

    Properties

    -
    {{domxref('PaymentAddress.country')}} {{readonlyinline}} 
    +
    {{domxref('PaymentAddress.country')}} {{readonlyinline}}
    The Common Locale Data Repository region code. For example, US, GB, CN, etc.
    -
    {{domxref('PaymentAddress.addressLine')}} {{readonlyinline}}
    -
    An array of strings describing the address. The exact size and content varies by country or location and can include, for example, a street name, house number, apartment number, rural delivery route, descriptive instructions, or post office box number.
    -
    {{domxref('PaymentAddress.region')}} {{readonlyinline}}
    -
    The top level administrative subdivision of the country, for example, a state, province, oblast, or prefecture.
    -
    {{domxref('PaymentAddress.city')}} {{readonlyinline}}
    +
    {{domxref('PaymentAddress.addressLine')}} {{readonlyinline}}
    +
    An array of strings describing the address. The exact size and content varies by country or location and can include, for example, a street name, house number, apartment number, rural delivery route, descriptive instructions, or post office box number.
    +
    {{domxref('PaymentAddress.region')}} {{readonlyinline}}
    +
    The top level administrative subdivision of the country, for example, a state, province, oblast, or prefecture.
    +
    {{domxref('PaymentAddress.city')}} {{readonlyinline}}
    The city or town portion of the address.
    -
    {{domxref('PaymentAddress.dependentLocality')}} {{readonlyinline}}
    +
    {{domxref('PaymentAddress.dependentLocality')}} {{readonlyinline}}
    The dependent locality or sublocality within a city, for example, a neighborhood, borough, district, or UK dependent locality.
    -
    {{domxref('PaymentAddress.postalCode')}} {{readonlyinline}}
    +
    {{domxref('PaymentAddress.postalCode')}} {{readonlyinline}}
    A code used by a jurisdiction for mail routing, for example, the ZIP code in the United States or the PIN code in India.
    -
    {{domxref('PaymentAddress.sortingCode')}} {{readonlyinline}}
    +
    {{domxref('PaymentAddress.sortingCode')}} {{readonlyinline}}
    A postal sorting code such as is used in France.
    -
    {{domxref('PaymentAddress.languageCode')}} {{readonlyinline}}
    -
    The BCP-47 language code for the address, used to determine the field separators and the order of fields when formatting the address for display.
    -
    {{domxref('PaymentAddress.organization')}} {{readonlyinline}}
    +
    {{domxref('PaymentAddress.languageCode')}} {{readonlyinline}}
    +
    The BCP-47 language code for the address, used to determine the field separators and the order of fields when formatting the address for display.
    +
    {{domxref('PaymentAddress.organization')}} {{readonlyinline}}
    The name of the organization, firm, company, or institution at the payment address.
    -
    {{domxref('PaymentAddress.recipient')}} {{readonlyinline}}
    +
    {{domxref('PaymentAddress.recipient')}} {{readonlyinline}}
    The name of the recipient, purchaser, or contact person at the payment address.
    -
    {{domxref('PaymentAddress.careOf')}} {{readonlyinline}} {{Deprecated_Inline}}
    +
    {{domxref('PaymentAddress.careOf')}} {{readonlyinline}} {{Deprecated_Inline}}
    The name of an intermediary party or entity responsible for transferring packages between the postal service and the recipient.
    -
    {{domxref('PaymentAddress.phone')}} {{readonlyinline}}
    +
    {{domxref('PaymentAddress.phone')}} {{readonlyinline}}
    The telephone number of the recipient or contact person.
    diff --git a/files/zh-cn/web/api/performance/clearmarks/index.html b/files/zh-cn/web/api/performance/clearmarks/index.html index 1ad07be9658bae..4a9260269a98cc 100644 --- a/files/zh-cn/web/api/performance/clearmarks/index.html +++ b/files/zh-cn/web/api/performance/clearmarks/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef("User Timing API")}}
    -

    clearMarks() 这个方法可以从浏览器的 performance entry 缓存中移除声明的标记。如果调用这个方法时没有传递参数, 则所有带有{{domxref("PerformanceEntry.entryType","entry type")}}这类标记的{{domxref("PerformanceEntry","performance entries")}} 将从 performance entry 缓存区中被移除。

    +

    clearMarks() 这个方法可以从浏览器的 performance entry 缓存中移除声明的标记。如果调用这个方法时没有传递参数, 则所有带有{{domxref("PerformanceEntry.entryType","entry type")}}这类标记的{{domxref("PerformanceEntry","performance entries")}} 将从 performance entry 缓存区中被移除。

    用法

    @@ -17,14 +17,14 @@

    参数

    name {{optional_inline}}
    -
    {{domxref("DOMString")}} 表示时间戳的名字,如果没有提供这个参数, 则所有带有{{domxref("PerformanceEntry.entryType","entry type")}}这类标记的{{domxref("PerformanceEntry","performance entries")}} 将从 performance entry 缓存区中被移除。
    +
    {{domxref("DOMString")}} 表示时间戳的名字,如果没有提供这个参数, 则所有带有{{domxref("PerformanceEntry.entryType","entry type")}}这类标记的{{domxref("PerformanceEntry","performance entries")}} 将从 performance entry 缓存区中被移除。

    返回值

    void
    -
     
    +

    例子

    diff --git a/files/zh-cn/web/api/performance/clearmeasures/index.html b/files/zh-cn/web/api/performance/clearmeasures/index.html index 387362b559facf..d02c18d885a021 100644 --- a/files/zh-cn/web/api/performance/clearmeasures/index.html +++ b/files/zh-cn/web/api/performance/clearmeasures/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef("User Timing API")}}
    -

    clearMeasures() 方法可以从浏览器的性能入口缓存区中移除声明的度量衡。如果这个方法被调用时没有传入参数,则所有 {{domxref("PerformanceEntry.entryType","entry type")}} 标记值为"measure" 的{{domxref("PerformanceEntry","性能实体")}}将被从性能入口缓存区中移除。

    +

    clearMeasures() 方法可以从浏览器的性能入口缓存区中移除声明的度量衡。如果这个方法被调用时没有传入参数,则所有 {{domxref("PerformanceEntry.entryType","entry type")}} 标记值为"measure" 的{{domxref("PerformanceEntry","性能实体")}}将被从性能入口缓存区中移除。

    {{AvailableInWorkers}}

    @@ -19,14 +19,14 @@

    参数

    name {{optional_inline}}
    -
    用于表述时间戳名称的 {{domxref("DOMString")}}。如果没有提供这个参数,则所有 {{domxref("PerformanceEntry.entryType","entry type")}} 标记值为"measure" 的{{domxref("PerformanceEntry","性能实体")}}将被移除。
    +
    用于表述时间戳名称的 {{domxref("DOMString")}}。如果没有提供这个参数,则所有 {{domxref("PerformanceEntry.entryType","entry type")}} 标记值为"measure" 的{{domxref("PerformanceEntry","性能实体")}}将被移除。

    返回值

    void
    -
     
    +

    例子

    diff --git a/files/zh-cn/web/api/performance/clearresourcetimings/index.html b/files/zh-cn/web/api/performance/clearresourcetimings/index.html index c4552f5ca8c75c..f74ca5caa39433 100644 --- a/files/zh-cn/web/api/performance/clearresourcetimings/index.html +++ b/files/zh-cn/web/api/performance/clearresourcetimings/index.html @@ -18,7 +18,7 @@

    Arguments

    void
    -
     
    +

    Return value

    diff --git a/files/zh-cn/web/api/performance/getentries/index.html b/files/zh-cn/web/api/performance/getentries/index.html index 78065b72effae5..f777932c9bc108 100644 --- a/files/zh-cn/web/api/performance/getentries/index.html +++ b/files/zh-cn/web/api/performance/getentries/index.html @@ -7,7 +7,7 @@

    getEntries() 对于给定的 filter,此方法返回 {{domxref("PerformanceEntry")}} 对象数组。数组成员(入口)可以在显式的时间点用 performance marks 或measures 来创建 (例如调用{{domxref("Performance.mark","mark()")}} 方法) .

    -

    此方法暴露给{{domxref("Window")}} 和 {{domxref("Worker")}}接口。

    +

    此方法暴露给{{domxref("Window")}} 和 {{domxref("Worker")}}接口。

    语法

    @@ -32,9 +32,9 @@

    参数

    PerformanceEntryFilterOptions 是一个带有以下键值的字典:
      -
    • "name",  performance entry. 的名字
    • +
    • "name", performance entry. 的名字
    • "entryType", entry 类型。合法的 entry 类型可以从{{domxref("PerformanceEntry.entryType")}} 方法获取。
    • -
    • "initiatorType", 初始化资源的类型 (例如一个 HTML element). 其取值被 {{domxref("PerformanceResourceTiming.initiatorType")}} 接口所定义。
    • +
    • "initiatorType", 初始化资源的类型 (例如一个 HTML element). 其取值被 {{domxref("PerformanceResourceTiming.initiatorType")}} 接口所定义。
    diff --git a/files/zh-cn/web/api/performance/getentriesbytype/index.html b/files/zh-cn/web/api/performance/getentriesbytype/index.html index 296348008e2ca4..7c76aa5b20f4fd 100644 --- a/files/zh-cn/web/api/performance/getentriesbytype/index.html +++ b/files/zh-cn/web/api/performance/getentriesbytype/index.html @@ -7,7 +7,7 @@ ---
    {{APIRef("Performance Timeline API")}}
    -
    getEntriesByType()  方法返回给定类型的 {{domxref("PerformanceEntry")}} 列表
    +
    getEntriesByType() 方法返回给定类型的 {{domxref("PerformanceEntry")}} 列表

    The list's members (entries) can be created by making performance marks or measures (for example by calling the {{domxref("Performance.mark","mark()")}} method) at explicit points in time.

    diff --git a/files/zh-cn/web/api/performance/index.html b/files/zh-cn/web/api/performance/index.html index 7ce60cf943cbff..f808afbc66cc61 100644 --- a/files/zh-cn/web/api/performance/index.html +++ b/files/zh-cn/web/api/performance/index.html @@ -10,17 +10,17 @@ ---
    {{APIRef("High Resolution Time")}}
    -

    Performance 接口可以获取到当前页面中与性能相关的信息。它是 High Resolution Time API 的一部分,同时也融合了 Performance Timeline API、Navigation Timing API、 User Timing API 和 Resource Timing API

    +

    Performance 接口可以获取到当前页面中与性能相关的信息。它是 High Resolution Time API 的一部分,同时也融合了 Performance Timeline API、Navigation Timing APIUser Timing APIResource Timing API

    -

    该类型的对象可以通过调用只读属性 {{domxref("Window.performance")}} 来获得。

    +

    该类型的对象可以通过调用只读属性 {{domxref("Window.performance")}} 来获得。

    -

    注意:除了以下指出的情况外,该接口及其成员在 {{domxref("Web Worker")}} 中可用。此外,还需注意,performance 的创建和衡量都是同一环境下的。即,如果你在主线程(或者其他 worker)中创建了一个 performance,那么它在另外的 worker 线程中是不可用的;反之亦然。

    +

    注意:除了以下指出的情况外,该接口及其成员在 {{domxref("Web Worker")}} 中可用。此外,还需注意,performance 的创建和衡量都是同一环境下的。即,如果你在主线程(或者其他 worker)中创建了一个 performance,那么它在另外的 worker 线程中是不可用的;反之亦然。

    属性

    -

    Performance 接口没有继承任何属性。

    +

    Performance 接口没有继承任何属性。

    {{deprecated_inline}}{{domxref("Performance.navigation")}} {{readonlyInline}}
    @@ -29,7 +29,7 @@

    属性

    {{domxref("PerformanceTiming")}} 对象包含延迟相关的性能信息。Not available in workers.
    {{domxref("Performance.memory", "performance.memory")}} {{Non-standard_inline}}
    其是 Chrome 添加的一个非标准扩展,这个属性提供了一个可以获取到基本内存使用情况的对象。不应该使用这个非标准的 API。
    -
    {{domxref("Performance.timeOrigin")}} {{readonlyInline}} {{Non-standard_inline}}
    +
    {{domxref("Performance.timeOrigin")}} {{readonlyInline}} {{Non-standard_inline}}
    返回性能测量开始时的时间的高精度时间戳。

    事件处理程序

    @@ -40,7 +40,7 @@

    事件处理程序

    方法

    -

    Performance 接口没有继承任何方法。

    +

    Performance 接口没有继承任何方法。

    {{domxref("Performance.clearMarks()")}}
    @@ -48,23 +48,23 @@

    方法

    {{domxref("Performance.clearMeasures()")}}
    将给定的 measure 从浏览器的性能输入缓冲区中移除。
    {{domxref("Performance.clearResourceTimings()")}}
    -
    从浏览器的性能数据缓冲区中移除所有 {{domxref("PerformanceEntry.entryType","entryType")}} 是 "resource" 的  {{domxref("PerformanceEntry","performance entries")}}。
    +
    从浏览器的性能数据缓冲区中移除所有 {{domxref("PerformanceEntry.entryType","entryType")}} 是 "resource" 的 {{domxref("PerformanceEntry","performance entries")}}。
    {{domxref("Performance.getEntries()")}}
    -
    基于给定的 filter 返回一个 {{domxref("PerformanceEntry")}} 对象的列表。
    +
    基于给定的 filter 返回一个 {{domxref("PerformanceEntry")}} 对象的列表。
    {{domxref("Performance.getEntriesByName()")}}
    -
    基于给定的 name 和 entry type 返回一个 {{domxref("PerformanceEntry")}} 对象的列表。
    +
    基于给定的 name entry type 返回一个 {{domxref("PerformanceEntry")}} 对象的列表。
    {{domxref("Performance.getEntriesByType()")}}
    -
    基于给定的 entry type 返回一个 {{domxref("PerformanceEntry")}} 对象的列表
    +
    基于给定的 entry type 返回一个 {{domxref("PerformanceEntry")}} 对象的列表
    {{domxref("Performance.mark()")}}
    根据给出 name 值,在浏览器的性能输入缓冲区中创建一个相关的{{domxref("DOMHighResTimeStamp","timestamp")}}
    {{domxref("Performance.measure()")}}
    -
    在浏览器的指定 start mark 和 end mark 间的性能输入缓冲区中创建一个指定的 {{domxref("DOMHighResTimeStamp","timestamp")}}
    +
    在浏览器的指定 start mark 和 end mark 间的性能输入缓冲区中创建一个指定的 {{domxref("DOMHighResTimeStamp","timestamp")}}
    {{domxref("Performance.now()")}}
    -
    返回一个表示从性能测量时刻开始经过的毫秒数 {{domxref("DOMHighResTimeStamp")}}
    +
    返回一个表示从性能测量时刻开始经过的毫秒数 {{domxref("DOMHighResTimeStamp")}}
    {{domxref("Performance.setResourceTimingBufferSize()")}}
    -
    将浏览器的资源 timing 缓冲区的大小设置为 "resource" {{domxref("PerformanceEntry.entryType","type")}} {{domxref("PerformanceEntry","performance entry")}} 对象的指定数量
    +
    将浏览器的资源 timing 缓冲区的大小设置为 "resource" {{domxref("PerformanceEntry.entryType","type")}} {{domxref("PerformanceEntry","performance entry")}} 对象的指定数量
    {{domxref("Performance.toJSON()")}}
    -
    其是一个 JSON 格式转化器,返回 Performance 对象的 JSON 对象
    +
    其是一个 JSON 格式转化器,返回 Performance 对象的 JSON 对象

    规范

    diff --git a/files/zh-cn/web/api/performance/mark/index.html b/files/zh-cn/web/api/performance/mark/index.html index 6a6014e3281446..c0d50e4ef33c33 100644 --- a/files/zh-cn/web/api/performance/mark/index.html +++ b/files/zh-cn/web/api/performance/mark/index.html @@ -10,18 +10,18 @@

    mark() 方法在浏览器的性能缓冲区中使用给定名称添加一个{{domxref("DOMHighResTimeStamp","timestamp(时间戳)")}}

    -

    应用定义的时间戳可以通过 {{domxref("Performance")}} 接口的一个 getEntries*() 方法 ({{domxref("Performance.getEntries","getEntries()")}}, {{domxref("Performance.getEntriesByName","getEntriesByName()")}} 或者 {{domxref("Performance.getEntriesByType","getEntriesByType()")}}) 检索到。

    +

    应用定义的时间戳可以通过 {{domxref("Performance")}} 接口的一个 getEntries*() 方法 ({{domxref("Performance.getEntries","getEntries()")}}, {{domxref("Performance.getEntriesByName","getEntriesByName()")}} 或者 {{domxref("Performance.getEntriesByType","getEntriesByType()")}}) 检索到。

    -

    标记 的 {{domxref("PerformanceEntry","performance entry")}}将具有以下属性值:

    +

    标记 的 {{domxref("PerformanceEntry","performance entry")}}将具有以下属性值:

    • {{domxref("PerformanceEntry.entryType","entryType")}} - 设置为 "mark".
    • {{domxref("PerformanceEntry.name","name")}} - 设置为 mark 被创建时给出的 "name"。
    • -
    • {{domxref("PerformanceEntry.startTime","startTime")}} - 设置为 mark() 方法被调用时的 {{domxref("DOMHighResTimeStamp","timestamp")}} 。
    • +
    • {{domxref("PerformanceEntry.startTime","startTime")}} - 设置为 mark() 方法被调用时的 {{domxref("DOMHighResTimeStamp","timestamp")}} 。
    • {{domxref("PerformanceEntry.duration","duration")}} - 设置为 "0" (标记没有持续时间).
    -

    如果这个方法被指定的 name 已经存在于{{domxref("PerformanceTiming")}} 接口,会抛出一个{{jsxref("SyntaxError")}}错误。

    +

    如果这个方法被指定的 name 已经存在于{{domxref("PerformanceTiming")}} 接口,会抛出一个{{jsxref("SyntaxError")}}错误。

    语法

    @@ -38,15 +38,15 @@

    参数

    返回值

    -
     无
    -
     
    +
    +

    实例

    -

    下面的示例演示如何使用 mark() 来创建和检索{{domxref("PerformanceMark")}}条目。

    +

    下面的示例演示如何使用 mark() 来创建和检索{{domxref("PerformanceMark")}}条目。

    -

     

    +

    // 创建一些标记。
     performance.mark("squirrel");
    diff --git a/files/zh-cn/web/api/performance/measure/index.html b/files/zh-cn/web/api/performance/measure/index.html
    index 58c2cafff89edd..aa38aca02ffceb 100644
    --- a/files/zh-cn/web/api/performance/measure/index.html
    +++ b/files/zh-cn/web/api/performance/measure/index.html
    @@ -8,11 +8,11 @@
     ---
     
    {{APIRef("User Timing API")}}
    -

     measure() 方法在浏览器性能记录缓存中创建了一个名为{{domxref("DOMHighResTimeStamp","时间戳")}}的记录来记录两个特殊标志位(通常称为开始标志和结束标志)。 被命名的{{domxref("DOMHighResTimeStamp","时间戳")}}称为一次测量(measure)。

    +

    measure() 方法在浏览器性能记录缓存中创建了一个名为{{domxref("DOMHighResTimeStamp","时间戳")}}的记录来记录两个特殊标志位(通常称为开始标志和结束标志)。 被命名的{{domxref("DOMHighResTimeStamp","时间戳")}}称为一次测量(measure)。

    {{AvailableInWorkers}}

    -

    measure 可以被 {{domxref("Performance")}} 接口 getEntries*() 中的方法检查到 ({{domxref("Performance.getEntries","getEntries()")}}, {{domxref("Performance.getEntriesByName","getEntriesByName()")}} 或者 {{domxref("Performance.getEntriesByType","getEntriesByType()")}}).

    +

    measure 可以被 {{domxref("Performance")}} 接口 getEntries*() 中的方法检查到 ({{domxref("Performance.getEntries","getEntries()")}}, {{domxref("Performance.getEntriesByName","getEntriesByName()")}} 或者 {{domxref("Performance.getEntriesByType","getEntriesByType()")}}).

    The measure's {{domxref("PerformanceEntry","performance entry")}} will have the following property values:

    @@ -43,7 +43,7 @@

    返回值

    void
    -
     
    +

    例子

    diff --git a/files/zh-cn/web/api/performance/memory/index.html b/files/zh-cn/web/api/performance/memory/index.html index 074295f951e99c..3d2c598f570db3 100644 --- a/files/zh-cn/web/api/performance/memory/index.html +++ b/files/zh-cn/web/api/performance/memory/index.html @@ -16,7 +16,7 @@

    属性

    jsHeapSizeLimit
    上下文内可用堆的最大体积,以字节计算。
    totalJSHeapSize
    -
     已分配的堆体积,以字节计算。
    +
    已分配的堆体积,以字节计算。
    diff --git a/files/zh-cn/web/api/performance/navigation/index.html b/files/zh-cn/web/api/performance/navigation/index.html index c40354d7719377..0b823bdb298a54 100644 --- a/files/zh-cn/web/api/performance/navigation/index.html +++ b/files/zh-cn/web/api/performance/navigation/index.html @@ -11,7 +11,7 @@

    概要

    -

    只读属性 Performance.navigation 会返回一个 {{domxref("PerformanceNavigation")}} 对象。这个对象表示出现在当前浏览上下文的 navigation 类型,比如获取某个资源所需要的重定向次数。

    +

    只读属性 Performance.navigation 会返回一个 {{domxref("PerformanceNavigation")}} 对象。这个对象表示出现在当前浏览上下文的 navigation 类型,比如获取某个资源所需要的重定向次数。

    语法

    diff --git a/files/zh-cn/web/api/performance/now/index.html b/files/zh-cn/web/api/performance/now/index.html index 022a2d82337336..460a8f6d8ddf86 100644 --- a/files/zh-cn/web/api/performance/now/index.html +++ b/files/zh-cn/web/api/performance/now/index.html @@ -9,7 +9,7 @@ ---

    {{APIRef("High Resolution Timing")}}

    -

    performance.now()方法返回一个精确到毫秒的  {{domxref("DOMHighResTimeStamp")}} 。

    +

    performance.now()方法返回一个精确到毫秒的 {{domxref("DOMHighResTimeStamp")}} 。

    这个时间戳实际上并不是高精度的。为了降低像Spectre这样的安全威胁,各类浏览器对该类型的值做了不同程度上的四舍五入处理。(Firefox 从 Firefox 59 开始四舍五入到 2 毫秒精度)一些浏览器还可能对这个值作稍微的随机化处理。这个值的精度在未来的版本中可能会再次改善;浏览器开发者还在调查这些时间测定攻击和如何更好的缓解这些攻击。

    diff --git a/files/zh-cn/web/api/performance/resourcetimingbufferfull_event/index.html b/files/zh-cn/web/api/performance/resourcetimingbufferfull_event/index.html index a784594ee72aca..6dbe0cdab35574 100644 --- a/files/zh-cn/web/api/performance/resourcetimingbufferfull_event/index.html +++ b/files/zh-cn/web/api/performance/resourcetimingbufferfull_event/index.html @@ -6,7 +6,7 @@ ---
    {{APIRef("Resource Timing API")}}
    -

    onresourcetimingbufferfull 属性是一个在{{event("resourcetimingbufferfull")}}事件触发时会被调用的 {{domxref("EventHandler","event handler")}} 。这个事件当浏览器的资源时间性能缓冲区已满时会触发。

    +

    onresourcetimingbufferfull 属性是一个在{{event("resourcetimingbufferfull")}}事件触发时会被调用的 {{domxref("EventHandler","event handler")}} 。这个事件当浏览器的资源时间性能缓冲区已满时会触发。

    语法

    diff --git a/files/zh-cn/web/api/performance/timeorigin/index.html b/files/zh-cn/web/api/performance/timeorigin/index.html index f89549d54cb388..7595f941f3edcd 100644 --- a/files/zh-cn/web/api/performance/timeorigin/index.html +++ b/files/zh-cn/web/api/performance/timeorigin/index.html @@ -5,7 +5,7 @@ ---

    {{SeeCompatTable}}{{APIRef("High Resolution Time")}}

    -

    接口 {{domxref("Performance")}} 的只读属性  timeOrigin 返回一个表示 the performance measurement 开始时间的高精度 timestamp

    +

    接口 {{domxref("Performance")}} 的只读属性 timeOrigin 返回一个表示 the performance measurement 开始时间的高精度 timestamp

    语法

    diff --git a/files/zh-cn/web/api/performance/timing/index.html b/files/zh-cn/web/api/performance/timing/index.html index ec93231cfd0a3b..d1d0155d8b6286 100644 --- a/files/zh-cn/web/api/performance/timing/index.html +++ b/files/zh-cn/web/api/performance/timing/index.html @@ -10,10 +10,10 @@

    {{APIRef("Navigation Timing")}}{{deprecated_header}}

    -

    该属性在 Navigation Timing Level 2 specification 中已经被废弃,请使用 {{domxref("PerformanceNavigationTiming")}} 替代。

    +

    该属性在 Navigation Timing Level 2 specification 中已经被废弃,请使用 {{domxref("PerformanceNavigationTiming")}} 替代。

    -

    Performance.timing 只读属性返回一个 {{domxref("PerformanceTiming")}} 对象,这个对象包括了页面相关的性能信息。

    +

    Performance.timing 只读属性返回一个 {{domxref("PerformanceTiming")}} 对象,这个对象包括了页面相关的性能信息。

    语法

    diff --git a/files/zh-cn/web/api/performance/tojson/index.html b/files/zh-cn/web/api/performance/tojson/index.html index a6ae2cebadb3f2..838367cc077979 100644 --- a/files/zh-cn/web/api/performance/tojson/index.html +++ b/files/zh-cn/web/api/performance/tojson/index.html @@ -16,7 +16,7 @@

    Arguments

    None
    -
     
    +

    Return value

    diff --git a/files/zh-cn/web/api/performance_api/index.html b/files/zh-cn/web/api/performance_api/index.html index 5c00d5f1248076..5b451aaa1906b3 100644 --- a/files/zh-cn/web/api/performance_api/index.html +++ b/files/zh-cn/web/api/performance_api/index.html @@ -14,13 +14,13 @@

    DOMHighResTimeStamp

    -

    {{domxref("DOMHighResTimeStamp")}}类型,顾名思义,表示高采样率的时间戳。 此类型是 double ,由性能接口使用。 该值可以是离散时间戳,也可以是两个离散时间戳之间的时间间隔。

    +

    {{domxref("DOMHighResTimeStamp")}}类型,顾名思义,表示高采样率的时间戳。 此类型是 double ,由性能接口使用。 该值可以是离散时间戳,也可以是两个离散时间戳之间的时间间隔。

    DOMHighResTimeStamp 的单位是毫秒,应精确到 5 µs(微秒)。 但是,如果浏览器无法提供精确到 5 微秒的时间数值(例如由于硬件或软件限制),则浏览器可以将该值表示为精确到毫秒的时间(以毫秒为单位)。

    方法

    -

    {{domxref("Performance")}} 接口具有两个方法。

    +

    {{domxref("Performance")}} 接口具有两个方法。

    {{domxref("Performance.now","now()")}} 方法返回一个{{domxref("DOMHighResTimeStamp")}},其值取决于{{domxref("PerformanceTiming.navigationStart","navigation start")}}和作用域。如果作用域是 window,则值是创建浏览器上下文的时间;如果作用域是{{domxref("Worker","worker")}},则值是创建 worker 的时间。

    diff --git a/files/zh-cn/web/api/performance_property/index.html b/files/zh-cn/web/api/performance_property/index.html index 973647949ae62f..781674cea3b431 100644 --- a/files/zh-cn/web/api/performance_property/index.html +++ b/files/zh-cn/web/api/performance_property/index.html @@ -10,7 +10,7 @@ ---
    {{APIREf}}
    -
    Web Performance API 允许网页访问某些函数来测量网页和 Web 应用程序的性能,包括 Navigation Timing API 和高分辨率时间数据。
    +
    Web Performance API 允许网页访问某些函数来测量网页和 Web 应用程序的性能,包括 Navigation Timing API 和高分辨率时间数据。

    方法

    diff --git a/files/zh-cn/web/api/performanceentry/duration/index.html b/files/zh-cn/web/api/performanceentry/duration/index.html index 6bb9db694314e9..01d526e1d74d82 100644 --- a/files/zh-cn/web/api/performanceentry/duration/index.html +++ b/files/zh-cn/web/api/performanceentry/duration/index.html @@ -14,7 +14,7 @@
  • "mark" - returns "0" (a mark has no duration).
  • "measure" - returns the {{domxref("DOMHighResTimeStamp","timestamp")}} that is the duration of the measure.
  • "navigation" - returns the {{domxref("DOMHighResTimeStamp","timestamp")}} that is the difference between the {{domxref("PerformanceEntry.loadEventEnd")}} and {{domxref("PerformanceEntry.startTime")}} properties, respectively.例如: entry.entryType "navigation",entry.duration 3611.26, entry.loadEventEnd 3611.2672285754975, entry.startTime 0;
  • -
  • "resource" - 返回 resource 的{{domxref("PerformanceEntry.responseEnd","responseEnd")}} {{domxref("DOMHighResTimeStamp","timestamp")}} 和  {{domxref("PerformanceEntry.startTime","startTime")}} {{domxref("DOMHighResTimeStamp","timestamp")}}的时间差。例如: entry.entryType "resource",entry.duration 901.1400000000001, entry.responseEnd 2527.82, entry.startTime 1626.68, 2527.82 - 1626.68 == 901.1400000000001;
  • +
  • "resource" - 返回 resource 的{{domxref("PerformanceEntry.responseEnd","responseEnd")}} {{domxref("DOMHighResTimeStamp","timestamp")}} 和 {{domxref("PerformanceEntry.startTime","startTime")}} {{domxref("DOMHighResTimeStamp","timestamp")}}的时间差。例如: entry.entryType "resource",entry.duration 901.1400000000001, entry.responseEnd 2527.82, entry.startTime 1626.68, 2527.82 - 1626.68 == 901.1400000000001;
  • This property is {{readonlyInline}}.

    diff --git a/files/zh-cn/web/api/performanceentry/entrytype/index.html b/files/zh-cn/web/api/performanceentry/entrytype/index.html index b2e3418d54ef3a..c78f85c9d69c0f 100644 --- a/files/zh-cn/web/api/performanceentry/entrytype/index.html +++ b/files/zh-cn/web/api/performanceentry/entrytype/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef("Performance Timeline API")}}
    -

    The entryType  返回一个代表 performance metric 类型的{{domxref("DOMString")}} , 例如被 performance.mark("begin") 所创建的 entry 的 entryType 就是 "mark". 此属性只读。

    +

    The entryType 返回一个代表 performance metric 类型的{{domxref("DOMString")}} , 例如被 performance.mark("begin") 所创建的 entry 的 entryType 就是 "mark". 此属性只读。

    语法

    @@ -13,7 +13,7 @@

    语法

    返回值

    -

    返回值取决于 PerformanceEntry 对象的 subtype, entryType 的取值会影响{{domxref('PerformanceEntry.name')}} 属性, 具体如下表所示. 

    +

    返回值取决于 PerformanceEntry 对象的 subtype, entryType 的取值会影响{{domxref('PerformanceEntry.name')}} 属性, 具体如下表所示.

    @@ -41,7 +41,7 @@

    返回值

    - + @@ -60,7 +60,7 @@

    返回值

    范例

    -

    下面的代码说明了  entryType 属性的用法。

    +

    下面的代码说明了 entryType 属性的用法。

    function run_PerformanceEntry() {
     
    @@ -76,13 +76,13 @@ 

    范例

    // Check the entryType of all the "begin" entries var entriesNamedBegin = performance.getEntriesByName("begin"); //entriesNamedBegin - //    Array [ PerformanceMark ] + // Array [ PerformanceMark ] //entriesNamedBegin[0] - //    PerformanceMark { name: "begin", entryType: "mark", startTime: 94661370.14, duration: 0 } + // PerformanceMark { name: "begin", entryType: "mark", startTime: 94661370.14, duration: 0 } //entriesNamedBegin[0].entryType - //    "mark" + // "mark" //entriesNamedBegin[0].name - //    "begin" + // "begin" for (var i=0; i < entriesNamedBegin.length; i++) { var typeOfEntry = entriesNamedBegin[i].entryType; diff --git a/files/zh-cn/web/api/performanceentry/index.html b/files/zh-cn/web/api/performanceentry/index.html index b5ca6f046179d9..6b7b8ce17381c1 100644 --- a/files/zh-cn/web/api/performanceentry/index.html +++ b/files/zh-cn/web/api/performanceentry/index.html @@ -12,7 +12,7 @@ ---
    {{APIRef("Performance Timeline API")}}
    -

    PerformanceEntry 对象代表了 performance 时间列表中的单个 metric 数据。每一个 performance entry 都可以在应用运行过程中通过手动构建 {{domxref("PerformanceMark","mark")}} 或者 {{domxref("PerformanceMeasure","measure")}} (例如调用 {{domxref("Performance.mark","mark()")}} 方法) 生成。此外, Performance entries 在资源加载的时候,也会被动生成(例如图片、script、css 等资源加载)

    +

    PerformanceEntry 对象代表了 performance 时间列表中的单个 metric 数据。每一个 performance entry 都可以在应用运行过程中通过手动构建 {{domxref("PerformanceMark","mark")}} 或者 {{domxref("PerformanceMeasure","measure")}} (例如调用 {{domxref("Performance.mark","mark()")}} 方法) 生成。此外, Performance entries 在资源加载的时候,也会被动生成(例如图片、script、css 等资源加载)

    Note: Performance 对象暴露给了 {{domxref("Window")}} 和 {{domxref("Worker")}}. 同时该对象扩展了几个其他对象的属性,包括 {{domxref("PerformanceMark")}}, {{domxref("PerformanceMeasure")}}, {{domxref("PerformanceFrameTiming")}}, {{domxref("PerformanceNavigationTiming")}} 以及 {{domxref("PerformanceResourceTiming")}}.

    @@ -22,9 +22,9 @@

    Properties

    {{domxref("PerformanceEntry.name")}} {{readonlyInline}}
    {{domxref("DOMString")}} 该 performance entry 的名字
    {{domxref("PerformanceEntry.entryType")}} {{readonlyInline}}
    -
    {{domxref("DOMString")}} 代表所上报的 performance metric 的 entryType 类型,例如 "mark". 可以通过 {{domxref("PerformanceEntry.entryType","entryType")}} 查阅完整的 entryType type 类型。
    +
    {{domxref("DOMString")}} 代表所上报的 performance metric 的 entryType 类型,例如 "mark". 可以通过 {{domxref("PerformanceEntry.entryType","entryType")}} 查阅完整的 entryType type 类型。
    {{domxref("PerformanceEntry.startTime")}} {{readonlyInline}}
    -
     {{domxref("DOMHighResTimeStamp")}}  此为 metric 上报时的时间
    +
    {{domxref("DOMHighResTimeStamp")}} 此为 metric 上报时的时间
    {{domxref("PerformanceEntry.duration")}} {{readonlyInline}}
    {{domxref("DOMHighResTimeStamp")}} 该事件的耗时
    @@ -33,13 +33,13 @@

    Methods

    {{domxref("PerformanceEntry.toJSON","PerformanceEntry.toJSON()")}}
    -
    返回 PerformanceEntry 对象的 JSON 格式数据
    -
     
    +
    返回 PerformanceEntry 对象的 JSON 格式数据
    +

    Example

    -

    以下例子检查了当前浏览器所支持的所有 PerformanceEntry 属性,每个属性的检查结果都会通过 console 打印出来

    +

    以下例子检查了当前浏览器所支持的所有 PerformanceEntry 属性,每个属性的检查结果都会通过 console 打印出来

    function print_PerformanceEntries() {
       // Use getEntries() to get a list of all performance entries
    diff --git a/files/zh-cn/web/api/performanceentry/name/index.html b/files/zh-cn/web/api/performanceentry/name/index.html
    index 66d7fe122147b0..2695dae9fba891 100644
    --- a/files/zh-cn/web/api/performanceentry/name/index.html
    +++ b/files/zh-cn/web/api/performanceentry/name/index.html
    @@ -5,7 +5,7 @@
     ---
     
    {{APIRef("Performance Timeline API")}}
    -

    name 是 {{domxref("PerformanceEntry")}} 接口的属性,此属性的返回值是 {{domxref("PerformanceEntry.entryType")}} 的返回值的一个补充,例如 entry.entryType="navigation",entry.name="document". 这是一个只读属性。

    +

    name 是 {{domxref("PerformanceEntry")}} 接口的属性,此属性的返回值是 {{domxref("PerformanceEntry.entryType")}} 的返回值的一个补充,例如 entry.entryType="navigation",entry.name="document". 这是一个只读属性。

    Syntax

    @@ -42,7 +42,7 @@

    返回值

    - + @@ -85,37 +85,37 @@

    用例

    } // //例如上面 p 中一个 entry p[0] = { - //  "name": "document", - //  "entryType": "navigation", - //  "startTime": 0, - //  "duration": 3611.26, - //  "initiatorType": "navigation", - //  "nextHopProtocol": "http/1.1", - //  "workerStart": 0, - //  "redirectStart": 0, - //  "redirectEnd": 0, - //  "fetchStart": 0.32, - //  "domainLookupStart": 17.64, - //  "domainLookupEnd": 17.78, - //  "connectStart": 17.86, - //  "connectEnd": 18.1, - //  "secureConnectionStart": 0, - //  "requestStart": 18.3, - //  "responseStart": 294.06, - //  "responseEnd": 1610.3600000000001, - //  "transferSize": 97683, - //  "encodedBodySize": 97112, - //  "decodedBodySize": 97112, - //  "unloadEventStart": 1614.8372840721554, - //  "unloadEventEnd": 1619.1600105887128, - //  "domInteractive": 3110.767514889843, - //  "domContentLoadedEventStart": 3125.859851800787, - //  "domContentLoadedEventEnd": 3438.5779820633365, - //  "domComplete": 3609.999662153349, - //  "loadEventStart": 3610.017623620869, - //  "loadEventEnd": 3611.2672285754975, - //  "type": "reload", - //  "redirectCount": 0 + // "name": "document", + // "entryType": "navigation", + // "startTime": 0, + // "duration": 3611.26, + // "initiatorType": "navigation", + // "nextHopProtocol": "http/1.1", + // "workerStart": 0, + // "redirectStart": 0, + // "redirectEnd": 0, + // "fetchStart": 0.32, + // "domainLookupStart": 17.64, + // "domainLookupEnd": 17.78, + // "connectStart": 17.86, + // "connectEnd": 18.1, + // "secureConnectionStart": 0, + // "requestStart": 18.3, + // "responseStart": 294.06, + // "responseEnd": 1610.3600000000001, + // "transferSize": 97683, + // "encodedBodySize": 97112, + // "decodedBodySize": 97112, + // "unloadEventStart": 1614.8372840721554, + // "unloadEventEnd": 1619.1600105887128, + // "domInteractive": 3110.767514889843, + // "domContentLoadedEventStart": 3125.859851800787, + // "domContentLoadedEventEnd": 3438.5779820633365, + // "domComplete": 3609.999662153349, + // "loadEventStart": 3610.017623620869, + // "loadEventEnd": 3611.2672285754975, + // "type": "reload", + // "redirectCount": 0 //} //下面的函数 check_PerformanceEntry 的参数 obj 就是上面的 p[0] diff --git a/files/zh-cn/web/api/performanceentry/tojson/index.html b/files/zh-cn/web/api/performanceentry/tojson/index.html index c530ae93fe28bc..abd0e5a4d649b9 100644 --- a/files/zh-cn/web/api/performanceentry/tojson/index.html +++ b/files/zh-cn/web/api/performanceentry/tojson/index.html @@ -7,7 +7,7 @@ ---
    {{APIRef("Performance Timeline API")}}
    -

    toJSON() 方法是一个串行器 ( serializer ); 它返回{{domxref("PerformanceEntry","performance entry")}}对象的一个 JSON 表示形式。

    +

    toJSON() 方法是一个串行器 ( serializer ); 它返回{{domxref("PerformanceEntry","performance entry")}}对象的一个 JSON 表示形式。

    Syntax

    @@ -18,7 +18,7 @@

    Arguments

    None
    -
     
    +

    Return value

    diff --git a/files/zh-cn/web/api/performancenavigation/index.html b/files/zh-cn/web/api/performancenavigation/index.html index 1346a6451c91a7..19378c69d4d7f5 100644 --- a/files/zh-cn/web/api/performancenavigation/index.html +++ b/files/zh-cn/web/api/performancenavigation/index.html @@ -36,7 +36,7 @@

    Properties

    Methods

    -

    Performance 接口没有继承任何方法

    +

    Performance 接口没有继承任何方法

    {{domxref("PerformanceNavigation.toJSON()")}} {{non-standard_inline}}
    diff --git a/files/zh-cn/web/api/performancenavigationtiming/index.html b/files/zh-cn/web/api/performancenavigationtiming/index.html index c0edb095d0de93..0da6019f642f41 100644 --- a/files/zh-cn/web/api/performancenavigationtiming/index.html +++ b/files/zh-cn/web/api/performancenavigationtiming/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef("Navigation Timing")}}{{SeeCompatTable}}
    -

    PerformanceNavigationTiming 提供了用于存储和检索有关浏览器文档事件的指标的方法和属性。 例如,此接口可用于确定加载或卸载文档需要多少时间。

    +

    PerformanceNavigationTiming 提供了用于存储和检索有关浏览器文档事件的指标的方法和属性。 例如,此接口可用于确定加载或卸载文档需要多少时间。

    @@ -17,57 +17,57 @@

    属性

    该接口扩展了 {{domxref('PerformanceEntry')}} 属性,修订和约束以下性能条目:

    -
    {{domxref("PerformanceEntry.entryType")}} {{readonlyInline}}
    -
    返回 "navigation".
    -
    {{domxref("PerformanceEntry.name")}} {{readonlyInline}}
    -
    返回 文档地址.
    -
    {{domxref("PerformanceEntry.startTime")}} {{readonlyInline}}
    +
    {{domxref("PerformanceEntry.entryType")}} {{readonlyInline}}
    +
    返回 "navigation".
    +
    {{domxref("PerformanceEntry.name")}} {{readonlyInline}}
    +
    返回 文档地址.
    +
    {{domxref("PerformanceEntry.startTime")}} {{readonlyInline}}
    返回值为 0 的 {{domxref("DOMHighResTimeStamp")}}。
    -
    {{domxref("PerformanceEntry.duration")}} {{readonlyInline}}
    -
    返回 {{domxref("DOMHighResTimeStamp","timestamp")}} 值,即 {{domxref("PerformanceNavigationTiming.loadEventEnd")}} 和 {{domxref("PerformanceEntry.startTime")}} 属性之间的差值。
    +
    {{domxref("PerformanceEntry.duration")}} {{readonlyInline}}
    +
    返回 {{domxref("DOMHighResTimeStamp","timestamp")}} 值,即 {{domxref("PerformanceNavigationTiming.loadEventEnd")}} 和 {{domxref("PerformanceEntry.startTime")}} 属性之间的差值。

    该接口还扩展 {{domxref('PerformanceResourceTiming')}} 属性,修订和约束以下性能条目:

    {{domxref('PerformanceResourceTiming.initiatorType')}}{{readonlyInline}}
    -
    返回 "navigation".
    +
    返回 "navigation".

    该接口还支持以下属性:

    -
    {{domxref('PerformanceNavigationTiming.domComplete')}} {{readonlyInline}} 
    +
    {{domxref('PerformanceNavigationTiming.domComplete')}} {{readonlyInline}}
    一个 {{domxref("DOMHighResTimeStamp")}} 时间值,等于浏览器将当前文档的当前文档准备就绪之前的时间。
    {{domxref('PerformanceNavigationTiming.domContentLoadedEventEnd')}} {{readonlyInline}}
    -
    一个 {{domxref("DOMHighResTimeStamp")}} 时间值,等于当前文档的 DOMContentLoaded 事件完成后的时间。
    +
    一个 {{domxref("DOMHighResTimeStamp")}} 时间值,等于当前文档的 DOMContentLoaded 事件完成后的时间。
    {{domxref('PerformanceNavigationTiming.domContentLoadedEventStart')}} {{readonlyInline}}
    -
    一个 {{domxref("DOMHighResTimeStamp")}} 时间值,等于用户代理在当前文档上触发 DOMContentLoaded 事件之前的时间。
    -
    {{domxref('PerformanceNavigationTiming.domInteractive')}} {{readonlyInline}} 
    -
    一个 {{domxref("DOMHighResTimeStamp")}} 时间值,等于用户代理将当前文档的当前文档准备就绪设置为交互之前的时间。
    -
    {{domxref('PerformanceNavigationTiming.loadEventEnd')}} {{readonlyInline}} 
    -
    一个 {{domxref("DOMHighResTimeStamp")}} 时间值,代表当前文档的加载事件完成的时间。
    -
    {{domxref('PerformanceNavigationTiming.loadEventStart')}} {{readonlyInline}} 
    -
    一个 {{domxref("DOMHighResTimeStamp")}} 时间值,等于立即触发当前文档的加载事件之前的时间。
    -
    {{domxref('PerformanceNavigationTiming.redirectCount')}} {{readonlyInline}} 
    +
    一个 {{domxref("DOMHighResTimeStamp")}} 时间值,等于用户代理在当前文档上触发 DOMContentLoaded 事件之前的时间。
    +
    {{domxref('PerformanceNavigationTiming.domInteractive')}} {{readonlyInline}}
    +
    一个 {{domxref("DOMHighResTimeStamp")}} 时间值,等于用户代理将当前文档的当前文档准备就绪设置为交互之前的时间。
    +
    {{domxref('PerformanceNavigationTiming.loadEventEnd')}} {{readonlyInline}}
    +
    一个 {{domxref("DOMHighResTimeStamp")}} 时间值,代表当前文档的加载事件完成的时间。
    +
    {{domxref('PerformanceNavigationTiming.loadEventStart')}} {{readonlyInline}}
    +
    一个 {{domxref("DOMHighResTimeStamp")}} 时间值,等于立即触发当前文档的加载事件之前的时间。
    +
    {{domxref('PerformanceNavigationTiming.redirectCount')}} {{readonlyInline}}
    表示自当前浏览上下文中上次非重定向导航以来的重定向次数的数字。
    如果没有重定向,或者重定向是从另一个 origin 发的,并且该 origin 不允许将其计时信息公开给当前来源,则该值为 0。
    -
    {{domxref('PerformanceNavigationTiming.requestStart')}} {{readonlyInline}} 
    -
    返回一个 {{domxref("DOMHighResTimeStamp")}} 时间值,代表 UA 立即开始从服务器,相关应用程序缓存或本地资源请求资源之前的时间。
    -
    {{domxref('PerformanceNavigationTiming.responseStart')}} {{readonlyInline}} 
    -
    一个 {{domxref("DOMHighResTimeStamp")}} 时间值,代表用户代理的 HTTP 解析器从相关应用程序缓存,本地资源或服务器接收到响应的第一个字节后立即的时间。
    +
    {{domxref('PerformanceNavigationTiming.requestStart')}} {{readonlyInline}}
    +
    返回一个 {{domxref("DOMHighResTimeStamp")}} 时间值,代表 UA 立即开始从服务器,相关应用程序缓存或本地资源请求资源之前的时间。
    +
    {{domxref('PerformanceNavigationTiming.responseStart')}} {{readonlyInline}}
    +
    一个 {{domxref("DOMHighResTimeStamp")}} 时间值,代表用户代理的 HTTP 解析器从相关应用程序缓存,本地资源或服务器接收到响应的第一个字节后立即的时间。
    -
    {{domxref('PerformanceNavigationTiming.type')}} {{readonlyInline}} 
    -
    一个 {{domxref("DOMString","string")}} 表示导航类型,取值为为:“navigate”,“reload”,“back_forward”或“prerender”。
    -
    {{domxref('PerformanceNavigationTiming.unloadEventEnd')}} {{readonlyInline}} 
    -
    一个 {{domxref("DOMHighResTimeStamp")}} 时间值,等于用户代理程序完成前一文档的卸载事件之后的时间。
    -
    {{domxref('PerformanceNavigationTiming.unloadEventStart')}} {{readonlyInline}} 
    -
    一个 {{domxref("DOMHighResTimeStamp")}} 时间值,等于用户代理程序开始前一个文档的卸载事件之前的时间。
    +
    {{domxref('PerformanceNavigationTiming.type')}} {{readonlyInline}}
    +
    一个 {{domxref("DOMString","string")}} 表示导航类型,取值为为:“navigate”,“reload”,“back_forward”或“prerender”。
    +
    {{domxref('PerformanceNavigationTiming.unloadEventEnd')}} {{readonlyInline}}
    +
    一个 {{domxref("DOMHighResTimeStamp")}} 时间值,等于用户代理程序完成前一文档的卸载事件之后的时间。
    +
    {{domxref('PerformanceNavigationTiming.unloadEventStart')}} {{readonlyInline}}
    +
    一个 {{domxref("DOMHighResTimeStamp")}} 时间值,等于用户代理程序开始前一个文档的卸载事件之前的时间。

    方法

    diff --git a/files/zh-cn/web/api/performanceobserver/disconnect/index.html b/files/zh-cn/web/api/performanceobserver/disconnect/index.html index f756c2ad837d02..62bfb9c13b0147 100644 --- a/files/zh-cn/web/api/performanceobserver/disconnect/index.html +++ b/files/zh-cn/web/api/performanceobserver/disconnect/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef("Performance Timeline API")}}
    -
     
    +

    {{domxref('PerformanceObserver')}} 接口的 disconnect() 方法用于阻止性能观察者接收任何 {{domxref("PerformanceEntry","性能条目", '', 'true')}} 事件。

    diff --git a/files/zh-cn/web/api/performanceobserver/index.html b/files/zh-cn/web/api/performanceobserver/index.html index 219bcaff4ce8f9..9d93dd0d2c9a66 100644 --- a/files/zh-cn/web/api/performanceobserver/index.html +++ b/files/zh-cn/web/api/performanceobserver/index.html @@ -10,7 +10,7 @@ ---
    {{APIRef("Performance Timeline API")}}
    -
    PerformanceObserver 用于监测性能度量事件,在浏览器的性能时间轴记录下一个新的 {{domxref("PerformanceEntry","performance entries", '', 'true')}}  的时候将会被通知 。
    +
    PerformanceObserver 用于监测性能度量事件,在浏览器的性能时间轴记录下一个新的 {{domxref("PerformanceEntry","performance entries", '', 'true')}} 的时候将会被通知 。
    @@ -20,16 +20,16 @@

    构造函数

    {{domxref("PerformanceObserver.PerformanceObserver","PerformanceObserver()")}}
    -
    创建并返回一个新的 PerformanceObserver 对象。
    +
    创建并返回一个新的 PerformanceObserver 对象。

    方法

    {{domxref("PerformanceObserver.observe","PerformanceObserver.observe()")}}
    -
    指定监测的 {{domxref("PerformanceEntry.entryType","entry types")}} 的集合。 当 {{domxref("PerformanceEntry","performance entry")}} 被记录并且是指定的 entryTypes 之一的时候,性能观察者对象的回调函数会被调用。
    +
    指定监测的 {{domxref("PerformanceEntry.entryType","entry types")}} 的集合。 当 {{domxref("PerformanceEntry","performance entry")}} 被记录并且是指定的 entryTypes 之一的时候,性能观察者对象的回调函数会被调用。
    {{domxref("PerformanceObserver.disconnect","PerformanceObserver.disconnect()")}}
    -
    性能监测回调停止接收 {{domxref("PerformanceEntry","性能条目", '', 'true')}}。
    +
    性能监测回调停止接收 {{domxref("PerformanceEntry","性能条目", '', 'true')}}。
    diff --git a/files/zh-cn/web/api/performanceobserver/observe/index.html b/files/zh-cn/web/api/performanceobserver/observe/index.html index 1719daac34e170..11728595bf4e43 100644 --- a/files/zh-cn/web/api/performanceobserver/observe/index.html +++ b/files/zh-cn/web/api/performanceobserver/observe/index.html @@ -9,7 +9,7 @@ ---
    {{APIRef("Performance Timeline API")}}
    -

    {{domxref("PerformanceObserver", "性能监测对象")}} 的 observe() 方法用于观察传入的参数中指定的性能条目类型的集合。当记录一个指定类型的性能条目时,性能监测对象的回调函数将会被调用。

    +

    {{domxref("PerformanceObserver", "性能监测对象")}} 的 observe() 方法用于观察传入的参数中指定的性能条目类型的集合。当记录一个指定类型的性能条目时,性能监测对象的回调函数将会被调用。

    语法

    @@ -18,20 +18,20 @@

    语法

    参数

    -

     

    +

    options
    -
    一个只装了单个键值对的对象,该键值对的键名规定为 entryTypesentryTypes 的取值要求如下:
    +
    一个只装了单个键值对的对象,该键值对的键名规定为 entryTypesentryTypes 的取值要求如下:
      -
    • entryTypes 的值:一个放字符串的数组,字符串的有效值取值在{{domxref("PerformanceEntry.entryType", "性能条目类型")}} 中有详细列出。如果其中的某个字符串取的值无效,浏览器会自动忽略它。
    • -
    • 另:若未传入 options 实参,或传入的 options 实参为空数组,会抛出 {{jsxref("TypeError")}}。
    • +
    • entryTypes 的值:一个放字符串的数组,字符串的有效值取值在{{domxref("PerformanceEntry.entryType", "性能条目类型")}} 中有详细列出。如果其中的某个字符串取的值无效,浏览器会自动忽略它。
    • +
    • 另:若未传入 options 实参,或传入的 options 实参为空数组,会抛出 {{jsxref("TypeError")}}。
    -
     
    +

    示例

    @@ -42,7 +42,7 @@

    示例

    var observer = new PerformanceObserver(function(list, obj) { var entries = list.getEntries(); for (var i=0; i < entries.length; i++) { -  //处理 “mark” 和 “frame” 事件 + //处理 “mark” 和 “frame” 事件 } }); //调用 observer 对象的 observe() 方法 diff --git a/files/zh-cn/web/api/performanceobserver/performanceobserver/index.html b/files/zh-cn/web/api/performanceobserver/performanceobserver/index.html index fef1f129a56d7a..eded70510e11d5 100644 --- a/files/zh-cn/web/api/performanceobserver/performanceobserver/index.html +++ b/files/zh-cn/web/api/performanceobserver/performanceobserver/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef("Performance Timeline API")}}
    -

    PerformanceObserver() 构造函数使用给定的观察者 callback 生成一个新的 {{domxref("PerformanceObserver")}} 对象。当通过 {{domxref("PerformanceObserver.observe","observe()")}} 方法注册的 {{domxref("PerformanceEntry.entryType","条目类型",'','true')}} 的 {{domxref("PerformanceEntry","性能条目事件", '', 'true')}} 被记录下来时,调用该观察者回调. 

    +

    PerformanceObserver() 构造函数使用给定的观察者 callback 生成一个新的 {{domxref("PerformanceObserver")}} 对象。当通过 {{domxref("PerformanceObserver.observe","observe()")}} 方法注册的 {{domxref("PerformanceEntry.entryType","条目类型",'','true')}} 的 {{domxref("PerformanceEntry","性能条目事件", '', 'true')}} 被记录下来时,调用该观察者回调.

    语法

    @@ -16,7 +16,7 @@

    参数

    callback
    -
    观察的性能事件被记录时将调用 PerformanceObserverCallback 回调。调用回调时,其第一个参数是 {{domxref("PerformanceObserverEntryList","性能观察条目列表", '', 'true')}},第二个参数是 {{domxref("PerformanceObserver","观察者")}} 对象。
    +
    观察的性能事件被记录时将调用 PerformanceObserverCallback 回调。调用回调时,其第一个参数是 {{domxref("PerformanceObserverEntryList","性能观察条目列表", '', 'true')}},第二个参数是 {{domxref("PerformanceObserver","观察者")}} 对象。

    返回值

    diff --git a/files/zh-cn/web/api/performanceobserver/takerecords/index.html b/files/zh-cn/web/api/performanceobserver/takerecords/index.html index d5e814d8c53831..0bf2127c6dd651 100644 --- a/files/zh-cn/web/api/performanceobserver/takerecords/index.html +++ b/files/zh-cn/web/api/performanceobserver/takerecords/index.html @@ -5,9 +5,9 @@ ---
    {{APIRef("Performance Timeline API")}}
    -
     
    +
    -

    {{domxref('PerformanceObserver')}} 接口的 takeRecords() 方法返回当前存储在性能观察器中的 {{domxref("PerformanceEntry","性能条目")}}  列表,将其清空。

    +

    {{domxref('PerformanceObserver')}} 接口的 takeRecords() 方法返回当前存储在性能观察器中的 {{domxref("PerformanceEntry","性能条目")}} 列表,将其清空。

    Syntax

    diff --git a/files/zh-cn/web/api/performancepainttiming/index.html b/files/zh-cn/web/api/performancepainttiming/index.html index 0b06c6ed9bff57..ac6bd2036715c3 100644 --- a/files/zh-cn/web/api/performancepainttiming/index.html +++ b/files/zh-cn/web/api/performancepainttiming/index.html @@ -14,7 +14,7 @@ ---

    {{SeeCompatTable}}{{APIRef("Performance Timeline API")}}

    -

    Paint Timing  提供的PerformancePaintTiming是一个提供页面在构建过程中的“绘制”(也称“渲染”)时间点信息的接口。“绘制”是指将渲染树转换为页面上像素的过程。

    +

    Paint Timing 提供的PerformancePaintTiming是一个提供页面在构建过程中的“绘制”(也称“渲染”)时间点信息的接口。“绘制”是指将渲染树转换为页面上像素的过程。

    应用可以为名为“paint”的{{domxref("PerformanceEntry","performance entry 类型")}} 注册一个{{domxref("PerformanceObserver")}},然后观察者可以获取绘制相关的事件发生的时间。以此来帮你找出那些花费太多时间去绘制的区域,而后提升用户体验。

    @@ -28,7 +28,7 @@

    属性

    {{domxref("PerformanceEntry.entryType")}}
    返回 "paint".
    {{domxref("PerformanceEntry.name")}}
    -
    返回 "first-paint""first-contentful-paint".
    +
    返回 "first-paint""first-contentful-paint".
    {{domxref("PerformanceEntry.startTime")}}
    当开始“绘制“时返回 {{domxref("DOMHighResTimeStamp","timestamp")}}.
    {{domxref("PerformanceEntry.duration")}}
    @@ -42,15 +42,15 @@

    方法

    例子

    function showPaintTimings() {
    -  if (window.performance) {
    -    let performance = window.performance;
    -    let performanceEntries = performance.getEntriesByType('paint');
    -    performanceEntries.forEach( (performanceEntry, i, entries) => {
    -      console.log("The time to " + performanceEntry.name + " was " + performanceEntry.startTime + " milliseconds.");
    -    });
    -  } else {
    -    console.log('Performance timing isn\'t supported.');
    -  }
    +  if (window.performance) {
    +    let performance = window.performance;
    +    let performanceEntries = performance.getEntriesByType('paint');
    +    performanceEntries.forEach( (performanceEntry, i, entries) => {
    +      console.log("The time to " + performanceEntry.name + " was " + performanceEntry.startTime + " milliseconds.");
    +    });
    +  } else {
    +    console.log('Performance timing isn\'t supported.');
    +  }
     }

    上面例子输出如下

    diff --git a/files/zh-cn/web/api/performanceresourcetiming/index.html b/files/zh-cn/web/api/performanceresourcetiming/index.html index 3cf234c4fcc9c9..8b9f7b1a5237a3 100644 --- a/files/zh-cn/web/api/performanceresourcetiming/index.html +++ b/files/zh-cn/web/api/performanceresourcetiming/index.html @@ -22,10 +22,10 @@

    属性

    此接口通过限定和约束{{domxref("PerformanceEntry")}}属性来扩展资源性能条目类型,如下所示:

    -
     {{domxref("PerformanceEntry.entryType")}}{{readonlyInline}}
    -
    返回 "resource".
    +
    {{domxref("PerformanceEntry.entryType")}}{{readonlyInline}}
    +
    返回 "resource".
    {{domxref("PerformanceEntry.name")}}{{readonlyInline}}
    -
    返回 resources URL.
    +
    返回 resources URL.
    {{domxref("PerformanceEntry.startTime")}}{{readonlyInline}}
    在资源提取开始的时间返回{{domxref("DOMHighResTimeStamp","timestamp")}}。该值等于{{domxref("PerformanceEntry.fetchStart")}}。
    {{domxref("PerformanceEntry.duration")}}{{readonlyInline}}
    @@ -68,7 +68,7 @@

    属性

    {{domxref('PerformanceResourceTiming.encodedBodySize')}}{{readonlyInline}}
    在删除任何应用的内容编码之前,从 payload body 的提取(HTTP 或高速缓存)接收的大小(以八位字节为单位)的数字
    {{domxref('PerformanceResourceTiming.decodedBodySize')}}{{readonlyInline}}
    -
    在删除任何应用的内容编码之后,从消息正文 ( message body ) 的提取(HTTP 或缓存)接收的大小(以八位字节为单位)的数字
    +
    在删除任何应用的内容编码之后,从消息正文 ( message body ) 的提取(HTTP 或缓存)接收的大小(以八位字节为单位)的数字
    {{domxref('PerformanceResourceTiming.serverTiming')}}{{readonlyInline}}
    包含服务器时序度量 ( timing metrics ) 的{{domxref("PerformanceServerTiming")}} 条目数组。
    diff --git a/files/zh-cn/web/api/performancetiming/connectstart/index.html b/files/zh-cn/web/api/performancetiming/connectstart/index.html index afe0fc0fddd0cf..5683a1be12abb8 100644 --- a/files/zh-cn/web/api/performancetiming/connectstart/index.html +++ b/files/zh-cn/web/api/performancetiming/connectstart/index.html @@ -7,7 +7,7 @@

    概要

    -

    PerformanceTiming.connectStart 是一个返回代表一个时刻的 unsigned long long 型只读属性,请求连接被发送到网络之时的 Unix 毫秒时间戳。如果传输层报告错误并且连接的建立重新开始,则把最后建立连接的开始时间作为该值。如果一个持久连接被使用,则该值与 {{domxref("PerformanceTiming.fetchStart")}} 相同。

    +

    PerformanceTiming.connectStart 是一个返回代表一个时刻的 unsigned long long 型只读属性,请求连接被发送到网络之时的 Unix 毫秒时间戳。如果传输层报告错误并且连接的建立重新开始,则把最后建立连接的开始时间作为该值。如果一个持久连接被使用,则该值与 {{domxref("PerformanceTiming.fetchStart")}} 相同。

    语法

    diff --git a/files/zh-cn/web/api/performancetiming/domainlookupend/index.html b/files/zh-cn/web/api/performancetiming/domainlookupend/index.html index 6b30ee80536853..af5c5c1835be7e 100644 --- a/files/zh-cn/web/api/performancetiming/domainlookupend/index.html +++ b/files/zh-cn/web/api/performancetiming/domainlookupend/index.html @@ -7,7 +7,7 @@

    概要

    -

    PerformanceTiming.domainLookupEnd 是一个返回代表一个时刻的 unsigned long long 型只读属性,为解析域名结束时的 Unix 毫秒时间戳。如果一个持久连接被使用,或者该信息已经被本地资源或者缓存存储,则该值等同于 {{domxref("PerformanceTiming.fetchStart")}}。

    +

    PerformanceTiming.domainLookupEnd 是一个返回代表一个时刻的 unsigned long long 型只读属性,为解析域名结束时的 Unix 毫秒时间戳。如果一个持久连接被使用,或者该信息已经被本地资源或者缓存存储,则该值等同于 {{domxref("PerformanceTiming.fetchStart")}}。

    语法

    diff --git a/files/zh-cn/web/api/performancetiming/domainlookupstart/index.html b/files/zh-cn/web/api/performancetiming/domainlookupstart/index.html index 1eb0a5f5c09a70..9037026ad7daf2 100644 --- a/files/zh-cn/web/api/performancetiming/domainlookupstart/index.html +++ b/files/zh-cn/web/api/performancetiming/domainlookupstart/index.html @@ -7,7 +7,7 @@

    概要

    -

    PerformanceTiming.domainLookupStart 是一个返回代表一个时刻的 unsigned long long 型只读属性,为域名开始解析之时的 Unix 毫秒时间戳。如果一个持久连接被使用,或者该信息已经被本地资源或者缓存存储,则该值等同于 {{domxref("PerformanceTiming.fetchStart")}}。

    +

    PerformanceTiming.domainLookupStart 是一个返回代表一个时刻的 unsigned long long 型只读属性,为域名开始解析之时的 Unix 毫秒时间戳。如果一个持久连接被使用,或者该信息已经被本地资源或者缓存存储,则该值等同于 {{domxref("PerformanceTiming.fetchStart")}}。

    语法

    diff --git a/files/zh-cn/web/api/performancetiming/domcomplete/index.html b/files/zh-cn/web/api/performancetiming/domcomplete/index.html index 3d9cc9e72cfe08..18f4748c36e2c4 100644 --- a/files/zh-cn/web/api/performancetiming/domcomplete/index.html +++ b/files/zh-cn/web/api/performancetiming/domcomplete/index.html @@ -7,7 +7,7 @@

    概要

    -

    PerformanceTiming.domComplete 是一个返回代表一个时刻的 unsigned long long 型只读属性,为主文档的解析器结束工作,{{domxref("Document.readyState")}} 变为 'complete'且相当于 {{event("readystatechange")}} 事件被触发时的 Unix 毫秒时间戳。

    +

    PerformanceTiming.domComplete 是一个返回代表一个时刻的 unsigned long long 型只读属性,为主文档的解析器结束工作,{{domxref("Document.readyState")}} 变为 'complete'且相当于 {{event("readystatechange")}} 事件被触发时的 Unix 毫秒时间戳。

    语法

    diff --git a/files/zh-cn/web/api/performancetiming/domcontentloadedeventend/index.html b/files/zh-cn/web/api/performancetiming/domcontentloadedeventend/index.html index d320d72039e1cc..102e00e428caeb 100644 --- a/files/zh-cn/web/api/performancetiming/domcontentloadedeventend/index.html +++ b/files/zh-cn/web/api/performancetiming/domcontentloadedeventend/index.html @@ -9,7 +9,7 @@

    Summary

    -

    PerformanceTiming.domContentLoadedEventEnd 为只读属性,返回一个无符号长整型数值(unsigned long),以 UNIX 时间戳的形式表示一个时刻,这个时刻为所有需要尽早执行的脚本不管是否按顺序,都已经执行完毕。(译注:即 DOM Ready)

    +

    PerformanceTiming.domContentLoadedEventEnd 为只读属性,返回一个无符号长整型数值(unsigned long),以 UNIX 时间戳的形式表示一个时刻,这个时刻为所有需要尽早执行的脚本不管是否按顺序,都已经执行完毕。(译注:即 DOM Ready)

    Syntax

    diff --git a/files/zh-cn/web/api/performancetiming/domcontentloadedeventstart/index.html b/files/zh-cn/web/api/performancetiming/domcontentloadedeventstart/index.html index 1abf587cebd364..509f7355ce91f4 100644 --- a/files/zh-cn/web/api/performancetiming/domcontentloadedeventstart/index.html +++ b/files/zh-cn/web/api/performancetiming/domcontentloadedeventstart/index.html @@ -7,7 +7,7 @@

    概要

    -

    PerformanceTiming.domContentLoadedEventStart 是一个返回代表一个时刻的 unsigned long long 型只读属性,为解析器发出 {{event("DOMContentLoaded")}} 事件之前,即所有的需要被运行的脚本已经被解析之时的 Unix 毫秒时间戳。

    +

    PerformanceTiming.domContentLoadedEventStart 是一个返回代表一个时刻的 unsigned long long 型只读属性,为解析器发出 {{event("DOMContentLoaded")}} 事件之前,即所有的需要被运行的脚本已经被解析之时的 Unix 毫秒时间戳。

    语法

    diff --git a/files/zh-cn/web/api/performancetiming/dominteractive/index.html b/files/zh-cn/web/api/performancetiming/dominteractive/index.html index 84a1143211f045..cc38b1e97b85ce 100644 --- a/files/zh-cn/web/api/performancetiming/dominteractive/index.html +++ b/files/zh-cn/web/api/performancetiming/dominteractive/index.html @@ -7,7 +7,7 @@

    概要

    -

    PerformanceTiming.domInteractive 是一个返回代表一个时刻的 unsigned long long 型只读属性,为在主文档的解析器结束工作,即 {{domxref("Document.readyState")}} 改变为 'interactive' 并且相当于 {{event("readystatechange")}} 事件被触发之时的 Unix 毫秒时间戳。

    +

    PerformanceTiming.domInteractive 是一个返回代表一个时刻的 unsigned long long 型只读属性,为在主文档的解析器结束工作,即 {{domxref("Document.readyState")}} 改变为 'interactive' 并且相当于 {{event("readystatechange")}} 事件被触发之时的 Unix 毫秒时间戳。

    这个属性被用于测量用户感受的加载网页的速度。然而,如果脚本被屏蔽发生,而不是被异步加载或者使用了自定义的 Web 字体,这里有一些警告可能会发生。在使用这个值作为网页加载用户体验的媒介时,请务必检查一下你是否处于以上的情况

    diff --git a/files/zh-cn/web/api/performancetiming/domloading/index.html b/files/zh-cn/web/api/performancetiming/domloading/index.html index 32f3659e85eabf..3dec5ff5bbd534 100644 --- a/files/zh-cn/web/api/performancetiming/domloading/index.html +++ b/files/zh-cn/web/api/performancetiming/domloading/index.html @@ -7,7 +7,7 @@

    概要

    -

    PerformanceTiming.domLoading 是一个返回代表一个时刻的 unsigned long long 型只读属性,为解析器开始工作,即 {{domxref("Document.readyState")}} 改变为 'loading' 并且 {{event("readystatechange")}} 事件被触发之时的 Unix 毫秒时间戳。

    +

    PerformanceTiming.domLoading 是一个返回代表一个时刻的 unsigned long long 型只读属性,为解析器开始工作,即 {{domxref("Document.readyState")}} 改变为 'loading' 并且 {{event("readystatechange")}} 事件被触发之时的 Unix 毫秒时间戳。

    语法

    diff --git a/files/zh-cn/web/api/performancetiming/fetchstart/index.html b/files/zh-cn/web/api/performancetiming/fetchstart/index.html index 92777a88516317..e16e12f64a9459 100644 --- a/files/zh-cn/web/api/performancetiming/fetchstart/index.html +++ b/files/zh-cn/web/api/performancetiming/fetchstart/index.html @@ -7,7 +7,7 @@

    概要

    -

    PerformanceTiming.fetchStart 是一个返回代表一个时刻的 unsigned long long 型只读属性,为浏览器已经准备好去使用 HTTP 请求抓取文档之时的 Unix 毫秒时间戳。这一时刻在检查应用的缓存之前。

    +

    PerformanceTiming.fetchStart 是一个返回代表一个时刻的 unsigned long long 型只读属性,为浏览器已经准备好去使用 HTTP 请求抓取文档之时的 Unix 毫秒时间戳。这一时刻在检查应用的缓存之前。

    语法

    diff --git a/files/zh-cn/web/api/performancetiming/index.html b/files/zh-cn/web/api/performancetiming/index.html index d410ded6ae08a0..4e9d17f9315ab7 100644 --- a/files/zh-cn/web/api/performancetiming/index.html +++ b/files/zh-cn/web/api/performancetiming/index.html @@ -14,7 +14,7 @@

    属性

    -

    PerformanceTiming 接口不包含任何继承属性。

    +

    PerformanceTiming 接口不包含任何继承属性。

    {{domxref("PerformanceTiming.navigationStart")}} {{readonlyInline}}
    @@ -30,9 +30,9 @@

    属性

    {{domxref("PerformanceTiming.fetchStart")}} {{readonlyInline}}
    是一个无符号 long long 型的毫秒数,表征了浏览器准备好使用 HTTP 请求来获取 (fetch) 文档的 UNIX 时间戳。这个时间点会在检查任何应用缓存之前。
    {{domxref("PerformanceTiming.domainLookupStart")}} {{readonlyInline}}
    -
    是一个无符号 long long 型的毫秒数,表征了域名查询开始的 UNIX 时间戳。如果使用了持续连接 (persistent connection),或者这个信息存储到了缓存或者本地资源上,这个值将和 PerformanceTiming.fetchStart 一致。
    +
    是一个无符号 long long 型的毫秒数,表征了域名查询开始的 UNIX 时间戳。如果使用了持续连接 (persistent connection),或者这个信息存储到了缓存或者本地资源上,这个值将和 PerformanceTiming.fetchStart 一致。
    {{domxref("PerformanceTiming.domainLookupEnd")}} {{readonlyInline}}
    -
    是一个无符号 long long 型的毫秒数,表征了域名查询结束的 UNIX 时间戳。如果使用了持续连接 (persistent connection),或者这个信息存储到了缓存或者本地资源上,这个值将和 PerformanceTiming.fetchStart 一致。
    +
    是一个无符号 long long 型的毫秒数,表征了域名查询结束的 UNIX 时间戳。如果使用了持续连接 (persistent connection),或者这个信息存储到了缓存或者本地资源上,这个值将和 PerformanceTiming.fetchStart 一致。
    {{domxref("PerformanceTiming.connectStart")}} {{readonlyInline}}
    是一个无符号 long long 型的毫秒数,返回 HTTP 请求开始向服务器发送时的 Unix 毫秒时间戳。如果使用持久连接(persistent connection),则返回值等同于 fetchStart 属性的值。
    {{domxref("PerformanceTiming.connectEnd")}} {{readonlyInline}}
    @@ -54,7 +54,7 @@

    属性

    {{domxref("PerformanceTiming.domContentLoadedEventEnd")}} {{readonlyInline}}
    是一个无符号 long long 型的毫秒数,返回当所有需要立即执行的脚本已经被执行(不论执行顺序)时的 Unix 毫秒时间戳。
    {{domxref("PerformanceTiming.domComplete")}} {{readonlyInline}}
    -
    是一个无符号 long long 型的毫秒数,返回当前文档解析完成,即{{domxref("Document.readyState")}} 变为 'complete'且相对应的{{event("readystatechange")}} 被触发时的 Unix 毫秒时间戳。
    +
    是一个无符号 long long 型的毫秒数,返回当前文档解析完成,即{{domxref("Document.readyState")}} 变为 'complete'且相对应的{{event("readystatechange")}} 被触发时的 Unix 毫秒时间戳。
    {{domxref("PerformanceTiming.loadEventStart")}} {{readonlyInline}}
    是一个无符号 long long 型的毫秒数,返回该文档下,{{event("load")}}事件被发送时的 Unix 毫秒时间戳。如果这个事件还未被发送,它的值将会是 0。
    {{domxref("PerformanceTiming.loadEventEnd")}} {{readonlyInline}}
    @@ -63,11 +63,11 @@

    属性

    方法

    -

    Performance 接口不包含任何方法。

    +

    Performance 接口不包含任何方法。

    {{domxref("PerformanceTiming.toJSON()")}} {{non-Standard_Inline}}
    -
    是一个 JSON 格式化工具,返回一个 JSON 对象,代表具体的 PerformanceTiming 对象。
    +
    是一个 JSON 格式化工具,返回一个 JSON 对象,代表具体的 PerformanceTiming 对象。

    规范

    diff --git a/files/zh-cn/web/api/performancetiming/loadeventend/index.html b/files/zh-cn/web/api/performancetiming/loadeventend/index.html index 2c5b6b0eb9f658..6783ece4be1990 100644 --- a/files/zh-cn/web/api/performancetiming/loadeventend/index.html +++ b/files/zh-cn/web/api/performancetiming/loadeventend/index.html @@ -7,7 +7,7 @@

    概要

    -

    PerformanceTiming.loadEventEnd 是一个返回代表一个时刻的 unsigned long long 型只读属性,为 {{event("load")}} 事件处理程序被终止,加载事件已经完成之时的 Unix 毫秒时间戳。如果这个事件没有被触发,或者没能完成,则该值将会返回 0。

    +

    PerformanceTiming.loadEventEnd 是一个返回代表一个时刻的 unsigned long long 型只读属性,为 {{event("load")}} 事件处理程序被终止,加载事件已经完成之时的 Unix 毫秒时间戳。如果这个事件没有被触发,或者没能完成,则该值将会返回 0。

    语法

    diff --git a/files/zh-cn/web/api/performancetiming/loadeventstart/index.html b/files/zh-cn/web/api/performancetiming/loadeventstart/index.html index eb07b8197866e6..2c45a36c9a7fb1 100644 --- a/files/zh-cn/web/api/performancetiming/loadeventstart/index.html +++ b/files/zh-cn/web/api/performancetiming/loadeventstart/index.html @@ -7,7 +7,7 @@

    概要

    -

    PerformanceTiming.loadEventStart 是一个返回代表一个时刻的 unsigned long long 型只读属性,为 {{event("load")}} 事件被现在的文档触发之时的 Unix 时间戳。如果这个事件没有被触发,则他返回 0。

    +

    PerformanceTiming.loadEventStart 是一个返回代表一个时刻的 unsigned long long 型只读属性,为 {{event("load")}} 事件被现在的文档触发之时的 Unix 时间戳。如果这个事件没有被触发,则他返回 0。

    语法

    diff --git a/files/zh-cn/web/api/performancetiming/navigationstart/index.html b/files/zh-cn/web/api/performancetiming/navigationstart/index.html index 67521e8d0e5a33..67f04a0ce1c93d 100644 --- a/files/zh-cn/web/api/performancetiming/navigationstart/index.html +++ b/files/zh-cn/web/api/performancetiming/navigationstart/index.html @@ -7,7 +7,7 @@

    概要

    -

    PerformanceTiming.navigationStart 是一个返回代表一个时刻的 unsigned long long 型只读属性,为紧接着在相同的浏览环境下卸载前一个文档结束之时的 Unix 毫秒时间戳。如果没有上一个文档,则它的值相当于 {{domxref("PerformanceTiming.fetchStart")}}。

    +

    PerformanceTiming.navigationStart 是一个返回代表一个时刻的 unsigned long long 型只读属性,为紧接着在相同的浏览环境下卸载前一个文档结束之时的 Unix 毫秒时间戳。如果没有上一个文档,则它的值相当于 {{domxref("PerformanceTiming.fetchStart")}}。

    语法

    diff --git a/files/zh-cn/web/api/performancetiming/redirectend/index.html b/files/zh-cn/web/api/performancetiming/redirectend/index.html index 5beb4bcd591459..47b61ff4adfa34 100644 --- a/files/zh-cn/web/api/performancetiming/redirectend/index.html +++ b/files/zh-cn/web/api/performancetiming/redirectend/index.html @@ -7,7 +7,7 @@

    概要

    -

    PerformanceTiming.redirectEnd 是一个返回代表一个时刻的 unsigned long long 型只读属性,为最后一次的 HTTP 重定向被完成且 HTTP 响应的最后一个字节被接收之时的 Unix 毫秒时间戳。如果没有发生重定向,或者其中一个重定向不同源,则该值返回 0。

    +

    PerformanceTiming.redirectEnd 是一个返回代表一个时刻的 unsigned long long 型只读属性,为最后一次的 HTTP 重定向被完成且 HTTP 响应的最后一个字节被接收之时的 Unix 毫秒时间戳。如果没有发生重定向,或者其中一个重定向不同源,则该值返回 0。

    语法

    @@ -43,5 +43,5 @@

    浏览器兼容性

    参见

      -
    • 它属于 {{domxref("Performance")}} 接口。
    • +
    • 它属于 {{domxref("Performance")}} 接口。
    diff --git a/files/zh-cn/web/api/performancetiming/redirectstart/index.html b/files/zh-cn/web/api/performancetiming/redirectstart/index.html index 890b7ef18a539b..08aedaad6fb719 100644 --- a/files/zh-cn/web/api/performancetiming/redirectstart/index.html +++ b/files/zh-cn/web/api/performancetiming/redirectstart/index.html @@ -7,7 +7,7 @@

    概要

    -

    PerformanceTiming.redirectStart 是一个返回代表一个时刻的 unsigned long long 型只读属性,为第一个 HTTP 的重定向开始的时刻的 Unix 毫秒时间戳。如果重定向没有发生,或者其中一个重定向非同源,则该值返回 0。

    +

    PerformanceTiming.redirectStart 是一个返回代表一个时刻的 unsigned long long 型只读属性,为第一个 HTTP 的重定向开始的时刻的 Unix 毫秒时间戳。如果重定向没有发生,或者其中一个重定向非同源,则该值返回 0。

    语法

    diff --git a/files/zh-cn/web/api/performancetiming/requeststart/index.html b/files/zh-cn/web/api/performancetiming/requeststart/index.html index 249eb245b3bb8b..e66c05e1c7767a 100644 --- a/files/zh-cn/web/api/performancetiming/requeststart/index.html +++ b/files/zh-cn/web/api/performancetiming/requeststart/index.html @@ -7,7 +7,7 @@

    概要

    -

    PerformanceTiming.requestStart 是一个返回代表一个时刻的 unsigned long long 型只读属性,为浏览器发送从服务器或者缓存获取实际文档的请求之时的 Unix 毫秒时间戳。如果传输层在请求开始之后发生错误并且连接被重新打开,则该属性将会被设定为新的请求的相应的值 。

    +

    PerformanceTiming.requestStart 是一个返回代表一个时刻的 unsigned long long 型只读属性,为浏览器发送从服务器或者缓存获取实际文档的请求之时的 Unix 毫秒时间戳。如果传输层在请求开始之后发生错误并且连接被重新打开,则该属性将会被设定为新的请求的相应的值 。

    语法

    diff --git a/files/zh-cn/web/api/performancetiming/responsestart/index.html b/files/zh-cn/web/api/performancetiming/responsestart/index.html index ae075815f4d387..74eccd380a5003 100644 --- a/files/zh-cn/web/api/performancetiming/responsestart/index.html +++ b/files/zh-cn/web/api/performancetiming/responsestart/index.html @@ -7,7 +7,7 @@

    概要

    -

    PerformanceTiming.responseStart 是一个返回代表一个时刻的 unsigned long long 型只读属性,为浏览器从服务器、缓存或者本地资源接收到响应的第一个字节之时的 Unix 毫秒时间戳。

    +

    PerformanceTiming.responseStart 是一个返回代表一个时刻的 unsigned long long 型只读属性,为浏览器从服务器、缓存或者本地资源接收到响应的第一个字节之时的 Unix 毫秒时间戳。

    语法

    diff --git a/files/zh-cn/web/api/performancetiming/secureconnectionstart/index.html b/files/zh-cn/web/api/performancetiming/secureconnectionstart/index.html index 44115297110105..0bafe74c129db1 100644 --- a/files/zh-cn/web/api/performancetiming/secureconnectionstart/index.html +++ b/files/zh-cn/web/api/performancetiming/secureconnectionstart/index.html @@ -7,7 +7,7 @@

    概要

    -

    PerformanceTiming.secureConnectionStart 是一个返回代表一个时刻的 unsigned long long 型只读属性,为安全连接握手开始的时刻的 Unix 毫秒时间戳。如果只要你过的连接没有被请求,则它返回 0。

    +

    PerformanceTiming.secureConnectionStart 是一个返回代表一个时刻的 unsigned long long 型只读属性,为安全连接握手开始的时刻的 Unix 毫秒时间戳。如果只要你过的连接没有被请求,则它返回 0。

    语法

    diff --git a/files/zh-cn/web/api/performancetiming/unloadeventend/index.html b/files/zh-cn/web/api/performancetiming/unloadeventend/index.html index 340a931353bb71..5e13f08a912387 100644 --- a/files/zh-cn/web/api/performancetiming/unloadeventend/index.html +++ b/files/zh-cn/web/api/performancetiming/unloadeventend/index.html @@ -7,7 +7,7 @@

    概要

    -

    PerformanceTiming.unloadEventEnd 是一个返回代表一个时刻的 unsigned long long 型只读属性,为{{event("unload")}} 事件处理程序结束之时的 Unix 毫秒时间戳。如果没有上一个的文档,或者上一个文档或需要被跳转的页面的其中之一不同源,则该值返回 0。

    +

    PerformanceTiming.unloadEventEnd 是一个返回代表一个时刻的 unsigned long long 型只读属性,为{{event("unload")}} 事件处理程序结束之时的 Unix 毫秒时间戳。如果没有上一个的文档,或者上一个文档或需要被跳转的页面的其中之一不同源,则该值返回 0。

    语法

    diff --git a/files/zh-cn/web/api/performancetiming/unloadeventstart/index.html b/files/zh-cn/web/api/performancetiming/unloadeventstart/index.html index 58e90d4c6951f5..67ca4bc6b5b094 100644 --- a/files/zh-cn/web/api/performancetiming/unloadeventstart/index.html +++ b/files/zh-cn/web/api/performancetiming/unloadeventstart/index.html @@ -7,7 +7,7 @@

    概要

    -

    PerformanceTiming.unloadEventStart 是一个返回代表一个时刻的 unsigned long long 型只读属性,为 {{event("unload")}} 事件被触发之时的 Unix 毫秒时间戳。如果没有上一个文档,或者上一个文档或需要重定向的页面之一不同源,则该值返回 0。

    +

    PerformanceTiming.unloadEventStart 是一个返回代表一个时刻的 unsigned long long 型只读属性,为 {{event("unload")}} 事件被触发之时的 Unix 毫秒时间戳。如果没有上一个文档,或者上一个文档或需要重定向的页面之一不同源,则该值返回 0。

    语法

    diff --git a/files/zh-cn/web/api/periodicwave/index.html b/files/zh-cn/web/api/periodicwave/index.html index 8b0da1f2da11c8..3e284f1c9a0d59 100644 --- a/files/zh-cn/web/api/periodicwave/index.html +++ b/files/zh-cn/web/api/periodicwave/index.html @@ -6,10 +6,10 @@

    {{ APIRef("Web Audio API") }}

    -

    PeriodicWave 接口定义了一个可用于对 {{domxref("OscillatorNode")}}(振荡节点) 的输出进行构造(描述)的周期性波形。

    +

    PeriodicWave 接口定义了一个可用于对 {{domxref("OscillatorNode")}}(振荡节点) 的输出进行构造(描述)的周期性波形。

    -

    PeriodicWave (周期波) 没有输入或输出;它用于调用 {{domxref("OscillatorNode.setPeriodicWave()")}} 时定义自定义振荡器。 PeriodicWave 自身由 {{domxref("AudioContext.createPeriodicWave()")}} 创建/返回。

    +

    PeriodicWave (周期波) 没有输入或输出;它用于调用 {{domxref("OscillatorNode.setPeriodicWave()")}} 时定义自定义振荡器。 PeriodicWave 自身由 {{domxref("AudioContext.createPeriodicWave()")}} 创建/返回。

    构造函数

    @@ -20,7 +20,7 @@

    构造函数

    属性

    -

    None; 而且,PeriodicWave 不继承任何属性。

    +

    None; 而且,PeriodicWave 不继承任何属性。

    方法

    diff --git a/files/zh-cn/web/api/permissions_api/index.html b/files/zh-cn/web/api/permissions_api/index.html index 5e6dc3dfd3cce2..fb81e0ac790a0f 100644 --- a/files/zh-cn/web/api/permissions_api/index.html +++ b/files/zh-cn/web/api/permissions_api/index.html @@ -16,7 +16,7 @@

    {{DefaultAPISidebar("Permissions API")}}

    -

    The Permissions API provides a consistent programmatic way to query the status of API permissions attributed to the current context. For example, the Permissions API can be used to determine if permission to access a particular API has been granted or denied.

    +

    The Permissions API provides a consistent programmatic way to query the status of API permissions attributed to the current context. For example, the Permissions API can be used to determine if permission to access a particular API has been granted or denied.

    Concepts and usage

    diff --git a/files/zh-cn/web/api/permissions_api/using_the_permissions_api/index.html b/files/zh-cn/web/api/permissions_api/using_the_permissions_api/index.html index 2f99ba5cb95df1..f4f71dcf495afc 100644 --- a/files/zh-cn/web/api/permissions_api/using_the_permissions_api/index.html +++ b/files/zh-cn/web/api/permissions_api/using_the_permissions_api/index.html @@ -83,11 +83,11 @@

    查询权限状态

    权限描述符

    -

    {{domxref("Permissions.query()")}} 方法接受一个 PermissionDescriptor 字典作为参数 — 它包含你感兴趣的 API 的名称。一些 API 有继承自默认的 PermissionDescriptor  的更加复杂的 PermissionDescriptors 以包含更多额外的信息。例如,PushPermissionDescriptor 也包含一个比尔值指定 userVisibleOnlytrue 还是 false.

    +

    {{domxref("Permissions.query()")}} 方法接受一个 PermissionDescriptor 字典作为参数 — 它包含你感兴趣的 API 的名称。一些 API 有继承自默认的 PermissionDescriptor 的更加复杂的 PermissionDescriptors 以包含更多额外的信息。例如,PushPermissionDescriptor 也包含一个比尔值指定 userVisibleOnlytrue 还是 false.

    重置权限

    -

    从 Firefox 47 开始,你可以使用 {{domxref("Permissions.revoke()")}}  方法重置现有权限。它的调用方式和 {{domxref("Permissions.query()")}} 方法几乎一模一样,区别是,当 promise 成功 resolve 时,它会让一个现有的权限恢复默认状态(通常是 prompt)。让我们看看 demo 中的代码:

    +

    从 Firefox 47 开始,你可以使用 {{domxref("Permissions.revoke()")}} 方法重置现有权限。它的调用方式和 {{domxref("Permissions.query()")}} 方法几乎一模一样,区别是,当 promise 成功 resolve 时,它会让一个现有的权限恢复默认状态(通常是 prompt)。让我们看看 demo 中的代码:

    var revokeBtn = document.querySelector('.revoke');
     
    @@ -106,12 +106,12 @@ 

    重置权限

    }
    -

    自 Firefox 51 开始 revoke() 函数被默认关闭了,因为它的设计带来了 Web Applications Security Working Group 中提到的问题。可以通过将设置项  dom.permissions.revoke.enable 置为 true 来重新开启它。

    +

    自 Firefox 51 开始 revoke() 函数被默认关闭了,因为它的设计带来了 Web Applications Security Working Group 中提到的问题。可以通过将设置项 dom.permissions.revoke.enable 置为 true 来重新开启它。

    响应权限状态变化

    -

    你会注意到,在上面的代码中,在 {{domxref("PermissionStatus")}} 对象上有一个 onchange 事件回调 — 这让我们可以对感兴趣的 API 的状态变化做出响应。目前,我们只是上报了状态的变化。

    +

    你会注意到,在上面的代码中,在 {{domxref("PermissionStatus")}} 对象上有一个 onchange 事件回调 — 这让我们可以对感兴趣的 API 的状态变化做出响应。目前,我们只是上报了状态的变化。

    总结和展望未来

    diff --git a/files/zh-cn/web/api/pictureinpicturewindow/index.html b/files/zh-cn/web/api/pictureinpicturewindow/index.html index 49cbb3f3e957e1..f4a59e49ed5a4d 100644 --- a/files/zh-cn/web/api/pictureinpicturewindow/index.html +++ b/files/zh-cn/web/api/pictureinpicturewindow/index.html @@ -11,7 +11,7 @@

    属性

    -

     PictureInPictureWindow 接口不继承任何属性。

    +

    PictureInPictureWindow 接口不继承任何属性。

    {{domxref("PictureInPictureWindow.width")}} {{ReadOnlyInline}}
    diff --git a/files/zh-cn/web/api/plugin/index.html b/files/zh-cn/web/api/plugin/index.html index c83330038728f6..b2f3132acce71d 100644 --- a/files/zh-cn/web/api/plugin/index.html +++ b/files/zh-cn/web/api/plugin/index.html @@ -30,21 +30,21 @@

    属性

    - + - + - + - + diff --git a/files/zh-cn/web/api/pointer_events/index.html b/files/zh-cn/web/api/pointer_events/index.html index 4a42371a901bd9..1f21563cf93583 100644 --- a/files/zh-cn/web/api/pointer_events/index.html +++ b/files/zh-cn/web/api/pointer_events/index.html @@ -10,11 +10,11 @@ ---

    {{DefaultAPISidebar("Pointer Events")}}

    -

    目前绝大多数的 Web 内容都假设用户的指针定点设备为鼠标。然而,近年来的新兴设备支持更多不同方式的指针定点输入,如各类触控笔和触摸屏幕等。这就有必要扩展现存的定点设备事件模型,以有效追踪各类指针事件。 

    +

    目前绝大多数的 Web 内容都假设用户的指针定点设备为鼠标。然而,近年来的新兴设备支持更多不同方式的指针定点输入,如各类触控笔和触摸屏幕等。这就有必要扩展现存的定点设备事件模型,以有效追踪各类指针事件

    -

    指针事件 - Pointer events 是一类可以为定点设备所触发的 DOM 事件。它们被用来创建一个可以有效掌握各类输入设备(鼠标、触控笔和单点或多点的手指触摸)的统一的 DOM 事件模型。所谓 指针 是指一个可以明确指向屏幕上某一组坐标的硬件设备。建立这样一个单独的事件模型可以有效的简化 Web 站点与应用所需的工作,同时也便于提供更加一致与良好的用户体验,无需关心不同用户和场景在输入硬件上的差异。另外,对于某些需要处理特定设备的场景,指针事件也定义了一个 {{domxref("PointerEvent.pointerType","pointerType")}} 属性用以查看触发事件的设备类型。

    +

    指针事件 - Pointer events 是一类可以为定点设备所触发的 DOM 事件。它们被用来创建一个可以有效掌握各类输入设备(鼠标、触控笔和单点或多点的手指触摸)的统一的 DOM 事件模型。所谓 指针 是指一个可以明确指向屏幕上某一组坐标的硬件设备。建立这样一个单独的事件模型可以有效的简化 Web 站点与应用所需的工作,同时也便于提供更加一致与良好的用户体验,无需关心不同用户和场景在输入硬件上的差异。另外,对于某些需要处理特定设备的场景,指针事件也定义了一个 {{domxref("PointerEvent.pointerType","pointerType")}} 属性用以查看触发事件的设备类型。

    -

    这些事件需要能够处理 {{domxref("MouseEvent","mouse events")}} 之类较为通用的指针输入(mousedown/pointerdown, mousemove/pointermove, 等)。 因此,指针事件的类型,很大程度上类似于当前的鼠标事件类型。

    +

    这些事件需要能够处理 {{domxref("MouseEvent","mouse events")}} 之类较为通用的指针输入(mousedown/pointerdown, mousemove/pointermove, 等)。 因此,指针事件的类型,很大程度上类似于当前的鼠标事件类型。

    此外,一个指针事件,也同时包含了鼠标事件中所常见的属性(client coordinates, target element, button states,等)以及适用于其他输入设备的新属性:pressure, contact geometry, tilt,等等。实际上,{{domxref("PointerEvent")}} 接口继承了所有 {{domxref("MouseEvent","MouseEvent")}} 中的属性,以保障原有为鼠标事件所开发的内容能更加有效的迁移到指针事件。

    @@ -22,13 +22,13 @@

    相关名词

    active buttons state
    -
    The condition when a pointer has a non-zero value for the buttons property. For example, in the case of a pen, when the pen has physical contact with the digitizer, or at least one button is depressed while hovering.
    +
    The condition when a pointer has a non-zero value for the buttons property. For example, in the case of a pen, when the pen has physical contact with the digitizer, or at least one button is depressed while hovering.
    活跃指针 - active pointer
    任意指针输入设备都可以产生事件。一个可以产生后继事件的指针可以被认为是一个活跃指针。例如,一个触摸笔处于压下状态时可以认为是活跃的,因为它接下来的抬起或移动都会产生额外的后继事件。
    -
    数位设备 - digitizer
    +
    数位设备 - digitizer
    一个可以检测其表面接触行为的传感设备。通常来说,其所用的传感设备是一个可以感知由某些输入设备(如触控笔、压感笔、手指等)所提供的输入信息的可触摸屏幕。
    命中检测 - hit test
    浏览器用以检测某一指针事件的目标元素的过程。通常来说,这一过程是通过比照出现在文档或屏幕媒介上的指针位置与视觉布局来实现的。
    @@ -53,19 +53,19 @@

    PointerEvent 接口

    • {{ domxref('PointerEvent.pointerId','pointerId')}} - 对于某个由指针引起的事件的唯一标识。
    • {{ domxref('PointerEvent.width','width')}} - 以 CSS 像素计数的宽度属性,取决于指针的接触面的几何构成。
    • -
    • {{ domxref('PointerEvent.height','height')}} -  以 CSS 像素计数的高度属性,取决于指针的接触面的几何构成。
    • +
    • {{ domxref('PointerEvent.height','height')}} - 以 CSS 像素计数的高度属性,取决于指针的接触面的几何构成。
    • {{ domxref('PointerEvent.pressure','pressure')}} - 规范化后的指针输入的压力值,取值范围为 0 到 1,0 代表硬件可检测到的压力最小值,1 代表最大值。
    • -
    • {{ domxref('PointerEvent.tangentialPressure','tangentialPressure')}} The normalized tangential pressure of the pointer input (also known as barrel pressure or cylinder stress) in the range -1 to 1, where 0 is the neutral position of the control.
    • +
    • {{ domxref('PointerEvent.tangentialPressure','tangentialPressure')}} The normalized tangential pressure of the pointer input (also known as barrel pressure or cylinder stress) in the range -1 to 1, where 0 is the neutral position of the control.
    • {{ domxref('PointerEvent.tiltX','tiltX')}} - the plane angle (in degrees, in the range of -90 to 90) between the Y-Z plane and the plane containing both the transducer (e.g. pen stylus) axis and the Y axis.
    • {{ domxref('PointerEvent.tiltY','tiltY')}} - the plane angle (in degrees, in the range of -90 to 90) between the X-Z plane and the plane containing both the transducer (e.g. pen stylus) axis and the X axis.
    • -
    • {{ domxref('PointerEvent.twist','twist')}} The clockwise rotation of the pointer (e.g. pen stylus) around its major axis in degrees, with a value in the range 0 to 359.
    • +
    • {{ domxref('PointerEvent.twist','twist')}} The clockwise rotation of the pointer (e.g. pen stylus) around its major axis in degrees, with a value in the range 0 to 359.
    • {{ domxref('PointerEvent.pointerType','pointerType')}} - 表明引发该事件的设备类型(鼠标/笔/触摸等)。
    • {{ domxref('PointerEvent.isPrimary','isPrimary')}} - 表示该指针是否为该类型指针中的首选指针。

    事件类型与全局事件处理

    -

    指针事件有始终不同的事件类型,其中其中在鼠标事件中有相对应的语义话表示 (down, up, move, over, out, enter, leave)。以下是每个事件类型及所对应的{{domxref("GlobalEventHandlers","Global Event Handler")}}的基本介绍。

    +

    指针事件有始终不同的事件类型,其中其中在鼠标事件中有相对应的语义话表示 (down, up, move, over, out, enter, leave)。以下是每个事件类型及所对应的{{domxref("GlobalEventHandlers","Global Event Handler")}}的基本介绍。

    mark {{domxref('PerformanceMark')}} {{domxref("DOMString")}}The name used when the mark was created by calling {{domxref("Performance.mark","performance.mark()")}}.The name used when the mark was created by calling {{domxref("Performance.mark","performance.mark()")}}.
    measure {{domxref("DOMString")}} {{domxref('PerformanceMark')}} markThe name used when the mark was created by calling {{domxref("Performance.mark","performance.mark()")}}.The name used when the mark was created by calling {{domxref("Performance.mark","performance.mark()")}}.
    {{domxref("DOMString")}}
    {{domxref("Plugin.description")}}一个人类可读的插件描述。  只读。一个人类可读的插件描述。 只读。 {{domxref("DOMString")}}DOM 0DOM 0
    {{domxref("Plugin.filename")}} 插件文件名。只读。 {{domxref("DOMString")}}DOM 0DOM 0
    {{domxref("Plugin.name")}} 插件名。只读。 {{domxref("DOMString")}}DOM 0DOM 0
    {{domxref("Plugin.version")}}
    @@ -138,7 +138,7 @@

    Element 接口扩展

    -

    属性 {{domxref("Navigator.maxTouchPoints")}}  被设计用来指明在同一时间点所支持的最大的触摸点数量。

    +

    属性 {{domxref("Navigator.maxTouchPoints")}} 被设计用来指明在同一时间点所支持的最大的触摸点数量。

    例子

    @@ -176,9 +176,9 @@

    注册一个事件处理器

    el.lostpointercapture = lostcapture_handler; } </script> -  <body onload="init();"> -  <div id="target"> Touch me ... </div> -  </body> + <body onload="init();"> + <div id="target"> Touch me ... </div> + </body> </html> @@ -319,7 +319,7 @@

    确定按钮状态

    -

    Notice: The button property indicates a change in the state of the button. However, as in the case of touch, when multiple events occur with one event, all of them have the same value.

    +

    Notice: The button property indicates a change in the state of the button. However, as in the case of touch, when multiple events occur with one event, all of them have the same value.

    指针捕捉

    @@ -363,7 +363,7 @@

    指针捕捉

    el.releasePointerCapture(ev.pointerId); } -  function init() { + function init() { var el=document.getElementById("target"); // Register pointerdown and pointercancel handlers el.onpointerdown = downHandler; @@ -398,7 +398,7 @@

    touch-action CSS 属性

    }
    -

    在下面的示例中,当target 元素被触摸时,仅允许响应其在水平方向上的滚动。

    +

    在下面的示例中,当target 元素被触摸时,仅允许响应其在水平方向上的滚动。

    #target {
       touch-action: pan-x;
    @@ -409,7 +409,7 @@ 

    与鼠标事件的兼容性

    尽管指针事件接口允许应用程序去为各种指针输入设备创建更佳的用户体验,但事实上,目前的大多数 web 内容仍然是仅为支持鼠标输入而设计的。因此,即使一个浏览器支持了指针事件,它也仍然需要在这些仅支持鼠标设置网页在不做任何修改的情况下继续对其提供支持。理想情况下,通用的指针模型将使得应用不再需要专门为鼠标输入设计相应。然而,因为浏览器仍必须处理鼠标事件,所以可能仍留存一些需要加以处理的兼容性问题。这一部分包含了一些对于开发者可能有用的关于鼠标事件和指针事件的异同点。

    -

    出于对基于鼠标的内容的兼容性考虑,浏览器会将通用的指针事件映射成相应的鼠标事件。 这一事件映射被乘坐兼容性鼠标事件。开发者可以通过取消 pointerdown 事件相应来阻止某一特定的兼容性鼠标事件的产生,但需要注意以下情况:

    +

    出于对基于鼠标的内容的兼容性考虑,浏览器会将通用的指针事件映射成相应的鼠标事件。 这一事件映射被乘坐兼容性鼠标事件。开发者可以通过取消 pointerdown 事件相应来阻止某一特定的兼容性鼠标事件的产生,但需要注意以下情况:

    • 鼠标事件仅在指针失效(when the pointer is down)的情况下可以被阻止。
    • diff --git a/files/zh-cn/web/api/pointer_lock_api/index.html b/files/zh-cn/web/api/pointer_lock_api/index.html index 68b7120c369d4e..ef851ddc0af9a8 100644 --- a/files/zh-cn/web/api/pointer_lock_api/index.html +++ b/files/zh-cn/web/api/pointer_lock_api/index.html @@ -38,29 +38,29 @@

      示例

      var elem; document.addEventListener("mousemove", function(e) { -  var movementX = e.movementX       || -                  e.mozMovementX    || -                  e.webkitMovementX || -                  0, -      movementY = e.movementY       || -                  e.mozMovementY    || -                  e.webkitMovementY || -                  0; - -  // 打印鼠标移动的增量值。 -  console.log("movementX=" + movementX, "movementY=" + movementY); + var movementX = e.movementX || + e.mozMovementX || + e.webkitMovementX || + 0, + movementY = e.movementY || + e.mozMovementY || + e.webkitMovementY || + 0; + + // 打印鼠标移动的增量值。 + console.log("movementX=" + movementX, "movementY=" + movementY); }, false); function fullscreenChange() { -  if (document.webkitFullscreenElement === elem || -      document.mozFullscreenElement === elem || -      document.mozFullScreenElement === elem) { // 较旧的 API 大写 'S'. -    // 元素进入全屏模式了,现在我们可以请求指针锁定。 -    elem.requestPointerLock = elem.requestPointerLock    || -                              elem.mozRequestPointerLock || -                              elem.webkitRequestPointerLock; -    elem.requestPointerLock(); -  } + if (document.webkitFullscreenElement === elem || + document.mozFullscreenElement === elem || + document.mozFullScreenElement === elem) { // 较旧的 API 大写 'S'. + // 元素进入全屏模式了,现在我们可以请求指针锁定。 + elem.requestPointerLock = elem.requestPointerLock || + elem.mozRequestPointerLock || + elem.webkitRequestPointerLock; + elem.requestPointerLock(); + } } document.addEventListener('fullscreenchange', fullscreenChange, false); @@ -68,12 +68,12 @@

      示例

      document.addEventListener('webkitfullscreenchange', fullscreenChange, false); function pointerLockChange() { -  if (document.mozPointerLockElement === elem || -      document.webkitPointerLockElement === elem) { -    console.log("指针锁定成功了。"); -  } else { -    console.log("指针锁定已丢失。"); -  } + if (document.mozPointerLockElement === elem || + document.webkitPointerLockElement === elem) { + console.log("指针锁定成功了。"); + } else { + console.log("指针锁定已丢失。"); + } } document.addEventListener('pointerlockchange', pointerLockChange, false); @@ -81,7 +81,7 @@

      示例

      document.addEventListener('webkitpointerlockchange', pointerLockChange, false); function pointerLockError() { -  console.log("锁定指针时出错。"); + console.log("锁定指针时出错。"); } document.addEventListener('pointerlockerror', pointerLockError, false); @@ -89,20 +89,20 @@

      示例

      document.addEventListener('webkitpointerlockerror', pointerLockError, false); function lockPointer() { -  elem = document.getElementById("pointer-lock-element"); -  // 开始于使元素进入全屏模式。目前的实现 -  // 要求元素在请求指针锁定前要处于全屏模式下 -  // -- 这在以后可能会发生改变。 -  elem.requestFullscreen = elem.requestFullscreen    || -                           elem.mozRequestFullscreen || -                           elem.mozRequestFullScreen || // 较旧的 API 把 ‘S’ 大写 -                           elem.webkitRequestFullscreen; -  elem.requestFullscreen(); + elem = document.getElementById("pointer-lock-element"); + // 开始于使元素进入全屏模式。目前的实现 + // 要求元素在请求指针锁定前要处于全屏模式下 + // -- 这在以后可能会发生改变。 + elem.requestFullscreen = elem.requestFullscreen || + elem.mozRequestFullscreen || + elem.mozRequestFullScreen || // 较旧的 API 把 ‘S’ 大写 + elem.webkitRequestFullscreen; + elem.requestFullscreen(); } </script>
    -

    方法/属性 概述

    +

    方法/属性 概述

    Pointer lock API,和 Fullscreen API 类似,通过添加新方法来扩展 DOM 元素,requestPointerLock, 目前还是厂商前缀。按下面这样来写:

    @@ -113,7 +113,7 @@

    方法/属性 概述

    目前 requestPointerLock 的实现还是和 requestFullScreen 以及 Fullscreen API 紧紧地绑在一起的。一个元素在能够被指针锁定之前,必须首先进入全屏模式。就像上面演示的那样,锁定指针的过程是异步的,使用 (pointerlockchange, pointerlockerror) 事件来表明请求是成功还是失败了。这和 Fullscreen API 的工作方式是一致的,它使用 requestFullScreen 方法,以及 fullscreenchangefullscreenerror 事件。

    -

    Pointer lock API 还扩展了 document 接口,添加了一个新的属性和一个新的方法。新的属性被用于访问当前被锁定的元素(如果有的话),并被命名为 pointerLockElement,目前也使用厂商前缀。 document 添加的新方法是 exitPointerLock ,顾名思义,它是用来退出指针锁定的。

    +

    Pointer lock API 还扩展了 document 接口,添加了一个新的属性和一个新的方法。新的属性被用于访问当前被锁定的元素(如果有的话),并被命名为 pointerLockElement,目前也使用厂商前缀。 document 添加的新方法是 exitPointerLock ,顾名思义,它是用来退出指针锁定的。

    pointerLockElement 属性适用于确定当前是否有被指针锁定的元素(例如,用来做一个布尔检查),以及当有元素被锁定时获取该元素的一个引用。下面是这两种用法的一个例子:

    @@ -162,15 +162,15 @@

    方法/属性 概述

    pointerlockchange 事件

    -

    当指针锁定状态改变时 - 例如,当调用 requestPointerLock, exitPointerLock,用户按下 ESC 键,等等。— pointerlockchange 事件被分发到 document。 这是一个简单事件所以不包含任何的额外数据。

    +

    当指针锁定状态改变时 - 例如,当调用 requestPointerLock, exitPointerLock,用户按下 ESC 键,等等。— pointerlockchange 事件被分发到 document。 这是一个简单事件所以不包含任何的额外数据。

    -
    该事件目前在 Firefox 中使用前缀的格式是 mozpointerlockchange ,在 Chrome 中是 webkitpointerlockchange。 
    +
    该事件目前在 Firefox 中使用前缀的格式是 mozpointerlockchange ,在 Chrome 中是 webkitpointerlockchange

    pointerlockerror 事件

    -

    当调用 requestPointerLockexitPointerLock而引发错误时,  pointerlockerror 事件被分发到 document。这是一个简单事件所以不包含任何的额外数据。

    +

    当调用 requestPointerLockexitPointerLock而引发错误时, pointerlockerror 事件被分发到 document。这是一个简单事件所以不包含任何的额外数据。

    -
    该事件目前在 Firefox 中被加上前缀为 mozpointerlockerror ,在 Chrome 中为 webkitpointerlockerror。 
    +
    该事件目前在 Firefox 中被加上前缀为 mozpointerlockerror ,在 Chrome 中为 webkitpointerlockerror

    鼠标事件扩展

    @@ -183,17 +183,17 @@

    鼠标事件扩展

    movement 属性目前在 Firefox 中被加上前缀为 .mozMovementX.mozMovementY , 在 Chrome 中为.webkitMovementX.webkitMovementY
    -

    鼠标事件的两个新参数—movementX 和 movementY—提供了鼠标位置的变化情况。这两个参数的值,等于两个MouseEvent 属性( screenX 和 screenY)之间值的变化程度,这些 MouseEvent 属性被存储在两个连续的鼠标移动事件( eNow 和 ePrevious)中。换言之,指针锁定参数 movementX = eNow.screenX - ePrevious.screenX。(译注:不存在名为 eNow 或 ePrevious 的事件或属性,eNow 代指当前的鼠标移动事件,ePrevious 代指前一个鼠标移动事件)

    +

    鼠标事件的两个新参数—movementXmovementY—提供了鼠标位置的变化情况。这两个参数的值,等于两个MouseEvent 属性( screenXscreenY)之间值的变化程度,这些 MouseEvent 属性被存储在两个连续的鼠标移动事件( eNowePrevious)中。换言之,指针锁定参数 movementX = eNow.screenX - ePrevious.screenX。(译注:不存在名为 eNow 或 ePrevious 的事件或属性,eNow 代指当前的鼠标移动事件,ePrevious 代指前一个鼠标移动事件)

    锁定状态

    -

    当指针锁定被启动之后,正常的 MouseEvent 属性 clientX, clientY, screenX, 和 screenY ,保持不变,就像鼠标没有在移动一样。 movementXmovementY 属性持续提供鼠标的位置变化。如果鼠标在一个方向上持续移动,movementXmovementY的值是没有限制的。不存在鼠标光标的概念,而且光标无法移到窗口之外,而且也不会被屏幕边缘所固定。

    +

    当指针锁定被启动之后,正常的 MouseEvent 属性 clientX, clientY, screenX, 和 screenY ,保持不变,就像鼠标没有在移动一样。 movementXmovementY 属性持续提供鼠标的位置变化。如果鼠标在一个方向上持续移动,movementXmovementY的值是没有限制的。不存在鼠标光标的概念,而且光标无法移到窗口之外,而且也不会被屏幕边缘所固定。

    未锁定状态

    -

    无论鼠标锁定状态是怎样的, movementX 和 movementY 参数一直有效,并且为了方便起见,甚至在未锁定状态也是有效的。

    +

    无论鼠标锁定状态是怎样的, movementXmovementY 参数一直有效,并且为了方便起见,甚至在未锁定状态也是有效的。

    -

    当鼠标被解除锁定,系统光标可以退出并重新进入浏览器窗口。如果发生这种情况,movementX 和 movementY 可能会被设置成 0。

    +

    当鼠标被解除锁定,系统光标可以退出并重新进入浏览器窗口。如果发生这种情况,movementXmovementY 可能会被设置成 0。

    iframe 的限制

    diff --git a/files/zh-cn/web/api/pointerevent/index.html b/files/zh-cn/web/api/pointerevent/index.html index 8eeaea78d4c749..6394fe28d99d28 100644 --- a/files/zh-cn/web/api/pointerevent/index.html +++ b/files/zh-cn/web/api/pointerevent/index.html @@ -5,11 +5,11 @@ ---

    {{ APIRef("Pointer Events") }}

    -

    PointerEvent 接口代表了由 指针 引发的 DOM 事件的状态,包括接触点的位置,引发事件的设备类型,接触表面受到的压力等。

    +

    PointerEvent 接口代表了由 指针 引发的 DOM 事件的状态,包括接触点的位置,引发事件的设备类型,接触表面受到的压力等。

    指针 是输入设备的硬件层抽象(比如鼠标,触摸笔,或触摸屏上的一个触摸点)。指针 能指向一个具体表面(如屏幕)上的一个(或一组)坐标。

    -

    指针的 击中检测 指浏览器用来检测 指针事件的目标元素的过程。大多数情况下,这个目标元素是由 指针的位置和元素在文章中的位置和分层共同决定的。

    +

    指针的 击中检测 指浏览器用来检测 指针事件的目标元素的过程。大多数情况下,这个目标元素是由 指针的位置和元素在文章中的位置和分层共同决定的。

    Constructors

    @@ -20,7 +20,7 @@

    Constructors

    Properties

    -

    该接口属性继承自 {{domxref("MouseEvent")}} 和 {{domxref("Event")}}.

    +

    该接口属性继承自 {{domxref("MouseEvent")}} 和 {{domxref("Event")}}.

    {{ domxref('PointerEvent.pointerId')}} {{readonlyInline}}
    diff --git a/files/zh-cn/web/api/progressevent/index.html b/files/zh-cn/web/api/progressevent/index.html index 1d0e29bb1ca7df..4ce59b362b54d7 100644 --- a/files/zh-cn/web/api/progressevent/index.html +++ b/files/zh-cn/web/api/progressevent/index.html @@ -10,7 +10,7 @@ ---
    {{APIRef("DOM Events")}}
    -

    ProgressEvent 接口是测量如 HTTP 请求(一个XMLHttpRequest,或者一个 {{HTMLElement("img")}},{{HTMLElement("audio")}},{{HTMLElement("video")}},{{HTMLElement("style")}} 或 {{HTMLElement("link")}} 等底层资源的加载)等底层流程进度的事件。

    +

    ProgressEvent 接口是测量如 HTTP 请求(一个XMLHttpRequest,或者一个 {{HTMLElement("img")}},{{HTMLElement("audio")}},{{HTMLElement("video")}},{{HTMLElement("style")}} 或 {{HTMLElement("link")}} 等底层资源的加载)等底层流程进度的事件。

    {{InheritanceDiagram}}

    @@ -18,7 +18,7 @@

    构造方法

    {{domxref("ProgressEvent.ProgressEvent", "ProgressEvent()")}}
    -
    用给定的参数创建一个 ProgressEvent 事件。
    +
    用给定的参数创建一个 ProgressEvent 事件。

    属性

    @@ -27,11 +27,11 @@

    属性

    {{domxref("ProgressEvent.lengthComputable")}} {{readonlyInline}}
    -
    是一个 {{domxref("Boolean")}} 标志,表示底层流程将需要完成的总工作量和已经完成的工作量是否可以计算。换句话说,它告诉我们进度是否可以被测量。
    +
    是一个 {{domxref("Boolean")}} 标志,表示底层流程将需要完成的总工作量和已经完成的工作量是否可以计算。换句话说,它告诉我们进度是否可以被测量。
    {{domxref("ProgressEvent.loaded")}} {{readonlyInline}}
    -
    是一个 unsigned long long 类型数据,表示底层流程已经执行的工作总量。可以用这个属性和 ProgressEvent.total 计算工作完成比例。当使用 HTTP 下载资源,它只表示内容本身的部分,不包括首部和其它开销。
    +
    是一个 unsigned long long 类型数据,表示底层流程已经执行的工作总量。可以用这个属性和 ProgressEvent.total 计算工作完成比例。当使用 HTTP 下载资源,它只表示内容本身的部分,不包括首部和其它开销。
    {{domxref("ProgressEvent.total")}} {{readonlyInline}}
    -
    是一个 unsigned long long 类型数据,表示正在执行的底层流程的工作总量。当使用 HTTP 下载资源,它只表示内容本身的部分,不包括首部和其它开销。
    +
    是一个 unsigned long long 类型数据,表示正在执行的底层流程的工作总量。当使用 HTTP 下载资源,它只表示内容本身的部分,不包括首部和其它开销。

    方法

    @@ -43,12 +43,12 @@

    方法

    {{domxref("ProgressEvent.initProgressEvent()")}} {{deprecated_inline}}{{non-Standard_inline}}
    -
    使用被弃用的 {{domxref("Document.createEvent()", "Document.createEvent(\"ProgressEvent\")")}} 方法,来初始化一个已经创建好的 ProgressEvent
    +
    使用被弃用的 {{domxref("Document.createEvent()", "Document.createEvent(\"ProgressEvent\")")}} 方法,来初始化一个已经创建好的 ProgressEvent

    示例

    -

    下面的示例为一个新建的 {{domxref("XMLHTTPRequest")}} 添加了一个 ProgressEvent,并使用它来显示请求状态。

    +

    下面的示例为一个新建的 {{domxref("XMLHTTPRequest")}} 添加了一个 ProgressEvent,并使用它来显示请求状态。

    var progressBar = document.getElementById("p"),
         client = new XMLHttpRequest()
    diff --git a/files/zh-cn/web/api/progressevent/lengthcomputable/index.html b/files/zh-cn/web/api/progressevent/lengthcomputable/index.html
    index f4afce9bbcba4d..5565d749e24cdd 100644
    --- a/files/zh-cn/web/api/progressevent/lengthcomputable/index.html
    +++ b/files/zh-cn/web/api/progressevent/lengthcomputable/index.html
    @@ -5,7 +5,7 @@
     ---
     

    {{APIRef("DOM Events")}}

    -

    ProgressEvent.lengthComputable 只读属性是一个布尔{{domxref("Boolean")}} 标志,表示{{domxref("ProgressEvent")}} 所关联的资源是否具有可以计算的长度。否则 ,{{domxref("ProgressEvent.total")}} 属性将是一个无意义的值。

    +

    ProgressEvent.lengthComputable 只读属性是一个布尔{{domxref("Boolean")}} 标志,表示{{domxref("ProgressEvent")}} 所关联的资源是否具有可以计算的长度。否则 ,{{domxref("ProgressEvent.total")}} 属性将是一个无意义的值。

    语法

    diff --git a/files/zh-cn/web/api/promiserejectionevent/index.html b/files/zh-cn/web/api/promiserejectionevent/index.html index c11aad24d3e8b1..28d8f798c443b5 100644 --- a/files/zh-cn/web/api/promiserejectionevent/index.html +++ b/files/zh-cn/web/api/promiserejectionevent/index.html @@ -5,13 +5,13 @@ ---
    {{APIRef("HTML DOM")}}
    -

    PromiseRejectionEvent 接口表示出现在 JavaScript {{jsxref("Promise")}}s 被 rejecte (拒绝) 时触发的事件。这些事件对遥测 (远程测试) 和调试特别的有用。

    +

    PromiseRejectionEvent 接口表示出现在 JavaScript {{jsxref("Promise")}}s 被 rejecte (拒绝) 时触发的事件。这些事件对遥测 (远程测试) 和调试特别的有用。

    构造函数

    {{domxref("PromiseRejectionEvent.PromiseRejectionEvent", "PromiseRejectionEvent()")}}
    -
    用给定的参数生成一个 PromiseRejectionEvent 事件。
    +
    用给定的参数生成一个 PromiseRejectionEvent 事件。

    属性

    @@ -27,15 +27,15 @@

    属性

    方法

    -

    没有特定的方法; 从它的父级 {{domxref("Event")}}继承方法。

    +

    没有特定的方法; 从它的父级 {{domxref("Event")}}继承方法。

    事件

    {{Event("unhandledrejection")}}
    -
    在一个 JavaScript {{jsxref("Promise")}} 被 reject(拒绝) 但是没有 reject 处理函数来处理时触发。
    +
    在一个 JavaScript {{jsxref("Promise")}} 被 reject(拒绝) 但是没有 reject 处理函数来处理时触发。
    {{Event("rejectionhandled")}}
    -
    在一个 JavaScript {{jsxref("Promise")}} 被 reject 时触发,在 reject 后由 promise 的 reject 处理函数处理。 
    +
    在一个 JavaScript {{jsxref("Promise")}} 被 reject 时触发,在 reject 后由 promise 的 reject 处理函数处理。

    例子

    diff --git a/files/zh-cn/web/api/promiserejectionevent/promise/index.html b/files/zh-cn/web/api/promiserejectionevent/promise/index.html index 92e9b5a1a665ae..205b1e30d9b2b9 100644 --- a/files/zh-cn/web/api/promiserejectionevent/promise/index.html +++ b/files/zh-cn/web/api/promiserejectionevent/promise/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef("HTML DOM") }}
    -

     {{domxref("PromiseRejectionEvent")}}事件对象的promise属性是只读的,表明 Promise 被 reject 的原因。您可以通过检查{{domxref("PromiseRejectionEvent.reason")}}来了解 Promise 为什么被 reject。

    +

    {{domxref("PromiseRejectionEvent")}}事件对象的promise属性是只读的,表明 Promise 被 reject 的原因。您可以通过检查{{domxref("PromiseRejectionEvent.reason")}}来了解 Promise 为什么被 reject。

    Syntax

    @@ -13,7 +13,7 @@

    Syntax

    Value

    -

    一个被 reject 的,并且错误未被处理的{{jsxref("Promise")}} 

    +

    一个被 reject 的,并且错误未被处理的{{jsxref("Promise")}}

    Examples

    diff --git a/files/zh-cn/web/api/promiserejectionevent/promiserejectionevent/index.html b/files/zh-cn/web/api/promiserejectionevent/promiserejectionevent/index.html index 304e4628faa781..21573c622c79fa 100644 --- a/files/zh-cn/web/api/promiserejectionevent/promiserejectionevent/index.html +++ b/files/zh-cn/web/api/promiserejectionevent/promiserejectionevent/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef("HTML DOM")}}
    -

    PromiseRejectionEvent() 构造器返回一个新创建的 {{domxref("PromiseRejectionEvent")}},代表一个 JavaScript {{jsxref("Promise")}}被 rejected 时触发的事件。

    +

    PromiseRejectionEvent() 构造器返回一个新创建的 {{domxref("PromiseRejectionEvent")}},代表一个 JavaScript {{jsxref("Promise")}}被 rejected 时触发的事件。

    语法

    diff --git a/files/zh-cn/web/api/push_api/index.html b/files/zh-cn/web/api/push_api/index.html index b61fed017b1ed2..9ea4fae9fcbbe3 100644 --- a/files/zh-cn/web/api/push_api/index.html +++ b/files/zh-cn/web/api/push_api/index.html @@ -17,24 +17,24 @@

    Push API 给与了 Web 应用程序接收从服务器发出的推送消息的能力,无论 Web 应用程序是否在用户设备前台,甚至刚加载完成。这样,开发人员就可以向用户投放异步通知和更新,从而让用户能更及时地获取新内容。

    -

    注意: 本文档涵盖了 W3C Push API 规范; 如果您正在寻找有关 Firefox OS 专有推送机制的文档,请参阅 Simple Push.

    +

    注意: 本文档涵盖了 W3C Push API 规范; 如果您正在寻找有关 Firefox OS 专有推送机制的文档,请参阅 Simple Push.

    Push 的概念及用法

    -

    对于一个应用来说,要想要接收到推送消息,需要有一个被激活的 service worker。当 service worker 处于激活状态时,可以使用 {{domxref("PushManager.subscribe()")}} 来订阅推送通知。

    +

    对于一个应用来说,要想要接收到推送消息,需要有一个被激活的 service worker。当 service worker 处于激活状态时,可以使用 {{domxref("PushManager.subscribe()")}} 来订阅推送通知。

    {{domxref("PushSubscription")}} 的结果包含了应用需要发送的推送消息的所有信息:端点及发送数据需要的加密密钥。

    -

    Service worker 会在必要的时候启动并接收接下来的推送消息,传递给 {{domxref("ServiceWorkerGlobalScope.onpush")}} 事件句柄。该方法允许将接收到的推送消息使用在应用上,例如通过显示一条通知(使用 {{domxref("ServiceWorkerRegistration.showNotification()")}})

    +

    Service worker 会在必要的时候启动并接收接下来的推送消息,传递给 {{domxref("ServiceWorkerGlobalScope.onpush")}} 事件句柄。该方法允许将接收到的推送消息使用在应用上,例如通过显示一条通知(使用 {{domxref("ServiceWorkerRegistration.showNotification()")}})

    -

    每一个订阅对 service worker 来说都是唯一的。同时订阅的端点也是一个唯一的 功能性 URL:端点的信息是给应用发送信息的全部必要条件。所以端点地址需要保证隐私,否则其他应用也可以向你的应用发送消息。

    +

    每一个订阅对 service worker 来说都是唯一的。同时订阅的端点也是一个唯一的 功能性 URL:端点的信息是给应用发送信息的全部必要条件。所以端点地址需要保证隐私,否则其他应用也可以向你的应用发送消息。

    -

    激活一个 service worker 来提供推送消息会导致资源消耗的增加,尤其是电池。不同的浏览器对此有不同的方案——目前为止还没有标准的机制。Firefox 允许对发送给应用的推送消息做数量限制(配额)。该限制会在站点每一次被访问之后刷新。相比之下,Chrome 选择不做限制,但要求站点在每一次消息到达后都显示通知,这样可以让用户确认他们仍希望接收消息并确保用户可见性。

    +

    激活一个 service worker 来提供推送消息会导致资源消耗的增加,尤其是电池。不同的浏览器对此有不同的方案——目前为止还没有标准的机制。Firefox 允许对发送给应用的推送消息做数量限制(配额)。该限制会在站点每一次被访问之后刷新。相比之下,Chrome 选择不做限制,但要求站点在每一次消息到达后都显示通知,这样可以让用户确认他们仍希望接收消息并确保用户可见性。

    -

     

    +

    -

     

    +

    Note: 从 Gecko 44 开始,当新的通知触发时,每个应用程序允许的推送消息配额不会增加,而另一个仍然可见,持续三秒钟。 这可以处理收到通知突发的情况,而不是所有通知都会产生可见通知。

    @@ -44,11 +44,11 @@

    Push 的概念及用法

    Note:早于 52 的 Chrome 版本要求您在Google Cloud Messaging上设置项目以发送推送消息,并在发送推送通知时使用关联的项目编号和 API 密钥。 它还需要一个应用程序清单,其中包含一些使用此服务的特殊参数。

    -

     

    +

    -

     

    +

    -

     

    +

    接口

    @@ -65,7 +65,7 @@

    接口

    Service worker additions

    -

    The following additions to the Service Worker API have been specified in the Push API spec to provide an entry point for using Push messages. They also monitor and respond to push and subscription change events.

    +

    The following additions to the Service Worker API have been specified in the Push API spec to provide an entry point for using Push messages. They also monitor and respond to push and subscription change events.

    {{domxref("ServiceWorkerRegistration.pushManager")}} {{readonlyinline}}
    @@ -78,7 +78,7 @@

    Service worker additions

    示例

    -

    Mozilla's ServiceWorker Cookbook 包含很多关于 Push 有用的示例。

    +

    Mozilla's ServiceWorker Cookbook 包含很多关于 Push 有用的示例。

    规范

    @@ -96,10 +96,10 @@

    PushMessageData

    另见

    -

     

    +

    diff --git a/files/zh-cn/web/api/pushmanager/getsubscription/index.html b/files/zh-cn/web/api/pushmanager/getsubscription/index.html index 44a1178df0c802..44fff544050073 100644 --- a/files/zh-cn/web/api/pushmanager/getsubscription/index.html +++ b/files/zh-cn/web/api/pushmanager/getsubscription/index.html @@ -11,7 +11,7 @@ ---

    {{SeeCompatTable}}{{ApiRef("Push API")}}

    -

    {{domxref("PushManager")}} 接口的方法PushManager.getSubscription() 尝试获取已有的推送订阅。

    +

    {{domxref("PushManager")}} 接口的方法PushManager.getSubscription() 尝试获取已有的推送订阅。

    它返回一个 {{jsxref("Promise")}} 用来 resolve 出一个包含现有订阅的详细信息的{{domxref("PushSubscription")}} 对象。如果不存在已有的推送订阅,返回 null。

    @@ -29,7 +29,7 @@

    返回值

    例子

    -

    这个代码片段来自 push messaging and notification sample. (没有能直接运行的例子.)

    +

    这个代码片段来自 push messaging and notification sample. (没有能直接运行的例子.)

    // We need the service worker registration to check for a subscription
       navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
    diff --git a/files/zh-cn/web/api/pushmanager/index.html b/files/zh-cn/web/api/pushmanager/index.html
    index ef8bc935ef0e9d..d086da17652836 100644
    --- a/files/zh-cn/web/api/pushmanager/index.html
    +++ b/files/zh-cn/web/api/pushmanager/index.html
    @@ -15,12 +15,12 @@
     ---
     

    {{ApiRef("Push API")}}

    -

    Push API 的PushManager接口提供了从第三方服务器接收消息通知的能力。

    +

    Push APIPushManager接口提供了从第三方服务器接收消息通知的能力。

    可以通过 ServiceWorkerRegistration.pushManager 属性获得

    -

    注意: 这个属性替代了已被废弃的{{domxref("PushRegistrationManager")}}

    +

    注意: 这个属性替代了已被废弃的{{domxref("PushRegistrationManager")}}

    Properties

    @@ -33,7 +33,7 @@

    Methods

    {{domxref("PushManager.getSubscription()")}}
    用于获取已经存在的 push 订阅。返回一个{{jsxref("Promise")}},这个{{jsxref("Promise")}}包装着 push 订阅信息的{{domxref("PushSubscription")}}对象。如果没有已经存在的订阅,则返回null
    {{domxref("PushManager.permissionState()")}}
    -
    返回一个{{jsxref("Promise")}},标识这当前{{domxref("PushManager")}}的权限状态,只能是'granted','denied' ,'prompt'中的一种。
    +
    返回一个{{jsxref("Promise")}},标识这当前{{domxref("PushManager")}}的权限状态,只能是'granted','denied''prompt'中的一种。
    {{domxref("PushManager.subscribe()")}}
    向 push 服务器(即第三方 push server)发起订阅。返回一个{{jsxref("Promise")}},这个{{jsxref("Promise")}}包装着 push 订阅信息的{{domxref("PushSubscription")}}对象。如果当前的 service worke 没有已经存在的订阅,则会创建一个新的 push 订阅。
    @@ -42,7 +42,7 @@

    已废弃的方法

    {{domxref("PushManager.hasPermission()")}} {{deprecated_inline}}
    -
    (已废弃)返回一个{{jsxref("Promise")}},标识着该 webapp 的PushPermissionStatus状态,该状态只能是'granted','denied' ,'default'中的一种。目前已经被{{domxref("PushManager.permissionState()")}}取代。
    +
    (已废弃)返回一个{{jsxref("Promise")}},标识着该 webapp 的PushPermissionStatus状态,该状态只能是'granted','denied''default'中的一种。目前已经被{{domxref("PushManager.permissionState()")}}取代。
    {{domxref("PushManager.register()")}} {{deprecated_inline}}
    (已废弃)发起注册 push 订阅。目前已经被{{domxref("PushManager.subscribe()")}}取代。
    {{domxref("PushManager.registrations()")}} {{deprecated_inline}}
    @@ -64,9 +64,9 @@

    示例

    function(pushSubscription) { console.log(pushSubscription.subscriptionId); console.log(pushSubscription.endpoint); -  // 现在我们已经获取到了服务器需要的 push 订阅信息,我们可以使用 XHR 将它们发送给服务器 + // 现在我们已经获取到了服务器需要的 push 订阅信息,我们可以使用 XHR 将它们发送给服务器 }, function(error) { -  // 在开发环境下打印错误是很有帮助的。在生产环境下,将错误上报到服务器也是十分必要的 + // 在开发环境下打印错误是很有帮助的。在生产环境下,将错误上报到服务器也是十分必要的 console.log(error); } ); diff --git a/files/zh-cn/web/api/pushmanager/subscribe/index.html b/files/zh-cn/web/api/pushmanager/subscribe/index.html index d06f36e4b99306..a7d981b22b9651 100644 --- a/files/zh-cn/web/api/pushmanager/subscribe/index.html +++ b/files/zh-cn/web/api/pushmanager/subscribe/index.html @@ -5,9 +5,9 @@ ---

    {{SeeCompatTable}}{{ApiRef("Push API")}}

    -

    {{domxref("PushManager")}}  的 subscribe() 接口订阅了一个推送服务。

    +

    {{domxref("PushManager")}} 的 subscribe() 接口订阅了一个推送服务。

    -

    返回一个 {{jsxref("Promise")}} 形式的  {{domxref("PushSubscription")}} 对象,该对象包含了推送订阅详情。如果当前 service worker 没有已存在的订阅,则会创建一个新的推送订阅。

    +

    返回一个 {{jsxref("Promise")}} 形式的 {{domxref("PushSubscription")}} 对象,该对象包含了推送订阅详情。如果当前 service worker 没有已存在的订阅,则会创建一个新的推送订阅。

    语法

    @@ -20,14 +20,14 @@

    参数

    一个包含可选配置参数的对象。包含以下属性:
    • userVisibleOnly: 布尔值,表示返回的推送订阅将只能被用于对用户可见的消息。
    • -
    • applicationServerKey:推送服务器用来向客户端应用发送消息的公钥。该值是应用程序服务器生成的签名密钥对的一部分,可使用在 P-256 曲线上实现的椭圆曲线数字签名(ECDSA)。可以是{{domxref("DOMString")}} 或 {{domxref("ArrayBuffer")}}。
    • +
    • applicationServerKey:推送服务器用来向客户端应用发送消息的公钥。该值是应用程序服务器生成的签名密钥对的一部分,可使用在 P-256 曲线上实现的椭圆曲线数字签名(ECDSA)。可以是{{domxref("DOMString")}} 或 {{domxref("ArrayBuffer")}}。

    返回值

    -

    返回 {{domxref("PushSubscription")}} 对象的 {{jsxref("Promise")}}。

    +

    返回 {{domxref("PushSubscription")}} 对象的 {{jsxref("Promise")}}。

    示例

    diff --git a/files/zh-cn/web/api/pushmanager/supportedcontentencodings/index.html b/files/zh-cn/web/api/pushmanager/supportedcontentencodings/index.html index 6ff3dfdd14b54d..f68e17bc93cda3 100644 --- a/files/zh-cn/web/api/pushmanager/supportedcontentencodings/index.html +++ b/files/zh-cn/web/api/pushmanager/supportedcontentencodings/index.html @@ -5,7 +5,7 @@ ---

    {{SeeCompatTable}}{{APIRef("Push API")}}

    -

    {{domxref("PushManager")}}的只读方法 supportedContentEncodings 返回一组支持内容编码,可以用在加密信息中发送的消息。

    +

    {{domxref("PushManager")}}的只读方法 supportedContentEncodings 返回一组支持内容编码,可以用在加密信息中发送的消息。

    语法

    diff --git a/files/zh-cn/web/api/range/collapse/index.html b/files/zh-cn/web/api/range/collapse/index.html index 825fd7488fcc6d..ba194528eadbd0 100644 --- a/files/zh-cn/web/api/range/collapse/index.html +++ b/files/zh-cn/web/api/range/collapse/index.html @@ -5,11 +5,11 @@ ---
    {{APIRef("DOM")}}
    -

    Range.collapse() 方法向边界点折叠该 {{domxref("Range")}} 。

    +

    Range.collapse() 方法向边界点折叠该 {{domxref("Range")}} 。

    -

    折叠后的 {{domxref("Range")}} 为空,不包含任何内容。

    +

    折叠后的 {{domxref("Range")}} 为空,不包含任何内容。

    -

    要确定 {{domxref("Range")}} 是否已折叠,使用{{domxref("Range.collapsed")}} 属性。

    +

    要确定 {{domxref("Range")}} 是否已折叠,使用{{domxref("Range.collapsed")}} 属性。

    语法

    @@ -20,7 +20,7 @@

    参数

    toStart {{optional_inline}}
    -
    一个布尔值: true 折叠到 {{domxref("Range")}} 的 start 节点,false 折叠到 end 节点。如果省略,则默认为 false {{experimental_inline}}.
    +
    一个布尔值: true 折叠到 {{domxref("Range")}} 的 start 节点,false 折叠到 end 节点。如果省略,则默认为 false {{experimental_inline}}.

    例子

    diff --git a/files/zh-cn/web/api/range/collapsed/index.html b/files/zh-cn/web/api/range/collapsed/index.html index 8b861ac633e54d..b5ff9929d66851 100644 --- a/files/zh-cn/web/api/range/collapsed/index.html +++ b/files/zh-cn/web/api/range/collapsed/index.html @@ -7,9 +7,9 @@

    {{ APIRef("DOM") }}

    -

     Range.collapsed 是只读属性。它返回一个 {{domxref("Boolean")}} 值表示是否起始点和结束点是同一个位置。 如果返回 true 表示{{domxref("Range")}} 的起始位置和结束位置重合,false 表示不重合。

    +

    Range.collapsed 是只读属性。它返回一个 {{domxref("Boolean")}} 值表示是否起始点和结束点是同一个位置。 如果返回 true 表示{{domxref("Range")}} 的起始位置和结束位置重合,false 表示不重合。

    -

     一个折叠的{{domxref("Range")}} 是空的,不包含内容,表示 Dom 树中的一个点。collapsed 属性是只读的。可以调用 {{domxref("Range.collapse()")}} 方法来折叠选区。

    +

    一个折叠的{{domxref("Range")}} 是空的,不包含内容,表示 Dom 树中的一个点。collapsed 属性是只读的。可以调用 {{domxref("Range.collapse()")}} 方法来折叠选区。

    语法

    diff --git a/files/zh-cn/web/api/range/commonancestorcontainer/index.html b/files/zh-cn/web/api/range/commonancestorcontainer/index.html index 645d2391c08790..bbe434282109e2 100644 --- a/files/zh-cn/web/api/range/commonancestorcontainer/index.html +++ b/files/zh-cn/web/api/range/commonancestorcontainer/index.html @@ -7,9 +7,9 @@

    Range.commonAncestorContainer 只读属性,返回目标节点的共有祖先节点。因而需要注意:selectNode 方法中的该值为目标节点的父节点,selectNodeContents 方法中的该值为其本身。

    -

    在某些跨节点的选取操作时,取得最大"公约数"的节点为commonAncestorContainer。即{{domxref("Range.startContainer")}} 和 {{domxref("Range.endContainer")}} 相同的节点是目标节点的 共有祖先节点。

    +

    在某些跨节点的选取操作时,取得最大"公约数"的节点为commonAncestorContainer。即{{domxref("Range.startContainer")}} 和 {{domxref("Range.endContainer")}} 相同的节点是目标节点的 共有祖先节点。

    -

    更改 {{domxref("Node")}}, 请使用 setStart setEnd 及这两种方法的延伸方法 {{domxref("Range")}}.

    +

    更改 {{domxref("Node")}}, 请使用 setStart setEnd 及这两种方法的延伸方法 {{domxref("Range")}}.

    语法

    diff --git a/files/zh-cn/web/api/range/createcontextualfragment/index.html b/files/zh-cn/web/api/range/createcontextualfragment/index.html index c6bdaccb0a9c52..9e46fd9289067b 100644 --- a/files/zh-cn/web/api/range/createcontextualfragment/index.html +++ b/files/zh-cn/web/api/range/createcontextualfragment/index.html @@ -5,7 +5,7 @@ ---
    {{ApiRef("DOM")}}
    -

    Range.createContextualFragment() 方法通过以 range 的开头(选定节点的父级)作为上下文节点来调用 HTML 片段解析算法 或者 XML 片段解析算法来返回 {{domxref("DocumentFragment")}}。如果 range 属于一个其 HTMLness bit 被设置了的  {{domxref("Document")}} 则会应用 HTML 片段解析算法。在 HTML 的情况下,如果上下文节点为 html,由于历史原因,将使用 body 作为上下文来调用片段解析算法。

    +

    Range.createContextualFragment() 方法通过以 range 的开头(选定节点的父级)作为上下文节点来调用 HTML 片段解析算法 或者 XML 片段解析算法来返回 {{domxref("DocumentFragment")}}。如果 range 属于一个其 HTMLness bit 被设置了的 {{domxref("Document")}} 则会应用 HTML 片段解析算法。在 HTML 的情况下,如果上下文节点为 html,由于历史原因,将使用 body 作为上下文来调用片段解析算法。

    语法

    diff --git a/files/zh-cn/web/api/range/endoffset/index.html b/files/zh-cn/web/api/range/endoffset/index.html index be3fe684145f77..53dbb16b776602 100644 --- a/files/zh-cn/web/api/range/endoffset/index.html +++ b/files/zh-cn/web/api/range/endoffset/index.html @@ -10,9 +10,9 @@ ---
    {{ApiRef("DOM")}}
    -

    只读属性 Range.endOffset 返回代表 Range 结束位置在 {{domxref("Range.endContainer")}} 中的偏移值的数字。

    +

    只读属性 Range.endOffset 返回代表 Range 结束位置在 {{domxref("Range.endContainer")}} 中的偏移值的数字。

    -

    如果 endContainer 的 {{domxref("Node")}} 类型为 {{domxref("Text")}}, {{domxref("Comment")}},或 {{domxref("CDATASection")}},偏移值是 endContainer 节点开头到 {{domxref("Range")}} 末尾的总字符个数。对其他类型的 {{domxref("Node")}} , endOffsetendContainer 开头到 {{domxref("Range")}} 末尾的总 {{domxref("Node")}} 个数。如需修改 endOffset 的值, 使用 {{domxref("Range.setEnd")}} 方法。

    +

    如果 endContainer 的 {{domxref("Node")}} 类型为 {{domxref("Text")}}, {{domxref("Comment")}},或 {{domxref("CDATASection")}},偏移值是 endContainer 节点开头到 {{domxref("Range")}} 末尾的总字符个数。对其他类型的 {{domxref("Node")}} , endOffsetendContainer 开头到 {{domxref("Range")}} 末尾的总 {{domxref("Node")}} 个数。如需修改 endOffset 的值, 使用 {{domxref("Range.setEnd")}} 方法。

    语法

    diff --git a/files/zh-cn/web/api/range/extractcontents/index.html b/files/zh-cn/web/api/range/extractcontents/index.html index c837dbc3050ec0..518e0b19d31c42 100644 --- a/files/zh-cn/web/api/range/extractcontents/index.html +++ b/files/zh-cn/web/api/range/extractcontents/index.html @@ -5,7 +5,7 @@ ---

    {{ApiRef("DOM")}}

    -

    Range.extractContents() 方法移动了{{ domxref("Range") }} 中的内容从文档树到{{ domxref("DocumentFragment") }}(文档片段对象)。

    +

    Range.extractContents() 方法移动了{{ domxref("Range") }} 中的内容从文档树到{{ domxref("DocumentFragment") }}(文档片段对象)。

    使用 DOM 事件添加的事件侦听器在提取期间不会保留。 HTML 属性事件将按{{domxref("Node.cloneNode()")}}方法的原样保留或复制。 HTML id 属性也会被克隆,如果提取了部分选定的节点并将其附加到文档中,则可能导致无效的文档。

    diff --git a/files/zh-cn/web/api/range/getclientrects/index.html b/files/zh-cn/web/api/range/getclientrects/index.html index f01d9301cf5838..027f5ac071fb26 100644 --- a/files/zh-cn/web/api/range/getclientrects/index.html +++ b/files/zh-cn/web/api/range/getclientrects/index.html @@ -12,7 +12,7 @@ ---
    {{ApiRef("DOM")}}
    -

    Range.getClientRects() 方法返回一个 {{ domxref("DOMRect") }} 对象列表,表示 range 在屏幕上所占的区域。这个列表相当于汇集了范围中所有元素调用 {{ domxref("Element.getClientRects()") }} 方法所得的结果。

    +

    Range.getClientRects() 方法返回一个 {{ domxref("DOMRect") }} 对象列表,表示 range 在屏幕上所占的区域。这个列表相当于汇集了范围中所有元素调用 {{ domxref("Element.getClientRects()") }} 方法所得的结果。

    语法

    diff --git a/files/zh-cn/web/api/range/index.html b/files/zh-cn/web/api/range/index.html index afd33e09026072..fd54be8b939a1b 100644 --- a/files/zh-cn/web/api/range/index.html +++ b/files/zh-cn/web/api/range/index.html @@ -59,14 +59,14 @@

    定位方法

    {{ domxref("Range.selectNode()")}}
    使 Range 包含某个{{ domxref("Node", "节点") }}及其内容。
    {{ domxref("Range.selectNodeContents()")}}
    -
    使 Range 包含某个{{ domxref("Node", "节点") }}的内容。
    +
    使 Range 包含某个{{ domxref("Node", "节点") }}的内容。
    {{ domxref("Range.collapse()")}}
    Range 折叠至其端点(boundary points,起止点,指起点或终点,下同)之一。

    编辑方法

    -

    通过以下方法,可以从 Range 中获得节点,改变 Range 的内容。

    +

    通过以下方法,可以从 Range 中获得节点,改变 Range 的内容。

    {{ domxref("Range.cloneContents()")}}
    diff --git a/files/zh-cn/web/api/range/insertnode/index.html b/files/zh-cn/web/api/range/insertnode/index.html index df0287e89f60a5..80d1521df78012 100644 --- a/files/zh-cn/web/api/range/insertnode/index.html +++ b/files/zh-cn/web/api/range/insertnode/index.html @@ -5,7 +5,7 @@ ---
    {{ApiRef("DOM")}}
    -

    Range.insertNode() 是在{{domxref("Range")}}的起始位置插入节点的方法。

    +

    Range.insertNode() 是在{{domxref("Range")}}的起始位置插入节点的方法。

    新节点是插入在 Range 起始位置。如果将新节点添加到一个文本{{domxref("Node", "节点")}},则该节点在插入点处被拆分,插入发生在两个文本节点之间

    diff --git a/files/zh-cn/web/api/range/intersectsnode/index.html b/files/zh-cn/web/api/range/intersectsnode/index.html index 16b01052f1df73..70ade6c4a73be2 100644 --- a/files/zh-cn/web/api/range/intersectsnode/index.html +++ b/files/zh-cn/web/api/range/intersectsnode/index.html @@ -5,7 +5,7 @@ ---
    {{ApiRef("DOM")}} {{SeeCompatTable}}
    -

    Range.intersectsNode() 方法返回一个布尔值,表明其给定的 {{domxref("Node")}} 节点是否与{{domxref("Range")}}的范围相交

    +

    Range.intersectsNode() 方法返回一个布尔值,表明其给定的 {{domxref("Node")}} 节点是否与{{domxref("Range")}}的范围相交

    Syntax

    diff --git a/files/zh-cn/web/api/range/range/index.html b/files/zh-cn/web/api/range/range/index.html index 80ed3fde2f0c5c..4e05cc45f270ea 100644 --- a/files/zh-cn/web/api/range/range/index.html +++ b/files/zh-cn/web/api/range/range/index.html @@ -5,7 +5,7 @@ ---

    {{ APIRef("DOM") }}{{seeCompatTable}}

    -

    构造函数 Range() 返回一个新创建的 {{domxref("Range")}} 对象,新创建的对象属于全局 {{domxref("Document")}} 对象。

    +

    构造函数 Range() 返回一个新创建的 {{domxref("Range")}} 对象,新创建的对象属于全局 {{domxref("Document")}} 对象。

    语法

    diff --git a/files/zh-cn/web/api/range/selectnode/index.html b/files/zh-cn/web/api/range/selectnode/index.html index ab8ebab7e47369..216f6f37083ca7 100644 --- a/files/zh-cn/web/api/range/selectnode/index.html +++ b/files/zh-cn/web/api/range/selectnode/index.html @@ -5,7 +5,7 @@ ---

    {{ApiRef("DOM")}}

    -

    Range.selectNode() 方法将 {{domxref("Range")}} 设置为包含整个 {{domxref("Node")}} 及其内容。{{domxref("Range")}} 的起始和结束节点的父节点与 referenceNode 的父节点相同。

    +

    Range.selectNode() 方法将 {{domxref("Range")}} 设置为包含整个 {{domxref("Node")}} 及其内容。{{domxref("Range")}} 的起始和结束节点的父节点与 referenceNode 的父节点相同。

    语法

    diff --git a/files/zh-cn/web/api/range/selectnodecontents/index.html b/files/zh-cn/web/api/range/selectnodecontents/index.html index a734ade61005de..3b86de29ecc29d 100644 --- a/files/zh-cn/web/api/range/selectnodecontents/index.html +++ b/files/zh-cn/web/api/range/selectnodecontents/index.html @@ -12,7 +12,7 @@

    Range.selectNodeContents() 方法用于设置 {{ domxref("Range") }},使其包含一个 {{ domxref("Node") }} 的内容。

    -

    {{ domxref("Range") }} 的起始和结束节点的父节点即为引用节点。 startOffset 为 0,  endOffset 则是引用节点包含的字符数或子节点个数。

    +

    {{ domxref("Range") }} 的起始和结束节点的父节点即为引用节点。 startOffset 为 0, endOffset 则是引用节点包含的字符数或子节点个数。

    语法

    @@ -35,7 +35,7 @@

    示例

    实时样例

    -

    这个例子让用户使用按钮选择或取消选择一个段落。{{domxref("Document.createRange()")}}、 Range.selectNodeContents() 和 {{domxref("Selection.addRange()")}} 用于选择内容。{{domxref("Window.getSelection()")}} 和 {{domxref("Selection.removeAllRanges()")}} 用于取消选择。

    +

    这个例子让用户使用按钮选择或取消选择一个段落。{{domxref("Document.createRange()")}}、 Range.selectNodeContents() 和 {{domxref("Selection.addRange()")}} 用于选择内容。{{domxref("Window.getSelection()")}} 和 {{domxref("Selection.removeAllRanges()")}} 用于取消选择。

    HTML

    diff --git a/files/zh-cn/web/api/range/setend/index.html b/files/zh-cn/web/api/range/setend/index.html index 5dfa13fe4bee9f..90e91a35c6e8f8 100644 --- a/files/zh-cn/web/api/range/setend/index.html +++ b/files/zh-cn/web/api/range/setend/index.html @@ -5,15 +5,15 @@ - 范围对象 translation_of: Web/API/Range/setEnd --- -

    Range.setEnd()方法用于设置 Range的结束位置。

    +

    Range.setEnd()方法用于设置 Range的结束位置。

    -

     

    +

    -

    如果结束节点类型是 TextCommentCDATASection之一,那么 endOffset 指的是从结束节点算起字符的偏移量。 对于其他 Node 类型节点,endOffset 是指从结束结点开始算起子节点的偏移量。

    +

    如果结束节点类型是 TextCommentCDATASection之一,那么 endOffset 指的是从结束节点算起字符的偏移量。 对于其他 Node 类型节点,endOffset 是指从结束结点开始算起子节点的偏移量。

    如果设置的结束点在起始点之上(在文档中的位置),将会导致选区折叠,起始点和结束点都会被设置为指定的结束位置。

    -

     

    +

    语法

    @@ -24,7 +24,7 @@

    参数

    endNode
    -
    endNode用于设定 Range的结束位置。
    +
    endNode用于设定 Range的结束位置。
    endOffset
    必须为不小于 0 的整数。表示从endNode的结束位置算起的偏移量。
    diff --git a/files/zh-cn/web/api/range/setstart/index.html b/files/zh-cn/web/api/range/setstart/index.html index fdece8dd5d958b..81e7345b4f3ef9 100644 --- a/files/zh-cn/web/api/range/setstart/index.html +++ b/files/zh-cn/web/api/range/setstart/index.html @@ -5,11 +5,11 @@ ---

    {{ApiRef("DOM")}}

    -

     Range.setStart() 方法用于设置 {{ domxref("Range") }}的开始位置。

    +

    Range.setStart() 方法用于设置 {{ domxref("Range") }}的开始位置。

    如果起始节点类型是 TextCommentCDATASection之一,那么 startOffset 指的是从起始节点算起字符的偏移量。 对于其他 Node 类型节点,startOffset 是指从起始结点开始算起子节点的偏移量。

    -

     如果设置的起始位点在结束点之下(在文档中的位置),将会导致选区折叠,起始点和结束点都会被设置为指定的起始位置。

    +

    如果设置的起始位点在结束点之下(在文档中的位置),将会导致选区折叠,起始点和结束点都会被设置为指定的起始位置。

    语法

    @@ -21,8 +21,8 @@

    参数

    startNode
    {{ domxref("startNode") }} 用于设定 {{ domxref("Range") }}的起始位置。
    -
    startOffset 
    -
     必须为不小于 0 的整数。表示从startNode的开始位置算起的偏移量。
    +
    startOffset
    +
    必须为不小于 0 的整数。表示从startNode的开始位置算起的偏移量。

    例子

    diff --git a/files/zh-cn/web/api/range/setstartbefore/index.html b/files/zh-cn/web/api/range/setstartbefore/index.html index 565ce7ed23d363..10972548120f00 100644 --- a/files/zh-cn/web/api/range/setstartbefore/index.html +++ b/files/zh-cn/web/api/range/setstartbefore/index.html @@ -5,7 +5,7 @@ ---
    {{ApiRef("DOM")}}
    -

    Range.setStartBefore() 方法相对另一个 {{domxref("Node")}}来设置一个{{domxref("Range")}} 的开始位置。{{domxref("Range")}}的开始节点(focusNode)的父节点,和  referenceNode的父节点是同一个。

    +

    Range.setStartBefore() 方法相对另一个 {{domxref("Node")}}来设置一个{{domxref("Range")}} 的开始位置。{{domxref("Range")}}的开始节点(focusNode)的父节点,和 referenceNode的父节点是同一个。

    Syntax

    diff --git a/files/zh-cn/web/api/range/startcontainer/index.html b/files/zh-cn/web/api/range/startcontainer/index.html index 6386a0267de49a..fd58874fba9123 100644 --- a/files/zh-cn/web/api/range/startcontainer/index.html +++ b/files/zh-cn/web/api/range/startcontainer/index.html @@ -3,13 +3,13 @@ slug: Web/API/Range/startContainer translation_of: Web/API/Range/startContainer --- -

     

    +

    -

     

    +

    Range.startContainer 是只读属性,返回 Range 开始的节点。要更改节点的起始位置,请使用 Range.setStart() 方法。

    -

     

    +

    Syntax

    diff --git a/files/zh-cn/web/api/range/startoffset/index.html b/files/zh-cn/web/api/range/startoffset/index.html index 7578dece58c044..0e4e16101ab961 100644 --- a/files/zh-cn/web/api/range/startoffset/index.html +++ b/files/zh-cn/web/api/range/startoffset/index.html @@ -10,11 +10,11 @@ ---

    {{ ApiRef("Range") }}

    -

    Range.startOffset 是一个只读属性,用于返回一个表示 Range 在 startContainer 中的起始位置的数字。

    +

    Range.startOffset 是一个只读属性,用于返回一个表示 RangestartContainer 中的起始位置的数字。

    -

    如果 startContainer 是一个文本({{domxref("Text")}})、注释({{domxref("Comment")}})或者 CDATA 区块({{domxref("CDATASection")}})节点,那么返回的偏移量是从 startContainer 开始到 {{domxref("Range")}} 的边界点的字符数量。对于其他的节点类型, startOffset 返回 startContainer 到边界点的子节点数量。

    +

    如果 startContainer 是一个文本({{domxref("Text")}})、注释({{domxref("Comment")}})或者 CDATA 区块({{domxref("CDATASection")}})节点,那么返回的偏移量是从 startContainer 开始到 {{domxref("Range")}} 的边界点的字符数量。对于其他的节点类型, startOffset 返回 startContainer 到边界点的子节点数量。

    -

    可使用{{domxref("Range.setStart")}} 方法改变 Range 的 startOffset 位置。

    +

    可使用{{domxref("Range.setStart")}} 方法改变 RangestartOffset 位置。

    语法

    diff --git a/files/zh-cn/web/api/range/surroundcontents/index.html b/files/zh-cn/web/api/range/surroundcontents/index.html index 70ce3bd80ccea4..d059bcd7c3f76f 100644 --- a/files/zh-cn/web/api/range/surroundcontents/index.html +++ b/files/zh-cn/web/api/range/surroundcontents/index.html @@ -11,9 +11,9 @@ ---
    {{ ApiRef("Range") }}
    -

    Range.surroundContents() 方法将 {{ domxref("Range") }} 对象的内容移动到一个新的节点,并将新节点放到这个范围的起始处。

    +

    Range.surroundContents() 方法将 {{ domxref("Range") }} 对象的内容移动到一个新的节点,并将新节点放到这个范围的起始处。

    -

    这个方法与 newNode.appendChild(range.extractContents()); range.insertNode(newNode) 等价。应用以后, newNode 包含在 range 的边界点中。

    +

    这个方法与 newNode.appendChild(range.extractContents()); range.insertNode(newNode) 等价。应用以后, newNode 包含在 range 的边界点中。

    然而,如果 {{ domxref("Range") }} 断开了一个非 {{ domxref("Text") }} 节点,只包含了节点的其中一个边界点,就会抛出异常。也就是说,不像上述的等价方法,如果节点仅有一部分被选中,则不会被克隆,整个操作会失败。

    diff --git a/files/zh-cn/web/api/readablestream/index.html b/files/zh-cn/web/api/readablestream/index.html index 07e62de7865771..764e04bda96818 100644 --- a/files/zh-cn/web/api/readablestream/index.html +++ b/files/zh-cn/web/api/readablestream/index.html @@ -11,7 +11,7 @@ ---

    {{APIRef("Fetch")}}

    -

    流操作 API 中的ReadableStream 接口呈现了一个可读取的二进制流操作。Fetch API 通过 {{domxref("Response")}} 的属性 {{domxref("Body.body", "body")}} 提供了一个具体的 ReadableStream 对象。

    +

    流操作 API 中的ReadableStream 接口呈现了一个可读取的二进制流操作。Fetch API 通过 {{domxref("Response")}} 的属性 {{domxref("Body.body", "body")}} 提供了一个具体的 ReadableStream 对象。

    构造函数

    @@ -23,7 +23,7 @@

    构造函数

    属性

    -
    {{domxref("ReadableStream.locked")}} {{readonlyInline}}
    +
    {{domxref("ReadableStream.locked")}} {{readonlyInline}}
    locked 返回这个可读流是否被一个读取器锁定
    @@ -31,7 +31,7 @@

    方法

    {{domxref("ReadableStream.cancel()")}}
    -
    取消读取流,读取方发出一个信号,表示对这束流失去兴趣。可以传入 reason 参数表示取消原因,这个原因将传回给调用方。
    +
    取消读取流,读取方发出一个信号,表示对这束流失去兴趣。可以传入 reason 参数表示取消原因,这个原因将传回给调用方。
    {{domxref("ReadableStream.getIterator()")}}
    创建一个异步的 ReadableStream 迭代器并将流锁定于其上。一旦流被锁定,其他读取器将不能读取它,直到它被释放。
    {{domxref("ReadableStream.getReader()")}}
    @@ -47,16 +47,16 @@

    方法

    {{domxref("ReadableStream.pipeTo()")}}
    将当前 ReadableStream 管道输出到给定的 {{domxref("WritableStream")}},并返回一个 promise,输出过程成功时返回 fulfilled,在发生错误时返回 rejected。
    {{domxref("ReadableStream.tee()")}}
    -
    tee 方法(tee 本意是将高尔夫球放置在球座上)tees 了可读流,返回包含两个{{domxref("ReadableStream")}} 实例分支的数组,每个元素接收了相同的传输数据。
    +
    tee 方法(tee 本意是将高尔夫球放置在球座上)tees 了可读流,返回包含两个{{domxref("ReadableStream")}} 实例分支的数组,每个元素接收了相同的传输数据。
    {{domxref("ReadableStream[@@asyncIterator]()")}}
    -
    getIterator 方法的别名。
    +
    getIterator 方法的别名。

    示例

    下面的例子,创建了一个智能的 {{domxref("Response")}} 来流式化从别的资源处取得的 HTML 片段。

    -

    它演示了 {{domxref("ReadableStream")}} 与 {{domxref("Uint8Array")}} 的协同用法。

    +

    它演示了 {{domxref("ReadableStream")}} 与 {{domxref("Uint8Array")}} 的协同用法。

    fetch("https://www.example.org/").then((response) => {
       const reader = response.body.getReader();
    diff --git a/files/zh-cn/web/api/readablestream/readablestream/index.html b/files/zh-cn/web/api/readablestream/readablestream/index.html
    index 06df7cef2b74b8..380131de89652a 100644
    --- a/files/zh-cn/web/api/readablestream/readablestream/index.html
    +++ b/files/zh-cn/web/api/readablestream/readablestream/index.html
    @@ -5,7 +5,7 @@
     ---
     
    {{SeeCompatTable}}{{APIRef("Streams")}}
    -

    ReadableStream() 构造器创建并返回包含处理函数的可读流实例。

    +

    ReadableStream() 构造器创建并返回包含处理函数的可读流实例。

    语法

    @@ -15,7 +15,7 @@

    参数

    underlyingSource
    -
    一个包含定义了构造流行为方法和属性的对象。underlyingSource 包括: +
    一个包含定义了构造流行为方法和属性的对象。underlyingSource 包括:
    start(controller)
    这是一个当对象被构造时立刻调用的方法。此方法的内容由开发人员定义,并应着眼于访问流,并执行其他任何必需的设置流功能。如果这个过程是异步完成的,它可以返回一个 promise,表明成功或失败。传递给这个方法的controller是一个{{domxref("ReadableStreamDefaultController")}}或{{domxref("ReadableByteStreamController")}},具体取决于type属性的值。开发人员可以使用此方法在设立期间控制流。
    diff --git a/files/zh-cn/web/api/readablestreamdefaultreader/index.html b/files/zh-cn/web/api/readablestreamdefaultreader/index.html index 2af34864c7dc2d..0951b457d1961c 100644 --- a/files/zh-cn/web/api/readablestreamdefaultreader/index.html +++ b/files/zh-cn/web/api/readablestreamdefaultreader/index.html @@ -6,21 +6,21 @@

    {{APIRef("Streams")}}{{SeeCompatTable}}


    -  Streams API 的 ReadableStreamDefaultReader 的接口 表示一个可被用于读取来自网络提供的流数据 (例如 fetch 请求) 的默认读取器

    + Streams APIReadableStreamDefaultReader 的接口 表示一个可被用于读取来自网络提供的流数据 (例如 fetch 请求) 的默认读取器

    构造方法

    ReadableStreamDefaultReader()
    -
    创建 和 返回 一个 ReadableStreamDefaultReader() 对象实例。
    +
    创建 和 返回 一个 ReadableStreamDefaultReader() 对象实例。

    属性

    ReadableStreamDefaultReader.closed
    -    
    -
    允许你编写 当 stream 结束时 执行的代码 . 如果这个 stream 变成关闭状态或者 reader 的锁 (lock) 被释放 则返回一个状态是 fulfills 的 promise,如果这个 stream 报错则返回 rejects 的 promise.
    + +
    允许你编写 当 stream 结束时 执行的代码 . 如果这个 stream 变成关闭状态或者 reader 的锁 (lock) 被释放 则返回一个状态是 fulfills 的 promise,如果这个 stream 报错则返回 rejects 的 promise.

    方法

    @@ -36,35 +36,35 @@

    方法

    例子

    -

    在下面的例子中,{{domxref("Response")}} 被创建为流 HTML 片段 fetched 来自其他源。

    +

    在下面的例子中,{{domxref("Response")}} 被创建为流 HTML 片段 fetched 来自其他源。

    -

    它展示了一个 {{domxref("ReadableStream")}} 和一个 Uint8Array组合使用的例子。

    +

    它展示了一个 {{domxref("ReadableStream")}} 和一个 Uint8Array组合使用的例子。

    fetch("https://www.example.org/").then((response) => {
    -  const reader = response.body.getReader();
    -  const stream = new ReadableStream({
    -    start(controller) {
    -      // The following function handles each data chunk
    -      function push() {
    -        // "done" is a Boolean and value a "Uint8Array"
    -        return reader.read().then(({ done, value }) => {
    -          // Is there no more data to read?
    -          if (done) {
    -            // Tell the browser that we have finished sending data
    -            controller.close();
    -            return;
    -          }
    -
    -          // Get the data and send it to the browser via the controller
    -          controller.enqueue(value);
    -        }).then(push);
    -      };
    -
    -      push();
    -    }
    -  });
    -
    -  return new Response(stream, { headers: { "Content-Type": "text/html" } });
    +  const reader = response.body.getReader();
    +  const stream = new ReadableStream({
    +    start(controller) {
    +      // The following function handles each data chunk
    +      function push() {
    +        // "done" is a Boolean and value a "Uint8Array"
    +        return reader.read().then(({ done, value }) => {
    +          // Is there no more data to read?
    +          if (done) {
    +            // Tell the browser that we have finished sending data
    +            controller.close();
    +            return;
    +          }
    +
    +          // Get the data and send it to the browser via the controller
    +          controller.enqueue(value);
    +        }).then(push);
    +      };
    +
    +      push();
    +    }
    +  });
    +
    +  return new Response(stream, { headers: { "Content-Type": "text/html" } });
     });
     
    diff --git a/files/zh-cn/web/api/renderingcontext/index.html b/files/zh-cn/web/api/renderingcontext/index.html index 1213754dd1384e..5ab3f7dd046287 100644 --- a/files/zh-cn/web/api/renderingcontext/index.html +++ b/files/zh-cn/web/api/renderingcontext/index.html @@ -6,7 +6,7 @@ ---

    {{APIRef("Canvas API")}}

    -

    RenderingContext 是一个辅助类型,描述下面任何一个渲染上下文:  {{domxref("CanvasRenderingContext2D")}}, {{domxref("WebGLRenderingContext")}} 或者 {{domxref("WebGL2RenderingContext")}}(继承自 WebGLRenderingContext)。

    +

    RenderingContext 是一个辅助类型,描述下面任何一个渲染上下文: {{domxref("CanvasRenderingContext2D")}}, {{domxref("WebGLRenderingContext")}} 或者 {{domxref("WebGL2RenderingContext")}}(继承自 WebGLRenderingContext)。

    这是简化规范的辅助类型,它不是一个接口,也没有对象实现它。

    @@ -27,4 +27,4 @@

    规范描述

    -

     

    \ No newline at end of file +

    \ No newline at end of file diff --git a/files/zh-cn/web/api/request/cache/index.html b/files/zh-cn/web/api/request/cache/index.html index 50f41a0df352da..b1984e7b2ec39b 100644 --- a/files/zh-cn/web/api/request/cache/index.html +++ b/files/zh-cn/web/api/request/cache/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef("Fetch")}}
    -

    cache 作为{{domxref("Request")}} 接口只读属性包含着请求的缓存模式。它控制着请求以何种方式与浏览器的  HTTP 缓存进行交互。

    +

    cache 作为{{domxref("Request")}} 接口只读属性包含着请求的缓存模式。它控制着请求以何种方式与浏览器的 HTTP 缓存进行交互。

    Syntax

    @@ -19,8 +19,8 @@

    Value

  • default — 浏览器从 HTTP 缓存中寻找匹配的请求。
      -
    • 如果缓存匹配上并且有效( fresh), 它将直接从缓存中返回资源。
    • -
    • 如果缓存匹配上但已经过期 ,浏览器将会使用传统( conditional request )的请求方式去访问远程服务器 。如果服务器端显示资源没有改动,它将从缓存中返回资源。否则,如果服务器显示资源变动,那么重新从服务器下载资源更新缓存。
    • +
    • 如果缓存匹配上并且有效( fresh), 它将直接从缓存中返回资源。
    • +
    • 如果缓存匹配上但已经过期 ,浏览器将会使用传统( conditional request )的请求方式去访问远程服务器 。如果服务器端显示资源没有改动,它将从缓存中返回资源。否则,如果服务器显示资源变动,那么重新从服务器下载资源更新缓存。
    • 如果缓存没有匹配,浏览器将会以普通方式请求,并且更新已经下载的资源缓存。
  • @@ -43,7 +43,7 @@

    Value

  • 如果有匹配项 (新的或旧的),则从缓存中返回。
  • 如果没有匹配,浏览器将返回一个错误。
  • - The "only-if-cached" mode can only be used if the request's mode is "same-origin". Cached redirects will be followed if the request's redirect property is "follow" and the redirects do not violate the "same-origin" mode. + The "only-if-cached" mode can only be used if the request's mode is "same-origin". Cached redirects will be followed if the request's redirect property is "follow" and the redirects do not violate the "same-origin" mode.

    Example

    diff --git a/files/zh-cn/web/api/request/clone/index.html b/files/zh-cn/web/api/request/clone/index.html index 27bac5c850d772..509b4015613336 100644 --- a/files/zh-cn/web/api/request/clone/index.html +++ b/files/zh-cn/web/api/request/clone/index.html @@ -7,9 +7,9 @@ -

     {{domxref("Request")}} 接口中的clone() 方法可以创建一个当前Request 对象的副本。

    +

    {{domxref("Request")}} 接口中的clone() 方法可以创建一个当前Request 对象的副本。

    -

     如果响应体{{domxref("Body")}}已经被使用过,那么 clone() 会抛出一个 {{jsxref("TypeError")}}。实际上,clone() 的主要作用就是支持 {{domxref("Body")}} 对象的多次使用

    +

    如果响应体{{domxref("Body")}}已经被使用过,那么 clone() 会抛出一个 {{jsxref("TypeError")}}。实际上,clone() 的主要作用就是支持 {{domxref("Body")}} 对象的多次使用

    语法

    diff --git a/files/zh-cn/web/api/request/headers/index.html b/files/zh-cn/web/api/request/headers/index.html index 63344a88a4ebf0..a3da7905d415fa 100644 --- a/files/zh-cn/web/api/request/headers/index.html +++ b/files/zh-cn/web/api/request/headers/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef("Fetch")}}
    -

    {{domxref("Request")}}接口的只读属性  headers 包含与当前请求关联的{{domxref("Headers")}}对象。

    +

    {{domxref("Request")}}接口的只读属性 headers 包含与当前请求关联的{{domxref("Headers")}}对象。

    语法

    @@ -22,7 +22,7 @@

    例子

    var myRequest = new Request('flowers.jpg');
     var myHeaders = myRequest.headers; // Headers {}
    -

    使用 {{domxref("Headers.append")}} 向 {{domxref("Headers")}} 对象中添加 header;然后,使用第二个 init 参数创建一个新的 Request ,同时,传递 headers 作为一个 init 选项:

    +

    使用 {{domxref("Headers.append")}} 向 {{domxref("Headers")}} 对象中添加 header;然后,使用第二个 init 参数创建一个新的 Request ,同时,传递 headers 作为一个 init 选项:

    var myHeaders = new Headers();
     myHeaders.append('Content-Type', 'image/jpeg');
    @@ -55,13 +55,13 @@ 

    See also

    - + - +

    例子

    diff --git a/files/zh-cn/web/api/selection/extend/index.html b/files/zh-cn/web/api/selection/extend/index.html index 8eaca4f39cf9a3..d3667d54ae40a6 100644 --- a/files/zh-cn/web/api/selection/extend/index.html +++ b/files/zh-cn/web/api/selection/extend/index.html @@ -9,7 +9,7 @@ -

     Selection.extend() 方法移动选中区的焦点到指定的点。选中区的锚点不会移动。选中区将从锚点开始到新的焦点,不管方向。

    +

    Selection.extend() 方法移动选中区的焦点到指定的点。选中区的锚点不会移动。选中区将从锚点开始到新的焦点,不管方向。

    语法

    @@ -22,7 +22,7 @@

    参数

    node
    焦点会被移至此节点内。
    offset {{optional_inline}}
    -
    焦点会被移至 node 内的偏移位置。如果没有指定,使用 0 作为默认值。
    +
    焦点会被移至 node 内的偏移位置。如果没有指定,使用 0 作为默认值。

    规范

    @@ -40,5 +40,5 @@

    相关链接

    -
     
    +
    diff --git a/files/zh-cn/web/api/selection/focusoffset/index.html b/files/zh-cn/web/api/selection/focusoffset/index.html index adeb9c2379c34e..ef201ce0addfb6 100644 --- a/files/zh-cn/web/api/selection/focusoffset/index.html +++ b/files/zh-cn/web/api/selection/focusoffset/index.html @@ -14,7 +14,7 @@ -

    只读属性 Selection.focusOffset 返回选区终点(鼠标松开瞬间所记录的那个点)在焦点({{domxref("Selection.focusNode")}})中的偏移量。返回值从零开始计数,如果选区({{domxref("Selection")}})在焦点({{domxref("Selection.focusNode")}})的第一个字符前结束,返回值为 0。

    +

    只读属性 Selection.focusOffset 返回选区终点(鼠标松开瞬间所记录的那个点)在焦点({{domxref("Selection.focusNode")}})中的偏移量。返回值从零开始计数,如果选区({{domxref("Selection")}})在焦点({{domxref("Selection.focusNode")}})的第一个字符前结束,返回值为 0。

    语法

    diff --git a/files/zh-cn/web/api/selection/getrangeat/index.html b/files/zh-cn/web/api/selection/getrangeat/index.html index 5ee46ea4d5a2a2..f250c53122ac26 100644 --- a/files/zh-cn/web/api/selection/getrangeat/index.html +++ b/files/zh-cn/web/api/selection/getrangeat/index.html @@ -20,9 +20,9 @@

    参数

    range
    -
     将返回 range 对象。
    +
    将返回 range 对象。
    index
    -
    该参数指定需要被处理的子集编号(从零开始计数)。如果该数值被错误的赋予了大于或等于 rangeCount 结果的数字,将会产生错误。
    +
    该参数指定需要被处理的子集编号(从零开始计数)。如果该数值被错误的赋予了大于或等于 rangeCount 结果的数字,将会产生错误。

    例子

    diff --git a/files/zh-cn/web/api/selection/index.html b/files/zh-cn/web/api/selection/index.html index 107e2c3f774113..7f7eb6208faf0f 100644 --- a/files/zh-cn/web/api/selection/index.html +++ b/files/zh-cn/web/api/selection/index.html @@ -11,11 +11,11 @@ ---
    {{ ApiRef("DOM") }}{{SeeCompatTable}}
    -

    Selection 对象表示用户选择的文本范围或插入符号的当前位置。它代表页面中的文本选区,可能横跨多个元素。文本选区由用户拖拽鼠标经过文字而产生。要获取用于检查或修改的 Selection 对象,请调用 {{domxref("window.getSelection()")}}。

    +

    Selection 对象表示用户选择的文本范围或插入符号的当前位置。它代表页面中的文本选区,可能横跨多个元素。文本选区由用户拖拽鼠标经过文字而产生。要获取用于检查或修改的 Selection 对象,请调用 {{domxref("window.getSelection()")}}。

    -

    一般来说,插入光标的位置可通过 Selection 获取,这时它被标记为 Collapsed,这表示选区被压缩至一点,即光标位置。但要注意它与 focus 事件或 {{domxref("Document.activeElement")}} 等的值没有必然联系。

    +

    一般来说,插入光标的位置可通过 Selection 获取,这时它被标记为 Collapsed,这表示选区被压缩至一点,即光标位置。但要注意它与 focus 事件或 {{domxref("Document.activeElement")}} 等的值没有必然联系。

    -

    用户可能从左到右(与文档方向相同)选择文本或从右到左(与文档方向相反)选择文本。anchor 指向用户开始选择的地方,而 focus 指向用户结束选择的地方。如果你使用鼠标选择文本的话,anchor 就指向你按下鼠标键的地方,而 focus 就指向你松开鼠标键的地方。anchor 和 focus 的概念不能与选区的起始位置和终止位置混淆,因为 anchor 指向的位置可能在 focus 指向的位置的前面,也可能在 focus 指向位置的后面,这取决于你选择文本时鼠标移动的方向(也就是按下鼠标键和松开鼠标键的位置)。

    +

    用户可能从左到右(与文档方向相同)选择文本或从右到左(与文档方向相反)选择文本。anchor 指向用户开始选择的地方,而 focus 指向用户结束选择的地方。如果你使用鼠标选择文本的话,anchor 就指向你按下鼠标键的地方,而 focus 就指向你松开鼠标键的地方。anchor 和 focus 的概念不能与选区的起始位置和终止位置混淆,因为 anchor 指向的位置可能在 focus 指向的位置的前面,也可能在 focus 指向位置的后面,这取决于你选择文本时鼠标移动的方向(也就是按下鼠标键和松开鼠标键的位置)。

    Selection 对象所对应的是用户所选择的 {{domxref("range","ranges")}}(区域),俗称拖蓝。默认情况下,该函数只针对一个区域,我们可以这样使用这个函数:

    @@ -25,9 +25,9 @@
      -
    • selObj 被赋予一个 Selection 对象
    • +
    • selObj 被赋予一个 Selection 对象
    • -

      range 被赋予一个 Range 对象

      +

      range 被赋予一个 Range 对象

    @@ -48,7 +48,7 @@

    术语表

    范围 (range)
    范围指的是文档中连续的一部分。一个范围包括整个节点,也可以包含节点的一部分,例如文本节点的一部分。用户通常下只能选择一个范围,但是有的时候用户也有可能选择多个范围(例如当用户按下 Control 按键并框选多个区域时,Chrome 中禁止了这个操作,译者注)。“范围”会被作为 {{domxref("Range")}} 对象返回。Range 对象也能通过 DOM 创建、增加、删减。
    可编辑元素 (editing host)
    -
    一个用户可编辑的元素(例如一个使用 {{htmlattrxref("contenteditable")}} 的 HTML 元素,或是在启用了 {{domxref("Document.designMode", "designMode")}} 的 {{domxref("Document")}} 的子元素)。详见 开发者笔记
    +
    一个用户可编辑的元素(例如一个使用 {{htmlattrxref("contenteditable")}} 的 HTML 元素,或是在启用了 {{domxref("Document.designMode", "designMode")}} 的 {{domxref("Document")}} 的子元素)。详见 开发者笔记

    属性

    @@ -57,19 +57,19 @@

    属性

    {{domxref("Selection/anchorNode","anchorNode")}}{{ReadOnlyInline}}
    返回该选区起点所在的节点({{domxref("Node")}})。
    {{domxref("Selection/anchorOffset","anchorOffset")}}{{ReadOnlyInline}}
    -
    返回一个数字,其表示的是选区起点在 {{domxref("Selection/anchorNode","anchorNode")}} 中的位置偏移量。 +
    返回一个数字,其表示的是选区起点在 {{domxref("Selection/anchorNode","anchorNode")}} 中的位置偏移量。
      -
    1. 如果 anchorNode 是文本节点,那么返回的就是从该文字节点的第一个字开始,直到被选中的第一个字之间的字数(如果第一个字就被选中,那么偏移量为零)。
    2. -
    3. 如果 anchorNode 是一个元素,那么返回的就是在选区第一个节点之前的同级节点总数。(这些节点都是 anchorNode 的子节点)
    4. +
    5. 如果 anchorNode 是文本节点,那么返回的就是从该文字节点的第一个字开始,直到被选中的第一个字之间的字数(如果第一个字就被选中,那么偏移量为零)。
    6. +
    7. 如果 anchorNode 是一个元素,那么返回的就是在选区第一个节点之前的同级节点总数。(这些节点都是 anchorNode 的子节点)
    {{domxref("Selection/focusNode","focusNode")}}{{ReadOnlyInline}}
    返回该选区终点所在的节点。
    {{domxref("Selection/focusOffset","focusOffset")}}{{ReadOnlyInline}}
    -
    返回一个数字,其表示的是选区终点在 {{domxref("Selection/focusNode","focusNode")}} 中的位置偏移量。 +
    返回一个数字,其表示的是选区终点在 {{domxref("Selection/focusNode","focusNode")}} 中的位置偏移量。
      -
    1. 如果 focusNode 是文本节点,那么选区末尾未被选中的第一个字,在该文字节点中是第几个字(从 0 开始计),就返回它。
    2. -
    3. 如果 focusNode 是一个元素,那么返回的就是在选区末尾之后第一个节点之前的同级节点总数。
    4. +
    5. 如果 focusNode 是文本节点,那么选区末尾未被选中的第一个字,在该文字节点中是第几个字(从 0 开始计),就返回它。
    6. +
    7. 如果 focusNode 是一个元素,那么返回的就是在选区末尾之后第一个节点之前的同级节点总数。
    {{domxref("Selection/isCollapsed","isCollapsed")}}{{ReadOnlyInline}}
    @@ -121,29 +121,29 @@

    选区的字符串表示

    window.alert(selObj);
    -

    注意,使用选择对象作为 window.alert 的参数将调用对象的 toString 方法。

    +

    注意,使用选择对象作为 window.alert 的参数将调用对象的 toString 方法。

    选区中的多个区域

    -

    一个 Selection 对象表示用户选择的 {{DOMxRef("Range")}} 的集合。通常,它只包含一个区域,访问方式如下:

    +

    一个 Selection 对象表示用户选择的 {{DOMxRef("Range")}} 的集合。通常,它只包含一个区域,访问方式如下:

    var selObj = window.getSelection();
     var range  = selObj.getRangeAt(0);
      -
    • selObj 是一个 Selection 对象
    • -
    • range 是一个 {{domxref("Range")}} 对象
    • +
    • selObj 是一个 Selection 对象
    • +
    • range 是一个 {{domxref("Range")}} 对象
    -

    getRangeAt 方法返回对象的引用,并且对该函数返回的 Range 对象所运行的函数,会直接作用到选区上,并可能影响用户焦点的情况。

    +

    getRangeAt 方法返回对象的引用,并且对该函数返回的 Range 对象所运行的函数,会直接作用到选区上,并可能影响用户焦点的情况。

    -

    正如 Selection API 规范 所指出的,Selection API 最初由 Netscape 创建,并允许多个区域(例如,允许用户从 {{HTMLElement("table")}} 中选择列)。但是,Gecko 以外的浏览器没有实现多个区域,而且规范还要求选择的内容始终(仅)具有一个范围(允许多个区域可能引起不必要的兼容性问题,例如同时从多处输入,译者注)。

    +

    正如 Selection API 规范 所指出的,Selection API 最初由 Netscape 创建,并允许多个区域(例如,允许用户从 {{HTMLElement("table")}} 中选择列)。但是,Gecko 以外的浏览器没有实现多个区域,而且规范还要求选择的内容始终(仅)具有一个范围(允许多个区域可能引起不必要的兼容性问题,例如同时从多处输入,译者注)。

    Selection 及输入焦点

    选择和输入焦点(由 {{domxref("Document.activeElement")}} 表示)有一个复杂的关系,该关系因浏览器而异。在跨浏览器兼容的代码中,最好分别处理它们。

    -

    Safari 和 Chrome(与 Firefox 不同)目前在以编程方式修改 Selection 时会将包含选区的元素作为焦点;这可能在将来会发生变化(请参见 W3C Bug 14383 和 {{WebKitBug("3869")}})。

    +

    Safari 和 Chrome(与 Firefox 不同)目前在以编程方式修改 Selection 时会将包含选区的元素作为焦点;这可能在将来会发生变化(请参见 W3C Bug 14383 和 {{WebKitBug("3869")}})。

    (目前在 WebKit 中,按钮等元素被直接点击不会修改选区,但会将焦点传递,译者注)

    @@ -173,7 +173,7 @@

    Selection A
  • {{domxref("Selection.setBaseAndExtent()")}}
  • -

    以及在 {{domxref("Range")}} 使用以下方法修改时:

    +

    以及在 {{domxref("Range")}} 使用以下方法修改时:

    • {{domxref("Range.setStart()")}}
    • diff --git a/files/zh-cn/web/api/selection/modify/index.html b/files/zh-cn/web/api/selection/modify/index.html index 045ca55ce5e747..0e71a3d8220911 100644 --- a/files/zh-cn/web/api/selection/modify/index.html +++ b/files/zh-cn/web/api/selection/modify/index.html @@ -14,7 +14,7 @@ -

      Selection.modify() 方法可以通过简单的文本命令来改变当前选区或光标位置。

      +

      Selection.modify() 方法可以通过简单的文本命令来改变当前选区或光标位置。

      语法

      @@ -32,10 +32,10 @@

      参数

      调整的距离颗粒度。可选值有"character"、"word"、"sentence"、"line"、"paragraph"、"lineboundary"、"sentenceboundary"、"paragraphboundary"、"documentboundary"。
      -
      注意: Gecko 不支持 "sentence", "paragraph", "sentenceboundary", "paragraphboundary"和"documentboundary". Webkit 和 Blink 支持。
      +
      注意: Gecko 不支持 "sentence", "paragraph", "sentenceboundary", "paragraphboundary"和"documentboundary". Webkit 和 Blink 支持。
      -

      注意: 从{{Gecko("5.0")}}开始,不管是不是浏览器的默认行为,"word"颗粒度不再包括单词后面的空格。这让这个行为变得更加稳定,这也和之前的 Webkit 保持一致,然而不幸的是他们最近修改了这个默认行为。

      +

      注意: 从{{Gecko("5.0")}}开始,不管是不是浏览器的默认行为,"word"颗粒度不再包括单词后面的空格。这让这个行为变得更加稳定,这也和之前的 Webkit 保持一致,然而不幸的是他们最近修改了这个默认行为。

      例子

      diff --git a/files/zh-cn/web/api/selection/rangecount/index.html b/files/zh-cn/web/api/selection/rangecount/index.html index e9c88494fbf40d..dc4065bbcfe617 100644 --- a/files/zh-cn/web/api/selection/rangecount/index.html +++ b/files/zh-cn/web/api/selection/rangecount/index.html @@ -16,7 +16,7 @@

      在网页使用者点击一个加载完毕的新打开的页面之前,rangeCount的值是 0。在使用者点击页面之后,rangeCount 的值变为 1,即使并没有可视的选区 (selection)。

      -

      使用者一般情况下在一次只能选择一个 range ,所以通常情况下rangeCount 属性的值总为 1。脚本 (如 javascript) 可以使选区包含多个 range。

      +

      使用者一般情况下在一次只能选择一个 range ,所以通常情况下rangeCount 属性的值总为 1。脚本 (如 javascript) 可以使选区包含多个 range。

      Gecko 浏览器允许跨表格单元格获得多个选区 (此处可能翻译不准). Firefox allows to select multiple ranges in the document by using Ctrl+click (unless the click within an element with display: table-cell).

      diff --git a/files/zh-cn/web/api/selection/removeallranges/index.html b/files/zh-cn/web/api/selection/removeallranges/index.html index 5f537fd572b98f..2bb013652969b4 100644 --- a/files/zh-cn/web/api/selection/removeallranges/index.html +++ b/files/zh-cn/web/api/selection/removeallranges/index.html @@ -9,7 +9,7 @@ -

      Selection.removeAllRanges() 方法会从当前 selection 对象中移除所有的 range 对象,取消所有的选择只 留下{{domxref("Selection.anchorNode", "anchorNode")}} 和{{domxref("Selection.focusNode","focusNode")}}属性并将其设置为 null。

      +

      Selection.removeAllRanges() 方法会从当前 selection 对象中移除所有的 range 对象,取消所有的选择只 留下{{domxref("Selection.anchorNode", "anchorNode")}} 和{{domxref("Selection.focusNode","focusNode")}}属性并将其设置为 null。

      语法

      @@ -22,7 +22,7 @@

      参数

      规范

      -

       

      +

      @@ -44,7 +44,7 @@

      规范

      -

       

      +

      浏览器兼容性

      diff --git a/files/zh-cn/web/api/selection/setbaseandextent/index.html b/files/zh-cn/web/api/selection/setbaseandextent/index.html index 5f26417951b0de..3bf629ba04c452 100644 --- a/files/zh-cn/web/api/selection/setbaseandextent/index.html +++ b/files/zh-cn/web/api/selection/setbaseandextent/index.html @@ -26,7 +26,7 @@

      参数

      -

      Note: 如果源代码中焦点节点出现在锚节点之前的话,这两个将在参数中互换位置,也就是锚节点变为了焦点节点、焦点节点变为了锚节点。另外,这些参数的用法会颠倒 — 插入符是放置在文本的开头而不是结尾,这对于任何可能遵循这规则的键盘命令都是很重要的。例如,Shift + ➡︎ 会使选中状态范围的从开始缩小,而不是在结尾增加。

      +

      Note: 如果源代码中焦点节点出现在锚节点之前的话,这两个将在参数中互换位置,也就是锚节点变为了焦点节点、焦点节点变为了锚节点。另外,这些参数的用法会颠倒 — 插入符是放置在文本的开头而不是结尾,这对于任何可能遵循这规则的键盘命令都是很重要的。例如,Shift + ➡︎ 会使选中状态范围的从开始缩小,而不是在结尾增加。

      返回值

      @@ -41,7 +41,7 @@

      示例

      一个例子,我们有两个包含多个 span 的段落,每一个 span 包含一个单词。然后第一个段落作为锚节点并且第二个作为焦点节点.我们还有一个额外的段落插入在两个节点之间。

      -

      然后,这里有两个允许你去设置锚节点和焦点节点的表单输入框 — 它们都有一个默认值为 0.

      +

      然后,这里有两个允许你去设置锚节点和焦点节点的表单输入框 — 它们都有一个默认值为 0.

      这里还有一个按钮用来点击调用运行包含setBaseAndExtent()方法的函数,最后输出选中内容到 HTML 的最底部。

      @@ -96,7 +96,7 @@

      示例

      {{ EmbedLiveSample('Examples', '100%', 370) }}

      -

      Note: 实例在这里 example on GitHub (see it live also.)

      +

      Note: 实例在这里 example on GitHub (see it live also.)

      规范

      diff --git a/files/zh-cn/web/api/selection/type/index.html b/files/zh-cn/web/api/selection/type/index.html index c33291773bcd0f..e9404dacc2b1c9 100644 --- a/files/zh-cn/web/api/selection/type/index.html +++ b/files/zh-cn/web/api/selection/type/index.html @@ -9,7 +9,7 @@ -

      type是 {{domxref("Selection")}} 接口的只读属性,其返回的是{{domxref("DOMString")}}即描述当前选择的类型 。

      +

      type是 {{domxref("Selection")}} 接口的只读属性,其返回的是{{domxref("DOMString")}}即描述当前选择的类型 。

      语法

      @@ -28,7 +28,7 @@

      Value

      例子

      -

      在下面的示例中,回调函数将在每次进行新的选择时触发。 console.log(selection.type) 将会输出 Caret 或者 Range ,其输出值取决于插入标记是放置在文本中的单个点还是已选择范围。

      +

      在下面的示例中,回调函数将在每次进行新的选择时触发。 console.log(selection.type) 将会输出 Caret 或者 Range ,其输出值取决于插入标记是放置在文本中的单个点还是已选择范围。

      var selection;
       
      diff --git a/files/zh-cn/web/api/sensor_apis/index.html b/files/zh-cn/web/api/sensor_apis/index.html
      index 1d749096dd58e5..0cb8e1c387aad0 100644
      --- a/files/zh-cn/web/api/sensor_apis/index.html
      +++ b/files/zh-cn/web/api/sensor_apis/index.html
      @@ -74,7 +74,7 @@ 

      许可和功能策略

      AbsoluteOrientationSensor - 'accelerometer''gyroscope', and 'magnetometer' + 'accelerometer', 'gyroscope', and 'magnetometer' Accelerometer @@ -98,7 +98,7 @@

      许可和功能策略

      RelativeOrientationSensor - 'accelerometer', and 'gyroscope' + 'accelerometer', and 'gyroscope' @@ -180,7 +180,7 @@

      接口

      {{domxref('OrientationSensor')}}
      {{domxref('AbsoluteOrientationSensor')}}的基类。本接口不能直接使用。它提供其继承类可访问的属性和方法。
      {{domxref('RelativeOrientationSensor')}}
      -
      描述设备与地球参考坐标系无关的物理方向。  
      +
      描述设备与地球参考坐标系无关的物理方向。
      {{domxref('Sensor')}}
      所有其它传感器接口的基类。本接口不能直接使用。它提供其继承类可访问的属性、事件处理函数及方法。
      {{domxref('SensorErrorEvent')}}
      diff --git a/files/zh-cn/web/api/server-sent_events/using_server-sent_events/index.html b/files/zh-cn/web/api/server-sent_events/using_server-sent_events/index.html index e62301f6894b8e..0066c0991421d2 100644 --- a/files/zh-cn/web/api/server-sent_events/using_server-sent_events/index.html +++ b/files/zh-cn/web/api/server-sent_events/using_server-sent_events/index.html @@ -32,7 +32,7 @@

      从服务器接受事件

      const evtSource = new EventSource("//api.example.com/ssedemo.php", { withCredentials: true } );
      -

      一旦你成功初始化了一个事件源,就可以对 {{event("message")}} 事件添加一个处理函数开始监听从服务器发出的消息了:

      +

      一旦你成功初始化了一个事件源,就可以对 {{event("message")}} 事件添加一个处理函数开始监听从服务器发出的消息了:

      evtSource.onmessage = function(event) {
         const newElement = document.createElement("li");
      @@ -56,7 +56,7 @@ 

      从服务器接受事件

      这段代码也类似,只是只有在服务器发送的消息中包含一个值为"ping"的event字段的时候才会触发对应的处理函数,也就是将data字段的字段值解析为 JSON 数据,然后在页面上显示出所需要的内容。

      -

      不通过 HTTP / 2 使用时,SSE(server-sent events)会受到最大连接数的限制,这在打开各种选项卡时特别麻烦,因为该限制是针对每个浏览器的,并且被设置为一个非常低的数字(6)。该问题在 Chrome 和 Firefox中被标记为“无法解决”。此限制是针对每个浏览器 + 域的,因此这意味着您可以跨所有选项卡打开 6 个 SSE 连接到 www.example1.com,并打开 6 个 SSE 连接到 www.example2.com。(来自 Stackoverflow)。使用 HTTP / 2 时,HTTP 同一时间内的最大连接数由服务器和客户端之间协商(默认为 100)。

      +

      不通过 HTTP / 2 使用时,SSE(server-sent events)会受到最大连接数的限制,这在打开各种选项卡时特别麻烦,因为该限制是针对每个浏览器的,并且被设置为一个非常低的数字(6)。该问题在 ChromeFirefox中被标记为“无法解决”。此限制是针对每个浏览器 + 域的,因此这意味着您可以跨所有选项卡打开 6 个 SSE 连接到 www.example1.com,并打开 6 个 SSE 连接到 www.example2.com。(来自 Stackoverflow)。使用 HTTP / 2 时,HTTP 同一时间内的最大连接数由服务器和客户端之间协商(默认为 100)。

      服务器端如何发送事件流

      @@ -92,7 +92,7 @@

      服务器端如何发送事件流

      -

      上面的代码会让服务器每隔一秒生成一个事件流并返回,其中每条消息的事件类型为"ping",数据字段都使用了 JSON 格式,数组字段中包含了每个事件流生成时的 ISO 8601 时间戳。而且会随机返回一些无事件类型的消息。

      +

      上面的代码会让服务器每隔一秒生成一个事件流并返回,其中每条消息的事件类型为"ping",数据字段都使用了 JSON 格式,数组字段中包含了每个事件流生成时的 ISO 8601 时间戳。而且会随机返回一些无事件类型的消息。

      : 您可以在 github 上找到以上代码的完整示例—参见Simple SSE demo using PHP.

      @@ -114,7 +114,7 @@

      关闭事件流

      事件流格式

      -

      事件流仅仅是一个简单的文本数据流,文本应该使用 UTF-8 格式的编码。每条消息后面都由一个空行作为分隔符.以冒号开头的行为注释行,会被忽略。

      +

      事件流仅仅是一个简单的文本数据流,文本应该使用 UTF-8 格式的编码。每条消息后面都由一个空行作为分隔符.以冒号开头的行为注释行,会被忽略。

      注:注释行可以用来防止连接超时,服务器可以定期发送一条消息注释行,以保持连接不断。
      @@ -150,7 +150,7 @@

      未命名事件

      data: some text data: another message -data: with two lines +data: with two lines

      命名事件

      @@ -161,13 +161,13 @@

      命名事件

      data: {"username": "bobby", "time": "02:33:48"} event: usermessage -data: {"username": "bobby", "time": "02:34:11", "text": "Hi everyone."} +data: {"username": "bobby", "time": "02:34:11", "text": "Hi everyone."} -event: userdisconnect +event: userdisconnect data: {"username": "bobby", "time": "02:34:23"} event: usermessage -data: {"username": "sean", "time": "02:34:36", "text": "Bye, bobby."} +data: {"username": "sean", "time": "02:34:36", "text": "Bye, bobby."}

      混合两种事件

      @@ -178,10 +178,10 @@

      混合两种事件

      data: {"username": "bobby", "time": "02:33:48"} data: Here's a system message of some kind that will get used -data: to accomplish some task. +data: to accomplish some task. event: usermessage -data: {"username": "bobby", "time": "02:34:11", "text": "Hi everyone."} +data: {"username": "bobby", "time": "02:34:11", "text": "Hi everyone."}

    浏览器兼容性

    diff --git a/files/zh-cn/web/api/service_worker_api/index.html b/files/zh-cn/web/api/service_worker_api/index.html index 7b31c43b6f2d90..e3c025546dce43 100644 --- a/files/zh-cn/web/api/service_worker_api/index.html +++ b/files/zh-cn/web/api/service_worker_api/index.html @@ -12,7 +12,7 @@ ---

    {{ServiceWorkerSidebar}}

    -

    Service workers 本质上充当 Web 应用程序、浏览器与网络(可用时)之间的代理服务器。这个 API 旨在创建有效的离线体验,它会拦截网络请求并根据网络是否可用来采取适当的动作、更新来自服务器的的资源。它还提供入口以推送通知和访问后台同步 API。

    +

    Service workers 本质上充当 Web 应用程序、浏览器与网络(可用时)之间的代理服务器。这个 API 旨在创建有效的离线体验,它会拦截网络请求并根据网络是否可用来采取适当的动作、更新来自服务器的的资源。它还提供入口以推送通知和访问后台同步 API。

    Service worker 的概念和用法

    @@ -63,7 +63,7 @@

    下载、安装和激活

    还有一个 activate 事件,触发时可以清理旧缓存和旧的 service worker 关联的东西。

    -

    Servcie worker 可以通过 {{domxref("FetchEvent")}} 事件去响应请求。通过使用 {{domxref("FetchEvent.respondWith") }} 方法,你可以任意修改对于这些请求的响应。

    +

    Servcie worker 可以通过 {{domxref("FetchEvent")}} 事件去响应请求。通过使用 {{domxref("FetchEvent.respondWith") }} 方法,你可以任意修改对于这些请求的响应。

    注意: 因为oninstallonactivate完成前需要一些时间,service worker 标准提供一个waitUntil方法,当oninstall或者onactivate触发时被调用,接受一个 promise。在这个 promise 被成功 resolve 以前,功能性事件不会分发到 service worker。

    @@ -97,34 +97,34 @@

    其他使用场景

    接口

    -
    {{domxref("Cache") }} {{Experimental_Inline}}
    +
    {{domxref("Cache") }} {{Experimental_Inline}}
    表示用于{{domxref("Request")}}/{{domxref("Response")}}对象对的存储,作为{{domxref("ServiceWorker")}}生命周期的一部分被缓存。
    -
    {{domxref("CacheStorage") }} {{Experimental_Inline}}
    +
    {{domxref("CacheStorage") }} {{Experimental_Inline}}
    表示{{domxref("Cache")}}对象的存储。提供一个所有命名缓存的主目录,{{domxref("ServiceWorker")}}可以访问并维护名字字符串到{{domxref("Cache")}}对象的映射。
    -
    {{domxref("Client") }} {{Experimental_Inline}}
    +
    {{domxref("Client") }} {{Experimental_Inline}}
    表示 service worker client 的作用域。一个 service worker client 可以是浏览器上下文的一个文档,也可以是一个由活动 worker 控制的{{domxref("SharedWorker")}}。
    -
    {{domxref("Clients") }} {{Experimental_Inline}}
    +
    {{domxref("Clients") }} {{Experimental_Inline}}
    表示一个{{domxref("Client")}}对象容器,是访问当前源的活动 service worker clients 的主要途径。
    -
    {{domxref("ExtendableEvent") }} {{Experimental_Inline}}
    +
    {{domxref("ExtendableEvent") }} {{Experimental_Inline}}
    扩展被分发到{{domxref("ServiceWorkerGlobalScope")}}的install 和 activate事件时序,作为 service worker 生命周期的一部分。这会确保任何功能型事件(如{{domxref("FetchEvent")}})不被分发到{{domxref("ServiceWorker")}},直到它更新了数据库架构、删除过期缓存项等等以后。
    -
    {{DOMxRef("ExtendableMessageEvent")}} {{Experimental_Inline}}
    +
    {{DOMxRef("ExtendableMessageEvent")}} {{Experimental_Inline}}
    The event object of a {{event("message_(ServiceWorker)","message")}} event fired on a service worker (when a channel message is received on the {{DOMxRef("ServiceWorkerGlobalScope")}} from another context) — extends the lifetime of such events.
    {{domxref("FetchEvent") }}{{Experimental_Inline}}
    传递给{{domxref("ServiceWorkerGlobalScope.onfetch")}}处理函数的参数,FetchEvent 代表一个在{{domxref("ServiceWorker")}}的{{domxref("ServiceWorkerGlobalScope")}}中分发的请求动作。它包含关于请求和响应的结果信息,并且提供{{domxref("FetchEvent.respondWith", "FetchEvent.respondWith()")}}方法,这个方法允许我们提供任意的响应返回到控制页面。
    {{domxref("InstallEvent") }}{{Experimental_Inline}}
    -
    传递给 {{domxref("ServiceWorkerGlobalScope.oninstall", "oninstall")}} 处理函数的参数,InstallEvent 接口代表一个在 {{domxref("ServiceWorker")}} 的 {{domxref("ServiceWorkerGlobalScope")}} 中分发的安装动作,作为 {{domxref("ExtendableEvent")}} 的子事件,它保证诸如 {{domxref("FetchEvent")}} 的功能性事件在安装过程中不会被分发。
    -
    {{DOMxRef("NavigationPreloadManager")}} {{Experimental_Inline}}
    +
    传递给 {{domxref("ServiceWorkerGlobalScope.oninstall", "oninstall")}} 处理函数的参数,InstallEvent 接口代表一个在 {{domxref("ServiceWorker")}} 的 {{domxref("ServiceWorkerGlobalScope")}} 中分发的安装动作,作为 {{domxref("ExtendableEvent")}} 的子事件,它保证诸如 {{domxref("FetchEvent")}} 的功能性事件在安装过程中不会被分发。
    +
    {{DOMxRef("NavigationPreloadManager")}} {{Experimental_Inline}}
    Provides methods for managing the preloading of resources with a service worker.
    {{domxref("Navigator.serviceWorker") }}
    返回一个{{domxref("ServiceWorkerContainer")}}对象,可以提供入口用于注册,删除,更新以及与在相关 document中{{domxref("ServiceWorker")}}通信的对象。
    -
    {{domxref("NotificationEvent") }} {{Experimental_Inline}}
    +
    {{domxref("NotificationEvent") }} {{Experimental_Inline}}
    传递给{{domxref("ServiceWorkerGlobalScope.onnotificationclick", "onnotificationclick")}}处理函数的参数,NotificationEvent 接口代表在{{domxref("ServiceWorker")}}里{{domxref("ServiceWorkerGlobalScope")}}中分发的单击事件通知。
    -
    {{domxref("ServiceWorker") }} {{Experimental_Inline}}
    +
    {{domxref("ServiceWorker") }} {{Experimental_Inline}}
    表示一个 service worker。多个浏览的上下文 (例如 pages、workers 等等) 都能通过相同的 ServiceWorker 对象相关联。
    -
    {{domxref("ServiceWorkerContainer") }} {{Experimental_Inline}}
    +
    {{domxref("ServiceWorkerContainer") }} {{Experimental_Inline}}
    提供一个在网络生态中把 service worker 作为一个整体的对象,包括辅助注册,反注册以及更新服务工作者,并且访问 service worker 的状态以及他们的注册信息。
    {{domxref("ServiceWorkerGlobalScope") }}
    表示 service worker 的全局执行上下文。
    @@ -133,7 +133,7 @@

    接口

    {{domxref("ServiceWorkerRegistration") }}
    表示 service worker 的注册。
    {{DOMxRef("ServiceWorkerState")}} {{Experimental_Inline}}
    -
    Associated with its ServiceWorker's state.
    +
    Associated with its ServiceWorker's state.
    {{domxref("SyncEvent")}} {{non-standard_inline}}
    传递给同步函数的参数,SyncEvent 接口代表在 ServiceWorker 里{{domxref("ServiceWorkerGlobalScope")}}分发的同步动作。
    {{domxref("SyncManager")}} {{non-standard_inline}}
    diff --git a/files/zh-cn/web/api/service_worker_api/using_service_workers/index.html b/files/zh-cn/web/api/service_worker_api/using_service_workers/index.html index 441a8cd3315761..779efd28546539 100644 --- a/files/zh-cn/web/api/service_worker_api/using_service_workers/index.html +++ b/files/zh-cn/web/api/service_worker_api/using_service_workers/index.html @@ -12,29 +12,29 @@

    {{ServiceWorkerSidebar}}

    -

    本文是关于使用 service workers 的教程,包括讲解 service worker 的基本架构、怎么注册一个 service worker、一个新  service worker 的 install 及 activation 过程、怎么更新 service worker 还有它的缓存控制和自定义响应,这一切都在一个简单的离线的应用程序中。

    +

    本文是关于使用 service workers 的教程,包括讲解 service worker 的基本架构、怎么注册一个 service worker、一个新 service worker 的 install 及 activation 过程、怎么更新 service worker 还有它的缓存控制和自定义响应,这一切都在一个简单的离线的应用程序中。

    背景

    有一个困扰 web 用户多年的难题——丢失网络连接。即使是世界上最好的 web app,如果下载不了它,也是非常糟糕的体验。如今虽然已经有很多种技术去尝试着解决这一问题。而随着离线页面的出现,一些问题已经得到了解决。但是,最重要的问题是,仍然没有一个好的统筹机制对资源缓存和自定义的网络请求进行控制。

    - 之前的尝试 — AppCache — 看起来是个不错的方法,因为它可以很容易地指定需要离线缓存的资源。但是,它假定你使用时会遵循诸多规则,如果你不严格遵循这些规则,它会把你的 APP 搞得一团糟。关于 APPCache 的更多详情,请看 Jake Archibald 的文章: Application Cache is a Douchebag.

    + 之前的尝试 — AppCache — 看起来是个不错的方法,因为它可以很容易地指定需要离线缓存的资源。但是,它假定你使用时会遵循诸多规则,如果你不严格遵循这些规则,它会把你的 APP 搞得一团糟。关于 APPCache 的更多详情,请看 Jake Archibald 的文章: Application Cache is a Douchebag.

    -

    注意:  从 Firefox44 起,当使用 AppCache 来提供离线页面支持时,会提示一个警告消息,来建议开发者使用 Service workers 来实现离线页面。({{bug("1204581")}}.)

    +

    注意: 从 Firefox44 起,当使用 AppCache 来提供离线页面支持时,会提示一个警告消息,来建议开发者使用 Service workers 来实现离线页面。({{bug("1204581")}}.)

    -

    Service worker 最终要去解决这些问题。虽然 Service Worker 的语法比 AppCache 更加复杂,但是你可以使用 JavaScript 更加精细地控制 AppCache 的静默行为。有了它,你可以解决目前离线应用的问题,同时也可以做更多的事。 Service Worker 可以使你的应用先访问本地缓存资源,所以在离线状态时,在没有通过网络接收到更多的数据前,仍可以提供基本的功能(一般称之为 Offline First)。这是原生 APP 本来就支持的功能,这也是相比于 web app,原生 app 更受青睐的主要原因。

    +

    Service worker 最终要去解决这些问题。虽然 Service Worker 的语法比 AppCache 更加复杂,但是你可以使用 JavaScript 更加精细地控制 AppCache 的静默行为。有了它,你可以解决目前离线应用的问题,同时也可以做更多的事。 Service Worker 可以使你的应用先访问本地缓存资源,所以在离线状态时,在没有通过网络接收到更多的数据前,仍可以提供基本的功能(一般称之为 Offline First)。这是原生 APP 本来就支持的功能,这也是相比于 web app,原生 app 更受青睐的主要原因。

    使用前的设置

    在已经支持 serivce workers 的浏览器的版本中,很多特性没有默认开启。如果你发现示例代码在当前版本的浏览器中怎么样都无法正常运行,你可能需要开启一下浏览器的相关配置:

      -
    • Firefox Nightly: 访问 about:config 并设置 dom.serviceWorkers.enabled 的值为 true; 重启浏览器;
    • -
    • Chrome Canary: 访问 chrome://flags 并开启 experimental-web-platform-features; 重启浏览器 (注意:有些特性在 Chrome 中没有默认开放支持);
    • -
    • Opera: 访问 opera://flags 并开启 ServiceWorker 的支持; 重启浏览器。 
    • +
    • Firefox Nightly: 访问 about:config 并设置 dom.serviceWorkers.enabled 的值为 true; 重启浏览器;
    • +
    • Chrome Canary: 访问 chrome://flags 并开启 experimental-web-platform-features; 重启浏览器 (注意:有些特性在 Chrome 中没有默认开放支持);
    • +
    • Opera: 访问 opera://flags 并开启 ServiceWorker 的支持; 重启浏览器。

    另外,你需要通过 HTTPS 来访问你的页面 — 出于安全原因,Service Workers 要求必须在 HTTPS 下才能运行。Github 是个用来测试的好地方,因为它就支持 HTTPS。为了便于本地开发,localhost 也被浏览器认为是安全源。

    @@ -45,12 +45,12 @@

    基本架构

    1. service worker URL 通过 {{domxref("serviceWorkerContainer.register()")}} 来获取和注册。
    2. -
    3. 如果注册成功,service worker 就在 {{domxref("ServiceWorkerGlobalScope") }} 环境中运行; 这是一个特殊类型的 worker 上下文运行环境,与主运行线程(执行脚本)相独立,同时也没有访问 DOM 的能力。
    4. +
    5. 如果注册成功,service worker 就在 {{domxref("ServiceWorkerGlobalScope") }} 环境中运行; 这是一个特殊类型的 worker 上下文运行环境,与主运行线程(执行脚本)相独立,同时也没有访问 DOM 的能力。
    6. service worker 现在可以处理事件了。
    7. -
    8. 受 service worker 控制的页面打开后会尝试去安装 service worker。最先发送给 service worker 的事件是安装事件 (在这个事件里可以开始进行填充 IndexDB 和缓存站点资源)。这个流程同原生 APP 或者 Firefox OS APP 是一样的 — 让所有资源可离线访问。
    9. -
    10. 当 oninstall 事件的处理程序执行完毕后,可以认为 service worker 安装完成了。
    11. -
    12. 下一步是激活。当 service worker 安装完成后,会接收到一个激活事件 (activate event)。 onactivate 主要用途是清理先前版本的 service worker 脚本中使用的资源。
    13. -
    14. Service Worker 现在可以控制页面了,但仅是在 register()  成功后的打开的页面。也就是说,页面起始于有没有 service worker ,且在页面的接下来生命周期内维持这个状态。所以,页面不得不重新加载以让 service worker 获得完全的控制。
    15. +
    16. 受 service worker 控制的页面打开后会尝试去安装 service worker。最先发送给 service worker 的事件是安装事件 (在这个事件里可以开始进行填充 IndexDB 和缓存站点资源)。这个流程同原生 APP 或者 Firefox OS APP 是一样的 — 让所有资源可离线访问。
    17. +
    18. oninstall 事件的处理程序执行完毕后,可以认为 service worker 安装完成了。
    19. +
    20. 下一步是激活。当 service worker 安装完成后,会接收到一个激活事件 (activate event)。 onactivate 主要用途是清理先前版本的 service worker 脚本中使用的资源。
    21. +
    22. Service Worker 现在可以控制页面了,但仅是在 register() 成功后的打开的页面。也就是说,页面起始于有没有 service worker ,且在页面的接下来生命周期内维持这个状态。所以,页面不得不重新加载以让 service worker 获得完全的控制。

    @@ -61,9 +61,9 @@

    基本架构

    Promises

    -

    Promises 是一种非常适用于异步操作的机制,一个操作依赖于另一个操作的成功执行。这是 service worker 的核心工作机制。
    +

    Promises 是一种非常适用于异步操作的机制,一个操作依赖于另一个操作的成功执行。这是 service worker 的核心工作机制。

    - Promises 可以做很多事情。但现在,你只需要知道,如果有什么返回了一个 promise,你可以在后面加上 .then() 来传入成功和失败的回调函数。或者,你可以在后面加上 .catch() 如果你想添加一个操作失败的回调函数。

    + Promises 可以做很多事情。但现在,你只需要知道,如果有什么返回了一个 promise,你可以在后面加上 .then() 来传入成功和失败的回调函数。或者,你可以在后面加上 .catch() 如果你想添加一个操作失败的回调函数。

    接下来,让我们对比一下传统的同步回调结构,和异步 promise 结构,两者在功能上是等效的:

    @@ -86,12 +86,12 @@

    异步

    在上面第一个例子中,我们必须等待 myFunction() 执行完成,并返回 value 值,在此之前,后续其它的代码无法执行。在第二个例子中,myFunction() 返回一个 promise 对象,下面的代码可以继续执行。当 promise 成功 resolves 后,then() 中的函数会异步地执行。

    - 现在来举下实际的例子 — 如果我们想动态地加载图片,而且要在图片下载完成后再展示到页面上,要怎么实现呢?这是一个比较常见的场景,但是实现起来会有点麻烦。我们可以使用 .onload 事件处理程序,来实现图片的加载完成后再展示。但是如果图片的 onload 事件发生在我们监听这个事件之前呢?我们可以使用 .complete 来解决这个问题,但是仍然不够简洁,如果是多个图片该怎么处理呢?并且,这种方法仍然是同步的操作,会阻塞主线程。
    + 现在来举下实际的例子 — 如果我们想动态地加载图片,而且要在图片下载完成后再展示到页面上,要怎么实现呢?这是一个比较常见的场景,但是实现起来会有点麻烦。我们可以使用 .onload 事件处理程序,来实现图片的加载完成后再展示。但是如果图片的 onload 事件发生在我们监听这个事件之前呢?我们可以使用 .complete 来解决这个问题,但是仍然不够简洁,如果是多个图片该怎么处理呢?并且,这种方法仍然是同步的操作,会阻塞主线程。

    - 相比于以上方法,我们可以使用 promise 来实现。(可以看我们的 Promises test 示例源码, look at it running live.)

    + 相比于以上方法,我们可以使用 promise 来实现。(可以看我们的 Promises test 示例源码, look at it running live.)

    -

    备注:service worker 在实际使用中,会使用 caching 和 onfetch 等异步操作,而不是使用老旧的 XMLHttpRequest API。这里的例子使用 XMLHttpRequest API 只是为了让你能将注意力集中于理解 Promise 上。

    +

    备注:service worker 在实际使用中,会使用 caching 和 onfetch 等异步操作,而不是使用老旧的 XMLHttpRequest API。这里的例子使用 XMLHttpRequest API 只是为了让你能将注意力集中于理解 Promise 上。

    function imgLoad(url) {
    @@ -131,31 +131,31 @@ 

    异步

    console.log(Error); });
    -

    在函数调用后面,我们串联了 promise 的 then() 方法。then() 接受两个函数 —— 第一个函数在 promise 成功执行的情况下执行,而第二个函数则在 promise 执行失败情况下执行。当执行成功时,在 myImage 中显示图片,并追加到 body 里面 (它的参数就是传递给 promise 的 resolve 方法的 request.response );当执行失败时,在控制台返回一个错误。

    +

    在函数调用后面,我们串联了 promise 的 then() 方法。then() 接受两个函数 —— 第一个函数在 promise 成功执行的情况下执行,而第二个函数则在 promise 执行失败情况下执行。当执行成功时,在 myImage 中显示图片,并追加到 body 里面 (它的参数就是传递给 promise 的 resolve 方法的 request.response );当执行失败时,在控制台返回一个错误。

    这些都是异步的。

    -

    注意: 你可以链式调用 promise,比如:
    +

    注意: 你可以链式调用 promise,比如:
    myPromise().then(success, failure).then(success).catch(failure);

    -

    注意: 你可以阅读 Jake Archibald 的精彩的文章  JavaScript Promises: there and back again 了解更多关于 promise 的内容

    +

    注意: 你可以阅读 Jake Archibald 的精彩的文章 JavaScript Promises: there and back again 了解更多关于 promise 的内容

    Service workers demo

    -

    为了演示 service worker 的基本的注册和安装,我们做了一个简单的例子 sw-test,这是一个简单的 Star wars Lego 图片库。采用了基于 promise 的函数从一个 JSON 对象来读取图片内容,在显示图片到页面上之前,采用 Ajax 来加载图片。页面非常简单,而且是静态的,但也注册、安装和激活了 service worker,当浏览器支持的时候,它将缓存所有依赖的文件,它可以在离线的时候访问!
    +

    为了演示 service worker 的基本的注册和安装,我们做了一个简单的例子 sw-test,这是一个简单的 Star wars Lego 图片库。采用了基于 promise 的函数从一个 JSON 对象来读取图片内容,在显示图片到页面上之前,采用 Ajax 来加载图片。页面非常简单,而且是静态的,但也注册、安装和激活了 service worker,当浏览器支持的时候,它将缓存所有依赖的文件,它可以在离线的时候访问!



    - 你可以查看 Github 上的源码, 也可以查看 在线示例。有一点需要我们重点关注的是 promise(查看 app.js 22-47 行),这是一个你上面读到的 Promises test demo 里的一个修改版,它们有以下不同: 

    + 你可以查看 Github 上的源码, 也可以查看 在线示例。有一点需要我们重点关注的是 promise(查看 app.js 22-47 行),这是一个你上面读到的 Promises test demo 里的一个修改版,它们有以下不同:

      -
    1. 原始的版本里,我们只传了一个我们想加载的图片的 URL 。在这个版本里,我们传了一个包含单个图片所有数据的 JSON(查看 image-list.js)。这是因为每一个 promise reslove 的所有数据必须传给 promise,因为它是异步的。如果你只传了 url ,那么当你 for 循环被遍历的时候你试图分别访问其他项,将不会有效的,因为 promise 的 resolve 不会和遍历(这个是同步的过程)同时完成。
    2. -
    3. 我们实际上用数组 resolve 了这些 promise,因为我们想让得到加载完的图片 blob 和 图片的名字、credit 和 alt 文本(查看 app.js  31-34 行)。Promises 只能 resolve 单个参数,所以你想 resolve 多个值的话,你需要用数组或对象。
    4. -
    5.  为了访问 promise resolved  的值,我们接着通过 then 函数进行获取(app.js 60-64 行),这个有点古怪,但这就是 promise 工作的方式。
    6. +
    7. 原始的版本里,我们只传了一个我们想加载的图片的 URL 。在这个版本里,我们传了一个包含单个图片所有数据的 JSON(查看 image-list.js)。这是因为每一个 promise reslove 的所有数据必须传给 promise,因为它是异步的。如果你只传了 url ,那么当你 for 循环被遍历的时候你试图分别访问其他项,将不会有效的,因为 promise 的 resolve 不会和遍历(这个是同步的过程)同时完成。
    8. +
    9. 我们实际上用数组 resolve 了这些 promise,因为我们想让得到加载完的图片 blob 和 图片的名字、credit 和 alt 文本(查看 app.js 31-34 行)。Promises 只能 resolve 单个参数,所以你想 resolve 多个值的话,你需要用数组或对象。
    10. +
    11. 为了访问 promise resolved 的值,我们接着通过 then 函数进行获取(app.js 60-64 行),这个有点古怪,但这就是 promise 工作的方式。

    现在来谈谈 Service workers

    @@ -164,7 +164,7 @@

    现在来谈谈 Service workers

    注册你的 worker

    -

    我们 app 的 JavaScript 文件里 — app.js — 的第一块代码就像下面的一样。这是我们使用 service worker 的入口:

    +

    我们 app 的 JavaScript 文件里 — app.js — 的第一块代码就像下面的一样。这是我们使用 service worker 的入口:

    if ('serviceWorker' in navigator) {
       navigator.serviceWorker.register('/sw-test/sw.js', { scope: '/sw-test/' }).then(function(reg) {
    @@ -178,22 +178,22 @@ 

    注册你的 worker

    1. 外面的代码块做了一个特性检查,在注册之前确保 service worker 是支持的。
    2. -
    3. 接着,我们使用 {{domxref("ServiceWorkerContainer.register()") }} 函数来注册站点的 service worker,service worker 只是一个驻留在我们的 app 内的一个 JavaScript 文件 (注意,这个文件的 url 是相对于 origin, 而不是相对于引用它的那个 JS 文件)。
    4. +
    5. 接着,我们使用 {{domxref("ServiceWorkerContainer.register()") }} 函数来注册站点的 service worker,service worker 只是一个驻留在我们的 app 内的一个 JavaScript 文件 (注意,这个文件的 url 是相对于 origin, 而不是相对于引用它的那个 JS 文件)。
    6. scope 参数是选填的,可以被用来指定你想让 service worker 控制的内容的子目录。在这个例子里,我们指定了 '/sw-test/',表示 app 的 origin 下的所有内容。如果你留空的话,默认值也是这个值, 我们在指定只是作为例子。
    7. -
    8. .then() 函数链式调用我们的 promise,当 promise resolve 的时候,里面的代码就会执行。
    9. -
    10. 最后面我们链了一个 .catch() 函数,当 promise rejected 才会执行。
    11. +
    12. .then() 函数链式调用我们的 promise,当 promise resolve 的时候,里面的代码就会执行。
    13. +
    14. 最后面我们链了一个 .catch() 函数,当 promise rejected 才会执行。

    这就注册了一个 service worker,它工作在 worker context,所以没有访问 DOM 的权限。在正常的页面之外运行 service worker 的代码来控制它们的加载。

    -

    单个 service worker 可以控制很多页面。每个你的 scope 里的页面加载完的时候,安装在页面的 service worker 可以控制它。牢记你需要小心 service worker 脚本里的全局变量: 每个页面不会有自己独有的 worker。

    +

    单个 service worker 可以控制很多页面。每个你的 scope 里的页面加载完的时候,安装在页面的 service worker 可以控制它。牢记你需要小心 service worker 脚本里的全局变量: 每个页面不会有自己独有的 worker。

    注意: 你的 service worker 函数像一个代理服务器一样,允许你修改请求和响应,用他们的缓存替代它们等等。

    -

    注意: 关于 service workers 一个很棒的事情就是,如果你用像上面一样的浏览器特性检测方式检测发现浏览器并不支持 SW,你还是可以正常地在线使用页面。与此同时,如果你在一个页面上同时使用 AppCache 和 SW , 不支持 SW 但是支持 AppCache  的浏览器,可以使用 AppCache,如果都支持的话,则会采用 SW

    +

    注意: 关于 service workers 一个很棒的事情就是,如果你用像上面一样的浏览器特性检测方式检测发现浏览器并不支持 SW,你还是可以正常地在线使用页面。与此同时,如果你在一个页面上同时使用 AppCache 和 SW , 不支持 SW 但是支持 AppCache 的浏览器,可以使用 AppCache,如果都支持的话,则会采用 SW

    为什么我的 service worker 注册失败了?

    @@ -202,8 +202,8 @@

    为什么我的 servi
    1. 你没有在 HTTPS 下运行你的程序
    2. -
    3. service worker 文件的地址没有写对— 需要相对于 origin , 而不是 app 的根目录。在我们的例子例, service worker 是在 https://mdn.github.io/sw-test/sw.js,app 的根目录是 https://mdn.github.io/sw-test/。应该写成 /sw-test/sw.js 而非 /sw.js.
    4. -
    5.  service worker 在不同的 origin 而不是你的 app 的,这是不被允许的。
    6. +
    7. service worker 文件的地址没有写对— 需要相对于 origin , 而不是 app 的根目录。在我们的例子例, service worker 是在 https://mdn.github.io/sw-test/sw.js,app 的根目录是 https://mdn.github.io/sw-test/。应该写成 /sw-test/sw.js 而非 /sw.js.
    8. +
    9. service worker 在不同的 origin 而不是你的 app 的,这是不被允许的。

    @@ -212,66 +212,66 @@

    为什么我的 servi
    • service worker 只能抓取在 service worker scope 里从客户端发出的请求。
    • -
    • 最大的 scope 是 service worker 所在的地址
    • -
    • 如果你的 service worker 被激活在一个有 Service-Worker-Allowed header 的客户端,你可以为 service worker 指定一个最大的 scope 的列表。
    • -
    • 在 Firefox, Service Worker APIs 在用户在 private browsing mode 下会被隐藏而且无法使用。
    • +
    • 最大的 scope 是 service worker 所在的地址
    • +
    • 如果你的 service worker 被激活在一个有 Service-Worker-Allowed header 的客户端,你可以为 service worker 指定一个最大的 scope 的列表。
    • +
    • 在 Firefox, Service Worker APIs 在用户在 private browsing mode 下会被隐藏而且无法使用。

    安装和激活:填充你的缓存

    -

    在你的 service worker 注册之后,浏览器会尝试为你的页面或站点安装并激活它。 
    +

    在你的 service worker 注册之后,浏览器会尝试为你的页面或站点安装并激活它。

    - install 事件会在注册完成之后触发。install 事件一般是被用来填充你的浏览器的离线缓存能力。为了达成这个目的,我们使用了 Service Worker 的新的标志性的存储 API — {{domxref("cache")}} — 一个 service worker 上的全局对象,它使我们可以存储网络响应发来的资源,并且根据它们的请求来生成 key。这个 API 和浏览器的标准的缓存工作原理很相似,但是是特定你的域的。它会一直持久存在,直到你告诉它不再存储,你拥有全部的控制权。

    + install 事件会在注册完成之后触发。install 事件一般是被用来填充你的浏览器的离线缓存能力。为了达成这个目的,我们使用了 Service Worker 的新的标志性的存储 API — {{domxref("cache")}} — 一个 service worker 上的全局对象,它使我们可以存储网络响应发来的资源,并且根据它们的请求来生成 key。这个 API 和浏览器的标准的缓存工作原理很相似,但是是特定你的域的。它会一直持久存在,直到你告诉它不再存储,你拥有全部的控制权。

    -

    注意: Cache API 并不被每个浏览器支持。(查看 Browser support 部分了解更多信息。) 如果你现在就想使用它,可以考虑采用一个 polyfill,比如  Google topeka demo,或者把你的资源存储在 IndexedDB 中。

    +

    注意: Cache API 并不被每个浏览器支持。(查看 Browser support 部分了解更多信息。) 如果你现在就想使用它,可以考虑采用一个 polyfill,比如 Google topeka demo,或者把你的资源存储在 IndexedDB 中。

    -

    让我们从一个代码示例来开始这个部分——这是 这是我们的 service worker 里的第一块代码 :

    +

    让我们从一个代码示例来开始这个部分——这是 这是我们的 service worker 里的第一块代码

    this.addEventListener('install', function(event) {
    -  event.waitUntil(
    -    caches.open('v1').then(function(cache) {
    -      return cache.addAll([
    -        '/sw-test/',
    -        '/sw-test/index.html',
    -        '/sw-test/style.css',
    -        '/sw-test/app.js',
    -        '/sw-test/image-list.js',
    -        '/sw-test/star-wars-logo.jpg',
    -        '/sw-test/gallery/',
    -        '/sw-test/gallery/bountyHunters.jpg',
    -        '/sw-test/gallery/myLittleVader.jpg',
    -        '/sw-test/gallery/snowTroopers.jpg'
    -      ]);
    -    })
    -  );
    +  event.waitUntil(
    +    caches.open('v1').then(function(cache) {
    +      return cache.addAll([
    +        '/sw-test/',
    +        '/sw-test/index.html',
    +        '/sw-test/style.css',
    +        '/sw-test/app.js',
    +        '/sw-test/image-list.js',
    +        '/sw-test/star-wars-logo.jpg',
    +        '/sw-test/gallery/',
    +        '/sw-test/gallery/bountyHunters.jpg',
    +        '/sw-test/gallery/myLittleVader.jpg',
    +        '/sw-test/gallery/snowTroopers.jpg'
    +      ]);
    +    })
    +  );
     });
      -
    1. 这里我们 新增了一个 install 事件监听器,接着在事件上接了一个{{domxref("ExtendableEvent.waitUntil()") }}  方法——这会确保 Service Worker 不会在 waitUntil() 里面的代码执行完毕之前安装完成。
    2. -
    3. 在 waitUntil() 内,我们使用了 caches.open() 方法来创建了一个叫做 v1 的新的缓存,将会是我们的站点资源缓存的第一个版本。它返回了一个创建缓存的 promise,当它 resolved 的时候,我们接着会调用在创建的缓存示例上的一个方法  addAll(),这个方法的参数是一个由一组相对于 origin 的 URL 组成的数组,这些 URL 就是你想缓存的资源的列表。
    4. -
    5. 如果 promise 被 rejected,安装就会失败,这个 worker 不会做任何事情。这也是可以的,因为你可以修复你的代码,在下次注册发生的时候,又可以进行尝试。
    6. -
    7. 当安装成功完成之后, service worker 就会激活。在第一次你的 service worker 注册/激活时,这并不会有什么不同。但是当  service worker 更新 (稍后查看 更新你的 service worker 部分) 的时候 ,就不太一样了。
    8. +
    9. 这里我们 新增了一个 install 事件监听器,接着在事件上接了一个{{domxref("ExtendableEvent.waitUntil()") }} 方法——这会确保 Service Worker 不会在 waitUntil() 里面的代码执行完毕之前安装完成。
    10. +
    11. waitUntil() 内,我们使用了 caches.open() 方法来创建了一个叫做 v1 的新的缓存,将会是我们的站点资源缓存的第一个版本。它返回了一个创建缓存的 promise,当它 resolved 的时候,我们接着会调用在创建的缓存示例上的一个方法 addAll(),这个方法的参数是一个由一组相对于 origin 的 URL 组成的数组,这些 URL 就是你想缓存的资源的列表。
    12. +
    13. 如果 promise 被 rejected,安装就会失败,这个 worker 不会做任何事情。这也是可以的,因为你可以修复你的代码,在下次注册发生的时候,又可以进行尝试。
    14. +
    15. 当安装成功完成之后, service worker 就会激活。在第一次你的 service worker 注册/激活时,这并不会有什么不同。但是当 service worker 更新 (稍后查看 更新你的 service worker 部分) 的时候 ,就不太一样了。
    -

    注意: localStorage 跟  service worker 的 cache 工作原理很类似,但是它是同步的,所以不允许在  service workers 内使用。

    +

    注意: localStorage 跟 service worker 的 cache 工作原理很类似,但是它是同步的,所以不允许在 service workers 内使用。

    -

    注意: IndexedDB 可以在  service worker 内做数据存储。

    +

    注意: IndexedDB 可以在 service worker 内做数据存储。

    自定义请求的响应

    -

    现在你已经将你的站点资源缓存了,你需要告诉 service worker 让它用这些缓存内容来做点什么。有了 fetch 事件,这是很容易做到的。

    +

    现在你已经将你的站点资源缓存了,你需要告诉 service worker 让它用这些缓存内容来做点什么。有了 fetch 事件,这是很容易做到的。

    -

    每次任何被 service worker 控制的资源被请求到时,都会触发 fetch 事件,这些资源包括了指定的 scope 内的文档,和这些文档内引用的其他任何资源(比如 index.html 发起了一个跨域的请求来嵌入一个图片,这个也会通过 service worker 。)

    +

    每次任何被 service worker 控制的资源被请求到时,都会触发 fetch 事件,这些资源包括了指定的 scope 内的文档,和这些文档内引用的其他任何资源(比如 index.html 发起了一个跨域的请求来嵌入一个图片,这个也会通过 service worker 。)

    -

    你可以给 service worker 添加一个 fetch 的事件监听器,接着调用 event 上的 respondWith() 方法来劫持我们的 HTTP 响应,然后你用可以用自己的方法来更新他们。

    +

    你可以给 service worker 添加一个 fetch 的事件监听器,接着调用 event 上的 respondWith() 方法来劫持我们的 HTTP 响应,然后你用可以用自己的方法来更新他们。

    this.addEventListener('fetch', function(event) {
       event.respondWith(
    @@ -280,7 +280,7 @@ 

    自定义请求的响应

    });
    -

    我们可以用一个简单的例子开始,在任何情况下我们只是简单的响应这些缓存中的 url  和网络请求匹配的资源。

    +

    我们可以用一个简单的例子开始,在任何情况下我们只是简单的响应这些缓存中的 url 和网络请求匹配的资源。

    this.addEventListener('fetch', function(event) {
       event.respondWith(
    @@ -288,18 +288,18 @@ 

    自定义请求的响应

    ); });
    -

    caches.match(event.request) 允许我们对网络请求的资源和 cache 里可获取的资源进行匹配,查看是否缓存中有相应的资源。这个匹配通过 url 和 vary header 进行,就像正常的 http 请求一样。

    +

    caches.match(event.request) 允许我们对网络请求的资源和 cache 里可获取的资源进行匹配,查看是否缓存中有相应的资源。这个匹配通过 url 和 vary header 进行,就像正常的 http 请求一样。

    -

    让我们看看我们在定义我们的方法时的一些其他的选项(查看 Fetch API documentation 了解更多有关 {{domxref("Request")}} 和 {{domxref("Response")}} 对象的更多信息。)

    +

    让我们看看我们在定义我们的方法时的一些其他的选项(查看 Fetch API documentation 了解更多有关 {{domxref("Request")}} 和 {{domxref("Response")}} 对象的更多信息。)

    1. -

       {{domxref("Response.Response","Response()")}} 构造函数允许你创建一个自定义的 response。在这个例子中,我们只返回一个示例的字符串:

      +

      {{domxref("Response.Response","Response()")}} 构造函数允许你创建一个自定义的 response。在这个例子中,我们只返回一个示例的字符串:

      new Response('Hello from your friendly neighbourhood service worker!');
    2. -

      下面这个更复杂点的 Response 展示了你可以在你的响应里选择性的传一系列 header,来模仿标准的 HTTP 响应 header。这里我们只告诉浏览器我们虚假的响应的 content type:

      +

      下面这个更复杂点的 Response 展示了你可以在你的响应里选择性的传一系列 header,来模仿标准的 HTTP 响应 header。这里我们只告诉浏览器我们虚假的响应的 content type:

      new Response('<p>Hello from your friendly neighbourhood service worker!</p>', {
         headers: { 'Content-Type': 'text/html' }
      @@ -311,12 +311,12 @@ 

      自定义请求的响应

      fetch(event.request)
    3. -

      如果没有在缓存中找到匹配的资源,同时网络也不可用,你可以用 {{domxref("CacheStorage.match","match()")}} 把一些回退的页面作为响应来匹配这些资源,比如:

      +

      如果没有在缓存中找到匹配的资源,同时网络也不可用,你可以用 {{domxref("CacheStorage.match","match()")}} 把一些回退的页面作为响应来匹配这些资源,比如:

      caches.match('/fallback.html');
    4. -

      你可以通过 {{domxref("FetchEvent")}} 返回的 {{domxref("Request")}} 对象检索到非常多有关请求的信息:

      +

      你可以通过 {{domxref("FetchEvent")}} 返回的 {{domxref("Request")}} 对象检索到非常多有关请求的信息:

      event.request.url
       event.request.method
      @@ -327,7 +327,7 @@ 

      自定义请求的响应

      恢复失败的请求

      -

      在有 service worker cache 里匹配的资源时, caches.match(event.request) 是非常棒的。但是如果没有匹配资源呢?如果我们不提供任何错误处理,promise 就会 reject,同时也会出现一个网络错误。

      +

      在有 service worker cache 里匹配的资源时, caches.match(event.request) 是非常棒的。但是如果没有匹配资源呢?如果我们不提供任何错误处理,promise 就会 reject,同时也会出现一个网络错误。

      幸运的是,service worker 的基于 promise 的结构,使得提供更多的成功的选项变得微不足道。 我们可以这样做:

      @@ -341,7 +341,7 @@

      恢复失败的请求

      如果 promise reject 了, catch() 函数会执行默认的网络请求,意味着在网络可用的时候可以直接像服务器请求资源。

      -

      如果我们足够聪明的话,我们就不会只是从服务器请求资源,而且还会把请求到的资源保存到缓存中,以便将来离线时所用!这意味着如果其他额外的图片被加入到  Star Wars 图库里,我们的 app 会自动抓取它们。下面就是这个诀窍:

      +

      如果我们足够聪明的话,我们就不会只是从服务器请求资源,而且还会把请求到的资源保存到缓存中,以便将来离线时所用!这意味着如果其他额外的图片被加入到 Star Wars 图库里,我们的 app 会自动抓取它们。下面就是这个诀窍:

      self.addEventListener('fetch', function(event) {
         event.respondWith(
      @@ -356,7 +356,7 @@ 

      恢复失败的请求

      ); });
      -

      这里我们用 fetch(event.request) 返回了默认的网络请求,它返回了一个 promise 。当网络请求的 promise 成功的时候,我们 通过执行一个函数用 caches.open('v1') 来抓取我们的缓存,它也返回了一个 promise。当这个 promise 成功的时候, cache.put() 被用来把这些资源加入缓存中。资源是从  event.request 抓取的,它的响应会被  response.clone() 克隆一份然后被加入缓存。这个克隆被放到缓存中,它的原始响应则会返回给浏览器来给调用它的页面。

      +

      这里我们用 fetch(event.request) 返回了默认的网络请求,它返回了一个 promise 。当网络请求的 promise 成功的时候,我们 通过执行一个函数用 caches.open('v1') 来抓取我们的缓存,它也返回了一个 promise。当这个 promise 成功的时候, cache.put() 被用来把这些资源加入缓存中。资源是从 event.request 抓取的,它的响应会被 response.clone() 克隆一份然后被加入缓存。这个克隆被放到缓存中,它的原始响应则会返回给浏览器来给调用它的页面。

      为什么要这样做?这是因为请求和响应流只能被读取一次。为了给浏览器返回响应以及把它缓存起来,我们不得不克隆一份。所以原始的会返回给浏览器,克隆的会发送到缓存中。它们都是读取了一次。

      @@ -372,18 +372,18 @@

      恢复失败的请求

      }); }); }).catch(function() { -    return caches.match('/sw-test/gallery/myLittleVader.jpg'); -  }) + return caches.match('/sw-test/gallery/myLittleVader.jpg'); + }) ); });
      -

      因为只有新图片会失败,我们已经选择了回退的图片,一切都依赖我们之前看到的  install  事件侦听器中的安装过程。

      +

      因为只有新图片会失败,我们已经选择了回退的图片,一切都依赖我们之前看到的 install 事件侦听器中的安装过程。

      更新你的 service worker

      -

      如果你的 service worker 已经被安装,但是刷新页面时有一个新版本的可用,新版的 service worker 会在后台安装,但是还没激活。当不再有任何已加载的页面在使用旧版的 service worker 的时候,新版本才会激活。一旦再也没有更多的这样已加载的页面,新的 service worker 就会被激活。

      +

      如果你的 service worker 已经被安装,但是刷新页面时有一个新版本的可用,新版的 service worker 会在后台安装,但是还没激活。当不再有任何已加载的页面在使用旧版的 service worker 的时候,新版本才会激活。一旦再也没有更多的这样已加载的页面,新的 service worker 就会被激活。

      -

      你想把你的新版的 service worker 里的  install 事件监听器改成下面这样(注意新的版本号):

      +

      你想把你的新版的 service worker 里的 install 事件监听器改成下面这样(注意新的版本号):

      self.addEventListener('install', function(event) {
         event.waitUntil(
      @@ -403,15 +403,15 @@ 

      更新你的 service worker

      ); });
      -

      当安装发生的时候,前一个版本依然在响应请求,新的版本正在后台安装,我们调用了一个新的缓存 v2,所以前一个 v1 版本的缓存不会被扰乱。

      +

      当安装发生的时候,前一个版本依然在响应请求,新的版本正在后台安装,我们调用了一个新的缓存 v2,所以前一个 v1 版本的缓存不会被扰乱。

      当没有页面在使用当前的版本的时候,这个新的 service worker 就会激活并开始响应请求。

      删除旧缓存

      -

      你还有个 activate 事件。当之前版本还在运行的时候,一般被用来做些会破坏它的事情,比如摆脱旧版的缓存。在避免占满太多磁盘空间清理一些不再需要的数据的时候也是非常有用的,每个浏览器都对 service worker 可以用的缓存空间有个硬性的限制。浏览器尽力管理磁盘空间,但它可能会删除整个域的缓存。浏览器通常会删除域下面的所有的数据。

      +

      你还有个 activate 事件。当之前版本还在运行的时候,一般被用来做些会破坏它的事情,比如摆脱旧版的缓存。在避免占满太多磁盘空间清理一些不再需要的数据的时候也是非常有用的,每个浏览器都对 service worker 可以用的缓存空间有个硬性的限制。浏览器尽力管理磁盘空间,但它可能会删除整个域的缓存。浏览器通常会删除域下面的所有的数据。

      -

      传给 waitUntil() 的 promise 会阻塞其他的事件,直到它完成。所以你可以确保你的清理操作会在你的的第一次 fetch 事件之前会完成。

      +

      传给 waitUntil() 的 promise 会阻塞其他的事件,直到它完成。所以你可以确保你的清理操作会在你的的第一次 fetch 事件之前会完成。

      self.addEventListener('activate', function(event) {
         var cacheWhitelist = ['v2'];
      @@ -429,23 +429,23 @@ 

      删除旧缓存

      开发者工具

      -

      Chrome 有一个 chrome://inspect/#service-workers 可以展示当前设备上激活和存储的 service worker。还有个 chrome://serviceworker-internals 可以展示更多细节来允许你开始/暂停/调试 worker 的进程。未来他们会支持流量调节控制/离线模式来模拟弱网或者没网状态,这也是非常好的。

      +

      Chrome 有一个 chrome://inspect/#service-workers 可以展示当前设备上激活和存储的 service worker。还有个 chrome://serviceworker-internals 可以展示更多细节来允许你开始/暂停/调试 worker 的进程。未来他们会支持流量调节控制/离线模式来模拟弱网或者没网状态,这也是非常好的。

      Firefox 也开始实现一些关于 service worker 的有用的工具:

        -
      • 你可以访问  about:serviceworkers 来看注册了什么 SW,还可以更新和移除他们。
      • -
      • 当测试时你想绕开 HTTPS 限制时,可以检查 Firefox Devtools 的选项 "Enable Service Workers over HTTP (when toolbox is open)"  (齿轮图标)
      • +
      • 你可以访问 about:serviceworkers 来看注册了什么 SW,还可以更新和移除他们。
      • +
      • 当测试时你想绕开 HTTPS 限制时,可以检查 Firefox Devtools 的选项 "Enable Service Workers over HTTP (when toolbox is open)" (齿轮图标)
      -
      注意: 你也许想让你的应用运行在 http://localhost (示例: 使用 me@localhost:/my/app$ python -m SimpleHTTPServer) 以用于本地开发。详细内容请查看 Security considerations
      +
      注意: 你也许想让你的应用运行在 http://localhost (示例: 使用 me@localhost:/my/app$ python -m SimpleHTTPServer) 以用于本地开发。详细内容请查看 Security considerations

      查看更多

      • The Service Worker Cookbook
      • Is ServiceWorker ready?
      • -
      • 下载 Service Workers 101 cheatsheet.
      • +
      • 下载 Service Workers 101 cheatsheet.
      • Promises
      • Using web workers
      • Fetch API
      • diff --git a/files/zh-cn/web/api/serviceworker/index.html b/files/zh-cn/web/api/serviceworker/index.html index e6f945286cf5f2..fd02420257161f 100644 --- a/files/zh-cn/web/api/serviceworker/index.html +++ b/files/zh-cn/web/api/serviceworker/index.html @@ -11,11 +11,11 @@ ---
        {{SeeCompatTable}} {{APIRef("Service Workers API")}}
        -
        ServiceWorker API 的 ServiceWorker 接口 提供一个对一个服务工作者的引用。 多个浏览上下文(例如页面,工作者等)可以与相同的服务工作者相关联,每个都通过唯一的 ServiceWorker 对象。
        +
        ServiceWorker API 的 ServiceWorker 接口 提供一个对一个服务工作者的引用。 多个浏览上下文(例如页面,工作者等)可以与相同的服务工作者相关联,每个都通过唯一的 ServiceWorker 对象。
        -
         
        +
        -

        一个 ServiceWorker 对象在 {{domxref("ServiceWorkerRegistration.active")}} 属性和 {{domxref("ServiceWorkerContainer.controller")}} 属性中可用 — 这是一个激活并在控制页面的 service worker(service worker 成功注册,被控页面已经重新加载完毕.)

        +

        一个 ServiceWorker 对象在 {{domxref("ServiceWorkerRegistration.active")}} 属性和 {{domxref("ServiceWorkerContainer.controller")}} 属性中可用 — 这是一个激活并在控制页面的 service worker(service worker 成功注册,被控页面已经重新加载完毕.)

        ServiceWorker 接口被分配了一系列生命周期事件 --- 安装和激活 --- 以及功能型的事件,包括 fetch.一个 ServiceWorker 对象有一个与之关联的 {{domxref("ServiceWorker.state")}},指示着它的生命周期。

        @@ -40,7 +40,7 @@

        Event handlers

        方法

        -
        ServiceWorker 接口继承它父类 {{domxref("Worker")}} 的方法 ,并带有一个 {{domxref("Worker.terminate")}} 的异常 --- 它不应该从 service workers.ServiceWorker 中访问。
        +
        ServiceWorker 接口继承它父类 {{domxref("Worker")}} 的方法 ,并带有一个 {{domxref("Worker.terminate")}} 的异常 --- 它不应该从 service workers.ServiceWorker 中访问。

        例子

        diff --git a/files/zh-cn/web/api/serviceworker/scripturl/index.html b/files/zh-cn/web/api/serviceworker/scripturl/index.html index a22e7cbb8f8d1a..d8571ba7f0ac58 100644 --- a/files/zh-cn/web/api/serviceworker/scripturl/index.html +++ b/files/zh-cn/web/api/serviceworker/scripturl/index.html @@ -14,7 +14,7 @@

        语法

        -

        一个 {{domxref("USVString")}} (另见 WebIDL definition of USVString.)

        +

        一个 {{domxref("USVString")}} (另见 WebIDL definition of USVString.)

        规范

        diff --git a/files/zh-cn/web/api/serviceworker/state/index.html b/files/zh-cn/web/api/serviceworker/state/index.html index d8d33d75360d7b..1ad45ce8128bd7 100644 --- a/files/zh-cn/web/api/serviceworker/state/index.html +++ b/files/zh-cn/web/api/serviceworker/state/index.html @@ -14,11 +14,11 @@

        语法

        -

        一个 {{domxref("ServiceWorkerState")}} 的定义值 (see the spec.)

        +

        一个 {{domxref("ServiceWorkerState")}} 的定义值 (see the spec.)

        示例

        -

        这块代码出自 service worker registration-events sample (live demo). 代码监听了任何{{domxref("ServiceWorker.state")}}中的改变,并返回它的值。

        +

        这块代码出自 service worker registration-events sample (live demo). 代码监听了任何{{domxref("ServiceWorker.state")}}中的改变,并返回它的值。

        var serviceWorker;
         if (registration.installing) {
        diff --git a/files/zh-cn/web/api/serviceworker/statechange_event/index.html b/files/zh-cn/web/api/serviceworker/statechange_event/index.html
        index c3cc4d17ce7f23..dd22a0fc2484f3 100644
        --- a/files/zh-cn/web/api/serviceworker/statechange_event/index.html
        +++ b/files/zh-cn/web/api/serviceworker/statechange_event/index.html
        @@ -11,11 +11,11 @@
         

        语法

        ServiceWorker.onstatechange = function(statechangeevent) { ... }
        -ServiceWorker.addEventListener('statechange', function(statechangeevent) { ... } )
        +ServiceWorker.addEventListener('statechange', function(statechangeevent) { ... } )

        示例

        -

        这段代码出自 service worker registration-events sample (live demo). 它会监听 {{domxref("ServiceWorker.state")}} 的改变并返回它的值。

        +

        这段代码出自 service worker registration-events sample (live demo). 它会监听 {{domxref("ServiceWorker.state")}} 的改变并返回它的值。

        var serviceWorker;
         if (registration.installing) {
        @@ -36,7 +36,7 @@ 

        示例

        }); }
        -

        注意当statechange 抛出时,service worker 的引用可能已经改变。例如:

        +

        注意当statechange 抛出时,service worker 的引用可能已经改变。例如:

        navigator.serviceWorker.register(..).then(function(swr) {
           swr.installing.state == "installing"
        diff --git a/files/zh-cn/web/api/serviceworkercontainer/controller/index.html b/files/zh-cn/web/api/serviceworkercontainer/controller/index.html
        index 3e5cae5bceb9db..6ff37b71fffea5 100644
        --- a/files/zh-cn/web/api/serviceworkercontainer/controller/index.html
        +++ b/files/zh-cn/web/api/serviceworkercontainer/controller/index.html
        @@ -5,7 +5,7 @@
         ---
         
        {{SeeCompatTable}}{{APIRef("Service Workers API")}}
        -

        当状态为activated 时, {{domxref("ServiceWorkerContainer")}} 接口的只读属性 controller 返回一个 {{domxref("ServiceWorker")}} 对象(与 {{domxref("ServiceWorkerRegistration.active")}} 返回的对象是同一个)。当页面强制刷新 (Shift + refresh) 或不存在 active worder 时,该属性返回 null 。

        +

        当状态为activated 时, {{domxref("ServiceWorkerContainer")}} 接口的只读属性 controller 返回一个 {{domxref("ServiceWorker")}} 对象(与 {{domxref("ServiceWorkerRegistration.active")}} 返回的对象是同一个)。当页面强制刷新 (Shift + refresh) 或不存在 active worder 时,该属性返回 null

        语法

        @@ -22,11 +22,11 @@

        示例

        // Do a one-off check to see if a service worker's in control. if (navigator.serviceWorker.controller) { console.log('This page is currently controlled by:', -  navigator.serviceWorker.controller); + navigator.serviceWorker.controller); } else { -  console.log('This page is not currently controlled ' + -  'by a service worker.'); -  } + console.log('This page is not currently controlled ' + + 'by a service worker.'); + } } else { console.log('Service workers are not supported.'); }
        diff --git a/files/zh-cn/web/api/serviceworkercontainer/index.html b/files/zh-cn/web/api/serviceworkercontainer/index.html index 662210904bd858..9bab5e3c6433ce 100644 --- a/files/zh-cn/web/api/serviceworkercontainer/index.html +++ b/files/zh-cn/web/api/serviceworkercontainer/index.html @@ -14,7 +14,7 @@ - Workers translation_of: Web/API/ServiceWorkerContainer --- -

        {{SeeCompatTable}}{{APIRef("Service Workers API")}} 

        +

        {{SeeCompatTable}}{{APIRef("Service Workers API")}}

        ServiceWorkerContainer接口为 service worker 提供一个容器般的功能,包括对 service worker 的注册,卸载 ,更新和访问 service worker 的状态,以及他们的注册者

        @@ -30,7 +30,7 @@

        ?属性

        {{domxref("ServiceWorkerContainer.ready")}} {{readonlyinline}}
        定义了一个 serviceWorker 是否准备好为一个页面服务,将返回一个 {{jsxref("Promise")}},并且这个 {{jsxref("Promise")}}永远不会 reject,这个 {{jsxref("Promise")}}会在{{domxref("ServiceWorkerRegistration")}} 获取到一个 active 的{{domxref("ServiceWorker")}}的时候被解决。
        -
         
        +

        ?事件

        @@ -41,13 +41,13 @@

        ?事件

        {{domxref("ServiceWorkerContainer.onerror")}}
        当 service workers 中出现错误的时候被触发
        {{domxref("ServiceWorkerContainer.onmessage")}}
        -
        当{{domxref("ServiceWorkerContainer")}}  对象接受到一个 message 消息的时候被触发,message 由{{domxref("MessagePort.postMessage()")}}发出
        +
        当{{domxref("ServiceWorkerContainer")}} 对象接受到一个 message 消息的时候被触发,message 由{{domxref("MessagePort.postMessage()")}}发出

    ?方法

    -
    {{domxref("ServiceWorkerContainer.register", "ServiceWorkerContainer.register()")}} 
    +
    {{domxref("ServiceWorkerContainer.register", "ServiceWorkerContainer.register()")}}
    创建或者更新一个{{domxref("ServiceWorkerRegistration")}} 用给定的scriptURL
    {{domxref("ServiceWorkerContainer.getRegistration()")}}
    根据当前网页的 URL 与当前 service worker 的 scope Url 的匹配,返回一个 {{domxref("ServiceWorkerRegistration")}}对象,如果不能返回一个 {{domxref("ServiceWorkerRegistration")}},则返回一个{{jsxref("Promise")}}。
    @@ -57,7 +57,7 @@

    ?方法

    ?举例

    -

    ?代码是service worker fallback-response sample (see fallback-response live) 的其中一段. ?首先检查浏览器是否支持 serviceWorker. 代码创建了一个 serviceWorker,并且打印出来当前页面的 serviceWorker 的?是否接管了页面的网络状态。如果没有需要刷新页面再次查看.  代码也处理了注册失败的情况

    +

    ?代码是service worker fallback-response sample (see fallback-response live) 的其中一段. ?首先检查浏览器是否支持 serviceWorker. 代码创建了一个 serviceWorker,并且打印出来当前页面的 serviceWorker 的?是否接管了页面的网络状态。如果没有需要刷新页面再次查看. 代码也处理了注册失败的情况

    if ('serviceWorker' in navigator) {
       navigator.serviceWorker.register('service-worker.js', {scope: './'}).then(function() {
    @@ -109,5 +109,5 @@ 

    See also

      -
    •  
    • +
    diff --git a/files/zh-cn/web/api/serviceworkercontainer/register/index.html b/files/zh-cn/web/api/serviceworkercontainer/register/index.html index 9ef5002a410469..60feea81235cfa 100644 --- a/files/zh-cn/web/api/serviceworkercontainer/register/index.html +++ b/files/zh-cn/web/api/serviceworkercontainer/register/index.html @@ -7,19 +7,19 @@ ---

    {{SeeCompatTable}}{{APIRef("Service Workers API")}}

    -

    {{domxref("ServiceWorkerContainer")}} 接口的 register()方法创建或更新一个给定 scriptURL 的ServiceWorkerRegistration

    +

    {{domxref("ServiceWorkerContainer")}} 接口的 register()方法创建或更新一个给定 scriptURL 的ServiceWorkerRegistration

    如果成功,一个服务工作者注册将提供的脚本 URL 与一个范围进行关联,后者用于导航匹配。如果该方法无法返回一个 ServiceWorkerRegistration,则返回一个 Promise

    -

    您可以从受控页无条件调用此方法, 即,您不需要首先检查是否有一个有效的注册。

    +

    您可以从受控页无条件调用此方法, 即,您不需要首先检查是否有一个有效的注册。

    语法

    ServiceWorkerContainer.register(scriptURL, options)
         .then(
             function(ServiceWorkerRegistration) {
    -            // do something
    -        }
    +            // do something
    +        }
     );

    参数

    @@ -30,32 +30,32 @@

    参数

    options {{optional_inline}}
    注册时提供选项的配置对象。 目前可用的选项包括:
      -
    • scope: 一个 {{domxref("USVString")}},表示定义 service worker 注册范围的 URL ;service worker 可以控制的 URL 范围。通常是相对 URL。默认值是基于当前的 location,并以此来解析传入的路径。
    • +
    • scope: 一个 {{domxref("USVString")}},表示定义 service worker 注册范围的 URL ;service worker 可以控制的 URL 范围。通常是相对 URL。默认值是基于当前的 location,并以此来解析传入的路径。

    返回

    -

    返回一个 {{domxref("Promise")}} 对象, 值是 {{domxref("ServiceWorkerRegistration")}} .

    +

    返回一个 {{domxref("Promise")}} 对象, 值是 {{domxref("ServiceWorkerRegistration")}} .

    示例

    if ('serviceWorker' in navigator) {
    -  navigator.serviceWorker.register('service-worker.js', {scope: './'})
    -  .then(function(registration) {
    -    document.querySelector('#status').textContent = 'succeeded';
    -  }).catch(function(error) {
    -    document.querySelector('#status').textContent = error;
    -  });
    +  navigator.serviceWorker.register('service-worker.js', {scope: './'})
    +  .then(function(registration) {
    +    document.querySelector('#status').textContent = 'succeeded';
    +  }).catch(function(error) {
    +    document.querySelector('#status').textContent = error;
    +  });
     } else {
    -  // The current browser doesn't support service workers.
    -  let aElement = document.createElement('a');
    -  aElement.href = `
    +  // The current browser doesn't support service workers.
    +  let aElement = document.createElement('a');
    +  aElement.href = `
          http://www.chromium.org/blink/serviceworker/service-worker-faq
    -  `;
    -  aElement.textContent = 'unavailable';
    -  document.querySelector('#status').appendChild(aElement);
    +  `;
    +  aElement.textContent = 'unavailable';
    +  document.querySelector('#status').appendChild(aElement);
     }

    规范

    diff --git a/files/zh-cn/web/api/serviceworkerglobalscope/index.html b/files/zh-cn/web/api/serviceworkerglobalscope/index.html index 3209b153ae214d..4fd52971fa380a 100644 --- a/files/zh-cn/web/api/serviceworkerglobalscope/index.html +++ b/files/zh-cn/web/api/serviceworkerglobalscope/index.html @@ -5,15 +5,15 @@ ---
    {{APIRef("Service Workers API")}}
    -

    ServiceWorker API 的ServiceWorkerGlobalScope 接口,代表一个 service worker 的全局执行上下文。

    +

    ServiceWorker APIServiceWorkerGlobalScope 接口,代表一个 service worker 的全局执行上下文。

    开发者应该知道, ServiceWorker 的状态在结束/重启的循环中不是一直保持不变的,所以每个事件处理器应该设定一个默认的全局状态。

    -

    一旦成功地注册了 service worker,为了节省内存和处理器,它将在他的状态达到了空闲的时候被终止。 一个在激活状态的 service worker 为了响应事件是可以自动重启的,就像这两个方法, {{domxref("ServiceWorkerGlobalScope.onfetch")}} 或者{{domxref("ServiceWorkerGlobalScope.onmessage")}}.

    +

    一旦成功地注册了 service worker,为了节省内存和处理器,它将在他的状态达到了空闲的时候被终止。 一个在激活状态的 service worker 为了响应事件是可以自动重启的,就像这两个方法, {{domxref("ServiceWorkerGlobalScope.onfetch")}} 或者{{domxref("ServiceWorkerGlobalScope.onmessage")}}.

    此外,在 service worker 中,同步请求是被禁止的 - 只有异步请求,如方法{{domxref("GlobalFetch.fetch", "fetch()")}} 才被允许。

    -

    该接口继承自 {{domxref("WorkerGlobalScope")}} 接口,以及其父类 {{domxref("EventTarget")}}, 因此继承属性来自 {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}.

    +

    该接口继承自 {{domxref("WorkerGlobalScope")}} 接口,以及其父类 {{domxref("EventTarget")}}, 因此继承属性来自 {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}.

    {{InheritanceDiagram(700, 85, 20)}}

    @@ -48,7 +48,7 @@

    Event handlers

    {{domxref("ServiceWorkerGlobalScope.onpushsubscriptionchange")}}
    An event handler fired whenever a {{Event("pushsubscriptionchange")}} event occurs — when a push subscription has been invalidated, or is about to be invalidated (e.g. when a push service sets an expiration time.)
    {{domxref("ServiceWorkerGlobalScope.onsync")}}
    -
    An event handler fired whenever a {{Event("SyncEvent")}} event occurs. This is triggered when a call to {{domxref("SyncManager.register")}} is made from a service worker client page. The attempt to sync is made either immediately if the network is available or as soon as the network becomes available. 
    +
    An event handler fired whenever a {{Event("SyncEvent")}} event occurs. This is triggered when a call to {{domxref("SyncManager.register")}} is made from a service worker client page. The attempt to sync is made either immediately if the network is available or as soon as the network becomes available.

    方法

    diff --git a/files/zh-cn/web/api/serviceworkerregistration/active/index.html b/files/zh-cn/web/api/serviceworkerregistration/active/index.html index 2cf4c783a6d782..8561b39fe85907 100644 --- a/files/zh-cn/web/api/serviceworkerregistration/active/index.html +++ b/files/zh-cn/web/api/serviceworkerregistration/active/index.html @@ -5,7 +5,7 @@ ---
    {{SeeCompatTable}}{{APIRef("Service Workers API")}}
    -

    The active property of the {{domxref("ServiceWorkerRegistration")}} interface returns a service worker whose {{domxref("ServiceWorker.state")}} is activating or activated. This property is initially set to null.

    +

    The active property of the {{domxref("ServiceWorkerRegistration")}} interface returns a service worker whose {{domxref("ServiceWorker.state")}} is activating or activated. This property is initially set to null.

    An active worker controls a {{domxref("ServiceWorkerClient")}} if the client's URL falls within the scope of the registration (the scope option set when {{domxref("ServiceWorkerContainer.register")}} is first called.)

    diff --git a/files/zh-cn/web/api/serviceworkerregistration/index.html b/files/zh-cn/web/api/serviceworkerregistration/index.html index 4cd92cf57fa038..4accc840ebcd74 100644 --- a/files/zh-cn/web/api/serviceworkerregistration/index.html +++ b/files/zh-cn/web/api/serviceworkerregistration/index.html @@ -33,25 +33,25 @@

    Properties

    {{domxref("ServiceWorkerRegistration.scope")}} {{readonlyinline}}
    Returns a unique identifier for a service worker registration. This must be on the same origin as the document that registers the {{domxref("ServiceWorker")}}.
    -
    {{domxref("ServiceWorkerRegistration.installing")}} {{readonlyinline}}
    +
    {{domxref("ServiceWorkerRegistration.installing")}} {{readonlyinline}}
    Returns a service worker whose state is installing. This is initially set to null.
    -
    {{domxref("ServiceWorkerRegistration.waiting")}} {{readonlyinline}}
    +
    {{domxref("ServiceWorkerRegistration.waiting")}} {{readonlyinline}}
    Returns a service worker whose state is installed. This is initially set to null.
    -
    {{domxref("ServiceWorkerRegistration.active")}} {{readonlyinline}}
    +
    {{domxref("ServiceWorkerRegistration.active")}} {{readonlyinline}}
    Returns a service worker whose state is either activating or activated. This is initially set to null. An active worker will control a {{domxref("ServiceWorkerClient")}} if the client's URL falls within the scope of the registration (the scope option set when {{domxref("ServiceWorkerContainer.register")}} is first called.)
    {{domxref("serviceWorkerRegistration.periodicSync")}} {{non-standard_inline}} {{readonlyinline}}
    -
    Returns a reference to the {{domxref("PeriodicSyncManager")}} interface, which manages periodic background synchronization processes.
    +
    Returns a reference to the {{domxref("PeriodicSyncManager")}} interface, which manages periodic background synchronization processes.
    {{domxref("ServiceWorkerRegistration.pushManager")}} {{readonlyinline}}
    -
    Returns a reference to the {{domxref("PushManager")}} interface for managing push subscriptions including subscribing, getting an active subscription, and accessing push permission status.
    -
    {{domxref("ServiceWorkerRegistration.sync")}} {{non-standard_inline}} {{readonlyinline}} 
    -
    Returns a reference to the {{domxref("SyncManager")}} interface, which manages background synchronization processes.
    +
    Returns a reference to the {{domxref("PushManager")}} interface for managing push subscriptions including subscribing, getting an active subscription, and accessing push permission status.
    +
    {{domxref("ServiceWorkerRegistration.sync")}} {{non-standard_inline}} {{readonlyinline}}
    +
    Returns a reference to the {{domxref("SyncManager")}} interface, which manages background synchronization processes.

    Event handlers

    {{domxref("ServiceWorkerRegistration.onupdatefound")}} {{readonlyinline}}
    -
    An EventListener property called whenever an event of type updatefound is fired; it is fired any time the {{domxref("ServiceWorkerRegistration.installing")}} property acquires a new service worker.
    +
    An EventListener property called whenever an event of type updatefound is fired; it is fired any time the {{domxref("ServiceWorkerRegistration.installing")}} property acquires a new service worker.

    Methods

    @@ -60,7 +60,7 @@

    Methods

    {{domxref("ServiceWorkerRegistration.getNotifications()")}}
    -
    Returns a {{jsxref("Promise")}} that resolves to an array of {{domxref("Notification")}} objects.
    +
    Returns a {{jsxref("Promise")}} that resolves to an array of {{domxref("Notification")}} objects.
    {{domxref("ServiceWorkerRegistration.showNotification()")}}
    Displays the notification with the requested title.
    {{domxref("ServiceWorkerRegistration.update()")}}
    diff --git a/files/zh-cn/web/api/serviceworkerregistration/unregister/index.html b/files/zh-cn/web/api/serviceworkerregistration/unregister/index.html index d77fd1ded135a0..cac279ec362ad6 100644 --- a/files/zh-cn/web/api/serviceworkerregistration/unregister/index.html +++ b/files/zh-cn/web/api/serviceworkerregistration/unregister/index.html @@ -5,10 +5,10 @@ ---
    {{SeeCompatTable}}{{APIRef("Service Workers API")}}
    -

    {{domxref("ServiceWorkerRegistration")}} 接口的 unregister 方法用于取消对 service worker 的注册并返回一个 {{jsxref("Promise")}}。没有找到注册时,这个 promise 返回 false ,否则,不论取消成功与否都返回 true (当其他人在同一作用域调用了 {{domxref("ServiceWorkerContainer.register")}} 可能取消失败)service worker 会在取消注册前完成一切正在进行的操作。

    +

    {{domxref("ServiceWorkerRegistration")}} 接口的 unregister 方法用于取消对 service worker 的注册并返回一个 {{jsxref("Promise")}}。没有找到注册时,这个 promise 返回 false ,否则,不论取消成功与否都返回 true (当其他人在同一作用域调用了 {{domxref("ServiceWorkerContainer.register")}} 可能取消失败)service worker 会在取消注册前完成一切正在进行的操作。

    -

    Note: 这一特性同样适用于 Web Workers.

    +

    Note: 这一特性同样适用于 Web Workers.

    语法

    diff --git a/files/zh-cn/web/api/serviceworkerregistration/update/index.html b/files/zh-cn/web/api/serviceworkerregistration/update/index.html index 26365810a1cce0..648a5b7c25dce9 100644 --- a/files/zh-cn/web/api/serviceworkerregistration/update/index.html +++ b/files/zh-cn/web/api/serviceworkerregistration/update/index.html @@ -11,7 +11,7 @@
    {{domxref("ServiceWorkerRegistration")}} 的update方法尝试更新 service worker。获得 worker 脚本的 URL,逐字节匹配新获取的 worker 和当前的 worker,存在差异的时候安装新的 worker。获取 worker 脚本的更新操作会忽略浏览器缓存的 24 小时前的内容。
    -

    注意: 这个特性也应用于 Web Workers.

    +

    注意: 这个特性也应用于 Web Workers.

    语法

    diff --git a/files/zh-cn/web/api/settimeout/index.html b/files/zh-cn/web/api/settimeout/index.html index 3f0b128754beda..90c833c61775c1 100644 --- a/files/zh-cn/web/api/settimeout/index.html +++ b/files/zh-cn/web/api/settimeout/index.html @@ -22,13 +22,13 @@

    参数

    function
    -
    {{jsxref("function")}} 是你想要在到期时间 (delay毫秒) 之后执行的函数
    +
    {{jsxref("function")}} 是你想要在到期时间 (delay毫秒) 之后执行的函数
    code
    -
    这是一个可选语法,你可以使用字符串而不是{{jsxref("function")}} ,在delay毫秒之后编译和执行字符串 (使用该语法是不推荐的, 原因和使用 {{jsxref("Global_Objects/eval", "eval()")}}一样,有安全风险)。
    -
    delay {{optional_inline}}
    +
    这是一个可选语法,你可以使用字符串而不是{{jsxref("function")}} ,在delay毫秒之后编译和执行字符串 (使用该语法是不推荐的, 原因和使用 {{jsxref("Global_Objects/eval", "eval()")}}一样,有安全风险)。
    +
    delay {{optional_inline}}
    延迟的毫秒数 (一秒等于 1000 毫秒),函数的调用会在该延迟之后发生。如果省略该参数,delay 取默认值 0,意味着“马上”执行,或者尽快执行。不管是哪种情况,实际的延迟时间可能会比期待的 (delay 毫秒数) 值长,原因请查看实际延时比设定值更久的原因:最小延迟时间
    -
    arg1, ..., argN {{optional_inline}}
    -
    附加参数,一旦定时器到期,它们会作为参数传递给{{jsxref("function")}} 
    +
    arg1, ..., argN {{optional_inline}}
    +
    附加参数,一旦定时器到期,它们会作为参数传递给{{jsxref("function")}}
    @@ -39,13 +39,13 @@

    返回值

    返回值timeoutID是一个正整数,表示定时器的编号。这个值可以传递给{{domxref("clearTimeout()")}}来取消该定时器。

    -

    需要注意的是 setTimeout() 和 {{domxref("setInterval()")}} 共用一个编号池,技术上,clearTimeout() 和 {{domxref("clearInterval()")}} 可以互换。但是,为了避免混淆,不要混用取消定时函数。

    +

    需要注意的是 setTimeout() 和 {{domxref("setInterval()")}} 共用一个编号池,技术上,clearTimeout() 和 {{domxref("clearInterval()")}} 可以互换。但是,为了避免混淆,不要混用取消定时函数。

    在同一个对象上(一个 window 或者 worker),setTimeout()或者setInterval()在后续的调用不会重用同一个定时器编号。但是不同的对象使用独立的编号池。

    例子

    -

    下文的例子在网页中设置了两个简单的按钮,以触发 setTimeout() 和 clearTimeout() 方法:按下第一个按钮会设置一个定时器,定时器在 2s 后显示一个警告对话框,并将此次 setTimeout 的定时器 ID 保存起来,按下第二个按钮可以取消定时器。

    +

    下文的例子在网页中设置了两个简单的按钮,以触发 setTimeout()clearTimeout() 方法:按下第一个按钮会设置一个定时器,定时器在 2s 后显示一个警告对话框,并将此次 setTimeout 的定时器 ID 保存起来,按下第二个按钮可以取消定时器。

    HTML

    @@ -110,7 +110,7 @@

    结果展示

    {{EmbedLiveSample('例子')}}

    -

    也可参考 clearTimeout() 示例。

    +

    也可参考 clearTimeout() 示例。

    兼容旧环境(polyfill)

    @@ -226,21 +226,21 @@

    变通方法

    var intervalID = setTimeout(() => { myFunc('one', 'two', 'three'); }, 1000);
     
    -

    此外,也可使用 function's bind

    +

    此外,也可使用 function's bind

    setTimeout(function(arg1){}.bind(undefined, 10), 1000);
     

    关于"this"的问题

    -

    当你向 setTimeout() (或者其他函数) 传递一个函数时,该函数中的this指向跟你的期望可能不同,这个问题在 JavaScript reference 中进行了详细解释。

    +

    当你向 setTimeout() (或者其他函数) 传递一个函数时,该函数中的this指向跟你的期望可能不同,这个问题在 JavaScript reference 中进行了详细解释。

    解释

    setTimeout()调用的代码运行在与所在函数完全分离的执行环境上。这会导致,这些代码中包含的 this 关键字在非严格模式会指向 window (或全局) 对象,严格模式下为 undefined,这和所期望的this的值是不一样的。

    -

    备注:即使是在严格模式下,setTimeout()的回调函数里面的this仍然默认指向window对象, 并不是undefined

    +

    备注:即使是在严格模式下,setTimeout()的回调函数里面的this仍然默认指向window对象, 并不是undefined

    查看下面的例子:

    @@ -253,7 +253,7 @@

    解释

    myArray.myMethod(); // prints "zero,one,two" myArray.myMethod(1); // prints "one"

    -

    上面这段代码正常工作,用myArray调用,在函数内,this[sProperty]等于 myArray[sProperty]。然后,下面这个例子:

    +

    上面这段代码正常工作,用myArray调用,在函数内,this[sProperty]等于 myArray[sProperty]。然后,下面这个例子:

    setTimeout(myArray.myMethod, 1000); // prints "[object Window]" after 1 second
     setTimeout(myArray.myMethod, 1500, "1"); // prints "undefined" after 1.5 seconds
    @@ -275,27 +275,27 @@

    可能的解决方案

    setTimeout(() => {myArray.myMethod()}, 2000); // prints "zero,one,two" after 2 seconds
     setTimeout(() => {myArray.myMethod('1')}, 2500); // prints "one" after 2.5 seconds
    -

    另一个解决this问题的方法是使用两个非原生的 setTimeout()setInterval() 全局函数代替原生的。该非原生的函数通过使用Function.prototype.call 方法激活了正确的作用域。下面的代码显示了应该如何替换:

    +

    另一个解决this问题的方法是使用两个非原生的 setTimeout()setInterval() 全局函数代替原生的。该非原生的函数通过使用Function.prototype.call 方法激活了正确的作用域。下面的代码显示了应该如何替换:

    // Enable the passage of the 'this' object through the JavaScript timers
     
     var __nativeST__ = window.setTimeout, __nativeSI__ = window.setInterval;
     
     window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
    -  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
    -  return __nativeST__(vCallback instanceof Function ? function () {
    -    vCallback.apply(oThis, aArgs);
    -  } : vCallback, nDelay);
    +  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
    +  return __nativeST__(vCallback instanceof Function ? function () {
    +    vCallback.apply(oThis, aArgs);
    +  } : vCallback, nDelay);
     };
     
     window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
    -  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
    -  return __nativeSI__(vCallback instanceof Function ? function () {
    -    vCallback.apply(oThis, aArgs);
    -  } : vCallback, nDelay);
    +  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
    +  return __nativeSI__(vCallback instanceof Function ? function () {
    +    vCallback.apply(oThis, aArgs);
    +  } : vCallback, nDelay);
     };
    -
    备注: 这两个替换也让 IE 支持了符合 HTML5 标准的定时器函数。所以也能作为一个 polyfills。查看 Callback arguments 一段。
    +
    备注: 这两个替换也让 IE 支持了符合 HTML5 标准的定时器函数。所以也能作为一个 polyfills。查看 Callback arguments 一段。

    新特性检测:

    @@ -311,7 +311,7 @@

    可能的解决方案

    针对这个问题并没有原生的解决方案。

    -
    注:JavaScript 1.8.5 引入了 Function.prototype.bind() 方法,该方法允许显式地指定函数调用时 this 所指向的值 。该方法可以帮助你解决 this 指向不确定的问题。
    +
    注:JavaScript 1.8.5 引入了 Function.prototype.bind() 方法,该方法允许显式地指定函数调用时 this 所指向的值 。该方法可以帮助你解决 this 指向不确定的问题。

    使用bind()的例子:

    @@ -361,35 +361,35 @@

    最小延时 >=4ms

    setInterval(f, 0);
    -

    在 Chrome 和 Firefox 中, 定时器的第 5 次调用被阻塞了;在 Safari 是在第 6 次;Edge 是在第 3 次。Gecko 从这个版本 version 56开始对 setInterval() 开始采用这样的机制(setTimeout()已经实现,具体请参考以下内容)。

    +

    在 Chrome 和 Firefox 中, 定时器的第 5 次调用被阻塞了;在 Safari 是在第 6 次;Edge 是在第 3 次。Gecko 从这个版本 version 56开始对 setInterval() 开始采用这样的机制(setTimeout()已经实现,具体请参考以下内容)。

    一直以来,不同浏览器中出现这种最小延迟的情况有所不同(例如 Firefox)- 从其他地方调用了 setInterval(),或者在嵌套函数调用 setTimeout() 时(嵌套级别达到特定深度时),都会出现超时延迟。

    如果想在浏览器中实现 0ms 延时的定时器,你可以参考这里所说的 {{domxref("window.postMessage()")}}

    -

    Note: 最小延时, DOM_MIN_TIMEOUT_VALUE, 是 4ms  (但在 Firefox 中通常是是存储在 dom.min_timeout_value 这个变量中), DOM_CLAMP_TIMEOUT_NESTING_LEVEL 的第 5 层。

    +

    Note: 最小延时, DOM_MIN_TIMEOUT_VALUE, 是 4ms (但在 Firefox 中通常是是存储在 dom.min_timeout_value 这个变量中), DOM_CLAMP_TIMEOUT_NESTING_LEVEL 的第 5 层。

    -

    Note: 4 ms 是在  HTML5 spec  中精确的,并且在 2010 年及以后的跨浏览器中保持了一致,这个数值比 {{geckoRelease("5.0")}}规定的嵌套函数的最小延时 10ms 更为精确。

    +

    Note: 4 ms 是在 HTML5 spec 中精确的,并且在 2010 年及以后的跨浏览器中保持了一致,这个数值比 {{geckoRelease("5.0")}}规定的嵌套函数的最小延时 10ms 更为精确。

    未被激活的 tabs 的定时最小延迟>=1000ms

    为了优化后台 tab 的加载损耗(以及降低耗电量),在未被激活的 tab 中定时器的最小延时限制为 1S(1000ms)。

    -

    Firefox 从 version 5 (see {{bug(633421)}}开始采取这种机制,1000ms 的间隔值可以通过 dom.min_background_timeout_value 改变。Chrome 从 version 11 (crbug.com/66078) 开始采用。

    +

    Firefox 从 version 5 (see {{bug(633421)}}开始采取这种机制,1000ms 的间隔值可以通过 dom.min_background_timeout_value 改变。Chrome 从 version 11 (crbug.com/66078) 开始采用。

    -

    Android 版的 Firefox 对未被激活的后台 tabs 的使用了 15min 的最小延迟间隔时间 ,并且这些 tabs 也能完全不被加载。

    +

    Android 版的 Firefox 对未被激活的后台 tabs 的使用了 15min 的最小延迟间隔时间 ,并且这些 tabs 也能完全不被加载。

    -

    当 Web Audio API {{domxref("AudioContext")}} 正在被用来播放音频的时候,Firefox 50 不会再限制后台 tabs 的加载。 后续的 Firefox 51 版本修正了这个问题,即使在没有音频播放的情况下,也不再限制后台 tabs 的加载。这个解决了一些软件应用在后台 tabs 中播放基于文本的音频 ( note-based) 时,无法去同步音频和画面的问题。

    +

    当 Web Audio API {{domxref("AudioContext")}} 正在被用来播放音频的时候,Firefox 50 不会再限制后台 tabs 的加载。 后续的 Firefox 51 版本修正了这个问题,即使在没有音频播放的情况下,也不再限制后台 tabs 的加载。这个解决了一些软件应用在后台 tabs 中播放基于文本的音频 ( note-based) 时,无法去同步音频和画面的问题。

    追踪型脚本的最小延时限制

    -

    从 Firefox 55 版本开始,追踪型脚本(例如 谷歌分析,或者其他的一些被 Firefox 的 TP lists 识别为追踪型脚本的 外链 URL 脚本)是重点限制加载的对象。在当前正在使用的页面中,这个节流限制的延时依然是 4ms。但是在后台 tabs 中,这个最小延时限制是 10000ms(10s),这个限制会在文档第一次加载后的 30s 后生效。

    +

    从 Firefox 55 版本开始,追踪型脚本(例如 谷歌分析,或者其他的一些被 Firefox 的 TP lists 识别为追踪型脚本的 外链 URL 脚本)是重点限制加载的对象。在当前正在使用的页面中,这个节流限制的延时依然是 4ms。但是在后台 tabs 中,这个最小延时限制是 10000ms(10s),这个限制会在文档第一次加载后的 30s 后生效。

    控制这些行为的属性包含以下这些:

    @@ -401,7 +401,7 @@

    追踪型脚本的最小延时限

    超时延迟

    -

    除了"最小延时"之外,定时器仍然有可能因为当前页面(或者操作系统/浏览器本身)被其他任务占用导致延时。 需要被强调是, 直到调用 setTimeout()的主线程执行完其他任务之后,回调函数和代码段才能被执行。例如:

    +

    除了"最小延时"之外,定时器仍然有可能因为当前页面(或者操作系统/浏览器本身)被其他任务占用导致延时。 需要被强调是, 直到调用 setTimeout()的主线程执行完其他任务之后,回调函数和代码段才能被执行。例如:

    function foo() {
       console.log('foo has been called');
    @@ -414,11 +414,11 @@ 

    超时延迟

    After setTimeout
     foo has been called
    -

    出现这个结果的原因是,尽管setTimeout 以 0ms 的延迟来调用函数,但这个任务已经被放入了队列中并且等待下一次执行;并不是立即执行;队列中的等待函数被调用之前,当前代码必须全部运行完毕,因此这里运行结果并非预想的那样。

    +

    出现这个结果的原因是,尽管setTimeout 以 0ms 的延迟来调用函数,但这个任务已经被放入了队列中并且等待下一次执行;并不是立即执行;队列中的等待函数被调用之前,当前代码必须全部运行完毕,因此这里运行结果并非预想的那样。

    WebExtension Background pages 和定时器

    -

    在 WebExtension 中 background pages,timers 工作不正常。这主要因为 background pages 实际上,并不是一次性全部加载:如果浏览器没有使用它,就不加载,如果需要就恢复。这对于 WebExtension 是透明的,但是有些事件 (包括 JS 的 timers) 不会在不加载/恢复循环中执行,所以 WebExtension 中建议使用 alarms。更详细的细节在合并到事件驱动后台脚本

    +

    WebExtension 中 background pages,timers 工作不正常。这主要因为 background pages 实际上,并不是一次性全部加载:如果浏览器没有使用它,就不加载,如果需要就恢复。这对于 WebExtension 是透明的,但是有些事件 (包括 JS 的 timers) 不会在不加载/恢复循环中执行,所以 WebExtension 中建议使用 alarms。更详细的细节在合并到事件驱动后台脚本

    在本文写作的时候,只有 Chrome 展示了如上的特性 — Firefox 没有未加载/恢复循环的行为,所以 timers 仍然可以工作。但是,仍然建议不要在 WebExtension 中使用 timers:

    @@ -428,7 +428,7 @@

    WebExtension Background pages

    最大延时值

    -

    包括 IE、Chrome、Safari、Firefox 在内的浏览器其内部以 32 位带符号整数存储延时。这就会导致如果一个延时 (delay) 大于 2147483647 毫秒 (大约 24.8 天) 时就会溢出,导致定时器将会被立即执行。

    +

    包括 IE、Chrome、Safari、Firefox 在内的浏览器其内部以 32 位带符号整数存储延时。这就会导致如果一个延时 (delay) 大于 2147483647 毫秒 (大约 24.8 天) 时就会溢出,导致定时器将会被立即执行。

    规范

    @@ -446,5 +446,5 @@

    参见

  • {{domxref("clearTimeout")}}
  • {{domxref("WindowTimers.setInterval")}}
  • {{domxref("window.requestAnimationFrame")}}
  • -
  • Daemons management
  • +
  • Daemons management
  • diff --git a/files/zh-cn/web/api/shadowroot/delegatesfocus/index.html b/files/zh-cn/web/api/shadowroot/delegatesfocus/index.html index c0c23cb39b44e6..c2dfe8072a378a 100644 --- a/files/zh-cn/web/api/shadowroot/delegatesfocus/index.html +++ b/files/zh-cn/web/api/shadowroot/delegatesfocus/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef("Shadow DOM")}}
    -

    {{domxref("ShadowRoot")}} 接口中的只读属性 delegatesFocus 返回一个布尔值表明 delegatesFocus 是否在 shadow 被附加的时候设置了。

    +

    {{domxref("ShadowRoot")}} 接口中的只读属性 delegatesFocus 返回一个布尔值表明 delegatesFocus 是否在 shadow 被附加的时候设置了。

    这目前是一个实验的非标准特性,仅在 Chrome 中可用。

    @@ -15,7 +15,7 @@

    语法

    -

    一个布尔值 — true 值表明 shadow root 已经 delegate focus, false 反之。

    +

    一个布尔值 — true 值表明 shadow root 已经 delegate focus, false 反之。

    示例

    diff --git a/files/zh-cn/web/api/shadowroot/index.html b/files/zh-cn/web/api/shadowroot/index.html index 7a492e3c507cee..3f1ea989f0425e 100644 --- a/files/zh-cn/web/api/shadowroot/index.html +++ b/files/zh-cn/web/api/shadowroot/index.html @@ -11,15 +11,15 @@ ---

    {{APIRef('Shadow DOM')}}

    -

    Shadow DOM API 的 ShadowRoot 接口是一个 DOM 子树的根节点, 它与文档的主 DOM 树分开渲染。

    +

    Shadow DOM API 的 ShadowRoot 接口是一个 DOM 子树的根节点, 它与文档的主 DOM 树分开渲染。

    -

    你可以通过使用一个元素的 {{domxref("Element.shadowRoot")}} 属性来检索它的参考,假设它是由 {{domxref("Element.attachShadow()")}} 创建的并使 mode 设置为 open.

    +

    你可以通过使用一个元素的 {{domxref("Element.shadowRoot")}} 属性来检索它的参考,假设它是由 {{domxref("Element.attachShadow()")}} 创建的并使 mode 设置为 open.

    属性

    {{domxref("ShadowRoot.delegatesFocus")}} {{readonlyinline}} {{non-standard_inline}}
    -
    返回一个 boolean 值表明在 shadow 添加时 delegatesFocus 是否被设置 (see {{domxref("Element.attachShadow()")}})
    +
    返回一个 boolean 值表明在 shadow 添加时 delegatesFocus 是否被设置 (see {{domxref("Element.attachShadow()")}})
    {{domxref("ShadowRoot.host")}} {{readonlyinline}}
    ShadowRoot 附加的宿主 DOM 元素。
    {{domxref("ShadowRoot.innerHTML")}}
    @@ -30,18 +30,18 @@

    属性

    从 DocumentOrShadowRoot 中包含的属性

    -

    ShadowRoot 接口包含了下列从{{domxref("DocumentOrShadowRoot")}} mixin 中定义的属性。请注意它现在仅在 Chrome 浏览器中应用; 其它的浏览器仍在{{domxref("Document")}}接口实现。

    +

    ShadowRoot 接口包含了下列从{{domxref("DocumentOrShadowRoot")}} mixin 中定义的属性。请注意它现在仅在 Chrome 浏览器中应用; 其它的浏览器仍在{{domxref("Document")}}接口实现。

    {{domxref("DocumentOrShadowRoot.activeElement")}} {{readonlyInline}}
    -
    返回含有获取焦点了的 shadow tree 的 {{domxref('Element')}} 
    +
    返回含有获取焦点了的 shadow tree 的 {{domxref('Element')}}
    {{domxref("DocumentOrShadowRoot.styleSheets")}} {{readonlyInline}}
    返回 {{domxref('CSSStyleSheet')}} 的 {{domxref('StyleSheetList')}} 对象,用于代表通过链接加载到文档中或内嵌的样式表。

    方法

    -

     ShadowRoot 接口包含了下列几个在 {{domxref("DocumentOrShadowRoot")}} mixin 中定义的方法。请注意它现在仅在 Chrome 浏览器中应用; 其它的浏览器仍在{{domxref("Document")}}接口实现。

    +

    ShadowRoot 接口包含了下列几个在 {{domxref("DocumentOrShadowRoot")}} mixin 中定义的方法。请注意它现在仅在 Chrome 浏览器中应用; 其它的浏览器仍在{{domxref("Document")}}接口实现。

    {{domxref("DocumentOrShadowRoot.getSelection()")}}
    @@ -56,7 +56,7 @@

    方法

    例子

    -

    下面的这段代码是从我们的 life-cycle-callbacks 示例 (查看在线示例) 中提取出来的,它创建了一个由元素的属性指定的大小相等的正方形。

    +

    下面的这段代码是从我们的 life-cycle-callbacks 示例 (查看在线示例) 中提取出来的,它创建了一个由元素的属性指定的大小相等的正方形。

    Inside the <custom-square> element's class definition we include some life cycle callbacks that make a call to an external function, upateStyle(), which actually applies the size and color to the element. You'll see that we are passing it this (the custom element itself) as a parameter.

    diff --git a/files/zh-cn/web/api/shadowroot/innerhtml/index.html b/files/zh-cn/web/api/shadowroot/innerhtml/index.html index f003e94d1b5251..726ee11f38bb33 100644 --- a/files/zh-cn/web/api/shadowroot/innerhtml/index.html +++ b/files/zh-cn/web/api/shadowroot/innerhtml/index.html @@ -7,7 +7,7 @@ ---

    {{SeeCompatTable}}{{APIRef("Shadow DOM")}}

    -

     {{domxref("ShadowRoot")}} 接口的 innerHTML 属性设置或返回 ShadowRoot 内的 DOM 树。

    +

    {{domxref("ShadowRoot")}} 接口的 innerHTML 属性设置或返回 ShadowRoot 内的 DOM 树。

    句法

    diff --git a/files/zh-cn/web/api/shadowroot/mode/index.html b/files/zh-cn/web/api/shadowroot/mode/index.html index 1e2bbf50bbe3c1..71f377b001402b 100644 --- a/files/zh-cn/web/api/shadowroot/mode/index.html +++ b/files/zh-cn/web/api/shadowroot/mode/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef("Shadow DOM")}}{{SeeCompatTable}}
    -

    mode 是 {{domxref("ShadowRoot")}}  的只读属性,它返回 ShadowRoot 创建时的模式 ("open" 或者 "closed") 。

    +

    mode 是 {{domxref("ShadowRoot")}} 的只读属性,它返回 ShadowRoot 创建时的模式 ("open" 或者 "closed") 。

    ShadowRootmode 是 "closed" 时, ShadowRoot 的内部实现无法被 JavaScript 访问及修改 — 也就是说将该实现不公开,例如,<video> 标签内部实现无法被 JavaScript 访问及修改。

    @@ -15,7 +15,7 @@

    Syntax

    Value

    -

    值为 "open"  或者  "closed".

    +

    值为 "open" 或者 "closed".

    Specifications

    diff --git a/files/zh-cn/web/api/sharedworker/index.html b/files/zh-cn/web/api/sharedworker/index.html index 8d5241fa5bfb8c..a1fb8f22fa93fb 100644 --- a/files/zh-cn/web/api/sharedworker/index.html +++ b/files/zh-cn/web/api/sharedworker/index.html @@ -9,12 +9,12 @@ ---
    {{APIRef("Web Workers API")}}
    -
    SharedWorker 接口代表一种特定类型的 worker,可以从几个浏览上下文中访问,例如几个窗口、iframe 或其他 worker。它们实现一个不同于普通 worker 的接口,具有不同的全局作用域,{{domxref("SharedWorkerGlobalScope")}} 。
    +
    SharedWorker 接口代表一种特定类型的 worker,可以从几个浏览上下文中访问,例如几个窗口、iframe 或其他 worker。它们实现一个不同于普通 worker 的接口,具有不同的全局作用域,{{domxref("SharedWorkerGlobalScope")}} 。
    -

    注意:如果要使 SharedWorker 连接到多个不同的页面,这些页面必须是同源的(相同的协议、host 以及端口)。

    +

    注意:如果要使 SharedWorker 连接到多个不同的页面,这些页面必须是同源的(相同的协议、host 以及端口)。

    构造函数

    @@ -26,13 +26,13 @@

    构造函数

    属性

    -

    继承自其父类 {{domxref("EventTarget")}},并实现 {{domxref("AbstractWorker")}} 中的属性 。

    +

    继承自其父类 {{domxref("EventTarget")}},并实现 {{domxref("AbstractWorker")}} 中的属性 。

    {{domxref("AbstractWorker.onerror")}}
    -
    一个 {{domxref("EventListener")}},当 {{domxref("ErrorEvent")}} 类型的 error 冒泡到 worker 时触发。
    +
    一个 {{domxref("EventListener")}},当 {{domxref("ErrorEvent")}} 类型的 error 冒泡到 worker 时触发。
    {{domxref("SharedWorker.port")}} {{readonlyInline}}
    -
    返回一个 {{domxref("MessagePort")}} 对象,该对象可以用来进行通信和对共享 worker 进行控制。
    +
    返回一个 {{domxref("MessagePort")}} 对象,该对象可以用来进行通信和对共享 worker 进行控制。
    @@ -40,22 +40,22 @@

    属性

    方法

    -

    继承自其父类 {{domxref("EventTarget")}},并实现 {{domxref("AbstractWorker")}} 中的方法 。

    +

    继承自其父类 {{domxref("EventTarget")}},并实现 {{domxref("AbstractWorker")}} 中的方法 。

    示例

    -

    在这个 shared worker 例子中 ( 运行 shared worker), 我们有两个 HTML 页面, 每个页面中使用一些 JavaScript 来执行简单的计算。 这些脚本使用相同的 shared worker 来执行计算 — 都可以访问这个 worker,即使脚本在不同窗口的两个页面内运行。

    +

    在这个 shared worker 例子中 ( 运行 shared worker), 我们有两个 HTML 页面, 每个页面中使用一些 JavaScript 来执行简单的计算。 这些脚本使用相同的 shared worker 来执行计算 — 都可以访问这个 worker,即使脚本在不同窗口的两个页面内运行。

    下面的代码展示了如何通过 {{domxref("SharedWorker.SharedWorker", "SharedWorker()")}} 方法来创建一个共享进程对象。

    var myWorker = new SharedWorker("worker.js");
     
    -

    然后两个脚本都通过 {{domxref("MessagePort")}} 对象来访问 worker,这个对象用{{domxref("SharedWorker.port")}} 属性获得。如果已经用 addEventListener 监听了 onmessage 事件,则可以使用 start() 方法手动启动端口:

    +

    然后两个脚本都通过 {{domxref("MessagePort")}} 对象来访问 worker,这个对象用{{domxref("SharedWorker.port")}} 属性获得。如果已经用 addEventListener 监听了 onmessage 事件,则可以使用 start() 方法手动启动端口:

    myWorker.port.start();
    -

    当启动端口时,两个脚本都会向 worker 发送消息, 然后使用 port.postMessage()和 port.onmessage 处理从 worker 返回的消息:

    +

    当启动端口时,两个脚本都会向 worker 发送消息, 然后使用 port.postMessage()port.onmessage 处理从 worker 返回的消息:

    first.onchange = function() {
         myWorker.port.postMessage([first.value,second.value]);
    @@ -72,7 +72,7 @@ 

    示例

    console.log('Message received from worker'); }
    -

    在 worker 中我们使用 {{domxref("SharedWorkerGlobalScope.onconnect")}} 处理程序连接到上面讨论的相同端口。可以在 {{event("connect")}} 事件的 ports 属性中获取到与该 worker 相关联的端口 — 然后我们使用 {{domxref("MessagePort")}} start() 方法来启动端口,然后 onmessage 处理程序处理来自主线程的消息。

    +

    在 worker 中我们使用 {{domxref("SharedWorkerGlobalScope.onconnect")}} 处理程序连接到上面讨论的相同端口。可以在 {{event("connect")}} 事件的 ports 属性中获取到与该 worker 相关联的端口 — 然后我们使用 {{domxref("MessagePort")}} start() 方法来启动端口,然后 onmessage 处理程序处理来自主线程的消息。

    onconnect = function(e) {
         var port = e.ports[0];
    diff --git a/files/zh-cn/web/api/sharedworker/sharedworker/index.html b/files/zh-cn/web/api/sharedworker/sharedworker/index.html
    index 415b746e6604e0..e810e768b51162 100644
    --- a/files/zh-cn/web/api/sharedworker/sharedworker/index.html
    +++ b/files/zh-cn/web/api/sharedworker/sharedworker/index.html
    @@ -5,12 +5,12 @@
     ---
     
    {{APIRef("Web Workers API")}}
    -

    SharedWorker() 构造函数实例化的 {{domxref("SharedWorker")}} 对象可以执行指定的 URL 的脚本。所执行的脚本必须遵守 同源策略

    +

    SharedWorker() 构造函数实例化的 {{domxref("SharedWorker")}} 对象可以执行指定的 URL 的脚本。所执行的脚本必须遵守 同源策略

    -

    如果 URL 的语法无效或者违反了同源策略会抛出 SECURITY_ERR 类型的 {{domxref("DOMException")}} 异常。

    +

    如果 URL 的语法无效或者违反了同源策略会抛出 SECURITY_ERR 类型的 {{domxref("DOMException")}} 异常。

    -

    注意: 浏览器开发者对于 data URI 是否同源产生分歧。尽管 Gecko 10.0 {{geckoRelease("10.0")}} 及之后版本支持 data URIs,其他浏览器并不能支持 。

    +

    注意: 浏览器开发者对于 data URI 是否同源产生分歧。尽管 Gecko 10.0 {{geckoRelease("10.0")}} 及之后版本支持 data URIs,其他浏览器并不能支持 。

    语法

    @@ -22,15 +22,15 @@

    参数

    URL 参数
    -
    一个代表了 worker 将执行的脚本 URL 的 {{domxref("DOMString")}},它必须遵守同源策略。
    +
    一个代表了 worker 将执行的脚本 URL 的 {{domxref("DOMString")}},它必须遵守同源策略。
    name {{optional_inline}}
    一个指定表示 worker 范围的{{domxref("SharedWorkerGlobalScope")}}的标识名称的 {{domxref("DOMString")}},主要用于调试。
    options {{optional_inline}}
    创建实例时设定的包含了可选属性的对象。可用的属性包括:
      -
    • type: 一个制定所创建 worker 类型的 {{domxref("DOMString")}}。可设定的值为 classic 或者 module. 若不指定,默认值为 classic.
    • -
    • credentials: 一个指定要用于工作程序的凭据类型的  {{domxref("DOMString")}}。 可设定的值为 omit、same-origin 或 include. 若不指定,或者 type 设定为 classic, 默认值为 omit (无需凭据)。
    • +
    • type: 一个制定所创建 worker 类型的 {{domxref("DOMString")}}。可设定的值为 classic 或者 module. 若不指定,默认值为 classic.
    • +
    • credentials: 一个指定要用于工作程序的凭据类型的 {{domxref("DOMString")}}。 可设定的值为 omit、same-origininclude. 若不指定,或者 type 设定为 classic, 默认值为 omit (无需凭据)。
    • name: 一个指定表示 worker 范围的{{domxref("SharedWorkerGlobalScope")}}的标识名称的 {{domxref("DOMString")}},主要用于调试。
    @@ -44,8 +44,8 @@

    Exceptions

    • SecurityError 当文档不能正常启动 workers 时抛出
    • -
    • NetworkError 如果其中一个脚本的 MIME 类型是 text / csv,image / *,video / *或 audio / * 时抛出。类型只应该为 text/javascript
    • -
    • SyntaxError 当 URL 不能被解析时抛出
    • +
    • NetworkError 如果其中一个脚本的 MIME 类型是 text / csv,image / *,video / *或 audio / * 时抛出。类型只应该为 text/javascript
    • +
    • SyntaxErrorURL 不能被解析时抛出

    示例

    @@ -71,7 +71,7 @@

    示例

    console.log('Message received from worker'); }
    -

    看完整示例,请见 Basic shared worker example (run shared worker.)

    +

    看完整示例,请见 Basic shared worker example (run shared worker.)

    规范

    diff --git a/files/zh-cn/web/api/sourcebuffer/appendbuffer/index.html b/files/zh-cn/web/api/sourcebuffer/appendbuffer/index.html index 0aaceac60b3bde..226c3c392026d4 100644 --- a/files/zh-cn/web/api/sourcebuffer/appendbuffer/index.html +++ b/files/zh-cn/web/api/sourcebuffer/appendbuffer/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef("Media Source Extensions")}}{{SeeCompatTable}}
    -
    appendBuffer()方法将媒体片段数据添加到SourceBuffer对象中,其中媒体片段用{{domxref("ArrayBuffer")}} 或 ArrayBufferView 对象存储 。
    +
    appendBuffer()方法将媒体片段数据添加到SourceBuffer对象中,其中媒体片段用{{domxref("ArrayBuffer")}} 或 ArrayBufferView 对象存储 。

    Syntax

    @@ -16,7 +16,7 @@

    Parameters

    source
    -
    一个 {{domxref("BufferSource")}} 对象({{domxref("ArrayBufferView")}} 或 {{domxref("ArrayBuffer")}}),存储了你要添加到 SourceBuffer 中去的媒体片段数据。
    +
    一个 {{domxref("BufferSource")}} 对象({{domxref("ArrayBufferView")}} 或 {{domxref("ArrayBuffer")}}),存储了你要添加到 SourceBuffer 中去的媒体片段数据。

    Return value

    diff --git a/files/zh-cn/web/api/sourcebuffer/index.html b/files/zh-cn/web/api/sourcebuffer/index.html index 33713180b6fdc5..14c39d6eb850b9 100644 --- a/files/zh-cn/web/api/sourcebuffer/index.html +++ b/files/zh-cn/web/api/sourcebuffer/index.html @@ -17,7 +17,7 @@ ---

    {{APIRef("Media Source Extensions")}}

    -

    The SourceBuffer interface represents a chunk of media to be passed into an {{domxref("HTMLMediaElement")}} and played, via a {{domxref("MediaSource")}} object. This can be made up of one or several media segments.

    +

    The SourceBuffer interface represents a chunk of media to be passed into an {{domxref("HTMLMediaElement")}} and played, via a {{domxref("MediaSource")}} object. This can be made up of one or several media segments.

    {{InheritanceDiagram}}

    @@ -41,7 +41,7 @@

    Properties

    {{domxref("SourceBuffer.trackDefaults")}}
    Specifies the default values to use if kind, label, and/or language information is not available in the initialization segment of the media to be appended to the SourceBuffer.
    {{domxref("SourceBuffer.updating")}} {{readonlyInline}}
    -
    A boolean indicating whether the SourceBuffer is currently being updated — i.e. whether an {{domxref("SourceBuffer.appendBuffer()")}}, {{domxref("SourceBuffer.appendStream()")}}, or {{domxref("SourceBuffer.remove()")}} operation is currently in progress.
    +
    A boolean indicating whether the SourceBuffer is currently being updated — i.e. whether an {{domxref("SourceBuffer.appendBuffer()")}}, {{domxref("SourceBuffer.appendStream()")}}, or {{domxref("SourceBuffer.remove()")}} operation is currently in progress.
    {{domxref("SourceBuffer.videoTracks")}} {{readonlyInline}}
    A list of the video tracks currently contained inside the SourceBuffer.
    @@ -50,15 +50,15 @@

    Event handlers

    {{domxref("SourceBuffer.onabort")}}
    -
    Fired whenever {{domxref("SourceBuffer.appendBuffer()")}} or {{domxref("SourceBuffer.appendStream()")}} is ended by a call to {{domxref("SourceBuffer.abort()")}}. {{domxref("SourceBuffer.updating")}} changes from true to false.
    +
    Fired whenever {{domxref("SourceBuffer.appendBuffer()")}} or {{domxref("SourceBuffer.appendStream()")}} is ended by a call to {{domxref("SourceBuffer.abort()")}}. {{domxref("SourceBuffer.updating")}} changes from true to false.
    {{domxref("SourceBuffer.onerror")}}
    -
    Fired whenever an error occurs during {{domxref("SourceBuffer.appendBuffer()")}} or {{domxref("SourceBuffer.appendStream()")}}. {{domxref("SourceBuffer.updating")}} changes from true to false.
    +
    Fired whenever an error occurs during {{domxref("SourceBuffer.appendBuffer()")}} or {{domxref("SourceBuffer.appendStream()")}}. {{domxref("SourceBuffer.updating")}} changes from true to false.
    {{domxref("SourceBuffer.onupdate")}}
    -
    Fired whenever {{domxref("SourceBuffer.appendBuffer()")}} method or the {{domxref("SourceBuffer.remove()")}} completes. {{domxref("SourceBuffer.updating")}} changes from true to false. This event is fired before onupdateend.
    +
    Fired whenever {{domxref("SourceBuffer.appendBuffer()")}} method or the {{domxref("SourceBuffer.remove()")}} completes. {{domxref("SourceBuffer.updating")}} changes from true to false. This event is fired before onupdateend.
    {{domxref("SourceBuffer.onupdateend")}}
    -
    Fired whenever {{domxref("SourceBuffer.appendBuffer()")}} method or the {{domxref("SourceBuffer.remove()")}} has ended. This event is fired after onupdate.
    +
    Fired whenever {{domxref("SourceBuffer.appendBuffer()")}} method or the {{domxref("SourceBuffer.remove()")}} has ended. This event is fired after onupdate.
    {{domxref("SourceBuffer.onupdatestart")}}
    -
    Fired whenever the value of {{domxref("SourceBuffer.updating")}} transitions from false to true.
    +
    Fired whenever the value of {{domxref("SourceBuffer.updating")}} transitions from false to true.

    Methods

    diff --git a/files/zh-cn/web/api/sourcebuffer/mode/index.html b/files/zh-cn/web/api/sourcebuffer/mode/index.html index bf9b0c6d98073a..cd0692db2c476d 100644 --- a/files/zh-cn/web/api/sourcebuffer/mode/index.html +++ b/files/zh-cn/web/api/sourcebuffer/mode/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef("Media Source Extensions")}}{{SeeCompatTable}}
    -

    {{domxref("SourceBuffer")}} 接口的 mode 属性用来控制媒体片段添加到SourceBuffer 时的顺序是可以任意的还是有严格顺序的。

    +

    {{domxref("SourceBuffer")}} 接口的 mode 属性用来控制媒体片段添加到SourceBuffer 时的顺序是可以任意的还是有严格顺序的。

    两个可用的值:

    @@ -18,7 +18,7 @@

    如果 mode 初始值为 sequence 想要改为 segments 则会引发错误,必须以sequence模式维护现有段顺序。但是,可以将值从segments 模式改为sequence 模式。它意味着播放顺序将被固定,并会生成新的时间戳。

    -

    当 sourceBuffer 正在处理时 mode 的值无法改变,如 {{domxref("SourceBuffer.appendBuffer","appendBuffer()")}} 或 {{domxref("SourceBuffer.remove","remove()")}} .

    +

    当 sourceBuffer 正在处理时 mode 的值无法改变,如 {{domxref("SourceBuffer.appendBuffer","appendBuffer()")}} 或 {{domxref("SourceBuffer.remove","remove()")}} .

    Syntax

    diff --git a/files/zh-cn/web/api/speechgrammar/index.html b/files/zh-cn/web/api/speechgrammar/index.html index aaed679d45b1af..b69fb70e4a1538 100644 --- a/files/zh-cn/web/api/speechgrammar/index.html +++ b/files/zh-cn/web/api/speechgrammar/index.html @@ -14,7 +14,7 @@ ---

    {{APIRef("Web Speech API")}}{{SeeCompatTable}}

    -

    Web Speech API 的 SpeechGrammar 接口 表示了语音识别对象服务想要识别的一系列词语或模式。

    +

    Web Speech APISpeechGrammar 接口 表示了语音识别对象服务想要识别的一系列词语或模式。

    文法通过 JSpeech Grammar Format (JSGF.) 来定义,其他格式的文法会在以后支持。

    @@ -22,16 +22,16 @@

    构造函数

    {{domxref("SpeechGrammar.SpeechGrammar()")}}
    -
    创建一个新的 SpeechGrammar 对象。
    +
    创建一个新的 SpeechGrammar 对象。

    属性

    {{domxref("SpeechGrammar.src")}}
    -
    设置或返回 SpeechGrammar 对象实例中包含文法的字符串。
    +
    设置或返回 SpeechGrammar 对象实例中包含文法的字符串。
    {{domxref("SpeechGrammar.weight")}} {{optional_inline}}
    -
    设置或返回 SpeechGrammar 对象的权重。
    +
    设置或返回 SpeechGrammar 对象的权重。

    示例

    diff --git a/files/zh-cn/web/api/speechgrammar/speechgrammar/index.html b/files/zh-cn/web/api/speechgrammar/speechgrammar/index.html index e1c964d14995d3..4b447ed94a2827 100644 --- a/files/zh-cn/web/api/speechgrammar/speechgrammar/index.html +++ b/files/zh-cn/web/api/speechgrammar/speechgrammar/index.html @@ -14,7 +14,7 @@ ---

    {{APIRef("Web Speech API")}}{{SeeCompatTable}}

    -

    SpeechGrammar 是 {{domxref("SpeechGrammar")}} 接口的构造函数,创建一个新的 SpeechGrammar 对象实例。

    +

    SpeechGrammar 是 {{domxref("SpeechGrammar")}} 接口的构造函数,创建一个新的 SpeechGrammar 对象实例。

    语法

    @@ -49,7 +49,7 @@

    规格

    {{SpecName('Web Speech API', '#speechreco-section', 'SpeechGrammar()')}} {{Spec2('Web Speech API')}} -   + diff --git a/files/zh-cn/web/api/speechgrammar/src/index.html b/files/zh-cn/web/api/speechgrammar/src/index.html index 1247b055a8f908..33e63d114c41e7 100644 --- a/files/zh-cn/web/api/speechgrammar/src/index.html +++ b/files/zh-cn/web/api/speechgrammar/src/index.html @@ -15,7 +15,7 @@ ---

    {{APIRef("Web Speech API")}}{{SeeCompatTable}}

    -

    src 属性是 {{domxref("SpeechGrammar")}} 接口设置并返回的一个字符串,包含了 SpeechGrammar 对象的文法。

    +

    src 属性是 {{domxref("SpeechGrammar")}} 接口设置并返回的一个字符串,包含了 SpeechGrammar 对象的文法。

    语法

    diff --git a/files/zh-cn/web/api/speechgrammar/weight/index.html b/files/zh-cn/web/api/speechgrammar/weight/index.html index 223acff114d398..29b0567a07dc89 100644 --- a/files/zh-cn/web/api/speechgrammar/weight/index.html +++ b/files/zh-cn/web/api/speechgrammar/weight/index.html @@ -15,7 +15,7 @@ ---

    {{APIRef("Web Speech API")}}{{SeeCompatTable}}

    -

    {{domxref("SpeechGrammar")}} 接口的可选属性 weight 设置并返回了一个  SpeechGrammar 对象的权重。

    +

    {{domxref("SpeechGrammar")}} 接口的可选属性 weight 设置并返回了一个 SpeechGrammar 对象的权重。

    语法

    diff --git a/files/zh-cn/web/api/speechrecognition/index.html b/files/zh-cn/web/api/speechrecognition/index.html index 698b9a744d979c..7e444338b55b4a 100644 --- a/files/zh-cn/web/api/speechrecognition/index.html +++ b/files/zh-cn/web/api/speechrecognition/index.html @@ -98,7 +98,7 @@

    Examples

    In our simple Speech color changer example, we create a new SpeechRecognition object instance using the {{domxref("SpeechRecognition.SpeechRecognition", "SpeechRecognition()")}} constructor, create a new {{domxref("SpeechGrammarList")}}, and set it to be the grammar that will be recognised by the SpeechRecognition instance using the {{domxref("SpeechRecognition.grammars")}} property.

    -

    After some other values have been defined, we then set it so that the recognition service starts when a click event occurs (see {{domxref("SpeechRecognition.start()")}}.) When a result has been successfully recognised, the {{domxref("SpeechRecognition.onresult")}} handler fires,  we extract the color that was spoken from the event object, and then set the background color of the {{htmlelement("html")}} element to that colour.

    +

    After some other values have been defined, we then set it so that the recognition service starts when a click event occurs (see {{domxref("SpeechRecognition.start()")}}.) When a result has been successfully recognised, the {{domxref("SpeechRecognition.onresult")}} handler fires, we extract the color that was spoken from the event object, and then set the background color of the {{htmlelement("html")}} element to that colour.

    var grammar = '#JSGF V1.0; grammar colors; public <color> = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;'
     var recognition = new SpeechRecognition();
    diff --git a/files/zh-cn/web/api/speechrecognition/result_event/index.html b/files/zh-cn/web/api/speechrecognition/result_event/index.html
    index f0787c5af7c101..2cf27219924d16 100644
    --- a/files/zh-cn/web/api/speechrecognition/result_event/index.html
    +++ b/files/zh-cn/web/api/speechrecognition/result_event/index.html
    @@ -38,7 +38,7 @@ 

    Examples

    var recognition = new webkitSpeechRecognition() || new SpeechRecognition();
     
     recognition.addEventListener('result', function(event) {
    -  var color = event.results[0][0].transcript;
    +  var color = event.results[0][0].transcript;
       diagnostic.textContent = 'Result received: ' + color + '.';
       bg.style.backgroundColor = color;
     });
    @@ -47,9 +47,9 @@ 

    Examples

    Or use the onresult event handler property:

    recognition.onresult = function(event) {
    -  var color = event.results[0][0].transcript;
    -  diagnostic.textContent = 'Result received: ' + color + '.';
    -  bg.style.backgroundColor = color;
    +  var color = event.results[0][0].transcript;
    +  diagnostic.textContent = 'Result received: ' + color + '.';
    +  bg.style.backgroundColor = color;
     }

    Specifications

    diff --git a/files/zh-cn/web/api/speechrecognitionresult/index.html b/files/zh-cn/web/api/speechrecognitionresult/index.html index a0356e49c32c0b..2f931ea5bfe7ab 100644 --- a/files/zh-cn/web/api/speechrecognitionresult/index.html +++ b/files/zh-cn/web/api/speechrecognitionresult/index.html @@ -39,17 +39,17 @@

    Examples

    This code is excerpted from our Speech color changer example.

    recognition.onresult = function(event) {
    -  // The SpeechRecognitionEvent results property returns a SpeechRecognitionResultList object
    -  // The SpeechRecognitionResultList object contains SpeechRecognitionResult objects.
    -  // It has a getter so it can be accessed like an array
    -  // The first [0] returns the SpeechRecognitionResult at position 0.
    -  // Each SpeechRecognitionResult object contains SpeechRecognitionAlternative objects that contain individual results.
    -  // These also have getters so they can be accessed like arrays.
    -  // The second [0] returns the SpeechRecognitionAlternative at position 0.
    -  // We then return the transcript property of the SpeechRecognitionAlternative object
    -  var color = event.results[0][0].transcript;
    -  diagnostic.textContent = 'Result received: ' + color + '.';
    -  bg.style.backgroundColor = color;
    +  // The SpeechRecognitionEvent results property returns a SpeechRecognitionResultList object
    +  // The SpeechRecognitionResultList object contains SpeechRecognitionResult objects.
    +  // It has a getter so it can be accessed like an array
    +  // The first [0] returns the SpeechRecognitionResult at position 0.
    +  // Each SpeechRecognitionResult object contains SpeechRecognitionAlternative objects that contain individual results.
    +  // These also have getters so they can be accessed like arrays.
    +  // The second [0] returns the SpeechRecognitionAlternative at position 0.
    +  // We then return the transcript property of the SpeechRecognitionAlternative object
    +  var color = event.results[0][0].transcript;
    +  diagnostic.textContent = 'Result received: ' + color + '.';
    +  bg.style.backgroundColor = color;
     }

    Specifications

    diff --git a/files/zh-cn/web/api/speechrecognitionresult/isfinal/index.html b/files/zh-cn/web/api/speechrecognitionresult/isfinal/index.html index 6de3349a87e8e4..a336a8070f1420 100644 --- a/files/zh-cn/web/api/speechrecognitionresult/isfinal/index.html +++ b/files/zh-cn/web/api/speechrecognitionresult/isfinal/index.html @@ -19,22 +19,22 @@

    语法

    返回值

    -

    {{domxref("Boolean")}} 

    +

    {{domxref("Boolean")}}

    示例

    recognition.onresult = function(event) {
    -  // The SpeechRecognitionEvent results property returns a SpeechRecognitionResultList object
    -  // SpeechRecognitionResultList 对象包含 SpeechRecognitionResult 对象。
    -  // 它有一个 getter,所以它可以像数组一样被访问
    -  // 第一个 [0] 返回 SpeechRecognitionResult 的第 0 个下标。
    -  // Each SpeechRecognitionResult object contains SpeechRecognitionAlternative objects that contain individual results.
    -  // 这些也有 getter,因此可以像数组一样访问它们。
    -  // 第二个 [0] 返回 SpeechRecognitionAlternative 所在的第 0 个下标。
    -  // 然后我们返回的记录属性 SpeechRecognitionAlternative 对象
    -  var color = event.results[0][0].transcript;
    -  diagnostic.textContent = 'Result received: ' + color + '.';
    -  bg.style.backgroundColor = color;
    +  // The SpeechRecognitionEvent results property returns a SpeechRecognitionResultList object
    +  // SpeechRecognitionResultList 对象包含 SpeechRecognitionResult 对象。
    +  // 它有一个 getter,所以它可以像数组一样被访问
    +  // 第一个 [0] 返回 SpeechRecognitionResult 的第 0 个下标。
    +  // Each SpeechRecognitionResult object contains SpeechRecognitionAlternative objects that contain individual results.
    +  // 这些也有 getter,因此可以像数组一样访问它们。
    +  // 第二个 [0] 返回 SpeechRecognitionAlternative 所在的第 0 个下标。
    +  // 然后我们返回的记录属性 SpeechRecognitionAlternative 对象
    +  var color = event.results[0][0].transcript;
    +  diagnostic.textContent = 'Result received: ' + color + '.';
    +  bg.style.backgroundColor = color;
     
       console.log(event.results[0].isFinal);
     }
    diff --git a/files/zh-cn/web/api/speechsynthesis/index.html b/files/zh-cn/web/api/speechsynthesis/index.html index 6c98a6a9e9a763..33f1b2ece32fa5 100644 --- a/files/zh-cn/web/api/speechsynthesis/index.html +++ b/files/zh-cn/web/api/speechsynthesis/index.html @@ -12,19 +12,19 @@ ---

    {{APIRef("Web Speech API")}}{{SeeCompatTable}}

    -

     网页语音 APISpeechSynthesis 接口是语音服务的控制接口;它可以用于获取设备上关于可用的合成声音的信息,开始、暂停语音,或除此之外的其他命令。

    +

    网页语音 APISpeechSynthesis 接口是语音服务的控制接口;它可以用于获取设备上关于可用的合成声音的信息,开始、暂停语音,或除此之外的其他命令。

    属性

    -

    SpeechSynthesis 也从它的父接口继承属性,{{domxref("EventTarget")}}.

    +

    SpeechSynthesis 也从它的父接口继承属性,{{domxref("EventTarget")}}.

    {{domxref("SpeechSynthesis.paused")}} {{readonlyinline}}
    -
    SpeechSynthesis 处于暂停状态时, {{domxref("Boolean")}} 值返回 true 。
    +
    SpeechSynthesis 处于暂停状态时, {{domxref("Boolean")}} 值返回 true
    {{domxref("SpeechSynthesis.pending")}} {{readonlyinline}}
    -
    当语音播放队列到目前为止保持没有说完的语音时, {{domxref("Boolean")}} 值返回 true 。
    +
    当语音播放队列到目前为止保持没有说完的语音时, {{domxref("Boolean")}} 值返回 true
    {{domxref("SpeechSynthesis.speaking")}} {{readonlyinline}}
    -
    当语音谈话正在进行的时候,即使SpeechSynthesis处于暂停状态, {{domxref("Boolean")}} 返回 true 。
    +
    当语音谈话正在进行的时候,即使SpeechSynthesis处于暂停状态, {{domxref("Boolean")}} 返回 true

    事件操作

    @@ -36,7 +36,7 @@

    事件操作

    方法

    -

    SpeechSynthesis 也从它的父接口继承方法, {{domxref("EventTarget")}}.

    +

    SpeechSynthesis 也从它的父接口继承方法, {{domxref("EventTarget")}}.

    {{domxref("SpeechSynthesis.cancel()")}}
    @@ -44,18 +44,18 @@

    方法

    {{domxref("SpeechSynthesis.getVoices()")}}
    返回当前设备所有可用声音的 {{domxref("SpeechSynthesisVoice")}}列表。
    {{domxref("SpeechSynthesis.pause()")}}
    -
    把 SpeechSynthesis 对象置为暂停状态。
    +
    SpeechSynthesis 对象置为暂停状态。
    {{domxref("SpeechSynthesis.resume()")}}
    -
    把 SpeechSynthesis 对象置为一个非暂停状态:如果已经暂停了则继续。
    +
    SpeechSynthesis 对象置为一个非暂停状态:如果已经暂停了则继续。
    {{domxref("SpeechSynthesis.speak()")}}
    添加一个 {{domxref("SpeechSynthesisUtterance", "utterance")}} 到语音谈话队列;它将会在其他语音谈话播放完之后播放。

    示例

    -

    在我们基础的 Speech synthesiser 演示中,我们第一次用 window.speechSynthesis抓取了关于语音播放控制器的参考。在定义了一些必要的变量后,我们用 {{domxref("SpeechSynthesis.getVoices()")}}获取了一列可用的声音并且用它们生成一列可选表单,这样用户能够选择他们想要的声音。

    +

    在我们基础的 Speech synthesiser 演示中,我们第一次用 window.speechSynthesis抓取了关于语音播放控制器的参考。在定义了一些必要的变量后,我们用 {{domxref("SpeechSynthesis.getVoices()")}}获取了一列可用的声音并且用它们生成一列可选表单,这样用户能够选择他们想要的声音。

    -

     inputForm.onsubmit 的内部操作中,我们用preventDefault()阻止了表单的提交,创建了一个从{{htmlelement("input")}}文本框获取文本的新{{domxref("SpeechSynthesisUtterance")}}实例,在{{htmlelement("select")}}元素可选的声音设置成语音谈话的 voice 属性,然后通过{{domxref("SpeechSynthesis.speak()")}}方法开始语音播放。

    +

    inputForm.onsubmit 的内部操作中,我们用preventDefault()阻止了表单的提交,创建了一个从{{htmlelement("input")}}文本框获取文本的新{{domxref("SpeechSynthesisUtterance")}}实例,在{{htmlelement("select")}}元素可选的声音设置成语音谈话的 voice 属性,然后通过{{domxref("SpeechSynthesis.speak()")}}方法开始语音播放。

    var synth = window.speechSynthesis;
     
    diff --git a/files/zh-cn/web/api/speechsynthesis/paused/index.html b/files/zh-cn/web/api/speechsynthesis/paused/index.html
    index 3890f0f2ca88a4..909d3f93d0f378 100644
    --- a/files/zh-cn/web/api/speechsynthesis/paused/index.html
    +++ b/files/zh-cn/web/api/speechsynthesis/paused/index.html
    @@ -5,9 +5,9 @@
     ---
     
    {{APIRef("Web Speech API")}}{{SeeCompatTable}}
    -

      {{domxref("SpeechSynthesis")}} 接口的只读属性 paused 是一个  {{domxref("Boolean")}} 值,当SpeechSynthesis对象处于暂停状态时,返回true ,否则返回 false。

    +

    {{domxref("SpeechSynthesis")}} 接口的只读属性 paused 是一个 {{domxref("Boolean")}} 值,当SpeechSynthesis对象处于暂停状态时,返回true ,否则返回 false。

    -

    它能被设置为 {{domxref("SpeechSynthesis.pause()", "暂停状态")}} 即使当前并没有语音在播放队列中。如果{{domxref("SpeechSynthesisUtterance","utterances")}} 被添加到语音播放队列,队列中的语音并不会播放直到使用 {{domxref("SpeechSynthesis.resume()")}}使SpeechSynthesis对象处于非暂停状态。

    +

    它能被设置为 {{domxref("SpeechSynthesis.pause()", "暂停状态")}} 即使当前并没有语音在播放队列中。如果{{domxref("SpeechSynthesisUtterance","utterances")}} 被添加到语音播放队列,队列中的语音并不会播放直到使用 {{domxref("SpeechSynthesis.resume()")}}使SpeechSynthesis对象处于非暂停状态。

    语法

    diff --git a/files/zh-cn/web/api/speechsynthesisutterance/index.html b/files/zh-cn/web/api/speechsynthesisutterance/index.html index 7b915e46ebb158..a78cffe57eca0f 100644 --- a/files/zh-cn/web/api/speechsynthesisutterance/index.html +++ b/files/zh-cn/web/api/speechsynthesisutterance/index.html @@ -76,7 +76,7 @@

    Examples

    In our basic Speech synthesiser demo (source), we first grab a reference to the SpeechSynthesis controller using window.speechSynthesis. After defining some necessary variables, we retrieve a list of the voices available using {{domxref("SpeechSynthesis.getVoices()")}} and populate a select menu with them so the user can choose what voice they want.

    -

    Inside the inputForm.onsubmit handler, we stop the form submitting with {{domxref("Event.preventDefault","preventDefault()")}}, use the {{domxref("SpeechSynthesisUtterance.SpeechSynthesisUtterance()", "constructor")}} to create a new utterance instance containing the text from the text {{htmlelement("input")}}, set the utterance's {{domxref("SpeechSynthesisUtterance.voice","voice")}} to the voice selected in the {{htmlelement("select")}} element, and start the utterance speaking via the {{domxref("SpeechSynthesis.speak()")}} method.

    +

    Inside the inputForm.onsubmit handler, we stop the form submitting with {{domxref("Event.preventDefault","preventDefault()")}}, use the {{domxref("SpeechSynthesisUtterance.SpeechSynthesisUtterance()", "constructor")}} to create a new utterance instance containing the text from the text {{htmlelement("input")}}, set the utterance's {{domxref("SpeechSynthesisUtterance.voice","voice")}} to the voice selected in the {{htmlelement("select")}} element, and start the utterance speaking via the {{domxref("SpeechSynthesis.speak()")}} method.

    var synth = window.speechSynthesis;
     var voices = synth.getVoices();
    diff --git a/files/zh-cn/web/api/storage/clear/index.html b/files/zh-cn/web/api/storage/clear/index.html
    index 0722431a59358a..7f764a5bb4fcde 100644
    --- a/files/zh-cn/web/api/storage/clear/index.html
    +++ b/files/zh-cn/web/api/storage/clear/index.html
    @@ -5,7 +5,7 @@
     ---
     

    {{APIRef("Web Storage API")}}

    -

    clear() 是 {{domxref("Storage")}} 接口的一个方法,调用它可以清空存储对象里所有的键值。

    +

    clear() 是 {{domxref("Storage")}} 接口的一个方法,调用它可以清空存储对象里所有的键值。

    语法

    @@ -21,7 +21,7 @@

    返回值

    示例

    -

    下面的函数在本地存储里面创建三个数据项,然后使用 clear() 把它们全部移除。

    +

    下面的函数在本地存储里面创建三个数据项,然后使用 clear() 把它们全部移除。

    function populateStorage() {
       localStorage.setItem('bgcolor', 'red');
    @@ -32,7 +32,7 @@ 

    示例

    }
    -

    备注:一个实际的例子 Web Storage Demo

    +

    备注:一个实际的例子 Web Storage Demo

    规范

    diff --git a/files/zh-cn/web/api/storage/getitem/index.html b/files/zh-cn/web/api/storage/getitem/index.html index f5873aa2396a83..ce227049662e8b 100644 --- a/files/zh-cn/web/api/storage/getitem/index.html +++ b/files/zh-cn/web/api/storage/getitem/index.html @@ -21,7 +21,7 @@

    参数

    返回值

    -

    一个 {{domxref("DOMString")}},键名对应的值。如果键名不存在于存储中,则返回 null

    +

    一个 {{domxref("DOMString")}},键名对应的值。如果键名不存在于存储中,则返回 null

    示例

    @@ -42,7 +42,7 @@

    示例

    }
    -

    备注:一个实际的例子 Web Storage Demo

    +

    备注:一个实际的例子 Web Storage Demo

    规范

    diff --git a/files/zh-cn/web/api/storage/index.html b/files/zh-cn/web/api/storage/index.html index 7a2c92df5af9a7..a02c1adaa1ce71 100644 --- a/files/zh-cn/web/api/storage/index.html +++ b/files/zh-cn/web/api/storage/index.html @@ -12,15 +12,15 @@ ---

    {{APIRef("Web Storage API")}}

    -

    作为 Web Storage API 的接口,Storage 提供了访问特定域名下的会话存储或本地存储的功能,例如,可以添加、修改或删除存储的数据项。

    +

    作为 Web Storage API 的接口,Storage 提供了访问特定域名下的会话存储或本地存储的功能,例如,可以添加、修改或删除存储的数据项。

    -

    如果你想要操作一个域名的会话存储,可以使用 {{domxref("Window.sessionStorage")}};如果想要操作一个域名的本地存储,可以使用 {{domxref("Window.localStorage")}}。

    +

    如果你想要操作一个域名的会话存储,可以使用 {{domxref("Window.sessionStorage")}};如果想要操作一个域名的本地存储,可以使用 {{domxref("Window.localStorage")}}。

    属性

    {{domxref("Storage.length")}} {{readonlyInline}}
    -
    返回一个整数,表示存储在 Storage 对象中的数据项数量。
    +
    返回一个整数,表示存储在 Storage 对象中的数据项数量。

    方法

    @@ -43,7 +43,7 @@

    方法

    示例

    -

    这里我们通过调用 localStorage 来访问一个 Storage 对象。首先,使用 !localStorage.getItem('bgcolor') 测试本地存储中是否包含该数据项。如果包含,则运行 setStyles() 函数,该函数使用 localStorage.getItem() 来获取数据项,并使用这些值更新页面样式。如果不包含,我们运行另一个函数 populateStorage(),该函数使用 localStorage.setItem() 设置数据项,然后运行 setStyles()

    +

    这里我们通过调用 localStorage 来访问一个 Storage 对象。首先,使用 !localStorage.getItem('bgcolor') 测试本地存储中是否包含该数据项。如果包含,则运行 setStyles() 函数,该函数使用 localStorage.getItem() 来获取数据项,并使用这些值更新页面样式。如果不包含,我们运行另一个函数 populateStorage(),该函数使用 localStorage.setItem() 设置数据项,然后运行 setStyles()

    if(!localStorage.getItem('bgcolor')) {
       populateStorage();
    @@ -74,7 +74,7 @@ 

    示例

    }
    -

    备注:要运行完整的例子,可查看 Web Storage Demo

    +

    备注:要运行完整的例子,可查看 Web Storage Demo

    规范

    diff --git a/files/zh-cn/web/api/storage/key/index.html b/files/zh-cn/web/api/storage/key/index.html index d0a423d9b1cf37..663e4a223d3986 100644 --- a/files/zh-cn/web/api/storage/key/index.html +++ b/files/zh-cn/web/api/storage/key/index.html @@ -5,7 +5,7 @@ ---

    {{APIRef()}}

    -

    key() 作为 {{domxref("Storage")}} 接口的方法,接受一个数值 n 作为参数,返回存储对象第 n 个数据项的键名。键的存储顺序是由用户代理定义的,所以尽可能不要依赖这个方法。

    +

    key() 作为 {{domxref("Storage")}} 接口的方法,接受一个数值 n 作为参数,返回存储对象第 n 个数据项的键名。键的存储顺序是由用户代理定义的,所以尽可能不要依赖这个方法。

    语法

    @@ -35,7 +35,7 @@

    示例

    }
    -

    备注: 关于实际的例子,可以查看 Web Storage Demo.

    +

    备注: 关于实际的例子,可以查看 Web Storage Demo.

    规范

    @@ -48,4 +48,4 @@

    浏览器兼容性

    相关链接

    -

    使用 Web Storage API

    +

    使用 Web Storage API

    diff --git a/files/zh-cn/web/api/storage/length/index.html b/files/zh-cn/web/api/storage/length/index.html index 75807b756ebf6a..e461ec0814911e 100644 --- a/files/zh-cn/web/api/storage/length/index.html +++ b/files/zh-cn/web/api/storage/length/index.html @@ -5,7 +5,7 @@ ---

    {{APIRef("Web Storage API")}}

    -

    length 是 {{domxref("Storage")}} 接口的只读属性,返回一个整数,表示存储在 Storage 对象里的数据项(data items)数量。

    +

    length 是 {{domxref("Storage")}} 接口的只读属性,返回一个整数,表示存储在 Storage 对象里的数据项(data items)数量。

    语法

    @@ -28,7 +28,7 @@

    示例

    }
    -

    备注: 关于实际的例子,可以查看 Web Storage Demo.

    +

    备注: 关于实际的例子,可以查看 Web Storage Demo.

    规范

    diff --git a/files/zh-cn/web/api/storage/removeitem/index.html b/files/zh-cn/web/api/storage/removeitem/index.html index c4ee65fa81b9b9..0bafc11fe6c6e9 100644 --- a/files/zh-cn/web/api/storage/removeitem/index.html +++ b/files/zh-cn/web/api/storage/removeitem/index.html @@ -5,7 +5,7 @@ ---

    {{APIRef("Web Storage API")}}

    -

    {{domxref("Storage")}} 接口的 removeItem() 方法,接受一个键名作为参数,会从给定的 Storage 对象中删除该键名(如果存在)。 如果没有与该给定键名匹配的项,则此方法将不执行任何操作。

    +

    {{domxref("Storage")}} 接口的 removeItem() 方法,接受一个键名作为参数,会从给定的 Storage 对象中删除该键名(如果存在)。 如果没有与该给定键名匹配的项,则此方法将不执行任何操作。

    语法

    @@ -35,7 +35,7 @@

    示例

    }
    -

    备注:完整的例子,可查看 Web Storage Demo

    +

    备注:完整的例子,可查看 Web Storage Demo

    规范

    diff --git a/files/zh-cn/web/api/storage_api/index.html b/files/zh-cn/web/api/storage_api/index.html index abc45e336aa36f..bd2ce48e65f780 100644 --- a/files/zh-cn/web/api/storage_api/index.html +++ b/files/zh-cn/web/api/storage_api/index.html @@ -85,7 +85,7 @@

    配额与使用量的估算

    To determine the estimated quota and usage values for a given origin, use the {{domxref("StorageManager.estimate", "navigator.storage.estimate()")}} method, which returns a promise that, when resolved, receives a {{domxref("StorageEstimate")}} that contains these figures. For example:

    navigator.storage.estimate().then(estimate => {
    -  // estimate.quota 是估得的配额
    +  // estimate.quota 是估得的配额
       // estimate.usage 是估得的使用量,单位为 byte 比特
     });
    diff --git a/files/zh-cn/web/api/storageevent/index.html b/files/zh-cn/web/api/storageevent/index.html index 33f1e5dbeba253..a4c413a2a687f1 100644 --- a/files/zh-cn/web/api/storageevent/index.html +++ b/files/zh-cn/web/api/storageevent/index.html @@ -7,9 +7,9 @@ ---

    {{APIRef("Web Storage API")}}

    -

    当前页面使用的 storage 被其他页面修改时会触发 StorageEvent 事件. 

    +

    当前页面使用的 storage 被其他页面修改时会触发 StorageEvent 事件.

    -

    [译者:事件在同一个域下的不同页面之间触发,即在 A 页面注册了 storge 的监听处理,只有在跟 A 同域名下的 B 页面操作 storage 对象,A 页面才会被触发 storage 事件] 

    +

    [译者:事件在同一个域下的不同页面之间触发,即在 A 页面注册了 storge 的监听处理,只有在跟 A 同域名下的 B 页面操作 storage 对象,A 页面才会被触发 storage 事件]

    {{InheritanceDiagram}}

    @@ -53,7 +53,7 @@

    属性

    oldValue DOMString - 该属性代表修改前的原值。在设置新键值对时由于没有原始值,该属性值为 null(只读) + 该属性代表修改前的原值。在设置新键值对时由于没有原始值,该属性值为 null(只读) storageArea diff --git a/files/zh-cn/web/api/storagemanager/persist/index.html b/files/zh-cn/web/api/storagemanager/persist/index.html index e5ba37c837c867..d7b2553937b546 100644 --- a/files/zh-cn/web/api/storagemanager/persist/index.html +++ b/files/zh-cn/web/api/storagemanager/persist/index.html @@ -22,12 +22,12 @@

    返回值

    示例

    if (navigator.storage && navigator.storage.persist)
    -  navigator.storage.persist().then(function(persistent) {
    -    if (persistent)
    -      console.log("Storage will not be cleared except by explicit user action");
    -    else
    -      console.log("Storage may be cleared by the UA under storage pressure.");
    -  });
    + navigator.storage.persist().then(function(persistent) { + if (persistent) + console.log("Storage will not be cleared except by explicit user action"); + else + console.log("Storage may be cleared by the UA under storage pressure."); + });

    规范

    diff --git a/files/zh-cn/web/api/storagemanager/persisted/index.html b/files/zh-cn/web/api/storagemanager/persisted/index.html index 99e69612c3d79e..f7d45c2a307af7 100644 --- a/files/zh-cn/web/api/storagemanager/persisted/index.html +++ b/files/zh-cn/web/api/storagemanager/persisted/index.html @@ -22,12 +22,12 @@

    返回值

    示例

    if (navigator.storage && navigator.storage.persist)
    -  navigator.storage.persisted().then(function(persistent) {
    -    if (persistent)
    -      console.log("Storage will not be cleared except by explicit user action");
    -    else
    -      console.log("Storage may be cleared by the UA under storage pressure.");
    -  });
    + navigator.storage.persisted().then(function(persistent) { + if (persistent) + console.log("Storage will not be cleared except by explicit user action"); + else + console.log("Storage may be cleared by the UA under storage pressure."); + });

    规范

    diff --git a/files/zh-cn/web/api/streams_api/concepts/index.html b/files/zh-cn/web/api/streams_api/concepts/index.html index 4e03afd7d01f57..ba5a31112f1170 100644 --- a/files/zh-cn/web/api/streams_api/concepts/index.html +++ b/files/zh-cn/web/api/streams_api/concepts/index.html @@ -9,32 +9,32 @@ ---
    {{apiref("Streams")}}
    -

    Streams API 为 Web 平台提供了一组十分有用的工具,提供了一系列对象以允许 JavaScript 访问来自网络的数据流,并根据开发人员的需要对其进行处理。与流相关的一些概念和术语可能会令您感到陌生——本文将解释您需要了解的所有内容。

    +

    Streams API 为 Web 平台提供了一组十分有用的工具,提供了一系列对象以允许 JavaScript 访问来自网络的数据流,并根据开发人员的需要对其进行处理。与流相关的一些概念和术语可能会令您感到陌生——本文将解释您需要了解的所有内容。

    Readable streams

    -

    一个可读流是一个数据源,在 JavaScript 中用一个 {{domxref("ReadableStream")}} 对象表示,数据从它的 underlying source (底层源) 流出 —— 底层源表示一个您希望从中获取数据的,来自网络或其他域的,某种资源。

    +

    一个可读流是一个数据源,在 JavaScript 中用一个 {{domxref("ReadableStream")}} 对象表示,数据从它的 underlying source (底层源) 流出 —— 底层源表示一个您希望从中获取数据的,来自网络或其他域的,某种资源。

    -

    有两种 underlying source:

    +

    有两种 underlying source:

      -
    • Push sources 会在您访问了它们之后,不断地主动推送数据。您可以自行 start, pause,或 cancel 对流的访问。例如视频流和 TCP/Web sockets 。
    • -
    • Pull sources 需要您在连接到它们后,显式地从它们请求数据。例如通过 Fetch 或 XHR 请求访问一个文件。
    • +
    • Push sources 会在您访问了它们之后,不断地主动推送数据。您可以自行 start, pause,或 cancel 对流的访问。例如视频流和 TCP/Web sockets
    • +
    • Pull sources 需要您在连接到它们后,显式地从它们请求数据。例如通过 FetchXHR 请求访问一个文件。
    -

    数据被按序读入到许多小块,这些小块被称作 chunkchunk 可以是单个字节,也可以是某种更大的数据类型,例如特定大小的 typed array 。来自一个流的 chunks 可以有不同的大小和类型。

    +

    数据被按序读入到许多小块,这些小块被称作 chunkchunk 可以是单个字节,也可以是某种更大的数据类型,例如特定大小的 typed array 。来自一个流的 chunks 可以有不同的大小和类型。

    -

    已放入到流中的 chunks 称作 enqueued —— 这意味着它们已经准备好被读取,并等待在队列中。流的一个 internal queue 跟踪了那些尚未读取的块(请参阅下面的内部队列和队列策略部分)。

    +

    已放入到流中的 chunks 称作 enqueued —— 这意味着它们已经准备好被读取,并等待在队列中。流的一个 internal queue 跟踪了那些尚未读取的块(请参阅下面的内部队列和队列策略部分)。

    -

    流中的 chunks 由一个 reader 读取 —— 该数据处理过程一次只处理一个 chunk,允许您对其执行任何类型的操作。reader 加上与它一起运行的其他处理代码合称为一个 consumer 

    +

    流中的 chunks 由一个 reader 读取 —— 该数据处理过程一次只处理一个 chunk,允许您对其执行任何类型的操作。reader 加上与它一起运行的其他处理代码合称为一个 consumer

    另一个您将用到的对象叫做 controller —— 每个 reader 都有一个关联的 controller,用来控制流(例如,可以将流 close)。

    -

    一个流一次只能被一个 reader 读;当一个 reader 被创建并开始读一个流(an active reader),我们说,它被 locked 在该流上。如果您想让另一个 reader 读这个流,则通常需要先取消第一个 reader ,再执行其他操作。(您可以 tee 流,参阅下面的 Teeing 部分)

    +

    一个流一次只能被一个 reader 读;当一个 reader 被创建并开始读一个流(an active reader),我们说,它被 locked 在该流上。如果您想让另一个 reader 读这个流,则通常需要先取消第一个 reader ,再执行其他操作。(您可以 tee 流,参阅下面的 Teeing 部分)

    -

    注意,有两种不同类型的可读流。除了传统的可读流之外,还有一种类型叫做字节流 —— 这是传统流的扩展版本,用于读取底层字节源。相比可读流,字节流除了 default reader ,还可以使用 BYOB reader (BYOB, or "bring your own buffer", "带上你自己的缓冲") 。这种 reader 可以直接将流读入开发者提供的缓冲区,从而最大限度地减少所需的复制。您的代码将使用哪种底层流(以及使用哪种 reader 和 controller)取决于流最初是如何创建的(请参阅{{domxref("ReadableStream.ReadableStream","ReadableStream()")}} 构造函数页面)。

    +

    注意,有两种不同类型的可读流。除了传统的可读流之外,还有一种类型叫做字节流 —— 这是传统流的扩展版本,用于读取底层字节源。相比可读流,字节流除了 default reader ,还可以使用 BYOB reader (BYOB, or "bring your own buffer", "带上你自己的缓冲") 。这种 reader 可以直接将流读入开发者提供的缓冲区,从而最大限度地减少所需的复制。您的代码将使用哪种底层流(以及使用哪种 reader 和 controller)取决于流最初是如何创建的(请参阅{{domxref("ReadableStream.ReadableStream","ReadableStream()")}} 构造函数页面)。

    Important: 字节流尚未在任何地方实现,并且规范的细节被质疑是否处于可以实现的高度完成的状态。这种情况可能会随着时间而变化。

    @@ -46,17 +46,17 @@

    Teeing

    尽管同一时刻只能有一个 reader 可以读取流,我们可以把流分割成两个相同的副本,这样它们就可以用两个独立的 reader 读取。该过程称为 teeing

    -

    在 JavaScript 中,该过程由调用 {{domxref("ReadableStream.tee()")}} 实现 —— 它返回一个数组,包含对原始可读流的两个相同的副本可读流,可以独立地被不同的 reader 读取。

    +

    在 JavaScript 中,该过程由调用 {{domxref("ReadableStream.tee()")}} 实现 —— 它返回一个数组,包含对原始可读流的两个相同的副本可读流,可以独立地被不同的 reader 读取。

    -

    举例而言,您在 ServiceWorker 中可能会用到该方法,当您从服务器 fetch 资源,得到一个响应的可读流,您可能会想把这个流拆分成两个,一个流入到浏览器,另一个流入到 ServiceWorker 的缓存。由于 response 的 body 无法被消费两次,以及可读流无法被两个 reader 同时读取,您会需要两个可读流副本来实现需求。

    +

    举例而言,您在 ServiceWorker 中可能会用到该方法,当您从服务器 fetch 资源,得到一个响应的可读流,您可能会想把这个流拆分成两个,一个流入到浏览器,另一个流入到 ServiceWorker 的缓存。由于 response 的 body 无法被消费两次,以及可读流无法被两个 reader 同时读取,您会需要两个可读流副本来实现需求。

    Writable streams

    -

    一个 Writable stream (可写流) 是一个可以写入数据的数据终点,在 JavaScript 中以一个 {{domxref("WritableStream")}} 对象表示。这是 JavaScript 层面对 underlying sink (底层汇) 的抽象 —— 底层汇是某个可以写入原始数据的更低层次的 I/O 数据汇。

    +

    一个 Writable stream (可写流) 是一个可以写入数据的数据终点,在 JavaScript 中以一个 {{domxref("WritableStream")}} 对象表示。这是 JavaScript 层面对 underlying sink (底层汇) 的抽象 —— 底层汇是某个可以写入原始数据的更低层次的 I/O 数据汇。

    -

    数据由一个 writer 写入流中,每次一个 chunk 。chunk 和可读流的 reader 一样可以有多种类型。您可以用任何方式生成要被写入的块;writer 加上相关的代码称为 producer

    +

    数据由一个 writer 写入流中,每次一个 chunk 。chunk 和可读流的 reader 一样可以有多种类型。您可以用任何方式生成要被写入的块;writer 加上相关的代码称为 producer

    When a writer is created and starts writing to a stream (an active writer), it is said to be locked to it. Only one writer can write to a writable stream at one time. If you want another writer to start writing to your stream, you typically need to abort it before you then attach another writer to it.

    @@ -87,11 +87,11 @@

    Pipe chains

    Backpressure

    -

    流的一个重要概念是 backpressure (背压) —— 这是单个流或一个 pipe chain 调节读/写速度的过程。当链中后面的一个流仍然忙碌,尚未准备好接受更多的 chunks 时,它会通过链向上游的流发送一个信号,告诉上游的转换流(或原始源)适当地减慢传输速度,这样您就不会在任何地方遇到瓶颈。

    +

    流的一个重要概念是 backpressure (背压) —— 这是单个流或一个 pipe chain 调节读/写速度的过程。当链中后面的一个流仍然忙碌,尚未准备好接受更多的 chunks 时,它会通过链向上游的流发送一个信号,告诉上游的转换流(或原始源)适当地减慢传输速度,这样您就不会在任何地方遇到瓶颈。

    要在可读流中使用 backpressure 技术,我们可以通过查询 controller 的 {{domxref("ReadableStreamDefaultController.desiredSize")}} 属性。如果该值太低或为负数,我们的 ReadableStream 可以告诉它的底层源停止往流中装载数据,然后我们沿着 stream chain 进行背压。

    -

    可读流在经历背压后,如果 consumer 再次想要接收数据,我们可以在构造可读流时提供 pull 方法来告诉底层源恢复往流中装载数据。

    +

    可读流在经历背压后,如果 consumer 再次想要接收数据,我们可以在构造可读流时提供 pull 方法来告诉底层源恢复往流中装载数据。

    Internal queues and queuing strategies

    diff --git a/files/zh-cn/web/api/streams_api/index.html b/files/zh-cn/web/api/streams_api/index.html index d9214c5c81b936..6f28788c16347a 100644 --- a/files/zh-cn/web/api/streams_api/index.html +++ b/files/zh-cn/web/api/streams_api/index.html @@ -19,14 +19,14 @@

    概念和用法

    还有更多的优点——你可以检测流何时开始或结束,将流链接在一起,根据需要处理错误和取消流,并对流的读取速度做出反应。

    -

    流的基础应用围绕着使响应可以被流处理展开。例如,一个成功的 fetch request 响应 {{domxref("Body")}} 会暴露为 {{domxref("ReadableStream")}},之后你就可以使用 {{domxref("ReadableStream.getReader()")}} 建立的 reader 读取它,使用 {{domxref("ReadableStream.cancel()")}} 取消它等等。

    +

    流的基础应用围绕着使响应可以被流处理展开。例如,一个成功的 fetch request 响应 {{domxref("Body")}} 会暴露为 {{domxref("ReadableStream")}},之后你就可以使用 {{domxref("ReadableStream.getReader()")}} 建立的 reader 读取它,使用 {{domxref("ReadableStream.cancel()")}} 取消它等等。

    -

    更复杂的应用包括使用 {{domxref("ReadableStream.ReadableStream", "ReadableStream()")}} 创建你自己的流,比如在 service worker 中处理数据。

    +

    更复杂的应用包括使用 {{domxref("ReadableStream.ReadableStream", "ReadableStream()")}} 创建你自己的流,比如在 service worker 中处理数据。

    你还可以使用 {{domxref("WritableStream")}} 将数据写入流中。

    -

    注意:你可以在这些文章中找到关于流理论的更多细节和实践 — Streams API concepts, Using readable streams,以及 Using writable streams

    +

    注意:你可以在这些文章中找到关于流理论的更多细节和实践 — Streams API concepts, Using readable streams,以及 Using writable streams

    Stream 接口

    @@ -35,7 +35,7 @@

    Readable streams

    {{domxref("ReadableStream")}}
    -
    表示数据的可读流。用于处理 Fetch API 返回的响应,或者开发者自定义的流(例如通过 {{domxref("ReadableStream.ReadableStream", "ReadableStream()")}} 构造的流)。
    +
    表示数据的可读流。用于处理 Fetch API 返回的响应,或者开发者自定义的流(例如通过 {{domxref("ReadableStream.ReadableStream", "ReadableStream()")}} 构造的流)。
    {{domxref("ReadableStreamDefaultReader")}}
    表示默认阅读器,用于阅读来自网络的数据流(例如 fetch 请求)。
    {{domxref("ReadableStreamDefaultController")}}
    @@ -50,7 +50,7 @@

    Writable streams

    {{domxref("WritableStreamDefaultWriter")}}
    表示默认写入器,用于将小块的数据写入可写流中。
    {{domxref("WritableStreamDefaultController")}}
    -
    表示控制器,用于控制 {{domxref("WritableStream")}} 的状态。当创建一个 WritableStream 时,对应的 WritableStreamDefaultController 实例会被提供给底层的 sink 供其操作。
    +
    表示控制器,用于控制 {{domxref("WritableStream")}} 的状态。当创建一个 WritableStream 时,对应的 WritableStreamDefaultController 实例会被提供给底层的 sink 供其操作。

    流相关的 API 及操作

    @@ -66,9 +66,9 @@

    扩展

    {{domxref("Request")}}
    -
    当构造一个新的 Request 对象后,你可以给它的 RequestInit 中的 body 属性传入一个 {{domxref("ReadableStream")}}。这个 Request 对象就可以被传入 {{domxref("fetch()")}} 中,开始接收流。
    +
    当构造一个新的 Request 对象后,你可以给它的 RequestInit 中的 body 属性传入一个 {{domxref("ReadableStream")}}。这个 Request 对象就可以被传入 {{domxref("fetch()")}} 中,开始接收流。
    {{domxref("Body")}}
    -
    一个成功的 fetch request 响应 {{domxref("Body")}} 会默认暴露为 {{domxref("ReadableStream")}},从而可以采用相应的阅读器来处理等。
    +
    一个成功的 fetch request 响应 {{domxref("Body")}} 会默认暴露为 {{domxref("ReadableStream")}},从而可以采用相应的阅读器来处理等。

    字节流相关接口

    @@ -79,11 +79,11 @@

    字节流相关接口

    {{domxref("ReadableStreamBYOBReader")}}
    -
    表示 BYOB("bring your own buffer")阅读器,用于阅读开发者提供的流数据(如自定义的 {{domxref("ReadableStream.ReadableStream", "ReadableStream()")}})。
    +
    表示 BYOB("bring your own buffer")阅读器,用于阅读开发者提供的流数据(如自定义的 {{domxref("ReadableStream.ReadableStream", "ReadableStream()")}})。
    {{domxref("ReadableByteStreamController")}}
    表示控制器,用于控制 {{domxref("ReadableStream")}} 的状态及内部队列。字节控制器用于处理字节流。
    {{domxref("ReadableStreamBYOBRequest")}}
    -
    表示 {{domxref("ReadableByteStreamController")}} 中的 BYOB pull request。
    +
    表示 {{domxref("ReadableByteStreamController")}} 中的 BYOB pull request。

    Examples

    diff --git a/files/zh-cn/web/api/stylesheet/disabled/index.html b/files/zh-cn/web/api/stylesheet/disabled/index.html index 357e62d1f34329..9cd7f1c3091894 100644 --- a/files/zh-cn/web/api/stylesheet/disabled/index.html +++ b/files/zh-cn/web/api/stylesheet/disabled/index.html @@ -11,9 +11,9 @@ ---
    {{APIRef("CSSOM")}}
    -
    {{domxref("StyleSheet")}}接口的 disabled 属性用于决定样式表是否被禁用于文档。
    +
    {{domxref("StyleSheet")}}接口的 disabled 属性用于决定样式表是否被禁用于文档。
    -
    样式表被禁用可能由于这个属性被手动设置为 true,也可能是因为样式表是未激活的alternative style sheet。注意 disabled == false 并不保证样式表一定生效(例如它可能被移除出文档)。
    +
    样式表被禁用可能由于这个属性被手动设置为 true,也可能是因为样式表是未激活的alternative style sheet。注意 disabled == false 并不保证样式表一定生效(例如它可能被移除出文档)。

    语法

    diff --git a/files/zh-cn/web/api/stylesheet/index.html b/files/zh-cn/web/api/stylesheet/index.html index 3fde5099490f9d..fd8e513e61f780 100644 --- a/files/zh-cn/web/api/stylesheet/index.html +++ b/files/zh-cn/web/api/stylesheet/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef("CSSOM")}}
    -

     表示一个实现StyleSheet接口的对象样式表。 CSS 样式表将进一步实现更专业的 {{domxref("CSSStyleSheet")}} 接口。

    +

    表示一个实现StyleSheet接口的对象样式表。 CSS 样式表将进一步实现更专业的 {{domxref("CSSStyleSheet")}} 接口。

    属性

    diff --git a/files/zh-cn/web/api/stylesheet/title/index.html b/files/zh-cn/web/api/stylesheet/title/index.html index bdfbad70c283dc..dcc6c1b8a5305a 100644 --- a/files/zh-cn/web/api/stylesheet/title/index.html +++ b/files/zh-cn/web/api/stylesheet/title/index.html @@ -9,11 +9,11 @@

    概述

    -

    The title property of the {{domxref("StyleSheet")}} interface returns the advisory title of the current style sheet.

    +

    The title property of the {{domxref("StyleSheet")}} interface returns the advisory title of the current style sheet.

    The title is often specified in the {{domxref("StyleSheet/OwnerNode", "ownerNode")}}.

    -

     

    +

    注意

    diff --git a/files/zh-cn/web/api/stylesheetlist/index.html b/files/zh-cn/web/api/stylesheetlist/index.html index 382362db1f0c26..406b226ea72a12 100644 --- a/files/zh-cn/web/api/stylesheetlist/index.html +++ b/files/zh-cn/web/api/stylesheetlist/index.html @@ -11,7 +11,7 @@

    范例

    -

    使用 for 循环获取文档 styleSheet 对象

    +

    使用 for 循环获取文档 styleSheet 对象

    for (var i=0; i < document.styleSheets.length; i++){
       var styleSheet = document.styleSheets[i];
    diff --git a/files/zh-cn/web/api/subtlecrypto/decrypt/index.html b/files/zh-cn/web/api/subtlecrypto/decrypt/index.html
    index cf2c38bd1ffe9b..0b9e34c6503c75 100644
    --- a/files/zh-cn/web/api/subtlecrypto/decrypt/index.html
    +++ b/files/zh-cn/web/api/subtlecrypto/decrypt/index.html
    @@ -5,7 +5,7 @@
     ---
     

    {{APIRef("Web Crypto API")}}

    -

    SubtleCrypto.decrypt() 以加密数据、算法和密钥为参数返回一个包含明文的 {{jsxref("Promise")}} 对象。

    +

    SubtleCrypto.decrypt() 以加密数据、算法和密钥为参数返回一个包含明文的 {{jsxref("Promise")}} 对象。

    语法

    @@ -15,23 +15,23 @@

    语法

    属性

      -
    • algorithm 是一个对象,用于指定解密函数及其参数。当没有参数时,algorithm 也可以是包含了算法名称的 {{domxref("DOMString")}} 对象。支持的值¹ 如下: +
    • algorithm 是一个对象,用于指定解密函数及其参数。当没有参数时,algorithm 也可以是包含了算法名称的 {{domxref("DOMString")}} 对象。支持的值¹ 如下:
        -
      • {"name": "AES-CBC", iv} iv 与 {{domxref("SubtleCrypto.encrypt()")}} 中描述的相同。
      • -
      • {"name": "AES-CTR", counter, length} counter 和length 与 {{domxref("SubtleCrypto.encrypt()")}} 中描述的相同
      • -
      • {"name": "AES-GCM", iv[, additionalData, tagLength]} iv, additionalData和 tagLength 与 {{domxref("SubtleCrypto.encrypt()")}} 中描述的相同。
      • -
      • {"name": "RSA-OAEP"[, label]} label 与 {{domxref("SubtleCrypto.encrypt()")}} 中描述的相同。
      • +
      • {"name": "AES-CBC", iv} iv 与 {{domxref("SubtleCrypto.encrypt()")}} 中描述的相同。
      • +
      • {"name": "AES-CTR", counter, length} counterlength 与 {{domxref("SubtleCrypto.encrypt()")}} 中描述的相同
      • +
      • {"name": "AES-GCM", iv[, additionalData, tagLength]} ivadditionalDatatagLength 与 {{domxref("SubtleCrypto.encrypt()")}} 中描述的相同。
      • +
      • {"name": "RSA-OAEP"[, label]} label 与 {{domxref("SubtleCrypto.encrypt()")}} 中描述的相同。
    • -
    • key 是一个包含了密钥的 {{domxref("CryptoKey")}} 对象,用于解密。
    • -
    • data 是一个包含了待解密的密文的 {{domxref("BufferSource")}} 对象。
    • +
    • key 是一个包含了密钥的 {{domxref("CryptoKey")}} 对象,用于解密。
    • +
    • data 是一个包含了待解密的密文的 {{domxref("BufferSource")}} 对象。

    返回值

      -
    • result 是一个 {{jsxref("Promise")}} 对象,它会返回由{{glossary("ciphertext")}} 解密的得来的 {{glossary("plaintext")}}。
    • +
    • result 是一个 {{jsxref("Promise")}} 对象,它会返回由{{glossary("ciphertext")}} 解密的得来的 {{glossary("plaintext")}}。

    异常

    @@ -48,20 +48,20 @@

    异常

    实例

    const decryptText = async (ctBuffer, iv, password) => {
    -    const pwUtf8 = new TextEncoder().encode(password);
    -    const pwHash = await crypto.subtle.digest('SHA-256', pwUtf8);
    +    const pwUtf8 = new TextEncoder().encode(password);
    +    const pwHash = await crypto.subtle.digest('SHA-256', pwUtf8);
     
    -    const alg = { name: 'AES-GCM', iv: iv };
    -    const key = await crypto.subtle.importKey('raw', pwHash, alg, false, ['decrypt']);
    +    const alg = { name: 'AES-GCM', iv: iv };
    +    const key = await crypto.subtle.importKey('raw', pwHash, alg, false, ['decrypt']);
     
    -    const ptBuffer = await crypto.subtle.decrypt(alg, key, ctBuffer);
    +    const ptBuffer = await crypto.subtle.decrypt(alg, key, ctBuffer);
     
    -    const plaintext = new TextDecoder().decode(ptBuffer);
    +    const plaintext = new TextDecoder().decode(ptBuffer);
     
    -    return plaintext;
    +    return plaintext;
     }
    -

    iv 的含义在 {{domxref("SubtleCrypto.encrypt()")}} 中可以找到。ctBuffer 是 {{domxref("SubtleCrypto.encrypt()")}} 返回的密文。

    +

    iv 的含义在 {{domxref("SubtleCrypto.encrypt()")}} 中可以找到。ctBuffer 是 {{domxref("SubtleCrypto.encrypt()")}} 返回的密文。

    规范

    @@ -77,5 +77,5 @@

    另请参见

    • {{domxref("Crypto")}} 与 {{domxref("Crypto.subtle")}}。
    • -
    • {{domxref("SubtleCrypto")}} 包含了该接口。
    • +
    • {{domxref("SubtleCrypto")}} 包含了该接口。
    diff --git a/files/zh-cn/web/api/subtlecrypto/encrypt/index.html b/files/zh-cn/web/api/subtlecrypto/encrypt/index.html index ff5858f4f02d77..21126621bb9744 100644 --- a/files/zh-cn/web/api/subtlecrypto/encrypt/index.html +++ b/files/zh-cn/web/api/subtlecrypto/encrypt/index.html @@ -19,23 +19,23 @@

    语法

    参数

      -
    • algo 是一个使用加密函数的对象或者 {{domxref("DOMString")}},后者是 {"name": algo} 的缩写。支持的值是: +
    • algo 是一个使用加密函数的对象或者 {{domxref("DOMString")}},后者是 {"name": algo} 的缩写。支持的值是:
        -
      • {"name": "AES-CBC", iv} iv 是具有 16 个随机字节的 {{jsxref("ArrayBuffer")}} 或 {{jsxref("ArrayBufferView")}}  (这些应该由 {{domxref("RandomSource.getRandomValues()")}} 生成)。
      • +
      • {"name": "AES-CBC", iv} iv 是具有 16 个随机字节的 {{jsxref("ArrayBuffer")}} 或 {{jsxref("ArrayBufferView")}} (这些应该由 {{domxref("RandomSource.getRandomValues()")}} 生成)。
      • {"name": "AES-CTR", counter, length}
      • {"name": "AES-GCM", iv, additionalData, tagLength} (additionalDatatagLength 是可选的)
      • {"name": "RSA-OAEP", label} (label 是可选的)
    • key 是一个包含签名密钥的 {{domxref("CryptoKey")}}。
    • -
    • cleartext 是一个包含需要加密的明文 {{jsxref("ArrayBuffer")}} 或者 {{jsxref("ArrayBufferView")}} 对象。
    • +
    • cleartext 是一个包含需要加密的明文 {{jsxref("ArrayBuffer")}} 或者 {{jsxref("ArrayBufferView")}} 对象。

    返回值

      -
    • 返回值是一个 {{jsxref("Promise")}} 对象,返回一个由 {{glossary("cleartext")}} 加密生成的 {{glossary("ciphertext")}} 的 {{jsxref("ArrayBuffer")}}。
    • +
    • 返回值是一个 {{jsxref("Promise")}} 对象,返回一个由 {{glossary("cleartext")}} 加密生成的 {{glossary("ciphertext")}} 的 {{jsxref("ArrayBuffer")}}。

    异常

    @@ -54,7 +54,7 @@

    异常

    支持的算法

    -

    Crypto 接口提供了支持 encrypt() 和 decrypt() 操作的四种算法。

    +

    Crypto 接口提供了支持 encrypt()decrypt() 操作的四种算法。

    其中的 RSA-OAEP 算法是一种非对称加密的公钥密码({{Glossary("public-key cryptography", "public-key cryptosystem")}})。

    @@ -66,15 +66,15 @@

    支持的算法

  • GCM (Galois/Counter Mode)
  • -

    这里强烈建议使用认证加密authenticated encryption),它可以检测密文是否已被攻击者篡改。使用认证也可以避免选择密文攻击chosen-ciphertext attacks),即攻击者可以请求系统解密任意的消息,然后使用解密结果来倒推出关于密钥的一些信息。虽然 CTR 和 CBC 模式可以添加认证,但是它们默认不提供该操作,并且在手动实现它们的时候,很同意犯一些微小但严重的错误。GCM 不支持内置的认证,由于这个原因,常常推荐使用另外两种  AES 加密算法。

    +

    这里强烈建议使用认证加密authenticated encryption),它可以检测密文是否已被攻击者篡改。使用认证也可以避免选择密文攻击chosen-ciphertext attacks),即攻击者可以请求系统解密任意的消息,然后使用解密结果来倒推出关于密钥的一些信息。虽然 CTR 和 CBC 模式可以添加认证,但是它们默认不提供该操作,并且在手动实现它们的时候,很同意犯一些微小但严重的错误。GCM 不支持内置的认证,由于这个原因,常常推荐使用另外两种 AES 加密算法。

    RSA-OAEP

    -

    关于 RSA-OAEP 公钥加密算法的规范位于 RFC 3447

    +

    关于 RSA-OAEP 公钥加密算法的规范位于 RFC 3447

    AES-CTR

    -

    使用 Counter 模式的 AES 算法,相关规范位于 NIST SP800-38A

    +

    使用 Counter 模式的 AES 算法,相关规范位于 NIST SP800-38A

    AES-CBC

    @@ -82,9 +82,9 @@

    AES-CBC

    AES-GCM

    -

    使用 Galois/Counter 模式的 AES 算法,规范位于 NIST SP800-38D

    +

    使用 Galois/Counter 模式的 AES 算法,规范位于 NIST SP800-38D

    -

    这种模式与上面的模式不同之处在于,GCM 是一种 "认证(authenticated)" 模式,意思就是它包含了检测密文是否未被攻击者篡改的功能。

    +

    这种模式与上面的模式不同之处在于,GCM 是一种 "认证(authenticated)" 模式,意思就是它包含了检测密文是否未被攻击者篡改的功能。

    示例

    @@ -225,8 +225,8 @@

    另见

    diff --git a/files/zh-cn/web/api/subtlecrypto/index.html b/files/zh-cn/web/api/subtlecrypto/index.html index ed5c740bb66e8b..efecea8eb0aabf 100644 --- a/files/zh-cn/web/api/subtlecrypto/index.html +++ b/files/zh-cn/web/api/subtlecrypto/index.html @@ -27,33 +27,33 @@

    加密功能

    这些函数你可以用来实现系统中的隐私和身份验证等安全功能。SubtleCrypto API 提供了如下加密函数:

    -

    sign() 、 verify(): 创建和验证数字签名。
    +

    * sign()verify(): 创建和验证数字签名。
    * encrypt()decrypt(): 加密和解密数据。
    * digest():为数据生成一个定长的,防碰撞的消息摘要。

    密钥管理功能

    -

    除了 digest(),在SubtleCrypto API 中所有加密功能都会使用密钥,并使用 CryptoKey 对象表示加密密钥。要执行签名和加密操作,请将 CryptoKey 对象传参给 sign() 或 encrypt() 函数。

    +

    除了 digest(),在SubtleCrypto API 中所有加密功能都会使用密钥,并使用 CryptoKey 对象表示加密密钥。要执行签名和加密操作,请将 CryptoKey 对象传参给 sign()encrypt() 函数。

    生成和派生密钥

    -

    generateKey() 和 deriveKey() 函数都可以创建一个新的 CryptoKey 对象。

    +

    generateKey()deriveKey() 函数都可以创建一个新的 CryptoKey 对象。

    -

    不同之处在于 generateKey() 每次都会生成一个新的键值对, 而 deriveKey() 通过从基础密钥资源中生成一个新的密钥。如果为两个独立的deriveKey()提供相同的基础密钥资源,那么你会获得两个具有相同基础值的 CryptoKey 对象。如果你想通过密码派生加密密钥,然后从相同的密码派生相同的密钥以解密数据,那么这将会非常有用。

    +

    不同之处在于 generateKey() 每次都会生成一个新的键值对, 而 deriveKey() 通过从基础密钥资源中生成一个新的密钥。如果为两个独立的deriveKey()提供相同的基础密钥资源,那么你会获得两个具有相同基础值的 CryptoKey 对象。如果你想通过密码派生加密密钥,然后从相同的密码派生相同的密钥以解密数据,那么这将会非常有用。

    导入和导出密钥

    -

    要在应用程序外部使密钥可用,您需要导出密钥,exportKey() 可以为你提供该功能。你可以选择多种导出格式。

    +

    要在应用程序外部使密钥可用,您需要导出密钥,exportKey() 可以为你提供该功能。你可以选择多种导出格式。

    -

    importKey()与 exportKey() 刚好相反。你可以从其他系统导入密钥,并且支持像 PKCS #8 和 JSON Web Key 这样可以帮助你执行此操作的标准格式。exportKey() 函数以非标准格式导出密钥。

    +

    importKey()exportKey() 刚好相反。你可以从其他系统导入密钥,并且支持像 PKCS #8JSON Web Key 这样可以帮助你执行此操作的标准格式。exportKey() 函数以非标准格式导出密钥。

    -

    如果密钥是敏感的,你需要使用 wrapKey(), 该函数导出密钥并且使用另外一个密钥加密它。

    +

    如果密钥是敏感的,你需要使用 wrapKey(), 该函数导出密钥并且使用另外一个密钥加密它。

    unwrapKey()wrapKey()相反,该函数解密密钥后导入解密的密钥

    存储密钥

    -

    CryptoKey对象可以通过 structured clone algorithm来存储,这意味着你可以通过 web storage APIs 来存储和获取他们。更为规范的方式是通过使用IndexedDB API 来存储CryptoKey对象。

    +

    CryptoKey对象可以通过 structured clone algorithm来存储,这意味着你可以通过 web storage APIs 来存储和获取他们。更为规范的方式是通过使用IndexedDB API 来存储CryptoKey对象。

    支持的算法

    @@ -66,7 +66,7 @@

    支持的算法

    - + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - + - - + + - + - - + + - + - - + + - + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - - + + + - + - - - + + + - + - - - + + + - + - - - - + + + + @@ -232,7 +232,7 @@

    方法

    {{domxref("SubtleCrypto.encrypt()")}}
    -
    以算法、密钥、明文为参数,返回一个包含加密数据的 {{jsxref("Promise")}} 对象。
    +
    以算法、密钥、明文为参数,返回一个包含加密数据的 {{jsxref("Promise")}} 对象。
    {{domxref("SubtleCrypto.decrypt()")}}
    以算法、密钥、密文为参数,返回一个包含解密数据的 {{jsxref("Promise")}} 对象。
    {{domxref("SubtleCrypto.sign()")}}
    @@ -242,19 +242,19 @@

    方法

    {{domxref("SubtleCrypto.digest()")}}
    以生成摘要的算法和文本作为参数,返回一个包含数据摘要的 {{jsxref("Promise")}} 对象。
    {{domxref("SubtleCrypto.generateKey()")}}
    -
    以给出的用法和返可提取性作为参数,返回一个包含用于对称算法的新生成的 {{domxref("CryptoKey")}} 或者包含两个新的生成的密钥用于非对称加密的 {{domxref("CryptoKeyPair")}} 的 {{jsxref("Promise")}} 对象。
    +
    以给出的用法和返可提取性作为参数,返回一个包含用于对称算法的新生成的 {{domxref("CryptoKey")}} 或者包含两个新的生成的密钥用于非对称加密的 {{domxref("CryptoKeyPair")}} 的 {{jsxref("Promise")}} 对象。
    {{domxref("SubtleCrypto.deriveKey()")}}
    -
    以从 master key 派生出来的密钥和特定的算法作为参数,返回一个包含新生成的 {{domxref("CryptoKey")}}  的 {{jsxref("Promise")}}对象。
    +
    以从 master key 派生出来的密钥和特定的算法作为参数,返回一个包含新生成的 {{domxref("CryptoKey")}} 的 {{jsxref("Promise")}}对象。
    {{domxref("SubtleCrypto.deriveBits()")}}
    -
    以从 master key 派生出来的密钥和特定的算法作为参数,返回一个包含新生成的伪随机字节的 Buffer 的 {{jsxref("Promise")}} 对象。
    +
    以从 master key 派生出来的密钥和特定的算法作为参数,返回一个包含新生成的伪随机字节的 Buffer 的 {{jsxref("Promise")}} 对象。
    {{domxref("SubtleCrypto.importKey()")}}
    -
    以格式、算法、原始密钥数据、用途和可提取性作为参数,返回一个包含 {{domxref("CryptoKey")}} 的 {{jsxref("Promise")}} 对象。
    +
    以格式、算法、原始密钥数据、用途和可提取性作为参数,返回一个包含 {{domxref("CryptoKey")}} 的 {{jsxref("Promise")}} 对象。
    {{domxref("SubtleCrypto.exportKey()")}}
    -
    返回一个包含所请求格式的密钥的 Buffer 的 {{jsxref("Promise")}} 对象。
    +
    返回一个包含所请求格式的密钥的 Buffer 的 {{jsxref("Promise")}} 对象。
    {{domxref("SubtleCrypto.wrapKey()")}}
    -
    返回一个包含在不安全环境中使用(传输,存储)的包裹对称密钥的 {{jsxref("Promise")}} 对象。返回的被包裹的缓冲数据是按照参数中给出的格式的,包含使用给定算法的给予包装密钥包裹的密钥。
    +
    返回一个包含在不安全环境中使用(传输,存储)的包裹对称密钥的 {{jsxref("Promise")}} 对象。返回的被包裹的缓冲数据是按照参数中给出的格式的,包含使用给定算法的给予包装密钥包裹的密钥。
    {{domxref("SubtleCrypto.unwrapKey()")}}
    -
    返回一个包含对应于参数中给出的包裹密钥的 {{domxref("CryptoKey")}} 的 {{jsxref("Promise")}} 对象。
    +
    返回一个包含对应于参数中给出的包裹密钥的 {{domxref("CryptoKey")}} 的 {{jsxref("Promise")}} 对象。

    规范

    diff --git a/files/zh-cn/web/api/svgaelement/index.html b/files/zh-cn/web/api/svgaelement/index.html index 969ca73039f7ad..1cd7572cc5f2f9 100644 --- a/files/zh-cn/web/api/svgaelement/index.html +++ b/files/zh-cn/web/api/svgaelement/index.html @@ -50,43 +50,43 @@

    属性

    {{domxref("SVGAElement.download")}}

    -

        参见 {{domxref("HTMLAnchorElement.download")}}

    +

    参见 {{domxref("HTMLAnchorElement.download")}}

    {{domxref("SVGAElement.href")}}

    -

        See {{domxref("HTMLAnchorElement.href")}}

    +

    See {{domxref("HTMLAnchorElement.href")}}

    {{domxref("SVGAElement.hreflang")}}

    -

        是一个反映 hreflang 属性的字符串( DOMString ),表示链接资源的语言种类。

    +

    是一个反映 hreflang 属性的字符串( DOMString ),表示链接资源的语言种类。

    {{domxref("SVGAElement.ping")}}

    -

        是一个反映ping值的字符串( DOMString ),包含以空格分隔开的URL列表,当超链接可以被跟踪时,浏览器会(在后台)发送有PING主体的 {{HTTPMethod("POST")}} 的请求,一般用于追踪。

    +

    是一个反映ping值的字符串( DOMString ),包含以空格分隔开的URL列表,当超链接可以被跟踪时,浏览器会(在后台)发送有PING主体的 {{HTTPMethod("POST")}} 的请求,一般用于追踪。

    {{domxref("SVGAElement.referrerPolicy")}}

    -

        参见 {{domxref("HTMLAnchorElement.referrerPolicy")}}

    +

    参见 {{domxref("HTMLAnchorElement.referrerPolicy")}}

    {{domxref("SVGAElement.rel")}}

    -

        参见 {{domxref("HTMLAnchorElement.rel")}}

    +

    参见 {{domxref("HTMLAnchorElement.rel")}}

    {{domxref("SVGAElement.relList")}}

    -

        参见{{domxref("HTMLAnchorElement.relList")}}

    +

    参见{{domxref("HTMLAnchorElement.relList")}}

    {{domxref("SVGAElement.target")}} {{readonlyInline}}

    -

        它和特定元素的 {{SVGAttr("target")}} 属性相同

    +

    它和特定元素的 {{SVGAttr("target")}} 属性相同

    {{domxref("SVGAElement.text")}}

    -

        是一个字符串( DOMString ),作为 {{domxref("Node.textContent")}} 属性的代名词。

    +

    是一个字符串( DOMString ),作为 {{domxref("Node.textContent")}} 属性的代名词。

    {{domxref("SVGAElement.type")}}

    -

        是一个反映 type 属性的字符串( DOMString ),表示链接资源的MIME种类。

    +

    是一个反映 type 属性的字符串( DOMString ),表示链接资源的MIME种类。

    方法

    diff --git a/files/zh-cn/web/api/svganimatedangle/index.html b/files/zh-cn/web/api/svganimatedangle/index.html index 12453067887289..e107efe740b308 100644 --- a/files/zh-cn/web/api/svganimatedangle/index.html +++ b/files/zh-cn/web/api/svganimatedangle/index.html @@ -31,7 +31,7 @@

    Interface overview

    - + diff --git a/files/zh-cn/web/api/svganimateelement/index.html b/files/zh-cn/web/api/svganimateelement/index.html index 3e969adc5bfd5b..df2a7fa1dacd86 100644 --- a/files/zh-cn/web/api/svganimateelement/index.html +++ b/files/zh-cn/web/api/svganimateelement/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef("SVG")}}
    -

     SVGAnimateElement 接口对应于 {{SVGElement("animate")}} 元素。

    +

    SVGAnimateElement 接口对应于 {{SVGElement("animate")}} 元素。

    {{InheritanceDiagram(600, 140)}}

    diff --git a/files/zh-cn/web/api/svgcircleelement/index.html b/files/zh-cn/web/api/svgcircleelement/index.html index 9a3009ce309ee3..66d186193bb3d5 100644 --- a/files/zh-cn/web/api/svgcircleelement/index.html +++ b/files/zh-cn/web/api/svgcircleelement/index.html @@ -15,7 +15,7 @@

    SVG Circle DOM 接口

    -

    SVGCircleElement 接口提供了对{{ SVGElement("circle") }}元素的属性的访问,而且还提供了操作该元素的方法。

    +

    SVGCircleElement 接口提供了对{{ SVGElement("circle") }}元素的属性的访问,而且还提供了操作该元素的方法。

    接口概览

    diff --git a/files/zh-cn/web/api/svgelement/index.html b/files/zh-cn/web/api/svgelement/index.html index b00205dd860e70..afa9571674ef5d 100644 --- a/files/zh-cn/web/api/svgelement/index.html +++ b/files/zh-cn/web/api/svgelement/index.html @@ -7,7 +7,7 @@
    所有SVG DOM类的父类.
    -
     
    +

    {{InheritanceDiagram}}

    diff --git a/files/zh-cn/web/api/svggeometryelement/gettotallength/index.html b/files/zh-cn/web/api/svggeometryelement/gettotallength/index.html index 8344320c7d506a..afe4dc5f2dd643 100644 --- a/files/zh-cn/web/api/svggeometryelement/gettotallength/index.html +++ b/files/zh-cn/web/api/svggeometryelement/gettotallength/index.html @@ -6,10 +6,10 @@ ---
    {{APIRef("SVG")}}
    -

     SVGPathElement.getTotalLength() 该方法返回用户代理对路径总长度(以用户单位为单位)的计算值。

    +

    SVGPathElement.getTotalLength() 该方法返回用户代理对路径总长度(以用户单位为单位)的计算值。

    -

    注意:在SVG 2中,该方法被移动到 {{DOMxRef("SVGGeometryElement")}} 接口,由 {{DOMxRef("SVGPathElement")}} 继承。

    +

    注意:在SVG 2中,该方法被移动到 {{DOMxRef("SVGGeometryElement")}} 接口,由 {{DOMxRef("SVGPathElement")}} 继承。

    语法

    diff --git a/files/zh-cn/web/api/svggraphicselement/getbbox/index.html b/files/zh-cn/web/api/svggraphicselement/getbbox/index.html index 437c4d31654631..c259dde71e1efb 100644 --- a/files/zh-cn/web/api/svggraphicselement/getbbox/index.html +++ b/files/zh-cn/web/api/svggraphicselement/getbbox/index.html @@ -8,7 +8,7 @@ ---

    SVGGraphicsElement.getBBox()允许我们确定对象适合的最小矩形的坐标。返回的坐标是相对于当前svg空间的,即在将所有几何属性应用于目标元素中包含的所有元素之后。

    -

    Note: getBBox must return the actual bounding box at the time the method was called, even in case the element has not yet been rendered. It also neglects any transformation applied on the element or its parents.

    +

    Note: getBBox must return the actual bounding box at the time the method was called, even in case the element has not yet been rendered. It also neglects any transformation applied on the element or its parents.

    getBBox returns different values than getBoundingClientRect, as the latter returns value relative to the viewport

    @@ -20,21 +20,21 @@

    Syntax

    Return value

    -

    The returned value is a SVGRect object, which defines the bounding box. This value is irrespective of any transformation attribute applied to it or the parent elements.

    +

    The returned value is a SVGRect object, which defines the bounding box. This value is irrespective of any transformation attribute applied to it or the parent elements.

    Example

    HTML

    <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
    -    <g id="group_text_1">
    -        <text x="5" y="16" transform="scale(2, 2)">Hello World!</text>
    -        <text x="8" y="32" transform="translate(0 20) scale(1.25 1)">Hello World Again!</text>
    -    </g>
    -    <!-- Shows BBox in green -->
    +    <g id="group_text_1">
    +        <text x="5" y="16" transform="scale(2, 2)">Hello World!</text>
    +        <text x="8" y="32" transform="translate(0 20) scale(1.25 1)">Hello World Again!</text>
    +    </g>
    +    <!-- Shows BBox in green -->
         <rect id="rect_1" stroke="#00ff00" stroke-width="3" fill="none"> </rect>
    -    <!-- Shows BoundingClientRect in red -->
    -    <rect id="rect_2" stroke="#ff0000" stroke-width="3" fill="none"></rect>
    +    <!-- Shows BoundingClientRect in red -->
    +    <rect id="rect_2" stroke="#ff0000" stroke-width="3" fill="none"></rect>
     </svg>
     
    diff --git a/files/zh-cn/web/api/svggraphicselement/index.html b/files/zh-cn/web/api/svggraphicselement/index.html index 8c5114d9fe7408..c5802267f382d7 100644 --- a/files/zh-cn/web/api/svggraphicselement/index.html +++ b/files/zh-cn/web/api/svggraphicselement/index.html @@ -13,7 +13,7 @@ ---
    {{APIRef("SVG")}}
    -

     SVGGraphicsElement 接口表示SVG元素,其主要目的是将图形直接渲染到组中。

    +

    SVGGraphicsElement 接口表示SVG元素,其主要目的是将图形直接渲染到组中。

    {{InheritanceDiagram(600, 120)}}

    diff --git a/files/zh-cn/web/api/svgmatrix/index.html b/files/zh-cn/web/api/svgmatrix/index.html index bf0eb97e5cfed9..8a1369172d5261 100644 --- a/files/zh-cn/web/api/svgmatrix/index.html +++ b/files/zh-cn/web/api/svgmatrix/index.html @@ -56,11 +56,11 @@

    Methods

    {{domxref("SVGMatrix.rotate()")}}
    Post-multiplies a rotation transformation on the current matrix and returns the resulting matrix as SVGMatrix.
    {{domxref("SVGMatrix.rotateFromVector()")}}
    -
    Post-multiplies a rotation transformation on the current matrix and returns the resulting matrix as SVGMatrix. The rotation angle is determined by taking (+/-) atan(y/x). The direction of the vector (x, y) determines whether the positive or negative angle value is used.
    +
    Post-multiplies a rotation transformation on the current matrix and returns the resulting matrix as SVGMatrix. The rotation angle is determined by taking (+/-) atan(y/x). The direction of the vector (x, y) determines whether the positive or negative angle value is used.
    {{domxref("SVGMatrix.flipX()")}}
    -
    Post-multiplies the transformation [-1 0 0 1 0 0] and returns the resulting matrix as SVGMatrix.
    +
    Post-multiplies the transformation [-1 0 0 1 0 0] and returns the resulting matrix as SVGMatrix.
    {{domxref("SVGMatrix.flipY()")}}
    -
    Post-multiplies the transformation [1 0 0 -1 0 0] and returns the resulting matrix as SVGMatrix.
    +
    Post-multiplies the transformation [1 0 0 -1 0 0] and returns the resulting matrix as SVGMatrix.
    {{domxref("SVGMatrix.skewX()")}}
    Post-multiplies a skewX transformation on the current matrix and returns the resulting matrix as SVGMatrix.
    {{domxref("SVGMatrix.skewY()")}}
    diff --git a/files/zh-cn/web/api/svgpathelement/index.html b/files/zh-cn/web/api/svgpathelement/index.html index 2ffcc12258a802..aba10e36b9bd16 100644 --- a/files/zh-cn/web/api/svgpathelement/index.html +++ b/files/zh-cn/web/api/svgpathelement/index.html @@ -89,7 +89,7 @@

    属性

    方法

    -

     

    +

     

    sign()

    @@ -94,129 +94,129 @@

    支持的算法

    RSASSA-PKCS1-v1_5     
    RSA-PSS     
    ECDSA     
    HMAC     
    RSA-OAEP    
    AES-CTR    
    AES-CBC    
    AES-GCM    
    SHA-1     
    SHA-256     
    SHA-384     
    SHA-512     
    ECDH     
    HKDF     
    PBKDF2     
    AES-KW    
    Normative documentNormative document SVG 1.1 (2nd Edition)
    diff --git a/files/zh-cn/web/api/svgsvgelement/index.html b/files/zh-cn/web/api/svgsvgelement/index.html index abe25095db46e0..8b1845c8c04b92 100644 --- a/files/zh-cn/web/api/svgsvgelement/index.html +++ b/files/zh-cn/web/api/svgsvgelement/index.html @@ -15,7 +15,7 @@

    属性

    {{domxref("SVGSVGElement.x")}} {{ReadOnlyInline}}
    -
      {{domxref("SVGAnimatedLength")}} 对应于给定 {{SVGElement("svg")}} 元素的 {{SVGAttr("x")}} 属性
    +
    {{domxref("SVGAnimatedLength")}} 对应于给定 {{SVGElement("svg")}} 元素的 {{SVGAttr("x")}} 属性
    {{domxref("SVGSVGElement.y")}} {{ReadOnlyInline}}
    {{domxref("SVGAnimatedLength")}}对应于给定{{SVGElement("svg")}}元素的{{SVGAttr("y")}}属性。
    {{domxref("SVGSVGElement.width")}} {{ReadOnlyInline}}
    @@ -120,19 +120,19 @@

    Methods

    {{domxref("SVGSVGElement.createSVGNumber()")}}
    Creates an {{domxref("SVGNumber")}} object outside of any document trees. The object is initialized to a value of zero.
    {{domxref("SVGSVGElement.createSVGLength()")}}
    -
    Creates an {{domxref("SVGLength")}} object outside of any document trees. The object is initialized to a value of zero user units.
    +
    Creates an {{domxref("SVGLength")}} object outside of any document trees. The object is initialized to a value of zero user units.
    {{domxref("SVGSVGElement.createSVGAngle()")}}
    -
    Creates an {{domxref("SVGAngle")}} object outside of any document trees. The object is initialized to a value of zero degrees (unitless).
    +
    Creates an {{domxref("SVGAngle")}} object outside of any document trees. The object is initialized to a value of zero degrees (unitless).
    {{domxref("SVGSVGElement.createSVGPoint()")}}
    -
    Creates an {{domxref("SVGPoint")}} object outside of any document trees. The object is initialized to the point (0,0) in the user coordinate system.
    +
    Creates an {{domxref("SVGPoint")}} object outside of any document trees. The object is initialized to the point (0,0) in the user coordinate system.
    {{domxref("SVGSVGElement.createSVGMatrix()")}}
    -
    Creates an {{domxref("SVGMatrix")}} object outside of any document trees. The object is initialized to the identity matrix.
    +
    Creates an {{domxref("SVGMatrix")}} object outside of any document trees. The object is initialized to the identity matrix.
    {{domxref("SVGSVGElement.createSVGRect()")}}
    -
    Creates an {{domxref("SVGRect")}} object outside of any document trees. The object is initialized such that all values are set to 0 user units.
    +
    Creates an {{domxref("SVGRect")}} object outside of any document trees. The object is initialized such that all values are set to 0 user units.
    {{domxref("SVGSVGElement.createSVGTransform()")}}
    -
    Creates an {{domxref("SVGTransform")}} object outside of any document trees. The object is initialized to an identity matrix transform (SVG_TRANSFORM_MATRIX).
    +
    Creates an {{domxref("SVGTransform")}} object outside of any document trees. The object is initialized to an identity matrix transform (SVG_TRANSFORM_MATRIX).
    {{domxref("SVGSVGElement.createSVGTransformFromMatrix()")}}
    -
    Creates an {{domxref("SVGTransform")}} object outside of any document trees. The object is initialized to the given matrix transform (i.e., SVG_TRANSFORM_MATRIX). The values from the parameter matrix are copied, the matrix parameter is not adopted as SVGTransform::matrix.
    +
    Creates an {{domxref("SVGTransform")}} object outside of any document trees. The object is initialized to the given matrix transform (i.e., SVG_TRANSFORM_MATRIX). The values from the parameter matrix are copied, the matrix parameter is not adopted as SVGTransform::matrix.
    {{domxref("SVGSVGElement.getElementById()")}}
    Searches this SVG document fragment (i.e., the search is restricted to a subset of the document tree) for an Element whose id is given by elementId. If an Element is found, that Element is returned. If no such element exists, returns null. Behavior is not defined if more than one element has this id.
    diff --git a/files/zh-cn/web/api/svguseelement/index.html b/files/zh-cn/web/api/svguseelement/index.html index 829998ded2c7b6..7c949cc50e721d 100644 --- a/files/zh-cn/web/api/svguseelement/index.html +++ b/files/zh-cn/web/api/svguseelement/index.html @@ -13,7 +13,7 @@

    SVG使用DOM接口

    性质

    -

    此接口还从其父接口{{domxref("SVGGraphicsElement")}} 继承属性,并从{{domxref("SVGURIReference")}}实现属性。

    +

    此接口还从其父接口{{domxref("SVGGraphicsElement")}} 继承属性,并从{{domxref("SVGURIReference")}}实现属性。

    {{domxref("SVGUseElement.x")}} {{ReadOnlyInline}}
    diff --git a/files/zh-cn/web/api/text/assignedslot/index.html b/files/zh-cn/web/api/text/assignedslot/index.html index 4504e1e8090dfe..444d72196fc5a1 100644 --- a/files/zh-cn/web/api/text/assignedslot/index.html +++ b/files/zh-cn/web/api/text/assignedslot/index.html @@ -5,7 +5,7 @@ ---

    {{SeeCompatTable}}{{APIRef("Shadow DOM")}}

    -

     assignedSlot 是 {{domxref("Text")}} 接口的属性,返回与该元素相关联的{{domxref("HTMLSlotElement")}} .

    +

    assignedSlot 是 {{domxref("Text")}} 接口的属性,返回与该元素相关联的{{domxref("HTMLSlotElement")}} .

    Syntax

    diff --git a/files/zh-cn/web/api/text/index.html b/files/zh-cn/web/api/text/index.html index 45f5f2483d4415..d68dcad7c01f76 100644 --- a/files/zh-cn/web/api/text/index.html +++ b/files/zh-cn/web/api/text/index.html @@ -4,8 +4,8 @@ translation_of: Web/API/Text ---

    {{ ApiRef() }}

    -

    The Text interface represents the textual content of {{domxref("Element")}} or {{domxref("Attr")}}.  If an element has no markup within its content, it has a single child implementing Text that contains the element's text.  However, if the element contains markup, it is parsed into information items and Text nodes that form its children.

    -

    New documents have a single Text node for each block of text. Over time, more Text nodes may be created as the document's content changes.  The {{domxref("Node.normalize()")}} method merges adjacent Text objects back into a single node for each block of text.

    +

    The Text interface represents the textual content of {{domxref("Element")}} or {{domxref("Attr")}}. If an element has no markup within its content, it has a single child implementing Text that contains the element's text. However, if the element contains markup, it is parsed into information items and Text nodes that form its children.

    +

    New documents have a single Text node for each block of text. Over time, more Text nodes may be created as the document's content changes. The {{domxref("Node.normalize()")}} method merges adjacent Text objects back into a single node for each block of text.

    属性

    diff --git a/files/zh-cn/web/api/text/text/index.html b/files/zh-cn/web/api/text/text/index.html index 58dd75af820dfd..906d8ee8647908 100644 --- a/files/zh-cn/web/api/text/text/index.html +++ b/files/zh-cn/web/api/text/text/index.html @@ -8,7 +8,7 @@ ---

    {{ Apiref("DOM")}}{{seeCompatTable}}

    -

     Text() 构造方法返回一个最新创建的{{domxref("Text")}} 对象,该对象带有可选参数 {{domxref("DOMString")}} 作为文本节点的文本内容(textual content)。

    +

    Text() 构造方法返回一个最新创建的{{domxref("Text")}} 对象,该对象带有可选参数 {{domxref("DOMString")}} 作为文本节点的文本内容(textual content)。

    Syntax

    @@ -34,4 +34,4 @@

    See also

  • The DOM interfaces index.
  • -

     

    +

    diff --git a/files/zh-cn/web/api/textencoder/encode/index.html b/files/zh-cn/web/api/textencoder/encode/index.html index 0d0b3cb89987f3..88259c30f6f0b7 100644 --- a/files/zh-cn/web/api/textencoder/encode/index.html +++ b/files/zh-cn/web/api/textencoder/encode/index.html @@ -8,7 +8,7 @@ ---
    {{APIRef("Encoding API")}}
    -

    TextEncoder.prototype.encode() 方法接受一个 {{domxref("USVString")}} 作为参数,返回一个以给定的文本(字符串)参数,通过 TextEncoder 中指定的方法(默认 UTF-8)编码后的 {{jsxref("Global_Objects/Uint8Array", "Uint8Array")}} 类型的值。

    +

    TextEncoder.prototype.encode() 方法接受一个 {{domxref("USVString")}} 作为参数,返回一个以给定的文本(字符串)参数,通过 TextEncoder 中指定的方法(默认 UTF-8)编码后的 {{jsxref("Global_Objects/Uint8Array", "Uint8Array")}} 类型的值。

    语法

    @@ -19,7 +19,7 @@

    参数

    string
    -
    一个包含了将要编码的文本的 {{DOMxRef("USVString")}}。
    +
    一个包含了将要编码的文本的 {{DOMxRef("USVString")}}。

    返回值

    diff --git a/files/zh-cn/web/api/textencoder/textencoder/index.html b/files/zh-cn/web/api/textencoder/textencoder/index.html index 80d3853e13cb15..4077702c282084 100644 --- a/files/zh-cn/web/api/textencoder/textencoder/index.html +++ b/files/zh-cn/web/api/textencoder/textencoder/index.html @@ -25,7 +25,7 @@

    参数

  • TextEncoder() 从 Firefox 48 and Chrome 53 开始不再需要参数
  • -

    Note: 在Firefox 48和Chrome 53之前,编码类型标签被接受为TextEncoder对象的参数,现在这两个浏览器已经删除了除utf-8之外的任何编码器类型的支持,以符合规范。 传入TextEncoder构造函数的任何类型标签现在都将被忽略,并且将创建一个utf-8 TextEncoder。

    +

    Note: 在Firefox 48和Chrome 53之前,编码类型标签被接受为TextEncoder对象的参数,现在这两个浏览器已经删除了除utf-8之外的任何编码器类型的支持,以符合规范。 传入TextEncoder构造函数的任何类型标签现在都将被忽略,并且将创建一个utf-8 TextEncoder。

    diff --git a/files/zh-cn/web/api/textmetrics/index.html b/files/zh-cn/web/api/textmetrics/index.html index 494f9bb2eb735c..f971b83e90a065 100644 --- a/files/zh-cn/web/api/textmetrics/index.html +++ b/files/zh-cn/web/api/textmetrics/index.html @@ -5,35 +5,35 @@ ---
    {{APIRef("Canvas API")}}
    -

    在 canvas 中,TextMetrics 接口表示文本的尺寸,通过 {{domxref("CanvasRenderingContext2D.measureText()")}} 方法创建。

    +

    在 canvas 中,TextMetrics 接口表示文本的尺寸,通过 {{domxref("CanvasRenderingContext2D.measureText()")}} 方法创建。

    属性

    {{domxref("TextMetrics.width")}} {{readonlyInline}}
    -
    double 类型,使用 CSS 像素计算的内联字符串的宽度。基于当前上下文字体考虑。
    +
    double 类型,使用 CSS 像素计算的内联字符串的宽度。基于当前上下文字体考虑。
    {{domxref("TextMetrics.actualBoundingBoxLeft")}} {{readonlyInline}}
    double 类型,平行于基线,从{{domxref("CanvasRenderingContext2D.textAlign")}} 属性确定的对齐点到文本矩形边界左侧的距离,使用 CSS 像素计算;正值表示文本矩形边界左侧在该对齐点的左侧。
    {{domxref("TextMetrics.actualBoundingBoxRight")}} {{readonlyInline}}
    -
    double 类型,平行于基线,从{{domxref("CanvasRenderingContext2D.textAlign")}} 属性确定的对齐点到文本矩形边界右侧的距离,使用 CSS 像素计算。
    +
    double 类型,平行于基线,从{{domxref("CanvasRenderingContext2D.textAlign")}} 属性确定的对齐点到文本矩形边界右侧的距离,使用 CSS 像素计算。
    {{domxref("TextMetrics.fontBoundingBoxAscent")}} {{readonlyInline}}
    -
    double 类型,从{{domxref("CanvasRenderingContext2D.textBaseline")}} 属性标明的水平线到渲染文本的所有字体的矩形最高边界顶部的距离,使用 CSS 像素计算。
    +
    double 类型,从{{domxref("CanvasRenderingContext2D.textBaseline")}} 属性标明的水平线到渲染文本的所有字体的矩形最高边界顶部的距离,使用 CSS 像素计算。
    {{domxref("TextMetrics.fontBoundingBoxDescent")}} {{readonlyInline}}
    -
    double 类型,从{{domxref("CanvasRenderingContext2D.textBaseline")}} 属性标明的水平线到渲染文本的所有字体的矩形边界最底部的距离,使用 CSS 像素计算。
    +
    double 类型,从{{domxref("CanvasRenderingContext2D.textBaseline")}} 属性标明的水平线到渲染文本的所有字体的矩形边界最底部的距离,使用 CSS 像素计算。
    {{domxref("TextMetrics.actualBoundingBoxAscent")}} {{readonlyInline}}
    -
    double 类型,从{{domxref("CanvasRenderingContext2D.textBaseline")}} 属性标明的水平线到渲染文本的矩形边界顶部的距离,使用 CSS 像素计算。
    +
    double 类型,从{{domxref("CanvasRenderingContext2D.textBaseline")}} 属性标明的水平线到渲染文本的矩形边界顶部的距离,使用 CSS 像素计算。
    {{domxref("TextMetrics.actualBoundingBoxDescent")}} {{readonlyInline}}
    -
    double 类型,从{{domxref("CanvasRenderingContext2D.textBaseline")}} 属性标明的水平线到渲染文本的矩形边界底部的距离,使用 CSS 像素计算。
    +
    double 类型,从{{domxref("CanvasRenderingContext2D.textBaseline")}} 属性标明的水平线到渲染文本的矩形边界底部的距离,使用 CSS 像素计算。
    {{domxref("TextMetrics.emHeightAscent")}} {{readonlyInline}}
    -
    double 类型,从{{domxref("CanvasRenderingContext2D.textBaseline")}} 属性标明的水平线到线框中 em 方块顶部的距离,使用 CSS 像素计算。
    +
    double 类型,从{{domxref("CanvasRenderingContext2D.textBaseline")}} 属性标明的水平线到线框中 em 方块顶部的距离,使用 CSS 像素计算。
    {{domxref("TextMetrics.emHeightDescent")}} {{readonlyInline}}
    -
    double 类型,从{{domxref("CanvasRenderingContext2D.textBaseline")}} 属性标明的水平线到线框中 em 方块底部的距离,使用 CSS 像素计算。
    +
    double 类型,从{{domxref("CanvasRenderingContext2D.textBaseline")}} 属性标明的水平线到线框中 em 方块底部的距离,使用 CSS 像素计算。
    {{domxref("TextMetrics.hangingBaseline")}} {{readonlyInline}}
    -
    double 类型,从{{domxref("CanvasRenderingContext2D.textBaseline")}} 属性标明的水平线到线框的 hanging 基线的距离,使用 CSS 像素计算。
    +
    double 类型,从{{domxref("CanvasRenderingContext2D.textBaseline")}} 属性标明的水平线到线框的 hanging 基线的距离,使用 CSS 像素计算。
    {{domxref("TextMetrics.alphabeticBaseline")}} {{readonlyInline}}
    -
    double 类型,从{{domxref("CanvasRenderingContext2D.textBaseline")}} 属性标明的水平线到线框的 alphabetic 基线的距离,使用 CSS 像素计算。
    +
    double 类型,从{{domxref("CanvasRenderingContext2D.textBaseline")}} 属性标明的水平线到线框的 alphabetic 基线的距离,使用 CSS 像素计算。
    {{domxref("TextMetrics.ideographicBaseline")}} {{readonlyInline}}
    -
    double 类型,从{{domxref("CanvasRenderingContext2D.textBaseline")}} 属性标明的水平线到线框的 ideographic 基线的距离,使用 CSS 像素计算。
    +
    double 类型,从{{domxref("CanvasRenderingContext2D.textBaseline")}} 属性标明的水平线到线框的 ideographic 基线的距离,使用 CSS 像素计算。

    规范

    diff --git a/files/zh-cn/web/api/textmetrics/width/index.html b/files/zh-cn/web/api/textmetrics/width/index.html index 5266bf5dac8f61..2f8ac8d2f4310c 100644 --- a/files/zh-cn/web/api/textmetrics/width/index.html +++ b/files/zh-cn/web/api/textmetrics/width/index.html @@ -13,12 +13,12 @@

    语法

    示例

    -

    事先给定 {{HTMLElement("canvas")}} 元素:

    +

    事先给定 {{HTMLElement("canvas")}} 元素:

    <canvas id="canvas"></canvas>
     
    -

    你可以使用下面的代码得到一个 {{domxref("TextMetrics")}} 对象:

    +

    你可以使用下面的代码得到一个 {{domxref("TextMetrics")}} 对象:

    var canvas = document.getElementById("canvas");
     var ctx = canvas.getContext("2d");
    diff --git a/files/zh-cn/web/api/textrange/index.html b/files/zh-cn/web/api/textrange/index.html
    index 6c1f425dc4038f..fd0f627a9ac15c 100644
    --- a/files/zh-cn/web/api/textrange/index.html
    +++ b/files/zh-cn/web/api/textrange/index.html
    @@ -13,29 +13,29 @@
     

    IE Only

    该属性是IE专有的。尽管IE很好地支持它,但大部分其它浏览器已经不支持该属性。该属性仅应在需兼容低版本IE时作为其中一种方案,而不是在跨浏览器的脚本中完全依赖它。 -

    TextRange 对象表示文档中的文本片段,类似于标准定义的 {{domxref("Range")}} 接口。

    +

    TextRange 对象表示文档中的文本片段,类似于标准定义的 {{domxref("Range")}} 接口。

    -

    此对象用于表示文档中特定的一段文本,例如在按住鼠标选中页面上的内容时,创建出的就是一个较为典型的 TextRange。它在IE中被实现,可通过 {{domxref("Element.createTextRange()")}} 方法或是 {{domxref("MSSelection.createRange()")}} 方法创建一个 TextRange 对象。

    +

    此对象用于表示文档中特定的一段文本,例如在按住鼠标选中页面上的内容时,创建出的就是一个较为典型的 TextRange。它在IE中被实现,可通过 {{domxref("Element.createTextRange()")}} 方法或是 {{domxref("MSSelection.createRange()")}} 方法创建一个 TextRange 对象。

    -

    注意,在非IE浏览器不支持该接口,可使用替代的 {{domxref("Selection")}} 及 {{domxref("Range")}} 接口。

    +

    注意,在非IE浏览器不支持该接口,可使用替代的 {{domxref("Selection")}} 及 {{domxref("Range")}} 接口。

    属性

    {{domxref("TextRange.boundingHeight")}}{{ReadOnlyInline}}
    -

    返回绑定 TextRange 对象的矩形的高度。

    +

    返回绑定 TextRange 对象的矩形的高度。

    {{domxref("TextRange.boundingLeft")}}{{ReadOnlyInline}}
    -
    返回绑定 TextRange 对象的矩形左边缘和完全包含 TextRange 对象的左侧之间的距离。
    +
    返回绑定 TextRange 对象的矩形左边缘和完全包含 TextRange 对象的左侧之间的距离。
    {{domxref("TextRange.boundingTop")}}{{ReadOnlyInline}}
    -
    返回绑定 TextRange 对象的矩形上边缘和完全包含 TextRange 对象的顶边之间的距离。
    +
    返回绑定 TextRange 对象的矩形上边缘和完全包含 TextRange 对象的顶边之间的距离。
    {{domxref("TextRange.boundingWidth")}}{{ReadOnlyInline}}
    -
    返回绑定 TextRange 对象的矩形的宽度。
    +
    返回绑定 TextRange 对象的矩形的宽度。
    {{domxref("TextRange.htmlText")}}
    -
    获取或设置 TextRange 内的HTML内容。
    +
    获取或设置 TextRange 内的HTML内容。
    {{domxref("TextRange.text")}}
    -
    获取或设置 TextRange 内的纯文本内容。
    +
    获取或设置 TextRange 内的纯文本内容。

    方法

    @@ -44,11 +44,11 @@

    方法

    {{domxref("TextRange.collapse()")}}
    将插入光标(Caret)移动到当前范围的开始或结尾。
    {{domxref("TextRange.duplicate()")}}
    -
    返回 TextRange 的副本。
    +
    返回 TextRange 的副本。
    {{domxref("TextRange.execCommand()")}}
    在当前文档、当前选中区或给定范围上执行命令
    {{domxref("TextRange.expand()")}}
    -
    扩展区域,以便完全包含指定单位的范围。例如,扩展一个 "word" 表示把区域两端的单词完全包含在区域内,如 xpand to wor 可能变成 expand to words
    +
    扩展区域,以便完全包含指定单位的范围。例如,扩展一个 "word" 表示把区域两端的单词完全包含在区域内,如 xpand to wor 可能变成 expand to words
    {{domxref("TextRange.findText()")}}
    搜索原先区域内的指定文本,并调整区域使其包含第一次匹配的内容。
    {{domxref("TextRange.inRange()")}}
    @@ -56,34 +56,34 @@

    方法

    {{domxref("TextRange.isEqual()")}}
    返回当前区域是否与指定区域相等。
    {{domxref("TextRange.move()")}}
    -
    将区域折叠(collapse),并将空白区域移动指定单位数。如 move("character",-1) 表示向左移动一个字符。
    +
    将区域折叠(collapse),并将空白区域移动指定单位数。如 move("character",-1) 表示向左移动一个字符。
    {{domxref("TextRange.moveEnd()")}}
    将区域的结束位置移动指定单位数。
    {{domxref("TextRange.moveStart()")}}
    将区域的开始位置移动指定单位数。
    {{domxref("TextRange.moveToElementText()")}}
    -
    使区域包含指定元素的文本。只能用于 {{domxref("Element")}} 对象。
    +
    使区域包含指定元素的文本。只能用于 {{domxref("Element")}} 对象。
    {{domxref("TextRange.parentElement()")}}
    返回区域的父元素,也就是完全包含区域的最小元素。如果选区包含多个元素,则当修改选区的内容时,内容将放置在该父元素的对应位置中,而不是放在子元素中。
    {{domxref("TextRange.pasteHTML()")}}
    将HTML内容粘贴入给定范围,并替换范围内任何先前的文本和 HTML 元素。
    {{domxref("TextRange.queryCommandEnabled()")}}
    -
    返回表明指定命令是否可于给定文档当前状态下使用 execCommand 命令成功执行的 {{jsxref("Boolean")}} 值。参见 {{domxref("Document.queryCommandEnabled()")}}。
    +
    返回表明指定命令是否可于给定文档当前状态下使用 execCommand 命令成功执行的 {{jsxref("Boolean")}} 值。参见 {{domxref("Document.queryCommandEnabled()")}}。
    {{domxref("TextRange.queryCommandState()")}}
    -
    返回表明指定命令当前状态的 {{jsxref("Boolean")}} 值。参见 {{domxref("Document.queryCommandState()")}}。
    +
    返回表明指定命令当前状态的 {{jsxref("Boolean")}} 值。参见 {{domxref("Document.queryCommandState()")}}。
    {{domxref("TextRange.queryCommandValue()")}}
    -
    返回表明指定命令当前值的 {{domxref("DOMString")}}。参见 {{domxref("Document.queryCommandValue()")}}。
    +
    返回表明指定命令当前值的 {{domxref("DOMString")}}。参见 {{domxref("Document.queryCommandValue()")}}。
    {{domxref("TextRange.scrollIntoView()")}}
    -
    将区域滚动到可视范围内(顶部或底部)。可作为 {{domxref("Element.scrollIntoView")}} 在低版本IE下的一种替代方法。
    +
    将区域滚动到可视范围内(顶部或底部)。可作为 {{domxref("Element.scrollIntoView")}} 在低版本IE下的一种替代方法。
    {{domxref("TextRange.select()")}}
    将当前区域选中(即用户看到的蓝色选区)。
    {{domxref("TextRange.setEndPoint()")}}
    -
    根据其它 TextRange 的端点设置当前区域的端点。
    +
    根据其它 TextRange 的端点设置当前区域的端点。

    示例

    -

    以下示例在IE10以下有效。该示例通过 document.selection 获取 TextRange,并设置选中指定的元素。IE9以上支持标准的替代方案 {{domxref("Range")}}。

    +

    以下示例在IE10以下有效。该示例通过 document.selection 获取 TextRange,并设置选中指定的元素。IE9以上支持标准的替代方案 {{domxref("Range")}}。

    var range = document.selection.createRange();
     var element = document.getElementById("test");
    @@ -103,28 +103,28 @@ 

    示例

    开发者笔记

    -

    使用 TextRange 操作选中区域

    +

    使用 TextRange 操作选中区域

    仅在IE10以下有效。在浏览器允许的情况下,应优先使用 {{domxref("Selection")}} 接口。

    -

    {{domxref("document.selection")}} 属性返回一个非标准的 {{domxref("MSSelection")}} 对象,selection.createRange() 方法创建一个和当前选中区域一致的 TextRange 对象。

    +

    {{domxref("document.selection")}} 属性返回一个非标准的 {{domxref("MSSelection")}} 对象,selection.createRange() 方法创建一个和当前选中区域一致的 TextRange 对象。

    var sel = document.selection;
     var range = sel.createRange();
     alert(range.text);
     // 输出被选区域的纯文本
    -

    注意,createRange 方法并不创建引用,如果在对选区修改后希望修改后区域被选中,则需要调用 TextRange.select 方法。

    +

    注意,createRange 方法并不创建引用,如果在对选区修改后希望修改后区域被选中,则需要调用 TextRange.select 方法。

    -

    selection 兼容性

    +

    selection 兼容性

    -

    document.selection 对象是 TextRange 的主要用途。该对象用于处理文档中被选中的区域,并且主要依靠使用 TextRange 接口实现。标准规定一个窗口/文档可能有多个不相邻选区,但只有Firefox实现通过 Ctrl 选中多个区域;IE中一般也只允许文档只存在一个被选中的 TextRange

    +

    document.selection 对象是 TextRange 的主要用途。该对象用于处理文档中被选中的区域,并且主要依靠使用 TextRange 接口实现。标准规定一个窗口/文档可能有多个不相邻选区,但只有Firefox实现通过 Ctrl 选中多个区域;IE中一般也只允许文档只存在一个被选中的 TextRange

    -

    然而,在其它浏览器中,document 并不存在一个所谓 selection 属性——它们通过标准 Selection API 实现对选区的操作,也就是通过 window.getSelection() 方法获取 Selection 对象,并使用标准的 Range 对象对文本片段作出处理。IE11及之后的版本也放弃了 document.selection 对象而转为使用标准接口(尽管 TextRange 一直保留,但大多数情况下它已失去作用)。

    +

    然而,在其它浏览器中,document 并不存在一个所谓 selection 属性——它们通过标准 Selection API 实现对选区的操作,也就是通过 window.getSelection() 方法获取 Selection 对象,并使用标准的 Range 对象对文本片段作出处理。IE11及之后的版本也放弃了 document.selection 对象而转为使用标准接口(尽管 TextRange 一直保留,但大多数情况下它已失去作用)。

    -

    这很容易引起迷惑。通常,如果脚本只要求兼容最新的浏览器,那么标准的接口是最佳的选择;但通常目前的网站仍希望兼容IE8或其以下的浏览器,因此,最好的做法是同时处理两者,也就是在不支持标准接口时尝试使用 TextRange 方式,但不要把该方式作为唯一的选择。

    +

    这很容易引起迷惑。通常,如果脚本只要求兼容最新的浏览器,那么标准的接口是最佳的选择;但通常目前的网站仍希望兼容IE8或其以下的浏览器,因此,最好的做法是同时处理两者,也就是在不支持标准接口时尝试使用 TextRange 方式,但不要把该方式作为唯一的选择。

    浏览器兼容性

    @@ -140,7 +140,7 @@

    浏览器兼容性

    - +
    {{domxref("TextRange")}} {{non-standard_inline()}} 支持(IE9后应使用标准API)不支持(详见Selection API不支持(详见Selection API
    @@ -148,6 +148,6 @@

    浏览器兼容性

    扩展

      -
    • {{domxref("Selection")}} 及 {{domxref("Range")}} 标准接口
    • -
    • Selection API 用于取代该非标准接口
    • +
    • {{domxref("Selection")}} 及 {{domxref("Range")}} 标准接口
    • +
    • Selection API 用于取代该非标准接口
    diff --git a/files/zh-cn/web/api/texttrack/cuechange_event/index.html b/files/zh-cn/web/api/texttrack/cuechange_event/index.html index a0753d67187f27..d40018978985c4 100644 --- a/files/zh-cn/web/api/texttrack/cuechange_event/index.html +++ b/files/zh-cn/web/api/texttrack/cuechange_event/index.html @@ -35,7 +35,7 @@

    规范

    {{SpecName('HTML WHATWG','#handler-oncuechange','oncuechange')}} {{Spec2('HTML WHATWG')}} -   + diff --git a/files/zh-cn/web/api/timeranges/end/index.html b/files/zh-cn/web/api/timeranges/end/index.html index 6cd51ed988ecb1..fc5f32036e59cb 100644 --- a/files/zh-cn/web/api/timeranges/end/index.html +++ b/files/zh-cn/web/api/timeranges/end/index.html @@ -22,7 +22,7 @@

    异常

    INDEX_SIZE_ERR
    -
    如果不存在指定索引值的时间范围,抛出 DOMException 异常。
    +
    如果不存在指定索引值的时间范围,抛出 DOMException 异常。

    示例

    diff --git a/files/zh-cn/web/api/timeranges/index.html b/files/zh-cn/web/api/timeranges/index.html index 8efdde21650008..8b714098412b62 100644 --- a/files/zh-cn/web/api/timeranges/index.html +++ b/files/zh-cn/web/api/timeranges/index.html @@ -5,11 +5,11 @@ ---
    {{APIRef("DOM")}}
    -
     TimeRanges 接口用来表示一组时间范围,主要目的是跟踪供{{HTMLElement("audio")}} 和 
    +
    TimeRanges 接口用来表示一组时间范围,主要目的是跟踪供{{HTMLElement("audio")}} 和
    -
    {{HTMLElement("video")}} 元素加载使用的媒体哪些部分已经被缓冲。  
    +
    {{HTMLElement("video")}} 元素加载使用的媒体哪些部分已经被缓冲。
    -

    一个 TimeRanges 对象包括一个或多个时间范围,其中每个都由一个开始偏移量和结束偏移量指定。你可以将你想要检索的时间范围的索引值传递给 start() 和 end() 方法来引用每个时间范围。

    +

    一个 TimeRanges 对象包括一个或多个时间范围,其中每个都由一个开始偏移量和结束偏移量指定。你可以将你想要检索的时间范围的索引值传递给 start()end() 方法来引用每个时间范围。

    术语"normalized TimeRanges object"指出这种对象中的范围时有序的,不重叠的,不为空并且不接触的(相邻范围被折叠成更大的范围)。

    @@ -17,7 +17,7 @@

    属性

    {{domxref("TimeRanges.length")}} {{ReadOnlyInline}}
    -
    返回一个 unsigned long 类型的数字。表示由time range对象表示的time ranges的数量。
    +
    返回一个 unsigned long 类型的数字。表示由time range对象表示的time ranges的数量。

    方法

    diff --git a/files/zh-cn/web/api/timeranges/length/index.html b/files/zh-cn/web/api/timeranges/length/index.html index 550e04c72205c7..acc32fe6315222 100644 --- a/files/zh-cn/web/api/timeranges/length/index.html +++ b/files/zh-cn/web/api/timeranges/length/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef("DOM")}}
    -

    只读属性 TimeRanges.length 返回对象中时间范围的个数。

    +

    只读属性 TimeRanges.length 返回对象中时间范围的个数。

    语法

    @@ -31,7 +31,7 @@

    示例

    }
    -

    这个例子演示了如何通过 TimeRanges 来判断 video 是否已经完全加载。

    +

    这个例子演示了如何通过 TimeRanges 来判断 video 是否已经完全加载。

    规范

    diff --git a/files/zh-cn/web/api/timeranges/start/index.html b/files/zh-cn/web/api/timeranges/start/index.html index b4ffed55fbfe08..4dad26aba99afd 100644 --- a/files/zh-cn/web/api/timeranges/start/index.html +++ b/files/zh-cn/web/api/timeranges/start/index.html @@ -22,7 +22,7 @@

    异常

    INDEX_SIZE_ERR
    -
    如果不存在指定索引值的时间范围,抛出 DOMException 异常。
    +
    如果不存在指定索引值的时间范围,抛出 DOMException 异常。

    示例

    @@ -44,7 +44,7 @@

    示例

    } -

    这个例子演示了如何通过 TimeRanges 来判断 video 是否已经完全加载。

    +

    这个例子演示了如何通过 TimeRanges 来判断 video 是否已经完全加载。

    规范

    diff --git a/files/zh-cn/web/api/touch/index.html b/files/zh-cn/web/api/touch/index.html index 66656629b175d8..67190a943a5bb4 100644 --- a/files/zh-cn/web/api/touch/index.html +++ b/files/zh-cn/web/api/touch/index.html @@ -11,11 +11,11 @@ ---

    {{ ApiRef("Touch Events") }}

    -

    Touch 对象表示在触控设备上的触摸点。通常是指手指或者触控笔在触屏设备或者触摸板上的操作。

    +

    Touch 对象表示在触控设备上的触摸点。通常是指手指或者触控笔在触屏设备或者触摸板上的操作。

    -

    对象属性 {{ domxref("Touch.radiusX") }}, {{ domxref("Touch.radiusY") }}, 和 {{ domxref("Touch.rotationAngle") }} 表示用户触摸操作所作用的区域,即触摸区域。这些属性对于处理类似于手指触摸之类的不精确操作很有帮助。这些属性可以表示出一个尽可能匹配触控区域的椭圆形(例如用户的指尖触控)。 {{experimental_inline}}

    +

    对象属性 {{ domxref("Touch.radiusX") }}, {{ domxref("Touch.radiusY") }}, 和 {{ domxref("Touch.rotationAngle") }} 表示用户触摸操作所作用的区域,即触摸区域。这些属性对于处理类似于手指触摸之类的不精确操作很有帮助。这些属性可以表示出一个尽可能匹配触控区域的椭圆形(例如用户的指尖触控)。 {{experimental_inline}}

    -
    注意: 以下很多属性的值需要依赖硬件设备去获取,例如,如果设备本身不支持侦测压感,那么 force 属性的值将始终是 0,对于 radiusXradiusY 来说同样可能有这种情况,如果设备认为触点只是一个点而不是一个面,它们始终为 1。 
    +
    注意: 以下很多属性的值需要依赖硬件设备去获取,例如,如果设备本身不支持侦测压感,那么 force 属性的值将始终是 0,对于 radiusXradiusY 来说同样可能有这种情况,如果设备认为触点只是一个点而不是一个面,它们始终为 1。

    构造函数

    diff --git a/files/zh-cn/web/api/touch/target/index.html b/files/zh-cn/web/api/touch/target/index.html index c328623d814f59..30634ee86ed02a 100644 --- a/files/zh-cn/web/api/touch/target/index.html +++ b/files/zh-cn/web/api/touch/target/index.html @@ -16,7 +16,7 @@

    概述

    -

    这个属性返回触摸点最初接触的 Element,即使这个触摸点已经移出那个元素的交互区域,甚至移出文档。需要注意的是,如果这个元素在触摸过程中被移除,这个事件仍然会指向它,因此这个事件也不会冒泡到 window 或 document 对象。因此,如果有元素在触摸过程中可能被移除,最佳实践是将触摸事件的监听器绑定到这个元素本身,防止元素被移除后,无法再从它的上一级元素上侦测到从该元素冒泡的事件。

    +

    这个属性返回触摸点最初接触的 Element,即使这个触摸点已经移出那个元素的交互区域,甚至移出文档。需要注意的是,如果这个元素在触摸过程中被移除,这个事件仍然会指向它,因此这个事件也不会冒泡到 windowdocument 对象。因此,如果有元素在触摸过程中可能被移除,最佳实践是将触摸事件的监听器绑定到这个元素本身,防止元素被移除后,无法再从它的上一级元素上侦测到从该元素冒泡的事件。

    语法

    @@ -34,7 +34,7 @@

    示例

    这个例子展示了如何访问 {{domxref("Touch")}} 对象的 {{domxref("Touch.target")}} 属性。{{domxref("Touch.target")}} 属性是最初接触平面的触摸点下的 {{domxref("Element")}} ({{domxref("EventTarget")}}) 。

    -

    在下面的代码片段中,我们假设用户在  source 元素上开始接触,因此初始化了一个或多个触摸点。当这个元素上的 {{event("touchstart")}} 事件处理程序被调用时,每个触摸点的 {{domxref("Touch.target")}} 属性可经事件的 {{domxref("TouchEvent.targetTouches")}} 列表访问。

    +

    在下面的代码片段中,我们假设用户在 source 元素上开始接触,因此初始化了一个或多个触摸点。当这个元素上的 {{event("touchstart")}} 事件处理程序被调用时,每个触摸点的 {{domxref("Touch.target")}} 属性可经事件的 {{domxref("TouchEvent.targetTouches")}} 列表访问。

    // 为'source'元素注册一个触摸监听器
     var src = document.getElementById("source");
    diff --git a/files/zh-cn/web/api/touch/touch/index.html b/files/zh-cn/web/api/touch/touch/index.html
    index 60ed0c5465fc8e..aa8b811c6cad00 100644
    --- a/files/zh-cn/web/api/touch/touch/index.html
    +++ b/files/zh-cn/web/api/touch/touch/index.html
    @@ -5,7 +5,7 @@
     ---
     

    {{APIRef("Touch Events")}}{{SeeCompatTable}}

    -

    Touch() 构造器创建一个新的 {{domxref("Touch")}} 对象。

    +

    Touch() 构造器创建一个新的 {{domxref("Touch")}} 对象。

    Syntax

    @@ -23,12 +23,12 @@

    Arguments

    • "identifier", 必须,是一个长整型,表示一个触摸点的数字标记。
    • "target", 必须,是 {{domxref("EventTarget")}}类型,表示在触摸点开始接触接触面时的节点。
    • -
    • "clientX", 可选,默认为 0,为双精度浮点数类型,表示触摸在浏览器视口的横轴坐标,不包括滚动条的偏移距离。 
    • -
    • "clientY", 可选,默认为 0,为双精度浮点数类型,表示触摸在浏览器视口的横轴坐标,不包括滚动条的偏移距离。 
    • +
    • "clientX", 可选,默认为 0,为双精度浮点数类型,表示触摸在浏览器视口的横轴坐标,不包括滚动条的偏移距离。
    • +
    • "clientY", 可选,默认为 0,为双精度浮点数类型,表示触摸在浏览器视口的横轴坐标,不包括滚动条的偏移距离。
    • "screenX", 可选,默认为 0,为双精度浮点数类型,表示以用户屏幕为基准的,触摸点横坐标。
    • "screenY", 可选,默认为 0,为双精度浮点数类型,表示以用户屏幕为基准的,触摸点纵坐标。
    • -
    • "pageX",可选,默认为 0,为双精度浮点数类型,表示触摸在用户屏幕的横轴坐标,包括滚动条的偏移距离。 
    • -
    • "pageY", 可选,默认为 0,为双精度浮点数类型,表示触摸在用户屏幕的纵轴坐标,包括滚动条的偏移距离。 
    • +
    • "pageX",可选,默认为 0,为双精度浮点数类型,表示触摸在用户屏幕的横轴坐标,包括滚动条的偏移距离。
    • +
    • "pageY", 可选,默认为 0,为双精度浮点数类型,表示触摸在用户屏幕的纵轴坐标,包括滚动条的偏移距离。
    • "radiusX", 可选,默认为 0,为浮点数类型。表示接触面(比如手指,触控笔)接触形成的椭圆,在 rotationAngle 角度下横轴上形成的椭圆半径。和 screenX 使用的 CSS 像素保持同一个缩放大小。这个值不能为负。
    • "radiusY", 可选,默认为 0,为浮点数类型。表示接触面(比如手指,触控笔)接触形成的椭圆,在 rotationAngle 角度下纵轴上形成的椭圆半径。和 screenY 使用的 CSS 像素保持同一个缩放大小。这个值不能为负。
    • "rotationAngle", 可选,默认为 0,为浮点数类型。表示由 radiusX 和 radiusY 决定的椭圆在顺时针方向相对其中心偏转的角度。这个值介于 0 到 90 度之间。如果由 radiusX 和 radiusY 决定的椭圆是一个标准圆形,则 rotationAngle 没有任何效用。用户设备可能用 0 表示这种标准圆形的情况,或者用其他符合要求范围的值来表示(比如,用户设备可能用上一次的触摸事件 rotationAngle 值,来避免突然变动)。
    • diff --git a/files/zh-cn/web/api/touch_events/index.html b/files/zh-cn/web/api/touch_events/index.html index 06708172ea5f98..77c43874154c7f 100644 --- a/files/zh-cn/web/api/touch_events/index.html +++ b/files/zh-cn/web/api/touch_events/index.html @@ -65,7 +65,7 @@

      创建画布

      设置事件处理器

      -

      当页面加载时,下文的 startup() 函数由 window.onload 属性触发。

      +

      当页面加载时,下文的 startup() 函数由 window.onload 属性触发。

      window.onload = function startup() {
         const el = document.getElementsByTagName("canvas")[0];
      @@ -76,7 +76,7 @@ 

      设置事件处理器

      }
      -

      该函数为 {{ HTMLElement("canvas") }} 元素设置了所有相关的事件监听器,使事件在触发时能够得到处理。

      +

      该函数为 {{ HTMLElement("canvas") }} 元素设置了所有相关的事件监听器,使事件在触发时能够得到处理。

      跟踪新触摸

      @@ -84,30 +84,30 @@

      跟踪新触摸

      const ongoingTouches = [];
      -

      当 {{event("touchstart")}} 事件触发时,平面上即出现一个新的触摸点,继而调用 handleStart() :

      +

      当 {{event("touchstart")}} 事件触发时,平面上即出现一个新的触摸点,继而调用 handleStart()

      function handleStart(evt) {
      -  evt.preventDefault();
      -  console.log("触摸开始。");
      -  const el = document.getElementsByTagName("canvas")[0];
      -  const ctx = el.getContext("2d");
      -  const touches = evt.changedTouches;
      -
      -  for (let i = 0; i < touches.length; i++) {
      -    console.log("开始第 " + i + " 个触摸 ...");
      -    ongoingTouches.push(copyTouch(touches[i]));
      -    const color = colorForTouch(touches[i]);
      -    ctx.beginPath();
      -    ctx.arc(touches[i].pageX, touches[i].pageY, 4, 0, 2 * Math.PI, false);
      -    // 在起点画一个圆。
      -    ctx.fillStyle = color;
      -    ctx.fill();
      -    console.log("第 " + i + " 个触摸已开始。");
      -  }
      +  evt.preventDefault();
      +  console.log("触摸开始。");
      +  const el = document.getElementsByTagName("canvas")[0];
      +  const ctx = el.getContext("2d");
      +  const touches = evt.changedTouches;
      +
      +  for (let i = 0; i < touches.length; i++) {
      +    console.log("开始第 " + i + " 个触摸 ...");
      +    ongoingTouches.push(copyTouch(touches[i]));
      +    const color = colorForTouch(touches[i]);
      +    ctx.beginPath();
      +    ctx.arc(touches[i].pageX, touches[i].pageY, 4, 0, 2 * Math.PI, false);
      +    // 在起点画一个圆。
      +    ctx.fillStyle = color;
      +    ctx.fill();
      +    console.log("第 " + i + " 个触摸已开始。");
      +  }
       }
       
      -

       {{ domxref("event.preventDefault()") }} 阻止了浏览器继续处理触摸(和鼠标)事件。 然后我们取得上下文,从事件的 {{ domxref("TouchEvent.changedTouches") }} 属性中获得已改变的触摸点列表。

      +

      {{ domxref("event.preventDefault()") }} 阻止了浏览器继续处理触摸(和鼠标)事件。 然后我们取得上下文,从事件的 {{ domxref("TouchEvent.changedTouches") }} 属性中获得已改变的触摸点列表。

      上述列表中所有的 {{ domxref("Touch") }} 对象即为当前所有活动的触摸点,把它们置于一个数组中,然后为每个触摸绘制起点。我们设置线条宽度为四像素,所以恰好会绘制一个半径为 4 像素的圆。

      @@ -116,32 +116,32 @@

      当触摸移动时绘制

      在触摸平面上移动一根或者几根手指会触发 {{event("touchmove")}} 事件,从而将调用handleMove() 函数。本例中这个函数用于更新触摸点信息,并为每个触摸点从之前位置到当前位置之间绘制直线。

      function handleMove(evt) {
      -  evt.preventDefault();
      -  const el = document.getElementsByTagName("canvas")[0];
      -  const ctx = el.getContext("2d");
      -  const touches = evt.changedTouches;
      -
      -  for (let i = 0; i < touches.length; i++) {
      -    const color = colorForTouch(touches[i]);
      -    const idx = ongoingTouchIndexById(touches[i].identifier);
      -
      -    if (idx >= 0) {
      -      log("继续第 " + idx + "个触摸。");
      -      ctx.beginPath();
      -      log("ctx.moveTo(" + ongoingTouches[idx].pageX + ", " + ongoingTouches[idx].pageY + ");");
      -      ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY);
      -      log("ctx.lineTo(" + touches[i].pageX + ", " + touches[i].pageY + ");");
      -      ctx.lineTo(touches[i].pageX, touches[i].pageY);
      -      ctx.lineWidth = 4;
      -      ctx.strokeStyle = color;
      -      ctx.stroke();
      -
      -      ongoingTouches.splice(idx, 1, copyTouch(touches[i])); // 切换触摸信息
      -      console.log(".");
      -    } else {
      -      log("无法确定下一个触摸点。");
      -    }
      -  }
      +  evt.preventDefault();
      +  const el = document.getElementsByTagName("canvas")[0];
      +  const ctx = el.getContext("2d");
      +  const touches = evt.changedTouches;
      +
      +  for (let i = 0; i < touches.length; i++) {
      +    const color = colorForTouch(touches[i]);
      +    const idx = ongoingTouchIndexById(touches[i].identifier);
      +
      +    if (idx >= 0) {
      +      log("继续第 " + idx + "个触摸。");
      +      ctx.beginPath();
      +      log("ctx.moveTo(" + ongoingTouches[idx].pageX + ", " + ongoingTouches[idx].pageY + ");");
      +      ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY);
      +      log("ctx.lineTo(" + touches[i].pageX + ", " + touches[i].pageY + ");");
      +      ctx.lineTo(touches[i].pageX, touches[i].pageY);
      +      ctx.lineWidth = 4;
      +      ctx.strokeStyle = color;
      +      ctx.stroke();
      +
      +      ongoingTouches.splice(idx, 1, copyTouch(touches[i])); // 切换触摸信息
      +      console.log(".");
      +    } else {
      +      log("无法确定下一个触摸点。");
      +    }
      +  }
       }
       
      @@ -149,58 +149,58 @@

      当触摸移动时绘制

      这样我们就可以取得每个触摸点之前位置的坐标,并且使用恰当的上下文方法绘制片段,从而将新旧两个位置连接起来。

      -

      当片段绘制完毕后,我们调用 Array.splice() 将 ongoingTouches 数组中触摸点之前的信息替换为当前信息。

      +

      当片段绘制完毕后,我们调用 Array.splice()ongoingTouches 数组中触摸点之前的信息替换为当前信息。

      触摸结束处理

      -

      用户的手指从表面抬起时将触发 {{event("touchend")}} 事件。我们通过调用下面的 handleEnd() 函数来处理此类事件。 这个函数的工作就是为每个结束的触摸点绘制最后一个片段,然后将触摸点从 ongoingTouches 数组中移除。

      +

      用户的手指从表面抬起时将触发 {{event("touchend")}} 事件。我们通过调用下面的 handleEnd() 函数来处理此类事件。 这个函数的工作就是为每个结束的触摸点绘制最后一个片段,然后将触摸点从 ongoingTouches 数组中移除。

      function handleEnd(evt) {
      -  evt.preventDefault();
      -  log("触摸结束。");
      -  const el = document.getElementsByTagName("canvas")[0];
      -  const ctx = el.getContext("2d");
      -   touches = evt.changedTouches;
      -
      -  for (let i = 0; i < touches.length; i++) {
      -    const color = colorForTouch(touches[i]);
      -    const idx = ongoingTouchIndexById(touches[i].identifier);
      -
      -    if (idx >= 0) {
      -      ctx.lineWidth = 4;
      -      ctx.fillStyle = color;
      -      ctx.beginPath();
      -      ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY);
      -      ctx.lineTo(touches[i].pageX, touches[i].pageY);
      -      ctx.fillRect(touches[i].pageX - 4, touches[i].pageY - 4, 8, 8);
      -      // 在终点画一个正方形
      -      ongoingTouches.splice(idx, 1); // 用完后移除
      -    } else {
      -      log("无法确定要结束哪个触摸点。");
      -    }
      -  }
      +  evt.preventDefault();
      +  log("触摸结束。");
      +  const el = document.getElementsByTagName("canvas")[0];
      +  const ctx = el.getContext("2d");
      +   touches = evt.changedTouches;
      +
      +  for (let i = 0; i < touches.length; i++) {
      +    const color = colorForTouch(touches[i]);
      +    const idx = ongoingTouchIndexById(touches[i].identifier);
      +
      +    if (idx >= 0) {
      +      ctx.lineWidth = 4;
      +      ctx.fillStyle = color;
      +      ctx.beginPath();
      +      ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY);
      +      ctx.lineTo(touches[i].pageX, touches[i].pageY);
      +      ctx.fillRect(touches[i].pageX - 4, touches[i].pageY - 4, 8, 8);
      +      // 在终点画一个正方形
      +      ongoingTouches.splice(idx, 1); // 用完后移除
      +    } else {
      +      log("无法确定要结束哪个触摸点。");
      +    }
      +  }
       }
       
      -

      这个函数与上一个很相像,唯一的实质性区别就是在调用 Array.splice() 时, 我们把用过的触摸实体从 ongoingTouches 数组中直接移除了,不再添加更新信息。对这个触摸点的跟踪随之终止。

      +

      这个函数与上一个很相像,唯一的实质性区别就是在调用 Array.splice() 时, 我们把用过的触摸实体从 ongoingTouches 数组中直接移除了,不再添加更新信息。对这个触摸点的跟踪随之终止。

      触摸取消处理

      -

      如果用户的手指不小心滑入浏览器界面,或者触摸需要取消时,会触发 {{event("touchcancel")}} 事件。从而会调用下面的 handleCancel() 函数:

      +

      如果用户的手指不小心滑入浏览器界面,或者触摸需要取消时,会触发 {{event("touchcancel")}} 事件。从而会调用下面的 handleCancel() 函数:

      function handleCancel(evt) {
      -  evt.preventDefault();
      -  console.log("触摸取消。");
      -  const touches = evt.changedTouches;
      -
      -  for (let i = 0; i < touches.length; i++) {
      -    const idx = ongoingTouchIndexById(touches[i].identifier);
      -    ongoingTouches.splice(idx, 1); // 用完后移除
      -  }
      +  evt.preventDefault();
      +  console.log("触摸取消。");
      +  const touches = evt.changedTouches;
      +
      +  for (let i = 0; i < touches.length; i++) {
      +    const idx = ongoingTouchIndexById(touches[i].identifier);
      +    ongoingTouches.splice(idx, 1); // 用完后移除
      +  }
       }
       
      -

      这里的想法是立刻结束触摸,所以我们直接从 ongoingTouches 数组中将其移除,而不去绘制最后的片段。

      +

      这里的想法是立刻结束触摸,所以我们直接从 ongoingTouches 数组中将其移除,而不去绘制最后的片段。

      便捷函数

      @@ -208,25 +208,25 @@

      便捷函数

      为每个触摸点选择一个颜色

      -

      为了区分每个触摸点绘制的内容,我们引入 colorForTouch() 函数,根据每个触摸点所独有的标记设定一个颜色。 这个标记在这里可能是一个无意义的数字,但我们至少可以利用它“对于每个触摸点的值都不同”这一特性。

      +

      为了区分每个触摸点绘制的内容,我们引入 colorForTouch() 函数,根据每个触摸点所独有的标记设定一个颜色。 这个标记在这里可能是一个无意义的数字,但我们至少可以利用它“对于每个触摸点的值都不同”这一特性。

      function colorForTouch(touch) {
      -  let r = touch.identifier % 16;
      -  let g = Math.floor(touch.identifier / 3) % 16;
      -  let b = Math.floor(touch.identifier / 7) % 16;
      -  r = r.toString(16); // 转换为十六进制字符串
      -  g = g.toString(16); // 转换为十六进制字符串
      -  b = b.toString(16); // 转换为十六进制字符串
      -  const color = "#" + r + g + b;
      +  let r = touch.identifier % 16;
      +  let g = Math.floor(touch.identifier / 3) % 16;
      +  let b = Math.floor(touch.identifier / 7) % 16;
      +  r = r.toString(16); // 转换为十六进制字符串
      +  g = g.toString(16); // 转换为十六进制字符串
      +  b = b.toString(16); // 转换为十六进制字符串
      +  const color = "#" + r + g + b;
         log("identifier " + touch.identifier + " 触摸的颜色为:" + color);
         return color;
       }
       
      -

      这个函数返回一个表示颜色的字符串,可以在调用 {{ HTMLElement("canvas") }} 的函数时使用。比如,若 {{ domxref("Touch.identifier") }} 的值为 10,则返回的字符串为 "#aaa"。

      +

      这个函数返回一个表示颜色的字符串,可以在调用 {{ HTMLElement("canvas") }} 的函数时使用。比如,若 {{ domxref("Touch.identifier") }} 的值为 10,则返回的字符串为 "#aaa"。

      -

      译注:这里的 colorForTouch() 不是一个好主意。Touch.identifier 是一个实验性属性,存在兼容性问题,不同浏览器之间实现方法不同,因此会得到不同的结果。

      +

      译注:这里的 colorForTouch() 不是一个好主意。Touch.identifier 是一个实验性属性,存在兼容性问题,不同浏览器之间实现方法不同,因此会得到不同的结果。

      拷贝触摸对象

      @@ -235,15 +235,15 @@

      拷贝触摸对象

      function copyTouch(touch) {
         return {
      -    identifier: touch.identifier,
      -    pageX: touch.pageX,
      -    pageY: touch.pageY
      -  };
      +    identifier: touch.identifier,
      +    pageX: touch.pageX,
      +    pageY: touch.pageY
      +  };
       }

      查找触摸点

      -

      ongoingTouchIndexById() 函数通过遍历 ongoingTouches 数组来寻找与给定标记相匹配的触摸点,返回该触摸点在数组中的下标。

      +

      ongoingTouchIndexById() 函数通过遍历 ongoingTouches 数组来寻找与给定标记相匹配的触摸点,返回该触摸点在数组中的下标。

      function ongoingTouchIndexById(idToFind) {
         for (let i = 0; i < ongoingTouches.length; i++) {
      @@ -264,7 +264,7 @@ 

      显示后台操作记录

      p.innerHTML = msg + "\n" + p.innerHTML; }
      -

      如果你的浏览器支持触摸,就可以 在线试用

      +

      如果你的浏览器支持触摸,就可以 在线试用

      jsFiddle 上的示例

      @@ -274,7 +274,7 @@

      附加信息

      处理点击

      -

      由于在 {{event("touchstart")}}(或系列 {{event("touchmove")}} 事件里的首个)中调用 preventDefault() 也会阻止相应的鼠标事件的触发,因此一般情况下我们在{{event("touchmove")}} 而不是 {{event("touchstart")}} 中调用它,这样,鼠标事件仍可正常触发,链接等部件也可继续工作。有些框架采取了一个替代方案,使用触摸事件代替鼠标事件来达到相同目的。 (下面的示例过于简单,可能产生奇怪的行为。这里仅仅作为一个引导。)

      +

      由于在 {{event("touchstart")}}(或系列 {{event("touchmove")}} 事件里的首个)中调用 preventDefault() 也会阻止相应的鼠标事件的触发,因此一般情况下我们在{{event("touchmove")}} 而不是 {{event("touchstart")}} 中调用它,这样,鼠标事件仍可正常触发,链接等部件也可继续工作。有些框架采取了一个替代方案,使用触摸事件代替鼠标事件来达到相同目的。 (下面的示例过于简单,可能产生奇怪的行为。这里仅仅作为一个引导。)

      function onTouch(evt) {
         evt.preventDefault();
      @@ -330,6 +330,6 @@ 

      Firefox,触摸事件

      在 Firefox 中,触摸事件随 e10s(electrolysis 即 多进程 Firefox)的禁用而禁用。e10s 在 Firefox 中默认为可用,但可以在某些特定情形下关闭它,比如在安装一些要求禁用 e10s 的工具或扩展时。这意味着即使在支持触屏的桌面或便携设备上,触摸事件也可能失效。

      -

      你可以使用 about:support 查看“应用程序概要”部分中“多进程窗口”一栏来确定 e10s 是否启用。1/1 表示启用,0/1 表示禁用。

      +

      你可以使用 about:support 查看“应用程序概要”部分中“多进程窗口”一栏来确定 e10s 是否启用。1/1 表示启用,0/1 表示禁用。

      -

      如果你想强制性的开启 e10s(来显式重新启用触摸事件支持),你需要使用 about:config 创建一个布尔类型的设置 browser.tabs.remote.force-enable,将它设置为 true,重启浏览器,e10s 将始终启用而不受其他设置的影响。

      +

      如果你想强制性的开启 e10s(来显式重新启用触摸事件支持),你需要使用 about:config 创建一个布尔类型的设置 browser.tabs.remote.force-enable,将它设置为 true,重启浏览器,e10s 将始终启用而不受其他设置的影响。

      diff --git a/files/zh-cn/web/api/touch_events/multi-touch_interaction/index.html b/files/zh-cn/web/api/touch_events/multi-touch_interaction/index.html index 3b8426c319c45e..2b8682d904c1ec 100644 --- a/files/zh-cn/web/api/touch_events/multi-touch_interaction/index.html +++ b/files/zh-cn/web/api/touch_events/multi-touch_interaction/index.html @@ -5,7 +5,7 @@ ---

      {{DefaultAPISidebar("Touch Events")}}

      -

      The touch event interfaces support application-specific single and multi-touch interactions. However, the interfaces can be a bit tricky for programmers to use because touch events are very different from other DOM input events, such as {{domxref("MouseEvent","mouse events")}}. The application described in this guide shows how to use touch events for simple single and multi-touch interactions, the basics needed to build application-specific gestures.

      +

      The touch event interfaces support application-specific single and multi-touch interactions. However, the interfaces can be a bit tricky for programmers to use because touch events are very different from other DOM input events, such as {{domxref("MouseEvent","mouse events")}}. The application described in this guide shows how to use touch events for simple single and multi-touch interactions, the basics needed to build application-specific gestures.

      A live version of this application is available on Github. The source code is available on Github and pull requests and bug reports are welcome.

      @@ -110,7 +110,7 @@

      Move/Pinch/Zoom handler

      Touch start handler

      -

      The {{event("touchstart")}} event handler caches touch points to support 2-touch gestures. It also calls {{domxref("Event.preventDefault","preventDefault()")}} to keep the browser from applying further event handling (for example, mouse event emulation).

      +

      The {{event("touchstart")}} event handler caches touch points to support 2-touch gestures. It also calls {{domxref("Event.preventDefault","preventDefault()")}} to keep the browser from applying further event handling (for example, mouse event emulation).

      function start_handler(ev) {
        // If the user makes simultaneious touches, the browser will fire a
      diff --git a/files/zh-cn/web/api/touch_events/using_touch_events/index.html b/files/zh-cn/web/api/touch_events/using_touch_events/index.html
      index 1262b89eeb590b..f846cd742a46dd 100644
      --- a/files/zh-cn/web/api/touch_events/using_touch_events/index.html
      +++ b/files/zh-cn/web/api/touch_events/using_touch_events/index.html
      @@ -5,13 +5,13 @@
       ---
       

      {{DefaultAPISidebar("Touch Events")}}

      -

      今天,大多数 Web 内容是为键盘和鼠标输入而设计的。然而,具有触摸屏(特别是便携式设备)的设备是主流的,Web 应用程序可以使用 {{domxref("Touch_events","Touch Events")}} 直接处理基于触摸的输入,或者应用程序可以使用可解释的鼠标事件以处理应用程序的输入。使用鼠标事件的缺点是它们不支持并发用户输入,而触摸事件支持多个同时输入(可能在触摸面上的不同位置),从而增强用户体验。

      +

      今天,大多数 Web 内容是为键盘和鼠标输入而设计的。然而,具有触摸屏(特别是便携式设备)的设备是主流的,Web 应用程序可以使用 {{domxref("Touch_events","Touch Events")}} 直接处理基于触摸的输入,或者应用程序可以使用可解释的鼠标事件以处理应用程序的输入。使用鼠标事件的缺点是它们不支持并发用户输入,而触摸事件支持多个同时输入(可能在触摸面上的不同位置),从而增强用户体验。

      触摸事件界面支持应用程序特定的单触摸和多点触控交互,例如双指手势。当手指(或触控笔)首先触摸接触面时,多点触摸交互开始。其他手指随后可以触摸该表面并且可选地移动穿过该触摸表面。当手指从表面移除时,相互作用结束。在此交互期间,应用程序在开始,移动和结束阶段接收触摸事件。应用程序可以将其自己的语义应用于触摸输入。

      Interfaces

      -

      触摸事件有三个接口 ({{domxref("Touch")}}, {{domxref("TouchEvent")}} 和 {{domxref("TouchList")}}) 和以下事件类型:

      +

      触摸事件有三个接口 ({{domxref("Touch")}}, {{domxref("TouchEvent")}} 和 {{domxref("TouchList")}}) 和以下事件类型:

      • {{event("touchstart")}} - 当触摸点放置在触摸面上时触发。
      • @@ -20,9 +20,9 @@

        Interfaces

      • {{event("touchcancel")}} - 当触摸点以实现特定的方式中断(例如,创建的触摸点太多)时触发。
      -

      {{domxref("Touch")}} 接口表示触敏设备上的单个接触点。接触点通常被称为触摸点或仅仅是触摸点。触摸通常由触摸屏,笔或触控板上的手指或触控笔产生。触摸点的属性包括唯一标识符,触摸点的目标元素以及触摸点相对于视口,页面和屏幕的位置的 X 和 Y 坐标。

      +

      {{domxref("Touch")}} 接口表示触敏设备上的单个接触点。接触点通常被称为触摸点或仅仅是触摸点。触摸通常由触摸屏,笔或触控板上的手指或触控笔产生。触摸点的属性包括唯一标识符,触摸点的目标元素以及触摸点相对于视口,页面和屏幕的位置的 X 和 Y 坐标。

      -

      {{domxref("TouchList")}} 接口表示触摸表面上的触点的列表。因此,如果用户用一根手指触摸触控表面,则该列表将包含一个触点,并且如果用户用三个手指触摸该表面,则列表长度将为三个。

      +

      {{domxref("TouchList")}} 接口表示触摸表面上的触点的列表。因此,如果用户用一根手指触摸触控表面,则该列表将包含一个触点,并且如果用户用三个手指触摸该表面,则列表长度将为三个。

      {{domxref("TouchEvent")}} 接口表示当触控屏上触点的状态发生改变时会发送的事件。当与触控屏开始接触时状态开始改变,移动触摸点且手指在触控屏上,释放触点然后退出触摸事件。这个接口的属性包括几个修饰键的状态(例如 shift键)和下面的触摸列表:

      @@ -32,8 +32,8 @@

      Interfaces

    • {{domxref("TouchEvent.changedTouches","changedTouches")}} - 依赖于关联的触摸事件类型的触摸点列表:
      • 对于 {{event("touchstart")}} 事件,它是当前事件变为活动的触摸点的列表。
      • -
      • 对于 {{event("touchmove")}} 事件,它是自上次事件以来更改的触摸点列表。
      • -
      • 对于 {{event("touchend")}} 事件,它是从表面移除的触摸点的列表(即,与手指不再接触表面的触摸点集合)。
      • +
      • 对于 {{event("touchmove")}} 事件,它是自上次事件以来更改的触摸点列表。
      • +
      • 对于 {{event("touchend")}} 事件,它是从表面移除的触摸点的列表(即,与手指不再接触表面的触摸点集合)。
    @@ -44,13 +44,13 @@

    From interfaces to gestures

    在定义手势的语义时,应用程序可能会考虑不同的因素。例如,当触摸结束时,触摸点从其起始位置行进到其位置的距离。另一个潜在因素是时间;例如,触摸开始和触摸结束之间经过的时间,或者用于创建双击手势的两个同时敲击之间的时间间隔。滑动的方向性(例如从左到右,从左到右等)是另一个要考虑的因素。

    -

    应用程序使用的触摸列表取决于应用程序手势的语义。例如,如果应用程序在一个元素上支持单一触摸(点击),则它将使用 {{event("touchstart")}} 中的 {{domxref("TouchEvent.targetTouches","targetTouches")}} 列表事件处理程序以特定应用程序处理触摸点。如果应用程序支持任意两个触摸点的双指滑动,它将使用 {{event("touchmove")}} 事件处理程序中的 {{domxref("TouchEvent.changedTouches","changedTouches")}} 列表确定两个触摸点是否已移动,然后以应用程序特定的方式实现该手势的语义。

    +

    应用程序使用的触摸列表取决于应用程序手势的语义。例如,如果应用程序在一个元素上支持单一触摸(点击),则它将使用 {{event("touchstart")}} 中的 {{domxref("TouchEvent.targetTouches","targetTouches")}} 列表事件处理程序以特定应用程序处理触摸点。如果应用程序支持任意两个触摸点的双指滑动,它将使用 {{event("touchmove")}} 事件处理程序中的 {{domxref("TouchEvent.changedTouches","changedTouches")}} 列表确定两个触摸点是否已移动,然后以应用程序特定的方式实现该手势的语义。

    -

    当只有一个活动的触摸点时,浏览器通常会分派仿真的鼠标和点击事件。涉及两个或多个活动触摸点的多点触控交互通常只会产生触摸事件。为了防止模拟的鼠标事件被发送,请在触摸事件处理程序中使用 {{domxref("Event.preventDefault()","preventDefault()")}} 方法。有关鼠标和触摸事件之间的交互的详细信息,请参阅  {{domxref("Touch_events.Supporting_both_TouchEvent_and_MouseEvent", "Supporting both TouchEvent and MouseEvent")}}。

    +

    当只有一个活动的触摸点时,浏览器通常会分派仿真的鼠标和点击事件。涉及两个或多个活动触摸点的多点触控交互通常只会产生触摸事件。为了防止模拟的鼠标事件被发送,请在触摸事件处理程序中使用 {{domxref("Event.preventDefault()","preventDefault()")}} 方法。有关鼠标和触摸事件之间的交互的详细信息,请参阅 {{domxref("Touch_events.Supporting_both_TouchEvent_and_MouseEvent", "Supporting both TouchEvent and MouseEvent")}}。

    Basic steps

    -

    本节包含使用上述接口的基本用法。有关更详细的示例,请参阅 {{domxref("Touch_events","Touch Events Overview")}} 。

    +

    本节包含使用上述接口的基本用法。有关更详细的示例,请参阅 {{domxref("Touch_events","Touch Events Overview")}} 。

    对每一个触摸事件类型注册一个事件处理器。

    @@ -100,21 +100,21 @@

    Best practices

    • 最大限度地减少在触摸处理程序中完成的工作量。
    • 将触摸事件处理程序添加到特定目标元素(而不是整个文档或文档树中较高的节点)。
    • -
    • 在 {{event("touchstart")}} 中添加 {{event("touchend")}}, {{event("touchcancel")}} 和 {{event("touchmove")}} 事件处理程序。
    • +
    • 在 {{event("touchstart")}} 中添加 {{event("touchend")}}, {{event("touchcancel")}} 和 {{event("touchmove")}} 事件处理程序。
    • 目标元素应足够大以适应手指触摸。如果目标区域太小,触摸它可能会导致相邻元素发射其他事件。

    Implementation and deployment status

    -

    touch events browser compatibility data 表明移动浏览器中的触摸事件支持相对较好,尽管其他实现正在进行中,桌面浏览器支持滞后。

    +

    touch events browser compatibility data 表明移动浏览器中的触摸事件支持相对较好,尽管其他实现正在进行中,桌面浏览器支持滞后。

    -

    关于触摸点的 touch area 的一些新功能 - 用户和触摸表面之间的接触面积正在被标准化。新功能包括最接近触摸点与触摸面的接触区域的椭圆的 X 和 Y 半径。接触点的旋转角度 - 应用于所描述的椭圆以与接触面积对准的旋转角度的数量也被标准化,以及触摸点上对屏幕的力量。

    +

    关于触摸点的 touch area 的一些新功能 - 用户和触摸表面之间的接触面积正在被标准化。新功能包括最接近触摸点与触摸面的接触区域的椭圆的 X 和 Y 半径。接触点的旋转角度 - 应用于所描述的椭圆以与接触面积对准的旋转角度的数量也被标准化,以及触摸点上对屏幕的力量。

    What about Pointer Events?

    The introduction of new input mechanisms results in increased application complexity to handle various input events, such as key events, mouse events, pen/stylus events, and touch events. To help address this problem, the Pointer Events standard defines events and related interfaces for handling hardware agnostic pointer input from devices including a mouse, pen, touchscreen, etc.. That is, the abstract pointer creates a unified input model that can represent a contact point for a finger, pen/stylus or mouse.

    -

    The pointer event model can simplify an application's input processing since a pointer represents input from any input device. Additionally, the pointer event types are very similar to mouse event types (for example, pointerdown pointerup) thus code to handle pointer events closely matches mouse handling code.

    +

    The pointer event model can simplify an application's input processing since a pointer represents input from any input device. Additionally, the pointer event types are very similar to mouse event types (for example, pointerdown pointerup) thus code to handle pointer events closely matches mouse handling code.

    The implementation status of pointer events in browsers is relatively low with IE11 and Edge having complete implementations. Firefox's implementation has been withdrawn because of {{bug("1166347")}}.

    diff --git a/files/zh-cn/web/api/touchevent/changedtouches/index.html b/files/zh-cn/web/api/touchevent/changedtouches/index.html index 86ef4f23d22c94..0fcdf0cdd4fe01 100644 --- a/files/zh-cn/web/api/touchevent/changedtouches/index.html +++ b/files/zh-cn/web/api/touchevent/changedtouches/index.html @@ -12,7 +12,7 @@

    概述

    • 对于 touchstart 事件,这个 {{ domxref("TouchList") }} 对象列出在此次事件中新增加的触点。
    • 对于 touchmove 事件,列出和上一次事件相比较,发生了变化的触点。
    • -
    • 对于 touchend 事件,changedTouches 是已经从触摸面的离开的触点的集合(也就是说,手指已经离开了屏幕/触摸面)。
    • +
    • 对于 touchend 事件,changedTouches 是已经从触摸面的离开的触点的集合(也就是说,手指已经离开了屏幕/触摸面)。

    语法

    diff --git a/files/zh-cn/web/api/touchevent/index.html b/files/zh-cn/web/api/touchevent/index.html index 38058c1b4f7906..59e8472bc6e178 100644 --- a/files/zh-cn/web/api/touchevent/index.html +++ b/files/zh-cn/web/api/touchevent/index.html @@ -24,22 +24,22 @@

    构造函数

    属性列表

    -

    {{ domxref("TouchEvent") }}的属性继承了 {{domxref("UIEvent")}} 和 {{domxref("Event")}}。

    +

    {{ domxref("TouchEvent") }}的属性继承了 {{domxref("UIEvent")}} 和 {{domxref("Event")}}。

    -
    {{ domxref("event.altKey", "TouchEvent.altKey") }} {{readonlyInline}}
    +
    {{ domxref("event.altKey", "TouchEvent.altKey") }} {{readonlyInline}}
    布尔值,指明触摸事件触发时,键盘 alt 键是否被按下。
    -
    {{ domxref("TouchEvent.changedTouches") }} {{readonlyInline}}
    +
    {{ domxref("TouchEvent.changedTouches") }} {{readonlyInline}}
    一个 {{ domxref("TouchList") }} 对象,包含了代表所有从上一次触摸事件到此次事件过程中,状态发生了改变的触点的 {{ domxref("Touch") }} 对象。
    -
    {{ domxref("event.ctrlKey", "TouchEvent.ctrlKey") }} {{readonlyInline}}
    +
    {{ domxref("event.ctrlKey", "TouchEvent.ctrlKey") }} {{readonlyInline}}
    布尔值,指明触摸事件触发时,键盘 ctrl 键是否被按下。
    -
    {{ domxref("event.metaKey", "TouchEvent.metaKey") }} {{readonlyInline}}
    +
    {{ domxref("event.metaKey", "TouchEvent.metaKey") }} {{readonlyInline}}
    布尔值,指明触摸事件触发时,键盘 meta 键(Wikipedia - meta Key)是否被按下。
    -
    {{ domxref("event.shiftKey", "TouchEvent.shiftKey") }} {{readonlyInline}}
    +
    {{ domxref("event.shiftKey", "TouchEvent.shiftKey") }} {{readonlyInline}}
    布尔值,指明触摸事件触发时,键盘 shift 键是否被按下。
    -
    {{ domxref("TouchEvent.targetTouches") }} {{readonlyInline}}
    +
    {{ domxref("TouchEvent.targetTouches") }} {{readonlyInline}}
    一个 {{ domxref("TouchList") }} 对象,是包含了如下触点的 {{ domxref("Touch") }} 对象:触摸起始于当前事件的目标 {{ domxref("element") }} 上,并且仍然没有离开触摸平面的触点。
    -
    {{ domxref("TouchEvent.touches") }} {{readonlyInline}}
    +
    {{ domxref("TouchEvent.touches") }} {{readonlyInline}}
    一 个 {{ domxref("TouchList") }} 对象,包含了所有当前接触触摸平面的触点的 {{ domxref("Touch") }} 对象,无论它们的起始于哪个 {{ domxref("element") }} 上,也无论它们状态是否发生了变化。
    @@ -57,13 +57,13 @@

    {{domxref("Element/touchend_event

    当一个触点被用户从触摸平面上移除(即用户的一个手指或手写笔离开触摸平面)时触发。当触点移出触摸平面的边界时也将触发。例如用户将手指划出屏幕边缘。

    -

    事件的目标 {{ domxref("element") }} 与触发 touchstart 事件的目标 {{ domxref("element") }} 相同,即使 touchend 事件触发时,触点已经移出了该 {{ domxref("element") }} 。

    +

    事件的目标 {{ domxref("element") }} 与触发 touchstart 事件的目标 {{ domxref("element") }} 相同,即使 touchend 事件触发时,触点已经移出了该 {{ domxref("element") }} 。

    已经被从触摸平面上移除的触点,可以在 changedTouches 属性定义的 {{ domxref("TouchList") }} 中找到。

    {{domxref("Element/touchmove_event", "touchmove")}}

    -

    当用户在触摸平面上移动触点时触发。事件的目标 {{ domxref("element") }} 和触发 touchstart 事件的目标 {{ domxref("element") }} 相同,即使当 touchmove 事件触发时,触点已经移出了该 {{ domxref("element") }} 。

    +

    当用户在触摸平面上移动触点时触发。事件的目标 {{ domxref("element") }} 和触发 touchstart 事件的目标 {{ domxref("element") }} 相同,即使当 touchmove 事件触发时,触点已经移出了该 {{ domxref("element") }} 。

    当触点的半径、旋转角度以及压力大小发生变化时,也将触发此事件。

    @@ -83,7 +83,7 @@

    与 addEventListen

    很值得注意的是,在很多情况下,触摸事件和鼠标事件会一起触发(以使非触摸专用的代码仍然可以与用户交互)。如果你要使用触摸事件,你可以使用 {{domxref("Event.preventDefault","preventDefault()")}} 来取消鼠标事件。

    -

    但 Chrome 是例外,从版本 56(桌面版、安卓版和安卓 webview)开始,Chrome 中 {{domxref("Element/touchstart_event", "touchstart")}} and {{domxref("Element/touchmove_event", "touchmove")}} 的默认值就是 true,没有必要调用 {{domxref("Event.preventDefault","preventDefault()")}}。如果要重写这个行为,简单地将 passive 设置成 false 就行。这样设置可以阻止监听器在用户滚动时停止页面渲染。Google Developer 有一个简单的演示。

    +

    但 Chrome 是例外,从版本 56(桌面版、安卓版和安卓 webview)开始,Chrome 中 {{domxref("Element/touchstart_event", "touchstart")}} and {{domxref("Element/touchmove_event", "touchmove")}} 的默认值就是 true,没有必要调用 {{domxref("Event.preventDefault","preventDefault()")}}。如果要重写这个行为,简单地将 passive 设置成 false 就行。这样设置可以阻止监听器在用户滚动时停止页面渲染。Google Developer 有一个简单的演示。

    全局事件处理

    @@ -97,7 +97,7 @@

    全局事件处理

    {{ domxref("GlobalEventHandlers.ontouchmove") }} {{experimental_inline}}
    使用一个 {{domxref("GlobalEventHandlers","global event handler")}} 处理 {{event("touchmove")}} 事件。
    {{ domxref("GlobalEventHandlers.ontouchcancel") }} {{experimental_inline}}
    -
    使用一个 {{domxref("GlobalEventHandlers","global event handler")}} 处理 {{event("touchcancel")}} 事件。
    +
    使用一个 {{domxref("GlobalEventHandlers","global event handler")}} 处理 {{event("touchcancel")}} 事件。

    实例

    @@ -118,7 +118,7 @@

    规范

    {{SpecName('Touch Events 2','#touchevent-interface', 'TouchEvent')}} {{Spec2('Touch Events 2')}} - Added ontouchstartontouchendontouchmoveontouchend global attribute handlers + Added ontouchstart, ontouchend, ontouchmove, ontouchend global attribute handlers {{SpecName('Touch Events', '#touchevent-interface', 'TouchEvent')}} diff --git a/files/zh-cn/web/api/touchevent/targettouches/index.html b/files/zh-cn/web/api/touchevent/targettouches/index.html index 63342102a5cf89..c173fcd8729d01 100644 --- a/files/zh-cn/web/api/touchevent/targettouches/index.html +++ b/files/zh-cn/web/api/touchevent/targettouches/index.html @@ -5,7 +5,7 @@ ---

    {{ APIRef("Touch Events") }}

    -

    targetTouches 是一个只读的 {{ domxref("TouchList") }} 列表,包含仍与触摸面接触的所有触摸点的 {{ domxref("Touch") }} 对象。{{event("touchstart")}}事件触发在哪个{{ domxref("element") }}内,它就是当前目标元素。

    +

    targetTouches 是一个只读的 {{ domxref("TouchList") }} 列表,包含仍与触摸面接触的所有触摸点的 {{ domxref("Touch") }} 对象。{{event("touchstart")}}事件触发在哪个{{ domxref("element") }}内,它就是当前目标元素。

    语法

    @@ -16,14 +16,14 @@

    返回值

    touches
    -
    一个 {{ domxref("TouchList") }},包含仍与触摸面接触的所有触摸点的 {{ domxref("Touch") }} 对象,{{event("touchstart")}}事件触发在哪个{{ domxref("element") }}内,它就是当前目标元素。
    +
    一个 {{ domxref("TouchList") }},包含仍与触摸面接触的所有触摸点的 {{ domxref("Touch") }} 对象,{{event("touchstart")}}事件触发在哪个{{ domxref("element") }}内,它就是当前目标元素。

    例子

    -

    本例阐述了 {{domxref("TouchEvent")}} 对象的 {{domxref("TouchEvent.targetTouches")}} 属性。{{domxref("TouchEvent.targetTouches")}} 属性也是一个 {{domxref("TouchList")}},其中包含的触摸点起始于触摸事件当前的目标元素,并且此刻正在触摸屏幕。所以,targetTouches 元素是 touches 的真子集。

    +

    本例阐述了 {{domxref("TouchEvent")}} 对象的 {{domxref("TouchEvent.targetTouches")}} 属性。{{domxref("TouchEvent.targetTouches")}} 属性也是一个 {{domxref("TouchList")}},其中包含的触摸点起始于触摸事件当前的目标元素,并且此刻正在触摸屏幕。所以,targetTouches 元素是 touches 的真子集。

    -

    下面代码段中的函数比较了 touches 列表和 targetTouches 列表的长度,返回值表示他们是否相等。

    +

    下面代码段中的函数比较了 touches 列表和 targetTouches 列表的长度,返回值表示他们是否相等。

    function touches_in_target(ev) {
       // Return true if all of the touches are within the target element;
    diff --git a/files/zh-cn/web/api/touchevent/touches/index.html b/files/zh-cn/web/api/touchevent/touches/index.html
    index eff33affdb3a35..b01499701eda96 100644
    --- a/files/zh-cn/web/api/touchevent/touches/index.html
    +++ b/files/zh-cn/web/api/touchevent/touches/index.html
    @@ -12,9 +12,9 @@
     
     

    概要

    -

    一个 {{ domxref("TouchList") }},其会列出所有当前在与触摸表面接触的  {{ domxref("Touch") }} 对象,不管触摸点是否已经改变或其目标元素是在处于 touchstart 阶段。

    +

    一个 {{ domxref("TouchList") }},其会列出所有当前在与触摸表面接触的 {{ domxref("Touch") }} 对象,不管触摸点是否已经改变或其目标元素是在处于 touchstart 阶段。

    -

    此属性是 {{readonlyInline}}。

    +

    此属性是 {{readonlyInline}}。

    语法

    @@ -25,14 +25,14 @@

    返回值

    touches
    -
    一个 {{ domxref("TouchList") }},其会列出所有当前在与触摸表面接触的  {{ domxref("Touch") }} 对象,不管触摸点是否已经改变或其目标元素是在处于 touchstart 阶段。
    +
    一个 {{ domxref("TouchList") }},其会列出所有当前在与触摸表面接触的 {{ domxref("Touch") }} 对象,不管触摸点是否已经改变或其目标元素是在处于 touchstart 阶段。

    示例

    -

    此示例说明 {{domxref("TouchEvent")}} 对象的 {{domxref("TouchEvent.touches")}} 属性。该{{domxref("TouchEvent.touches")}} 属性是一个 {{domxref("TouchList")}} 对象,并包含 {{domxref("Touch")}} 当前接触表面的每个接触点的对象列表。

    +

    此示例说明 {{domxref("TouchEvent")}} 对象的 {{domxref("TouchEvent.touches")}} 属性。该{{domxref("TouchEvent.touches")}} 属性是一个 {{domxref("TouchList")}} 对象,并包含 {{domxref("Touch")}} 当前接触表面的每个接触点的对象列表。

    -

    在下面的代码片段中,{{event("touchstart")}} 事件处理程序会检查 {{domxref("TouchEvent.touches")}} 列表的长度,以确定激活的触摸点的数量,然后根据触摸点的数量调用不同的处理程序。

    +

    在下面的代码片段中,{{event("touchstart")}} 事件处理程序会检查 {{domxref("TouchEvent.touches")}} 列表的长度,以确定激活的触摸点的数量,然后根据触摸点的数量调用不同的处理程序。

    someElement.addEventListener('touchstart', function(e) {
        // Invoke the appropriate handler depending on the
    diff --git a/files/zh-cn/web/api/touchlist/index.html b/files/zh-cn/web/api/touchlist/index.html
    index da4e21754daa07..9611995d041583 100644
    --- a/files/zh-cn/web/api/touchlist/index.html
    +++ b/files/zh-cn/web/api/touchlist/index.html
    @@ -9,13 +9,13 @@
     ---
     

    {{ ApiRef("Touch Events") }}

    -

    TouchList 接口代表一个触摸平面上所有触点的列表。例如,如果一个用户用三根手指接触屏幕(或者触控板),与之对应的 TouchList 会包含每根手指的 {{ domxref("Touch") }} 对象,总共三个。

    +

    TouchList 接口代表一个触摸平面上所有触点的列表。例如,如果一个用户用三根手指接触屏幕(或者触控板),与之对应的 TouchList 会包含每根手指的 {{ domxref("Touch") }} 对象,总共三个。

    属性

    -
    {{ domxref("TouchList.length") }} {{readonlyInline}}
    -
    返回TouchList中 {{ domxref("Touch") }} 对象的数量。
    +
    {{ domxref("TouchList.length") }} {{readonlyInline}}
    +
    返回TouchList中 {{ domxref("Touch") }} 对象的数量。

    方法

    diff --git a/files/zh-cn/web/api/treewalker/index.html b/files/zh-cn/web/api/treewalker/index.html index 16af885d9b565b..19d979fcf8a465 100644 --- a/files/zh-cn/web/api/treewalker/index.html +++ b/files/zh-cn/web/api/treewalker/index.html @@ -10,7 +10,7 @@

    {{ APIRef("DOM") }}

    -

    TreeWalker 对象用于表示文档子树中的节点和它们的位置。

    +

    TreeWalker 对象用于表示文档子树中的节点和它们的位置。

    TreeWalker 可以使用 {{domxref("Document.createTreeWalker()")}} 方法创建。

    @@ -20,9 +20,9 @@

    属性

    {{domxref("TreeWalker.root")}} {{readonlyInline}}
    -
    返回一个 {{domxref("Node")}} ,表示新建 TreeWalker 时所声明的根节点。
    +
    返回一个 {{domxref("Node")}} ,表示新建 TreeWalker 时所声明的根节点。
    {{domxref("TreeWalker.whatToShow")}} {{readonlyInline}}
    -
    返回一个 unsigned long 类型的常量位掩码,表示需要筛选的{{domxref("Node")}} 类型。不匹配的节点会跳过,但其子节点,如果符合条件,则也会被包含。可能的值如下: +
    返回一个 unsigned long 类型的常量位掩码,表示需要筛选的{{domxref("Node")}} 类型。不匹配的节点会跳过,但其子节点,如果符合条件,则也会被包含。可能的值如下: @@ -50,27 +50,27 @@

    属性

    - + - + - + - + - + @@ -80,7 +80,7 @@

    属性

    - + @@ -90,12 +90,12 @@

    属性

    - + - +
    NodeFilter.SHOW_COMMENT 128显示 {{ domxref("Comment") }} 节点。显示 {{ domxref("Comment") }} 节点。
    NodeFilter.SHOW_DOCUMENT 256显示 {{ domxref("Document") }} 节点。显示 {{ domxref("Document") }} 节点。
    NodeFilter.SHOW_DOCUMENT_FRAGMENT 1024显示 {{ domxref("DocumentFragment") }} 节点。显示 {{ domxref("DocumentFragment") }} 节点。
    NodeFilter.SHOW_DOCUMENT_TYPE 512显示 {{ domxref("DocumentType") }} 节点。显示 {{ domxref("DocumentType") }} 节点。
    NodeFilter.SHOW_ELEMENT 1显示 {{ domxref("Element") }} 节点。显示 {{ domxref("Element") }} 节点。
    NodeFilter.SHOW_ENTITY {{deprecated_inline}}
    NodeFilter.SHOW_ENTITY_REFERENCE {{deprecated_inline}} 16显示 {{ domxref("EntityReference") }} 节点。显示 {{ domxref("EntityReference") }} 节点。
    NodeFilter.SHOW_NOTATION {{deprecated_inline}}
    NodeFilter.SHOW_PROCESSING_INSTRUCTION 64显示 {{ domxref("ProcessingInstruction") }} 节点。显示 {{ domxref("ProcessingInstruction") }} 节点。
    NodeFilter.SHOW_TEXT 4显示 {{ domxref("Text") }} 节点。显示 {{ domxref("Text") }} 节点。
    @@ -105,7 +105,7 @@

    属性

    {{domxref("TreeWalker.expandEntityReferences")}} {{readonlyInline}}{{Deprecated_Inline}}
    是个{{domxref("Boolean")}}的标记,表明是否在丢弃一个{{domxref("EntityReference")}}是否同时丢弃其后代。
    {{domxref("TreeWalker.currentNode")}}
    -
    返回 TreeWalker   当前指向的{{domxref("Node")}}。
    +
    返回 TreeWalker 当前指向的{{domxref("Node")}}。

    方法

    @@ -113,24 +113,24 @@

    方法

    这个接口不继承任何方法。

    -

    注意:对于TreeWalker ,一个节点是否可见只取决于whatToShow 和 filter  两个参数(和元素是否在屏幕上可见无关)

    +

    注意:对于TreeWalker ,一个节点是否可见只取决于whatToShowfilter 两个参数(和元素是否在屏幕上可见无关)

    {{domxref("TreeWalker.parentNode()")}}
    -
    移动当前 {{domxref("Node")}}到文档顺序中的第一个“可见”的祖先节点,并返回该节点。如果没有这样的节点,则会返回 null  ,同时也不会发生移动。
    +
    移动当前 {{domxref("Node")}}到文档顺序中的第一个“可见”的祖先节点,并返回该节点。如果没有这样的节点,则会返回 null ,同时也不会发生移动。
    {{domxref("TreeWalker.firstChild()")}}
    -
    移动当前 {{domxref("Node")}}到当前节点的第一个“可见”子节点,并返回该节点。如果没有这样的节点,则会返回 null  ,同时也不会发生移动。
    +
    移动当前 {{domxref("Node")}}到当前节点的第一个“可见”子节点,并返回该节点。如果没有这样的节点,则会返回 null ,同时也不会发生移动。
    {{domxref("TreeWalker.lastChild()")}}
    -
    移动当前 {{domxref("Node")}}到当前节点的最末一个“可见”子节点,并返回该节点。如果没有这样的节点,则会返回 null  ,同时也不会发生移动。
    +
    移动当前 {{domxref("Node")}}到当前节点的最末一个“可见”子节点,并返回该节点。如果没有这样的节点,则会返回 null ,同时也不会发生移动。
    {{domxref("TreeWalker.previousSibling()")}}
    -
    移动当前 {{domxref("Node")}}到当前节点的前一个兄弟节点,并返回该节点。如果没有这样的节点,则会返回 null  ,同时也不会发生移动。
    +
    移动当前 {{domxref("Node")}}到当前节点的前一个兄弟节点,并返回该节点。如果没有这样的节点,则会返回 null ,同时也不会发生移动。
    {{domxref("TreeWalker.nextSibling()")}}
    -
    移动当前 {{domxref("Node")}}到当前节点的后一个兄弟节点,并返回该节点。如果没有这样的节点,则会返回 null  ,同时也不会发生移动。
    +
    移动当前 {{domxref("Node")}}到当前节点的后一个兄弟节点,并返回该节点。如果没有这样的节点,则会返回 null ,同时也不会发生移动。
    {{domxref("TreeWalker.previousNode()")}}
    -
    移动当前 {{domxref("Node")}}到文档顺序中前一个节点,并返回该节点。如果没有这样的节点,则会返回 null  ,同时也不会发生移动。
    +
    移动当前 {{domxref("Node")}}到文档顺序中前一个节点,并返回该节点。如果没有这样的节点,则会返回 null ,同时也不会发生移动。
    {{domxref("TreeWalker.nextNode()")}}
    -
    移动当前 {{domxref("Node")}}到文档顺序中下一个节点,并返回该节点。如果没有这样的节点,则会返回 null  ,同时也不会发生移动。
    +
    移动当前 {{domxref("Node")}}到文档顺序中下一个节点,并返回该节点。如果没有这样的节点,则会返回 null ,同时也不会发生移动。

    规范

    diff --git a/files/zh-cn/web/api/ui_events/keyboard_event_key_values/index.html b/files/zh-cn/web/api/ui_events/keyboard_event_key_values/index.html index da919413625e52..28ecf808941782 100644 --- a/files/zh-cn/web/api/ui_events/keyboard_event_key_values/index.html +++ b/files/zh-cn/web/api/ui_events/keyboard_event_key_values/index.html @@ -61,7 +61,7 @@

    Modifier keys

    "Alt" [5] -  Alt (替代)键。 + Alt (替代)键。 VK_MENU (0x12)
    VK_LMENU (0xA4)
    VK_RMENU (0xA5) @@ -130,7 +130,7 @@

    Modifier keys

    "Hyper" [4] -  Hyper 键。 + Hyper 键。 GDK_KEY_Hyper_L (0xFFED)
    diff --git a/files/zh-cn/web/api/uievent/detail/index.html b/files/zh-cn/web/api/uievent/detail/index.html index b96f635b28b404..4f62f20b3c8ed6 100644 --- a/files/zh-cn/web/api/uievent/detail/index.html +++ b/files/zh-cn/web/api/uievent/detail/index.html @@ -7,11 +7,11 @@

    UIEvent.detail 是只读属性, 当值为非空的时候,提供当前点击数 (和环境有关) 。

    -

    对 {{event("click")}} 或者 {{event("dblclick")}} 事件,UIEvent.detail 是当前点击数量。

    +

    对 {{event("click")}} 或者 {{event("dblclick")}} 事件,UIEvent.detail 是当前点击数量。

    -

    对 {{event("mousedown")}} 或者 {{event("mouseup")}} 事件,UIEvent.detail 是 1 加上当前点击数。

    +

    对 {{event("mousedown")}} 或者 {{event("mouseup")}} 事件,UIEvent.detail 是 1 加上当前点击数。

    -

    对所有的其它{{domxref("UIEvent")}} 对象,UIEvent.detail 总是零。

    +

    对所有的其它{{domxref("UIEvent")}} 对象,UIEvent.detail 总是零。

    Specifications

    diff --git a/files/zh-cn/web/api/uievent/index.html b/files/zh-cn/web/api/uievent/index.html index 64f93438b6528f..a405f5e5e8f694 100644 --- a/files/zh-cn/web/api/uievent/index.html +++ b/files/zh-cn/web/api/uievent/index.html @@ -11,33 +11,33 @@ ---

    {{APIRef("DOM Events")}}

    -

     UIEvent 接口表示简单的用户界面事件。

    +

    UIEvent 接口表示简单的用户界面事件。

    -

    UIEvent 是从 {{domxref("Event")}} 派生出来的。尽管 {{domxref("UIEvent.initUIEvent()")}} 方法为了向后兼容而一直保留着,但是你应该使用 {{domxref("UIEvent.UIEvent", "UIEvent()")}} 构造器来创建 UIEvent 对象。

    +

    UIEvent 是从 {{domxref("Event")}} 派生出来的。尽管 {{domxref("UIEvent.initUIEvent()")}} 方法为了向后兼容而一直保留着,但是你应该使用 {{domxref("UIEvent.UIEvent", "UIEvent()")}} 构造器来创建 UIEvent 对象。

    -

    某些接口是这个的直接或间接后代:{{domxref("MouseEvent")}}, {{domxref("TouchEvent")}}, {{domxref("FocusEvent")}}, {{domxref("KeyboardEvent")}}, {{domxref("WheelEvent")}}, {{domxref("InputEvent")}}, 和{{domxref("CompositionEvent")}}.

    +

    某些接口是这个的直接或间接后代:{{domxref("MouseEvent")}}, {{domxref("TouchEvent")}}, {{domxref("FocusEvent")}}, {{domxref("KeyboardEvent")}}, {{domxref("WheelEvent")}}, {{domxref("InputEvent")}}, 和{{domxref("CompositionEvent")}}.

    Constructors

    {{domxref("UIEvent.UIEvent()", "UIEvent()")}}
    -
    创建一个 UIEvent 对象
    +
    创建一个 UIEvent 对象

    属性

    -

    也继承了父代 {{domxref("Event")}} 的一些属性。

    +

    也继承了父代 {{domxref("Event")}} 的一些属性。

    -
    {{domxref("UIEvent.cancelBubble")}} {{Non-standard_inline}} {{Deprecated_inline}}
    +
    {{domxref("UIEvent.cancelBubble")}} {{Non-standard_inline}} {{Deprecated_inline}}
    返回一个 {{jsxref("Boolean")}},表示该事件的冒泡是否被取消。
    {{domxref("UIEvent.detail")}}{{readonlyinline}}
    -
    Returns a long with details about the event, depending on the event type.
    +
    Returns a long with details about the event, depending on the event type.
    {{domxref("UIEvent.isChar")}} {{Deprecated_Inline}} {{readonlyinline}}
    -
    返回一个 {{jsxref("Boolean")}},表示该事件是否产生了一个键盘字符(key character)。
    +
    返回一个 {{jsxref("Boolean")}},表示该事件是否产生了一个键盘字符(key character)。
    {{domxref("UIEvent.layerX")}} {{Non-standard_inline}} {{readonlyinline}}
    返回事件相对于当前层的水平坐标。
    {{domxref("UIEvent.layerY")}} {{Non-standard_inline}} {{readonlyinline}}
    @@ -46,21 +46,21 @@

    属性

    返回事件相对于整个文档的水平坐标。
    {{domxref("UIEvent.pageY")}} {{Non-standard_inline}} {{readonlyinline}}
    返回事件相对于整个文档的垂直坐标。
    -
    {{domxref("UIEvent.sourceCapabilities")}} {{non-standard_inline}} {{readonlyinline}}
    +
    {{domxref("UIEvent.sourceCapabilities")}} {{non-standard_inline}} {{readonlyinline}}
    返回输入设备功能接口的一个实例,它提供有关负责生成 touch 事件的物理设备的信息。
    {{domxref("UIEvent.view")}}{{readonlyinline}}
    -
    返回一个包含了产生该事件的视图的 {{domxref("WindowProxy")}} 。
    -
    {{domxref("UIEvent.which")}} {{Non-standard_inline}} {{readonlyinline}} 
    -
    返回一个对应(键盘)按下的数字类型的 keyCode ,或者一个字母数字键按下时的字符码 (charCode)。
    +
    返回一个包含了产生该事件的视图的 {{domxref("WindowProxy")}} 。
    +
    {{domxref("UIEvent.which")}} {{Non-standard_inline}} {{readonlyinline}}
    +
    返回一个对应(键盘)按下的数字类型的 keyCode ,或者一个字母数字键按下时的字符码 (charCode)。

    方法

    -

    也继承了父代 {{domxref("Event")}} 的一些方法。

    +

    也继承了父代 {{domxref("Event")}} 的一些方法。

    {{domxref("UIEvent.initUIEvent()")}} {{deprecated_inline}}
    -
    初始化一个 UIEvent 对象。如果事件已经被分派,这个方法什么都不做。
    +
    初始化一个 UIEvent 对象。如果事件已经被分派,这个方法什么都不做。

    规范

    diff --git a/files/zh-cn/web/api/uievent/uievent/index.html b/files/zh-cn/web/api/uievent/uievent/index.html index def335bb6c716c..60c45a1ec4096f 100644 --- a/files/zh-cn/web/api/uievent/uievent/index.html +++ b/files/zh-cn/web/api/uievent/uievent/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef("DOM Events")}}
    -

    UIEvent() 作为构造函数,可用于构造一个新的 {{domxref("UIEvent")}} 对象。

    +

    UIEvent() 作为构造函数,可用于构造一个新的 {{domxref("UIEvent")}} 对象。

    语法

    @@ -20,16 +20,16 @@

    Values

    -
    是 UIEventInit 集合,它拥有以下属性: +
    UIEventInit 集合,它拥有以下属性:
      -
    • detail: 可选,默认为 long 类型的 0 数值, 用来标记事件的关联值. {{domxref("UIEvent.detail")}} 列出了标准事件的语义。
    • -
    • view: 可选,默认为 null,类型为 {{domxref("WindowProxy")}}, 用来关联{{domxref("Window")}} 与 event 本身。
    • +
    • detail: 可选,默认为 long 类型的 0 数值, 用来标记事件的关联值. {{domxref("UIEvent.detail")}} 列出了标准事件的语义。
    • +
    • view: 可选,默认为 null,类型为 {{domxref("WindowProxy")}}, 用来关联{{domxref("Window")}} 与 event 本身。
    • sourceCapabilities: {{non-standard_inline}} 一个 {{domxref("InputDeviceCapabilities")}} 类型的接口实例 (对象),用来提供物理设备的触摸信息。
    -

    UIEventInit 合集依然接受从{{domxref("Event.Event", "EventInit")}} 定义来的合集。

    +

    UIEventInit 合集依然接受从{{domxref("Event.Event", "EventInit")}} 定义来的合集。

    diff --git a/files/zh-cn/web/api/uievent/view/index.html b/files/zh-cn/web/api/uievent/view/index.html index 5ab5717db022c4..75a0266665d929 100644 --- a/files/zh-cn/web/api/uievent/view/index.html +++ b/files/zh-cn/web/api/uievent/view/index.html @@ -13,7 +13,7 @@ ---

    {{APIRef("DOM Events")}}

    -

    The UIEvent.view 只读属性返回的生成事件的 {{domxref("document.defaultView")}} (window of the document) 对象。在浏览器中,这是事件所在的 {{ domxref("Window") }} 对象。

    +

    The UIEvent.view 只读属性返回的生成事件的 {{domxref("document.defaultView")}} (window of the document) 对象。在浏览器中,这是事件所在的 {{ domxref("Window") }} 对象。

    语法

    @@ -21,7 +21,7 @@

    语法

      -
    • view 是对 AbstractView 对象的引用。
    • +
    • view 是对 AbstractView 对象的引用。

    技术参数

    diff --git a/files/zh-cn/web/api/uievent/which/index.html b/files/zh-cn/web/api/uievent/which/index.html index ec5a2288e9351f..4bb53f9ae80382 100644 --- a/files/zh-cn/web/api/uievent/which/index.html +++ b/files/zh-cn/web/api/uievent/which/index.html @@ -13,7 +13,7 @@ ---
    {{ APIRef("DOM Events") }} {{Deprecated_header}}
    -

    {{domxref("KeyboardEvent")}} 接口的 which 只读属性返回所按下键的数字 keyCode 或所按下字母数字键的字符代码 (charCode) 。

    +

    {{domxref("KeyboardEvent")}} 接口的 which 只读属性返回所按下键的数字 keyCode 或所按下字母数字键的字符代码 (charCode) 。

    语法

    diff --git a/files/zh-cn/web/api/url/createobjecturl/index.html b/files/zh-cn/web/api/url/createobjecturl/index.html index c7667678d79bb1..a3dcc73d7499d5 100644 --- a/files/zh-cn/web/api/url/createobjecturl/index.html +++ b/files/zh-cn/web/api/url/createobjecturl/index.html @@ -11,7 +11,7 @@ ---
    {{ApiRef("URL")}}
    -

    URL.createObjectURL() 静态方法会创建一个 {{domxref("DOMString")}},其中包含一个表示参数中给出的对象的 URL。这个 URL 的生命周期和创建它的窗口中的 {{domxref("document")}} 绑定。这个新的 URL 对象表示指定的 {{domxref("File")}} 对象或 {{domxref("Blob")}} 对象。

    +

    URL.createObjectURL() 静态方法会创建一个 {{domxref("DOMString")}},其中包含一个表示参数中给出的对象的 URL。这个 URL 的生命周期和创建它的窗口中的 {{domxref("document")}} 绑定。这个新的 URL 对象表示指定的 {{domxref("File")}} 对象或 {{domxref("Blob")}} 对象。

    {{AvailableInWorkers}}

    @@ -28,7 +28,7 @@

    参数

    object
    -
    用于创建 URL 的 {{domxref("File")}} 对象、{{domxref("Blob")}} 对象或者 {{domxref("MediaSource")}} 对象。​
    +
    用于创建 URL 的 {{domxref("File")}} 对象、{{domxref("Blob")}} 对象或者 {{domxref("MediaSource")}} 对象。​

    返回值

    @@ -43,16 +43,16 @@

    附注

    内存管理

    -

    在每次调用 createObjectURL() 方法时,都会创建一个新的 URL 对象,即使你已经用相同的对象作为参数创建过。当不再需要这些 URL 对象时,每个对象必须通过调用 {{domxref("URL.revokeObjectURL()")}} 方法来释放。

    +

    在每次调用 createObjectURL() 方法时,都会创建一个新的 URL 对象,即使你已经用相同的对象作为参数创建过。当不再需要这些 URL 对象时,每个对象必须通过调用 {{domxref("URL.revokeObjectURL()")}} 方法来释放。

    浏览器在 document 卸载的时候,会自动释放它们,但是为了获得最佳性能和内存使用状况,你应该在安全的时机主动释放掉它们。

    使用相对 URLs 作为媒体流

    -

    在旧版本的媒体资源规范中,添加流作为{{HTMLElement("video")}}元素需要创建一个关于 {{domxref("MediaStream")}}的对象 URL。现已没必要这样做了,浏览器已经移除了该操作的支持。

    +

    在旧版本的媒体资源规范中,添加流作为{{HTMLElement("video")}}元素需要创建一个关于 {{domxref("MediaStream")}}的对象 URL。现已没必要这样做了,浏览器已经移除了该操作的支持。

    -

    重要:如果你为了去添加流作为媒体元素,而仍旧使用着依赖{{domxref("URL.createObjectURL", "createObjectURL()")}} 的代码,你需要更新的代码,仅需要设定{{domxref("HTMLMediaElement.srcObject", "srcObject")}} 到`MediaStream `即可。

    +

    重要:如果你为了去添加流作为媒体元素,而仍旧使用着依赖{{domxref("URL.createObjectURL", "createObjectURL()")}} 的代码,你需要更新的代码,仅需要设定{{domxref("HTMLMediaElement.srcObject", "srcObject")}} 到`MediaStream `即可。

    规范

    diff --git a/files/zh-cn/web/api/url/hash/index.html b/files/zh-cn/web/api/url/hash/index.html index 2b0fecbcbcd2e2..c3e96ca5eacee1 100644 --- a/files/zh-cn/web/api/url/hash/index.html +++ b/files/zh-cn/web/api/url/hash/index.html @@ -9,9 +9,9 @@ ---
    {{ APIRef("URL API") }}
    -

    {{domxref("URL")}} 接口的 hash 属性返回一个 {{domxref("USVString")}},其中会包含 URL 标识中的 '#' 和 fragment 标识符(fragment 即我们通常所说的 URL hash)。

    +

    {{domxref("URL")}} 接口的 hash 属性返回一个 {{domxref("USVString")}},其中会包含 URL 标识中的 '#' 和 fragment 标识符(fragment 即我们通常所说的 URL hash)。

    -

    这里 fragment 不会经过百分比编码(URL 编码)。如果 URL 中没有 fragment,该属性会包含一个空字符串 —— "".

    +

    这里 fragment 不会经过百分比编码(URL 编码)。如果 URL 中没有 fragment,该属性会包含一个空字符串 —— "".

    {{AvailableInWorkers}}

    diff --git a/files/zh-cn/web/api/url/host/index.html b/files/zh-cn/web/api/url/host/index.html index d6655838fa42c3..e4d59894560081 100644 --- a/files/zh-cn/web/api/url/host/index.html +++ b/files/zh-cn/web/api/url/host/index.html @@ -5,7 +5,7 @@ ---
    {{ApiRef("URL API")}}
    -

    {{domxref("URL")}} 接口的 host 属性是一个 {{domxref("USVString")}} 值,包含了主机信息,也就是 主机名(hostname),还有,如果 URL 接口不为空,也会包含冒号 ':' 和 URL 的 端口(port)

    +

    {{domxref("URL")}} 接口的 host 属性是一个 {{domxref("USVString")}} 值,包含了主机信息,也就是 主机名(hostname),还有,如果 URL 接口不为空,也会包含冒号 ':' 和 URL 的 端口(port)

    {{AvailableInWorkers}}

    @@ -15,13 +15,13 @@

    语法

    object.host = string; -

     

    +

    返回值

    {{domxref("USVString")}}.

    -

     

    +

    示例

    diff --git a/files/zh-cn/web/api/url/hostname/index.html b/files/zh-cn/web/api/url/hostname/index.html index 8557b73b834e21..832c26138552a2 100644 --- a/files/zh-cn/web/api/url/hostname/index.html +++ b/files/zh-cn/web/api/url/hostname/index.html @@ -5,7 +5,7 @@ ---
    {{ApiRef("URL API")}}
    -

    {{domxref("URL")}} 接口的 hostname 属性是一个 {{domxref("USVString")}} 值,包含有 URL 中的域名。

    +

    {{domxref("URL")}} 接口的 hostname 属性是一个 {{domxref("USVString")}} 值,包含有 URL 中的域名。

    {{AvailableInWorkers}}

    diff --git a/files/zh-cn/web/api/url/href/index.html b/files/zh-cn/web/api/url/href/index.html index 9581577b7669e9..dba4d5ba9e619b 100644 --- a/files/zh-cn/web/api/url/href/index.html +++ b/files/zh-cn/web/api/url/href/index.html @@ -5,7 +5,7 @@ ---
    {{ApiRef("URL API")}}
    -

    {{domxref("URL")}} 接口的 href 属性是一个包含完整 URL 的 {{domxref("USVString")}} 值。

    +

    {{domxref("URL")}} 接口的 href 属性是一个包含完整 URL 的 {{domxref("USVString")}} 值。

    {{AvailableInWorkers}}

    diff --git a/files/zh-cn/web/api/url/index.html b/files/zh-cn/web/api/url/index.html index 1c83ee293ba313..2136e199d19a53 100644 --- a/files/zh-cn/web/api/url/index.html +++ b/files/zh-cn/web/api/url/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef("URL API")}}
    -

    URL接口用于解析,构造,规范化和编码 {{glossary("URL", "URLs")}}。 它通过提供允许您轻松阅读和修改 URL 组件的属性来工作。 通常,通过在调用 URL 的构造函数时将 URL 指定为字符串或提供相对 URL 和基本 URL 来创建新的 URL 对象。 然后,您可以轻松读取 URL 的已解析组成部分或对 URL 进行更改。

    +

    URL接口用于解析,构造,规范化和编码 {{glossary("URL", "URLs")}}。 它通过提供允许您轻松阅读和修改 URL 组件的属性来工作。 通常,通过在调用 URL 的构造函数时将 URL 指定为字符串或提供相对 URL 和基本 URL 来创建新的 URL 对象。 然后,您可以轻松读取 URL 的已解析组成部分或对 URL 进行更改。

    如果浏览器尚不支持{{domxref("URL.URL", "URL()")}}构造函数,则可以使用{{domxref("Window")}}中的{{domxref("Window.URL")}}属性。 确保检查您的任何目标浏览器是否要求对此添加前缀。

    @@ -26,22 +26,22 @@

    属性

    {{domxref("URL.host", "host")}}
    一个{{domxref("USVString")}},其中包含域(即主机名),后跟(如果指定了端口)“:”和 URL 的端口。
    {{domxref("URL.hostname", "hostname")}}
    -
    包含 URL 域名的 {{domxref("USVString")}}。
    +
    包含 URL 域名的 {{domxref("USVString")}}。
    {{domxref("URL.href", "href")}}
    -
    包含完整 URL 的 {{domxref("USVString")}}。
    +
    包含完整 URL 的 {{domxref("USVString")}}。
    {{domxref("URL.origin", "origin")}} {{readonlyInline}}
    返回一个包含协议名、域名和端口号的 {{domxref("USVString")}}。
    {{domxref("URL.password", "password")}}
    -
    包含在域名前面指定的密码的  {{domxref("USVString")}} 。
    +
    包含在域名前面指定的密码的 {{domxref("USVString")}} 。
    {{domxref("URL.pathname", "pathname")}}
    以 '/' 起头紧跟着 URL 文件路径的 {{domxref("DOMString")}}。
    {{domxref("URL.port", "port")}}
    -
    包含 URL 端口号的 {{domxref("USVString")}}。
    +
    包含 URL 端口号的 {{domxref("USVString")}}。
    {{domxref("URL.protocol", "protocol")}}
    -
    包含 URL 协议名的 {{domxref("USVString")}},末尾带 ':'。
    +
    包含 URL 协议名的 {{domxref("USVString")}},末尾带 ':'。
    {{domxref("URL.search", "search")}}
    -
    一个{{domxref("USVString")}} ,指示 URL 的参数字符串; 如果提供了任何参数,则此字符串包括所有参数,并以开头的“?”开头 字符。
    -
    {{domxref("URL.searchParams", "searchParams")}} {{readonlyInline}}
    +
    一个{{domxref("USVString")}} ,指示 URL 的参数字符串; 如果提供了任何参数,则此字符串包括所有参数,并以开头的“?”开头 字符。
    +
    {{domxref("URL.searchParams", "searchParams")}} {{readonlyInline}}
    {{domxref("URLSearchParams")}}对象,可用于访问search中找到的各个查询参数。
    {{domxref("URL.username","username")}}
    包含在域名前面指定的用户名的 {{domxref("USVString")}}。
    @@ -115,6 +115,6 @@

    相关链接

    • URL API
    • What is a URL?
    • -
    • Property to obtain a URL object: {{domxref("Window.URL")}}.
    • +
    • Property to obtain a URL object: {{domxref("Window.URL")}}.
    • {{domxref("URLSearchParams")}}.
    diff --git a/files/zh-cn/web/api/url/origin/index.html b/files/zh-cn/web/api/url/origin/index.html index ce557257cd5e55..01e832e62fc319 100644 --- a/files/zh-cn/web/api/url/origin/index.html +++ b/files/zh-cn/web/api/url/origin/index.html @@ -5,12 +5,12 @@ ---

    {{APIRef("URL API")}}

    -

    URL.origin 是一个只读属性,返回一个 {{domxref("USVString")}} 类型值,包含 URL 源经过 Unicode 序列化之后的值,也就是:

    +

    URL.origin 是一个只读属性,返回一个 {{domxref("USVString")}} 类型值,包含 URL 源经过 Unicode 序列化之后的值,也就是:

      -
    • 对于使用 http 或者 https 协议的 URL, 返回协议名,然后是 '://', 然后是域,然后是 ':', 最后是端口号 (默认端口是 80 和 443);
    • -
    • 对于使用 file: 协议的 URL,返回值因浏览器而异;
    • -
    • 对于使用 blob: 协议的 URL,返回值是 blob: 后跟随的源地址。例如 "blob:https://mozilla.org" 将会返回 "https://mozilla.org".
    • +
    • 对于使用 http 或者 https 协议的 URL, 返回协议名,然后是 '://', 然后是域,然后是 ':', 最后是端口号 (默认端口是 80443);
    • +
    • 对于使用 file: 协议的 URL,返回值因浏览器而异;
    • +
    • 对于使用 blob: 协议的 URL,返回值是 blob: 后跟随的源地址。例如 "blob:https://mozilla.org" 将会返回 "https://mozilla.org".

    {{AvailableInWorkers}}

    diff --git a/files/zh-cn/web/api/url/password/index.html b/files/zh-cn/web/api/url/password/index.html index 53c21dee0567f6..57ec37ff4565b3 100644 --- a/files/zh-cn/web/api/url/password/index.html +++ b/files/zh-cn/web/api/url/password/index.html @@ -6,7 +6,7 @@ ---
    {{ApiRef("URL API")}}
    -

     {{domxref("URL")}}接口的password属性为{{domxref("USVString")}},其中包含在域名之前指定的密码。

    +

    {{domxref("URL")}}接口的password属性为{{domxref("USVString")}},其中包含在域名之前指定的密码。

    如果在未设置username属性的情况下进行调用,默认失败。

    diff --git a/files/zh-cn/web/api/url/pathname/index.html b/files/zh-cn/web/api/url/pathname/index.html index 0516a8288927e8..839b775be779f4 100644 --- a/files/zh-cn/web/api/url/pathname/index.html +++ b/files/zh-cn/web/api/url/pathname/index.html @@ -9,7 +9,7 @@ ---
    {{ApiRef("URL API")}}
    -

    {{domxref("URL")}}接口的pathname属性是一个{{domxref("USVString")}},包含一个初始 '/' 和 URL 的路径 (如果没有路径,则为空字符串)

    +

    {{domxref("URL")}}接口的pathname属性是一个{{domxref("USVString")}},包含一个初始 '/' 和 URL 的路径 (如果没有路径,则为空字符串)

    {{AvailableInWorkers}}

    diff --git a/files/zh-cn/web/api/url/revokeobjecturl/index.html b/files/zh-cn/web/api/url/revokeobjecturl/index.html index 4619beb7e1ccef..ef7eade84748b0 100644 --- a/files/zh-cn/web/api/url/revokeobjecturl/index.html +++ b/files/zh-cn/web/api/url/revokeobjecturl/index.html @@ -10,9 +10,9 @@ ---
    {{ApiRef("URL")}}
    -

    URL.revokeObjectURL() 静态方法用来释放一个之前已经存在的、通过调用 {{domxref("URL.createObjectURL()")}} 创建的 URL 对象。当你结束使用某个 URL 对象之后,应该通过调用这个方法来让浏览器知道不用在内存中继续保留对这个文件的引用了。

    +

    URL.revokeObjectURL() 静态方法用来释放一个之前已经存在的、通过调用 {{domxref("URL.createObjectURL()")}} 创建的 URL 对象。当你结束使用某个 URL 对象之后,应该通过调用这个方法来让浏览器知道不用在内存中继续保留对这个文件的引用了。

    -

    你可以在 sourceopen 被处理之后的任何时候调用 revokeObjectURL()。这是因为 createObjectURL() 仅仅意味着将一个媒体元素的 src 属性关联到一个 {{domxref("MediaSource")}} 对象上去。调用revokeObjectURL() 使这个潜在的对象回到原来的地方,允许平台在合适的时机进行垃圾收集。

    +

    你可以在 sourceopen 被处理之后的任何时候调用 revokeObjectURL()。这是因为 createObjectURL() 仅仅意味着将一个媒体元素的 src 属性关联到一个 {{domxref("MediaSource")}} 对象上去。调用revokeObjectURL() 使这个潜在的对象回到原来的地方,允许平台在合适的时机进行垃圾收集。

    {{AvailableInWorkers}}

    @@ -25,7 +25,7 @@

    参数

    objectURL
    -
    一个 {{domxref("DOMString")}},表示通过调用 {{domxref("URL.createObjectURL()") }} 方法产生的 URL 对象。
    +
    一个 {{domxref("DOMString")}},表示通过调用 {{domxref("URL.createObjectURL()") }} 方法产生的 URL 对象。

    Return value

    diff --git a/files/zh-cn/web/api/url/search/index.html b/files/zh-cn/web/api/url/search/index.html index 5e6ef508eeea29..3b2c5088ed80df 100644 --- a/files/zh-cn/web/api/url/search/index.html +++ b/files/zh-cn/web/api/url/search/index.html @@ -11,7 +11,7 @@ ---
    {{ApiRef("URL API")}}
    -

    {{domxref("URL")}} 接口的search 属性是一个搜索字符串, 也称为查询字符串,这是一个{{domxref("USVString")}}包含一个 '?'后面跟着 URL 的参数

    +

    {{domxref("URL")}} 接口的search 属性是一个搜索字符串, 也称为查询字符串,这是一个{{domxref("USVString")}}包含一个 '?'后面跟着 URL 的参数

    现代浏览器提供{{domxref("URL.searchParams")}}属性,以便轻松解析查询字符串中的参数。

    diff --git a/files/zh-cn/web/api/url/tojson/index.html b/files/zh-cn/web/api/url/tojson/index.html index fa11f33a53f59d..ca28763ae6449a 100644 --- a/files/zh-cn/web/api/url/tojson/index.html +++ b/files/zh-cn/web/api/url/tojson/index.html @@ -7,7 +7,7 @@ ---

    {{APIRef("URL API")}}

    -

    {{domxref("URL")}}接口的 toJSON() 方法返回一个{{domxref("USVString")}},其中包含一个序列化的 URL 版本,尽管在实践中它似乎与{{domxref("URL.toString()")}}有相同的效果。

    +

    {{domxref("URL")}}接口的 toJSON() 方法返回一个{{domxref("USVString")}},其中包含一个序列化的 URL 版本,尽管在实践中它似乎与{{domxref("URL.toString()")}}有相同的效果。

    {{AvailableInWorkers}}

    diff --git a/files/zh-cn/web/api/url/username/index.html b/files/zh-cn/web/api/url/username/index.html index 5febcbc0505e1d..41c594302c35fe 100644 --- a/files/zh-cn/web/api/url/username/index.html +++ b/files/zh-cn/web/api/url/username/index.html @@ -11,7 +11,7 @@ ---
    {{ApiRef("URL API")}}
    -

     {{domxref("URL")}}接口的 username 属性是{{domxref("USVString")}} ,其中包含域名前指定的username 。

    +

    {{domxref("URL")}}接口的 username 属性是{{domxref("USVString")}} ,其中包含域名前指定的username

    {{AvailableInWorkers}}

    @@ -44,5 +44,5 @@

    浏览器兼容性

    参考

      -
    • 所属的 {{domxref("URL")}}接口。
    • +
    • 所属的 {{domxref("URL")}}接口。
    diff --git a/files/zh-cn/web/api/url_api/index.html b/files/zh-cn/web/api/url_api/index.html index 86357c0067d607..3ca50fd9fb6cb3 100644 --- a/files/zh-cn/web/api/url_api/index.html +++ b/files/zh-cn/web/api/url_api/index.html @@ -5,7 +5,7 @@ ---

    {{DefaultAPISidebar("URL API")}}

    -

    URL API 是一个 URL 标准的组件,它定义了有效的{{Glossary("URL", "Uniform Resource Locator")}}和访问、操作 URL 的 API。URL 标准还定义了像域名、主机和 IP 地址等概念,并尝试以标准的方式去描述用于以键/值对的形式提交 web 表单内容的遗留application/x-www-form-urlencoded {{Glossary("MIME type")}} 。

    +

    URL API 是一个 URL 标准的组件,它定义了有效的{{Glossary("URL", "Uniform Resource Locator")}}和访问、操作 URL 的 API。URL 标准还定义了像域名、主机和 IP 地址等概念,并尝试以标准的方式去描述用于以键/值对的形式提交 web 表单内容的遗留application/x-www-form-urlencoded {{Glossary("MIME type")}} 。

    URL 的概念和用法

    @@ -13,14 +13,14 @@

    URL 的概念和用法

    使用 URL 组件

    -

    给指定的 URL 创建一个 {{domxref("URL")}} 对象将解析 URL 并通过其属性对其组成部分的快速访问。

    +

    给指定的 URL 创建一个 {{domxref("URL")}} 对象将解析 URL 并通过其属性对其组成部分的快速访问。

    let addr = new URL("https://developer.mozilla.org/en-US/docs/Web/API/URL_API");
     let host = addr.host;
     let path = addr.pathname;
     
    -

    上面的代码片段为您正在阅读的文章创建一个URL对象,然后获取 {{domxref("URL.host", "host")}} 和 {{domxref("URL.pathname", "pathname")}} 属性。在本例中,这些字符串的值分别是developer.mozilla.org 和/en-US/docs/Web/API/URL_API

    +

    上面的代码片段为您正在阅读的文章创建一个URL对象,然后获取 {{domxref("URL.host", "host")}} 和 {{domxref("URL.pathname", "pathname")}} 属性。在本例中,这些字符串的值分别是developer.mozilla.org/en-US/docs/Web/API/URL_API

    修改 URL

    @@ -31,11 +31,11 @@

    修改 URL

    addr.username = myUsername; -

    设置 {{domxref("URL.username", "username")}} 值不仅是设置该属性的值,而且更新整个 URL。执行上面的代码片段后, {{domxref("URL.href", "addr.href")}} 的返回值是https://someguy@mysite.com/login。对于任何可写属性都是如此。

    +

    设置 {{domxref("URL.username", "username")}} 值不仅是设置该属性的值,而且更新整个 URL。执行上面的代码片段后, {{domxref("URL.href", "addr.href")}} 的返回值是https://someguy@mysite.com/login。对于任何可写属性都是如此。

    查询

    -

     {{domxref("URL.search", "search")}} 属性在 URL 上包含 URL 的查询字符串部分。例如,如果 URL 是https://mysite.com/login?user=someguy&page=news,那么search 属性的值是?user=someguy&page=news。您还可以使用 {{domxref("URLSearchParams")}} 对象的 {{domxref("URLSearchParams.get", "get()")}} 查找单个参数的值:

    +

    {{domxref("URL.search", "search")}} 属性在 URL 上包含 URL 的查询字符串部分。例如,如果 URL 是https://mysite.com/login?user=someguy&page=news,那么search 属性的值是?user=someguy&page=news。您还可以使用 {{domxref("URLSearchParams")}} 对象的 {{domxref("URLSearchParams.get", "get()")}} 查找单个参数的值:

    let addr = new URL("https://mysite.com/login?user=someguy&page=news");
     try {
    @@ -66,9 +66,9 @@ 

    URL API 接口

    例子

    -

    如果希望处理 URL 中包含的参数,可以手动进行处理,但是创建一个 URL 对象更容易。下面的fillTableWithParameters()函数接受一个表示{{HTMLElement("table")}}的   {{domxref("HTMLTableElement")}} 对象作为输入。将行添加到表中,每个行对应参数中找到的键,第一列包含键,第二列包含值。

    +

    如果希望处理 URL 中包含的参数,可以手动进行处理,但是创建一个 URL 对象更容易。下面的fillTableWithParameters()函数接受一个表示{{HTMLElement("table")}}的 {{domxref("HTMLTableElement")}} 对象作为输入。将行添加到表中,每个行对应参数中找到的键,第一列包含键,第二列包含值。

    -

    注意,在生成表之前调用  {{domxref("URLSearchParams.sort()")}} 对参数列表进行排序。

    +

    注意,在生成表之前调用 {{domxref("URLSearchParams.sort()")}} 对参数列表进行排序。

    function fillTableWithParameters(tbl) {
       let url = new URL(document.location.href);
    @@ -88,7 +88,7 @@ 

    例子

    }; }
    -

    在 found on Glitch上可以找到这个例子的工作版本。只要在加载页面时向 URL 添加参数,就可以在表中看到它们。例如,试试https://url-api.glitch.me?from=mdn&excitement=high&likelihood=inconceivable

    +

    found on Glitch上可以找到这个例子的工作版本。只要在加载页面时向 URL 添加参数,就可以在表中看到它们。例如,试试https://url-api.glitch.me?from=mdn&excitement=high&likelihood=inconceivable

    规范

    diff --git a/files/zh-cn/web/api/urlsearchparams/append/index.html b/files/zh-cn/web/api/urlsearchparams/append/index.html index ca45070b0e372e..305acc2548fc95 100644 --- a/files/zh-cn/web/api/urlsearchparams/append/index.html +++ b/files/zh-cn/web/api/urlsearchparams/append/index.html @@ -3,7 +3,7 @@ slug: Web/API/URLSearchParams/append translation_of: Web/API/URLSearchParams/append --- -

    {{ApiRef("URL API")}}{{SeeCompatTable}} 

    +

    {{ApiRef("URL API")}}{{SeeCompatTable}}

    append() 是 {{domxref("URLSearchParams")}} 接口的一个方法。可以插入一个新搜索参数。

    @@ -16,7 +16,7 @@

    参数

    name
    需要插入搜索参数的键名。
    -
    value 
    +
    value
    需要插入搜索参数的值。
    diff --git a/files/zh-cn/web/api/urlsearchparams/delete/index.html b/files/zh-cn/web/api/urlsearchparams/delete/index.html index a08ef938123cc4..c43a117e0897e3 100644 --- a/files/zh-cn/web/api/urlsearchparams/delete/index.html +++ b/files/zh-cn/web/api/urlsearchparams/delete/index.html @@ -3,7 +3,7 @@ slug: Web/API/URLSearchParams/delete translation_of: Web/API/URLSearchParams/delete --- -

    {{ApiRef("URL API")}}{{SeeCompatTable}} 

    +

    {{ApiRef("URL API")}}{{SeeCompatTable}}

    delete() 是 {{domxref("URLSearchParams")}} 接口的一个方法。可以删除指定名称的所有搜索参数。

    diff --git a/files/zh-cn/web/api/urlsearchparams/entries/index.html b/files/zh-cn/web/api/urlsearchparams/entries/index.html index 0b635a0910ca8c..54a0391e57a24b 100644 --- a/files/zh-cn/web/api/urlsearchparams/entries/index.html +++ b/files/zh-cn/web/api/urlsearchparams/entries/index.html @@ -12,10 +12,10 @@ ---

    {{APIRef("URL API")}}{{SeeCompatTable}}

    -

    URLSearchParams.entries()方法返回一个{{jsxref("Iteration_protocols",'iterator')}},允许遍历该对象中包含的所有键/值对。每一组键值对都是 {{domxref("USVString")}}对象

    +

    URLSearchParams.entries()方法返回一个{{jsxref("Iteration_protocols",'iterator')}},允许遍历该对象中包含的所有键/值对。每一组键值对都是 {{domxref("USVString")}}对象

    -

    注意: 该方法在 Web Workers也是可用的。

    +

    注意: 该方法在 Web Workers也是可用的。

    语法

    diff --git a/files/zh-cn/web/api/urlsearchparams/foreach/index.html b/files/zh-cn/web/api/urlsearchparams/foreach/index.html index 8c897dcca78d71..e3cc9ad36d6059 100644 --- a/files/zh-cn/web/api/urlsearchparams/foreach/index.html +++ b/files/zh-cn/web/api/urlsearchparams/foreach/index.html @@ -19,18 +19,18 @@

    参数

    回调函数
    -
        该回调函数可以接收到 3 个参数 value,key,searchParams,我们可以在回调函数中对接收到的参数进行处理。而三个参数的含义如下:
    -
        1.  value
    -
         当前遍历到的键值
    -
        2.  key
    -
         当前遍历到的键名
    -
        3.  searchParams
    -
         当前调用 forEach 方法的实例对象
    +
    该回调函数可以接收到 3 个参数 value,key,searchParams,我们可以在回调函数中对接收到的参数进行处理。而三个参数的含义如下:
    +
    1. value
    +
    当前遍历到的键值
    +
    2. key
    +
    当前遍历到的键名
    +
    3. searchParams
    +
    当前调用 forEach 方法的实例对象

    返回值

    -

        空

    +

    例子

    diff --git a/files/zh-cn/web/api/urlsearchparams/get/index.html b/files/zh-cn/web/api/urlsearchparams/get/index.html index 2442c88ffee62c..6778ecbb717655 100644 --- a/files/zh-cn/web/api/urlsearchparams/get/index.html +++ b/files/zh-cn/web/api/urlsearchparams/get/index.html @@ -20,18 +20,18 @@

    参数

    返回值

    -

    返回一个 {{domxref("USVString")}} ;如果没找到,返回 null.

    +

    返回一个 {{domxref("USVString")}} ;如果没找到,返回 null.

    示例

    -

    如果一个页面的 URL 是 https://example.com/?name=Jonathan&age=18 ,你可以这样解析参数“name”和“age”:

    +

    如果一个页面的 URL 是 https://example.com/?name=Jonathan&age=18 ,你可以这样解析参数“name”和“age”:

    let params = new URLSearchParams(document.location.search.substring(1));
     let name = params.get("name"); // is the string "Jonathan"
     let age = parseInt(params.get("age"), 10); // is the number 18
     
    -

    查找一个不存在的键名则返回 null:

    +

    查找一个不存在的键名则返回 null:

    let address = params.get("address"); // null
    diff --git a/files/zh-cn/web/api/urlsearchparams/getall/index.html b/files/zh-cn/web/api/urlsearchparams/getall/index.html index fdaa6bfd5f60a0..564729f42a9bb1 100644 --- a/files/zh-cn/web/api/urlsearchparams/getall/index.html +++ b/files/zh-cn/web/api/urlsearchparams/getall/index.html @@ -10,7 +10,7 @@ - getAll translation_of: Web/API/URLSearchParams/getAll --- -

    {{ApiRef("URL API")}}{{SeeCompatTable}} 

    +

    {{ApiRef("URL API")}}{{SeeCompatTable}}

    {{domxref("URLSearchParams")}}接口的 getAll() 方法,以数组的形式返回与指定搜索参数对应的所有值。

    diff --git a/files/zh-cn/web/api/urlsearchparams/has/index.html b/files/zh-cn/web/api/urlsearchparams/has/index.html index 4cd238c9a95ca4..01acadab2d62ca 100644 --- a/files/zh-cn/web/api/urlsearchparams/has/index.html +++ b/files/zh-cn/web/api/urlsearchparams/has/index.html @@ -3,7 +3,7 @@ slug: Web/API/URLSearchParams/has translation_of: Web/API/URLSearchParams/has --- -

    {{ApiRef("URL API")}}{{SeeCompatTable}} 

    +

    {{ApiRef("URL API")}}{{SeeCompatTable}}

    {{domxref("URLSearchParams")}} 的has() 方法返回一个 {{jsxref("Boolean")}} 表示一个指定的键名对应的值是否存在。

    diff --git a/files/zh-cn/web/api/urlsearchparams/index.html b/files/zh-cn/web/api/urlsearchparams/index.html index 939ffb79e115bc..a7453b0dee8c80 100644 --- a/files/zh-cn/web/api/urlsearchparams/index.html +++ b/files/zh-cn/web/api/urlsearchparams/index.html @@ -8,9 +8,9 @@ ---

    {{ApiRef("URL API")}}

    -

    URLSearchParams 接口定义了一些实用的方法来处理 URL 的查询字符串。

    +

    URLSearchParams 接口定义了一些实用的方法来处理 URL 的查询字符串。

    -

    一个实现了 URLSearchParams 的对象可以直接用在 {{jsxref("Statements/for...of", "for...of")}} 结构中,例如下面两行是相等的:

    +

    一个实现了 URLSearchParams 的对象可以直接用在 {{jsxref("Statements/for...of", "for...of")}} 结构中,例如下面两行是相等的:

    for (const [key, value] of mySearchParams) {}
     for (const [key, value] of mySearchParams.entries()) {}
    @@ -21,7 +21,7 @@

    构造函数

    {{domxref("URLSearchParams.URLSearchParams", 'URLSearchParams()')}}
    -
    返回一个 URLSearchParams 对象。
    +
    返回一个 URLSearchParams 对象。

    方法

    @@ -30,27 +30,27 @@

    方法

    {{domxref("URLSearchParams.append()")}}
    -
     插入一个指定的键/值对作为新的搜索参数。
    +
    插入一个指定的键/值对作为新的搜索参数。
    {{domxref("URLSearchParams.delete()")}}
    -
     从搜索参数列表里删除指定的搜索参数及其对应的值。
    +
    从搜索参数列表里删除指定的搜索参数及其对应的值。
    {{domxref("URLSearchParams.entries()")}}
    -
     返回一个{{jsxref("Iteration_protocols","iterator")}}可以遍历所有键/值对的对象。
    +
    返回一个{{jsxref("Iteration_protocols","iterator")}}可以遍历所有键/值对的对象。
    {{domxref("URLSearchParams.get()")}}
    -
     获取指定搜索参数的第一个值。
    +
    获取指定搜索参数的第一个值。
    {{domxref("URLSearchParams.getAll()")}}
    -
     获取指定搜索参数的所有值,返回是一个数组。
    +
    获取指定搜索参数的所有值,返回是一个数组。
    {{domxref("URLSearchParams.has()")}}
    -
     返回 {{jsxref("Boolean")}} 判断是否存在此搜索参数。
    +
    返回 {{jsxref("Boolean")}} 判断是否存在此搜索参数。
    {{domxref("URLSearchParams.keys()")}}
    返回{{jsxref("Iteration_protocols", "iterator")}} 此对象包含了键/值对的所有键名。
    {{domxref("URLSearchParams.set()")}}
    -
     设置一个搜索参数的新值,假如原来有多个值将删除其他所有的值。
    +
    设置一个搜索参数的新值,假如原来有多个值将删除其他所有的值。
    {{domxref("URLSearchParams.sort()")}}
    -
     按键名排序。
    +
    按键名排序。
    {{domxref("URLSearchParams.toString()")}}
    -
     返回搜索参数组成的字符串,可直接使用在 URL 上。
    +
    返回搜索参数组成的字符串,可直接使用在 URL 上。
    {{domxref("URLSearchParams.values()")}}
    -
     返回{{jsxref("Iteration_protocols", "iterator")}} 此对象包含了键/值对的所有值。
    +
    返回{{jsxref("Iteration_protocols", "iterator")}} 此对象包含了键/值对的所有值。

    示例

    @@ -75,7 +75,7 @@

    示例

    Gotchas

    -

    URLSearchParams 构造函数不会解析完整 URL,但是如果字符串起始位置有 ? 的话会被去除。

    +

    URLSearchParams 构造函数不会解析完整 URL,但是如果字符串起始位置有 ? 的话会被去除。

    var paramsString1 = "http://example.com/search?query=%40";
     var searchParams1 = new URLSearchParams(paramsString1);
    diff --git a/files/zh-cn/web/api/urlsearchparams/keys/index.html b/files/zh-cn/web/api/urlsearchparams/keys/index.html
    index 2b58c21da2f2b4..85d5a9a2486564 100644
    --- a/files/zh-cn/web/api/urlsearchparams/keys/index.html
    +++ b/files/zh-cn/web/api/urlsearchparams/keys/index.html
    @@ -15,7 +15,7 @@
     

    URLSearchParams.keys() 返回一个{{jsxref("Iteration_protocols",'iterator')}},遍历器允许遍历对象中包含的所有键。这些键都是{{domxref("USVString")}}对象。

    -

    注意: 该方法在 Web Workers中也可使用

    +

    注意: 该方法在 Web Workers中也可使用

    语法

    diff --git a/files/zh-cn/web/api/urlsearchparams/set/index.html b/files/zh-cn/web/api/urlsearchparams/set/index.html index 95b1d8eabbe371..305f629dfbca32 100644 --- a/files/zh-cn/web/api/urlsearchparams/set/index.html +++ b/files/zh-cn/web/api/urlsearchparams/set/index.html @@ -3,7 +3,7 @@ slug: Web/API/URLSearchParams/set translation_of: Web/API/URLSearchParams/set --- -

    {{ApiRef("URL API")}}{{SeeCompatTable}} 

    +

    {{ApiRef("URL API")}}{{SeeCompatTable}}

    {{domxref("URLSearchParams")}}接口的 set() 方法用于设置和搜索参数相关联的值。如果设置前已经存在匹配的值,该方法会删除多余的,如果将要设置的值不存在,则创建它

    diff --git a/files/zh-cn/web/api/urlsearchparams/tostring/index.html b/files/zh-cn/web/api/urlsearchparams/tostring/index.html index 0fd879229d14cc..82d07476c96b61 100644 --- a/files/zh-cn/web/api/urlsearchparams/tostring/index.html +++ b/files/zh-cn/web/api/urlsearchparams/tostring/index.html @@ -3,7 +3,7 @@ slug: Web/API/URLSearchParams/toString translation_of: Web/API/URLSearchParams/toString --- -

    {{ApiRef("URL API")}}{{SeeCompatTable}} 

    +

    {{ApiRef("URL API")}}{{SeeCompatTable}}

    {{domxref("URLSearchParams")}} 接口的 toString() 方法 返回适用在 URL 中的查询字符串。

    diff --git a/files/zh-cn/web/api/urlsearchparams/urlsearchparams/index.html b/files/zh-cn/web/api/urlsearchparams/urlsearchparams/index.html index 564e8c40eed6aa..b08cafffc180aa 100644 --- a/files/zh-cn/web/api/urlsearchparams/urlsearchparams/index.html +++ b/files/zh-cn/web/api/urlsearchparams/urlsearchparams/index.html @@ -5,7 +5,7 @@ ---

    {{ApiRef("URL API")}}{{SeeCompatTable}}

    -

    URLSearchParams() 构造器创建并返回一个新的{{domxref("URLSearchParams")}} 对象。 开头的'?' 字符会被忽略。

    +

    URLSearchParams() 构造器创建并返回一个新的{{domxref("URLSearchParams")}} 对象。 开头的'?' 字符会被忽略。

    语法

    @@ -15,7 +15,7 @@

    参数

    init {{optional_inline}}
    -
    一个 {{domxref("USVString")}} 实例,一个 {{domxref("URLSearchParams")}} 实例,一个 {{domxref("USVString")}},或者一个包含 {{domxref("USVString")}} 的记录。注意使用一个 URLSearchParams 实例作为参数已经被弃用了,以后的浏览器将会只使用一个 USVString 作为参数。
    +
    一个 {{domxref("USVString")}} 实例,一个 {{domxref("URLSearchParams")}} 实例,一个 {{domxref("USVString")}},或者一个包含 {{domxref("USVString")}} 的记录。注意使用一个 URLSearchParams 实例作为参数已经被弃用了,以后的浏览器将会只使用一个 USVString 作为参数。

    返回值

    @@ -24,7 +24,7 @@

    返回值

    例子

    -

    下面的例子展示了用一个 URL 字符串创建一个 {{domxref("URLSearchParams")}} 对象。

    +

    下面的例子展示了用一个 URL 字符串创建一个 {{domxref("URLSearchParams")}} 对象。

    // Pass in a string literal
     var url = new URL('https://example.com?foo=1&bar=2');
    diff --git a/files/zh-cn/web/api/usb/index.html b/files/zh-cn/web/api/usb/index.html
    index 25474eee3234b9..de05cce77f19f3 100644
    --- a/files/zh-cn/web/api/usb/index.html
    +++ b/files/zh-cn/web/api/usb/index.html
    @@ -5,7 +5,7 @@
     ---
     

    {{SeeCompatTable}}{{APIRef("WebUSB API")}}

    -

    WebUSB API 接口提供了从网页查找和连接 USB 设备的属性和方法

    +

    WebUSB API 接口提供了从网页查找和连接 USB 设备的属性和方法

    属性

    @@ -24,7 +24,7 @@

    方法

    {{domxref("USB.getDevices()")}}
    -
    Returns a {{jsxref("Promise")}} that resolves with an array of {{domxref("USBDevice")}} objects for paired attached devices.
    +
    Returns a {{jsxref("Promise")}} that resolves with an array of {{domxref("USBDevice")}} objects for paired attached devices.
    {{domxref("USB.requestDevice()")}}
    Returns a {{jsxref("Promise")}} that resolves with an instance of {{domxref("USBDevice")}} if the specified device is found. Calling this function triggers the user agent's pairing flow.
    diff --git a/files/zh-cn/web/api/user_timing_api/index.html b/files/zh-cn/web/api/user_timing_api/index.html index 393c1a9b11a232..05b8142ad50696 100644 --- a/files/zh-cn/web/api/user_timing_api/index.html +++ b/files/zh-cn/web/api/user_timing_api/index.html @@ -9,7 +9,7 @@

    mark事件可以指定任意的名字并且可以在放在应用的任何位置,measure事件也可以指定为任意的名字,但是需要放在两个 mark 之间,所以它实际上是两个 mark 的中间点。

    -

    此文档提供了对mark 和measure{{domxref("PerformanceEntry.entryType","性能事件类型")}}的概览,包括四个拓展了{{domxref("Performance")}}接口的User Timing方法。 想要了解这两种性能事件类型和相关方法的更多详细内容和示例代码,请查阅使用自定义时间测量 API

    +

    此文档提供了对mark 和measure{{domxref("PerformanceEntry.entryType","性能事件类型")}}的概览,包括四个拓展了{{domxref("Performance")}}接口的User Timing方法。 想要了解这两种性能事件类型和相关方法的更多详细内容和示例代码,请查阅使用自定义时间测量 API

    性能标记

    @@ -58,7 +58,7 @@

    创建一个性能测量

    • {{domxref("PerformanceEntry.entryType","entryType")}} - 设置为"measure".
    • {{domxref("PerformanceEntry.name","name")}} - 设置为测量被创建时"name"参数给定的值
    • -
    • {{domxref("PerformanceEntry.startTime","startTime")}} - 设置为measure()被调用时的 {{domxref("DOMHighResTimeStamp","时间戳")}}。
    • +
    • {{domxref("PerformanceEntry.startTime","startTime")}} - 设置为measure()被调用时的 {{domxref("DOMHighResTimeStamp","时间戳")}}。
    • {{domxref("PerformanceEntry.duration","duration")}} - 设置为该测量间隔{{domxref("DOMHighResTimeStamp")}}(即结束标记时间戳减去开始标记时间戳的差值)。
    @@ -81,7 +81,7 @@

    移除性能测量

    互操作性

    -

    如{{domxref("Performance")}}接口的浏览器兼容性表所示,User Timing 方法被大多数桌面和移动浏览器(唯一的例外是桌面 Safari 和移动版 Safari,Safari Technology Preview 24 已经支持该方法)。

    +

    如{{domxref("Performance")}}接口的浏览器兼容性表所示,User Timing 方法被大多数桌面和移动浏览器(唯一的例外是桌面 Safari 和移动版 Safari,Safari Technology Preview 24 已经支持该方法)。

    想要测试你的浏览器是否支持该 API,运行perf-api-support程序。

    diff --git a/files/zh-cn/web/api/validitystate/index.html b/files/zh-cn/web/api/validitystate/index.html index 7a3f7c48c60dbe..f34583938f1f97 100644 --- a/files/zh-cn/web/api/validitystate/index.html +++ b/files/zh-cn/web/api/validitystate/index.html @@ -15,34 +15,34 @@

    属性

    -

    对于以下每一个布尔值属性来说,值为 true 表示这就是验证失败的特定原因之一;valid 属性是例外,它为 true 表示元素值满足所有的约束条件。

    +

    对于以下每一个布尔值属性来说,值为 true 表示这就是验证失败的特定原因之一;valid 属性是例外,它为 true 表示元素值满足所有的约束条件。

    {{domxref("ValidityState.badInput", "badInput")}} {{ReadOnlyInline}}
    -
    一个 {{jsxref("Boolean")}},true 表示用户提供了浏览器不能转换的输入。
    +
    一个 {{jsxref("Boolean")}},true 表示用户提供了浏览器不能转换的输入。
    customError {{ReadOnlyInline}}
    -
    一个 {{jsxref("Boolean")}},表示这个元素的自定义验证信息是否已通过调用元素的 {{domxref('HTMLObjectElement.setCustomValidity', 'setCustomValidity()')}} 方法设置为一个非空字符串。
    +
    一个 {{jsxref("Boolean")}},表示这个元素的自定义验证信息是否已通过调用元素的 {{domxref('HTMLObjectElement.setCustomValidity', 'setCustomValidity()')}} 方法设置为一个非空字符串。
    {{domxref("ValidityState.patternMismatch", "patternMismatch")}} {{ReadOnlyInline}}
    -
    一个 {{jsxref("Boolean")}},true 表示元素值不匹配规定的{{htmlattrxref("pattern", "input")}},false 则表示匹配。true 的时候元素可用 CSS 伪类 {{cssxref(":invalid")}} 匹配。
    +
    一个 {{jsxref("Boolean")}},true 表示元素值不匹配规定的{{htmlattrxref("pattern", "input")}},false 则表示匹配。true 的时候元素可用 CSS 伪类 {{cssxref(":invalid")}} 匹配。
    {{domxref("ValidityState.rangeOverflow", "rangeOverflow")}} {{ReadOnlyInline}}
    -
    一个 {{jsxref("Boolean")}},true 表示值已超过 {{htmlattrxref("max", "input")}} 属性规定的最大值,false 则表示小于或等于这个最大值。true 的时候元素可用 CSS 伪类 {{cssxref(":invalid")}} 和 {{cssxref(":out-of-range")}} 匹配。
    +
    一个 {{jsxref("Boolean")}},true 表示值已超过 {{htmlattrxref("max", "input")}} 属性规定的最大值,false 则表示小于或等于这个最大值。true 的时候元素可用 CSS 伪类 {{cssxref(":invalid")}} 和 {{cssxref(":out-of-range")}} 匹配。
    {{domxref("ValidityState.rangeUnderflow", "rangeUnderflow")}} {{ReadOnlyInline}}
    -
    一个 {{jsxref("Boolean")}},true 表示值小于 {{htmlattrxref("min", "input")}} 属性规定的最小值,false 则表示大于或等于这个最小值。true 的时候元素可用 CSS 伪类 {{cssxref(":invalid")}} 和 {{cssxref(":out-of-range")}} 匹配。
    +
    一个 {{jsxref("Boolean")}},true 表示值小于 {{htmlattrxref("min", "input")}} 属性规定的最小值,false 则表示大于或等于这个最小值。true 的时候元素可用 CSS 伪类 {{cssxref(":invalid")}} 和 {{cssxref(":out-of-range")}} 匹配。
    {{domxref("ValidityState.stepMismatch", "stepMismatch")}} {{ReadOnlyInline}}
    -
    一个 {{jsxref("Boolean")}},true 表示值不符合由 {{htmlattrxref("step", "input")}} 属性规定的规则(即该值不能被步长值除尽,译注:假设最小值是 0)。false 表示其符合步长值规则。true 的时候元素可用 CSS 伪类 {{cssxref(":invalid")}} 和 {{cssxref(":out-of-range")}} 匹配。
    +
    一个 {{jsxref("Boolean")}},true 表示值不符合由 {{htmlattrxref("step", "input")}} 属性规定的规则(即该值不能被步长值除尽,译注:假设最小值是 0)。false 表示其符合步长值规则。true 的时候元素可用 CSS 伪类 {{cssxref(":invalid")}} 和 {{cssxref(":out-of-range")}} 匹配。
    {{domxref("ValidityState.tooLong", "tooLong")}} {{ReadOnlyInline}}
    -
    一个 {{jsxref("Boolean")}},true 表示值超过了{{domxref("HTMLInputElement")}} 或 {{domxref("HTMLTextAreaElement")}} 对象中规定的 maxlengthfalse 表示值的长度小于或等于最大长度。注意:This 这个属性在 Gecko 中永远不会是 true,因为元素值不允许比 maxlength 长。true 的时候元素可用 CSS 伪类 {{cssxref(":invalid")}} 和 {{cssxref(":out-of-range")}} 匹配。
    +
    一个 {{jsxref("Boolean")}},true 表示值超过了{{domxref("HTMLInputElement")}} 或 {{domxref("HTMLTextAreaElement")}} 对象中规定的 maxlengthfalse 表示值的长度小于或等于最大长度。注意:This 这个属性在 Gecko 中永远不会是 true,因为元素值不允许比 maxlength 长。true 的时候元素可用 CSS 伪类 {{cssxref(":invalid")}} 和 {{cssxref(":out-of-range")}} 匹配。
    {{domxref("ValidityState.tooShort", "tooShort")}} {{ReadOnlyInline}}
    -
    一个 {{jsxref("Boolean")}},true 表示值的长度小于 {{domxref("HTMLInputElement")}} 或 {{domxref("HTMLTextAreaElement")}} 对象中规定的 minlengthfalse 表示值的长度大于或等于最大长度。true 的时候元素可用 CSS 伪类 {{cssxref(":invalid")}} 和 {{cssxref(":out-of-range")}} 匹配。
    +
    一个 {{jsxref("Boolean")}},true 表示值的长度小于 {{domxref("HTMLInputElement")}} 或 {{domxref("HTMLTextAreaElement")}} 对象中规定的 minlengthfalse 表示值的长度大于或等于最大长度。true 的时候元素可用 CSS 伪类 {{cssxref(":invalid")}} 和 {{cssxref(":out-of-range")}} 匹配。
    {{domxref("ValidityState.typeMismatch", "typeMismatch")}} {{ReadOnlyInline}}
    -
    一个 {{jsxref("Boolean")}},true 表示元素值不满足所需的格式(可见于 {{htmlattrxref("type", "input")}} 是 email 或 url 时),false 表示格式正确。true 的时候元素可用 CSS 伪类 {{cssxref(":invalid")}} 匹配。
    +
    一个 {{jsxref("Boolean")}},true 表示元素值不满足所需的格式(可见于 {{htmlattrxref("type", "input")}} 是 emailurl 时),false 表示格式正确。true 的时候元素可用 CSS 伪类 {{cssxref(":invalid")}} 匹配。
    valid {{ReadOnlyInline}}
    -
    一个 {{jsxref("Boolean")}},true 表示元素满足所有的验证约束,因此被认为时有效的,false 表示有任一约束不满足。true 的时候元素可用 CSS 伪类 {{cssxref(":valid")}} 匹配,否则可用 CSS 伪类 {{cssxref(":invalid")}} 匹配。
    +
    一个 {{jsxref("Boolean")}},true 表示元素满足所有的验证约束,因此被认为时有效的,false 表示有任一约束不满足。true 的时候元素可用 CSS 伪类 {{cssxref(":valid")}} 匹配,否则可用 CSS 伪类 {{cssxref(":invalid")}} 匹配。
    {{domxref("ValidityState.valueMissing", "valueMissing")}} {{ReadOnlyInline}}
    -
    一个 {{jsxref("Boolean")}}, true 表示元素拥有 {{htmlattrxref("required", "input")}} 属性,但没有值,否则为 falsetrue 的时候元素可用 CSS 伪类 {{cssxref(":invalid")}} 匹配。
    +
    一个 {{jsxref("Boolean")}}, true 表示元素拥有 {{htmlattrxref("required", "input")}} 属性,但没有值,否则为 falsetrue 的时候元素可用 CSS 伪类 {{cssxref(":invalid")}} 匹配。

    规范

    diff --git a/files/zh-cn/web/api/vibration_api/index.html b/files/zh-cn/web/api/vibration_api/index.html index 5a461dafa1eff5..ed6c14e4e8fe9a 100644 --- a/files/zh-cn/web/api/vibration_api/index.html +++ b/files/zh-cn/web/api/vibration_api/index.html @@ -11,7 +11,7 @@

    振动描述

    -

    振动被抽象成【开 - 关】脉冲的模式,且可以具有变化的长度。?参数可以是单个整数,表示持续振动的毫秒数 (ms);或可由多个整数组成的数组,达到振动和暂停循环的效果。只要单一 window.navigator.vibrate() 函式即可控制振动。

    +

    振动被抽象成【开 - 关】脉冲的模式,且可以具有变化的长度。?参数可以是单个整数,表示持续振动的毫秒数 (ms);或可由多个整数组成的数组,达到振动和暂停循环的效果。只要单一 window.navigator.vibrate() 函式即可控制振动。

    一个单次振动

    @@ -36,7 +36,7 @@

    振动模式

    停止振动

    -

    当调用 window.navigator.vibrate() 的参数为「0」、空白?数组,或?数组全为「0」时,即可取消目前?进行中的振动。

    +

    当调用 window.navigator.vibrate() 的参数为「0」、空白?数组,或?数组全为「0」时,即可取消目前?进行中的振动。

    持续振动

    diff --git a/files/zh-cn/web/api/videoplaybackquality/index.html b/files/zh-cn/web/api/videoplaybackquality/index.html index 70277d4ca70e7d..b56b5ba846b3c7 100644 --- a/files/zh-cn/web/api/videoplaybackquality/index.html +++ b/files/zh-cn/web/api/videoplaybackquality/index.html @@ -17,13 +17,13 @@

    属性

    {{domxref("VideoPlaybackQuality.creationTime")}} {{readonlyInline}}
    一个用毫秒表示从开始页面浏览到对象创建的 {{domxref("DOMHighResTimeStamp")}} 对象。
    {{domxref("VideoPlaybackQuality.totalVideoFrames")}} {{readonlyInline}}
    -
    一个表示相关联的 {{domxref("HTMLVideoElement")}} 自从创建起的已创建和丢弃帧数数量总和的 unsigned long 值。.
    +
    一个表示相关联的 {{domxref("HTMLVideoElement")}} 自从创建起的已创建和丢弃帧数数量总和的 unsigned long 值。.
    {{domxref("VideoPlaybackQuality.droppedVideoFrames")}} {{readonlyInline}}
    -
    一个表示相关联的 {{domxref("HTMLVideoElement")}} 自从创建起的已丢弃帧数数量的 unsigned long 值。
    +
    一个表示相关联的 {{domxref("HTMLVideoElement")}} 自从创建起的已丢弃帧数数量的 unsigned long 值。
    {{domxref("VideoPlaybackQuality.corruptedVideoFrames")}} {{readonlyInline}}
    -
    一个表示相关联的 {{domxref("HTMLVideoElement")}} 自从创建起的损坏帧数数量的 unsigned long 值。一个损坏帧可能属于创建帧或丢弃帧。
    +
    一个表示相关联的 {{domxref("HTMLVideoElement")}} 自从创建起的损坏帧数数量的 unsigned long 值。一个损坏帧可能属于创建帧或丢弃帧。
    {{domxref("VideoPlaybackQuality.totalFrameDelay")}} {{readonlyInline}} {{Deprecated_Inline}}
    -
    一个表示相关联的 {{domxref("HTMLVideoElement")}} 自从创建起的帧延迟总和的 double 值。帧延迟是指一个帧的理论展示时间与实际显示时间的差值。
    +
    一个表示相关联的 {{domxref("HTMLVideoElement")}} 自从创建起的帧延迟总和的 double 值。帧延迟是指一个帧的理论展示时间与实际显示时间的差值。

    方法

    diff --git a/files/zh-cn/web/api/videotracklist/index.html b/files/zh-cn/web/api/videotracklist/index.html index cf953144512dd5..ec50c7a3233cfc 100644 --- a/files/zh-cn/web/api/videotracklist/index.html +++ b/files/zh-cn/web/api/videotracklist/index.html @@ -39,7 +39,7 @@

    Event handlers

    {{domxref("VideoTrackList.onaddtrack", "onaddtrack")}}
    An event handler to be called when the {{event("addtrack")}} event is fired, indicating that a new video track has been added to the media element.
    {{domxref("VideoTrackList.onchange", "onchange")}}
    -
    An event handler to be called when the {{event("change")}} event occurs — that is, when the value of the {{domxref("VideoTrack.selected", "selected")}} property for a track has changed, due to the track being made active or inactive.
    +
    An event handler to be called when the {{event("change")}} event occurs — that is, when the value of the {{domxref("VideoTrack.selected", "selected")}} property for a track has changed, due to the track being made active or inactive.
    {{domxref("VideoTrackList.onremovetrack", "onremovetrack")}}
    An event handler to call when the {{event("removetrack")}} event is sent, indicating that a video track has been removed from the media element.
    diff --git a/files/zh-cn/web/api/visualviewport/index.html b/files/zh-cn/web/api/visualviewport/index.html index f08755e597207a..60603dcfedd4bb 100644 --- a/files/zh-cn/web/api/visualviewport/index.html +++ b/files/zh-cn/web/api/visualviewport/index.html @@ -15,17 +15,17 @@ ---

    {{SeeCompatTable}}{{APIRef("Visual Viewport")}}

    -

     Visual Viewport API 提供了当前页面的视觉视口接口,即 VisualViewport 。对于每个页面容器来说(如 iframe),都存在有一个独立的 window 对象。每个页面容器的 window 对象都有一个独立的 VisualViewport 属性。

    +

    Visual Viewport API 提供了当前页面的视觉视口接口,即 VisualViewport 。对于每个页面容器来说(如 iframe),都存在有一个独立的 window 对象。每个页面容器的 window 对象都有一个独立的 VisualViewport 属性。

    你可以使用 {{domxref("Window.visualViewport")}} 获得对应 window 的视觉视口 API。

    -

    注意:与布局视口(layout viewport)不同的是:只有最上层的 window 才有视觉视口(visual viewport)这一概念。因此只有最上层 window 的 VisualViewport 属性才是有效的,其他层的视觉视口属性可看作是布局视口属性的别名。比如,对于一个 {{htmlelement("iframe")}} ,其对应的视觉视口属性 {{domxref("VisualViewport.width")}} 相当于对应的布局视口属性,如 {{domxref("Element.clientWidth", "document.documentElement.clientWidth")}}.

    +

    注意:与布局视口(layout viewport)不同的是:只有最上层的 window 才有视觉视口(visual viewport)这一概念。因此只有最上层 window 的 VisualViewport 属性才是有效的,其他层的视觉视口属性可看作是布局视口属性的别名。比如,对于一个 {{htmlelement("iframe")}} ,其对应的视觉视口属性 {{domxref("VisualViewport.width")}} 相当于对应的布局视口属性,如 {{domxref("Element.clientWidth", "document.documentElement.clientWidth")}}.

    属性

    -

    VisualViewport 从其父元素继承属性 {{domxref("EventTarget")}}

    +

    VisualViewport 从其父元素继承属性 {{domxref("EventTarget")}}

    {{domxref("VisualViewport.offsetLeft")}} {{readonlyinline}}
    @@ -33,9 +33,9 @@

    属性

    {{domxref("VisualViewport.offsetTop")}} {{readonlyinline}}
    返回视觉视口的上边框到布局视口的上边框的 CSS 像素距离。
    {{domxref("VisualViewport.pageLeft")}} {{readonlyinline}}
    -
    返回相对于初始的 viewport 属性的 X 轴坐标所对应的 CSS 像素数。
    +
    返回相对于初始的 viewport 属性的 X 轴坐标所对应的 CSS 像素数。
    {{domxref("VisualViewport.pageTop")}} {{readonlyinline}}
    -
    返回相对于初始的 viewport 属性的 Y 轴坐标所对应的 CSS 像素数。
    +
    返回相对于初始的 viewport 属性的 Y 轴坐标所对应的 CSS 像素数。
    {{domxref("VisualViewport.width")}} {{readonlyinline}}
    返回视觉视口的宽度所对应的 CSS 像素数。
    {{domxref("VisualViewport.height")}} {{readonlyinline}}
    @@ -46,22 +46,22 @@

    属性

    Events

    -

    通过使用 addEventListener() 或者将监听回调函数赋值给对应的 oneventname 属性,可以为对应的视口事件添加监听。

    +

    通过使用 addEventListener() 或者将监听回调函数赋值给对应的 oneventname 属性,可以为对应的视口事件添加监听。

    resize
    当视觉视口被改变时触发。
    -
    也可以为 {{domxref("VisualViewport.onresize")}} 属性赋值来添加监听。
    +
    也可以为 {{domxref("VisualViewport.onresize")}} 属性赋值来添加监听。
    scroll
    当视觉视口滑动时触发。
    -
    也可以为 {{domxref("VisualViewport.onscroll")}} 属性赋值来添加监听。
    +
    也可以为 {{domxref("VisualViewport.onscroll")}} 属性赋值来添加监听。

    例子

    缩放检测并隐藏元素

    -

    这个例子取自 Visual Viewport README,展示了如何在用户缩放时隐藏某个盒子(或元素)。这对于增强一个页面在缩放时的用户体验有重要意义。同样,你也可以查看另一个 例子 。

    +

    这个例子取自 Visual Viewport README,展示了如何在用户缩放时隐藏某个盒子(或元素)。这对于增强一个页面在缩放时的用户体验有重要意义。同样,你也可以查看另一个 例子

    var bottomBar = document.getElementById('bottombar');
     var viewport = window.visualViewport;
    @@ -77,7 +77,7 @@ 

    缩放检测并隐藏元素

    模拟 position 属性:device-fixed

    -

    这个例子同样取自 Visual Viewport README ,展示了如何使用视觉视口 API,从而模拟 position: device-fixed 的 CSS 属性。类似于 position: fixed ,这一属性可将被设置的元素固定在视觉视口特定位置。此外,你也可以查看另一个 例子 。

    +

    这个例子同样取自 Visual Viewport README ,展示了如何使用视觉视口 API,从而模拟 position: device-fixed 的 CSS 属性。类似于 position: fixed ,这一属性可将被设置的元素固定在视觉视口特定位置。此外,你也可以查看另一个 例子

    var bottomBar = document.getElementById('bottombar');
     var viewport = window.visualViewport;
    @@ -102,7 +102,7 @@ 

    模拟 position 属性:device-f window.visualViewport.addEventListener('resize', viewportHandler);

    -

    注意:应小心使用上述方案,使用这种方式模拟的 position: device-fixed 可能会导致其他元素在滚动页面时出现闪烁。

    +

    注意:应小心使用上述方案,使用这种方式模拟的 position: device-fixed 可能会导致其他元素在滚动页面时出现闪烁。

    规范

    @@ -116,5 +116,5 @@

    浏览器兼容性

    参照

      -
    • Web 视口说明 — 解释了什么是浏览器视口和视觉视口和布局视口的区别。
    • +
    • Web 视口说明 — 解释了什么是浏览器视口和视觉视口和布局视口的区别。
    diff --git a/files/zh-cn/web/api/visualviewport/scroll_event/index.html b/files/zh-cn/web/api/visualviewport/scroll_event/index.html index 0386cedfe7dde8..7faf77d796b79a 100644 --- a/files/zh-cn/web/api/visualviewport/scroll_event/index.html +++ b/files/zh-cn/web/api/visualviewport/scroll_event/index.html @@ -6,7 +6,7 @@ ---

    {{APIRef("Visual Viewport")}}{{ SeeCompatTable() }}

    -

    The onscroll event handler of the {{domxref("VisualViewport")}} interface is called when a viewport is scrolled, i.e. when the scroll event is fired.

    +

    The onscroll event handler of the {{domxref("VisualViewport")}} interface is called when a viewport is scrolled, i.e. when the scroll event is fired.

    Syntax

    diff --git a/files/zh-cn/web/api/vrdisplay/index.html b/files/zh-cn/web/api/vrdisplay/index.html index 7af25cdf732886..f8bd21a50a7522 100644 --- a/files/zh-cn/web/api/vrdisplay/index.html +++ b/files/zh-cn/web/api/vrdisplay/index.html @@ -5,9 +5,9 @@ ---
    {{APIRef("WebVR API")}}{{SeeCompatTable}}
    -

    WebVR API 中的 VRDisplay 代表任何支持此 API 的 VR 设备。它包括了设备 ID、描述信息等诸如此类的通用信息,以及用于开始呈现 VR 场景、检索眼睛参数和显示能力以及其他重要的功能和方法。

    +

    WebVR API 中的 VRDisplay 代表任何支持此 API 的 VR 设备。它包括了设备 ID、描述信息等诸如此类的通用信息,以及用于开始呈现 VR 场景、检索眼睛参数和显示能力以及其他重要的功能和方法。

    -

    可以通过调用 {{domxref("Navigator.getVRDisplays()")}} 方法得到所有连接的 VR 设备数组。

    +

    可以通过调用 {{domxref("Navigator.getVRDisplays()")}} 方法得到所有连接的 VR 设备数组。

    属性

    @@ -19,22 +19,22 @@

    属性

    {{domxref("VRDisplay.depthNear")}}
    获取或设置眼睛可视锥的最近深度。
    {{domxref("VRDisplay.displayId")}} {{readonlyInline}}
    -
    返回此 VRDisplay 的标识符,它也用作与 Gamepad API 的关联(详见 {{domxref("Gamepad.displayId")}})。
    +
    返回此 VRDisplay 的标识符,它也用作与 Gamepad API 的关联(详见 {{domxref("Gamepad.displayId")}})。
    {{domxref("VRDisplay.displayName")}} {{readonlyInline}}
    -
    返回一个不反人类的名称来标识此 VRDisplay。
    +
    返回一个不反人类的名称来标识此 VRDisplay。
    {{domxref("VRDisplay.isConnected")}} {{readonlyInline}}
    -
    返回一个 {{domxref("Boolean")}} 值,指示 VRDisplay 是否连接到计算机。
    +
    返回一个 {{domxref("Boolean")}} 值,指示 VRDisplay 是否连接到计算机。
    {{domxref("VRDisplay.isPresenting")}} {{readonlyInline}}
    -
    返回一个 {{domxref("Boolean")}} 值,指示 VRDisplay 当前是否由内容被呈现。
    +
    返回一个 {{domxref("Boolean")}} 值,指示 VRDisplay 当前是否由内容被呈现。
    {{domxref("VRDisplay.stageParameters")}} {{readonlyInline}}
    -
    如果 VR 设备支持房间规模测验,则返回一个包含房间尺寸参数的 {{domxref("VRStageParameters")}} 对象。
    +
    如果 VR 设备支持房间规模测验,则返回一个包含房间尺寸参数的 {{domxref("VRStageParameters")}} 对象。

    方法

    {{domxref("VRDisplay.getEyeParameters()")}}
    -
    返回指定一侧眼睛参数的 {{domxref("VREyeParameters")}} 对象。
    +
    返回指定一侧眼睛参数的 {{domxref("VREyeParameters")}} 对象。
    {{domxref("VRDisplay.getLayers()")}}
    返回 VRDisplay 当前显示的图层。
    {{domxref("VRDisplay.getPose()")}}
    diff --git a/files/zh-cn/web/api/vrpose/index.html b/files/zh-cn/web/api/vrpose/index.html index 510c21d1adc667..cf5532314b5996 100644 --- a/files/zh-cn/web/api/vrpose/index.html +++ b/files/zh-cn/web/api/vrpose/index.html @@ -13,11 +13,11 @@

    The VRPose interface of the WebVR API represents the state of a VR sensor at a given timestamp (which includes orientation, position, velocity, and acceleration information.)

    -

    WebVR API  中的 VRPose 接口表示在一个给定的时间戳中,一个 VR 传感器的状态(包括了方向、位置、速度和加速度信息)。

    +

    WebVR API 中的 VRPose 接口表示在一个给定的时间戳中,一个 VR 传感器的状态(包括了方向、位置、速度和加速度信息)。

    -

    This interface is accessible through the {{domxref("VRDisplay.getPose()")}} and {{domxref("VRDisplay.getImmediatePose()")}} methods.

    +

    This interface is accessible through the {{domxref("VRDisplay.getPose()")}} and {{domxref("VRDisplay.getImmediatePose()")}} methods.

    -

    这个接口能通过 {{domxref("VRDisplay.getPose()")}} 和 {{domxref("VRDisplay.getImmediatePose()")}} 方法访问

    +

    这个接口能通过 {{domxref("VRDisplay.getPose()")}} 和 {{domxref("VRDisplay.getImmediatePose()")}} 方法访问

    Properties

    @@ -27,22 +27,22 @@

    Properties

    返回当前系统的时间戳。此单调递增的值可以有助于确定位置数据是否有更新,以及更新的顺序。
    {{domxref("VRPose.position")}} {{readonlyInline}}
    Returns the position of the {{domxref("VRDisplay")}} at the current {{domxref("VRPose.timestamp")}} as a 3D vector
    -
    以三维向量的形式返回当前时间戳 {{domxref("VRPose.timestamp")}}  时 {{domxref("VRDisplay")}}  的位置信息。
    +
    以三维向量的形式返回当前时间戳 {{domxref("VRPose.timestamp")}} 时 {{domxref("VRDisplay")}} 的位置信息。
    {{domxref("VRPose.linearVelocity")}} {{readonlyInline}}
    Returns the linear velocity of the {{domxref("VRDisplay")}} at the current {{domxref("VRPose.timestamp")}}, in meters per second.
    -
    返回当前时间戳 {{domxref("VRPose.timestamp")}}  时 {{domxref("VRDisplay")}}  的线速度,单位为米/秒。
    +
    返回当前时间戳 {{domxref("VRPose.timestamp")}} 时 {{domxref("VRDisplay")}} 的线速度,单位为米/秒。
    {{domxref("VRPose.linearAcceleration")}} {{readonlyInline}}
    Returns the linear acceleration of the {{domxref("VRDisplay")}} at the current {{domxref("VRPose.timestamp")}}, in meters per second per second.
    -
    返回当前时间戳 {{domxref("VRPose.timestamp")}}  时 {{domxref("VRDisplay")}}  的线加速度,单位为米/平方秒。
    +
    返回当前时间戳 {{domxref("VRPose.timestamp")}} 时 {{domxref("VRDisplay")}} 的线加速度,单位为米/平方秒。
    {{domxref("VRPose.orientation")}} {{readonlyInline}}
    Returns the orientation of the sensor at the current {{domxref("VRPose.timestamp")}}, as a quarternion value.
    -
    以四元数的形式返回当前时间戳 {{domxref("VRPose.timestamp")}}  时传感器的方向,
    +
    以四元数的形式返回当前时间戳 {{domxref("VRPose.timestamp")}} 时传感器的方向,
    {{domxref("VRPose.angularVelocity")}} {{readonlyInline}}
    Returns the angular velocity of the {{domxref("VRDisplay")}} at the current {{domxref("VRPose.timestamp")}}, in radians per second.
    -
    返回当前时间戳 {{domxref("VRPose.timestamp")}}  时 {{domxref("VRDisplay")}}  的角速度,单位为弧度/秒。
    +
    返回当前时间戳 {{domxref("VRPose.timestamp")}} 时 {{domxref("VRDisplay")}} 的角速度,单位为弧度/秒。
    {{domxref("VRPose.angularAcceleration")}} {{readonlyInline}}
    Returns the angular acceleration of the {{domxref("VRDisplay")}} at the current {{domxref("VRPose.timestamp")}}, in meters per second per second.
    -
    返回当前时间戳 {{domxref("VRPose.timestamp")}}  时 {{domxref("VRDisplay")}}  的角加速度,单位为弧度/平方秒。
    +
    返回当前时间戳 {{domxref("VRPose.timestamp")}} 时 {{domxref("VRDisplay")}} 的角加速度,单位为弧度/平方秒。

    Examples

    diff --git a/files/zh-cn/web/api/vrpose/timestamp/index.html b/files/zh-cn/web/api/vrpose/timestamp/index.html index 362ca9dc620f46..3d1ed51c873417 100644 --- a/files/zh-cn/web/api/vrpose/timestamp/index.html +++ b/files/zh-cn/web/api/vrpose/timestamp/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef("WebVR API")}}{{SeeCompatTable}}
    -

    timestamp 是 {{domxref("VRPose")}} 接口的只读属性,返回为系统此时的时间戳 — 一个单调递增的数值,代表这个软件启动到现在的时间。

    +

    timestamp 是 {{domxref("VRPose")}} 接口的只读属性,返回为系统此时的时间戳 — 一个单调递增的数值,代表这个软件启动到现在的时间。

    这个属性对于确定位置数据是否已更新和什么次序更新了很有用。

    diff --git a/files/zh-cn/web/api/wakelock/index.html b/files/zh-cn/web/api/wakelock/index.html index 38f124ab33c4ef..b44b75352b45be 100644 --- a/files/zh-cn/web/api/wakelock/index.html +++ b/files/zh-cn/web/api/wakelock/index.html @@ -5,18 +5,18 @@ ---

    {{APIRef("Screen Wake Lock API")}}{{SeeCompatTable}}{{securecontext_header}}

    -

    WakeLock 接口允许一个文件获取屏幕唤醒锁定。

    +

    WakeLock 接口允许一个文件获取屏幕唤醒锁定。

    方法

    {{domxref("WakeLock.request","WakeLock.request()")}}
    -
    返回一个决议为 {{DOMxRef("WakeLockSentinel")}} 的 {{JSxRef("Promise")}} 或当唤醒锁定不可访问的时候抛出异常。
    +
    返回一个决议为 {{DOMxRef("WakeLockSentinel")}} 的 {{JSxRef("Promise")}} 或当唤醒锁定不可访问的时候抛出异常。

    示例

    -

    以下例子获取一个唤醒锁定并在 10 分钟后释放它:

    +

    以下例子获取一个唤醒锁定并在 10 分钟后释放它:

    function tryKeepScreenAlive(minutes) {
       navigator.wakeLock.request("screen").then(lock => {
    diff --git a/files/zh-cn/web/api/wakelock/request/index.html b/files/zh-cn/web/api/wakelock/request/index.html
    index c625e9e40e3dc0..8f13dec3240f0f 100644
    --- a/files/zh-cn/web/api/wakelock/request/index.html
    +++ b/files/zh-cn/web/api/wakelock/request/index.html
    @@ -5,7 +5,7 @@
     ---
     

    {{APIRef("Screen Wake Lock API")}}{{SeeCompatTable}}{{securecontext_header}}

    -

    WakeLock.request() 方法用来获取屏幕唤醒锁定权限,防止屏幕变暗、关闭或展示屏幕保护程序。

    +

    WakeLock.request() 方法用来获取屏幕唤醒锁定权限,防止屏幕变暗、关闭或展示屏幕保护程序。

    语法

    @@ -15,12 +15,12 @@

    参数

    wakeLockType
    -
    唤醒锁定类型,目前必须传 "screen"
    +
    唤醒锁定类型,目前必须传 "screen"

    返回值

    -

    决议为 {{DOMxRef("WakeLockSentinel")}} 的 {{JSxRef("Promise")}}。

    +

    决议为 {{DOMxRef("WakeLockSentinel")}} 的 {{JSxRef("Promise")}}。

    异常

    @@ -28,17 +28,17 @@

    异常

    NotAllowedError
    当唤醒锁定不可用的时候抛出,例如在:
      -
    • 由于屏幕唤醒锁定策略,Document 不允许使用屏幕唤醒锁定。
    • -
    • Document 不完全激活。
    • -
    • Document 被隐藏。
    • -
    • {{Glossary("User Agent")}} 无法获取平台的唤醒锁定。
    • +
    • 由于屏幕唤醒锁定策略,Document 不允许使用屏幕唤醒锁定。
    • +
    • Document 不完全激活。
    • +
    • Document 被隐藏。
    • +
    • {{Glossary("User Agent")}} 无法获取平台的唤醒锁定。

    示例

    -

    以下示例获取屏幕唤醒锁定并在 10 分钟后释放它:

    +

    以下示例获取屏幕唤醒锁定并在 10 分钟后释放它:

    function tryKeepScreenAlive(minutes) {
       navigator.wakeLock.request("screen").then(lock => {
    diff --git a/files/zh-cn/web/api/waveshapernode/curve/index.html b/files/zh-cn/web/api/waveshapernode/curve/index.html
    index e4e215e5097c3d..7febe09a5a5826 100644
    --- a/files/zh-cn/web/api/waveshapernode/curve/index.html
    +++ b/files/zh-cn/web/api/waveshapernode/curve/index.html
    @@ -24,7 +24,7 @@ 

    语法

    Value

    -

     一个 {{domxref("Float32Array")}}.

    +

    一个 {{domxref("Float32Array")}}.

    示例

    diff --git a/files/zh-cn/web/api/waveshapernode/index.html b/files/zh-cn/web/api/waveshapernode/index.html index ff3c2a227fc1d0..583b07b1fd4465 100644 --- a/files/zh-cn/web/api/waveshapernode/index.html +++ b/files/zh-cn/web/api/waveshapernode/index.html @@ -9,7 +9,7 @@

    WaveShaperNode 接口表示一个非线性的畸变器。是一个使用曲线来将一个波形畸变应用到一个声音信号中的{{domxref("AudioNode")}}。除了明显的失真效果之外,它通常用来给信号添加一个暖调的感觉。

    -

     一个WaveShaperNode 总是有一个确切的输入和输出。

    +

    一个WaveShaperNode 总是有一个确切的输入和输出。

    @@ -40,12 +40,12 @@

    构造器

    {{domxref("WaveShaperNode.WaveShaperNode", "WaveShaperNode()")}}
    -
     创建一个新的WaveShaperNode 对象的实例。
    +
    创建一个新的WaveShaperNode 对象的实例。

    属性

    -

     包含了继承自父类{{domxref("AudioNode")}}的属性

    +

    包含了继承自父类{{domxref("AudioNode")}}的属性

    {{domxref("WaveShaperNode.curve")}}
    diff --git a/files/zh-cn/web/api/waveshapernode/waveshapernode/index.html b/files/zh-cn/web/api/waveshapernode/waveshapernode/index.html index e3fbdde877d6e1..0121cdaa650dd2 100644 --- a/files/zh-cn/web/api/waveshapernode/waveshapernode/index.html +++ b/files/zh-cn/web/api/waveshapernode/waveshapernode/index.html @@ -16,7 +16,7 @@

    语法

    参数

    -

     继承 {{domxref("AudioNodeOptions")}} 字典的参数。

    +

    继承 {{domxref("AudioNodeOptions")}} 字典的参数。

    context
    diff --git a/files/zh-cn/web/api/web_animations_api/index.html b/files/zh-cn/web/api/web_animations_api/index.html index eec2b5a7f7673f..8333864cb6c24c 100644 --- a/files/zh-cn/web/api/web_animations_api/index.html +++ b/files/zh-cn/web/api/web_animations_api/index.html @@ -24,7 +24,7 @@

    网页动画接口

    {{domxref("Animation")}}
    提供播放控制、动画节点或源的时间轴。 可以接受使用{{domxref("KeyframeEffect.KeyframeEffect")}}构造函数创建的对象作为参数。
    {{domxref("KeyframeEffect")}}
    -
    描述动画属性的集合,调用keyframes及{{domxref("Animation Effect Timing Properties")}}。 然后可以使用 {{domxref("Animation")}} 构造函数进行播放。
    +
    描述动画属性的集合,调用keyframes及{{domxref("Animation Effect Timing Properties")}}。 然后可以使用 {{domxref("Animation")}} 构造函数进行播放。
    {{domxref("AnimationTimeline")}}
    表示动画的时间轴。 此接口用以定义时间轴功能(继承自{{domxref("DocumentTimeline")}}和{{domxref("future timeline")}}),并且本身不被开发人员访问。
    {{domxref("DocumentTimeline")}}
    @@ -34,14 +34,14 @@

    网页动画接口

    {{domxref("SharedKeyframeList")}}
    表示可在{{domxref("KeyframeEffect")}}对象之间共享的关键帧序列。 通过使用该对象,多个{{domxref("KeyframeEffect")}}对象可以重用相同的关键帧,而无需支付多次解析它们的成本。
    {{domxref("AnimationEffectTimingProperties")}}
    -
    {{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly()")}}和 {{domxref("KeyframeEffect.KeyframeEffect()")}}的定时属性对象。
    +
    {{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly()")}}和 {{domxref("KeyframeEffect.KeyframeEffect()")}}的定时属性对象。

    扩展的其他接口

    -

    The Web Animations API 向{{domxref("document")}}{{domxref("element")}} 添加了一些新的功能。

    +

    The Web Animations API 向{{domxref("document")}}{{domxref("element")}} 添加了一些新的功能。

    -

    扩展到 Document 的接口

    +

    扩展到 Document 的接口

    {{domxref("document.timeline")}}
    @@ -49,7 +49,7 @@

    扩展到 Document 的接
    {{domxref("document.getAnimations()")}}
    返回当前对文档中的元素有效的{{domxref("Animation")}}对象的数组。
    -

    扩展到 Element 的接口

    +

    扩展到 Element 的接口

    {{domxref("Element.animate()")}}
    用于在元素上创建和播放动画的快捷方式。 它返回创建的{{domxref("Animation")}}对象实例。
    @@ -64,11 +64,11 @@

    Web 动画只读接口

    {{domxref("AnimationEffectTimingReadOnly")}}
    -
    A dictionary object of timing properties, which are inherited by the mutable {{domxref("AnimationEffectTiming")}} interface associated with {{domxref("KeyframeEffect")}}.
    +
    A dictionary object of timing properties, which are inherited by the mutable {{domxref("AnimationEffectTiming")}} interface associated with {{domxref("KeyframeEffect")}}.
    {{domxref("AnimationEffectReadOnly")}}
    -
    Defines current and future "Animation Effects" like {{domxref("KeyframeEffect")}}, which can be passed to {{domxref("Animation.Animation")}} objects for playing, and {{domxref("KeyframeEffectReadOnly")}} which is used by {{domxref("KeyframeEffect")}} (inherited by CSS Animations and Transitions).
    +
    Defines current and future "Animation Effects" like {{domxref("KeyframeEffect")}}, which can be passed to {{domxref("Animation.Animation")}} objects for playing, and {{domxref("KeyframeEffectReadOnly")}} which is used by {{domxref("KeyframeEffect")}} (inherited by CSS Animations and Transitions).
    {{domxref("KeyframeEffectReadOnly")}}
    -
    Describes sets of animatable properties and values that can be played using the {{domxref("Animation.Animation()")}} constructor, and which are inherited by {{domxref("KeyframeEffect")}}. 
    +
    Describes sets of animatable properties and values that can be played using the {{domxref("Animation.Animation()")}} constructor, and which are inherited by {{domxref("KeyframeEffect")}}.

    规范

    @@ -83,7 +83,7 @@

    相关内容

  • Using the Web Animations API
  • Web Animations demos
  • Polyfill
  • -
  • Firefox's current implementation: AreWeAnimatedYet
  • +
  • Firefox's current implementation: AreWeAnimatedYet
  • Browser support test

  • diff --git a/files/zh-cn/web/api/web_animations_api/keyframe_formats/index.html b/files/zh-cn/web/api/web_animations_api/keyframe_formats/index.html index 8fdd7b4e5352b2..c7fbf5c150c56e 100644 --- a/files/zh-cn/web/api/web_animations_api/keyframe_formats/index.html +++ b/files/zh-cn/web/api/web_animations_api/keyframe_formats/index.html @@ -10,7 +10,7 @@ ---

    {{ SeeCompatTable() }}{{ APIRef("Web Animations API") }}

    -

    {{domxref("Element.animate()")}}, {{domxref("KeyframeEffect.KeyframeEffect()")}}, 和 {{domxref("KeyframeEffect.setKeyframes()")}} 都接受格式为一组关键帧的对象, 这种格式有以下几种选项。

    +

    {{domxref("Element.animate()")}}, {{domxref("KeyframeEffect.KeyframeEffect()")}}, 和 {{domxref("KeyframeEffect.setKeyframes()")}} 都接受格式为一组关键帧的对象, 这种格式有以下几种选项。

    语法

    @@ -44,9 +44,9 @@

    语法

    提示: offset 的值必须是在[0.0, 1.0]这个区间内,且须升序排列。

    -

    并非所有的关键帧都需要设置offset。 没有指定offset的关键帧将与相邻的关键帧均匀间隔。

    +

    并非所有的关键帧都需要设置offset。 没有指定offset的关键帧将与相邻的关键帧均匀间隔。

    -

    可以通过提供easing过渡来给指定关键帧之间应用过渡效果,如下所示: 

    +

    可以通过提供easing过渡来给指定关键帧之间应用过渡效果,如下所示:

    element.animate([ { opacity: 1, easing: 'ease-out' },
                       { opacity: 0.1, easing: 'ease-in' },
    @@ -54,7 +54,7 @@ 

    语法

    2000);
    -

    在这个例子中,指定的 easing 仅适用于指定它的关键帧到下一帧之间。 但是在options中指定的 easing 值都将应用在一个动画的整个持续时间里。

    +

    在这个例子中,指定的 easing 仅适用于指定它的关键帧到下一帧之间。 但是在options中指定的 easing 值都将应用在一个动画的整个持续时间里。

  • 一个包含 key-value 键值的对象需要包含动画的属性和要循环变化的值数组
    element.animate({
    @@ -88,13 +88,13 @@ 

    语法

    属性

    -

    关键帧可以为任何的 css 动画属性指定 property-value 。 使用 camel-case 的属性名将变为 camelCase 格式,例如 {{cssxref("background-color")}} 变成 backgroundColor ,再如 {{cssxref("background-position-x")}} 变成 backgroundPositionX.。速记词,例如 {{cssxref("margin")}} 也是可以用的。.

    +

    关键帧可以为任何的 css 动画属性指定 property-value 。 使用 camel-case 的属性名将变为 camelCase 格式,例如 {{cssxref("background-color")}} 变成 backgroundColor ,再如 {{cssxref("background-position-x")}} 变成 backgroundPositionX.。速记词,例如 {{cssxref("margin")}} 也是可以用的。.

    两个特色的 css 属性:

      -
    • {{cssxref("float")}}, 必须写成 cssFloat ,因为"float" 是 JavaScript 的保留关键字
    • -
    • {{cssxref("offset")}}, 必须写成 cssOffset ,因为"offset" 表示如下的关键帧 offset
    • +
    • {{cssxref("float")}}, 必须写成 cssFloat ,因为"float" 是 JavaScript 的保留关键字
    • +
    • {{cssxref("offset")}}, 必须写成 cssOffset ,因为"offset" 表示如下的关键帧 offset

    还可以指定以下特色属性:

    @@ -106,7 +106,7 @@

    属性

    easing
    -

    从这个关键帧直到这一级中的下一个关键帧所使用的  timing function

    +

    从这个关键帧直到这一级中的下一个关键帧所使用的 timing function

    composite
    diff --git a/files/zh-cn/web/api/web_animations_api/using_the_web_animations_api/index.html b/files/zh-cn/web/api/web_animations_api/using_the_web_animations_api/index.html index 912113bbb6368b..50a13f74084527 100644 --- a/files/zh-cn/web/api/web_animations_api/using_the_web_animations_api/index.html +++ b/files/zh-cn/web/api/web_animations_api/using_the_web_animations_api/index.html @@ -9,7 +9,7 @@

    认识 Web 动画 API

    -

    Web 动画 API将浏览器动画引擎向开发者打开,并由 JavaScript 进行操作。这些 API 被设计成 CSS Animations and CSS Transitions的接口,未来会对这些 API 做补充以丰富更多的功能。它是对网络上动画化的支持最有效的方式之一,让浏览器进行自己的内部,不需要 hacks,或者强迫,或者{{domxref("Window.requestAnimationFrame()")}}。

    +

    Web 动画 API将浏览器动画引擎向开发者打开,并由 JavaScript 进行操作。这些 API 被设计成 CSS Animations and CSS Transitions的接口,未来会对这些 API 做补充以丰富更多的功能。它是对网络上动画化的支持最有效的方式之一,让浏览器进行自己的内部,不需要 hacks,或者强迫,或者{{domxref("Window.requestAnimationFrame()")}}。

    通过 Web 动画 API,我们可以将交互式动画从样式表移动到 JavaScript,将表现与行为分开。 我们不再需要依赖 DOM 重的技术,如将 CSS 属性和范围类写入元素来控制播放方向。 与纯粹的声明式 CSS 不同,JavaScript 还允许我们动态地将属性值设置为持续时间。 对于构建自定义动画库和创建交互式动画,Web 动画 API 可能是完成工作的完美工具。 让我们看看它能做什么!

    @@ -23,7 +23,7 @@

    用 web 动画 API 写 css 动画

    The CSS version

    -

    这是一个用 CSS 写的滚动动画,显示爱丽丝落下通向仙境的兔子洞 (see the full code on Codepen):

    +

    这是一个用 CSS 写的滚动动画,显示爱丽丝落下通向仙境的兔子洞 (see the full code on Codepen):

    Alice Tumbling down the rabbit's hole.

    @@ -88,12 +88,12 @@

    表示时间属性

    -

    CSS 动画中使用的属性值与 Web 动画中使用的属性值存在一些小的差异。比如,Web 动画中不能使用字符串“infinite”,而是使用 Javascript 的关键字 Infinity。 以及我们用 easing 来代替timing-function。我们不必在这列出easing的值,因为不像在 CSS 动画里,默认的"animation-timing-function"是ease。页面动画 API 的默认 easing 是linear— 而这就是我们想要的。

    +

    CSS 动画中使用的属性值与 Web 动画中使用的属性值存在一些小的差异。比如,Web 动画中不能使用字符串“infinite”,而是使用 Javascript 的关键字 Infinity。 以及我们用 easing 来代替timing-function。我们不必在这列出easing的值,因为不像在 CSS 动画里,默认的"animation-timing-function"是ease。页面动画 API 的默认 easing 是linear— 而这就是我们想要的。

    整合这些特性

    -

    是时候把这些特性结合到一起运用了 {{domxref("Element.animate()")}} :

    +

    是时候把这些特性结合到一起运用了 {{domxref("Element.animate()")}} :

    document.getElementById("alice").animate(
       aliceTumbling,
    @@ -146,11 +146,11 @@ 

    暂停和启动动画

    duration: aliceChange.effect.timing.duration / 2 });
    -

    {{domxref("Element.animate()")}} 方法会在调用后立即执行。 为了防止蛋糕在用户有机会点击之前进食自己, 我们调用 {{domxref("Animation.pause()")}} ,如下:

    +

    {{domxref("Element.animate()")}} 方法会在调用后立即执行。 为了防止蛋糕在用户有机会点击之前进食自己, 我们调用 {{domxref("Animation.pause()")}} ,如下:

    nommingCake.pause();
    -

    我们可以运行 {{domxref("Animation.play()")}} 方法:

    +

    我们可以运行 {{domxref("Animation.play()")}} 方法:

    nommingCake.play();
    @@ -179,7 +179,7 @@

    其他有用的方法

  • {{domxref("Animation.finish()")}} 动画结束。
  • {{domxref("Animation.cancel()")}} 终止动画。
  • {{domxref("Animation.reverse()")}} 设置动画播放速度
  • -
  •  ({{domxref("Animation.playbackRate")}}到负值,所以它向后运行。
  • +
  • ({{domxref("Animation.playbackRate")}}到负值,所以它向后运行。
  • 让我们先来看一下 playbackRate - 一个否定的播放速度将导致一个动画反向运行。 当爱丽丝从瓶中喝酒时,她越来越小。 这是因为瓶子将动画的播放速度从 1 更改为-1:

    @@ -307,7 +307,7 @@

    获取动画信息

    -

    Note: getAnimations() and effect are not fully supported as of this writing, but the polyfill does support them today.

    +

    Note: getAnimations() and effect are not fully supported as of this writing, but the polyfill does support them today.

    Callbacks and promises

    @@ -315,7 +315,7 @@

    Callbacks and promises

    CSS 动画和转换有自己的事件侦听器,这些也可以通过 Web 动画 API:

      -
    • onfinish is the event handler for the finish event and can be triggered manually with finish().
    • +
    • onfinish is the event handler for the finish event and can be triggered manually with finish().
    • oncancel is the event handler for the cancel event and can be triggers with cancel().
    @@ -330,7 +330,7 @@

    Callbacks and promises

    -

    Prefer promises? The Web Animations API also specifies two promises: onfinish and oncancel.

    +

    Prefer promises? The Web Animations API also specifies two promises: onfinish and oncancel.

    These promises are not fully supported as of this writing.

    @@ -343,7 +343,7 @@

    结论

    See also

    diff --git a/files/zh-cn/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.html b/files/zh-cn/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.html index 4c07adb656ad34..574df13c5e99d0 100644 --- a/files/zh-cn/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.html +++ b/files/zh-cn/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.html @@ -9,7 +9,7 @@ - 网页音频接口 translation_of: Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API --- -

    这篇文章解释了 网页音频接口 (Web Audio API) 运作过程中的部分音频处理概念。本文并不会将你变为一名音频处理大师,但它可以给你足够的背景知识来理解 网页音频接口 的运行原理,并能让你在使用它时做出更好的决策。

    +

    这篇文章解释了 网页音频接口 (Web Audio API) 运作过程中的部分音频处理概念。本文并不会将你变为一名音频处理大师,但它可以给你足够的背景知识来理解 网页音频接口 的运行原理,并能让你在使用它时做出更好的决策。

    音频节点:模块化连接

    @@ -36,8 +36,8 @@

    音频节点:模块化连接

    • 直接通过 Javascript 生成声音节点产生(例如一个振动发声器)
    • 由脉冲编码调制产生的原始数据(音频环境中可以调用一些方法来解码部分支持的格式)
    • -
    • 从 HTML 元素中(例如 {{HTMLElement("video")}} 或者 {{HTMLElement("audio")}} 标签)
    • -
    • 直接通过一个 WebRTC {{domxref("MediaStream")}} 获取流媒体(例如一个摄像头或麦克风)
    • +
    • 从 HTML 元素中(例如 {{HTMLElement("video")}} 或者 {{HTMLElement("audio")}} 标签)
    • +
    • 直接通过一个 WebRTC {{domxref("MediaStream")}} 获取流媒体(例如一个摄像头或麦克风)

    音频数据:什么是样本

    @@ -66,7 +66,7 @@

    音频片段:帧,样本和声

    当一个音频片段开始播放时,你将会听到最左侧的样本帧,之后是他右侧相邻的一帧,以此类推。在立体声中,你将会同时听到两个声道。样本帧的概念在此时非常有用,因为每个样本帧代表特定的播放时间,而和声道个数无关,这种方式很有利于精确的多声道同步处理。

    -

    注意: 只需用帧的数目除以采样率即可得到播放时间(单位为秒)。用样本点数目除以声道个数即可得到帧的数目。

    +

    注意: 只需用帧的数目除以采样率即可得到播放时间(单位为秒)。用样本点数目除以声道个数即可得到帧的数目。

    下面我们将展示几个浅显易懂的示例:

    @@ -75,10 +75,10 @@

    音频片段:帧,样本和声 var buffer = context.createBuffer(2, 22050, 44100); -

    如果你使用上面的方法调用,你将会得到一个立体声(两个声道)的音频片段 (Buffer),当它在一个频率为 44100 赫兹(这是目前大部分声卡处理声音的频率)的音频环境中播放的时候,会持续 0.5 秒:22050 帧 / 44100 赫兹 = 0.5 秒。

    +

    如果你使用上面的方法调用,你将会得到一个立体声(两个声道)的音频片段 (Buffer),当它在一个频率为 44100 赫兹(这是目前大部分声卡处理声音的频率)的音频环境中播放的时候,会持续 0.5 秒:22050 帧 / 44100 赫兹 = 0.5 秒。

    -

    注意: 在 数字音频 中,44,100 赫兹 (有时也写作 44.1 kHz)是一个常见的 取样频率。 为什么选取 44.1kHz 呢?首先,因为 人耳的接收频率 大约在 20 Hz 到 20,000 Hz 之间,根据 采样定理,采样频率一定要大于最终生成数据最大频率的二倍,因此就一定要大于 40,000 Hz(即 40kHz)。不仅如此,在采样之前信号还必须通过 低通滤波器 ,否则 会发生混叠现象,一个理想低通滤波器会完全留下低于 20kHz 的信号(且没有使它衰减)并完美阻拦一切高于 20kHz 的信号,而事实上 过度频带(英文)总是存在,在这个区域内信号会被部分衰减。这个频带越宽,建立一个 抗混叠滤波器 才越容易。因此我们选取 44.1kHz 允许我们有 2.05kHz 的空间预留给过度频带。

    +

    注意:数字音频 中,44,100 赫兹 (有时也写作 44.1 kHz)是一个常见的 取样频率。 为什么选取 44.1kHz 呢?首先,因为 人耳的接收频率 大约在 20 Hz 到 20,000 Hz 之间,根据 采样定理,采样频率一定要大于最终生成数据最大频率的二倍,因此就一定要大于 40,000 Hz(即 40kHz)。不仅如此,在采样之前信号还必须通过 低通滤波器 ,否则 会发生混叠现象,一个理想低通滤波器会完全留下低于 20kHz 的信号(且没有使它衰减)并完美阻拦一切高于 20kHz 的信号,而事实上 过度频带(英文)总是存在,在这个区域内信号会被部分衰减。这个频带越宽,建立一个 抗混叠滤波器 才越容易。因此我们选取 44.1kHz 允许我们有 2.05kHz 的空间预留给过度频带。

    var context = new AudioContext();
    @@ -87,7 +87,7 @@ 

    音频片段:帧,样本和声

    如果你这样调用,你将会得到一个单声道的音频片段 (Buffer),当它在一个频率为 44100 赫兹的音频环境中播放的时候,将会被自动按照 44100 赫兹*重采样*(因此也会转化为 44100 赫兹的片段),并持续 1 秒:44100 帧 / 44100 赫兹 = 1 秒。

    -

    注意: 音频重采样与图片的缩放非常类似:比如你有一个 16 x 16 的图像,但是你想把它填充到一个 32 x 32 大小的区域,你就要对它进行缩放(重采样)。得到的结果会是一个较低品质的(图像会模糊或者有锯齿形的边缘,这取决于缩放采用的算法),但它却是能将原图形缩放,并且缩放后的图像占用空间比相同大小的普通图像要小。重新采样的音频道理相同——你会节约一些空间,但事实上你无法产出高频率的声音(高音区)。

    +

    注意: 音频重采样与图片的缩放非常类似:比如你有一个 16 x 16 的图像,但是你想把它填充到一个 32 x 32 大小的区域,你就要对它进行缩放(重采样)。得到的结果会是一个较低品质的(图像会模糊或者有锯齿形的边缘,这取决于缩放采用的算法),但它却是能将原图形缩放,并且缩放后的图像占用空间比相同大小的普通图像要小。重新采样的音频道理相同——你会节约一些空间,但事实上你无法产出高频率的声音(高音区)。

    分离式与交错式音频片段

    @@ -114,7 +114,7 @@

    声道

  • - + @@ -158,12 +158,12 @@

    声道

    单声道0: M: 唯一声道0: M: 唯一声道 Mono 0: M: mono
    -

    注意: 由于缩写来自英文,因此保留英文作对照。

    +

    注意: 由于缩写来自英文,因此保留英文作对照。

    向上和向下混频

    -

    当输入与输出的声道数不同时,我们就需要按照如下方法进行混频。这些封装好的方法可以通过设置声音节点的 {{domxref("AudioNode.channelInterpretation")}} 属性为 "speakers"(扬声器) 或 "discrete"(离散声道) 进行混频。

    +

    当输入与输出的声道数不同时,我们就需要按照如下方法进行混频。这些封装好的方法可以通过设置声音节点的 {{domxref("AudioNode.channelInterpretation")}} 属性为 "speakers"(扬声器) 或 "discrete"(离散声道) 进行混频。

    @@ -335,7 +335,7 @@

    向上和向下混频

    - + @@ -207,7 +207,7 @@

    APIs available in workers

    - + @@ -224,7 +224,7 @@

    APIs available in workers

    - + @@ -304,7 +304,7 @@

    APIs available in workers

    - + @@ -348,7 +348,7 @@

    APIs available in workers

    - + - + - + - + @@ -56,19 +56,19 @@

    支持的类型

    - + - + - + - + @@ -76,11 +76,11 @@

    支持的类型

    - + - + @@ -88,11 +88,11 @@

    支持的类型

    - + - +
    其他,非标准声道配置 -

    非标准的声道配置输入将会被按照 channelInterpretation 属性设置为 discrete 时的情况处理。

    +

    非标准的声道配置输入将会被按照 channelInterpretation 属性设置为 discrete 时的情况处理。

    W3C 规范中明确指出允许未来定义新的声道配置标准,因此未来在浏览器中使用此项的输出结果可能与现在不相同。

    @@ -370,7 +370,7 @@

    向上和向下混频

    可视化

    -

    一般来说,可视化是通过获取各个时间上的音频数据(通常是振幅或频率),之后运用图像技术将其处理为视觉输出(例如一个图像)来实现的。网页音频接口提供了一个不会改变输入信号的音频节点 {{domxref("AnalyserNode")}},通过它可以获取声音数据并传递到像 {{htmlelement("canvas")}} 等等一样的可视化工具。

    +

    一般来说,可视化是通过获取各个时间上的音频数据(通常是振幅或频率),之后运用图像技术将其处理为视觉输出(例如一个图像)来实现的。网页音频接口提供了一个不会改变输入信号的音频节点 {{domxref("AnalyserNode")}},通过它可以获取声音数据并传递到像 {{htmlelement("canvas")}} 等等一样的可视化工具。

    Without modifying the audio stream, the node allows to get the frequency and time-domain data associated to it, using a FFT.

    @@ -394,7 +394,7 @@

    可视化

    -

    注意: 更多信息可以参考我们的这篇文章:基于 Web Audio API 实现音频可视化效果 。

    +

    注意: 更多信息可以参考我们的这篇文章:基于 Web Audio API 实现音频可视化效果

    空间位置化

    @@ -414,12 +414,12 @@

    空间位置化

    The PannerNode brings a spatial position and velocity and a directionality for a given signal.

    -

    注意: 更多信息可以参考我们的这篇文章:网络音频位置空间化入门(英文)

    +

    注意: 更多信息可以参考我们的这篇文章:网络音频位置空间化入门(英文)

    扇入与扇出

    -

    对于音频来说,扇入是指 {{domxref("ChannelMergerNode")}}  节点接收一系列单声道输入声源,并将它们整合输出为一个多声道音频信号的过程:

    +

    对于音频来说,扇入是指 {{domxref("ChannelMergerNode")}} 节点接收一系列单声道输入声源,并将它们整合输出为一个多声道音频信号的过程:

    diff --git a/files/zh-cn/web/api/web_audio_api/best_practices/index.html b/files/zh-cn/web/api/web_audio_api/best_practices/index.html index f0013a4ff3fae2..cb31b14f8e8388 100644 --- a/files/zh-cn/web/api/web_audio_api/best_practices/index.html +++ b/files/zh-cn/web/api/web_audio_api/best_practices/index.html @@ -17,7 +17,7 @@

    加载声音/声音文件

    使用 Web Audio API 加载声音的主要方式有四种,你可能会对于应当使用哪种方式有些困惑。

    -

    在从文件中加载声音时,你可能会采取从{{domxref("HTMLMediaElement")}} (即  {{htmlelement("audio")}} 或{{htmlelement("video")}} ) 中抓取的方式,或提取文件并将其解码到缓冲区。两种工作方式都是合理的,然而,在处理全长音轨时,前一种方法会更加常见。而后一种方法更常见于处理更短的(例如样本)的音轨。

    +

    在从文件中加载声音时,你可能会采取从{{domxref("HTMLMediaElement")}} (即 {{htmlelement("audio")}} 或{{htmlelement("video")}} ) 中抓取的方式,或提取文件并将其解码到缓冲区。两种工作方式都是合理的,然而,在处理全长音轨时,前一种方法会更加常见。而后一种方法更常见于处理更短的(例如样本)的音轨。

    多媒体类 HTML 元素有开箱即用的媒体流支持。音频会在浏览器判断可以在播放完成之前加载文件的剩余部分时进行播放 (when the browser determines it can load the rest of the file before playing finishes.)。你可以在Using the Web Audio API tutorial这篇文档中看到一个把多媒体类 HTML 元素与 Web Audio API 结合使用的例子。

    diff --git a/files/zh-cn/web/api/web_audio_api/index.html b/files/zh-cn/web/api/web_audio_api/index.html index 84e484c9f55e34..11f272146cedf7 100644 --- a/files/zh-cn/web/api/web_audio_api/index.html +++ b/files/zh-cn/web/api/web_audio_api/index.html @@ -14,7 +14,7 @@

    Web audio 概念与使用

    Web Audio API 使用户可以在音频上下文(AudioContext) 中进行音频操作,具有模块化路由的特点。在音频节点上操作进行基础的音频, 它们连接在一起构成音频路由图。即使在单个上下文中也支持多源,尽管这些音频源具有多种不同类型通道布局。这种模块化设计提供了灵活创建动态效果的复合音频的方法。

    -

    音频节点通过它们的输入输出相互连接,形成一个链或者一个简单的网。一般来说,这个链或网起始于一个或多个音频源。音频源可以提供一个片段一个片段的音频采样数据(以数组的方式),一般,一秒钟的音频数据可以被切分成几万个这样的片段。这些片段可以是经过一些数学运算得到 (比如{{domxref("OscillatorNode")}}),也可以是音频或视频的文件读出来的(比如{{domxref("AudioBufferSourceNode")}}和{{domxref("MediaElementAudioSourceNode")}}),又或者是音频流({{domxref("MediaStreamAudioSourceNode")}})。其实,音频文件本身就是声音的采样数据,这些采样数据可以来自麦克风,也可以来自电子乐器,然后混合成一个单一的复杂的波形。

    +

    音频节点通过它们的输入输出相互连接,形成一个链或者一个简单的网。一般来说,这个链或网起始于一个或多个音频源。音频源可以提供一个片段一个片段的音频采样数据(以数组的方式),一般,一秒钟的音频数据可以被切分成几万个这样的片段。这些片段可以是经过一些数学运算得到 (比如{{domxref("OscillatorNode")}}),也可以是音频或视频的文件读出来的(比如{{domxref("AudioBufferSourceNode")}}和{{domxref("MediaElementAudioSourceNode")}}),又或者是音频流({{domxref("MediaStreamAudioSourceNode")}})。其实,音频文件本身就是声音的采样数据,这些采样数据可以来自麦克风,也可以来自电子乐器,然后混合成一个单一的复杂的波形。

    这些节点的输出可以连接到其它节点的输入上,然后新节点可以对接收到的采样数据再进行其它的处理,再形成一个结果流。一个最常见的操作是通过把输入的采样数据放大来达到扩音器的作用(缩小就是一个弱音器)(参见{{domxref("GainNode")}})。声音处理完成之后,可以连接到一个目的地({{domxref("AudioContext.destination")}}),这个目的地负责把声音数据传输给扬声器或者耳机。注意,只有当用户期望听到声音时,才需要进行最后一个这个连接。

    @@ -71,7 +71,7 @@

    定义音频源

    {{domxref("MediaElementAudioSourceNode")}}
    MediaElementAudioSourceNode接口表示由 HTML5 {{ htmlelement("audio") }}或{{ htmlelement("video") }}元素生成的音频源。这是一个作为音频源的{{domxref("AudioNode")}}。
    {{domxref("MediaStreamAudioSourceNode")}}
    -
    MediaStreamAudioSourceNode接口表示由 WebRTC {{domxref("MediaStream")}}(如网络摄像头或麦克风)生成的音频源。这是一个作为音频源的{{domxref("AudioNode")}}。
    +
    MediaStreamAudioSourceNode接口表示由 WebRTC {{domxref("MediaStream")}}(如网络摄像头或麦克风)生成的音频源。这是一个作为音频源的{{domxref("AudioNode")}}。

    定义音效

    @@ -86,7 +86,7 @@

    定义音效

    {{domxref("DelayNode")}}
    DelayNode 接口表示延迟线;是{{domxref("AudioNode")}} 类型的音频处理模块,使输入的数据延时输出。
    {{domxref("DynamicsCompressorNode")}}
    -
    DynamicsCompressorNode 提供了一个压缩效果,当多个音频在同时播放并且混合的时候,可以通过它降低音量最大的部分的音量来帮助避免发生削波和失真。
    +
    DynamicsCompressorNode 提供了一个压缩效果,当多个音频在同时播放并且混合的时候,可以通过它降低音量最大的部分的音量来帮助避免发生削波和失真。
    {{domxref("GainNode")}}
    GainNode 接口用于音量变化。它是一个 {{domxref("AudioNode")}} 类型的音频处理模块,输入后应用增益 效果,然后输出。
    {{domxref("StereoPannerNode")}}
    @@ -103,9 +103,9 @@

    定义音频目的地

    {{domxref("AudioDestinationNode")}}
    -
    AudioDestinationNode 定义了最后音频要输出到哪里,通常是输出到你的扬声器。
    +
    AudioDestinationNode 定义了最后音频要输出到哪里,通常是输出到你的扬声器。
    {{domxref("MediaStreamAudioDestinationNode")}}
    -
    MediaStreamAudioDestinationNode定义了使用 WebRTC 的{{domxref("MediaStream")}}(只包含单个 AudioMediaStreamTrack)应该连接的目的地,AudioMediaStreamTrack 的使用方式和从{{ domxref("MediaDevices.getUserMedia", "getUserMedia()") }}中得到{{domxref("MediaStream")}}相似。这个接口是{{domxref("AudioNode")}}类型的音频目的地。
    +
    MediaStreamAudioDestinationNode定义了使用 WebRTC 的{{domxref("MediaStream")}}(只包含单个 AudioMediaStreamTrack)应该连接的目的地,AudioMediaStreamTrack 的使用方式和从{{ domxref("MediaDevices.getUserMedia", "getUserMedia()") }}中得到{{domxref("MediaStream")}}相似。这个接口是{{domxref("AudioNode")}}类型的音频目的地。

    数据分析和可视化

    diff --git a/files/zh-cn/web/api/web_audio_api/using_web_audio_api/index.html b/files/zh-cn/web/api/web_audio_api/using_web_audio_api/index.html index d97d787ba30935..b60562d1e60fc9 100644 --- a/files/zh-cn/web/api/web_audio_api/using_web_audio_api/index.html +++ b/files/zh-cn/web/api/web_audio_api/using_web_audio_api/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/Web_Audio_API/Using_Web_Audio_API ---
    -

    让我们来看看 Web Audio API 入门。我们将简要介绍一些概念,然后学习一个简单的允许我们加载音轨,播放暂停,改变音量和立体声声像的音箱例子。

    +

    让我们来看看 Web Audio API 入门。我们将简要介绍一些概念,然后学习一个简单的允许我们加载音轨,播放暂停,改变音量和立体声声像的音箱例子。

    @@ -28,17 +28,17 @@

    例子

    注意带有播放按钮的复古磁带卡座,及用于改变音量和立体声声像的平移滑块。我们可以使其更复杂,但这是该阶段进行简单学习的理想选择。

    -

    查看最终 demo 代码 here on Codepen,或者在 GitHub 查看源代码 on GitHub

    +

    查看最终 demo 代码 here on Codepen,或者在 GitHub 查看源代码 on GitHub

    浏览器支持

    -

    现代浏览器的 Web Audio API 对的大多数功能都有很好的支持。API 有很多的功能,因此要获得更准确的信息,你必须检查每个参考页面底部的浏览器兼容表。

    +

    现代浏览器的 Web Audio API 对的大多数功能都有很好的支持。API 有很多的功能,因此要获得更准确的信息,你必须检查每个参考页面底部的浏览器兼容表。

    音频图

    Web Audio API 中的所有内容都是基于音频图的概念,音频图由节点组成。

    -

    Web Audio API 在 audio context(音频上下文) 内处理音频,而且被设计为允许模块化路由。基本的音频操作是基于 audio nodes 进行的,音频节点连接起来形成一个音频路由图。你拥有输入节点,你要操作的声音源,根据设计需要被修改的节点,和输出节点(目的地),它们允许你保存或者听取这些声音。

    +

    Web Audio API 在 audio context(音频上下文) 内处理音频,而且被设计为允许模块化路由。基本的音频操作是基于 audio nodes 进行的,音频节点连接起来形成一个音频路由图。你拥有输入节点,你要操作的声音源,根据设计需要被修改的节点,和输出节点(目的地),它们允许你保存或者听取这些声音。

    支持拥有不同通道布局的多个的音频源,即使是在单个上下文。因为模块化设计,你可以创建具有动态效果的复杂的音频功能。

    @@ -52,24 +52,24 @@

    音频上下文

    const audioContext = new AudioContext(); -

    所以当我们这样做时会发生什么?为我们自动创建一个  {{domxref("BaseAudioContext")}}  并自动扩展到在线音频上下文。我们希望如此,因为我们想要播放在线声音。

    +

    所以当我们这样做时会发生什么?为我们自动创建一个 {{domxref("BaseAudioContext")}} 并自动扩展到在线音频上下文。我们希望如此,因为我们想要播放在线声音。

    -

    注意:如果你只是想处理音频数据,举个例子,缓存和流式传输而不播放它,你可能想要考虑创建一个 {{domxref("OfflineAudioContext")}}。

    +

    注意:如果你只是想处理音频数据,举个例子,缓存和流式传输而不播放它,你可能想要考虑创建一个 {{domxref("OfflineAudioContext")}}。

    加载声音

    -

    现在,需要通过我们创建的音频上下文播放一些声音。Web Audio API 中有几种方法可以实现这一点。让我们通过一个简单的方法开始 — 因为我们有一个音箱,我们可能想播放一首完整的歌曲。 此外,为了便于访问,我们可以在在 DOM 中暴露该音轨。我们将使用 {{htmlelement("audio")}} 元素在页面上暴露这首歌曲。

    +

    现在,需要通过我们创建的音频上下文播放一些声音。Web Audio API 中有几种方法可以实现这一点。让我们通过一个简单的方法开始 — 因为我们有一个音箱,我们可能想播放一首完整的歌曲。 此外,为了便于访问,我们可以在在 DOM 中暴露该音轨。我们将使用 {{htmlelement("audio")}} 元素在页面上暴露这首歌曲。

    <audio src="myCoolTrack.mp3" type="audio/mpeg"></audio>
     
    -

    注意:如果你要加载的声音文件保留在其他域中,则需要使用  crossorigin 属性;查看 Cross Origin Resource Sharing (CORS) 取得更多信息。

    +

    注意:如果你要加载的声音文件保留在其他域中,则需要使用 crossorigin 属性;查看 Cross Origin Resource Sharing (CORS) 取得更多信息。

    -

    为了使用 Web Audio API 的优秀特性,我们需要从该元素中获取源并将其传入我们创建的上下文中。幸运的是,有一个方法可以让我们做到这一点 — {{domxref("AudioContext.createMediaElementSource")}}:

    +

    为了使用 Web Audio API 的优秀特性,我们需要从该元素中获取源并将其传入我们创建的上下文中。幸运的是,有一个方法可以让我们做到这一点 — {{domxref("AudioContext.createMediaElementSource")}}:

    // get the audio element
     const audioElement = document.querySelector('audio');
    @@ -79,7 +79,7 @@ 

    加载声音

    -

    注意:上面的 <audio> 元素在 DOM 中代表了一个{{domxref("HTMLMediaElement")}} 类型的对象,拥有其自身的一组功能。这一切都将保持不变。我们只是让 Web Audio API 能够访问到声音。

    +

    注意:上面的 <audio> 元素在 DOM 中代表了一个{{domxref("HTMLMediaElement")}} 类型的对象,拥有其自身的一组功能。这一切都将保持不变。我们只是让 Web Audio API 能够访问到声音。

    控制声音

    @@ -88,7 +88,7 @@

    控制声音

    通过 JavaScript 代码控制声音会受到浏览器的自动播放策略的影响 (autoplay support policies),因此在未经用户(或白名单)许可的情况下脚本对声音的控制会被阻止。浏览器的自动播放策略通常要求显式权限或者用户与页面产生互动后,才允许脚本触发音频播放。

    -

    这些特殊的要求基本上是因为意外的声音可能会打扰到用户,令人厌烦,并且可能导致可访问性问题。你可以在文章 媒体与 Web 音频 API 自动播放指南 了解更多相关信息。

    +

    这些特殊的要求基本上是因为意外的声音可能会打扰到用户,令人厌烦,并且可能导致可访问性问题。你可以在文章 媒体与 Web 音频 API 自动播放指南 了解更多相关信息。

    因为我们的脚本正响应用户输入(例如,点击播放按钮)进行播放音频,我们状态良好且应该没有自动播放阻止的问题。所以,让我们看看我们的播放和暂停功能。我们有一个当音频播放时变为暂停按钮的播放按钮:

    @@ -99,7 +99,7 @@

    控制声音

    在我们可以播放音频前我们需要将我们的音频图从音频源/输入节点连接到目的地。

    -

    我们已经通过把音频元素传入 API 生成一个输入节点。在大多数情况下,你不需要生成一个输出节点,你只需要将其他节点连接到可以为你处理这种情况的 {{domxref("BaseAudioContext.destination")}}:

    +

    我们已经通过把音频元素传入 API 生成一个输入节点。在大多数情况下,你不需要生成一个输出节点,你只需要将其他节点连接到可以为你处理这种情况的 {{domxref("BaseAudioContext.destination")}}:

    track.connect(audioContext.destination);
     
    @@ -132,7 +132,7 @@

    控制声音

    }, false);
    -

    我们也需要考虑到当音频播放完毕后做什么。我们的 HTMLMediaElement 一旦播放完毕会触发一个 ended 事件,所以我们可以监听它并运行相应代码:

    +

    我们也需要考虑到当音频播放完毕后做什么。我们的 HTMLMediaElement 一旦播放完毕会触发一个 ended 事件,所以我们可以监听它并运行相应代码:

    audioElement.addEventListener('ended', () => {
         playButton.dataset.playing = 'false';
    @@ -141,19 +141,19 @@ 

    控制声音

    关于 Web Audio 编辑器

    -

    Firefox 有一个名为 Web Audio editor 的工具。在其上运行音频图的任何页面上,你可以打开开发者工具,使用 Web Audio 选项卡查看音频图,可查看每个节点的可用属性,并可以修改这些属性来查看会有什么效果。

    +

    Firefox 有一个名为 Web Audio editor 的工具。在其上运行音频图的任何页面上,你可以打开开发者工具,使用 Web Audio 选项卡查看音频图,可查看每个节点的可用属性,并可以修改这些属性来查看会有什么效果。

    The Firefox web audio editor showing an audio graph with AudioBufferSource, IIRFilter, and AudioDestination

    -

    注意:Web Audio 编辑器默认不是开启的,你需要打开 Firefox developer tools 设置,选中 Default Developer Tools 部分中的 Web Audio 复选框来显示它。

    +

    注意:Web Audio 编辑器默认不是开启的,你需要打开 Firefox developer tools 设置,选中 Default Developer Tools 部分中的 Web Audio 复选框来显示它。

    修改声音

    -

    让我们深入研究一些基本的修改节点以改变我们的声音。这就是 Web Audio API 真正开始派上用场的地方。首先,让我们改变音量。这可以通过  {{domxref("GainNode")}} 实现,它表示我们的声波有多大。

    +

    让我们深入研究一些基本的修改节点以改变我们的声音。这就是 Web Audio API 真正开始派上用场的地方。首先,让我们改变音量。这可以通过 {{domxref("GainNode")}} 实现,它表示我们的声波有多大。

    -

    使用 Web Audio API 可以通过 2 个方法创建节点。你可以使用上下文本身的工厂方法(例如, audioContext.createGain() )或者通过节点的构造函数(例如, new GainNode() ),我们将使用工厂方法:

    +

    使用 Web Audio API 可以通过 2 个方法创建节点。你可以使用上下文本身的工厂方法(例如, audioContext.createGain() )或者通过节点的构造函数(例如, new GainNode() ),我们将使用工厂方法:

    const gainNode = audioContext.createGain();
     
    @@ -169,7 +169,7 @@

    修改声音

    默认增益为 1;这使当前音量保持不变。增益可以设置的最小值约-3.4028235E38,最大约3.4028235E38。这里我们将允许音箱增益可以设置到 2(2 倍的原音量)和降低到 0(这可以有效的静音)。

    -

    让我们给用户这样的控制 — 我们将会使用 range input :

    +

    让我们给用户这样的控制 — 我们将会使用 range input

    <input type="range" id="volume" min="0" max="2" value="1" step="0.01">
     
    @@ -188,7 +188,7 @@

    修改声音

    -

    注意:节点对象的值(例如, GainNode.gain )不是简单值;它们实际上是  {{domxref("AudioParam")}} 类型对象 — 这些被称为参数。这也是为什么我们需要设置 GainNode.gain 的 value 属性,而不是直接设置  gain 的值。这使得它们更加的灵活,允许传入一系列特定的值以在例如一段时间内改变。

    +

    注意:节点对象的值(例如, GainNode.gain )不是简单值;它们实际上是 {{domxref("AudioParam")}} 类型对象 — 这些被称为参数。这也是为什么我们需要设置 GainNode.gainvalue 属性,而不是直接设置 gain 的值。这使得它们更加的灵活,允许传入一系列特定的值以在例如一段时间内改变。

    好的,现在用户可以更新音频的音量!如果你要增加静音功能,增益节点是可使用的完美节点。

    @@ -197,10 +197,10 @@

    为应用程序增加立体声平

    让我们添加另一个修改阶段来练习我们刚刚学过的。

    -

    如果用户拥有立体声功能,可用 {{domxref("StereoPannerNode")}} 节点改变左右扬声器的平衡。

    +

    如果用户拥有立体声功能,可用 {{domxref("StereoPannerNode")}} 节点改变左右扬声器的平衡。

    -

    注意: StereoPannerNode 用于你只想从左到右进行立体声平移的简单情况。还有一个  {{domxref("PannerNode")}}, 它允许对 3D 空间或声音空间化进行大量控制以创建更复杂的效果。这在游戏和 3D 应用程序中生成小鸟飞过头顶或者来自用户身后的声音。

    +

    注意StereoPannerNode 用于你只想从左到右进行立体声平移的简单情况。还有一个 {{domxref("PannerNode")}}, 它允许对 3D 空间或声音空间化进行大量控制以创建更复杂的效果。这在游戏和 3D 应用程序中生成小鸟飞过头顶或者来自用户身后的声音。

    为了使其可视化,我们将使我们的音频图如下:

    @@ -248,27 +248,27 @@

    更多例子

    还有其他示例可以了解有关 Web Audio API 的更多信息。

    -

     Voice-change-O-matic 是一个有趣的语音操纵器和音频可视化 web 应用程序,允许你选择不同的效果和可视化。该应用程序相当初级,但它演示了同时使用多个 Web Audio API 特性(运行 Voice-change-O-matic live)。

    +

    Voice-change-O-matic 是一个有趣的语音操纵器和音频可视化 web 应用程序,允许你选择不同的效果和可视化。该应用程序相当初级,但它演示了同时使用多个 Web Audio API 特性(运行 Voice-change-O-matic live)。

    A UI with a sound wave being shown, and options for choosing voice effects and visualizations.

    -

    另一个专门用于演示 Web Audio API 的例子是 Violent Theremin, 一个允许你通过移动鼠标来改变它的音调音量的简单的应用程序。它还提供了一个迷幻的灯光秀(查看 Violent Theremin 源代码

    +

    另一个专门用于演示 Web Audio API 的例子是 Violent Theremin, 一个允许你通过移动鼠标来改变它的音调音量的简单的应用程序。它还提供了一个迷幻的灯光秀(查看 Violent Theremin 源代码

    A page full of rainbow colours, with two buttons labeled Clear screen and mute.

    -

    另参阅我们的 webaudio-examples repo 以获取更多示例。

    +

    另参阅我们的 webaudio-examples repo 以获取更多示例。

    注:以下为旧文档,因较完整,此处暂不删除,方便开发者查看。

    基础概念

    -

    注释: 很多的代码碎片来自于这个例子 Violent Theremin example.

    +

    注释: 很多的代码碎片来自于这个例子 Violent Theremin example.

    Web Audio API 包含在音频上下文的处理音频操作,以及已被设计允许模块化路由。基本音频操作可通过音频节点进行,这些节点连接在一起,组成一个音频的路由表。多个音源——带有不同类型的频道配置——甚至可以被一个上下文支持。这个模块设计提供了创造带有动态效果的复杂音频功能的灵活性。

    -

    音频节点通过输入与输出进行连接,形成一个链,从一个或多个源出发,通过一个或更多的节点,最终到输出终端(你也可以不提供输出终端,换句话说,如果只是想使一些音频数据可视化)。一个简单经典的 web  Audio 的工作流程如下:

    +

    音频节点通过输入与输出进行连接,形成一个链,从一个或多个源出发,通过一个或更多的节点,最终到输出终端(你也可以不提供输出终端,换句话说,如果只是想使一些音频数据可视化)。一个简单经典的 web Audio 的工作流程如下:

    1. 构建音频上下文 AudioContext 对象;

    @@ -306,19 +306,19 @@

    创建 AudioSource

    • 通过 JavaScript 直接生成一个音频节点比如 oscillator. 一个 {{ domxref("OscillatorNode") }}是利用{{ domxref("AudioContext.createOscillator") }} 方法来构建。
    • -
    • 从原 PCM 数据构建: AudioContext 有解密被支持的音频格式的多种方法。 看 {{ domxref("AudioContext.createBuffer()") }}, {{ domxref("AudioContext.createBufferSource()") }}, 以及 {{ domxref("AudioContext.decodeAudioData()") }}.
    • -
    • 来自于 HTML 音频元素例如 {{HTMLElement("video")}} 或者{{HTMLElement("audio")}}: 可以看 {{ domxref("AudioContext.createMediaElementSource()") }}.
    • -
    • 直接来自于 WebRTC,{{domxref("MediaStream")}} 例如来自于摄像头或麦克风。可以看{{ domxref("AudioContext.createMediaStreamSource()") }}.
    • +
    • 从原 PCM 数据构建: AudioContext 有解密被支持的音频格式的多种方法。 看 {{ domxref("AudioContext.createBuffer()") }}, {{ domxref("AudioContext.createBufferSource()") }}, 以及 {{ domxref("AudioContext.decodeAudioData()") }}.
    • +
    • 来自于 HTML 音频元素例如 {{HTMLElement("video")}} 或者{{HTMLElement("audio")}}: 可以看 {{ domxref("AudioContext.createMediaElementSource()") }}.
    • +
    • 直接来自于 WebRTC,{{domxref("MediaStream")}} 例如来自于摄像头或麦克风。可以看{{ domxref("AudioContext.createMediaStreamSource()") }}.
    -

    对于这些特殊的例子,我们将会为我们的源构建一个 oscillator 来提供简单的音调,以及 gain node 来控制音频音量:

    +

    对于这些特殊的例子,我们将会为我们的源构建一个 oscillator 来提供简单的音调,以及 gain node 来控制音频音量:

    var oscillator = audioCtx.createOscillator();
     var gainNode = audioCtx.createGain();
     
    -

    注释: 为了直接播放一个音乐文件,你通常通过 XHR 来加载文件,通过 Buffer 来解码,创建 BufferSource. 看这个 例子来自于 Voice-change-O-matic.

    +

    注释: 为了直接播放一个音乐文件,你通常通过 XHR 来加载文件,通过 Buffer 来解码,创建 BufferSource. 看这个 例子来自于 Voice-change-O-matic.

    @@ -335,7 +335,7 @@

    连接输入输出

    gainNode.connect(audioCtx.destination); -

    一个更复杂的例子,(比如 Voice-change-O-matic), 你可以链接很多你想要的节点在一起,例如:

    +

    一个更复杂的例子,(比如 Voice-change-O-matic), 你可以链接很多你想要的节点在一起,例如:

    source = audioCtx.createMediaStreamSource(stream);
     source.connect(analyser);
    @@ -351,7 +351,7 @@ 

    连接输入输出

    你也可以链接多个节点到一个节点,比如说你想要混合多个音频源在一起,就让它们都通过一个效果节点,比如 gain node。

    -

    注释:Firefox32 以上版本已有完整的 firefox 开发者工具包括 Web Audio Editor, 一个对测试 web audio 表的 bug 非常有用的东西。

    +

    注释:Firefox32 以上版本已有完整的 firefox 开发者工具包括 Web Audio Editor, 一个对测试 web audio 表的 bug 非常有用的东西。

    播放音乐及设置音调

    @@ -363,7 +363,7 @@

    播放音乐及设置音调

    oscillator.start();
    -

    在我们的 Violent Theremin 例子,设定了一个最大 gain 以及 frequency(频率)值:

    +

    在我们的 Violent Theremin 例子,设定了一个最大 gain 以及 frequency(频率)值:

    var WIDTH = window.innerWidth;
     var HEIGHT = window.innerHeight;
    @@ -376,7 +376,7 @@ 

    播放音乐及设置音调

    // set options for the oscillator -oscillator.type = 'sine'; // sine wave — other values are 'square', 'sawtooth', 'triangle' and 'custom' +oscillator.type = 'sine'; // sine wave — other values are 'square', 'sawtooth', 'triangle' and 'custom' oscillator.frequency.value = initialFreq; // value in hertz oscillator.start(); @@ -464,12 +464,12 @@

    其他节点选择

    Wave shaper 节点

    -

    利用 {{ domxref("AudioContext.createWaveShaper") }} 方法,你可以构建一个 wave shaper node:

    +

    利用 {{ domxref("AudioContext.createWaveShaper") }} 方法,你可以构建一个 wave shaper node:

    var distortion = audioCtx.createWaveShaper();
     
    -

    这个对象一定会数学化的定义 wave shape,一个被应用于基础声音波来创造扭曲的效果。这些波并不好被计算,最好的开始方法是搜索 web 算法。比如,我们可以从 Stack Overflow 找到:

    +

    这个对象一定会数学化的定义 wave shape,一个被应用于基础声音波来创造扭曲的效果。这些波并不好被计算,最好的开始方法是搜索 web 算法。比如,我们可以从 Stack Overflow 找到:

    function makeDistortionCurve(amount) {
       var k = typeof amount === 'number' ? amount : 50,
    @@ -513,6 +513,6 @@ 

    Biquad filter

    我们在这里详述了过滤器的类型,频率值,增幅值。在 lowshelf 过滤器情况,所有的指定频率拥有 25 分贝的增幅值。

    -

     Web Audio API 的其他

    +

    Web Audio API 的其他

    Web Audio API 可以做不仅仅音频可视化及专业化(如 panning)的事情。我们将会在之后的文章涉及其他的更多内容。

    diff --git a/files/zh-cn/web/api/web_audio_api/visualizations_with_web_audio_api/index.html b/files/zh-cn/web/api/web_audio_api/visualizations_with_web_audio_api/index.html index 8905e7d1495f53..5a74f1c0caad79 100644 --- a/files/zh-cn/web/api/web_audio_api/visualizations_with_web_audio_api/index.html +++ b/files/zh-cn/web/api/web_audio_api/visualizations_with_web_audio_api/index.html @@ -31,20 +31,20 @@

    基本概念

    // etc.
    -

    注意: 分析器节点 (Analyser Node) 不一定输出到另一个节点,不输出时也可以正常使用。但前提是它必须与一个声源相连(直接或者通过其他节点间接相连都可以)。

    +

    注意: 分析器节点 (Analyser Node) 不一定输出到另一个节点,不输出时也可以正常使用。但前提是它必须与一个声源相连(直接或者通过其他节点间接相连都可以)。

    -

    分析器节点 (Analyser Node) 将在一个特定的频率域里使用快速傅立叶变换(Fast Fourier Transform (FFT) ) 来捕获音频数据,这取决于你给 {{ domxref("AnalyserNode.fftSize") }} 属性赋的值(如果没有赋值,默认值为 2048)。

    +

    分析器节点 (Analyser Node) 将在一个特定的频率域里使用快速傅立叶变换(Fast Fourier Transform (FFT) ) 来捕获音频数据,这取决于你给 {{ domxref("AnalyserNode.fftSize") }} 属性赋的值(如果没有赋值,默认值为 2048)。

    -

    注意: 你也可以为 FFT 数据缩放范围指定一个最小值和最大值,使用{{ domxref("AnalyserNode.minDecibels") }} 和{{ domxref("AnalyserNode.maxDecibels") }}进行设置,要获得不同数据的平均常量,使用 {{ domxref("AnalyserNode.smoothingTimeConstant") }}。阅读这些页面以获得更多如何使用它们的信息。

    +

    注意: 你也可以为 FFT 数据缩放范围指定一个最小值和最大值,使用{{ domxref("AnalyserNode.minDecibels") }} 和{{ domxref("AnalyserNode.maxDecibels") }}进行设置,要获得不同数据的平均常量,使用 {{ domxref("AnalyserNode.smoothingTimeConstant") }}。阅读这些页面以获得更多如何使用它们的信息。

    要捕获数据,你需要使用 {{ domxref("AnalyserNode.getFloatFrequencyData()") }} 或 {{ domxref("AnalyserNode.getByteFrequencyData()") }} 方法来获取频率数据,用 {{ domxref("AnalyserNode.getByteTimeDomainData()") }} 或 {{ domxref("AnalyserNode.getFloatTimeDomainData()") }} 来获取波形数据。

    -

    这些方法把数据复制进了一个特定的数组当中,所以你在调用它们之前要先创建一个新数组。第一个方法会产生一个 32 位浮点数组,第二个和第三个方法会产生 8 位无符号整型数组,因此一个标准的 JavaScript 数组就不能使用 —— 你需要用一个 {{ domxref("Float32Array") }} 或者 {{ domxref("Uint8Array") }} 数组,具体需要哪个视情况而定。

    +

    这些方法把数据复制进了一个特定的数组当中,所以你在调用它们之前要先创建一个新数组。第一个方法会产生一个 32 位浮点数组,第二个和第三个方法会产生 8 位无符号整型数组,因此一个标准的 JavaScript 数组就不能使用 —— 你需要用一个 {{ domxref("Float32Array") }} 或者 {{ domxref("Uint8Array") }} 数组,具体需要哪个视情况而定。

    -

    那么让我们来看看例子,比如我们正在处理一个 2048 尺寸的 FFT。我们返回 {{ domxref("AnalyserNode.frequencyBinCount") }} 值,它是 FFT 的一半,然后调用 Uint8Array(),把 frequencyBinCount 作为它的长度参数 —— 这代表我们将对这个尺寸的 FFT 收集多少数据点。

    +

    那么让我们来看看例子,比如我们正在处理一个 2048 尺寸的 FFT。我们返回 {{ domxref("AnalyserNode.frequencyBinCount") }} 值,它是 FFT 的一半,然后调用 Uint8Array(),把 frequencyBinCount 作为它的长度参数 —— 这代表我们将对这个尺寸的 FFT 收集多少数据点。

    analyser.fftSize = 2048;
     var bufferLength = analyser.frequencyBinCount;
    @@ -60,7 +60,7 @@ 

    基本概念

    创建一个波形/示波器

    -

    要创建一个示波器视觉效果(感谢 Soledad Penadés 在 Voice-change-O-matic 中提供的源码),我们首先用下面代码框中的代码为标准设置一个 buffer:

    +

    要创建一个示波器视觉效果(感谢 Soledad PenadésVoice-change-O-matic 中提供的源码),我们首先用下面代码框中的代码为标准设置一个 buffer:

    analyser.fftSize = 2048;
     var bufferLength = analyser.fftSize;
    @@ -70,11 +70,11 @@ 

    创建一个波形/示波器

    canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
    -

    现在我们来定义 draw() 函数:

    +

    现在我们来定义 draw() 函数:

    function draw() {
    -

    这里我们用 requestAnimationFrame() 来保持绘图持续更新:

    +

    这里我们用 requestAnimationFrame() 来保持绘图持续更新:

          drawVisual = requestAnimationFrame(draw);
    @@ -94,7 +94,7 @@

    创建一个波形/示波器

    canvasCtx.beginPath();
    -

    用 canvas 画布的总宽度除以数组的长度(与之前定义的 FrequencyBinCount 相等)来决定要花上的每段线条的宽度,之后设置横坐标 (x) 为 0,将画笔移动到起始位置:

    +

    用 canvas 画布的总宽度除以数组的长度(与之前定义的 FrequencyBinCount 相等)来决定要花上的每段线条的宽度,之后设置横坐标 (x) 为 0,将画笔移动到起始位置:

          var sliceWidth = WIDTH * 1.0 / bufferLength;
           var x = 0;
    @@ -131,9 +131,9 @@

    创建一个波形/示波器

    创建一个频率条形图

    -

    另一种小巧的可视化方法是创建频率条形图,在 Voice-change-O-matic 中已经有一个做好的,现在让我们来看看它是如何实现的。

    +

    另一种小巧的可视化方法是创建频率条形图,在 Voice-change-O-matic 中已经有一个做好的,现在让我们来看看它是如何实现的。

    -

    首先,我们设置好解析器和空数组,之后用 clearRect() 清空画布。与之前的唯一区别是我们这次大大减小了 FFT 的大小,这样做的原因是为了使得每个频率条足够宽,让它们看着像“条”而不是“细杆”。

    +

    首先,我们设置好解析器和空数组,之后用 clearRect() 清空画布。与之前的唯一区别是我们这次大大减小了 FFT 的大小,这样做的原因是为了使得每个频率条足够宽,让它们看着像“条”而不是“细杆”。

        analyser.fftSize = 256;
         var bufferLength = analyser.frequencyBinCount;
    @@ -142,7 +142,7 @@ 

    创建一个频率条形图

    canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
    -

    接下来我们写好 draw() 函数,再一次用 requestAnimationFrame() 设置一个循环,这样显示的数据就可以保持刷新,并且每一帧都清空一次画布。

    +

    接下来我们写好 draw() 函数,再一次用 requestAnimationFrame() 设置一个循环,这样显示的数据就可以保持刷新,并且每一帧都清空一次画布。

        function draw() {
           drawVisual = requestAnimationFrame(draw);
    @@ -152,17 +152,17 @@ 

    创建一个频率条形图

    canvasCtx.fillStyle = 'rgb(0, 0, 0)'; canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
    -

    现在我们来设置一个 barWidth 变量,它等于每一个条形的宽度。理论上用花布宽度除以条的个数就可以得到它,但是在这里我们还要乘以 2.5。这是因为有很多返回的频率区域中是没有声音的,我们每天听到的大多数声音也只是在一个很小的频率区域当中。在条形图中我们肯定不想看到大片的空白条,所以我们就把一些能正常显示的条形拉宽来填充这些空白区域。

    +

    现在我们来设置一个 barWidth 变量,它等于每一个条形的宽度。理论上用花布宽度除以条的个数就可以得到它,但是在这里我们还要乘以 2.5。这是因为有很多返回的频率区域中是没有声音的,我们每天听到的大多数声音也只是在一个很小的频率区域当中。在条形图中我们肯定不想看到大片的空白条,所以我们就把一些能正常显示的条形拉宽来填充这些空白区域。

    -

    我们还要设置一个条高度变量 barHeight,还有一个 x 变量来记录当前条形的位置。

    +

    我们还要设置一个条高度变量 barHeight,还有一个 x 变量来记录当前条形的位置。

          var barWidth = (WIDTH / bufferLength) * 2.5;
           var barHeight;
           var x = 0;
    -

    像之前一样,我们进入循环来遍历 dataArray 数组中的数据。在每一次循环过程中,我们让条形的高度 barHeight 等于数组的数值,之后根据高度设置条形的填充色(条形越高,填充色越亮),然后在横坐标 x 处按照设置的宽度和高度的一半把条形画出来(我们最后决定只画高度的一半因为这样条形看起来更美观)。

    +

    像之前一样,我们进入循环来遍历 dataArray 数组中的数据。在每一次循环过程中,我们让条形的高度 barHeight 等于数组的数值,之后根据高度设置条形的填充色(条形越高,填充色越亮),然后在横坐标 x 处按照设置的宽度和高度的一半把条形画出来(我们最后决定只画高度的一半因为这样条形看起来更美观)。

    -

    需要多加解释的一点是每个条形竖直方向的位置,我们在 HEIGHT-barHeight/2 的位置画每一条,这是因为我想让每个条形从底部向上伸出,而不是从顶部向下(如果我们把竖直位置设置为 0 它就会这样画)。所以,我们把竖直位置设置为画布高度减去条形高度的一半,这样每个条形就会从中间向下画,直到画布最底部。

    +

    需要多加解释的一点是每个条形竖直方向的位置,我们在 HEIGHT-barHeight/2 的位置画每一条,这是因为我想让每个条形从底部向上伸出,而不是从顶部向下(如果我们把竖直位置设置为 0 它就会这样画)。所以,我们把竖直位置设置为画布高度减去条形高度的一半,这样每个条形就会从中间向下画,直到画布最底部。

          for(var i = 0; i < bufferLength; i++) {
             barHeight = dataArray[i]/2;
    @@ -183,7 +183,7 @@ 

    创建一个频率条形图

    a series of red bars in a bar graph, showing intensity of different frequencies in an audio signal

    -

    注意: 本文中的案例展现了 {{ domxref("AnalyserNode.getByteFrequencyData()") }} 和 {{ domxref("AnalyserNode.getByteTimeDomainData()") }} 的用法。如果想要查看 {{ domxref("AnalyserNode.getFloatFrequencyData()") }} 和 {{ domxref("AnalyserNode.getFloatTimeDomainData()") }} 的用法,请参考我们的 Voice-change-O-matic-float-data 演示(也能看到 源代码 )——它和本文中出现的 Voice-change-O-matic 功能完全相同,唯一区别就是它使用的是浮点数作数据,而不是本文中的无符号整型数。

    +

    注意: 本文中的案例展现了 {{ domxref("AnalyserNode.getByteFrequencyData()") }} 和 {{ domxref("AnalyserNode.getByteTimeDomainData()") }} 的用法。如果想要查看 {{ domxref("AnalyserNode.getFloatFrequencyData()") }} 和 {{ domxref("AnalyserNode.getFloatTimeDomainData()") }} 的用法,请参考我们的 Voice-change-O-matic-float-data 演示(也能看到 源代码 )——它和本文中出现的 Voice-change-O-matic 功能完全相同,唯一区别就是它使用的是浮点数作数据,而不是本文中的无符号整型数。

    -

     

    +

    diff --git a/files/zh-cn/web/api/web_audio_api/web_audio_spatialization_basics/index.html b/files/zh-cn/web/api/web_audio_api/web_audio_spatialization_basics/index.html index 01debe5872964e..61c64320f405a9 100644 --- a/files/zh-cn/web/api/web_audio_api/web_audio_spatialization_basics/index.html +++ b/files/zh-cn/web/api/web_audio_api/web_audio_spatialization_basics/index.html @@ -3,25 +3,25 @@ slug: Web/API/Web_Audio_API/Web_audio_spatialization_basics translation_of: Web/API/Web_Audio_API/Web_audio_spatialization_basics --- -

    正如大量的各种声音处理(或者其他)选择是不够的,WebAduioAPI 也包含了一些工具,可以让你模仿听众在声源周围移动时的声音差异,例如当你在 3D 游戏声源中移动时声音的平移。官方名词称为 空间化,这篇文章将会介绍如何实现这样一个系统的基础知识。

    +

    正如大量的各种声音处理(或者其他)选择是不够的,WebAduioAPI 也包含了一些工具,可以让你模仿听众在声源周围移动时的声音差异,例如当你在 3D 游戏声源中移动时声音的平移。官方名词称为 空间化,这篇文章将会介绍如何实现这样一个系统的基础知识。

    空间化的基础知识

    -

    在 Web Audio 中,复杂的 3D 空间化是使用 {{domxref("PannerNode")}} 创建的,用外行人的话来说就是一个使音频出现在 3D 空间中的很酷的数学。想象一下声音从你头上飞过,爬到你身后,在你面前移动。诸如此类的事情。

    +

    在 Web Audio 中,复杂的 3D 空间化是使用 {{domxref("PannerNode")}} 创建的,用外行人的话来说就是一个使音频出现在 3D 空间中的很酷的数学。想象一下声音从你头上飞过,爬到你身后,在你面前移动。诸如此类的事情。

    -

    它对 WebXR 和游戏非常有用。在 3D 空间中,它是实现逼真的音频效果的唯一方式。像 three.js 和  A-frame 这样的库在处理声音时就利用了它的潜力。值得注意的是,你不必在完整的 3D 空间中移动声音 - 你可以只使用 2D 平面,因此如果你计划实现一个 2D 游戏,这依然是你要寻找的节点。

    +

    它对 WebXR 和游戏非常有用。在 3D 空间中,它是实现逼真的音频效果的唯一方式。像 three.jsA-frame 这样的库在处理声音时就利用了它的潜力。值得注意的是,你不必在完整的 3D 空间中移动声音 - 你可以只使用 2D 平面,因此如果你计划实现一个 2D 游戏,这依然是你要寻找的节点。

    -

    注意:还有一个设计用于处理创建简单的左右立体声平移效果的  {{domxref("StereoPannerNode")}} 。这使用起来更简单,但显然无处可用。如果你只想要一个简单的立体声平移效果,我们的 StereoPannerNode 示例请参阅源码)应该可以为你提供所需的一切。

    +

    注意:还有一个设计用于处理创建简单的左右立体声平移效果的 {{domxref("StereoPannerNode")}} 。这使用起来更简单,但显然无处可用。如果你只想要一个简单的立体声平移效果,我们的 StereoPannerNode 示例请参阅源码)应该可以为你提供所需的一切。

    3D boombox 演示

    -

    为了演示 3D 空间化,我们在 Using the Web Audio API 指南中的 boombox 演示的基础上创建一个修改版本。参见 3D spatialization demo live (同时也可以看 source code

    +

    为了演示 3D 空间化,我们在 Using the Web Audio API 指南中的 boombox 演示的基础上创建一个修改版本。参见 3D spatialization demo live (同时也可以看 source code

    A simple UI with a rotated boombox and controls to move it left and right and in and out, and rotate it.

    -

    音箱放置于房间中(由浏览器视区边缘定义),在本 demo 中我们可以通过提供的控件移动和旋转它。当我们移动音箱时,它产生的声音会相应的改变,当它在移动到房间的左侧或右侧时声音平移,或当它远离用户时变得安静,或旋转使得扬声器背离它们等。这是通过给 PannerNode 对象实例设置不同的与该运动有关的属性来实现模拟空间化。

    +

    音箱放置于房间中(由浏览器视区边缘定义),在本 demo 中我们可以通过提供的控件移动和旋转它。当我们移动音箱时,它产生的声音会相应的改变,当它在移动到房间的左侧或右侧时声音平移,或当它远离用户时变得安静,或旋转使得扬声器背离它们等。这是通过给 PannerNode 对象实例设置不同的与该运动有关的属性来实现模拟空间化。

    注意:如果你使用耳机或者其他某种环绕声系统连接计算机,体验会更好。

    @@ -29,7 +29,7 @@

    3D boombox 演示

    创建 audio 收听者

    -

    让我们开始! {{domxref("BaseAudioContext")}}( {{domxref("AudioContext")}} 扩展自该接口)有一个 listener 属性,返回一个 {{domxref("AudioListener")}} 对象。这代表着场景收听者,通常是使用者(用户)。你可以定义他 (她) 们在空间中的位置和他 (她) 们面向的方向。他 (她) 们保持静止。 pannerNode 可以计算出声音相对于收听者位置的位置。

    +

    让我们开始! {{domxref("BaseAudioContext")}}( {{domxref("AudioContext")}} 扩展自该接口)有一个 listener 属性,返回一个 {{domxref("AudioListener")}} 对象。这代表着场景收听者,通常是使用者(用户)。你可以定义他 (她) 们在空间中的位置和他 (她) 们面向的方向。他 (她) 们保持静止。 pannerNode 可以计算出声音相对于收听者位置的位置。

    让我们创建我们的上下文和监听器,并设置收听者的位置来模拟一个看向(探索)我们房间的人:

    @@ -45,7 +45,7 @@

    创建 audio 收听者

    listener.positionY.value = posY; listener.positionZ.value = posZ-5;
    -

    我们可以使用 positionX 将收听者向左/右移动,使用 positionY 向上/下移动,或使用 positionZ 移出/入房间。在这里,我们将收听者设置在视口中间同时稍微位于音箱的前方。我们还可以设置收听者面对的方向。这些默认值工作良好:

    +

    我们可以使用 positionX 将收听者向左/右移动,使用 positionY 向上/下移动,或使用 positionZ 移出/入房间。在这里,我们将收听者设置在视口中间同时稍微位于音箱的前方。我们还可以设置收听者面对的方向。这些默认值工作良好:

    listener.forwardX.value = 0;
     listener.forwardY.value = 0;
    @@ -58,47 +58,47 @@ 

    创建 audio 收听者

    创建 panner 节点

    -

    让我们创建 {{domxref("PannerNode")}}节点,这有很多与之相关的属性。让我们来一一看看:

    +

    让我们创建 {{domxref("PannerNode")}}节点,这有很多与之相关的属性。让我们来一一看看:

    -

    首先我们可以设置 panningModel。这是用于在 3D 空间中定位音频的空间化算法。我们可以将其设置为:

    +

    首先我们可以设置 panningModel。这是用于在 3D 空间中定位音频的空间化算法。我们可以将其设置为:

    -

    equalpower — 计算出默认和一般方式的平移。

    +

    equalpower — 计算出默认和一般方式的平移。

    -

    HRTF — 这代表 'Head-related transfer function' ,在弄清楚声音的位置时,会考虑人脑(对声音的处理)。

    +

    HRTF — 这代表 'Head-related transfer function' ,在弄清楚声音的位置时,会考虑人脑(对声音的处理)。

    -

    非常聪明的东西,让我们使用 HRTF 模型!

    +

    非常聪明的东西,让我们使用 HRTF 模型!

    const pannerModel = 'HRTF';
    -

    属性 coneInnerAngle 和 coneOuterAngle 指定音量发出的位置。默认情况下,两者都是 360 度。我们可以定义音箱扬声器拥有较小的锥体。内锥是总是模拟增益(音量)最大值的地方,外锥是增益开始下降的地方。

    +

    属性 coneInnerAngleconeOuterAngle 指定音量发出的位置。默认情况下,两者都是 360 度。我们可以定义音箱扬声器拥有较小的锥体。内锥是总是模拟增益(音量)最大值的地方,外锥是增益开始下降的地方。

    -

    增益通过 coneOuterGain 值来减少。让我们创建之后将会用于这些参数的常量:

    +

    增益通过 coneOuterGain 值来减少。让我们创建之后将会用于这些参数的常量:

    const innerCone = 60;
     const outerCone = 90;
     const outerGain = 0.3;
     
    -

    下一个参数是 distanceModel — 这只能设置为 linearinverse, 或者 exponential。这些是不同的算法,用于在音频源远离收听者时减小音频源的音量。
    +

    下一个参数是 distanceModel — 这只能设置为 linear, inverse, 或者 exponential。这些是不同的算法,用于在音频源远离收听者时减小音频源的音量。
    我们将使用linear,因为它很简单:

    const distanceModel = 'linear';
     
    -

    我们可以设置源和收听者之间的最大距离 (maxDistance)  — 如果源距离此点更远,则音量将不再减小。这可能很有用,因为你可能会发现你想要模拟距离,但是音量会下降,而实际上并不是你想要的。默认情况下,它是 10,000(无单位的相对值)。我们可以像这样保持它:

    +

    我们可以设置源和收听者之间的最大距离 (maxDistance) — 如果源距离此点更远,则音量将不再减小。这可能很有用,因为你可能会发现你想要模拟距离,但是音量会下降,而实际上并不是你想要的。默认情况下,它是 10,000(无单位的相对值)。我们可以像这样保持它:

    const maxDistance = 10000;
     
    -

    还有一个参考距离 (refDistance),由距离模型使用。我们也可以将其保持为默认值 1

    +

    还有一个参考距离 (refDistance),由距离模型使用。我们也可以将其保持为默认值 1

    const refDistance = 1;
    -

    然后就是 roll-off 因子 (rolloffFactor) — 描述随着 panner 远离收听者,音量减小的速度有多快。默认值为 1;让我们使其大一些以放大我们的动作。

    +

    然后就是 roll-off 因子 (rolloffFactor) — 描述随着 panner 远离收听者,音量减小的速度有多快。默认值为 1;让我们使其大一些以放大我们的动作。

    const rollOff = 10;
    -

    现在我们可以开始设置我们 boombox 的位置和方向。这与我们如何设置收听者很像。
    +

    现在我们可以开始设置我们 boombox 的位置和方向。这与我们如何设置收听者很像。
    这些也是我们在使用界面上的控件时要改变的参数。

    const positionX = posX;
    @@ -110,7 +110,7 @@ 

    创建 panner 节点

    const orientationZ = -1.0;
    -

    注意 z 方向的负值 - 这会将 boombox 设置为面向我们。正值会使声源背离我们。 
    +

    注意 z 方向的负值 - 这会将 boombox 设置为面向我们。正值会使声源背离我们。
    让我们使用相关的构造函数来创建我们的 panner 节点,并传入我们在上面设置的所有参数:

    const panner = new PannerNode(audioCtx, {
    @@ -136,9 +136,9 @@ 

    创建 panner 节点

    移动 boombox

    -

    现在我们将在我们的“房间”中四处移动 boombox。我们已经设置了一些控件来执行此操作。我们可以左右移动,上下移动,来回移动;我们也可以旋转它。声音方向来自前面的 boombox 的扬声器,因此当我们旋转它时,我们可以改变声音的方向 - 即当音箱旋转 180 度并背向我们时,使其向后投射。 
    - 我们需要为界面设置一些东西。首先,我们将获得我们想要移动的元素的引用,然后存储我们在设置 CSS transforms  来实际执行移动时将要更改的值的引用。
    - 最后,我们将设置一些边界值,以便我们的 boombox 在任何方向上都不会走得太远:

    +

    现在我们将在我们的“房间”中四处移动 boombox。我们已经设置了一些控件来执行此操作。我们可以左右移动,上下移动,来回移动;我们也可以旋转它。声音方向来自前面的 boombox 的扬声器,因此当我们旋转它时,我们可以改变声音的方向 - 即当音箱旋转 180 度并背向我们时,使其向后投射。
    + 我们需要为界面设置一些东西。首先,我们将获得我们想要移动的元素的引用,然后存储我们在设置 CSS transforms 来实际执行移动时将要更改的值的引用。
    + 最后,我们将设置一些边界值,以便我们的 boombox 在任何方向上都不会走得太远:

    const moveControls = document.querySelector('#move-controls').querySelectorAll('button');
     const boombox = document.querySelector('.boombox-body');
    @@ -160,7 +160,7 @@ 

    移动 boombox

    const innerBound = 0.1; const outerBound = 1.5;
    -

    让我们创建一个函数,将我们想要移动的方向作为参数,并且修改 CSS 变换及更新我们的 panner 节点的位置和方向属性值以适当地更改声音。 
    +

    让我们创建一个函数,将我们想要移动的方向作为参数,并且修改 CSS 变换及更新我们的 panner 节点的位置和方向属性值以适当地更改声音。
    首先让我们看看左,右,上,下值,因为这些非常简单。我们将沿着这些轴移动 boombox,并更新合适的位置。

    function moveBoombox(direction) {
    @@ -207,8 +207,8 @@ 

    移动 boombox

    } break;
    -

    然而,我们的旋转值稍为复杂,因为我们需要在周围移动声音。我们不仅需要更新两个轴值(例如,如果围绕 x 轴旋转对象,则更新该对象的 y 和 z 坐标),还需要为此进行更多的数学运算。旋转是一个圆圈,我们需要 Math.sin 和 Math.cos 来帮助我们绘制这个圆圈。 
    - 让我们设置一个旋转速率,我们将会将它转换为弧度范围的值,以便稍后在 Math.sin 和 Math.cos 中使用,当我们在旋转我们的 boombox ,需要计算出新的坐标时:

    +

    然而,我们的旋转值稍为复杂,因为我们需要在周围移动声音。我们不仅需要更新两个轴值(例如,如果围绕 x 轴旋转对象,则更新该对象的 y 和 z 坐标),还需要为此进行更多的数学运算。旋转是一个圆圈,我们需要 Math.sinMath.cos 来帮助我们绘制这个圆圈。
    + 让我们设置一个旋转速率,我们将会将它转换为弧度范围的值,以便稍后在 Math.sinMath.cos 中使用,当我们在旋转我们的 boombox ,需要计算出新的坐标时:

    // set up rotation constants
     const rotationRate = 60; // bigger number equals slower sound rotation
    @@ -223,7 +223,7 @@ 

    移动 boombox

    const degreesY = (q * 180)/Math.PI;
    -

    我们以左旋转为例看一看。我们需要更改 panner x 方向和 z 方向的坐标,以围绕 y 轴移动进行左旋转:

    +

    我们以左旋转为例看一看。我们需要更改 panner x 方向和 z 方向的坐标,以围绕 y 轴移动进行左旋转:

    case 'rotate-left':
       transform.rotateY -= degreesY;
    @@ -238,7 +238,7 @@ 

    移动 boombox

    panner.orientationZ.value = z; break;
    -

    这有点令人困惑,但我们正在做的是使用 sin 和 cos 来帮助我们计算出旋转 boombox 所需的圆周运动的坐标。 
    +

    这有点令人困惑,但我们正在做的是使用 sin 和 cos 来帮助我们计算出旋转 boombox 所需的圆周运动的坐标。
    我们可以为所有轴做到这一点。只需要选择正确的方向进行更新,以及我们是想要正增量还是负增量。

    case 'rotate-right':
    @@ -273,7 +273,7 @@ 

    移动 boombox

    break;

    最后一件事 - 我们需要更新 CSS 并保留鼠标事件最后一步的引用。
    - 这是最终的  moveBoombox 函数。

    + 这是最终的 moveBoombox 函数。

    function moveBoombox(direction, prevMove) {
         switch (direction) {
    @@ -400,10 +400,10 @@ 

    连接我们的控件

    概述

    -

    希望本文能让你深入了解 Web Audio 空间化的工作原理,以及每个{{domxref("PannerNode")}} 属性的作用(其中有很多属性)。这些值有时难以操作,根据你的使用情况,可能需要一些时间才能使它们正确。

    +

    希望本文能让你深入了解 Web Audio 空间化的工作原理,以及每个{{domxref("PannerNode")}} 属性的作用(其中有很多属性)。这些值有时难以操作,根据你的使用情况,可能需要一些时间才能使它们正确。

    -

    注意:音频空间化在不同浏览器中的听起来略有不同。 panner 节点在底层做了一些非常复杂的数学运算;这里有 许多测试,因此你可以跟踪不同平台上此节点的内部工作状态。

    +

    注意:音频空间化在不同浏览器中的听起来略有不同。 panner 节点在底层做了一些非常复杂的数学运算;这里有 许多测试,因此你可以跟踪不同平台上此节点的内部工作状态。

    再次,您可以在 这里查看最终的演示,同时最终的源代码在这里。还有一个 Codepen 的演示

    diff --git a/files/zh-cn/web/api/web_authentication_api/index.html b/files/zh-cn/web/api/web_authentication_api/index.html index 5268b4e62e6bf5..cb7d3bc40bf322 100644 --- a/files/zh-cn/web/api/web_authentication_api/index.html +++ b/files/zh-cn/web/api/web_authentication_api/index.html @@ -5,20 +5,20 @@ ---
    {{SeeCompatTable}}{{securecontext_header}}{{DefaultAPISidebar("Web Authentication API")}}
    -

    Web Authentication API 继承自 Credential Management API ,使用公钥密码学使得验证更强壮,不需要 SMS 文本就能实现无密码验证和安全的双因素验证。

    +

    Web Authentication API 继承自 Credential Management API ,使用公钥密码学使得验证更强壮,不需要 SMS 文本就能实现无密码验证和安全的双因素验证。

    Web authentication 概念和用例

    -

    Web Authentication API(也称作 WebAuthn)使用asymmetric (public-key) cryptography (非对称加密)替代密码或 SMS 短信在网站上注册、登录、second-factor authentication(双因素验证)。 解决了 phishing(钓鱼)、data breaches(数据破坏)、SMS 文本攻击、其它双因素验证等重大安全问题,同时显著提高了易用性(因为用户不必管理许多越来越复杂的密码)。

    +

    Web Authentication API(也称作 WebAuthn)使用asymmetric (public-key) cryptography (非对称加密)替代密码或 SMS 短信在网站上注册、登录、second-factor authentication(双因素验证)。 解决了 phishing(钓鱼)、data breaches(数据破坏)、SMS 文本攻击、其它双因素验证等重大安全问题,同时显著提高了易用性(因为用户不必管理许多越来越复杂的密码)。

    -

    许多网站已实现用户注册账号,登录已有账号的页面, WebAuthn 作为这些页面的替代和补充。类似其他形式的 Credential Management API(凭据管理 API)。Web Authentication API 有两个对应于注册和登录的基本方法:

    +

    许多网站已实现用户注册账号,登录已有账号的页面, WebAuthn 作为这些页面的替代和补充。类似其他形式的 Credential Management API(凭据管理 API)。Web Authentication API 有两个对应于注册和登录的基本方法:

    • navigator.credentials.create() - 当使用 publicKey 选项时,创建一个新的凭据,无论是用于注册新账号还是将新的非对称密钥凭据与已有的账号关联。
    • navigator.credentials.get() - 当使用 publicKey 选项时,使用一组现有的凭据进行身份验证服务,无论是用于用户登录还是双因素验证中的一步。
    -

    请注意: create() 和 get() 都需要在 Secure Context(安全上下文)中执行(例如 - 使用 https 连接,或是使用 localhost),当浏览器不是在安全环境下时它们将不可用。

    +

    请注意: create() 和 get() 都需要在 Secure Context(安全上下文)中执行(例如 - 使用 https 连接,或是使用 localhost),当浏览器不是在安全环境下时它们将不可用。

    在基础实现中,create() 和 get() 会从服务器接收一个大随机数,称为挑战。挑战将由私钥签名并返回给服务器。这可以服务器证明用户拥有身份验证所需要的私钥,与此同时没有任何密码在网络上被传输。

    @@ -26,12 +26,12 @@

    Web authentication 概念和用例
  • 服务器 - WebAuthn API 旨在在服务器(也称为服务或依赖方)上注册新的凭据,以供稍后在同一服务器上使用相同的凭据对用户进行身份验证。
  • -
  • 认证器 - 凭据将被创建并存储于被称为认证器的设备中。这是认证过程中的一个新概念:使用密码进行身份验证时,密码存储在用户的大脑中而不需要其他设备;使用 WebAuthn 进行身份验证时,密码则被存储在认证器中的密钥对替代。认证器可以被嵌入到操作系统中(例如 Windows Hello),也可以是 USB 或蓝牙安全密钥等物理令牌。
  • +
  • 认证器 - 凭据将被创建并存储于被称为认证器的设备中。这是认证过程中的一个新概念:使用密码进行身份验证时,密码存储在用户的大脑中而不需要其他设备;使用 WebAuthn 进行身份验证时,密码则被存储在认证器中的密钥对替代。认证器可以被嵌入到操作系统中(例如 Windows Hello),也可以是 USB 或蓝牙安全密钥等物理令牌。
  • 注册

    -

    一个典型的注册过程包括如图 1 所示的六个步骤,这些在稍后会进一步描述。这是一个注册过程的概览,所需数据已经被简化。所有的必填字段、可选字段及它们在创建注册请求中的含义可以在 {{domxref("PublicKeyCredentialCreationOptions")}} 字典中找到。类似地,完整的响应字段可以在 {{domxref("PublicKeyCredential")}} 接口(其中 {{domxref("PublicKeyCredential.response")}} 是 {{domxref("AuthenticatorAttestationResponse")}} 的接口)中找到。请注意大多数编写程序的 JavaScript 程序员只会关心第 1 步和第 5 步,分别对应 create() 函数的调用和返回。但是,了解步骤 2 到 4 对于理解在浏览器和认证器中发生了什么以及返回数据的含义至关重要。

    +

    一个典型的注册过程包括如图 1 所示的六个步骤,这些在稍后会进一步描述。这是一个注册过程的概览,所需数据已经被简化。所有的必填字段、可选字段及它们在创建注册请求中的含义可以在 {{domxref("PublicKeyCredentialCreationOptions")}} 字典中找到。类似地,完整的响应字段可以在 {{domxref("PublicKeyCredential")}} 接口(其中 {{domxref("PublicKeyCredential.response")}} 是 {{domxref("AuthenticatorAttestationResponse")}} 的接口)中找到。请注意大多数编写程序的 JavaScript 程序员只会关心第 1 步和第 5 步,分别对应 create() 函数的调用和返回。但是,了解步骤 2 到 4 对于理解在浏览器和认证器中发生了什么以及返回数据的含义至关重要。

    WebAuthn registration component and dataflow diagram

    @@ -40,13 +40,13 @@

    注册

    注册步骤如下:

      -
    1. 应用程序请求注册 - 应用程序发出注册请求。这个请求的协议和格式不在 WebAuthn 标准的范围内。
    2. -
    3. 服务器发送挑战、用户信息和依赖方信息 - 服务器将挑战、用户信息和依赖方信息发送回应用程序。在这里,协议和格式不在 WebAuthn 标准的范围内。通常,这可以是基于 HTTPS 连接的 REST(可能会使用 XMLHttpRequest 或 Fetch)API。不过只要在安全连接中,也可以使用 SOAPRFC 2549 或几乎任何其他协议。从服务器接收到的参数将传递给 create() ,大部分情况下只需很少修改甚至不需要做任何修改。create() 会返回一个Promise,并返回包含 {{domxref("AuthenticatorAttestationResponse")}} 的 {{domxref("PublicKeyCredential")}}。需要注意的是挑战必须是随机的 buffer(至少 16 字节),并且必须在服务器上生成以确保安全。
    4. -
    5. 浏览器向认证器调用 authenticatorMakeCredential() - 在浏览器内部,浏览器将验证参数并用默认值补全缺少的参数,然后这些参数会变为 {{domxref("AuthenticatorResponse.clientDataJSON")}}。其中最重要的参数之一是 origin,它是 clientData 的一部分,同时服务器将能在稍后验证它。调用 create() 的参数与 clientDataJSON 的 SHA-256 哈希一起传递到身份验证器(只有哈希被发送是因为与认证器的连接可能是低带宽的 NFC 或蓝牙连接,之后认证器只需对哈希签名以确保它不会被篡改)。
    6. -
    7. 认证器创建新的密钥对和证明 - 在进行下一步之前,认证器通常会以某种形式要求用户确认,如输入 PIN,使用指纹,进行虹膜扫描等,以证明用户在场并同意注册。之后,认证器将创建一个新的非对称密钥对,并安全地存储私钥以供将来验证使用。公钥则将成为证明的一部分,被在制作过程中烧录于认证器内的私钥进行签名。这个私钥会具有可以被验证的证书链。
    8. -
    9. 认证器将数据返回浏览器 - 新的公钥、全局唯一的凭证 ID 和其他的证明数据会被返回到浏览器,成为 attestationObject。
    10. -
    11. 浏览器生成最终的数据,应用程序将响应发送到服务器 - create() 的 Promise 会返回一个 {{domxref("PublicKeyCredential")}},其中包含全局唯一的证书 ID {{domxref("PublicKeyCredential.rawId")}}  和包含 {{domxref("AuthenticatorResponse.clientDataJSON")}} 的响应 {{domxref("AuthenticatorAttestationResponse")}}。你可以使用任何你喜欢的格式和协议将 {{domxref("PublicKeyCredential")}} 发送回服务器(注意 ArrayBuffer 类型的属性需要使用 base64 或类似编码方式进行编码)
    12. -
    13. 服务器验证数据并完成注册 - 最后,服务器需要执行一系列检查以确保注册完成且数据未被篡改。步骤包括: +
    14. 应用程序请求注册 - 应用程序发出注册请求。这个请求的协议和格式不在 WebAuthn 标准的范围内。
    15. +
    16. 服务器发送挑战、用户信息和依赖方信息 - 服务器将挑战、用户信息和依赖方信息发送回应用程序。在这里,协议和格式不在 WebAuthn 标准的范围内。通常,这可以是基于 HTTPS 连接的 REST(可能会使用 XMLHttpRequestFetch)API。不过只要在安全连接中,也可以使用 SOAPRFC 2549 或几乎任何其他协议。从服务器接收到的参数将传递给 create() ,大部分情况下只需很少修改甚至不需要做任何修改。create() 会返回一个Promise,并返回包含 {{domxref("AuthenticatorAttestationResponse")}} 的 {{domxref("PublicKeyCredential")}}。需要注意的是挑战必须是随机的 buffer(至少 16 字节),并且必须在服务器上生成以确保安全。
    17. +
    18. 浏览器向认证器调用 authenticatorMakeCredential() - 在浏览器内部,浏览器将验证参数并用默认值补全缺少的参数,然后这些参数会变为 {{domxref("AuthenticatorResponse.clientDataJSON")}}。其中最重要的参数之一是 origin,它是 clientData 的一部分,同时服务器将能在稍后验证它。调用 create() 的参数与 clientDataJSON 的 SHA-256 哈希一起传递到身份验证器(只有哈希被发送是因为与认证器的连接可能是低带宽的 NFC 或蓝牙连接,之后认证器只需对哈希签名以确保它不会被篡改)。
    19. +
    20. 认证器创建新的密钥对和证明 - 在进行下一步之前,认证器通常会以某种形式要求用户确认,如输入 PIN,使用指纹,进行虹膜扫描等,以证明用户在场并同意注册。之后,认证器将创建一个新的非对称密钥对,并安全地存储私钥以供将来验证使用。公钥则将成为证明的一部分,被在制作过程中烧录于认证器内的私钥进行签名。这个私钥会具有可以被验证的证书链。
    21. +
    22. 认证器将数据返回浏览器 - 新的公钥、全局唯一的凭证 ID 和其他的证明数据会被返回到浏览器,成为 attestationObject。
    23. +
    24. 浏览器生成最终的数据,应用程序将响应发送到服务器 - create() 的 Promise 会返回一个 {{domxref("PublicKeyCredential")}},其中包含全局唯一的证书 ID {{domxref("PublicKeyCredential.rawId")}} 和包含 {{domxref("AuthenticatorResponse.clientDataJSON")}} 的响应 {{domxref("AuthenticatorAttestationResponse")}}。你可以使用任何你喜欢的格式和协议将 {{domxref("PublicKeyCredential")}} 发送回服务器(注意 ArrayBuffer 类型的属性需要使用 base64 或类似编码方式进行编码)
    25. +
    26. 服务器验证数据并完成注册 - 最后,服务器需要执行一系列检查以确保注册完成且数据未被篡改。步骤包括:
      1. 验证接收到的挑战与发送的挑战相同
      2. 确保 origin 与预期的一致
      3. @@ -57,7 +57,7 @@

        注册

        验证

        -

        用户在 WebAuthn 中注册完成之后就可以使用 WebAuthn 进行身份验证(或者说登录)。验证流程与注册相似,图 2 所示的验证流程也与图 1 相似。不过,注册和验证之间的主要区别在于:1) 验证不需要用户或信赖方信息;2) 验证使用之前生成的密钥对创建一个断言,而不是使用在认证器在制造过程中烧录的密钥对创建证明。和上文一样,下面的验证流程图只是一个概况,并非详细描述。验证所需的数据可以在 {{domxref("PublicKeyCredentialRequestOptions")}} 字典中找到;返回的数据可以在 {{domxref("PublicKeyCredential")}} 接口(其中 {{domxref("PublicKeyCredential.response")}} 是 {{domxref("AuthenticatorAssertionResponse")}} 的接口)中找到。

        +

        用户在 WebAuthn 中注册完成之后就可以使用 WebAuthn 进行身份验证(或者说登录)。验证流程与注册相似,图 2 所示的验证流程也与图 1 相似。不过,注册和验证之间的主要区别在于:1) 验证不需要用户或信赖方信息;2) 验证使用之前生成的密钥对创建一个断言,而不是使用在认证器在制造过程中烧录的密钥对创建证明。和上文一样,下面的验证流程图只是一个概况,并非详细描述。验证所需的数据可以在 {{domxref("PublicKeyCredentialRequestOptions")}} 字典中找到;返回的数据可以在 {{domxref("PublicKeyCredential")}} 接口(其中 {{domxref("PublicKeyCredential.response")}} 是 {{domxref("AuthenticatorAssertionResponse")}} 的接口)中找到。

        WebAuthn authentication component and dataflow diagram

        @@ -65,33 +65,33 @@

        验证

        1. Application Requests Authentication - The application makes the initial authentication request. The protocol and format of this request is outside of the scope of WebAuthn.
        2. -
        3. Server Sends Challenge - The server sends a challenge JavaScript program. The protocol for communicating with the server is not specified and is outside of the scope of WebAuthn. Typically, server communications would be REST over https (probably using XMLHttpRequest or Fetch), but they could also be SOAP, RFC 2549 or nearly any other protocol provided that the protocol is secure. The parameters received from the server will be passed to the get() call, typically with little or no modification. Note that it is absolutely critical that the challenge be a large buffer of random information (e.g. - more than 100 bytes) and it MUST be generated on the server in order to ensure the security of the authentication process.
        4. -
        5. Browser Call authenticatorGetCredential()  on Authenticator - Internally, the browser will validate the parameters and fill in any defaults, which become the {{domxref("AuthenticatorResponse.clientDataJSON")}}. One of the most important parameters is the origin, which recorded as part of the clientData so that the origin can be verified by the server later. The parameters to the create() call are passed to the authenticator, along with a SHA-256 hash of the clientDataJSON (only a hash is sent because the link to the authenticator may be a low-bandwidth NFC or Bluetooth link and the authenticator is just going to sign over the hash to ensure that it isn't tampered with).
        6. +
        7. Server Sends Challenge - The server sends a challenge JavaScript program. The protocol for communicating with the server is not specified and is outside of the scope of WebAuthn. Typically, server communications would be REST over https (probably using XMLHttpRequest or Fetch), but they could also be SOAP, RFC 2549 or nearly any other protocol provided that the protocol is secure. The parameters received from the server will be passed to the get() call, typically with little or no modification. Note that it is absolutely critical that the challenge be a large buffer of random information (e.g. - more than 100 bytes) and it MUST be generated on the server in order to ensure the security of the authentication process.
        8. +
        9. Browser Call authenticatorGetCredential() on Authenticator - Internally, the browser will validate the parameters and fill in any defaults, which become the {{domxref("AuthenticatorResponse.clientDataJSON")}}. One of the most important parameters is the origin, which recorded as part of the clientData so that the origin can be verified by the server later. The parameters to the create() call are passed to the authenticator, along with a SHA-256 hash of the clientDataJSON (only a hash is sent because the link to the authenticator may be a low-bandwidth NFC or Bluetooth link and the authenticator is just going to sign over the hash to ensure that it isn't tampered with).
        10. Authenticator Creates an Assertion - The authenticator finds a credential for this service that matches the Relying Party ID and prompts a user to consent to the authentication. Assuming both of those steps are successful, the authenticator will create a new assertion by signing over the clientDataHash and authenticatorData with the private key generated for this account during the registration call.
        11. -
        12. Authenticator Returns Data to Browser -  The authenticator returns the authenticatorData and assertion signature back to the browser.
        13. -
        14. Browser Creates Final Data, Application sends response to Server - The browser resolves the Promise to a {{domxref("PublicKeyCredential")}} with a {{domxref("PublicKeyCredential.response")}} that contains the {{domxref("AuthenticatorAssertionResponse")}}. It is up to the JavaScript application to transmit this data back to the server using any protocol and format of its choice.
        15. -
        16. Server Validates and Finalizes Authentication - Upon receiving the result of the authentication request, the server performs validation of the response such as: +
        17. Authenticator Returns Data to Browser - The authenticator returns the authenticatorData and assertion signature back to the browser.
        18. +
        19. Browser Creates Final Data, Application sends response to Server - The browser resolves the Promise to a {{domxref("PublicKeyCredential")}} with a {{domxref("PublicKeyCredential.response")}} that contains the {{domxref("AuthenticatorAssertionResponse")}}. It is up to the JavaScript application to transmit this data back to the server using any protocol and format of its choice.
        20. +
        21. Server Validates and Finalizes Authentication - Upon receiving the result of the authentication request, the server performs validation of the response such as:
          1. Using the public key that was stored during the registration request to validate the signature by the authenticator.
          2. Ensuring that the challenge that was signed by the authenticator matches the challenge that was generated by the server.
          3. Checking that the Relying Party ID is the one expected for this service.
          - A full list of the steps for validating an assertion can be found in the WebAuthn specification. Assuming the validation is successful, the server will note that the user is now authenticated. This is outside the scope of the WebAuthn specification, but one option would be to drop a new cookie for the user session.
        22. + A full list of the steps for validating an assertion can be found in the WebAuthn specification. Assuming the validation is successful, the server will note that the user is now authenticated. This is outside the scope of the WebAuthn specification, but one option would be to drop a new cookie for the user session.

        Interfaces

        {{domxref("CredentialsContainer")}}
        -
        WebAuthn extends the Credential Management API's create() and get() methods to take a new option: publicKey. When the publicKey option is passed to create() and / or get(), the Credential Management API will create a new public key pair or get an authentication for a key pair, respectively.
        +
        WebAuthn extends the Credential Management API's create() and get() methods to take a new option: publicKey. When the publicKey option is passed to create() and / or get(), the Credential Management API will create a new public key pair or get an authentication for a key pair, respectively.
        {{domxref("PublicKeyCredential")}}
        A credential for logging in to a service using an un-phishable and data-breach resistant asymmetric key pair instead of a password.
        {{domxref("AuthenticatorResponse")}}
        -
        Part of the PublicKeyCredential, the AuthenticatorResponse includes information from the browser (such as the challenge and origin); as well as information from the authenticator such as an AuthenticatorAttestationResponse (for new credentials) or an AuthenticatorAssertionResponse (when authenticating with existing credentials).
        +
        Part of the PublicKeyCredential, the AuthenticatorResponse includes information from the browser (such as the challenge and origin); as well as information from the authenticator such as an AuthenticatorAttestationResponse (for new credentials) or an AuthenticatorAssertionResponse (when authenticating with existing credentials).
        {{domxref("AuthenticatorAttestationResponse")}}
        -
        When a PublicKeyCredential has been created with the create() call, it will include an AuthenticatorAttestationResponse. This is the authenticator's way of providing a cryptographic root of trust for the new key pair that has been generated.
        +
        When a PublicKeyCredential has been created with the create() call, it will include an AuthenticatorAttestationResponse. This is the authenticator's way of providing a cryptographic root of trust for the new key pair that has been generated.
        {{domxref("AuthenticatorAssertionResponse")}}
        -
        When a PublicKeyCredential is the result of a get() call, it will include an AuthenticatorAssertionResponse. This is the authenticator's way of proving to a service that it has the key pair and that the authentication request is valid and approved.
        +
        When a PublicKeyCredential is the result of a get() call, it will include an AuthenticatorAssertionResponse. This is the authenticator's way of proving to a service that it has the key pair and that the authentication request is valid and approved.

        Options

        @@ -174,7 +174,7 @@

        Examples

    @@ -220,5 +220,5 @@

    PublicKeyCredentialRequestOptions

    See also

    diff --git a/files/zh-cn/web/api/web_crypto_api/index.html b/files/zh-cn/web/api/web_crypto_api/index.html index 44feb63afba505..988c918d545382 100644 --- a/files/zh-cn/web/api/web_crypto_api/index.html +++ b/files/zh-cn/web/api/web_crypto_api/index.html @@ -5,10 +5,10 @@ ---

    {{DefaultAPISidebar("Web Crypto API")}}

    -

    Web Crypto API 为脚本提供加密了一套关于密码(学)的接口,以便用于构建需要使用密码的系统。

    +

    Web Crypto API 为脚本提供加密了一套关于密码(学)的接口,以便用于构建需要使用密码的系统。

    -

    警告: Web Crypto API 提供了许多底层的密码学原语。它们很容易被误用,并且踩到一些微妙的陷阱。

    +

    警告: Web Crypto API 提供了许多底层的密码学原语。它们很容易被误用,并且踩到一些微妙的陷阱。

    即使正确地使用了这些基础的密码学函数,密钥管理和整体的安全系统设计也是非常困难的,这些通常都是属于安全专家的领域。

    @@ -19,7 +19,7 @@

    接口

    -

    有些浏览器实现了叫做 {{domxref("Crypto")}} 的接口,但是缺乏良好的定义,或在密码学上是不健全的。为了避免混乱,这个接口的方法和属性已经被实现 Web Crypto API 的浏览器所移除,并且所有的 Web Crypto API 方法都可以在新的接口中使用: {{domxref("SubtleCrypto")}}。{{domxref("Crypto.subtle")}} 属性可以获取到一个实现了新接口的对象。

    +

    有些浏览器实现了叫做 {{domxref("Crypto")}} 的接口,但是缺乏良好的定义,或在密码学上是不健全的。为了避免混乱,这个接口的方法和属性已经被实现 Web Crypto API 的浏览器所移除,并且所有的 Web Crypto API 方法都可以在新的接口中使用: {{domxref("SubtleCrypto")}}。{{domxref("Crypto.subtle")}} 属性可以获取到一个实现了新接口的对象。

    规范

    diff --git a/files/zh-cn/web/api/web_speech_api/index.html b/files/zh-cn/web/api/web_speech_api/index.html index d5804c389be1ad..8c1fab13648a7c 100644 --- a/files/zh-cn/web/api/web_speech_api/index.html +++ b/files/zh-cn/web/api/web_speech_api/index.html @@ -13,7 +13,7 @@ ---
    {{DefaultAPISidebar("Web Speech API")}}{{seecompattable}}
    -

    Web Speech API 使您能够将语音数据合并到 Web 应用程序中。 Web Speech API 有两个部分:SpeechSynthesis 语音合成(文本到语音 TTS)和 SpeechRecognition  语音识别(异步语音识别)。

    +

    Web Speech API 使您能够将语音数据合并到 Web 应用程序中。 Web Speech API 有两个部分:SpeechSynthesis 语音合成(文本到语音 TTS)和 SpeechRecognition 语音识别(异步语音识别)。

    Web Speech 的概念及用法

    @@ -21,18 +21,18 @@

    Web Speech 的概念及用法

    • 语音识别通过 {{domxref("SpeechRecognition")}} 接口进行访问,它提供了识别从音频输入(通常是设备默认的语音识别服务)中识别语音情景的能力。一般来说,你将使用该接口的构造函数来构造一个新的 {{domxref("SpeechRecognition")}} 对象,该对象包含了一系列有效的对象处理函数来检测识别设备麦克风中的语音输入。{{domxref("SpeechGrammar")}} 接口则表示了你应用中想要识别的特定文法。文法则通过 JSpeech Grammar Format (JSGF.) 来定义。
    • -
    • 语音合成通过 {{domxref("SpeechSynthesis")}} 接口进行访问,它提供了文字到语音(TTS)的能力,这使得程序能够读出它们的文字内容(通常使用设备默认的语音合成器)。不同的声音类类型通过 {{domxref("SpeechSynthesisVoice")}} 对象进行表示,不同部分的文字则由 {{domxref("SpeechSynthesisUtterance")}} 对象来表示。你可以将它们传递给 {{domxref("SpeechSynthesis.speak()")}} 方法来产生语音。
    • +
    • 语音合成通过 {{domxref("SpeechSynthesis")}} 接口进行访问,它提供了文字到语音(TTS)的能力,这使得程序能够读出它们的文字内容(通常使用设备默认的语音合成器)。不同的声音类类型通过 {{domxref("SpeechSynthesisVoice")}} 对象进行表示,不同部分的文字则由 {{domxref("SpeechSynthesisUtterance")}} 对象来表示。你可以将它们传递给 {{domxref("SpeechSynthesis.speak()")}} 方法来产生语音。
    -

    更多关于这些特性的细节请参考 Using the Web Speech API

    +

    更多关于这些特性的细节请参考 Using the Web Speech API

    Web Speech 的 API 接口

    -

     语音识别

    +

    语音识别

    {{domxref("SpeechRecognition")}}
    -
    语音识别服务的控制器接口;它也处理由语音识别服务发来的 {{domxref("SpeechRecognitionEvent")}} 事件。
    +
    语音识别服务的控制器接口;它也处理由语音识别服务发来的 {{domxref("SpeechRecognitionEvent")}} 事件。
    {{domxref("SpeechRecognitionAlternative")}}
    表示由语音识别服务识别出的一个词汇。
    {{domxref("SpeechRecognitionError")}}
    @@ -42,11 +42,11 @@

     语音识别

    {{domxref("SpeechGrammar")}}
    我们将要交由语音识别服务进行识别的词汇或者词汇的模式。
    {{domxref("SpeechGrammarList")}}
    -
    表示一个由 {{domxref("SpeechGrammar")}} 对象构成的列表。
    +
    表示一个由 {{domxref("SpeechGrammar")}} 对象构成的列表。
    {{domxref("SpeechRecognitionResult")}}
    -
    表示一次识别中的匹配项,其中可能包含多个 {{domxref("SpeechRecognitionAlternative")}} 对象。
    +
    表示一次识别中的匹配项,其中可能包含多个 {{domxref("SpeechRecognitionAlternative")}} 对象。
    {{domxref("SpeechRecognitionResultList")}}
    -
    表示包含 {{domxref("SpeechRecognitionResult")}} 对象的一个列表,如果是以 {{domxref("SpeechRecognition.continuous","continuous")}} 模式捕获的结果,则是单个对象。
    +
    表示包含 {{domxref("SpeechRecognitionResult")}} 对象的一个列表,如果是以 {{domxref("SpeechRecognition.continuous","continuous")}} 模式捕获的结果,则是单个对象。

    语音合成

    @@ -55,23 +55,23 @@

    语音合成

    {{domxref("SpeechSynthesis")}}
    语音合成服务的控制器接口,可用于获取设备上可用的合成语音,开始、暂停以及其它相关命令的信息。
    {{domxref("SpeechSynthesisErrorEvent")}}
    -
    包含了在发音服务处理 {{domxref("SpeechSynthesisUtterance")}} 对象过程中的信息及报错信息。
    +
    包含了在发音服务处理 {{domxref("SpeechSynthesisUtterance")}} 对象过程中的信息及报错信息。
    {{domxref("SpeechSynthesisEvent")}}
    -
    包含了经由发音服务处理过的 {{domxref("SpeechSynthesisUtterance")}} 对象当前状态的信息。
    +
    包含了经由发音服务处理过的 {{domxref("SpeechSynthesisUtterance")}} 对象当前状态的信息。
    {{domxref("SpeechSynthesisUtterance")}}
    表示一次发音请求。其中包含了将由语音服务朗读的内容,以及如何朗读它(例如:语种、音高、音量)。
    {{domxref("SpeechSynthesisVoice")}}
    -
    表示系统提供的一个声音。每个 SpeechSynthesisVoice 都有与之相关的发音服务,包括了语种、名称 和 URI 等信息。
    +
    表示系统提供的一个声音。每个 SpeechSynthesisVoice 都有与之相关的发音服务,包括了语种、名称 和 URI 等信息。
    {{domxref("Window.speechSynthesis")}}
    -
    由规格文档指定的,被称为 SpeechSynthesisGetter 的 [NoInterfaceObject] 接口的一部分,在 Window 对象中实现,speechSynthesis 属性可用于访问 {{domxref("SpeechSynthesis")}} 控制器,从而获取语音合成功能的入口。
    +
    由规格文档指定的,被称为 SpeechSynthesisGetter[NoInterfaceObject] 接口的一部分,在 Window 对象中实现,speechSynthesis 属性可用于访问 {{domxref("SpeechSynthesis")}} 控制器,从而获取语音合成功能的入口。

    示例

    -

    GitHub 上的 Web Speech API repo 的示例程序展示了语音识别及合成。

    +

    GitHub 上的 Web Speech API repo 的示例程序展示了语音识别及合成。

    规范

    diff --git a/files/zh-cn/web/api/web_speech_api/using_the_web_speech_api/index.html b/files/zh-cn/web/api/web_speech_api/using_the_web_speech_api/index.html index 7b1e601af78ec6..aa11e87c4eec34 100644 --- a/files/zh-cn/web/api/web_speech_api/using_the_web_speech_api/index.html +++ b/files/zh-cn/web/api/web_speech_api/using_the_web_speech_api/index.html @@ -342,10 +342,10 @@

    Updating the displayed pit rateValue.textContent = rate.value; }

    -

     

    +

    -

     

    +

    -

     

    +

    -

     

    +

    diff --git a/files/zh-cn/web/api/web_storage_api/index.html b/files/zh-cn/web/api/web_storage_api/index.html index e0341845b25397..fb10f28b9bf11f 100644 --- a/files/zh-cn/web/api/web_storage_api/index.html +++ b/files/zh-cn/web/api/web_storage_api/index.html @@ -12,18 +12,18 @@ ---

    {{DefaultAPISidebar("Web Storage API")}}

    -

     Web Storage API 提供机制, 使浏览器能以一种比使用 Cookie 更直观的方式存储键/值对。

    +

    Web Storage API 提供机制, 使浏览器能以一种比使用 Cookie 更直观的方式存储键/值对。

    Web Storage 概念和用法

    Web Storage 包含如下两种机制:

      -
    • sessionStorage 为每一个给定的源(given origin)维持一个独立的存储区域,该存储区域在页面会话期间可用(即只要浏览器处于打开状态,包括页面重新加载和恢复)。
    • -
    • localStorage 同样的功能,但是在浏览器关闭,然后重新打开后数据仍然存在。
    • +
    • sessionStorage 为每一个给定的源(given origin)维持一个独立的存储区域,该存储区域在页面会话期间可用(即只要浏览器处于打开状态,包括页面重新加载和恢复)。
    • +
    • localStorage 同样的功能,但是在浏览器关闭,然后重新打开后数据仍然存在。
    -

    这两种机制是通过 {{domxref("Window.sessionStorage")}} 和 {{domxref("Window.localStorage")}} 属性使用(更确切的说,在支持的浏览器中 Window 对象实现了 WindowLocalStorage 和 WindowSessionStorage 对象并挂在其 localStoragesessionStorage 属性下)—— 调用其中任一对象会创建 {{domxref("Storage")}} 对象,通过 {{domxref("Storage")}} 对象,可以设置、获取和移除数据项。对于每个源(origin)sessionStoragelocalStorage 使用不同的 Storage 对象——独立运行和控制。

    +

    这两种机制是通过 {{domxref("Window.sessionStorage")}} 和 {{domxref("Window.localStorage")}} 属性使用(更确切的说,在支持的浏览器中 Window 对象实现了 WindowLocalStorageWindowSessionStorage 对象并挂在其 localStoragesessionStorage 属性下)—— 调用其中任一对象会创建 {{domxref("Storage")}} 对象,通过 {{domxref("Storage")}} 对象,可以设置、获取和移除数据项。对于每个源(origin)sessionStoragelocalStorage 使用不同的 Storage 对象——独立运行和控制。

    注意:从 Firefox 45 开始,当浏览器崩溃或重启时,每个源的存储大小将限制在 10M,以避免因过度使用 web storage 引起的内存问题。

    @@ -43,16 +43,16 @@

    Web Storage 接口

    {{domxref("Storage")}}
    允许你在一个特定域中设置,检索和删除数据和储存类型 (session or local.)
    {{domxref("Window")}}
    -
    Web Storage API 继承于{{domxref("Window")}} 对象,并提供两个新属性  — {{domxref("Window.sessionStorage")}} 和 {{domxref("Window.localStorage")}} — 它们分别地提供对当前域的会话和本地{{domxref("Storage")}} 对象的访问。
    +
    Web Storage API 继承于{{domxref("Window")}} 对象,并提供两个新属性 — {{domxref("Window.sessionStorage")}} 和 {{domxref("Window.localStorage")}} — 它们分别地提供对当前域的会话和本地{{domxref("Storage")}} 对象的访问。
    {{domxref("StorageEvent")}}
    -
    当一个存储区更改时,存储事件从文档的 Window 对象上被发布。
    +
    当一个存储区更改时,存储事件从文档的 Window 对象上被发布。

    例子

    -

    为了阐述一些 典型的 web storage 的用法,我们创了一个简单的例子, Web Storage Demo. landing page 提供控制器可以用来自定义颜色,字体和装饰图片。 当你选择不同的选项,页面会被立即更新;此外,你的选择被储存到 localStorage 中, 以便当你离开该页面,然后过些时候在重新加载它时,你的选择会被记住。

    +

    为了阐述一些 典型的 web storage 的用法,我们创了一个简单的例子, Web Storage Demo. landing page 提供控制器可以用来自定义颜色,字体和装饰图片。 当你选择不同的选项,页面会被立即更新;此外,你的选择被储存到 localStorage 中, 以便当你离开该页面,然后过些时候在重新加载它时,你的选择会被记住。

    -

    另外,我们提供了一个 event output page — 如果你在另一个标签页加载这个页面,然后在 landing page 改变你的选择,当{{event("StorageEvent")}}被发布时,你将会看到被更新的储存信息输出。

    +

    另外,我们提供了一个 event output page — 如果你在另一个标签页加载这个页面,然后在 landing page 改变你的选择,当{{event("StorageEvent")}}被发布时,你将会看到被更新的储存信息输出。

    规范

    @@ -70,15 +70,15 @@

    浏览器兼容性

    隐私浏览/隐身模式

    -

    大多数现代浏览器支持称为 'Incognito' 的用户隐私选择,“隐私浏览” 或类似的功能可以不像历史记录和 cookie 那样存储数据。 这明显与 Web Storage 不兼容。因此,浏览器厂商正尝试不同的方式来处理不兼容问题。

    +

    大多数现代浏览器支持称为 'Incognito' 的用户隐私选择,“隐私浏览” 或类似的功能可以不像历史记录和 cookie 那样存储数据。 这明显与 Web Storage 不兼容。因此,浏览器厂商正尝试不同的方式来处理不兼容问题。

    多数浏览器可以选择一种策略使存储的 API 可以使用并且不受限制,最大的不同是存储的数据在浏览器关闭后被清除。这些浏览器对如何处理已经存在的数据(从定期的 session 中获取到的),仍旧持有不同解释。在隐私模式还应该可读吗?然后就有一些浏览器,尤其是 Safari,提供了可选的解决方式:存储可用,但是给其分配 0 字节的存储空间,有效的使其不能被写入数据。

    -

    开发者需明确不同的实现,并在用 Web Storage API 开发网站时考虑这些实现的差别。更多信息请查看 this WHATWG blog post ,这里有更详细的讨论。

    +

    开发者需明确不同的实现,并在用 Web Storage API 开发网站时考虑这些实现的差别。更多信息请查看 this WHATWG blog post ,这里有更详细的讨论。

    参见

    diff --git a/files/zh-cn/web/api/web_storage_api/using_the_web_storage_api/index.html b/files/zh-cn/web/api/web_storage_api/using_the_web_storage_api/index.html index e2afe8e7147da0..90ba5bb239fb35 100644 --- a/files/zh-cn/web/api/web_storage_api/using_the_web_storage_api/index.html +++ b/files/zh-cn/web/api/web_storage_api/using_the_web_storage_api/index.html @@ -9,7 +9,7 @@

    基本概念

    -

    存储对象是简单的键值存储,类似于对象,但是它们在页面加载时保持完整。键和值始终是字符串(请注意,与对象一样,整数键将自动转换为字符串)。您可以像访问对象一样访问这些值,或者使用  {{domxref("Storage.getItem()")}} 和  {{domxref("Storage.setItem()")}} 方法 。这三行都设置了(相同的)colorSetting 条目:

    +

    存储对象是简单的键值存储,类似于对象,但是它们在页面加载时保持完整。键和值始终是字符串(请注意,与对象一样,整数键将自动转换为字符串)。您可以像访问对象一样访问这些值,或者使用 {{domxref("Storage.getItem()")}} 和 {{domxref("Storage.setItem()")}} 方法 。这三行都设置了(相同的)colorSetting 条目:

    localStorage.colorSetting = '#a4509b';
     localStorage['colorSetting'] = '#a4509b';
    @@ -18,13 +18,13 @@ 

    基本概念

    Web Storage 包含如下两种机制:

      -
    • sessionStorage 为每一个给定的源(given origin)维持一个独立的存储区域,该存储区域在页面会话期间可用(即只要浏览器处于打开状态,包括页面重新加载和恢复)。
    • -
    • localStorage 同样的功能,但是在浏览器关闭,然后重新打开后数据仍然存在。
    • +
    • sessionStorage 为每一个给定的源(given origin)维持一个独立的存储区域,该存储区域在页面会话期间可用(即只要浏览器处于打开状态,包括页面重新加载和恢复)。
    • +
    • localStorage 同样的功能,但是在浏览器关闭,然后重新打开后数据仍然存在。
    -

    这两种机制是通过 {{domxref("Window.sessionStorage")}} 和 {{domxref("Window.localStorage")}} 属性使用(更确切的说,在支持的浏览器中 Window 对象实现了 WindowLocalStorage 和 WindowSessionStorage 对象并挂在其 localStoragesessionStorage 属性下)—— 调用其中任一对象会创建 {{domxref("Storage")}} 对象,通过 {{domxref("Storage")}} 对象,可以设置、获取和移除数据项。对于每个源(origin)sessionStoragelocalStorage 使用不同的 Storage 对象——独立运行和控制。

    +

    这两种机制是通过 {{domxref("Window.sessionStorage")}} 和 {{domxref("Window.localStorage")}} 属性使用(更确切的说,在支持的浏览器中 Window 对象实现了 WindowLocalStorageWindowSessionStorage 对象并挂在其 localStoragesessionStorage 属性下)—— 调用其中任一对象会创建 {{domxref("Storage")}} 对象,通过 {{domxref("Storage")}} 对象,可以设置、获取和移除数据项。对于每个源(origin)sessionStoragelocalStorage 使用不同的 Storage 对象——独立运行和控制。

    -

    例如,在文档中调用 localStorage 将会返回一个 {{domxref("Storage")}} 对象;调用 sessionStorage 返回一个不同的 {{domxref("Storage")}} 对象。可以使用相同的方式操作这些对象,但是操作是独立的。

    +

    例如,在文档中调用 localStorage 将会返回一个 {{domxref("Storage")}} 对象;调用 sessionStorage 返回一个不同的 {{domxref("Storage")}} 对象。可以使用相同的方式操作这些对象,但是操作是独立的。

    localStorage 功能检测

    @@ -78,21 +78,21 @@

    测试可用性

    一个简单的示例

    -

    为了展示 Web Storage 的用法,我们创建了一个简单的示例,假设称为 Web Storage Demo示例页面提供了控制表单,用于自定义颜色、字体和装饰图片:

    +

    为了展示 Web Storage 的用法,我们创建了一个简单的示例,假设称为 Web Storage Demo示例页面提供了控制表单,用于自定义颜色、字体和装饰图片:

    当你选择不同的选项后,页面会立即更新;除此之外,你的选择会被存到 localStorage 里,这样,当你关闭页面之后重新加载时,你的选择会被记住。

    -

    我们还提供了一个存储事件结果页面 — 如果你在另一个标签页加载该页面,然后改变之前示例页面的选项,则随着 {{event("StorageEvent")}} 事件的触发,更新的存储信息会显示出来。

    +

    我们还提供了一个存储事件结果页面 — 如果你在另一个标签页加载该页面,然后改变之前示例页面的选项,则随着 {{event("StorageEvent")}} 事件的触发,更新的存储信息会显示出来。

    -

    备注: 除了使用上面的链接查看示例页面外,还可以获取源码

    +

    备注: 除了使用上面的链接查看示例页面外,还可以获取源码

    测试本地存储是否已被填充

    -

    在 main.js 开头,我们先测试本地存储是否已被填充(即,页面之前被访问过):

    +

    main.js 开头,我们先测试本地存储是否已被填充(即,页面之前被访问过):

    if(!localStorage.getItem('bgcolor')) {
       populateStorage();
    @@ -100,7 +100,7 @@ 

    测试本地存储是否已被填 setStyles(); }

    -

    {{domxref("Storage.getItem()")}} 方法用来从存储中获取一个数据项。该例中,我们测试 bgcolor 数据项是否存在。如果不存在,执行 populateStorage() 来将存在的自定义值添加到存储中。如果有值存在,则执行 setStyles() 来使用存储的值更新页面的样式。

    +

    {{domxref("Storage.getItem()")}} 方法用来从存储中获取一个数据项。该例中,我们测试 bgcolor 数据项是否存在。如果不存在,执行 populateStorage() 来将存在的自定义值添加到存储中。如果有值存在,则执行 setStyles() 来使用存储的值更新页面的样式。

    备注:你还可以使用 {{domxref("Storage.length")}} 来测试存储对象是否为空。

    @@ -138,9 +138,9 @@

    在存储中设置值

    setStyles(); }
    -

    populateStorage() 方法在本地存储中设置三项数据 — 背景颜色、字体和图片路径。然后执行 setStyles() 方法来更新页面的样式。

    +

    populateStorage() 方法在本地存储中设置三项数据 — 背景颜色、字体和图片路径。然后执行 setStyles() 方法来更新页面的样式。

    -

    同时,我们为每个表单元素绑定了一个 onchange 监听器,这样,一个表单值改变时,存储的数据和页面样式会更新。

    +

    同时,我们为每个表单元素绑定了一个 onchange 监听器,这样,一个表单值改变时,存储的数据和页面样式会更新。

    bgcolorForm.onchange = populateStorage;
     fontForm.onchange = populateStorage;
    @@ -150,7 +150,7 @@ 

    通过 StorageEvent 响应存

    无论何时,{{domxref("Storage")}} 对象发生变化时(即创建/更新/删除数据项时,重复设置相同的键值不会触发该事件,{{domxref("Storage.clear()")}} 方法至多触发一次该事件),{{event("StorageEvent")}} 事件会触发。在同一个页面内发生的改变不会起作用——在相同域名下的其他页面(如一个新标签或 iframe)发生的改变才会起作用。在其他域名下的页面不能访问相同的 Storage 对象。

    -

    在事件结果页面中的 JavaScript 如下所示(可见 events.js):

    +

    在事件结果页面中的 JavaScript 如下所示(可见 events.js):

    window.addEventListener('storage', function(e) {
       document.querySelector('.my-key').textContent = e.key;
    @@ -160,7 +160,7 @@ 

    通过 StorageEvent 响应存 document.querySelector('.my-storage').textContent = e.storageArea; });

    -

    这里,我们为 window 对象添加了一个事件监听器,在当前域名相关的 {{domxref("Storage")}} 对象发生改变时该事件监听器会触发。正如你在上面看到的,此事件相关的事件对象有多个属性包含了有用的信息——改变的数据项的键,改变前的旧值,改变后的新值,改变的存储对象所在的文档的 URL,以及存储对象本身。

    +

    这里,我们为 window 对象添加了一个事件监听器,在当前域名相关的 {{domxref("Storage")}} 对象发生改变时该事件监听器会触发。正如你在上面看到的,此事件相关的事件对象有多个属性包含了有用的信息——改变的数据项的键,改变前的旧值,改变后的新值,改变的存储对象所在的文档的 URL,以及存储对象本身。

    删除数据记录

    @@ -179,7 +179,7 @@

    浏览器兼容性

    {{Compat}} -

    各浏览器支持的 localStorage 和 sessionStorage 容量上限不同。测试页面 detailed rundown of all the storage capacities for various browsers

    +

    各浏览器支持的 localStorage 和 sessionStorage 容量上限不同。测试页面 detailed rundown of all the storage capacities for various browsers

    笔记:从 ios 5.1 后,Safari 移动存储本地存储的数据在缓存文件夹,这样在系统空间不足的情况下,方便系统自动清理。

    diff --git a/files/zh-cn/web/api/web_workers_api/functions_and_classes_available_to_workers/index.html b/files/zh-cn/web/api/web_workers_api/functions_and_classes_available_to_workers/index.html index bae078345226c4..20ee2998f6c251 100644 --- a/files/zh-cn/web/api/web_workers_api/functions_and_classes_available_to_workers/index.html +++ b/files/zh-cn/web/api/web_workers_api/functions_and_classes_available_to_workers/index.html @@ -5,11 +5,11 @@ - functions and classes available to Web Workers translation_of: Web/API/Web_Workers_API/Functions_and_classes_available_to_workers --- -

    除了标准的 JavaScript 函数集 (例如 {{jsxref("String")}}, {{jsxref("Array")}}, {{jsxref("Object")}}, {{jsxref("JSON")}} 等), DOM 有多种功能可供 workers 使用。

    +

    除了标准的 JavaScript 函数集 (例如 {{jsxref("String")}}, {{jsxref("Array")}}, {{jsxref("Object")}}, {{jsxref("JSON")}} 等), DOM 有多种功能可供 workers 使用。

    本文提供了一些列表。

    -

    Workers 在另一个全局上下文内运行, {{domxref("DedicatedWorkerGlobalScope")}} 与当前 window不同。

    +

    Workers 在另一个全局上下文内运行, {{domxref("DedicatedWorkerGlobalScope")}} 与当前 window不同。

    默认情况下,{{domxref("Window")}}的方法和属性不可用,但{{domxref("DedicatedWorkerGlobalScope")}}像 Window,实现{{domxref("WindowTimers")}} 和 {{domxref("WindowBase64")}}。

    @@ -134,7 +134,7 @@

    APIs available in workers

    {{domxref("Cache", "Cache")}}Cache API provides the ability to programmatically control cache storage associated with current origin.Cache API provides the ability to programmatically control cache storage associated with current origin. {{CompatVersionUnknown}} {{CompatNo}} {{ CompatChrome(43) }}
    {{domxref("FormData")}}FormData objects provide a way to easily construct a set of key/value pairs representing form fields and their values, which can then be easily sent using the XMLHttpRequest send() method.FormData objects provide a way to easily construct a set of key/value pairs representing form fields and their values, which can then be easily sent using the XMLHttpRequest send() method. {{CompatUnknown}} (should be in {{CompatGeckoDesktop(39)}}) {{CompatUnknown}} {{CompatVersionUnknown}}
    {{domxref("IndexedDB_API", "IndexedDB")}} Database to store records holding simple values and hierarchical objects.{{CompatGeckoDesktop(37)}},  {{CompatGeckoDesktop(42)}} for {{domxref("IDBCursorWithValue")}}.{{CompatGeckoDesktop(37)}}, {{CompatGeckoDesktop(42)}} for {{domxref("IDBCursorWithValue")}}. 10.0 {{CompatVersionUnknown}} {{CompatNo}}
    {{domxref("WebSocket")}}Creates and returns a new {{domxref("WebSocket")}}  object; this mimics the behavior of the standard WebSocket() constructor.Creates and returns a new {{domxref("WebSocket")}} object; this mimics the behavior of the standard WebSocket() constructor. {{CompatGeckoDesktop(37)}} 11.0 {{CompatVersionUnknown}}
    {{domxref("XMLHttpRequest")}}Creates and returns a new {{domxref("XMLHttpRequest")}}  object; this mimics the behavior of the standard XMLHttpRequest() constructor. Note that the responseXML and channel attributes on XMLHttpRequest always return null.Creates and returns a new {{domxref("XMLHttpRequest")}} object; this mimics the behavior of the standard XMLHttpRequest() constructor. Note that the responseXML and channel attributes on XMLHttpRequest always return null.

    Basic: {{CompatGeckoDesktop("1.9.1")}}

    diff --git a/files/zh-cn/web/api/web_workers_api/index.html b/files/zh-cn/web/api/web_workers_api/index.html index 5a187d1bd4438c..3f916b2b6ab26c 100644 --- a/files/zh-cn/web/api/web_workers_api/index.html +++ b/files/zh-cn/web/api/web_workers_api/index.html @@ -16,21 +16,21 @@

    Web Workers 概念与用法

    -

    使用构造函数(例如,{{domxref("Worker.Worker", "Worker()")}})创建一个 worker 对象,构造函数接受一个 JavaScript 文件 URL — 这个文件包含了将在 worker 线程中运行的代码。worker 将运行在与当前 {{domxref("window")}}不同的另一个全局上下文中,这个上下文由一个对象表示,标准情况下为{{domxref("DedicatedWorkerGlobalScope")}} (标准 workers 由单个脚本使用; 共享 workers 使用{{domxref("SharedWorkerGlobalScope")}})。

    +

    使用构造函数(例如,{{domxref("Worker.Worker", "Worker()")}})创建一个 worker 对象,构造函数接受一个 JavaScript 文件 URL — 这个文件包含了将在 worker 线程中运行的代码。worker 将运行在与当前 {{domxref("window")}}不同的另一个全局上下文中,这个上下文由一个对象表示,标准情况下为{{domxref("DedicatedWorkerGlobalScope")}} (标准 workers 由单个脚本使用; 共享 workers 使用{{domxref("SharedWorkerGlobalScope")}})。

    你可以在 worker 线程中运行任意的代码,但注意存在一些例外:你不能直接在 worker 线程中操纵 DOM 元素;或使用{{domxref("window")}} 对象中的某些方法和属性。大部分 window 对象的方法和属性是可以使用的,包括 WebSockets,以及诸如 IndexedDB 和 FireFox OS 中独有的 Data Store API 这一类数据存储机制。更多信息请参见: Functions and classes available to workers

    -

    主线程和 worker 线程相互之间使用 postMessage() 方法来发送信息,并且通过 onmessage 这个 event handler 来接收信息(传递的信息包含在 {{event("Message")}} 这个事件的data属性内) 。数据的交互方式为传递副本,而不是直接共享数据。

    +

    主线程和 worker 线程相互之间使用 postMessage() 方法来发送信息,并且通过 onmessage 这个 event handler 来接收信息(传递的信息包含在 {{event("Message")}} 这个事件的data属性内) 。数据的交互方式为传递副本,而不是直接共享数据。

    -

    worker 可以另外生成新的 worker,这些 worker 与它们父页面的宿主相同。 此外,worker 可以通过 XMLHttpRequest 来访问网络,只不过 XMLHttpRequest 的 responseXML 和 channel 这两个属性的值将总是 null

    +

    worker 可以另外生成新的 worker,这些 worker 与它们父页面的宿主相同。 此外,worker 可以通过 XMLHttpRequest 来访问网络,只不过 XMLHttpRequestresponseXMLchannel 这两个属性的值将总是 null

    除了专用 worker 之外,还有一些其他种类的 worker :

    • Shared Workers 可被不同的窗体的多个脚本运行,例如 IFrames 等,只要这些 workers 处于同一主域。共享 worker 比专用 worker 稍微复杂一点 — 脚本必须通过活动端口进行通讯。详情请见{{domxref("SharedWorker")}}。
    • -
    • Service Workers 一般作为 web 应用程序、浏览器和网络(如果可用)之间的代理服务。他们旨在(除开其他方面)创建有效的离线体验,拦截网络请求,以及根据网络是否可用采取合适的行动,更新驻留在服务器上的资源。他们还将允许访问推送通知和后台同步 API。
    • +
    • Service Workers 一般作为 web 应用程序、浏览器和网络(如果可用)之间的代理服务。他们旨在(除开其他方面)创建有效的离线体验,拦截网络请求,以及根据网络是否可用采取合适的行动,更新驻留在服务器上的资源。他们还将允许访问推送通知和后台同步 API。
    • Chrome Workers 是一种仅适用于 firefox 的 worker。如果您正在开发附加组件,希望在扩展程序中使用 worker 且可以访问 js-ctypes,那么可以使用 Chrome Workers。详情请见{{domxref("ChromeWorker")}}
    • -
    • 音频 Workers可以在网络 worker 上下文中直接完成脚本化音频处理。
    • +
    • 音频 Workers可以在网络 worker 上下文中直接完成脚本化音频处理。
    @@ -61,8 +61,8 @@

    示例

    我们创建了几个简单的 demos 以演示基本用法:

    你可以在使用 web workers中找到有关这些 demos 是如何工作的更多信息。

    diff --git a/files/zh-cn/web/api/web_workers_api/structured_clone_algorithm/index.html b/files/zh-cn/web/api/web_workers_api/structured_clone_algorithm/index.html index 84e23c5c86a4ae..52e6227fb2f08c 100644 --- a/files/zh-cn/web/api/web_workers_api/structured_clone_algorithm/index.html +++ b/files/zh-cn/web/api/web_workers_api/structured_clone_algorithm/index.html @@ -8,16 +8,16 @@ translation_of: Web/API/Web_Workers_API/Structured_clone_algorithm original_slug: Web/Guide/API/DOM/The_structured_clone_algorithm --- -

    结构化克隆算法是由 HTML5 规范定义的用于复制复杂 JavaScript 对象的算法。通过来自 Workers的 postMessage() 或使用 IndexedDB 存储对象时在内部使用。它通过递归输入对象来构建克隆,同时保持先前访问过的引用的映射,以避免无限遍历循环。

    +

    结构化克隆算法是由 HTML5 规范定义的用于复制复杂 JavaScript 对象的算法。通过来自 WorkerspostMessage() 或使用 IndexedDB 存储对象时在内部使用。它通过递归输入对象来构建克隆,同时保持先前访问过的引用的映射,以避免无限遍历循环。

    结构化克隆所不能做到的

      -
    • Error 以及 Function 对象是不能被结构化克隆算法复制的;如果你尝试这样子去做,这会导致抛出 DATA_CLONE_ERR 的异常。
    • +
    • Error 以及 Function 对象是不能被结构化克隆算法复制的;如果你尝试这样子去做,这会导致抛出 DATA_CLONE_ERR 的异常。
    • 企图去克隆 DOM 节点同样会抛出 DATA_CLONE_ERR 异常。
    • 对象的某些特定参数也不会被保留
        -
      • RegExp 对象的 lastIndex 字段不会被保留
      • +
      • RegExp 对象的 lastIndex 字段不会被保留
      • 属性描述符,setters 以及 getters(以及其他类似元数据的功能)同样不会被复制。例如,如果一个对象用属性描述符标记为 read-only,它将会被复制为 read-write,因为这是默认的情况下。
      • 原形链上的属性也不会被追踪以及复制。
      @@ -40,15 +40,15 @@

      支持的类型

    Boolean 对象 
    String 对象 
    Date 
    RegExp
    {{ domxref("Blob") }} 
    {{ domxref("File") }} 
    {{ domxref("FileList") }} 
    ArrayBuffer 
    ArrayBufferView
    {{ domxref("ImageData") }} 
    Array 
    Object
    Map 
    Set 
    @@ -100,7 +100,7 @@

    支持的类型

    相关链接

      -
    • HTML5 Specification: Safe passing of structured data
    • +
    • HTML5 Specification: Safe passing of structured data
    • {{ domxref("window.history") }}
    • {{ domxref("window.postMessage()") }}
    • Web Workers
    • diff --git a/files/zh-cn/web/api/web_workers_api/using_web_workers/index.html b/files/zh-cn/web/api/web_workers_api/using_web_workers/index.html index 94bd7177b509fa..2493cd1231c81c 100644 --- a/files/zh-cn/web/api/web_workers_api/using_web_workers/index.html +++ b/files/zh-cn/web/api/web_workers_api/using_web_workers/index.html @@ -13,25 +13,25 @@ ---
      {{DefaultAPISidebar("Web Workers API")}}
      -

      Web Worker 为 Web 内容在后台线程中运行脚本提供了一种简单的方法。线程可以执行任务而不干扰用户界面。此外,他们可以使用XMLHttpRequest执行 I/O  (尽管responseXMLchannel属性总是为空)。一旦创建, 一个 worker 可以将消息发送到创建它的 JavaScript 代码,通过将消息发布到该代码指定的事件处理程序(反之亦然)。本文提供了有关使用 Web Worker 的详细介绍。

      +

      Web Worker 为 Web 内容在后台线程中运行脚本提供了一种简单的方法。线程可以执行任务而不干扰用户界面。此外,他们可以使用XMLHttpRequest执行 I/O (尽管responseXMLchannel属性总是为空)。一旦创建, 一个 worker 可以将消息发送到创建它的 JavaScript 代码,通过将消息发布到该代码指定的事件处理程序(反之亦然)。本文提供了有关使用 Web Worker 的详细介绍。

      Web Workers API

      -

      一个 worker 是使用一个构造函数创建的一个对象 (e.g. {{domxref("Worker.Worker", "Worker()")}}) 运行一个命名的 JavaScript 文件 - 这个文件包含将在工作线程中运行的代码; workers 运行在另一个全局上下文中,不同于当前的{{domxref("window")}}. 因此,在 {{domxref("Worker")}} 内通过 {{domxref("window")}}获取全局作用域 (而不是{{domxref("window.self","self")}}) 将返回错误。

      +

      一个 worker 是使用一个构造函数创建的一个对象 (e.g. {{domxref("Worker.Worker", "Worker()")}}) 运行一个命名的 JavaScript 文件 - 这个文件包含将在工作线程中运行的代码; workers 运行在另一个全局上下文中,不同于当前的{{domxref("window")}}. 因此,在 {{domxref("Worker")}} 内通过 {{domxref("window")}}获取全局作用域 (而不是{{domxref("window.self","self")}}) 将返回错误。

      在专用 workers 的情况下,{{domxref("DedicatedWorkerGlobalScope")}} 对象代表了 worker 的上下文(专用 workers 是指标准 worker 仅在单一脚本中被使用;共享 worker 的上下文是{{domxref("SharedWorkerGlobalScope")}}对象)。一个专用 worker 仅仅能被首次生成它的脚本使用,而共享 worker 可以同时被多个脚本使用。

      -
      注意:参照 The Web Workers API landing page 获取 workers 的参考文档和更多指引。
      +
      注意:参照 The Web Workers API landing page 获取 workers 的参考文档和更多指引。

      在 worker 线程中你可以运行任何你喜欢的代码,不过有一些例外情况。比如:在 worker 内,不能直接操作 DOM 节点,也不能使用{{domxref("window")}}对象的默认方法和属性。然而你可以使用大量 window 对象之下的东西,包括 WebSockets,IndexedDB 以及 FireFox OS 专用的 Data Store API 等数据存储机制。查看Functions and classes available to workers获取详情。

      workers 和主线程间的数据传递通过这样的消息机制进行——双方都使用 postMessage() 方法发送各自的消息,使用 onmessage 事件处理函数来响应消息(消息被包含在{{event("Message")}}事件的 data 属性中)。这个过程中数据并不是被共享而是被复制。

      -

      只要运行在同源的父页面中,workers 可以依次生成新的 workers;并且可以使用XMLHttpRequest 进行网络 I/O,但是 XMLHttpRequest 的 responseXML 和 channel 属性总会返回 null。

      +

      只要运行在同源的父页面中,workers 可以依次生成新的 workers;并且可以使用XMLHttpRequest 进行网络 I/O,但是 XMLHttpRequest 的 responseXML 和 channel 属性总会返回 null。

      专用 worker

      -

      如前文所述,一个专用 worker 仅仅能被生成它的脚本所使用。这一部分将探讨 专用 worker 基础示例 (运行专用 worker) 中的 JavaScript 代码:将你输入的 2 个数字作乘法。输入的数字会发送给一个专用 worker,由专用 worker 作乘法后,再返回给页面进行展示。

      +

      如前文所述,一个专用 worker 仅仅能被生成它的脚本所使用。这一部分将探讨 专用 worker 基础示例 (运行专用 worker) 中的 JavaScript 代码:将你输入的 2 个数字作乘法。输入的数字会发送给一个专用 worker,由专用 worker 作乘法后,再返回给页面进行展示。

      这个例子很小,但是我们决定在保持简单的同时向你介绍基础的 worker 概念。更多的细节会在之后的文章中进行讲解。

      @@ -88,11 +88,11 @@

      专用 worker 中消息的接

      在这里我们获取消息事件的 data,并且将它设置为 result 的 textContent,所以用户可以直接看到运算的结果。

      -

      注意: 在主线程中使用时,onmessagepostMessage() 必须挂在 worker 对象上,而在 worker 中使用时不用这样做。原因是,在 worker 内部,worker 是有效的全局作用域。

      +

      注意: 在主线程中使用时,onmessagepostMessage() 必须挂在 worker 对象上,而在 worker 中使用时不用这样做。原因是,在 worker 内部,worker 是有效的全局作用域。

      -

      注意: 当一个消息在主线程和 worker 之间传递时,它被复制或者转移了,而不是共享。请参阅worker 中数据的接收与发送:详细介绍 获取更详尽的解释。

      +

      注意: 当一个消息在主线程和 worker 之间传递时,它被复制或者转移了,而不是共享。请参阅worker 中数据的接收与发送:详细介绍 获取更详尽的解释。

      终止 worker

      @@ -103,15 +103,15 @@

      终止 worker

      worker 线程会被立即杀死,不会有任何机会让它完成自己的操作或清理工作。

      -

      而在 worker 线程中,workers 也可以调用自己的 {{domxref("WorkerGlobalScope", "close")}}  方法进行关闭:

      +

      而在 worker 线程中,workers 也可以调用自己的 {{domxref("WorkerGlobalScope", "close")}} 方法进行关闭:

      close();

      处理错误

      -

      当 worker 出现运行中错误时,它的 onerror 事件处理函数会被调用。它会收到一个扩展了 ErrorEvent 接口的名为 error的事件。

      +

      当 worker 出现运行中错误时,它的 onerror 事件处理函数会被调用。它会收到一个扩展了 ErrorEvent 接口的名为 error的事件。

      -

      该事件不会冒泡并且可以被取消;为了防止触发默认动作,worker 可以调用错误事件的 preventDefault()方法。

      +

      该事件不会冒泡并且可以被取消;为了防止触发默认动作,worker 可以调用错误事件的 preventDefault()方法。

      错误事件有以下三个用户关心的字段:

      @@ -132,14 +132,14 @@

      引入脚本与库

      Worker 线程能够访问一个全局函数importScripts()来引入脚本,该函数接受 0 个或者多个 URI 作为参数来引入资源;以下例子都是合法的:

      -
      importScripts();                        /* 什么都不引入 */
      -importScripts('foo.js');                /* 只引入 "foo.js" */
      -importScripts('foo.js', 'bar.js');      /* 引入两个脚本 */
      +
      importScripts();                        /* 什么都不引入 */
      +importScripts('foo.js');                /* 只引入 "foo.js" */
      +importScripts('foo.js', 'bar.js');      /* 引入两个脚本 */
       
      -

      浏览器加载并运行每一个列出的脚本。每个脚本中的全局对象都能够被 worker 使用。如果脚本无法加载,将抛出 NETWORK_ERROR 异常,接下来的代码也无法执行。而之前执行的代码 (包括使用 {{ domxref("window.setTimeout()") }} 异步执行的代码) 依然能够运行。importScripts() 之后的函数声明依然会被保留,因为它们始终会在其他代码之前运行。

      +

      浏览器加载并运行每一个列出的脚本。每个脚本中的全局对象都能够被 worker 使用。如果脚本无法加载,将抛出 NETWORK_ERROR 异常,接下来的代码也无法执行。而之前执行的代码 (包括使用 {{ domxref("window.setTimeout()") }} 异步执行的代码) 依然能够运行。importScripts() 之后的函数声明依然会被保留,因为它们始终会在其他代码之前运行。

      -
      注意: 脚本的下载顺序不固定,但执行时会按照传入 importScripts() 中的文件名顺序进行。这个过程是同步完成的;直到所有脚本都下载并运行完毕,importScripts() 才会返回。
      +
      注意: 脚本的下载顺序不固定,但执行时会按照传入 importScripts() 中的文件名顺序进行。这个过程是同步完成的;直到所有脚本都下载并运行完毕,importScripts() 才会返回。

      共享 worker

      @@ -148,22 +148,22 @@

      共享 worker

      这里,我们关注一下专用 worker 和共享 worker 之间的区别。在这个示例中有 2 个 HTML 页面,每个页面所包含的 javascript 代码使用的是同一个 worker。

      -

      注意:如果共享 worker 可以被多个浏览上下文调用,所有这些浏览上下文必须属于同源(相同的协议,主机和端口号)。 

      +

      注意:如果共享 worker 可以被多个浏览上下文调用,所有这些浏览上下文必须属于同源(相同的协议,主机和端口号)。

      -

      注意:在 Firefox 中,共享 worker 不能被私有和非私有 window 对象的 document 所共享 ({{bug(1177621)}})。

      +

      注意:在 Firefox 中,共享 worker 不能被私有和非私有 window 对象的 document 所共享 ({{bug(1177621)}})。

      生成一个共享 worker

      -

      生成一个新的共享 worker 与生成一个专用 worker 非常相似,只是构造器的名字不同(查看 index.html 和 index2.html)——生成共享 worker 的代码如下:

      +

      生成一个新的共享 worker 与生成一个专用 worker 非常相似,只是构造器的名字不同(查看 index.htmlindex2.html)——生成共享 worker 的代码如下:

      var myWorker = new SharedWorker('worker.js');

      一个非常大的区别在于,与一个共享 worker 通信必须通过端口对象——一个确切的打开的端口供脚本与 worker 通信(在专用 worker 中这一部分是隐式进行的)。

      -

      在传递消息之前,端口连接必须被显式的打开,打开方式是使用 onmessage 事件处理函数或者 start() 方法。示例中的 multiply.js 和 worker.js 文件没有调用了 start() 方法,这些调用并不那么重要是因为 onmessage 事件处理函数正在被使用。start() 方法的调用只在一种情况下需要,那就是消息事件被 addEventListener() 方法使用。

      +

      在传递消息之前,端口连接必须被显式的打开,打开方式是使用 onmessage 事件处理函数或者 start() 方法。示例中的 multiply.jsworker.js 文件没有调用了 start() 方法,这些调用并不那么重要是因为 onmessage 事件处理函数正在被使用。start() 方法的调用只在一种情况下需要,那就是消息事件被 addEventListener() 方法使用。

      在使用 start() 方法打开端口连接时,如果父级线程和 worker 线程需要双向通信,那么它们都需要调用 start() 方法。

      @@ -173,7 +173,7 @@

      生成一个共享 worker

      共享 worker 中消息的接收和发送

      -

      现在,消息可以像之前那样发送到 worker 了,但是postMessage() 方法必须被端口对象调用(你会再一次看到 multiply.js 和 square.js中相似的结构):

      +

      现在,消息可以像之前那样发送到 worker 了,但是postMessage() 方法必须被端口对象调用(你会再一次看到 multiply.jssquare.js中相似的结构):

      squareNumber.onchange = function() {
         myWorker.port.postMessage([squareNumber.value,squareNumber.value]);
      @@ -197,7 +197,7 @@ 

      共享 worker 中消息的接

      然后,为端口添加一个消息处理函数用来做运算并回传结果给主线程。在 worker 线程中设置此消息处理函数也会隐式的打开与主线程的端口连接,因此这里跟前文一样,对 port.start() 的调用也是不必要的。

      -

      最后,回到主脚本,我们处理消息(你会又一次看到 multiply.js 和 square.js中相似的结构):

      +

      最后,回到主脚本,我们处理消息(你会又一次看到 multiply.jssquare.js中相似的结构):

      myWorker.port.onmessage = function(e) {
         result2.textContent = e.data;
      @@ -218,18 +218,18 @@ 

      内容安全策略

      这个声明有一部分作用在于,禁止它内部包含的脚本代码使用 eval() 方法。然而,如果脚本代码创建了一个 worker,在 worker 上下文中执行的代码却是可以使用 eval() 的。

      -

      为了给 worker 指定内容安全策略,必须为发送 worker 代码的请求本身加上一个 内容安全策略

      +

      为了给 worker 指定内容安全策略,必须为发送 worker 代码的请求本身加上一个 内容安全策略

      有一个例外情况,即 worker 脚本的源如果是一个全局性的唯一的标识符(例如,它的 URL 指定了数据模式或者 blob),worker 则会继承创建它的 document 或者 worker 的 CSP(Content security policy 内容安全策略)。

      worker 中数据的接收与发送:详细介绍

      -

      在主页面与 worker 之间传递的数据是通过拷贝,而不是共享来完成的。传递给 worker 的对象需要经过序列化,接下来在另一端还需要反序列化。页面与 worker 不会共享同一个实例,最终的结果就是在每次通信结束时生成了数据的一个副本。大部分浏览器使用结构化拷贝来实现该特性。

      +

      在主页面与 worker 之间传递的数据是通过拷贝,而不是共享来完成的。传递给 worker 的对象需要经过序列化,接下来在另一端还需要反序列化。页面与 worker 不会共享同一个实例,最终的结果就是在每次通信结束时生成了数据的一个副本。大部分浏览器使用结构化拷贝来实现该特性。

      -

      在往下进行之前,出于教学的目的,让我们创建一个名为 emulateMessage() 的函数,它将模拟在从 worker 到主页面 (反之亦然) 的通信过程中,变量的「拷贝而非共享」行为:

      +

      在往下进行之前,出于教学的目的,让我们创建一个名为 emulateMessage() 的函数,它将模拟在从 worker 到主页面 (反之亦然) 的通信过程中,变量的「拷贝而非共享」行为:

      function emulateMessage (vVal) {
      -    return eval("(" + JSON.stringify(vVal) + ")");
      +    return eval("(" + JSON.stringify(vVal) + ")");
       }
       
       // Tests
      @@ -251,22 +251,22 @@ 

      worker 中数据的接 // test #4 var example4 = { -    "name": "John Smith", -    "age": 43 + "name": "John Smith", + "age": 43 }; alert(typeof example4); // object alert(typeof emulateMessage(example4)); // object // test #5 function Animal (sType, nAge) { -    this.type = sType; -    this.age = nAge; + this.type = sType; + this.age = nAge; } var example5 = new Animal("Cat", 3); alert(example5.constructor); // Animal alert(emulateMessage(example5).constructor); // Object

      -

      拷贝而并非共享的那个值称为 消息。再来谈谈 worker,你可以使用 postMessage() 将消息传递给主线程或从主线程传送回来。message 事件的 data 属性就包含了从 worker 传回来的数据。

      +

      拷贝而并非共享的那个值称为 消息。再来谈谈 worker,你可以使用 postMessage() 将消息传递给主线程或从主线程传送回来。message 事件的 data 属性就包含了从 worker 传回来的数据。

      example.html: (主页面):

      @@ -291,33 +291,33 @@

      worker 中数据的接

      传递数据的例子

      -

      例子 #1: 创建一个通用的「异步 eval()

      +

      例子 #1: 创建一个通用的「异步 eval()

      -

      下面这个例子介绍了,如何在 worker 内使用  eval() 来按顺序执行异步的任何种类的 JavaScript 代码:

      +

      下面这个例子介绍了,如何在 worker 内使用 eval() 来按顺序执行异步的任何种类的 JavaScript 代码:

      // Syntax: asyncEval(code[, listener])
       
       var asyncEval = (function () {
       
      -  var aListeners = [], oParser = new Worker("data:text/javascript;charset=US-ASCII,onmessage%20%3D%20function%20%28oEvent%29%20%7B%0A%09postMessage%28%7B%0A%09%09%22id%22%3A%20oEvent.data.id%2C%0A%09%09%22evaluated%22%3A%20eval%28oEvent.data.code%29%0A%09%7D%29%3B%0A%7D");
      +  var aListeners = [], oParser = new Worker("data:text/javascript;charset=US-ASCII,onmessage%20%3D%20function%20%28oEvent%29%20%7B%0A%09postMessage%28%7B%0A%09%09%22id%22%3A%20oEvent.data.id%2C%0A%09%09%22evaluated%22%3A%20eval%28oEvent.data.code%29%0A%09%7D%29%3B%0A%7D");
       
      -  oParser.onmessage = function (oEvent) {
      -    if (aListeners[oEvent.data.id]) { aListeners[oEvent.data.id](oEvent.data.evaluated); }
      -    delete aListeners[oEvent.data.id];
      -  };
      +  oParser.onmessage = function (oEvent) {
      +    if (aListeners[oEvent.data.id]) { aListeners[oEvent.data.id](oEvent.data.evaluated); }
      +    delete aListeners[oEvent.data.id];
      +  };
       
       
      -  return function (sCode, fListener) {
      -    aListeners.push(fListener || null);
      -    oParser.postMessage({
      -      "id": aListeners.length - 1,
      -      "code": sCode
      -    });
      -  };
      +  return function (sCode, fListener) {
      +    aListeners.push(fListener || null);
      +    oParser.postMessage({
      +      "id": aListeners.length - 1,
      +      "code": sCode
      +    });
      +  };
       
       })();
      -

      data URL 相当于一个网络请求,它有如下返回:

      +

      data URL 相当于一个网络请求,它有如下返回:

      onmessage = function(oEvent) {
         postMessage({
      @@ -330,12 +330,12 @@ 

      例子 #1: 创建
      // asynchronous alert message...
       asyncEval("3 + 2", function (sMessage) {
      -    alert("3 + 2 = " + sMessage);
      +    alert("3 + 2 = " + sMessage);
       });
       
       // asynchronous print message...
       asyncEval("\"Hello World!!!\"", function (sHTML) {
      -    document.body.appendChild(document.createTextNode(sHTML));
      +    document.body.appendChild(document.createTextNode(sHTML));
       });
       
       // asynchronous void...
      @@ -456,69 +456,69 @@ 

      例 <meta charset="UTF-8" /> <title>MDN Example - Queryable worker</title> <script type="text/javascript"> -  /* -    QueryableWorker instances methods: -     * sendQuery(queryable function name, argument to pass 1, argument to pass 2, etc. etc): calls a Worker's queryable function -     * postMessage(string or JSON Data): see Worker.prototype.postMessage() -     * terminate(): terminates the Worker -     * addListener(name, function): adds a listener -     * removeListener(name): removes a listener -    QueryableWorker instances properties: -     * defaultListener: the default listener executed only when the Worker calls the postMessage() function directly -  */ -  function QueryableWorker (sURL, fDefListener, fOnError) { -    var oInstance = this, oWorker = new Worker(sURL), oListeners = {}; -    this.defaultListener = fDefListener || function () {}; -    oWorker.onmessage = function (oEvent) { -      if (oEvent.data instanceof Object && oEvent.data.hasOwnProperty("vo42t30") && oEvent.data.hasOwnProperty("rnb93qh")) { -        oListeners[oEvent.data.vo42t30].apply(oInstance, oEvent.data.rnb93qh); -      } else { -        this.defaultListener.call(oInstance, oEvent.data); -      } -    }; -    if (fOnError) { oWorker.onerror = fOnError; } -    this.sendQuery = function (/* queryable function name, argument to pass 1, argument to pass 2, etc. etc */) { -      if (arguments.length < 1) { throw new TypeError("QueryableWorker.sendQuery - not enough arguments"); return; } -      oWorker.postMessage({ "bk4e1h0": arguments[0], "ktp3fm1": Array.prototype.slice.call(arguments, 1) }); -    }; -    this.postMessage = function (vMsg) { + /* + QueryableWorker instances methods: + * sendQuery(queryable function name, argument to pass 1, argument to pass 2, etc. etc): calls a Worker's queryable function + * postMessage(string or JSON Data): see Worker.prototype.postMessage() + * terminate(): terminates the Worker + * addListener(name, function): adds a listener + * removeListener(name): removes a listener + QueryableWorker instances properties: + * defaultListener: the default listener executed only when the Worker calls the postMessage() function directly + */ + function QueryableWorker (sURL, fDefListener, fOnError) { + var oInstance = this, oWorker = new Worker(sURL), oListeners = {}; + this.defaultListener = fDefListener || function () {}; + oWorker.onmessage = function (oEvent) { + if (oEvent.data instanceof Object && oEvent.data.hasOwnProperty("vo42t30") && oEvent.data.hasOwnProperty("rnb93qh")) { + oListeners[oEvent.data.vo42t30].apply(oInstance, oEvent.data.rnb93qh); + } else { + this.defaultListener.call(oInstance, oEvent.data); + } + }; + if (fOnError) { oWorker.onerror = fOnError; } + this.sendQuery = function (/* queryable function name, argument to pass 1, argument to pass 2, etc. etc */) { + if (arguments.length < 1) { throw new TypeError("QueryableWorker.sendQuery - not enough arguments"); return; } + oWorker.postMessage({ "bk4e1h0": arguments[0], "ktp3fm1": Array.prototype.slice.call(arguments, 1) }); + }; + this.postMessage = function (vMsg) { //I just think there is no need to use call() method //how about just oWorker.postMessage(vMsg); //the same situation with terminate //well,just a little faster,no search up the prototye chain -      Worker.prototype.postMessage.call(oWorker, vMsg); -    }; -    this.terminate = function () { -      Worker.prototype.terminate.call(oWorker); -    }; -    this.addListener = function (sName, fListener) { -      oListeners[sName] = fListener; -    }; -    this.removeListener = function (sName) { -      delete oListeners[sName]; -    }; -  }; - -  // your custom "queryable" worker -  var oMyTask = new QueryableWorker("my_task.js" /* , yourDefaultMessageListenerHere [optional], yourErrorListenerHere [optional] */); - -  // your custom "listeners" - -  oMyTask.addListener("printSomething", function (nResult) { -    document.getElementById("firstLink").parentNode.appendChild(document.createTextNode(" The difference is " + nResult + "!")); -  }); - -  oMyTask.addListener("alertSomething", function (nDeltaT, sUnit) { -    alert("Worker waited for " + nDeltaT + " " + sUnit + " :-)"); -  }); + Worker.prototype.postMessage.call(oWorker, vMsg); + }; + this.terminate = function () { + Worker.prototype.terminate.call(oWorker); + }; + this.addListener = function (sName, fListener) { + oListeners[sName] = fListener; + }; + this.removeListener = function (sName) { + delete oListeners[sName]; + }; + }; + + // your custom "queryable" worker + var oMyTask = new QueryableWorker("my_task.js" /* , yourDefaultMessageListenerHere [optional], yourErrorListenerHere [optional] */); + + // your custom "listeners" + + oMyTask.addListener("printSomething", function (nResult) { + document.getElementById("firstLink").parentNode.appendChild(document.createTextNode(" The difference is " + nResult + "!")); + }); + + oMyTask.addListener("alertSomething", function (nDeltaT, sUnit) { + alert("Worker waited for " + nDeltaT + " " + sUnit + " :-)"); + }); </script> </head> <body> -  <ul> -    <li><a id="firstLink" href="javascript:oMyTask.sendQuery('getDifference', 5, 3);">What is the difference between 5 and 3?</a></li> -    <li><a href="javascript:oMyTask.sendQuery('waitSomething');">Wait 3 seconds</a></li> -    <li><a href="javascript:oMyTask.terminate();">terminate() the Worker</a></li> -  </ul> + <ul> + <li><a id="firstLink" href="javascript:oMyTask.sendQuery('getDifference', 5, 3);">What is the difference between 5 and 3?</a></li> + <li><a href="javascript:oMyTask.sendQuery('waitSomething');">Wait 3 seconds</a></li> + <li><a href="javascript:oMyTask.terminate();">terminate() the Worker</a></li> + </ul> </body> </html>

      @@ -527,11 +527,11 @@

      // your custom PRIVATE functions
       
       function myPrivateFunc1 () {
      -  // do something
      +  // do something
       }
       
       function myPrivateFunc2 () {
      -  // do something
      +  // do something
       }
       
       // etc. etc.
      @@ -539,41 +539,41 @@ 

      例 // your custom PUBLIC functions (i.e. queryable from the main page) var queryableFunctions = { -  // example #1: get the difference between two numbers: -  getDifference: function (nMinuend, nSubtrahend) { -      reply("printSomething", nMinuend - nSubtrahend); -  }, -  // example #2: wait three seconds -  waitSomething: function () { -      setTimeout(function() { reply("alertSomething", 3, "seconds"); }, 3000); -  } + // example #1: get the difference between two numbers: + getDifference: function (nMinuend, nSubtrahend) { + reply("printSomething", nMinuend - nSubtrahend); + }, + // example #2: wait three seconds + waitSomething: function () { + setTimeout(function() { reply("alertSomething", 3, "seconds"); }, 3000); + } }; // system functions function defaultQuery (vMsg) { -  // your default PUBLIC function executed only when main page calls the queryableWorker.postMessage() method directly -  // do something + // your default PUBLIC function executed only when main page calls the queryableWorker.postMessage() method directly + // do something } function reply (/* listener name, argument to pass 1, argument to pass 2, etc. etc */) { -  if (arguments.length < 1) { throw new TypeError("reply - not enough arguments"); return; } -  postMessage({ "vo42t30": arguments[0], "rnb93qh": Array.prototype.slice.call(arguments, 1) }); + if (arguments.length < 1) { throw new TypeError("reply - not enough arguments"); return; } + postMessage({ "vo42t30": arguments[0], "rnb93qh": Array.prototype.slice.call(arguments, 1) }); } onmessage = function (oEvent) { -  if (oEvent.data instanceof Object && oEvent.data.hasOwnProperty("bk4e1h0") && oEvent.data.hasOwnProperty("ktp3fm1")) { -    queryableFunctions[oEvent.data.bk4e1h0].apply(self, oEvent.data.ktp3fm1); -  } else { -    defaultQuery(oEvent.data); -  } + if (oEvent.data instanceof Object && oEvent.data.hasOwnProperty("bk4e1h0") && oEvent.data.hasOwnProperty("ktp3fm1")) { + queryableFunctions[oEvent.data.bk4e1h0].apply(self, oEvent.data.ktp3fm1); + } else { + defaultQuery(oEvent.data); + } };

      这个实例中,可以对从主页面到 worker、以及 worker 到主页面之间传递的消息内容进行切换。而且属性名"queryMethod", "queryMethodListeners","queryMethodArguments"可以是任何东西,只要它们在QueryableWorker 和 worker中保持一致。

      通过转让所有权 (可转让对象) 来传递数据

      -

      Google Chrome 17 与 Firefox 18 包含另一种性能更高的方法来将特定类型的对象 (可转让对象) 传递给一个 worker/从 worker 传回 。可转让对象从一个上下文转移到另一个上下文而不会经过任何拷贝操作。这意味着当传递大数据时会获得极大的性能提升。如果你从 C/C++ 世界来,那么把它想象成按照引用传递。然而与按照引用传递不同的是,一旦对象转让,那么它在原来上下文的那个版本将不复存在。该对象的所有权被转让到新的上下文内。例如,当你将一个 ArrayBuffer 对象从主应用转让到 Worker 中,原始的 ArrayBuffer 被清除并且无法使用。它包含的内容会 (完整无差的) 传递给 Worker 上下文。

      +

      Google Chrome 17 与 Firefox 18 包含另一种性能更高的方法来将特定类型的对象 (可转让对象) 传递给一个 worker/从 worker 传回 。可转让对象从一个上下文转移到另一个上下文而不会经过任何拷贝操作。这意味着当传递大数据时会获得极大的性能提升。如果你从 C/C++ 世界来,那么把它想象成按照引用传递。然而与按照引用传递不同的是,一旦对象转让,那么它在原来上下文的那个版本将不复存在。该对象的所有权被转让到新的上下文内。例如,当你将一个 ArrayBuffer 对象从主应用转让到 Worker 中,原始的 ArrayBuffer 被清除并且无法使用。它包含的内容会 (完整无差的) 传递给 Worker 上下文。

      // Create a 32MB "file" and fill it.
       var uInt8Array = new Uint8Array(1024*1024*32); // 32MB
      @@ -585,12 +585,12 @@ 

      通过转让所有

      -

      注意:获取更多该方法相关的可转让对象、性能及特性检测等方法,请参阅 HTML5 Rocks 中的Transferable Objects: Lightning Fast! 。

      +

      注意:获取更多该方法相关的可转让对象、性能及特性检测等方法,请参阅 HTML5 Rocks 中的Transferable Objects: Lightning Fast!

      嵌入式 worker

      -

      目前没有一种「官方」的方法能够像 {{ HTMLElement("script") }} 元素一样将 worker 的代码嵌入的网页中。但是如果一个 {{ HTMLElement("script") }} 元素没有 src 特性,并且它的 type 特性没有指定成一个可运行的 mime-type,那么它就会被认为是一个数据块元素,并且能够被 JavaScript 使用。「数据块」是 HTML5 中一个十分常见的特性,它可以携带几乎任何文本类型的数据。所以,你能够以如下方式嵌入一个 worker:

      +

      目前没有一种「官方」的方法能够像 {{ HTMLElement("script") }} 元素一样将 worker 的代码嵌入的网页中。但是如果一个 {{ HTMLElement("script") }} 元素没有 src 特性,并且它的 type 特性没有指定成一个可运行的 mime-type,那么它就会被认为是一个数据块元素,并且能够被 JavaScript 使用。「数据块」是 HTML5 中一个十分常见的特性,它可以携带几乎任何文本类型的数据。所以,你能够以如下方式嵌入一个 worker:

      <!DOCTYPE html>
       <html>
      @@ -598,50 +598,50 @@ 

      嵌入式 worker

      <meta charset="UTF-8" /> <title>MDN Example - Embedded worker</title> <script type="text/js-worker"> -  // 该脚本不会被 JS 引擎解析,因为它的 mime-type 是 text/js-worker。 -  var myVar = "Hello World!"; -  // 剩下的 worker 代码写到这里。 + // 该脚本不会被 JS 引擎解析,因为它的 mime-type 是 text/js-worker。 + var myVar = "Hello World!"; + // 剩下的 worker 代码写到这里。 </script> <script type="text/javascript"> -  // 该脚本会被 JS 引擎解析,因为它的 mime-type 是 text/javascript。 -  function pageLog (sMsg) { -    // 使用 fragment:这样浏览器只会进行一次渲染/重排。 -    var oFragm = document.createDocumentFragment(); -    oFragm.appendChild(document.createTextNode(sMsg)); -    oFragm.appendChild(document.createElement("br")); -    document.querySelector("#logDisplay").appendChild(oFragm); -  } + // 该脚本会被 JS 引擎解析,因为它的 mime-type 是 text/javascript。 + function pageLog (sMsg) { + // 使用 fragment:这样浏览器只会进行一次渲染/重排。 + var oFragm = document.createDocumentFragment(); + oFragm.appendChild(document.createTextNode(sMsg)); + oFragm.appendChild(document.createElement("br")); + document.querySelector("#logDisplay").appendChild(oFragm); + } </script> <script type="text/js-worker"> -  // 该脚本不会被 JS 引擎解析,因为它的 mime-type 是 text/js-worker。 -  onmessage = function (oEvent) { -    postMessage(myVar); -  }; -  // 剩下的 worker 代码写到这里。 + // 该脚本不会被 JS 引擎解析,因为它的 mime-type 是 text/js-worker。 + onmessage = function (oEvent) { + postMessage(myVar); + }; + // 剩下的 worker 代码写到这里。 </script> <script type="text/javascript"> -  // 该脚本会被 JS 引擎解析,因为它的 mime-type 是 text/javascript。 + // 该脚本会被 JS 引擎解析,因为它的 mime-type 是 text/javascript。 -  // 在过去...: -  // 我们使用 blob builder -  // ...但是现在我们使用 Blob...: -  var blob = new Blob(Array.prototype.map.call(document.querySelectorAll("script[type=\"text\/js-worker\"]"), function (oScript) { return oScript.textContent; }),{type: "text/javascript"}); + // 在过去...: + // 我们使用 blob builder + // ...但是现在我们使用 Blob...: + var blob = new Blob(Array.prototype.map.call(document.querySelectorAll("script[type=\"text\/js-worker\"]"), function (oScript) { return oScript.textContent; }),{type: "text/javascript"}); -  // 创建一个新的 document.worker 属性,包含所有 "text/js-worker" 脚本。 -  document.worker = new Worker(window.URL.createObjectURL(blob)); + // 创建一个新的 document.worker 属性,包含所有 "text/js-worker" 脚本。 + document.worker = new Worker(window.URL.createObjectURL(blob)); -  document.worker.onmessage = function (oEvent) { -    pageLog("Received: " + oEvent.data); -  }; + document.worker.onmessage = function (oEvent) { + pageLog("Received: " + oEvent.data); + }; -  // 启动 worker. -  window.onload = function() { document.worker.postMessage(""); }; + // 启动 worker. + window.onload = function() { document.worker.postMessage(""); }; </script> </head> <body><div id="logDisplay"></div></body> </html>
      -

      现在,嵌入式 worker 已经嵌套进了一个自定义的 document.worker 属性中。

      +

      现在,嵌入式 worker 已经嵌套进了一个自定义的 document.worker 属性中。

      这样也不足为奇,你仍然可以将一个函数转换为 blob,然后为这个 blob 生成 URL 对象。比如:

      @@ -685,14 +685,14 @@

      JavaScript 代码

      } for (var i = 1; i <= 2; i++) { -    var worker = new Worker("fibonacci.js"); -    worker.onmessage = resultReceiver; -    worker.onerror = errorReceiver; -    worker.postMessage(n - i); -  } + var worker = new Worker("fibonacci.js"); + worker.onmessage = resultReceiver; + worker.onerror = errorReceiver; + worker.postMessage(n - i); + } };
      -

      worker 将属性 onmessage 设置为一个函数,当 worker 对象调用 postMessage() 时该函数会接收到发送过来的信息。(注意,这么使用并不等同于定义一个同名的全局变量 ,或是定义一个同名的函数var onmessage 与 function onmessage 将会定义与该名字相同的全局属性,但是它们不会注册能够接收从创建 worker 的网页发送过来的消息的函数。) 这会启用递归,生成自己的新拷贝来处理计算的每一个循环。

      +

      worker 将属性 onmessage 设置为一个函数,当 worker 对象调用 postMessage() 时该函数会接收到发送过来的信息。(注意,这么使用并不等同于定义一个同名的全局变量 ,或是定义一个同名的函数var onmessagefunction onmessage 将会定义与该名字相同的全局属性,但是它们不会注册能够接收从创建 worker 的网页发送过来的消息的函数。) 这会启用递归,生成自己的新拷贝来处理计算的每一个循环。

      HTML 代码

      @@ -727,7 +727,7 @@

      HTML 代码

      </html>
      -

      网页创建了一个 div 元素,ID 为 result , 用它来显示运算结果,然后生成 worker。在生成 worker 后,onmessage 处理函数配置为通过设置 div 元素的内容来显示运算结果,然后 onerror 处理函数被设置为 转储 错误信息。

      +

      网页创建了一个 div 元素,ID 为 result , 用它来显示运算结果,然后生成 worker。在生成 worker 后,onmessage 处理函数配置为通过设置 div 元素的内容来显示运算结果,然后 onerror 处理函数被设置为 转储 错误信息。

      最后,向 worker 发送一条信息来启动它。

      @@ -735,7 +735,7 @@

      HTML 代码

      在后台运行 web I/O

      -

      你可以在 在扩展中使用 worker 这篇文章中找到相关例子。

      +

      你可以在 在扩展中使用 worker 这篇文章中找到相关例子。

      划分任务给多个 worker

      @@ -746,9 +746,9 @@

      其它类型的 worker

      除了专用和共享的 web worker,还有一些其它类型的 worker:

        -
      • ServiceWorkers (服务 worker)一般作为 web 应用程序、浏览器和网络(如果可用)之前的代理服务器。它们旨在(除开其他方面)创建有效的离线体验,拦截网络请求,以及根据网络是否可用采取合适的行动并更新驻留在服务器上的资源。他们还将允许访问推送通知和后台同步 API。
      • -
      • Chrome Workers 是一种仅适用于 firefox 的 worker。如果您正在开发附加组件,希望在扩展程序中使用 worker 且有在你的 worker 中访问  js-ctypes 的权限,你可以使用 Chrome Workers。详情请参阅{{domxref("ChromeWorker")}}。
      • -
      • Audio Workers (音频 worker)使得在 web worker 上下文中直接完成脚本化音频处理成为可能。
      • +
      • ServiceWorkers (服务 worker)一般作为 web 应用程序、浏览器和网络(如果可用)之前的代理服务器。它们旨在(除开其他方面)创建有效的离线体验,拦截网络请求,以及根据网络是否可用采取合适的行动并更新驻留在服务器上的资源。他们还将允许访问推送通知和后台同步 API。
      • +
      • Chrome Workers 是一种仅适用于 firefox 的 worker。如果您正在开发附加组件,希望在扩展程序中使用 worker 且有在你的 worker 中访问 js-ctypes 的权限,你可以使用 Chrome Workers。详情请参阅{{domxref("ChromeWorker")}}。
      • +
      • Audio Workers (音频 worker)使得在 web worker 上下文中直接完成脚本化音频处理成为可能。

      worker 中可用的函数和接口

      @@ -759,7 +759,7 @@

      worker 中可用的函数和接口{{domxref("Navigator")}}
    • {{domxref("XMLHttpRequest")}}
    • {{jsxref("Global_Objects/Array", "Array")}}, {{jsxref("Global_Objects/Date", "Date")}}, {{jsxref("Global_Objects/Math", "Math")}}, and {{jsxref("Global_Objects/String", "String")}}
    • -
    • {{domxref("WindowTimers.setTimeout")}} and {{domxref("WindowTimers.setInterval")}}
    • +
    • {{domxref("WindowTimers.setTimeout")}} and {{domxref("WindowTimers.setInterval")}}

    在一个 worker 中最主要的你不能做的事情就是直接影响父页面。包括操作父页面的节点以及使用页面中的对象。你只能间接地实现,通过{{domxref("DedicatedWorkerGlobalScope.postMessage")}}回传消息给主脚本,然后从主脚本那里执行操作或变化。

    @@ -775,7 +775,7 @@

    规范

    相关链接

    diff --git a/files/zh-cn/web/api/webgl2renderingcontext/beginquery/index.html b/files/zh-cn/web/api/webgl2renderingcontext/beginquery/index.html index 809f3a820d9ddc..0f50097e3d5497 100644 --- a/files/zh-cn/web/api/webgl2renderingcontext/beginquery/index.html +++ b/files/zh-cn/web/api/webgl2renderingcontext/beginquery/index.html @@ -16,7 +16,7 @@

    参数

    target
    -
     {{domxref("GLenum")}} 指定查询个的 target, 可能的值有: +
    {{domxref("GLenum")}} 指定查询个的 target, 可能的值有:
    • gl.ANY_SAMPLES_PASSED: Specifies an occlusion query: these queries detect whether an object is visible (whether the scoped drawing commands pass the depth test and if so, how many samples pass).
    • gl.ANY_SAMPLES_PASSED_CONSERVATIVE: 和以上一样, 但是是一个不精确和更快的版本。
    • diff --git a/files/zh-cn/web/api/webgl2renderingcontext/begintransformfeedback/index.html b/files/zh-cn/web/api/webgl2renderingcontext/begintransformfeedback/index.html index 350ecbdb1072c4..ca124db6660433 100644 --- a/files/zh-cn/web/api/webgl2renderingcontext/begintransformfeedback/index.html +++ b/files/zh-cn/web/api/webgl2renderingcontext/begintransformfeedback/index.html @@ -12,7 +12,7 @@ ---
      {{APIRef("WebGL")}} {{SeeCompatTable}}
      -

      WebGL 2 API 的 WebGL2RenderingContext.beginTransformFeedback() 方法开始一个变换回传(Transform Feedback)操作。

      +

      WebGL 2 APIWebGL2RenderingContext.beginTransformFeedback() 方法开始一个变换回传(Transform Feedback)操作。

      语法

      diff --git a/files/zh-cn/web/api/webgl2renderingcontext/bindbufferbase/index.html b/files/zh-cn/web/api/webgl2renderingcontext/bindbufferbase/index.html index d31d15faca54b7..bff7bd277b8de0 100644 --- a/files/zh-cn/web/api/webgl2renderingcontext/bindbufferbase/index.html +++ b/files/zh-cn/web/api/webgl2renderingcontext/bindbufferbase/index.html @@ -12,7 +12,7 @@ ---
      {{APIRef("WebGL")}} {{SeeCompatTable}}
      -

      WebGL 2 API 的 WebGL2RenderingContext.bindBufferBase() 方法将一个 {{domxref("WebGLBuffer")}} 绑定到某个点 (target) 的特定的 index上。

      +

      WebGL 2 APIWebGL2RenderingContext.bindBufferBase() 方法将一个 {{domxref("WebGLBuffer")}} 绑定到某个点 (target) 的特定的 index上。

      语法

      diff --git a/files/zh-cn/web/api/webgl2renderingcontext/createsampler/index.html b/files/zh-cn/web/api/webgl2renderingcontext/createsampler/index.html index d1192e10ffc0c5..c106b3061cad31 100644 --- a/files/zh-cn/web/api/webgl2renderingcontext/createsampler/index.html +++ b/files/zh-cn/web/api/webgl2renderingcontext/createsampler/index.html @@ -5,7 +5,7 @@ ---
      {{APIRef("WebGL")}} {{SeeCompatTable}}
      -

      WebGL 2 API 定义的 WebGL2RenderingContext.createSampler() 方法用于创建并初始化 {{domxref("WebGLSampler")}} 对象。

      +

      WebGL 2 API 定义的 WebGL2RenderingContext.createSampler() 方法用于创建并初始化 {{domxref("WebGLSampler")}} 对象。

      句法

      @@ -22,7 +22,7 @@

      返回值

      例子

      -

      gl 必须是 {{domxref("WebGL2RenderingContext")}} 类型. WebGL 1 不支持  WebGLSampler 对象。

      +

      gl 必须是 {{domxref("WebGL2RenderingContext")}} 类型. WebGL 1 不支持 WebGLSampler 对象。

      var sampler = gl.createSampler();
       
      diff --git a/files/zh-cn/web/api/webgl2renderingcontext/createvertexarray/index.html b/files/zh-cn/web/api/webgl2renderingcontext/createvertexarray/index.html index 21c69f2225353c..0ef686a0b07601 100644 --- a/files/zh-cn/web/api/webgl2renderingcontext/createvertexarray/index.html +++ b/files/zh-cn/web/api/webgl2renderingcontext/createvertexarray/index.html @@ -8,7 +8,7 @@ ---
      {{APIRef("WebGL")}} {{SeeCompatTable}}
      -

      WebGL 2 API 中的 WebGL2RenderingContext.createVertexArray()方法创建并初始化(creates and initializes)一个 {{domxref("WebGLVertexArrayObject")}} 的对象 (object) ,它代表一个指向顶点数组数据的顶点数组对象(vertex array object (VAO) ),并为不同的顶点数据集提供名称。

      +

      WebGL 2 API 中的 WebGL2RenderingContext.createVertexArray()方法创建并初始化(creates and initializes)一个 {{domxref("WebGLVertexArrayObject")}} 的对象 (object) ,它代表一个指向顶点数组数据的顶点数组对象(vertex array object (VAO) ),并为不同的顶点数据集提供名称。

      句法

      @@ -21,7 +21,7 @@

      参数

      返回值

      -

      一个{{domxref("WebGLVertexArrayObject")}}对象 代表 一个顶点数组对象 (VAO) ,该对象指向顶点数据。

      +

      一个{{domxref("WebGLVertexArrayObject")}}对象 代表 一个顶点数组对象 (VAO) ,该对象指向顶点数据。

      示例

      diff --git a/files/zh-cn/web/api/webgl2renderingcontext/drawbuffers/index.html b/files/zh-cn/web/api/webgl2renderingcontext/drawbuffers/index.html index 61e5d4199a3736..f7db4995b5f398 100644 --- a/files/zh-cn/web/api/webgl2renderingcontext/drawbuffers/index.html +++ b/files/zh-cn/web/api/webgl2renderingcontext/drawbuffers/index.html @@ -5,7 +5,7 @@ ---
      {{APIRef("WebGL")}} {{SeeCompatTable}}
      -

      WebGL 2 APIWebGL2RenderingContext.drawBuffers()  方法定义了将写入零散数据(fragment colors)的绘制缓存 (draw buffer)。绘制缓存设置了上一次绑定帧缓存状态,如果没有帧缓存可用的话,则用绘制缓存。

      +

      WebGL 2 APIWebGL2RenderingContext.drawBuffers() 方法定义了将写入零散数据(fragment colors)的绘制缓存 (draw buffer)。绘制缓存设置了上一次绑定帧缓存状态,如果没有帧缓存可用的话,则用绘制缓存。

      语法

      @@ -32,7 +32,7 @@

      返回值

      报错信息

        -
      • 如果 buffers 包含了不止一个合法值,  gl.INVALID_ENUM错误会被抛出
      • +
      • 如果 buffers 包含了不止一个合法值, gl.INVALID_ENUM错误会被抛出

      示例

      diff --git a/files/zh-cn/web/api/webgl2renderingcontext/index.html b/files/zh-cn/web/api/webgl2renderingcontext/index.html index 8bfb5810f0d8e7..6448d1118b45c8 100644 --- a/files/zh-cn/web/api/webgl2renderingcontext/index.html +++ b/files/zh-cn/web/api/webgl2renderingcontext/index.html @@ -5,23 +5,23 @@ ---
      {{APIRef("WebGL")}} {{SeeCompatTable}}
      -

      WebGL2RenderingContext 接口在底层使用了 OpenGL ES 3.0 为 HTML 的 {{HTMLElement("canvas")}} 元素提供了绘图上下文。

      +

      WebGL2RenderingContext 接口在底层使用了 OpenGL ES 3.0 为 HTML 的 {{HTMLElement("canvas")}} 元素提供了绘图上下文。

      -

      要获取该接口的实例对象需要调用一个  <canvas>  标签对象的 {{domxref("HTMLCanvasElement.getContext()", "getContext()")}} 函数,并将 "webgl2" 作为参数传递:

      +

      要获取该接口的实例对象需要调用一个 <canvas> 标签对象的 {{domxref("HTMLCanvasElement.getContext()", "getContext()")}} 函数,并将 "webgl2" 作为参数传递:

      var canvas = document.getElementById('myCanvas');
       var gl = canvas.getContext('webgl2');
       
      -

      WebGL 2 是 WebGL 1 的扩展。 WebGL2RenderingContext 接口实现了 {{domxref("WebGLRenderingContext")}} 接口的所有成员。 有一些 WebGL 1 上下文中的方法在使用 WebGL 2 上下文的时候可以接受附加值。 您可以通过 WebGL 1 的参考页了解这些信息。

      +

      WebGL 2 是 WebGL 1 的扩展。 WebGL2RenderingContext 接口实现了 {{domxref("WebGLRenderingContext")}} 接口的所有成员。 有一些 WebGL 1 上下文中的方法在使用 WebGL 2 上下文的时候可以接受附加值。 您可以通过 WebGL 1 的参考页了解这些信息。

      -

      这个 WebGL 教程 中提供了关于如何开始使用 WebGL 的更多信息、示例以及资源。

      +

      这个 WebGL 教程 中提供了关于如何开始使用 WebGL 的更多信息、示例以及资源。

      常量

      -

      请看 WebGL 常量 页面。

      +

      请看 WebGL 常量 页面。

      状态信息

      @@ -36,7 +36,7 @@

      缓冲区

      {{domxref("WebGL2RenderingContext.copyBufferSubData()")}}
      将缓冲区的部分数据复制到另一个缓冲区。
      {{domxref("WebGL2RenderingContext.getBufferSubData()")}}
      -
      从缓冲区中读取数据,然后将其写入到 {{jsxref("ArrayBuffer")}} 或 {{jsxref("SharedArrayBuffer")}} 中。
      +
      从缓冲区中读取数据,然后将其写入到 {{jsxref("ArrayBuffer")}} 或 {{jsxref("SharedArrayBuffer")}} 中。

    帧缓冲区

    @@ -135,7 +135,7 @@

    查询对象

    {{domxref("WebGL2RenderingContext.endQuery()")}}
    Marks the end of an asynchronous query.
    {{domxref("WebGL2RenderingContext.getQuery()")}}
    -
    返回一个指定目标的 {{domxref("WebGLQuery")}} 对象。
    +
    返回一个指定目标的 {{domxref("WebGLQuery")}} 对象。
    {{domxref("WebGL2RenderingContext.getQueryParameter()")}}
    返回关于一个查询的信息。
    @@ -148,7 +148,7 @@

    采样对象

    {{domxref("WebGL2RenderingContext.deleteSampler()")}}
    Deletes a given {{domxref("WebGLSampler")}} object.
    {{domxref("WebGL2RenderingContext.bindSampler()")}}
    -
    Binds a given {{domxref("WebGLSampler")}} to a texture unit.
    +
    Binds a given {{domxref("WebGLSampler")}} to a texture unit.
    {{domxref("WebGL2RenderingContext.isSampler()")}}
    Returns true if a given object is a valid {{domxref("WebGLSampler")}} object.
    {{domxref("WebGL2RenderingContext.samplerParameter()", "WebGL2RenderingContext.samplerParameter[if]()")}}
    @@ -173,7 +173,7 @@

    同步对象

    {{domxref("WebGL2RenderingContext.waitSync()")}}
    Returns immediately, but waits on the GL server until the given {{domxref("WebGLSync")}} object is signaled.
    {{domxref("WebGL2RenderingContext.getSyncParameter()")}}
    -
    根据一个 {{domxref("WebGLSync")}} 对象返回参数信息。
    +
    根据一个 {{domxref("WebGLSync")}} 对象返回参数信息。

    变换反馈

    @@ -186,7 +186,7 @@

    变换反馈

    {{domxref("WebGL2RenderingContext.isTransformFeedback()")}}
    Returns true if the passed object is a valid {{domxref("WebGLTransformFeedback")}} object.
    {{domxref("WebGL2RenderingContext.bindTransformFeedback()")}}
    -
    Binds a passed {{domxref("WebGLTransformFeedback")}} object to the current GL state.
    +
    Binds a passed {{domxref("WebGLTransformFeedback")}} object to the current GL state.
    {{domxref("WebGL2RenderingContext.beginTransformFeedback()")}}
    Starts a transform feedback operation.
    {{domxref("WebGL2RenderingContext.endTransformFeedback()")}}
    @@ -234,7 +234,7 @@

    顶点数组对象

    {{domxref("WebGL2RenderingContext.deleteVertexArray()")}}
    删除一个指定的 {{domxref("WebGLVertexArrayObject")}}。
    {{domxref("WebGL2RenderingContext.isVertexArray()")}}
    -
    如果一个指定的 {{domxref("WebGLVertexArrayObject")}} 对象有效则返回 true
    +
    如果一个指定的 {{domxref("WebGLVertexArrayObject")}} 对象有效则返回 true
    {{domxref("WebGL2RenderingContext.bindVertexArray()")}}
    绑定一个指定的 {{domxref("WebGLVertexArrayObject")}} 到缓冲。
    diff --git a/files/zh-cn/web/api/webgl2renderingcontext/teximage3d/index.html b/files/zh-cn/web/api/webgl2renderingcontext/teximage3d/index.html index f00108bd6d90d3..e7b37203ad82a3 100644 --- a/files/zh-cn/web/api/webgl2renderingcontext/teximage3d/index.html +++ b/files/zh-cn/web/api/webgl2renderingcontext/teximage3d/index.html @@ -24,7 +24,7 @@

    参数

    target
    -
     {{domxref("GLenum")}}指定绑定纹理图像类型。可能值: +
    {{domxref("GLenum")}}指定绑定纹理图像类型。可能值:
    • gl.TEXTURE_3D: 一个 3D 贴图
    • gl.TEXTURE_2D_ARRAY: 一个 2D 数组贴图
    • @@ -66,7 +66,7 @@

      参数

    width
    -
     {{domxref("GLsizei")}}指定纹理的宽度
    +
    {{domxref("GLsizei")}}指定纹理的宽度
    height
    {{domxref("GLsizei")}} 指定纹理的高度
    depth
    diff --git a/files/zh-cn/web/api/webgl2renderingcontext/uniform/index.html b/files/zh-cn/web/api/webgl2renderingcontext/uniform/index.html index 0157e58cbb513a..0da885757fb63a 100644 --- a/files/zh-cn/web/api/webgl2renderingcontext/uniform/index.html +++ b/files/zh-cn/web/api/webgl2renderingcontext/uniform/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef("WebGL")}} {{SeeCompatTable}}
    -

     WebGL APIWebGL2RenderingContext.uniform[1234][uif][v]() 方法提供了 uniform(es)变量的详细值

    +

    WebGL APIWebGL2RenderingContext.uniform[1234][uif][v]() 方法提供了 uniform(es)变量的详细值

    ui 意为无符号整数, i 意为整数,f 意为浮点数, 并且 v 意为矢量。
    @@ -41,7 +41,7 @@

    参数

    一个新的值被应用到 uniform 变量当中。合理情况:
    • {{jsxref("Number")}} 如果是无符号整数值 (则用 ui方法),如果是整数值 (则用 i方法), 如果是浮点数 (则用f方法).
    • -
    •  {{jsxref("Uint32Array")}} 用于无符号整数向量(矢量)方法 (则用uiv方法).
    • +
    • {{jsxref("Uint32Array")}} 用于无符号整数向量(矢量)方法 (则用uiv方法).
    diff --git a/files/zh-cn/web/api/webgl2renderingcontext/uniformmatrix/index.html b/files/zh-cn/web/api/webgl2renderingcontext/uniformmatrix/index.html index 911291a4202f1a..dd05808fc4b97b 100644 --- a/files/zh-cn/web/api/webgl2renderingcontext/uniformmatrix/index.html +++ b/files/zh-cn/web/api/webgl2renderingcontext/uniformmatrix/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef("WebGL")}} {{SeeCompatTable}}
    -
    WebGL 2 API WebGL2RenderingContext.uniformMatrix[234]x[234]fv()  方法向 uniform 变量中传入指定的矩阵值。
    +
    WebGL 2 API WebGL2RenderingContext.uniformMatrix[234]x[234]fv() 方法向 uniform 变量中传入指定的矩阵值。

    这个方法不用 2x2, 3x3, 和 4x4 版本 . 他们通常用2, 3, 和4, 分别表示,详见下方语法。

    diff --git a/files/zh-cn/web/api/webgl_api/basic_2d_animation_example/index.html b/files/zh-cn/web/api/webgl_api/basic_2d_animation_example/index.html index 991f6de8f87fa2..8898d863c512fc 100644 --- a/files/zh-cn/web/api/webgl_api/basic_2d_animation_example/index.html +++ b/files/zh-cn/web/api/webgl_api/basic_2d_animation_example/index.html @@ -34,7 +34,7 @@

    Vertex shader

    主程序与我们共享属性 aVertexPosition,它是顶点在其使用的任何坐标系中的位置。我们需要转换这些值,以便位置的两个组件都在-1.0 到 1.0 的范围内。通过乘以基于上下文宽高比的缩放因子,可以很容易地完成此操作。我们很快就会看到这个计算。

    -

    我们也可以通过一次变换来旋转这个图形。 The rotated position of the vertex is computed by applying the rotation vector, found in the uniform uRotationVector, that's been computed by the JavaScript code.

    +

    我们也可以通过一次变换来旋转这个图形。 The rotated position of the vertex is computed by applying the rotation vector, found in the uniform uRotationVector, that's been computed by the JavaScript code.

    Then the final position is computed by multiplying the rotated position by the scaling vector provided by the JavaScript code in uScalingFactor. The values of z and w are fixed at 0.0 and 1.0, respectively, since we're drawing in 2D.

    @@ -148,9 +148,9 @@

    Globals and initialization

    After getting the WebGL context, gl, we need to begin by building the shader program. Here, we're using code designed to let us add multiple shaders to our program quite easily. The array shaderSet contains a list of objects, each describing one shader function to be compiled into the program. Each function has a type (one of gl.VERTEX_SHADER or gl.FRAGMENT_SHADER) and an ID (the ID of the {{HTMLElement("script")}} element containing the shader's code).

    -

    The shader set is passed into the function buildShaderProgram(), which returns the compiled and linked shader program.  We'll look at how this works next.

    +

    The shader set is passed into the function buildShaderProgram(), which returns the compiled and linked shader program. We'll look at how this works next.

    -

    Once the shader program is built, we compute the aspect ratio of our context by dividing its width by its height. Then we set the current rotation vector for the animation to [0, 1], and the scaling vector to [1.0, aspectRatio]. The scaling vector, as we saw in the vertex shader, is used to scale the coordinates to fit the -1.0 to 1.0 range.

    +

    Once the shader program is built, we compute the aspect ratio of our context by dividing its width by its height. Then we set the current rotation vector for the animation to [0, 1], and the scaling vector to [1.0, aspectRatio]. The scaling vector, as we saw in the vertex shader, is used to scale the coordinates to fit the -1.0 to 1.0 range.

    The array of vertices is created next, as a {{jsxref("Float32Array")}} with six coordinates (three 2D vertices) per triangle to be drawn, for a total of 12 values.

    diff --git a/files/zh-cn/web/api/webgl_api/by_example/boilerplate_1/index.html b/files/zh-cn/web/api/webgl_api/by_example/boilerplate_1/index.html index 0dba83ec64616d..c6629ed93fe7bb 100644 --- a/files/zh-cn/web/api/webgl_api/by_example/boilerplate_1/index.html +++ b/files/zh-cn/web/api/webgl_api/by_example/boilerplate_1/index.html @@ -16,9 +16,9 @@

    用于设置 WebGL 呈

    现在你很习惯看到相同的{{Glossary("HTML")}}, {{Glossary("CSS")}}和{{Glossary("JavaScript")}}重复一遍又一遍。所以我们从现在起要隐藏他们。这将使我们能够专注于代码最有趣的部分相关学习{{Glossary("WebGL")}}。

    -

    特别是,在 HTML 的{{HTMLElement("p")}}元素包含一些描述性的文本页面也可以是错误消息;一个{{HTMLElement("canvas")}} 元素;和一个可选的{{HTMLElement("button")}}。CSS 规则包含bodycanvas, 和button。任何额外的冗余的 CSS 和 HTML 将不会显示在页面的具体的例子。

    +

    特别是,在 HTML 的{{HTMLElement("p")}}元素包含一些描述性的文本页面也可以是错误消息;一个{{HTMLElement("canvas")}} 元素;和一个可选的{{HTMLElement("button")}}。CSS 规则包含body, canvas, 和button。任何额外的冗余的 CSS 和 HTML 将不会显示在页面的具体的例子。

    -

    在以下示例中,我们将使用一个 JavaScript 函数功能,getRenderingContext() ,来初始化{{domxref("WebGLRenderingContext","WebGL rendering context", "", 1)}}。现在,您应该能够了解什么功能。基本上,它得到了 WebGL 从画布元素,渲染上下文初始化绘图缓冲区,清除它黑色,并返回初始化上下文。在错误的情况下,它会显示一个错误消息,并返回 {{jsxref("null")}}。

    +

    在以下示例中,我们将使用一个 JavaScript 函数功能,getRenderingContext() ,来初始化{{domxref("WebGLRenderingContext","WebGL rendering context", "", 1)}}。现在,您应该能够了解什么功能。基本上,它得到了 WebGL 从画布元素,渲染上下文初始化绘图缓冲区,清除它黑色,并返回初始化上下文。在错误的情况下,它会显示一个错误消息,并返回 {{jsxref("null")}}。

    最后,所有 JavaScript 代码将运行在一个直接的函数,这是一种常见的 JavaScript 技术 (see {{Glossary("Function")}})。函数声明和调用也将被隐藏。

    diff --git a/files/zh-cn/web/api/webgl_api/by_example/canvas_size_and_webgl/index.html b/files/zh-cn/web/api/webgl_api/by_example/canvas_size_and_webgl/index.html index b43a861de37695..b0ecb00dc52bfd 100644 --- a/files/zh-cn/web/api/webgl_api/by_example/canvas_size_and_webgl/index.html +++ b/files/zh-cn/web/api/webgl_api/by_example/canvas_size_and_webgl/index.html @@ -15,9 +15,9 @@

    canvas 属性值大小对

    使用 {{domxref("WebGLRenderingContext.scissor()","scissor()")}} 和 {{domxref("WebGLRenderingContext.clear()","clear()")}} 我们可以观察到 canvas 属性大小是如何影响 WebGL 绘图展示的。

    -

    第一个 canvas 元素通过 css 样式定义了元素的大小,之后通过 javascript 获取该元素的 {{domxref("Element.clientWidth","clientWidth")}} 和{{domxref("Element.clientHeight","clientHeight")}} 值,并分别赋值给元素的  {{domxref("HTMLCanvasElement.width","width")}} 和{{domxref("HTMLCanvasElement.height","height")}}。

    +

    第一个 canvas 元素通过 css 样式定义了元素的大小,之后通过 javascript 获取该元素的 {{domxref("Element.clientWidth","clientWidth")}} 和{{domxref("Element.clientHeight","clientHeight")}} 值,并分别赋值给元素的 {{domxref("HTMLCanvasElement.width","width")}} 和{{domxref("HTMLCanvasElement.height","height")}}。

    -

    相反的,第二个 canvas 元素并没有这样做,canvas 内部对象的{{domxref("HTMLCanvasElement.width","width")}} 和 {{domxref("HTMLCanvasElement.height","height")}} 属性值仍然是默认值,这样导致在浏览器中实际画布大小是不同的。

    +

    相反的,第二个 canvas 元素并没有这样做,canvas 内部对象的{{domxref("HTMLCanvasElement.width","width")}} 和 {{domxref("HTMLCanvasElement.height","height")}} 属性值仍然是默认值,这样导致在浏览器中实际画布大小是不同的。

    使用 {{domxref("WebGLRenderingContext.scissor()","scissor()")}} 和{{domxref("WebGLRenderingContext.clear()","clear()")}}在 canvas 中绘制矩形的效果是清晰可见的,在第一个 canvas 中,通过指定位置和像素大小,可以得到我们想要的效果,但是在第二个 canvas 中,这个矩形的位置、大小都是错误展示的。

    diff --git a/files/zh-cn/web/api/webgl_api/by_example/clearing_by_clicking/index.html b/files/zh-cn/web/api/webgl_api/by_example/clearing_by_clicking/index.html index 6d0b716a694f71..e1435253cecec3 100644 --- a/files/zh-cn/web/api/webgl_api/by_example/clearing_by_clicking/index.html +++ b/files/zh-cn/web/api/webgl_api/by_example/clearing_by_clicking/index.html @@ -99,7 +99,7 @@

    用随机颜色渲染上下文

    }, false);
    -

    这个例子的代码可以在  GitHub 上下载。

    +

    这个例子的代码可以在 GitHub 上下载。

    diff --git a/files/zh-cn/web/api/webgl_api/by_example/clearing_with_colors/index.html b/files/zh-cn/web/api/webgl_api/by_example/clearing_with_colors/index.html index d01da6c5191714..96cdd03fa7b335 100644 --- a/files/zh-cn/web/api/webgl_api/by_example/clearing_with_colors/index.html +++ b/files/zh-cn/web/api/webgl_api/by_example/clearing_with_colors/index.html @@ -17,13 +17,13 @@

    清除画布(

    这是一个最简单的 WebGL 代码。通过{{domxref("WebGLRenderingContext","rendering context", "", 1)}}设置好状态后,直接将整个区域清除为绿色。要注意 css 已经将 canvas 画布设置为黑色了,所以当画布变为绿色时,我们就知道神奇的 WebGL 魔法起作用了!

    -

    此外,你需要注意用单色绘制图像是两个步骤:首先,通过使用{{domxref("WebGLRenderingContext.clearColor()","clearColor()")}}设置清除色为绿色。这只会改变 Webgl 内部的一个状态,但并不会绘制任何东西。接下来,我们就真的开始绘制了,使用{{domxref("WebGLRenderingContext.clear()","clear()")}}方法,这是一个典型的用 webgl 绘制的方法,webgl 实际上只有少数的几个绘制方法 (clear() 就是其中之一)。其他方法大多都是类似设置或改变 WebGl 状态和变量的(例如设置 clearcolor)。

    +

    此外,你需要注意用单色绘制图像是两个步骤:首先,通过使用{{domxref("WebGLRenderingContext.clearColor()","clearColor()")}}设置清除色为绿色。这只会改变 Webgl 内部的一个状态,但并不会绘制任何东西。接下来,我们就真的开始绘制了,使用{{domxref("WebGLRenderingContext.clear()","clear()")}}方法,这是一个典型的用 webgl 绘制的方法,webgl 实际上只有少数的几个绘制方法 (clear() 就是其中之一)。其他方法大多都是类似设置或改变 WebGl 状态和变量的(例如设置 clearcolor)。

    这里有许多属性和方法作用于 Webgl,清除方法只是你第一个掌握的,这也就是为什么 WebGL/OpenGl 经常被叫做状态机,通过调整这些属性和方法可以修改 WebGL 内部的状态,从而进行输出(例如先设置好绿色,在清除画布的时候像素点都变成了绿色)

    最后,我们知道在 WebGl 中颜色格式是由 RGBA(红,绿,蓝,透明度)组成的,因此 clearColor() 方法接受四个参数

    -

     

    +

    @@ -90,7 +90,7 @@

    清除画布(

    -

    这个例子的代码可以在 GitHub 上下载。

    +

    这个例子的代码可以在 GitHub 上下载。

    diff --git a/files/zh-cn/web/api/webgl_api/by_example/index.html b/files/zh-cn/web/api/webgl_api/by_example/index.html index c7f73bcef51e00..94a459f12fb428 100644 --- a/files/zh-cn/web/api/webgl_api/by_example/index.html +++ b/files/zh-cn/web/api/webgl_api/by_example/index.html @@ -7,7 +7,7 @@
    -

    WebGL 例子是一系列附有简短的解释的样本用来展示 WebGL 的概念和功能。这些示例根据主题和难度级别进行排序,涵盖 WebGL 渲染上下文,着色器编程,纹理,几何图形,用户交互等。

    +

    WebGL 例子是一系列附有简短的解释的样本用来展示 WebGL 的概念和功能。这些示例根据主题和难度级别进行排序,涵盖 WebGL 渲染上下文,着色器编程,纹理,几何图形,用户交互等。

    主题例子

    diff --git a/files/zh-cn/web/api/webgl_api/by_example/scissor_animation/index.html b/files/zh-cn/web/api/webgl_api/by_example/scissor_animation/index.html index 292efe2772a3a7..2e41b069cd5cef 100644 --- a/files/zh-cn/web/api/webgl_api/by_example/scissor_animation/index.html +++ b/files/zh-cn/web/api/webgl_api/by_example/scissor_animation/index.html @@ -14,7 +14,7 @@

    剪切动画

    -

    本例中,我们使用{{domxref("WebGLRenderingContext.scissor()","scissor()")}} 和 {{domxref("WebGLRenderingContext.clear()","clear()")}}。我们再次建立一个动画循环使用计时器。注意,这次是方块的位置 (剪切区) 更新每一帧 (我们设置帧率大约每 17 毫秒,约 60 fps -帧每秒)

    +

    本例中,我们使用{{domxref("WebGLRenderingContext.scissor()","scissor()")}} 和 {{domxref("WebGLRenderingContext.clear()","clear()")}}。我们再次建立一个动画循环使用计时器。注意,这次是方块的位置 (剪切区) 更新每一帧 (我们设置帧率大约每 17 毫秒,约 60 fps -帧每秒)

    相比之下,方块的颜色 (用{{domxref("WebGLRenderingContext.clearColor()","clearColor")}}) 仅创建一个新的方块。这是一个很好的演示{{Glossary("WebGL")}}是一个状态机。对于每一个方块,我们设置它的颜色,然后只更新它的位置每一帧。WebGL 的清晰的颜色状态维持在设定值,直到我们再次改变它创建一个新的方块。

    diff --git a/files/zh-cn/web/api/webgl_api/by_example/simple_color_animation/index.html b/files/zh-cn/web/api/webgl_api/by_example/simple_color_animation/index.html index a9796b5b5664b5..38e90bfe44d709 100644 --- a/files/zh-cn/web/api/webgl_api/by_example/simple_color_animation/index.html +++ b/files/zh-cn/web/api/webgl_api/by_example/simple_color_animation/index.html @@ -16,7 +16,7 @@

    通过填充实现色彩动画

    本案例使用{{Glossary("WebGL")}}来实现简单的色彩动画和用户交互效果,用户可以通过按按钮来开始/暂停/重新开始动画。

    -

    我们把 {{Glossary("WebGL")}}函数放在一个定时循环器里 (setInterval)。通过监听点击事件来让用户开始/暂停动画。并通过定时器来循环执行绘制指令 (通常是逐帧动画,这次我们设置为逐秒动画) 

    +

    我们把 {{Glossary("WebGL")}}函数放在一个定时循环器里 (setInterval)。通过监听点击事件来让用户开始/暂停动画。并通过定时器来循环执行绘制指令 (通常是逐帧动画,这次我们设置为逐秒动画)

    @@ -110,7 +110,7 @@

    通过填充实现色彩动画

    }, false);
    -

    在 GitHub.上查看源码

    +

    GitHub.上查看源码

    diff --git a/files/zh-cn/web/api/webgl_api/constants/index.html b/files/zh-cn/web/api/webgl_api/constants/index.html index a850231cdff0b8..e7cee6fe0ffaa7 100644 --- a/files/zh-cn/web/api/webgl_api/constants/index.html +++ b/files/zh-cn/web/api/webgl_api/constants/index.html @@ -5,7 +5,7 @@ ---
    {{WebGLSidebar}}
    -

    WebGL API 提供了一些常量,这些常量常作为参数传入函数调用,或常作为函数的返回值。所有这些常量都是 {{domxref("GLenum")}} 类型。

    +

    WebGL API 提供了一些常量,这些常量常作为参数传入函数调用,或常作为函数的返回值。所有这些常量都是 {{domxref("GLenum")}} 类型。

    标准 WebGL 常量挂载在 WebGL 的两个渲染上下文环境({{domxref("WebGLRenderingContext")}} 和{{domxref("WebGL2RenderingContext")}})中,因此,以形如gl.CONSTANT_NAME的形式使用 WebGL 常量:

    @@ -15,12 +15,12 @@ gl.getParameter(gl.LINE_WIDTH);
    -

    其中一些常量也由 WebGL 扩展 提供,如下方提供的 清单

    +

    其中一些常量也由 WebGL 扩展 提供,如下方提供的 清单

    var debugInfo = gl.getExtension('WEBGL_debug_renderer_info');
     var vendor = gl.getParameter(debugInfo.UNMASKED_VENDOR_WEBGL);
    -

    WebGL tutorial 中有更多关于 WebGL 的信息,示例和如何开始 WebGL 编程的其它资源。

    +

    WebGL tutorial 中有更多关于 WebGL 的信息,示例和如何开始 WebGL 编程的其它资源。

    常量表

    @@ -55,7 +55,7 @@

    清除缓存

    STENCIL_BUFFER_BIT 0x00000400 - 传递给 clear 来清除当前模板缓冲区。 + 传递给 clear 来清除当前模板缓冲区。 COLOR_BUFFER_BIT @@ -67,7 +67,7 @@

    清除缓存

    指定渲染图元 Rendering primitives

    -

    传递给 {{domxref("WebGLRenderingContext.drawElements()")}} 或{{domxref("WebGLRenderingContext.drawArrays()")}} 的常量来指定要以何种原始类型渲染。

    +

    传递给 {{domxref("WebGLRenderingContext.drawElements()")}} 或{{domxref("WebGLRenderingContext.drawArrays()")}} 的常量来指定要以何种原始类型渲染。

    @@ -81,38 +81,38 @@

    指定渲染图元 Rendering pr

    - + - + - + - + - + - + @@ -134,42 +134,42 @@

    混合模式

    - + - + - + - + - + - + - + - + @@ -189,12 +189,12 @@

    混合模式

    - + - + @@ -204,7 +204,7 @@

    混合模式

    - +
    POINTS 0x0000传递给 drawElements 或drawArrays 画点。传递给 drawElementsdrawArrays 画点。
    LINES 0x0001传递给  drawElements 或drawArrays 画线段。 每个顶点链接到它的下一个顶点。每两点画一条线段。传递给 drawElementsdrawArrays 画线段。 每个顶点链接到它的下一个顶点。每两点画一条线段。
    LINE_LOOP 0x0002传递给  drawElements 或drawArrays 画回路。 每两个点被当作是一条独立的线段。线段首尾相连。传递给 drawElementsdrawArrays 画回路。 每两个点被当作是一条独立的线段。线段首尾相连。
    LINE_STRIP 0x0003传递给  drawElements 或drawArrays 画一个从第一个顶点到最后一个顶点绘制一组相连的线段。传递给 drawElementsdrawArrays 画一个从第一个顶点到最后一个顶点绘制一组相连的线段。
    TRIANGLES 0x0004传递给drawElements 或drawArrays画三角形。 每三个点创建一个独立的三角形。传递给drawElementsdrawArrays画三角形。 每三个点创建一个独立的三角形。
    TRIANGLE_STRIP 0x0005传递给 drawElementsdrawArrays 画一组相连的三角形带。传递给 drawElementsdrawArrays 画一组相连的三角形带。
    TRIANGLE_FAN 0x0006 -

    传递给 drawElements 或drawArrays 画一组连接的三角形。以第一个点做原点,每个顶点都连着它的前一个点和第一个顶点(类似风扇)。

    +

    传递给 drawElementsdrawArrays 画一组连接的三角形。以第一个点做原点,每个顶点都连着它的前一个点和第一个顶点(类似风扇)。

    ZERO 0传递给blendFunc 或 blendFuncSeparate 以关闭分量。传递给blendFuncblendFuncSeparate 以关闭分量。
    ONE 1传递给 blendFunc 或 blendFuncSeparate 以打开分量。传递给 blendFuncblendFuncSeparate 以打开分量。
    SRC_COLOR 0x0300传递给 blendFunc 或 blendFuncSeparate 以将分量乘以源元素颜色分量。传递给 blendFuncblendFuncSeparate 以将分量乘以源元素颜色分量。
    ONE_MINUS_SRC_COLOR 0x0301传递给 blendFunc 或 blendFuncSeparate 以将分量乘以 1 减去源颜色分量。传递给 blendFuncblendFuncSeparate 以将分量乘以 1 减去源颜色分量。
    SRC_ALPHA 0x0302传递给 blendFunc 或 blendFuncSeparate 以将分量乘以源颜色的 alpha 值。传递给 blendFuncblendFuncSeparate 以将分量乘以源颜色的 alpha 值。
    ONE_MINUS_SRC_ALPHA 0x0303传递给 blendFunc 或 blendFuncSeparate 以将分量乘以一个源颜色的 alpha 值。传递给 blendFuncblendFuncSeparate 以将分量乘以一个源颜色的 alpha 值。
    DST_ALPHA 0x0304传递给 blendFunc 或 blendFuncSeparate 以将分量乘以目标颜色的 alpha 值。传递给 blendFuncblendFuncSeparate 以将分量乘以目标颜色的 alpha 值。
    ONE_MINUS_DST_ALPHA 0x0305传递给 blendFunc 或 blendFuncSeparate 以将分量乘以 1 减去目标颜色的 alpha 值。传递给 blendFuncblendFuncSeparate 以将分量乘以 1 减去目标颜色的 alpha 值。
    DST_COLOR
    CONSTANT_COLOR 0x8001传递给 blendFuncblendFuncSeparate 以指定常量颜色的混合函数。传递给 blendFuncblendFuncSeparate 以指定常量颜色的混合函数。
    ONE_MINUS_CONSTANT_COLOR 0x8002传递给 blendFuncblendFuncSeparate 以指定 1 减去常量颜色的混合函数。传递给 blendFuncblendFuncSeparate 以指定 1 减去常量颜色的混合函数。
    CONSTANT_ALPHA
    ONE_MINUS_CONSTANT_ALPHA 0x8004传递给 blendFuncblendFuncSeparate 以指定 1 减去一个常量 alpha 的混合函数。传递给 blendFuncblendFuncSeparate 以指定 1 减去一个常量 alpha 的混合函数。
    @@ -225,24 +225,24 @@

    混合方程

    FUNC_ADD 0x8006 - 传递给 blendEquation 或 blendEquationSeparate 来设置加法混合函数。 + 传递给 blendEquationblendEquationSeparate 来设置加法混合函数。 FUNC_SUBSTRACT 0x800A - 传递给 blendEquation 或 blendEquationSeparate 来指定减法混合函数(源 - 目标) + 传递给 blendEquationblendEquationSeparate 来指定减法混合函数(源 - 目标) FUNC_REVERSE_SUBTRACT 0x800B - 传递给 blendEquation 或 blendEquationSeparate 指定反向减法函数(目标 - 源) + 传递给 blendEquationblendEquationSeparate 指定反向减法函数(目标 - 源)

    获取 GL 参数信息

    -

    传递给 {{domxref("WebGLRenderingContext.getParameter()")}} 的常量,用以指定要返回的信息。 

    +

    传递给 {{domxref("WebGLRenderingContext.getParameter()")}} 的常量,用以指定要返回的信息。

    @@ -256,22 +256,22 @@

    获取 GL 参数信息

    - + - + - + - + @@ -281,92 +281,92 @@

    获取 GL 参数信息

    - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + @@ -376,7 +376,7 @@

    获取 GL 参数信息

    - + @@ -426,7 +426,7 @@

    获取 GL 参数信息

    - + @@ -617,7 +617,7 @@

    Buffers

    - +
    BLEND_EQUATION 0x8009传递给 getParameter 以获取当前的 RGB 混合函数。传递给 getParameter 以获取当前的 RGB 混合函数。
    BLEND_EQUATION_RGB 0x8009传递给 getParameter 以获取当前的 RGB 混合函数。与 BLEND_EQUATION 相同。传递给 getParameter 以获取当前的 RGB 混合函数。与 BLEND_EQUATION 相同。
    BLEND_EQUATION_ALPHA 0x883D传递给 getParameter 以获取当前的 alpha 函数。与 BLEND_EQUATION 相同。传递给 getParameter 以获取当前的 alpha 函数。与 BLEND_EQUATION 相同。
    BLEND_DST_RGB 0x80C8传递给 getParameter 以获取当前的目标 RGB 混合函数。传递给 getParameter 以获取当前的目标 RGB 混合函数。
    BLEND_SRC_RGB
    BLEND_DST_ALPHA 0x80CA传递给 getParameter 以获取当前目标的 alpha 混合函数。传递给 getParameter 以获取当前目标的 alpha 混合函数。
    BLEND_SRC_ALPHA 0x80CB传递给 getParameter 以获取当前的源 alpha 混合函数。传递给 getParameter 以获取当前的源 alpha 混合函数。
    BLEND_COLOR 0x8005传递给 getParameter 以返回当前的混合颜色。传递给 getParameter 以返回当前的混合颜色。
    ARRAY_BUFFER_BINDING 0x8894传递给 getParameter 获取数组缓冲区绑定。传递给 getParameter 获取数组缓冲区绑定。
    ELEMENT_ARRAY_BUFFER_BINDING 0x8895传递给 getParameter 获取当前元素数组缓冲区。传递给 getParameter 获取当前元素数组缓冲区。
    LINE_WIDTH 0x0B21传递给 getParameter 获取当前的 lineWidth (由 lineWidth 方法设置)。传递给 getParameter 获取当前的 lineWidth (由 lineWidth 方法设置)。
    ALIASED_POINT_SIZE_RANGE 0x846D传递给 getParameter 获取使用 gl.POINTS 绘制的点的大小。传递给 getParameter 获取使用 gl.POINTS 绘制的点的大小。
    ALIASED_LINE_WIDTH_RANGE 0x846E传递给 getParameter 得到一条线的可用宽度范围。返回一个长度为 2 的数组。其中低值为 0,高值为 1。传递给 getParameter 得到一条线的可用宽度范围。返回一个长度为 2 的数组。其中低值为 0,高值为 1。
    CULL_FACE_MODE 0x0B45传递给 getParameter 获取当前的cullFace 值。 应该返回 FRONT, BACK, 或 FRONT_AND_BACK传递给 getParameter 获取当前的cullFace 值。 应该返回 FRONT, BACK, 或 FRONT_AND_BACK
    FRONT_FACE 0x0B46传递给 getParameter 以确定当前的 frontFace 值。应该 CW 或 CCW传递给 getParameter 以确定当前的 frontFace 值。应该 CWCCW
    DEPTH_RANGE 0x0B70传递给 getParameter 返回长度为 2 的浮点数数组,以表示当前深度范围。传递给 getParameter 返回长度为 2 的浮点数数组,以表示当前深度范围。
    DEPTH_WRITEMASK 0x0B72传递给 getParameter 确定是否启用深度缓冲区写入操作。传递给 getParameter 确定是否启用深度缓冲区写入操作。
    DEPTH_CLEAR_VALUE 0x0B73传递给 getParameter 确定当前的深度清除值。传递给 getParameter 确定当前的深度清除值。
    DEPTH_FUNC 0x0B74传递给 getParameter 获取当前的深度函数。返回 NEVER, ALWAYS, LESS, EQUAL, LEQUAL, GREATER, GEQUAL, 或 NOTEQUAL传递给 getParameter 获取当前的深度函数。返回 NEVER, ALWAYS, LESS, EQUAL, LEQUAL, GREATER, GEQUAL, 或 NOTEQUAL
    STENCIL_CLEAR_VALUE 0x0B91传递给 getParameter 获取将消除的模板值。传递给 getParameter 获取将消除的模板值。
    STENCIL_FUNC 0x0B92传递给 getParameter 获取当前的模板函数。返回 NEVER, ALWAYS, LESS, EQUAL, LEQUAL, GREATER, GEQUAL, 或 NOTEQUAL传递给 getParameter 获取当前的模板函数。返回 NEVER, ALWAYS, LESS, EQUAL, LEQUAL, GREATER, GEQUAL, 或 NOTEQUAL
    STENCIL_FAIL 0x0B94传递给 getParameter 获取当前模板的失效函数。应该返回 KEEP, REPLACE, INCR, DECR, INVERT, INCR_WRAP, 或 DECR_WRAP传递给 getParameter 获取当前模板的失效函数。应该返回 KEEP, REPLACE, INCR, DECR, INVERT, INCR_WRAP, 或 DECR_WRAP
    STENCIL_PASS_DEPTH_FAIL 0x0B95如果深度缓冲区测试失败,则传递给 getParameter 以获取当前模板失败函数。应该返回 KEEP, REPLACE, INCR, DECR, INVERT, INCR_WRAP, 或 DECR_WRAP如果深度缓冲区测试失败,则传递给 getParameter 以获取当前模板失败函数。应该返回 KEEP, REPLACE, INCR, DECR, INVERT, INCR_WRAP, 或 DECR_WRAP
    STENCIL_PASS_DEPTH_PASS
    STENCIL_REF 0x0B97传递给 getParameter 获取用于模板测试的参考值。传递给 getParameter 获取用于模板测试的参考值。
    STENCIL_VALUE_MASK
    VIEWPORT 0x0BA2返回带有当前视口尺寸的四个元素的 {{jsxref("Int32Array")}} 返回带有当前视口尺寸的四个元素的 {{jsxref("Int32Array")}}
    SCISSOR_BOX
    BUFFER_USAGE 0x8765Passed to getBufferParameter to get the hint for the buffer passed in when it was created.Passed to getBufferParameter to get the hint for the buffer passed in when it was created.
    @@ -709,7 +709,7 @@

    Culling

    FRONT_AND_BACK 0x0408 - Passed to cullFace to specify that front and back faces should be drawn. + Passed to cullFace to specify that front and back faces should be drawn. @@ -1154,7 +1154,7 @@

    Depth or stencil tests

    LEQUAL 0x0203 - 如果新深度值小于或等于存储值,则通过 depthFunctionstencilFunction 指定深度或模板测试。 + 如果新深度值小于或等于存储值,则通过 depthFunctionstencilFunction 指定深度或模板测试。 GREATER @@ -3609,12 +3609,12 @@

    {{domxref("WEBGL_color_buffer_float")}} RGBA32F_EXT 0x8814 - RGBA 32-bit floating-point color-renderable format. + RGBA 32-bit floating-point color-renderable format. RGB32F_EXT 0x8815 - RGB 32-bit floating-point color-renderable format. + RGB 32-bit floating-point color-renderable format. FRAMEBUFFER_ATTACHMENT_COMPONENT_TYPE_EXT diff --git a/files/zh-cn/web/api/webgl_api/data/index.html b/files/zh-cn/web/api/webgl_api/data/index.html index 41c7ba12d71c03..0f42cdd89f87e1 100644 --- a/files/zh-cn/web/api/webgl_api/data/index.html +++ b/files/zh-cn/web/api/webgl_api/data/index.html @@ -31,7 +31,7 @@

    GLSL 变量

    Attributes

    -

    Attributes 可以被 JavaScript 代码操作,也可以在 vertex shader 中被作为变量访问。Attributes 通常被用于存储颜色、纹理坐标以及其他需要在 JavaScript 代码和 vertex shader 之间互相传递的数据。

    +

    Attributes 可以被 JavaScript 代码操作,也可以在 vertex shader 中被作为变量访问。Attributes 通常被用于存储颜色、纹理坐标以及其他需要在 JavaScript 代码和 vertex shader 之间互相传递的数据。

    //init colors
         var vertexColors = [
    @@ -70,13 +70,13 @@ 

    Attributes

    Varyings

    -

    Varyings 在 vertex shader 中定义,用于从 vertex shader 向 fragment shader 传递数据。通常传递 {{interwiki("wikipedia", "Normal_(geometry)", "normal vector")}} 等在 vertex shader 中计算生成的数据会使用 varying。

    +

    Varyings 在 vertex shader 中定义,用于从 vertex shader 向 fragment shader 传递数据。通常传递 {{interwiki("wikipedia", "Normal_(geometry)", "normal vector")}} 等在 vertex shader 中计算生成的数据会使用 varying。

    <<how to use>>

    Uniforms

    -

    Uniform 通常是由 JavaScript 代码设置并且在 vertex shader 和 fragment shader 中都能够访问。 使用 uniform 设定在一帧的所有绘制中相同的数据,例如光源颜色、亮度、全局变换以及透视数据等等。

    +

    Uniform 通常是由 JavaScript 代码设置并且在 vertex shader 和 fragment shader 中都能够访问。 使用 uniform 设定在一帧的所有绘制中相同的数据,例如光源颜色、亮度、全局变换以及透视数据等等。

    <<添加细节>>

    diff --git a/files/zh-cn/web/api/webgl_api/index.html b/files/zh-cn/web/api/webgl_api/index.html index f31ad18a53f064..8d3984caa7bad0 100644 --- a/files/zh-cn/web/api/webgl_api/index.html +++ b/files/zh-cn/web/api/webgl_api/index.html @@ -15,11 +15,11 @@

    WebGL(Web 图形库)是一个 JavaScript API,可在任何兼容的 Web 浏览器中渲染高性能的交互式 3D 和 2D 图形,而无需使用插件。WebGL 通过引入一个与 OpenGL ES 2.0 非常一致的 API 来做到这一点,该 API 可以在 HTML5 {{HTMLElement("canvas")}}元素中使用。 这种一致性使 API 可以利用用户设备提供的硬件图形加速。

    -

    目前支持 WebGL 的浏览器有:Firefox 4+, Google Chrome 9+, Opera 12+, Safari 5.1+, Internet Explorer 11+ 和Microsoft Edge build 10240+;然而,WebGL 一些特性也需要用户的硬件设备支持。

    +

    目前支持 WebGL 的浏览器有:Firefox 4+, Google Chrome 9+, Opera 12+, Safari 5.1+, Internet Explorer 11+ 和Microsoft Edge build 10240+;然而,WebGL 一些特性也需要用户的硬件设备支持。

    -

    WebGL 2 API 引入了对大部分的 OpenGL ES 3.0 功能集的支持; 它是通过{{domxref("WebGL2RenderingContext")}}界面提供的。

    +

    WebGL 2 API 引入了对大部分的 OpenGL ES 3.0 功能集的支持; 它是通过{{domxref("WebGL2RenderingContext")}}界面提供的。

    -

     {{HTMLElement("canvas")}} 元素也被 Canvas API 用于在网页上进行 2D 图形处理。

    +

    {{HTMLElement("canvas")}} 元素也被 Canvas API 用于在网页上进行 2D 图形处理。

    参考

    @@ -115,16 +115,16 @@

    WebGL 2

  • Sync objects,
  • Query objects,
  • Tranform Feedback objects,
  • -
  • 部分扩展被纳入了 WebGL 2 核心 : Vertex Array objectsinstancingmultiple render targetsfragment depth.
  • +
  • 部分扩展被纳入了 WebGL 2 核心 : Vertex Array objects, instancing, multiple render targets, fragment depth.
  • -

    另请参见博客文章 "WebGL 2 lands in Firefox" 和 webglsamples.org/WebGL2Samples 几个演示。

    +

    另请参见博客文章 "WebGL 2 lands in Firefox"webglsamples.org/WebGL2Samples 几个演示。

    指南和教程

    下面,您将找到各种指南,以帮助您学习 WebGL 概念和教程,提供分步课程和示例。

    -

    指南 

    +

    指南

    WebGL 中的数据
    @@ -139,7 +139,7 @@

    教程

    WebGL 教程
    -
    WebGL 核心概念的初学者指南。如果您以前没有 WebGL 的经验,那么这是一个很好的起点。
    +
    WebGL 核心概念的初学者指南。如果您以前没有 WebGL 的经验,那么这是一个很好的起点。

    示例

    @@ -163,27 +163,27 @@

    高级教程

    资源

      -
    • Raw WebGL: WebGL 入门 Nick Desaulniers 主讲的 WebGL 基础知识。如果你从未接触过底层的图形编程,这是一个开始学习初级图形编程的好地方。
    • -
    • WebGL 官网 Khronos Group 的 WebGL 官方站点。
    • +
    • Raw WebGL: WebGL 入门 Nick Desaulniers 主讲的 WebGL 基础知识。如果你从未接触过底层的图形编程,这是一个开始学习初级图形编程的好地方。
    • +
    • WebGL 官网 Khronos Group 的 WebGL 官方站点。
    • 学习 WebGL 一个关于如何使用 WebGL 的教程站点。
    • WebGL 基础 一个关于 WebGL 的基础教程。
    • WebGL 试炼 一个在线创建和分享 WebGL 的工具站点,非常适合快速创建一个原型或者体验一个成品。
    • WebGL Academy 通过一个 HTML/JavaScript 编辑器来学习一个基础的 WebGl 基础知识。
    • -
    • WebGL Stats 一个统计 WebGL 在不同平台上能力表现的网站。
    • +
    • WebGL Stats 一个统计 WebGL 在不同平台上能力表现的网站。

      -
    • glMatrix 创建高性能 WebGL 应用的 JavaScript 矩阵矢量库。
    • +
    • glMatrix 创建高性能 WebGL 应用的 JavaScript 矩阵矢量库。
    • PhiloGL 一个用于数据可视化、创意编程和游戏开发的 WebGL 库。
    • Pixi.js是一种快速的开源 2D WebGL 渲染器。
    • PlayCanvas是一个开源游戏引擎。
    • Sylvester是一个用于处理向量和矩阵的开源库。尚未针对 WebGL 进行优化,但功能极其强大。
    • three.js是一个开源的,功能齐全的 3D WebGL 库。
    • Phaser是一个适用于 Canvas 和 WebGL 的浏览器游戏的快速,免费和有趣的开源框架。
    • -
    • RedGL  是一个开源 3D WebGL 库。
    • -
    • vtk.js  是一个 JavaScript 库,用于在浏览器中进行科学可视化。
    • +
    • RedGL 是一个开源 3D WebGL 库。
    • +
    • vtk.js 是一个 JavaScript 库,用于在浏览器中进行科学可视化。

    规范

    @@ -241,7 +241,7 @@

    WebGL 2

    兼容性说明

    -

    不仅是浏览器,GPU 本身也需要支持该特性。比如 S3 纹理压缩 (S3TC) 只在基于图睿的 GPU 的设备上可用。大多数浏览器可以通过 webgl 这一上下文名称来使用 WebGL,但是旧的浏览器需要使用 experimental-webgl。另外,将来的 WebGL 2 只会向后兼容,其使用的上下文名称为 webgl2 。

    +

    不仅是浏览器,GPU 本身也需要支持该特性。比如 S3 纹理压缩 (S3TC) 只在基于图睿的 GPU 的设备上可用。大多数浏览器可以通过 webgl 这一上下文名称来使用 WebGL,但是旧的浏览器需要使用 experimental-webgl。另外,将来的 WebGL 2 只会向后兼容,其使用的上下文名称为 webgl2

    Gecko 备忘

    diff --git a/files/zh-cn/web/api/webgl_api/matrix_math_for_the_web/index.html b/files/zh-cn/web/api/webgl_api/matrix_math_for_the_web/index.html index c552bbac61d943..ce743029af8dfb 100644 --- a/files/zh-cn/web/api/webgl_api/matrix_math_for_the_web/index.html +++ b/files/zh-cn/web/api/webgl_api/matrix_math_for_the_web/index.html @@ -131,7 +131,7 @@

    用法

    -

    重要: 这些函数是为了解释的清晰而编写,而不是为了速度或者内存管理。这些函数新建了大量数组, 可能在实时运算时导致垃圾回收的巨大开销。在实际产品中最好使用优化过的函数。比如glMatrix就是一个注重速度和性能的库。

    +

    重要: 这些函数是为了解释的清晰而编写,而不是为了速度或者内存管理。这些函数新建了大量数组, 可能在实时运算时导致垃圾回收的巨大开销。在实际产品中最好使用优化过的函数。比如glMatrix就是一个注重速度和性能的库。

    平移矩阵

    @@ -154,7 +154,7 @@

    平移矩阵

    用矩阵操作 DOM

    -

    一个非常简单的开始使用矩阵的方法是使用 CSS3 里的matrix3d变换。首先, 我们新建一个简单的{{htmlelement("div")}}并加上一些内容。这里样式没有展示出来,但我们将其设置成了页面居中且固定宽度与高度。我们同样为变换设定了动画以便清晰的观察发生的变化。

    +

    一个非常简单的开始使用矩阵的方法是使用 CSS3 里的matrix3d变换。首先, 我们新建一个简单的{{htmlelement("div")}}并加上一些内容。这里样式没有展示出来,但我们将其设置成了页面居中且固定宽度与高度。我们同样为变换设定了动画以便清晰的观察发生的变化。

    <div id='move-me' class='transformable'>
       <h2>Move me with a matrix</h2>
    @@ -222,7 +222,7 @@ 

    旋转矩阵

    ];
    -

    我们可以将上述步骤表示为一个矩阵,并且单独应用到 x, y,和 z 坐标。下面是绕 Z 轴旋转的表示:

    +

    我们可以将上述步骤表示为一个矩阵,并且单独应用到 x, y,和 z 坐标。下面是绕 Z 轴旋转的表示:

    var sin = Math.sin;
     var cos = Math.cos;
    @@ -284,7 +284,7 @@ 

    矩阵组合

    矩阵的真正厉害之处在于矩阵的组合。当一组特定类型的矩阵连乘起来,它们保留了变换的经过并且是可逆的。这意味着如果平移、旋转和缩放矩阵组合在一起,当我们使用逆变换并颠倒应用的顺序,可以得到原来的点。

    -

    矩阵相乘的结果与顺序有关。两个数相乘时,a * b = c,和 b * a = c 都是正确的。例如,3 * 4 = 12,和 4 * 3 = 12。在数学上这些数被称为可交换。矩阵不能保证交换顺序后的运算结果,所以矩阵是不可交换的。

    +

    矩阵相乘的结果与顺序有关。两个数相乘时,a * b = c,和 b * a = c 都是正确的。例如,3 * 4 = 12,和 4 * 3 = 12。在数学上这些数被称为可交换。矩阵不能保证交换顺序后的运算结果,所以矩阵是不可交换的。

    另一个需要记住的点是在 WebGL 和 CSS3 中的矩阵相乘需要和变换发生的顺序相反。例如,缩放对象到 80%,向下移动 200 像素,然后绕原点旋转 90 度在伪代码中应该像下面这样。

    diff --git a/files/zh-cn/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html b/files/zh-cn/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html index 79e71dae59ebd4..a817413a38b66c 100644 --- a/files/zh-cn/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html +++ b/files/zh-cn/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html @@ -17,11 +17,11 @@

    渲染场景

    着色器

    -

    着色器是使用 OpenGL ES 着色语言(GLSL) 编写的程序,它携带着绘制形状的顶点信息以及构造绘制在屏幕上像素的所需数据,换句话说,它负责记录着像素点的位置和颜色。

    +

    着色器是使用 OpenGL ES 着色语言(GLSL) 编写的程序,它携带着绘制形状的顶点信息以及构造绘制在屏幕上像素的所需数据,换句话说,它负责记录着像素点的位置和颜色。

    -

    绘制 WebGL 时候有两种不同的着色器函数,顶点着色器和片段着色器。你需要通过用 GLSL 编写这些着色器,并将代码文本传递给 WebGL , 使之在 GPU 执行时编译。顺便一提,顶点着色器和片段着色器的集合我们通常称之为着色器程序。

    +

    绘制 WebGL 时候有两种不同的着色器函数,顶点着色器和片段着色器。你需要通过用 GLSL 编写这些着色器,并将代码文本传递给 WebGL , 使之在 GPU 执行时编译。顺便一提,顶点着色器和片段着色器的集合我们通常称之为着色器程序。

    -

    下面我们通过在 WebGL 环境绘制一个 2D 图像的例子快速介绍这两种着色器。

    +

    下面我们通过在 WebGL 环境绘制一个 2D 图像的例子快速介绍这两种着色器。

    顶点着色器

    @@ -29,7 +29,7 @@

    顶点着色器

    顶点着色器需要对顶点坐标进行必要的转换,在每个顶点基础上进行其他调整或计算,然后通过将其保存在由 GLSL 提供的特殊变量(我们称为 gl_Position)中来返回变换后的顶点

    -

    顶点着色器根据需要, 也可以完成其他工作。例如,决定哪个包含 {{interwiki("wikipedia", "texel_(graphics)", "texel")}}面部纹理的坐标,可以应用于顶点;通过法线来确定应用到顶点的光照因子等。然后将这些信息存储在变量(varyings)属性 (attributes)属性中,以便与片段着色器共享

    +

    顶点着色器根据需要, 也可以完成其他工作。例如,决定哪个包含 {{interwiki("wikipedia", "texel_(graphics)", "texel")}}面部纹理的坐标,可以应用于顶点;通过法线来确定应用到顶点的光照因子等。然后将这些信息存储在变量(varyings)属性 (attributes)属性中,以便与片段着色器共享

    以下的顶点着色器接收一个我们定义的属性(aVertexPosition)的顶点位置值。之后这个值与两个 4x4 的矩阵(uProjectionMatrix 和 uModelMatrix)相乘; 乘积赋值给 gl_Position。有关投影和其他矩阵的更多信息,在这里您可能可以找到有帮助的文章.。

    @@ -46,7 +46,7 @@

    顶点着色器

    } `;
    -

    这个例子中,我们没有计算任何光照效果,因为我们还没有应用到场景,它将后面的 WebGL 光照章节介绍。同样我们也还没应用任何纹理,这将在WebGL 添加纹理章节补充。

    +

    这个例子中,我们没有计算任何光照效果,因为我们还没有应用到场景,它将后面的 WebGL 光照章节介绍。同样我们也还没应用任何纹理,这将在WebGL 添加纹理章节补充。

    片段着色器

    @@ -68,7 +68,7 @@

    初始化着色器

    const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource); const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource); -  // 创建着色器程序 + // 创建着色器程序 const shaderProgram = gl.createProgram(); gl.attachShader(shaderProgram, vertexShader); @@ -141,7 +141,7 @@

    初始化着色器

    创建对象

    -

    在画正方形前,我们需要创建一个缓冲器来存储它的顶点。我们会用到名字为 initBuffers() 的函数。当我们了解到更多 WebGL 的高级概念时,这段代码会将有更多参数,变得更加复杂,并且用来创建更多的三维物体。

    +

    在画正方形前,我们需要创建一个缓冲器来存储它的顶点。我们会用到名字为 initBuffers() 的函数。当我们了解到更多 WebGL 的高级概念时,这段代码会将有更多参数,变得更加复杂,并且用来创建更多的三维物体。

    function initBuffers(gl) {
       const positionBuffer = gl.createBuffer();
    @@ -155,116 +155,116 @@ 

    创建对象

    ]; gl.bufferData(gl.ARRAY_BUFFER, -                new Float32Array(vertices), -                gl.STATIC_DRAW); + new Float32Array(vertices), + gl.STATIC_DRAW); -  return { -    position: positionBuffer, -  }; + return { + position: positionBuffer, + }; }

    这段代码简单给出了绘画场景的本质。首先,它调用 gl 的成员函数 {{domxref("WebGLRenderingContext.createBuffer()", "createBuffer()")}} 得到了缓冲对象并存储在顶点缓冲器。然后调用 {{domxref("WebGLRenderingContext.bindBuffer()", "bindBuffer()")}} 函数绑定上下文。

    -

    当上一步完成,我们创建一个 Javascript 数组去记录每一个正方体的每一个顶点。然后将其转化为 WebGL 浮点型类型的数组,并将其传到 gl 对象的  {{domxref("WebGLRenderingContext.bufferData()", "bufferData()")}} 方法来建立对象的顶点。

    +

    当上一步完成,我们创建一个 Javascript 数组去记录每一个正方体的每一个顶点。然后将其转化为 WebGL 浮点型类型的数组,并将其传到 gl 对象的 {{domxref("WebGLRenderingContext.bufferData()", "bufferData()")}} 方法来建立对象的顶点。

    绘制场景

    当着色器和物体都创建好后,我们可以开始渲染这个场景了。因为我们这个例子不会产生动画,所以 drawScene() 方法非常简单。它还使用了几个工具函数,稍后我们会介绍。

    -

    注意: 你可能会得到这样一段错误报告:“ mat4 is not defined”,意思是说你缺少glmatrix库。该库的 js 文件gl-matrix.js可以从这里获得。

    +

    注意: 你可能会得到这样一段错误报告:“ mat4 is not defined”,意思是说你缺少glmatrix库。该库的 js 文件gl-matrix.js可以从这里获得。

    function drawScene(gl, programInfo, buffers) {
    -  gl.clearColor(0.0, 0.0, 0.0, 1.0);  // Clear to black, fully opaque
    -  gl.clearDepth(1.0);                 // Clear everything
    -  gl.enable(gl.DEPTH_TEST);           // Enable depth testing
    -  gl.depthFunc(gl.LEQUAL);            // Near things obscure far things
    -
    -  // Clear the canvas before we start drawing on it.
    -
    -  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    -
    -  // Create a perspective matrix, a special matrix that is
    -  // used to simulate the distortion of perspective in a camera.
    -  // Our field of view is 45 degrees, with a width/height
    -  // ratio that matches the display size of the canvas
    -  // and we only want to see objects between 0.1 units
    -  // and 100 units away from the camera.
    -
    -  const fieldOfView = 45 * Math.PI / 180;   // in radians
    -  const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
    -  const zNear = 0.1;
    -  const zFar = 100.0;
    -  const projectionMatrix = mat4.create();
    -
    -  // note: glmatrix.js always has the first argument
    -  // as the destination to receive the result.
    -  mat4.perspective(projectionMatrix,
    -                   fieldOfView,
    -                   aspect,
    -                   zNear,
    -                   zFar);
    -
    -  // Set the drawing position to the "identity" point, which is
    -  // the center of the scene.
    -  const modelViewMatrix = mat4.create();
    -
    -  // Now move the drawing position a bit to where we want to
    -  // start drawing the square.
    -
    -  mat4.translate(modelViewMatrix,     // destination matrix
    -                 modelViewMatrix,     // matrix to translate
    -                 [-0.0, 0.0, -6.0]);  // amount to translate
    -
    -  // Tell WebGL how to pull out the positions from the position
    -  // buffer into the vertexPosition attribute.
    -  {
    -    const numComponents = 3;  // pull out 3 values per iteration
    -    const type = gl.FLOAT;    // the data in the buffer is 32bit floats
    -    const normalize = false;  // don't normalize
    -    const stride = 0;         // how many bytes to get from one set of values to the next
    -                              // 0 = use type and numComponents above
    -    const offset = 0;         // how many bytes inside the buffer to start from
    -    gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);
    -    gl.vertexAttribPointer(
    -        programInfo.attribLocations.vertexPosition,
    -        numComponents,
    -        type,
    -        normalize,
    -        stride,
    -        offset);
    -    gl.enableVertexAttribArray(
    -        programInfo.attribLocations.vertexPosition);
    -  }
    -
    -  // Tell WebGL to use our program when drawing
    -
    -  gl.useProgram(programInfo.program);
    -
    -  // Set the shader uniforms
    -
    -  gl.uniformMatrix4fv(
    -      programInfo.uniformLocations.projectionMatrix,
    -      false,
    -      projectionMatrix);
    -  gl.uniformMatrix4fv(
    -      programInfo.uniformLocations.modelViewMatrix,
    -      false,
    -      modelViewMatrix);
    -
    -  {
    -    const offset = 0;
    -    const vertexCount = 4;
    -    gl.drawArrays(gl.TRIANGLE_STRIP, offset, vertexCount);
    -  }
    +  gl.clearColor(0.0, 0.0, 0.0, 1.0);  // Clear to black, fully opaque
    +  gl.clearDepth(1.0);                 // Clear everything
    +  gl.enable(gl.DEPTH_TEST);           // Enable depth testing
    +  gl.depthFunc(gl.LEQUAL);            // Near things obscure far things
    +
    +  // Clear the canvas before we start drawing on it.
    +
    +  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    +
    +  // Create a perspective matrix, a special matrix that is
    +  // used to simulate the distortion of perspective in a camera.
    +  // Our field of view is 45 degrees, with a width/height
    +  // ratio that matches the display size of the canvas
    +  // and we only want to see objects between 0.1 units
    +  // and 100 units away from the camera.
    +
    +  const fieldOfView = 45 * Math.PI / 180;   // in radians
    +  const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
    +  const zNear = 0.1;
    +  const zFar = 100.0;
    +  const projectionMatrix = mat4.create();
    +
    +  // note: glmatrix.js always has the first argument
    +  // as the destination to receive the result.
    +  mat4.perspective(projectionMatrix,
    +                   fieldOfView,
    +                   aspect,
    +                   zNear,
    +                   zFar);
    +
    +  // Set the drawing position to the "identity" point, which is
    +  // the center of the scene.
    +  const modelViewMatrix = mat4.create();
    +
    +  // Now move the drawing position a bit to where we want to
    +  // start drawing the square.
    +
    +  mat4.translate(modelViewMatrix,     // destination matrix
    +                 modelViewMatrix,     // matrix to translate
    +                 [-0.0, 0.0, -6.0]);  // amount to translate
    +
    +  // Tell WebGL how to pull out the positions from the position
    +  // buffer into the vertexPosition attribute.
    +  {
    +    const numComponents = 3;  // pull out 3 values per iteration
    +    const type = gl.FLOAT;    // the data in the buffer is 32bit floats
    +    const normalize = false;  // don't normalize
    +    const stride = 0;         // how many bytes to get from one set of values to the next
    +                              // 0 = use type and numComponents above
    +    const offset = 0;         // how many bytes inside the buffer to start from
    +    gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);
    +    gl.vertexAttribPointer(
    +        programInfo.attribLocations.vertexPosition,
    +        numComponents,
    +        type,
    +        normalize,
    +        stride,
    +        offset);
    +    gl.enableVertexAttribArray(
    +        programInfo.attribLocations.vertexPosition);
    +  }
    +
    +  // Tell WebGL to use our program when drawing
    +
    +  gl.useProgram(programInfo.program);
    +
    +  // Set the shader uniforms
    +
    +  gl.uniformMatrix4fv(
    +      programInfo.uniformLocations.projectionMatrix,
    +      false,
    +      projectionMatrix);
    +  gl.uniformMatrix4fv(
    +      programInfo.uniformLocations.modelViewMatrix,
    +      false,
    +      modelViewMatrix);
    +
    +  {
    +    const offset = 0;
    +    const vertexCount = 4;
    +    gl.drawArrays(gl.TRIANGLE_STRIP, offset, vertexCount);
    +  }
     }
     

    第一步,用背景色擦除画布,接着建立摄像机透视矩阵。设置 45 度的视图角度,并且设置一个适合实际图像的宽高比。 指定在摄像机距离 0.1 到 100 单位长度的范围内的物体可见。

    -

    接着加载特定位置,并把正方形放在距离摄像机 6 个单位的的位置。然后,我们绑定正方形的顶点缓冲到上下文,并配置好,再通过调用 {{domxref("WebGLRenderingContext.drawArrays()", "drawArrays()")}} 方法来画出对象。 

    +

    接着加载特定位置,并把正方形放在距离摄像机 6 个单位的的位置。然后,我们绑定正方形的顶点缓冲到上下文,并配置好,再通过调用 {{domxref("WebGLRenderingContext.drawArrays()", "drawArrays()")}} 方法来画出对象。

    {{EmbedGHLiveSample('webgl-examples/tutorial/sample2/index.html', 670, 510) }}

    @@ -277,8 +277,8 @@

    矩阵通用计算

    相关资料

    {{PreviousNext("Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL")}}

    diff --git a/files/zh-cn/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.html b/files/zh-cn/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.html index 273822680c83c1..b24dc3258d09e7 100644 --- a/files/zh-cn/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.html +++ b/files/zh-cn/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.html @@ -19,30 +19,30 @@

    使正方形旋转

    现在我们需要更新drawScene()函数以在绘制正方形时将当前旋转应用于正方形。转换为正方形的初始绘图位置后,我们像这样应用旋转:

    -
      mat4.rotate(modelViewMatrix,  // destination matrix
    -              modelViewMatrix,  // matrix to rotate
    -              squareRotation,   // amount to rotate in radians
    -              [0, 0, 1]);       // axis to rotate around
    +
      mat4.rotate(modelViewMatrix,  // destination matrix
    +              modelViewMatrix,  // matrix to rotate
    +              squareRotation,   // amount to rotate in radians
    +              [0, 0, 1]);       // axis to rotate around

    这会将 modelViewMatrix 的当前值squareRotation绕 Z 轴旋转。

    要进行动画制作,我们需要添加squareRotation随时间更改值的代码。为此,我们可以创建一个新变量来跟踪上次动画播放的时间(我们称之为then),然后将以下代码添加到主函数的末尾

    -
      var then = 0;
    +
      var then = 0;
     
    -  // Draw the scene repeatedly
    -  function render(now) {
    -    now *= 0.001;  // convert to seconds
    -    const deltaTime = now - then;
    -    then = now;
    +  // Draw the scene repeatedly
    +  function render(now) {
    +    now *= 0.001;  // convert to seconds
    +    const deltaTime = now - then;
    +    then = now;
     
    -    drawScene(gl, programInfo, buffers, deltaTime);
    +    drawScene(gl, programInfo, buffers, deltaTime);
     
    -    requestAnimationFrame(render);
    -  }
    -  requestAnimationFrame(render);
    + requestAnimationFrame(render); + } + requestAnimationFrame(render);
    -

    该代码用于 requestAnimationFrame 要求浏览器在每一帧上调用函数“render”。requestAnimationFrame 自页面加载以来经过的时间(以毫秒为单位)。我们将其转换为秒,然后从中减去,以计算 deltaTime 自渲染最后一帧以来的秒数。在 drawscene 的结尾,我们添加了要更新的代码 squareRotation

    +

    该代码用于 requestAnimationFrame 要求浏览器在每一帧上调用函数“render”。requestAnimationFrame 自页面加载以来经过的时间(以毫秒为单位)。我们将其转换为秒,然后从中减去,以计算 deltaTime 自渲染最后一帧以来的秒数。在 drawscene 的结尾,我们添加了要更新的代码 squareRotation

    squareRotation += deltaTime;
    diff --git a/files/zh-cn/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.html b/files/zh-cn/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.html index 6af940210cae1a..c973ffc2d66f2f 100644 --- a/files/zh-cn/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.html +++ b/files/zh-cn/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.html @@ -5,13 +5,13 @@ ---

    {{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL")}}

    -

    现在让我们给之前的正方形添加五个面从而可以创建一个三维的立方体。最简单的方式就是通过调用方法 {{domxref("WebGLRenderingContext.drawElements()", "gl.drawElements()")}} 使用顶点数组列表来替换之前的通过方法{{domxref("WebGLRenderingContext.drawArrays()", "gl.drawArrays()")}} 直接使用顶点数组。而顶点数组列表里保存着将会被引用到一个个独立的顶点。

    +

    现在让我们给之前的正方形添加五个面从而可以创建一个三维的立方体。最简单的方式就是通过调用方法 {{domxref("WebGLRenderingContext.drawElements()", "gl.drawElements()")}} 使用顶点数组列表来替换之前的通过方法{{domxref("WebGLRenderingContext.drawArrays()", "gl.drawArrays()")}} 直接使用顶点数组。而顶点数组列表里保存着将会被引用到一个个独立的顶点。

    其实现在会存在这样一个问题:每个面需要 4 个顶点,而每个顶点会被 3 个面共享。我们会创建一个包含 24 个顶点的数组列表,通过使用数组下标来索引顶点,然后把这些用于索引的下标传递给渲染程序而不是直接把整个顶点数据传递过去,这样来减少数据传递。那么也许你就会问:那么使用 8 个顶点就好了,为什么要使用 24 个顶点呢?这是因为每个顶点虽然被 3 个面共享但是它在每个面上需要使用不同的颜色信息。24 个顶点中的每一个都会有独立的颜色信息,这就会造成每个顶点位置都会有 3 份副本。

    定义立方体顶点位置

    -

    首先,更新 initBuffers() 函数代码创建顶点位置数据缓存。现在的代码看起来和渲染正方形时的代码很相似,只是比之前的代码更长因为现在有了 24 个顶点(每个面使用 4 个顶点):

    +

    首先,更新 initBuffers() 函数代码创建顶点位置数据缓存。现在的代码看起来和渲染正方形时的代码很相似,只是比之前的代码更长因为现在有了 24 个顶点(每个面使用 4 个顶点):

    var vertices = [
       // Front face
    @@ -106,11 +106,11 @@ 

    定义元素(三角形)数组

    -

    代码中的 cubeVertexIndices 数组声明每一个面都使用两个三角形来渲染。通过立方体顶点数组的索引指定每个三角形的顶点。那么这个立方体就是由 12 个三角形组成的了。

    +

    代码中的 cubeVertexIndices 数组声明每一个面都使用两个三角形来渲染。通过立方体顶点数组的索引指定每个三角形的顶点。那么这个立方体就是由 12 个三角形组成的了。

    渲染立方体

    -

    接下来就需要在 drawScene() 函数里添加代码使用立方体顶点索引数据来渲染这个立方体了。代码里添加了对 {{domxref("WebGLRenderingContext.bindBuffer()", "gl.bindBuffer()")}} 和 {{domxref("WebGLRenderingContext.drawElements()", "gl.drawElements()")}}的调用:

    +

    接下来就需要在 drawScene() 函数里添加代码使用立方体顶点索引数据来渲染这个立方体了。代码里添加了对 {{domxref("WebGLRenderingContext.bindBuffer()", "gl.bindBuffer()")}} 和 {{domxref("WebGLRenderingContext.drawElements()", "gl.drawElements()")}}的调用:

    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVerticesIndexBuffer);
     setMatrixUniforms();
    @@ -123,6 +123,6 @@ 

    渲染立方体

    {{EmbedGHLiveSample('webgl-examples/tutorial/sample5/index.html', 670, 510) }}

    -

    查看全部源代码 | 在新页面打开示例

    +

    查看全部源代码 | 在新页面打开示例

    {{PreviousNext("Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL")}}

    diff --git a/files/zh-cn/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html b/files/zh-cn/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html index 0c2f37ec177961..d39be010cc8515 100644 --- a/files/zh-cn/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html +++ b/files/zh-cn/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html @@ -8,11 +8,11 @@ ---

    {{WebGLSidebar("Tutorial")}} {{Next("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context")}}

    -

    WebGL 使得在支持 HTML 的 canvas 标签的浏览器中,不需要安装任何插件,便可以使用基于 OpenGL ES 2.0 的 API 在 canvas 中进行 2D 和 3D 渲染。WebGL 程序包括用 JavaScript 写的控制代码,以及在图形处理单元(GPU, Graphics Processing Unit)中执行的着色代码(GLSL,注:GLSL 为 OpenGL 着色语言)。WebGL 元素可以和其他 HTML 元素混合使用,并且可以和网页其他部分或者网页背景结合起来。

    +

    WebGL 使得在支持 HTML 的 canvas 标签的浏览器中,不需要安装任何插件,便可以使用基于 OpenGL ES 2.0 的 API 在 canvas 中进行 2D 和 3D 渲染。WebGL 程序包括用 JavaScript 写的控制代码,以及在图形处理单元(GPU, Graphics Processing Unit)中执行的着色代码(GLSL,注:GLSL 为 OpenGL 着色语言)。WebGL 元素可以和其他 HTML 元素混合使用,并且可以和网页其他部分或者网页背景结合起来。

    本文将向您介绍 WebGL 的基本用法。此处假定您对三维图形方面的数学知识已经有一定的理解,本文也不会试图向您教授 3D 图像概念本身。

    -

    本文的代码也可以在这里下载 webgl-examples GitHub repository 。

    +

    本文的代码也可以在这里下载 webgl-examples GitHub repository

    THREE.jsBABYLON.js等很多框架封装了 WebGL,提供了各个平台之间的兼容性。使用这些框架而非原生的 WebGL 可以更容易地开发 3D 应用和游戏。

    diff --git a/files/zh-cn/web/api/webgl_api/tutorial/index.html b/files/zh-cn/web/api/webgl_api/tutorial/index.html index 7f907c8f37caad..4fc0a24cb9e977 100644 --- a/files/zh-cn/web/api/webgl_api/tutorial/index.html +++ b/files/zh-cn/web/api/webgl_api/tutorial/index.html @@ -9,13 +9,13 @@ ---
    {{WebGLSidebar}}
    -

    WebGL 使得网页在支持 HTML {{HTMLElement("canvas")}} 标签的浏览器中,不需要使用任何插件,便可以使用基于 OpenGL ES 2.0 的 API 在 canvas 中进行 3D 渲染. WebGL 程序由 javascript 的控制代码,和在计算机的图形处理单元(GPU, Graphics Processing Unit)中执行的特效代码 (shader code,渲染代码) 组成. WebGL 元素可以和其他 HTML 元素混合,并且会和页面的其他部分或页面背景相合成。

    +

    WebGL 使得网页在支持 HTML {{HTMLElement("canvas")}} 标签的浏览器中,不需要使用任何插件,便可以使用基于 OpenGL ES 2.0 的 API 在 canvas 中进行 3D 渲染. WebGL 程序由 javascript 的控制代码,和在计算机的图形处理单元(GPU, Graphics Processing Unit)中执行的特效代码 (shader code,渲染代码) 组成. WebGL 元素可以和其他 HTML 元素混合,并且会和页面的其他部分或页面背景相合成。

    此教程从基础开始讲解如何使用<canvas> 元素来画 WebGL 图形。提供的例子会让你对 WebGL 有更清晰的认识,并且会提供代码片段方便你构建自己的内容。

    开始之前

    -

    使用 <canvas> 元素并不困难,但你需要基本的 HTML 和 JavaScript 知识。一些老浏览器不支持<canvas> 元素和 WebGL,但所有最近的主流浏览器都支持它们.。为了能在 canvas 中绘制图形,我们使用 Javascript 的上下文环境(context)对象,此对象可以动态创建图形。

    +

    使用 <canvas> 元素并不困难,但你需要基本的 HTMLJavaScript 知识。一些老浏览器不支持<canvas> 元素和 WebGL,但所有最近的主流浏览器都支持它们.。为了能在 canvas 中绘制图形,我们使用 Javascript 的上下文环境(context)对象,此对象可以动态创建图形。

    在本教程中

    @@ -29,7 +29,7 @@

    在本教程中

    用 WebGL 让对象动起来
    展示如何旋转移动物体来实现简单动画效果。
    使用 WebGL 创建 3D 物体
    -
    展示如何创建并设置一个 3D 物体动画 (这里使用立方体).
    +
    展示如何创建并设置一个 3D 物体动画 (这里使用立方体).
    在 WebGL 中使用纹理贴图 (texture)
    展示如何投射纹理贴图到物体的各个面。
    WebGL 中的灯光
    diff --git a/files/zh-cn/web/api/webgl_api/tutorial/lighting_in_webgl/index.html b/files/zh-cn/web/api/webgl_api/tutorial/lighting_in_webgl/index.html index 3894461d77d0d4..442ba1c43abc9b 100644 --- a/files/zh-cn/web/api/webgl_api/tutorial/lighting_in_webgl/index.html +++ b/files/zh-cn/web/api/webgl_api/tutorial/lighting_in_webgl/index.html @@ -13,11 +13,11 @@

    在 3D 空间中模拟现实灯光

    光源类型可以概括成如下三种:

    -

    环境光 是一种可以渗透到场景的每一个角落的光。它是非方向光并且会均匀地照射物体的每一个面,无论这个面是朝向哪个方向的。

    +

    环境光 是一种可以渗透到场景的每一个角落的光。它是非方向光并且会均匀地照射物体的每一个面,无论这个面是朝向哪个方向的。

    -

    方向光 是一束从一个固定的方向照射过来的光。这种光的特点可以理解为好像是从一个很遥远的地方照射过来的,然后光线中的每一个光子与其它光子都是平行运动的。举个例子来说,阳光就可以认为是方向光。

    +

    方向光 是一束从一个固定的方向照射过来的光。这种光的特点可以理解为好像是从一个很遥远的地方照射过来的,然后光线中的每一个光子与其它光子都是平行运动的。举个例子来说,阳光就可以认为是方向光。

    -

    点光源光 是指光线是从一个点发射出来的,是向着四面八方发射的。这种光在我们的现实生活中是最常被用到的。举个例子来说,电灯泡就是向各个方向发射光线的。

    +

    点光源光 是指光线是从一个点发射出来的,是向着四面八方发射的。这种光在我们的现实生活中是最常被用到的。举个例子来说,电灯泡就是向各个方向发射光线的。

    以我们的需要来看,我们会简化光照模型,只考虑简单的方向光和环境光,不会考虑任何镜面反射和点光源。这样的话,我们只需要在我们使用的环境光上加上照射到旋转立方体的方向光就可以了。在这里可以看到之前的旋转立方体的例子

    diff --git a/files/zh-cn/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.html b/files/zh-cn/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.html index 162537f2c3772b..01015c3f84c128 100644 --- a/files/zh-cn/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.html +++ b/files/zh-cn/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.html @@ -19,16 +19,16 @@

    给顶点着色

    initBuffers() {
       const positionBuffer = gl.createBuffer();
       const positions = [
    -     1.0,  1.0,
    -    -1.0,  1.0,
    -     1.0, -1.0,
    -    -1.0, -1.0,
    -  ];
    +     1.0,  1.0,
    +    -1.0,  1.0,
    +     1.0, -1.0,
    +    -1.0, -1.0,
    +  ];
       gl.bindBuffer(WebGLRenderingContext.ARRAY_BUFFER, positionBuffer);
       gl.bufferData(WebGLRenderingContext.ARRAY_BUFFER,
    -    new Float32Array(positions),
    -    WebGLRenderingContext.STATIC_DRAW
    -  );
    +    new Float32Array(positions),
    +    WebGLRenderingContext.STATIC_DRAW
    +  );
     
       const colorBuffer = gl.createBuffer();
       const colors = [
    @@ -40,9 +40,9 @@ 

    给顶点着色

    gl.bindBuffer(
    WebGLRenderingContext.ARRAY_BUFFER, colorBuffer); gl.bufferData(WebGLRenderingContext.ARRAY_BUFFER, -  new Float32Array(colors), -  WebGLRenderingContext.STATIC_DRAW -  ); + new Float32Array(colors), + WebGLRenderingContext.STATIC_DRAW + ); return { position: positionBuffer, @@ -61,11 +61,11 @@

    给顶点着色

    uniform mat4 uModelViewMatrix; uniform mat4 uProjectionMatrix; -      varying lowp vec4 vColor; + varying lowp vec4 vColor; void main(void) { gl_Position = uProjectionMatrix* uModelViewMatrix * vec4(aVertexPosition, 1.0); -        vColor = aVertexColor; + vColor = aVertexColor; } </script>
    @@ -77,13 +77,13 @@

    给片段着色

    我们先来复习一下之前构造的片段着色器:

        <script id="shader-fs" type="x-shader/x-fragment">
    -      void main(void) {
    -        gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
    -      }
    -    </script>
    +      void main(void) {
    +        gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
    +      }
    +    </script>
     
    -

    为使每个像素都得到插值后的颜色,我们只需要在此从 vColor 变量中获取这个颜色的值:

    +

    为使每个像素都得到插值后的颜色,我们只需要在此从 vColor 变量中获取这个颜色的值:

        <script id="shader-fs" type="x-shader/x-fragment">
         	varying lowp vec4 vColor;
    diff --git a/files/zh-cn/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html b/files/zh-cn/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html
    index 7ffeeb4fa8b849..e3f5397266a65a 100644
    --- a/files/zh-cn/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html
    +++ b/files/zh-cn/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html
    @@ -11,7 +11,7 @@ 

    加载纹理

    首先加入加载纹理的代码。现在我们只使用一张单一的纹理贴到立方体的 6 个面上,但是同样的方法可以用来加载任意数量的纹理贴图。

    -
    注意: 值得注意的一点是对纹理的加载同样需要遵循跨域访问规则;也就是说你只能从允许跨域访问的网址加载你需要的纹理。下面的例子就是支持跨域访问的。
    +
    注意: 值得注意的一点是对纹理的加载同样需要遵循跨域访问规则;也就是说你只能从允许跨域访问的网址加载你需要的纹理。下面的例子就是支持跨域访问的。

    加载纹理的代码如下:

    @@ -32,13 +32,13 @@

    加载纹理

    }
    -

    函数 initTextures() 首先调用 GL {{domxref("WebGLRenderingContext.createTexture()", "createTexture()")}} 函数来创建一个 GL 纹理对象 cubeTexture 。为了把图片文件加载到纹理,代码首先创建了一个 Image 对象然后把需要当作纹理使用的图形文件加载了进来。当图片加载完成后回调函数 handleTextureLoaded() 就会执行。

    +

    函数 initTextures() 首先调用 GL {{domxref("WebGLRenderingContext.createTexture()", "createTexture()")}} 函数来创建一个 GL 纹理对象 cubeTexture 。为了把图片文件加载到纹理,代码首先创建了一个 Image 对象然后把需要当作纹理使用的图形文件加载了进来。当图片加载完成后回调函数 handleTextureLoaded() 就会执行。

    -

    接下来为了真正地形成纹理,我们通过把新创建的纹理对象绑定到 gl.TEXTURE_2D 来让它成为当前操作纹理。然后通过调用 {{domxref("WebGLRenderingContext.texImage2D()", "texImage2D()")}} 把已经加载的图片图形数据写到纹理。

    +

    接下来为了真正地形成纹理,我们通过把新创建的纹理对象绑定到 gl.TEXTURE_2D 来让它成为当前操作纹理。然后通过调用 {{domxref("WebGLRenderingContext.texImage2D()", "texImage2D()")}} 把已经加载的图片图形数据写到纹理。

    -
    注意: 在多数情况下,纹理的宽和高都必须是 2 的幂(如:1,2,4,8,16 等等)。如果有什么特殊情况请参考下面的“非 2 的幂纹理”小节。
    +
    注意: 在多数情况下,纹理的宽和高都必须是 2 的幂(如:1,2,4,8,16 等等)。如果有什么特殊情况请参考下面的“非 2 的幂纹理”小节。
    -

    代码的接下来两行设置了纹理过滤器,过滤器用来控制当图片缩放时像素如何生成如何插值。在这个例子里,我们对图片放大使用的是线性过滤,而对图片缩小使用的是多级渐进纹理过滤。接下来我们通过调用 {{domxref("WebGLRenderingContext.generateMipMap()", "generateMipMap()")}} 来生成多级渐进纹理,接着通过给 gl.TEXTURE_2D 绑定值 null 来告诉 WebGL 我们对当前纹理的操作已经结束了。

    +

    代码的接下来两行设置了纹理过滤器,过滤器用来控制当图片缩放时像素如何生成如何插值。在这个例子里,我们对图片放大使用的是线性过滤,而对图片缩小使用的是多级渐进纹理过滤。接下来我们通过调用 {{domxref("WebGLRenderingContext.generateMipMap()", "generateMipMap()")}} 来生成多级渐进纹理,接着通过给 gl.TEXTURE_2D 绑定值 null 来告诉 WebGL 我们对当前纹理的操作已经结束了。

    非 2 的幂纹理

    @@ -50,7 +50,7 @@

    非 2 的幂纹理

    使用重复纹理寻址的一个例子就是使用一张砖块的纹理来平铺满一面墙壁。

    -

    多级渐进纹理和纹理坐标重复可以通过调用 {{domxref("WebGLRenderingContext.texParameter()", "texParameteri()")}} 来禁用,当然首先你已经通过调用 {{domxref("WebGLRenderingContext.bindTexture()", "bindTexture()")}} 绑定过纹理了。这样虽然已经可以使用非 2 的幂纹理了,但是你将无法使用多级渐进纹理,纹理坐标包装,纹理坐标重复,而且无法控制设备如何处理你的纹理。

    +

    多级渐进纹理和纹理坐标重复可以通过调用 {{domxref("WebGLRenderingContext.texParameter()", "texParameteri()")}} 来禁用,当然首先你已经通过调用 {{domxref("WebGLRenderingContext.bindTexture()", "bindTexture()")}} 绑定过纹理了。这样虽然已经可以使用非 2 的幂纹理了,但是你将无法使用多级渐进纹理,纹理坐标包装,纹理坐标重复,而且无法控制设备如何处理你的纹理。

    // gl.NEAREST is also allowed, instead of gl.LINEAR, as neither mipmap.
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
    @@ -63,7 +63,7 @@ 

    非 2 的幂纹理

    映射纹理到面

    -

    现在,纹理已经加载好了,而且已经可以使用了。但是在使用之前我们还要创建好纹理坐标到立方体各个面的顶点的映射关系。下面的代码通过替换之前的设置每个面颜色的代码,当然还是在 initBuffers() 函数里。

    +

    现在,纹理已经加载好了,而且已经可以使用了。但是在使用之前我们还要创建好纹理坐标到立方体各个面的顶点的映射关系。下面的代码通过替换之前的设置每个面颜色的代码,当然还是在 initBuffers() 函数里。

    cubeVerticesTextureCoordBuffer = gl.createBuffer();
     gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesTextureCoordBuffer);
    @@ -107,7 +107,7 @@ 

    映射纹理到面

    首先,代码创建了一个 GL 缓存区,用来保存每个面的纹理坐标信息,然后把这个缓存区绑定到 GL 以方便我们写入数据。

    -

    数组变量 textureCoordinates 中定义好了与每个面上的每个顶点一一对应的纹理坐标。请注意,纹理坐标的取值范围只能从 0.0 到 1.0,所以不论纹理贴图的实际大小是多少,为了实现纹理映射,我们要使用的纹理坐标只能规范化到 0.0 到 1.0 的范围内。

    +

    数组变量 textureCoordinates 中定义好了与每个面上的每个顶点一一对应的纹理坐标。请注意,纹理坐标的取值范围只能从 0.0 到 1.0,所以不论纹理贴图的实际大小是多少,为了实现纹理映射,我们要使用的纹理坐标只能规范化到 0.0 到 1.0 的范围内。

    纹理坐标信息给定了之后,把这个数组里的数据都写到 GL 缓存区,这样 GL 就能使用这个坐标数据了。

    @@ -115,7 +115,7 @@

    更新着色器

    为了使用纹理来代替单一的颜色,着色器程序和着色器程序的初始化代码都需要进行修改。

    -

    先让我们看一看需要加入函数 initShaders() 里的非常简单的改变:

    +

    先让我们看一看需要加入函数 initShaders() 里的非常简单的改变:

    textureCoordAttribute = gl.getAttribLocation(shaderProgram, "aTextureCoord");
     gl.enableVertexAttribArray(textureCoordAttribute);
    @@ -165,7 +165,7 @@ 

    片段着色器

    绘制具体纹理贴图的立方体

    -

    接下来是对 drawScene() 函数的更改,为了使整体的代码看起来更简洁,我们去掉了让立方体位置变化的代码,现在它只会随着时间的变化进行旋转,而为了使用纹理,所要进行的代码更改确是很少的。

    +

    接下来是对 drawScene() 函数的更改,为了使整体的代码看起来更简洁,我们去掉了让立方体位置变化的代码,现在它只会随着时间的变化进行旋转,而为了使用纹理,所要进行的代码更改确是很少的。

    使用下面的代码代替映射颜色到纹理的代码:

    @@ -174,13 +174,13 @@

    绘制具体纹理贴图的立方 gl.uniform1i(gl.getUniformLocation(shaderProgram, "uSampler"), 0);

    -

    GL 最多可同时注册 32 张纹理;gl.TEXTURE0 是第一张。我们把我们之前加载的纹理绑定到了第一个寄存器,然后着色器程序里的采样器 uSampler 就会完成它的功能:使用纹理。

    +

    GL 最多可同时注册 32 张纹理;gl.TEXTURE0 是第一张。我们把我们之前加载的纹理绑定到了第一个寄存器,然后着色器程序里的采样器 uSampler 就会完成它的功能:使用纹理。

    好,现在我们的立方体就会像这样旋转起来了。

    {{EmbedGHLiveSample('webgl-examples/tutorial/sample6/index.html', 670, 510) }}

    -

    查看完整示例代码 | 在新窗口里打开示例

    +

    查看完整示例代码 | 在新窗口里打开示例

    关于跨域纹理

    @@ -195,11 +195,11 @@

    关于跨域纹理

    被污染过的(只写)画布是不能拿来当作 WebGL 纹理来使用的。举个例子来说,当把一张跨域的图片画到一个 2D 的 {{ HTMLElement("canvas") }} 中时,这个画布就是“被污染过的”。

    -

    注意: 对 Canvas 2D 的 drawImage 的跨域支持已经在 {{Gecko("9.0")}} 版本实现的。这就意味着使用支持跨域的图片来污染一个 2D 的画布,这张画布也已经可以作为 WebGL 的纹理来使用了。

    +

    注意: 对 Canvas 2D 的 drawImage 的跨域支持已经在 {{Gecko("9.0")}} 版本实现的。这就意味着使用支持跨域的图片来污染一个 2D 的画布,这张画布也已经可以作为 WebGL 的纹理来使用了。

    -

    注意: 视频对跨域的支持以及 {{ HTMLElement("video") }} 元素的 crossorigin 属性的支持是在 {{Gecko("12.0")}} 版本中实现的。

    +

    注意: 视频对跨域的支持以及 {{ HTMLElement("video") }} 元素的 crossorigin 属性的支持是在 {{Gecko("12.0")}} 版本中实现的。

    {{PreviousNext("Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL", "Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}}

    diff --git a/files/zh-cn/web/api/webgl_api/types/index.html b/files/zh-cn/web/api/webgl_api/types/index.html index 3b01c1a111f156..942325a2db51b1 100644 --- a/files/zh-cn/web/api/webgl_api/types/index.html +++ b/files/zh-cn/web/api/webgl_api/types/index.html @@ -21,7 +21,7 @@

    WebGL 1

    GLenum unsigned long - 用于枚举。另见 constants。 + 用于枚举。另见 constantsGLboolean @@ -93,7 +93,7 @@

    WebGL 1

    WebGL 2

    -

    以下类型的变量属于 {{domxref("WebGL2RenderingContext")}}. 所有 WebGL 1 中的类型也有使用。

    +

    以下类型的变量属于 {{domxref("WebGL2RenderingContext")}}. 所有 WebGL 1 中的类型也有使用。

    @@ -112,7 +112,7 @@

    WebGL 2

    WebGL 扩展

    -

    以下类型用在 WebGL extensions中。

    +

    以下类型用在 WebGL extensions中。

    diff --git a/files/zh-cn/web/api/webgl_api/using_extensions/index.html b/files/zh-cn/web/api/webgl_api/using_extensions/index.html index 5382ed39911eb9..c393ff48cad5f8 100644 --- a/files/zh-cn/web/api/webgl_api/using_extensions/index.html +++ b/files/zh-cn/web/api/webgl_api/using_extensions/index.html @@ -7,13 +7,13 @@ ---
    {{WebGLSidebar}}
    -

    WebGL,像它的姐妹 API (OpenGL and OpenGL ES),支持使用扩展(extensions)。一份完整的扩展列表可在 khronos webgl extension registry

    +

    WebGL,像它的姐妹 API (OpenGL and OpenGL ES),支持使用扩展(extensions)。一份完整的扩展列表可在 khronos webgl extension registry

    -
    Note: 不像别的 GL APIs,在 webGL 中 , 扩展只有在明确需要的情况下才会加载。
    +
    Note: 不像别的 GL APIs,在 webGL 中 , 扩展只有在明确需要的情况下才会加载。

    规范扩展名,供应商前缀和首选项

    -

    扩展(extensions)在未被官方正式制定为标准前,某些浏览器厂商可能会支持 WebGL 扩展 (but only when they are in draft stage)。这样的话,扩展的名字应该加上相应的厂商前缀 (MOZ_, WEBKIT_, etc.),否则这个扩展只能在浏览器切换了偏好设置的前提下生效。

    +

    扩展(extensions)在未被官方正式制定为标准前,某些浏览器厂商可能会支持 WebGL 扩展 (but only when they are in draft stage)。这样的话,扩展的名字应该加上相应的厂商前缀 (MOZ_, WEBKIT_, etc.),否则这个扩展只能在浏览器切换了偏好设置的前提下生效。

    If you wish to work with the bleeding edge of extensions, and want to keep working on upon ratification (assuming, of course, that the extension doesn't change in incompatible ways), that you query the canonical extension name as well as the vendor extension name. For instance:

    diff --git a/files/zh-cn/web/api/webgl_api/webgl_best_practices/index.html b/files/zh-cn/web/api/webgl_api/webgl_best_practices/index.html index 55b4a2a6419235..4ce6fe6487d3fc 100644 --- a/files/zh-cn/web/api/webgl_api/webgl_best_practices/index.html +++ b/files/zh-cn/web/api/webgl_api/webgl_best_practices/index.html @@ -12,9 +12,9 @@

    需要避免的事情

      -
    • 确保应用程序运行时不会产生任何 WebGL 错误(如 getError() 返回的). In Firefox, every WebGL error (until a certain limit), and some other WebGL issues, are reported as a JavaScript warning with a descriptive message. 在 Firefox 中,所有 WebGL 错误(直至超出数量限制)以及其它一些 WebGL 问题,都会以一段提供描述的 JavaScript 警告报告出来。你不想自己的应用在用户的控制台打印出一堆东西对吧?你当然不想了。
    • -
    • 你应该永远不去触碰 WebGL shader 里的 #ifdef GL_ES ;虽然前边的一些例子使用了这个,这并无必要,因为这个条件判断在 WebGL shader 中始终为 true。
    • -
    • 在 fragment shader 中使用 highp 精度将阻碍你的内容在某些旧的移动设备上正确运行。这里,你可以使用 mediump;但是,你需要知道,由于在大多移动设备上的精度丢失,这经常导致渲染失败,这在典型的 PC 机型上没有问题。通常来说,在 vertex 和 fragment shader 中仅使用 highp ,除非 shaders 通过了各大平台的测试。从 Firefox 11 开始,WebGL 的 getShaderPrecisionFormat() 函数的实现,允许你判断 highp 是否得到支持,进而允许你可以查询到实际的精度。
    • +
    • 确保应用程序运行时不会产生任何 WebGL 错误(如 getError() 返回的). In Firefox, every WebGL error (until a certain limit), and some other WebGL issues, are reported as a JavaScript warning with a descriptive message. 在 Firefox 中,所有 WebGL 错误(直至超出数量限制)以及其它一些 WebGL 问题,都会以一段提供描述的 JavaScript 警告报告出来。你不想自己的应用在用户的控制台打印出一堆东西对吧?你当然不想了。
    • +
    • 你应该永远不去触碰 WebGL shader 里的 #ifdef GL_ES ;虽然前边的一些例子使用了这个,这并无必要,因为这个条件判断在 WebGL shader 中始终为 true。
    • +
    • 在 fragment shader 中使用 highp 精度将阻碍你的内容在某些旧的移动设备上正确运行。这里,你可以使用 mediump;但是,你需要知道,由于在大多移动设备上的精度丢失,这经常导致渲染失败,这在典型的 PC 机型上没有问题。通常来说,在 vertex 和 fragment shader 中仅使用 highp ,除非 shaders 通过了各大平台的测试。从 Firefox 11 开始,WebGL 的 getShaderPrecisionFormat() 函数的实现,允许你判断 highp 是否得到支持,进而允许你可以查询到实际的精度。

    需要记住的事情

    diff --git a/files/zh-cn/web/api/webgl_api/webgl_model_view_projection/index.html b/files/zh-cn/web/api/webgl_api/webgl_model_view_projection/index.html index 0d4e4b89a36100..3ad5bb866170dd 100644 --- a/files/zh-cn/web/api/webgl_api/webgl_model_view_projection/index.html +++ b/files/zh-cn/web/api/webgl_api/webgl_model_view_projection/index.html @@ -8,7 +8,7 @@

    本文探讨如何在 WebGL 项目中获取数据,并将其投影到适当的空间以在屏幕上显示。 它假定了你具备用于平移,缩放和旋转的基本矩阵数学知识。它解释了组成 3D 场景时通常使用的三个核心矩阵:模型,视图和投影矩阵。

    -

    注意:本文还可作为 MDN 内容套件 提供。它还使用 MDN全局对象下可用的 实用函数 集合。

    +

    注意:本文还可作为 MDN 内容套件 提供。它还使用 MDN全局对象下可用的 实用函数 集合。

    模型、视图、投影矩阵

    @@ -34,7 +34,7 @@

    WebGLBox 例子

    本示例将创建一个自定义 WebGL 对象,该对象将在屏幕上绘制一个 2D 框。

    -

    注意: 每一个 WebGL 示例代码在此 github repo 中可找到,并按章节组织。此外,每个章节底部都有一个 JSFiddle 链接。

    +

    注意: 每一个 WebGL 示例代码在此 github repo 中可找到,并按章节组织。此外,每个章节底部都有一个 JSFiddle 链接。

    WebGLBox Constructor

    @@ -112,7 +112,7 @@

    WebGLBox 绘制

    } -

    着色器是用 GLSL 编写的代码片段,它接收我们的点数据并最终将它们渲染到屏幕上。为了方便起见,这些着色器存储在 {{htmlelement("script")}} 元素之中,该元素通过自定义函数 MDN.createWebGLProgramFromIds() 引入程序中。这个方法是为这些教程编写的 实用函数 集合的一部分,此处不再赘述。此函数用于处理获取一些 GLSL 源代码并将其编译为 WebGL 程序的基础操作。该函数具有三个参数 - 用于渲染程序的上下文,包含顶点着色器的 {{htmlelement("script")}} 元素的 ID 和包含片段着色器的 {{htmlelement("script")}} 元素的 ID。顶点着色器放置顶点,片段着色器为每个像素着色。

    +

    着色器是用 GLSL 编写的代码片段,它接收我们的点数据并最终将它们渲染到屏幕上。为了方便起见,这些着色器存储在 {{htmlelement("script")}} 元素之中,该元素通过自定义函数 MDN.createWebGLProgramFromIds() 引入程序中。这个方法是为这些教程编写的 实用函数 集合的一部分,此处不再赘述。此函数用于处理获取一些 GLSL 源代码并将其编译为 WebGL 程序的基础操作。该函数具有三个参数 - 用于渲染程序的上下文,包含顶点着色器的 {{htmlelement("script")}} 元素的 ID 和包含片段着色器的 {{htmlelement("script")}} 元素的 ID。顶点着色器放置顶点,片段着色器为每个像素着色。

    首先看一下将在屏幕上移动顶点的顶点着色器:

    @@ -200,11 +200,11 @@

    齐次坐标

    gl_Position = vec4(position, 1.0);
     
    -

    位置变量是在 draw() 方法中定义的,并作为 attribute 传递给着色器。这是一个三维点,但最终通过管线传递的 gl_Position 变量实际上是四维的 - 是 (x,y,z,w) 而不是  (x,y,z) 。 z 后面没有字母了,因此习惯上将第四维标记为 w。在上面的示例中,  w 坐标设置为 1.0。

    +

    位置变量是在 draw() 方法中定义的,并作为 attribute 传递给着色器。这是一个三维点,但最终通过管线传递的 gl_Position 变量实际上是四维的 - 是 (x,y,z,w) 而不是 (x,y,z)z 后面没有字母了,因此习惯上将第四维标记为 w。在上面的示例中, w 坐标设置为 1.0。

    -

    显而易见的问题是:“为什么要增加维度?”。事实证明,这种增加允许使用许多不错的技术来处理 3D 数据。这个增加的维度将透视的概念引入坐标系中。将其放置在适当的位置后,我们可以将 3D 坐标映射到 2D 空间中,从而允许两条平行线当它们延伸到远方时相交。 w 的值被用作该坐标的其他分量放除数,因此  x,   y 和  z 的真实值被计算为  x/w ,  y/w 和  z/w(然后 w 也  w/w , 变成 1)。

    +

    显而易见的问题是:“为什么要增加维度?”。事实证明,这种增加允许使用许多不错的技术来处理 3D 数据。这个增加的维度将透视的概念引入坐标系中。将其放置在适当的位置后,我们可以将 3D 坐标映射到 2D 空间中,从而允许两条平行线当它们延伸到远方时相交。 w 的值被用作该坐标的其他分量放除数,因此 x, yz 的真实值被计算为 x/w , y/wz/w(然后 ww/w , 变成 1)。

    -

    三维点定义在典型的笛卡尔坐标系中。增加的第四维将这一点变为  {{interwiki("wikipedia", "homogeneous coordinates", "齐次坐标")}} 。它仍然代表 3D 空间中的一个点,并且可以通过一对简单的函数轻松地演示如何构造这种类型的坐标。

    +

    三维点定义在典型的笛卡尔坐标系中。增加的第四维将这一点变为 {{interwiki("wikipedia", "homogeneous coordinates", "齐次坐标")}} 。它仍然代表 3D 空间中的一个点,并且可以通过一对简单的函数轻松地演示如何构造这种类型的坐标。

    function cartesianToHomogeneous(point) {
     
    @@ -231,7 +231,7 @@ 

    齐次坐标

    homogeneousToCartesian([10, 4, 5, 0]);
     
    -

    计算结果为: [Infinity, Infinity, Infinity].

    +

    计算结果为: [Infinity, Infinity, Infinity].

    该齐次坐标表示无穷大的某个点。这是一种方便的方式表示从原点向特定方向发射的射线。除了射线,还可以将其视为方向矢量的表示。如果将此齐次坐标和带有平移的矩阵相乘,则该平移将被有效地消去了。

    @@ -241,7 +241,7 @@

    齐次坐标

    实际上,在将齐次坐标转换回笛卡尔坐标之后(通过除以 w),会发生从裁剪空间中裁剪点和多边形的情况。该最终空间称为归一化设备坐标或 NDC。

    -

    为了开始使用这个思想,可以修改前面的示例,以允许使用 w 分量。

    +

    为了开始使用这个思想,可以修改前面的示例,以允许使用 w 分量。

    // 重新定义三角形以使用 W 分量
     var data = new Float32Array([
    @@ -333,7 +333,7 @@ 

    模型转换

    在这种情况下,对于动画的每一帧,一系列缩放,旋转和平移矩阵会将数据移动到裁剪空间中所需的位置。这个立方体是裁剪空间 (-1, -1, -1) 到 (1, 1, 1) 的大小,因此需要缩小以不填满整个裁剪空间。该矩阵事先已经在 JavaScript 中进行了乘法运算,直接发到着色器。

    -

    以下代码示例在  CubeDemo 对象上定义了一个创建模型矩阵的方法。它使用了自定义函数来创建和乘以 MDN WebGL 共享代码中定义的矩阵。新的函数如下:

    +

    以下代码示例在 CubeDemo 对象上定义了一个创建模型矩阵的方法。它使用了自定义函数来创建和乘以 MDN WebGL 共享代码中定义的矩阵。新的函数如下:

    CubeDemo.prototype.computeModelMatrix = function(now) {
     
    @@ -359,7 +359,7 @@ 

    模型转换

    };
    -

    为了在着色器中使用它,必须将其设置在 uniforms 的位置。uniforms 的位置保存在 locations 对象中,如下所示:

    +

    为了在着色器中使用它,必须将其设置在 uniforms 的位置。uniforms 的位置保存在 locations 对象中,如下所示:

    this.locations.model = gl.getUniformLocation(webglProgram, 'model');
     
    @@ -392,12 +392,12 @@

    练习

  • 使用缩放矩阵缩小立方体,并将其放置在裁剪空间中不同位置。
  • 尝试将其移到裁剪空间之外。
  • 调整窗口大小,然后观察盒子的变形情况。
  • -
  • 添加一个 rotateZ 。
  • +
  • 添加一个 rotateZ
  • 除以 W

    -

    一个开始了解立方体模型透视的简单方法是获取 Z 坐标并将其复制到 w 坐标。通常,将笛卡尔点转换为齐次坐标时,它变为  (x,y,z,1) ,但我们将其设置为  (x,y,z,z) 。实际上,我们希望确保视图中的点的 z 值大于 0,因此我们将其值改为  ((1.0 + z) * scaleFactor) 对其进行轻微的修改。这将需要一个通常位于裁剪空间(-1 到 1)中的点,并将其移到更像(0 到 1)的空间中,具体取决于比例因子设置为什么。比例因子将最终 w 值更改为总体上更高或更低。

    +

    一个开始了解立方体模型透视的简单方法是获取 Z 坐标并将其复制到 w 坐标。通常,将笛卡尔点转换为齐次坐标时,它变为 (x,y,z,1) ,但我们将其设置为 (x,y,z,z) 。实际上,我们希望确保视图中的点的 z 值大于 0,因此我们将其值改为 ((1.0 + z) * scaleFactor) 对其进行轻微的修改。这将需要一个通常位于裁剪空间(-1 到 1)中的点,并将其移到更像(0 到 1)的空间中,具体取决于比例因子设置为什么。比例因子将最终 w 值更改为总体上更高或更低。

    着色器代码如下:

    @@ -421,7 +421,7 @@

    结果

    Filling the W component and creating some projection.

    -

    看到那个深蓝色的小三角形吗?那是添加到对象上的另一个面,因为形状的旋转导致了该角延伸到裁剪空间之外,从而导致该角被裁剪掉。有关如何使用更复杂的矩阵来帮助控制和防止裁剪的介绍,请参照下面的 Perspective matrix

    +

    看到那个深蓝色的小三角形吗?那是添加到对象上的另一个面,因为形状的旋转导致了该角延伸到裁剪空间之外,从而导致该角被裁剪掉。有关如何使用更复杂的矩阵来帮助控制和防止裁剪的介绍,请参照下面的 Perspective matrix

    练习

    @@ -431,7 +431,7 @@

    练习

    简单投影

    -

    填充 w 分量的最后一步实际上可以用一个简单的矩阵完成。从 identity 矩阵开始:

    +

    填充 w 分量的最后一步实际上可以用一个简单的矩阵完成。从 identity 矩阵开始:

    var identity = [
       1, 0, 0, 0,
    @@ -457,7 +457,7 @@ 

    简单投影

    //> [2, 3, 4, 4]
    -

    但是,在最后一个示例中,我们执行了 (z + 1) * scaleFactor:

    +

    但是,在最后一个示例中,我们执行了 (z + 1) * scaleFactor:

    var scaleFactor = 0.5;
     
    @@ -490,9 +490,9 @@ 

    简单投影

    w = (4 + 1) * scaleFactor
     
    -

    这与我们在前面示例中使用的  (z + 1) * scaleFactor 完全相同。

    +

    这与我们在前面示例中使用的 (z + 1) * scaleFactor 完全相同。

    -

    在 box demo 中,添加了一个额外的 .computeSimpleProjectionMatrix() 方法。在 .draw() 方法中调用,并将比例因子传递给它。结果应该与上一个示例相同:

    +

    在 box demo 中,添加了一个额外的 .computeSimpleProjectionMatrix() 方法。在 .draw() 方法中调用,并将比例因子传递给它。结果应该与上一个示例相同:

    CubeDemo.prototype.computeSimpleProjectionMatrix = function(scaleFactor) {
     
    @@ -506,7 +506,7 @@ 

    简单投影

    };
    -

    尽管结果相同,但重要的步骤还是在顶点着色器中。与其直接修改顶点,不如将其乘以一个附加的 projection matrix,该矩阵将 3D 点投影到 2D 绘图表面上:

    +

    尽管结果相同,但重要的步骤还是在顶点着色器中。与其直接修改顶点,不如将其乘以一个附加的 projection matrix,该矩阵将 3D 点投影到 2D 绘图表面上:

    // 确保以相反的顺序读取转换矩阵
     gl_Position = projection * model * vec4(position, 1.0);
    @@ -522,7 +522,7 @@ 

    透视矩阵

    至此,我们逐步构建了自己的 3D 渲染设置。但是,我们当前构建的代码存在一些问题。首先,每当我们调整窗口大小时,它就会倾斜。另外是我们的简单投影无法处理场景数据的大范围值。大多数场景在裁剪空间中不起作用。定义与场景相关的距离是很有帮助的,这样在转换数字时不会损失精度。最后,对哪些点放在裁剪空间的内部和外部进行精度控制非常有帮助。在前面的例子中,立方体的角偶尔会被裁剪。

    -

    透视矩阵是一种可以满足这些要求的投影矩阵。也开始涉及数学更多的内容,这些示例中将不做充分解释。简而言之,它结合了除以 w(与前面的例子相同)和基于 相似三角形 相似三角形的一些巧妙操作。如果你想阅读有关其背后数学的完整说明,请查看以下一些链接:

    +

    透视矩阵是一种可以满足这些要求的投影矩阵。也开始涉及数学更多的内容,这些示例中将不做充分解释。简而言之,它结合了除以 w(与前面的例子相同)和基于 相似三角形 相似三角形的一些巧妙操作。如果你想阅读有关其背后数学的完整说明,请查看以下一些链接:

    • OpenGL 投影矩阵
    • @@ -532,9 +532,9 @@

      透视矩阵

      关于下面使用的透视矩阵,需要注意的一件重要的事是它会翻转 z 轴。在裁剪空间中,z+ 原理观察者,而使用此矩阵,它朝向观察者。

      -

      翻转 z 轴的原因是,裁剪空间坐标系是左手坐标系(z 轴指向远离观察者并指入屏幕的位置),而数学,物理学和 3D 建模中的惯例与 OpenGL 中视图/眼睛坐标系一样,是使用右手坐标系(z 轴指向屏幕,朝向观察者)。有关的 Wikipedia 文章的更多信息:直角坐标系右手法则

      +

      翻转 z 轴的原因是,裁剪空间坐标系是左手坐标系(z 轴指向远离观察者并指入屏幕的位置),而数学,物理学和 3D 建模中的惯例与 OpenGL 中视图/眼睛坐标系一样,是使用右手坐标系(z 轴指向屏幕,朝向观察者)。有关的 Wikipedia 文章的更多信息:直角坐标系, 右手法则

      -

      让我们看一下  perspectiveMatrix() 函数,该函数计算了透视矩阵。

      +

      让我们看一下 perspectiveMatrix() 函数,该函数计算了透视矩阵。

      MDN.perspectiveMatrix = function(fieldOfViewInRadians, aspectRatio, near, far) {
       
      @@ -561,7 +561,7 @@ 

      透视矩阵

      一个正数,表示到屏幕的距离是垂直于地板的平面的距离,该距离比将所有内容都裁剪的距离更近。它在裁剪空间中映射为-1,并且不应设置为 0。
      farClippingPlaneDistance
      一个正数,表示与平面之间的距离,超出该距离将裁剪几何体。它在裁剪空间中映射为 1.该值应保持合理的距离以接近几何图形的距离,以免在渲染时出现精度误差。
      -
      在最新版本的盒子 demo 中, computeSimpleProjectionMatrix() 函数已替换为 computePerspectiveMatrix() 函数。
      +
      在最新版本的盒子 demo 中, computeSimpleProjectionMatrix() 函数已替换为 computePerspectiveMatrix() 函数。
      CubeDemo.prototype.computePerspectiveMatrix = function() {
      @@ -597,7 +597,7 @@ 

      练习

      • 使用透视矩阵和模型矩阵的参数进行体验。
      • -
      • 将透视矩阵替换为 {{interwiki("wikipedia", "正交矩阵")}}。在 MDN WebGL 共享代码中可以找到 MDN.orthographicMatrix() 替换 CubeDemo.prototype.computePerspectiveMatrix() 中的 MDN.perspectiveMatrix() 函数。
      • +
      • 将透视矩阵替换为 {{interwiki("wikipedia", "正交矩阵")}}。在 MDN WebGL 共享代码中可以找到 MDN.orthographicMatrix() 替换 CubeDemo.prototype.computePerspectiveMatrix() 中的 MDN.perspectiveMatrix() 函数。

      视图矩阵

      @@ -622,7 +622,7 @@

      模拟相机

      与直接转换模型顶点的模型矩阵不同,视图矩阵会移动一个抽象的相机。实际上,顶点着色器仍然移动的是模型,而“相机”保持在原位。为了使此计算正确,必须使用变换矩阵的逆。逆矩阵实质上是逆转了变换,因此,如果我们向前移动相机,则逆矩阵会导致场景中的物体向后移动。

      -

      以下的  computeViewMatrix() 函数通过向内和向外,向左和向右移动的视图矩阵来激活视图矩阵。

      +

      以下的 computeViewMatrix() 函数通过向内和向外,向左和向右移动的视图矩阵来激活视图矩阵。

      CubeDemo.prototype.computeViewMatrix = function(now) {
       
      @@ -640,7 +640,7 @@ 

      模拟相机

      ]); // 翻转相机的运动操作,因为我们实际上是 -  // 移动场景中的几何图形,而不是相机本身 + // 移动场景中的几何图形,而不是相机本身 this.transforms.view = MDN.invertMatrix(matrix); };
      @@ -662,7 +662,7 @@

      相关坐标系

      此时,回顾并标记我们使用的各种坐标系是很有用的。首先,在模型空间中定义了立方体的顶点。在场景中移动模型。这些顶点需要通过应用模型矩阵转换到世界空间

      -

      模型空间 → 模型矩阵 → 世界空间

      +

      模型空间 → 模型矩阵 → 世界空间

      相机尚未执行任何操作,需要再次移动这些点。目前它们在世界空间中,但需要将它们移动到视图空间(使用视图矩阵)以表示相机的位置。

      diff --git a/files/zh-cn/web/api/webgl_lose_context/index.html b/files/zh-cn/web/api/webgl_lose_context/index.html index 1e08aabfa22614..26457ae53ecd01 100644 --- a/files/zh-cn/web/api/webgl_lose_context/index.html +++ b/files/zh-cn/web/api/webgl_lose_context/index.html @@ -10,9 +10,9 @@ ---
      {{APIRef("WebGL")}}
      -

      WEBGL_lose_context 是属于 WebGL API 的一个扩展 API,它提供一组方法用来模拟一个 {{domxref("WebGLRenderingContext")}} 上下文的丢失和恢复。

      +

      WEBGL_lose_context 是属于 WebGL API 的一个扩展 API,它提供一组方法用来模拟一个 {{domxref("WebGLRenderingContext")}} 上下文的丢失和恢复。

      -

      WebGL 扩展可以通过 {{domxref("WebGLRenderingContext.getExtension()")}} 方法来使用。更多信息可参阅 WebGL 教程 中的 使用 WebGL 扩展 。

      +

      WebGL 扩展可以通过 {{domxref("WebGLRenderingContext.getExtension()")}} 方法来使用。更多信息可参阅 WebGL 教程 中的 使用 WebGL 扩展

      可用性:该扩展在 {{domxref("WebGLRenderingContext", "WebGL1", "", 1)}} 和 {{domxref("WebGL2RenderingContext", "WebGL2", "", 1)}} 上下文中都是可用的。

      diff --git a/files/zh-cn/web/api/webgl_lose_context/restorecontext/index.html b/files/zh-cn/web/api/webgl_lose_context/restorecontext/index.html index eb5ee022f6a94f..968c23dffd028b 100644 --- a/files/zh-cn/web/api/webgl_lose_context/restorecontext/index.html +++ b/files/zh-cn/web/api/webgl_lose_context/restorecontext/index.html @@ -25,7 +25,7 @@

      抛出错误

      示例

      -

      你可以用这个方法模拟  webglcontextrestored 事件:

      +

      你可以用这个方法模拟 webglcontextrestored 事件:

      var canvas = document.getElementById('canvas');
       var gl = canvas.getContext('webgl');
      diff --git a/files/zh-cn/web/api/webglactiveinfo/index.html b/files/zh-cn/web/api/webglactiveinfo/index.html
      index 8b82e8102a29f5..74373c80bc581a 100644
      --- a/files/zh-cn/web/api/webglactiveinfo/index.html
      +++ b/files/zh-cn/web/api/webglactiveinfo/index.html
      @@ -24,7 +24,7 @@ 

      示例

      • {{domxref("WebGLRenderingContext.getActiveAttrib()")}}
      • -
      • {{domxref("WebGLRenderingContext.getActiveUniform()")}} 
      • +
      • {{domxref("WebGLRenderingContext.getActiveUniform()")}}
      • {{domxref("WebGL2RenderingContext.getTransformFeedbackVarying()")}}
      diff --git a/files/zh-cn/web/api/webglbuffer/index.html b/files/zh-cn/web/api/webglbuffer/index.html index dbb2e886fe9b23..c9260e38a71afe 100644 --- a/files/zh-cn/web/api/webglbuffer/index.html +++ b/files/zh-cn/web/api/webglbuffer/index.html @@ -9,7 +9,7 @@ ---

      {{APIRef("WebGL")}}

      -

      WebGLBuffer 接口属于 WebGL API 的一部分,表示一个不透明的缓冲区对象,储存诸如顶点或着色之类的数据。

      +

      WebGLBuffer 接口属于 WebGL API 的一部分,表示一个不透明的缓冲区对象,储存诸如顶点或着色之类的数据。

      描述

      @@ -46,5 +46,5 @@

      另请参阅

    • {{domxref("WebGLRenderingContext.createBuffer()")}}
    • {{domxref("WebGLRenderingContext.deleteBuffer()")}}
    • {{domxref("WebGLRenderingContext.isBuffer()")}}
    • -
    • 其他缓冲区: {{domxref("WebGLFramebuffer")}}, {{domxref("WebGLRenderbuffer")}}
    • +
    • 其他缓冲区: {{domxref("WebGLFramebuffer")}}, {{domxref("WebGLRenderbuffer")}}
    diff --git a/files/zh-cn/web/api/webglcontextevent/index.html b/files/zh-cn/web/api/webglcontextevent/index.html index fad97b1c06042a..cf5c550c0c3837 100644 --- a/files/zh-cn/web/api/webglcontextevent/index.html +++ b/files/zh-cn/web/api/webglcontextevent/index.html @@ -5,17 +5,17 @@ ---
    {{APIRef("WebGL")}}
    -

    WebContextEvent 接口属于 WebGL API 的一部分,同时也是生成用来对 WebGL 渲染上下文作响应的事件接口。

    +

    WebContextEvent 接口属于 WebGL API 的一部分,同时也是生成用来对 WebGL 渲染上下文作响应的事件接口。

    继承

    -

    此接口从它的父接口 {{domxref("Event")}}继承属性和方法。

    +

    此接口从它的父接口 {{domxref("Event")}}继承属性和方法。

    {{InheritanceDiagram}}

    属性

    -

    此接口从它的父接口 {{domxref("Event")}}继承属性。

    +

    此接口从它的父接口 {{domxref("Event")}}继承属性。

    {{domxref("WebGLContextEvent.statusMessage")}}
    @@ -24,11 +24,11 @@

    属性

    方法

    -

    此接口本身并没有定义任何方法,而是从它的父接口 {{domxref("Event")}}继承方法。

    +

    此接口本身并没有定义任何方法,而是从它的父接口 {{domxref("Event")}}继承方法。

    示例

    -

    使用 {{domxref("WEBGL_lose_context")}} 插件, 你可以模拟 {{Event("webglcontextlost")}} 和 {{Event("webglcontextrestored")}} 事件:

    +

    使用 {{domxref("WEBGL_lose_context")}} 插件, 你可以模拟 {{Event("webglcontextlost")}} 和 {{Event("webglcontextrestored")}} 事件:

    var canvas = document.getElementById('canvas');
     var gl = canvas.getContext('webgl');
    diff --git a/files/zh-cn/web/api/webglframebuffer/index.html b/files/zh-cn/web/api/webglframebuffer/index.html
    index 4ab1bea04c7e4a..79b40d8a27b6dd 100644
    --- a/files/zh-cn/web/api/webglframebuffer/index.html
    +++ b/files/zh-cn/web/api/webglframebuffer/index.html
    @@ -5,11 +5,11 @@
     ---
     
    {{APIRef("WebGL")}}
    -

    WebGLFramebuffer 接口时 WebGL API 的一部分,它提供了一个缓冲区的集合,这些缓冲区可以作为一个整体用作渲染操作的目标缓冲区。

    +

    WebGLFramebuffer 接口时 WebGL API 的一部分,它提供了一个缓冲区的集合,这些缓冲区可以作为一个整体用作渲染操作的目标缓冲区。

    摘要

    -

    WebGLFramebuffer 对象的内容不能直接访问,因此该对象没有定义任何用于操作其自身内容的方法和属性。需要使用 WebGLFramebuffer 对象时,请使用 {{domxref("WebGLRenderingContext")}} 对象的以下方法:

    +

    WebGLFramebuffer 对象的内容不能直接访问,因此该对象没有定义任何用于操作其自身内容的方法和属性。需要使用 WebGLFramebuffer 对象时,请使用 {{domxref("WebGLRenderingContext")}} 对象的以下方法:

    • {{domxref("WebGLRenderingContext.bindFramebuffer()")}}
    • diff --git a/files/zh-cn/web/api/webglprogram/index.html b/files/zh-cn/web/api/webglprogram/index.html index 8713038205da96..f36f2d9555039a 100644 --- a/files/zh-cn/web/api/webglprogram/index.html +++ b/files/zh-cn/web/api/webglprogram/index.html @@ -10,7 +10,7 @@ ---
      {{APIRef("WebGL")}}
      -

      WebGLProgram 是 WebGL API 的一部分,它由两个{{domxref("WebGLShader")}}s(webgl 着色器)组成,分别为顶点着色器和片元着色器(两种着色器都是采用 GLSL 语言编写的)。创建一个 WebGLProgram 需要调用 GL 上下文的{{domxref("WebGLRenderingContext.createProgram", "createProgram()")}} 方法,然后调用{{domxref("WebGLRenderingContext.attachShader", "attachShader()")}}方法附加上着色器,之后你才能将它们连接到一个可用的程序。

      +

      WebGLProgramWebGL API 的一部分,它由两个{{domxref("WebGLShader")}}s(webgl 着色器)组成,分别为顶点着色器和片元着色器(两种着色器都是采用 GLSL 语言编写的)。创建一个 WebGLProgram 需要调用 GL 上下文的{{domxref("WebGLRenderingContext.createProgram", "createProgram()")}} 方法,然后调用{{domxref("WebGLRenderingContext.attachShader", "attachShader()")}}方法附加上着色器,之后你才能将它们连接到一个可用的程序。

      WebGLProgram 的创建过程请参考下面的代码:

      @@ -28,13 +28,13 @@ }
    -

    查看 {{domxref("WebGLShader")}} api 了解更多关于创建以上例子中的顶点着色器片元着色器的信息。

    +

    查看 {{domxref("WebGLShader")}} api 了解更多关于创建以上例子中的顶点着色器片元着色器的信息。

    示例

    使用着色器程序

    -

    着色器程序在使用的过程中要分为几步,包括告知 GPU 来使用这段着色器程序,绑定合适的数据缓冲区,配置相关选项,最终把图像绘制到屏幕上。

    +

    着色器程序在使用的过程中要分为几步,包括告知 GPU 来使用这段着色器程序,绑定合适的数据缓冲区,配置相关选项,最终把图像绘制到屏幕上。

    // Use the program
     gl.useProgram(program);
    diff --git a/files/zh-cn/web/api/webglquery/index.html b/files/zh-cn/web/api/webglquery/index.html
    index c07f4819f9a5fb..860781f12d66ec 100644
    --- a/files/zh-cn/web/api/webglquery/index.html
    +++ b/files/zh-cn/web/api/webglquery/index.html
    @@ -5,11 +5,11 @@
     ---
     
    {{APIRef("WebGL")}} {{SeeCompatTable}}
    -

    WebGLQuery 接口是 WebGL 2 API 的一部分,并且提供几种异步查询信息的方法。缺省情况下,遮蔽查询和图元查询是可用的。

    +

    WebGLQuery 接口是 WebGL 2 API 的一部分,并且提供几种异步查询信息的方法。缺省情况下,遮蔽查询和图元查询是可用的。

    另一种查询是分离定时器查询,它可以允许你测量 GPU 的性能和能力。仅当存在 {{domxref("EXT_disjoint_timer_query")}} 扩展时分离定时器查询才是可用的。

    -

    使用 WebGLQuery 对象时,{{domxref("WebGL2RenderingContext")}} 的下列方法是有用的:

    +

    使用 WebGLQuery 对象时,{{domxref("WebGL2RenderingContext")}} 的下列方法是有用的:

    • {{domxref("WebGL2RenderingContext.createQuery()")}}
    • @@ -23,9 +23,9 @@

      示例

      -

      创建一个 WebGLQuery 对象

      +

      创建一个 WebGLQuery 对象

      -

      在本例中,gl 必须是 {{domxref("WebGL2RenderingContext")}}. WebGLQuery 对象在 WebGL 1 中是不可用的。

      +

      在本例中,gl 必须是 {{domxref("WebGL2RenderingContext")}}. WebGLQuery 对象在 WebGL 1 中是不可用的。

      var query = gl.createQuery();
       
      diff --git a/files/zh-cn/web/api/webglrenderbuffer/index.html b/files/zh-cn/web/api/webglrenderbuffer/index.html index 41c675525a9c55..63f0606ab9ce40 100644 --- a/files/zh-cn/web/api/webglrenderbuffer/index.html +++ b/files/zh-cn/web/api/webglrenderbuffer/index.html @@ -5,11 +5,11 @@ ---
      {{APIRef("WebGL")}}
      -

      WebGLRenderbuffer 接口是 WebGL API 的一部分,它提供了一个用于保存一个图像的缓存,并且可以用于渲染操作的源或者目标。

      +

      WebGLRenderbuffer 接口是 WebGL API 的一部分,它提供了一个用于保存一个图像的缓存,并且可以用于渲染操作的源或者目标。

      摘要

      -

      WebGLRenderbuffer 对象保存的内容不能被直接访问,因此这个对象没有提供任何用于操作其自身内容的方法和属性。当需要使用 WebGLRenderbuffer 对象的功能时,需要使用 {{domxref("WebGLRenderingContext")}} 对象的以下方法:

      +

      WebGLRenderbuffer 对象保存的内容不能被直接访问,因此这个对象没有提供任何用于操作其自身内容的方法和属性。当需要使用 WebGLRenderbuffer 对象的功能时,需要使用 {{domxref("WebGLRenderingContext")}} 对象的以下方法:

      • {{domxref("WebGLRenderingContext.bindRenderbuffer()")}}
      • diff --git a/files/zh-cn/web/api/webglrenderingcontext/activetexture/index.html b/files/zh-cn/web/api/webglrenderingcontext/activetexture/index.html index c5aeaa78b7aff7..d8d5ea8aa1bf54 100644 --- a/files/zh-cn/web/api/webglrenderingcontext/activetexture/index.html +++ b/files/zh-cn/web/api/webglrenderingcontext/activetexture/index.html @@ -5,7 +5,7 @@ ---
        {{APIRef("WebGL")}}
        -

        WebGLRenderingContext.activeTexture() 是 WebGL API 方法之一,用来激活指定的纹理单元。

        +

        WebGLRenderingContext.activeTexture() WebGL API 方法之一,用来激活指定的纹理单元。

        句法

        @@ -25,7 +25,7 @@

        返回值

        异常

        -

        如果 texture 不是 gl.TEXTUREI( I 在 0 到 gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS - 1 范围内),一个 gl.INVALID_ENUM 错误将被抛出。

        +

        如果 texture 不是 gl.TEXTUREI( I 在 0 到 gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS - 1 范围内),一个 gl.INVALID_ENUM 错误将被抛出。

        示例

        @@ -34,7 +34,7 @@

        示例

        gl.activeTexture(gl.TEXTURE1);
         
        -

        纹理单元的数量视实现而定, 你可以通过访问常量 MAX_COMBINED_TEXTURE_IMAGE_UNITS 来获取这个值。按照规范来说,最少是 8 个。

        +

        纹理单元的数量视实现而定, 你可以通过访问常量 MAX_COMBINED_TEXTURE_IMAGE_UNITS 来获取这个值。按照规范来说,最少是 8 个。

        gl.getParameter(gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS);
         
        diff --git a/files/zh-cn/web/api/webglrenderingcontext/attachshader/index.html b/files/zh-cn/web/api/webglrenderingcontext/attachshader/index.html index 4473fdc7c176f7..3f40ef06927103 100644 --- a/files/zh-cn/web/api/webglrenderingcontext/attachshader/index.html +++ b/files/zh-cn/web/api/webglrenderingcontext/attachshader/index.html @@ -5,7 +5,7 @@ ---
        {{APIRef("WebGL")}}
        -

        WebGL API  的 WebGLRenderingContext.attachShader() 方法负责往 {{domxref("WebGLProgram")}} 添加一个片段或者顶点着色器。

        +

        WebGL APIWebGLRenderingContext.attachShader() 方法负责往 {{domxref("WebGLProgram")}} 添加一个片段或者顶点着色器。

        语法

        diff --git a/files/zh-cn/web/api/webglrenderingcontext/bindbuffer/index.html b/files/zh-cn/web/api/webglrenderingcontext/bindbuffer/index.html index f317232827671d..c9c8e248cb4b3c 100644 --- a/files/zh-cn/web/api/webglrenderingcontext/bindbuffer/index.html +++ b/files/zh-cn/web/api/webglrenderingcontext/bindbuffer/index.html @@ -20,7 +20,7 @@

        参数

        target
        -
         {{domxref("GLenum")}} 指定绑定点 (target)。 可能的值: +
        {{domxref("GLenum")}} 指定绑定点 (target)。 可能的值:
        • gl.ARRAY_BUFFER: 包含顶点属性的 Buffer,如顶点坐标,纹理坐标数据或顶点颜色数据。
        • gl.ELEMENT_ARRAY_BUFFER: 用于元素索引的 Buffer。
        • @@ -46,9 +46,9 @@

          返回值

          异常

          -

          只有一个目标可以绑定到给定的 {{domxref("WebGLBuffer")}} 。 尝试将缓冲区绑定到另一个目标将引发 INVALID_OPERATION 错误,并且当前的缓冲区绑定将保持不变。

          +

          只有一个目标可以绑定到给定的 {{domxref("WebGLBuffer")}} 。 尝试将缓冲区绑定到另一个目标将引发 INVALID_OPERATION 错误,并且当前的缓冲区绑定将保持不变。

          -

          一个被{{domxref("WebGLRenderingContext.deleteBuffer()", "deleteBuffer")}}标记为删除的{{domxref("WebGLBuffer")}}不可重新被绑定,尝试这样做将生成 INVALID_OPERATION 错误,并且当前绑定将保持不变。

          +

          一个被{{domxref("WebGLRenderingContext.deleteBuffer()", "deleteBuffer")}}标记为删除的{{domxref("WebGLBuffer")}}不可重新被绑定,尝试这样做将生成 INVALID_OPERATION 错误,并且当前绑定将保持不变。

          示例

          diff --git a/files/zh-cn/web/api/webglrenderingcontext/bindframebuffer/index.html b/files/zh-cn/web/api/webglrenderingcontext/bindframebuffer/index.html index 75bf76c5923798..fb84c9b1b8f0f9 100644 --- a/files/zh-cn/web/api/webglrenderingcontext/bindframebuffer/index.html +++ b/files/zh-cn/web/api/webglrenderingcontext/bindframebuffer/index.html @@ -11,7 +11,7 @@ ---
          {{APIRef("WebGL")}}
          -

          WebGL API 的 WebGLRenderingContext.bindFramebuffer() 方法将给定的 {{domxref("WebGLFramebuffer")}} 绑定到目标。

          +

          WebGL APIWebGLRenderingContext.bindFramebuffer() 方法将给定的 {{domxref("WebGLFramebuffer")}} 绑定到目标。

          语法

          @@ -78,5 +78,5 @@

          另见

        • {{domxref("WebGLRenderingContext.deleteFramebuffer()")}}
        • {{domxref("WebGLRenderingContext.isFramebuffer()")}}
        • Other buffers: {{domxref("WebGLBuffer")}}, {{domxref("WebGLRenderbuffer")}}
          -  
        • +
        diff --git a/files/zh-cn/web/api/webglrenderingcontext/bindrenderbuffer/index.html b/files/zh-cn/web/api/webglrenderingcontext/bindrenderbuffer/index.html index 17f78aa8aa3d64..a9f8610dd13805 100644 --- a/files/zh-cn/web/api/webglrenderingcontext/bindrenderbuffer/index.html +++ b/files/zh-cn/web/api/webglrenderingcontext/bindrenderbuffer/index.html @@ -11,7 +11,7 @@ ---
        {{APIRef("WebGL")}}
        -

        WebGL API 的 WebGLRenderingContext.bindRenderbuffer() 方法将给定的 {{domxref("WebGLRenderbuffer")}} 绑定到一个目标,它必须是 gl.RENDERBUFFER 。

        +

        WebGL APIWebGLRenderingContext.bindRenderbuffer() 方法将给定的 {{domxref("WebGLRenderbuffer")}} 绑定到一个目标,它必须是 gl.RENDERBUFFER 。

        语法

        diff --git a/files/zh-cn/web/api/webglrenderingcontext/bindtexture/index.html b/files/zh-cn/web/api/webglrenderingcontext/bindtexture/index.html index c43a985f40e7f7..13778ea00fbb62 100644 --- a/files/zh-cn/web/api/webglrenderingcontext/bindtexture/index.html +++ b/files/zh-cn/web/api/webglrenderingcontext/bindtexture/index.html @@ -12,7 +12,7 @@ ---
        {{APIRef("WebGL")}}
        -

        WebGL API 的 WebGLRenderingContext.bindTexture() 方法将给定的 {{domxref("WebGLTexture")}} 绑定到目标(绑定点)。

        +

        WebGL APIWebGLRenderingContext.bindTexture() 方法将给定的 {{domxref("WebGLTexture")}} 绑定到目标(绑定点)。

        语法

        @@ -36,7 +36,7 @@

        参数

      texture
      -
      要绑定的 {{domxref("WebGLTexture")}} 对象。
      +
      要绑定的 {{domxref("WebGLTexture")}} 对象。

    返回值

    diff --git a/files/zh-cn/web/api/webglrenderingcontext/blendcolor/index.html b/files/zh-cn/web/api/webglrenderingcontext/blendcolor/index.html index f626836b99440b..2626061ee2d1fd 100644 --- a/files/zh-cn/web/api/webglrenderingcontext/blendcolor/index.html +++ b/files/zh-cn/web/api/webglrenderingcontext/blendcolor/index.html @@ -41,7 +41,7 @@

    示例

    gl.blendColor(0, 0.5, 1, 1);
    -

    要获得混合颜色,请查询返回 {{jsxref("Float32Array")}} 的 BLEND_COLOR 常量。

    +

    要获得混合颜色,请查询返回 {{jsxref("Float32Array")}} 的 BLEND_COLOR 常量。

    gl.getParameter(gl.BLEND_COLOR);
     // Float32Array[0, 0.5, 1, 1]
    diff --git a/files/zh-cn/web/api/webglrenderingcontext/blendequation/index.html b/files/zh-cn/web/api/webglrenderingcontext/blendequation/index.html index e74a23948c4a88..bbac69aee1c75e 100644 --- a/files/zh-cn/web/api/webglrenderingcontext/blendequation/index.html +++ b/files/zh-cn/web/api/webglrenderingcontext/blendequation/index.html @@ -11,7 +11,7 @@ ---
    {{APIRef("WebGL")}}
    -

    WebGL API 的 WebGLRenderingContext.blendEquation() 方法用于将 RGB 混合方程和阿尔法混合方程设置为单个方程。

    +

    WebGL APIWebGLRenderingContext.blendEquation() 方法用于将 RGB 混合方程和阿尔法混合方程设置为单个方程。

    混合方程式确定新像素如何与 {{domxref("WebGLFramebuffer")}} 中的像素组合。

    diff --git a/files/zh-cn/web/api/webglrenderingcontext/blendfunc/index.html b/files/zh-cn/web/api/webglrenderingcontext/blendfunc/index.html index 97600daa96bd80..aa20e52ace0ac0 100644 --- a/files/zh-cn/web/api/webglrenderingcontext/blendfunc/index.html +++ b/files/zh-cn/web/api/webglrenderingcontext/blendfunc/index.html @@ -16,9 +16,9 @@

    参数

    sfactor
    -
     {{domxref("GLenum")}} 为源混合因子指定一个乘数。默认值是 gl.ONE. 有关可能的值,查看下面。
    +
    {{domxref("GLenum")}} 为源混合因子指定一个乘数。默认值是 gl.ONE. 有关可能的值,查看下面。
    dfactor
    -
     {{domxref("GLenum")}} 为源目标合因子指定一个乘数。默认值是 gl.ZERO. 有关可能的值,查看下面。
    +
    {{domxref("GLenum")}} 为源目标合因子指定一个乘数。默认值是 gl.ZERO. 有关可能的值,查看下面。

    返回值

    @@ -28,13 +28,13 @@

    返回值

    异常

      -
    • 如果 sfactor 或 dfactor 不是列出的可能值一直,则抛出 gl.INVALID_ENUM 错误。
    • +
    • 如果 sfactor dfactor 不是列出的可能值一直,则抛出 gl.INVALID_ENUM 错误。
    • 如果使用恒定的颜色和恒定的 alpha 值作为源和目标因子,则抛出gl.INVALID_ENUM 错误。

    常量

    -

    下列常数可用于  sfactordfactor.

    +

    下列常数可用于 sfactordfactor.

    混合颜色的公式可以这样描述: color(RGBA) = (sourceColor * sfactor) + (destinationColor * dfactor). RBGA 值在 0 到 1 之间。

    diff --git a/files/zh-cn/web/api/webglrenderingcontext/bufferdata/index.html b/files/zh-cn/web/api/webglrenderingcontext/bufferdata/index.html index ce3867e66bc8a9..2090e05442c3cb 100644 --- a/files/zh-cn/web/api/webglrenderingcontext/bufferdata/index.html +++ b/files/zh-cn/web/api/webglrenderingcontext/bufferdata/index.html @@ -11,7 +11,7 @@ ---
    {{APIRef("WebGL")}}
    -

    WebGL API 的WebGLRenderingContext.bufferData()方法创建并初始化了 Buffer 对象的数据存储区。

    +

    WebGL APIWebGLRenderingContext.bufferData()方法创建并初始化了 Buffer 对象的数据存储区。

    语法

    @@ -32,7 +32,7 @@

    参数

    • gl.ARRAY_BUFFER: 包含顶点属性的 Buffer,如顶点坐标,纹理坐标数据或顶点颜色数据。
    • gl.ELEMENT_ARRAY_BUFFER: 用于元素索引的 Buffer。
    • -
    • 当使用 {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}} 时,可以使用以下值: +
    • 当使用 {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}} 时,可以使用以下值:
      • gl.COPY_READ_BUFFER: 从一个 Buffer 对象复制到另一个 Buffer 对象。
      • gl.COPY_WRITE_BUFFER: 从一个 Buffer 对象复制到另一个 Buffer 对象。
      • @@ -47,7 +47,7 @@

        参数

        size
        {{domxref("GLsizeiptr")}} 设定 Buffer 对象的数据存储区大小。
        srcData {{optional_inline}}
        -
        一个{{jsxref("ArrayBuffer")}},{{jsxref("SharedArrayBuffer")}} 或者 {{domxref("ArrayBufferView")}} 类型的数组对象,将被复制到 Buffer 的数据存储区。 如果为null,数据存储区仍会被创建,但是不会进行初始化和定义。
        +
        一个{{jsxref("ArrayBuffer")}},{{jsxref("SharedArrayBuffer")}} 或者 {{domxref("ArrayBufferView")}} 类型的数组对象,将被复制到 Buffer 的数据存储区。 如果为null,数据存储区仍会被创建,但是不会进行初始化和定义。
        usage
        {{domxref("GLenum")}} 指定数据存储区的使用方法。可取以下值:
          @@ -86,7 +86,7 @@

          异常

          示例

          -

          使用 bufferData

          +

          使用 bufferData

          var canvas = document.getElementById('canvas');
           var gl = canvas.getContext('webgl');
          diff --git a/files/zh-cn/web/api/webglrenderingcontext/clear/index.html b/files/zh-cn/web/api/webglrenderingcontext/clear/index.html
          index 849b623a89e2d2..18bafe466c609a 100644
          --- a/files/zh-cn/web/api/webglrenderingcontext/clear/index.html
          +++ b/files/zh-cn/web/api/webglrenderingcontext/clear/index.html
          @@ -5,11 +5,11 @@
           ---
           
          {{APIRef("WebGL")}}
          -

          WebGL API 的 WebGLRenderingContext.clear() 方法使用预设值来清空缓冲。

          +

          WebGL APIWebGLRenderingContext.clear() 方法使用预设值来清空缓冲。

          -

          预设值可以使用 {{domxref("WebGLRenderingContext.clearColor", "clearColor()")}} 、 {{domxref("WebGLRenderingContext.clearDepth", "clearDepth()")}} 或 {{domxref("WebGLRenderingContext.clearStencil", "clearStencil()")}} 设置。

          +

          预设值可以使用 {{domxref("WebGLRenderingContext.clearColor", "clearColor()")}} 、 {{domxref("WebGLRenderingContext.clearDepth", "clearDepth()")}} 或 {{domxref("WebGLRenderingContext.clearStencil", "clearStencil()")}} 设置。

          -

          裁剪、抖动处理和缓冲写入遮罩会影响 clear() 方法。

          +

          裁剪、抖动处理和缓冲写入遮罩会影响 clear() 方法。

          句法

          @@ -22,16 +22,16 @@

          参数

          mask
          一个用于指定需要清除的缓冲区的 {{domxref("GLbitfield")}} 。可能的值有:
            -
          • gl.COLOR_BUFFER_BIT   //颜色缓冲区
          • -
          • gl.DEPTH_BUFFER_BIT   //深度缓冲区
          • -
          • gl.STENCIL_BUFFER_BIT  //模板缓冲区
          • +
          • gl.COLOR_BUFFER_BIT //颜色缓冲区
          • +
          • gl.DEPTH_BUFFER_BIT //深度缓冲区
          • +
          • gl.STENCIL_BUFFER_BIT //模板缓冲区

          错误抛出

          -

          如果 mask 不是以上列出的值,会抛出 gl.INVALID_ENUM 错误。

          +

          如果 mask 不是以上列出的值,会抛出 gl.INVALID_ENUM 错误。

          返回值

          @@ -45,7 +45,7 @@

          示例

          gl.clear(gl.DEPTH_BUFFER_BIT | gl.COLOR_BUFFER_BIT);
          -

          要获得当前的清除值,传入 COLOR_CLEAR_VALUEDEPTH_CLEAR_VALUESTENCIL_CLEAR_VALUE 常量。

          +

          要获得当前的清除值,传入 COLOR_CLEAR_VALUEDEPTH_CLEAR_VALUESTENCIL_CLEAR_VALUE 常量。

          gl.getParameter(gl.COLOR_CLEAR_VALUE);
           gl.getParameter(gl.DEPTH_CLEAR_VALUE);
          diff --git a/files/zh-cn/web/api/webglrenderingcontext/clearcolor/index.html b/files/zh-cn/web/api/webglrenderingcontext/clearcolor/index.html
          index f727cfa9a495d7..79e5834c3bc957 100644
          --- a/files/zh-cn/web/api/webglrenderingcontext/clearcolor/index.html
          +++ b/files/zh-cn/web/api/webglrenderingcontext/clearcolor/index.html
          @@ -5,7 +5,7 @@
           ---
           
          {{APIRef("WebGL")}}
          -

          WebGL API 的 WebGLRenderingContext.clearColor() 方法用于设置清空颜色缓冲时的颜色值。

          +

          WebGL APIWebGLRenderingContext.clearColor() 方法用于设置清空颜色缓冲时的颜色值。

          这指定调用 {{domxref("WebGLRenderingContext.clear", "clear()")}} 方法时使用的颜色值。这些值在 0 到 1 的范围间。

          @@ -36,7 +36,7 @@

          示例

          gl.clearColor(1, 0.5, 0.5, 3);
           
          -

          要获取当前的清除颜色,传入 COLOR_CLEAR_VALUE 常量,返回 {{jsxref("Float32Array")}}。

          +

          要获取当前的清除颜色,传入 COLOR_CLEAR_VALUE 常量,返回 {{jsxref("Float32Array")}}。

          gl.getParameter(gl.COLOR_CLEAR_VALUE);
           // Float32Array[1, 0.5, 0.5, 1]
          diff --git a/files/zh-cn/web/api/webglrenderingcontext/cleardepth/index.html b/files/zh-cn/web/api/webglrenderingcontext/cleardepth/index.html
          index a9ac881132799b..b35a634c796a7b 100644
          --- a/files/zh-cn/web/api/webglrenderingcontext/cleardepth/index.html
          +++ b/files/zh-cn/web/api/webglrenderingcontext/cleardepth/index.html
          @@ -8,7 +8,7 @@
           ---
           
          {{APIRef("WebGL")}}
          -

          WebGL APIWebGLRenderingContext.clearDepth() 方法用于设置深度缓冲区的深度清除值。

          +

          WebGL APIWebGLRenderingContext.clearDepth() 方法用于设置深度缓冲区的深度清除值。

          这个深度清除值的设定,是为了调用{{domxref("WebGLRenderingContext.clear", "clear()")}} 的时候使用,这个值的范围是 0 到 1。

          @@ -33,7 +33,7 @@

          样例

          gl.clearDepth(0.5);
           
          -

          若要获取当前深度清除值,查询DEPTH_CLEAR_VALUE 常量。

          +

          若要获取当前深度清除值,查询DEPTH_CLEAR_VALUE 常量。

          gl.getParameter(gl.DEPTH_CLEAR_VALUE);
           // 0.5
          diff --git a/files/zh-cn/web/api/webglrenderingcontext/commit/index.html b/files/zh-cn/web/api/webglrenderingcontext/commit/index.html index 2519f6ce6b373e..b73800b0698193 100644 --- a/files/zh-cn/web/api/webglrenderingcontext/commit/index.html +++ b/files/zh-cn/web/api/webglrenderingcontext/commit/index.html @@ -25,7 +25,7 @@

          实例

          规范

          -

          目前在 OffscreenCanvas 规范中作为草案。

          +

          目前在 OffscreenCanvas 规范中作为草案。

          浏览器兼容性

          diff --git a/files/zh-cn/web/api/webglrenderingcontext/compileshader/index.html b/files/zh-cn/web/api/webglrenderingcontext/compileshader/index.html index bf4060980bbdb4..8a6ff30e1b2998 100644 --- a/files/zh-cn/web/api/webglrenderingcontext/compileshader/index.html +++ b/files/zh-cn/web/api/webglrenderingcontext/compileshader/index.html @@ -5,7 +5,7 @@ ---
          {{APIRef("WebGL")}}
          -
          WebGL API下的方法 WebGLRenderingContext.compileShader() 用于编译一个 GLSL 着色器,使其成为为二进制数据,然后就可以被{{domxref("WebGLProgram")}}对象所使用。
          +
          WebGL API下的方法 WebGLRenderingContext.compileShader() 用于编译一个 GLSL 着色器,使其成为为二进制数据,然后就可以被{{domxref("WebGLProgram")}}对象所使用。

          语法

          @@ -16,7 +16,7 @@

          参数

          shader
          -
          一个片元或顶点着色器 ({{domxref("WebGLShader")}}).
          +
          一个片元或顶点着色器 ({{domxref("WebGLShader")}}).

          示例

          diff --git a/files/zh-cn/web/api/webglrenderingcontext/compressedteximage2d/index.html b/files/zh-cn/web/api/webglrenderingcontext/compressedteximage2d/index.html index d79e4285c38173..166f2085d6489f 100644 --- a/files/zh-cn/web/api/webglrenderingcontext/compressedteximage2d/index.html +++ b/files/zh-cn/web/api/webglrenderingcontext/compressedteximage2d/index.html @@ -7,7 +7,7 @@

          下面这两个 function:

          -

          WebGLRenderingContext.compressedTexImage2D()  and WebGL2RenderingContext.compressedTexImage3D()WebGL API 中特指压缩二维或三维纹理图像的格式。

          +

          WebGLRenderingContext.compressedTexImage2D() and WebGL2RenderingContext.compressedTexImage3D()WebGL API 中特指压缩二维或三维纹理图像的格式。

          在使用这些方法之前,必须通过 WebGL extensions, 也就是 WebGL 扩展启用压缩图像格式。

          diff --git a/files/zh-cn/web/api/webglrenderingcontext/createframebuffer/index.html b/files/zh-cn/web/api/webglrenderingcontext/createframebuffer/index.html index 5705fc070f8934..3a19924e12d2e3 100644 --- a/files/zh-cn/web/api/webglrenderingcontext/createframebuffer/index.html +++ b/files/zh-cn/web/api/webglrenderingcontext/createframebuffer/index.html @@ -5,7 +5,7 @@ ---
          {{APIRef("WebGL")}}
          -
          WebGLRenderingContext.creatFramebuffer()  是 WebGL API  的一个方法,用来创建和初始化{{domxref("WebGLFramebuffer")}} 对象。
          +
          WebGLRenderingContext.creatFramebuffer()WebGL API 的一个方法,用来创建和初始化{{domxref("WebGLFramebuffer")}} 对象。

          语法

          diff --git a/files/zh-cn/web/api/webglrenderingcontext/createprogram/index.html b/files/zh-cn/web/api/webglrenderingcontext/createprogram/index.html index 193c9f0b4e8d4b..3b8374e3c4424d 100644 --- a/files/zh-cn/web/api/webglrenderingcontext/createprogram/index.html +++ b/files/zh-cn/web/api/webglrenderingcontext/createprogram/index.html @@ -5,7 +5,7 @@ ---
          {{APIRef("WebGL")}}
          -

          WebGL API  的 WebGLRenderingContext.createProgram() 方法用于创建和初始化一个 {{domxref("WebGLProgram")}} 对象。

          +

          WebGL APIWebGLRenderingContext.createProgram() 方法用于创建和初始化一个 {{domxref("WebGLProgram")}} 对象。

          语法

          @@ -18,7 +18,7 @@

          参数

          返回值

          -

          一个 {{domxref("WebGLProgram")}} 对象由两个编译过后的 {{domxref("WebGLShader")}} 组成 - 顶点着色器和片段着色器(均由 GLSL 语言所写)。这些组合成一个可用的 WebGL 着色器程序。

          +

          一个 {{domxref("WebGLProgram")}} 对象由两个编译过后的 {{domxref("WebGLShader")}} 组成 - 顶点着色器和片段着色器(均由 GLSL 语言所写)。这些组合成一个可用的 WebGL 着色器程序。

          例子

          diff --git a/files/zh-cn/web/api/webglrenderingcontext/createrenderbuffer/index.html b/files/zh-cn/web/api/webglrenderingcontext/createrenderbuffer/index.html index c06713135e0d64..5d5621decb8db1 100644 --- a/files/zh-cn/web/api/webglrenderingcontext/createrenderbuffer/index.html +++ b/files/zh-cn/web/api/webglrenderingcontext/createrenderbuffer/index.html @@ -5,7 +5,7 @@ ---
          {{APIRef("WebGL")}}
          -

          WebGL APIWebGLRenderingContext.createRenderbuffer() 方法 创建并初始化一个 {{domxref("WebGLRenderbuffer")}} 对象。

          +

          WebGL APIWebGLRenderingContext.createRenderbuffer() 方法 创建并初始化一个 {{domxref("WebGLRenderbuffer")}} 对象。

          语法

          diff --git a/files/zh-cn/web/api/webglrenderingcontext/createshader/index.html b/files/zh-cn/web/api/webglrenderingcontext/createshader/index.html index b7b378541a90aa..c35cd2ade3aa39 100644 --- a/files/zh-cn/web/api/webglrenderingcontext/createshader/index.html +++ b/files/zh-cn/web/api/webglrenderingcontext/createshader/index.html @@ -10,7 +10,7 @@ ---
          {{APIRef("WebGL")}}
          -

          WebGLRenderingContext.createShader() 用于创建一个 {{domxref("WebGLShader")}} 着色器对象,该对象可以使用 {{domxref("WebGLRenderingContext.shaderSource()")}} 和 {{domxref("WebGLRenderingContext.compileShader()")}} 方法配置着色器代码。

          +

          WebGLRenderingContext.createShader() 用于创建一个 {{domxref("WebGLShader")}} 着色器对象,该对象可以使用 {{domxref("WebGLRenderingContext.shaderSource()")}} 和 {{domxref("WebGLRenderingContext.compileShader()")}} 方法配置着色器代码。

          语法

          @@ -21,7 +21,7 @@

          参数

          type
          -
          参数为gl.VERTEX_SHADER 或 gl.FRAGMENT_SHADER两者中的一个。
          +
          参数为gl.VERTEX_SHADERgl.FRAGMENT_SHADER两者中的一个。

          示例

          diff --git a/files/zh-cn/web/api/webglrenderingcontext/createtexture/index.html b/files/zh-cn/web/api/webglrenderingcontext/createtexture/index.html index 0f4f73f445fdad..dccabf73932f75 100644 --- a/files/zh-cn/web/api/webglrenderingcontext/createtexture/index.html +++ b/files/zh-cn/web/api/webglrenderingcontext/createtexture/index.html @@ -5,7 +5,7 @@ ---
          {{APIRef("WebGL")}}
          -

          WebGL APIWebGLRenderingContext.createTexture() 方法创建并初始化了一个{{domxref("WebGLTexture")}} 目标。

          +

          WebGL APIWebGLRenderingContext.createTexture() 方法创建并初始化了一个{{domxref("WebGLTexture")}} 目标。

          语法

          @@ -22,7 +22,7 @@

          返回值

          示例

          -

          另见 Using textures in WebGL上的WebGL tutorial

          +

          另见 Using textures in WebGL上的WebGL tutorial

          创建一个纹理

          diff --git a/files/zh-cn/web/api/webglrenderingcontext/cullface/index.html b/files/zh-cn/web/api/webglrenderingcontext/cullface/index.html index 1f80e41a773851..2797f98ac87d7f 100644 --- a/files/zh-cn/web/api/webglrenderingcontext/cullface/index.html +++ b/files/zh-cn/web/api/webglrenderingcontext/cullface/index.html @@ -5,7 +5,7 @@ ---
          {{APIRef("WebGL")}}
          -

          WebGL API 的 WebGLRenderingContext.cullFace() 指定正面和/或背面多边形是否可以剔除。

          +

          WebGL APIWebGLRenderingContext.cullFace() 指定正面和/或背面多边形是否可以剔除。

          语法

          @@ -16,7 +16,7 @@

          参数

          mode
          -
          {{domxref("GLenum")}} 指定适合进行剔除的面是正面还是背面。默认值是 gl.BACK. 可能的值有: +
          {{domxref("GLenum")}} 指定适合进行剔除的面是正面还是背面。默认值是 gl.BACK. 可能的值有:
          • gl.FRONT
          • gl.BACK
          • @@ -31,13 +31,13 @@

            返回值

            示例

            -

            多边形剔除功能默认不开启。 想要开启这个功能,使用{{domxref("WebGLRenderingContext.enable", "enable()")}} 和 {{domxref("WebGLRenderingContext.disable", "disable()")}} 方法,传入参数gl.CULL_FACE.

            +

            多边形剔除功能默认不开启。 想要开启这个功能,使用{{domxref("WebGLRenderingContext.enable", "enable()")}} 和 {{domxref("WebGLRenderingContext.disable", "disable()")}} 方法,传入参数gl.CULL_FACE.

            gl.enable(gl.CULL_FACE);
             gl.cullFace(gl.FRONT_AND_BACK);
             
            -

            需要 CULL_FACE_MODE 常量来检查当前多边形剔除模式。

            +

            需要 CULL_FACE_MODE 常量来检查当前多边形剔除模式。

            gl.getParameter(gl.CULL_FACE_MODE) === gl.FRONT_AND_BACK;
             // true
            diff --git a/files/zh-cn/web/api/webglrenderingcontext/deletebuffer/index.html b/files/zh-cn/web/api/webglrenderingcontext/deletebuffer/index.html
            index c00e7235a10ef5..ee54c632f360a8 100644
            --- a/files/zh-cn/web/api/webglrenderingcontext/deletebuffer/index.html
            +++ b/files/zh-cn/web/api/webglrenderingcontext/deletebuffer/index.html
            @@ -7,7 +7,7 @@
             
             
            WebGL APIWebGLRenderingContext.deleteBuffer()用于删除给定的{{domxref("WebGLBuffer")}}对象;若给定的{{domxref("WebGLBuffer")}}对象已经被删除了,调用该方法将不会产生任何效果。
            -

             

            +

            语法

            diff --git a/files/zh-cn/web/api/webglrenderingcontext/deleteframebuffer/index.html b/files/zh-cn/web/api/webglrenderingcontext/deleteframebuffer/index.html index 10c2129627cc64..7f65c751d5a6cb 100644 --- a/files/zh-cn/web/api/webglrenderingcontext/deleteframebuffer/index.html +++ b/files/zh-cn/web/api/webglrenderingcontext/deleteframebuffer/index.html @@ -16,7 +16,7 @@

            参数

            framebuffer
            -
             将要删除的{{domxref("WebGLFramebuffer")}} 对象。
            +
            将要删除的{{domxref("WebGLFramebuffer")}} 对象。

            返回值

            diff --git a/files/zh-cn/web/api/webglrenderingcontext/deleteprogram/index.html b/files/zh-cn/web/api/webglrenderingcontext/deleteprogram/index.html index 5122ac3b30be04..78c9a09a4075ee 100644 --- a/files/zh-cn/web/api/webglrenderingcontext/deleteprogram/index.html +++ b/files/zh-cn/web/api/webglrenderingcontext/deleteprogram/index.html @@ -5,7 +5,7 @@ ---
            {{APIRef("WebGL")}}
            -

            WebGLRenderingContext.deleteProgram() 用于删除一个 {{domxref("WebGLProgram")}} 对象。如果该{{domxref("WebGLProgram")}} 对象已经被删除,该方法不会产生任何作用

            +

            WebGLRenderingContext.deleteProgram() 用于删除一个 {{domxref("WebGLProgram")}} 对象。如果该{{domxref("WebGLProgram")}} 对象已经被删除,该方法不会产生任何作用

            语法

            diff --git a/files/zh-cn/web/api/webglrenderingcontext/deleteshader/index.html b/files/zh-cn/web/api/webglrenderingcontext/deleteshader/index.html index fb04c423613d9a..88950577914d33 100644 --- a/files/zh-cn/web/api/webglrenderingcontext/deleteshader/index.html +++ b/files/zh-cn/web/api/webglrenderingcontext/deleteshader/index.html @@ -3,9 +3,9 @@ slug: Web/API/WebGLRenderingContext/deleteShader translation_of: Web/API/WebGLRenderingContext/deleteShader --- -
            {{APIRef("WebGL")}} 
            +
            {{APIRef("WebGL")}}
            -
            WebGLRenderingContext.deleteShader() 用于删除一个参数提供的 {{domxref("WebGLShader")}}对象。如果该{{domxref("WebGLShader")}}对象已经被删除,该方法不会有任何作用。
            +
            WebGLRenderingContext.deleteShader() 用于删除一个参数提供的 {{domxref("WebGLShader")}}对象。如果该{{domxref("WebGLShader")}}对象已经被删除,该方法不会有任何作用。

            Syntax

            diff --git a/files/zh-cn/web/api/webglrenderingcontext/depthfunc/index.html b/files/zh-cn/web/api/webglrenderingcontext/depthfunc/index.html index d5ff0d2da77fd0..0ce84cafa45275 100644 --- a/files/zh-cn/web/api/webglrenderingcontext/depthfunc/index.html +++ b/files/zh-cn/web/api/webglrenderingcontext/depthfunc/index.html @@ -5,7 +5,7 @@ ---
            {{APIRef("WebGL")}}
            -

            WebGL API 的 WebGLRenderingContext.depthFunc() 方法,指定将输入像素深度与当前深度缓冲区值进行比较的函数。

            +

            WebGL APIWebGLRenderingContext.depthFunc() 方法,指定将输入像素深度与当前深度缓冲区值进行比较的函数。

            语法

            @@ -16,7 +16,7 @@

            参数

            func
            -
            是一个指定深度比较函数的 {{domxref("GLenum")}},它设置像素将被绘制的条件。默认值是 gl.LESS。可能的值是: +
            是一个指定深度比较函数的 {{domxref("GLenum")}},它设置像素将被绘制的条件。默认值是 gl.LESS。可能的值是:
            • gl.NEVER(永不通过)
            • gl.LESS(如果传入值小于深度缓冲值,则通过)
            • @@ -36,7 +36,7 @@

              返回值

              示例

              -

              深度测试默认是禁用的。 要启用或禁用深度测试,请使用带有参数  gl.DEPTH_TEST 的 {{domxref("WebGLRenderingContext.enable", "enable()")}} 和 {{domxref("WebGLRenderingContext.disable", "disable()")}} 方法。

              +

              深度测试默认是禁用的。 要启用或禁用深度测试,请使用带有参数 gl.DEPTH_TEST 的 {{domxref("WebGLRenderingContext.enable", "enable()")}} 和 {{domxref("WebGLRenderingContext.disable", "disable()")}} 方法。

              gl.enable(gl.DEPTH_TEST);
               gl.depthFunc(gl.NEVER);
              diff --git a/files/zh-cn/web/api/webglrenderingcontext/depthmask/index.html b/files/zh-cn/web/api/webglrenderingcontext/depthmask/index.html
              index 930a62e7101e62..3edaed7b3b7b5b 100644
              --- a/files/zh-cn/web/api/webglrenderingcontext/depthmask/index.html
              +++ b/files/zh-cn/web/api/webglrenderingcontext/depthmask/index.html
              @@ -5,7 +5,7 @@
               ---
               
              {{APIRef("WebGL")}}
              -

              WebGL APIWebGLRenderingContext.depthMask() 方法设置是否启用写入深度缓冲。

              +

              WebGL APIWebGLRenderingContext.depthMask() 方法设置是否启用写入深度缓冲。

              语法

              @@ -28,7 +28,7 @@

              例子

              gl.depthMask(false);
               
              -

              要获得当前的深度遮罩值,传入 DEPTH_WRITEMASK 常量,返回  {{jsxref("Boolean")}}.

              +

              要获得当前的深度遮罩值,传入 DEPTH_WRITEMASK 常量,返回 {{jsxref("Boolean")}}.

              gl.getParameter(gl.DEPTH_WRITEMASK);
               // false
              diff --git a/files/zh-cn/web/api/webglrenderingcontext/detachshader/index.html b/files/zh-cn/web/api/webglrenderingcontext/detachshader/index.html
              index a93091e65498b4..c99c93c76449b3 100644
              --- a/files/zh-cn/web/api/webglrenderingcontext/detachshader/index.html
              +++ b/files/zh-cn/web/api/webglrenderingcontext/detachshader/index.html
              @@ -5,7 +5,7 @@
               ---
               
              {{APIRef("WebGL")}}
              -

              WebGL API 的WebGLRenderingContext.detachShader()  方法:从一个 {{domxref("WebGLProgram")}}中分离一个先前附加的片段或者顶点着色器({{domxref("WebGLShader")}} ).

              +

              WebGL APIWebGLRenderingContext.detachShader() 方法:从一个 {{domxref("WebGLProgram")}}中分离一个先前附加的片段或者顶点着色器({{domxref("WebGLShader")}} ).

              Syntax

              @@ -16,7 +16,7 @@

              Parameters

              program
              -
              一个 {{domxref("WebGLProgram")}} 对象。
              +
              一个 {{domxref("WebGLProgram")}} 对象。
              shader
              一个顶点或者片元着色器 {{domxref("WebGLShader")}}.
              @@ -30,26 +30,26 @@

              例子

              使用 detachShader 方法分离一个顶点或片元着色器

              //顶点着色器
              -    var vertexShader = gl.createShader(gl.VERTEX_SHADER);
              -    gl.shaderSource(vertexShader, vertexSrc);
              -    gl.compileShader(vertexShader);
              -    //片元着色器
              -    var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);//创建 WebGLShader。
              -    gl.shaderSource(fragmentShader, fragmentSrc); //fragmentSrc 设置一个 WebGLShader 的源码。
              -    gl.compileShader(fragmentShader);
              -
              -    //WebGLProgram
              -    var program = gl.createProgram();//创建 WebGLProgram
              -    gl.attachShader(program, vertexShader); //往 WebGLProgram 添加一个片段或者顶点着色器。
              -    gl.attachShader(program, fragmentShader);
              -    gl.linkProgram(program);//链接给入的 WebGLProgram 对象
              -    gl.detachShader(program, vertexShader); //从一个 WebGLProgram 中分离一个先前附加的片段或者顶点着色器;
              -    gl.detachShader(program, fragmentShader);
              -    gl.deleteShader(vertexShader);
              -    gl.deleteShader(fragmentShader);
              +    var vertexShader = gl.createShader(gl.VERTEX_SHADER);
              +    gl.shaderSource(vertexShader, vertexSrc);
              +    gl.compileShader(vertexShader);
              +    //片元着色器
              +    var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);//创建 WebGLShader。
              +    gl.shaderSource(fragmentShader, fragmentSrc); //fragmentSrc 设置一个 WebGLShader 的源码。
              +    gl.compileShader(fragmentShader);
              +
              +    //WebGLProgram
              +    var program = gl.createProgram();//创建 WebGLProgram
              +    gl.attachShader(program, vertexShader); //往 WebGLProgram 添加一个片段或者顶点着色器。
              +    gl.attachShader(program, fragmentShader);
              +    gl.linkProgram(program);//链接给入的 WebGLProgram 对象
              +    gl.detachShader(program, vertexShader); //从一个 WebGLProgram 中分离一个先前附加的片段或者顶点着色器;
              +    gl.detachShader(program, fragmentShader);
              +    gl.deleteShader(vertexShader);
              +    gl.deleteShader(fragmentShader);
               
              -

               

              +

              Browser compatibility

              diff --git a/files/zh-cn/web/api/webglrenderingcontext/drawarrays/index.html b/files/zh-cn/web/api/webglrenderingcontext/drawarrays/index.html index 6865f5e6461dde..802ab4de521bc2 100644 --- a/files/zh-cn/web/api/webglrenderingcontext/drawarrays/index.html +++ b/files/zh-cn/web/api/webglrenderingcontext/drawarrays/index.html @@ -7,7 +7,7 @@ ---
              {{APIRef("WebGL")}}
              -

               WebGL API 中的WebGLRenderingContext.drawArrays()方法用于从向量数组中绘制图元。

              +

              WebGL API 中的WebGLRenderingContext.drawArrays()方法用于从向量数组中绘制图元。

              语法

              @@ -42,9 +42,9 @@

              返回值

              异常

                -
              • 如果 mode 不是一个可接受值,将会抛出 gl.INVALID_ENUM 异常。
              • -
              • 如果 first 或者 count 是负值,会抛出 gl.INVALID_VALUE 异常。
              • -
              • 如果 gl.CURRENT_PROGRAM 为 {{jsxref("null")}},会抛出 gl.INVALID_OPERATION 异常。
              • +
              • 如果 mode 不是一个可接受值,将会抛出 gl.INVALID_ENUM 异常。
              • +
              • 如果 first 或者 count 是负值,会抛出 gl.INVALID_VALUE 异常。
              • +
              • 如果 gl.CURRENT_PROGRAM 为 {{jsxref("null")}},会抛出 gl.INVALID_OPERATION 异常。

              示例

              diff --git a/files/zh-cn/web/api/webglrenderingcontext/drawelements/index.html b/files/zh-cn/web/api/webglrenderingcontext/drawelements/index.html index 42e98798443ebe..e79e0bd306da69 100644 --- a/files/zh-cn/web/api/webglrenderingcontext/drawelements/index.html +++ b/files/zh-cn/web/api/webglrenderingcontext/drawelements/index.html @@ -10,7 +10,7 @@ ---
              {{APIRef("WebGL")}}
              -

              该 WebGLRenderingContext.drawElements() 方法 在 WebGL API 从数组数据渲染图元。

              +

              WebGLRenderingContext.drawElements() 方法 在 WebGL API 从数组数据渲染图元。

              语法

              @@ -47,7 +47,7 @@

              参数

            offset
            -
             {{domxref("字节单位")}} 指定元素数组缓冲区中的偏移量。必须是给定类型大小的有效倍数。
            +
            {{domxref("字节单位")}} 指定元素数组缓冲区中的偏移量。必须是给定类型大小的有效倍数。

            返回值

            @@ -57,9 +57,9 @@

            返回值

            异常

              -
            • 如果 mode 不是正确值, gl.INVALID_ENUM 将会抛出错误异常。
            • +
            • 如果 mode 不是正确值, gl.INVALID_ENUM 将会抛出错误异常。
            • 如果offset 不是给定类型大小的有效倍数,gl.INVALID_OPERATION 将会抛出错误异常。
            • -
            • 如果 count 是负的, gl.INVALID_VALUE 将会抛出错误异常。
            • +
            • 如果 count 是负的, gl.INVALID_VALUE 将会抛出错误异常。

            例子

            diff --git a/files/zh-cn/web/api/webglrenderingcontext/drawingbufferwidth/index.html b/files/zh-cn/web/api/webglrenderingcontext/drawingbufferwidth/index.html index 087d9925e1238e..f35c98ecd308e5 100644 --- a/files/zh-cn/web/api/webglrenderingcontext/drawingbufferwidth/index.html +++ b/files/zh-cn/web/api/webglrenderingcontext/drawingbufferwidth/index.html @@ -12,7 +12,7 @@ ---
            {{APIRef("WebGL")}}
            -

            WebGLRenderingContext.drawingBufferWidth 只读属性, 指示当前绘图缓冲区的实际宽度。它应当匹配与绘图上下文相关联的 {{HTMLElement("canvas")}} 元素的宽度属性。如果实现未能提供所要求的宽度,值将有所不同。

            +

            WebGLRenderingContext.drawingBufferWidth 只读属性, 指示当前绘图缓冲区的实际宽度。它应当匹配与绘图上下文相关联的 {{HTMLElement("canvas")}} 元素的宽度属性。如果实现未能提供所要求的宽度,值将有所不同。

            语法

            diff --git a/files/zh-cn/web/api/webglrenderingcontext/enable/index.html b/files/zh-cn/web/api/webglrenderingcontext/enable/index.html index 48d473ee93a31e..c0f02f2728457f 100644 --- a/files/zh-cn/web/api/webglrenderingcontext/enable/index.html +++ b/files/zh-cn/web/api/webglrenderingcontext/enable/index.html @@ -7,7 +7,7 @@ ---
            {{APIRef("WebGL")}}
            -

            WebGL API 中的WebGLRenderingContext.enable() 方法,用于对该上下文开启某种特性。

            +

            WebGL API 中的WebGLRenderingContext.enable() 方法,用于对该上下文开启某种特性。

            语法

            @@ -42,7 +42,7 @@

            语法

    diff --git a/files/zh-cn/web/api/webglrenderingcontext/enablevertexattribarray/index.html b/files/zh-cn/web/api/webglrenderingcontext/enablevertexattribarray/index.html index 72e44e7ac7ba4e..bdb7798dadee25 100644 --- a/files/zh-cn/web/api/webglrenderingcontext/enablevertexattribarray/index.html +++ b/files/zh-cn/web/api/webglrenderingcontext/enablevertexattribarray/index.html @@ -5,15 +5,15 @@ ---
    {{APIRef("WebGL")}}
    -

    WebGL API中,使用 {{domxref("WebGLRenderingContext")}} 中的enableVertexAttribArray() 方法,可以打开属性数组列表中指定索引处的通用顶点属性数组。

    +

    WebGL API中,使用 {{domxref("WebGLRenderingContext")}} 中的enableVertexAttribArray() 方法,可以打开属性数组列表中指定索引处的通用顶点属性数组。

    -

    你可以通过以下方法关闭顶点属性数组 {{domxref("WebGLRenderingContext.disableVertexAttribArray", "disableVertexAttribArray()")}}.

    +

    你可以通过以下方法关闭顶点属性数组 {{domxref("WebGLRenderingContext.disableVertexAttribArray", "disableVertexAttribArray()")}}.

    在 WebGL 中,作用于顶点的数据会先储存在attributes。这些数据仅对 JavaScript 代码和顶点着色器可用。属性由索引号引用到 GPU 维护的属性列表中。在不同的平台或 GPU 上,某些顶点属性索引可能具有预定义的值。创建属性时,WebGL 层会分配其他属性。

    -

    无论怎样,都需要你使用enableVertexAttribArray()方法,来激活每一个属性以便使用,不被激活的属性是不会被使用的。一旦激活,以下其他方法就可以获取到属性的值了,包括{{domxref("WebGLRenderingContext.vertexAttribPointer", "vertexAttribPointer()")}},{{domxref("WebGLRenderingContext.vertexAttrib", "vertexAttrib*()")}},和 {{domxref("WebGLRenderingContext.getVertexAttrib", "getVertexAttrib()")}}。

    +

    无论怎样,都需要你使用enableVertexAttribArray()方法,来激活每一个属性以便使用,不被激活的属性是不会被使用的。一旦激活,以下其他方法就可以获取到属性的值了,包括{{domxref("WebGLRenderingContext.vertexAttribPointer", "vertexAttribPointer()")}},{{domxref("WebGLRenderingContext.vertexAttrib", "vertexAttrib*()")}},和 {{domxref("WebGLRenderingContext.getVertexAttrib", "getVertexAttrib()")}}。

    语法

    @@ -38,12 +38,12 @@

    错误

    WebGLRenderingContext.INVALID_VALUE
    -
    非法的 index 。一般是 index 大于或等于了顶点属性列表允许的最大值。该值可以通过 WebGLRenderingContext.MAX_VERTEX_ATTRIBS获取。
    +
    非法的 index 。一般是 index 大于或等于了顶点属性列表允许的最大值。该值可以通过 WebGLRenderingContext.MAX_VERTEX_ATTRIBS获取。

    例子

    -

    该例子是 A basic 2D WebGL animation example 中的一部分,用以说明 enableVertexArray() 是如何激活顶点属性,并将顶点数据传输到 shader 函数的。

    +

    该例子是 A basic 2D WebGL animation example 中的一部分,用以说明 enableVertexArray() 是如何激活顶点属性,并将顶点数据传输到 shader 函数的。

    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
     
    @@ -56,11 +56,11 @@ 

    例子

    gl.drawArrays(gl.TRIANGLES, 0, vertexCount);
    -
    该段代码来自于 "A basic 2D WebGL animation example." 中的 the function animateScene() 。 通过连接来查看全文,您可以查看产生的动画效果。
    +
    该段代码来自于 "A basic 2D WebGL animation example." 中的 the function animateScene() 。 通过连接来查看全文,您可以查看产生的动画效果。

    以上代码中,使用了{{domxref("WebGLRenderingContext.bindBuffer", "bindBuffer()")}}来设置将用于绘图的顶点数据的缓存。然后使用{{domxref("WebGLRenderingContext.getAttribLocation", "getAttribLocation()")}}来获取顶点数据在 shader 函数中的索引。

    -

    我们用 enableVertexAttribArray() 函数来激活 aVertexPosition中记录的索引位置,以便在后面对该顶点属性进行数据绑定。

    +

    我们用 enableVertexAttribArray() 函数来激活 aVertexPosition中记录的索引位置,以便在后面对该顶点属性进行数据绑定。

    使用{{domxref("WebGLRenderingContext.vertexAttribPointer", "vertexAttribPointer()")}} 将缓存数据绑定到 shader 函数中的顶点属性。于是,我们可以通过{{domxref("WebGLRenderingContext.drawArrays", "drawArrays()")}}函数将顶点一一绘制。

    diff --git a/files/zh-cn/web/api/webglrenderingcontext/getattriblocation/index.html b/files/zh-cn/web/api/webglrenderingcontext/getattriblocation/index.html index c36abd9b0e463e..01279ad1c83783 100644 --- a/files/zh-cn/web/api/webglrenderingcontext/getattriblocation/index.html +++ b/files/zh-cn/web/api/webglrenderingcontext/getattriblocation/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef("WebGL")}}
    -

    WebGLRenderingContext.getAttribLocation() 方法返回了给定{{domxref("WebGLProgram")}}对象中某属性的下标指向位置。

    +

    WebGLRenderingContext.getAttribLocation() 方法返回了给定{{domxref("WebGLProgram")}}对象中某属性的下标指向位置。

    语法

    @@ -18,12 +18,12 @@

    参数

    program
    一个包含了属性参数的{{domxref("WebGLProgram")}} 对象。
    name
    -
    需要获取下标指向位置的 {{domxref("DOMString")}} 属性参数名
    +
    需要获取下标指向位置的 {{domxref("DOMString")}} 属性参数名

    返回值

    -

    表明属性位置的下标 {{domxref("GLint")}} 数字,如果找不到该属性则返回-1。

    +

    表明属性位置的下标 {{domxref("GLint")}} 数字,如果找不到该属性则返回-1。

    示例

    diff --git a/files/zh-cn/web/api/webglrenderingcontext/getcontextattributes/index.html b/files/zh-cn/web/api/webglrenderingcontext/getcontextattributes/index.html index 7ed095d805df9a..b73481a89c0dd4 100644 --- a/files/zh-cn/web/api/webglrenderingcontext/getcontextattributes/index.html +++ b/files/zh-cn/web/api/webglrenderingcontext/getcontextattributes/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef("WebGL")}}
    -

    WebGLRenderingContext.getContextAttributes() 方法返回一个包含实际上下文参数的 WebGLContextAttributes 对象。如果上下文丢失,可能返回 {{jsxref("null")}}。

    +

    WebGLRenderingContext.getContextAttributes() 方法返回一个包含实际上下文参数的 WebGLContextAttributes 对象。如果上下文丢失,可能返回 {{jsxref("null")}}。

    语法

    @@ -13,7 +13,7 @@

    语法

    返回值

    -

    一个包含实际上下文参数的 WebGLContextAttributes 的对象,或 {{jsxref("null")}}(如果上下文丢失)。

    +

    一个包含实际上下文参数的 WebGLContextAttributes 的对象,或 {{jsxref("null")}}(如果上下文丢失)。

    实例

    diff --git a/files/zh-cn/web/api/webglrenderingcontext/getextension/index.html b/files/zh-cn/web/api/webglrenderingcontext/getextension/index.html index f43d54c6192ff9..b45a523a8e47bb 100644 --- a/files/zh-cn/web/api/webglrenderingcontext/getextension/index.html +++ b/files/zh-cn/web/api/webglrenderingcontext/getextension/index.html @@ -11,7 +11,7 @@ ---
    {{APIRef("WebGL")}}
    -

    WebGLRenderingContext.getExtension() 方法可以启用一个 WebGL 扩展。

    +

    WebGLRenderingContext.getExtension() 方法可以启用一个 WebGL 扩展。

    语法

    @@ -21,7 +21,7 @@

    参数

    name
    -
    以 {{jsxref("String")}} 形式表示的需要启用的 WebGL 扩展的名称。
    +
    以 {{jsxref("String")}} 形式表示的需要启用的 WebGL 扩展的名称。

    返回值

    @@ -40,7 +40,7 @@

    示例

    WebGL 扩展

    -

    WebGL API 的扩展在 WebGL Extension Registry 定义。目前支持的扩展在这里列出

    +

    WebGL API 的扩展在 WebGL Extension Registry 定义。目前支持的扩展在这里列出

    规范

    diff --git a/files/zh-cn/web/api/webglrenderingcontext/getparameter/index.html b/files/zh-cn/web/api/webglrenderingcontext/getparameter/index.html index 24420eb636d7f2..35df8e7810fae5 100644 --- a/files/zh-cn/web/api/webglrenderingcontext/getparameter/index.html +++ b/files/zh-cn/web/api/webglrenderingcontext/getparameter/index.html @@ -7,7 +7,7 @@ ---
    {{APIRef("WebGL")}}
    -

    WebGL APIWebGLRenderingContext.getParameter() 方法为传入的参数名称返回一个值。

    +

    WebGL APIWebGLRenderingContext.getParameter() 方法为传入的参数名称返回一个值。

    语法

    @@ -29,7 +29,7 @@

    参数名称

    WebGL 1

    -

    使用 {{domxref("WebGLRenderingContext")}} 时,您可以查询以下 pname 参数。

    +

    使用 {{domxref("WebGLRenderingContext")}} 时,您可以查询以下 pname 参数。

    gl.DITHER -

     

    +

    激活在写入颜色缓冲区之前,抖动颜色成分。

    @@ -43,87 +43,87 @@

    WebGL 1

    - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + @@ -217,352 +217,352 @@

    WebGL 1

    - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - +
    gl.ACTIVE_TEXTURE {{domxref("GLenum")}} 
    gl.ALIASED_LINE_WIDTH_RANGE {{jsxref("Float32Array")}} (with 2 elements) 
    gl.ALIASED_POINT_SIZE_RANGE {{jsxref("Float32Array")}} (with 2 elements) 
    gl.ALPHA_BITS {{domxref("GLint")}} 
    gl.ARRAY_BUFFER_BINDING {{domxref("WebGLBuffer")}} 
    gl.BLEND {{domxref("GLboolean")}} 
    gl.BLEND_COLOR {{jsxref("Float32Array")}} (with 4 values) 
    gl.BLEND_DST_ALPHA {{domxref("GLenum")}} 
    gl.BLEND_DST_RGB {{domxref("GLenum")}} 
    gl.BLEND_EQUATION {{domxref("GLenum")}} 
    gl.BLEND_EQUATION_ALPHA {{domxref("GLenum")}} 
    gl.BLEND_EQUATION_RGB {{domxref("GLenum")}} 
    gl.BLEND_SRC_ALPHA {{domxref("GLenum")}} 
    gl.BLEND_SRC_RGB {{domxref("GLenum")}} 
    gl.BLUE_BITS {{domxref("GLint")}} 
    gl.COLOR_CLEAR_VALUE {{jsxref("Float32Array")}} (with 4 values) 
    gl.COLOR_WRITEMASK sequence<{{domxref("GLboolean")}}> (with 4 values) 
    gl.COMPRESSED_TEXTURE_FORMATS
    gl.CULL_FACE {{domxref("GLboolean")}} 
    gl.CULL_FACE_MODE {{domxref("GLenum")}} 
    gl.CURRENT_PROGRAM {{domxref("WebGLProgram")}} 
    gl.DEPTH_BITS {{domxref("GLint")}} 
    gl.DEPTH_CLEAR_VALUE {{domxref("GLfloat")}} 
    gl.DEPTH_FUNC {{domxref("GLenum")}} 
    gl.DEPTH_RANGE {{jsxref("Float32Array")}} (with 2 elements) 
    gl.DEPTH_TEST {{domxref("GLboolean")}} 
    gl.DEPTH_WRITEMASK {{domxref("GLboolean")}} 
    gl.DITHER {{domxref("GLboolean")}} 
    gl.ELEMENT_ARRAY_BUFFER_BINDING {{domxref("WebGLBuffer")}} 
    gl.FRAMEBUFFER_BINDING {{domxref("WebGLFramebuffer")}} 
    gl.FRONT_FACE {{domxref("GLenum")}} 
    gl.GENERATE_MIPMAP_HINT {{domxref("GLenum")}} 
    gl.GREEN_BITS {{domxref("GLint")}} 
    gl.IMPLEMENTATION_COLOR_READ_FORMAT {{domxref("GLenum")}} 
    gl.IMPLEMENTATION_COLOR_READ_TYPE {{domxref("GLenum")}} 
    gl.LINE_WIDTH {{domxref("GLfloat")}} 
    gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS {{domxref("GLint")}} 
    gl.MAX_CUBE_MAP_TEXTURE_SIZE {{domxref("GLint")}} 
    gl.MAX_FRAGMENT_UNIFORM_VECTORS {{domxref("GLint")}} 
    gl.MAX_RENDERBUFFER_SIZE {{domxref("GLint")}} 
    gl.MAX_TEXTURE_IMAGE_UNITS {{domxref("GLint")}} 
    gl.MAX_TEXTURE_SIZE {{domxref("GLint")}} 
    gl.MAX_VARYING_VECTORS {{domxref("GLint")}} 
    gl.MAX_VERTEX_ATTRIBS {{domxref("GLint")}} 
    gl.MAX_VERTEX_TEXTURE_IMAGE_UNITS {{domxref("GLint")}} 
    gl.MAX_VERTEX_UNIFORM_VECTORS {{domxref("GLint")}} 
    gl.MAX_VIEWPORT_DIMS {{jsxref("Int32Array")}} (with 2 elements) 
    gl.PACK_ALIGNMENT {{domxref("GLint")}} 
    gl.POLYGON_OFFSET_FACTOR {{domxref("GLfloat")}} 
    gl.POLYGON_OFFSET_FILL {{domxref("GLboolean")}} 
    gl.POLYGON_OFFSET_UNITS {{domxref("GLfloat")}} 
    gl.RED_BITS {{domxref("GLint")}} 
    gl.RENDERBUFFER_BINDING {{domxref("WebGLRenderbuffer")}} 
    gl.RENDERER {{domxref("DOMString")}} 
    gl.SAMPLE_BUFFERS {{domxref("GLint")}} 
    gl.SAMPLE_COVERAGE_INVERT {{domxref("GLboolean")}} 
    gl.SAMPLE_COVERAGE_VALUE {{domxref("GLfloat")}} 
    gl.SAMPLES {{domxref("GLint")}} 
    gl.SCISSOR_BOX {{jsxref("Int32Array")}} (with 4 elements) 
    gl.SCISSOR_TEST {{domxref("GLboolean")}} 
    gl.SHADING_LANGUAGE_VERSION {{domxref("DOMString")}} 
    gl.STENCIL_BACK_FAIL {{domxref("GLenum")}} 
    gl.STENCIL_BACK_FUNC {{domxref("GLenum")}} 
    gl.STENCIL_BACK_PASS_DEPTH_FAIL {{domxref("GLenum")}} 
    gl.STENCIL_BACK_PASS_DEPTH_PASS {{domxref("GLenum")}} 
    gl.STENCIL_BACK_REF {{domxref("GLint")}} 
    gl.STENCIL_BACK_VALUE_MASK {{domxref("GLuint")}} 
    gl.STENCIL_BACK_WRITEMASK {{domxref("GLuint")}} 
    gl.STENCIL_BITS {{domxref("GLint")}} 
    gl.STENCIL_CLEAR_VALUE {{domxref("GLint")}} 
    gl.STENCIL_FAIL {{domxref("GLenum")}} 
    gl.STENCIL_FUNC {{domxref("GLenum")}} 
    gl.STENCIL_PASS_DEPTH_FAIL {{domxref("GLenum")}} 
    gl.STENCIL_PASS_DEPTH_PASS {{domxref("GLenum")}} 
    gl.STENCIL_REF {{domxref("GLint")}} 
    gl.STENCIL_TEST {{domxref("GLboolean")}} 
    gl.STENCIL_VALUE_MASK {{domxref("GLuint")}} 
    gl.STENCIL_WRITEMASK {{domxref("GLuint")}} 
    gl.SUBPIXEL_BITS {{domxref("GLint")}} 
    gl.TEXTURE_BINDING_2D {{domxref("WebGLTexture")}} 
    gl.TEXTURE_BINDING_CUBE_MAP {{domxref("WebGLTexture")}} 
    gl.UNPACK_ALIGNMENT {{domxref("GLint")}} 
    gl.UNPACK_COLORSPACE_CONVERSION_WEBGL {{domxref("GLenum")}} 
    gl.UNPACK_FLIP_Y_WEBGL {{domxref("GLboolean")}} 
    gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL {{domxref("GLboolean")}} 
    gl.VENDOR {{domxref("DOMString")}} 
    gl.VERSION {{domxref("DOMString")}} 
    gl.VIEWPORT {{jsxref("Int32Array")}} (with 4 elements) 
    @@ -583,299 +583,299 @@

    WebGL 2

    gl.COPY_READ_BUFFER_BINDING {{domxref("WebGLBuffer")}} -   + gl.COPY_WRITE_BUFFER_BINDING {{domxref("WebGLBuffer")}} -   + gl.DRAW_BUFFERi {{domxref("GLenum")}} -   + gl.DRAW_FRAMEBUFFER_BINDING {{domxref("WebGLFramebuffer")}} -   + gl.FRAGMENT_SHADER_DERIVATIVE_HINT {{domxref("GLenum")}} -   + gl.MAX_3D_TEXTURE_SIZE {{domxref("GLint")}} -   + gl.MAX_ARRAY_TEXTURE_LAYERS {{domxref("GLint")}} -   + gl.MAX_CLIENT_WAIT_TIMEOUT_WEBGL {{domxref("GLint64")}} -   + gl.MAX_COLOR_ATTACHMENTS {{domxref("GLint")}} -   + gl.MAX_COMBINED_FRAGMENT_UNIFORM_COMPONENTS {{domxref("GLint64")}} -   + gl.MAX_COMBINED_UNIFORM_BLOCKS {{domxref("GLint")}} -   + gl.MAX_COMBINED_VERTEX_UNIFORM_COMPONENTS {{domxref("GLint64")}} -   + gl.MAX_DRAW_BUFFERS {{domxref("GLint")}} -   + gl.MAX_ELEMENT_INDEX {{domxref("GLint64")}} -   + gl.MAX_ELEMENTS_INDICES {{domxref("GLint")}} -   + gl.MAX_ELEMENTS_VERTICES {{domxref("GLint")}} -   + gl.MAX_FRAGMENT_INPUT_COMPONENTS {{domxref("GLint")}} -   + gl.MAX_FRAGMENT_UNIFORM_BLOCKS {{domxref("GLint")}} -   + gl.MAX_FRAGMENT_UNIFORM_COMPONENTS {{domxref("GLint")}} -   + gl.MAX_PROGRAM_TEXEL_OFFSET {{domxref("GLint")}} -   + gl.MAX_SAMPLES {{domxref("GLint")}} -   + gl.MAX_SERVER_WAIT_TIMEOUT {{domxref("GLint64")}} -   + gl.MAX_TEXTURE_LOD_BIAS {{domxref("GLfloat")}} -   + gl.MAX_TRANSFORM_FEEDBACK_INTERLEAVED_COMPONENTS {{domxref("GLint")}} -   + gl.MAX_TRANSFORM_FEEDBACK_SEPARATE_ATTRIBS {{domxref("GLint")}} -   + gl.MAX_TRANSFORM_FEEDBACK_SEPARATE_COMPONENTS {{domxref("GLint")}} -   + gl.MAX_UNIFORM_BLOCK_SIZE {{domxref("GLint64")}} -   + gl.MAX_UNIFORM_BUFFER_BINDINGS {{domxref("GLint")}} -   + gl.MAX_VARYING_COMPONENTS {{domxref("GLint")}} -   + gl.MAX_VERTEX_OUTPUT_COMPONENTS {{domxref("GLint")}} -   + gl.MAX_VERTEX_UNIFORM_BLOCKS {{domxref("GLint")}} -   + gl.MAX_VERTEX_UNIFORM_COMPONENTS {{domxref("GLint")}} -   + gl.MIN_PROGRAM_TEXEL_OFFSET {{domxref("GLint")}} -   + gl.PACK_ROW_LENGTH {{domxref("GLint")}} -   + gl.PACK_SKIP_PIXELS {{domxref("GLint")}} -   + gl.PACK_SKIP_ROWS {{domxref("GLint")}} -   + gl.PIXEL_PACK_BUFFER_BINDING {{domxref("WebGLBuffer")}} -   + gl.PIXEL_UNPACK_BUFFER_BINDING {{domxref("WebGLBuffer")}} -   + gl.RASTERIZER_DISCARD {{domxref("GLboolean")}} -   + gl.READ_BUFFER {{domxref("GLenum")}} -   + gl.READ_FRAMEBUFFER_BINDING {{domxref("WebGLFramebuffer")}} -   + gl.SAMPLE_ALPHA_TO_COVERAGE {{domxref("GLboolean")}} -   + gl.SAMPLE_COVERAGE {{domxref("GLboolean")}} -   + gl.SAMPLER_BINDING {{domxref("WebGLSampler")}} -   + gl.TEXTURE_BINDING_2D_ARRAY {{domxref("WebGLTexture")}} -   + gl.TEXTURE_BINDING_3D {{domxref("WebGLTexture")}} -   + gl.TRANSFORM_FEEDBACK_ACTIVE {{domxref("GLboolean")}} -   + gl.TRANSFORM_FEEDBACK_BINDING {{domxref("WebGLTransformFeedback")}} -   + gl.TRANSFORM_FEEDBACK_BUFFER_BINDING {{domxref("WebGLBuffer")}} -   + gl.TRANSFORM_FEEDBACK_PAUSED {{domxref("GLboolean")}} -   + gl.UNIFORM_BUFFER_BINDING {{domxref("WebGLBuffer")}} -   + gl.UNIFORM_BUFFER_OFFSET_ALIGNMENT {{domxref("GLint")}} -   + gl.UNPACK_IMAGE_HEIGHT {{domxref("GLint")}} -   + gl.UNPACK_ROW_LENGTH {{domxref("GLint")}} -   + gl.UNPACK_SKIP_IMAGES {{domxref("GLint")}} -   + gl.UNPACK_SKIP_PIXELS {{domxref("GLint")}} -   + gl.UNPACK_SKIP_ROWS {{domxref("GLint")}} -   + gl.VERTEX_ARRAY_BINDING {{domxref("WebGLVertexArrayObject")}} -   +

    WebGL 扩展

    -

    当使用 WebGL 扩展 时,您可以查询以下 pname 参数:

    +

    当使用 WebGL 扩展 时,您可以查询以下 pname 参数:

    @@ -897,7 +897,7 @@

    WebGL 扩展

    - + diff --git a/files/zh-cn/web/api/webglrenderingcontext/getprograminfolog/index.html b/files/zh-cn/web/api/webglrenderingcontext/getprograminfolog/index.html index 9f5a48318de362..574568477a9277 100644 --- a/files/zh-cn/web/api/webglrenderingcontext/getprograminfolog/index.html +++ b/files/zh-cn/web/api/webglrenderingcontext/getprograminfolog/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef("WebGL")}}
    -

    WebGLRenderingContext.getProgramInfoLog  返回参数中指定的{{domxref("WebGLProgram")}} object 的信息。这些信息包括在 linking 过程中的错误以及 WebGLProgram objects 合法性检查的错误。

    +

    WebGLRenderingContext.getProgramInfoLog 返回参数中指定的{{domxref("WebGLProgram")}} object 的信息。这些信息包括在 linking 过程中的错误以及 WebGLProgram objects 合法性检查的错误。

    Syntax

    @@ -20,7 +20,7 @@

    Parameters

    Return value

    -

    返回 {{domxref("DOMString")}} 包含 diagnostic , warning ...等等关于上一次 linking 和 valiadation 操作的信息. 对于刚刚创建的{{domxref("WebGLProgram")}} object , 返回一个空字符串。

    +

    返回 {{domxref("DOMString")}} 包含 diagnostic , warning ...等等关于上一次 linking 和 valiadation 操作的信息. 对于刚刚创建的{{domxref("WebGLProgram")}} object , 返回一个空字符串。

    Examples

    diff --git a/files/zh-cn/web/api/webglrenderingcontext/getprogramparameter/index.html b/files/zh-cn/web/api/webglrenderingcontext/getprogramparameter/index.html index 2fa49cae66b265..304b6ca838b448 100644 --- a/files/zh-cn/web/api/webglrenderingcontext/getprogramparameter/index.html +++ b/files/zh-cn/web/api/webglrenderingcontext/getprogramparameter/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef("WebGL")}}
    -

    WebGLRenderingContext.getProgramParameter() 方法返回WebGLProgram的信息。

    +

    WebGLRenderingContext.getProgramParameter() 方法返回WebGLProgram的信息。

    语法

    diff --git a/files/zh-cn/web/api/webglrenderingcontext/getshaderparameter/index.html b/files/zh-cn/web/api/webglrenderingcontext/getshaderparameter/index.html index e1f31d8a58cda8..aff9854b442cd8 100644 --- a/files/zh-cn/web/api/webglrenderingcontext/getshaderparameter/index.html +++ b/files/zh-cn/web/api/webglrenderingcontext/getshaderparameter/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef("WebGL")}}
    -

    WebGLRenderingContext.getShaderParameter() 返回给定的着色器信息

    +

    WebGLRenderingContext.getShaderParameter() 返回给定的着色器信息

    语法

    diff --git a/files/zh-cn/web/api/webglrenderingcontext/getshadersource/index.html b/files/zh-cn/web/api/webglrenderingcontext/getshadersource/index.html index 6d8957b987cfd3..9479b3ae5d0d62 100644 --- a/files/zh-cn/web/api/webglrenderingcontext/getshadersource/index.html +++ b/files/zh-cn/web/api/webglrenderingcontext/getshadersource/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef("WebGL")}}
    -
    WebGL API 中的 WebGLRenderingContext.getShaderSource() 方法以{{domxref("DOMString")}}的形式返回了一个{{domxref("WebGLShader")}}的源码。
    +
    WebGL API 中的 WebGLRenderingContext.getShaderSource() 方法以{{domxref("DOMString")}}的形式返回了一个{{domxref("WebGLShader")}}的源码。

    语法

    @@ -16,7 +16,7 @@

    参数

    shader
    -
    要获取源码的 {{domxref("WebGLShader")}} 对象
    +
    要获取源码的 {{domxref("WebGLShader")}} 对象

    返回值

    diff --git a/files/zh-cn/web/api/webglrenderingcontext/getsupportedextensions/index.html b/files/zh-cn/web/api/webglrenderingcontext/getsupportedextensions/index.html index 8914004b6b45a5..2032ee5437f707 100644 --- a/files/zh-cn/web/api/webglrenderingcontext/getsupportedextensions/index.html +++ b/files/zh-cn/web/api/webglrenderingcontext/getsupportedextensions/index.html @@ -28,7 +28,7 @@

    示例代码

    WebGL 扩展

    -

    所有 WebGL API 扩展都被注册在 WebGL Extension Registry 中。当前的扩展是:

    +

    所有 WebGL API 扩展都被注册在 WebGL Extension Registry 中。当前的扩展是:

    {{page("en-US/docs/Web/API/WebGL_API", "Extension_interfaces")}}

    diff --git a/files/zh-cn/web/api/webglrenderingcontext/gettexparameter/index.html b/files/zh-cn/web/api/webglrenderingcontext/gettexparameter/index.html index 1ce9bef871c945..dd5968fc7aabfc 100644 --- a/files/zh-cn/web/api/webglrenderingcontext/gettexparameter/index.html +++ b/files/zh-cn/web/api/webglrenderingcontext/gettexparameter/index.html @@ -12,7 +12,7 @@ ---
    {{APIRef("WebGL")}}
    -

    WebGLRenderingContext.getTexParameter() 此WebGL API方法返回特定的纹理信息。

    +

    WebGLRenderingContext.getTexParameter()WebGL API方法返回特定的纹理信息。

    语法

    @@ -23,7 +23,7 @@

    参数

    target
    -
    一个 {{domxref("GLenum")}} 接口类型的绑定的点 (target). 可能的值有: +
    一个 {{domxref("GLenum")}} 接口类型的绑定的点 (target). 可能的值有:
    • gl.TEXTURE_2D: 一个二维纹理。
    • gl.TEXTURE_CUBE_MAP: 一个立方体纹理。
    • @@ -139,7 +139,7 @@

      参数

    - + @@ -149,7 +149,7 @@

    参数

    返回值

    -

    返回需要的纹理信息 (和 pname类型相同). 如果发生错误,就返回{{jsxref("null")}}.

    +

    返回需要的纹理信息 (和 pname类型相同). 如果发生错误,就返回{{jsxref("null")}}.

    示例

    diff --git a/files/zh-cn/web/api/webglrenderingcontext/index.html b/files/zh-cn/web/api/webglrenderingcontext/index.html index b1c4939fc7efe5..60c63bdba0ebd3 100644 --- a/files/zh-cn/web/api/webglrenderingcontext/index.html +++ b/files/zh-cn/web/api/webglrenderingcontext/index.html @@ -8,17 +8,17 @@ ---
    {{APIRef("WebGL")}}
    -

    WebGLRenderingContext 接口提供基于 OpenGL ES 2.0 的绘图上下文,用于在 HTML {{HTMLElement("canvas")}} 元素内绘图。 

    +

    WebGLRenderingContext 接口提供基于 OpenGL ES 2.0 的绘图上下文,用于在 HTML {{HTMLElement("canvas")}} 元素内绘图。

    -

    要获得这个接口的对象,可以通过在 <canvas> 元素上调用 {{domxref("HTMLCanvasElement.getContext()", "getContext()")}} 函数,调用时传入 “webgl” 参数:

    +

    要获得这个接口的对象,可以通过在 <canvas> 元素上调用 {{domxref("HTMLCanvasElement.getContext()", "getContext()")}} 函数,调用时传入 “webgl” 参数:

    var canvas = document.getElementById('myCanvas');
     var gl = canvas.getContext('webgl');
     
    -

    当你获取到 canvas 元素的 WebGL 绘图上下文,你便可以在里面绘图。

    +

    当你获取到 canvas 元素的 WebGL 绘图上下文,你便可以在里面绘图。

    -

    点击 WebGL tutorial 获取更多资料,例子,和关于如何开始 WebGL 编程的知识。

    +

    点击 WebGL tutorial 获取更多资料,例子,和关于如何开始 WebGL 编程的知识。

    补充:以下内容很多函数都没有提供参数,所以最好还是参见具体 API。

    @@ -26,7 +26,7 @@

    常量

    -

    请参考 WebGL constants 。

    +

    请参考 WebGL constants

    WebGL 上下文

    @@ -34,7 +34,7 @@

    WebGL 上下文

    {{domxref("WebGLRenderingContext.canvas")}}
    -
    只读属性,对 {{domxref("HTMLCanvasElement")}} 的向后引用。如果上下文没有相联系的 {{HTMLElement("canvas")}} 元素,值将会为 {{jsxref("null")}}。
    +
    只读属性,对 {{domxref("HTMLCanvasElement")}} 的向后引用。如果上下文没有相联系的 {{HTMLElement("canvas")}} 元素,值将会为 {{jsxref("null")}}。
    {{domxref("WebGLRenderingContext.commit()")}} {{experimental_inline}}

    如果上下文没有指定的 canvas,把帧交给原始的{{domxref("HTMLCanvasElement")}}元素。

    @@ -44,7 +44,7 @@

    WebGL 上下文

    {{domxref("WebGLRenderingContext.drawingBufferHeight")}}
    只读属性,当前绘图缓冲区的高度,等于和该上下文相联系的 canvas 元素的高度。
    {{domxref("WebGLRenderingContext.getContextAttributes()")}}
    -
    返回 WebGLContextAttributes 对象,该对象包含真实的上下文参数。如果上下文丢失,将会返回 {{jsxref("null")}}。
    +
    返回 WebGLContextAttributes 对象,该对象包含真实的上下文参数。如果上下文丢失,将会返回 {{jsxref("null")}}。
    {{domxref("WebGLRenderingContext.isContextLost()")}}
    如果上下文丢失,返回 true;否则,返回 false。
    @@ -68,7 +68,7 @@

    状态信息

    {{domxref("WebGLRenderingContext.blendEquation()")}}
    用同一个表达式设置 RGB 混和表达式和 alpha 混和表达式。
    {{domxref("WebGLRenderingContext.blendEquationSeparate()")}}
    -
    分开设置 RGB 混和表达式和 alpha 混和表达式。
    +
    分开设置 RGB 混和表达式和 alpha 混和表达式。
    {{domxref("WebGLRenderingContext.blendFunc()")}}
    定义用于像素混合算法的函数。
    {{domxref("WebGLRenderingContext.blendFuncSeparate()")}}
    @@ -129,15 +129,15 @@

    缓冲区

    {{domxref("WebGLRenderingContext.bindBuffer()")}}
    -
    把 WebGLBuffer 对象绑定到指定目标上。
    +
    WebGLBuffer 对象绑定到指定目标上。
    {{domxref("WebGLRenderingContext.bufferData()")}}
    更新缓冲数据。
    {{domxref("WebGLRenderingContext.bufferSubData()")}}
    更新从给入偏移量开始的缓冲数据。
    {{domxref("WebGLRenderingContext.createBuffer()")}}
    -
    创建 WebGLBuffer 对象。
    +
    创建 WebGLBuffer 对象。
    {{domxref("WebGLRenderingContext.deleteBuffer()")}}
    -
    删除 WebGLBuffer 对象。
    +
    删除 WebGLBuffer 对象。
    {{domxref("WebGLRenderingContext.getBufferParameter()")}}
    返回缓冲信息。
    {{domxref("WebGLRenderingContext.isBuffer()")}}
    @@ -148,38 +148,38 @@

    帧缓冲区

    {{domxref("WebGLRenderingContext.bindFramebuffer()")}}
    -
    把 WebGLFrameBuffer 对象绑定到指定对象上。
    +
    WebGLFrameBuffer 对象绑定到指定对象上。
    {{domxref("WebGLRenderingContext.checkFramebufferStatus()")}}
    返回帧缓冲区的状态。
    {{domxref("WebGLRenderingContext.createFramebuffer()")}}
    -
    创建 WebGLFrameBuffer 对象。
    +
    创建 WebGLFrameBuffer 对象。
    {{domxref("WebGLRenderingContext.deleteFramebuffer()")}}
    -
    删除 WebGLFrameBuffer 对象。
    +
    删除 WebGLFrameBuffer 对象。
    {{domxref("WebGLRenderingContext.framebufferRenderbuffer()")}}
    -
    把 WebGLRenderingBuffer 对象附加到 WebGLFrameBuffer 对象。
    +
    WebGLRenderingBuffer 对象附加到 WebGLFrameBuffer 对象。
    {{domxref("WebGLRenderingContext.framebufferTexture2D()")}}
    -
    把纹理图像附加到 WebGLFrameBuffer object.
    +
    把纹理图像附加到 WebGLFrameBuffer object.
    {{domxref("WebGLRenderingContext.getFramebufferAttachmentParameter()")}}
    返回帧缓冲区的信息。
    {{domxref("WebGLRenderingContext.isFramebuffer()")}}
    -
    返回 Boolean 值,表示给入的 WebGLFrameBuffer 对象是否有效。
    +
    返回 Boolean 值,表示给入的 WebGLFrameBuffer 对象是否有效。
    {{domxref("WebGLRenderingContext.readPixels()")}}
    -
    读取 WebGLFrameBuffer 的像素。
    +
    读取 WebGLFrameBuffer 的像素。

    渲染缓冲区

    {{domxref("WebGLRenderingContext.bindRenderbuffer()")}}
    -
    把 WebGLRenderBuffer 对象绑定到指定的对象上。
    +
    WebGLRenderBuffer 对象绑定到指定的对象上。
    {{domxref("WebGLRenderingContext.createRenderbuffer()")}}
    -
    创建 WebGLRenderBuffer 对象。
    +
    创建 WebGLRenderBuffer 对象。
    {{domxref("WebGLRenderingContext.deleteRenderbuffer()")}}
    -
    删除 WebGLRenderBuffer 对象。
    +
    删除 WebGLRenderBuffer 对象。
    {{domxref("WebGLRenderingContext.getRenderbufferParameter()")}}
    返回渲染缓冲区的信息。
    {{domxref("WebGLRenderingContext.isBuffer()")}}
    -
    返回 Boolean 值,表示给入的 WebGLRenderingBuffer 是否有效。
    +
    返回 Boolean 值,表示给入的 WebGLRenderingBuffer 是否有效。
    {{domxref("WebGLRenderingContext.renderbufferStorage()")}}
    创建渲染缓冲区数据存储。
    @@ -188,7 +188,7 @@

    纹理

    {{domxref("WebGLRenderingContext.bindTexture()")}}
    -
    把 WebGLTexture 对象绑定到指定对象上。
    +
    WebGLTexture 对象绑定到指定对象上。
    {{domxref("WebGLRenderingContext.compressedTexImage2D()")}}
    指定一个为压缩格式的 2D 纹理图片。
    {{domxref("WebGLRenderingContext.compressedTexSubImage2D()")}}
    @@ -198,19 +198,19 @@

    纹理

    {{domxref("WebGLRenderingContext.copyTexSubImage2D()")}}
    复制 2D 纹理子图片。
    {{domxref("WebGLRenderingContext.createTexture()")}}
    -
    创建 WebGLTexture 对象。
    +
    创建 WebGLTexture 对象。
    {{domxref("WebGLRenderingContext.deleteTexture()")}}
    -
    删除 WebGLTexture 对象。
    +
    删除 WebGLTexture 对象。
    {{domxref("WebGLRenderingContext.generateMipmap()")}}
    -
    为 WebGLTexture 对象生成一组纹理映射。
    +
    WebGLTexture 对象生成一组纹理映射。
    {{domxref("WebGLRenderingContext.getTexParameter()")}}
    返回纹理信息。
    {{domxref("WebGLRenderingContext.isTexture()")}}
    -
    返回 Boolean 值,表示给入的 WebGLTexture 是否有效。
    +
    返回 Boolean 值,表示给入的 WebGLTexture 是否有效。
    {{domxref("WebGLRenderingContext.texImage2D()")}}
    指定 2D 纹理图片。
    {{domxref("WebGLRenderingContext.texSubImage2D()")}}
    -
    更新当前 WebGLTexture 的子矩形。
    +
    更新当前 WebGLTexture 的子矩形。
    {{domxref("WebGLRenderingContext.texParameterf()")}}
    设置纹理参数。
    {{domxref("WebGLRenderingContext.texParameteri()")}}
    @@ -221,50 +221,50 @@

    程序对象和着色器对象

    {{domxref("WebGLRenderingContext.attachShader()")}}
    -
    把 WebGLShader 添加到 WebGLProgram。
    +
    WebGLShader 添加到 WebGLProgram。
    {{domxref("WebGLRenderingContext.bindAttribLocation()")}}
    绑定一个普通顶点索引到一个命名的 attribute 变量
    {{domxref("WebGLRenderingContext.compileShader()")}}
    -
    编译 WebGLShader。
    +
    编译 WebGLShader。
    {{domxref("WebGLRenderingContext.createProgram()")}}
    -
    创建 WebGLProgram。
    +
    创建 WebGLProgram。
    {{domxref("WebGLRenderingContext.createShader()")}}
    -
    创建 WebGLShader。
    +
    创建 WebGLShader。
    {{domxref("WebGLRenderingContext.deleteProgram()")}}
    -
    删除 WebGLProgram。
    +
    删除 WebGLProgram。
    {{domxref("WebGLRenderingContext.deleteShader()")}}
    -
    删除 WebGLShader。
    +
    删除 WebGLShader。
    {{domxref("WebGLRenderingContext.detachShader()")}}
    -
    分离 WebGLShader。
    +
    分离 WebGLShader。
    {{domxref("WebGLRenderingContext.getAttachedShaders()")}}
    -
    返回附加在 WebGLProgram 上的 WebGLShader 对象的列表。
    +
    返回附加在 WebGLProgram 上的 WebGLShader 对象的列表。
    {{domxref("WebGLRenderingContext.getProgramParameter()")}}
    返回程序对象的信息。
    {{domxref("WebGLRenderingContext.getProgramInfoLog()")}}
    -
    返回 WebGLProgram 对象的信息日志。
    +
    返回 WebGLProgram 对象的信息日志。
    {{domxref("WebGLRenderingContext.getShaderParameter()")}}
    返回着色器的信息。
    {{domxref("WebGLRenderingContext.getShaderPrecisionFormat()")}}
    返回一个描述着色器数字类型精度的WebGLShaderPrecisionFormat 对象。
    {{domxref("WebGLRenderingContext.getShaderInfoLog()")}}
    -
    返回 WebGLShader 对象的信息日志。
    +
    返回 WebGLShader 对象的信息日志。
    {{domxref("WebGLRenderingContext.getShaderSource()")}}
    -
    以字符串形式返回 WebGLShader 的源码。
    +
    以字符串形式返回 WebGLShader 的源码。
    {{domxref("WebGLRenderingContext.isProgram()")}}
    -
    返回一个 Boolean 值,表示给入的 WebGLProgram 是否有效。
    +
    返回一个 Boolean 值,表示给入的 WebGLProgram 是否有效。
    {{domxref("WebGLRenderingContext.isShader()")}}
    -
    返回一个 Boolean 值,表示给入的 WebGLShader 是否有效。
    +
    返回一个 Boolean 值,表示给入的 WebGLShader 是否有效。
    {{domxref("WebGLRenderingContext.linkProgram()")}}
    -
    链接给入的 WebGLProgram 对象。
    +
    链接给入的 WebGLProgram 对象。
    {{domxref("WebGLRenderingContext.shaderSource()")}}
    -
    设置一个 WebGLShader 的源码。
    +
    设置一个 WebGLShader 的源码。
    {{domxref("WebGLRenderingContext.useProgram()")}}
    -
    使用指定的 WebGLProgram 作为当前渲染状态的一部分。
    +
    使用指定的 WebGLProgram 作为当前渲染状态的一部分。
    {{domxref("WebGLRenderingContext.validateProgram()")}}
    -
    使 WebGLProgram 生效。
    +
    使 WebGLProgram 生效。
    -

    Uniform 和 Attribute

    +

    Uniform 和 Attribute

    {{domxref("WebGLRenderingContext.disableVertexAttribArray()")}}
    @@ -274,7 +274,7 @@

    Uniform 和 Attribute

    {{domxref("WebGLRenderingContext.getActiveAttrib()")}}
    返回激活状态的 attribute 变量信息。
    {{domxref("WebGLRenderingContext.getActiveUniform()")}}
    -
    返回激活状态的 uniform 变量信息。
    +
    返回激活状态的 uniform 变量信息。
    {{domxref("WebGLRenderingContext.getAttribLocation()")}}
    返回 attribute 变量的指针位置。
    {{domxref("WebGLRenderingContext.getUniform()")}}
    @@ -316,7 +316,7 @@

    使用扩展插件

    {{domxref("WebGLRenderingContext.getSupportedExtensions()")}}
    -
    返回一个包含 {{domxref("DOMString")}} 的 {{jsxref("Array")}} ,每个元素都为支持的 WebGL 扩展。
    +
    返回一个包含 {{domxref("DOMString")}} 的 {{jsxref("Array")}} ,每个元素都为支持的 WebGL 扩展。
    {{domxref("WebGLRenderingContext.getExtension()")}}
    返回一个扩展对象。
    diff --git a/files/zh-cn/web/api/webglrenderingcontext/isbuffer/index.html b/files/zh-cn/web/api/webglrenderingcontext/isbuffer/index.html index 9e930ea2dce2e2..f6e8d6f6aed3f4 100644 --- a/files/zh-cn/web/api/webglrenderingcontext/isbuffer/index.html +++ b/files/zh-cn/web/api/webglrenderingcontext/isbuffer/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef("WebGL")}}
    -

    WebGLRenderingContext.isBuffer() 是 WebGL API 的方法之一。如果传递的 {{domxref("WebGLBuffer")}} 有效则返回 true,否则返回 false。

    +

    WebGLRenderingContext.isBuffer() WebGL API 的方法之一。如果传递的 {{domxref("WebGLBuffer")}} 有效则返回 true,否则返回 false。

    句法

    diff --git a/files/zh-cn/web/api/webglrenderingcontext/iscontextlost/index.html b/files/zh-cn/web/api/webglrenderingcontext/iscontextlost/index.html index c17ed6b95879c2..ac6579b49d260e 100644 --- a/files/zh-cn/web/api/webglrenderingcontext/iscontextlost/index.html +++ b/files/zh-cn/web/api/webglrenderingcontext/iscontextlost/index.html @@ -15,7 +15,7 @@

    语法

    返回值

    -

     {{jsxref("Boolean")}}。如果上下文丢失则返回 true,否则返回 false。

    +

    {{jsxref("Boolean")}}。如果上下文丢失则返回 true,否则返回 false。

    样例

    diff --git a/files/zh-cn/web/api/webglrenderingcontext/isenabled/index.html b/files/zh-cn/web/api/webglrenderingcontext/isenabled/index.html index 77b32d75a6becc..597995fc7445ab 100644 --- a/files/zh-cn/web/api/webglrenderingcontext/isenabled/index.html +++ b/files/zh-cn/web/api/webglrenderingcontext/isenabled/index.html @@ -18,7 +18,7 @@

    参数

    cap
    -
    {{domxref("GLenum")}} 指定待检测的 WebGL 功能项。可能的值有:
    +
    {{domxref("GLenum")}} 指定待检测的 WebGL 功能项。可能的值有:
    ext.FRAGMENT_SHADER_DERIVATIVE_HINT_OES {{domxref("GLenum")}} {{domxref("OES_standard_derivatives")}}GLSL 内置函数的导数计算精度:dFdx、 dFdy 和 fwidthGLSL 内置函数的导数计算精度:dFdxdFdyfwidth
    ext.MAX_COLOR_ATTACHMENTS_WEBGL
    gl.TEXTURE_WRAP_R {{domxref("GLenum")}}封装的纹理坐标方法 r封装的纹理坐标方法 r gl.REPEAT (default value), gl.CLAMP_TO_EDGE, gl.MIRRORED_REPEAT.
    @@ -87,7 +87,7 @@

    参数

    返回值

    -

    {{domxref("GLboolean")}} 指示能力项 cap 可用 (true),不可用 (false)。

    +

    {{domxref("GLboolean")}} 指示能力项 cap 可用 (true),不可用 (false)。

    示例

    diff --git a/files/zh-cn/web/api/webglrenderingcontext/isprogram/index.html b/files/zh-cn/web/api/webglrenderingcontext/isprogram/index.html index 7ed311e4e4511f..549fbd6a0d38e0 100644 --- a/files/zh-cn/web/api/webglrenderingcontext/isprogram/index.html +++ b/files/zh-cn/web/api/webglrenderingcontext/isprogram/index.html @@ -5,7 +5,7 @@ ---

    {{APIRef("WebGL")}}

    -

     WebGL API中的WebGLRenderingContext.isProgram() 函数 将会在{{domxref("WebGLProgram")}}是一个合法的着色器程序 (program) 时返回 true , 而在其他情况返回false

    +

    WebGL API中的WebGLRenderingContext.isProgram() 函数 将会在{{domxref("WebGLProgram")}}是一个合法的着色器程序 (program) 时返回 true , 而在其他情况返回false

    语法

    diff --git a/files/zh-cn/web/api/webglrenderingcontext/isshader/index.html b/files/zh-cn/web/api/webglrenderingcontext/isshader/index.html index 5075eb66f23014..e82b6fa90816c1 100644 --- a/files/zh-cn/web/api/webglrenderingcontext/isshader/index.html +++ b/files/zh-cn/web/api/webglrenderingcontext/isshader/index.html @@ -11,7 +11,7 @@ ---
    {{APIRef("WebGL")}}
    -

    WebGL API 中的 WebGLRenderingContext.isShader() 方法,在传入的 {{domxref("WebGLShader")}} 有效时返回 true ,否则返回 false

    +

    WebGL API 中的 WebGLRenderingContext.isShader() 方法,在传入的 {{domxref("WebGLShader")}} 有效时返回 true ,否则返回 false

    语法

    @@ -22,7 +22,7 @@

    参数

    shader
    -
    需要校验的 {{domxref("WebGLShader")}} 
    +
    需要校验的 {{domxref("WebGLShader")}}

    返回值

    diff --git a/files/zh-cn/web/api/webglrenderingcontext/pixelstorei/index.html b/files/zh-cn/web/api/webglrenderingcontext/pixelstorei/index.html index 6251eb1c30d64b..3988571c855b51 100644 --- a/files/zh-cn/web/api/webglrenderingcontext/pixelstorei/index.html +++ b/files/zh-cn/web/api/webglrenderingcontext/pixelstorei/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef("WebGL")}}
    -

    WebGLRenderingContext.pixelStorei() 是 WebGL API 中用于图像预处理的函数。

    +

    WebGLRenderingContext.pixelStorei()WebGL API 中用于图像预处理的函数。

    语法

    @@ -16,9 +16,9 @@

    参数

    pname
    -
     {{domxref("Glenum")}} 类型 ,表示处理的方式。关于该参数可选值,请见下面表格。
    +
    {{domxref("Glenum")}} 类型 ,表示处理的方式。关于该参数可选值,请见下面表格。
    param
    -
     {{domxref("GLint")}}  类型,表示 pname 处理方式的参数。关于该参数可选值,请见下面表格。
    +
    {{domxref("GLint")}} 类型,表示 pname 处理方式的参数。关于该参数可选值,请见下面表格。

    返回值

    @@ -34,7 +34,7 @@

    像素存储参数

    - + @@ -168,7 +168,7 @@

    像素存储参数

    Examples

    Setting the pixel storage mode affects the {{domxref("WebGLRenderingContext.readPixels()")}} operations, as well as unpacking of textures with the {{domxref("WebGLRenderingContext.texImage2D()")}} and {{domxref("WebGLRenderingContext.texSubImage2D()")}} methods.
    -  

    +

    var tex = gl.createTexture();
     gl.bindTexture(gl.TEXTURE_2D, tex);
    diff --git a/files/zh-cn/web/api/webglrenderingcontext/polygonoffset/index.html b/files/zh-cn/web/api/webglrenderingcontext/polygonoffset/index.html
    index b8fcd38c5c89d1..ae302d99489c78 100644
    --- a/files/zh-cn/web/api/webglrenderingcontext/polygonoffset/index.html
    +++ b/files/zh-cn/web/api/webglrenderingcontext/polygonoffset/index.html
    @@ -21,7 +21,7 @@ 

    参数

    factor
    A {{domxref("GLfloat")}} which sets the scale factor for the variable depth offset for each polygon. 默认值为 0.
    units
    -
    A {{domxref("GLfloat")}} which sets the multiplier by which an implementation-specific value is multiplied with to create a constant depth offset. 默认值为 0.
    +
    A {{domxref("GLfloat")}} which sets the multiplier by which an implementation-specific value is multiplied with to create a constant depth offset. 默认值为 0.

    返回值

    @@ -36,7 +36,7 @@

    例子

    gl.polygonOffset(2, 3);
    -

    想要查看当前多边形偏移的 factor 或 units,查询 POLYGON_OFFSET_FACTORPOLYGON_OFFSET_UNITS 的内容即可。

    +

    想要查看当前多边形偏移的 factor 或 units,查询 POLYGON_OFFSET_FACTORPOLYGON_OFFSET_UNITS 的内容即可。

    gl.getParameter(gl.POLYGON_OFFSET_FACTOR); // 2
     gl.getParameter(gl.POLYGON_OFFSET_UNITS);  // 3
    diff --git a/files/zh-cn/web/api/webglrenderingcontext/renderbufferstorage/index.html b/files/zh-cn/web/api/webglrenderingcontext/renderbufferstorage/index.html
    index 245256d136831e..dc2bedb5d6fa45 100644
    --- a/files/zh-cn/web/api/webglrenderingcontext/renderbufferstorage/index.html
    +++ b/files/zh-cn/web/api/webglrenderingcontext/renderbufferstorage/index.html
    @@ -16,14 +16,14 @@ 

    参数

    target
    -
     {{domxref("Glenum")}} 指定一个渲染缓冲区对象。可能的值: +
    {{domxref("Glenum")}} 指定一个渲染缓冲区对象。可能的值:
    • gl.RENDERBUFFER:单一图像的缓冲数据存储在一个可渲染的内部格式。
      .
    internalFormat
    -
     {{domxref("Glenum")}} 指定渲染缓冲区的内部格式。可能的值: +
    {{domxref("Glenum")}} 指定渲染缓冲区的内部格式。可能的值:
    • gl.RGBA4: 4 red bits, 4 green bits, 4 blue bits 4 alpha bits.
    • gl.RGB565: 5 red bits, 6 green bits, 5 blue bits.
    • @@ -89,9 +89,9 @@

      参数

    width
    -
     {{domxref("GLsizei")}} 指定渲染缓冲区的宽度 (以像素为单位).
    +
    {{domxref("GLsizei")}} 指定渲染缓冲区的宽度 (以像素为单位).
    height
    -
     {{domxref("GLsizei")}} 指定渲染缓冲区的高度 (以像素为单位).
    +
    {{domxref("GLsizei")}} 指定渲染缓冲区的高度 (以像素为单位).

    返回值

    diff --git a/files/zh-cn/web/api/webglrenderingcontext/scissor/index.html b/files/zh-cn/web/api/webglrenderingcontext/scissor/index.html index 59562eba896c4a..b8d457a47b8a64 100644 --- a/files/zh-cn/web/api/webglrenderingcontext/scissor/index.html +++ b/files/zh-cn/web/api/webglrenderingcontext/scissor/index.html @@ -7,7 +7,7 @@ ---
    {{APIRef("WebGL")}}
    -

     WebGLRenderingContext.scissor() 方法指定了一个裁剪区域,用来将绘图区域限制在其限定的盒形区域内。

    +

    WebGLRenderingContext.scissor() 方法指定了一个裁剪区域,用来将绘图区域限制在其限定的盒形区域内。

    语法

    @@ -20,7 +20,7 @@

    参数

    x
    {{domxref("GLint")}} ,指定盒形裁剪区域左下角所在的横坐标,默认为 0。
    y
    -
     {{domxref("GLint")}} 指定盒形裁剪区域左下角的纵坐标,默认为 0。
    +
    {{domxref("GLint")}} 指定盒形裁剪区域左下角的纵坐标,默认为 0。
    width
    {{domxref("Glsizei")}},用来确定盒型裁剪区域宽度的非负数,默认为 canvas 的宽度。
    height
    @@ -33,7 +33,7 @@

    返回值

    抛错

    -

    宽或高为负值时,抛出  gl.INVALID_VALUE 错误。

    +

    宽或高为负值时,抛出 gl.INVALID_VALUE 错误。

    示例

    @@ -51,7 +51,7 @@

    示例

    gl.disable(gl.SCISSOR_TEST);
    -

    通过查询 SCISSOR_BOX 常量来获取裁剪区域的维度信息,返回值是一个 {{jsxref("Int32Array")}} 对象。

    +

    通过查询 SCISSOR_BOX 常量来获取裁剪区域的维度信息,返回值是一个 {{jsxref("Int32Array")}} 对象。

    gl.scissor(0, 0, 200, 200);
     gl.getParameter(gl.SCISSOR_BOX);
    diff --git a/files/zh-cn/web/api/webglrenderingcontext/shadersource/index.html b/files/zh-cn/web/api/webglrenderingcontext/shadersource/index.html
    index 0b6e746fe7bc14..7533f65fa20957 100644
    --- a/files/zh-cn/web/api/webglrenderingcontext/shadersource/index.html
    +++ b/files/zh-cn/web/api/webglrenderingcontext/shadersource/index.html
    @@ -5,7 +5,7 @@
     ---
     
    {{APIRef("WebGL")}}
    -

    WebGL API 中的 WebGLRenderingContext.shaderSource() 方法用于设置 {{domxref("WebGLShader")}} 着色器(顶点着色器及片元着色器)的 GLSL 程序代码。

    +

    WebGL API 中的 WebGLRenderingContext.shaderSource() 方法用于设置 {{domxref("WebGLShader")}} 着色器(顶点着色器及片元着色器)的 GLSL 程序代码。

    语法

    diff --git a/files/zh-cn/web/api/webglrenderingcontext/teximage2d/index.html b/files/zh-cn/web/api/webglrenderingcontext/teximage2d/index.html index f7965eb26f9577..af8db06a7e7242 100644 --- a/files/zh-cn/web/api/webglrenderingcontext/teximage2d/index.html +++ b/files/zh-cn/web/api/webglrenderingcontext/teximage2d/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef("WebGL")}}
    -

    WebGL API WebGLRenderingContext.texImage2D() 方法指定了二维纹理图像。

    +

    WebGL API WebGLRenderingContext.texImage2D() 方法指定了二维纹理图像。

    语法

    @@ -31,7 +31,7 @@

    参数

    target
    -
     {{domxref("GLenum")}} 指定纹理的绑定对象。可能的值: +
    {{domxref("GLenum")}} 指定纹理的绑定对象。可能的值:
    • gl.TEXTURE_2D: 二维纹理贴图。
    • gl.TEXTURE_CUBE_MAP_POSITIVE_X:立方体映射纹理的正 X 面。
    • @@ -43,10 +43,10 @@

      参数

    level
    -
     {{domxref("GLint")}} 指定详细级别. 0 级是基本图像等级,n 级是第 n 个金字塔简化级。
    +
    {{domxref("GLint")}} 指定详细级别. 0 级是基本图像等级,n 级是第 n 个金字塔简化级。
    internalformat
    -
     {{domxref("GLenum")}} 指定纹理中的颜色组件。
    -
    在 WebGL1 和 WebGL2 中可能的值:
    +
    {{domxref("GLenum")}} 指定纹理中的颜色组件。
    +
    在 WebGL1 和 WebGL2 中可能的值:
    描述 类型 默认值 param 的可选值 param 的可选值 Specified in
    @@ -109,7 +109,7 @@

    参数

    -
    在 WebGL2 中,对带有 ArrayBufferView 或 GLintptr offset的  texImage2D 版本,其它可能的值
    +
    在 WebGL2 中,对带有 ArrayBufferViewGLintptr offsettexImage2D 版本,其它可能的值
    @@ -681,7 +681,7 @@

    参数


    -  在 WebGL2 中,使用HTMLImageElement, HTMLCanvasElement, HTMLVideoElement, ImageBitmap, 或 ImageData作为texImage2D 纹理的版本中,可能的值有:

    + 在 WebGL2 中,使用HTMLImageElement, HTMLCanvasElement, HTMLVideoElement, ImageBitmap, 或 ImageData作为texImage2D 纹理的版本中,可能的值有:

    • gl.ALPHA: 抛弃红色、绿色和蓝色组件并读取 alpha 组件。
    • @@ -734,21 +734,21 @@

      参数

    width
    -
     {{domxref("GLsizei")}} 指定纹理的宽度。
    +
    {{domxref("GLsizei")}} 指定纹理的宽度。
    height
    {{domxref("GLsizei")}} 指定纹理的高度
    border
    -
    {{domxref("GLint")}} 指定纹理的边框宽度。必须为 0。
    +
    {{domxref("GLint")}} 指定纹理的边框宽度。必须为 0。
    format
    -
     {{domxref("GLenum")}} 指定 texel 数据格式。在 WebGL 1 中,它必须与 internalformat 相同(查看上面). 在 WebGL 2 中,这张表中列出了这些组合。
    +
    {{domxref("GLenum")}} 指定 texel 数据格式。在 WebGL 1 中,它必须与 internalformat 相同(查看上面). 在 WebGL 2 中,这张表中列出了这些组合。
    type
    -
     {{domxref("GLenum")}} 指定 texel 数据的数据类型。可能的值: +
    {{domxref("GLenum")}} 指定 texel 数据的数据类型。可能的值:
      -
    • gl.UNSIGNED_BYTE:  gl.RGBA每个通道 8 位
    • +
    • gl.UNSIGNED_BYTE: gl.RGBA每个通道 8 位
    • gl.UNSIGNED_SHORT_5_6_5: 5 bits 红,6 bits 绿,5 bits 蓝
    • gl.UNSIGNED_SHORT_4_4_4_4: 4 bits 红,4 bits 绿,4 bits 蓝,4 alpha bits.
    • gl.UNSIGNED_SHORT_5_5_5_1: 5 bits 红,5 bits 绿,5 bits 蓝,1 alpha bit.
    • -
    • 当使用 {{domxref("WEBGL_depth_texture")}} 扩展: +
    • 当使用 {{domxref("WEBGL_depth_texture")}} 扩展:
      • gl.UNSIGNED_SHORT
      • gl.UNSIGNED_INT
      • @@ -788,10 +788,10 @@

        参数

        • {{domxref("ArrayBufferView")}},
            -
          • {{jsxref("Uint8Array")}}  如果 type 是 gl.UNSIGNED_BYTE则必须使用
          • -
          • {{jsxref("Uint16Array")}} 如果 typegl.UNSIGNED_SHORT_5_6_5, gl.UNSIGNED_SHORT_4_4_4_4, gl.UNSIGNED_SHORT_5_5_5_1, gl.UNSIGNED_SHORText.HALF_FLOAT_OES则必须使用
          • -
          •  {{jsxref("Uint32Array")}} 如果type 是 gl.UNSIGNED_INT 或ext.UNSIGNED_INT_24_8_WEBGL则必须使用
          • -
          •  {{jsxref("Float32Array")}} 如果type 是 gl.FLOAT则必须使用
          • +
          • {{jsxref("Uint8Array")}} 如果 typegl.UNSIGNED_BYTE则必须使用
          • +
          • {{jsxref("Uint16Array")}} 如果 typegl.UNSIGNED_SHORT_5_6_5, gl.UNSIGNED_SHORT_4_4_4_4, gl.UNSIGNED_SHORT_5_5_5_1, gl.UNSIGNED_SHORText.HALF_FLOAT_OES则必须使用
          • +
          • {{jsxref("Uint32Array")}} 如果typegl.UNSIGNED_INText.UNSIGNED_INT_24_8_WEBGL则必须使用
          • +
          • {{jsxref("Float32Array")}} 如果typegl.FLOAT则必须使用
        • {{domxref("ImageData")}},
        • @@ -802,7 +802,7 @@

          参数

    offset
    -
     {{domxref("GLintptr")}} 类型偏移到 {{domxref("WebGLBuffer")}}的数据存储中。 用于上传数据到当前范围 {{domxref("WebGLTexture")}} 从WebGLBuffer 范围到PIXEL_UNPACK_BUFFER 目标。(仅在 WebGL 2 中 )
    +
    {{domxref("GLintptr")}} 类型偏移到 {{domxref("WebGLBuffer")}}的数据存储中。 用于上传数据到当前范围 {{domxref("WebGLTexture")}} 从WebGLBuffer 范围到PIXEL_UNPACK_BUFFER 目标。(仅在 WebGL 2 中 )
    diff --git a/files/zh-cn/web/api/webglrenderingcontext/texparameter/index.html b/files/zh-cn/web/api/webglrenderingcontext/texparameter/index.html index 89852e99997473..27414f5705fac5 100644 --- a/files/zh-cn/web/api/webglrenderingcontext/texparameter/index.html +++ b/files/zh-cn/web/api/webglrenderingcontext/texparameter/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef("WebGL")}}
    -

    WebGL API  的WebGLRenderingContext.texParameter[fi]()方法用于设置纹理参数。

    +

    WebGL APIWebGLRenderingContext.texParameter[fi]()方法用于设置纹理参数。

    语法

    @@ -32,7 +32,7 @@

    参数

    -

    pname 参数是 {{domxref("Glenum")}}  指定要设置的纹理参数。param 参数是 {{domxref("GLfloat")}} 或 {{domxref("GLint")}} 已指定的 pname参数的值。

    +

    pname 参数是 {{domxref("Glenum")}} 指定要设置的纹理参数。param 参数是 {{domxref("GLfloat")}} 或 {{domxref("GLint")}} 已指定的 pname参数的值。

    @@ -58,12 +58,12 @@

    参数

    - + - + @@ -72,7 +72,7 @@

    参数

    - + diff --git a/files/zh-cn/web/api/webglrenderingcontext/uniform/index.html b/files/zh-cn/web/api/webglrenderingcontext/uniform/index.html index 1f870920864fab..71db2489cbe9bf 100644 --- a/files/zh-cn/web/api/webglrenderingcontext/uniform/index.html +++ b/files/zh-cn/web/api/webglrenderingcontext/uniform/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef("WebGL")}}
    -

    WebGL API 的WebGLRenderingContext.uniform[1234][fi][v]() 方法指定了 uniform 变量的值。所有在 ShaderProgram 对象中定义的,且激活的 uniform 变量在 ShaderProgram 执行 link 成功后被初始化为 0。它们将保留通过调用此方法分配给它们的值,直到再次将其初始化为 0 时,也就是 ShaderProgram 对象上发生下一次成功的 link 操作为止。

    +

    WebGL APIWebGLRenderingContext.uniform[1234][fi][v]() 方法指定了 uniform 变量的值。所有在 ShaderProgram 对象中定义的,且激活的 uniform 变量在 ShaderProgram 执行 link 成功后被初始化为 0。它们将保留通过调用此方法分配给它们的值,直到再次将其初始化为 0 时,也就是 ShaderProgram 对象上发生下一次成功的 link 操作为止。

    这里描述的许多函数都扩展了 WebGL 2 接口,可在以下地址查看 {{domxref("WebGL2RenderingContext.uniform","WebGL2RenderingContext.uniform[1234][uif][v]()")}}.

    @@ -38,13 +38,13 @@

    参数

    location
    -
     {{domxref("WebGLUniformLocation")}} 对象包含了将要修改的 uniform 属性位置。
    +
    {{domxref("WebGLUniformLocation")}} 对象包含了将要修改的 uniform 属性位置。
    value, v0, v1, v2, v3
    新的值将被用于 uniform 变量。可能的类型:
    • 浮点值 {{jsxref("Number")}}(方法名跟"f").
    • -
    • 浮点数组 (例如 {{jsxref("Float32Array")}} 或 {{jsxref("Array")}} 的数组) 用于浮点型向量方法 (方法名跟 "fv").
    • -
    • 整型值 {{jsxref("Number")}}  (方法名跟"i").
    • +
    • 浮点数组 (例如 {{jsxref("Float32Array")}} 或 {{jsxref("Array")}} 的数组) 用于浮点型向量方法 (方法名跟 "fv").
    • +
    • 整型值 {{jsxref("Number")}} (方法名跟"i").
    • 整型数组{{jsxref("Int32Array")}} 用于整型向量方法 (方法名跟 "iv").
    diff --git a/files/zh-cn/web/api/webglrenderingcontext/uniformmatrix/index.html b/files/zh-cn/web/api/webglrenderingcontext/uniformmatrix/index.html index 0514931e893d6e..b3b96201173ab1 100644 --- a/files/zh-cn/web/api/webglrenderingcontext/uniformmatrix/index.html +++ b/files/zh-cn/web/api/webglrenderingcontext/uniformmatrix/index.html @@ -13,7 +13,7 @@ ---
    {{APIRef("WebGL")}}
    -

    WebGL API 的WebGLRenderingContext.uniformMatrix[234]fv() 方法为 uniform variables 指定了矩阵值 .

    +

    WebGL APIWebGLRenderingContext.uniformMatrix[234]fv() 方法为 uniform variables 指定了矩阵值 .

    该方法的 3 个版本 (uniformMatrix2fv(), uniformMatrix3fv(), 和unifomMatrix4fv()) ,分别以二阶,三阶,和四阶方阵作为输入值,它们应是分别具有 4,9,16 个浮点数的数组。

    @@ -28,12 +28,12 @@

    参数

    location
    -
    {{domxref("WebGLUniformLocation")}} 对象包含了要修改的 uniform attribute 位置。位置使用 {{domxref("WebGLRenderingContext.getUniformLocation", "getUniformLocation()")}}获得。
    +
    {{domxref("WebGLUniformLocation")}} 对象包含了要修改的 uniform attribute 位置。位置使用 {{domxref("WebGLRenderingContext.getUniformLocation", "getUniformLocation()")}}获得。
    transpose
    {{domxref("GLboolean")}} 指定是否转置矩阵。必须为 false.
    value
    -

     {{jsxref("Float32Array")}} 型或者是 GLfloat 序列值。假定值以列主要顺序提供。

    +

    {{jsxref("Float32Array")}} 型或者是 GLfloat 序列值。假定值以列主要顺序提供。

    diff --git a/files/zh-cn/web/api/webglrenderingcontext/useprogram/index.html b/files/zh-cn/web/api/webglrenderingcontext/useprogram/index.html index 1cb8cd93251d93..b6756c57f39715 100644 --- a/files/zh-cn/web/api/webglrenderingcontext/useprogram/index.html +++ b/files/zh-cn/web/api/webglrenderingcontext/useprogram/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef("WebGL")}}
    -

     WebGLRenderingContext.useProgram() 方法将定义好的{{domxref("WebGLProgram")}} 对象添加到当前的渲染状态中。

    +

    WebGLRenderingContext.useProgram() 方法将定义好的{{domxref("WebGLProgram")}} 对象添加到当前的渲染状态中。

    语法

    diff --git a/files/zh-cn/web/api/webglrenderingcontext/validateprogram/index.html b/files/zh-cn/web/api/webglrenderingcontext/validateprogram/index.html index be0cfdffc0f931..c9f1221617a563 100644 --- a/files/zh-cn/web/api/webglrenderingcontext/validateprogram/index.html +++ b/files/zh-cn/web/api/webglrenderingcontext/validateprogram/index.html @@ -10,7 +10,7 @@ ---
    {{APIRef("WebGL")}}
    -

    WebGLRenderingContext.validateProgram() 是一种 WebGL API ,主要是用来验证 {{domxref("WebGLProgram")}}。 它在检查 WebGLProgram 程序是否链接成功的同时还会检查其是否能在当前的 WebGL 中使用。

    +

    WebGLRenderingContext.validateProgram() 是一种 WebGL API ,主要是用来验证 {{domxref("WebGLProgram")}}。 它在检查 WebGLProgram 程序是否链接成功的同时还会检查其是否能在当前的 WebGL 中使用。

    语法

    diff --git a/files/zh-cn/web/api/webglrenderingcontext/vertexattrib/index.html b/files/zh-cn/web/api/webglrenderingcontext/vertexattrib/index.html index f957b532ca1f12..e665186b2b6dd7 100644 --- a/files/zh-cn/web/api/webglrenderingcontext/vertexattrib/index.html +++ b/files/zh-cn/web/api/webglrenderingcontext/vertexattrib/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef("WebGL")}}
    -

     WebGLRenderingContext.vertexAttrib[1234]f[v]() 是 WebGL API 的方法,可以为顶点 attibute 变量赋值。

    +

    WebGLRenderingContext.vertexAttrib[1234]f[v]()WebGL API 的方法,可以为顶点 attibute 变量赋值。

    语法

    @@ -24,7 +24,7 @@

    Parameters

    index
    -
     {{domxref("GLuint")}} 类型,指定了待修改顶点 attribute 变量的存储位置。
    +
    {{domxref("GLuint")}} 类型,指定了待修改顶点 attribute 变量的存储位置。
    v0, v1, v2, v3
    浮点数类型{{jsxref("Number")}},用于设置顶点 attibute 变量的各分量值。
    value
    diff --git a/files/zh-cn/web/api/webglrenderingcontext/vertexattribpointer/index.html b/files/zh-cn/web/api/webglrenderingcontext/vertexattribpointer/index.html index 2c00e04e6e9ef4..421f72351dafed 100644 --- a/files/zh-cn/web/api/webglrenderingcontext/vertexattribpointer/index.html +++ b/files/zh-cn/web/api/webglrenderingcontext/vertexattribpointer/index.html @@ -64,7 +64,7 @@

    Parameters

    一个 GLsizei,以字节为单位指定连续顶点属性开始之间的偏移量 (即数组中一行长度)。不能大于 255。如果 stride 为 0,则假定该属性是紧密打包的,即不交错属性,每个属性在一个单独的块中,下一个顶点的属性紧跟当前顶点之后。
    offset
    -
    A {{domxref("GLintptr")}} specifying an offset in bytes of the first component in the vertex attribute array. Must be a multiple of the byte length of type.
    +
    A {{domxref("GLintptr")}} specifying an offset in bytes of the first component in the vertex attribute array. Must be a multiple of the byte length of type.
    {{domxref("GLintptr")}}指定顶点属性数组中第一部分的字节偏移量。必须是类型的字节长度的倍数。
    diff --git a/files/zh-cn/web/api/webglsampler/index.html b/files/zh-cn/web/api/webglsampler/index.html index b373c106ae5faa..d57b20b48fa20b 100644 --- a/files/zh-cn/web/api/webglsampler/index.html +++ b/files/zh-cn/web/api/webglsampler/index.html @@ -11,9 +11,9 @@ ---
    {{APIRef("WebGL")}} {{SeeCompatTable}}
    -

    WebGL 2 API 的 WebGLSampler 接口存储一系列采样参数,供 {{domxref("WebGLTexture")}} 在着色器中访问。

    +

    WebGL 2 API 的 WebGLSampler 接口存储一系列采样参数,供 {{domxref("WebGLTexture")}} 在着色器中访问。

    -

    当使用 WebGLSampler 对象时,有以下 {{domxref("WebGL2RenderingContext")}} 相关方法:

    +

    当使用 WebGLSampler 对象时,有以下 {{domxref("WebGL2RenderingContext")}} 相关方法:

    • {{domxref("WebGL2RenderingContext.createSampler()")}}
    • @@ -25,9 +25,9 @@

      示例

      -

      创建 WebGLSampler 对象

      +

      创建 WebGLSampler 对象

      -

      在本例中,gl 必须是一个 {{domxref("WebGL2RenderingContext")}} 对象。因为 WebGLSampler 在 WebGL 1 中是不可用的。

      +

      在本例中,gl 必须是一个 {{domxref("WebGL2RenderingContext")}} 对象。因为 WebGLSampler 在 WebGL 1 中是不可用的。

      var sampler = gl.createSampler();
       
      diff --git a/files/zh-cn/web/api/webglshader/index.html b/files/zh-cn/web/api/webglshader/index.html index 52d716a191bd8a..8f4bfc7ae31be9 100644 --- a/files/zh-cn/web/api/webglshader/index.html +++ b/files/zh-cn/web/api/webglshader/index.html @@ -9,11 +9,11 @@ ---
      {{APIRef("WebGL")}}
      -

      WebGL API 的 WebGLShader 可以是一个顶点着色器(vertex shader)或片元着色器(fragment shader)。每个 {{domxref("WebGLProgram")}} 都需要这两种类型的着色器。

      +

      WebGL APIWebGLShader 可以是一个顶点着色器(vertex shader)或片元着色器(fragment shader)。每个 {{domxref("WebGLProgram")}} 都需要这两种类型的着色器。

      描述

      -

      要创建一个 WebGLShader 需要使用 {{domxref("WebGLRenderingContext.createShader")}},通过 {{domxref("WebGLRenderingContext.shaderSource()")}} 然后挂接 GLSL 源代码 , 最后调用 {{domxref("WebGLRenderingContext.compileShader()")}} 完成着色器(shader)的编译。 此时 WebGLShader 仍不是可用的形式,他需要被添加到一个 {{domxref("WebGLProgram")}}里。

      +

      要创建一个 WebGLShader 需要使用 {{domxref("WebGLRenderingContext.createShader")}},通过 {{domxref("WebGLRenderingContext.shaderSource()")}} 然后挂接 GLSL 源代码 , 最后调用 {{domxref("WebGLRenderingContext.compileShader()")}} 完成着色器(shader)的编译。 此时 WebGLShader 仍不是可用的形式,他需要被添加到一个 {{domxref("WebGLProgram")}}里。

      function createShader (gl, sourceCode, type) {
         // Compiles either a shader of type gl.VERTEX_SHADER or gl.FRAGMENT_SHADER
      @@ -35,7 +35,7 @@ 

      范例

      创建一个顶点着色器( vertex shader)

      -

      注意,有很多其他方式编译和访问着色器(shader)源代码字符串. 这些示例仅用于例证说明。

      +

      注意,有很多其他方式编译和访问着色器(shader)源代码字符串. 这些示例仅用于例证说明。

      var vertexShaderSource =
         "attribute vec4 position;\n"+
      diff --git a/files/zh-cn/web/api/webglshaderprecisionformat/index.html b/files/zh-cn/web/api/webglshaderprecisionformat/index.html
      index 874b68ddb7ba03..9a3e1fbb25d935 100644
      --- a/files/zh-cn/web/api/webglshaderprecisionformat/index.html
      +++ b/files/zh-cn/web/api/webglshaderprecisionformat/index.html
      @@ -18,7 +18,7 @@ 

      属性

      示例

      -

      WebGLShaderPrecisionFormat 对象通过{{domxref("WebGLRenderingContext.getShaderPrecisionFormat()")}} 方法来返回。

      +

      WebGLShaderPrecisionFormat 对象通过{{domxref("WebGLRenderingContext.getShaderPrecisionFormat()")}} 方法来返回。

      var canvas = document.getElementById('canvas');
       var gl = canvas.getContext('webgl');
      diff --git a/files/zh-cn/web/api/webglvertexarrayobject/index.html b/files/zh-cn/web/api/webglvertexarrayobject/index.html
      index 2b0cb7ff86aa4b..fe684288b43bc4 100644
      --- a/files/zh-cn/web/api/webglvertexarrayobject/index.html
      +++ b/files/zh-cn/web/api/webglvertexarrayobject/index.html
      @@ -22,7 +22,7 @@
       
    -

    WebGL 1:  {{domxref("OES_vertex_array_object")}} 扩展允许你在 WebGL 1 上下文环境中使用顶点数组对象。

    +

    WebGL 1: {{domxref("OES_vertex_array_object")}} 扩展允许你在 WebGL 1 上下文环境中使用顶点数组对象。

    示例

    diff --git a/files/zh-cn/web/api/webrtc_api/adapter.js/index.html b/files/zh-cn/web/api/webrtc_api/adapter.js/index.html index 818952ae52cf63..7d58ca40f07547 100644 --- a/files/zh-cn/web/api/webrtc_api/adapter.js/index.html +++ b/files/zh-cn/web/api/webrtc_api/adapter.js/index.html @@ -5,10 +5,10 @@ ---

    {{WebRTCSidebar}}

    -

    虽然 WebRTC 规范已经相对健全稳固了,但是并不是所有的浏览器都实现了它所有的功能。除此之外。有些浏览器需要在一些或者所有的 WebRTC API 上添加前缀才能正常使用。尽管你可以自己写代码解决这种问题,但是还有一个比较简单的方法。WebRTC 组织在 github 上提供了一个 WebRTC 适配器(WebRTC adapter)来解决在不同浏览器上实现 WebRTC 的兼容性问题。这个适配器是一个 JavaScript 垫片,它可以让你根据 WebRTC 规范描述的那样去写代码,在所有支持 WebRTC 的浏览器中不用去写前缀或者其他兼容性解决方法。

    +

    虽然 WebRTC 规范已经相对健全稳固了,但是并不是所有的浏览器都实现了它所有的功能。除此之外。有些浏览器需要在一些或者所有的 WebRTC API 上添加前缀才能正常使用。尽管你可以自己写代码解决这种问题,但是还有一个比较简单的方法。WebRTC 组织在 github 上提供了一个 WebRTC 适配器(WebRTC adapter)来解决在不同浏览器上实现 WebRTC 的兼容性问题。这个适配器是一个 JavaScript 垫片,它可以让你根据 WebRTC 规范描述的那样去写代码,在所有支持 WebRTC 的浏览器中不用去写前缀或者其他兼容性解决方法。

    -

    注意: 由于 WebRTC 和支持的浏览器中的 API 的功能和命名在不断变动,推荐使用这个适配器。

    +

    注意: 由于 WebRTC 和支持的浏览器中的 API 的功能和命名在不断变动,推荐使用这个适配器。

    这个 adapter(适配器)是基于 BSD 开源协议的。

    @@ -23,7 +23,7 @@

    adapter.js 是干什么的

    使用 adapter.js

    -

    要使用 adapter.js,你需要在使用 WebRTC APIs 的每个页面都引入 adapter.js :

    +

    要使用 adapter.js,你需要在使用 WebRTC APIs 的每个页面都引入 adapter.js :

    1. 从 GitHub 上下载一个最新adapter.js的副本。
    2. diff --git a/files/zh-cn/web/api/webrtc_api/connectivity/index.html b/files/zh-cn/web/api/webrtc_api/connectivity/index.html index 2f4b1cd44900b6..89cdec17ba6cbc 100644 --- a/files/zh-cn/web/api/webrtc_api/connectivity/index.html +++ b/files/zh-cn/web/api/webrtc_api/connectivity/index.html @@ -39,16 +39,16 @@

      会话描述

      在首次建立呼叫时,还可以在呼叫格式或其他配置需要更改的任何时候执行提议/应答过程。 无论是新呼叫还是重新配置现有的呼叫,这些都是交换提议和回答所必需的基本步骤,暂时忽略了 ICE 层:

        -
      1. 呼叫者通过 {{domxref("navigator.mediaDevices.getUserMedia()")}} 捕捉本地媒体。
      2. -
      3. 呼叫者创建一个RTCPeerConnection 并调用 {{domxref("RTCPeerConnection.addTrack()")}} (注: addStream 已经过时。)
      4. +
      5. 呼叫者通过 {{domxref("navigator.mediaDevices.getUserMedia()")}} 捕捉本地媒体。
      6. +
      7. 呼叫者创建一个RTCPeerConnection 并调用 {{domxref("RTCPeerConnection.addTrack()")}} (注: addStream 已经过时。)
      8. 呼叫者调用 {{domxref("RTCPeerConnection.createOffer()")}} 来创建一个提议 (offer).
      9. 呼叫者调用 {{domxref("RTCPeerConnection.setLocalDescription()")}} 将提议 (Offer) 设置为本地描述 (即,连接的本地描述).
      10. -
      11. setLocalDescription() 之后,呼叫者请求 STUN 服务创建 ice 候选 (ice candidates)
      12. -
      13. 呼叫者通过信令服务器将提议 (offer) 传递至 本次呼叫的预期的接受者。
      14. +
      15. setLocalDescription() 之后,呼叫者请求 STUN 服务创建 ice 候选 (ice candidates)
      16. +
      17. 呼叫者通过信令服务器将提议 (offer) 传递至 本次呼叫的预期的接受者。
      18. 接受者收到了提议 (offer) 并调用 {{domxref("RTCPeerConnection.setRemoteDescription()")}} 将其记录为远程描述 (也就是连接的另一端的描述).
      19. 接受者做一些可能需要的步骤结束本次呼叫:捕获本地媒体,然后通过{{domxref("RTCPeerConnection.addTrack()")}}添加到连接中。
      20. 接受者通过 {{domxref("RTCPeerConnection.createAnswer()")}} 创建一个应答。
      21. -
      22. 接受者调用 {{domxref("RTCPeerConnection.setLocalDescription()")}} 将应答 (answer)   设置为本地描述。此时,接受者已经获知连接双方的配置了。
      23. +
      24. 接受者调用 {{domxref("RTCPeerConnection.setLocalDescription()")}} 将应答 (answer) 设置为本地描述。此时,接受者已经获知连接双方的配置了。
      25. 接受者通过信令服务器将应答传递到呼叫者。
      26. 呼叫者接受到应答。
      27. 呼叫者调用 {{domxref("RTCPeerConnection.setRemoteDescription()")}} 将应答设定为远程描述。如此,呼叫者已经获知连接双方的配置了。
      28. diff --git a/files/zh-cn/web/api/webrtc_api/protocols/index.html b/files/zh-cn/web/api/webrtc_api/protocols/index.html index 09aa8f4a9bc666..1b710bcc332da7 100644 --- a/files/zh-cn/web/api/webrtc_api/protocols/index.html +++ b/files/zh-cn/web/api/webrtc_api/protocols/index.html @@ -21,7 +21,7 @@

        ICE

        -

        交互式连接设施Interactive Connectivity Establishment (ICE) 是一个允许你的浏览器和对端浏览器建立连接的协议框架。在实际的网络当中,有很多原因能导致简单的从 A 端到 B 端直连不能如愿完成。这需要绕过阻止建立连接的防火墙,给你的设备分配一个唯一可见的地址(通常情况下我们的大部分设备没有一个固定的公网地址),如果路由器不允许主机直连,还得通过一台服务器转发数据。ICE 通过使用以下几种技术完成上述工作。

        +

        交互式连接设施Interactive Connectivity Establishment (ICE) 是一个允许你的浏览器和对端浏览器建立连接的协议框架。在实际的网络当中,有很多原因能导致简单的从 A 端到 B 端直连不能如愿完成。这需要绕过阻止建立连接的防火墙,给你的设备分配一个唯一可见的地址(通常情况下我们的大部分设备没有一个固定的公网地址),如果路由器不允许主机直连,还得通过一台服务器转发数据。ICE 通过使用以下几种技术完成上述工作。

        STUN

        @@ -33,7 +33,7 @@

        STUN

        NAT

        -

        网络地址转换协议Network Address Translation (NAT) 用来给你的(私网)设备映射一个公网的 IP 地址的协议。一般情况下,路由器的 WAN 口有一个公网 IP,所有连接这个路由器 LAN 口的设备会分配一个私有网段的 IP 地址(例如 192.168.1.3)。私网设备的 IP 被映射成路由器的公网 IP 和唯一的端口,通过这种方式不需要为每一个私网设备分配不同的公网 IP,但是依然能被外网设备发现。

        +

        网络地址转换协议Network Address Translation (NAT) 用来给你的(私网)设备映射一个公网的 IP 地址的协议。一般情况下,路由器的 WAN 口有一个公网 IP,所有连接这个路由器 LAN 口的设备会分配一个私有网段的 IP 地址(例如 192.168.1.3)。私网设备的 IP 被映射成路由器的公网 IP 和唯一的端口,通过这种方式不需要为每一个私网设备分配不同的公网 IP,但是依然能被外网设备发现。

        一些路由器严格地限定了部分私网设备的对外连接。这种情况下,即使 STUN 服务器识别了该私网设备的公网 IP 和端口的映射,依然无法和这个私网设备建立连接。这种情况下就需要转向 TURN 协议。

        @@ -41,13 +41,13 @@

        TURN

        一些路由器使用一种“对称型 NAT”的 NAT 模型。这意味着路由器只接受和对端先前建立的连接(就是下一次请求建立新的连接映射)。

        -

        NAT 的中继穿越方式Traversal Using Relays around NAT (TURN) 通过 TURN 服务器中继所有数据的方式来绕过“对称型 NAT”。你需要在 TURN 服务器上创建一个连接,然后告诉所有对端设备发包到服务器上,TURN 服务器再把包转发给你。很显然这种方式是开销很大的,所以只有在没得选择的情况下采用。

        +

        NAT 的中继穿越方式Traversal Using Relays around NAT (TURN) 通过 TURN 服务器中继所有数据的方式来绕过“对称型 NAT”。你需要在 TURN 服务器上创建一个连接,然后告诉所有对端设备发包到服务器上,TURN 服务器再把包转发给你。很显然这种方式是开销很大的,所以只有在没得选择的情况下采用。

        An interaction between two users of a WebRTC application involving STUN and TURN servers.

        SDP

        -

        会话描述协议Session Description Protocol (SDP) 是一个描述多媒体连接内容的协议,例如分辨率,格式,编码,加密算法等。所以在数据传输时两端都能够理解彼此的数据。本质上,这些描述内容的元数据并不是媒体流本身。

        +

        会话描述协议Session Description Protocol (SDP) 是一个描述多媒体连接内容的协议,例如分辨率,格式,编码,加密算法等。所以在数据传输时两端都能够理解彼此的数据。本质上,这些描述内容的元数据并不是媒体流本身。

        从技术上讲,SDP 并不是一个真正的协议,而是一种数据格式,用于描述在设备之间共享媒体的连接。

        diff --git a/files/zh-cn/web/api/webrtc_api/session_lifetime/index.html b/files/zh-cn/web/api/webrtc_api/session_lifetime/index.html index 52fba98d0e8d4c..0cb49f5e626336 100644 --- a/files/zh-cn/web/api/webrtc_api/session_lifetime/index.html +++ b/files/zh-cn/web/api/webrtc_api/session_lifetime/index.html @@ -57,7 +57,7 @@

        信令过程

      29. 呼叫者创建并与接收者共享一个唯一的标识符或某种令牌,使得它们之间的呼叫可以由信令服务器上的代码来识别。此标识符的确切内容和形式取决于您。
      30. 每个 Peer 连接到一个约定的信令服务器,如 WebSocket 服务器,他们都知道如何与之交换消息。
      31. 每个 Peer 告知信令服务器他们想加入同一 WebRTC 会话(由步骤 4 中建立的令牌标识)。
      32. -
      33. 描述,候选地址等 -- 之后会有更多
      34. +
      35. 描述,候选地址等 -- 之后会有更多

      ICE 重连

      @@ -80,10 +80,10 @@

      getUserMedia(获取用户媒体

      接收

      -

      WebRTC 在 Firefox 浏览器的偏好选择选项是隐藏的。可以到 about:config 这个页面设置 'media.navigator.enabled' 为 'true'。

      +

      WebRTC 在 Firefox 浏览器的偏好选择选项是隐藏的。可以到 about:config 这个页面设置 'media.navigator.enabled' 为 'true'。

      -

      在 Source tree 中有一些测试文件可以提供给您关于 WebRTC 如何工作的一个想法。具体例子请查看:dom/media/tests/local_video_test.html。您也可以尝试 服务器 demo ,源代码: server source

      +

      在 Source tree 中有一些测试文件可以提供给您关于 WebRTC 如何工作的一个想法。具体例子请查看:dom/media/tests/local_video_test.html。您也可以尝试 服务器 demo ,源代码: server source

      -

       

      +

      diff --git a/files/zh-cn/web/api/webrtc_api/signaling_and_video_calling/index.html b/files/zh-cn/web/api/webrtc_api/signaling_and_video_calling/index.html index 636ad94e86983e..b57c27ac3b66b0 100644 --- a/files/zh-cn/web/api/webrtc_api/signaling_and_video_calling/index.html +++ b/files/zh-cn/web/api/webrtc_api/signaling_and_video_calling/index.html @@ -9,7 +9,7 @@

      WebRTC是一个完全对等技术,用于实时交换音频、视频和数据,同时提供一个中心警告。如其他地方所讨论的,必须进行一种发现和媒体格式协商,以使不同网络上的两个设备相互定位。这个过程被称为信令,并涉及两个设备连接到第三个共同商定的服务器。通过这个第三方服务器,这两台设备可以相互定位,并交换协商消息。

      -

      在本文中,我们将进一步扩充 WebSocket chat 作为我们的 WebSocket 文档的一部分(本文链接即将发布;它实际上还没有在线),以支持在用户之间的双向视频通话。你可以在Glitch上查看这个例子,你也尝试修改这个例子。您还可以在GitHub上查看完整的项目代码。

      +

      在本文中,我们将进一步扩充 WebSocket chat 作为我们的 WebSocket 文档的一部分(本文链接即将发布;它实际上还没有在线),以支持在用户之间的双向视频通话。你可以在Glitch上查看这个例子,你也尝试修改这个例子。您还可以在GitHub上查看完整的项目代码。

      注意:如果你尝试在 Glitch 的例子,请注意任何代码的改动将立即重置所有连接。并且这个例子有短暂的延迟;Glitch 的例子仅仅作为简单的实验和测试用途。

      @@ -19,19 +19,19 @@

      信令服务器

      两个设备之间建立 WebRTC 连接需要一个信令服务器来实现双方通过网络进行连接。信令服务器的作用是作为一个中间人帮助双方在尽可能少的暴露隐私的情况下建立连接。那我们如何实现这个服务器并且它是如何工作的呢?

      -

      WebRTC 并没有提供信令传递机制,你可以使用任何你喜欢的方式如WebSocket 或者{{domxref("XMLHttpRequest")}} 等等,来交换彼此的令牌信息。

      +

      WebRTC 并没有提供信令传递机制,你可以使用任何你喜欢的方式如WebSocket 或者{{domxref("XMLHttpRequest")}} 等等,来交换彼此的令牌信息。

      重要的是信令服务器并不需要理解和解释信令数据内容。虽然它基于 {{Glossary("SDP")}}但这并不重要:通过信令服务器的消息的内容实际上是一个黑盒。重要的是,当{{Glossary("ICE")}}子系统指示你将信令数据发送给另一个对等方时,你就这样做,而另一个对等方知道如何接收此信息并将其传递给自己的 ICE 子系统。你所要做的就是来回传递信息。内容对信令服务器一点都不重要。

      开始准备聊天服务器来处理信令

      -

      我们的聊天服务器和客户端使用 WebSocket API  {{Glossary("JSON")}} 格式的字符串来传递数据。服务器支持多种消息格式来处理不同的任务,比如注册新用户、设置用户名、发送公共信息等等。

      +

      我们的聊天服务器和客户端使用 WebSocket API {{Glossary("JSON")}} 格式的字符串来传递数据。服务器支持多种消息格式来处理不同的任务,比如注册新用户、设置用户名、发送公共信息等等。

      为了让服务器支持信令和 ICE 协商,我们需要升级代码,我们需要直接发送聊天系统到指定的用户而不是发送给所有人,并且保证服务器在不需要理解数据内容的情况下传递未被认可的任何消息类型。这让我们可以使用一台服务器来传递信令和消息而不是多台。

      -

      让我们看一下我们还需要做些什么让它支持 WebRTC 信令。代码在 chatserver.js.中实现。

      +

      让我们看一下我们还需要做些什么让它支持 WebRTC 信令。代码在 chatserver.js.中实现。

      -

      首先来看 sendToOneUser()  函数,如名所示它发送 JSON 字符串到指定的用户。

      +

      首先来看 sendToOneUser() 函数,如名所示它发送 JSON 字符串到指定的用户。

      function sendToOneUser(target, msgString) {
         var isUnique = true;
      @@ -45,9 +45,9 @@ 

      开始准备聊天服务器 } }

      -

      这个函数遍历所有在线用户直到找到给定的用户名然后发送数据 msgString 一个 JSON 字符串对象,我们可以让它接收我们的原始消息对象,但是在当前这种情况下它的效率更高因为我们的消息已经字符串化了,我们达到了不需要进一步处理就可以发送消息的目的。

      +

      这个函数遍历所有在线用户直到找到给定的用户名然后发送数据 msgString 一个 JSON 字符串对象,我们可以让它接收我们的原始消息对象,但是在当前这种情况下它的效率更高因为我们的消息已经字符串化了,我们达到了不需要进一步处理就可以发送消息的目的。

      -

      我们原来的 DEMO 不能发送消息到指定的用户,我们可以通过修改 WebSocket 消息处理句柄来实现这个功能,这需要在 connection.on() 尾部修改。

      +

      我们原来的 DEMO 不能发送消息到指定的用户,我们可以通过修改 WebSocket 消息处理句柄来实现这个功能,这需要在 connection.on() 尾部修改。

      if (sendToClients) {
         var msgString = JSON.stringify(msg);
      @@ -64,7 +64,7 @@ 

      开始准备聊天服务器 } }

      -

      代码会检查我们的数据是否提供了 target 属性。这个属性包含了我们想要发送给的人的用户名。如果提供了 target 属性,通过调用 sendToOneUser() 消息将只发送给指定的人。否则的话将遍历在线列表发送给每一个人。

      +

      代码会检查我们的数据是否提供了 target 属性。这个属性包含了我们想要发送给的人的用户名。如果提供了 target 属性,通过调用 sendToOneUser() 消息将只发送给指定的人。否则的话将遍历在线列表发送给每一个人。

      由于现行的代码可以发送任意类型的消息,所以我们不需要做任何的修改。现在我们的客户端可以发送任意消息给指定的用户。

      @@ -72,17 +72,17 @@

      开始准备聊天服务器

      设计信令协议

      -

       现在我们要构建一套信息交换规则,我们需要一套协议来定义消息格式。实现这个有好多种办法,demo 里只是其中一种,并不是唯一。

      +

      现在我们要构建一套信息交换规则,我们需要一套协议来定义消息格式。实现这个有好多种办法,demo 里只是其中一种,并不是唯一。

      例子中的服务器使用字符串化的 JSON 对象来和客户端通信,意味着我们的信令消息也将使用 JSON 格式,其内容指定消息类型和如何处理这些消息。

      交换会话描述信息

      -

      开始处理信号的时候,用户的初始化操作会创建一个请求(offer) ,根据 {{Glossary("SDP")}} 协议其中会包含一个 session 描述符,并且需要把这个发送到我们称之为接收者(callee)那里, 接受者需要返回一个包含描述符的应答(answer)信息。我们的服务器使用 WebSocket 来传递 "video-offer" "video-answer"  两种类型的消息数据。这些消息包含以下属性:

      +

      开始处理信号的时候,用户的初始化操作会创建一个请求(offer) ,根据 {{Glossary("SDP")}} 协议其中会包含一个 session 描述符,并且需要把这个发送到我们称之为接收者(callee)那里, 接受者需要返回一个包含描述符的应答(answer)信息。我们的服务器使用 WebSocket 来传递 "video-offer" "video-answer" 两种类型的消息数据。这些消息包含以下属性:

      -
       type
      -
      消息类型; "video-offer" 或 "video-answer"
      +
      type
      +
      消息类型; "video-offer""video-answer"
      name
      发送者用户名
      target
      @@ -97,17 +97,17 @@

      交换 ICE 候选

      两个节点需要交换 ICE 候选来协商他们自己具体如何连接。每一个 ICE 候选描述一个发送者使用的通信方法,每个节点按照他们被发现的顺序发送候选并且保持发送直到退出,即使媒体数据流已经开始传递也要如此。

      -

      使用 pc.setLocalDescription(offer) 添加本地描述符后一个 icecandidate 事件将被发送到 {{domxref("RTCPeerConnection")}} 

      +

      使用 pc.setLocalDescription(offer) 添加本地描述符后一个 icecandidate 事件将被发送到 {{domxref("RTCPeerConnection")}}

      一旦两端同意了一个互相兼容的候选,该候选的 SDP 就被用来创建并打开一个连接,通过该连接媒体流就开始运转。如果之后他们同意了一个更好(通常更高效)的候选,流亦会按需变更格式。

      虽然当前并未被支持,一个候选在媒体流已经开始运转之后理论上如果需要的话也可以降级至一个低带宽的连接。

      -

      每个 ICE 候选通过信令服务器发送一个 "new-ice-candidate" 类型的 JSON 信息来送给远程的另一端。每个候选信息包括以下字段:

      +

      每个 ICE 候选通过信令服务器发送一个 "new-ice-candidate" 类型的 JSON 信息来送给远程的另一端。每个候选信息包括以下字段:

      类型
      -
      消息类型: "new-ice-candidate".
      +
      消息类型: "new-ice-candidate".
      目标
      待建立联系人的用户名;服务器将仅会管理与该用户的信息。
      候选
      @@ -117,7 +117,7 @@

      交换 ICE 候选

      每个 ICE 消息都建议提供一个通信协议(TCP 或 UDP)、IP 地址、端口号、连接类型(例如,指定的 IP 是对等机本身还是中继服务器),以及将两台计算机连接在一起所需的其他信息。这包括 NAT 或其他网络问题。

      -

      注意: 最需要注意的是:你的代码在 ICE 协商期间唯一需要负责的是从 ICE 层接受外向候选并通过与另一端的信号连接发送他们,当你的  {{domxref("RTCPeerConnection.onicecandidate", "onicecandidate")}} 控制器已经执行后,同时从信令服务器接收 ICE 候选消息 (当接收到 "new-ice-candidate" 消息时) 然后通过调用{{domxref("RTCPeerConnection.addIceCandidate()")}}发送他们到你的 ICE 层。 嗯,就是这样。

      +

      注意: 最需要注意的是:你的代码在 ICE 协商期间唯一需要负责的是从 ICE 层接受外向候选并通过与另一端的信号连接发送他们,当你的 {{domxref("RTCPeerConnection.onicecandidate", "onicecandidate")}} 控制器已经执行后,同时从信令服务器接收 ICE 候选消息 (当接收到 "new-ice-candidate" 消息时) 然后通过调用{{domxref("RTCPeerConnection.addIceCandidate()")}}发送他们到你的 ICE 层。 嗯,就是这样。

      SDP 的内容基本上在所有情况下都是与你不相关的。在你真正知道自己在做什么之前,不要试图让事情变得更复杂。否则情况会非常混乱。

      @@ -175,19 +175,19 @@

      更新 HTML

      </div> </div> -

      此处定义的页面结构使用了 {{HTMLElement("div")}} 元素,通过启用 CSS,我们可以完全控制页面布局。我们将跳过本指南中的布局细节,但你可以看看 GitHub 上的 CSS,了解如何处理它。 注意这两个 {{HTMLElement("video")}} 元素,一个用于观看自己,一个用于连接,还有 {{HTMLElement("button")}} 元素。

      +

      此处定义的页面结构使用了 {{HTMLElement("div")}} 元素,通过启用 CSS,我们可以完全控制页面布局。我们将跳过本指南中的布局细节,但你可以看看 GitHub 上的 CSS,了解如何处理它。 注意这两个 {{HTMLElement("video")}} 元素,一个用于观看自己,一个用于连接,还有 {{HTMLElement("button")}} 元素。

      -

       id  为 "received_video" 的 <video> 元素将显示从连接的用户接收的视频。我们指定了autoplay 属性,确保一旦视频到达,它立即播放。这消除了在代码中显式处理回放的任何需要。"local_video<video> 元素显示用户相机的预览;指定 muted 属性,因为我们不需要在此预览面板中听到本地音频。

      +

      id 为 "received_video" 的 <video> 元素将显示从连接的用户接收的视频。我们指定了autoplay 属性,确保一旦视频到达,它立即播放。这消除了在代码中显式处理回放的任何需要。"local_video" <video> 元素显示用户相机的预览;指定 muted 属性,因为我们不需要在此预览面板中听到本地音频。

      -

      最后,定义"hangup-button" {{HTMLElement("button")}} 来挂断一个呼叫,并将其配置为禁用启动(将此设置为未连接任何调用时的默认设置),并在单击时调用函数  hangUpCall() 。这个函数的作用是关闭调用,并向另一个对等端发送一个信号服务器通知,请求它也关闭。

      +

      最后,定义"hangup-button" {{HTMLElement("button")}} 来挂断一个呼叫,并将其配置为禁用启动(将此设置为未连接任何调用时的默认设置),并在单击时调用函数 hangUpCall() 。这个函数的作用是关闭调用,并向另一个对等端发送一个信号服务器通知,请求它也关闭。

      JavaScript 代码

      -

      我们将把这段代码划分为多个功能区,以便更容易地描述它是如何工作的。该代码的主体位于 connect() 函数中:它在 6503 端口上打开一个{{domxref("WebSocket")}} 服务器,并建立一个处理程序来接收 JSON 对象格式的消息。此代码通常像以前那样处理文本聊天消息。

      +

      我们将把这段代码划分为多个功能区,以便更容易地描述它是如何工作的。该代码的主体位于 connect() 函数中:它在 6503 端口上打开一个{{domxref("WebSocket")}} 服务器,并建立一个处理程序来接收 JSON 对象格式的消息。此代码通常像以前那样处理文本聊天消息。

      向信令服务器发送信息

      -

      在整个代码中,我们调用 sendToServer() 以便向信令服务器发送消息。此函数使用WebSocket连接执行其工作:

      +

      在整个代码中,我们调用 sendToServer() 以便向信令服务器发送消息。此函数使用WebSocket连接执行其工作:

      function sendToServer(msg) {
         var msgJSON = JSON.stringify(msg);
      @@ -199,7 +199,7 @@ 

      向信令服务器发送信息开始通话的交互

      -

      处理 "userlist" 消息的代码会调用 handleUserlistMsg()。在这里,我们在聊天面板左侧显示的用户列表中为每个连接的用户设置处理程序。此方法接收一个消息对象,其 users 属性是一个字符串数组,指定每个连接用户的用户名。

      +

      处理 "userlist" 消息的代码会调用 handleUserlistMsg()。在这里,我们在聊天面板左侧显示的用户列表中为每个连接的用户设置处理程序。此方法接收一个消息对象,其 users 属性是一个字符串数组,指定每个连接用户的用户名。

      function handleUserlistMsg(msg) {
         var i;
      @@ -218,17 +218,17 @@ 

      开始通话的交互

      }); }
      -

      在获得对 {{HTMLElement("ul")}} 的引用(其中包含变量 listElem中的用户名列表)后,我们通过删除其每个子元素清空列表。

      +

      在获得对 {{HTMLElement("ul")}} 的引用(其中包含变量 listElem中的用户名列表)后,我们通过删除其每个子元素清空列表。

      注意:显然,通过添加和删除单个用户而不是每次更改时都重新构建整个列表来更新列表会更有效,但对于本例而言,这已经足够好了。

      -

      然后我们使用 {{jsxref("Array.forEach", "forEach()")}} 迭代用户名数组。对于每个名称,我们创建一个新的 {{HTMLElement("li")}} 元素,然后使用{{domxref("Document.createTextNode", "createTextNode()")}} 创建一个包含用户名的新文本节点。该文本节点被添加为 <li> 元素的子节点。接下来,我们为列表项上的 {{event("click")}} 事件设置一个处理程序,单击用户名将调用 invite() 方法,我们将在下一节中查看该方法。

      +

      然后我们使用 {{jsxref("Array.forEach", "forEach()")}} 迭代用户名数组。对于每个名称,我们创建一个新的 {{HTMLElement("li")}} 元素,然后使用{{domxref("Document.createTextNode", "createTextNode()")}} 创建一个包含用户名的新文本节点。该文本节点被添加为 <li> 元素的子节点。接下来,我们为列表项上的 {{event("click")}} 事件设置一个处理程序,单击用户名将调用 invite() 方法,我们将在下一节中查看该方法。

      开始一个通话

      -

      当用户单击要调用的用户名时,将调用 invite() 函数作为该事件的事件处理程序 {{event("click")}} 事件:

      +

      当用户单击要调用的用户名时,将调用 invite() 函数作为该事件的事件处理程序 {{event("click")}} 事件:

      var mediaConstraints = {
         audio: true, // We want an audio track
      @@ -259,27 +259,27 @@ 

      开始一个通话

      } }
      -

      这从一个基本的健全性检查开始:用户是否连在一起?如果没有{{domxref("RTCPeerConnection")}} ,他们显然无法进行呼叫。然后,从事件目标的 {{domxref("Node.textContent", "textContent")}} 属性中获取单击的用户的名称,并检查以确保尝试启动调用的不是同一个用户。

      +

      这从一个基本的健全性检查开始:用户是否连在一起?如果没有{{domxref("RTCPeerConnection")}} ,他们显然无法进行呼叫。然后,从事件目标的 {{domxref("Node.textContent", "textContent")}} 属性中获取单击的用户的名称,并检查以确保尝试启动调用的不是同一个用户。

      -

      然后我们将要调用的用户的名称复制到变量 targetUsername 中,并调用 createPeerConnection(),该函数将创建并执行{{domxref("RTCPeerConnection")}} 的基本配置。

      +

      然后我们将要调用的用户的名称复制到变量 targetUsername 中,并调用 createPeerConnection(),该函数将创建并执行{{domxref("RTCPeerConnection")}} 的基本配置。

      -

      创建 RTCPeerConnection 后,我们通过调用 {{domxref("MediaDevices.getUserMedia()")}},请求访问用户的相机和麦克风,该命令通过 {{domxref("Navigator.mediaDevices.getUserMedia")}} 属性向我们公开。当成功完成返回的 promise 时,将执行我们的 then 处理程序。它接收一个 {{domxref("MediaStream")}} 对象作为输入,该对象表示来自用户麦克风的音频和来自网络摄像机的视频流。

      +

      创建 RTCPeerConnection 后,我们通过调用 {{domxref("MediaDevices.getUserMedia()")}},请求访问用户的相机和麦克风,该命令通过 {{domxref("Navigator.mediaDevices.getUserMedia")}} 属性向我们公开。当成功完成返回的 promise 时,将执行我们的 then 处理程序。它接收一个 {{domxref("MediaStream")}} 对象作为输入,该对象表示来自用户麦克风的音频和来自网络摄像机的视频流。

      -

      注意:我们可以通过调用 {{domxref("MediaDevices.enumerateDevices", "navigator.mediaDevices.enumerateDevices()")}} 获取设备列表,根据所需条件筛选结果列表,然后使用所选设备{{domxref("MediaTrackConstraints.deviceId", "deviceId")}} 传入getUserMedia()  mediaConstraints 对象的deviceId 字段中的值。事实上,除非必须要不然很少这样用,因为大部分工作都是由 getUserMedia()为你完成的。

      +

      注意:我们可以通过调用 {{domxref("MediaDevices.enumerateDevices", "navigator.mediaDevices.enumerateDevices()")}} 获取设备列表,根据所需条件筛选结果列表,然后使用所选设备{{domxref("MediaTrackConstraints.deviceId", "deviceId")}} 传入getUserMedia() mediaConstraints 对象的deviceId 字段中的值。事实上,除非必须要不然很少这样用,因为大部分工作都是由 getUserMedia()为你完成的。

      -

      我们通过设置元素的 {{domxref("HTMLMediaElement.srcObject", "srcObject")}} 属性,将传入流附加到本地预览  {{HTMLElement("video")}} 元素。由于元素被配置为自动播放传入的视频,因此流开始在本地预览框中播放。

      +

      我们通过设置元素的 {{domxref("HTMLMediaElement.srcObject", "srcObject")}} 属性,将传入流附加到本地预览 {{HTMLElement("video")}} 元素。由于元素被配置为自动播放传入的视频,因此流开始在本地预览框中播放。

      -

      然后遍历流中的磁道,调用 {{domxref("RTCPeerConnection.addTrack", "addTrack()")}} 将每个磁道添加到 RTCPeerConnection。尽管连接尚未完全建立,但必须尽快开始向其发送媒体数据,因为媒体数据将帮助 ICE 层决定采取的最佳连接方式,这有助于协商过程。

      +

      然后遍历流中的磁道,调用 {{domxref("RTCPeerConnection.addTrack", "addTrack()")}} 将每个磁道添加到 RTCPeerConnection。尽管连接尚未完全建立,但必须尽快开始向其发送媒体数据,因为媒体数据将帮助 ICE 层决定采取的最佳连接方式,这有助于协商过程。

      -

      一旦媒体数据连接到 RTCPeerConnection,就会在连接处触发事件{{event("negotiationneeded")}} 事件,以便启动 ICE 协商。

      +

      一旦媒体数据连接到 RTCPeerConnection,就会在连接处触发事件{{event("negotiationneeded")}} 事件,以便启动 ICE 协商。

      如果在尝试获取本地媒体流时发生错误,catch 子句将调用handleGetUserMediaError(),根据需要向用户显示适当的错误。

      处理 getUserMedia() 错误

      -

      如果 getUserMedia() 返回的 promise 失败,将执行handleGetUserMediaError() 函数。

      +

      如果 getUserMedia() 返回的 promise 失败,将执行handleGetUserMediaError() 函数。

      function handleGetUserMediaError(e) {
         switch(e.name) {
      @@ -299,13 +299,13 @@ 

      处理 getUserMedia() 错误

      closeVideoCall(); }
      -

      除了一条错误信息外,所有情况下都会显示一条错误信息。在本例中,我们忽略"SecurityError" 和 "PermissionDeniedError" 结果,处理拒绝授予使用媒体硬件的权限与用户取消呼叫的方法是相同的。

      +

      除了一条错误信息外,所有情况下都会显示一条错误信息。在本例中,我们忽略"SecurityError""PermissionDeniedError" 结果,处理拒绝授予使用媒体硬件的权限与用户取消呼叫的方法是相同的。

      -

      不管尝试获取流失败的原因是什么,我们调用 closeVideoCall()函数关闭 {{domxref("RTCPeerConnection")}},并释放尝试调用过程中已分配的任何资源。此代码旨在安全地处理部分启动的调用。

      +

      不管尝试获取流失败的原因是什么,我们调用 closeVideoCall()函数关闭 {{domxref("RTCPeerConnection")}},并释放尝试调用过程中已分配的任何资源。此代码旨在安全地处理部分启动的调用。

      创建端到端连接

      -

      调用方和被调用方都使用 createPeerConnection() 函数来构造它们的 {{domxref("RTCPeerConnection")}} 对象及其各自的 WebRTC 连接端。当调用者试图启动调用时,由 invite() 调用;当被调用者从调用者接收到要约消息时,由handleVideoOfferMsg() 调用。

      +

      调用方和被调用方都使用 createPeerConnection() 函数来构造它们的 {{domxref("RTCPeerConnection")}} 对象及其各自的 WebRTC 连接端。当调用者试图启动调用时,由 invite() 调用;当被调用者从调用者接收到要约消息时,由handleVideoOfferMsg() 调用。

      function createPeerConnection() {
         myPeerConnection = new RTCPeerConnection({
      @@ -325,13 +325,13 @@ 

      创建端到端连接

      myPeerConnection.onsignalingstatechange = handleSignalingStateChangeEvent; }
      -

      当使用 {{domxref("RTCPeerConnection.RTCPeerConnection", "RTCPeerConnection()")}} 构造函数时,我们将指定一个{{domxref("RTCConfiguration")}}-兼容对象,为连接提供配置参数。在这个例子中,我们只使用其中的一个: iceServers。这是描述 {{Glossary("ICE")}} 层的 STUN 和/或 TURN 服务器的对象数组,在尝试在呼叫者和被呼叫者之间建立路由时使用。这些服务器用于确定在对等端之间通信时要使用的最佳路由和协议,即使它们位于防火墙后面或使用 {{Glossary("NAT")}}。

      +

      当使用 {{domxref("RTCPeerConnection.RTCPeerConnection", "RTCPeerConnection()")}} 构造函数时,我们将指定一个{{domxref("RTCConfiguration")}}-兼容对象,为连接提供配置参数。在这个例子中,我们只使用其中的一个: iceServers。这是描述 {{Glossary("ICE")}} 层的 STUN 和/或 TURN 服务器的对象数组,在尝试在呼叫者和被呼叫者之间建立路由时使用。这些服务器用于确定在对等端之间通信时要使用的最佳路由和协议,即使它们位于防火墙后面或使用 {{Glossary("NAT")}}。

      注意:你应该始终使用你拥有的或你有特定授权使用的STUN/TURN服务器。这个例子是使用一个已知的公共服务器,但是滥用这些是不好的。

      -

      iceServers 中的每个对象至少包含一个 urls 字段,该字段提供可以访问指定服务器的 URLs。它还可以提供 username 和 credential值,以便在需要时进行身份验证。

      +

      iceServers 中的每个对象至少包含一个 urls 字段,该字段提供可以访问指定服务器的 URLs。它还可以提供 usernamecredential值,以便在需要时进行身份验证。

      在创建了 {{domxref("RTCPeerConnection")}} 之后,我们为对我们重要的事件设置了处理程序。

      @@ -341,27 +341,27 @@

      创建端到端连接

      -

      当需要你通过信令服务器将一个 ICE 候选发送给另一个对等端时,本地 ICE 层将会调用你的 {{event("icecandidate")}} 事件处理程序。有关更多信息,请参阅交换 ICE 候选 以查看此示例的代码。

      +

      当需要你通过信令服务器将一个 ICE 候选发送给另一个对等端时,本地 ICE 层将会调用你的 {{event("icecandidate")}} 事件处理程序。有关更多信息,请参阅交换 ICE 候选 以查看此示例的代码。

      {{domxref("RTCPeerConnection.ontrack")}}
      当向连接中添加磁道时,{{event("track")}} 事件的此处理程序由本地 WebRTC 层调用。例如,可以将传入媒体连接到元素以显示它。详见接收新的流数据
      {{domxref("RTCPeerConnection.onnegotiationneeded")}}
      每当 WebRTC 基础结构需要你重新启动会话协商过程时,都会调用此函数。它的工作是创建和发送一个请求,给被叫方,要求它与我们联系。参见开始协商了解我们如何处理这一问题。
      {{domxref("RTCPeerConnection.onremovetrack")}}
      -
      调用与 ontrack相对应的对象来处理 {{event("removetrack")}} 事件;当远程对等端从正在发送的媒体中删除磁道时,它将发送到RTCPeerConnection。参见 处理流的移除
      +
      调用与 ontrack相对应的对象来处理 {{event("removetrack")}} 事件;当远程对等端从正在发送的媒体中删除磁道时,它将发送到RTCPeerConnection。参见 处理流的移除
      {{domxref("RTCPeerConnection.oniceconnectionstatechange")}}
      -
      ICE 层发送{{event("iceconnectionstatechange")}} 事件,让你了解 ICE 连接状态的更改。这可以帮助你了解连接何时失败或丢失。我们将在下面的ICE 连接状态中查看此示例的代码。
      +
      ICE 层发送{{event("iceconnectionstatechange")}} 事件,让你了解 ICE 连接状态的更改。这可以帮助你了解连接何时失败或丢失。我们将在下面的ICE 连接状态中查看此示例的代码。
      {{domxref("RTCPeerConnection.onicegatheringstatechange")}}
      当 ICE 代理收集候选对象的过程从一个状态切换到另一个状态(例如开始收集候选对象或完成协商)时,ICE 层将向你发送事件(“ICegulatingStateChange”)事件。见下文 ICE 收集状态
      {{domxref("RTCPeerConnection.onsignalingstatechange")}}
      -

      当信令进程的状态更改时(或如果到信令服务器的连接更改时),WebRTC 架构将向你发送 {{event("signalingstatechange")}} 消息。参见ICE 信令状态查看我们的代码。

      +

      当信令进程的状态更改时(或如果到信令服务器的连接更改时),WebRTC 架构将向你发送 {{event("signalingstatechange")}} 消息。参见ICE 信令状态查看我们的代码。

      开始协商

      -

      一旦调用者创建了其 {{domxref("RTCPeerConnection")}} ,创建了媒体流,并将其磁道添加到连接中,如 开始通话的交互 所示,浏览器将向 {{domxref("RTCPeerConnection")}} 传递一个 {{event("negotiationneeded")}} 事件,以指示它已准备好开始与其他对等方协商。以下是我们处理 {{event("negotiationneeded")}} 事件的代码:

      +

      一旦调用者创建了其 {{domxref("RTCPeerConnection")}} ,创建了媒体流,并将其磁道添加到连接中,如 开始通话的交互 所示,浏览器将向 {{domxref("RTCPeerConnection")}} 传递一个 {{event("negotiationneeded")}} 事件,以指示它已准备好开始与其他对等方协商。以下是我们处理 {{event("negotiationneeded")}} 事件的代码:

      function handleNegotiationNeededEvent() {
         myPeerConnection.createOffer().then(function(offer) {
      @@ -380,13 +380,13 @@ 

      开始协商

      要开始协商过程,我们需要创建一个 SDP 请求并将其发送给我们想要连接的对等端。此请求包括支持的连接配置列表,包括有关我们在本地添加到连接的媒体流(即,我们希望发送到呼叫另一端的视频)的信息,以及 ICE 层已经收集到的任何 ICE 候选。我们通过调用 {{domxref("RTCPeerConnection.createOffer", "myPeerConnection.createOffer()")}} 创建此请求。

      -

      当 createOffer() 成功(执行 promise)时,我们将创建的请求信息传递到{{domxref("RTCPeerConnection.setLocalDescription", "myPeerConnection.setLocalDescription()")}} ,它为调用方的连接端配置连接和媒体配置状态。

      +

      createOffer() 成功(执行 promise)时,我们将创建的请求信息传递到{{domxref("RTCPeerConnection.setLocalDescription", "myPeerConnection.setLocalDescription()")}} ,它为调用方的连接端配置连接和媒体配置状态。

      -

      注意:从技术上讲, createOffer() 返回的字符串是{{RFC(3264)}} 请求。

      +

      注意:从技术上讲, createOffer() 返回的字符串是{{RFC(3264)}} 请求。

      -

      我们知道描述是有效的,并且在满足setLocalDescription() 返回的 promise 时已经设置好了。也就是说我们创建了一个包含本地描述(现在与请求相同)的新 "video-offer" 消息,然后通过我们的信令服务器将请求发送给被叫方。请求有以下要素:

      +

      我们知道描述是有效的,并且在满足setLocalDescription() 返回的 promise 时已经设置好了。也就是说我们创建了一个包含本地描述(现在与请求相同)的新 "video-offer" 消息,然后通过我们的信令服务器将请求发送给被叫方。请求有以下要素:

      type
      @@ -399,17 +399,17 @@

      开始协商

      SDP 字符串描述了请求
      -

      如果在初始 createOffer() 或后面的任何实现处理程序中发生错误,则通过调用 reportError() 函数报告错误。

      +

      如果在初始 createOffer() 或后面的任何实现处理程序中发生错误,则通过调用 reportError() 函数报告错误。

      -

      在 setLocalDescription()的实现处理程序运行后,ICE 代理开始向其发现的每个潜在 {{domxref("RTCPeerConnection")}} 配置发送 {{event("icecandidate")}} 事件。我们的 icecandidate 事件处理程序负责将候选对象传输到另一个对等方。

      +

      setLocalDescription()的实现处理程序运行后,ICE 代理开始向其发现的每个潜在 {{domxref("RTCPeerConnection")}} 配置发送 {{event("icecandidate")}} 事件。我们的 icecandidate 事件处理程序负责将候选对象传输到另一个对等方。

      会话协商

      -

      既然我们已经开始与另一个对等方进行协商并传输了一个请求,那么让我们来看一下在连接的被叫方方面会发生什么。被调用方接收该请求并调用 handleVideoOfferMsg()函数来处理它。让我们看看被叫方如何处理 "video-offer" 消息。

      +

      既然我们已经开始与另一个对等方进行协商并传输了一个请求,那么让我们来看一下在连接的被叫方方面会发生什么。被调用方接收该请求并调用 handleVideoOfferMsg()函数来处理它。让我们看看被叫方如何处理 "video-offer" 消息。

      处理请求
      -

      当请求到达时,调用被调用方的 handleVideoOfferMsg() 函数时会收到"video-offer" 消息。这个函数需要做两件事。首先,它需要创建自己的{{domxref("RTCPeerConnection")}} 并添加包含麦克风和网络摄像头的音频和视频的磁道。其次,它需要对收到的请求进行处理,构建并返回应答。

      +

      当请求到达时,调用被调用方的 handleVideoOfferMsg() 函数时会收到"video-offer" 消息。这个函数需要做两件事。首先,它需要创建自己的{{domxref("RTCPeerConnection")}} 并添加包含麦克风和网络摄像头的音频和视频的磁道。其次,它需要对收到的请求进行处理,构建并返回应答。

      function handleVideoOfferMsg(msg) {
         var localStream = null;
      @@ -447,23 +447,23 @@ 
      处理请求
      .catch(handleGetUserMediaError); }
      -

      此代码与我们在开始通话的交互中在 invite() 函数中所做的非常相似。它首先使用 createPeerConnection() 函数创建和配置{{domxref("RTCPeerConnection")}} 。然后,它从收到的 "video-offer" 消息中获取 SDP 请求,并使用它创建一个表示调用方会话描述的新 {{domxref("RTCSessionDescription")}} 对象。

      +

      此代码与我们在开始通话的交互中在 invite() 函数中所做的非常相似。它首先使用 createPeerConnection() 函数创建和配置{{domxref("RTCPeerConnection")}} 。然后,它从收到的 "video-offer" 消息中获取 SDP 请求,并使用它创建一个表示调用方会话描述的新 {{domxref("RTCSessionDescription")}} 对象。

      -

      然后将该会话描述传递到 {{domxref("RTCPeerConnection.setRemoteDescription", "myPeerConnection.setRemoteDescription()")}}。这将把接收到的请求建立为连接的远程(调用方)端的描述。如果成功,promise 成功处理程序(在 then() 子句中)将使用 {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}},将磁道添加到连接,以此类推,如前面在 invite()中看到的那样。

      +

      然后将该会话描述传递到 {{domxref("RTCPeerConnection.setRemoteDescription", "myPeerConnection.setRemoteDescription()")}}。这将把接收到的请求建立为连接的远程(调用方)端的描述。如果成功,promise 成功处理程序(在 then() 子句中)将使用 {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}},将磁道添加到连接,以此类推,如前面在 invite()中看到的那样。

      -

      一旦使用 {{domxref("RTCPeerConnection.createAnswer", "myPeerConnection.createAnswer()")}} 创建了应答,通过调用{{domxref("RTCPeerConnection.setLocalDescription", "myPeerConnection.setLocalDescription()")}} 连接本地端的描述被设置为应答的 SDP,则通过信令服务器将应答发送给调用者,让他们知道应答是什么。

      +

      一旦使用 {{domxref("RTCPeerConnection.createAnswer", "myPeerConnection.createAnswer()")}} 创建了应答,通过调用{{domxref("RTCPeerConnection.setLocalDescription", "myPeerConnection.setLocalDescription()")}} 连接本地端的描述被设置为应答的 SDP,则通过信令服务器将应答发送给调用者,让他们知道应答是什么。

      -

      捕捉到的任何错误都会被传递给 handleGetUserMediaError(),详见 处理 getUserMedia() 错误

      +

      捕捉到的任何错误都会被传递给 handleGetUserMediaError(),详见 处理 getUserMedia() 错误

      -

      注意:与调用者的情况一样,一旦 setLocalDescription()实现处理程序运行完毕,浏览器将开始触发被调用者必须处理的{{event("icecandidate")}} 事件,每个需要传输到远程对等方的候选事件对应一个事件。

      +

      注意:与调用者的情况一样,一旦 setLocalDescription()实现处理程序运行完毕,浏览器将开始触发被调用者必须处理的{{event("icecandidate")}} 事件,每个需要传输到远程对等方的候选事件对应一个事件。

      发送 ICE 候选
      -

      ICE 协商过程涉及到每一个对等端不断地向另一个对等端发送候选,直到它用尽了支持 RTCPeerConnection的媒体传输需求的潜在方法。因为 ICE 不知道你的信令服务器,所以你的处理程序代码需要处理 {{event("icecandidate")}} 事件中每个候选的传输。

      +

      ICE 协商过程涉及到每一个对等端不断地向另一个对等端发送候选,直到它用尽了支持 RTCPeerConnection的媒体传输需求的潜在方法。因为 ICE 不知道你的信令服务器,所以你的处理程序代码需要处理 {{event("icecandidate")}} 事件中每个候选的传输。

      -

      你的 {{domxref("RTCPeerConnection.onicecandidate", "onicecandidate")}} 处理程序接收一个事件,该事件的候选属性是描述该候选的 SDP(或为 null ,表示 ICE 层已耗尽建议的潜在配置)。候选的内容是你需要使用信令服务器传输的内容。下面是我们的示例实现:

      +

      你的 {{domxref("RTCPeerConnection.onicecandidate", "onicecandidate")}} 处理程序接收一个事件,该事件的候选属性是描述该候选的 SDP(或为 null ,表示 ICE 层已耗尽建议的潜在配置)。候选的内容是你需要使用信令服务器传输的内容。下面是我们的示例实现:

      function handleICECandidateEvent(event) {
         if (event.candidate) {
      @@ -475,7 +475,7 @@ 
      发送 ICE 候选
      } }
      -

      这将构建一个包含候选对象的对象,然后使用前面在 向信令服务器发送信息 中描述的sendToServer() 函数将其发送给另一个对等方。消息属性为:

      +

      这将构建一个包含候选对象的对象,然后使用前面在 向信令服务器发送信息 中描述的sendToServer() 函数将其发送给另一个对等方。消息属性为:

      type

      @@ -490,12 +490,12 @@
      发送 ICE 候选

      此消息的格式(与处理信号时所做的所有操作一样)完全取决于你的需要;你可以根据需要提供其他信息。

      -

      注意:重要的是要记住, {{event("icecandidate")}} 事件不会在 ICE 候选从呼叫的另一端到达时发送。相反,它们是由你自己的呼叫端发送的,这样你就可以承担通过你选择的任何通道传输数据的任务。当你刚接触 WebRTC 时,这会让人困惑。

      +

      注意:重要的是要记住, {{event("icecandidate")}} 事件不会在 ICE 候选从呼叫的另一端到达时发送。相反,它们是由你自己的呼叫端发送的,这样你就可以承担通过你选择的任何通道传输数据的任务。当你刚接触 WebRTC 时,这会让人困惑。

      接收 ICE 候选
      -

      信令服务器使用它选择的任何方法将每个 ICE 候选传递给目标对等机;在我们的示例中,我们用的是 JSON 对象, type 属性包含字符串 "new-ice-candidate"。我们的 r handleNewICECandidateMsg() 函数由主WebSocket传入消息代码调用,以处理这些消息:

      +

      信令服务器使用它选择的任何方法将每个 ICE 候选传递给目标对等机;在我们的示例中,我们用的是 JSON 对象, type 属性包含字符串 "new-ice-candidate"。我们的 r handleNewICECandidateMsg() 函数由主WebSocket传入消息代码调用,以处理这些消息:

      function handleNewICECandidateMsg(msg) {
         var candidate = new RTCIceCandidate(msg.candidate);
      @@ -504,7 +504,7 @@ 
      接收 ICE 候选
      .catch(reportError); }
      -

      此函数通过将接收到的 SDP 传递给它的构造函数来构造一个 {{domxref("RTCIceCandidate")}}对象,然后通过{{domxref("RTCPeerConnection.addIceCandidate", "myPeerConnection.addIceCandidate()")}}将候选传递给 ICE 层。这把新建的 ICE 候选交给了当地的 ICE 层,最终,我们在处理整个候选的过程中的角色就完整的了。

      +

      此函数通过将接收到的 SDP 传递给它的构造函数来构造一个 {{domxref("RTCIceCandidate")}}对象,然后通过{{domxref("RTCPeerConnection.addIceCandidate", "myPeerConnection.addIceCandidate()")}}将候选传递给 ICE 层。这把新建的 ICE 候选交给了当地的 ICE 层,最终,我们在处理整个候选的过程中的角色就完整的了。

      每一个对等端向另一个对等端发送一个候选的可能传输配置,它认为这对于正在交换的媒体可能是可行的。在某种程度上,这两端认为,一个给定的候选是一个很好的选择,于是他们打开连接,开始分享媒体数据。然而,重点要注意的是,一旦媒体数据开始流动,ICE 上协商就不会停止。相反,在对话开始后,候选对象可能仍然在不断地进行交换,可能是在试图找到更好的连接方法的同时,也可能只是因为在对等方成功建立连接时,他们已经在传输中了。

      @@ -522,20 +522,20 @@
      接收 ICE 候选
      接收新的流数据
      -

      当新的磁道添加到 RTCPeerConnection时——通过调用其{{domxref("RTCPeerConnection.addTrack", "addTrack()")}} 方法,或者由于重新协商流的格式——对于添加到连接的每个磁道, 一个{{event("track")}}事件设置为 RTCPeerConnection 。使用新添加的媒体需要实现 track 事件的处理程序。常见的需要是将传入的媒体附加到适当的 HTML 元素。在我们的示例中,我们将磁道的流添加到显示传入视频的 {{HTMLElement("video")}} 元素:

      +

      当新的磁道添加到 RTCPeerConnection时——通过调用其{{domxref("RTCPeerConnection.addTrack", "addTrack()")}} 方法,或者由于重新协商流的格式——对于添加到连接的每个磁道, 一个{{event("track")}}事件设置为 RTCPeerConnection 。使用新添加的媒体需要实现 track 事件的处理程序。常见的需要是将传入的媒体附加到适当的 HTML 元素。在我们的示例中,我们将磁道的流添加到显示传入视频的 {{HTMLElement("video")}} 元素:

      function handleAddStreamEvent(event) {
         document.getElementById("received_video").srcObject = event.stream;
         document.getElementById("hangup-button").disabled = false;
       }
      -

      传入流附加到 "received_video"{{HTMLElement("video")}}  元素,并且启用"Hang Up" {{HTMLElement("button")}}元素,以便用户挂断呼叫。

      +

      传入流附加到 "received_video"{{HTMLElement("video")}} 元素,并且启用"Hang Up" {{HTMLElement("button")}}元素,以便用户挂断呼叫。

      完成此代码后,其他对等方发送的视频将显示在本地浏览器窗口中!

      处理流的移除
      -

      当远程对等方通过调用{{domxref("RTCPeerConnection.removeTrack()")}}.从连接中删除磁道时,你的代码将接收事件{{event("removetrack")}}事件。 "removetrack" 的处理程序是:

      +

      当远程对等方通过调用{{domxref("RTCPeerConnection.removeTrack()")}}.从连接中删除磁道时,你的代码将接收事件{{event("removetrack")}}事件。 "removetrack" 的处理程序是:

      function handleRemoveTrackEvent(event) {
         var stream = document.getElementById("received_video").srcObject;
      @@ -546,9 +546,9 @@ 
      处理流的移除
      } }
      -

      此代码从"received_video" {{HTMLElement("video")}}元素的 {{htmlattrxref("srcObject", "video")}} 属性获取传入视频 {{domxref("MediaStream.getTracks", "getTracks()")}} 方法获取流的磁道数组。

      +

      此代码从"received_video" {{HTMLElement("video")}}元素的 {{htmlattrxref("srcObject", "video")}} 属性获取传入视频 {{domxref("MediaStream.getTracks", "getTracks()")}} 方法获取流的磁道数组。

      -

      如果数组的长度为零,意味着流中没有剩余的磁道,则通过调用 closeVideoCall()结束调用。这样就可以将我们的应用程序恢复到可以启动或接收另一个呼叫的状态。请参阅 结束通话 了解 closeVideoCall() 的工作原理。

      +

      如果数组的长度为零,意味着流中没有剩余的磁道,则通过调用 closeVideoCall()结束调用。这样就可以将我们的应用程序恢复到可以启动或接收另一个呼叫的状态。请参阅 结束通话 了解 closeVideoCall() 的工作原理。

      结束通话

      @@ -556,7 +556,7 @@

      结束通话

      挂机
      -

      当用户单击"Hang Up"按钮结束调用时,将调用 hangUpCall() 函数:

      +

      当用户单击"Hang Up"按钮结束调用时,将调用 hangUpCall() 函数:

      function hangUpCall() {
         closeVideoCall();
      @@ -567,11 +567,11 @@ 
      挂机
      }); }
      -

      hangUpCall() 执行 closeVideoCall() 来关闭并重置连接并释放资源。然后它会生成一个 "hang-up" 消息,并将其发送到呼叫的另一端,告诉另一个对等端整齐地关闭自己。

      +

      hangUpCall() 执行 closeVideoCall() 来关闭并重置连接并释放资源。然后它会生成一个 "hang-up" 消息,并将其发送到呼叫的另一端,告诉另一个对等端整齐地关闭自己。

      结束通话
      -

       closeVideoCall() 函数,如下所示,负责停止流、清理和处理 {{domxref("RTCPeerConnection")}} 对象:

      +

      closeVideoCall() 函数,如下所示,负责停止流、清理和处理 {{domxref("RTCPeerConnection")}} 对象:

      function closeVideoCall() {
         var remoteVideo = document.getElementById("received_video");
      @@ -599,7 +599,7 @@ 
      结束通话
      myPeerConnection = null; } -  remoteVideo.removeAttribute("src"); + remoteVideo.removeAttribute("src"); remoteVideo.removeAttribute("srcObject"); localVideo.removeAttribute("src"); remoteVideo.removeAttribute("srcObject"); @@ -608,26 +608,26 @@
      结束通话
      targetUsername = null; }
      -

      在引用了两个 {{HTMLElement("video")}} 元素之后,我们检查 WebRTC 连接是否仍然存在;如果存在,则继续断开并关闭调用:

      +

      在引用了两个 {{HTMLElement("video")}} 元素之后,我们检查 WebRTC 连接是否仍然存在;如果存在,则继续断开并关闭调用:

      1. 所有事件处理程序都将被删除。这可以防止在连接关闭过程中触发杂散事件处理程序,从而可能导致错误。
      2. 对于远程视频流和本地视频流,我们对每个磁道进行迭代,调用{{domxref("MediaStreamTrack.stop()")}} 方法关闭每个磁道。
      3. 通过调用{{domxref("RTCPeerConnection.close", "myPeerConnection.close()")}}.关闭 {{domxref("RTCPeerConnection")}} 。
      4. -
      5. 设置 myPeerConnection 为 null,确保我们的代码知道没有正在进行的调用;当用户单击用户列表中的名称时,这很有用。
      6. +
      7. 设置 myPeerConnectionnull,确保我们的代码知道没有正在进行的调用;当用户单击用户列表中的名称时,这很有用。
      -

      然后,对于传入和传出的{{HTMLElement("video")}}元素,我们使用它们的{{domxref("Element.removeAttribute", "removeAttribute()")}} 方法删除它们的 {{htmlattrxref("srcObject", "video")}}和{{htmlattrxref("src", "video")}} 属性。这就完成了流与视频元素的分离。

      +

      然后,对于传入和传出的{{HTMLElement("video")}}元素,我们使用它们的{{domxref("Element.removeAttribute", "removeAttribute()")}} 方法删除它们的 {{htmlattrxref("srcObject", "video")}}和{{htmlattrxref("src", "video")}} 属性。这就完成了流与视频元素的分离。

      -

      最后,我们在"Hang Up"按钮上将{{domxref("HTMLElement.disabled", "disabled")}}属性设置为 true,使其在没有调用的情况下不可点击;然后我们将targetUsername 设置为 null ,因为我们不再与任何人交谈。这允许用户呼叫另一个用户,或接收来电。

      +

      最后,我们在"Hang Up"按钮上将{{domxref("HTMLElement.disabled", "disabled")}}属性设置为 true,使其在没有调用的情况下不可点击;然后我们将targetUsername 设置为 null ,因为我们不再与任何人交谈。这允许用户呼叫另一个用户,或接收来电。

      处理状态变更

      -

      还有许多其他事件可以设置监听器,用于通知代码各种状态更改。我们使用三种方法: {{event("iceconnectionstatechange")}},{{event("icegatheringstatechange")}},和 {{event("signalingstatechange")}}。

      +

      还有许多其他事件可以设置监听器,用于通知代码各种状态更改。我们使用三种方法: {{event("iceconnectionstatechange")}},{{event("icegatheringstatechange")}},和 {{event("signalingstatechange")}}。

      ICE 连接状态
      -

      事件{{event("iceconnectionstatechange")}}当连接状态更改时(例如,当从另一端终止调用时),由 ICE 层将事件发送到{{domxref("RTCPeerConnection")}} 。

      +

      事件{{event("iceconnectionstatechange")}}当连接状态更改时(例如,当从另一端终止调用时),由 ICE 层将事件发送到{{domxref("RTCPeerConnection")}} 。

      function handleICEConnectionStateChangeEvent(event) {
         switch(myPeerConnection.iceConnectionState) {
      @@ -639,11 +639,11 @@ 
      ICE 连接状态
      } }
      -

      这里,当 ICE 连接状态更改为"closed""failed",或者 "disconnected"时,我们将应用 closeVideoCall()函数。这将处理关闭我们的连接端,以便我们准备好重新开始或接受呼叫。

      +

      这里,当 ICE 连接状态更改为"closed""failed",或者 "disconnected"时,我们将应用 closeVideoCall()函数。这将处理关闭我们的连接端,以便我们准备好重新开始或接受呼叫。

      ICE 信令状态
      -

      同样,我们监听{{event("signalingstatechange")}}事件。如果信号状态变为 closed,我们同样关闭呼叫。

      +

      同样,我们监听{{event("signalingstatechange")}}事件。如果信号状态变为 closed,我们同样关闭呼叫。

        myPeerConnection.onsignalingstatechange = function(event) {
           switch(myPeerConnection.signalingState) {
      @@ -654,12 +654,12 @@ 
      ICE 信令状态
      };
      -

      注意:  closed的信令状态已被弃用,取而代之的是 closed{{domxref("RTCPeerConnection.iceConnectionState", "iceConnectionState")}}。我们在这里监听它以增加一点向后兼容性。

      +

      注意: closed的信令状态已被弃用,取而代之的是 closed{{domxref("RTCPeerConnection.iceConnectionState", "iceConnectionState")}}。我们在这里监听它以增加一点向后兼容性。

      ICE 收集状态
      -

      {{event("icegatheringstatechange")}} 事件用于让你知道何时 ICE 候选收集进程状态发生更改。我们的示例并没有将其用于任何用途,但是为了调试的目的观察这些事件以及检测候选集合何时完成都是有用的。

      +

      {{event("icegatheringstatechange")}} 事件用于让你知道何时 ICE 候选收集进程状态发生更改。我们的示例并没有将其用于任何用途,但是为了调试的目的观察这些事件以及检测候选集合何时完成都是有用的。

      function handleICEGatheringStateChangeEvent(event) {
         // Our sample just logs information to console here,
      diff --git a/files/zh-cn/web/api/webrtc_api/simple_rtcdatachannel_sample/index.html b/files/zh-cn/web/api/webrtc_api/simple_rtcdatachannel_sample/index.html
      index 4f680b40bcea5a..1b79542f9095b1 100644
      --- a/files/zh-cn/web/api/webrtc_api/simple_rtcdatachannel_sample/index.html
      +++ b/files/zh-cn/web/api/webrtc_api/simple_rtcdatachannel_sample/index.html
      @@ -11,30 +11,30 @@
       
       

      {{domxref("RTCDataChannel")}} 接口是WebRTC API的一个功能,可以让您在两个对等体之间打开一个通道,您可以通过该通道发送和接收任意数据。 API 有意地类似于WebSocket API,因此可以为每个 API 使用相同的编程模型。

      -

      在本示例中,我们会在一个页面内建立 一条{{domxref("RTCDataChannel")}}链接 . 这个场景是为了演示如何链接两个 Peer,实际场景并不常见。在本示例中解释了协商和建立链接的过程,定位和链接另外一台主机的场景在另外的一个示例中。 

      +

      在本示例中,我们会在一个页面内建立 一条{{domxref("RTCDataChannel")}}链接 . 这个场景是为了演示如何链接两个 Peer,实际场景并不常见。在本示例中解释了协商和建立链接的过程,定位和链接另外一台主机的场景在另外的一个示例中。

      The HTML

      首先让我们看看我们需要的 HTML 代码HTML that's needed. 其实很简单,我们先有两个按钮用来链接和断开链接。

      <button id="connectButton" name="connectButton" class="buttonleft">
      -  Connect
      +  Connect
       </button>
       <button id="disconnectButton" name="disconnectButton" class="buttonright" disabled>
      -  Disconnect
      +  Disconnect
       </button>

      然后我们还有一个输入框,用来输入消息。一个按钮,来触发发送事件。这个 {{HTMLElement("div")}} 是给 channel 中第一个节点使用的。

      -
        <div class="messagebox">
      -    <label for="message">Enter a message:
      -      <input type="text" name="message" id="message" placeholder="Message text"
      -              inputmode="latin" size=60 maxlength=120 disabled>
      -    </label>
      -    <button id="sendButton" name="sendButton" class="buttonright" disabled>
      +
        <div class="messagebox">
      +    <label for="message">Enter a message:
      +      <input type="text" name="message" id="message" placeholder="Message text"
      +              inputmode="latin" size=60 maxlength=120 disabled>
      +    </label>
      +    <button id="sendButton" name="sendButton" class="buttonright" disabled>
             Send
           </button>
      -  </div>
      + </div>

      最后,还有一个小 DIV 用来显示收到的内容。这个 {{HTMLElement("div")}} 是给 channel 中第二个 peer 使用的。

      @@ -50,7 +50,7 @@

      The JavaScript code

      启动

      -

      当脚本开始运行时,我们对 load 事件挂接 {{event("load")}} 事件侦听,因此一旦页面完全加载, startup() 函数将被调用。

      +

      当脚本开始运行时,我们对 load 事件挂接 {{event("load")}} 事件侦听,因此一旦页面完全加载, startup() 函数将被调用。

      function startup() {
         connectButton = document.getElementById('connectButton');
      @@ -66,11 +66,11 @@ 

      启动

      sendButton.addEventListener('click', sendMessage, false); }
      -

      上述逻辑一目了然。我们拿到所有需要操作的页面元素引用,之后对三个按钮设置事件侦听 {{domxref("EventListener", "event listeners")}} 。

      +

      上述逻辑一目了然。我们拿到所有需要操作的页面元素引用,之后对三个按钮设置事件侦听 {{domxref("EventListener", "event listeners")}} 。

      建立连接

      -

      当用户点击 "Connect" 按钮, connectPeers() 方法被调用。下面将逐一分析该方法中的细节。

      +

      当用户点击 "Connect" 按钮, connectPeers() 方法被调用。下面将逐一分析该方法中的细节。

      注意: 尽管参与连接的两端都在同一页面,我们将启动连接的一端称为 "local" 端,另一端称为 "remote" 端。

      @@ -85,7 +85,7 @@

      建立本地节点

      sendChannel.onclose = handleSendChannelStatusChange;
      -

      第一步是建立该连接的 "local" 端,它是发起连接请求的一方。 下一步是通过调用{{domxref("RTCPeerConnection.createDataChannel()")}} 来创建 {{domxref("RTCDataChannel")}} 并设置事件侦听以监视该数据通道, 从而获知该通道的打开或关闭 (即获得该对等连接的通道打开或者关闭的时机)。

      +

      第一步是建立该连接的 "local" 端,它是发起连接请求的一方。 下一步是通过调用{{domxref("RTCPeerConnection.createDataChannel()")}} 来创建 {{domxref("RTCDataChannel")}} 并设置事件侦听以监视该数据通道, 从而获知该通道的打开或关闭 (即获得该对等连接的通道打开或者关闭的时机)。

      请务必记住该通道的每一端都拥有自己的 {{domxref("RTCDataChannel")}} 对象。

      @@ -94,14 +94,14 @@

      建立远程节点

      remoteConnection = new RTCPeerConnection();
       remoteConnection.ondatachannel = receiveChannelCallback;
      -

      远程端的建立过程类似“local”端, 但它无需自己创建 {{domxref("RTCDataChannel")}} , 因为我们将通过上面建立的渠道进行连接。 我们创建对 {{event("datachannel")}} 的事件处理回调;数据通道打开时该逻辑将被执行, 该回调处理将接收到一个 RTCDataChannel 对象,此过程将在文章后面部分描述。

      +

      远程端的建立过程类似“local”端, 但它无需自己创建 {{domxref("RTCDataChannel")}} , 因为我们将通过上面建立的渠道进行连接。 我们创建对 {{event("datachannel")}} 的事件处理回调;数据通道打开时该逻辑将被执行, 该回调处理将接收到一个 RTCDataChannel 对象,此过程将在文章后面部分描述。

      设立 ICE 候选人

      -

      下一步为每个连接建立 ICE 候选侦听处理, 当连接的一方出现新的 ICE 候选时该侦听逻辑将被调用以告知连接的另一方此消息。

      +

      下一步为每个连接建立 ICE 候选侦听处理, 当连接的一方出现新的 ICE 候选时该侦听逻辑将被调用以告知连接的另一方此消息。

      -

      注意: 在现实场景,当参与连接的两节点运行于不同的上下文,建立连接的过程或稍微复杂些,每一次双方通过调用{{domxref("RTCPeerConnection.addIceCandidate()")}},提出连接方式的建议  (例如: UDP,、中继 UDP 、 TCP 之类的) , 双方来回往复直到达成一致。本文既然不涉及现实网络环境,因此我们假定双方接受首次连接建议。 

      +

      注意: 在现实场景,当参与连接的两节点运行于不同的上下文,建立连接的过程或稍微复杂些,每一次双方通过调用{{domxref("RTCPeerConnection.addIceCandidate()")}},提出连接方式的建议 (例如: UDP,、中继 UDP 、 TCP 之类的) , 双方来回往复直到达成一致。本文既然不涉及现实网络环境,因此我们假定双方接受首次连接建议。

          localConnection.onicecandidate = e => !e.candidate
      @@ -130,21 +130,21 @@ 

      启动连接尝试

      1. 首先调用{{domxref("RTCPeerConnection.createOffer()")}} 方法创建 {{Glossary("SDP")}} (Session Description Protocol) 字节块用于描述我们期待建立的连接。该方法可选地接受一个描述连接限制的对象,例如连接是否必须支持音频、视频或者两者都支持。在我们的简单示例中,没有引入该限制。
      2. -
      3. 如果该 offer 成功建立,我们将上述字节块传递给 local 连接的 {{domxref("RTCPeerConnection.setLocalDescription()")}} 方法。 用于配置 local 端的连接。
      4. -
      5. 下一步通过调用remoteConnection.{{domxref("RTCPeerConnection.setRemoteDescription()")}},告知 remote 节点上述描述,将 local 节点连接到到远程 。  现在 remoteConnection 了解正在建立的连接。
      6. -
      7. 该是 remote 节点回应的时刻了。remote 节点调用 {{domxref("RTCPeerConnection.createAnswer", "createAnswer()")}} 方法予以回应。 该方法生成一个 SDP 二进制块,用于描述 remote 节点愿意并且有能力建立的连接。 这样的连接配置是两端均可以支持可选项的结合。
      8. -
      9. 应答建立之后,通过调用{{domxref("RTCPeerConnection.setLocalDescription()")}}传入 remoteConnection 。该调用完成了 remote 端连接的建立 (对于对端的 remote 节点而言,是它的 local 端。 这种叙述容易使人困惑,但是看多了您就习惯了。
      10. +
      11. 如果该 offer 成功建立,我们将上述字节块传递给 local 连接的 {{domxref("RTCPeerConnection.setLocalDescription()")}} 方法。 用于配置 local 端的连接。
      12. +
      13. 下一步通过调用remoteConnection.{{domxref("RTCPeerConnection.setRemoteDescription()")}},告知 remote 节点上述描述,将 local 节点连接到到远程 。 现在 remoteConnection 了解正在建立的连接。
      14. +
      15. 该是 remote 节点回应的时刻了。remote 节点调用 {{domxref("RTCPeerConnection.createAnswer", "createAnswer()")}} 方法予以回应。 该方法生成一个 SDP 二进制块,用于描述 remote 节点愿意并且有能力建立的连接。 这样的连接配置是两端均可以支持可选项的结合。
      16. +
      17. 应答建立之后,通过调用{{domxref("RTCPeerConnection.setLocalDescription()")}}传入 remoteConnection 。该调用完成了 remote 端连接的建立 (对于对端的 remote 节点而言,是它的 local 端。 这种叙述容易使人困惑,但是看多了您就习惯了。
      18. 最终,通过调用 localConnection 的{{domxref("RTCPeerConnection.setRemoteDescription()")}}方法,本地连接的远端描述被设置为指向 remote 节点。
      19. -
      20. catch() 调用一个用于处理任何异常的逻辑。
      21. +
      22. catch() 调用一个用于处理任何异常的逻辑。
      -

      注意: 再次申明,上述处理过程并非针对现实世界的实现,在正常环境下,建立连接的两端的机器,运行两块不同的代码,用于交互和协商连接过程。

      +

      注意: 再次申明,上述处理过程并非针对现实世界的实现,在正常环境下,建立连接的两端的机器,运行两块不同的代码,用于交互和协商连接过程。

      对成功的对等连接的处理

      -

      当 peer-to-peer 连接的任何一方成功连接,相应的 {{domxref("RTCPeerConnection")}}的{{event("icecandidate")}} 事件将被触发。 在事件的处理中可以执行任何需要的操作, 但在本例中,我们所需要做的只是更新用户界面。

      +

      当 peer-to-peer 连接的任何一方成功连接,相应的 {{domxref("RTCPeerConnection")}}的{{event("icecandidate")}} 事件将被触发。 在事件的处理中可以执行任何需要的操作, 但在本例中,我们所需要做的只是更新用户界面。

        function handleLocalAddCandidateSuccess() {
           connectButton.disabled = true;
      @@ -154,11 +154,11 @@ 

      对成功的对等连接的处理

      -

      当 local 节点连接成功时,禁用 "Connect" 按钮, 当 remote 节点连接时许用 "Disconnect" 按钮。

      +

      当 local 节点连接成功时,禁用 "Connect" 按钮, 当 remote 节点连接时许用 "Disconnect" 按钮。

      数据通道(data channel)的连接

      -

      {{domxref("RTCPeerConnection")}} 一旦 open,事件{{event("datachannel")}} 被发送到远端以完成打开数据通道的处理, 该事件触发 receiveChannelCallback() 方法,如下所示:

      +

      {{domxref("RTCPeerConnection")}} 一旦 open,事件{{event("datachannel")}} 被发送到远端以完成打开数据通道的处理, 该事件触发 receiveChannelCallback() 方法,如下所示:

        function receiveChannelCallback(event) {
           receiveChannel = event.channel;
      @@ -167,7 +167,7 @@ 

      数据通道(data channel) receiveChannel.onclose = handleReceiveChannelStatusChange; }

      -

      事件{{event("datachannel")}} 在它的 channel 属性中包括了:  对代表 remote 节点的 channel 的{{domxref("RTCDataChannel")}} 的指向, 它保存了我们用以在该 channel 上对我们希望处理的事件建立的事件监听。 一旦侦听建立, 每当 remote 节点接收到数据 handleReceiveMessage() 方法将被调用, 每当通道的连接状态发生改变 handleReceiveChannelStatusChange() 方法将被调用, 因此通道完全打开或者关闭时我们都可以作出相应的相应。

      +

      事件{{event("datachannel")}} 在它的 channel 属性中包括了: 对代表 remote 节点的 channel 的{{domxref("RTCDataChannel")}} 的指向, 它保存了我们用以在该 channel 上对我们希望处理的事件建立的事件监听。 一旦侦听建立, 每当 remote 节点接收到数据 handleReceiveMessage() 方法将被调用, 每当通道的连接状态发生改变 handleReceiveChannelStatusChange() 方法将被调用, 因此通道完全打开或者关闭时我们都可以作出相应的相应。

      对通道状态变化的处理

      @@ -194,11 +194,11 @@

      对通道状态变化的处理

      } }
      -

      如果通道状态已经变更为 "open", 意味着我们已经完成了在两对等节点之间建立连接。 相应地用户界面根据状态更新,许用并将输入光标聚焦在 text 输入框,以便用户可以立即输入要发送给对方的文本消息, 同时界面许用 "Send" 和 "Disconnect" 按钮(既然它们已经准备好了),禁用"Connect"按钮,既然在已经建立连接的情况下用不着它。

      +

      如果通道状态已经变更为 "open", 意味着我们已经完成了在两对等节点之间建立连接。 相应地用户界面根据状态更新,许用并将输入光标聚焦在 text 输入框,以便用户可以立即输入要发送给对方的文本消息, 同时界面许用 "Send" 和 "Disconnect" 按钮(既然它们已经准备好了),禁用"Connect"按钮,既然在已经建立连接的情况下用不着它。

      -

      当连接状态变更为 "closed"时,界面执行相反的操作: 禁用文本输入框和 "Send" 按钮 , 许用"Connect" 按钮, 以便用户在需要时可以打开新的连接,禁用"Disconnect" 按钮,既然没有连接时用不着它。

      +

      当连接状态变更为 "closed"时,界面执行相反的操作: 禁用文本输入框和 "Send" 按钮 , 许用"Connect" 按钮, 以便用户在需要时可以打开新的连接,禁用"Disconnect" 按钮,既然没有连接时用不着它。

      -

      另一方面,作为我们例子的 remote 节点, 则无视这些状态改变事件,仅仅是在控制台输出它们:

      +

      另一方面,作为我们例子的 remote 节点, 则无视这些状态改变事件,仅仅是在控制台输出它们:

        function handleReceiveChannelStatusChange(event) {
           if (receiveChannel) {
      @@ -207,11 +207,11 @@ 

      对通道状态变化的处理

      } }
      -

      handleReceiveChannelStatusChange() 方法接收到发生的事件,事件类型为 {{domxref("RTCDataChannelEvent")}}.

      +

      handleReceiveChannelStatusChange() 方法接收到发生的事件,事件类型为 {{domxref("RTCDataChannelEvent")}}.

      发送消息

      -

      当用户按下 "Send" 按钮,触发我们已建立的该按钮的 {{event("click")}} 事件处理逻辑,在处理逻辑中调用 sendMessage() 方法。 该方法也足够简单:

      +

      当用户按下 "Send" 按钮,触发我们已建立的该按钮的 {{event("click")}} 事件处理逻辑,在处理逻辑中调用 sendMessage() 方法。 该方法也足够简单:

        function sendMessage() {
           var message = messageInputBox.value;
      @@ -221,7 +221,7 @@ 

      发送消息

      messageInputBox.focus(); }
      -

      首先,待发送的消息文本从文本输入框的 {{htmlattrxref("value", "input")}}属性获得,之后该文本通过调用 {{domxref("RTCDataChannel.send", "sendChannel.send()")}}发送到 remote 节点。 都搞定了! 余下的只是些用户体验糖 ——清空并聚焦文本输入框,以便用户可以立即开始下一条消息的输入。

      +

      首先,待发送的消息文本从文本输入框的 {{htmlattrxref("value", "input")}}属性获得,之后该文本通过调用 {{domxref("RTCDataChannel.send", "sendChannel.send()")}}发送到 remote 节点。 都搞定了! 余下的只是些用户体验糖 ——清空并聚焦文本输入框,以便用户可以立即开始下一条消息的输入。

      接收消息

      @@ -235,7 +235,7 @@

      接收消息

      receiveBox.appendChild(el); }
      -

      该方法只是简单地注入了一些 {{Glossary("DOM")}}, 它创建了 {{HTMLElement("p")}} (paragraph) 元素,然后创建了 {{domxref("Text")}} 用于显示从事件的data 属性拿到的消息文本。该 text node 作为子节点附加到receiveBox block,显示在浏览器窗口内容区。

      +

      该方法只是简单地注入了一些 {{Glossary("DOM")}}, 它创建了 {{HTMLElement("p")}} (paragraph) 元素,然后创建了 {{domxref("Text")}} 用于显示从事件的data 属性拿到的消息文本。该 text node 作为子节点附加到receiveBox block,显示在浏览器窗口内容区。

      断开节点

      @@ -269,7 +269,7 @@

      断开节点

      }
      -

      该方法首先关闭每个节点的{{domxref("RTCDataChannel")}},之后类似地关闭每个节点的 {{domxref("RTCPeerConnection")}}。将所有对它们的指向置为null 以避免意外的复用。 之后更新界面状态以符合目前已经不存在连接的事实。

      +

      该方法首先关闭每个节点的{{domxref("RTCDataChannel")}},之后类似地关闭每个节点的 {{domxref("RTCPeerConnection")}}。将所有对它们的指向置为null 以避免意外的复用。 之后更新界面状态以符合目前已经不存在连接的事实。

      下一步

      diff --git a/files/zh-cn/web/api/websocket/binarytype/index.html b/files/zh-cn/web/api/websocket/binarytype/index.html index 8f03669e895b4e..f36530a104409c 100644 --- a/files/zh-cn/web/api/websocket/binarytype/index.html +++ b/files/zh-cn/web/api/websocket/binarytype/index.html @@ -12,7 +12,7 @@ ---

      {{APIRef("Web Sockets API")}}

      -

      WebSocket.binaryType 返回 websocket 连接所传输二进制数据的类型。

      +

      WebSocket.binaryType 返回 websocket 连接所传输二进制数据的类型。

      语法

      @@ -20,14 +20,14 @@

      语法

      返回值

      -

       一条{{DOMXref("DOMString")}}:

      +

      一条{{DOMXref("DOMString")}}:

      "blob"
      -
      如果传输的是 {{domxref("Blob")}} 类型的数据。
      +
      如果传输的是 {{domxref("Blob")}} 类型的数据。
      "arraybuffer"
      如果传输的是 {{jsxref("ArrayBuffer")}} 类型的数据。 -

       

      +

      diff --git a/files/zh-cn/web/api/websocket/close/index.html b/files/zh-cn/web/api/websocket/close/index.html index 5672bbcfc20d00..5de85cbaa46f7b 100644 --- a/files/zh-cn/web/api/websocket/close/index.html +++ b/files/zh-cn/web/api/websocket/close/index.html @@ -5,7 +5,7 @@ ---

      {{APIRef("Web Sockets API")}}

      -

      WebSocket.close() 方法关闭 {{domxref("WebSocket")}}  连接或连接尝试(如果有的话)。 如果连接已经关闭,则此方法不执行任何操作。

      +

      WebSocket.close() 方法关闭 {{domxref("WebSocket")}} 连接或连接尝试(如果有的话)。 如果连接已经关闭,则此方法不执行任何操作。

      语法

      @@ -26,7 +26,7 @@

      抛出的异常

      INVALID_ACCESS_ERR
      一个无效的code
      SYNTAX_ERR
      -
      reason 字符串太长(超过 123 字节)
      +
      reason 字符串太长(超过 123 字节)
      diff --git a/files/zh-cn/web/api/websocket/error_event/index.html b/files/zh-cn/web/api/websocket/error_event/index.html index 81016170728f5a..3b97ce0a423a44 100644 --- a/files/zh-cn/web/api/websocket/error_event/index.html +++ b/files/zh-cn/web/api/websocket/error_event/index.html @@ -5,7 +5,7 @@ ---
      {{APIRef}}
      -

      websocket的连接由于一些错误事件的发生 (例如无法发送一些数据) 而被关闭时,一个error事件将被引发。

      +

      websocket的连接由于一些错误事件的发生 (例如无法发送一些数据) 而被关闭时,一个error事件将被引发。

    gl.TEXTURE_WRAP_S纹理坐标水平填充 s纹理坐标水平填充 s gl.REPEAT (默认值),gl.CLAMP_TO_EDGE, gl.MIRRORED_REPEAT.
    gl.TEXTURE_WRAP_T纹理坐标垂直填充 t纹理坐标垂直填充 t gl.REPEAT (默认值),gl.CLAMP_TO_EDGE, gl.MIRRORED_REPEAT.
    ext.TEXTURE_MAX_ANISOTROPY_EXT 纹理最大向异性 {{domxref("GLfloat")}} 值。 {{domxref("GLfloat")}} 值。
    Additionally available when using a WebGL 2 context
    diff --git a/files/zh-cn/web/api/websocket/index.html b/files/zh-cn/web/api/websocket/index.html index a29fe7d41b4cab..97a7dcc0523a9a 100644 --- a/files/zh-cn/web/api/websocket/index.html +++ b/files/zh-cn/web/api/websocket/index.html @@ -9,7 +9,7 @@ ---
    {{APIRef("Web Sockets API")}}
    -

    WebSocket 对象提供了用于创建和管理 WebSocket 连接,以及可以通过该连接发送和接收数据的 API。

    +

    WebSocket 对象提供了用于创建和管理 WebSocket 连接,以及可以通过该连接发送和接收数据的 API。

    使用 WebSocket() 构造函数来构造一个 WebSocket

    @@ -17,7 +17,7 @@

    构造函数

    {{domxref("WebSocket.WebSocket", "WebSocket(url[, protocols])")}}
    -
    返回一个 WebSocket 对象。
    +
    返回一个 WebSocket 对象。

    常量

    @@ -89,20 +89,20 @@

    方法

    事件

    -

    使用 addEventListener() 或将一个事件监听器赋值给本接口的 oneventname 属性,来监听下面的事件。

    +

    使用 addEventListener() 或将一个事件监听器赋值给本接口的 oneventname 属性,来监听下面的事件。

    {{domxref("WebSocket/close_event", "close")}}
    -
    当一个 WebSocket 连接被关闭时触发。
    +
    当一个 WebSocket 连接被关闭时触发。
    也可以通过 {{domxref("WebSocket/onclose", "onclose")}} 属性来设置。
    {{domxref("WebSocket/error_event", "error")}}
    -
    当一个 WebSocket 连接因错误而关闭时触发,例如无法发送数据时。
    +
    当一个 WebSocket 连接因错误而关闭时触发,例如无法发送数据时。
    也可以通过 {{domxref("WebSocket/onerror", "onerror")}} 属性来设置。
    {{domxref("WebSocket/message_event", "message")}}
    -
    当通过 WebSocket 收到数据时触发。
    +
    当通过 WebSocket 收到数据时触发。
    也可以通过 {{domxref("WebSocket/onmessage", "onmessage")}} 属性来设置。
    {{domxref("WebSocket/open_event", "open")}}
    -
    当一个 WebSocket 连接成功时触发。
    +
    当一个 WebSocket 连接成功时触发。
    也可以通过 {{domxref("WebSocket/onopen", "onopen")}} 属性来设置。
    diff --git a/files/zh-cn/web/api/websocket/message_event/index.html b/files/zh-cn/web/api/websocket/message_event/index.html index 350aac9424cb62..eb876a0a060e7a 100644 --- a/files/zh-cn/web/api/websocket/message_event/index.html +++ b/files/zh-cn/web/api/websocket/message_event/index.html @@ -6,7 +6,7 @@

    {{APIRef}}

    -

    message 事件会在 WebSocket 接收到新消息时被触发。

    +

    message 事件会在 WebSocket 接收到新消息时被触发。

    diff --git a/files/zh-cn/web/api/websocket/open_event/index.html b/files/zh-cn/web/api/websocket/open_event/index.html index 1953d8e02e9fec..1232ec71995325 100644 --- a/files/zh-cn/web/api/websocket/open_event/index.html +++ b/files/zh-cn/web/api/websocket/open_event/index.html @@ -4,7 +4,7 @@ translation_of: Web/API/WebSocket/onopen original_slug: Web/API/WebSocket/onopen --- -

    WebSocket.onopen属性定义一个事件处理程序,当{{domxref("WebSocket")}} 的连接状态{{domxref("WebSocket.readyState","readyState")}} 变为{{domxref("WebSocket.readyState","1")}}时调用;这意味着当前连接已经准备好发送和接受数据。这个事件处理程序通过 {{domxref("事件")}}(建立连接时)触发。

    +

    WebSocket.onopen属性定义一个事件处理程序,当{{domxref("WebSocket")}} 的连接状态{{domxref("WebSocket.readyState","readyState")}} 变为{{domxref("WebSocket.readyState","1")}}时调用;这意味着当前连接已经准备好发送和接受数据。这个事件处理程序通过 {{domxref("事件")}}(建立连接时)触发。

    语法

    diff --git a/files/zh-cn/web/api/websocket/readystate/index.html b/files/zh-cn/web/api/websocket/readystate/index.html index 5ce510452f351d..6d85a925a055f1 100644 --- a/files/zh-cn/web/api/websocket/readystate/index.html +++ b/files/zh-cn/web/api/websocket/readystate/index.html @@ -10,7 +10,7 @@

    概要

    -

    返回当前 {{domxref("WebSocket")}} 的链接状态,只读。

    +

    返回当前 {{domxref("WebSocket")}} 的链接状态,只读。

    语法

    diff --git a/files/zh-cn/web/api/websocket/send/index.html b/files/zh-cn/web/api/websocket/send/index.html index 2104166d1439b5..239bad988fd96c 100644 --- a/files/zh-cn/web/api/websocket/send/index.html +++ b/files/zh-cn/web/api/websocket/send/index.html @@ -13,7 +13,7 @@ -

     WebSocket.send() 方法将需要通过 WebSocket 链接传输至服务器的数据排入队列,并根据所需要传输的 data bytes 的大小来增加 bufferedAmount的值 。若数据无法传输(例如数据需要缓存而缓冲区已满)时,套接字会自行关闭。

    +

    WebSocket.send() 方法将需要通过 WebSocket 链接传输至服务器的数据排入队列,并根据所需要传输的 data bytes 的大小来增加 bufferedAmount的值 。若数据无法传输(例如数据需要缓存而缓冲区已满)时,套接字会自行关闭。

    语法

    @@ -26,13 +26,13 @@

    参数

    用于传输至服务器的数据。它必须是以下类型之一:
    {{domxref("USVString")}}
    -
    文本字符串。字符串将以 UTF-8 格式添加到缓冲区,并且 bufferedAmount 将加上该字符串以 UTF-8 格式编码时的字节数的值。
    +
    文本字符串。字符串将以 UTF-8 格式添加到缓冲区,并且 bufferedAmount 将加上该字符串以 UTF-8 格式编码时的字节数的值。
    {{domxref("ArrayBuffer")}}
    -
    您可以使用一有类型的数组对象发送底层二进制数据;其二进制数据内存将被缓存于缓冲区,bufferedAmount 将加上所需字节数的值。
    +
    您可以使用一有类型的数组对象发送底层二进制数据;其二进制数据内存将被缓存于缓冲区,bufferedAmount 将加上所需字节数的值。
    {{domxref("Blob")}}
    -
    Blob 类型将队列 blob 中的原始数据以二进制中传输。 bufferedAmount 将加上原始数据的字节数的值。
    +
    Blob 类型将队列 blob 中的原始数据以二进制中传输。 bufferedAmount 将加上原始数据的字节数的值。
    {{domxref("ArrayBufferView")}}
    -
    您可以以二进制帧的形式发送任何 JavaScript 类数组对象 ;其二进制数据内容将被队列于缓冲区中。值 bufferedAmount 将加上必要字节数的值。
    +
    您可以以二进制帧的形式发送任何 JavaScript 类数组对象 ;其二进制数据内容将被队列于缓冲区中。值 bufferedAmount 将加上必要字节数的值。
    @@ -41,15 +41,15 @@

    异常

    INVALID_STATE_ERR
    -
    当前连接未处于 OPEN 状态。
    +
    当前连接未处于 OPEN 状态。
    SYNTAX_ERR
    数据是一个包含未配对代理 (unpaired surrogates) 的字符串。
    -

    Note: Gecko 在{{Gecko("6.0")}}中对 send() 方法的实现与规范有些不一致; Gecko 返回一个boolean 来告知当前连接是否依旧处于OPEN 状态 (同时也可以使用该返回值来判定数据是否已经被完全缓存或者传输); 这个问题在 {{Gecko("8.0")}}中被修正。

    +

    Note: Gecko 在{{Gecko("6.0")}}中对 send() 方法的实现与规范有些不一致; Gecko 返回一个boolean 来告知当前连接是否依旧处于OPEN 状态 (同时也可以使用该返回值来判定数据是否已经被完全缓存或者传输); 这个问题在 {{Gecko("8.0")}}中被修正。

    -

    而 {{Gecko("11.0")}}, 支持 {{jsxref("ArrayBuffer")}} 类型但不支持 {{domxref("Blob")}}类型。

    +

    而 {{Gecko("11.0")}}, 支持 {{jsxref("ArrayBuffer")}} 类型但不支持 {{domxref("Blob")}}类型。

    规范

    diff --git a/files/zh-cn/web/api/websockets_api/index.html b/files/zh-cn/web/api/websockets_api/index.html index 4478a1def7a38e..3b9d77a135c537 100644 --- a/files/zh-cn/web/api/websockets_api/index.html +++ b/files/zh-cn/web/api/websockets_api/index.html @@ -25,18 +25,18 @@

    工具

    • HumbleNet: 一个在浏览器中工作的跨平台网络库。它由一个围绕 websocket 和 WebRTC 的 C 包装器组成,抽象了跨浏览器的差异,方便了为游戏和其它应用程序创建多用户网络功能。
    • -
    • µWebSockets:由C++11Node.js 实现的高度可扩展的 WebSocket 服务器和客户端.。
    • -
    • ClusterWS:  轻量级、快速和强大的框架,用于在Node.js.中构建可伸缩的 WebSocket 应用程序。
    • +
    • µWebSockets:由C++11Node.js 实现的高度可扩展的 WebSocket 服务器和客户端.。
    • +
    • ClusterWS: 轻量级、快速和强大的框架,用于在Node.js.中构建可伸缩的 WebSocket 应用程序。
    • Socket.IO: 一个基于长轮询/WebSocket 的Node.js第三方传输协议。
    • SocketCluster: 一个用于Node.js的 pub/sub 专注于可伸缩 WebSocket 框架。
    • -
    • WebSocket-Node: 一个用 Node.js实现 WebSocket 服务器 API。
    • -
    • Total.js:一个用Node.js 实现的的 Web 应用程序框架(例如:WebSocket 聊天)。
    • -
    • Faye: 一个 Node.jsWebSocket (双向连接) 和 EventSource (单向连接) 的服务器和客户端。
    • +
    • WebSocket-Node: 一个用 Node.js实现 WebSocket 服务器 API。
    • +
    • Total.js:一个用Node.js 实现的的 Web 应用程序框架(例如:WebSocket 聊天)。
    • +
    • Faye: 一个 Node.jsWebSocket (双向连接) 和 EventSource (单向连接) 的服务器和客户端。
    • SignalR: SignalR 在可用时将隐藏使用 WebSockets,在不可用时将优雅地使用其他技术和技术,而应用程序代码保持不变。
    • Caddy: 能够将任意命令 (stdin/stdout) 代理为 websocket 的 web 服务器。
    • -
    • ws: 一个流行的 WebSocket 客户端和服务器 Node.js库。
    • +
    • ws: 一个流行的 WebSocket 客户端和服务器 Node.js库。
    • jsonrpc-bidirectional: 易于使用异步 RPC 库,通过单个 WebSocket 或 RTCDataChannel (WebRTC) 连接支持双向调用。TCP / SCTP /等。客户端和服务器可以各自承载自己的 JSONRPC 和服务器端点。
    • -
    • rpc-websockets: JSON-RPC 2.0 在 websocket 上实现 Node.js 和 JavaScript。
    • +
    • rpc-websockets: JSON-RPC 2.0 在 websocket 上实现 Node.js 和 JavaScript。
    diff --git a/files/zh-cn/web/api/websockets_api/writing_a_websocket_server_in_java/index.html b/files/zh-cn/web/api/websockets_api/writing_a_websocket_server_in_java/index.html index c0d740b88709a7..9d616d9443009d 100644 --- a/files/zh-cn/web/api/websockets_api/writing_a_websocket_server_in_java/index.html +++ b/files/zh-cn/web/api/websockets_api/writing_a_websocket_server_in_java/index.html @@ -9,11 +9,11 @@

    引言


    虽然其他的服务端语言也能创建 WebSocket 服务,但是通过这个例子你可以看到使用 Java 来做这件事会更简单。

    -

    这个服务符合协议RFC 6455, 所以它只处理 Chrome 版本 16,Firefox 11,IE 10 及更高版本的连接。

    +

    这个服务符合协议RFC 6455, 所以它只处理 Chrome 版本 16,Firefox 11,IE 10 及更高版本的连接。

    第一步

    -

    WebSocket 通过TCP(传输控制协议)通信. Java 的ServerSocket 类位于 java.net 包中。

    +

    WebSocket 通过TCP(传输控制协议)通信. Java 的ServerSocket 类位于 java.net 包中。

    ServerSocket

    @@ -60,7 +60,7 @@

    OutputStream

    方法:

    -

    write(byte[] b, int off, int len)

    +

    write(byte[] b, int off, int len)

    将从数组b中的下标off开始的len个字节写入此输出流。

    @@ -68,9 +68,9 @@

    InputStream

    方法:

    -

    int read(byte[] b, int off, int len)

    +

    int read(byte[] b, int off, int len)

    -

    将输入流中最多 len 个字节写入byte[] b,写入起始下标为off。尝试读取多达 len 字节,但可能读取较少数量。以整数形式返回实际读取的字节数。

    +

    将输入流中最多 len 个字节写入byte[] b,写入起始下标为off。尝试读取多达 len 字节,但可能读取较少数量。以整数形式返回实际读取的字节数。

    代码片段二:

    @@ -166,7 +166,7 @@

    解码消息

    我可以拿 128,因为第一位总是 1。

    -

    - 167, 225, 225 和 210 是要解码的密钥key的字节。它每次都在变化。

    +

    - 167, 225, 225 和 210 是要解码的密钥key的字节。它每次都在变化。

    - 剩余的编码字节是消息数据部分。

    diff --git a/files/zh-cn/web/api/websockets_api/writing_websocket_client_applications/index.html b/files/zh-cn/web/api/websockets_api/writing_websocket_client_applications/index.html index 89cc31a00ea6ba..f8aeb7a260b2fb 100644 --- a/files/zh-cn/web/api/websockets_api/writing_websocket_client_applications/index.html +++ b/files/zh-cn/web/api/websockets_api/writing_websocket_client_applications/index.html @@ -16,21 +16,21 @@

    创建 WebSocket 对象

    -

    为了使用 WebSocket 协议通信,你需要创建一个 WebSocket 对象;这将会自动地尝试建立与服务器的连接。

    +

    为了使用 WebSocket 协议通信,你需要创建一个 WebSocket 对象;这将会自动地尝试建立与服务器的连接。

    WebSocket 构造函数接受一个必要参数和一个可选参数:

    WebSocket WebSocket(
    -  in DOMString url,
    -  in optional DOMString protocols
    +  in DOMString url,
    +  in optional DOMString protocols
     );
     
    url
    -
    要连接的 URL;这应当是 WebSocket  服务器会响应的 URL。
    +
    要连接的 URL;这应当是 WebSocket 服务器会响应的 URL。
    protocols {{ optional_inline() }}
    -
    一个协议字符串或一个协议字符串数组。这些字符串用来指定子协议,这样一个服务器就可以实现多个 WebSocket 子协议(比如你可能希望一个服务器可以根据指定的 protocol 来应对不同的互动情况)。如果不指定协议字符串则认为是空字符串。
    +
    一个协议字符串或一个协议字符串数组。这些字符串用来指定子协议,这样一个服务器就可以实现多个 WebSocket 子协议(比如你可能希望一个服务器可以根据指定的 protocol 来应对不同的互动情况)。如果不指定协议字符串则认为是空字符串。

    构造函数可能抛出以下异常:

    @@ -45,31 +45,31 @@

    创建 WebSocket 对象

    连接错误

    -

    如果尝试连接过程中发生错误,那么首先一个名为 "error" 的事件会被发送给 WebSocket 对象(然后调用其onerror handler),然后 CloseEvent 被发送给WebSocket (然后调用其 onclose handler)以说明连接关闭的原因。

    +

    如果尝试连接过程中发生错误,那么首先一个名为 "error" 的事件会被发送给 WebSocket 对象(然后调用其onerror handler),然后 CloseEvent 被发送给WebSocket (然后调用其 onclose handler)以说明连接关闭的原因。

    -

    在 Firefox 11 中,通常会从 Mozilla 平台的控制台中收到一个描述性的错误信息,以及一个通过 CloseEvent 在 RFC 6455, Section 7.4 中定义的错误代码。

    +

    在 Firefox 11 中,通常会从 Mozilla 平台的控制台中收到一个描述性的错误信息,以及一个通过 CloseEventRFC 6455, Section 7.4 中定义的错误代码。

    示例

    -

    本例创建了一个新的 WebSocket,连接到地址为 ws://www.example.com/socketserver 的服务器。请求中命名了一个自定义的协议 "protocolOne",这一部分可以省略。

    +

    本例创建了一个新的 WebSocket,连接到地址为 ws://www.example.com/socketserver 的服务器。请求中命名了一个自定义的协议 "protocolOne",这一部分可以省略。

    var exampleSocket = new WebSocket("ws://www.example.com/socketserver", "protocolOne");
     
    -

    返回后,exampleSocket.readyState 参数为 CONNECTING。一旦连接可以传送数据,readyState 就会变成 OPEN 。

    +

    返回后,exampleSocket.readyState 参数为 CONNECTING。一旦连接可以传送数据,readyState 就会变成 OPEN

    如果你想建立一个支持协议可选的连接,你可以指定协议的列表:

    var exampleSocket = new WebSocket("ws://www.example.com/socketserver", ["protocolOne", "protocolTwo"]);
     
    -

    一旦连接建立了(也就是说 readyState 是 OPEN) exampleSocket.protocol 就会告诉你服务器选择了哪个协议。

    +

    一旦连接建立了(也就是说 readyStateOPENexampleSocket.protocol 就会告诉你服务器选择了哪个协议。

    -

    上面的例子中 ws 替代了 http,同样地 wss 也会替代 https. 建立 WebSocket 链接有赖于 HTTP Upgrade mechanism, 所以当我们使用 ws://www.example.com或者 wss://www.example.com来访问 HTTP 服务器的时候协议会隐式地升级。

    +

    上面的例子中 ws 替代了 http,同样地 wss 也会替代 https. 建立 WebSocket 链接有赖于 HTTP Upgrade mechanism, 所以当我们使用 ws://www.example.com或者 wss://www.example.com来访问 HTTP 服务器的时候协议会隐式地升级。

    向服务器发送数据

    -

    一旦你的连接打开完成,你就可以向服务器发送数据了。对每一个要发送的消息使用 WebSocket 对象的 send() 方法:

    +

    一旦你的连接打开完成,你就可以向服务器发送数据了。对每一个要发送的消息使用 WebSocket 对象的 send() 方法:

    exampleSocket.send("Here's some text that the server is urgently awaiting!");
     
    @@ -78,32 +78,32 @@

    向服务器发送数据

    注意: 在版本 11 之前,Firefox 只支持以字符串的形式发送数据。
    -

    因为连接的建立是异步的,而且容易失败,所以不能保证刚创建 WebSocket 对象时使用 send() 方法会成功。我们至少可以确定企图在链接建立起来之后立马发送数据,可以通过注册 onopen 事件处理器解决:

    +

    因为连接的建立是异步的,而且容易失败,所以不能保证刚创建 WebSocket 对象时使用 send() 方法会成功。我们至少可以确定企图在链接建立起来之后立马发送数据,可以通过注册 onopen 事件处理器解决:

    exampleSocket.onopen = function (event) {
    -  exampleSocket.send("Here's some text that the server is urgently awaiting!");
    +  exampleSocket.send("Here's some text that the server is urgently awaiting!");
     };
     

    使用 JSON 发送对象

    -

    你可以方便地使用JSON 来向服务器发送复杂一些的数据。例如一个聊天程序与服务器交互的协议可以通过封装在 JSON 里的数据来实现:

    +

    你可以方便地使用JSON 来向服务器发送复杂一些的数据。例如一个聊天程序与服务器交互的协议可以通过封装在 JSON 里的数据来实现:

    // 服务器向所有用户发送文本
     function sendText() {
       // 构造一个 msg 对象, 包含了服务器处理所需的数据
    -  var msg = {
    -    type: "message",
    -    text: document.getElementById("text").value,
    -    id:   clientID,
    -    date: Date.now()
    -  };
    -
    -  // 把 msg 对象作为 JSON 格式字符串发送
    -  exampleSocket.send(JSON.stringify(msg));
    -
    -  // 清空文本输入元素,为接收下一条消息做好准备。
    -  document.getElementById("text").value = "";
    +  var msg = {
    +    type: "message",
    +    text: document.getElementById("text").value,
    +    id:   clientID,
    +    date: Date.now()
    +  };
    +
    +  // 把 msg 对象作为 JSON 格式字符串发送
    +  exampleSocket.send(JSON.stringify(msg));
    +
    +  // 清空文本输入元素,为接收下一条消息做好准备。
    +  document.getElementById("text").value = "";
     }
     
    @@ -111,8 +111,8 @@

    接收服务器发送的消息

    WebSockets 是一个基于事件的 API;收到消息的时候,一个 "message" 消息会被发送到 onmessage 函数。为了开始监听传入数据,可以进行如下操作:

    -
    exampleSocket.onmessage = function (event) {
    -  console.log(event.data);
    +
    exampleSocket.onmessage = function (event) {
    +  console.log(event.data);
     }
     
    @@ -164,7 +164,7 @@

    接受与解析 JSON 对象

    } };
    -

    这里我们使用 JSON.parse() 来将 JSON 转换回原始对象,然后检查并根据其内容做下一步动作。

    +

    这里我们使用 JSON.parse() 来将 JSON 转换回原始对象,然后检查并根据其内容做下一步动作。

    文本数据的格式

    diff --git a/files/zh-cn/web/api/websockets_api/writing_websocket_server/index.html b/files/zh-cn/web/api/websockets_api/writing_websocket_server/index.html index 81d76f8a28d358..e28fc55af3090a 100644 --- a/files/zh-cn/web/api/websockets_api/writing_websocket_server/index.html +++ b/files/zh-cn/web/api/websockets_api/writing_websocket_server/index.html @@ -28,7 +28,7 @@

    TcpListener

    TcpListener(System.Net.IPAddress localaddr, int port)
    -

    localaddr 是监听地址,  port 是监听端口。

    +

    localaddr 是监听地址, port 是监听端口。

    如果字符串创建 IPAddress 对象,请使用 Parse 静态方法。

    @@ -75,7 +75,7 @@

    TcpClient

    • int Available
      - 这个属性表示已经发送了多少个字节的数据。它的值为零,直到 NetworkStream.DataAvailable 为 true。
    • + 这个属性表示已经发送了多少个字节的数据。它的值为零,直到 NetworkStream.DataAvailable 为 true。

    NetworkStream

    @@ -147,21 +147,21 @@

    握手

    
     if (new System.Text.RegularExpressions.Regex("^GET").IsMatch(data))
     {
    -    const string eol = "\r\n"; // HTTP/1.1 defines the sequence CR LF as the end-of-line marker
    -
    -    Byte[] response = Encoding.UTF8.GetBytes("HTTP/1.1 101 Switching Protocols" + eol
    -        + "Connection: Upgrade" + eol
    -        + "Upgrade: websocket" + eol
    -        + "Sec-WebSocket-Accept: " + Convert.ToBase64String(
    -            System.Security.Cryptography.SHA1.Create().ComputeHash(
    -                Encoding.UTF8.GetBytes(
    -                    new System.Text.RegularExpressions.Regex("Sec-WebSocket-Key: (.*)").Match(data).Groups[1].Value.Trim() + "258EAFA5-E914-47DA-95CA-C5AB0DC85B11"
    -                )
    -            )
    -        ) + eol
    -        + eol);
    -
    -    stream.Write(response, 0, response.Length);
    +    const string eol = "\r\n"; // HTTP/1.1 defines the sequence CR LF as the end-of-line marker
    +
    +    Byte[] response = Encoding.UTF8.GetBytes("HTTP/1.1 101 Switching Protocols" + eol
    +        + "Connection: Upgrade" + eol
    +        + "Upgrade: websocket" + eol
    +        + "Sec-WebSocket-Accept: " + Convert.ToBase64String(
    +            System.Security.Cryptography.SHA1.Create().ComputeHash(
    +                Encoding.UTF8.GetBytes(
    +                    new System.Text.RegularExpressions.Regex("Sec-WebSocket-Key: (.*)").Match(data).Groups[1].Value.Trim() + "258EAFA5-E914-47DA-95CA-C5AB0DC85B11"
    +                )
    +            )
    +        ) + eol
    +        + eol);
    +
    +    stream.Write(response, 0, response.Length);
     }
     
    diff --git a/files/zh-cn/web/api/websockets_api/writing_websocket_servers/index.html b/files/zh-cn/web/api/websockets_api/writing_websocket_servers/index.html index aabd3bbafe2525..1eda4bb7822a72 100644 --- a/files/zh-cn/web/api/websockets_api/writing_websocket_servers/index.html +++ b/files/zh-cn/web/api/websockets_api/writing_websocket_servers/index.html @@ -41,12 +41,12 @@

    客户端握手请求

    Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ== Sec-WebSocket-Version: 13 -

    客户可以在这里请求扩展和/或子协议;详情请见杂项。当然,你也可以在这里加上你所需要的一般请求头如User-Agent, Referer, Cookie或者认证头。WebSocket 没有作要求,忽略它们也是安全的。在大多数情况下,反向代理已经做了这些处理。

    +

    客户可以在这里请求扩展和/或子协议;详情请见杂项。当然,你也可以在这里加上你所需要的一般请求头如User-AgentRefererCookie或者认证头。WebSocket 没有作要求,忽略它们也是安全的。在大多数情况下,反向代理已经做了这些处理。

    如果任何请求头信息不被理解或者具有不正确的值,则服务器应该发送“400 Bad Request”并立即关闭套接字。 像往常一样,它也可能会给出 HTTP 响应正文中握手失败的原因,但可能永远不会显示消息(浏览器不显示它)。 如果服务器不理解该版本的 WebSocket,则应该发送一个Sec-WebSocket-Version头,其中包含它理解的版本。(本指南解释了最新的 v13)。 下面我们来看看奇妙的请求头Sec-WebSocket-Key

    -

    提示: 所有浏览器将会发送一个 Origin请求头。 你可以将这个请求头用于安全方面(检查是否是同一个域,白名单/ 黑名单等),如果你不喜欢这个请求发起源,你可以发送一个403 Forbidden。需要注意的是非浏览器只能发送一个模拟的 Origin。大多数应用会拒绝不含这个请求头的请求.。

    +

    提示: 所有浏览器将会发送一个 Origin请求头。 你可以将这个请求头用于安全方面(检查是否是同一个域,白名单/ 黑名单等),如果你不喜欢这个请求发起源,你可以发送一个403 Forbidden。需要注意的是非浏览器只能发送一个模拟的 Origin。大多数应用会拒绝不含这个请求头的请求.。

    @@ -68,7 +68,7 @@

    服务器握手响应

    -

    另外,服务器可以在这时候决定插件或子协议,详情参见杂项。  Sec-WebSocket-Accept 参数很有趣,它需要服务器通过客户端发送的Sec-WebSocket-Key 计算出来。 怎样计算呢, 把客户发送的 Sec-WebSocket-Key 和 "258EAFA5-E914-47DA-95CA-C5AB0DC85B11" (这个叫做 "魔法值") 连接起来,把结果用SHA-1编码,再用base64编码一次,就可以了。 

    +

    另外,服务器可以在这时候决定插件或子协议,详情参见杂项Sec-WebSocket-Accept 参数很有趣,它需要服务器通过客户端发送的Sec-WebSocket-Key 计算出来。 怎样计算呢, 把客户发送的 Sec-WebSocket-Key 和 "258EAFA5-E914-47DA-95CA-C5AB0DC85B11" (这个叫做 "魔法值") 连接起来,把结果用SHA-1编码,再用base64编码一次,就可以了。

    参考:这看起来繁复的处理使得客户端明确服务端是否支持 WebSocket。这是十分重要的,如果服务端接收到一个 WebSocket 连接但是把数据作为 HTTP 请求理解可能会导致安全问题。

    @@ -163,7 +163,7 @@

    Pings 和 Pongs:WebSockets 的心

    在经过握手之后的任意时刻里,无论客户端还是服务端都可以选择发送一个 ping 给另一方。 当 ping 消息收到的时候,接受的一方必须尽快回复一个 pong 消息。 例如,可以使用这种方式来确保客户端还是连接状态。

    -

    一个 ping 或者 pong 都只是一个常规的帧, 只是这个帧是一个控制帧。Ping 消息的 opcode 字段值为 0x9,pong 消息的 opcode 值为  0xA 。当你获取到一个 ping 消息的时候,回复一个跟 ping 消息有相同载荷数据的 pong 消息 (对于 ping 和 pong,最大载荷长度位 125)。 你也有可能在没有发送 ping 消息的情况下,获取一个 pong 消息,当这种情况发生的时候忽略它。

    +

    一个 ping 或者 pong 都只是一个常规的帧, 只是这个帧是一个控制帧。Ping 消息的 opcode 字段值为 0x9,pong 消息的 opcode 值为 0xA 。当你获取到一个 ping 消息的时候,回复一个跟 ping 消息有相同载荷数据的 pong 消息 (对于 ping 和 pong,最大载荷长度位 125)。 你也有可能在没有发送 ping 消息的情况下,获取一个 pong 消息,当这种情况发生的时候忽略它。

    如果在你有机会发送一个 pong 消息之前,你已经获取了超过一个的 ping 消息,那么你只发送一个 pong 消息。

    @@ -190,7 +190,7 @@

    扩展

    Think of an extension as compressing a file before e-mailing it to someone. Whatever you do, you're sending the same data in different forms. The recipient will eventually be able to get the same data as your local copy, but it is sent differently. That's what an extension does. WebSockets defines a protocol and a simple way to send data, but an extension such as compression could allow sending the same data but in a shorter format.

    -

    扩展在规范的 5.8, 9, 11.3.2, and 11.4 进行了解释

    +

    扩展在规范的 5.8, 9, 11.3.2, and 11.4 进行了解释

    TODO

    @@ -225,7 +225,7 @@

    子协议

    -

    服务器不能发送多个Sec-Websocket-Protocol。如果服务器不想使用任何子协议,它就不应该发送任何Sec-WebSocket-Protocol header。发送空白 header 是不正确的。如果客户端没有得到它想要的子协议,它可以关闭连接。

    +

    服务器不能发送多个Sec-Websocket-Protocol。如果服务器不想使用任何子协议,它就不应该发送任何Sec-WebSocket-Protocol header。发送空白 header 是不正确的。如果客户端没有得到它想要的子协议,它可以关闭连接。

    如果您希望您的服务器遵守某些子协议,那么很自然地,您需要服务器上的额外代码。假设我们使用的是子协议 JSON。在这个子协议中,所有数据都以 JSON 的形式传递。如果客户端请求这个协议,而服务器想要使用它,服务器将需要一个 JSON 解析器。实际上,这是库的一部分,但是服务器需要传递数据。

    diff --git a/files/zh-cn/web/api/webvr_api/concepts/index.html b/files/zh-cn/web/api/webvr_api/concepts/index.html index 259094d7af4b86..d11fce4fb476e7 100644 --- a/files/zh-cn/web/api/webvr_api/concepts/index.html +++ b/files/zh-cn/web/api/webvr_api/concepts/index.html @@ -20,7 +20,7 @@

    这篇文章探讨了一些关于虚拟现实(VR)的概念及其背后的理论基础。如果你是一个进入这个领域的新手,在你深入学习相关代码知识前,非常有必要对于以下的话题做一定的了解。【K】

    -

     

    +

    The history of VR 关于 VR 的历史【K】

    @@ -28,65 +28,65 @@

    The history of VR 关于 VR

    虚拟现实(VR)并不是一件新生的事物:这个概念甚至能追溯到,比 2012 年 Oculus Rift 在 Kickstarter campaig 上发起众筹,还要更早的时候。人们已经持续研发这种技术长达数十年。

    -

     

    +

    -

     

    +

    In 1939 the View-Master device was created, allowing people to see 3D pictures. The device displayed images stored on cardboard disks containing stereoscopic 3D pairs of small color photographs. After years of development the military got interested in using such technology, and Project Headsight was born in 1961 — this involved a helmet incorporating a video screen with a head-tracking system.

    1939 年View-Master device问世,它允许人们通过它观看 3D 成像的照片。这款设备播放的是,存储在圆盘硬纸板上的,成对的立体 3D 的彩色小照片。经过了许多年的研发,军方开始对使用这项技术产生了浓厚的兴趣,终于在 1961 年,名为 HEADSIGHT 的项目诞生了:它包含了一个连接头部追踪系统的显示屏的头盔。

    -

     

    +

    There were various experiments conducted over the next few decades, but it wasn't resricted to science labs and battlefields anymore. Eventually pop culture took over with movie directors showing their visions of virtual reality. Movies like Tron (1982) and The Matrix (1999) were created, where people could transfer themselves into a whole new cyber world or were trapped in one without even knowing, accepting it as the real world.

    -

    在接下来的数十年中,出现了许多具有指导性作用的实验,但是它不再像从前那样只对科学实验室和战场开放。最终大众文化通过电影导演展现他们的视角,从而接过了虚拟现实的大旗。像【创:战纪 TRON: Legacy(1982)】 和【黑客帝国 The Matrix (1999)】那样的电影被拍摄出来,在那里人们能够轻易的将自己置身于一个完全由信息构成的世界,又或者,接受让自己进入一个从未认识过的新世界,并且将它当做一个真实的存在。【K】

    +

    在接下来的数十年中,出现了许多具有指导性作用的实验,但是它不再像从前那样只对科学实验室和战场开放。最终大众文化通过电影导演展现他们的视角,从而接过了虚拟现实的大旗。像【创:战纪 TRON: Legacy(1982)】 和【黑客帝国 The Matrix (1999)】那样的电影被拍摄出来,在那里人们能够轻易的将自己置身于一个完全由信息构成的世界,又或者,接受让自己进入一个从未认识过的新世界,并且将它当做一个真实的存在。【K】

    -

    The first VR gaming attempts were big and expensive — in 1991 Virtuality Group created a VR-ready arcade machine with goggles and ported popular titles like Pac-Man to virtual reality. Sega introduced their VR glasses at the Consumer Electronics Show in 1993. Companies were experimenting, but the market and consumers weren't convinced — we had to wait until 2012 to see  real example of a successful VR project.

    +

    The first VR gaming attempts were big and expensive — in 1991 Virtuality Group created a VR-ready arcade machine with goggles and ported popular titles like Pac-Man to virtual reality. Sega introduced their VR glasses at the Consumer Electronics Show in 1993. Companies were experimenting, but the market and consumers weren't convinced — we had to wait until 2012 to see real example of a successful VR project.

    世界上第一次 VR 游戏的尝试是既大又昂贵的:1991 年 Virtuality Group 制造了一款名为 VR-ready 的商业街机,其中装有护目镜,并且美其名曰 Pac-Man to virtual reality。随后,世嘉株式会社 (SEGA) 在 1993 的 Consumer Electronics Show 上引进了他们的 VR 眼睛设备。当时的公司都在努力尝试,但是市场和消费者并不关注和买账:之后,我们再见到真正成功的 VR 项目,就要等到最近的 2012 年了。【K】

    -

     

    +

    -

     

    +

    -

     

    +

    VR in recent times 最近的 VR 发展【K】

    So what's new? Virtual Reality hardware needs to deliver high-precision, low-latency data to deliver an acceptable user experience; computers running VR applications need to be powerful enough to handle all this information. It has not been until recently that such accuracy and power has been available at an afforable cost, if at all. Early VR prototypes cost tens of thousands of dollars, whereas the latest Oculus Rift developer kit is available for $350, and cheaper solutions are available, such as mobile device-based solutions like Google Cardboard.

    -

    那么有什么值得我们期待的呢?VR 硬件需要传输高精度的信息,在保证低延迟的情况下传递可接受的用户的体感信息;运行 VR 设备和程序的电脑,必需强大到足以维持这些庞大的信息。直到最近的这几年,如此高精度并且能量强大的设备,才能通过大众可以接受的价格被购买到。早期的 VR 原型设备,需要花费数万美元,然而最近出现的Oculus Rift developer kit 却仅售 350$, 并且还有更加便宜的解决方案,比如基于手机的 VR 设备像是Google Cardboard.【K】

    +

    那么有什么值得我们期待的呢?VR 硬件需要传输高精度的信息,在保证低延迟的情况下传递可接受的用户的体感信息;运行 VR 设备和程序的电脑,必需强大到足以维持这些庞大的信息。直到最近的这几年,如此高精度并且能量强大的设备,才能通过大众可以接受的价格被购买到。早期的 VR 原型设备,需要花费数万美元,然而最近出现的Oculus Rift developer kit 却仅售 350$, 并且还有更加便宜的解决方案,比如基于手机的 VR 设备像是Google Cardboard.【K】

    -

     

    +

    -

     

    +

    -

    By 2015, such VRDevices gained commercial support for VR technology. Sony are developing a VR hardware kit for the PS4 (codename Project Morpheus), Facebook bought Oculus Rift for $2 billion, Valve has created SteamVR software that works with HTC's Vive VR headset, and Google has launched a 2.0 version of its Cardboard  that supports up to 6 inch phones (it is also fully compatible with iOS devices because it has a piece of conductive foam that works as a tap over the screen.)

    +

    By 2015, such VRDevices gained commercial support for VR technology. Sony are developing a VR hardware kit for the PS4 (codename Project Morpheus), Facebook bought Oculus Rift for $2 billion, Valve has created SteamVR software that works with HTC's Vive VR headset, and Google has launched a 2.0 version of its Cardboard that supports up to 6 inch phones (it is also fully compatible with iOS devices because it has a piece of conductive foam that works as a tap over the screen.)

    -

    到了 2015 年,类似的 VR 设备吸引了大量的商业投资,进入到 VR 科技的研发中。SONY 正在 PS4 中开发一项针对 VR 的硬件工具 (编程代号 Project Morpheus), FACRBOOK 花费 20 亿美元买下了 Oculus Rift, Valve 开发了 SteamVR 软件系统,能够应用于 HTC 的Vive VR headset, 随后,谷歌发布了能够最多支持 6 英寸手机屏幕的 CARDBOARD 的 2.0 版本 (它同时完全兼容了 IOS 的设备,因为在它屏幕的背后有一块传感海绵凸起作为触碰点。)

    +

    到了 2015 年,类似的 VR 设备吸引了大量的商业投资,进入到 VR 科技的研发中。SONY 正在 PS4 中开发一项针对 VR 的硬件工具 (编程代号 Project Morpheus), FACRBOOK 花费 20 亿美元买下了 Oculus Rift, Valve 开发了 SteamVR 软件系统,能够应用于 HTC 的Vive VR headset, 随后,谷歌发布了能够最多支持 6 英寸手机屏幕的 CARDBOARD 的 2.0 版本 (它同时完全兼容了 IOS 的设备,因为在它屏幕的背后有一块传感海绵凸起作为触碰点。)

    -

     

    +

    -

    Samsung also launched a headset associated with Oculus called GearVR, which works by connecting its Note 4 and 6S devices. This however only works with native apps, so it is not very interesting for the specific area of WebVR.

    +

    Samsung also launched a headset associated with Oculus called GearVR, which works by connecting its Note 4 and 6S devices. This however only works with native apps, so it is not very interesting for the specific area of WebVR.

    三星公司同 Oculus 合作,也推出了它的头戴设备GearVR, 这款设备可以连接旗下的 NOTE4 以及 6S 等手机。然而这款设备仅仅能够运行几款纯粹的 APP 应用,因而相对于 WEBVR 的特效领域而言,显得不是那么的有意思。【K】

    -

     

    +

    -

     

    +

    The technology itself is here, and the more expensive headsets will only get cheaper over time so more people can experience virtual reality on their own in the future.

    科技已经发展到了今天,随着时间的推移,只会有更多的昂贵的头显设备变得越来越便宜,从而另更多的人在将来能够亲自体验虚拟现实的乐趣。【K】

    -

     

    +

    -

     

    +

    Input devices 传入设备【K】

    @@ -94,22 +94,22 @@

    Input devices 传入设备

    针对虚拟显示应用的手持传入设备,是一个非常有意思的话题:这是一种全新的体验,从而必须要设计出沉浸式的用户界面来适应它。目前为止,在这方面,从传统的键盘鼠标,一直到 LEAP MOTION 这样的新兴设备,有多种多样的途径来实现它。只有通过【试错法】最终才能窥见,哪种方式最有利于创造情景以及哪种输入设备最适合于你所玩的游戏的类型。【K】

    -

     

    +

    VR Hardware setup 创建 VR 设备的硬件环境【K】

    -

     

    +

    There are two main types of setup, mobile or computer-connected. Their minimum hardware set ups are as follows:

    主要有两种创建 VR 环境的类型,手机或者是 PC。以下是实现这两种环境所需要的最少的硬件支持:

    -

     

    +

      -
    • Mobile: A Head-mounted display (HMD) is created using a smartphone — which acts as the VR display — mounted in a VR mount such as Google Cardboard, which contains the required lenses to provide stereoscopic vision of what is projected on the mobile screen.
    • +
    • Mobile: A Head-mounted display (HMD) is created using a smartphone — which acts as the VR display — mounted in a VR mount such as Google Cardboard, which contains the required lenses to provide stereoscopic vision of what is projected on the mobile screen.
    • 手机:通过使用一部智能手机可以营造一部头显设备(HMD)-- 扮演 VR 显示器的角色 -- 安装在一个像谷歌 CARDBOARD 那样的 VR 框架中,其中包含了必需要有的透镜,用以提供投射在手机屏幕上的立体视觉效果。【K】Mobile based VR setup
    • Computer-connected: A VR setup is connected to your computer — this consists of a Head Mounted Display (HMD) containing a high resolution landscape-oriented screen onto which the visuals for both the left and right eye are displayed, which also includes a lens for each eye to promote separation of the left and right eye scene (stereoscopic vision.) The setup also includes a separate position sensor that works out the position/orientation/velocity/acceleration of your head and constantly passes that information the computer.
    • 电脑:将一部 VR 设备连接到你的电脑上 -- 它是由一部包含了能分别为左眼和右眼显示图像的高分辨率全景镜头所组成的头显设备所组成,同时它还包含了两块分别为双眼配备的,可以提升左右眼图像分离(立体视觉)的透镜。这套设备还包含了一套分离式的感应设备,它能够测算出你的头部的位置/方向/速度/加速度等信息,并实时的把这些信息传输给计算机。【K】Computer based VR Setup
    • @@ -120,31 +120,31 @@

      VR Hardware setu

      注释:通过电脑连接的系统有时候不会包含定位传感装置,但是通常情况下都会有。【K】

      -

       

      +

    -

    Other hardware that complements the VR experience includes:  

    +

    Other hardware that complements the VR experience includes:

    其余的帮助补充完整的 VR 体验的硬件包括:【K】

    -

     

    +

    -

     

    +

      -
    • A hand recognition sensor: A sensor that tracks the position and movement of your hand, allowing it to become an interesting controller, and an object in VR gameworlds. The most advanced to date is the Leap Motion, which works with the computer (connected to the Oculus Rift) and can also work connected to a mobile device (the latter is in an experimental phase.)
    • +
    • A hand recognition sensor: A sensor that tracks the position and movement of your hand, allowing it to become an interesting controller, and an object in VR gameworlds. The most advanced to date is the Leap Motion, which works with the computer (connected to the Oculus Rift) and can also work connected to a mobile device (the latter is in an experimental phase.)
    • 手持传感识别器:一个可以追踪你的手部位置和运动的传感器,这使得它变成了一个非常有趣的控制器,以及一件存在于 VR 游戏世界种的物体。迄今为止,最先进的这类设备首属Leap Motion,它可以同电脑配合使用 (同 Oculus Rift 设备连接) 并且同时还可以和手机兼容 (暂时处于实验阶段。)
    • -
    • A gamepad: We can configurate an XBox controller or similar to work as a keyboard in the browser — this offers further possibilities of interaction with a VR webpage. There are some gamepads that work with a mobile setup — like the MergeVR headset — but these are connected via Bluetooth so don't work with WebVR. 
    • +
    • A gamepad: We can configurate an XBox controller or similar to work as a keyboard in the browser — this offers further possibilities of interaction with a VR webpage. There are some gamepads that work with a mobile setup — like the MergeVR headset — but these are connected via Bluetooth so don't work with WebVR.
    • (手机)游戏手柄:我们可以配置一套 XBOX 控制器或者类似的设备作为浏览器的键盘 -- 这种方法提供了另一种同 VR 网页互动的形式。有一些游戏手柄更可以和手机协同使用 -- 就像MergeVR headset--但是这些方法都是通过蓝牙连接设备的方法,并不能完全等同于和 WEBVR 结合。
    • -
    • An eye tracking sensor (experimental): The FOVE project is the first headset that reads subtle eye movements.
    • +
    • An eye tracking sensor (experimental): The FOVE project is the first headset that reads subtle eye movements.
    • 眼部追踪传感器(实验产品):FOVE 项目是第一个研究用于追踪和读取人眼运动设备的项目。
    • -
    • A facial expression tracker (experimental): Researchers at the University of Southern California and Facebook’s Oculus division have been testing new ways of tracking facial expressions and transferring them to a virtual character.
    • +
    • A facial expression tracker (experimental): Researchers at the University of Southern California and Facebook’s Oculus division have been testing new ways of tracking facial expressions and transferring them to a virtual character.
    • 面部表情追踪设备(实验产品):位于南加州大学和 Facebook’s Oculus 部门的研究人员,已经开始测试更多新的追踪人类面部表情并且能把他们转换成虚拟现实角色的方法。
    • A more complex positional sensor system: The SteamVR controller, combined with the Lighthouse tracking system aims to achieve an experience in which you can move through a space of 10x10 square feet in a VR world.
    • 更加复杂的位置传感系统:SteamVR 控制器,结合了Lighthouse追踪系统,旨在实现帮助我们能在一个 10x10 square feet 的 VR 空间范围内自由活动的目的。
    -

    Position and orientation, velocity and acceleration 

    +

    Position and orientation, velocity and acceleration

    位置和方向,速度和加速度【K】

    @@ -152,7 +152,7 @@

    位置和方向,速度和

    正如上文所提到的,那个位置传感器通过检测与 HMD 相关的信息并且实时的输出这些数据,从而允许你持续的通过改变你的头部移动,更新你身处的虚拟场景,包括旋转等动作。但是我们所说的这些信息包括些什么呢?【K】

    -

     

    +

    Position and Orientation VR setup

    @@ -223,7 +223,7 @@

    Field of view 视野【K】{{domxref("VRFieldOfViewReadOnly.rightDegrees")}}: The number of degrees to the right that the field of view extends in.
  • {{domxref("VRFieldOfViewReadOnly.downDegrees")}}: The number of degrees downwards that the field of view extends in.
  • {{domxref("VRFieldOfViewReadOnly.leftDegrees")}}: The number of degrees to the left that the field of view extends in.
  • -
  • zNear: The distance from the middle of the user's head to the start of the visible FOV.  
  • +
  • zNear: The distance from the middle of the user's head to the start of the visible FOV.
  • zFar: The distance from the middle of the user's head to the end of the visible FOV.
  • @@ -243,65 +243,65 @@

    Field of view 视野【K】【可以说这一点是 VR 概念中同其他 3D 技术区别开,非常重要的特性,就是创建和引导使用者去发现他们视野中看不见的部分】

    -

     

    +

    -

     

    +

    -

    Concepts for VR apps VR APP 的概念【K】

    +

    Concepts for VR apps VR APP 的概念【K】

    This section discusses concepts to be aware of when developing VR apps that you've probably not had to consider before when developing regular apps for mobile or desktop.

    这个部分讨论的是,从前在我们开发普通的 APP 和手机或者 PC 应用时,不必考虑的,但是在我们开发 VR APP 的时候必须被意识到的概念。

    -

     

    +

    -

     

    +

    -

     

    +

    Stereoscopic vision【K】

    立体视觉

    -

    Stereoscopic vision is the normal vision humans and (most) animals have — the perception of two slightly differing images (one from each eye) as a single image. This results in depth perception, helping us to see the world in glorious 3D. To recreate this in VR apps, you need to render two very slightly different views side by side, which will be taken in by the left and right eyes when the user is using the HMD.

    +

    Stereoscopic vision is the normal vision humans and (most) animals have — the perception of two slightly differing images (one from each eye) as a single image. This results in depth perception, helping us to see the world in glorious 3D. To recreate this in VR apps, you need to render two very slightly different views side by side, which will be taken in by the left and right eyes when the user is using the HMD.

    立体视觉是大多数的动物以及人类拥有的正常的视觉效果 -- 也就是将来自每只眼睛的略有差别的图像,通过大脑的处理,感知为一张立体的图片。这种对深度的感知结果,帮助我们通过一种神奇的 3D 的视角看世界。为了在 APP 中重现这种视觉效果,你需要渲染两幅略有不同的场景,当使用者在通过使用 HMD 观看时能分别被左右眼所调用。

    -

     

    +

    How to create stereoscopic 3D images

    -

    Head tracking 头部追踪【K】

    +

    Head tracking 头部追踪【K】

    -

    The primary technology used to make you feel present in a 360º scene, thanks to the gyroscope, accelerometer, and magnetometer (compass) included in the HMD.

    +

    The primary technology used to make you feel present in a 360º scene, thanks to the gyroscope, accelerometer, and magnetometer (compass) included in the HMD.

    首要的使我们能够感到置身于 360°场景中的科技,要感谢包括在 HMD 设备中的陀螺仪、加速剂、磁力计等装置。
    - It has primary relevance because it makes our eyes believe we are in front of a spherical screen, giving users realistic immersion inside the app canvas.

    + It has primary relevance because it makes our eyes believe we are in front of a spherical screen, giving users realistic immersion inside the app canvas.

    这种技术对于 VR 有非常重要的关联性,因为它让我们的眼睛相信我们置身于一个球形的屏幕前,它提供给使用者一种在 APP 画布中沉浸式的体验。

    Eye strain【K】眼部拉伤

    -

    A term commonly used in VR because it is a major handicap of using an HMD — we are constantly fooling the eye with what we are showing in the app canvas, and this leads to the eyes doing a lot more work than they normally would, so using VR apps for any extended period of time can lead to eye strain.

    +

    A term commonly used in VR because it is a major handicap of using an HMD — we are constantly fooling the eye with what we are showing in the app canvas, and this leads to the eyes doing a lot more work than they normally would, so using VR apps for any extended period of time can lead to eye strain.

    这是一个通常使用在 VR 中的术语,因为这也是使用 HMD 设备的一个副作用 -- 我们的视线历来会追踪我们在 APP 画布中被展示的内容,然而这将导致我们的眼睛超负荷的工作,因此假如我们使用 VR APP 时,有任何超时的行为,都有可能导致眼部的拉伤。

    -

     

    +

    To minimize this unwanted effect, we need to:

    为了将这些可能的影响最小化,我们可以:

      -
    • Avoid focusing on different depths (e.g. avoid using a lot of particles with differents depths.)
    • +
    • Avoid focusing on different depths (e.g. avoid using a lot of particles with differents depths.)
    • 避免聚焦不同的深度(也就是要避免使用大量的具有不同深度特性的颗粒)
    • -
    • Avoid eye convergion (e.g. if you have an object that comes towards the camera your eyes will follow and converge on it.)
    • +
    • Avoid eye convergion (e.g. if you have an object that comes towards the camera your eyes will follow and converge on it.)
    • 避免长期的视线集中(如果有一个物体朝着摄像机移动过来,你的眼睛将会跟随和聚焦在它之上)
    • Use darker backgrounds with more subdued colors where possible; a bright screen will make the eyes more tired.
    • 尽量使用带有舒缓颜色的深色背景;假如屏幕太亮会增加眼睛的负担。
    • Avoid rapid brightness changes.
    • 避免迅速的视线的改变。
    • -
    • Avoid presenting the user with large amounts of text to read. You should also be careful with the distance between the eyes/camera and the text to read. 0.5m is uncomfortable, whereas at more than 2m the stereo effect starts to break down, so somewhere in between is advisable.
    • +
    • Avoid presenting the user with large amounts of text to read. You should also be careful with the distance between the eyes/camera and the text to read. 0.5m is uncomfortable, whereas at more than 2m the stereo effect starts to break down, so somewhere in between is advisable.
    • 避免给使用者展现大量的文本内容。你应该非常注意眼睛/摄像机同文本之间的距离。0.5m 太近了,然而假如超过 2m 的话,那么立体的效果将会崩溃,所以在 0.5--2 之间的距离是合适的。
    • Be careful with the distance between objects and the camera in general. Oculus recommends 0.75m as a minimum distance of focus.
    • 注意设定物体到摄像机之间的一般距离。OCULUS 建议的最小距离是 0.75m。
    • @@ -325,9 +325,9 @@

      Motion sickness 晕动病【K

      为了避免带来晕动效果给我们的使用者(或者说最大限度的减小这种反应),我们可以:

        -
      • Always maintain head tracking (this is the most important of all, especially if it occurs in middle of the experience.)
      • +
      • Always maintain head tracking (this is the most important of all, especially if it occurs in middle of the experience.)
      • 总是保证头部的追踪(这是最重要的,特别是在体验过程中头部移动的时候)
      • -
      • Use constant velocity; avoid acceleration or decceleration camera movements (use linear acceleration, and avoid vs easing if you can.)
      • +
      • Use constant velocity; avoid acceleration or decceleration camera movements (use linear acceleration, and avoid vs easing if you can.)
      • 使用稳定的速率;避免摄像机的加速和减速运动(使用线性加速度,同时假如有可能避免 VS EASING)
      • Keep the framerate up (less than 30fps is uncomfortable.)
      • 尽量提高帧速率(低于 30FPS 是不舒适的体验)
      • @@ -337,27 +337,27 @@

        Motion sickness 晕动病【K
      • 为固定位置的物体添加固定的参照物(否者使用者会误认为他们在移动)
      • Do not use Depth of Field or Motion Blur post processing because you do not know where the eyes will focus.
      • 不要使用景深视角和动态模糊的后期处理,因为你不知道使用者的视线会聚焦在哪里。
      • -
      • Avoid brightness changes (use low frecuency textures or fog effects to create smooth lighting transitions).Overall your eyes should not send signals to the brain that cause reflex actions in other parts of the body.
      • +
      • Avoid brightness changes (use low frecuency textures or fog effects to create smooth lighting transitions).Overall your eyes should not send signals to the brain that cause reflex actions in other parts of the body.
      • 避免光线突然的改变(使用低频率的质感或者迷雾效果来制造光线的平滑的转变效果)。总之,就是要使你的眼睛尽量不要传输那种会引起你身体其他部位强烈反应的信号。【这是为什么呢?VR 不就是为了制造特效,求刺激么,为什么要有这么多的限制。求解释。】

      Latency 延迟【K】

      -

      Latency is the time between the physical head movement and the visual display reaching the user's eyes from the screen of an HMD being updated. This is one of the most critical factors in providing a realistic experience. Humans can detect very small delays — we need to keep the latency below 20 milliseconds if they are to be imperceptible (for example a 60Hz monitor has a 16 ms response.)

      +

      Latency is the time between the physical head movement and the visual display reaching the user's eyes from the screen of an HMD being updated. This is one of the most critical factors in providing a realistic experience. Humans can detect very small delays — we need to keep the latency below 20 milliseconds if they are to be imperceptible (for example a 60Hz monitor has a 16 ms response.)

      延迟指的是,头部的物理转动动作,显示设备在接收了 HMD 的信息更新后,这两者之间的时间间隔。这是一个在提供虚拟现实体验的过程中非常关键的因素。人体能感知到非常细微的延迟 -- 如果我们要让人体感知不到这种延迟,我们需要将延迟保持在 20 微妙以下(例如一个 60HZ 的显示器拥有 16ms 的返回速度。)

      -

      The Oculus Rift headset has a letency of 20 ms or less, but woth mobile device-based setups it will depend heavily on the smartphone CPU power and other capabilities. 

      +

      The Oculus Rift headset has a letency of 20 ms or less, but woth mobile device-based setups it will depend heavily on the smartphone CPU power and other capabilities.

      Oculus Rift headset 的延迟在 20ms 甚至比这更低,但是目前这都非常依赖于智能手机的 CPU 性能和其他性能。

      Framerate ( Frames per second / FPS ) 帧率【K】

      -

      Based on the Wikipedia definition, framerate is the frequency at which an imaging device produces unique consecutive images, called frames. A rate of 60fps is an acceptable rate for a smooth user experience, but depending on the performance of the machine the app is running on, or the complexity of the content you want to show, it can drastically lower. Less than 30fps is generally considered juddery, and annoying to the user.、

      +

      Based on the Wikipedia definition, framerate is the frequency at which an imaging device produces unique consecutive images, called frames. A rate of 60fps is an acceptable rate for a smooth user experience, but depending on the performance of the machine the app is running on, or the complexity of the content you want to show, it can drastically lower. Less than 30fps is generally considered juddery, and annoying to the user.、

      根据维基百科的定义,帧率指的是一个设备产生单一连贯的图像的速率,叫做框架。60FPS 的帧率足够提供给使用者一个平稳的体验,但是更加要取决于 APP 运行的设备的表现,或者是你想要体验的 VR 内容,也有可能大大的降低。假如帧率小于了 30FPS,通常会发生严重的颤抖,并且使使用者产生厌恶感。

      -

      One of the most difficult tasks is to maintain a constant and high framerate value, so we must optimize our code to make it as efficient as possible. It is preferable to have a decent framerate that doesn't constantly or suddenly change; for this you need to as few necessary objects moving into the scene as possible and (in the case of WebGL) try to reduce draw calls. 

      +

      One of the most difficult tasks is to maintain a constant and high framerate value, so we must optimize our code to make it as efficient as possible. It is preferable to have a decent framerate that doesn't constantly or suddenly change; for this you need to as few necessary objects moving into the scene as possible and (in the case of WebGL) try to reduce draw calls.

      最困难的任务之一就是保持一个稳定的和高帧率的值,所以我们必须优化代码从而使它发挥最大的功效。假如能够有一个合适的帧率并且不会规律的或者突然的改变,那将会是非常好的体验;因此你需要在一个场景中设置尽量少的物体(例如在 WEBGL 中)并且减小 DRAW CALLS 的值。

      @@ -367,7 +367,7 @@

      Interpupillary dist

      根据维基百科的定义,IPD 是指两眼瞳孔之间的距离。IPD 对于双目视觉系统是非常重要的,因为双眼的瞳孔都必须对准这套视觉系统的瞳孔出口。

      -

      Interpupillary distace ( IPD ) is represented by {{domxref("VREyeParameters.eyeTranslation")}} in WebVR.

      +

      Interpupillary distace ( IPD ) is represented by {{domxref("VREyeParameters.eyeTranslation")}} in WebVR.

      瞳孔间距(IPD)可用 {{domxref("VREyeParameters.eyeTranslation")}} 来表示。

      @@ -377,7 +377,7 @@

      Interpupillary dist

      Degrees of Freedom ( DoF ) 自由度【K】

      -

      DoF refers to the movement of a rigid body inside space. There is no uniformity in creating acronyms for this term — we can find references to 3DoF in the context of sensors that detect only rotational head tracking, and 6DoF when an input allows us to control position and orientation simultaneously. We even sometimes find 9DoF references when the hardware contains three sensors like gyroscope, accelerometer and magnetometer, but the results of the 3 x 3DoF values will actually return a 6 degrees of freedom tracking.

      +

      DoF refers to the movement of a rigid body inside space. There is no uniformity in creating acronyms for this term — we can find references to 3DoF in the context of sensors that detect only rotational head tracking, and 6DoF when an input allows us to control position and orientation simultaneously. We even sometimes find 9DoF references when the hardware contains three sensors like gyroscope, accelerometer and magnetometer, but the results of the 3 x 3DoF values will actually return a 6 degrees of freedom tracking.

      DOF 指向的是空间中固态物体移动的自由度。并没有一个统一的对这个专业术语的缩写 -- 我们可以找到,在关于侦测头部转动的传感器的那篇文章中的 3DOF 的参考,还有当一个传入设备允许我们同时控制位置和方位信息时的 6DOF。我们有时候甚至会看到 9DOF 的案例,那就是当硬件中包含了三个感应装置时,如陀螺仪、加速计和磁力计,但是 3 x 3DoF 的值的接过实际上返回的,还是一个 6 纬的自由度跟踪结果。

      @@ -387,7 +387,7 @@

      Degrees of Freedom ( DoF )

      Cone of focus 锥形焦点【K】

      -

      Although our field of view is much larger (approximately 180º), we need to be aware that only in a small portion of that field can you perceive symbols (the center 60º) or read text (the center 10º). If you do not have an eye tracking sensor we assume that the center of the screen is where the user is focusing their eyes.

      +

      Although our field of view is much larger (approximately 180º), we need to be aware that only in a small portion of that field can you perceive symbols (the center 60º) or read text (the center 10º). If you do not have an eye tracking sensor we assume that the center of the screen is where the user is focusing their eyes.

      虽然我们的视野非常的旷阔(最大可以达到 180°),但是我们必须要意识到只有在一个小范围内,你才可以察觉到一些标识的存在(中心向外 60°)或者读取文本(中心向外 10°)。如果你没有一个眼部追踪器,那么我们建议你将使用者的视角尽量控制在屏幕中心点附近。

      @@ -401,6 +401,6 @@

      3D Posi

      3D 定位音效,指的是一组控制声音去实现怎样模拟它在一个三维空间中播放的效果。

      -

      This directly related to the Web Audio API, which allows us to place sounds on objects we have in the canvas or launch audio depending on the part of the scene the user is traveling towards or looking at.

      +

      This directly related to the Web Audio API, which allows us to place sounds on objects we have in the canvas or launch audio depending on the part of the scene the user is traveling towards or looking at.

      这项技术直接关系到Web Audio API,它可以让我们将一段声音附加到,一个我们在 VANVAS 中或者 launch audio 中的物体上,并且基于一个用户在其中可以移动或者观看的场景的一部分。

      diff --git a/files/zh-cn/web/api/webvr_api/index.html b/files/zh-cn/web/api/webvr_api/index.html index 88f477ad3a99cd..c97de92864636b 100644 --- a/files/zh-cn/web/api/webvr_api/index.html +++ b/files/zh-cn/web/api/webvr_api/index.html @@ -10,7 +10,7 @@ ---
      {{DefaultAPISidebar("WebVR API")}}{{SeeCompatTable}}
      -

      WebVR API 能为虚拟现实设备的渲染提供支持 — 例如像 Oculus Rift 或者HTC Vive 这样的头戴式设备与 Web apps 的连接。它能让开发者将位置和动作信息转换成 3D 场景中的运动。基于这项技术能产生很多有趣的应用,比如虚拟的产品展示,可交互的培训课程,以及超强沉浸感的第一人称游戏。

      +

      WebVR API 能为虚拟现实设备的渲染提供支持 — 例如像 Oculus Rift 或者HTC Vive 这样的头戴式设备与 Web apps 的连接。它能让开发者将位置和动作信息转换成 3D 场景中的运动。基于这项技术能产生很多有趣的应用,比如虚拟的产品展示,可交互的培训课程,以及超强沉浸感的第一人称游戏。

      概念及使用方法

      @@ -20,17 +20,17 @@

      概念及使用方法

      Any VR devices attached to your computer will be returned by the {{domxref("Navigator.getVRDevices()")}} method. This returns an array of objects to represent the attached devices, which inherit from the general {{domxref("VRDevice")}} object — generally a head mounted display will have two devices — the head mounted display itself, represented by {{domxref("HMDVRDevice")}}, and a position sensor camera that keeps track of your head position, represented by {{domxref("PositionSensorVRDevice")}}.

      -

      连接到电脑的所有 VR 设备都将由 {{domxref("Navigator.getVRDevices()")}} 方法返回。 这个方法将返回一个包含了所有已连接设备的对象数组,每个设备对应一个对象, 该对象继承自 {{domxref("VRDevice")}}  — 通常一个头显将包含两个设备 — 头显自身由 {{domxref("HMDVRDevice")}} 表示, 和一个跟踪头部位置的位置捕捉传感器,由 {{domxref("PositionSensorVRDevice")}} 表示。

      +

      连接到电脑的所有 VR 设备都将由 {{domxref("Navigator.getVRDevices()")}} 方法返回。 这个方法将返回一个包含了所有已连接设备的对象数组,每个设备对应一个对象, 该对象继承自 {{domxref("VRDevice")}} — 通常一个头显将包含两个设备 — 头显自身由 {{domxref("HMDVRDevice")}} 表示, 和一个跟踪头部位置的位置捕捉传感器,由 {{domxref("PositionSensorVRDevice")}} 表示。

      -

      The {{domxref("PositionSensorVRDevice")}} object contains the {{domxref("PositionSensorVRDevice.getState","getState()")}} method, which returns a {{domxref("VRPositionState")}} object — this represents the sensor’s state at a given timestamp, and includes properties containing useful data such as current velocity, acceleration, and orientation, useful for updating the rendering of a scene on each frame according to the movement of the VR head mounted display.

      +

      The {{domxref("PositionSensorVRDevice")}} object contains the {{domxref("PositionSensorVRDevice.getState","getState()")}} method, which returns a {{domxref("VRPositionState")}} object — this represents the sensor’s state at a given timestamp, and includes properties containing useful data such as current velocity, acceleration, and orientation, useful for updating the rendering of a scene on each frame according to the movement of the VR head mounted display.

      -

      {{domxref("PositionSensorVRDevice")}} 对象有一个 {{domxref("PositionSensorVRDevice.getState","getState()")}} 方法,该方法返回一个{{domxref("VRPositionState")}} 对象 — 这个对象代表位置传感器在指定时刻的状态,包含了一些十分有用的信息,例如速度、加速度以及运动方向,可用于根据头部运动刷新画面显示。

      +

      {{domxref("PositionSensorVRDevice")}} 对象有一个 {{domxref("PositionSensorVRDevice.getState","getState()")}} 方法,该方法返回一个{{domxref("VRPositionState")}} 对象 — 这个对象代表位置传感器在指定时刻的状态,包含了一些十分有用的信息,例如速度、加速度以及运动方向,可用于根据头部运动刷新画面显示。

      The {{domxref("HMDVRDevice.getEyeParameters()")}} method returns a {{domxref("VREyeParameters")}} object, which can be used to return field of view information — how much of the scene the head mounted display can see. The {{domxref("VREyeParameters.currentFieldOfView")}} returns a {{domxref("VRFieldOfView")}} object that contains 4 angles describing the current view from a center point. You can also change the field of view using {{domxref("HMDVRDevice.setFieldOfView()")}}.

      -

      {{domxref("HMDVRDevice.getEyeParameters()")}} 方法返回一个 {{domxref("VREyeParameters")}} 对象,可用于获取显示区域的信息 — 头显可以看到多少画面。 {{domxref("VREyeParameters.currentFieldOfView")}} 返回一个 {{domxref("VRFieldOfView")}} 对象 ,该对象包含了 4 个角度信息来描述当前的显示区域。你可以用 {{domxref("HMDVRDevice.setFieldOfView()")}} 来改变当前的显示区域。

      +

      {{domxref("HMDVRDevice.getEyeParameters()")}} 方法返回一个 {{domxref("VREyeParameters")}} 对象,可用于获取显示区域的信息 — 头显可以看到多少画面。 {{domxref("VREyeParameters.currentFieldOfView")}} 返回一个 {{domxref("VRFieldOfView")}} 对象 ,该对象包含了 4 个角度信息来描述当前的显示区域。你可以用 {{domxref("HMDVRDevice.setFieldOfView()")}} 来改变当前的显示区域。

      -

       

      +

      Note: To find out more about using these interfaces in your own app, read Using the WebVR API. To learn more about the basic concepts behind VR, read WebVR concepts.

      @@ -38,15 +38,15 @@

      概念及使用方法

      注释:: 要了解更多关于如何在你的应用程序中使用这些接口,请阅读文章Using the WebVR API. 要学习更多关于 VR 技术背后的基础概念,请阅读文章 WebVR concepts.

      -

      Using controllers: Combining WebVR with the Gamepad API 

      +

      Using controllers: Combining WebVR with the Gamepad API

      使用控制器:将 WebVR 与 Gamepad API 相结合

      -

      Many WebVR hardware setups feature controllers that go along with the headset. These can be used in WebVR apps via the Gamepad API, and specifically the Gamepad Extensions API that adds API features for accessing controller posehaptic actuators, and more.

      +

      Many WebVR hardware setups feature controllers that go along with the headset. These can be used in WebVR apps via the Gamepad API, and specifically the Gamepad Extensions API that adds API features for accessing controller pose, haptic actuators, and more.

      -
      Note: Our Using VR controllers with WebVR article explains the basics of how to use VR controllers with WebVR apps. +
      Note: Our Using VR controllers with WebVR article explains the basics of how to use VR controllers with WebVR apps. -

       

      +

      WebVR 接口

      @@ -89,7 +89,7 @@

      示例

      diff --git a/files/zh-cn/web/api/webvr_api/using_the_webvr_api/index.html b/files/zh-cn/web/api/webvr_api/using_the_webvr_api/index.html index 2091a8c79f7e2e..554c9db58635e6 100644 --- a/files/zh-cn/web/api/webvr_api/using_the_webvr_api/index.html +++ b/files/zh-cn/web/api/webvr_api/using_the_webvr_api/index.html @@ -15,35 +15,35 @@

      Note: Currently WebVR is at an experimental stage (you can find the latest spec here); it currently works best in Firefox Nightly/Developer Edition, with some aspects of it also working in Google Chrome. Read Bringing VR to Chrome by Brandon Jones for more details on that.
      - 注意:当前 WebVR 还是体验实验阶段(你可以从这里找到最新规格说明);它已经在 Firefox Nightly/Developer Edition 的版本上工作的很好了,部分功能也在 Google Chrome 上可以正常工作了。详细请访问由 Brandon Jones 在 Bringing VR to Chrome提供的更多内容。

      + 注意:当前 WebVR 还是体验实验阶段(你可以从这里找到最新规格说明);它已经在 Firefox Nightly/Developer Edition 的版本上工作的很好了,部分功能也在 Google Chrome 上可以正常工作了。详细请访问由 Brandon Jones 在 Bringing VR to Chrome提供的更多内容。

      起步

      To get started, you need to have your VR hardware set up as recommended in the owner's manual, and your computer set up as indicated in WebVR environment setup. A dedicated GPU is recommended for smoother performance.
      - 你需要先准备好一个已经配置好 VR 硬件,并且还需要完成 WebVR 环境的安装。 当然,若想要保证很平滑的体验,你需要配置一个足够好的 GPU 显卡。

      + 你需要先准备好一个已经配置好 VR 硬件,并且还需要完成 WebVR 环境的安装。 当然,若想要保证很平滑的体验,你需要配置一个足够好的 GPU 显卡。

      You also need to have Firefox Nightly (or Developer Edition) installed, along with the WebVR Enabler Add-on
      - 安装好 Firefox Nightly (或 Developer Edition),以及 WebVR Enabler Add-on

      + 安装好 Firefox Nightly (或 Developer Edition),以及 WebVR Enabler Add-on

      Once your environment is set up, try visiting one of our MozVR projects and clicking on the "Enter VR" button to test it out.
      - 设置好环境后,请尝试访问我们直接可在线运行的工程项目 MozVR projects ,点击“Enter VR” 按钮,就可以开始测试你的环境了。

      + 设置好环境后,请尝试访问我们直接可在线运行的工程项目 MozVR projects ,点击“Enter VR” 按钮,就可以开始测试你的环境了。

      Note: For more in depth information, be sure to check out WebVR environment setup.
      - 注意:更深层次的信息,请 check out  WebVR environment setup 以获取更详细的内容。

      + 注意:更深层次的信息,请 check out WebVR environment setup 以获取更详细的内容。

      Note: There are also cheaper options available such as using a mobile device for the head mounted display (in this case you won't have a position sensor available, so you might have to fake the orientation data using the deviceorientation API instead perhaps.)
      - 注意:你也可以使用更便宜的方式,比如使用一个手机设备来实现头部显示功能(只是这种情况下,你将没有空间位置追踪传感器相关的功能,将只能使用姿态角数据相关的 API deviceorientation API 。)

      + 注意:你也可以使用更便宜的方式,比如使用一个手机设备来实现头部显示功能(只是这种情况下,你将没有空间位置追踪传感器相关的功能,将只能使用姿态角数据相关的 API deviceorientation API 。)

      Introducing a simple demo
      简单示例介绍

      There are a number of WebVR demos available at the MozVR team repo, and the MDN webvr-tests repo, but the main one we will be focusing on in this article is our positionsensorvrdevice demo (view it live):
      - 在MozVR team repoMDN webvr-tests repo提供了一定数量的 WebVR 示例,在这篇文章里,我们将着重关注我们的 positionsensorvrdevice 提供的示例 (点此访问 live view it live)

      + 在MozVR team repoMDN webvr-tests repo提供了一定数量的 WebVR 示例,在这篇文章里,我们将着重关注我们的 positionsensorvrdevice 提供的示例 (点此访问 live view it live)

      @@ -77,7 +77,7 @@

      Accessing the VR devic

    You can see some very simple code showing the kind of basic device information that can be returned in our vrdevice demo.
    - 在 vrdevice demo 中,使用简单代码即可以获取设备基础信息。

    + 在 vrdevice demo 中,使用简单代码即可以获取设备基础信息。

    However, what you really want is something that grabs a pair of devices (perhaps many pairs in multiplayer VR games of the future). The following code taken from the WebVR spec (and also used in the positionsensorvrdevice demo) does the trick pretty well:
    当然,若你需要同时获取多套 VR 设备的信息(可能是将来多个玩家的多套设备),WebVR 说明书中包含的以下代码会更适合你来参考(在 positionsensorvrdevice 示例代码中也有使用这段代码逻辑)。

    @@ -103,12 +103,12 @@

    Accessing the VR devic });

    Here we grab the first instance we find of an {{domxref("HMDVRDevice")}} and store it in the gHMD variable. Next, we grab the first instance we find of a {{domxref("PositionSensorVRDevice")}} and store it in the gPositionSensor variable, but only if its {{domxref("VRDevice.hardWareUnitId")}} property matches that of the gHMD object. Separate devices that are part of the same overall hardware unit will share a hardware unit ID — this is how you check that you've got references to two matching devices.
    - 这段代码,先获取第一个找到 {{domxref("HMDVRDevice")}} 类型的对象引用,赋值给 gHMD 变量。若获取到了,然后,再找到一个 {{domxref("PositionSensorVRDevice")}} 类型的对象引用,并且它与 gHMD 的 {{domxref("VRDevice.hardWareUnitId")}} 属性值相同时,即找到配对的对象,赋值给gPositionSensor 变量。同一套设备单元中的多个分离的设备会共享他们的 hardware unit ID,可以依此来检测两个设备对象是否是同一套。

    + 这段代码,先获取第一个找到 {{domxref("HMDVRDevice")}} 类型的对象引用,赋值给 gHMD 变量。若获取到了,然后,再找到一个 {{domxref("PositionSensorVRDevice")}} 类型的对象引用,并且它与 gHMD 的 {{domxref("VRDevice.hardWareUnitId")}} 属性值相同时,即找到配对的对象,赋值给gPositionSensor 变量。同一套设备单元中的多个分离的设备会共享他们的 hardware unit ID,可以依此来检测两个设备对象是否是同一套。

    Initialising the app 初始化 APP

    The scene is rendered on a {{htmlelement("canvas")}} element, created and placed as follows:
    - 场景最终是通过 {{htmlelement("canvas")}} 标记元素来显示。canvas 画布可通过以下 JS 代码来创建。

    + 场景最终是通过 {{htmlelement("canvas")}} 标记元素来显示。canvas 画布可通过以下 JS 代码来创建。

    var myCanvas = document.createElement('canvas');
     var ctx = myCanvas.getContext('2d');
    @@ -116,7 +116,7 @@ 

    Initialising the app 初始化 APP

    Next, we create a new image and use a {{event("load")}} event to check that the image is loaded before running draw(), the main loop for our app:
    - 然后,我们在主渲染循环控制中,先创建一个图片对象,并且在 draw() 方法运行前,监听 {{event("load")}} 事件回调,以检查图片是否已经被正常装载成功。

    + 然后,我们在主渲染循环控制中,先创建一个图片对象,并且在 draw() 方法运行前,监听 {{event("load")}} 事件回调,以检查图片是否已经被正常装载成功。

    var image = new Image();
     image.src = 'firefox.png';
    @@ -144,7 +144,7 @@ 

    The main loop 渲染显示主循环 }

    The window WIDTH and HEIGHT is resampled on each frame then used to set:
    - 在控制每一帧显示输出时,都有重新获取 window 窗口当前的宽、高,并依此来调整输出显示:

    + 在控制每一帧显示输出时,都有重新获取 window 窗口当前的宽、高,并依此来调整输出显示:

    • A left and right offset value used to keep the image drawn relative to the center of the left and right eye view. Because we are drawing two half-width copies of the scene, the center of each copy is actually a quarter of the total canvas width in from the edge, in each case.
    • diff --git a/files/zh-cn/web/api/webvtt_api/index.html b/files/zh-cn/web/api/webvtt_api/index.html index 6d9f4cebe72eaa..b635c152c4067e 100644 --- a/files/zh-cn/web/api/webvtt_api/index.html +++ b/files/zh-cn/web/api/webvtt_api/index.html @@ -15,7 +15,7 @@ ---
      {{DefaultAPISidebar("WebVTT")}}
      -

      Web 视频文本跟踪格式 (WebVTT) 是一种使用{{HTMLElement("track")}}元素显示定时文本轨道(如字幕或标题)的格式。 WebVTT 文件的主要用途是将文本叠加添加到{{HTMLElement("video")}}。 WebVTT 是一种基于文本的格式,必须使用{{Glossary("UTF-8")}}进行编码。 在可以使用空格的地方,您也可以使用制表符。 还有一个小的 API 可用于表示和管理这些轨道以及在正确的时间执行文本回放所需的数据。

      +

      Web 视频文本跟踪格式 (WebVTT) 是一种使用{{HTMLElement("track")}}元素显示定时文本轨道(如字幕或标题)的格式。 WebVTT 文件的主要用途是将文本叠加添加到{{HTMLElement("video")}}。 WebVTT 是一种基于文本的格式,必须使用{{Glossary("UTF-8")}}进行编码。 在可以使用空格的地方,您也可以使用制表符。 还有一个小的 API 可用于表示和管理这些轨道以及在正确的时间执行文本回放所需的数据。

      WebVTT 文件

      @@ -46,7 +46,7 @@

      WebVTT 文件内容

      • There must be at least one space after WEBVTT.
      • You could use this to add a description to the file.
      • -
      • You may use anything in the text header except newlines or the string "-->".
      • +
      • You may use anything in the text header except newlines or the string "-->".
    • A blank line, which is equivalent to two consecutive newlines.
    • @@ -64,7 +64,7 @@
      例子 2 - 仅有 text
      WEBVTT - This file has no cues.
       
      -
      例子 3 - 拥有 header 和 cue 的 WebVTT 文件示例
      +
      例子 3 - 拥有 header 和 cue 的 WebVTT 文件示例
      WEBVTT - This file has cues.
       
      @@ -115,7 +115,7 @@ 

      WebVTT 注释

      Comments are an optional component that can be used to add information to a WebVTT file. Comments are intended for those reading the file and are not seen by users. Comments may contain newlines but cannot contain a blank line, which is equivalent to two consecutive newlines. A blank line signifies the end of a comment.

      -

      A comment cannot contain the string "-->", the ampersand character (&), or the less-than sign (<). If you wish to use such characters, you need to escape them using for example &amp; for ampersand and &lt; for less-than. It is also recommended that you use the greater-than escape sequence (&gt;) instead of the greater-than character (>) to avoid confusion with tags.

      +

      A comment cannot contain the string "-->", the ampersand character (&), or the less-than sign (<). If you wish to use such characters, you need to escape them using for example &amp; for ampersand and &lt; for less-than. It is also recommended that you use the greater-than escape sequence (&gt;) instead of the greater-than character (>) to avoid confusion with tags.

      A comment consists of three parts:

      @@ -575,7 +575,7 @@
      Example 13 - Cue setting examples
      Cue payload

    -

    The payload is where the main information or content is located. In normal usage the payload contains the subtitles to be displayed. The payload text may contain newlines but it cannot contain a blank line, which is equivalent to two consecutive newlines. A blank line signifies the end of a cue.

    +

    The payload is where the main information or content is located. In normal usage the payload contains the subtitles to be displayed. The payload text may contain newlines but it cannot contain a blank line, which is equivalent to two consecutive newlines. A blank line signifies the end of a cue.

    A cue text payload cannot contain the string "-->", the ampersand character (&), or the less-than sign (<). Instead use the escape sequence "&amp;" for ampersand and "&lt;" for less-than. It is also recommended that you use the greater-than escape sequence "&gt;" instead of the greater-than character (>) to avoid confusion with tags. If you are using the WebVTT file for metadata these restrictions do not apply.

    @@ -620,7 +620,7 @@

    Cue payload

    - + @@ -634,7 +634,7 @@

    Cue payload text tags

  • Timestamp tag
      -
    • The timestamp must be greater that the cue's start timestamp, greater than any previous timestamp in the cue payload, and less than the cue's end timestamp. The active text is the text between the timestamp and the next timestamp or to the end of the payload if there is not another timestamp in the payload. Any text before the active text in the payload is previous text . Any text beyond the active text is future text . This enables karaoke style captions.
    • +
    • The timestamp must be greater that the cue's start timestamp, greater than any previous timestamp in the cue payload, and less than the cue's end timestamp. The active text is the text between the timestamp and the next timestamp or to the end of the payload if there is not another timestamp in the payload. Any text before the active text in the payload is previous text . Any text beyond the active text is future text . This enables karaoke style captions.
    @@ -656,7 +656,7 @@
    Example 12 - Karaoke style text
  • -

    The following tags are the HTML tags allowed in a cue and require opening and closing tags (e.g., <b>text</b>).

    +

    The following tags are the HTML tags allowed in a cue and require opening and closing tags (e.g., <b>text</b>).

    • Class tag (<c></c>) @@ -833,7 +833,7 @@

      Tutorial on how to write a WebVT
      WEBVTT
      -

      3. Leave the second line blank, and on the third line the time for first cue is to be specified. For example, for a first cue starting at time 1 second and ending at 5 seconds, it is written as:

      +

      3. Leave the second line blank, and on the third line the time for first cue is to be specified. For example, for a first cue starting at time 1 second and ending at 5 seconds, it is written as:

      00:01.000 --> 00:05.000
      diff --git a/files/zh-cn/web/api/webxr_device_api/index.html b/files/zh-cn/web/api/webxr_device_api/index.html index a9f320ab94ad26..13f1fc6963fe49 100644 --- a/files/zh-cn/web/api/webxr_device_api/index.html +++ b/files/zh-cn/web/api/webxr_device_api/index.html @@ -3,7 +3,7 @@ slug: Web/API/WebXR_Device_API translation_of: Web/API/WebXR_Device_API --- -

      WebXR 是一组支持将渲染 3D 场景用来呈现虚拟世界(虚拟现实,也称作 VR)或将图形图像添加到现实世界(增强现实,也称作 AR)的标准。 WebXR 设备 API 实现了 WebXR 功能集的核心,管理输出设备的选择,以适当的帧速率将 3D 场景呈现给所选设备,并管理使用输入控制器创建的运动矢量。

      +

      WebXR 是一组支持将渲染 3D 场景用来呈现虚拟世界(虚拟现实,也称作 VR)或将图形图像添加到现实世界(增强现实,也称作 AR)的标准。 WebXR 设备 API 实现了 WebXR 功能集的核心,管理输出设备的选择,以适当的帧速率将 3D 场景呈现给所选设备,并管理使用输入控制器创建的运动矢量。

      WebXR-兼容性设备包括沉浸式 3D 运动和定位跟踪耳机,通过框架覆盖在真实世界场景之上的眼镜,以及手持移动电话,它们通过用摄像机捕捉世界来增强现实,并通过计算机生成的图像增强场景。

      @@ -18,7 +18,7 @@

      在最基本的层面上,通过计算应用于场景的透视图,以从每个用户的视角呈现场景,从而在 3D 中呈现场景,考虑到眼睛之间的常规距离,然后渲染场景两次,每只眼睛一次。然后将生成的图像 (场景在一个帧上呈现两次,每只眼睛一半) 显示给用户。

      -

      由于 WebGL 用于将 3D 世界渲染到 WebXR 会话中,因此您首先应该熟悉 WebGL 的一般用法以及 3D 图形的基本知识。您很可能不会直接使用 WebGL API,而是利用在 WebGL 之上构建的框架或库之一来使其使用更加方便。其中最流行的是three.js

      +

      由于 WebGL 用于将 3D 世界渲染到 WebXR 会话中,因此您首先应该熟悉 WebGL 的一般用法以及 3D 图形的基本知识。您很可能不会直接使用 WebGL API,而是利用在 WebGL 之上构建的框架或库之一来使其使用更加方便。其中最流行的是three.js

      使用库而不是直接使用 WebGL API 的一个特殊好处是,库取向于实现虚拟相机函数性的接口。OpenGL( WebGL 的扩展)不直接提供照相机视图,使用库模拟一个的话可以使您的工作变得非常非常容易,特别是在构建允许在虚拟世界中自由移动的代码时。

      @@ -38,7 +38,7 @@

      WebXR: AR and VR

      举例 WebXR 硬件装备
      Sketch of a person in a chair with wearing goggles labelled "Head mounted display (HMD)" facing a monitor with a webcam labeled "Position sensor" -

      较早的 WebVR API 仅设计为支持虚拟现实(VR),而 WebXR 在 Web 上同时支持 VR 和增强现实(AR)。WebXR 增强现实模块增加了对 AR 功能的支持。

      +

      较早的 WebVR API 仅设计为支持虚拟现实(VR),而 WebXR 在 Web 上同时支持 VR 和增强现实(AR)。WebXR 增强现实模块增加了对 AR 功能的支持。


      典型的 XR 设备可以具有 3 或 6 个自由度,并且有没有外部位置传感器都可以。

      @@ -52,17 +52,17 @@

      WebXR 应用程序生命周期

      1. 检查用户的设备和浏览器是否都能够呈现您想要提供的 XR 体验。
          -
        1. 确保 WebXR API 可用;如果 {{domxref("navigator.xr")}}  未定义,则可以判断用户的浏览器和/或设备不支持 WebXR。如果不支持,请禁用用于激活 XR 功能的任何用户界面,并中止任何进入 XR 模式的尝试。
        2. -
        3. 调用 {{DOMxRef("XR.isSessionSupported","navigator.xr.isSessionSupported()")}}, 指定要提供的 WebXR 体验模式: inlineimmersive-vr, 或 immersive-ar, 以确定您希望提供的会话类型是否可用。
        4. +
        5. 确保 WebXR API 可用;如果 {{domxref("navigator.xr")}} 未定义,则可以判断用户的浏览器和/或设备不支持 WebXR。如果不支持,请禁用用于激活 XR 功能的任何用户界面,并中止任何进入 XR 模式的尝试。
        6. +
        7. 调用 {{DOMxRef("XR.isSessionSupported","navigator.xr.isSessionSupported()")}}, 指定要提供的 WebXR 体验模式: inline, immersive-vr, 或 immersive-ar, 以确定您希望提供的会话类型是否可用。
        8. 如果要使用的会话类型可用,请向用户提供适当的界面以允许他们激活它。
      2. -
      3. 当用户通过上述的界面开启了 WebXR 功能后,通过调用 {{DOMxRef("XR.requestSession","navigator.xr.requestSession()")}},也是指定使用的模式为以下三种之一: inlineimmersive-vr, 或 immersive-ar后,可以将一个 {{DOMxRef("XRSession")}} 设定在期望的模式下。 
      4. -
      5. 当 requestSession() 返回的 promise 被 resolve 后,使用新的 {{domxref("XRSession")}} 在整个 WebXR 体验期间运行帧循环。 +
      6. 当用户通过上述的界面开启了 WebXR 功能后,通过调用 {{DOMxRef("XR.requestSession","navigator.xr.requestSession()")}},也是指定使用的模式为以下三种之一: inline, immersive-vr, 或 immersive-ar后,可以将一个 {{DOMxRef("XRSession")}} 设定在期望的模式下。
      7. +
      8. requestSession() 返回的 promise 被 resolve 后,使用新的 {{domxref("XRSession")}} 在整个 WebXR 体验期间运行帧循环。
          -
        1. 调用 {{domxref("XRSession")}} 的 {{DOMxRef("XRSession.requestAnimationFrame", "requestAnimationFrame()")}} 方法,以调度 XR 设备的首帧渲染。
        2. -
        3. 每一个 requestAnimationFrame() 的回调都需要使用 WebGL 渲染已提供信息的 3D 世界中的物体。
        4. -
        5. 持续在回调中调用 {{DOMxRef("XRSession.requestAnimationFrame", "requestAnimationFrame()")}} 保证每一帧都成功地按顺序渲染。
        6. +
        7. 调用 {{domxref("XRSession")}} 的 {{DOMxRef("XRSession.requestAnimationFrame", "requestAnimationFrame()")}} 方法,以调度 XR 设备的首帧渲染。
        8. +
        9. 每一个 requestAnimationFrame() 的回调都需要使用 WebGL 渲染已提供信息的 3D 世界中的物体。
        10. +
        11. 持续在回调中调用 {{DOMxRef("XRSession.requestAnimationFrame", "requestAnimationFrame()")}} 保证每一帧都成功地按顺序渲染。
      9. 当需要结束 XR 会话的时候;或者用户主动退出 XR 模式。 @@ -75,37 +75,37 @@

        WebXR 应用程序生命周期

        获取许可与安全性

        -

        WebXR Device API 受到一系列许可与安全性的控制。这些控制不涉及法律责任,但也需要引起重视。其控制场景主要在于身临其境的 immersive-vr 会话模式和 AR 会话下。

        +

        WebXR Device API 受到一系列许可与安全性的控制。这些控制不涉及法律责任,但也需要引起重视。其控制场景主要在于身临其境的 immersive-vr 会话模式和 AR 会话下。

        VR 的沉浸式(immersive)

        -

        首先,如果域名不支持请求有权限打开沉浸模式,那么  immersive-vr 模式就会被拒绝。这个权限管理来自xr-spatial-tracking 特征策略

        +

        首先,如果域名不支持请求有权限打开沉浸模式,那么 immersive-vr 模式就会被拒绝。这个权限管理来自xr-spatial-tracking 特征策略

        -

        一旦有权限了,申请开启 immersive-vr 模式的请求还需要再检查以下三点,全部满足才能开启:

        +

        一旦有权限了,申请开启 immersive-vr 模式的请求还需要再检查以下三点,全部满足才能开启:

          -
        • 在用户事件句柄总或者在用户启动 web 应用中执行的 requestSession() 调用;
        • +
        • 在用户事件句柄总或者在用户启动 web 应用中执行的 requestSession() 调用;
        • 文档是可信赖的,其中的内容是可靠的、及时更新的以及有着重点;
        • 用户有明确的使用沉浸式 VR 模式的意图,后文中,用户意图一节将有详细描述。
        -

        如果上述三点均满足, requestSession() 返回的 Promise 将被 resolve,新的 {{domxref("XRSession")}} 对象被传入完成时的处理函数中。如果有不满足的情况,将会根据具体场景抛出异常,比如当没有权限进入沉浸式模式情况下, SecurityError 将被抛出。

        +

        如果上述三点均满足, requestSession() 返回的 Promise 将被 resolve,新的 {{domxref("XRSession")}} 对象被传入完成时的处理函数中。如果有不满足的情况,将会根据具体场景抛出异常,比如当没有权限进入沉浸式模式情况下, SecurityError 将被抛出。

        内联(inline)

        -

        当你在 inline 模式下发出 {{domxref("XRSession")}} 请求想要请求其他的特性时,浏览器仅允许那些明显由用户意图发起才会执行的代码所调用到的 {{domxref("XR.requestSession", "requestSession()")}}。

        +

        当你在 inline 模式下发出 {{domxref("XRSession")}} 请求想要请求其他的特性时,浏览器仅允许那些明显由用户意图发起才会执行的代码所调用到的 {{domxref("XR.requestSession", "requestSession()")}}。

        特别注意:

          -
        • 如果 requestSession() 调用的发起既不来自用户事件中,也不是在 Web 应用启动时,那该请求将会被驳回,Promise 放返回 false;
        • +
        • 如果 requestSession() 调用的发起既不来自用户事件中,也不是在 Web 应用启动时,那该请求将会被驳回,Promise 放返回 false;
        • 如果发起请求的文档不属于对应的脚本,该请求将被驳回;
        • -
        • 如果发起请求的文档不可信任,该请求会被驳回且 Promise 返回 false。一个可信任文档指的是该文档是活跃的、负责任的且有重点的;
        • +
        • 如果发起请求的文档不可信任,该请求会被驳回且 Promise 返回 false。一个可信任文档指的是该文档是活跃的、负责任的且有重点的;
        • 如果设备无法明确用户开启内联模式的意图,该请求将会被驳回。对用户的目的的理解可以是隐性或者显性的。
        -

        注意:当调用 requestSession() 时,根据选择对象需要指定的特性不同,将会执行额外的请求。

        +

        注意:当调用 requestSession() 时,根据选择对象需要指定的特性不同,将会执行额外的请求。

        用户意图

        @@ -117,8 +117,8 @@

        用户意图

        当以下情况发生时,我们可以认为出现了隐性的用户意图 (用户暗示同意):

          -
        • The user has interacted with the document in some way which has in turn caused your request to occur. For example, if you have an "Enter XR mode" button, and the user clicks it, calling requestSession() from the button's {{domxref("Element.click_event", "click")}} event handler will permitted.
        • -
        • If your code is executing during the launch of a web application, the runtime may consider the act of launching your web application to qualify as user intent.
        • +
        • The user has interacted with the document in some way which has in turn caused your request to occur. For example, if you have an "Enter XR mode" button, and the user clicks it, calling requestSession() from the button's {{domxref("Element.click_event", "click")}} event handler will permitted.
        • +
        • If your code is executing during the launch of a web application, the runtime may consider the act of launching your web application to qualify as user intent.

        WebXR 的可用性

        @@ -127,7 +127,7 @@

        WebXR 的可用性

        WebXR polyfill

        -

        The team designing the WebXR specification has published a WebXR polyfill which you can use to simulate WebXR on browsers which don't have support for the WebXR APIs. If the browser supports the older WebVR API, that is used. Otherwise, the polyfill falls back to an implementation which uses Google's Cardboard VR API.

        +

        The team designing the WebXR specification has published a WebXR polyfill which you can use to simulate WebXR on browsers which don't have support for the WebXR APIs. If the browser supports the older WebVR API, that is used. Otherwise, the polyfill falls back to an implementation which uses Google's Cardboard VR API.

        The polyfill is maintained alongside the specification, and is kept up to date with the specification. Additionally, it is updated to maintain compatiblity with browsers as their support for WebXR and other technologies related to it and to the implementation of the polyfill change over time.

        @@ -135,12 +135,12 @@

        WebXR polyfill

        WebXR API Emulator extension

        -

        The Mozilla WebXR team has created a WebXR API Emulator browser extension, compatible with both Firefox and Chrome, which emulates the WebXR API, simulating a variety of compatible devices such as the HTC Vive, the Oculus Go and Oculus Quest, Samsung Gear, and Google Cardboard. With the extension in place, you can open up a developer tools panel that lets you control the position and orientation of the headset and any hand controllers, as well as button presses on the controllers.

        +

        The Mozilla WebXR team has created a WebXR API Emulator browser extension, compatible with both Firefox and Chrome, which emulates the WebXR API, simulating a variety of compatible devices such as the HTC Vive, the Oculus Go and Oculus Quest, Samsung Gear, and Google Cardboard. With the extension in place, you can open up a developer tools panel that lets you control the position and orientation of the headset and any hand controllers, as well as button presses on the controllers.

        While somewhat awkward compared to using an actual headset, this makes it possible to experiment with and developer WebXR code on a desktop computer, where WebXR isn't normally available. It also lets you perform some basic testing before taking your code to a real device. Be aware, however, that the emulator does not yet completely emulate all of the WebXR API, so you may run into problems you're not expecting. Again, carefully read the readme file and make sure you're aware of the limitations before you begin.

        -

        Important: You should always test your code on actual AR and/or VR hardware before releasing or shipping a product! Emulated, simulated, or polyfilled environments are not an adequate substitute for actual testing on physical devices.

        +

        Important: You should always test your code on actual AR and/or VR hardware before releasing or shipping a product! Emulated, simulated, or polyfilled environments are not an adequate substitute for actual testing on physical devices.

        Download the WebXR API Emulator for your supported browser below:

        @@ -150,7 +150,7 @@

        WebXR API Emulator extension

      10. Mozilla Firefox
    -

    The source code for the extension is also available on GitHub.

    +

    The source code for the extension is also available on GitHub.

    调用 WebXR API

    @@ -158,40 +158,40 @@

    调用 WebXR API

    {{domxref("navigator.xr")}} {{ReadOnlyInline}}
    -
    This property, added to the {{domxref("Navigator")}} interface, returns the {{domxref("XR")}} object through which the WebXR API is exposed. If this property is missing or null, WebXR is not available.
    +
    This property, added to the {{domxref("Navigator")}} interface, returns the {{domxref("XR")}} object through which the WebXR API is exposed. If this property is missing or null, WebXR is not available.

    WebXR 接口

    {{DOMxRef("XR")}}
    -
    The {{domxref("Navigator.xr", "navigator.xr")}} property returns the window's instance of {{domxref("XR")}}, which is the mechanism by which your code accesses the WebXR API. Using the XR interface, you can create {{domxref("XRSession")}}s to represent actual AR and/or VR sessions.
    +
    The {{domxref("Navigator.xr", "navigator.xr")}} property returns the window's instance of {{domxref("XR")}}, which is the mechanism by which your code accesses the WebXR API. Using the XR interface, you can create {{domxref("XRSession")}}s to represent actual AR and/or VR sessions.
    {{DOMxRef("XRFrame")}}
    -
    While presenting an XR session, the state of all tracked objects which make up the session are represented by an XRFrame. To get an XRFrame, call the session's {{domxref("XRSession.requestAnimationFrame", "requestAnimationFrame()")}} method, providing a callback which will be called with the XRFrame once available. Events which communicate tracking states will also use XRFrame to contain that information.
    +
    While presenting an XR session, the state of all tracked objects which make up the session are represented by an XRFrame. To get an XRFrame, call the session's {{domxref("XRSession.requestAnimationFrame", "requestAnimationFrame()")}} method, providing a callback which will be called with the XRFrame once available. Events which communicate tracking states will also use XRFrame to contain that information.
    {{DOMxRef("XRRenderState")}}
    -
    Provides a set of configurable properties which change how the imagery output by an XRSession is composited. These properties include the range of distances from the viewer within which content should be rendered, the vertical field of view (for inline presentations), and a reference to the {{domxref("XRWebGLLayer")}} being used as the target for rendering the scene prior to it being presented on the XR device's display or displays.
    +
    Provides a set of configurable properties which change how the imagery output by an XRSession is composited. These properties include the range of distances from the viewer within which content should be rendered, the vertical field of view (for inline presentations), and a reference to the {{domxref("XRWebGLLayer")}} being used as the target for rendering the scene prior to it being presented on the XR device's display or displays.
    {{DOMxRef("XRSession")}}
    -
    Provides the interface for interacting with XR hardware. Once an XRSession is obtained from {{domxref("XR.requestSession()")}}, the session can be used to check the position and orientation of the viewer, query the device for environment information, and present the virtual or augmented world to the user.
    +
    Provides the interface for interacting with XR hardware. Once an XRSession is obtained from {{domxref("XR.requestSession()")}}, the session can be used to check the position and orientation of the viewer, query the device for environment information, and present the virtual or augmented world to the user.
    {{DOMxRef("XRSpace")}}
    -
    XRSpace is an opaque base class on which all virtual coordinate system interfaces are based. Positions in WebXR are always expressed in relation to a particular XRSpace at the time at which a particular {{domxref("XFrame")}} takes place. The space's coordinate system has its origin at the a given physical position.
    +
    XRSpace is an opaque base class on which all virtual coordinate system interfaces are based. Positions in WebXR are always expressed in relation to a particular XRSpace at the time at which a particular {{domxref("XFrame")}} takes place. The space's coordinate system has its origin at the a given physical position.
    {{DOMxRef("XRReferenceSpace")}}
    -
    A subclass of {{domxref("XRSpace")}} which is used to identify a spatial relationship in relation to the user's physical emvironment. The XRReferenceSpace coordinate system is expected to remain unchanged through the lifespan of the {{domxref("XRSession")}}.The world has no boundaries and extends infinitely in every direction.
    +
    A subclass of {{domxref("XRSpace")}} which is used to identify a spatial relationship in relation to the user's physical emvironment. The XRReferenceSpace coordinate system is expected to remain unchanged through the lifespan of the {{domxref("XRSession")}}.The world has no boundaries and extends infinitely in every direction.
    {{DOMxRef("XRBoundedReferenceSpace")}}
    -
    XRBoundedReferenceSpace extends the {{domxref("XRReferenceSpace")}} coordinate system to further include support for a finite world with set boundaries. Unlike XRReferenceSpace, the origin must be located on the floor (that is, y = 0 at the floor). The x and z components of the origin are typically presumed to be located at or near the center of the room or surface.
    +
    XRBoundedReferenceSpace extends the {{domxref("XRReferenceSpace")}} coordinate system to further include support for a finite world with set boundaries. Unlike XRReferenceSpace, the origin must be located on the floor (that is, y = 0 at the floor). The x and z components of the origin are typically presumed to be located at or near the center of the room or surface.
    {{DOMxRef("XRView")}}
    -
    Represents a single view into the XR scene for a particular frame. Each XRView corresponds to the video display surface used to present the scene to the user. For example, a given XR device might have two views: one for the left eye and one for the right. Each view has an offset used to shift the position of the view relative to the camera, in order to allow for creating stereographic effects.
    +
    Represents a single view into the XR scene for a particular frame. Each XRView corresponds to the video display surface used to present the scene to the user. For example, a given XR device might have two views: one for the left eye and one for the right. Each view has an offset used to shift the position of the view relative to the camera, in order to allow for creating stereographic effects.
    {{DOMxRef("XRViewport")}}
    Describes a viewport. A viewport is a rectangular portion of a graphic surface.
    {{DOMxRef("XRRigidTransform")}}
    -
    A transform defined using a position and orientation in the virtual space's coordinate system as described by the {{domxref("XRSpace")}}.
    +
    A transform defined using a position and orientation in the virtual space's coordinate system as described by the {{domxref("XRSpace")}}.
    {{DOMxRef("XRPose")}}
    Describes a position and orientation in space relative to an {{domxref("XRSpace")}}.
    {{DOMxRef("XRViewerPose")}}
    -
    Based on {{domxref("XRPose")}}, XRViewerPose specifies the state of a viewer of the WebXR scene as indicated by the XR device. Included is an array of {{domxref("XRView")}} objects, each representing one perspective on the scene. For example, it takes two views to create the stereoscopic view as perceived by human vision—one for the left eye and a second for the right eye. One view is offset to the left slightly from the viewer's position, and the other view is offset to the right by the same distance. The view list can also be used to represent the perspectives of each of the spectators of a scene, in a multi-user environment.
    +
    Based on {{domxref("XRPose")}}, XRViewerPose specifies the state of a viewer of the WebXR scene as indicated by the XR device. Included is an array of {{domxref("XRView")}} objects, each representing one perspective on the scene. For example, it takes two views to create the stereoscopic view as perceived by human vision—one for the left eye and a second for the right eye. One view is offset to the left slightly from the viewer's position, and the other view is offset to the right by the same distance. The view list can also be used to represent the perspectives of each of the spectators of a scene, in a multi-user environment.
    {{DOMxRef("XRInputSource")}}
    -
    Represents any input device the user can use to perform targeted actions within the same virtual space as the viewer. Input sources may include devices such as hand controllers, optical tracking systems, and other devices which are explicitly associated with the XR device. Other input devices such as keyboards, mice, and gamepads are not presented as XRInputSource instances.
    +
    Represents any input device the user can use to perform targeted actions within the same virtual space as the viewer. Input sources may include devices such as hand controllers, optical tracking systems, and other devices which are explicitly associated with the XR device. Other input devices such as keyboards, mice, and gamepads are not presented as XRInputSource instances.
    {{DOMxRef("XRWebGLLayer")}}
    -
    A layer which serves as a WebGL frame buffer into which a scene's view is rendered. Using WebGL to render the scene gains substantial performance benefits due to graphics acceleration.
    +
    A layer which serves as a WebGL frame buffer into which a scene's view is rendered. Using WebGL to render the scene gains substantial performance benefits due to graphics acceleration.

    事件接口

    @@ -215,7 +215,7 @@

    WebGL API 的扩展

    {{domxref("WebGLRenderingContextBase.makeXRCompatibile()")}}
    -
    Configures the WebGL context to be compatible with WebXR. If the context was not initially created with the {{domxref("WebGLContextAttributes.xrCompatible", "xrCompatible")}} property set to true, you must call makeXRCompatible() prior to attempting to use the WebGL context for WebXR rendering. Returns a {{jsxref("promise")}} which resolves once the context has been prepared, or is rejected if the context cannot be configured for use by WebXR.
    +
    Configures the WebGL context to be compatible with WebXR. If the context was not initially created with the {{domxref("WebGLContextAttributes.xrCompatible", "xrCompatible")}} property set to true, you must call makeXRCompatible() prior to attempting to use the WebGL context for WebXR rendering. Returns a {{jsxref("promise")}} which resolves once the context has been prepared, or is rejected if the context cannot be configured for use by WebXR.

    指南与教程

    @@ -267,7 +267,7 @@

    亦可查看

    diff --git a/files/zh-cn/web/api/wheelevent/deltamode/index.html b/files/zh-cn/web/api/wheelevent/deltamode/index.html index 220fa341346e42..7ad71e64e3db27 100644 --- a/files/zh-cn/web/api/wheelevent/deltamode/index.html +++ b/files/zh-cn/web/api/wheelevent/deltamode/index.html @@ -5,7 +5,7 @@ ---

    {{APIRef("DOM Events")}}

    -

    WheelEvent.deltaMode 只读属性返回一个 unsigned long 类型的值,声明 delta 的滚动值的单位。可能的值为:

    +

    WheelEvent.deltaMode 只读属性返回一个 unsigned long 类型的值,声明 delta 的滚动值的单位。可能的值为:

    Non-breaking space  &nbsp;
    diff --git a/files/zh-cn/web/api/wheelevent/deltax/index.html b/files/zh-cn/web/api/wheelevent/deltax/index.html index 4ed61647cd10ac..1026c61cba2667 100644 --- a/files/zh-cn/web/api/wheelevent/deltax/index.html +++ b/files/zh-cn/web/api/wheelevent/deltax/index.html @@ -5,7 +5,7 @@ ---

    {{APIRef("DOM Events")}}

    -

    WheelEvent.deltaX 只读属性是一个 double 类型值,声明水平滚动量以{{domxref("WheelEvent.deltaMode")}} 为单位。

    +

    WheelEvent.deltaX 只读属性是一个 double 类型值,声明水平滚动量以{{domxref("WheelEvent.deltaMode")}} 为单位。

    语法

    diff --git a/files/zh-cn/web/api/wheelevent/deltay/index.html b/files/zh-cn/web/api/wheelevent/deltay/index.html index c251980a584585..e135a73fe1d23b 100644 --- a/files/zh-cn/web/api/wheelevent/deltay/index.html +++ b/files/zh-cn/web/api/wheelevent/deltay/index.html @@ -5,9 +5,9 @@ ---

    {{APIRef("DOM Events")}}

    -

     

    +

    -

    WheelEvent.deltaY 只读属性是一个 double 类型值,声明垂直滚动量以WheelEvent.deltaMode 为单位。

    +

    WheelEvent.deltaY 只读属性是一个 double 类型值,声明垂直滚动量以WheelEvent.deltaMode 为单位。

    语法

    diff --git a/files/zh-cn/web/api/wheelevent/deltaz/index.html b/files/zh-cn/web/api/wheelevent/deltaz/index.html index 0bc33da2a2cf87..9854ec6f7a18b2 100644 --- a/files/zh-cn/web/api/wheelevent/deltaz/index.html +++ b/files/zh-cn/web/api/wheelevent/deltaz/index.html @@ -5,11 +5,11 @@ ---

    {{APIRef("DOM Events")}}

    -

     

    +

    -

    WheelEvent.deltaZ 只读属性是一个 double 类型值,声明 Z 轴滚动量以WheelEvent.deltaMode 为单位。

    +

    WheelEvent.deltaZ 只读属性是一个 double 类型值,声明 Z 轴滚动量以WheelEvent.deltaMode 为单位。

    -

     

    +

    语法

    diff --git a/files/zh-cn/web/api/wheelevent/index.html b/files/zh-cn/web/api/wheelevent/index.html index b47a9960049e55..261c69a3f704f4 100644 --- a/files/zh-cn/web/api/wheelevent/index.html +++ b/files/zh-cn/web/api/wheelevent/index.html @@ -11,11 +11,11 @@ ---

    {{APIRef("DOM Events")}}

    -

    WheelEvent 接口表示用户滚动鼠标滚轮或类似输入设备时触发的事件。

    +

    WheelEvent 接口表示用户滚动鼠标滚轮或类似输入设备时触发的事件。

    重要:该事件为标准规定的滚轮事件接口。早期的浏览器实现过{{ domxref("MouseWheelEvent") }}和{{domxref("MouseScrollEvent")}}两种滚轮事件接口,但这两种接口皆非标准,加之各浏览器间对其兼容性极差。因而开发者应使用该标准事件接口取代这两个非标准接口。
    -
    不要混淆 wheel 事件和 {{event("scroll")}} 事件:{{event("wheel")}} 事件的默认动作取决于浏览器实现。因此 wheel 事件不一定会触发 {{event("scroll")}} 事件。即便滚轮事件引发了文档内容的滚动行为,也不表示 wheel 事件中的 delta* 值恰好反映文档内容的滚动方向。因此,不要依赖 delta* 属性获知文档内容的滚动方向。可在文档内容滚动事件({{event("scroll")}})中监视 target 的{{domxref("Element.scrollLeft", "scrollLeft")}}和{{domxref("Element.scrollTop", "scrollTop")}}的变化以推断滚动方向。
    +
    不要混淆 wheel 事件和 {{event("scroll")}} 事件:{{event("wheel")}} 事件的默认动作取决于浏览器实现。因此 wheel 事件不一定会触发 {{event("scroll")}} 事件。即便滚轮事件引发了文档内容的滚动行为,也不表示 wheel 事件中的 delta* 值恰好反映文档内容的滚动方向。因此,不要依赖 delta* 属性获知文档内容的滚动方向。可在文档内容滚动事件({{event("scroll")}})中监视 target 的{{domxref("Element.scrollLeft", "scrollLeft")}}和{{domxref("Element.scrollTop", "scrollTop")}}的变化以推断滚动方向。

    {{InheritanceDiagram}}

    diff --git a/files/zh-cn/web/api/window/afterprint_event/index.html b/files/zh-cn/web/api/window/afterprint_event/index.html index 02a4c6f5fd22e9..dbd89e458db7d7 100644 --- a/files/zh-cn/web/api/window/afterprint_event/index.html +++ b/files/zh-cn/web/api/window/afterprint_event/index.html @@ -4,7 +4,7 @@ translation_of: Web/API/Window/afterprint_event original_slug: Web/Events/afterprint --- -

    在相关联的文档已开始打印或打印预览已关闭之后,触发 afterprint事件。

    +

    在相关联的文档已开始打印或打印预览已关闭之后,触发 afterprint事件。

    基本信息

    diff --git a/files/zh-cn/web/api/window/alert/index.html b/files/zh-cn/web/api/window/alert/index.html index c9ee7bad2b07cf..1632c090520942 100644 --- a/files/zh-cn/web/api/window/alert/index.html +++ b/files/zh-cn/web/api/window/alert/index.html @@ -20,7 +20,7 @@

    语法

    -

     

    +

    alert(`uid = ${uid}`);

    diff --git a/files/zh-cn/web/api/window/appinstalled_event/index.html b/files/zh-cn/web/api/window/appinstalled_event/index.html index 05bf71e06ec09b..c2537bd1665c83 100644 --- a/files/zh-cn/web/api/window/appinstalled_event/index.html +++ b/files/zh-cn/web/api/window/appinstalled_event/index.html @@ -6,7 +6,7 @@ ---
    {{APIRef}}
    -

    {{domxref("Window")}} 对象的 onappinstalled 属性用于处理 {{Event("appinstalled")}}  事件,该事件是一个实现了 {{domxref("Event")}}接口的简单事件,会在网页应用成功安装为渐进式网页应用时立即触发。

    +

    {{domxref("Window")}} 对象的 onappinstalled 属性用于处理 {{Event("appinstalled")}} 事件,该事件是一个实现了 {{domxref("Event")}}接口的简单事件,会在网页应用成功安装为渐进式网页应用时立即触发。

    语法

    @@ -16,7 +16,7 @@

    语法

    示例

    window.onappinstalled = function(ev) {
    -  console.log('The application was installed.');
    +  console.log('The application was installed.');
     };

    规范

    diff --git a/files/zh-cn/web/api/window/applicationcache/index.html b/files/zh-cn/web/api/window/applicationcache/index.html index a82b7d3404c360..934d59f28e4cd8 100644 --- a/files/zh-cn/web/api/window/applicationcache/index.html +++ b/files/zh-cn/web/api/window/applicationcache/index.html @@ -22,7 +22,7 @@

    语法

    参数

      -
    • cache 对象是一个 {{domxref("OfflineResourceList")}} 的引用。
    • +
    • cache 对象是一个 {{domxref("OfflineResourceList")}} 的引用。

    规范

    diff --git a/files/zh-cn/web/api/window/back/index.html b/files/zh-cn/web/api/window/back/index.html index daae6fbe8ace3a..143d0a0bb0f1b8 100644 --- a/files/zh-cn/web/api/window/back/index.html +++ b/files/zh-cn/web/api/window/back/index.html @@ -11,7 +11,7 @@

    总结

    -

    跳转窗口到 history 中的前一个地址, 这曾是 Gecko 的方法。请使用标准的 history.back 替代它。

    +

    跳转窗口到 history 中的前一个地址, 这曾是 Gecko 的方法。请使用标准的 history.back 替代它。

    Syntax

    @@ -23,4 +23,4 @@

    Example

    if ( canGoBack ) window.back(); } -

     

    +

    diff --git a/files/zh-cn/web/api/window/beforeinstallprompt_event/index.html b/files/zh-cn/web/api/window/beforeinstallprompt_event/index.html index b6d0e58da5b885..8690387c471da5 100644 --- a/files/zh-cn/web/api/window/beforeinstallprompt_event/index.html +++ b/files/zh-cn/web/api/window/beforeinstallprompt_event/index.html @@ -9,7 +9,7 @@ ---

    {{ ApiRef() }}

    -

    Window.onbeforeinstallprompt 属性是一个事件处理程序,用于处理一个{{event("beforeinstallprompt")}}, 当一个 Web 清单存在时,它将在移动设备上发送,但是在提示用户将网站保存到主屏幕之前。

    +

    Window.onbeforeinstallprompt 属性是一个事件处理程序,用于处理一个{{event("beforeinstallprompt")}}, 当一个 Web 清单存在时,它将在移动设备上发送,但是在提示用户将网站保存到主屏幕之前。

    句法

    @@ -23,17 +23,17 @@

    范例

    let isTooSoon = true;
     window.addEventListener("beforeinstallprompt", function(e) {
    -  if (isTooSoon) {
    -    e.preventDefault(); // Prevents prompt display
    -    // Prompt later instead:
    -    setTimeout(function() {
    -      isTooSoon = false;
    -      e.prompt(); // Shows prompt
    -    }, 10000);
    -  }
    +  if (isTooSoon) {
    +    e.preventDefault(); // Prevents prompt display
    +    // Prompt later instead:
    +    setTimeout(function() {
    +      isTooSoon = false;
    +      e.prompt(); // Shows prompt
    +    }, 10000);
    +  }
     
    -  // The event was re-dispatched in response to our request
    -  // ...
    +  // The event was re-dispatched in response to our request
    +  // ...
     });

    浏览器兼容性

    diff --git a/files/zh-cn/web/api/window/beforeunload_event/index.html b/files/zh-cn/web/api/window/beforeunload_event/index.html index 8e9196cd4043b9..1c153ff39f87a0 100644 --- a/files/zh-cn/web/api/window/beforeunload_event/index.html +++ b/files/zh-cn/web/api/window/beforeunload_event/index.html @@ -50,13 +50,13 @@

    为避免意外弹出窗口,除非页面已与之交互,否则浏览器可能不会显示在beforeunload事件中创建的提示,甚至根本不会显示它们。

    -

    将事件处理程序/监听器加到window或 documentbeforeunload事件后,将阻止浏览器使用内存中的页面导航缓存,例如Firefox 的 Back-Forward 缓存WebKit 的 Page Cache

    +

    将事件处理程序/监听器加到windowdocumentbeforeunload事件后,将阻止浏览器使用内存中的页面导航缓存,例如Firefox 的 Back-Forward 缓存WebKit 的 Page Cache

    HTML 规范指出在此事件中调用{{domxref("window.alert()")}},{{domxref("window.confirm()")}}以及{{domxref("window.prompt()")}}方法,可能会失效。更多详细信息,请参见HTML 规范

    示例

    -

    HTML 规范指出作者应该使用 {{domxref("Event.preventDefault()")}} 而非 {{domxref("Event.returnValue")}},然而,不是所有浏览器都支持这么做。

    +

    HTML 规范指出作者应该使用 {{domxref("Event.preventDefault()")}} 而非 {{domxref("Event.returnValue")}},然而,不是所有浏览器都支持这么做。

    window.addEventListener('beforeunload', (event) => {
       // Cancel the event as stated by the standard.
    diff --git a/files/zh-cn/web/api/window/blur/index.html b/files/zh-cn/web/api/window/blur/index.html
    index dfb214e16dcf61..033d1dad11fd6d 100644
    --- a/files/zh-cn/web/api/window/blur/index.html
    +++ b/files/zh-cn/web/api/window/blur/index.html
    @@ -34,7 +34,7 @@ 

    规范

    - +
    {{SpecName('HTML WHATWG','interaction.html#dom-window-blur','Window.blur()')}} {{Spec2('HTML WHATWG')}} 
    diff --git a/files/zh-cn/web/api/window/blur_event/index.html b/files/zh-cn/web/api/window/blur_event/index.html index fc1f6796429090..73ee110a392d64 100644 --- a/files/zh-cn/web/api/window/blur_event/index.html +++ b/files/zh-cn/web/api/window/blur_event/index.html @@ -7,7 +7,7 @@

    当元素失去焦点时,blur事件将触发。

    -

    与 blur 相反的是{{domxref("Window/focus_event", "focus")}}。

    +

    blur 相反的是{{domxref("Window/focus_event", "focus")}}。

    @@ -42,7 +42,7 @@

    示例

    在线示例

    -

    此示例当文档失去焦点时,更改其外观。它使用{{domxref("EventTarget.addEventListener()","addEventListener()")}} 去监听{{domxref("Window/focus_event", "focus")}}和 blur 事件。

    +

    此示例当文档失去焦点时,更改其外观。它使用{{domxref("EventTarget.addEventListener()","addEventListener()")}} 去监听{{domxref("Window/focus_event", "focus")}}和 blur 事件。

    HTML

    @@ -86,11 +86,11 @@

    浏览器兼容性

    {{Compat("api.Window.blur_event")}}

    -

    {{DOMxRef(" document. activeelement ")}}的值在处理 ({{bug(452307)}}) 时因浏览器而异 ;({{bug(452307)}}):IE10 将其设置为焦点将移动到的元素,而 Firefox 和 Chrome 通常将其设置为文档的 body。

    +

    {{DOMxRef(" document. activeelement ")}}的值在处理 ({{bug(452307)}}) 时因浏览器而异 ;({{bug(452307)}}):IE10 将其设置为焦点将移动到的元素,而 Firefox 和 Chrome 通常将其设置为文档的 body。

    参见

    • 相关联事件: {{domxref("Window/focus_event", "focus")}}
    • -
    • Element 目标上的这个事件:{{domxref("Element/blur_event", "blur")}} 事件
    • +
    • Element 目标上的这个事件:{{domxref("Element/blur_event", "blur")}} 事件
    diff --git a/files/zh-cn/web/api/window/cancelanimationframe/index.html b/files/zh-cn/web/api/window/cancelanimationframe/index.html index 6a493f4e788acb..de5f19880cfc92 100644 --- a/files/zh-cn/web/api/window/cancelanimationframe/index.html +++ b/files/zh-cn/web/api/window/cancelanimationframe/index.html @@ -24,19 +24,19 @@

    参数

    示例

    var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
    -                            window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
    +                            window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
     
     var cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame;
     
    -var start = window.mozAnimationStartTime;  // 只有 Firefox 支持 mozAnimationStartTime 属性,其他浏览器可以使用 Date.now() 来替代。
    +var start = window.mozAnimationStartTime;  // 只有 Firefox 支持 mozAnimationStartTime 属性,其他浏览器可以使用 Date.now() 来替代。
     
     var myReq;
     function step(timestamp) {
    -  var progress = timestamp - start;
    -  d.style.left = Math.min(progress/10, 200) + "px";
    -  if (progress < 2000) {
    -    myReq = requestAnimationFrame(step);
    -  }
    +  var progress = timestamp - start;
    +  d.style.left = Math.min(progress/10, 200) + "px";
    +  if (progress < 2000) {
    +    myReq = requestAnimationFrame(step);
    +  }
     }
     myReq = requestAnimationFrame(step);
     
    diff --git a/files/zh-cn/web/api/window/cancelidlecallback/index.html b/files/zh-cn/web/api/window/cancelidlecallback/index.html
    index 155cb234ef36d9..d7617f5ef9aa76 100644
    --- a/files/zh-cn/web/api/window/cancelidlecallback/index.html
    +++ b/files/zh-cn/web/api/window/cancelidlecallback/index.html
    @@ -12,7 +12,7 @@
     
     

    概述

    -

     window.cancelIdleCallback() 方法用于取消之前调用{{domxref("window.requestIdleCallback()")}} 的回调。

    +

    window.cancelIdleCallback() 方法用于取消之前调用{{domxref("window.requestIdleCallback()")}} 的回调。

    语法

    @@ -22,7 +22,7 @@

    参数

    handle
    -
    调用 {{domxref("window.requestIdleCallback()")}}  时返回的 ID.
    +
    调用 {{domxref("window.requestIdleCallback()")}} 时返回的 ID.

    返回值

    @@ -31,7 +31,7 @@

    返回值

    示例

    -

    在文章 Cooperative Scheduling of Background Tasks API 中可以查看 完整示例 。

    +

    在文章 Cooperative Scheduling of Background Tasks API 中可以查看 完整示例

    规范

    diff --git a/files/zh-cn/web/api/window/clearimmediate/index.html b/files/zh-cn/web/api/window/clearimmediate/index.html index f51e0d2284d2cc..5f8c292608b323 100644 --- a/files/zh-cn/web/api/window/clearimmediate/index.html +++ b/files/zh-cn/web/api/window/clearimmediate/index.html @@ -14,11 +14,11 @@

    语法

    这里的 immediateID 是由{{ domxref("window.setImmediate") }}返回的。

    例子

    var immediateID = setImmediate(function () {
    -  // Run some code
    +  // Run some code
     }
     
     document.getElementById("button").addEventListener(function () {
    -  clearImmediate(immediateID);
    +  clearImmediate(immediateID);
     }, false);
     

    浏览器兼容性

    diff --git a/files/zh-cn/web/api/window/confirm/index.html b/files/zh-cn/web/api/window/confirm/index.html index 499c28c1565bc6..091f27bc29acb2 100644 --- a/files/zh-cn/web/api/window/confirm/index.html +++ b/files/zh-cn/web/api/window/confirm/index.html @@ -11,7 +11,7 @@ ---
    {{ApiRef("Window")}}
    -

    Window.confirm() 方法显示一个具有一个可选消息和两个按钮 (确定和取消) 的模态对话框 。

    +

    Window.confirm() 方法显示一个具有一个可选消息和两个按钮 (确定和取消) 的模态对话框 。

    语法

    @@ -19,8 +19,8 @@

    语法

      -
    • message 是要在对话框中显示的可选字符串。
    • -
    • result 是一个布尔值,表示是选择确定还是取消 (true 表示 OK)。
    • +
    • message 是要在对话框中显示的可选字符串。
    • +
    • result 是一个布尔值,表示是选择确定还是取消 (true 表示 OK)。

    示例

    @@ -30,16 +30,16 @@

    示例

    } -

    运行结果: 

    +

    运行结果:

    firefox confirm
    -  

    +

    注意事项:

    -

    The following text is shared between this article, DOM:window.prompt and DOM:window.alert 对话框是弹出式 (modal) 的 (也即 alert 样式,译者注). 直到这个对话框被点击后,后面的脚本才会运行。请勿滥用此功能,这里列出了很多个理由: 请放弃使用对话框来确认信息.

    +

    The following text is shared between this article, DOM:window.prompt and DOM:window.alert 对话框是弹出式 (modal) 的 (也即 alert 样式,译者注). 直到这个对话框被点击后,后面的脚本才会运行。请勿滥用此功能,这里列出了很多个理由: 请放弃使用对话框来确认信息.

    -

    Mozilla Chrome 的用户 (比如 Firefox 插件开发者) 应该使用nsIPromptService这个方法。

    +

    Mozilla Chrome 的用户 (比如 Firefox 插件开发者) 应该使用nsIPromptService这个方法。

    Chrome 浏览器版本 {{CompatChrome(46.0)}} 开始屏蔽内部{{htmlelement("iframe")}}元素,除非用户在沙箱内开启了allow-modal 选项。

    diff --git a/files/zh-cn/web/api/window/copy_event/index.html b/files/zh-cn/web/api/window/copy_event/index.html index 3eb6f8e82515c1..d2f48811a01081 100644 --- a/files/zh-cn/web/api/window/copy_event/index.html +++ b/files/zh-cn/web/api/window/copy_event/index.html @@ -9,7 +9,7 @@ ---
    {{APIRef}}
    -

    当用户通过浏览器的用户界面启动复制操作时,将触发 copy 事件。

    +

    当用户通过浏览器的用户界面启动复制操作时,将触发 copy 事件。

    @@ -32,7 +32,7 @@
    -

    此事件的原始目标是 {{domxref("Element")}} 它是复制操作的预期目标。您可以在 {{domxref("Window")}} 界面上监听此事件,以在捕获或冒泡阶段对其进行处理。 有关此事件的完整详细信息,请参见 Element: copy event.

    +

    此事件的原始目标是 {{domxref("Element")}} 它是复制操作的预期目标。您可以在 {{domxref("Window")}} 界面上监听此事件,以在捕获或冒泡阶段对其进行处理。 有关此事件的完整详细信息,请参见 Element: copy event.

    示例

    @@ -54,6 +54,6 @@

    参考

    • 相关联事件:{{domxref("Window/cut_event", "cut")}}, {{domxref("Window/paste_event", "paste")}}
    • -
    • {{domxref("Element")}} 目标上的这个事件: {{domxref("Element/copy_event", "copy")}}
    • -
    • {{domxref("Document")}} 目标上的这个事件: {{domxref("Document/copy_event", "copy")}}
    • +
    • {{domxref("Element")}} 目标上的这个事件: {{domxref("Element/copy_event", "copy")}}
    • +
    • {{domxref("Document")}} 目标上的这个事件: {{domxref("Document/copy_event", "copy")}}
    diff --git a/files/zh-cn/web/api/window/defaultstatus/index.html b/files/zh-cn/web/api/window/defaultstatus/index.html index 5efa1eca743c74..7ac8571ba068a3 100644 --- a/files/zh-cn/web/api/window/defaultstatus/index.html +++ b/files/zh-cn/web/api/window/defaultstatus/index.html @@ -23,7 +23,7 @@

    Syntax

    Parameters

      -
    • sMsg   是一个保存了状态栏默认显示文本的字符串。
    • +
    • sMsg 是一个保存了状态栏默认显示文本的字符串。

    Example

    @@ -37,7 +37,7 @@

    Example

    Notes

    -

    页面 HTML 加载完成后要设置状态栏内容可以使用  window.status.

    +

    页面 HTML 加载完成后要设置状态栏内容可以使用 window.status.

    Specification

    diff --git a/files/zh-cn/web/api/window/deviceorientationabsolute_event/index.html b/files/zh-cn/web/api/window/deviceorientationabsolute_event/index.html index ce813c6ce5eb40..37a499731f4df9 100644 --- a/files/zh-cn/web/api/window/deviceorientationabsolute_event/index.html +++ b/files/zh-cn/web/api/window/deviceorientationabsolute_event/index.html @@ -8,7 +8,7 @@

    摘要

    -

    An event handler for the {{ event("deviceorientationabsolute") }} event containing information about an absolute device orientation change.

    +

    An event handler for the {{ event("deviceorientationabsolute") }} event containing information about an absolute device orientation change.

    Syntax

    diff --git a/files/zh-cn/web/api/window/devicepixelratio/index.html b/files/zh-cn/web/api/window/devicepixelratio/index.html index 38acf3be7f873e..9dad0ba2742a16 100644 --- a/files/zh-cn/web/api/window/devicepixelratio/index.html +++ b/files/zh-cn/web/api/window/devicepixelratio/index.html @@ -22,7 +22,7 @@

    值 Value

    例子

    -

    在 <canvas> 中更正分辨率

    +

    <canvas> 中更正分辨率

    {{htmlelement("canvas")}}可能在视网膜屏幕上显得太模糊。 使用window.devicePixelRatio确定应添加多少额外的像素密度以使图像更清晰。

    @@ -93,7 +93,7 @@

    JavaScript

    HTML

    -

    HTML 将创建包含说明的框和将显示当前像素比率信息的pixel-ratio 框。

    +

    HTML 将创建包含说明的框和将显示当前像素比率信息的pixel-ratio 框。

    <div class="container">
       <div class="inner-container">
    @@ -165,7 +165,7 @@ 

    规范

    浏览器兼容性

    -

    The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

    +

    The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

    {{Compat("api.Window.devicePixelRatio")}}

    @@ -174,6 +174,6 @@

    参见

    diff --git a/files/zh-cn/web/api/window/directories/index.html b/files/zh-cn/web/api/window/directories/index.html index 8068c3d0672a8d..7d4bfbecb5409f 100644 --- a/files/zh-cn/web/api/window/directories/index.html +++ b/files/zh-cn/web/api/window/directories/index.html @@ -7,7 +7,7 @@

    概述

    -

    用于返回 window 下的 personalbar toolbar 对象, 已经过时,请使用 {{ domxref("window.personalbar") }} 来代替该属性。

    +

    用于返回 window 下的 personalbar toolbar 对象, 已经过时,请使用 {{ domxref("window.personalbar") }} 来代替该属性。

    语法

    @@ -16,7 +16,7 @@

    语法

    参数

    -

    dirBar 是 BarProp 类型的对象。

    +

    dirBarBarProp 类型的对象。

    例子

    diff --git a/files/zh-cn/web/api/window/domcontentloaded_event/index.html b/files/zh-cn/web/api/window/domcontentloaded_event/index.html index 24ab353b31ed2a..96a136bb1d0cd2 100644 --- a/files/zh-cn/web/api/window/domcontentloaded_event/index.html +++ b/files/zh-cn/web/api/window/domcontentloaded_event/index.html @@ -37,7 +37,7 @@

    加速中

    -

    如果您希望 DOM 在用户请求页面后尽可能快地解析,你可以做的一些事情是把你的 JavaScript 异步化 以及 优化样式表的加载, 由于被并行加载而减慢页面加载,从主 html 文档“窃取”流量。

    +

    如果您希望 DOM 在用户请求页面后尽可能快地解析,你可以做的一些事情是把你的 JavaScript 异步化 以及 优化样式表的加载, 由于被并行加载而减慢页面加载,从主 html 文档“窃取”流量。

    常规信息

    @@ -104,9 +104,9 @@

    示例

    }); for(var i=0; i<1000000000; i++){ -  //
    这个同步脚本将延迟 DOM 的解析。 -  // 所以 DOMContentLoaded 事件稍后将启动。 -  } + // 这个同步脚本将延迟 DOM 的解析。 + // 所以 DOMContentLoaded 事件稍后将启动。 + } </script>

    规范

    @@ -123,7 +123,7 @@

    兼容不支持该事件的浏览

    在 IE8 中,可以使用readystatechange事件来检测 DOM 文档是否加载完毕。在更早的 IE 版本中,可以通过每隔一段时间执行一次document.documentElement.doScroll("left") 来检测这一状态,因为这条代码在 DOM 加载完毕之前执行时会抛出错误 (throw an error)。

    -

    诸如 jQuery 这样的通用 JS 库,会提供跨浏览器的方法来检测 DOM 是否加载完成。也有其他专门实现该功能的脚本:contentloaded.js (只能添一个时间监听函数) 以及jquery.documentReady.js (并不依赖 jQuery,虽然名字中有 jquery).

    +

    诸如 jQuery 这样的通用 JS 库,会提供跨浏览器的方法来检测 DOM 是否加载完成。也有其他专门实现该功能的脚本:contentloaded.js (只能添一个时间监听函数) 以及jquery.documentReady.js (并不依赖 jQuery,虽然名字中有 jquery).

    相关事件

    diff --git a/files/zh-cn/web/api/window/dump/index.html b/files/zh-cn/web/api/window/dump/index.html index e021c156ae31a3..80dfd70da58c97 100644 --- a/files/zh-cn/web/api/window/dump/index.html +++ b/files/zh-cn/web/api/window/dump/index.html @@ -32,21 +32,21 @@

    语法

    注解

    -

    dump()的常见用途是调试 JavaScript。dump如果使用console选项启动了 Firefox 进程,则将消息发送到系统控制台(本地控制台)。如果console未指定该选项,则输出到对应终端。dump() 的输出不会发送到浏览器控制台。输出可以使用console.log()发送到浏览器控制台。特殊的代码还能将消息记录到错误控制台 / 浏览器控制台Components.utils.reportErrornsIConsoleService

    +

    dump()的常见用途是调试 JavaScript。dump如果使用console选项启动了 Firefox 进程,则将消息发送到系统控制台(本地控制台)。如果console未指定该选项,则输出到对应终端。dump() 的输出不会发送到浏览器控制台。输出可以使用console.log()发送到浏览器控制台。特殊的代码还能将消息记录到错误控制台 / 浏览器控制台Components.utils.reportErrornsIConsoleService

    -

    dump()也可用于使用 JavaScript 实现的 XPCOM 组件,尽管 {{domxref("window")}} 不是组件中的全局对象。它也明确地在沙箱中提供。但是,这种使用dump不受下面提到的偏好的影响 --- 它将始终显示出来。因此,建议您自己检查此偏好或使用自己的调试偏好,以确保在根本不感兴趣的情况下,不会向用户的控制台发送大量调试内容。请注意,dumpXPCOM 组件的输出将转到stderr,而dump 其他地方将输出stdout

    +

    dump()也可用于使用 JavaScript 实现的 XPCOM 组件,尽管 {{domxref("window")}} 不是组件中的全局对象。它也明确地在沙箱中提供。但是,这种使用dump不受下面提到的偏好的影响 --- 它将始终显示出来。因此,建议您自己检查此偏好或使用自己的调试偏好,以确保在根本不感兴趣的情况下,不会向用户的控制台发送大量调试内容。请注意,dumpXPCOM 组件的输出将转到stderr,而dump 其他地方将输出stdout

    -

    Gecko 在默认情况 dump() 下被禁用 - 它不会做任何事情,但也不会引起错误。要查看dump输出,您必须通过设置首选项browser.dom.window.dump.enabled来启用它。您可以在about:configuser.js 文件中设置首选项。注意:about:config默认情况下不会列出此首选项,您可能需要创建它(右键单击内容区域 - >新建 - >布尔值)。

    +

    Gecko默认情况 dump() 下被禁用 - 它不会做任何事情,但也不会引起错误。要查看dump输出,您必须通过设置首选项browser.dom.window.dump.enabled来启用它。您可以在about:configuser.js 文件中设置首选项。注意:about:config默认情况下不会列出此首选项,您可能需要创建它(右键单击内容区域 - >新建 - >布尔值)。

    在 Windows 上,您需要一个控制台才能看到任何东西。如果您还没有,请关闭应用程序并使用命令行参数重新打开console应该创建控制台或使用-attach-console现有的控制台。在其他操作系统上,从终端启动应用程序就足够了。

    -

    要将控制台输出重定向到文件,请运行 firefox 而不使用-console 选项,并使用语法将 stderr 和 stdout 重定向到一个文件,即:

    +

    要将控制台输出重定向到文件,请运行 firefox 而不使用-console 选项,并使用语法将 stderr 和 stdout 重定向到一个文件,即:

    firefox > console.txt 2>&1
     
    -

    如果您希望控制台消息出现在用于启动应用程序的控制台中,则可以使用Gecko 控制台重定向器。预编译的二进制文件可以在压缩的归档文件  https://github.com/matthewkastor/Redirector/archive/master.zip 中找到Redirector-master\Gecko\Console Redirector\bin\Release将所有 dll 和 exe 复制到任何你想要的地方。然后跑Console Redirector.exe /?

    +

    如果您希望控制台消息出现在用于启动应用程序的控制台中,则可以使用Gecko 控制台重定向器。预编译的二进制文件可以在压缩的归档文件 https://github.com/matthewkastor/Redirector/archive/master.zip 中找到Redirector-master\Gecko\Console Redirector\bin\Release将所有 dll 和 exe 复制到任何你想要的地方。然后跑Console Redirector.exe /?

    Specification

    diff --git a/files/zh-cn/web/api/window/error_event/index.html b/files/zh-cn/web/api/window/error_event/index.html index 5224b2a54e313c..db7763396d5407 100644 --- a/files/zh-cn/web/api/window/error_event/index.html +++ b/files/zh-cn/web/api/window/error_event/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef}}
    -

    当资源加载失败或无法使用时,会在{{domxref("Window")}}对象触发error事件。例如:script 执行时报错。

    +

    当资源加载失败或无法使用时,会在{{domxref("Window")}}对象触发error事件。例如:script 执行时报错。

    @@ -118,5 +118,5 @@

    浏览器兼容性

    相关事件

      -
    • This event on Element targets: error event 
    • +
    • This event on Element targets: error event
    diff --git a/files/zh-cn/web/api/window/event/index.html b/files/zh-cn/web/api/window/event/index.html index 145231cb3d00ac..4d3a4a7ce2188c 100644 --- a/files/zh-cn/web/api/window/event/index.html +++ b/files/zh-cn/web/api/window/event/index.html @@ -13,7 +13,7 @@

    {{ Non-standard_header() }}

    -

    window.event 是一个由微软 IE 引入的属性,只有当 DOM 事件处理程序被调用的时候会被用到。它的值是当前正在处理的事件对象。

    +

    window.event 是一个由微软 IE 引入的属性,只有当 DOM 事件处理程序被调用的时候会被用到。它的值是当前正在处理的事件对象。

    规范

    diff --git a/files/zh-cn/web/api/window/focus/index.html b/files/zh-cn/web/api/window/focus/index.html index 333144e1a28d49..a023a615d8ed9a 100644 --- a/files/zh-cn/web/api/window/focus/index.html +++ b/files/zh-cn/web/api/window/focus/index.html @@ -33,7 +33,7 @@

    规范

    - +
    {{SpecName('HTML WHATWG','interaction.html#dom-window-focus','Window.focus()')}} {{Spec2('HTML WHATWG')}} 
    diff --git a/files/zh-cn/web/api/window/focus_event/index.html b/files/zh-cn/web/api/window/focus_event/index.html index d2c70d3b3f18d2..85eb835e36975b 100644 --- a/files/zh-cn/web/api/window/focus_event/index.html +++ b/files/zh-cn/web/api/window/focus_event/index.html @@ -9,9 +9,9 @@ ---
    {{APIRef}}
    -

    当元素获得焦点时, focus 事件就会触发。

    +

    当元素获得焦点时, focus 事件就会触发。

    -

    与 focus 相反的事件是 {{domxref("Window/blur_event", "blur")}}

    +

    focus 相反的事件是 {{domxref("Window/blur_event", "blur")}}

    @@ -48,7 +48,7 @@

    示例

    在线示例

    -

    本示例在失去焦点时更改文档的外观。它使用 {{domxref("EventTarget.addEventListener()", "addEventListener()")}} 监听 focus 和 {{domxref("Window/blur_event", "blur")}} 事件。

    +

    本示例在失去焦点时更改文档的外观。它使用 {{domxref("EventTarget.addEventListener()", "addEventListener()")}} 监听 focus 和 {{domxref("Window/blur_event", "blur")}} 事件。

    HTML

    @@ -93,6 +93,6 @@

    浏览器兼容性

    参考

      -
    • 相关联事件: {{domxref("Window/blur_event", "blur")}}
    • +
    • 相关联事件: {{domxref("Window/blur_event", "blur")}}
    • Element 目标上的这个事件: {{domxref("Element/focus_event", "focus")}} 事件
    diff --git a/files/zh-cn/web/api/window/frames/index.html b/files/zh-cn/web/api/window/frames/index.html index f872552271eb47..90230b0fdd7a3c 100644 --- a/files/zh-cn/web/api/window/frames/index.html +++ b/files/zh-cn/web/api/window/frames/index.html @@ -18,7 +18,7 @@

    语法

  • frameList 是一个 frame 对象的集合,它类似一个数组,有 length 属性且可以使用索引([i])来访问。
  • frameList === window 计算结果为 true。
  • 在 window.frames 类数组中的每一项都代表了窗口对应给定对象的<frame>或<iframe>的内容,而不是 (i)frame DOM 元素(即 window.frames[ 0 ] 与 document.getElementsByTagName( "iframe" )[ 0 ].contentWindow 是相同的)。
  • -
  • 有关返回值的更多详细信息,请参考 thread on mozilla.dev.platform 。
  • +
  • 有关返回值的更多详细信息,请参考 thread on mozilla.dev.platform
  • 实例

    diff --git a/files/zh-cn/web/api/window/fullscreen/index.html b/files/zh-cn/web/api/window/fullscreen/index.html index 44df2e0425d3a8..f1cdbbefbda9d6 100644 --- a/files/zh-cn/web/api/window/fullscreen/index.html +++ b/files/zh-cn/web/api/window/fullscreen/index.html @@ -24,14 +24,14 @@

    返回值

      -
    • true:  窗口处于全屏模式下。
    • -
    • false:  窗口未处于全屏模式下。
    • +
    • true: 窗口处于全屏模式下。
    • +
    • false: 窗口未处于全屏模式下。

    示例

    if (window.fullScreen) {
    -    // it's fullscreen!
    +    // it's fullscreen!
     } else {
         // not fullscreen!
     }
    diff --git a/files/zh-cn/web/api/window/gamepadconnected_event/index.html b/files/zh-cn/web/api/window/gamepadconnected_event/index.html index 3722fb0642bc32..6fb6b2d767505d 100644 --- a/files/zh-cn/web/api/window/gamepadconnected_event/index.html +++ b/files/zh-cn/web/api/window/gamepadconnected_event/index.html @@ -6,7 +6,7 @@ - gamepadconnected translation_of: Web/API/Window/gamepadconnected_event --- -

    gamepadconnected 事件会在浏览器检测到游戏控制器第一次连接或者第一次按下游戏键/摇杆的时候触发。

    +

    gamepadconnected 事件会在浏览器检测到游戏控制器第一次连接或者第一次按下游戏键/摇杆的时候触发。

    基本信息

    @@ -37,29 +37,29 @@

    属性

    - + - + - + - + - + diff --git a/files/zh-cn/web/api/window/getcomputedstyle/index.html b/files/zh-cn/web/api/window/getcomputedstyle/index.html index 68e7f081ed1cb4..6db2a5912085b3 100644 --- a/files/zh-cn/web/api/window/getcomputedstyle/index.html +++ b/files/zh-cn/web/api/window/getcomputedstyle/index.html @@ -20,14 +20,14 @@

    语法

    element
    -
     用于获取计算样式的{{domxref("Element")}}。
    +
    用于获取计算样式的{{domxref("Element")}}。
    pseudoElt {{optional_inline}}
    指定一个要匹配的伪元素的字符串。必须对普通元素省略(或null)。
    -
    注意:在 Gecko2.0 {{geckoRelease("2.0")}}之前版本,参数 pseudoElt 是必要的。如果为 null,则不指定其他主要浏览器必须指定此参数。Gecko 已经更改为匹配其他浏览器的行为。。
    +
    注意:在 Gecko2.0 {{geckoRelease("2.0")}}之前版本,参数 pseudoElt 是必要的。如果为 null,则不指定其他主要浏览器必须指定此参数。Gecko 已经更改为匹配其他浏览器的行为。。
    -

    返回的style是一个实时的 {{domxref("CSSStyleDeclaration")}} 对象,当元素的样式更改时,它会自动更新本身。

    +

    返回的style是一个实时的 {{domxref("CSSStyleDeclaration")}} 对象,当元素的样式更改时,它会自动更新本身。

    示例

    @@ -62,17 +62,17 @@

    示例

    function dumpComputedStyles(elem,prop) {
     
    -  let cs = window.getComputedStyle(elem,null);
    -  if (prop) {
    -    dump("    "+prop+" : "+cs.getPropertyValue(prop)+"\n");
    -    return;
    -  }
    -  let len = cs.length;
    -  for (var i=0;i<len;i++) {
    +  let cs = window.getComputedStyle(elem,null);
    +  if (prop) {
    +    dump("    "+prop+" : "+cs.getPropertyValue(prop)+"\n");
    +    return;
    +  }
    +  let len = cs.length;
    +  for (var i=0;i<len;i++) {
     
    -    let style = cs[i];
    -    dump("    "+style+" : "+cs.getPropertyValue(style)+"\n");
    -  }
    +    let style = cs[i];
    +    dump("    "+style+" : "+cs.getPropertyValue(style)+"\n");
    +  }
     
     }
     
    @@ -80,39 +80,39 @@ 

    示例

    描述

    -

    返回的对象与从元素的 {{domxref("HTMLElement.style", "style")}}  属性返回的对象具有相同的类型;然而,两个对象具有不同的目的。从getComputedStyle返回的对象是只读的,可以用于检查元素的样式(包括由一个<style>元素或一个外部样式表设置的那些样式)。elt.style对象应用于在特定元素上设置样式。

    +

    返回的对象与从元素的 {{domxref("HTMLElement.style", "style")}} 属性返回的对象具有相同的类型;然而,两个对象具有不同的目的。从getComputedStyle返回的对象是只读的,可以用于检查元素的样式(包括由一个<style>元素或一个外部样式表设置的那些样式)。elt.style对象应用于在特定元素上设置样式。

    -

    第一个参数必须是 Element 对象 (传递一个非节点元素,如 一个#text 节点, 将会抛出一个错误). 从 Gecko 1.9.2   {{geckoRelease("1.9.2")}} 开始,现在返回的一个在 URL 周围有引号的 URL 值,像这样: url("http://foo.com/bar.jpg").

    +

    第一个参数必须是 Element 对象 (传递一个非节点元素,如 一个#text 节点, 将会抛出一个错误). 从 Gecko 1.9.2 {{geckoRelease("1.9.2")}} 开始,现在返回的一个在 URL 周围有引号的 URL 值,像这样: url("http://foo.com/bar.jpg").

    defaultView

    -

    在许多在线的演示代码中,getComputedStyle是通过 document.defaultView 对象来调用的。大部分情况下,这是不需要的,因为可以直接通过window对象调用。但有一种情况,你必需要使用 defaultView,  那是在 firefox3.6 上访问子框架内的样式 。

    +

    在许多在线的演示代码中,getComputedStyle是通过 document.defaultView 对象来调用的。大部分情况下,这是不需要的,因为可以直接通过window对象调用。但有一种情况,你必需要使用 defaultView, 那是在 firefox3.6 上访问子框架内的样式 。

    与伪元素一起使用

    -

    getComputedStyle 可以从伪元素拉取样式信息 (比如,::after, ::before, ::marker, ::line-marker—查看 详情 这里).

    +

    getComputedStyle 可以从伪元素拉取样式信息 (比如,::after, ::before, ::marker, ::line-marker—查看 详情 这里).

    <style>
    -    h3::after {
    -        content: "rocks!";
    -    }
    +    h3::after {
    +        content: "rocks!";
    +    }
     </style>
     
     <h3>generated content</h3>
     
     <script>
    -    let h3 = document.querySelector('h3'),
    -    result = getComputedStyle(h3, '::after').content;
    +    let h3 = document.querySelector('h3'),
    +    result = getComputedStyle(h3, '::after').content;
         alert(`the generated content is: ${result}`);
    -    console.log(`the generated content is: ${result}`);
    -    // the generated content is: "rocks!"
    +    console.log(`the generated content is: ${result}`);
    +    // the generated content is: "rocks!"
     </script>
     
     

    注意

    -

     

    +

    返回的{{domxref("CSSStyleDeclaration")}}对象将包含所有受支持的 CSS 属性长名称的活动值。示例名称是border-bottom-widthborder-widthborder是示例速记属性名称。仅使用像font-size这样的名字来查询值是最安全的。 查询诸如font等简写名称不适用于大多数浏览器。

    @@ -120,9 +120,9 @@

    注意

    CSS 属性值可以使用getPropertyValue(propName)API 或直接索引到对象,如cs ['z-index']cs.zIndex

    -

     

    +

    -

    getComputedStyle的返回值是 {{cssxref("resolved_value", "resolved values")}},  通常跟 CSS2.1 中的{{cssxref("computed_value","computed values")}}是相同的值。 但对于一些旧的属性,比如width, height, padding 它们的值又为 {{cssxref("used_value","used values")}}。 最初,CSS2.0 定义的计算值 Computed values 就是属性的最终值。 但是 CSS2.1 重新定义了 computed values 为布局前的值, used values 布局后的值。 布局前与布局后的区别是, width 或者 height 的 百分比可以代表元素的宽度,在布局后会被像素值替换。

    +

    getComputedStyle的返回值是 {{cssxref("resolved_value", "resolved values")}}, 通常跟 CSS2.1 中的{{cssxref("computed_value","computed values")}}是相同的值。 但对于一些旧的属性,比如width, height, padding 它们的值又为 {{cssxref("used_value","used values")}}。 最初,CSS2.0 定义的计算值 Computed values 就是属性的最终值。 但是 CSS2.1 重新定义了 computed values 为布局前的值, used values 布局后的值。 布局前与布局后的区别是, width 或者 height 的 百分比可以代表元素的宽度,在布局后会被像素值替换。

    在某些情况下,通过浏览器会特意返回不准确的值。 特别是在避免 CSS 浏览历史泄露的安全问题, 比如,浏览者看过某个网站, 它的链接通常会变成蓝色带下划线的链接,通过判断链接的颜色(getComputedSytle(node, null).color) 是否为蓝色,就会泄露用户的浏览历史, 所以浏览器会特意返回不准确的值,保护用户隐私。可以了解更多关于 css 安全的链接http://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/

    diff --git a/files/zh-cn/web/api/window/getdefaultcomputedstyle/index.html b/files/zh-cn/web/api/window/getdefaultcomputedstyle/index.html index 71aff2b8416a6b..ce440b65c0c777 100644 --- a/files/zh-cn/web/api/window/getdefaultcomputedstyle/index.html +++ b/files/zh-cn/web/api/window/getdefaultcomputedstyle/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef("CSSOM")}}{{Non-standard_header}}
    -

    getDefaultComputedStyle() 给出元素的所有 CSS 属性的默认计算值 (computed values ),忽略作者样式。也就是说,只考虑用户代理和用户风格。

    +

    getDefaultComputedStyle() 给出元素的所有 CSS 属性的默认计算值 (computed values ),忽略作者样式。也就是说,只考虑用户代理和用户风格。

    语法及参数说明

    @@ -19,7 +19,7 @@

    语法及参数说明

    指定匹配的伪类。通常情况下可以为空。
    -

    返回的样式是一个 CSSStyleDeclaration 对象。

    +

    返回的样式是一个 CSSStyleDeclaration 对象。

    例子

    diff --git a/files/zh-cn/web/api/window/getselection/index.html b/files/zh-cn/web/api/window/getselection/index.html index 79e84eb7894418..a7eaf66ba4af27 100644 --- a/files/zh-cn/web/api/window/getselection/index.html +++ b/files/zh-cn/web/api/window/getselection/index.html @@ -14,7 +14,7 @@

    语法

    const selection = window.getSelection() ;
      -
    • selection 是一个 {{domxref("Selection")}} 对象。 如果想要将 selection 转换为字符串,可通过连接一个空字符串("")或使用 {{jsxref("String.toString()")}} 方法。
    • +
    • selection 是一个 {{domxref("Selection")}} 对象。 如果想要将 selection 转换为字符串,可通过连接一个空字符串("")或使用 {{jsxref("String.toString()")}} 方法。

    示例

    @@ -28,9 +28,9 @@

    示例

    备注

    -

    在  JavaScript 中,当一个对象被传递给期望字符串作为参数的函数中时(如 {{ Domxref("window.alert") }} 或 {{ Domxref("document.write") }}),对象的{{jsxref("Object.toString","toString()")}}方法会被调用,然后将返回值传给该函数。

    +

    在 JavaScript 中,当一个对象被传递给期望字符串作为参数的函数中时(如 {{ Domxref("window.alert") }} 或 {{ Domxref("document.write") }}),对象的{{jsxref("Object.toString","toString()")}}方法会被调用,然后将返回值传给该函数。

    -

    在上例中,selObj.toString() 会在传递到 {{domxref("window.alert()")}}时自动调用。然而,当你试图在 {{domxref("Selection")}} 对象上使用一个 JavaScript 的{{jsxref("Global_Objects/String", "String")}} 对象上的属性或者方法时(如 {{jsxref("String.prototype.length")}} 或者 {{jsxref("String.prototype.substr()")}}),会导致错误(如果没有相应的属性或方法时)或返回不是期望的结果(如果存在相应的属性或方法)。如果想要将 Selection 对象作为一个字符串使用,请直接调用 toString() 方法:

    +

    在上例中,selObj.toString() 会在传递到 {{domxref("window.alert()")}}时自动调用。然而,当你试图在 {{domxref("Selection")}} 对象上使用一个 JavaScript 的{{jsxref("Global_Objects/String", "String")}} 对象上的属性或者方法时(如 {{jsxref("String.prototype.length")}} 或者 {{jsxref("String.prototype.substr()")}}),会导致错误(如果没有相应的属性或方法时)或返回不是期望的结果(如果存在相应的属性或方法)。如果想要将 Selection 对象作为一个字符串使用,请直接调用 toString() 方法:

    var selectedText = selObj.toString();
    @@ -46,9 +46,9 @@

    相关对象

    你还可以使用 {{domxref("Document.getSelection()")}},两个方法等价。

    -

    值得注意的是,目前在 Firefox, Edge (非 Chromium 版本) 及 Internet Explorer 中,getSelection() 对 {{htmlelement("textarea")}} 及 {{htmlelement("input")}} 元素不起作用。 {{domxref("HTMLInputElement.setSelectionRange()")}} 或 selectionStart 及 selectionEnd 属性可用于解决此问题。

    +

    值得注意的是,目前在 Firefox, Edge (非 Chromium 版本) 及 Internet Explorer 中,getSelection() 对 {{htmlelement("textarea")}} 及 {{htmlelement("input")}} 元素不起作用。 {{domxref("HTMLInputElement.setSelectionRange()")}} 或 selectionStartselectionEnd 属性可用于解决此问题。

    -

    还要注意选择不同于焦点(详见 Selection 及输入焦点)。可使用{{domxref("Document.activeElement")}} 来返回当前的焦点元素。

    +

    还要注意选择不同于焦点(详见 Selection 及输入焦点)。可使用{{domxref("Document.activeElement")}} 来返回当前的焦点元素。

    浏览器兼容性

    diff --git a/files/zh-cn/web/api/window/hashchange_event/index.html b/files/zh-cn/web/api/window/hashchange_event/index.html index ec9f0453469c81..98a7fd2193cb56 100644 --- a/files/zh-cn/web/api/window/hashchange_event/index.html +++ b/files/zh-cn/web/api/window/hashchange_event/index.html @@ -39,13 +39,13 @@

    示例

    -

    你可以在 {{domxref("EventTarget/addEventListener", "addEventListener")}} 方法中使用 hashchange 事件:

    +

    你可以在 {{domxref("EventTarget/addEventListener", "addEventListener")}} 方法中使用 hashchange 事件:

    window.addEventListener('hashchange', function() {
       console.log('The hash has changed!')
     }, false);
    -

    或使用 onhashchange 事件处理程序属性:

    +

    或使用 onhashchange 事件处理程序属性:

    function locationHashChanged() {
       if (location.hash === '#cool-feature') {
    diff --git a/files/zh-cn/web/api/window/history/index.html b/files/zh-cn/web/api/window/history/index.html
    index e90c91c5ab9641..f0d8a08a808e25 100644
    --- a/files/zh-cn/web/api/window/history/index.html
    +++ b/files/zh-cn/web/api/window/history/index.html
    @@ -7,7 +7,7 @@
     
     

    Window.history是一个只读属性,用来获取{{domxref("History")}} 对象的引用,{{domxref("History")}} 对象提供了操作浏览器会话历史(浏览器地址栏中访问的页面,以及当前页面中通过框架加载的页面)的接口。

    -

    History对象有如下方法:参见 Manipulating the browser history 中的示例和详情。尤其指出的是文章里解释了在使用pushState()replaceState() 方法前,你需要了解的安全问题。

    +

    History对象有如下方法:参见 Manipulating the browser history 中的示例和详情。尤其指出的是文章里解释了在使用pushState()replaceState() 方法前,你需要了解的安全问题。

    语法

    diff --git a/files/zh-cn/web/api/window/innerheight/index.html b/files/zh-cn/web/api/window/innerheight/index.html index 7cec57527b635d..fde4c8c4e8b96a 100644 --- a/files/zh-cn/web/api/window/innerheight/index.html +++ b/files/zh-cn/web/api/window/innerheight/index.html @@ -17,13 +17,13 @@

    语法

    -

    intViewportHeight 为浏览器窗口的视口的高度。

    +

    intViewportHeight 为浏览器窗口的视口的高度。

    window.innerHeight 属性为只读,且没有默认值。

    备注

    -

    任何窗口对象,如 {{domxref("window")}}、frame、frameset 或 secondary window 都支持 innerHeight 属性。

    +

    任何窗口对象,如 {{domxref("window")}}、frame、frameset 或 secondary window 都支持 innerHeight 属性。

    有一个算法用来获取不包括水平滚动条的视口高度。

    @@ -51,7 +51,7 @@

    假设有一个 frameset

    图像示例

    -

    下面的示意图展示了 outerHeight 和 innerHeight 两者的区别。

    +

    下面的示意图展示了 outerHeightinnerHeight 两者的区别。

    innerHeight vs outerHeight illustration

    diff --git a/files/zh-cn/web/api/window/innerwidth/index.html b/files/zh-cn/web/api/window/innerwidth/index.html index 91a9a1b9335197..3e7285a273fa4b 100644 --- a/files/zh-cn/web/api/window/innerwidth/index.html +++ b/files/zh-cn/web/api/window/innerwidth/index.html @@ -10,9 +10,9 @@ ---
    {{APIRef}}
    -

    只读的 {{domxref("Window")}} 属性 innerWidth 返回以像素为单位的窗口的内部宽度。如果垂直滚动条存在,则这个属性将包括它的宽度。

    +

    只读的 {{domxref("Window")}} 属性 innerWidth 返回以像素为单位的窗口的内部宽度。如果垂直滚动条存在,则这个属性将包括它的宽度。

    -

    更确切地说,innerWidth 返回窗口的 {{Glossary("layout viewport")}} 的宽度。 窗口的内部高度——布局视口的高度——可以从 {{domxref("Window.innerHeight", "innerHeight")}} 属性中获取到。

    +

    更确切地说,innerWidth 返回窗口的 {{Glossary("layout viewport")}} 的宽度。 窗口的内部高度——布局视口的高度——可以从 {{domxref("Window.innerHeight", "innerHeight")}} 属性中获取到。

    语法

    @@ -26,9 +26,9 @@

    使用说明

    -

    如果你需要获取除去滚动条和边框的窗口宽度,请使用根元素 {{HTMLElement("html")}}  的{{domxref("Element.clientWidth", "clientWidth")}} 属性。

    +

    如果你需要获取除去滚动条和边框的窗口宽度,请使用根元素 {{HTMLElement("html")}} 的{{domxref("Element.clientWidth", "clientWidth")}} 属性。

    -

    innerWidth 属性在任何表现类似于窗口的任何窗口或对象(例如框架或选项卡)上都是可用的。

    +

    innerWidth 属性在任何表现类似于窗口的任何窗口或对象(例如框架或选项卡)上都是可用的。

    示例

    diff --git a/files/zh-cn/web/api/window/localstorage/index.html b/files/zh-cn/web/api/window/localstorage/index.html index 4456aa2ab97d0d..f98106c69e9fe2 100644 --- a/files/zh-cn/web/api/window/localstorage/index.html +++ b/files/zh-cn/web/api/window/localstorage/index.html @@ -11,7 +11,7 @@ ---

    {{APIRef()}}

    -

    只读的localStorage 属性允许你访问一个{{domxref("Document")}} 源(origin)的对象 {{domxref("Storage")}};存储的数据将保存在浏览器会话中。localStorage 类似 {{DOMxRef("Window.sessionStorage", "sessionStorage")}},但其区别在于:存储在 localStorage 的数据可以长期保留;而当页面会话结束——也就是说,当页面被关闭时,存储在 sessionStorage 的数据会被清除 。

    +

    只读的localStorage 属性允许你访问一个{{domxref("Document")}} 源(origin)的对象 {{domxref("Storage")}};存储的数据将保存在浏览器会话中。localStorage 类似 {{DOMxRef("Window.sessionStorage", "sessionStorage")}},但其区别在于:存储在 localStorage 的数据可以长期保留;而当页面会话结束——也就是说,当页面被关闭时,存储在 sessionStorage 的数据会被清除 。

    应注意,无论数据存储在 localStorage 还是 sessionStorage它们都特定于页面的协议。

    diff --git a/files/zh-cn/web/api/window/location/index.html b/files/zh-cn/web/api/window/location/index.html index 19386f835b2d47..a63e87284d2748 100644 --- a/files/zh-cn/web/api/window/location/index.html +++ b/files/zh-cn/web/api/window/location/index.html @@ -12,13 +12,13 @@ ---

    {{ APIRef() }}

    -

    window.location 只读属性,返回一个 {{domxref("Location")}}  对象,其中包含有关文档当前位置的信息。

    +

    window.location 只读属性,返回一个 {{domxref("Location")}} 对象,其中包含有关文档当前位置的信息。

    window.location : 所有字母必须小写!

    -

    尽管 window.location 是一个只读 Location 对象,你仍然可以赋给它一个 {{domxref("DOMString")}}。这意味着您可以在大多数情况下处理 location,就像它是一个字符串一样:window.location = 'http://www.example.com',是 window.location.href = 'http://www.example.com'的同义词 。

    +

    尽管 window.location 是一个只读 Location 对象,你仍然可以赋给它一个 {{domxref("DOMString")}}。这意味着您可以在大多数情况下处理 location,就像它是一个字符串一样:window.location = 'http://www.example.com',是 window.location.href = 'http://www.example.com'的同义词 。

    语法

    @@ -35,7 +35,7 @@

    简单例子

    例子#1:导航到一个新页面

    -

    只要赋给 location 对象一个新值,文档就会使用新的 URL 加载,就好像使用修改后的 URL 调用了  window.location.assign() 一样。需要注意的是,安全设置,如 CORS(跨域资源共享),可能会限制实际加载新页面。

    +

    只要赋给 location 对象一个新值,文档就会使用新的 URL 加载,就好像使用修改后的 URL 调用了 window.location.assign() 一样。需要注意的是,安全设置,如 CORS(跨域资源共享),可能会限制实际加载新页面。

    window.location.assign("http://www.mozilla.org"); // or
     window.location = "http://www.mozilla.org";
    @@ -48,24 +48,24 @@ 

    例子#2:强制

    例子#3

    -

    考虑下面的例子,该例使用 replace() 方法重新加载页面,并将 window.location.pathname 的值插入到 hash:

    +

    考虑下面的例子,该例使用 replace() 方法重新加载页面,并将 window.location.pathname 的值插入到 hash:

    function reloadPageWithHash() {
    -  var initialPage = window.location.pathname;
    -  window.location.replace('http://example.com/#' + initialPage);
    +  var initialPage = window.location.pathname;
    +  window.location.replace('http://example.com/#' + initialPage);
     }
     
    -
    Note: The example above works in situations where window.location.hash does not need to be retained. However, in Gecko-based browsers, setting window.location.pathname in this manner will erase any information in window.location.hash, whereas in WebKit (and possibly other browsers), setting the pathname will not alter the the hash. If you need to change pathname but keep the hash as is, use the replace() method instead, which should work consistently across browsers.
    +
    Note: The example above works in situations where window.location.hash does not need to be retained. However, in Gecko-based browsers, setting window.location.pathname in this manner will erase any information in window.location.hash, whereas in WebKit (and possibly other browsers), setting the pathname will not alter the the hash. If you need to change pathname but keep the hash as is, use the replace() method instead, which should work consistently across browsers.

    例子#4:弹出警告框,显示当前 URL 的属性:

    function showLoc() {
    -  var oLocation = window.location, aLog = ["Property (Typeof): Value", "window.location (" + (typeof oLocation) + "): " + oLocation ];
    -  for (var sProp in oLocation){
    -    aLog.push(sProp + " (" + (typeof oLocation[sProp]) + "): " +  (oLocation[sProp] || "n/a"));
    -  }
    -  alert(aLog.join("\n"));
    +  var oLocation = window.location, aLog = ["Property (Typeof): Value", "window.location (" + (typeof oLocation) + "): " + oLocation ];
    +  for (var sProp in oLocation){
    +    aLog.push(sProp + " (" + (typeof oLocation[sProp]) + "): " +  (oLocation[sProp] || "n/a"));
    +  }
    +  alert(aLog.join("\n"));
     }
     
     // in html: <button onclick="showLoc();">Show location properties</button>
    @@ -74,7 +74,7 @@ 

    例子#4:

    例子#5:通过修改 search 属性向服务器发送字符串数据:

    function sendData (sData) {
    -  window.location.search = sData;
    +  window.location.search = sData;
     }
     
     // in html: <button onclick="sendData('Some data');">Send data</button>
    @@ -82,62 +82,62 @@ 

    -

    例子#6:获取一个 window.location.search 键值(key value):

    +

    例子#6:获取一个 window.location.search 键值(key value):

    function loadPageVar (sVar) {
    -  return decodeURI(window.location.search.replace(new RegExp("^(?:.*[&\\?]" + encodeURI(sVar).replace(/[\.\+\*]/g, "\\$&") + "(?:\\=([^&]*))?)?.*$", "i"), "$1"));
    +  return decodeURI(window.location.search.replace(new RegExp("^(?:.*[&\\?]" + encodeURI(sVar).replace(/[\.\+\*]/g, "\\$&") + "(?:\\=([^&]*))?)?.*$", "i"), "$1"));
     }
     
     alert(loadPageVar("name"));
     
    -

    例子#7:通过 window.location.search 字符串获取查询参数,存入对象 oGetVars 中:

    +

    例子#7:通过 window.location.search 字符串获取查询参数,存入对象 oGetVars 中:

    var oGetVars = {};
     
     if (window.location.search.length > 1) {
    -  for (var aItKey, nKeyId = 0, aCouples = window.location.search.substr(1).split("&"); nKeyId < aCouples.length; nKeyId++) {
    -    aItKey = aCouples[nKeyId].split("=");
    -    oGetVars[decodeURIComponent(aItKey[0])] = aItKey.length > 1 ? decodeURIComponent(aItKey[1]) : "";
    -  }
    +  for (var aItKey, nKeyId = 0, aCouples = window.location.search.substr(1).split("&"); nKeyId < aCouples.length; nKeyId++) {
    +    aItKey = aCouples[nKeyId].split("=");
    +    oGetVars[decodeURIComponent(aItKey[0])] = aItKey.length > 1 ? decodeURIComponent(aItKey[1]) : "";
    +  }
     }
     
     // alert(oGetVars.yourVar);
     
    -
     
    +

    同样可以通过一个匿名构造函数来获取,这样只声明了一个全局变量。

    var oGetVars = new (function (sSearch) {
    -  if (sSearch.length > 1) {
    -    for (var aItKey, nKeyId = 0, aCouples = sSearch.substr(1).split("&"); nKeyId < aCouples.length; nKeyId++) {
    -      aItKey = aCouples[nKeyId].split("=");
    -      this[decodeURIComponent(aItKey[0])] = aItKey.length > 1 ? decodeURIComponent(aItKey[1]) : "";
    -    }
    -  }
    +  if (sSearch.length > 1) {
    +    for (var aItKey, nKeyId = 0, aCouples = sSearch.substr(1).split("&"); nKeyId < aCouples.length; nKeyId++) {
    +      aItKey = aCouples[nKeyId].split("=");
    +      this[decodeURIComponent(aItKey[0])] = aItKey.length > 1 ? decodeURIComponent(aItKey[1]) : "";
    +    }
    +  }
     })(window.location.search);
     
     // alert(oGetVars.yourVar);
     
    -

    例子#8:通过 window.location.search 字符串获取查询参数,存入对象 oGetVars 中,并尝试识别参数类型(typeof):

    +

    例子#8:通过 window.location.search 字符串获取查询参数,存入对象 oGetVars 中,并尝试识别参数类型(typeof):

    var oGetVars = {};
     
     function buildValue(sValue) {
    -  if (/^\s*$/.test(sValue)) { return null; }
    -  if (/^(true|false)$/i.test(sValue)) { return sValue.toLowerCase() === "true"; }
    -  if (isFinite(sValue)) { return parseFloat(sValue); }
    -  if (isFinite(Date.parse(sValue))) { return new Date(sValue); } // this conditional is unreliable in non-SpiderMonkey browsers
    -  return sValue;
    +  if (/^\s*$/.test(sValue)) { return null; }
    +  if (/^(true|false)$/i.test(sValue)) { return sValue.toLowerCase() === "true"; }
    +  if (isFinite(sValue)) { return parseFloat(sValue); }
    +  if (isFinite(Date.parse(sValue))) { return new Date(sValue); } // this conditional is unreliable in non-SpiderMonkey browsers
    +  return sValue;
     }
     
     if (window.location.search.length > 1) {
    -  for (var aItKey, nKeyId = 0, aCouples = window.location.search.substr(1).split("&"); nKeyId < aCouples.length; nKeyId++) {
    -    aItKey = aCouples[nKeyId].split("=");
    -    oGetVars[unescape(aItKey[0])] = aItKey.length > 1 ? buildValue(unescape(aItKey[1])) : null;
    -  }
    +  for (var aItKey, nKeyId = 0, aCouples = window.location.search.substr(1).split("&"); nKeyId < aCouples.length; nKeyId++) {
    +    aItKey = aCouples[nKeyId].split("=");
    +    oGetVars[unescape(aItKey[0])] = aItKey.length > 1 ? buildValue(unescape(aItKey[1])) : null;
    +  }
     }
     
     // alert(oGetVars.yourVar);
    @@ -146,26 +146,26 @@ 

    var oGetVars = new (function (sSearch) { -  var rNull = /^\s*$/, rBool = /^(true|false)$/i; -  function buildValue(sValue) { -    if (rNull.test(sValue)) { return null; } -    if (rBool.test(sValue)) { return sValue.toLowerCase() === "true"; } -    if (isFinite(sValue)) { return parseFloat(sValue); } -    if (isFinite(Date.parse(sValue))) { return new Date(sValue); } -    return sValue; -  } -  if (sSearch.length > 1) { -    for (var aItKey, nKeyId = 0, aCouples = sSearch.substr(1).split("&"); nKeyId < aCouples.length; nKeyId++) { -      aItKey = aCouples[nKeyId].split("="); -      this[unescape(aItKey[0])] = aItKey.length > 1 ? buildValue(unescape(aItKey[1])) : null; -    } -  } + var rNull = /^\s*$/, rBool = /^(true|false)$/i; + function buildValue(sValue) { + if (rNull.test(sValue)) { return null; } + if (rBool.test(sValue)) { return sValue.toLowerCase() === "true"; } + if (isFinite(sValue)) { return parseFloat(sValue); } + if (isFinite(Date.parse(sValue))) { return new Date(sValue); } + return sValue; + } + if (sSearch.length > 1) { + for (var aItKey, nKeyId = 0, aCouples = sSearch.substr(1).split("&"); nKeyId < aCouples.length; nKeyId++) { + aItKey = aCouples[nKeyId].split("="); + this[unescape(aItKey[0])] = aItKey.length > 1 ? buildValue(unescape(aItKey[1])) : null; + } + } })(window.location.search); // alert(oGetVars.yourVar);

    -

    例子#9:不改变 window.location.hash 属性情况下使用书签

    +

    例子#9:不改变 window.location.hash 属性情况下使用书签

    <!doctype html>
     <html>
    @@ -174,20 +174,20 @@ 

    <title>MDN Example</title> <script type="text/javascript"> function showNode (oNode) { -  var nLeft = 0, nTop = 0; -  for (var oItNode = oNode; oItNode; nLeft += oItNode.offsetLeft, nTop += oItNode.offsetTop, oItNode = oItNode.offsetParent);   window.scrollTo(nLeft, nTop); } + var nLeft = 0, nTop = 0; + for (var oItNode = oNode; oItNode; nLeft += oItNode.offsetLeft, nTop += oItNode.offsetTop, oItNode = oItNode.offsetParent); window.scrollTo(nLeft, nTop); } function showBookmark (sBookmark, bUseHash) { -  if (arguments.length === 1 || bUseHash) { window.location.hash = sBookmark; return; } -  var oBookmark = document.querySelector(sBookmark); -  if (oBookmark) { showNode(oBookmark); } + if (arguments.length === 1 || bUseHash) { window.location.hash = sBookmark; return; } + var oBookmark = document.querySelector(sBookmark); + if (oBookmark) { showNode(oBookmark); } } </script> <style type="text/css"> span.intLink { -    cursor: pointer; -    color: #0000ff; -    text-decoration: underline; + cursor: pointer; + color: #0000ff; + text-decoration: underline; } </style> </head> @@ -220,48 +220,48 @@

    </html>

    -
    Note: The function showNode is also an example of the use of the for cycle without a statementsection. In this case a semicolon is always put immediately after the declaration of the cycle.
    +
    Note: The function showNode is also an example of the use of the for cycle without a statementsection. In this case a semicolon is always put immediately after the declaration of the cycle.

    下面代码做同样的事,但是页面滚动带有动画效果:

    var showBookmark = (function () {
    -  var  _useHash, _scrollX, _scrollY, _nodeX, _nodeY, _itFrame, _scrollId = -1, _bookMark,
    -       /*
    -       * nDuration: the duration in milliseconds of each frame
    -       * nFrames: number of frames for each scroll
    -       */
    -       nDuration = 200, nFrames = 10;
    -
    -  function _next () {
    -    if (_itFrame > nFrames) { clearInterval(_scrollId); _scrollId = -1; return; }
    -    _isBot = true;
    -    document.documentElement.scrollTop = Math.round(_scrollY + (_nodeY - _scrollY) * _itFrame / nFrames);
    -    document.documentElement.scrollLeft = Math.round(_scrollX + (_nodeX - _scrollX) * _itFrame / nFrames);
    -    if (_useHash && _itFrame === nFrames) { location.hash = _bookMark; }
    -    _itFrame++;
    -  }
    -
    -  function _chkOwner () {
    -    if (_isBot) { _isBot = false; return; }
    -    if (_scrollId > -1) { clearInterval(_scrollId); _scrollId = -1; }
    -  }
    -
    -  if (window.addEventListener) { window.addEventListener("scroll", _chkOwner, false); }
    -  else if (window.attachEvent) { window.attachEvent("onscroll", _chkOwner); }
    -
    -  return function (sBookmark, bUseHash) {
    -    _scrollY = document.documentElement.scrollTop;
    -    _scrollX = document.documentElement.scrollLeft;
    -    _bookMark = sBookmark;
    -    _useHash = arguments.length === 1 || bUseHash;
    -    for (
    -      var nLeft = 0, nTop = 0, oNode = document.querySelector(sBookmark);
    -      oNode;
    -      nLeft += oNode.offsetLeft, nTop += oNode.offsetTop, oNode = oNode.offsetParent
    -    );
    -    _nodeX = nLeft, _nodeY = nTop, _itFrame = 1;
    -    if (_scrollId === -1) { _scrollId = setInterval(_next, Math.round(nDuration / nFrames)); }
    -  };
    +  var  _useHash, _scrollX, _scrollY, _nodeX, _nodeY, _itFrame, _scrollId = -1, _bookMark,
    +       /*
    +       * nDuration: the duration in milliseconds of each frame
    +       * nFrames: number of frames for each scroll
    +       */
    +       nDuration = 200, nFrames = 10;
    +
    +  function _next () {
    +    if (_itFrame > nFrames) { clearInterval(_scrollId); _scrollId = -1; return; }
    +    _isBot = true;
    +    document.documentElement.scrollTop = Math.round(_scrollY + (_nodeY - _scrollY) * _itFrame / nFrames);
    +    document.documentElement.scrollLeft = Math.round(_scrollX + (_nodeX - _scrollX) * _itFrame / nFrames);
    +    if (_useHash && _itFrame === nFrames) { location.hash = _bookMark; }
    +    _itFrame++;
    +  }
    +
    +  function _chkOwner () {
    +    if (_isBot) { _isBot = false; return; }
    +    if (_scrollId > -1) { clearInterval(_scrollId); _scrollId = -1; }
    +  }
    +
    +  if (window.addEventListener) { window.addEventListener("scroll", _chkOwner, false); }
    +  else if (window.attachEvent) { window.attachEvent("onscroll", _chkOwner); }
    +
    +  return function (sBookmark, bUseHash) {
    +    _scrollY = document.documentElement.scrollTop;
    +    _scrollX = document.documentElement.scrollLeft;
    +    _bookMark = sBookmark;
    +    _useHash = arguments.length === 1 || bUseHash;
    +    for (
    +      var nLeft = 0, nTop = 0, oNode = document.querySelector(sBookmark);
    +      oNode;
    +      nLeft += oNode.offsetLeft, nTop += oNode.offsetTop, oNode = oNode.offsetParent
    +    );
    +    _nodeX = nLeft, _nodeY = nTop, _itFrame = 1;
    +    if (_scrollId === -1) { _scrollId = setInterval(_next, Math.round(nDuration / nFrames)); }
    +  };
     })();
     
    @@ -275,7 +275,7 @@

    浏览器兼容性

    {{Compat("api.Window.location")}}

    -
     
    +

    相关链接

    diff --git a/files/zh-cn/web/api/window/locationbar/index.html b/files/zh-cn/web/api/window/locationbar/index.html index 6a80c0cc3d7eaf..7ee07ae7fc41b7 100644 --- a/files/zh-cn/web/api/window/locationbar/index.html +++ b/files/zh-cn/web/api/window/locationbar/index.html @@ -7,7 +7,7 @@

    概要

    -

    返回一个可以检查 visibility 属性的 locationbar 对象。

    +

    返回一个可以检查 visibility 属性的 locationbar 对象。

    语法

    diff --git a/files/zh-cn/web/api/window/matchmedia/index.html b/files/zh-cn/web/api/window/matchmedia/index.html index e5f184fc845d4c..aa48c412dd7931 100644 --- a/files/zh-cn/web/api/window/matchmedia/index.html +++ b/files/zh-cn/web/api/window/matchmedia/index.html @@ -5,7 +5,7 @@ ---

    {{APIRef}}

    -

    {{domxref("Window")}} 的matchMedia() 方法返回一个新的{{domxref("MediaQueryList")}} 对象,表示指定的媒体查询字符串解析后的结果。返回的MediaQueryList 可被用于判定{{domxref("Document")}}是否匹配媒体查询,或者监控一个document 来判定它匹配了或者停止匹配了此媒体查询。

    +

    {{domxref("Window")}} 的matchMedia() 方法返回一个新的{{domxref("MediaQueryList")}} 对象,表示指定的媒体查询字符串解析后的结果。返回的MediaQueryList 可被用于判定{{domxref("Document")}}是否匹配媒体查询,或者监控一个document 来判定它匹配了或者停止匹配了此媒体查询。

    语法

    @@ -29,7 +29,7 @@

    使用说明

    要执行一次瞬时检查以查看文档是否与媒体查询匹配,请查看{{domxref("MediaQueryList.matches", "matches")}}属性的值,当 document 满足媒体查询条件的时候将会返回true

    -

    如果您需要始终了解 document 是否与媒体查询匹配,则可以查看将要传递给对象的{{domxref("MediaQueryList.change_event", "change")}} 事件 。{{domxref("Window.devicePixelRatio")}}上的文章中有一个很好的例子。

    +

    如果您需要始终了解 document 是否与媒体查询匹配,则可以查看将要传递给对象的{{domxref("MediaQueryList.change_event", "change")}} 事件 。{{domxref("Window.devicePixelRatio")}}上的文章中有一个很好的例子。

    举例

    @@ -48,7 +48,7 @@

    HTML

    <span class="mq-value"></span>
    -

    一个简单的 <span> 来接收输出。

    +

    一个简单的 <span> 来接收输出。

    参数

      -
    • deltaX 表示窗口在水平方向移动的像素值。
    • -
    • deltaY 表示窗口在垂直方向移动的像素值。
    • +
    • deltaX 表示窗口在水平方向移动的像素值。
    • +
    • deltaY 表示窗口在垂直方向移动的像素值。

    示例

    function budge() {
    diff --git a/files/zh-cn/web/api/window/mozinnerscreenx/index.html b/files/zh-cn/web/api/window/mozinnerscreenx/index.html
    index 8090bd4c348cb0..3f644c626e1734 100644
    --- a/files/zh-cn/web/api/window/mozinnerscreenx/index.html
    +++ b/files/zh-cn/web/api/window/mozinnerscreenx/index.html
    @@ -19,7 +19,7 @@ 

    概要

    在屏幕坐标中获取窗口视口左上角的 X 坐标

    -
    备注: 该坐标以 CSS 像素报告显示,而不是硬件像素。 这意味着它可以受缩放级别的影响; 要计算物理屏幕像素的实际数量,需要使用 nsIDOMWindowUtils.screenPixelsPerCSSPixel 属性。
    +
    备注: 该坐标以 CSS 像素报告显示,而不是硬件像素。 这意味着它可以受缩放级别的影响; 要计算物理屏幕像素的实际数量,需要使用 nsIDOMWindowUtils.screenPixelsPerCSSPixel 属性。

    语法

    @@ -28,7 +28,7 @@

    语法

      -
    • screenX 存储的是window.mozInnerScreenX 的属性值。
    • +
    • screenX 存储的是window.mozInnerScreenX 的属性值。
    • window.mozInnerScreenX 属性的值是一个浮点数,只读; 它没有默认值。
    diff --git a/files/zh-cn/web/api/window/mozinnerscreeny/index.html b/files/zh-cn/web/api/window/mozinnerscreeny/index.html index c3756c52e6e5d8..9d0cba390f7021 100644 --- a/files/zh-cn/web/api/window/mozinnerscreeny/index.html +++ b/files/zh-cn/web/api/window/mozinnerscreeny/index.html @@ -19,7 +19,7 @@

    概要

    在屏幕坐标下获取窗口视口左上角的 Y 坐标

    -
    备注:该坐标是以 CSS 像素报告显示的,而不是以硬件像素。 这意味着它可以受缩放级别的影响; 要计算物理屏幕像素的实际数量,需要使用nsIDOMWindowUtils.screenPixelsPerCSSPixel 属性
    +
    备注:该坐标是以 CSS 像素报告显示的,而不是以硬件像素。 这意味着它可以受缩放级别的影响; 要计算物理屏幕像素的实际数量,需要使用nsIDOMWindowUtils.screenPixelsPerCSSPixel 属性

    语法

    @@ -28,8 +28,8 @@

    语法

      -
    • screenY 存储的是 window.mozInnerScreenY 的属性值。
    • -
    •  window.mozInnerScreenY的属性值是一个浮点数,只读;它没有默认值。
    • +
    • screenY 存储的是 window.mozInnerScreenY 的属性值。
    • +
    • window.mozInnerScreenY的属性值是一个浮点数,只读;它没有默认值。

    规范

    diff --git a/files/zh-cn/web/api/window/name/index.html b/files/zh-cn/web/api/window/name/index.html index 377be86e3b062d..1118316f62e3c7 100644 --- a/files/zh-cn/web/api/window/name/index.html +++ b/files/zh-cn/web/api/window/name/index.html @@ -25,9 +25,9 @@

    备注

    窗口的名字主要用于为超链接和表单设置目标(targets)。窗口不需要有名称。

    -

    在某些框架里(如,SessionVars 和 Dojo's dojox.io.windowName ,该属性也被用于作为 JSONP 的一个更安全的备选,来提供跨域通信(cross-domain messaging)。现代 web 应用应使用 postMessage API 进行敏感的跨域通信。

    +

    在某些框架里(如,SessionVars 和 Dojo's dojox.io.windowName ,该属性也被用于作为 JSONP 的一个更安全的备选,来提供跨域通信(cross-domain messaging)。现代 web 应用应使用 postMessage API 进行敏感的跨域通信。

    -

    window.name 会调用 toString 将赋给它的值转换成对应的字符串表示。

    +

    window.name 会调用 toString 将赋给它的值转换成对应的字符串表示。

    (译注:此处似有不妥,私以为调用的应是 ToString 抽象方法。事实上,如果将一个 Symbol 类型的值赋给 window.name,会报 TypeError,而非调用 Symbol.toString() 转换成字符串后进行赋值。例如:

    diff --git a/files/zh-cn/web/api/window/offline_event/index.html b/files/zh-cn/web/api/window/offline_event/index.html index 6fefc7a867714a..87b48c564c27e3 100644 --- a/files/zh-cn/web/api/window/offline_event/index.html +++ b/files/zh-cn/web/api/window/offline_event/index.html @@ -3,7 +3,7 @@ slug: Web/API/Window/offline_event translation_of: Web/API/Window/offline_event --- -

    当浏览器失去网络连接时,offline事件被触发。并且navigator.onLine的值变为 false

    +

    当浏览器失去网络连接时,offline事件被触发。并且navigator.onLine的值变为 false

    常规信息

    diff --git a/files/zh-cn/web/api/window/ondragdrop/index.html b/files/zh-cn/web/api/window/ondragdrop/index.html index 7ca893b188c1df..ff892dc4e8bb24 100644 --- a/files/zh-cn/web/api/window/ondragdrop/index.html +++ b/files/zh-cn/web/api/window/ondragdrop/index.html @@ -18,7 +18,7 @@

    摘要

    -
    funcRef 
    +
    funcRef
    要注册的事件处理函数。
    diff --git a/files/zh-cn/web/api/window/onmozbeforepaint/index.html b/files/zh-cn/web/api/window/onmozbeforepaint/index.html index 277064c7297132..2aa693f578e012 100644 --- a/files/zh-cn/web/api/window/onmozbeforepaint/index.html +++ b/files/zh-cn/web/api/window/onmozbeforepaint/index.html @@ -10,11 +10,11 @@

    {{ non-standard_header() }}

    -
    警告: 这个非标准时间处理器在某些已发布版本中无法使用,而且已经在 Gecko 11.0 中被移除{{ geckoRelease("11.0") }}。
    +
    警告: 这个非标准时间处理器在某些已发布版本中无法使用,而且已经在 Gecko 11.0 中被移除{{ geckoRelease("11.0") }}。

    摘要

    -

    MozBeforePaints 事件的事件处理器。这样做是为了保持和 {{ domxref("window.mozRequestAnimationFrame()") }}方法一致以期在 JavaScript 代码中提供流畅,同步的动画。

    +

    MozBeforePaints 事件的事件处理器。这样做是为了保持和 {{ domxref("window.mozRequestAnimationFrame()") }}方法一致以期在 JavaScript 代码中提供流畅,同步的动画。

    语法

    @@ -22,7 +22,7 @@

    语法

      -
    • funcRef 是处理器函数。
    • +
    • funcRef 是处理器函数。

    例子

    @@ -31,7 +31,7 @@

    例子

    注意

    -

    这个事件会在浏览器重绘前立即触发,如果事件被一个或多个代码调用响应{{domxref("window.mozRequestAnimationFrame()") }}。事件处理器会接收到一个事件作为输入参数,其 timeStamp 属性为 UTC 起始到现在的毫秒数字,这是当前动画帧的“当前时间”。这个时间对于所有在相同浏览器窗口运行的,包括哪些用了 {{ domxref("window.mozRequestAnimationFrame()") }} 方法,CSS transitions, 和 SMIL animations 的都是一样的。

    +

    这个事件会在浏览器重绘前立即触发,如果事件被一个或多个代码调用响应{{domxref("window.mozRequestAnimationFrame()") }}。事件处理器会接收到一个事件作为输入参数,其 timeStamp 属性为 UTC 起始到现在的毫秒数字,这是当前动画帧的“当前时间”。这个时间对于所有在相同浏览器窗口运行的,包括哪些用了 {{ domxref("window.mozRequestAnimationFrame()") }} 方法,CSS transitions, 和 SMIL animations 的都是一样的。

    说明

    diff --git a/files/zh-cn/web/api/window/onpaint/index.html b/files/zh-cn/web/api/window/onpaint/index.html index 7362138c82ddd0..89ea7164863ca2 100644 --- a/files/zh-cn/web/api/window/onpaint/index.html +++ b/files/zh-cn/web/api/window/onpaint/index.html @@ -17,12 +17,12 @@

    语法

      -
    • funcRef 是处理函数。
    • +
    • funcRef 是处理函数。

    注意事项

    -

    onpaint 现在没有生效,并且这个事件是否会生效也是一个问题,参见{{Bug(239074)}}.

    +

    onpaint 现在没有生效,并且这个事件是否会生效也是一个问题,参见{{Bug(239074)}}.

    window 渲染时 paint 事件会触发。此事件在 window 的 load 事件之后触发,并且每次 window 需要重绘时都会再次触发,当另一个 window 出现使原先的 window 不处于激活状态时,原 window 的 onpaint 事件则被清理。

    diff --git a/files/zh-cn/web/api/window/open/index.html b/files/zh-cn/web/api/window/open/index.html index 29e2ac9471b0f3..eb9b8185937cf4 100644 --- a/files/zh-cn/web/api/window/open/index.html +++ b/files/zh-cn/web/api/window/open/index.html @@ -12,7 +12,7 @@ ---
    {{APIRef}}
    -

    Window 接口的 open() 方法,是用指定的名称将指定的资源加载到浏览器上下文(窗口 window ,内嵌框架 iframe 或者标签 tab )。如果没有指定名称,则一个新的窗口会被打开并且指定的资源会被加载进这个窗口的浏览器上下文中。

    +

    Window 接口的 open() 方法,是用指定的名称将指定的资源加载到浏览器上下文(窗口 window ,内嵌框架 iframe 或者标签 tab )。如果没有指定名称,则一个新的窗口会被打开并且指定的资源会被加载进这个窗口的浏览器上下文中。

    语法

    @@ -80,11 +80,11 @@

    例子

    let WindowObjectReference;
     
     const openRequestedPopup = () => {
    -    windowObjectReference = window.open(
    -        "https://www.domainname.ext/path/ImageFile.png",
    -        "DescriptiveWindowName",
    -        "resizable,scrollbars,status"
    -    );
    +    windowObjectReference = window.open(
    +        "https://www.domainname.ext/path/ImageFile.png",
    +        "DescriptiveWindowName",
    +        "resizable,scrollbars,status"
    +    );
     }
     
    @@ -156,7 +156,7 @@

    Toolbar and chrome features

    -
    NOTE: All features can be set to yes, 1 or just be present to be "on", set to no oror in most cases just not present to be "off"
    +
    NOTE: All features can be set to yes, 1 or just be present to be "on", set to no or 0 or in most cases just not present to be "off"
    example "status=yes", "status=1" and "status" have identical results
    menubar
    diff --git a/files/zh-cn/web/api/window/opendialog/index.html b/files/zh-cn/web/api/window/opendialog/index.html index 66f1512409e150..b280f19ae2b8df 100644 --- a/files/zh-cn/web/api/window/opendialog/index.html +++ b/files/zh-cn/web/api/window/opendialog/index.html @@ -15,23 +15,23 @@

    语法

    - newWindow 
    + newWindow
    打开的窗口对象。
    - url 
    + url
    要在新窗口里打开的地址。
    - name 
    + name
    The window name (optional). See window.open description for detailed information.
    - features 
    + features
    See window.open description for description.
    - arg1, arg2, ... 
    + arg1, arg2, ...
    The arguments to be passed to the new window (optional).
    diff --git a/files/zh-cn/web/api/window/opener/index.html b/files/zh-cn/web/api/window/opener/index.html index 5b8cc863606489..a74a410c600892 100644 --- a/files/zh-cn/web/api/window/opener/index.html +++ b/files/zh-cn/web/api/window/opener/index.html @@ -7,7 +7,7 @@

    概述

    -

    返回打开当前窗口的那个窗口的引用,例如:在 window A 中打开了 window B,B.opener 返回 A.

    +

    返回打开当前窗口的那个窗口的引用,例如:在 window A 中打开了 window B,B.opener 返回 A.

    语法

    @@ -16,7 +16,7 @@

    语法

    例子

    -
     if (window.opener != indexWin) {
    +
     if (window.opener != indexWin) {
          referToTop(window.opener);
      }
     
    diff --git a/files/zh-cn/web/api/window/orientationchange_event/index.html b/files/zh-cn/web/api/window/orientationchange_event/index.html index bdc5701de66e23..76e3c8e4250af1 100644 --- a/files/zh-cn/web/api/window/orientationchange_event/index.html +++ b/files/zh-cn/web/api/window/orientationchange_event/index.html @@ -36,7 +36,7 @@

    示例

    -

    你可以在{{domxref("EventTarget/addEventListener", "addEventListener")}} 方法中使用 orientationchange 事件:

    +

    你可以在{{domxref("EventTarget/addEventListener", "addEventListener")}} 方法中使用 orientationchange 事件:

    window.addEventListener("orientationchange", function() {
       console.log("the orientation of the device is now " + screen.orientation.angle);
    diff --git a/files/zh-cn/web/api/window/outerheight/index.html b/files/zh-cn/web/api/window/outerheight/index.html
    index 0b59a66008ec73..c24e6c9b069770 100644
    --- a/files/zh-cn/web/api/window/outerheight/index.html
    +++ b/files/zh-cn/web/api/window/outerheight/index.html
    @@ -6,17 +6,17 @@
     
    {{APIRef}}

    概述

    -

    Window.outerHeight 获取整个浏览器窗口的高度(单位:像素),包括侧边栏(如果存在)、窗口镶边(window chrome)和窗口调正边框(window resizing borders/handles)。

    +

    Window.outerHeight 获取整个浏览器窗口的高度(单位:像素),包括侧边栏(如果存在)、窗口镶边(window chrome)和窗口调正边框(window resizing borders/handles)。

    该属性为只读,没有默认值。

    语法

    outWindowHeight = window.outerHeight;
     
    -

    outWindowHeight 为窗口的外层的高度。

    +

    outWindowHeight 为窗口的外层的高度。

    备注

    要改变窗口的大小,请查看 {{domxref("window.resizeBy()")}} 和 {{domxref("window.resizeTo()")}}。

    要获取窗口的内层高度,即页面被显示区域的高度,可查看 {{domxref("window.innerHeight")}}。

    图像示例

    -

    下面的示意图展示了 outerHeightinnerHeight 两者的不同。

    +

    下面的示意图展示了 outerHeightinnerHeight 两者的不同。

    innerHeight vs outerHeight illustration

    浏览器兼容性

    diff --git a/files/zh-cn/web/api/window/outerwidth/index.html b/files/zh-cn/web/api/window/outerwidth/index.html index 4c0bcee3286776..2e2cbf3c872397 100644 --- a/files/zh-cn/web/api/window/outerwidth/index.html +++ b/files/zh-cn/web/api/window/outerwidth/index.html @@ -6,12 +6,12 @@
    {{APIRef}}

    概述

    -

    Window.outerWidth 获取浏览器窗口外部的宽度。表示整个浏览器窗口的宽度,包括侧边栏(如果存在)、窗口镶边(window chrome)和调正窗口大小的边框(window resizing borders/handles)。

    +

    Window.outerWidth 获取浏览器窗口外部的宽度。表示整个浏览器窗口的宽度,包括侧边栏(如果存在)、窗口镶边(window chrome)和调正窗口大小的边框(window resizing borders/handles)。

    该属性为只读,没有默认值。

    语法

    outWindowWidth = window.outerWidth;
     
    -

    outWindowWidth 是窗口的外层的宽度。

    +

    outWindowWidth 是窗口的外层的宽度。

    备注

    要改变一个窗口的大小,可参考 {{domxref("window.resizeBy()")}} 和 {{domxref("window.resizeTo()")}}。

    要获取一个窗口的内层宽度(inner width),即页面被展示的区域,请参考 {{domxref("window.innerWidth")}}。

    diff --git a/files/zh-cn/web/api/window/pagehide_event/index.html b/files/zh-cn/web/api/window/pagehide_event/index.html index b3a380412b2f05..4ed1b75d385437 100644 --- a/files/zh-cn/web/api/window/pagehide_event/index.html +++ b/files/zh-cn/web/api/window/pagehide_event/index.html @@ -39,7 +39,7 @@

    例子

    -

    在此示例中,建立了一个事件处理程序以监视 pagehide (页面隐藏) 事件,并在持久保存页面以进行可能的重用时执行特殊处理。

    +

    在此示例中,建立了一个事件处理程序以监视 pagehide (页面隐藏) 事件,并在持久保存页面以进行可能的重用时执行特殊处理。

    window.addEventListener("pagehide", event => {
       if (event.persisted) {
    @@ -48,7 +48,7 @@ 

    例子

    }, false);
    -

    这也可以使用 {{domxref("Window")}} 上的 {{domxref("Window.onpagehide", "onpagehide")}} 事件处理程序属性来编写:

    +

    这也可以使用 {{domxref("Window")}} 上的 {{domxref("Window.onpagehide", "onpagehide")}} 事件处理程序属性来编写:

    window.onpagehide = event => {
       if (event.persisted) {
    diff --git a/files/zh-cn/web/api/window/pageshow_event/index.html b/files/zh-cn/web/api/window/pageshow_event/index.html
    index 4570e232111653..3038bd36ca1d64 100644
    --- a/files/zh-cn/web/api/window/pageshow_event/index.html
    +++ b/files/zh-cn/web/api/window/pageshow_event/index.html
    @@ -4,7 +4,7 @@
     translation_of: Web/API/Window/pageshow_event
     original_slug: Web/Events/pageshow
     ---
    -

    当一条会话历史记录被执行的时候将会触发页面显示 (pageshow) 事件。(这包括了后退/前进按钮操作,同时也会在 onload 事件触发后初始化页面时触发)

    +

    当一条会话历史记录被执行的时候将会触发页面显示 (pageshow) 事件。(这包括了后退/前进按钮操作,同时也会在 onload 事件触发后初始化页面时触发)

    基本信息

    @@ -67,7 +67,7 @@

    示例

    以下示例将会在控制台打印由前进/后退按钮以及 load 事件触发后引起的 pageshow 事件:

    window.addEventListener('pageshow', function(event) {
    -    console.log('after , pageshow :',event);
    +    console.log('after , pageshow :',event);
     });
     
     
    diff --git a/files/zh-cn/web/api/window/pagexoffset/index.html b/files/zh-cn/web/api/window/pagexoffset/index.html
    index d41dcbce6d3211..47b47ae16c1c23 100644
    --- a/files/zh-cn/web/api/window/pagexoffset/index.html
    +++ b/files/zh-cn/web/api/window/pagexoffset/index.html
    @@ -8,7 +8,7 @@
     ---
     
    {{ APIRef() }}
    -

    这是 scrollX 的别名

    +

    这是 scrollX 的别名

    规范

    diff --git a/files/zh-cn/web/api/window/pageyoffset/index.html b/files/zh-cn/web/api/window/pageyoffset/index.html index 43c54deb9f1817..dd0494789865a9 100644 --- a/files/zh-cn/web/api/window/pageyoffset/index.html +++ b/files/zh-cn/web/api/window/pageyoffset/index.html @@ -8,7 +8,7 @@ ---
    {{ APIRef("CSSOM View") }}
    -

    只读属性pageYOffsetscrollY 的别名。

    +

    只读属性pageYOffsetscrollY 的别名。

    规范

    diff --git a/files/zh-cn/web/api/window/parent/index.html b/files/zh-cn/web/api/window/parent/index.html index f765f450d0741b..c56204695e358c 100644 --- a/files/zh-cn/web/api/window/parent/index.html +++ b/files/zh-cn/web/api/window/parent/index.html @@ -20,7 +20,7 @@

    语法

    例子

    -
    if (window.parent != window.top) {
    +
    if (window.parent != window.top) {
       // 至少有三层窗口
     }
     
    diff --git a/files/zh-cn/web/api/window/postmessage/index.html b/files/zh-cn/web/api/window/postmessage/index.html index cc7fc3d6048684..6e7b8727970854 100644 --- a/files/zh-cn/web/api/window/postmessage/index.html +++ b/files/zh-cn/web/api/window/postmessage/index.html @@ -14,9 +14,9 @@ ---
    {{ApiRef("HTML DOM")}}
    -

    window.postMessage() 方法可以安全地实现跨源通信。通常,对于两个不同页面的脚本,只有当执行它们的页面位于具有相同的协议(通常为 https),端口号(443 为 https 的默认值),以及主机  (两个页面的模数 {{domxref("Document.domain")}}设置为相同的值) 时,这两个脚本才能相互通信。window.postMessage() 方法提供了一种受控机制来规避此限制,只要正确的使用,这种方法就很安全。

    +

    window.postMessage() 方法可以安全地实现跨源通信。通常,对于两个不同页面的脚本,只有当执行它们的页面位于具有相同的协议(通常为 https),端口号(443 为 https 的默认值),以及主机 (两个页面的模数 {{domxref("Document.domain")}}设置为相同的值) 时,这两个脚本才能相互通信。window.postMessage() 方法提供了一种受控机制来规避此限制,只要正确的使用,这种方法就很安全。

    -

    从广义上讲,一个窗口可以获得对另一个窗口的引用(比如 targetWindow = window.opener),然后在窗口上调用 targetWindow.postMessage() 方法分发一个  {{domxref("MessageEvent")}} 消息。接收消息的窗口可以根据需要自由处理此事件。传递给 window.postMessage() 的参数(比如 message )将通过消息事件对象暴露给接收消息的窗口

    +

    从广义上讲,一个窗口可以获得对另一个窗口的引用(比如 targetWindow = window.opener),然后在窗口上调用 targetWindow.postMessage() 方法分发一个 {{domxref("MessageEvent")}} 消息。接收消息的窗口可以根据需要自由处理此事件。传递给 window.postMessage() 的参数(比如 message )将通过消息事件对象暴露给接收消息的窗口

    语法

    @@ -26,11 +26,11 @@

    语法

    otherWindow
    其他窗口的一个引用,比如 iframe 的 contentWindow 属性、执行window.open返回的窗口对象、或者是命名过或数值索引的window.frames
    message
    -
    将要发送到其他 window 的数据。它将会被结构化克隆算法序列化。这意味着你可以不受什么限制的将数据对象安全的传送给目标窗口而无需自己序列化。[1]
    +
    将要发送到其他 window 的数据。它将会被结构化克隆算法序列化。这意味着你可以不受什么限制的将数据对象安全的传送给目标窗口而无需自己序列化。[1]
    targetOrigin
    通过窗口的 origin 属性来指定哪些窗口能接收到消息事件,其值可以是字符串"*"(表示无限制)或者一个 URI。在发送消息的时候,如果目标窗口的协议、主机地址或端口这三者的任意一项不匹配 targetOrigin 提供的值,那么消息就不会被发送;只有三者完全匹配,消息才会被发送。这个机制用来控制消息可以发送到哪些窗口;例如,当用 postMessage 传送密码时,这个参数就显得尤为重要,必须保证它的值与这条包含密码的信息的预期接受者的 origin 属性完全一致,来防止密码被恶意的第三方截获。如果你明确的知道消息应该发送到哪个窗口,那么请始终提供一个有确切值的 targetOrigin,而不是*。不提供确切的目标将导致数据泄露到任何对数据感兴趣的恶意站点。
    -
    transfer {{optional_Inline}}
    -
    是一串和 message 同时传递的 {{domxref("Transferable")}} 对象。这些对象的所有权将被转移给消息的接收方,而发送一方将不再保有所有权。
    +
    transfer {{optional_Inline}}
    +
    是一串和 message 同时传递的 {{domxref("Transferable")}} 对象。这些对象的所有权将被转移给消息的接收方,而发送一方将不再保有所有权。

    The dispatched event

    @@ -43,23 +43,23 @@

    The dispatched event

    { // For Chrome, the origin property is in the event.originalEvent // object. -  // 这里不准确,chrome 没有这个属性 -  // var origin = event.origin || event.originalEvent.origin; + // 这里不准确,chrome 没有这个属性 + // var origin = event.origin || event.originalEvent.origin; var origin = event.origin - if (origin !== "http://example.org:8080") + if (origin !== "http://example.org:8080") return; // ... }
    -

     message 的属性有:

    +

    message 的属性有:

    data
    从其他 window 中传递过来的对象。
    origin
    -
    调用 postMessage  时消息发送方窗口的 origin . 这个字符串由 协议、“://“、域名、“ : 端口号”拼接而成。例如 “https://example.org (隐含端口 443)”、“http://example.net (隐含端口 80)”、“http://example.com:8080”。请注意,这个 origin 不能保证是该窗口的当前或未来 origin,因为 postMessage 被调用后可能被导航到不同的位置。
    +
    调用 postMessage 时消息发送方窗口的 origin . 这个字符串由 协议、“://“、域名、“ : 端口号”拼接而成。例如 “https://example.org (隐含端口 443)”、“http://example.net (隐含端口 80)”、“http://example.com:8080”。请注意,这个 origin 不能保证是该窗口的当前或未来 origin,因为 postMessage 被调用后可能被导航到不同的位置。
    source
    对发送消息的窗口对象的引用; 您可以使用此来在具有不同 origin 的两个窗口之间建立双向通信。
    @@ -78,7 +78,7 @@

    安全问题

    示例

    /*
    - * A 窗口的域名是<http://example.com:8080>,以下是 A 窗口的 script 标签下的代码:
    + * A 窗口的域名是<http://example.com:8080>,以下是 A 窗口的 script 标签下的代码:
      */
     
     var popup = window.open(...popup details...);
    @@ -95,7 +95,7 @@ 

    示例

    function receiveMessage(event) { // 我们能相信信息的发送者吗?(也许这个发送者和我们最初打开的不是同一个页面). - if (event.origin !== "http://example.org") + if (event.origin !== "http://example.org") return; // event.source 是我们通过 window.open 打开的弹出页面 popup @@ -112,14 +112,14 @@

    示例

    function receiveMessage(event) { // 我们能信任信息来源吗? - if (event.origin !== "http://example.com:8080") + if (event.origin !== "http://example.com:8080") return; // event.source 就当前弹出页的来源页面 // event.data 是 "hello there!" // 假设你已经验证了所受到信息的 origin (任何时候你都应该这样做), 一个很方便的方式就是把 event.source -  // 作为回信的对象,并且把 event.origin 作为 targetOrigin + // 作为回信的对象,并且把 event.origin 作为 targetOrigin event.source.postMessage("hi there yourself! the secret response " + "is: rheeeeet!", event.origin); @@ -138,7 +138,7 @@

    注意

    仅对于 IDN 主机名,origin 属性的值不是始终为 Unicode 或 punycode; 在使用此属性时,如果您期望来自 IDN 网站的消息,则最大程度地兼容性检查 IDN 和 punycode 值。 这个值最终将始终是 IDN,但现在你应该同时处理 IDN 和 punycode 表单。

    -

    当发送窗口包含 javascript: 或 data: URL 时,origin 属性的值是加载 URL 的脚本的

    +

    当发送窗口包含 javascript:data: URL 时,origin 属性的值是加载 URL 的脚本的

    在扩展{{Non-standard_inline}}中使用 window.postMessage

    @@ -169,5 +169,5 @@

    参见

    • {{domxref("Document.domain")}}
    • -
    • {{domxref("CustomEvent")}} 
    • +
    • {{domxref("CustomEvent")}}
    diff --git a/files/zh-cn/web/api/window/prompt/index.html b/files/zh-cn/web/api/window/prompt/index.html index cda9cf8a32aa09..f28098b16f0f51 100644 --- a/files/zh-cn/web/api/window/prompt/index.html +++ b/files/zh-cn/web/api/window/prompt/index.html @@ -15,7 +15,7 @@

    语法

      -
    • result 用来存储用户输入文字的字符串,或者是 null。
    • +
    • result 用来存储用户输入文字的字符串,或者是 null。
    • text 用来提示用户输入文字的字符串,如果没有任何提示内容,该参数可以省略不写。
    • value 文本输入框中的默认值,该参数也可以省略不写。不过在 Internet Explorer 7 和 8 中,省略该参数会导致输入框中显示默认值"undefined"。
    @@ -41,7 +41,7 @@

    注意


    prompt 和 alert 以及类似的对话框都是模态窗口,它们会阻止用户激活程序其他部分的界面,直到该对话框关闭。因此,你不应该过度使用该方法。(译注:在 content 上下文,Firefox 4 以上版本使用非模态的对话框)。
    -
    Chrome 上下文执行的脚本 (例如扩展开发) 应该使用 XPCOM nsIPromptService  来替代 window.prompt。
    +
    Chrome 上下文执行的脚本 (例如扩展开发) 应该使用 XPCOM nsIPromptService 来替代 window.prompt。

    规范

    diff --git a/files/zh-cn/web/api/window/rejectionhandled_event/index.html b/files/zh-cn/web/api/window/rejectionhandled_event/index.html index eb94dc8336a442..c78bcda8ecfc83 100644 --- a/files/zh-cn/web/api/window/rejectionhandled_event/index.html +++ b/files/zh-cn/web/api/window/rejectionhandled_event/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef("HTML DOM")}}
    -

    当 Promise 被 rejected 且有 rejection 处理器时会在全局触发rejectionhandled 事件 (通常是发生在 window 下,但是也可能发生在 Worker 中)。应用于调试一般应用回退。当 Promise 被 rejected 且没有 rejection 处理器处理时会触发unhandledrejection事件。这两个事件协同工作。

    +

    当 Promise 被 rejected 且有 rejection 处理器时会在全局触发rejectionhandled 事件 (通常是发生在 window 下,但是也可能发生在 Worker 中)。应用于调试一般应用回退。当 Promise 被 rejected 且没有 rejection 处理器处理时会触发unhandledrejection事件。这两个事件协同工作。

    target 只读target 只读 {{domxref("DOMString")}} 事件目标(DOM 树中的顶层,即 document.documentElement)。
    type 只读type 只读

    {{domxref("EventTarget")}}

    事件的类型。
    bubbles 只读bubbles 只读 {{jsxref("Boolean")}} 事件是否正常冒泡。
    cancelable 只读cancelable 只读 {{jsxref("Boolean")}} 事件是否可以取消。
    gamepad 只读gamepad 只读 {{domxref("Gamepad")}} 单个游戏手柄属性,可用于访问关联游戏手柄的数据。
    diff --git a/files/zh-cn/web/api/window/requestanimationframe/index.html b/files/zh-cn/web/api/window/requestanimationframe/index.html index d111dcff472e95..407678d08480ed 100644 --- a/files/zh-cn/web/api/window/requestanimationframe/index.html +++ b/files/zh-cn/web/api/window/requestanimationframe/index.html @@ -13,13 +13,13 @@ ---
    {{APIRef}}
    -

    window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画,并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数,该回调函数会在浏览器下一次重绘之前执行

    +

    window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画,并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数,该回调函数会在浏览器下一次重绘之前执行

    注意:若你想在浏览器下次重绘之前继续更新下一帧动画,那么回调函数自身必须再次调用window.requestAnimationFrame()
    -

    当你准备更新动画时你应该调用此方法。这将使浏览器在下一次重绘之前调用你传入给该方法的动画函数 (即你的回调函数)。回调函数执行次数通常是每秒 60 次,但在大多数遵循 W3C 建议的浏览器中,回调函数执行次数通常与浏览器屏幕刷新次数相匹配。为了提高性能和电池寿命,因此在大多数浏览器里,当requestAnimationFrame() 运行在后台标签页或者隐藏的{{ HTMLElement("iframe") }} 里时,requestAnimationFrame() 会被暂停调用以提升性能和电池寿命。

    +

    当你准备更新动画时你应该调用此方法。这将使浏览器在下一次重绘之前调用你传入给该方法的动画函数 (即你的回调函数)。回调函数执行次数通常是每秒 60 次,但在大多数遵循 W3C 建议的浏览器中,回调函数执行次数通常与浏览器屏幕刷新次数相匹配。为了提高性能和电池寿命,因此在大多数浏览器里,当requestAnimationFrame() 运行在后台标签页或者隐藏的{{ HTMLElement("iframe") }} 里时,requestAnimationFrame() 会被暂停调用以提升性能和电池寿命。

    -

    回调函数会被传入{{domxref("DOMHighResTimeStamp")}}参数,{{domxref("DOMHighResTimeStamp")}}指示当前被 requestAnimationFrame() 排序的回调函数被触发的时间。在同一个帧中的多个回调函数,它们每一个都会接受到一个相同的时间戳,即使在计算上一个回调函数的工作负载期间已经消耗了一些时间。该时间戳是一个十进制数,单位毫秒,最小精度为 1ms(1000μs)。

    +

    回调函数会被传入{{domxref("DOMHighResTimeStamp")}}参数,{{domxref("DOMHighResTimeStamp")}}指示当前被 requestAnimationFrame() 排序的回调函数被触发的时间。在同一个帧中的多个回调函数,它们每一个都会接受到一个相同的时间戳,即使在计算上一个回调函数的工作负载期间已经消耗了一些时间。该时间戳是一个十进制数,单位毫秒,最小精度为 1ms(1000μs)。

    请确保总是使用第一个参数 (或其它获得当前时间的方法) 计算每次调用之间的时间间隔,否则动画在高刷新率的屏幕中会运行得更快。请参考下面例子的做法。

    @@ -34,12 +34,12 @@

    参数

    callback
    -
    下一次重绘之前更新动画帧所调用的函数 (即上面所说的回调函数)。该回调函数会被传入{{domxref("DOMHighResTimeStamp")}}参数,该参数与{{domxref('performance.now()')}}的返回值相同,它表示requestAnimationFrame() 开始去执行回调函数的时刻。
    +
    下一次重绘之前更新动画帧所调用的函数 (即上面所说的回调函数)。该回调函数会被传入{{domxref("DOMHighResTimeStamp")}}参数,该参数与{{domxref('performance.now()')}}的返回值相同,它表示requestAnimationFrame() 开始去执行回调函数的时刻。

    返回值

    -

    一个 long 整数,请求 ID ,是回调列表中唯一的标识。是个非零值,没别的意义。你可以传这个值给 {{domxref("window.cancelAnimationFrame()")}} 以取消回调函数。

    +

    一个 long 整数,请求 ID ,是回调列表中唯一的标识。是个非零值,没别的意义。你可以传这个值给 {{domxref("window.cancelAnimationFrame()")}} 以取消回调函数。

    范例

    diff --git a/files/zh-cn/web/api/window/requestfilesystem/index.html b/files/zh-cn/web/api/window/requestfilesystem/index.html index ffa87421c8a4a5..af0a09fdbcbbc9 100644 --- a/files/zh-cn/web/api/window/requestfilesystem/index.html +++ b/files/zh-cn/web/api/window/requestfilesystem/index.html @@ -5,16 +5,16 @@ ---

    {{APIRef("File System API")}}

    -

    这个非标准 {{domxref("Window")}} requestFileSystem() 方法是谷歌浏览器内核用来让 web 站点或 app 获得通过沙箱访问文件系统 . 它返回 {{domxref("FileSystem")}} 然后就可以和 file system APIs 一起使用了

    +

    这个非标准 {{domxref("Window")}} requestFileSystem() 方法是谷歌浏览器内核用来让 web 站点或 app 获得通过沙箱访问文件系统 . 它返回 {{domxref("FileSystem")}} 然后就可以和 file system APIs 一起使用了

    -

    甚至相比较如 File 和 Directory Entries API, requestFileSystem() 更不规范; 只有 Chrome 支持它, 所有其它浏览器已经决定不支持它了. 它甚至已经从规范建议单中移除了. 因此不要使用这个方法

    +

    甚至相比较如 File 和 Directory Entries API, requestFileSystem() 更不规范; 只有 Chrome 支持它, 所有其它浏览器已经决定不支持它了. 它甚至已经从规范建议单中移除了. 因此不要使用这个方法

    语法

    -

    在所有支持它的浏览器中这个方法都有 webkit 前缀 (实际上也仅有谷歌浏览器支持).

    +

    在所有支持它的浏览器中这个方法都有 webkit 前缀 (实际上也仅有谷歌浏览器支持).

    window.requestFileSystem(type, size, successCallback[, errorCallback]);
    @@ -23,12 +23,12 @@

    参数

    type
    -
    要请求的存储类型. 指定Window.TEMPORARY 浏览器自行决定要不要删除文件, 例如低内存, 或者Window.PERSISTENT 如果你需要文件保持在这个地方必须用户或站点或 app 明确许可。持久存储要求用户授予站点配额
    +
    要请求的存储类型. 指定Window.TEMPORARY 浏览器自行决定要不要删除文件, 例如低内存, 或者Window.PERSISTENT 如果你需要文件保持在这个地方必须用户或站点或 app 明确许可。持久存储要求用户授予站点配额
    size
    你希望你的 app 被允许的使用空间大小。
    successCallback
    -

    成功获取文件系统时调用的函数。回调接收单个参数: 一个 {{domxref("FileSystem")}} 表示应用程序有权使用的文件系统的对象。

    +

    成功获取文件系统时调用的函数。回调接收单个参数: 一个 {{domxref("FileSystem")}} 表示应用程序有权使用的文件系统的对象。

    errorCallback {{optional_inline}}
    一个可选参数,指定在试图获取文件系统时发生错误或用户拒绝创建或访问文件系统的权限时调用的函数。回调接收单个参数作为输入:一个{{domxref("FileError")}}用来描述错误的对象
    diff --git a/files/zh-cn/web/api/window/requestidlecallback/index.html b/files/zh-cn/web/api/window/requestidlecallback/index.html index ac772dafa19290..1bf1c750953ca4 100644 --- a/files/zh-cn/web/api/window/requestidlecallback/index.html +++ b/files/zh-cn/web/api/window/requestidlecallback/index.html @@ -25,14 +25,14 @@

    语法

    返回值

    -

    一个 ID,可以把它传入 {{domxref("Window.cancelIdleCallback()")}} 方法来结束回调。

    +

    一个 ID,可以把它传入 {{domxref("Window.cancelIdleCallback()")}} 方法来结束回调。

    参数

    callback
    一个在事件循环空闲时即将被调用的函数的引用。函数会接收到一个名为 {{domxref("IdleDeadline")}} 的参数,这个参数可以获取当前空闲时间以及回调是否在超时时间前已经执行的状态。
    -
    options {{optional_inline}}
    +
    options {{optional_inline}}
    包括可选的配置参数。具有如下属性:
    • timeout: 如果指定了 timeout,并且有一个正值,而回调在 timeout 毫秒过后还没有被调用,那么回调任务将放入事件循环中排队,即使这样做有可能对性能产生负面影响。
    • @@ -42,7 +42,7 @@

      参数

      Example

      -

      See our complete example in the article Cooperative Scheduling of Background Tasks API.

      +

      See our complete example in the article Cooperative Scheduling of Background Tasks API.

      规范

      diff --git a/files/zh-cn/web/api/window/resizeby/index.html b/files/zh-cn/web/api/window/resizeby/index.html index 7696a2338fc6ea..c788622a6ce431 100644 --- a/files/zh-cn/web/api/window/resizeby/index.html +++ b/files/zh-cn/web/api/window/resizeby/index.html @@ -17,8 +17,8 @@

      语法

      参数

        -
      • xDelta 为窗口水平方向变化的像素值。
      • -
      • yDelta 为窗口垂直方向变化的像素值。
      • +
      • xDelta 为窗口水平方向变化的像素值。
      • +
      • yDelta 为窗口垂直方向变化的像素值。

      例子

      diff --git a/files/zh-cn/web/api/window/resizeto/index.html b/files/zh-cn/web/api/window/resizeto/index.html index 56cfe84478b8a9..c0b3f133c157ca 100644 --- a/files/zh-cn/web/api/window/resizeto/index.html +++ b/files/zh-cn/web/api/window/resizeto/index.html @@ -12,8 +12,8 @@

      语法

      参数

        -
      • aWidth 是一个整数,表示新的 {{domxref("window.outerWidth","outerWidth")}}(单位:像素)(包括滚动条、窗口边框等)。
      • -
      • aHeight 是一个整数,表示新的 {{domxref("window.outerHeight","outerHeight")}}(单位:像素)(包括滚动条、标题栏、窗口边框等)。
      • +
      • aWidth 是一个整数,表示新的 {{domxref("window.outerWidth","outerWidth")}}(单位:像素)(包括滚动条、窗口边框等)。
      • +
      • aHeight 是一个整数,表示新的 {{domxref("window.outerHeight","outerHeight")}}(单位:像素)(包括滚动条、标题栏、窗口边框等)。

      示例

      // 将窗口设置为整个屏幕的 1/4 大小(面积)
      diff --git a/files/zh-cn/web/api/window/screen/index.html b/files/zh-cn/web/api/window/screen/index.html
      index ec99a93e19f2ab..03866ac1b33eca 100644
      --- a/files/zh-cn/web/api/window/screen/index.html
      +++ b/files/zh-cn/web/api/window/screen/index.html
      @@ -14,11 +14,11 @@ 

      语法

      screenObj = window.screen;
       
      -

       

      +

      示例

      -

       

      +

      if (screen.pixelDepth < 8) {
         // use low-color version of page
      diff --git a/files/zh-cn/web/api/window/screenleft/index.html b/files/zh-cn/web/api/window/screenleft/index.html
      index dcdc29de1d29ef..8f4104eac4f633 100644
      --- a/files/zh-cn/web/api/window/screenleft/index.html
      +++ b/files/zh-cn/web/api/window/screenleft/index.html
      @@ -5,10 +5,10 @@
       ---
       
      {{APIRef}}
      -

      Window.screenLeft 是一个只读属性,它返回浏览器左边框到左边屏幕边缘的 CSS 像素数。

      +

      Window.screenLeft 是一个只读属性,它返回浏览器左边框到左边屏幕边缘的 CSS 像素数。

      -

      注意screenLeft 只是 {{domxref("Window.screenX")}}  属性的别名,最初只被 IE 浏览器所支持。现在主流的浏览器都已支持该属性。

      +

      注意screenLeft 只是 {{domxref("Window.screenX")}} 属性的别名,最初只被 IE 浏览器所支持。现在主流的浏览器都已支持该属性。

      语法

      @@ -22,7 +22,7 @@

      返回值

      例子

      -

      在 screenleft-screentop 项目中,展示了一个监听浏览器窗口位置变化,动态更新 canvas 的例子。在这个例子中,当你移动浏览器窗口位置,绘制在 canvas 上的圆也会对应移动。我们通过监听 screenLeft/screenTop 的变化,并使用 {{domxref("Window.requestAnimationFrame()")}} 来对 canvas 实时重绘,保证了浏览器窗口移动时,canvas 内部圆的位置也会发生对应的移动。

      +

      screenleft-screentop 项目中,展示了一个监听浏览器窗口位置变化,动态更新 canvas 的例子。在这个例子中,当你移动浏览器窗口位置,绘制在 canvas 上的圆也会对应移动。我们通过监听 screenLeft/screenTop 的变化,并使用 {{domxref("Window.requestAnimationFrame()")}} 来对 canvas 实时重绘,保证了浏览器窗口移动时,canvas 内部圆的位置也会发生对应的移动。

      initialLeft = window.screenLeft + canvasElem.offsetLeft;
       initialTop = window.screenTop + canvasElem.offsetTop;
      @@ -48,7 +48,7 @@ 

      例子

      window.requestAnimationFrame(positionElem);
      -

      如果浏览器不支持 screenLeft属性,我们还在代码中使用了一个 polyfill 来保证演示效果。通过设置 {{domxref("Window.screenX")}}/{{domxref("Window.screenY")}} 为对应别名来实现一样的功能。

      +

      如果浏览器不支持 screenLeft属性,我们还在代码中使用了一个 polyfill 来保证演示效果。通过设置 {{domxref("Window.screenX")}}/{{domxref("Window.screenY")}} 为对应别名来实现一样的功能。

      if(!window.screenLeft) {
         window.screenLeft = window.screenX;
      diff --git a/files/zh-cn/web/api/window/screentop/index.html b/files/zh-cn/web/api/window/screentop/index.html
      index b9722eb77656ee..e11bf2131e5bf5 100644
      --- a/files/zh-cn/web/api/window/screentop/index.html
      +++ b/files/zh-cn/web/api/window/screentop/index.html
      @@ -18,7 +18,7 @@ 

      语法

      返回值

      -

      A number equal to the number of CSS pixels from the top edge of the browser viewport to the  top edge of the screen.

      +

      A number equal to the number of CSS pixels from the top edge of the browser viewport to the top edge of the screen.

      例子

      diff --git a/files/zh-cn/web/api/window/scrollbars/index.html b/files/zh-cn/web/api/window/scrollbars/index.html index 971ec252c19928..30e4742d556739 100644 --- a/files/zh-cn/web/api/window/scrollbars/index.html +++ b/files/zh-cn/web/api/window/scrollbars/index.html @@ -16,7 +16,7 @@

      语法

      示例

      -

      下面的 HTML 示例展示了如何使用 window.scrollbars 对象的 visible 属性。

      +

      下面的 HTML 示例展示了如何使用 window.scrollbars 对象的 visible 属性。

      <!doctype html>
       <html>
      diff --git a/files/zh-cn/web/api/window/scrollby/index.html b/files/zh-cn/web/api/window/scrollby/index.html
      index 59c3031666822e..c7b90ba39620f1 100644
      --- a/files/zh-cn/web/api/window/scrollby/index.html
      +++ b/files/zh-cn/web/api/window/scrollby/index.html
      @@ -27,13 +27,13 @@ 

      参数

      正数坐标会朝页面的右下方滚动,负数坐标会滚向页面的左上方。

        -
      • options 是一个包含三个属性的对象:
      • +
      • options 是一个包含三个属性的对象:
        -
      1. top 等同于  y-coord
      2. -
      3. left 等同于  x-coord
      4. -
      5. behavior  表示滚动行为,支持参数:smooth (平滑滚动),instant (瞬间滚动),默认值 auto,效果等同于 instant
      6. +
      7. top 等同于 y-coord
      8. +
      9. left 等同于 x-coord
      10. +
      11. behavior 表示滚动行为,支持参数:smooth (平滑滚动),instant (瞬间滚动),默认值 auto,效果等同于 instant

      例子

      @@ -55,14 +55,14 @@

      例子

      window.scrollBy({
         top: 100,
      -  left: 100,
      +  left: 100,
         behavior: "smooth"
       });
       

      注意

      -

      window.scrollBy 滚动指定的距离,而 window.scroll 滚动至文档中的绝对位置。另外还有 window.scrollByLines, window.scrollByPages

      +

      window.scrollBy 滚动指定的距离,而 window.scroll 滚动至文档中的绝对位置。另外还有 window.scrollByLines, window.scrollByPages

      规范

      diff --git a/files/zh-cn/web/api/window/scrollbylines/index.html b/files/zh-cn/web/api/window/scrollbylines/index.html index 68499de4f88ca9..125f9a7460628a 100644 --- a/files/zh-cn/web/api/window/scrollbylines/index.html +++ b/files/zh-cn/web/api/window/scrollbylines/index.html @@ -11,7 +11,7 @@ - 非标准 translation_of: Web/API/Window/scrollByLines --- -

       

      +

      {{ ApiRef() }}
      diff --git a/files/zh-cn/web/api/window/scrollmaxx/index.html b/files/zh-cn/web/api/window/scrollmaxx/index.html index 7c7420cd454d1c..ef8caebdab2f52 100644 --- a/files/zh-cn/web/api/window/scrollmaxx/index.html +++ b/files/zh-cn/web/api/window/scrollmaxx/index.html @@ -11,7 +11,7 @@ ---
      {{APIRef}} {{Non-standard_header}}
      -

      Window.scrollMaxX 只读属性,返回有关文档可水平滚动的最大像素数。

      +

      Window.scrollMaxX 只读属性,返回有关文档可水平滚动的最大像素数。

      语法

      @@ -19,7 +19,7 @@

      语法

        -
      • xMax 是像素数。
      • +
      • xMax 是像素数。

      示例

      diff --git a/files/zh-cn/web/api/window/scrollmaxy/index.html b/files/zh-cn/web/api/window/scrollmaxy/index.html index bcbe10085147f0..81adb1f8fbed23 100644 --- a/files/zh-cn/web/api/window/scrollmaxy/index.html +++ b/files/zh-cn/web/api/window/scrollmaxy/index.html @@ -33,7 +33,7 @@

      例子

      备注

      -

      不要用 {{domxref("window.innerHeight")}} + window.scrollMaxY 来计算 document 的总高度,因为 {{domxref("window.innerHeight")}} 也包括了可见的水平滚动条的高度。正确的做法是使用 {{domxref("element.scrollHeight","document.body.scrollHeight")}} 。

      +

      不要用 {{domxref("window.innerHeight")}} + window.scrollMaxY 来计算 document 的总高度,因为 {{domxref("window.innerHeight")}} 也包括了可见的水平滚动条的高度。正确的做法是使用 {{domxref("element.scrollHeight","document.body.scrollHeight")}} 。

      参见{{domxref("window.scrollMaxX")}} 和 {{domxref("window.scrollTo")}} 。

      diff --git a/files/zh-cn/web/api/window/scrollto/index.html b/files/zh-cn/web/api/window/scrollto/index.html index 5a3bcc6676891e..788b33d814ccaf 100644 --- a/files/zh-cn/web/api/window/scrollto/index.html +++ b/files/zh-cn/web/api/window/scrollto/index.html @@ -18,15 +18,15 @@

      语法

      参数

        -
      • x-coord 是文档中的横轴坐标。
      • -
      • y-coord 是文档中的纵轴坐标。
      • -
      • options 是一个包含三个属性的对象:
      • +
      • x-coord 是文档中的横轴坐标。
      • +
      • y-coord 是文档中的纵轴坐标。
      • +
      • options 是一个包含三个属性的对象:
        -
      1. top 等同于  y-coord
      2. -
      3. left 等同于  x-coord
      4. -
      5. behavior  类型 String,表示滚动行为,支持参数 smooth(平滑滚动),instant(瞬间滚动),默认值 auto
      6. +
      7. top 等同于 y-coord
      8. +
      9. left 等同于 x-coord
      10. +
      11. behavior 类型 String,表示滚动行为,支持参数 smooth(平滑滚动),instant(瞬间滚动),默认值 auto
      @@ -38,14 +38,14 @@

      例子

      // 设置滚动行为改为平滑的滚动 window.scrollTo({ -  top: 1000, -  behavior: "smooth" + top: 1000, + behavior: "smooth" });

      注意

      -

      该函数实际上和 window.scroll是一样的。 相对滚动可以参考 window.scrollBywindow.scrollByLines,和 window.scrollByPages

      +

      该函数实际上和 window.scroll是一样的。 相对滚动可以参考 window.scrollBywindow.scrollByLines,和 window.scrollByPages

      规范

      diff --git a/files/zh-cn/web/api/window/scrollx/index.html b/files/zh-cn/web/api/window/scrollx/index.html index 405e7f692cbf8b..cc8c9e10c8fe49 100644 --- a/files/zh-cn/web/api/window/scrollx/index.html +++ b/files/zh-cn/web/api/window/scrollx/index.html @@ -11,7 +11,7 @@

      语法

      var x = window.scrollX;

      参数

        -
      • x 为该文档从左侧开始滚动的像素值。
      • +
      • x 为该文档从左侧开始滚动的像素值。

      示例

      // 如果 scrollX 大于 400,则把文档重新滚动到左上角。
      @@ -19,9 +19,9 @@ 

      示例

      window.scroll(0,0); }

      备注

      -

      pageXOffset 属性是 scrollX 属性的别名:

      +

      pageXOffset 属性是 scrollX 属性的别名:

      window.pageXOffset == window.scrollX; // 总是 true
      -

      为了跨浏览器兼容性,请使用 window.pageXOffset 代替 window.scrollX。另外,旧版本的 IE(<9)两个属性都不支持,必须通过其他的非标准属性来解决此问题。完整的兼容性代码如下:

      +

      为了跨浏览器兼容性,请使用 window.pageXOffset 代替 window.scrollX。另外,旧版本的 IE(<9)两个属性都不支持,必须通过其他的非标准属性来解决此问题。完整的兼容性代码如下:

      var x = (window.pageXOffset !== undefined) ? window.pageXOffset : (document.documentElement || document.body.parentNode || document.body).scrollLeft;
       var y = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;

      规范

      diff --git a/files/zh-cn/web/api/window/scrolly/index.html b/files/zh-cn/web/api/window/scrolly/index.html index 7f79e8be2a8a18..410f7b27214f35 100644 --- a/files/zh-cn/web/api/window/scrolly/index.html +++ b/files/zh-cn/web/api/window/scrolly/index.html @@ -19,7 +19,7 @@

      语法

      var y = window.scrollY;
        -
      • y 是文档从顶部开始滚动过的像素值。
      • +
      • y 是文档从顶部开始滚动过的像素值。

      示例

      @@ -35,11 +35,11 @@

      备注

      如果正在使用相对滚动函数,如 {{domxref("window.scrollBy")}}、{{domxref("window.scrollByLines")}} 或 {{domxref("window.scrollByPages")}},则需要使用该属性来检测文档是否已被滚动了某段距离。

      -

      pageYOffset 属性是 scrollY 属性的别名:

      +

      pageYOffset 属性是 scrollY 属性的别名:

      window.pageYOffset == window.scrollY; // 总是返回 true
      -

      为了跨浏览器兼容,请使用 window.pageYOffset 代替 window.scrollY。另外,旧版本 IE(<9)两个属性都不支持,必须使用其他的非标准属性。完整的兼容性代码如下:

      +

      为了跨浏览器兼容,请使用 window.pageYOffset 代替 window.scrollY。另外,旧版本 IE(<9)两个属性都不支持,必须使用其他的非标准属性。完整的兼容性代码如下:

      var supportPageOffset = window.pageXOffset !== undefined;
       var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");
      diff --git a/files/zh-cn/web/api/window/self/index.html b/files/zh-cn/web/api/window/self/index.html
      index 8880cb89299ba9..55240ae343303c 100644
      --- a/files/zh-cn/web/api/window/self/index.html
      +++ b/files/zh-cn/web/api/window/self/index.html
      @@ -10,7 +10,7 @@ 

      语法

      objRef = window.self
       

      示例

      -
       if (window.parent.frames[0] != window.self) {
      +
       if (window.parent.frames[0] != window.self) {
           // 当前对象不是 frames 列表中的第一个时
        }
       
      @@ -19,4 +19,4 @@

      备注

      规范

      HTML5

      -  
      +
    diff --git a/files/zh-cn/web/api/window/sessionstorage/index.html b/files/zh-cn/web/api/window/sessionstorage/index.html index 7c7379c0c2e863..0c3b5ae39a82ce 100644 --- a/files/zh-cn/web/api/window/sessionstorage/index.html +++ b/files/zh-cn/web/api/window/sessionstorage/index.html @@ -12,20 +12,20 @@ ---

    {{APIRef()}}

    -

    sessionStorage 属性允许你访问一个,对应当前源的 session {{domxref("Storage")}} 对象。它与 {{domxref("Window.localStorage", "localStorage")}} 相似,不同之处在于 localStorage 里面存储的数据没有过期时间设置,而存储在 sessionStorage 里面的数据在页面会话结束时会被清除。

    +

    sessionStorage 属性允许你访问一个,对应当前源的 session {{domxref("Storage")}} 对象。它与 {{domxref("Window.localStorage", "localStorage")}} 相似,不同之处在于 localStorage 里面存储的数据没有过期时间设置,而存储在 sessionStorage 里面的数据在页面会话结束时会被清除。

    • 页面会话在浏览器打开期间一直保持,并且重新加载或恢复页面仍会保持原来的页面会话。
    • 在新标签或窗口打开一个页面时会复制顶级浏览会话的上下文作为新会话的上下文,这点和 session cookies 的运行方式不同。
    • 打开多个相同的 URL 的 Tabs 页面,会创建各自的 sessionStorage
    • -
    • 关闭对应浏览器标签或窗口,会清除对应的 sessionStorage。 
    • +
    • 关闭对应浏览器标签或窗口,会清除对应的 sessionStorage

    应该注意,存储在 sessionStorage 或 localStorage 中的数据特定于页面的协议。也就
    是说 http://example.comhttps://example.com 的 sessionStorage 相互隔离。

    -

    被存储的键值对总是以 UTF-16 DOMString 的格式所存储,其使用两个字节来表示一个字符。对于对象、整数 key 值会自动转换成字符串形式。

    +

    被存储的键值对总是以 UTF-16 DOMString 的格式所存储,其使用两个字节来表示一个字符。对于对象、整数 key 值会自动转换成字符串形式。

    语法

    @@ -50,7 +50,7 @@

    返回值

    示例

    -

    下面的代码访问当前域名的 session {{domxref("Storage")}} 对象,并使用 {{domxref("Storage.setItem()")}} 访问往里面添加一个数据条目。

    +

    下面的代码访问当前域名的 session {{domxref("Storage")}} 对象,并使用 {{domxref("Storage.setItem()")}} 访问往里面添加一个数据条目。

    sessionStorage.setItem('myCat', 'Tom');
    @@ -84,7 +84,7 @@

    规范

    浏览器兼容性

    {{Compat("api.Window.sessionStorage")}}
    - 各浏览器支持的 localStorage 和 sessionStorage 容量上限不同。测试页面 detailed rundown of all the storage capacities for various browsers

    + 各浏览器支持的 localStorage 和 sessionStorage 容量上限不同。测试页面 detailed rundown of all the storage capacities for various browsers

    Note: 从 iOS 5.1 之后,移动端的 Safari 将 localStorage 数据存储在 cache 文件中,在操作系统的要求下,会偶尔进行清除,特别是空间不足时。

    diff --git a/files/zh-cn/web/api/window/setcursor/index.html b/files/zh-cn/web/api/window/setcursor/index.html index d53a24fa6ced43..71c1cadd5bee0d 100644 --- a/files/zh-cn/web/api/window/setcursor/index.html +++ b/files/zh-cn/web/api/window/setcursor/index.html @@ -9,7 +9,7 @@

    {{Non-standard_header}}

    -
     
    +

    概要

    @@ -23,9 +23,9 @@

    例子

    提示

    -

    鼠标样式不会自动重置,需要主动设置回 auto 属性。

    +

    鼠标样式不会自动重置,需要主动设置回 auto 属性。

    -

    这个函数方法是 ChromeWindow interface 的一部分。这个方法在某些网页上不能用,可以使用 CSS {{cssxref("cursor")}} 代替。

    +

    这个函数方法是 ChromeWindow interface 的一部分。这个方法在某些网页上不能用,可以使用 CSS {{cssxref("cursor")}} 代替。

    规范

    diff --git a/files/zh-cn/web/api/window/setimmediate/index.html b/files/zh-cn/web/api/window/setimmediate/index.html index 57b10fae4deb6f..9f61b339396004 100644 --- a/files/zh-cn/web/api/window/setimmediate/index.html +++ b/files/zh-cn/web/api/window/setimmediate/index.html @@ -10,7 +10,7 @@

    该方法用来把一些需要长时间运行的操作放在一个回调函数里,在浏览器完成后面的其他语句后,就立刻执行这个回调函数。

    -
    注意: 该方法可能不会被批准成为标准,目前只有最新版本的 Internet Explorer 和 Node.js 0.10+ 实现了该方法。它遇到了 Gecko(Firefox) 和Webkit (Google/Apple) 的阻力。
    +
    注意: 该方法可能不会被批准成为标准,目前只有最新版本的 Internet Explorer 和 Node.js 0.10+ 实现了该方法。它遇到了 Gecko(Firefox) 和Webkit (Google/Apple) 的阻力。

    语法

    @@ -29,17 +29,17 @@

    备注

    {{ domxref("window.clearImmediate") }} 方法可以用来取消通过 setImmediate 设置的将要执行的语句,就像 {{ domxref("window.clearTimeout") }} 对应于 {{ domxref("window.setTimeout") }}一样。

    -

    该方法可以用来替代 setTimeout(fn, 0) 去执行繁重的操作(heavy operations

    +

    该方法可以用来替代 setTimeout(fn, 0) 去执行繁重的操作(heavy operations)

    可以通过以下几种方式来模仿该功能:

      -
    • {{ domxref("window.postMessage") }} 可以被用来触发一个 immediate 但会产生回调。请注意, Internet Explorer 8 包含 postMessage 的同步版本,这意味着它不能被用来作为代替品。
    • -
    • MessageChannel 可以在 Web Workers 内部很好的被使用,而 postMessage 的语义意味着它不能在那使用。
    • -
    • setTimeout(fn, 0)可以使用, 然而按照HTML 规范, 嵌套深度超过 5 级的定时器,会被限制在 4ms , 他没有为 setImmediate 的天然及时性提供合适的 polyfill.
    • +
    • {{ domxref("window.postMessage") }} 可以被用来触发一个 immediate 但会产生回调。请注意, Internet Explorer 8 包含 postMessage 的同步版本,这意味着它不能被用来作为代替品。
    • +
    • MessageChannel 可以在 Web Workers 内部很好的被使用,而 postMessage 的语义意味着它不能在那使用。
    • +
    • setTimeout(fn, 0)可以使用, 然而按照HTML 规范, 嵌套深度超过 5 级的定时器,会被限制在 4ms , 他没有为 setImmediate 的天然及时性提供合适的 polyfill.
    -

    所有这些技术都被纳入 robust setImmediate polyfill 中。

    +

    所有这些技术都被纳入 robust setImmediate polyfill 中。

    浏览器兼容性

    diff --git a/files/zh-cn/web/api/window/showmodaldialog/index.html b/files/zh-cn/web/api/window/showmodaldialog/index.html index 0fbfc6407445db..fda85be56a6a8d 100644 --- a/files/zh-cn/web/api/window/showmodaldialog/index.html +++ b/files/zh-cn/web/api/window/showmodaldialog/index.html @@ -5,7 +5,7 @@ ---
    {{ deprecated_header() }}{{APIRef}}
    -

     Window.showModalDialog() 用于创建和展示一个指向特定网页的模态对话框。

    +

    Window.showModalDialog() 用于创建和展示一个指向特定网页的模态对话框。

    语法

    @@ -15,10 +15,10 @@

    语法

    其中

      -
    • returnVal 集合类型 (Set) 返回值。由uri指定的页面返回。
    • -
    • uri 要在模态对话框中打开的页面 URI。
    • -
    • arguments 可选变量。可以通过该参数将需要的值传入对话框; 参数可以通过 window 对象的window.dialogArguments 属性获取。
    • -
    • options 可选字符串参数。用于设置对话框打开的样式,使用一个或多个逗号分隔。
    • +
    • returnVal 集合类型 (Set) 返回值。由uri指定的页面返回。
    • +
    • uri 要在模态对话框中打开的页面 URI。
    • +
    • arguments 可选变量。可以通过该参数将需要的值传入对话框; 参数可以通过 window 对象的window.dialogArguments 属性获取。
    • +
    • options 可选字符串参数。用于设置对话框打开的样式,使用一个或多个逗号分隔。
    diff --git a/files/zh-cn/web/api/window/sizetocontent/index.html b/files/zh-cn/web/api/window/sizetocontent/index.html index 5e15beab983a1d..adf3de36d9401a 100644 --- a/files/zh-cn/web/api/window/sizetocontent/index.html +++ b/files/zh-cn/web/api/window/sizetocontent/index.html @@ -14,12 +14,12 @@

    语法

    window.sizeToContent()
     
    -

     例子

    +

    例子

    window.sizeToContent();
     
    -

     规范说明

    +

    规范说明

    此功能不是任何规范的一部分

    diff --git a/files/zh-cn/web/api/window/stop/index.html b/files/zh-cn/web/api/window/stop/index.html index fa793d870f491a..f0aa8b10c2ffa1 100644 --- a/files/zh-cn/web/api/window/stop/index.html +++ b/files/zh-cn/web/api/window/stop/index.html @@ -9,7 +9,7 @@ - 方法 translation_of: Web/API/Window/stop --- -
     {{APIRef}}
    +
    {{APIRef}}

    window.stop() 方法的效果相当于点击了浏览器的停止按钮。由于脚本的加载顺序,该方法不能阻止已经包含在加载中的文档,但是它能够阻止图片、新窗口、和一些会延迟加载的对象的加载。

    diff --git a/files/zh-cn/web/api/window/storage_event/index.html b/files/zh-cn/web/api/window/storage_event/index.html index 695fc60c066175..658fe864445fa5 100644 --- a/files/zh-cn/web/api/window/storage_event/index.html +++ b/files/zh-cn/web/api/window/storage_event/index.html @@ -6,7 +6,7 @@ - 事件 translation_of: Web/API/Window/storage_event --- -

    当存储区域(localStorage 或 sessionStorage)被修改时,将触发 storage 事件。查看 Web Storage API 来获取更多信息。

    +

    当存储区域(localStorage 或 sessionStorage)被修改时,将触发 storage 事件。查看 Web Storage API 来获取更多信息。

    常规信息

    diff --git a/files/zh-cn/web/api/window/top/index.html b/files/zh-cn/web/api/window/top/index.html index f3d4eaaff694de..9d3493dd517e13 100644 --- a/files/zh-cn/web/api/window/top/index.html +++ b/files/zh-cn/web/api/window/top/index.html @@ -20,9 +20,9 @@

    语法

    备注

    -

     window.parent 返回当前窗口的直接父对象,而 {{domxref("window.top")}} 返回最顶层的窗口对象。

    +

    window.parent 返回当前窗口的直接父对象,而 {{domxref("window.top")}} 返回最顶层的窗口对象。

    -

     

    +

    当你在处理父窗口的子框架(subframe),而你想获取顶层框架时,这个属性相当有用。

    @@ -40,7 +40,7 @@

    规范

    - + diff --git a/files/zh-cn/web/api/window/unload_event/index.html b/files/zh-cn/web/api/window/unload_event/index.html index 3d1b4dffc984e9..f2bea7f07c7d0c 100644 --- a/files/zh-cn/web/api/window/unload_event/index.html +++ b/files/zh-cn/web/api/window/unload_event/index.html @@ -45,7 +45,7 @@
    • 所有资源仍存在 (图片,iframe 等.)
    • 对于终端用户所有资源均不可见
    • -
    • 界面交互无效 (window.open, alert, confirm 等.)
    • +
    • 界面交互无效 (window.open, alert, confirm 等.)
    • 错误不会停止卸载文档的过程
    @@ -71,27 +71,27 @@

    示例

    </body> </html> -

    下面是 child-frame.html 的内容:

    +

    下面是 child-frame.html 的内容:

    <!DOCTYPE html>
     <html>
       <head>
         <title>Child Frame</title>
    -    <script>
    -      window.addEventListener('beforeunload', function(event) {
    -        console.log('I am the 2nd one.');
    -      });
    +    <script>
    +      window.addEventListener('beforeunload', function(event) {
    +        console.log('I am the 2nd one.');
    +      });
           window.addEventListener('unload', function(event) {
             console.log('I am the 4th and last one…');
           });
         </script>
       </head>
       <body>
    -      ☻
    +      ☻
       </body>
     </html>
    -

    当父 iframe 被卸载,事件将按console.log() 消息描述的顺序触发。

    +

    当父 iframe 被卸载,事件将按console.log() 消息描述的顺序触发。

    规范

    @@ -121,6 +121,6 @@

    浏览器兼容性

    参见

      -
    • 相关事件: {{domxref("Window/DOMContentLoaded_event", "DOMContentLoaded")}}, {{domxref("Document/readystatechange_event", "readystatechange")}}, {{domxref("Window/load_event", "load")}}
    • +
    • 相关事件: {{domxref("Window/DOMContentLoaded_event", "DOMContentLoaded")}}, {{domxref("Document/readystatechange_event", "readystatechange")}}, {{domxref("Window/load_event", "load")}}
    • Unloading Documents — unload a document
    diff --git a/files/zh-cn/web/api/window/updatecommands/index.html b/files/zh-cn/web/api/window/updatecommands/index.html index 03a519256a94f0..dd3b5261c379d3 100644 --- a/files/zh-cn/web/api/window/updatecommands/index.html +++ b/files/zh-cn/web/api/window/updatecommands/index.html @@ -16,7 +16,7 @@

    语法

    window.updateCommands("sCommandName")
     
    -

     参数

    +

    参数

    • sCommandName 是一个特定的字符串,它描述了这种更新事件的类型 (我们用到了背景色注明).
    • diff --git a/files/zh-cn/web/api/window/visualviewport/index.html b/files/zh-cn/web/api/window/visualviewport/index.html index 2144cdf7bbd5f8..a875b3c8b84862 100644 --- a/files/zh-cn/web/api/window/visualviewport/index.html +++ b/files/zh-cn/web/api/window/visualviewport/index.html @@ -5,9 +5,9 @@ ---

      {{SeeCompatTable}}{{APIRef("Visual Viewport")}}

      -

       

      +

      -

      {{domxref("Window")}} 接口的 visualViewport 只读属性返回一个{{domxref("VisualViewport")}}对象,该对象表示给定窗口的可视视口。

      +

      {{domxref("Window")}} 接口的 visualViewport 只读属性返回一个{{domxref("VisualViewport")}}对象,该对象表示给定窗口的可视视口。

      语法

      diff --git a/files/zh-cn/web/api/window/window/index.html b/files/zh-cn/web/api/window/window/index.html index 343b8506df61b2..d35ff2a21b33d3 100644 --- a/files/zh-cn/web/api/window/window/index.html +++ b/files/zh-cn/web/api/window/window/index.html @@ -7,7 +7,7 @@

      摘要

      -

      window 对象的 window 属性指向这个 window 对象本身。因此以下表达式所返回的 window 对象都是同一个。

      +

      window 对象的 window 属性指向这个 window 对象本身。因此以下表达式所返回的 window 对象都是同一个。

      window.window
       window.window.window
      @@ -24,18 +24,18 @@ 

      摘要

      alert(global === window.global); // displays "true"
      -
    • 不用写 window. 前缀就可以访问 window 对象的内置属性: +
    • 不用写 window. 前缀就可以访问 window 对象的内置属性:
      setTimeout("alert('Hi!')", 50); // equivalent to using window.setTimeout.
       alert(window === window.window); // displays "true"
       
    • -

      将 window 属性指向该 window 对象本身的目的,是为了更容易引用全局对象。不然,就得在最开始写代码的时候进行手动赋值:var window = this; 。

      +

      window 属性指向该 window 对象本身的目的,是为了更容易引用全局对象。不然,就得在最开始写代码的时候进行手动赋值:var window = this;

      -

      另外一个原因是如果没有这个属性,就不能像这样方便的写:  {{domxref("window.open","window.open('http://google.com/')")}},而只能这样: open('http://google.com/')

      +

      另外一个原因是如果没有这个属性,就不能像这样方便的写: {{domxref("window.open","window.open('http://google.com/')")}},而只能这样: open('http://google.com/')

      -

      使用该属性还有一个原因,有些库,特别是 JavaScript 模块希望能够提供 OOP 版本和非 OOP 版本。例如,如果引用了 this.window.location.href ,JavaScript 模块就可以在它定义的类里面定义一个 window 属性(因为默认没有全局性的 window 变量存在),这个属性可以在将 window 对象传进这个模块的类的构造器之后被创建。这样,这个类的方法中的 this.window 就指向了 window 对象。在没有命名空间的版本中,this.window 会重新指向 window 对象,从而很容易获取到文档的位置。还有一个优点,这个类(即使这个类定义在模块外面)的对象可以随意地改变对 window 的引用,而如果有一个写死了的 window 的引用就做不到这样。类内部的默认值仍然可以设置成当前的 window 对象。

      +

      使用该属性还有一个原因,有些库,特别是 JavaScript 模块希望能够提供 OOP 版本和非 OOP 版本。例如,如果引用了 this.window.location.hrefJavaScript 模块就可以在它定义的类里面定义一个 window 属性(因为默认没有全局性的 window 变量存在),这个属性可以在将 window 对象传进这个模块的类的构造器之后被创建。这样,这个类的方法中的 this.window 就指向了 window 对象。在没有命名空间的版本中,this.window 会重新指向 window 对象,从而很容易获取到文档的位置。还有一个优点,这个类(即使这个类定义在模块外面)的对象可以随意地改变对 window 的引用,而如果有一个写死了的 window 的引用就做不到这样。类内部的默认值仍然可以设置成当前的 window 对象。

      规范

      diff --git a/files/zh-cn/web/api/windowclient/index.html b/files/zh-cn/web/api/windowclient/index.html index 5338e1eeb1f45b..dd6819b4237593 100644 --- a/files/zh-cn/web/api/windowclient/index.html +++ b/files/zh-cn/web/api/windowclient/index.html @@ -24,7 +24,7 @@

      Methods

      {{domxref("WindowClient.focus()")}}
      -
      Gives user input focus to the current client. 
      +
      Gives user input focus to the current client.
      {{domxref("WindowClient.navigate()")}}
      Loads a specified URL into a controlled client page.
      diff --git a/files/zh-cn/web/api/worker/index.html b/files/zh-cn/web/api/worker/index.html index 12cc7cde253f0d..c3ed75a6b3da96 100644 --- a/files/zh-cn/web/api/worker/index.html +++ b/files/zh-cn/web/api/worker/index.html @@ -8,45 +8,45 @@ ---

      {{APIRef("Web Workers API")}}

      -

      Worker 接口是 Web Workers API 的一部分,指的是一种可由脚本创建的后台任务,任务执行中可以向其创建者收发信息。要创建一个 Worker只须调用 Worker(URL) 构造函数,函数参数 `URL` 为指定的脚本。

      +

      Worker 接口是 Web Workers API 的一部分,指的是一种可由脚本创建的后台任务,任务执行中可以向其创建者收发信息。要创建一个 Worker只须调用 Worker(URL) 构造函数,函数参数 `URL` 为指定的脚本。

      -

      Worker 也可以创建新的 Worker,当然,所有 Worker 必须与其创建者同源(注意:Blink暂时不支持嵌套 Worker)。 

      +

      Worker 也可以创建新的 Worker,当然,所有 Worker 必须与其创建者同源(注意:Blink暂时不支持嵌套 Worker)。

      -

      需要注意的是,不是所有函数和构造函数 (或者说…类) 都可以在 Worker 中使用。具体参考页面 Worker 所支持的函数和类。Worker 可以使用 XMLHttpRequest 发送请求,但是请求的  responseXML 与 channel 两个属性值始终返回 null (fetch 仍可正常使用,没有类似的限制)。 

      +

      需要注意的是,不是所有函数和构造函数 (或者说…类) 都可以在 Worker 中使用。具体参考页面 Worker 所支持的函数和类。Worker 可以使用 XMLHttpRequest 发送请求,但是请求的 responseXMLchannel 两个属性值始终返回 nullfetch 仍可正常使用,没有类似的限制)。

      -

       如果你要在火狐浏览器的扩展使用 Worker 访问 js-ctypes,应使用 {{ domxref("ChromeWorker") }} 对象来替代。(译者注:这里没有看懂,希望有人能驳正,或添加说明)

      +

      如果你要在火狐浏览器的扩展使用 Worker 访问 js-ctypes,应使用 {{ domxref("ChromeWorker") }} 对象来替代。(译者注:这里没有看懂,希望有人能驳正,或添加说明)

      构造函数

      {{domxref("Worker.Worker", "Worker()")}}
      -
      创建一个专用 Web worker,它只执行 URL 指定的脚本。使用 Blob URL 作为参数亦可。
      +
      创建一个专用 Web worker,它只执行 URL 指定的脚本。使用 Blob URL 作为参数亦可。

      属性

      -

      继承父对象{{domxref("EventTarget")}} 的属性,以及实现对象 {{domxref("AbstractWorker")}}的属性。

      +

      继承父对象{{domxref("EventTarget")}} 的属性,以及实现对象 {{domxref("AbstractWorker")}}的属性。

      事件句柄

      {{domxref("AbstractWorker.onerror")}}
      -
      当{{domxref("ErrorEvent")}} 类型的事件冒泡到 worker 时,事件监听函数 {{ domxref("EventListener") }} 被调用。它继承于 {{domxref("AbstractWorker")}}.
      +
      当{{domxref("ErrorEvent")}} 类型的事件冒泡到 worker 时,事件监听函数 {{ domxref("EventListener") }} 被调用。它继承于 {{domxref("AbstractWorker")}}.
      {{domxref("Worker.onmessage")}}
      -
      当{{domxref("MessageEvent")}}类型的事件冒泡到 worker 时,事件监听函数 {{ domxref("EventListener") }} 被调用.  例如,一个消息通过 {{domxref("DedicatedWorkerGlobalScope.postMessage")}},从执行者发送到父页面对象,消息保存在事件对象的 {{domxref("MessageEvent.data", "data")}} 属性中。
      +
      当{{domxref("MessageEvent")}}类型的事件冒泡到 worker 时,事件监听函数 {{ domxref("EventListener") }} 被调用. 例如,一个消息通过 {{domxref("DedicatedWorkerGlobalScope.postMessage")}},从执行者发送到父页面对象,消息保存在事件对象的 {{domxref("MessageEvent.data", "data")}} 属性中。
      {{domxref("Worker.onmessageerror")}}
      当{{event("messageerror")}} 类型的事件发生时,对应的{{event("Event_handlers", "event handler")}} 代码被调用。

      方法

      -

      继承父对象{{domxref("EventTarget")}} 的方法,以及实现对象 {{domxref("AbstractWorker")}}的方法。

      +

      继承父对象{{domxref("EventTarget")}} 的方法,以及实现对象 {{domxref("AbstractWorker")}}的方法。

      {{domxref("Worker.postMessage()")}}
      -
      发送一条消息到最近的外层对象,消息可由任何 JavaScript 对象组成。
      +
      发送一条消息到最近的外层对象,消息可由任何 JavaScript 对象组成。
      @@ -56,7 +56,7 @@

      方法

      示例

      -

      下面的代码通过构造函数 {{domxref("Worker.Worker", "Worker()")}}  创建了一个 {{domxref("Worker")}} 对象。

      +

      下面的代码通过构造函数 {{domxref("Worker.Worker", "Worker()")}} 创建了一个 {{domxref("Worker")}} 对象。

      var myWorker = new Worker('worker.js');
       var first = document.querySelector('#number1');
      @@ -67,7 +67,7 @@ 

      示例

      console.log('Message posted to worker'); }
      -

      完整的示例,请查阅 Basic dedicated worker example (run dedicated worker).

      +

      完整的示例,请查阅 Basic dedicated worker example (run dedicated worker).

      规范

      @@ -81,13 +81,13 @@

      浏览器兼容性

      跨域行为的错误事件

      -

      浏览器的早期版本中,加载跨域的执行者脚本导致 SecurityError事件。根据规范的变更,而新版本的浏览器只有{{event("error")}}事件发生

      +

      浏览器的早期版本中,加载跨域的执行者脚本导致 SecurityError事件。根据规范的变更,而新版本的浏览器只有{{event("error")}}事件发生

      相关链接

      diff --git a/files/zh-cn/web/api/worker/message_event/index.html b/files/zh-cn/web/api/worker/message_event/index.html index 9928b854c25960..03e824ad2471c8 100644 --- a/files/zh-cn/web/api/worker/message_event/index.html +++ b/files/zh-cn/web/api/worker/message_event/index.html @@ -5,7 +5,7 @@ ---
      {{APIRef}}
      -
      当 worker 的父级接收到来自其 worker 的消息时,会在 {{domxref('Worker')}} 对象上触发 message 事件。例如:当 worker 通过 DedicatedWorkerGlobalScope.postMessage() 发送了一条消息时。
      +
      当 worker 的父级接收到来自其 worker 的消息时,会在 {{domxref('Worker')}} 对象上触发 message 事件。例如:当 worker 通过 DedicatedWorkerGlobalScope.postMessage() 发送了一条消息时。
      @@ -34,7 +34,7 @@

      例子

      -

      下面的代码创建了一个 worker 并使用 addEventListener() 监听从 worker 发来的消息:

      +

      下面的代码创建了一个 worker 并使用 addEventListener() 监听从 worker 发来的消息:

      const worker = new Worker("static/scripts/worker.js");
       
      @@ -42,7 +42,7 @@ 

      例子

      console.log(`Received message from worker: ${event.data}`) });
      -

      另外,也可以使用 onmessage 事件处理属性进行监听:

      +

      另外,也可以使用 onmessage 事件处理属性进行监听:

      const worker = new Worker("static/scripts/worker.js");
       
      @@ -50,7 +50,7 @@ 

      例子

      console.log(`Received message from worker: ${event.data}`) };
      -

      worker 使用 self.postMessage() 发出消息:

      +

      worker 使用 self.postMessage() 发出消息:

      // static/scripts/worker.js
       
      diff --git a/files/zh-cn/web/api/worker/messageerror_event/index.html b/files/zh-cn/web/api/worker/messageerror_event/index.html
      index 81f3815f98158e..3964a6591d2b1a 100644
      --- a/files/zh-cn/web/api/worker/messageerror_event/index.html
      +++ b/files/zh-cn/web/api/worker/messageerror_event/index.html
      @@ -5,7 +5,7 @@
       ---
       
      {{APIRef}}
      -

      当 {{domxref('Worker')}} 对象接收到一条无法被反序列化的消息时, messageerror 事件将在该对象上被触发。

      +

      当 {{domxref('Worker')}} 对象接收到一条无法被反序列化的消息时, messageerror 事件将在该对象上被触发。

    {{SpecName('HTML WHATWG', 'browsers.html#dom-top', 'window.top')}} {{Spec2('HTML WHATWG')}} 
    {{SpecName('HTML5 W3C', 'browsers.html#dom-top', 'window.top')}}
    @@ -30,7 +30,7 @@

    例子

    -

    创建一个 worker ,使用 addEventListener() 监听 message 和 messageerror 事件:

    +

    创建一个 worker ,使用 addEventListener() 监听 messagemessageerror 事件:

    // inside main.js
     
    @@ -44,7 +44,7 @@ 

    例子

    console.error(`Error receiving message from worker: ${event}`); });
    -

    同样,可以使用 onmessageerror 事件处理属性监听事件:

    +

    同样,可以使用 onmessageerror 事件处理属性监听事件:

    // inside main.js
     
    diff --git a/files/zh-cn/web/api/worker/postmessage/index.html b/files/zh-cn/web/api/worker/postmessage/index.html
    index abe2e26ca0d314..e5b71e22b05f37 100644
    --- a/files/zh-cn/web/api/worker/postmessage/index.html
    +++ b/files/zh-cn/web/api/worker/postmessage/index.html
    @@ -11,7 +11,7 @@
     
     

    {{domxref("Worker")}} 接口的 postMessage()方法向 worker 的内部作用域发送一个消息。这接受单个参数,这是要发送给 worker 的数据。数据可以是由结构化克隆算法处理的任何值或 JavaScript 对象,其包括循环引用。

    -

    工作者可以使用 {{domxref("DedicatedWorkerGlobalScope.postMessage")}}  方法将信息发送回生成它的线程。

    +

    工作者可以使用 {{domxref("DedicatedWorkerGlobalScope.postMessage")}} 方法将信息发送回生成它的线程。

    语法

    @@ -33,7 +33,7 @@

    Returns

    Example

    -

    以下代码显示了如何使用 {{domxref("Worker.Worker", "Worker()")}} 构造函数创建一个 Worker 对象。当两个表单输入 (firstsecond)中的其中一个的输入值改变时, {{event("change")}} 事件将调用postMessage()把两个 input 的值发送给当前 worker。

    +

    以下代码显示了如何使用 {{domxref("Worker.Worker", "Worker()")}} 构造函数创建一个 Worker 对象。当两个表单输入 (firstsecond)中的其中一个的输入值改变时, {{event("change")}} 事件将调用postMessage()把两个 input 的值发送给当前 worker。

    var myWorker = new Worker('worker.js');
     
    @@ -43,15 +43,15 @@ 

    Example

    } second.onchange = function() { -  myWorker.postMessage([first.value,second.value]); -  console.log('Message posted to worker'); + myWorker.postMessage([first.value,second.value]); + console.log('Message posted to worker'); }

    有关完整的示例,请参阅我们的Basic dedicated worker example (run dedicated worker).

    -

    Note: postMessage() 一次只能发送一个对象。如上所示,如果你想传递多个值,可以使用数组。

    +

    Note: postMessage() 一次只能发送一个对象。如上所示,如果你想传递多个值,可以使用数组。

    Transfer Example

    @@ -80,13 +80,13 @@

    Main thread code:

    console.info('arrBuf.byteLength pre transfer:', arrBuf.byteLength); myWorker.postMessage( -    { -        aTopic: 'do_sendWorkerArrBuff', -        aBuf: arrBuf // The array buffer that we passed to the transferrable section 3 lines below -    }, -    [ -        arrBuf // The array buffer we created 9 lines above -    ] + { + aTopic: 'do_sendWorkerArrBuff', + aBuf: arrBuf // The array buffer that we passed to the transferrable section 3 lines below + }, + [ + arrBuf // The array buffer we created 9 lines above + ] ); console.info('arrBuf.byteLength post transfer:', arrBuf.byteLength); @@ -95,21 +95,21 @@

    Main thread code:

    Worker code

    self.onmessage = function (msg) {
    -    switch (msg.data.aTopic) {
    -        case 'do_sendWorkerArrBuff':
    -                sendWorkerArrBuff(msg.data.aBuf)
    -            break;
    -        default:
    -            throw 'no aTopic on incoming message to ChromeWorker';
    -    }
    +    switch (msg.data.aTopic) {
    +        case 'do_sendWorkerArrBuff':
    +                sendWorkerArrBuff(msg.data.aBuf)
    +            break;
    +        default:
    +            throw 'no aTopic on incoming message to ChromeWorker';
    +    }
     }
     
     function sendWorkerArrBuff(aBuf) {
    -    console.info('from worker, PRE send back aBuf.byteLength:', aBuf.byteLength);
    +    console.info('from worker, PRE send back aBuf.byteLength:', aBuf.byteLength);
     
    -    self.postMessage({aTopic:'do_sendMainArrBuff', aBuf:aBuf}, [aBuf]);
    +    self.postMessage({aTopic:'do_sendMainArrBuff', aBuf:aBuf}, [aBuf]);
     
    -    console.info('from worker, POST send back aBuf.byteLength:', aBuf.byteLength);
    +    console.info('from worker, POST send back aBuf.byteLength:', aBuf.byteLength);
     }
     
    diff --git a/files/zh-cn/web/api/worker/terminate/index.html b/files/zh-cn/web/api/worker/terminate/index.html index bb81b9b1d873ae..9c7dc03ad74e5b 100644 --- a/files/zh-cn/web/api/worker/terminate/index.html +++ b/files/zh-cn/web/api/worker/terminate/index.html @@ -5,7 +5,7 @@ ---

    {{APIRef("Web Workers API")}}

    -

    {{domxref("Worker")}} 接口中的 terminate()  方法用于立即终止 {{domxref("Worker")}} 的行为。本方法并不会等待 worker 去完成它剩余的操作;worker 将会被立刻停止

    +

    {{domxref("Worker")}} 接口中的 terminate() 方法用于立即终止 {{domxref("Worker")}} 的行为。本方法并不会等待 worker 去完成它剩余的操作;worker 将会被立刻停止

    Syntax

    diff --git a/files/zh-cn/web/api/worker/worker/index.html b/files/zh-cn/web/api/worker/worker/index.html index 3d04d7c008e52e..ac3ecd2fde691c 100644 --- a/files/zh-cn/web/api/worker/worker/index.html +++ b/files/zh-cn/web/api/worker/worker/index.html @@ -12,12 +12,12 @@ ---

    {{APIRef("Web Workers API")}}

    -

    Worker() 构造函数创建一个 {{domxref("Worker")}} 对象,该对象执行指定的 URL 脚本。这个脚本必须遵守 同源策略 。

    +

    Worker() 构造函数创建一个 {{domxref("Worker")}} 对象,该对象执行指定的 URL 脚本。这个脚本必须遵守 同源策略

    -

    如果 此 URL 有一个无效的语句,或者违反同源策略,一个 SECURITY_ERR 类型的{{domxref("DOMException")}}被抛出。

    +

    如果 此 URL 有一个无效的语句,或者违反同源策略,一个 SECURITY_ERR 类型的{{domxref("DOMException")}}被抛出。

    -

    Note: 浏览器厂商对于 data URI 是否同源存在分歧。尽管 Gecko 10.0 {{ geckoRelease("10.0") }} 和之后的版本接受 data URIs,但在所有其他浏览器中并非如此。

    +

    Note: 浏览器厂商对于 data URI 是否同源存在分歧。尽管 Gecko 10.0 {{ geckoRelease("10.0") }} 和之后的版本接受 data URIs,但在所有其他浏览器中并非如此。

    语法

    @@ -28,19 +28,19 @@

    参数

    • 如果文档不允许启动 worker,则会引发 SecurityError
    • -
    • 如果脚本之一的 MIME 类型为 text/csvimage/*video/*,或 audio/*, 则会引发 NetworkError。它应该始终是 text/javascript。
    • +
    • 如果脚本之一的 MIME 类型为 text/csv, image/*, video/*,或 audio/*, 则会引发 NetworkError。它应该始终是 text/javascript。
    • 如果 aURL 无法解析,则引发 SyntaxError。
    aURL
    -
    是一个{{domxref("DOMString")}} 表示worker 将执行的脚本的 URL。它必须遵守同源策略。
    -
    options {{optional_inline}}
    +
    是一个{{domxref("DOMString")}} 表示worker 将执行的脚本的 URL。它必须遵守同源策略。
    +
    options {{optional_inline}}
    包含可在创建对象实例时设置的选项属性的对象。可用属性如下:
      -
    • type:用以指定 worker 类型的  {{domxref("DOMString")}} 值。该值可以是 classic 或 module. 如果未指定,将使用默认值 classic.
    • -
    • credentials:用以指定 worker 凭证的 {{domxref("DOMString")}} 值。该值可以是 omitsame-origin,或 include.。如果未指定,或者 type 是 classic,将使用默认值 omit (不要求凭证)。
    • -
    • name在 {{domxref("DedicatedWorkerGlobalScope")}} 的情况下,用来表示 worker 的 scope 的一个 {{domxref("DOMString")}} 值,主要用于调试目的。
    • +
    • type:用以指定 worker 类型的 {{domxref("DOMString")}} 值。该值可以是 classicmodule. 如果未指定,将使用默认值 classic.
    • +
    • credentials:用以指定 worker 凭证的 {{domxref("DOMString")}} 值。该值可以是 omit, same-origin,或 include.。如果未指定,或者 type 是 classic,将使用默认值 omit (不要求凭证)。
    • +
    • name在 {{domxref("DedicatedWorkerGlobalScope")}} 的情况下,用来表示 worker 的 scope 的一个 {{domxref("DOMString")}} 值,主要用于调试目的。
    @@ -59,7 +59,7 @@

    异常

    例子

    -

    下面的代码片段展示了通过 Worker() 创建 {{domxref("Worker")}} 对象的过程, 以及随后的使用方法:

    +

    下面的代码片段展示了通过 Worker() 创建 {{domxref("Worker")}} 对象的过程, 以及随后的使用方法:

    let myWorker = new Worker("worker.js");
     
    @@ -68,7 +68,7 @@ 

    例子

    console.log('Message posted to worker'); }
    -

    完整的例子请看 Basic dedicated worker example (run dedicated worker).

    +

    完整的例子请看 Basic dedicated worker example (run dedicated worker).

    规范

    @@ -89,6 +89,6 @@

    浏览器兼容性

    另请参阅
    diff --git a/files/zh-cn/web/api/workerglobalscope/importscripts/index.html b/files/zh-cn/web/api/workerglobalscope/importscripts/index.html index d28876c888607b..e7d0e38f393d2c 100644 --- a/files/zh-cn/web/api/workerglobalscope/importscripts/index.html +++ b/files/zh-cn/web/api/workerglobalscope/importscripts/index.html @@ -21,7 +21,7 @@

    语法

    参数

    -

    {{domxref("DOMString")}} 对象的一个逗号分隔列表,表示要导入的脚本。

    +

    {{domxref("DOMString")}} 对象的一个逗号分隔列表,表示要导入的脚本。

    返回值

    @@ -50,7 +50,7 @@

    例子

    importScripts('foo.js');
    -

    importScripts() 和 self.importScripts() 实际上是等效的 — 都表示从工作者的内部范围内调用的 importScripts()

    +

    importScripts()self.importScripts() 实际上是等效的 — 都表示从工作者的内部范围内调用的 importScripts()

    规范

    diff --git a/files/zh-cn/web/api/workerglobalscope/index.html b/files/zh-cn/web/api/workerglobalscope/index.html index 174cd443740269..f7c40d22d3e823 100644 --- a/files/zh-cn/web/api/workerglobalscope/index.html +++ b/files/zh-cn/web/api/workerglobalscope/index.html @@ -14,9 +14,9 @@ ---

    {{APIRef("Web Workers API")}}

    -

     Web Workers API  的 WorkerGlobalScope 接口 是一个代表了任何 scope of worker 的接口. Workers 没有浏览内容;这个 scope 包含的信息总是通过 {{domxref("Window")}} objects 传递 — 比如 event handlers, the console or the associated {{domxref("WorkerNavigator")}} object。每个 WorkerGlobalScope 都有自己的事件循环。

    +

    Web Workers APIWorkerGlobalScope 接口 是一个代表了任何 scope of worker 的接口. Workers 没有浏览内容;这个 scope 包含的信息总是通过 {{domxref("Window")}} objects 传递 — 比如 event handlers, the console or the associated {{domxref("WorkerNavigator")}} object。每个 WorkerGlobalScope 都有自己的事件循环。

    -

    每个 worker type 都有专门的这个接口:{{domxref("DedicatedWorkerGlobalScope")}} for dedicated workers, {{domxref("SharedWorkerGlobalScope")}} for shared workers, and {{domxref("ServiceWorkerGlobalScope")}} for ServiceWorker. self 属性返回每个内容的专门 scope.

    +

    每个 worker type 都有专门的这个接口:{{domxref("DedicatedWorkerGlobalScope")}} for dedicated workers, {{domxref("SharedWorkerGlobalScope")}} for shared workers, and {{domxref("ServiceWorkerGlobalScope")}} for ServiceWorker. self 属性返回每个内容的专门 scope.

    Properties

    @@ -30,7 +30,7 @@

    Standard properties

    {{domxref("WorkerGlobalScope.navigator")}} {{readOnlyinline}}
    Returns the {{domxref("WorkerNavigator")}} associated with the worker. It is a specific navigator object, mostly a subset of the {{domxref("Navigator")}} for browsing scopes, but adapted to workers.
    {{domxref("WorkerGlobalScope.self")}} {{readOnlyinline}}
    -
    Returns a reference to the WorkerGlobalScope itself. Most of the time it is a specific scope like {{domxref("DedicatedWorkerGlobalScope")}},  {{domxref("SharedWorkerGlobalScope")}} or {{domxref("ServiceWorkerGlobalScope")}}.
    +
    Returns a reference to the WorkerGlobalScope itself. Most of the time it is a specific scope like {{domxref("DedicatedWorkerGlobalScope")}}, {{domxref("SharedWorkerGlobalScope")}} or {{domxref("ServiceWorkerGlobalScope")}}.
    {{domxref("WorkerGlobalScope.location")}} {{readOnlyinline}}
    Returns the {{domxref("WorkerLocation")}} associated with the worker. It is a specific location object, mostly a subset of the {{domxref("Location")}} for browsing scopes, but adapted to workers.
    @@ -63,9 +63,9 @@

    Event Handlers

    {{domxref("WorkerGlobalScope.onclose")}} {{non-standard_inline}}
    Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("close")}} event is raised.
    {{domxref("WorkerGlobalScope.onrejectionhandled")}} {{non-standard_inline}}
    -
    An event handler for handled Promise rejection events.
    +
    An event handler for handled Promise rejection events.
    {{domxref("WorkerGlobalScope.onunhandledrejection")}} {{non-standard_inline}}
    -
    An event handler for unhandled Promise rejection events.
    +
    An event handler for unhandled Promise rejection events.

    Methods

    diff --git a/files/zh-cn/web/api/workerglobalscope/self/index.html b/files/zh-cn/web/api/workerglobalscope/self/index.html index 9ced6ad8867392..89ba11fc8cbe06 100644 --- a/files/zh-cn/web/api/workerglobalscope/self/index.html +++ b/files/zh-cn/web/api/workerglobalscope/self/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef("Web Workers API")}}
    -

    self 是 {{domxref("WorkerGlobalScope")}} 的只读属性,它指向 WorkerGlobalScope 自身。通常情况下,它是如 {{domxref("DedicatedWorkerGlobalScope")}},  {{domxref("SharedWorkerGlobalScope")}}, 或 {{domxref("ServiceWorkerGlobalScope")}} 类型的 scope 。

    +

    self 是 {{domxref("WorkerGlobalScope")}} 的只读属性,它指向 WorkerGlobalScope 自身。通常情况下,它是如 {{domxref("DedicatedWorkerGlobalScope")}}, {{domxref("SharedWorkerGlobalScope")}}, 或 {{domxref("ServiceWorkerGlobalScope")}} 类型的 scope 。

    语法

    @@ -13,20 +13,20 @@

    语法

    -

    当前 worker 的全局 scope(值取决于你创建的 worker 类型)。

    +

    当前 worker 的全局 scope(值取决于你创建的 worker 类型)。

    示例

    -

    在 worker 中运行这行代码:

    +

    在 worker 中运行这行代码:

    console.log(self);
    -

    console 中会输出当前 worker 的全局 scope,如下所示:

    +

    console 中会输出当前 worker 的全局 scope,如下所示:

    DedicatedWorkerGlobalScope {
     undefined: undefined, Infinity: Infinity, Math: MathConstructor, NaN: NaN, Intl: Object…}
    -    Infinity: Infinity
    -    Array: function Array() { [native code] }
    +    Infinity: Infinity
    +    Array: function Array() { [native code] }
           arguments: null
           caller: null
           isArray: function isArray() { [native code] }
    @@ -37,7 +37,7 @@ 

    示例

    unobserve: function unobserve() { [native code] } __proto__: function Empty() {} <function scope> -    ArrayBuffer: function ArrayBuffer() { [native code] } + ArrayBuffer: function ArrayBuffer() { [native code] } Blob: function Blob() { [native code] } Boolean: function Boolean() { [native code] } DataView: function DataView() { [native code] } @@ -47,7 +47,7 @@

    示例

    // etc. etc.
    -

    这会列出当前 worker scope 上完整的属性列表,在需要检测某个属性是否可用时非常有用。 详细列表也可查阅 Functions and classes available to Web Workers.

    +

    这会列出当前 worker scope 上完整的属性列表,在需要检测某个属性是否可用时非常有用。 详细列表也可查阅 Functions and classes available to Web Workers.

    规范

    diff --git a/files/zh-cn/web/api/xmlhttprequest/abort/index.html b/files/zh-cn/web/api/xmlhttprequest/abort/index.html index 4b47e58449ae6d..9cb07382bd0b84 100644 --- a/files/zh-cn/web/api/xmlhttprequest/abort/index.html +++ b/files/zh-cn/web/api/xmlhttprequest/abort/index.html @@ -7,7 +7,7 @@ ---

    {{APIRef('XMLHttpRequest')}}

    -

    如果该请求已被发出,XMLHttpRequest.abort() 方法将终止该请求。当一个请求被终止,它的  {{domxref("XMLHttpRequest.readyState", "readyState")}} 将被置为 {{domxref("XMLHttpRequest.UNSENT")}} (0),并且请求的 {{domxref("XMLHttpRequest.status", "status")}} 置为 0。

    +

    如果该请求已被发出,XMLHttpRequest.abort() 方法将终止该请求。当一个请求被终止,它的 {{domxref("XMLHttpRequest.readyState", "readyState")}} 将被置为 {{domxref("XMLHttpRequest.UNSENT")}} (0),并且请求的 {{domxref("XMLHttpRequest.status", "status")}} 置为 0。

    语法

    diff --git a/files/zh-cn/web/api/xmlhttprequest/abort_event/index.html b/files/zh-cn/web/api/xmlhttprequest/abort_event/index.html index 83021679c69362..2a7af6930b3d9b 100644 --- a/files/zh-cn/web/api/xmlhttprequest/abort_event/index.html +++ b/files/zh-cn/web/api/xmlhttprequest/abort_event/index.html @@ -10,7 +10,7 @@ -
    当一个请求终止时 abort 事件被触发,比如程序执行 {{domxref("XMLHttpRequest.abort()")}}。
    +
    当一个请求终止时 abort 事件被触发,比如程序执行 {{domxref("XMLHttpRequest.abort()")}}。
    diff --git a/files/zh-cn/web/api/xmlhttprequest/channel/index.html b/files/zh-cn/web/api/xmlhttprequest/channel/index.html index 4325be4d391616..5a84be03d5f6b8 100644 --- a/files/zh-cn/web/api/xmlhttprequest/channel/index.html +++ b/files/zh-cn/web/api/xmlhttprequest/channel/index.html @@ -5,6 +5,6 @@ ---

    {{APIRef('XMLHttpRequest')}}

    -

    创建请求的时候,XMLHttpRequest.channel 是一个被对象使用的 nsIChannel。如果管道(channel)还没被创建的话,它的值是 null。在一个 multi-part 请求案例中,它是初始化的管道,不是 multi-part 请求中的不同部分。

    +

    创建请求的时候,XMLHttpRequest.channel 是一个被对象使用的 nsIChannel。如果管道(channel)还没被创建的话,它的值是 null。在一个 multi-part 请求案例中,它是初始化的管道,不是 multi-part 请求中的不同部分。

    需要权限提升。

    diff --git a/files/zh-cn/web/api/xmlhttprequest/getresponseheader/index.html b/files/zh-cn/web/api/xmlhttprequest/getresponseheader/index.html index c0ede2c8cb9129..1a00ddb88f746d 100644 --- a/files/zh-cn/web/api/xmlhttprequest/getresponseheader/index.html +++ b/files/zh-cn/web/api/xmlhttprequest/getresponseheader/index.html @@ -45,8 +45,8 @@

    示例:

    if(this.readyState == this.HEADERS_RECEIVED) { // 如果 readyState 表示响应头已返回 var contentType=client.getResponseHeader("Content-Type")); // 将此连接的 Content-Type 响应头项赋值到 contentType。 if(contentType != my_expected_type) { // 如果这不是你的预期值 -  client.abort(); // 终止连接 -  } + client.abort(); // 终止连接 + } } }
    diff --git a/files/zh-cn/web/api/xmlhttprequest/html_in_xmlhttprequest/index.html b/files/zh-cn/web/api/xmlhttprequest/html_in_xmlhttprequest/index.html index ad858da2a6d886..542c9d46253939 100644 --- a/files/zh-cn/web/api/xmlhttprequest/html_in_xmlhttprequest/index.html +++ b/files/zh-cn/web/api/xmlhttprequest/html_in_xmlhttprequest/index.html @@ -13,7 +13,7 @@

    用法

    使用 XMLHttpRequest 将 HTML 资源恢复为 DOM 就像使用 XMLHttpRequest 将 XML 资源恢复为 DOM 一样,除了您不能使用同步模式,您必须通过将字符串 “document” 分配给 responseType 属性来显式请求文档调用 open() 之后调用 send 之前的 XMLHttpRequest 对象。

    -

     

    +

    var xhr = new XMLHttpRequest();
     xhr.onload = function() {
    @@ -52,7 +52,7 @@ 

    方法 1

    方法 2

    -

    检测浏览器是否支持 XMLHttpRequest 中的 HTML 解析有两个挑战。首先,检测结果是异步获取的,因为 HTML 支持仅在异步模式下可用。Second, you have to actually fetch a test document over HTTP, because testing with a data: URL would end up testing data:URL support at the same time.

    +

    检测浏览器是否支持 XMLHttpRequest 中的 HTML 解析有两个挑战。首先,检测结果是异步获取的,因为 HTML 支持仅在异步模式下可用。Second, you have to actually fetch a test document over HTTP, because testing with a data: URL would end up testing data:URL support at the same time.

    因此,为了检测 HTML 支持,服务器上需要一个测试 HTML 文件。这个测试文件很小,格式不是很完整:

    @@ -119,7 +119,7 @@

    老版本的浏览器中处理 HTML oReq.send(null);

    -
    注: 该解决方案对于解释器来说更为昂贵。仅在确实需要的情况下使用.
    +
    注: 该解决方案对于解释器来说更为昂贵。仅在确实需要的情况下使用.

    Specifications

    diff --git a/files/zh-cn/web/api/xmlhttprequest/load_event/index.html b/files/zh-cn/web/api/xmlhttprequest/load_event/index.html index 01057126e09d42..98a980894e2b76 100644 --- a/files/zh-cn/web/api/xmlhttprequest/load_event/index.html +++ b/files/zh-cn/web/api/xmlhttprequest/load_event/index.html @@ -8,7 +8,7 @@ ---
    {{APIRef}}
    -

    当一个{{domxref("XMLHttpRequest")}}请求完成的时候会触发load 事件。

    +

    当一个{{domxref("XMLHttpRequest")}}请求完成的时候会触发load 事件。

    diff --git a/files/zh-cn/web/api/xmlhttprequest/loadend_event/index.html b/files/zh-cn/web/api/xmlhttprequest/loadend_event/index.html index 59a99c18bd0022..53ce425fd0d5c8 100644 --- a/files/zh-cn/web/api/xmlhttprequest/loadend_event/index.html +++ b/files/zh-cn/web/api/xmlhttprequest/loadend_event/index.html @@ -4,7 +4,7 @@ translation_of: Web/API/XMLHttpRequest/loadend_event original_slug: Web/Events/loadend --- -

    loadend 事件总是在一个资源的加载进度停止之后被触发 (例如,在已经触发 “error”,“abort” 或 “load” 事件之后)。这适用于 {{domxref("XMLHttpRequest")}} 调用,以及 {{htmlelement("img")}} 或 {{htmlelement("video")}} 之类元素的内容。

    +

    loadend 事件总是在一个资源的加载进度停止之后被触发 (例如,在已经触发 “error”,“abort” 或 “load” 事件之后)。这适用于 {{domxref("XMLHttpRequest")}} 调用,以及 {{htmlelement("img")}} 或 {{htmlelement("video")}} 之类元素的内容。

    General info

    diff --git a/files/zh-cn/web/api/xmlhttprequest/loadstart_event/index.html b/files/zh-cn/web/api/xmlhttprequest/loadstart_event/index.html index 9f44131695b54e..8866a0364bc856 100644 --- a/files/zh-cn/web/api/xmlhttprequest/loadstart_event/index.html +++ b/files/zh-cn/web/api/xmlhttprequest/loadstart_event/index.html @@ -6,7 +6,7 @@ translation_of: Web/API/XMLHttpRequest/loadstart_event original_slug: Web/Events/loadstart --- -

    当程序开始加载时,loadstart 事件将被触发。这个事件可以被 {{domxref("XMLHttpRequest")}} 调用,也适用于 {{htmlelement("img")}} 和 {{htmlelement("video")}} 元素。

    +

    当程序开始加载时,loadstart 事件将被触发。这个事件可以被 {{domxref("XMLHttpRequest")}} 调用,也适用于 {{htmlelement("img")}} 和 {{htmlelement("video")}} 元素。

    基本信息

    diff --git a/files/zh-cn/web/api/xmlhttprequest/mozanon/index.html b/files/zh-cn/web/api/xmlhttprequest/mozanon/index.html index 6903191de9658c..bf7a822ca7a3eb 100644 --- a/files/zh-cn/web/api/xmlhttprequest/mozanon/index.html +++ b/files/zh-cn/web/api/xmlhttprequest/mozanon/index.html @@ -13,4 +13,4 @@ ---
    {{APIRef('XMLHttpRequest')}}
    -

    XMLHttpRequest.mozAnon 是布尔类型。如果这个变量为真,则这次请求将不携带 Cookies 或头部认证信息来发送。

    +

    XMLHttpRequest.mozAnon 是布尔类型。如果这个变量为真,则这次请求将不携带 Cookies 或头部认证信息来发送。

    diff --git a/files/zh-cn/web/api/xmlhttprequest/mozresponsearraybuffer/index.html b/files/zh-cn/web/api/xmlhttprequest/mozresponsearraybuffer/index.html index 06c576153fe4dc..382395d84bfd3e 100644 --- a/files/zh-cn/web/api/xmlhttprequest/mozresponsearraybuffer/index.html +++ b/files/zh-cn/web/api/xmlhttprequest/mozresponsearraybuffer/index.html @@ -9,4 +9,4 @@

    自 Gecko 6 以来已过时

    -

    这是一个 ArrayBuffer 响应给这个请求,写为 JavaScript 类型数组。 如果请求不成功,或者它尚未发送,它就是 NULL

    +

    这是一个 ArrayBuffer 响应给这个请求,写为 JavaScript 类型数组。 如果请求不成功,或者它尚未发送,它就是 NULL

    diff --git a/files/zh-cn/web/api/xmlhttprequest/open/index.html b/files/zh-cn/web/api/xmlhttprequest/open/index.html index 560c70ab3951d7..126eb57aafe803 100644 --- a/files/zh-cn/web/api/xmlhttprequest/open/index.html +++ b/files/zh-cn/web/api/xmlhttprequest/open/index.html @@ -8,7 +8,7 @@ ---

    {{APIRef('XMLHttpRequest')}}

    -

    XMLHttpRequest.open() 方法初始化一个请求。该方法要从 JavaScript 代码使用;从原生代码初始化一个请求,使用 openRequest() 替代。

    +

    XMLHttpRequest.open() 方法初始化一个请求。该方法要从 JavaScript 代码使用;从原生代码初始化一个请求,使用 openRequest() 替代。

    注意:为已激活的请求调用此方法(open()openRequest() 已被调用)相当于调用abort()
    @@ -29,7 +29,7 @@

    参数

    一个 {{domxref("DOMString")}} 表示要向其发送请求的 URL。
    async {{optional_inline}}
    一个可选的布尔参数,表示是否异步执行操作,默认为 true。如果值为 falsesend() 方法直到收到答复前不会返回。如果 true,已完成事务的通知可供事件监听器使用。如果 multipart 属性为 true 则这个必须为 true,否则将引发异常。 -
    注意:主线程上的同步请求很容易破坏用户体验,应该避免;实际上,许多浏览器已完全弃用主线程上的同步 XHR 支持。在 {{domxref("Worker")}} 中允许同步请求
    +
    注意:主线程上的同步请求很容易破坏用户体验,应该避免;实际上,许多浏览器已完全弃用主线程上的同步 XHR 支持。在 {{domxref("Worker")}} 中允许同步请求
    user {{optional_inline}}
    可选的用户名用于认证用途;默认为 null
    diff --git a/files/zh-cn/web/api/xmlhttprequest/overridemimetype/index.html b/files/zh-cn/web/api/xmlhttprequest/overridemimetype/index.html index b9d04b9397288d..c0cb9f2f052519 100644 --- a/files/zh-cn/web/api/xmlhttprequest/overridemimetype/index.html +++ b/files/zh-cn/web/api/xmlhttprequest/overridemimetype/index.html @@ -13,7 +13,7 @@

    Parameters

    mimeType
    -
    一个 {{domxref("DOMString")}} 指定具体的 MIME 类型去代替有服务器指定的 MIME 类型. 如果服务器没有指定类型,那么 XMLHttpRequest 将会默认为 "text/xml".
    +
    一个 {{domxref("DOMString")}} 指定具体的 MIME 类型去代替有服务器指定的 MIME 类型. 如果服务器没有指定类型,那么 XMLHttpRequest 将会默认为 "text/xml".

    Return value

    @@ -25,7 +25,7 @@

    Example

    这个样例指定 Content-Type 为“text/plain",为接受的数据重写 ContentType

    -

    Note:  如果服务器没有指定一个Content-Type 头,{{domxref("XMLHttpRequest")}} 默认 MIME 类型为"text/xml". 如果接受的数据不是有效的 XML,将会出现格”格式不正确“的错误。你能够通过调用 overrideMimeType() 指定各种类型来避免这种情况。

    +

    Note: 如果服务器没有指定一个Content-Type 头,{{domxref("XMLHttpRequest")}} 默认 MIME 类型为"text/xml". 如果接受的数据不是有效的 XML,将会出现格”格式不正确“的错误。你能够通过调用 overrideMimeType() 指定各种类型来避免这种情况。

    // Interpret the received data as plain text
    diff --git a/files/zh-cn/web/api/xmlhttprequest/readystate/index.html b/files/zh-cn/web/api/xmlhttprequest/readystate/index.html
    index 668eb3f276fae8..f5ed7abecd5ba7 100644
    --- a/files/zh-cn/web/api/xmlhttprequest/readystate/index.html
    +++ b/files/zh-cn/web/api/xmlhttprequest/readystate/index.html
    @@ -8,7 +8,7 @@
     ---
     

    {{APIRef('XMLHttpRequest')}}

    -

    XMLHttpRequest.readyState 属性返回一个 XMLHttpRequest 代理当前所处的状态。一个 XHR 代理总是处于下列状态中的一个:

    +

    XMLHttpRequest.readyState 属性返回一个 XMLHttpRequest 代理当前所处的状态。一个 XHR 代理总是处于下列状态中的一个:

    @@ -49,7 +49,7 @@
    UNSENT
    XMLHttpRequest 代理已被创建, 但尚未调用 open() 方法。
    OPENED
    -
    open() 方法已经被触发。在这个状态中,可以通过  setRequestHeader() 方法来设置请求的头部, 可以调用 send() 方法来发起请求。
    +
    open() 方法已经被触发。在这个状态中,可以通过 setRequestHeader() 方法来设置请求的头部, 可以调用 send() 方法来发起请求。
    HEADERS_RECEIVED
    send() 方法已经被调用,响应头也已经被接收。
    LOADING
    diff --git a/files/zh-cn/web/api/xmlhttprequest/readystatechange_event/index.html b/files/zh-cn/web/api/xmlhttprequest/readystatechange_event/index.html index b91c3a411b9c7f..6bb4536c94eed9 100644 --- a/files/zh-cn/web/api/xmlhttprequest/readystatechange_event/index.html +++ b/files/zh-cn/web/api/xmlhttprequest/readystatechange_event/index.html @@ -13,16 +13,16 @@ ---
    {{APIRef}}
    -

    只要 readyState 属性发生变化,就会调用相应的处理函数。这个回调函数会被用户线程所调用。XMLHttpRequest.onreadystatechange 会在 {{domxref("XMLHttpRequest")}} 的{{domxref("XMLHttpRequest.readyState", "readyState")}} 属性发生改变时触发 {{event("readystatechange")}} 事件的时候被调用。

    +

    只要 readyState 属性发生变化,就会调用相应的处理函数。这个回调函数会被用户线程所调用。XMLHttpRequest.onreadystatechange 会在 {{domxref("XMLHttpRequest")}} 的{{domxref("XMLHttpRequest.readyState", "readyState")}} 属性发生改变时触发 {{event("readystatechange")}} 事件的时候被调用。

    警告:这个方法不该用于同步的 requests 对象,并且不能在内部 (C++) 代码中使用。

    -

    当一个 XMLHttpRequest 请求被 abort() 方法取消时,其对应的 readystatechange 事件不会被触发。

    +

    当一个 XMLHttpRequest 请求被 abort() 方法取消时,其对应的 readystatechange 事件不会被触发。

    -

    UPDATE: 在下面的浏览器版本中会触发 (Firefox 51.0.1, Opera 43.0.2442.991, Safari 10.0.3 (12602.4.8), Chrome 54.0.2840.71, Edge, IE11). 例子在 here - 重新加载几次页面即可。

    +

    UPDATE: 在下面的浏览器版本中会触发 (Firefox 51.0.1, Opera 43.0.2442.991, Safari 10.0.3 (12602.4.8), Chrome 54.0.2840.71, Edge, IE11). 例子在 here - 重新加载几次页面即可。

    语法

    @@ -32,7 +32,7 @@

    语法

    取值

      -
    • readyState 的值改变的时候,callback 函数会被调用。
    • +
    • readyState 的值改变的时候,callback 函数会被调用。

    示例

    diff --git a/files/zh-cn/web/api/xmlhttprequest/response/index.html b/files/zh-cn/web/api/xmlhttprequest/response/index.html index ff91b45a524890..b6ce32fdbe220b 100644 --- a/files/zh-cn/web/api/xmlhttprequest/response/index.html +++ b/files/zh-cn/web/api/xmlhttprequest/response/index.html @@ -43,7 +43,7 @@

    例子

    此例子提供了一个方法—— load() ,它可以从服务器加载和处理页面。它通过创建一个 {{domxref("XMLHttpRequest")}} 对象并为 {{event("readystatechange")}} 事件创建一个监听器。这样的话,当 readyState 变成 DONE (4) 时就会获取 response 并将其传递给 load() 中提供的回调函数。

    -

    返回的内容会被作为原始文本数据处理(因为这里没有覆盖 {{domxref("XMLHttpRequest.responseType", "responseType")}} 的默认值)。

    +

    返回的内容会被作为原始文本数据处理(因为这里没有覆盖 {{domxref("XMLHttpRequest.responseType", "responseType")}} 的默认值)。

    var url = 'somePage.html'; // 一个本地页面
     
    diff --git a/files/zh-cn/web/api/xmlhttprequest/responsetext/index.html b/files/zh-cn/web/api/xmlhttprequest/responsetext/index.html
    index 134e51333ae35f..95dba2367549a1 100644
    --- a/files/zh-cn/web/api/xmlhttprequest/responsetext/index.html
    +++ b/files/zh-cn/web/api/xmlhttprequest/responsetext/index.html
    @@ -15,7 +15,7 @@ 

    语法

    取值

    -

    {{domxref("DOMString")}} 是 XMLHttpRequest 返回的纯文本的值。当 {{domxref("DOMString")}} 为 null 时,表示请求失败了。当{{domxref("DOMString")}} 为 "" 时,表示这个请求还没有被 {{domxref("XMLHttpRequest.send", "send()")}}

    +

    {{domxref("DOMString")}} 是 XMLHttpRequest 返回的纯文本的值。当 {{domxref("DOMString")}} 为 null 时,表示请求失败了。当{{domxref("DOMString")}} 为 "" 时,表示这个请求还没有被 {{domxref("XMLHttpRequest.send", "send()")}}

    当处理一个异步 request 的时候,尽管当前请求并没有结束,responseText 的返回值是当前从后端收到的内容。

    diff --git a/files/zh-cn/web/api/xmlhttprequest/responsexml/index.html b/files/zh-cn/web/api/xmlhttprequest/responsexml/index.html index 678e10cce623e4..0b26e4df5dc9ee 100644 --- a/files/zh-cn/web/api/xmlhttprequest/responsexml/index.html +++ b/files/zh-cn/web/api/xmlhttprequest/responsexml/index.html @@ -7,13 +7,13 @@ ---

    {{APIRef('XMLHttpRequest')}}

    -

    XMLHttpRequest.responseXML 属性是一个只读值,它返回一个包含请求检索的 HTML 或 XML 的{{domxref("Document")}},如果请求未成功,尚未发送,或者检索的数据无法正确解析为 XML 或 HTML,则为 null。默认是当作“text / xml” 来解析。当 {{domxref("XMLHttpRequest.responseType", "responseType")}} 设置为 “document” 并且请求已异步执行时,响应将被当作 “text / html” 来解析。responseXML 对于任何其他类型的数据以及 data: URLs 为 null。

    +

    XMLHttpRequest.responseXML 属性是一个只读值,它返回一个包含请求检索的 HTML 或 XML 的{{domxref("Document")}},如果请求未成功,尚未发送,或者检索的数据无法正确解析为 XML 或 HTML,则为 null。默认是当作“text / xml” 来解析。当 {{domxref("XMLHttpRequest.responseType", "responseType")}} 设置为 “document” 并且请求已异步执行时,响应将被当作 “text / html” 来解析。responseXML 对于任何其他类型的数据以及 data: URLs 为 null。

    responseXML 在这个属性的历史堪称神器,它可以同时在 HTML 和 XML 中工作

    -

    如果服务器没有明确指出 {{HTTPHeader("Content-Type")}} 头是 "text/xml" 还是 "application/xml", 你可以使用{{domxref("XMLHttpRequest.overrideMimeType()")}} 强制 XMLHttpRequest 解析为 XML。

    +

    如果服务器没有明确指出 {{HTTPHeader("Content-Type")}} 头是 "text/xml" 还是 "application/xml", 你可以使用{{domxref("XMLHttpRequest.overrideMimeType()")}} 强制 XMLHttpRequest 解析为 XML。

    语法

    @@ -22,13 +22,13 @@

    语法

    -

     {{domxref("Document")}} 中包含从 {{domxref("XMLHttpRequest")}} 中收到的 HTML 节点或解析后的 XML 节点,也可能是在没有收到任何数据或数据类型错误的情况下返回的 null。

    +

    {{domxref("Document")}} 中包含从 {{domxref("XMLHttpRequest")}} 中收到的 HTML 节点或解析后的 XML 节点,也可能是在没有收到任何数据或数据类型错误的情况下返回的 null。

    例外

    InvalidStateError
    -
    {{domxref("XMLHttpRequest.responseType", "responseType")}} 既不是 "document" 也不是空字符串 (接收的数据应是 XML 或 HTML)。
    +
    {{domxref("XMLHttpRequest.responseType", "responseType")}} 既不是 "document" 也不是空字符串 (接收的数据应是 XML 或 HTML)。

    示例

    diff --git a/files/zh-cn/web/api/xmlhttprequest/send/index.html b/files/zh-cn/web/api/xmlhttprequest/send/index.html index 20bc948c167825..86c28649aff708 100644 --- a/files/zh-cn/web/api/xmlhttprequest/send/index.html +++ b/files/zh-cn/web/api/xmlhttprequest/send/index.html @@ -13,12 +13,12 @@ ---

    {{APIRef('XMLHttpRequest')}}

    -

    XMLHttpRequest.send() 方法用于发送 HTTP 请求。如果是异步请求(默认为异步请求),则此方法会在请求发送后立即返回;如果是同步请求,则此方法直到响应到达后才会返回。XMLHttpRequest.send() 方法接受一个可选的参数,其作为请求主体;如果请求方法是 GET 或者 HEAD,则应将请求主体设置为 null。

    +

    XMLHttpRequest.send() 方法用于发送 HTTP 请求。如果是异步请求(默认为异步请求),则此方法会在请求发送后立即返回;如果是同步请求,则此方法直到响应到达后才会返回。XMLHttpRequest.send() 方法接受一个可选的参数,其作为请求主体;如果请求方法是 GET 或者 HEAD,则应将请求主体设置为 null。

    -

    如果没有使用 {{domxref("XMLHttpRequest.setRequestHeader", "setRequestHeader()")}} 方法设置 {{HTTPHeader("Accept")}} 头部信息,则会发送带有 "* / *" 的{{HTTPHeader("Accept")}} 头部。

    +

    如果没有使用 {{domxref("XMLHttpRequest.setRequestHeader", "setRequestHeader()")}} 方法设置 {{HTTPHeader("Accept")}} 头部信息,则会发送带有 "* / *" 的{{HTTPHeader("Accept")}} 头部。

    -

    Note: 请注意不要使用一个简单的 ArrayBuffer 对象作为参数,ArrayBuffer 已经不再是 AJAX 规范的一部分,请改用 ArrayBufferView(有关信息请参考兼容性列表。)

    +

    Note: 请注意不要使用一个简单的 ArrayBuffer 对象作为参数,ArrayBuffer 已经不再是 AJAX 规范的一部分,请改用 ArrayBufferView(有关信息请参考兼容性列表。)

    语法

    @@ -28,14 +28,14 @@

    语法

    参数

    -
    body {{optional_inline}}
    -
    在 XHR 请求中要发送的数据体. 可以是: +
    body {{optional_inline}}
    +
    在 XHR 请求中要发送的数据体. 可以是:
    • 可以为 {{domxref("Document")}}, 在这种情况下,它在发送之前被序列化。
    • -
    • 为 XMLHttpRequestBodyInit, 从 per the Fetch spec (规范中)可以是 {{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, 或者 {{domxref("USVString")}} 对象。
    • +
    • XMLHttpRequestBodyInit, 从 per the Fetch spec (规范中)可以是 {{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, 或者 {{domxref("USVString")}} 对象。
    • null
    - 如果 body 没有指定值,则默认值为 null .
    + 如果 body 没有指定值,则默认值为 null .

    返回值

    @@ -53,11 +53,11 @@

    例外

    - + - +
    InvalidStateErrorsend() has already been invoked for the request, and/or the request is complete.send() has already been invoked for the request, and/or the request is complete.
    NetworkErrorThe resource type to be fetched is a Blob, and the method is not GET.The resource type to be fetched is a Blob, and the method is not GET.
    @@ -77,7 +77,7 @@

    例外

    如果是一个 nsIInputStream 接口,它必须与 nsIUploadChannel 的 setUploadStream() 方法兼容。在这种情况下,将 Content-Length 的头部添加到请求中,它的值则使用 nsIInputStream 接口的 available() 方法获取。任何报头包括在数据流顶部的都会被当做报文主体。所以,应该在发送请求即调用 send() 方法之前使用setRequestHeader() 方法设置 Content-Type 头部来指定数据流的 MIME 类型。

    -

    发送二进制内容的最佳方法(如上传文件)是使用一个与 send() 方法结合的 ArrayBufferView 或者 Blobs

    +

    发送二进制内容的最佳方法(如上传文件)是使用一个与 send() 方法结合的 ArrayBufferView 或者 Blobs

    案例: GET

    diff --git a/files/zh-cn/web/api/xmlhttprequest/sending_and_receiving_binary_data/index.html b/files/zh-cn/web/api/xmlhttprequest/sending_and_receiving_binary_data/index.html index e77fbb7515b546..95b062c95c07e7 100644 --- a/files/zh-cn/web/api/xmlhttprequest/sending_and_receiving_binary_data/index.html +++ b/files/zh-cn/web/api/xmlhttprequest/sending_and_receiving_binary_data/index.html @@ -10,7 +10,7 @@ ---

    使用 JavaScript 类型数组接受二进制数据

    -

    可以通过设置一个 XMLHttpRequest 对象的 responseType属性来改变一个从服务器上返回的响应的数据类型。可用的属性值为空字符串 (默认),"arraybuffer"、"blob"、"document"、"json" 和 "text"。response 属性的值会根据 responseType 属性包含实体主体(entity body),它可能会是一个 ArrayBufferBlobDocumentJSON, string,或者为NULL(如果请求未完成或失败)

    +

    可以通过设置一个 XMLHttpRequest 对象的 responseType属性来改变一个从服务器上返回的响应的数据类型。可用的属性值为空字符串 (默认),"arraybuffer"、"blob"、"document"、"json" 和 "text"。response 属性的值会根据 responseType 属性包含实体主体(entity body),它可能会是一个 ArrayBufferBlobDocumentJSON, string,或者为NULL(如果请求未完成或失败)

    下例读取了一个二进制图像文件,并且由该文件的二进制原生字节创建了一个 8 位无符号整数的数组。注意,这不会解码图像,但会读取像素。 你需要一个 png 解码库(png decoding library)。

    @@ -19,13 +19,13 @@

    使用 JavaScript oReq.responseType = "arraybuffer"; oReq.onload = function (oEvent) { -  var arrayBuffer = oReq.response; // 注意:不是 oReq.responseText -  if (arrayBuffer) { -    var byteArray = new Uint8Array(arrayBuffer); -    for (var i = 0; i < byteArray.byteLength; i++) { -      // 对数组中的每个字节进行操作 -    } -  } + var arrayBuffer = oReq.response; // 注意:不是 oReq.responseText + if (arrayBuffer) { + var byteArray = new Uint8Array(arrayBuffer); + for (var i = 0; i < byteArray.byteLength; i++) { + // 对数组中的每个字节进行操作 + } + } }; oReq.send(null); @@ -54,7 +54,7 @@

    在老的浏览器中接受 //XHR binary charset opt by Marcus Granado 2006 [http://mgran.blogspot.com] req.overrideMimeType('text/plain; charset=x-user-defined'); req.send(null); - if (req.status != 200) return ''; + if (req.status != 200) return ''; return req.responseText; }

    @@ -95,7 +95,7 @@

    将类型数组作为二进 var longInt8View = new Uint8Array(myArray); for (var i=0; i< longInt8View.length; i++) { -  longInt8View[i] = i % 255; + longInt8View[i] = i % 255; } var xhr = new XMLHttpRequest; @@ -137,7 +137,7 @@

    Firefox 私有方法

    var mimeType = "text\/plain"; try { var mimeService = Components.classes["@mozilla.org/mime;1"] -          .getService(Components.interfaces.nsIMIMEService); + .getService(Components.interfaces.nsIMIMEService); mimeType = mimeService.getTypeFromFile(file); // file 是一个 nsIFile 对象实例 } catch (oEvent) { /* 丢弃异常,使用默认的 text/plain 类型 */ } diff --git a/files/zh-cn/web/api/xmlhttprequest/setrequestheader/index.html b/files/zh-cn/web/api/xmlhttprequest/setrequestheader/index.html index d91dc4379185f8..2781a71db18a9b 100644 --- a/files/zh-cn/web/api/xmlhttprequest/setrequestheader/index.html +++ b/files/zh-cn/web/api/xmlhttprequest/setrequestheader/index.html @@ -12,7 +12,7 @@

    如果没有设置 {{HTTPHeader("Accept")}} 属性,则此发送出{{domxref("XMLHttpRequest.send", "send()")}} 的值为此属性的默认值:*/*

    -

    安全起见,有些请求头的值只能由 user agent 设置:{{Glossary("Forbidden_header_name", "forbidden header names", 1)}} 和{{Glossary("Forbidden_response_header_name", "forbidden response header names", 1)}}。

    +

    安全起见,有些请求头的值只能由 user agent 设置:{{Glossary("Forbidden_header_name", "forbidden header names", 1)}} 和{{Glossary("Forbidden_response_header_name", "forbidden response header names", 1)}}。

    自定义一些 header 属性进行跨域请求时,可能会遇到"not allowed by Access-Control-Allow-Headers in preflight response",你可能需要在你的服务端设置 "Access-Control-Allow-Headers"。

    diff --git a/files/zh-cn/web/api/xmlhttprequest/status/index.html b/files/zh-cn/web/api/xmlhttprequest/status/index.html index b1d0ac6cd0a758..2a9d7d10a1948e 100644 --- a/files/zh-cn/web/api/xmlhttprequest/status/index.html +++ b/files/zh-cn/web/api/xmlhttprequest/status/index.html @@ -14,11 +14,11 @@ ---
    {{APIRef('XMLHttpRequest')}}
    -
    只读属性 XMLHttpRequest.status 返回了 XMLHttpRequest 响应中的数字状态码。status 的值是一个无符号短整型。在请求完成前,status 的值为 0。值得注意的是,如果 XMLHttpRequest 出错,浏览器返回的 status 也为 0。
    +
    只读属性 XMLHttpRequest.status 返回了 XMLHttpRequest 响应中的数字状态码。status 的值是一个无符号短整型。在请求完成前,status 的值为 0。值得注意的是,如果 XMLHttpRequest 出错,浏览器返回的 status 也为 0。
    -
     
    +
    -
    status 码是标准的 HTTP status codes。举个例子,status 200 代表一个成功的请求。如果服务器响应中没有明确指定 status 码,XMLHttpRequest.status 将会默认为 200
    +
    status 码是标准的 HTTP status codes。举个例子,status 200 代表一个成功的请求。如果服务器响应中没有明确指定 status 码,XMLHttpRequest.status 将会默认为 200

    例子

    diff --git a/files/zh-cn/web/api/xmlhttprequest/statustext/index.html b/files/zh-cn/web/api/xmlhttprequest/statustext/index.html index 9f6b0667acf6a6..1837f9813e80ce 100644 --- a/files/zh-cn/web/api/xmlhttprequest/statustext/index.html +++ b/files/zh-cn/web/api/xmlhttprequest/statustext/index.html @@ -5,7 +5,7 @@ ---
    {{APIRef('XMLHttpRequest')}}
    -
    只读属性 XMLHttpRequest.statusText 返回了XMLHttpRequest 请求中由服务器返回的一个DOMString 类型的文本信息,这则信息中也包含了响应的数字状态码。不同于使用一个数字来指示的状态码XMLHTTPRequest.status,这个属性包含了返回状态对应的文本信息,例如"OK"或是"Not Found"。如果请求的状态readyState的值为"UNSENT"或者"OPENED",则这个属性的值将会是一个空字符串。
    +
    只读属性 XMLHttpRequest.statusText 返回了XMLHttpRequest 请求中由服务器返回的一个DOMString 类型的文本信息,这则信息中也包含了响应的数字状态码。不同于使用一个数字来指示的状态码XMLHTTPRequest.status,这个属性包含了返回状态对应的文本信息,例如"OK"或是"Not Found"。如果请求的状态readyState的值为"UNSENT"或者"OPENED",则这个属性的值将会是一个空字符串。
    diff --git a/files/zh-cn/web/api/xmlhttprequest/synchronous_and_asynchronous_requests/index.html b/files/zh-cn/web/api/xmlhttprequest/synchronous_and_asynchronous_requests/index.html index 13c4e100dd9274..ecd31ef4b6dd4c 100644 --- a/files/zh-cn/web/api/xmlhttprequest/synchronous_and_asynchronous_requests/index.html +++ b/files/zh-cn/web/api/xmlhttprequest/synchronous_and_asynchronous_requests/index.html @@ -121,7 +121,7 @@

    例子:使用超时

    如上,我们指定的超时时间为 2000 ms。

    -

    timeout属性添加于 Gecko 12.0  {{Gecko("12.0")}}。

    +

    timeout属性添加于 Gecko 12.0 {{Gecko("12.0")}}。

    同步请求

    @@ -166,7 +166,7 @@

    例子:在 Worker< <script type="text/javascript"> var oMyWorker = new Worker("myTask.js"); oMyWorker.onmessage = function(oEvent) { -  alert("Worker said: " + oEvent.data); + alert("Worker said: " + oEvent.data); }; oMyWorker.postMessage("Hello"); @@ -184,12 +184,12 @@

    例子:在 Worker<

    myTask.js (包含了Worker代码):

    self.onmessage = function (oEvent) {
    -  if (oEvent.data === "Hello") {
    -    var oReq = new XMLHttpRequest();
    -    oReq.open("GET", "myFile.txt", false); // 同步请求
    -    oReq.send(null);
    -    self.postMessage(oReq.responseText);
    -  }
    +  if (oEvent.data === "Hello") {
    +    var oReq = new XMLHttpRequest();
    +    oReq.open("GET", "myFile.txt", false); // 同步请求
    +    oReq.send(null);
    +    self.postMessage(oReq.responseText);
    +  }
     };
     
    diff --git a/files/zh-cn/web/api/xmlhttprequest/timeout/index.html b/files/zh-cn/web/api/xmlhttprequest/timeout/index.html index 820f84454ed8db..478952a4e49d63 100644 --- a/files/zh-cn/web/api/xmlhttprequest/timeout/index.html +++ b/files/zh-cn/web/api/xmlhttprequest/timeout/index.html @@ -8,7 +8,7 @@ ---
    {{APIRef('XMLHttpRequest')}}
    -

    XMLHttpRequest.timeout 是一个无符号长整型数,代表着一个请求在被自动终止前所消耗的毫秒数。默认值为 0,意味着没有超时。超时并不应该用在一个 {{Glossary('document environment')}} 中的同步 XMLHttpRequests  请求中,否则将会抛出一个 InvalidAccessError 类型的错误。当超时发生, timeout 事件将会被触发。

    +

    XMLHttpRequest.timeout 是一个无符号长整型数,代表着一个请求在被自动终止前所消耗的毫秒数。默认值为 0,意味着没有超时。超时并不应该用在一个 {{Glossary('document environment')}} 中的同步 XMLHttpRequests 请求中,否则将会抛出一个 InvalidAccessError 类型的错误。当超时发生, timeout 事件将会被触发。

    注意:你不能在拥有的 window 中,给同步请求使用超时。

    diff --git a/files/zh-cn/web/api/xmlhttprequest/upload/index.html b/files/zh-cn/web/api/xmlhttprequest/upload/index.html index d0acf379a0deab..e279d2badcfdd1 100644 --- a/files/zh-cn/web/api/xmlhttprequest/upload/index.html +++ b/files/zh-cn/web/api/xmlhttprequest/upload/index.html @@ -5,7 +5,7 @@ ---

    {{APIRef('XMLHttpRequest')}}

    -

    XMLHttpRequest.upload 属性返回一个 {{domxref("XMLHttpRequestUpload")}}对象,用来表示上传的进度。这个对象是不透明的,但是作为一个{{domxref("XMLHttpRequestEventTarget")}},可以通过对其绑定事件来追踪它的进度。

    +

    XMLHttpRequest.upload 属性返回一个 {{domxref("XMLHttpRequestUpload")}}对象,用来表示上传的进度。这个对象是不透明的,但是作为一个{{domxref("XMLHttpRequestEventTarget")}},可以通过对其绑定事件来追踪它的进度。

    可以被绑定在 upload 对象上的事件监听器如下:

    diff --git a/files/zh-cn/web/api/xmlhttprequest/using_xmlhttprequest/index.html b/files/zh-cn/web/api/xmlhttprequest/using_xmlhttprequest/index.html index 486f82ecd793e1..2166038c3977ac 100644 --- a/files/zh-cn/web/api/xmlhttprequest/using_xmlhttprequest/index.html +++ b/files/zh-cn/web/api/xmlhttprequest/using_xmlhttprequest/index.html @@ -12,11 +12,11 @@ - XMLHttpRequest translation_of: Web/API/XMLHttpRequest/Using_XMLHttpRequest --- -
     {{APIRef("XMLHttpRequest")}}
    +
    {{APIRef("XMLHttpRequest")}}
    -

    在该教程中,我们将使用{{domxref("XMLHttpRequest")}} 来发送 HTTP 请求以实现网站和服务器之间的数据交换。XMLHttpRequest常见和晦涩的使用情况都将包含在例子中。

    +

    在该教程中,我们将使用{{domxref("XMLHttpRequest")}} 来发送 HTTP 请求以实现网站和服务器之间的数据交换。XMLHttpRequest常见和晦涩的使用情况都将包含在例子中。

    -

    发送一个 HTTP 请求,需要创建一个 XMLHttpRequest 对象,打开一个 URL,最后发送请求。当所有这些事务完成后,该对象将会包含一些诸如响应主体或 HTTP status 的有用信息。

    +

    发送一个 HTTP 请求,需要创建一个 XMLHttpRequest 对象,打开一个 URL,最后发送请求。当所有这些事务完成后,该对象将会包含一些诸如响应主体或 HTTP status 的有用信息。

    function reqListener () {
       console.log(this.responseText);
    @@ -29,7 +29,7 @@
     
     

    请求类型

    -

    通过 XMLHttpRequest 生成的请求可以有两种方式来获取数据,异步模式或同步模式。请求的类型是由这个 XMLHttpRequest 对象的 open() 方法的第三个参数async的值决定的。如果该参数的值为 false,则该 XMLHttpRequest请求以同步模式进行,否则该过程将以异步模式完成。这两种类型请求的详细讨论和指南可以在同步和异步请求页找到。

    +

    通过 XMLHttpRequest 生成的请求可以有两种方式来获取数据,异步模式或同步模式。请求的类型是由这个 XMLHttpRequest 对象的 open() 方法的第三个参数async的值决定的。如果该参数的值为 false,则该 XMLHttpRequest请求以同步模式进行,否则该过程将以异步模式完成。这两种类型请求的详细讨论和指南可以在同步和异步请求页找到。

    注意:由于对用户体验的负面影响,从 Gecko 30.0{{geckoRelease("30.0")}}版本开始,在主线程上的同步请求已经被弃用。
    @@ -53,7 +53,7 @@

    分析并操作 responseXML 属性注意: 在 W3C XMLHttpRequest 规范中允许 HTML 通过 XMLHttpRequest.responseXML 属性进行解析。更多详细内容请阅读 HTML in XMLHttpRequest 。本条注意已在英文原文中更新。

    -

    注意: XMLHttpRequest 现在可以使用 {{domxref("XMLHttpRequest.responseXML", "responseXML")}} 属性解释 HTML。请阅读 HTML in XMLHttpRequest 这篇文章了解相关用法。

    +

    注意: XMLHttpRequest 现在可以使用 {{domxref("XMLHttpRequest.responseXML", "responseXML")}} 属性解释 HTML。请阅读 HTML in XMLHttpRequest 这篇文章了解相关用法。

    解析和操作包含 HTML 文档的 responseText 属性

    @@ -77,9 +77,9 @@

    处理二进制数据

    /* ... */

    -

    然而,自从 {{domxref("XMLHttpRequest.responseType", "responseType")}} 属性目前支持大量附加的内容类型后,已经出现了很多的现代技术,它们使得发送和接收二进制数据变得更加容易。

    +

    然而,自从 {{domxref("XMLHttpRequest.responseType", "responseType")}} 属性目前支持大量附加的内容类型后,已经出现了很多的现代技术,它们使得发送和接收二进制数据变得更加容易。

    -

    例如,考虑以下代码,它使用 "arraybuffer" 的 responseType 来将远程内容获取到一个存储原生二进制数据的 {{jsxref("ArrayBuffer")}} 对象中。

    +

    例如,考虑以下代码,它使用 "arraybuffer"responseType 来将远程内容获取到一个存储原生二进制数据的 {{jsxref("ArrayBuffer")}} 对象中。

    var oReq = new XMLHttpRequest();
     
    @@ -103,7 +103,7 @@ 

    监测进度

    {{event("progress")}}
    检索的数据量发生了变化。
    {{event("load")}}
    -
    传输完成,所有数据保存在 response 中。
    +
    传输完成,所有数据保存在 response 中。
    var oReq = new XMLHttpRequest();
    @@ -539,15 +539,15 @@ 

    一个小框架

    AJAXSubmit(myForm);
    -
    注意: 该框架使用 {{domxref("FileReader")}} API 进行文件的上传。这是一个较新的 API 并且还未在 IE9 及以下版本的浏览器中实现。因此,使用 AJAX 上传仍是一项实验性的技术。如果你不需要上传 二进制文件,该框架在大多数浏览器中运行良好。
    +
    注意: 该框架使用 {{domxref("FileReader")}} API 进行文件的上传。这是一个较新的 API 并且还未在 IE9 及以下版本的浏览器中实现。因此,使用 AJAX 上传仍是一项实验性的技术。如果你不需要上传 二进制文件,该框架在大多数浏览器中运行良好。
    -
    注意: 发送二进制内容的最佳途径是通过 {{jsxref("ArrayBuffer", "ArrayBuffers")}} 或 {{domxref("Blob", "Blobs")}} 结合 {{domxref("XMLHttpRequest.send()", "send()")}} 方法甚至 FileReader API 的 {{domxref("FileReader.readAsArrayBuffer()", "readAsArrayBuffer()")}} 方法。但是,自从该脚本的目的变成处理 可字符串化 的原始数据以来,我们使用 {{domxref("XMLHttpRequest.sendAsBinary()", "sendAsBinary()")}} 方法结合 FileReader API 的 {{domxref("FileReader.readAsBinaryString()", "readAsBinaryString()")}} 方法。同样地,上述脚本仅当你处理小文件时行之有效。如果不打算上传二进制内容,就考虑使用 FormData API 来替代。
    +
    注意: 发送二进制内容的最佳途径是通过 {{jsxref("ArrayBuffer", "ArrayBuffers")}} 或 {{domxref("Blob", "Blobs")}} 结合 {{domxref("XMLHttpRequest.send()", "send()")}} 方法甚至 FileReader API 的 {{domxref("FileReader.readAsArrayBuffer()", "readAsArrayBuffer()")}} 方法。但是,自从该脚本的目的变成处理 可字符串化 的原始数据以来,我们使用 {{domxref("XMLHttpRequest.sendAsBinary()", "sendAsBinary()")}} 方法结合 FileReader API 的 {{domxref("FileReader.readAsBinaryString()", "readAsBinaryString()")}} 方法。同样地,上述脚本仅当你处理小文件时行之有效。如果不打算上传二进制内容,就考虑使用 FormData API 来替代。
    -
    注意: 非标准的 sendAsBinary 方法从 Gecko 31 {{geckoRelease(31)}} 开始将会废弃并且会很快被移除。标准方法 send(Blob data) 将会取而代之。
    +
    注意: 非标准的 sendAsBinary 方法从 Gecko 31 {{geckoRelease(31)}} 开始将会废弃并且会很快被移除。标准方法 send(Blob data) 将会取而代之。

    使用 FormData 对象

    -

    {{domxref("XMLHttpRequest.FormData", "FormData")}} 构造函数能使你编译一个键/值对的集合,然后使用 XMLHttpRequest 发送出去。其主要用于发送表格数据,但是也能被单独用来传输表格中用户指定的数据。传输的数据格式与表格使用 submit() 方法发送数据的格式一致,如果该表格的编码类型被设为 "multipart/form-data". FormData 对象可以被结合 XMLHttpRequest 的多种方法利用。例如,想了解如何利用 FormData 与 XMLHttpRequests,请转到 Using FormData Objects 页面。为了说教的目的,这里有一个早期的例子,被转译成了使用 FormData API 的形式。注意以下代码片段:

    +

    {{domxref("XMLHttpRequest.FormData", "FormData")}} 构造函数能使你编译一个键/值对的集合,然后使用 XMLHttpRequest 发送出去。其主要用于发送表格数据,但是也能被单独用来传输表格中用户指定的数据。传输的数据格式与表格使用 submit() 方法发送数据的格式一致,如果该表格的编码类型被设为 "multipart/form-data". FormData 对象可以被结合 XMLHttpRequest 的多种方法利用。例如,想了解如何利用 FormData 与 XMLHttpRequests,请转到 Using FormData Objects 页面。为了说教的目的,这里有一个早期的例子,被转译成了使用 FormData API 的形式。注意以下代码片段:

    <!doctype html>
    @@ -673,7 +673,7 @@ 

    使用 FormData 对象

    </html>
    -
    注意: 如之前所述,{{domxref("FormData")}} 对象并不是 可字符串化 (stringifiable) 的对象。如果你想要字符串化一个提交数据,请使用这个 早期的纯 AJAX 例子. 同时也要注意,尽管这个例子中有一些 file {{ HTMLElement("input") }} 字段,但当你通过 FormData API 提交一个表格时,也无须使用 {{domxref("FileReader")}} API: 文件被自动加载并上传。
    +
    注意: 如之前所述,{{domxref("FormData")}} 对象并不是 可字符串化 (stringifiable) 的对象。如果你想要字符串化一个提交数据,请使用这个 早期的纯 AJAX 例子. 同时也要注意,尽管这个例子中有一些 file {{ HTMLElement("input") }} 字段,但当你通过 FormData API 提交一个表格时,也无须使用 {{domxref("FileReader")}} API: 文件被自动加载并上传。

    获取最后修改日期

    @@ -717,7 +717,7 @@

    最后修改日期改变后的操 console.log("The page '" + this.filepath + "' has been changed on " + (new Date(nModif)).toLocaleString() + "!"); });

    -

    如果你想要了解 当前页面是否发生了改变,请阅读这篇文章:{{domxref("document.lastModified")}}.

    +

    如果你想要了解 当前页面是否发生了改变,请阅读这篇文章:{{domxref("document.lastModified")}}.

    跨站的 XMLHttpRequest

    @@ -763,7 +763,7 @@

    XMLHttpRequests 被停止

    Worker

    -

    设置 overrideMimeType 后在 {{domxref("Worker")}} 中无法正常工作,详见 {{bug(678057)}}。其他浏览器也许会以不同的手段处理。

    +

    设置 overrideMimeType 后在 {{domxref("Worker")}} 中无法正常工作,详见 {{bug(678057)}}。其他浏览器也许会以不同的手段处理。

    规范

    diff --git a/files/zh-cn/web/api/xmlhttprequest/using_xmlhttprequest_in_ie6/index.html b/files/zh-cn/web/api/xmlhttprequest/using_xmlhttprequest_in_ie6/index.html index 2c1231a04afbf5..686a50f3da16ea 100644 --- a/files/zh-cn/web/api/xmlhttprequest/using_xmlhttprequest_in_ie6/index.html +++ b/files/zh-cn/web/api/xmlhttprequest/using_xmlhttprequest_in_ie6/index.html @@ -3,7 +3,7 @@ slug: Web/API/XMLHttpRequest/Using_XMLHttpRequest_in_IE6 translation_of: Web/API/XMLHttpRequest/Using_XMLHttpRequest_in_IE6 --- -

    XMLHttpRequest 在 Internet Explorer 5.0 上作为 ActiveX 控件第一次被 Microsoft 引入。然而,在 IE7 和其它浏览器上,XMLHttpRequest 作为本地 JavaScript 对象而存在。

    +

    XMLHttpRequest 在 Internet Explorer 5.0 上作为 ActiveX 控件第一次被 Microsoft 引入。然而,在 IE7 和其它浏览器上,XMLHttpRequest 作为本地 JavaScript 对象而存在。

    在现代的浏览器上,你可以使用下面的代码创建一个新的 XMLHttpRequest 对象:

    @@ -24,5 +24,5 @@

    更多

    diff --git a/files/zh-cn/web/api/xmlhttprequest/withcredentials/index.html b/files/zh-cn/web/api/xmlhttprequest/withcredentials/index.html index 63bcf6f47232c1..f245d5ac33f628 100644 --- a/files/zh-cn/web/api/xmlhttprequest/withcredentials/index.html +++ b/files/zh-cn/web/api/xmlhttprequest/withcredentials/index.html @@ -19,7 +19,7 @@
    -

    Note:不同域下的 XmlHttpRequest 响应,不论其 Access-Control- Header 设置什么值,都无法为它自身站点设置 Cookie 值,除非它在请求之前将 withCredentials 设为 true。

    +

    Note:不同域下的 XmlHttpRequest 响应,不论其 Access-Control- Header 设置什么值,都无法为它自身站点设置 Cookie 值,除非它在请求之前将 withCredentials 设为 true。

    实例

    diff --git a/files/zh-cn/web/api/xmlserializer/index.html b/files/zh-cn/web/api/xmlserializer/index.html index 0c175b06611dfb..a1d1e036f82d7d 100644 --- a/files/zh-cn/web/api/xmlserializer/index.html +++ b/files/zh-cn/web/api/xmlserializer/index.html @@ -12,7 +12,7 @@ ---
    {{APIRef("XMLSerializer")}}
    -
    XMLSerializer接口提供{{domxref("XMLSerializer.serializeToString", "serializeToString()")}} 方法来构建一个代表 {{Glossary("DOM")}} 树的 XML 字符串。
    +
    XMLSerializer接口提供{{domxref("XMLSerializer.serializeToString", "serializeToString()")}} 方法来构建一个代表 {{Glossary("DOM")}} 树的 XML 字符串。

    方法

    diff --git a/files/zh-cn/web/api/xpathevaluator/index.html b/files/zh-cn/web/api/xpathevaluator/index.html index 286f8a21774b8f..b7c8e84655fbc9 100644 --- a/files/zh-cn/web/api/xpathevaluator/index.html +++ b/files/zh-cn/web/api/xpathevaluator/index.html @@ -17,7 +17,7 @@ ---

    {{APIRef("DOM XPath")}}

    -

     XPathEvaluator  接口能够对 {{Glossary("XPath")}} 表达式进行编译和求值。

    +

    XPathEvaluator 接口能够对 {{Glossary("XPath")}} 表达式进行编译和求值。

    该接口实现自{{domxref("Document")}}的接口。

    From 38078fa14162d71b97ce29be4f18718584999b5c Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 8 Jul 2022 02:17:36 +0900 Subject: [PATCH 002/100] =?UTF-8?q?KeyboardEvent=20=E4=BB=A5=E4=B8=8B?= =?UTF-8?q?=E3=81=AE=E8=A8=98=E4=BA=8B=E3=82=92=E7=A7=BB=E8=A1=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/keyboardevent/code/{index.html => index.md} | 0 files/ja/web/api/keyboardevent/{index.html => index.md} | 0 .../ja/web/api/keyboardevent/iscomposing/{index.html => index.md} | 0 files/ja/web/api/keyboardevent/key/{index.html => index.md} | 0 files/ja/web/api/keyboardevent/keycode/{index.html => index.md} | 0 5 files changed, 0 insertions(+), 0 deletions(-) rename files/ja/web/api/keyboardevent/code/{index.html => index.md} (100%) rename files/ja/web/api/keyboardevent/{index.html => index.md} (100%) rename files/ja/web/api/keyboardevent/iscomposing/{index.html => index.md} (100%) rename files/ja/web/api/keyboardevent/key/{index.html => index.md} (100%) rename files/ja/web/api/keyboardevent/keycode/{index.html => index.md} (100%) diff --git a/files/ja/web/api/keyboardevent/code/index.html b/files/ja/web/api/keyboardevent/code/index.md similarity index 100% rename from files/ja/web/api/keyboardevent/code/index.html rename to files/ja/web/api/keyboardevent/code/index.md diff --git a/files/ja/web/api/keyboardevent/index.html b/files/ja/web/api/keyboardevent/index.md similarity index 100% rename from files/ja/web/api/keyboardevent/index.html rename to files/ja/web/api/keyboardevent/index.md diff --git a/files/ja/web/api/keyboardevent/iscomposing/index.html b/files/ja/web/api/keyboardevent/iscomposing/index.md similarity index 100% rename from files/ja/web/api/keyboardevent/iscomposing/index.html rename to files/ja/web/api/keyboardevent/iscomposing/index.md diff --git a/files/ja/web/api/keyboardevent/key/index.html b/files/ja/web/api/keyboardevent/key/index.md similarity index 100% rename from files/ja/web/api/keyboardevent/key/index.html rename to files/ja/web/api/keyboardevent/key/index.md diff --git a/files/ja/web/api/keyboardevent/keycode/index.html b/files/ja/web/api/keyboardevent/keycode/index.md similarity index 100% rename from files/ja/web/api/keyboardevent/keycode/index.html rename to files/ja/web/api/keyboardevent/keycode/index.md From 0198d587666e48b31434af5e4c6f614da2a1c5ba Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 9 Jul 2022 11:19:24 +0900 Subject: [PATCH 003/100] =?UTF-8?q?2022/07/09=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/keyboardevent/index.md | 543 +++++++++--------- .../api/keyboardevent/iscomposing/index.md | 67 +-- 2 files changed, 285 insertions(+), 325 deletions(-) diff --git a/files/ja/web/api/keyboardevent/index.md b/files/ja/web/api/keyboardevent/index.md index e6d3cc794dc95f..21488618c5ac51 100644 --- a/files/ja/web/api/keyboardevent/index.md +++ b/files/ja/web/api/keyboardevent/index.md @@ -1,6 +1,7 @@ --- title: KeyboardEvent slug: Web/API/KeyboardEvent +page-type: web-api-interface tags: - API - DOM @@ -15,258 +16,257 @@ tags: - UI Events - keyboard - user input - - イベント +browser-compat: api.KeyboardEvent translation_of: Web/API/KeyboardEvent --- -
    {{APIRef("DOM Events")}}
    +{{APIRef("UI Events")}} -

    KeyboardEvent オブジェクトは、キーボードによるユーザーの操作を示します。個々のイベントがユーザーとキーとの間の単一の操作 (または修飾キーとの組み合わせ) を表します。イベントの種類 ({{event('keydown')}}, {{event('keypress')}}, {{event('keyup')}}) はキーボード操作が発生した種類を識別します。

    +**`KeyboardEvent`** オブジェクトは、キーボードによるユーザーの操作を示します。個々のイベントがユーザーとキーとの間の単一の操作(または修飾キーとの組み合わせ)を表します。イベントの種類 ({{domxref("Element/keydown_event", "keydown")}}, {{domxref("Element/keypress_event", "keypress")}}, {{domxref("Element/keyup_event", "keyup")}}) はキーボード操作が発生した種類を識別します。 -
    メモ: KeyboardEvent は、単にユーザーがキーボードのキーで行った操作が何であるかを低水準で示すものであり、その操作のその場面における意味は持ちません。テキストの入力を処理したい場合は、代わりに {{event("input")}} イベントを使用してください。ユーザーが他の種類のテキスト入力、例えば、タブレット端末やタブレット機器による手書き入力システムなどを使用している場合は、キーボードイベントが発生することはありません。
    +> **Note:** `KeyboardEvent` は、単にユーザーがキーボードのキーで行った操作が何であるかを低水準で示すものであり、その操作のその場面における意味は持ちません。テキストの入力を処理したい場合は、代わりに {{domxref("HTMLElement/input_event", "input")}} イベントを使用してください。ユーザーが他の種類のテキスト入力、例えば、タブレット端末やタブレット機器による手書き入力システムなどを使用している場合、キーボードイベントが発生することはありません。 -

    {{InheritanceDiagram}}

    +{{InheritanceDiagram}} -

    コンストラクター

    +## コンストラクター -
    -
    {{domxref("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}
    -
    KeyboardEvent オブジェクトを生成します。
    -
    +- {{domxref("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}} + - : `KeyboardEvent` オブジェクトを生成します。 -

    定数

    +## 定数 -

    KeyboardEvent インターフェースは、以下の定数を定義しています。

    +`KeyboardEvent` インターフェースは、以下の定数を定義しています。 -

    Keyboard locations

    +### キーボード上の位置 -

    以下の定数は、キーイベントがキーボードのどの部分から発信されるかを識別します。これらは、KeyboardEvent.DOM_KEY_LOCATION_STANDARD などとしてアクセスされます。

    +以下の定数は、キーイベントがキーボードのどの部分から発生したかを識別します。これらは、`KeyboardEvent.DOM_KEY_LOCATION_STANDARD` などとしてアクセスされます。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    キーボードの場所の識別子
    定数説明
    DOM_KEY_LOCATION_STANDARD0x00 -

    イベントによって記述されたキーは、キーボードの特定の領域にあることが特定されず、テンキー上にはなく(NumLock キーでない限り)、キーボードの左右に重複しているキーについては、何らかの理由で、そのキーは、その場所に関連付けられていないことになります。

    - -

    例としては、標準的な PC 101 US キーボードの英数字キー、NumLock キー、スペースバーなどがあります。

    -
    DOM_KEY_LOCATION_LEFT0x01 -

    キーは、キーボード上の複数の位置に存在してもよいものであり、この例では、キーボードの左側にある。

    - -

    例としては、左の Ctrl キー、Macintosh キーボードの左の Command キー、左の Shift キーなどがあります。

    -
    DOM_KEY_LOCATION_RIGHT0x02 -

    キーは、キーボード上の複数の位置に存在してもよいものであり、この場合、キーボードの右側に位置している。

    - -

    例としては、右の Shift キーや右の Alt キー (Mac キーボードの Option) などがあります。

    -
    DOM_KEY_LOCATION_NUMPAD0x03 -

    キーはテンキー上に配置されているか、またはキーの発生源となる場所が複数ある場合はテンキーに関連付けられた仮想キーとなります。NumLock キーはこのグループには該当せず、常に DOM_KEY_LOCATION_STANDARD の位置でエンコードされています。

    - -

    例としては、テンキーパッドの数字、キーパッドの Enter キー、キーパッドの小数点などがあります。

    -
    + キーボード上の位置の識別子 +
    定数説明
    DOM_KEY_LOCATION_STANDARD0x00 +

    + このイベントによって記述されたキーは、キーボードの特定の範囲にあるものではないことを表します。テンキー上にあるわけでもなく(NumLock キーでない限り)、キーボードの左右で重複しているキーについては、何らかの理由でその位置と関連付けないことになっています。 +

    +

    + 例としては、標準的な PC 101 US キーボードの英数字キー、 NumLock キー、スペースバーなどがあります。 +

    DOM_KEY_LOCATION_LEFT0x01 +

    + このキーは、キーボード上の複数の位置に存在する可能性があるものであり、この場合は、キーボードの左側にあるものです。 +

    +

    + 例としては、左の Ctrl キー、 Macintosh キーボードの左の Command キー、左の Shift キーなどがあります。 +

    DOM_KEY_LOCATION_RIGHT0x02 +

    + このキーは、キーボード上の複数の位置に存在する可能性があるものであり、この場合は、キーボードの右側にあるものです。 +

    +

    + 例としては、右の Shift キーや右の Alt キー(Mac キーボードの Option キー)などがあります。 +

    +
    DOM_KEY_LOCATION_NUMPAD0x03 +

    + このキーは、テンキー上に配置されているか、キーが複数の場所から発信される場合は、テンキーに関連付けられた仮想キーとなります。 NumLock キーはこのグループには該当せず、常に位置を DOM_KEY_LOCATION_STANDARD として符号化されます。 +

    +

    + 例としては、テンキーの数字、テンキー側の Enter キー、テンキー側の小数点などがあります。 +

    +
    -
    -
    - -

    プロパティ

    - -

    このインターフェイスでは、親に相当する {{domxref("UIEvent")}} と {{domxref("Event")}} の両者からもプロパティを継承しています。

    - -
    -
    {{domxref("KeyboardEvent.altKey")}} {{Readonlyinline}}
    -
    そのキーイベントが発生した際に Alt (OS X の場合は Option または ) キーが押されていれば {{jsxref("Boolean")}} true を返します。
    -
    - -
    -
    {{domxref("KeyboardEvent.code")}} {{Readonlyinline}}
    -
    そのイベントが表すキーについて、キーのコード値を {{domxref("DOMString")}} で返します。 -
    警告: これはユーザーのキーボード配列を無視しますので、ユーザーが QWERTY キーボード配列の "Y" の位置のキー (ホーム行の上の行の中ほど) を押すと、ユーザーが QWERTZ キーボード (ユーザーが "Z" だと思っており、その他のプロパティも "Z" を示している) や Dvorak キーボード配列 (ユーザーは "F" だと思っている) を使用していても、常に "KeyY" を返します。
    -
    -
    - -
    -
    {{domxref("KeyboardEvent.ctrlKey")}} {{Readonlyinline}}
    -
    そのキーイベントが発生した際に Ctrl キーが押されていれば {{jsxref("Boolean")}}  true を返します。
    -
    {{domxref("KeyboardEvent.isComposing")}} {{Readonlyinline}}
    -
    そのイベントが compositionstartcompositionend の間に発生したものであれば {{jsxref("Boolean")}} true を返します。
    -
    {{domxref("KeyboardEvent.key")}} {{Readonlyinline}}
    -
    イベントが表すキーのキー値を表す {{domxref("DOMString")}} を返します。
    -
    {{domxref("KeyboardEvent.locale")}} {{Readonlyinline}}
    -
    キーボードが設定されているロケールを示すロケール文字列を {{domxref("DOMString")}} で返します。ブラウザやデバイスがキーボードのロケールを知らない場合は空文字列となります。 -
    メモ: このプロパティは入力データのロケールを表すことはありません。例えば、ユーザーが使用するキーボードレイアウトと入力テキストとで言語が異なる場合があります。
    -
    -
    {{domxref("KeyboardEvent.location")}}{{Readonlyinline}}
    -
    キーボードなどの入力デバイス上のキーの位置を表す {{jsxref("Number")}} を返します。位置を特定する定数の一覧は、上記の Keyboard locations の中にあります。
    -
    {{domxref("KeyboardEvent.metaKey")}} {{Readonlyinline}}
    -
    {{jsxref("Boolean")}} を返し、そのキーイベントが発生した際に Meta キー(Mac キーボードは ⌘ Command キー、 Windows キーボードは Windows キー )が押されていれば true を返します。
    -
    {{domxref("KeyboardEvent.repeat")}} {{Readonlyinline}}
    -
    {{jsxref("Boolean")}} を返し、そのキーが自動的に繰り返し押下されていた場合に true を返します。
    -
    {{domxref("KeyboardEvent.shiftKey")}} {{Readonlyinline}}
    -
    {{jsxref("Boolean")}} を返し、そのキーイベントが発生した際に Shift キーが押されていれば true を返します。
    -
    - -

    メソッド

    - -

    このインターフェイスでは、親に相当する {{domxref("UIEvent")}} と {{domxref("Event")}} の両者からもメソッドを継承しています。

    - -
    -
    {{domxref("KeyboardEvent.getModifierState()")}}
    -
    そのイベントが発生した際に修飾キー (Alt / Shift / Ctrl / Meta) が押されていたかどうかを表す{{jsxref("Boolean")}} を返します。
    -
    - -

    廃止されたメソッド

    - -
    -
    {{domxref("KeyboardEvent.initKeyEvent()")}} {{deprecated_inline}}
    -
    KeyboardEvent オブジェクトを初期化します。これは Firefox でのみ実装されていたもので、Firefox でもサポートされていないため、代わりに {{domxref("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}} コンストラクタを使用する必要があります。
    -
    {{domxref("KeyboardEvent.initKeyboardEvent()")}} {{deprecated_inline}}
    -
    KeyboardEvent オブジェクトを初期化します。これは現在では非推奨です。代わりに {{domxref("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}} コンストラクタを使用する必要があります。
    -
    - -

    廃止されたプロパティ

    - -
    -
    {{domxref("KeyboardEvent.char")}} {{Non-standard_inline}}{{Deprecated_inline}}{{Readonlyinline}}
    -
    キーの文字値を表す {{domxref("DOMString")}} を返します。キーが印刷可能な文字に対応している場合、この値はその文字を含む空でない Unicode 文字列となります。キーが印刷可能な表現を持たない場合は、これは空の文字列です。 -
    注意: キーが複数の文字を挿入するマクロとして使用されている場合、この属性の値は最初の文字だけでなく文字列全体となります。
    -
    -
    {{domxref("KeyboardEvent.charCode")}} {{Deprecated_inline}}{{Readonlyinline}}
    -
    キーの Unicode 参照番号を表す {{jsxref("Number")}} を返します。この属性は、keypress イベントでのみ使用されます。char 属性が複数の文字を含むキーの場合、これはその属性の最初の文字の Unicode 値となります。Firefox 26 では、これは印刷可能な文字のコードを返します。 -
    警告: この属性は非推奨です。利用可能な場合は、代わりに {{domxref("KeyboardEvent.key")}} を使用する必要があります。
    -
    -
    {{domxref("KeyboardEvent.keyCode")}} {{deprecated_inline}}{{Readonlyinline}}
    -
    押されたキーの変更されていない値を示す、システムや実装に依存した数値コードを表す {{jsxref("Number")}} を返します。 -
    警告: この属性は非推奨です。利用可能な場合は、代わりに {{domxref("KeyboardEvent.key")}} を使用する必要があります。
    -
    -
    {{domxref("KeyboardEvent.keyIdentifier")}} {{Non-standard_inline}}{{deprecated_inline}}{{Readonlyinline}}
    -
    このプロパティは非標準であり、{{domxref("KeyboardEvent.key")}} を支持して非推奨とされています。これは古いバージョンの DOM Level 3 Events の一部でした。
    -
    {{domxref("KeyboardEvent.keyLocation")}} {{Non-standard_inline}}{{deprecated_inline}}{{Readonlyinline}}
    -
    これは {{domxref("KeyboardEvent.location")}} の非標準の非推奨エイリアスです。これは古いバージョンの DOM Level 3 Events の一部でした。
    -
    {{domxref("KeyboardEvent.which")}} {{deprecated_inline}} {{Readonlyinline}}
    -
    押されたキーの変更されていない値を識別するシステムおよび実装依存の数値コードを表す {{jsxref("Number")}} を返します。これは通常 keyCode と同じです。 -
    警告: この属性は非推奨です。利用可能な場合は、代わりに {{domxref("KeyboardEvent.key")}} を使用する必要があります。
    -
    -
    - -

    イベント

    - -

    以下のイベントは、KeyboardEvent 型に基づいています。これらのイベントは、{{domxref("Element")}}、{{domxref("Document")}}、および {{domxref("Window")}} を含む {{domxref("GlobalEventHandlers")}} を実装している任意のオブジェクトに配信することができます。以下のリストでは、各イベントは、そのイベントの Document ハンドラのドキュメントにリンクしています。

    - -
    -
    {{domxref("Document.keydown_event", "keydown")}}
    -
    キーが押されました。
    -
    {{domxref("Document.keyup_event", "keyup")}}
    -
    キーが離されました。
    -
    - -

    廃止されたイベント

    - -
    -
    {{domxref("Document.keypress_event", "keypress")}} {{obsolete_inline}}
    -
    通常は文字値を生成するキーが押されました。このイベントはデバイス依存度が高く、時代遅れのものです。使用すべきではありません。
    -
    - -

    使用上の注意

    - -

    イベントには keydown / keypress / keyup の 3 種類があります。 Gecko ではほとんどのキーにおいて、以下のようにキーイベントが連続して発生します。

    - -
      -
    1. そのキーが最初に押された時点で keydown イベントが発生します。
    2. -
    3. そのキーが修飾キーでなかった場合、 keypress イベントが発生します。
    4. -
    5. ユーザがキーから指を離した時点で keyup イベントが発生します。
    6. -
    - -

    特殊な場合

    - -

    Caps Lock や Num Lock、 Scroll Lock などのキーは LED 表示も切り替わります。このようなキーについて、 Windows と Linux では keydownkeyup イベントのみが発生します。

    - -
    -

    Linux の Firefox 12 以前では keypress イベントも発生していました。

    -
    - -

    しかし Mac OS X のイベントモデルに関する制約から、Mac OS X の Caps Lock は keydown イベントのみが発生します。 (2007 年モデル以前の) ノート型では Num Lock もサポートされていましたが、今日の Mac OS X では外部キーボードにおいても Num Lock に対応していません。 Num Lock キーがある古い MacBook 上では、Num Lock キーによってイベントは何も発生しません。また、 F14 キーが接続されている外部キーボードであれば、 Gecko は Scroll Lock に対応しています。古い特定のバージョンの Firefox では、このキーによって keypress イベントが発生していました。この矛盾する挙動は {{bug(602812)}} で修正されました。

    - -

    自動リピートの扱い

    - -

    キーが押されたままになると自動リピートが始まります。これによって以下のようにイベントが連続して発生します。

    - -
      -
    1. keydown
    2. -
    3. keypress
    4. -
    5. keydown
    6. -
    7. keypress
    8. -
    9. <<ユーザがキーから指を離すまで繰り返し>>
    10. -
    11. keyup
    12. -
    - -

    この流れは DOM Level 3 仕様書に定義されているものです。しかし、これには以下のような注意点があります。

    - -

    Ubuntu 9.4 など一部の GTK 環境における自動リピート

    - -

    GTK を用いた環境の中には、自動リピート時にネイティブの key-up イベントが発生するものがあります。このため、キーが連続して押されているのか自動リピートなのかを Gecko 側から認識することはできません。そのようなプラットフォームでの自動リピート時では、以下のようにキーイベントが連続して発生します。

    +## プロパティ -
      -
    1. keydown
    2. -
    3. keypress
    4. -
    5. keyup
    6. -
    7. keydown
    8. -
    9. keypress
    10. -
    11. keyup
    12. -
    13. <<ユーザがキーから指を離すまで繰り返し>>
    14. -
    15. keyup
    16. -
    - -

    こういった環境では残念ながら、自動リピートなのか連続して押されているのかをウェブコンテンツ側から区別することはできません。

    - -

    Gecko 5.0 以前の自動リピートの扱い

    - -

    Gecko 5.0 {{geckoRelease('5.0')}} 以前では、プラットフォーム間でキーボードのイベントハンドリングに差異が生じていました。

    - -
    -
    Windows
    -
    自動リピートの挙動に関して Gecko 4.0 とそれ以降で変化はありません。
    -
    Mac
    -
    最初に keydown イベントが発生した後、 keyup イベントが発生するまでは keypress イベントのみが発生します。断続的に keydown イベントが発生することはありません。
    -
    Linux
    -
    イベントの挙動はプラットフォームによって異なります。ネイティブのイベントモデルによって、 Windows のような挙動を示したり、 Mac のような挙動を示すものがあります。
    -
    - -

    メモ: 手動でイベントを発生させても、関連する既定のアクションは生じません。例えば、手動でキーイベントを発生させても、その文字がテキストとして入力されることはありません。このような UI イベントの挙動は、セキュリティを意識して設計されています。この設計により、ブラウザーとやり取りするユーザー操作をスクリプトが模倣できないようにしています。

    +_このインターフェイスには、親である {{domxref("UIEvent")}} および {{domxref("Event")}} から継承したプロパティもあります。_ -

    +- {{domxref("KeyboardEvent.altKey")}} {{Readonlyinline}} -
    <!DOCTYPE html>
    -<html>
    -<head>
    -<script>
    +  - : 論理値で、このキーイベントが発生した際に Alt (macOS の場合は Option または )キーが押されていれば `true` を返します。
    +
    +- {{domxref("KeyboardEvent.code")}} {{Readonlyinline}}
    +
    +  - : 文字列で、このイベントが表す物理キーのコード値を返します。
    +
    +    > **Warning:** これはユーザーのキーボードレイアウトを無視します。つまり、ユーザーが  QWERTY キーボードレイアウトの "Y" の位置(ホーム行の上の行の中央付近)でキーを押した場合、ユーザーが QWERTZ キーボード(これはユーザーが "Z" "を期待し、他のすべてのプロパティが "Z" を示すことになる)または Dvorak キーボードレイアウト(これはユーザーが "F" を期待する)であっても、常に "KeyY" を返します。ユーザーに正しいキーストロークを表示したい場合は、 {{domxref("Keyboard.getLayoutMap()")}} を使用してください。
    +
    +- {{domxref("KeyboardEvent.ctrlKey")}} {{Readonlyinline}}
    +
    +  - : 論理値で、そのキーイベントが発生した際に Ctrl キーが押されていれば `true` を返します。
    +
    +- {{domxref("KeyboardEvent.isComposing")}} {{Readonlyinline}}
    +  - : 論理値で、このイベントが `compositionstart` と `compositionend` の間に発生したものであれば `true` を返します。
    +- {{domxref("KeyboardEvent.key")}} {{Readonlyinline}}
    +  - : 文字列で、このイベントが表すキーのキー値を表します。
    +- {{domxref("KeyboardEvent.locale")}} {{Readonlyinline}}
    +
    +  - : 文字列で、キーボードに設定されているロケールを示すロケール文字列を返します。ブラウザーや端末がキーボードのロケールを知らない場合は空文字列となります。
    +
    +    > **Note:** このプロパティは入力データのロケールを表すわけではありません。例えば、ユーザーが使用するキーボードレイアウトと入力テキストとで言語が異なる場合があります。
    +
    +- {{domxref("KeyboardEvent.location")}} {{Readonlyinline}}
    +  - : 数値で、キーボードなどの入力機器上のキーの位置を表す値を返します。位置を特定する定数の一覧は、上記の[キーボード上の位置](#キーボード上の位置)にあります。
    +- {{domxref("KeyboardEvent.metaKey")}} {{Readonlyinline}}
    +
    +  - : 論理値で、このキーイベントが発生した際に Meta キー(Mac キーボードでは ⌘ Command キー、 Windows キーボードでは Windows キー ())が押されていれば `true` を返します。
    +
    +- {{domxref("KeyboardEvent.repeat")}} {{Readonlyinline}}
    +  - : 論理値で、このキーが押し続けられて自動リピートしている場合に `true` を返します。
    +- {{domxref("KeyboardEvent.shiftKey")}} {{Readonlyinline}}
    +
    +  - : 論理値で、このキーイベントが発生した際に Shift キーが押されていれば `true` を返します。
    +
    +## メソッド
    +
    +_このインターフェイスには、親である {{domxref("UIEvent")}} および {{domxref("Event")}} から継承したメソッドもあります。_
    +
    +- {{domxref("KeyboardEvent.getModifierState()")}}
    +
    +  - : そのイベントが発生した際に修飾キー (Alt / Shift / Ctrl / Meta) が押されていたかどうかを表す論理値を返します。
    +
    +## 廃止されたメソッド
    +
    +- {{domxref("KeyboardEvent.initKeyEvent()")}} {{deprecated_inline}}
    +  - : `KeyboardEvent` オブジェクトを初期化します。これは Firefox でのみ実装されていたものですが、もう Firefox でも対応していません。代わりに {{domxref("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}} コンストラクターを使用してください。
    +- {{domxref("KeyboardEvent.initKeyboardEvent()")}} {{deprecated_inline}}
    +  - : `KeyboardEvent` オブジェクトを初期化します。これは非推奨になりました。代わりに {{domxref("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}} コンストラクターを使用してください。
    +
    +## 廃止されたプロパティ
    +
    +- {{domxref("KeyboardEvent.char")}} {{Non-standard_inline}}{{Deprecated_inline}}{{Readonlyinline}}
    +
    +  - : このキーの文字値を表す文字列を返します。キーが表示可能な文字に対応している場合、この値はその文字を含む空でない Unicode 文字列となります。キーが表示可能な表現を持たない場合は、これは空文字列です。
    +
    +    > **Note:** キーが複数の文字を挿入するマクロとして使用されている場合、この属性の値は最初の文字だけでなく文字列全体となります。
    +
    +- {{domxref("KeyboardEvent.charCode")}} {{Deprecated_inline}}{{Readonlyinline}}
    +
    +  - : このキーの Unicode 参照番号を表す数値を返します。この属性は、`keypress` イベントでのみ使用されます。 `char` 属性が複数の文字を含むキーの場合、これはその属性の最初の文字の Unicode 値となります。Firefox 26 では、これは表示可能な文字のコードを返します。
    +
    +    > **Warning:** この属性は非推奨です。可能であれば、代わりに {{domxref("KeyboardEvent.key")}} を使用してください。
    +
    +- {{domxref("KeyboardEvent.keyCode")}} {{deprecated_inline}}{{Readonlyinline}}
    +
    +  - : 押されたキーの修飾されていない値を示す、 システムや実装に依存した数値コードを数値で返します。
    +
    +    > **Warning:** この属性は非推奨です。可能であれば、代わりに {{domxref("KeyboardEvent.key")}} を使用してください。
    +
    +- {{domxref("KeyboardEvent.keyIdentifier")}} {{Non-standard_inline}}{{deprecated_inline}}{{Readonlyinline}}
    +  - : このプロパティは標準外であり、{{domxref("KeyboardEvent.key")}} に置き換えられ非推奨になりました。これは DOM Level 3 Events の古い版に含まれていました。
    +- {{domxref("KeyboardEvent.keyLocation")}} {{Non-standard_inline}}{{deprecated_inline}}{{Readonlyinline}}
    +  - : これは {{domxref("KeyboardEvent.location")}} の標準外で非推奨の別名です。これは DOM Level 3 Events の古い版に含まれていました。
    +- {{domxref("KeyboardEvent.which")}} {{deprecated_inline}} {{Readonlyinline}}
    +
    +  - : 押されたキーの修飾されていない値を示す、 システムや実装に依存した数値コードを数値で返します。これは通常 `keyCode` と同じです。
    +
    +    > **Warning:** この属性は非推奨です。可能であれば、代わりに {{domxref("KeyboardEvent.key")}} を使用してください。
    +
    +## イベント
    +
    +以下のイベントは `KeyboardEvent` 型に基づいています。これらのイベントは {{domxref("GlobalEventHandlers")}} を実装している任意のオブジェクト、たとえば {{domxref("Element")}}、{{domxref("Document")}}、{{domxref("Window")}} に配信することができます。以下のリストでは、各イベントは、そのイベントの `Element` のハンドラーのドキュメントにリンクしおり、これは一般的にすべての宛先に適用されます。
    +
    +- {{domxref("Element.keydown_event", "keydown")}}
    +  - : キーが押されました。
    +- {{domxref("Element.keyup_event", "keyup")}}
    +  - : キーが離されました。
    +
    +### 廃止されたイベント
    +
    +- {{domxref("Element.keypress_event", "keypress")}} {{deprecated_inline}}
    +  - : 通常は文字値を生成するキーが押されました。このイベントは端末への依存度が高いため、廃止されました。使用すべきではありません。
    +
    +## 使用上の注意
    +
    +イベントには {{domxref("Element/keydown_event", "keydown")}}, {{domxref("Element/keypress_event", "keypress")}}, {{domxref("Element/keyup_event", "keyup")}} の 3 種類があります。 Gecko ではほとんどのキーにおいて、以下のようにキーイベントが連続して発生します。
    +
    +1. そのキーが最初に押された時点で `keydown` イベントが発生します。
    +2. そのキーが修飾キーでなかった場合、 `keypress` イベントが発生します。
    +3. ユーザーがキーから指を離した時点で `keyup` イベントが発生します。
    +
    +### 特殊な場合
    +
    +Caps Lock や Num Lock、 Scroll Lock などのキーは LED 表示も切り替わります。 Windows と Linux では、このようなキーは `keydown` と `keyup` イベントのみが発生します。
    +
    +> **Note:** Linux の Firefox 12 以前では `keypress` イベントも発生していました。
    +
    +しかし Mac OS X のイベントモデルに関する制約から、Mac OS X の Caps Lock は `keydown` イベントのみが発生します。(2007 年モデル以前の)ノート型では Num Lock にも対応していましたが、今日の Mac OS X では外部キーボードにおいても Num Lock に対応していません。 Num Lock キーがある古い MacBook 上では、Num Lock キーによってイベントは何も発生しません。また、 F14 キーが接続されている外部キーボードであれば、 Gecko は Scroll Lock に対応しています。古い特定のバージョンの Firefox では、このキーによって `keypress` イベントが発生していました。この矛盾する挙動は {{bug(602812)}} で修正されました。
    +
    +### 自動リピートの扱い
    +
    +キーが押されたままになると自動リピートが始まります。これによって以下のようにイベントが連続して発生します。
    +
    +1. `keydown`
    +2. `keypress`
    +3. `keydown`
    +4. `keypress`
    +5. <\<ユーザーがキーから指を離すまで繰り返し>>
    +6. `keyup`
    +
    +この流れは DOM Level 3 仕様書に定義されているものです。しかし、これには以下のような注意点があります。
    +
    +#### Ubuntu 9.4 など一部の GTK 環境における自動リピート
    +
    +GTK を用いた環境の中には、自動リピート時にネイティブの key-up イベントが発生するものがあります。このため、キーが連続して押されているのか自動リピートなのかを Gecko 側から認識することはできません。そのようなプラットフォームでの自動リピート時では、以下のようにキーイベントが連続して発生します。
    +
    +1. `keydown`
    +2. `keypress`
    +3. `keyup`
    +4. `keydown`
    +5. `keypress`
    +6. `keyup`
    +7. <\<ユーザーがキーから指を離すまで繰り返し>>
    +8. `keyup`
    +
    +こういった環境では残念ながら、自動リピートなのか連打されただけなのかをウェブコンテンツ側から区別することはできません。
    +
    +#### Gecko 5.0 以前の自動リピートの扱い
    +
    +Gecko 5.0 {{geckoRelease('5.0')}} 以前では、プラットフォーム間でキーボードのイベントの扱いに差異が生じていました。
    +
    +- Windows
    +  - : 自動リピートの挙動に関して Gecko 4.0 とそれ以降で変化はありません。
    +- Mac
    +  - : 最初に keydown イベントが発生した後、 keyup イベントが発生するまでは keypress イベントのみが発生します。断続的に keydown イベントが発生することはありません。
    +- Linux
    +  - : イベントの挙動はプラットフォームによって異なります。ネイティブのイベントモデルによって、 Windows のような挙動を示したり、 Mac のような挙動を示すものがあります。
    +
    +> **Note:** 手動でイベントを発生させても、関連する既定のアクションは*生じません*。例えば、手動でキーイベントを発生させても、その文字がテキストとして入力されることはありません。このような UI イベントの挙動は、セキュリティを意識して設計されています。この設計により、ブラウザーとやり取りするユーザー操作をスクリプトが模倣できないようにしています。
    +
    +## 例
    +
    +```js
    +
    +
    +
    +
    +
     
    -<body>
    -</body>
    -</html>
    -
    + + + +``` -

    仕様書

    +## 仕様書 - - - - - - - - - - - - - - - -
    仕様書状態備考
    {{SpecName('DOM3 Events', '#interface-keyboardevent', 'KeyboardEvent')}}{{Spec2('DOM3 Events')}}初回定義
    +{{Specifications}} -

    KeyboardEvent インターフェイスの草案は数多く提案されてきました。まず最初は DOM Events Level 2 でしたが意見がまとまらず破棄され、続いて DOM Events Level 3 が提案されました。これにより、非標準な初期化メソッドが実装されてしまいました (Gecko では DOM Events Level 2 の初期に定義されていた {{domxref("KeyboardEvent.initKeyEvent()")}} が、他のブラウザでは DOM Events Level 3 の初期に定義されていた {{domxref("KeyboardEvent.initKeyboardEvent()")}} です)。しかし両者のメソッドは、モダンなコンストラクターである {{domxref("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}} で置き換えられています。

    +`KeyboardEvent` インターフェイスの草案は数多く提案されてきました。まず最初は DOM Events Level 2 でしたが意見がまとまらず破棄され、続いて DOM Events Level 3 が提案されました。これにより、標準外な初期化メソッドが実装されてしまいました (Gecko では DOM Events Level 2 の初期に定義されていた {{domxref("KeyboardEvent.initKeyEvent()")}} が、他のブラウザーでは DOM Events Level 3 の初期に定義されていた {{domxref("KeyboardEvent.initKeyboardEvent()")}} です)。しかし両者のメソッドは、現代的なコンストラクターである {{domxref("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}} で置き換えられてました。 -

    ブラウザーの対応

    +## ブラウザーの互換性 -

    {{Compat("api.KeyboardEvent")}}

    +{{Compat}} -

    互換性のメモ

    +### 互換性のメモ -
      -
    • Firefox 65 では、 keypress イベントは印字可能キー以外では発生しなくなりました ({{bug(968056)}})が、 Enter キー、 Shift + Enter キー、 Ctrl + Enter キーの組み合わせでは発生します (これらはブラウザー間の互換性の目的のために維持されています)。
    • -
    +- Firefox 65 では、 `keypress` イベントは[表示可能でないキー]()では発生しなくなりました({{bug(968056)}})が、 Enter キー、 Shift + Enter キー、 Ctrl + Enter キーの組み合わせでは発生します (これらはブラウザー間の互換性の目的のために維持されています)。 -

    関連情報

    +## 関連情報 -
      -
    • {{domxref("KeyboardEvent.code")}}.
    • -
    • {{domxref("KeyboardEvent.key")}}.
    • -
    • {{domxref("KeyboardEvent.getModifierState()")}}
    • -
    +- {{domxref("KeyboardEvent.code")}}. +- {{domxref("KeyboardEvent.key")}}. +- {{domxref("KeyboardEvent.getModifierState()")}} diff --git a/files/ja/web/api/keyboardevent/iscomposing/index.md b/files/ja/web/api/keyboardevent/iscomposing/index.md index 802db3b32b12da..c3409fe1c7b107 100644 --- a/files/ja/web/api/keyboardevent/iscomposing/index.md +++ b/files/ja/web/api/keyboardevent/iscomposing/index.md @@ -1,6 +1,7 @@ --- title: KeyboardEvent.isComposing slug: Web/API/KeyboardEvent/isComposing +page-type: web-api-instance-property tags: - API - DOM @@ -8,55 +9,33 @@ tags: - Property - Read-only - Reference +browser-compat: api.KeyboardEvent.isComposing translation_of: Web/API/KeyboardEvent/isComposing --- -

    {{APIRef("DOM Events")}}

    +{{APIRef("UI Events")}} -

    KeyboardEvent.isComposing は読み取り専用プロパティで、 {{jsxref("Boolean")}} 値でイベントが変換セッションの途中、すなわち {{domxref("Element/compositionstart_event", "compositionstart")}} の後かつ {{domxref("Element/compositionend_event", "compositionend")}} の前に発行されたことを示します。

    +**`KeyboardEvent.isComposing`** は読み取り専用プロパティで、イベントが変換セッションの途中、すなわち {{domxref("Element/compositionstart_event", "compositionstart")}} の後かつ {{domxref("Element/compositionend_event", "compositionend")}} の前に発行されたことを示す論理値を返します。 -

    構文

    +## 値 -
    var bool = event.isComposing;
    +論理値です。 -

    +## 例 -
    var kbdEvent = new KeyboardEvent("syntheticKey", false);
    +```js
    +const kbdEvent = new KeyboardEvent("syntheticKey", false);
     console.log(kbdEvent.isComposing); // false を返す
    -
    - -

    仕様書

    - - - - - - - - - - - - - - - - - - - - - -
    仕様書状態備考
    {{SpecName('UI Events', '#dom-keyboardevent-iscomposing', 'KeyboardEvent.prototype.isComposing')}}{{Spec2('UI Events')}}
    {{SpecName('DOM3 Events','#widl-KeyboardEvent-isComposing','KeyboardEvent.prototype.isComposing')}}{{Spec2('DOM3 Events')}}初回定義
    - -

    ブラウザーの互換性

    - - - -

    {{Compat("api.KeyboardEvent.isComposing")}}

    - -

    関連情報

    - -
      -
    • {{domxref("Element/compositionstart_event", "compositionstart")}} および {{domxref("Element/compositionend_event", "compositionend")}}
    • -
    • {{domxref("KeyboardEvent")}}
    • -
    +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("Element/compositionstart_event", "compositionstart")}} および {{domxref("Element/compositionend_event", "compositionend")}} +- {{domxref("KeyboardEvent")}} From 6bcbb54684637b3d17454ce174085f2da4872fde Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 9 Jul 2022 12:27:29 +0900 Subject: [PATCH 004/100] =?UTF-8?q?2022/06/01=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/keyboardevent/key/index.md | 198 +++++++++----------- 1 file changed, 91 insertions(+), 107 deletions(-) diff --git a/files/ja/web/api/keyboardevent/key/index.md b/files/ja/web/api/keyboardevent/key/index.md index 18660f91b45c1e..6ee5a13e22fbe5 100644 --- a/files/ja/web/api/keyboardevent/key/index.md +++ b/files/ja/web/api/keyboardevent/key/index.md @@ -1,6 +1,7 @@ --- title: KeyboardEvent.key slug: Web/API/KeyboardEvent/key +page-type: web-api-instance-property tags: - API - DOM @@ -9,78 +10,79 @@ tags: - Read-only - Reference - UI Events - - プロパティ +browser-compat: api.KeyboardEvent.key translation_of: Web/API/KeyboardEvent/key --- -
    {{APIRef("DOM Events")}}
    +{{APIRef("UI Events")}} -

    {{domxref("KeyboardEvent")}} インターフェイスの key はプロパティは読み取り専用で、ユーザーが押したキーの値を、 Shift キーなどの修飾キーやキーボードのロケールやレイアウトを考慮した値で返します。値は以下のように判断されます。

    +{{domxref("KeyboardEvent")}} インターフェイスの **`key`** プロパティは読み取り専用で、ユーザーが押したキーの値を、 Shift キーなどの修飾キーやキーボードのロケールやレイアウトを考慮した値で返します。 -
    -

    キーの値

    +## 値 -

    キーの値の完全なリストを参照してください。

    -
    +文字列です。 + +この値は、以下のように決定されます。 + +- 押されたキーが表示可能なものである場合、返される値は、そのキーの表示可能な表現を含む空でない Unicode 文字列になります。 +- 押されたキーが制御文字や特殊文字の場合、返される値は[事前に定義されたキー値](/ja/docs/Web/API/UI_Events/Keyboard_event_key_values)のいずれかになります。 +- もし `KeyboardEvent` が[デッドキー](https://wikipedia.org/wiki/Dead_key)が押されたことを表している場合は、キー値は "`Dead`" になります。 +- 一部の特殊なキーボードのキー(マルチメディアキーボードでメディアを制御するための拡張キーなど)は、 Windows ではキーコードを生成しません。その代わりに、 `WM_APPCOMMAND` イベントが発生します。これらのイベントは DOM キーボードイベントにマッピングされ、 Windows の「仮想キーコード」にリストアップされます(実際にはキーコードではありませんが)。 +- キーを特定できない場合、返される値は `Unidentified` になります。 -
      -
    • 押されたキーが印刷表現を持っている場合は、返された値は空ではない Unicode 文字の文字列で、キーの印刷表現が入ります。
    • -
    • 押されたキーが制御または特殊文字である場合は、返値は定義済みキー値の内の一つになります。
    • -
    • KeyboardEventデッドキーが押されたことを表すのであれば、キーの値は "Dead" になります。
    • -
    • キーボードの一部の特殊なキー (マルチメディアキーボードにおけるメディア制御のための拡張キーなど) は Windows のキーコードを生成しません。代わりに WM_APPCOMMAND イベントを起動します。これらのイベントは DOM キーボードイベントに対応付けられ、 Windows の「仮想キーコード」の中で、実際のキーコードではないものの紹介されます。
    • -
    • キーが特定できなかった場合は、 Unidentified の値を返します。
    • -
    +> **Callout:** +> +> [キー値の完全なリスト](/ja/docs/Web/API/UI_Events/Keyboard_event_key_values)をご覧ください。 -

    KeyboardEvent シーケンス

    +## KeyboardEvent の順序 -

    それぞれの KeyboardEvent はあらかじめ定められたシーケンスで発生します。キーが押された場合、発生する一連の KeyboardEvent は {{domxref("Event.preventDefault")}} が呼び出されないと想定すれば次のようになります。

    +それぞれの `KeyboardEvent` はあらかじめ定められた順序で発生します。キーが押された場合、発生する一連の `KeyboardEvent` は {{domxref("Event.preventDefault")}} が呼び出されないと仮定すれば次のようになります。 -
      -
    1. 最初に {{domxref("Element/keydown_event", "keydown")}} イベントが発生します。キーがそれ以上押され続けてそのキーが文字を入力する場合は、イベントはプラットフォームの実装に依存した間隔で発生し続け、読み取り専用の {{domxref("KeyboardEvent.repeat")}} プロパティが true に設定されます。
    2. -
    3. もしキー入力が{{HTMLElement("input")}}、{{HTMLElement("textarea")}}もしくは{{domxref("HTMLElement.contentEditable")}}が true の要素に文字を挿入する場合は、 {{domxref("HTMLElement/beforeinput_event", "beforeinput")}}と{{domxref("HTMLElement/input_event", "input")}}イベント型がその順番で発火されます。 他の実装が{{domxref("Element/keypress_event", "keypress")}}イベントを実装していれば発火する可能性があることに注意してください。イベントはキーが押されている間連続で発火します。
    4. -
    5. キーを離した際に{{domxref("Element/keyup_event", "keyup")}}イベントが発火します。これで一連の処理は終わりです。
    6. -
    +1. 最初に {{domxref("Element/keydown_event", "keydown")}} イベントが発生します。キーがそれ以上押され続けてそのキーが文字を入力する場合は、イベントはプラットフォームの実装に依存した間隔で発生し続け、読み取り専用の {{domxref("KeyboardEvent.repeat")}} プロパティが `true` に設定されます。 +2. もしキー入力が {{HTMLElement("input")}}、{{HTMLElement("textarea")}}もしくは{{domxref("HTMLElement.contentEditable")}} が `true` の要素に文字を挿入する場合は、 {{domxref("HTMLElement/beforeinput_event", "beforeinput")}} と {{domxref("HTMLElement/input_event", "input")}} イベント型がその順番で発生します。一部の他の実装では、 {{domxref("Element/keypress_event", "keypress")}} イベントを実装していれば発生する可能性があることに注意してください。イベントはキーが押されている間、連続で発生します。 +3. キーを離した際に {{domxref("Element/keyup_event", "keyup")}} イベントが発生します。これで一連の処理は終わりです。 -

    1と3の処理で、 KeyboardEvent.key 属性が定義され、先ほど定義したルールにのっとって値が設定されます。

    +1 と 3 の処理で、 `KeyboardEvent.key` 属性が定義され、先ほど定義したルールに則って値が設定されます。 -

    KeyboardEvent シーケンスの例

    +## 一連の KeyboardEvent の例 -

    Consider the event sequence generated when we interact with the Shift and the 2 key using a U.S keyboard layout as compared to when we do so using a UK keyboard layout.

    +米国キーボードレイアウトで Shift キーと 2 キーを使用した場合と、英国キーボードレイアウトで使用した場合のイベントシーケンスについて考えてみましょう。 -

    Try experimenting using the following two test cases:

    +以下の 2 つのテストケースを使用して実験してみてください。 -
      -
    1. Press and hold the Shift key, then press 2 and release it. Next, release the Shift key.
    2. -
    3. Press and hold the Shift key, then press and hold 2. Release the Shift key. Finally, release 2.
    4. -
    +1. Shift キーを押しながら、 2 キーを押して離します。次に Shift キーを離します。 -

    HTML

    +2. Shift キーを押しながら、 2 を押し続けます。 Shift キーを離します。最後に 2 を離します。 -
    <div class="fx">
    -  <div>
    -    <textarea rows="5" name="test-target" id="test-target"></textarea>
    -    <button type="button" name="btn-clear-console" id="btn-clear-console">clear console</button>
    -  </div>
    -  <div class="flex">
    -    <pre id="console-log"></pre>
    -  </div>
    -</div>
    -
    +### HTML -

    CSS

    +```html +
    +
    + + +
    +
    +
    
    +  
    +
    +``` + +### CSS -
    .fx {
    +```css
    +.fx {
       -webkit-display: flex;
       display: flex;
       margin-left: -20px;
       margin-right: -20px;
     }
     
    -.fx > div {
    +.fx > div {
       padding-left: 20px;
       padding-right: 20px;
     }
     
    -.fx > div:first-child {
    +.fx > div:first-child {
        width: 30%;
     }
     
    @@ -94,78 +96,80 @@ translation_of: Web/API/KeyboardEvent/key
       width: 100%;
       margin-bottom: 10px;
     }
    -
    +``` -

    JavaScript

    +### JavaScript -
    let textarea = document.getElementById('test-target'),
    +```js
    +let textarea = document.getElementById('test-target'),
     consoleLog = document.getElementById('console-log'),
    -btnClearConsole = document.getElementById('btn-clear-console');
    +btnReset = document.getElementById('btn-reset');
     
     function logMessage(message) {
    -  document.getElementById("console-log").innerHTML += message + "<br>";
    +  consoleLog.innerHTML += message + "
    "; } -textarea.addEventListener('keydown', (e) => { +textarea.addEventListener('keydown', (e) => { if (!e.repeat) - logMessage(`Key "${e.key}" pressed [event: keydown]`); + logMessage(`Key "${e.key}" pressed [event: keydown]`); else - logMessage(`Key "${e.key}" repeating [event: keydown]`); + logMessage(`Key "${e.key}" repeating [event: keydown]`); }); -textarea.addEventListener('beforeinput', (e) => { - logMessage(`Key "${e.data}" about to be input [event: beforeinput]`); +textarea.addEventListener('beforeinput', (e) => { + logMessage(`Key "${e.data}" about to be input [event: beforeinput]`); }); -textarea.addEventListener('input', (e) => { - logMessage(`Key "${e.data}" input [event: input]`); +textarea.addEventListener('input', (e) => { + logMessage(`Key "${e.data}" input [event: input]`); }); -textarea.addEventListener('keyup', (e) => { - logMessage(`Key "${e.key}" released [event: keyup]`); +textarea.addEventListener('keyup', (e) => { + logMessage(`Key "${e.key}" released [event: keyup]`); }); -btnClearConsole.addEventListener('click', (e) => { +btnReset.addEventListener('click', (e) => { let child = consoleLog.firstChild; while (child) { consoleLog.removeChild(child); child = consoleLog.firstChild; } -});
    + textarea.value = '' +}); +``` -

    結果

    +### 結果 -

    {{EmbedLiveSample('KeyboardEvent_sequence_example')}}

    +{{EmbedLiveSample('KeyboardEvent_sequence_example')}} -
    -

    注: On browsers that don't fully implement the {{domxref("InputEvent")}} interface which is used for the {{domxref("HTMLElement/beforeinput_event", "beforeinput")}} and {{domxref("HTMLElement/input_event", "input")}} events, you may get incorrect output on those lines of the log output.

    -
    +> **Note:** {{domxref("HTMLElement/beforeinput_event", "beforeinput")}} と {{domxref("HTMLElement/input_event", "input")}} イベントで使用されている {{domxref("InputEvent")}} インターフェイスを完全に実装していないブラウザーでは、誤ったログ出力をする可能性があります。 -

    Case 1

    +### ケース 1 -

    When the shift key is pressed, a {{domxref("Element/keydown_event", "keydown")}} event is first fired, and the key property value is set to the string Shift. As we keep holding this key, the {{domxref("Element/keydown_event", "keydown")}} event does not continue to fire repeatedly because it does not produce a character key.

    +Shift キーが押されると、まず {{domxref("Element/keydown_event", "keydown")}} イベントが発行され、 `key` プロパティの値として文字列 `Shift` が設定されます。このキーを押し続けても、文字が発生しないので {{domxref("Element/keydown_event", "keydown")}} イベントが繰り返し発行され続けるわけではありません。 -

    When key 2 is pressed, another {{domxref("Element/keydown_event", "keydown")}} event is fired for this new key press, and the key property value for the event is set to the string @ for the U.S keyboard type and " for the UK keyboard type, because of the active modifier shift key. The {{domxref("HTMLElement/beforeinput_event", "beforeinput")}} and {{domxref("HTMLElement/input_event", "input")}} events are fired next because a character key has been produced.

    +`2 キー`が押されると、この新しいキー押下に対して別の {{domxref("Element/keydown_event", "keydown")}} イベントが発行され、修飾キー `shift` が有効なので、このイベントの `key` プロパティ値には米国のキーボード型の場合は `@` 、英国のキーボード型の場合は `"` という文字列が設定されます。文字キーが生成されたので、次に {{domxref("HTMLElement/beforeinput_event", "beforeinput")}} と {{domxref("HTMLElement/input_event", "input")}} イベントが発行されます。 -

    As we release the key 2, a {{domxref("Element/keyup_event", "keyup")}} event is fired and the key property will maintain the string values @ and " for the different keyboard layouts respectively.

    +`2 キー`を離すと、{{domxref("Element/keyup_event", "keyup")}} イベントが発行され、`key` プロパティにはそれぞれ異なるキーボードレイアウト用の `@` と `"` という文字列が保持されるようになります。 -

    As we finally release the shift key, another {{domxref("Element/keyup_event", "keyup")}} event is fired for it, and the key attribute value remains Shift.

    +最後に `shift` キーを離すと、別の {{domxref("Element/keyup_event", "keyup")}} イベントが発行され、 key 属性の値は `Shift` のまま残ります。 -

    Case 2

    +### ケース 2 -

    When the shift key is pressed, a {{domxref("Element/keydown_event", "keydown")}} event is first fired, and the key property value is set to be the string Shift. As we keep holding this key, the keydown event does not continue to fire repeatedly because it produced no character key.

    +Shift キーが押されると、まず {{domxref("Element/keydown_event", "keydown")}} イベントが発行され、`key` プロパティの値として文字列 `Shift` がセットされます。このキーを押し続けても、文字キーは生成されないので、 keydown イベントは繰り返し発行され続けることはありません。 -

    When key 2 is pressed, another {{domxref("Element/keydown_event", "keydown")}} event is fired for this new key press, and the key property value for the event is set to be the string @ for the U.S keyboard type and " for the UK keyboard type, because of the active modifier shift key. The {{domxref("HTMLElement/beforeinput_event", "beforeinput")}} and {{domxref("HTMLElement/input_event", "input")}}{{domxref("HTMLElement/beforeinput_event", "beforeinput")}} and {{domxref("HTMLElement/input_event", "input")}} events are fired next because a character key has been produced. As we keep holding the key, the {{domxref("Element/keydown_event", "keydown")}} event continues to fire repeatedly and the {{domxref("KeyboardEvent.repeat")}} property is set to true. The {{domxref("HTMLElement/beforeinput_event", "beforeinput")}} and {{domxref("HTMLElement/input_event", "input")}} events are fired repeatedly as well.

    +`2 キー`が押されると、この新しいキー押下に対して別の {{domxref("Element/keydown_event", "keydown")}} イベントが発行され、修飾キー `shift` が有効になっているので、そのイベントの `key` プロパティの値は、米国キーボード型の場合は `@` 、英国キーボード型の場合は `"` という文字列に設定されています。文字が生成されたので、次に {{domxref("HTMLElement/beforeinput_event", "beforeinput")}} と {{domxref("HTMLElement/input_event", "input")}} イベントが発行されています。キーを押し続けると、{{domxref("Element/keydown_event", "keydown")}} イベントが繰り返し発行され、{{domxref("KeyboardEvent.repeat")}}プロパティは `true` にセットされています。同様に {{domxref("HTMLElement/beforeinput_event", "beforeinput")}} と {{domxref("HTMLElement/input_event", "input")}} イベントが繰り返し発行されています。 -

    As we release the shift key, a {{domxref("Element/keyup_event", "keyup")}} event is fired for it, and the key attribute value remains Shift. At this point, notice that the key property value for the repeating keydown event of the key 2 key press is now "2" because the modifier shift key is no longer active. The same goes for the {{domxref("InputEvent.data")}} property of the {{domxref("HTMLElement/beforeinput_event", "beforeinput")}} and {{domxref("HTMLElement/input_event", "input")}} events.

    +`Shift` キーを離すと、それに対して {{domxref("Element/keyup_event", "keyup")}} イベントが発行され、キー属性の値は `Shift` のままとなります。このとき、修飾キー `shift` は有効ではなくなるので、`2 キー`を押したときの keydown イベントを繰り返すための `key` プロパティの値が "2" になっていることに注目してください。同じことが {{domxref("HTMLElement/beforeinput_event", "beforeinput")}} と {{domxref("HTMLElement/input_event", "input")}} イベントの {{domxref("InputEvent.data")}} プロパティにも当てはまります。 -

    As we finally release the key 2, a {{domxref("Element/keyup_event", "keyup")}} event is fired but the key property will be set to the string value 2 for both keyboard layouts because the modifier shift key is no longer active.

    +最後に `2 キー`を離すと、{{domxref("Element/keyup_event", "keyup")}} イベントが発行されますが、修飾キー `shift` はもはやアクティブではないので、`key` プロパティはどちらのキーボードレイアウトでも、文字列値 `2` に設定されます。 -

    +## 例 -

    This example uses {{domxref("EventTarget.addEventListener()")}} to listen for {{domxref("Element/keydown_event", "keydown")}} events. When they occur, the key's value is checked to see if it's one of the keys the code is interested in, and if it is, it gets processed in some way (possibly by steering a spacecraft, perhaps by changing the selected cell in a spreadsheet).

    +この例では {{domxref("EventTarget.addEventListener()")}} を使用して {{domxref("Element/keydown_event", "keydown")}} イベントを待ち受けています。イベントが発生すると、キーの値がチェックされ、コードが関心を持つキーの一つであるかどうかが確認され、もしそうであれば、何らかの方法で処理されます(宇宙船の操縦や、スプレッドシートの選択セルの変更など)。 -
    window.addEventListener("keydown", function (event) {
    +```js
    +window.addEventListener("keydown", function (event) {
       if (event.defaultPrevented) {
         return; // Do nothing if the event was already processed
       }
    @@ -201,32 +205,12 @@ btnClearConsole.addEventListener('click', (e) => {
       // Cancel the default action to avoid it being handled twice
       event.preventDefault();
     }, true);
    -
    - -

    仕様書

    - - - - - - - - - - - - - - - - - - - - - -
    仕様書状態備考
    {{SpecName('UI Events', '#dom-keyboardevent-key', 'KeyboardEvent.key')}}{{Spec2('UI Events')}}
    {{SpecName('DOM3 Events', '#widl-KeyboardEvent-key', 'KeyboardEvent.key')}}{{Spec2('DOM3 Events')}}初回定義で、キーの値を含みます。
    - -

    ブラウザーの互換性

    - -

    {{Compat("api.KeyboardEvent.key")}}

    +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} From 018d187a246d2a42cb75de8416900e55984605f7 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 9 Jul 2022 11:40:04 +0900 Subject: [PATCH 005/100] =?UTF-8?q?2022/07/08=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/keyboardevent/code/index.md | 183 +- .../ja/web/api/keyboardevent/keycode/index.md | 6374 +++++++++-------- 2 files changed, 3335 insertions(+), 3222 deletions(-) diff --git a/files/ja/web/api/keyboardevent/code/index.md b/files/ja/web/api/keyboardevent/code/index.md index 5801f2618d40b5..da0f2d48717553 100644 --- a/files/ja/web/api/keyboardevent/code/index.md +++ b/files/ja/web/api/keyboardevent/code/index.md @@ -1,6 +1,7 @@ --- title: KeyboardEvent.code slug: Web/API/KeyboardEvent/code +page-type: web-api-instance-property tags: - API - Code @@ -11,96 +12,106 @@ tags: - Read-only - Reference - UI Events - - プロパティ - - 読取専用 +browser-compat: api.KeyboardEvent.code translation_of: Web/API/KeyboardEvent/code --- -
    {{APIRef("DOM Events")}}
    +{{APIRef("UI Events")}} -

    KeyboardEvent.code プロパティは、 (キー入力によって入力された文字ではなく) キーボード上の物理的なキーを表します。つまり、このプロパティはキーボードレイアウトや修飾キーの状態によって変更される前の値を返します。

    +`KeyboardEvent.code` プロパティは、(キー入力によって入力された文字ではなく)キーボード上の物理的なキーを表します。つまり、このプロパティはキーボードレイアウトや修飾キーの状態によって変更される前の値を返します。 -

    入力機器が物理キーボードではなく、仮想キーボードやアクセシビリティデバイスである場合、返値は物理キーボードから入力された場合にできるだけ近づくよう、物理キーボードと仮想入力機器との互換性を最大にするよう、ブラウザーによって設定されます。

    +入力機器が物理キーボードではなく、仮想キーボードやアクセシビリティ機器である場合、返値は物理キーボードから入力された場合にできるだけ近づくよう、物理キーボードと仮想入力機器との互換性を最大にするよう、ブラウザーによって設定されます。 -

    このプロパティは、キーに関連付けられている文字ではなく、入力デバイス上の物理的な位置に基づいてキー入力を扱いたいときに役立ちます。これは特に、キーボードをゲームパッドのように使いたい場合などに有用です。ただし、 KeyboardEvent.code で報告された値を用いてキー入力で生成される文字を判断するべきではありません。キーコード名がキー上に印刷されている実際の文字や、キーが押されたときにコンピューターが生成する文字と一致するとは限らないからです。

    +このプロパティは、キーに関連付けられている文字ではなく、入力機器上の物理的な位置に基づいてキー入力を扱いたいときに役立ちます。これは特に、キーボードをゲームパッドのように使いたい場合などに有用です。ただし、 `KeyboardEvent.code` で報告された値を用いてキー入力で生成される文字を判断するべきではありません。キーコード名がキー上に印刷されている実際の文字や、キーが押されたときにコンピューターが生成する文字と一致するとは限らないからです。 -

    例えば、返ってきた code が "KeyQ" は QWERTY レイアウトのキーボードでは Q キーですが、同じ Dvorak キーボードでは同じ code の値が ' キーを表し、 AZERTY キーボードでは A キーを表すものでもあります。したがって、すべてのユーザーが特定のキーボードレイアウトを使用しているわけではないため、 code の値を用いてユーザーが認識しているキーの名前が何であるかを特定することはできません。

    +例えば、返ってきた `code` が "`KeyQ`" は QWERTY レイアウトのキーボードでは Q キーですが、同じ Dvorak キーボードでは同じ `code` の値が ' キーを表し、 AZERTY キーボードでは A キーを表すものでもあります。したがって、すべてのユーザーが特定のキーボードレイアウトを使用しているわけではないため、 `code` の値を用いてユーザーが認識しているキーの名前が何であるかを特定することはできません。 -

    キーイベントに対応する文字が何であるかを判別するには、、代わりに{{domxref("KeyboardEvent.key")}} プロパティを使用してください。

    +キーイベントに対応する文字が何であるかを判別するには、、代わりに{{domxref("KeyboardEvent.key")}} プロパティを使用してください。 -

    コードの値

    +## 値 -

    Windows, Linux, macOS におけるコード値は、 KeyboardEvent: コード値ページにあります。

    +Windows, Linux, macOS におけるコード値は、 [KeyboardEvent: コード値](/ja/docs/Web/API/UI_Events/Keyboard_event_code_values)のページにあります。 -

    +## 例 -

    KeyboardEvent の使用例

    +### KeyboardEvent の使用例 -

    HTML

    +```html +

    Press keys on the keyboard to see what the KeyboardEvent's key and code + values are for each one.

    +
    +
    +``` -
    <p>Press keys on the keyboard to see what the KeyboardEvent's key and code
    -   values are for each one.</p>
    -<div id="output">
    -</div>
    -
    +#### CSS -

    CSS

    - -
    #output {
    +```css
    +#output {
       font-family: Arial, Helvetica, sans-serif;
       border: 1px solid black;
    -}
    - -

    JavaScript

    + width: 95%; + margin: auto; +} +#output:focus-visible { + outline: 3px solid dodgerblue; +} +``` -
    window.addEventListener("keydown", function(event) {
    -  let str = "KeyboardEvent: key='" + event.key + "' | code='" +
    -            event.code + "'";
    -  let el = document.createElement("span");
    -  el.innerHTML = str + "<br/>";
    +#### JavaScript
     
    -  document.getElementById("output").appendChild(el);
    -}, true);
    +```js +window.addEventListener("keydown", function(event) { + const p = document.createElement("p"); + p.textContent = `KeyboardEvent: key='${event.key}' | code='${event.code}'`; + document.getElementById("output").appendChild(p); + window.scrollTo(0, document.body.scrollHeight); +}, true); +``` -

    試してみよう

    +#### 試してみましょう -

    キー入力をサンプルコードに取得させるために、キーを入力する前に output ボックスをクリックしてください。

    +キー入力をサンプルコードに取得させるために、キーを入力する前に output ボックスをクリックしてください。 -

    {{ EmbedLiveSample('Exercising_KeyboardEvent', 600, 300) }}

    +{{ EmbedLiveSample('Exercising_KeyboardEvent', 600, 300) }} -

    ゲームでのキーボードイベントの扱い

    +### ゲームでのキーボードイベントの扱い -

    This example establishes an event listener for {{event("keydown")}} events which handles keyboard input for a game which uses the typical "WASD" keyboard layout for steering forward, left, backward, and right. This will use the same four keys physically regardless of what the actual corresponding characters are, such as if the user is using an AZERTY keyboard.

    +この例では、典型的な "WASD" キーボードレイアウトを使用して前進、左折、後退、右折するゲームのキーボード入力を処理する {{domxref("Element/keydown_event", "keydown")}} イベントに対するイベントリスナーを確立しています。これは、ユーザーが AZERTY キーボードを使用している場合など、実際に対応する文字が何であるかに関係なく、物理的に同じ 4 つのキーを使用します。 -

    HTML

    +#### HTML -
    <p>Use the WASD (ZQSD on AZERTY) keys to move and steer.</p>
    -<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="world">
    -  <polygon id="spaceship" points="15,0 0,30 30,30"/>
    -</svg>
    -<script>refresh();</script>
    -
    +```html +

    WASD キー(AZERTY キーボードでは ZQSD)を使って移動したり方向を変えたりしましょう。

    + + + +``` -

    CSS

    +#### CSS -
    .world {
    +```css
    +.world {
       margin: 0px;
       padding: 0px;
       background-color: black;
       width: 400px;
       height: 400px;
     }
    -
    +.world:focus-visible {
    +  outline: 5px solid dodgerblue;
    +}
     #spaceship {
       fill: orange;
       stroke: red;
       stroke-width: 2px;
    -}
    +} +``` -

    JavaScript

    +#### JavaScript -

    The first section of the JavaScript code establishes some variables we'll be using. shipSize contains the size of the ship the player is moving around, for convenience. position is used to track the position of the ship within the play field. moveRate and turnRate are the number of pixels forward and backward each keystroke moves the ship and how many degrees of rotation the left and right steering controls apply per keystroke. angle is the current amount of rotation applied to the ship, in degrees; it starts at 0° (pointing straight up). Finally, spaceship is set to refer to the element with the ID "spaceship", which is the SVG polygon representing the ship the player controls.

    +この JavaScript のコードの最初の部分では、これから使用するいくつかの変数を定義しています。 `shipSize` にはプレイヤーが移動する船の大きさが入ります。 `position` はプレイフィールド内での船の位置を追跡するために使用します。 `moveRate` と `turnRate` は、キーを押すごとに船を前後に何ピクセル動かすか、キーを押すごとに左右の操舵コントロールで何度回転させるかを表します。 angle は現在船に適用されている回転の量を度数で表し、 0 度(真上向き)から始まります。最後に、 `spaceship` は ID `"spaceship"` の要素を指すように設定されています。これは、プレイヤーが操作する船を表す SVG ポリゴンを指します。 -
    let shipSize = {
    +```js
    +let shipSize = {
       width: 30,
       height: 30
     };
    @@ -116,43 +127,47 @@ let turnRate = 5;
     let angle = 0;
     
     let spaceship = document.getElementById("spaceship");
    -
    +``` -

    Next comes the function updatePosition(). This function takes as input the distance the ship is to be moved, where positive is a forward movement and negative is a backward movement. This function computes the new position of the ship given the distance moved and the current direction the ship is facing. It also handles ensuring that the ship wraps across the boundaries of the play field instead of vanishing.

    +次に、関数 `updatePosition()` があります。この関数は、船を移動させる距離を入力として受け取ります。正の値は前進、負の値は後退を意味します。この関数は、移動した距離と船が現在向いている方向から、船の新しい位置を計算します。また、プレイフィールドの境界を越えた際に船が消えず、境界をまたぐようにする処理も行います。 -
    function updatePosition(offset) {
    +```js
    +function updatePosition(offset) {
       let rad = angle * (Math.PI/180);
       position.x += (Math.sin(rad) * offset);
       position.y -= (Math.cos(rad) * offset);
     
    -  if (position.x < 0) {
    +  if (position.x < 0) {
         position.x = 399;
    -  } else if (position.x > 399) {
    +  } else if (position.x > 399) {
         position.x = 0;
       }
     
    -  if (position.y < 0) {
    +  if (position.y < 0) {
         position.y = 399;
    -  } else if (position.y > 399) {
    +  } else if (position.y > 399) {
         position.y = 0;
       }
     }
    -
    +``` -

    The refresh() function handles applying the rotation and position by using an SVG transform.

    +`refresh()` 関数は [SVG の transform](/ja/docs/Web/SVG/Attribute/transform) を使用して、向きと位置を適用する処理を行います。 -
    function refresh() {
    +```js
    +function refresh() {
       let x = position.x - (shipSize.width/2);
       let y = position.y - (shipSize.height/2);
       let transform = "translate(" + x + " " + y + ") rotate(" + angle + " 15 15) ";
     
       spaceship.setAttribute("transform", transform);
     }
    -
    +refresh(); +``` -

    Finally, the addEventListener() method is used to start listening for {{event("keydown")}} events, acting on each key by updating the ship position and rotation angle, then calling refresh() to draw the ship at its new position and angle.

    +最後に、`addEventListener()` メソッドを使用して {{domxref("Element/keydown_event", "keydown")}} イベントの待ち受けを開始します。それぞれのイベントで船の位置と回転角を更新し、 `refresh()` を呼び出して新しい位置と角度で船を描画するように動作します。 -
    window.addEventListener("keydown", function(event) {
    +```js
    +window.addEventListener("keydown", function(event) {
       if (event.defaultPrevented) {
         return; // Do nothing if event already handled
       }
    @@ -182,37 +197,27 @@ let spaceship = document.getElementById("spaceship");
     
       refresh();
     
    -  // Consume the event so it doesn't get handled twice
    -  event.preventDefault();
    -}, true);
    + if (event.code !== "Tab") + { + // Consume the event so it doesn't get handled twice, + // as long as the user isn't trying to move focus away + event.preventDefault(); + } +}, true); +``` -

    Try it out

    +#### やってみましょう -

    To ensure that keystrokes go to the sample code, click inside the black game play field below before pressing keys.

    +キー入力が確実にサンプルコードに反映されるように、キーを押す前に下の黒いゲームプレイフィールドをクリックまたはフォーカスしてください。 -

    {{EmbedLiveSample("Handle_keyboard_events_in_a_game", 420, 460)}}

    +{{EmbedLiveSample("Handle_keyboard_events_in_a_game", 420, 460)}} -

    There are several ways this code can be made better. Most real games would watch for {{event("keydown")}} events, start motion when that happens, and stop the motion when the corresponding {{event("keyup")}} occurs, instead of relying on key repeats. That would allow both smoother and faster movement, but would also allow the player to be moving and steering at the same time. Transitions or animations could be used to make the ship's movement smoother, too.

    +このコードを改善する方法はいくつかあります。実際のゲームでは、キーリピートに頼るのではなく、{{domxref("Element/keydown_event", "keydown")}} イベントを監視して、それが発生したら動作を開始し、対応する {{domxref("Element/keyup_event", "keyup")}} が発生したら動作を停止することがほとんどだと思います。そうすることで、よりスムーズで高速な移動が可能になり、プレイヤーは移動と操舵を同時に行えるようになります。トランジションやアニメーションを使用して、自機の動きをより滑らかにすることもできます。 -

    仕様書

    +## 仕様書 - - - - - - - - - - - - - - - -
    仕様書状態備考
    {{SpecName('UI Events', '#dom-keyboardevent-code', 'KeyboardEvent.code')}}{{Spec2('UI Events')}}初回定義、コード値を含む。
    +{{Specifications}} -

    ブラウザーの互換性

    +## ブラウザーの互換性 -

    {{Compat("api.KeyboardEvent.code")}}

    +{{Compat}} diff --git a/files/ja/web/api/keyboardevent/keycode/index.md b/files/ja/web/api/keyboardevent/keycode/index.md index 2103bafef1d45f..c6693e001cfca8 100644 --- a/files/ja/web/api/keyboardevent/keycode/index.md +++ b/files/ja/web/api/keyboardevent/keycode/index.md @@ -1,30 +1,45 @@ --- title: KeyboardEvent.keyCode slug: Web/API/KeyboardEvent/keyCode +page-type: web-api-instance-property +tags: + - API + - DOM + - DOM Events + - Deprecated + - KeyboardEvent + - Property + - Read-only + - Reference + - keyCode +browser-compat: api.KeyboardEvent.keyCode translation_of: Web/API/KeyboardEvent/keyCode --- -

    {{APIRef("DOM Events")}}{{deprecated_header()}}

    +{{APIRef("UI Events")}}{{Deprecated_Header}} -

    非推奨の KeyboardEvent.keyCode 読み取り専用プロパティは、押されたキーの変更されていない値を識別するシステムおよび実装に依存する数値コードを表します。 これは通常、キーに対応する 10進 ASCII ({{RFC(20)}}) またはWindows 1252 コードです。キーを識別できない場合は、この値は 0 になります。

    +非推奨の **`KeyboardEvent.keyCode`** 読み取り専用プロパティは、押されたキーの変更されていない値を識別するシステムおよび実装に依存する数値コードを表します。 -

    これはしばらくの間、非推奨とされています。その代わりに、{{domxref("KeyboardEvent.code")}} が実装されている場合は、{{domxref("KeyboardEvent.code")}} を使うべきです。残念ながら、いくつかのブラウザはまだこれを持っていないので、すべてのターゲットブラウザでサポートされているものを使うように注意しなければなりません。

    +これは通常、キーに対応する 10 進数の ASCII ({{RFC(20)}}) または Windows 1252 コードです。キーを識別できない場合は、この値は `0` になります。 -
    -

    Web 開発者は、keydown 及び keyup イベントを扱う際に、印刷可能な文字に対して keyCode 属性を使用すべきではありません。上述したように、keyCode 属性は、印刷可能な文字、特に Shift キーや Alt キーが押された状態で入力された文字には有用ではありません。ショートカットキーハンドラを実装する場合、{{event("keypress")}} イベントの方が通常は良いでしょう (少なくとも Gecko が使用中のランタイムの場合)。詳細は Gecko Keypress Event を参照してください。

    -
    +これはしばらく非推奨となっていますので、できれば使用しないようにしてください。代わりに、もし実装されていれば {{domxref("KeyboardEvent.code")}} を使用してください。残念ながら、まだ実装されていないブラウザーもありますので、対象となるすべてのブラウザーで対応するものを使用するように注意する必要があります。 -

    +> **Note:** ウェブ開発者は `keydown` と `keyup` イベントを処理する際に、表示可能な文字に対して `keyCode` 属性を使用するべきではありません。前述のように、`keyCode` 属性は表示可能な文字、特に ShiftAlt キーが押された状態での文字に対しては有用ではありません。ショートカットキーハンドラーを実装する場合、通常は {{domxref("Element/keypress_event", "keypress")}} イベントの方がよいでしょう(少なくとも Gecko を使用するランタイムではそうでしょう)。 -
    window.addEventListener("keydown", function (event) {
    +## 例
    +
    +```js
    +window.addEventListener("keydown", function (event) {
       if (event.defaultPrevented) {
    -    return; // デフォルトのアクションがキャンセルされている場合は何もしないようにします。
    +    return; // 既定のアクションがキャンセルされている場合は何もしないようにします。
       }
     
    -  var handled = false;
    +  let handled = false;
       if (event.key !== undefined) {
         // KeyboardEvent.key でイベントを処理し、handled を true に設定します。
    +    handled = true;
       } else if (event.keyCode !== undefined) {
         // KeyboardEvent.keyCode でイベントを処理し、handled を true に設定します。
    +    handled = true;
       }
     
       if (handled) {
    @@ -32,3146 +47,3239 @@ translation_of: Web/API/KeyboardEvent/keyCode
         event.preventDefault();
       }
     }, true);
    -
    - -

    仕様

    - - - - - - - - - - - - - - - - -
    仕様書ステータスコメント
    {{SpecName('DOM3 Events','#widl-KeyboardEvent-keyCode','KeyboardEvent.keyCode')}}{{Spec2('DOM3 Events')}}初期定義; 非推奨として指定されています。
    +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## keyCode の値 + +### 標準位置で表示可能なキー + +標準位置で表示可能なキーを押したり離したりすることで発生するキーイベントの値は、ブラウザー間で互換性がありません。 + +IE はネイティブの仮想キーコードの値を `KeyboardEvent.keyCode` として公開するだけです。 + +Google Chrome、Chromium、Safari は入力された文字から値を決定する必要があります。入力文字が US キーボードレイアウトで入力できる場合、 US キーボードレイアウトの `keyCode` 値を使用します。 + +Firefox 15 {{geckoRelease("15.0")}} からは、 Gecko はキーによって入力可能な ASCII 文字から `keyCode` 値を取得します。 shift 修飾子や ASCII 対応キーボードレイアウトであった場合も含みます。詳しくは以下のルールを参照してください。 + +1. システムが Windows で、押されたキーのネイティブキーコードが a-z または 0-9 であることを示す場合、そのキーコードを使用します。 +2. システムが Mac で、押されたキーのネイティブキーコードが 0-9 である場合、そのキーコードを使用します。 +3. 押されたキーが ASCII のアルファベットまたは数字を修飾キーなしで入力する場合、それに対応するキーコードを使用します。 +4. 押されたキーが、 ASCII アルファベットまたは数字を Shift キーで修飾して入力する場合、そのキーコードを使用します。 +5. 押されたキーが、別の ASCII 文字を修飾キーなしで入力する場合、それに対応するキーコードを使用します。 +6. 押されたキーが、別の ASCII文字を Shift キー修飾で入力する場合、それに対応するキーコードを使用します。 +7. それ以外の場合、すなわち、押されたキーが Unicode 文字を入力する場合は以下の通り。 -

    ブラウザの互換性

    - -

    {{Compat("api.KeyboardEvent.keyCode")}}

    - -

    keyCodeの値

    - -

    標準位置で印刷可能なキー

    - -

    標準位置で印刷可能なキーを押したり離したりすることで発生するキーイベントの値は、ブラウザ間で互換性がありません。

    - -

    IE just exposes the native virtual keycode value as KeyboardEvent.keyCode.

    - -

    Google Chrome, Chromium and Safari must decide the value from the input character. If the inputting character can be inputted with the US keyboard layout, they use the keyCode value on the US keyboard layout.

    - -

    Starting in Firefox 15 {{geckoRelease("15.0")}}, Gecko gets keyCode values from ASCII characters inputtable by the key — even with shift modifiers or an ASCII capable keyboard layout. See the following rules for details:

    - -
      -
    1. If the system is Windows and the native keycode of the pressed key indicates that the key is a-z or 0-9, use a keycode for it.
    2. -
    3. If the system is Mac and the native keycode of the pressed key indicates that the key is 0-9, use a keycode for it.
    4. -
    5. If the pressed key inputs an ASCII alphabetic or numeric character with no modifier key, use a keycode for it.
    6. -
    7. If the pressed key inputs an ASCII alphabetic or numeric character with a Shift key modifier, use a keycode for it.
    8. -
    9. If the pressed key inputs a different ASCII character with no modifier key, use a keycode for it.
    10. -
    11. If the pressed key inputs a different ASCII character with a Shift key modifier, use a keycode for it.
    12. -
    13. Otherwise, i.e., pressed key inputs a unicode character: -
        -
      1. If the keyboard layout is ASCII-capable (i.e., can input ASCII alphabets), use 0 or compute with the following additional rules.
      2. -
      3. Otherwise, i.e., the keyboard layout isn't ASCII capable, use the ASCII capable keyboard layout installed on the environment with the highest priority: -
          -
        1. If the pressed key on the alternative keyboard layout inputs an ASCII alphabetic or numeric character, use a keycode for it.
        2. -
        3. Otherwise, use 0 or compute with the following additional rules.
        4. -
        -
      4. -
      -
    14. -
    - -

    Starting in Firefox 60 {{geckoRelease("60.0")}}, Gecko sets keyCode values of punctuation keys as far as possible (when points 7.1 or 7.2 in the above list are reached) with the following rules:

    - -
    -

    The purpose of these new additional rules is for making users whose keyboard layouts map unicode characters to punctuation keys in a US keyboard layout can use web applications which support Firefox only with ASCII-capable keyboard layouts or just with a US keyboard layout. Otherwise, the newly mapped keyCode values may be conflict with other keys. For example, if the active keyboard layout is Russian, the keyCode value of both the "Period" key and "Slash" key are 190 (KeyEvent.DOM_VK_PERIOD). If you need to distinguish those keys but you don't want to support all keyboard layouts in the world by yourself, you should probably use {{domxref("KeyboardEvent.code")}}.

    -
    - -
      -
    1. If running macOS or Linux: -
        -
      1. If the active keyboard layout is not ASCII-capable and an alternative ASCII-capable keyboard layout is available. -
          -
        1. If the alternative ASCII-capable keyboard layout produces an ASCII character via just the unmodified key, use a keyCode for the character.
        2. -
        3. If the alternative ASCII-capable keyboard layout produces an ASCII character with a Shift key modifier, use a keyCode for the shifted character.
        4. -
        5. Otherwise, use a keyCode for an ASCII character produced by the key when the US keyboard layout is active.
        6. -
        -
      2. -
      3. Otherwise, use a keyCode for an ASCII character produced by the key when the US keyboard layout is active.
      4. -
      -
    2. -
    3. If running on Windows: -
        -
      1. Use a keyCode value for an ASCII character produced by a key which is mapped to the same virtual keycode of Windows when the US keyboard layout is active.
      2. -
      -
    4. -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + 1. キーボードレイアウトが ASCII 対応の(ASCII アルファベットを入力できる)場合、 0 を使用するか、[下記の追加ルール](#keycode_of_punctuation_keys_on_some_keyboard_layout)で計算します。 + 2. それ以外の場合、つまりキーボードレイアウトが ASCII に対応していない場合は、最も優先度の高い環境にインストールされている ASCII に対応したキーボードレイアウトを使用します。 + + 1. 代替キーボードレイアウトで押されたキーが ASCII のアルファベットまたは数字を入力する場合、そのキーコードを使用します。 + 2. それ以外の場合、 0 を使用するか、[下記の追加ルール](#keycode_of_punctuation_keys_on_some_keyboard_layout)で計算します。 + +Firefox 60 {{geckoRelease("60.0")}} からは、 Gecko は区切り記号キーの `keyCode` 値を、できる限り以下の規則で設定します(上記のリストのポイント 7.1 または 7.2 に到達したとき)。 + +> **Warning:** これらの新しい追加ルールの目的は、米国式キーボードレイアウトの区切り記号キーに unicode 文字をマッピングしているユーザーが、 Firefox に対応したウェブアプリケーションを ASCII に対応したキーボードレイアウトのみ、または米国式キーボードレイアウトのみで使用できるようにするためです。そうでなければ、新しく割り当てられた `keyCode` 値が他のキーと衝突する可能性があります。例えば、アクティブなキーボードレイアウトがロシア語の場合、 `"Period"` キーと `"Slash"` キーの `keyCode` 値は**どちらも** `190` (`KeyEvent.DOM_VK_PERIOD`) になります。もし、これらのキーを区別する必要があるが、世界中の全てのキーボードレイアウトに自分で対応したくない場合は、おそらく {{domxref("KeyboardEvent.code")}} を使用した方が良いでしょう。 + +1. macOS または Linux を使用している場合 + + 1. アクティブなキーボードレイアウトが ASCII に対応したものではなく、代替の ASCII 対応のキーボードレイアウトが利用可能な場合。 + + 1. もし、 ASCII に対応したキーボードレイアウトが、修飾されていないキーだけで ASCII 文字を生成する場合、その文字の `keyCode` を使用します。 + 2. もし、代替の ASCII に対応したキーボードレイアウトで、 Shift キーで修飾した ASCII 文字が生成された場合、シフトされた文字の `keyCode`を使用します。 + 3. それ以外の場合は、 US キーボードレイアウトがアクティブなときにキーが生成する ASCII 文字を `keyCode` に使用します。 + + 2. それ以外の場合は、 US キーボードレイアウトがアクティブなときにキーが生成する ASCII 文字を `keyCode` に使用します。 + +2. Windows を使用している場合 + + 1. US キーボードレイアウトがアクティブなときに Windows の同じ仮想キーコードに割り当てられたキーによって生成される ASCII 文字を `keyCode` 値に使用します。 + +
    keyCode values of each browser's keydown event caused by printable keys in standard position
    {{domxref("KeyboardEvent.code")}}Internet Explorer 11Google Chrome 34Chromium 34Safari 7Gecko 29
    WindowsWindowsMac (10.9)Linux (Ubuntu 14.04)Mac (10.9)WindowsMac (10.9)Linux (Ubuntu 14.04)
    USJapaneseGreekUSJapaneseGreekUSJapaneseGreekUSJapaneseGreekUSJapaneseGreekUSJapaneseGreekUSJapaneseGreekUSJapaneseGreek
    {{domxref("KeyboardEvent.code")}}USJapaneseGreekUSJapaneseGreekUSJapaneseGreekUSJapaneseGreekUSJapaneseGreekUSJapaneseGreekUSJapaneseGreekUSJapaneseGreek
    WindowsWindowsMac (10.9)Linux (Ubuntu 14.04)Mac (10.9)WindowsMac (10.9)Linux (Ubuntu 14.04)
    Internet Explorer 11Google Chrome 34Chromium 34Safari 7Gecko 29
    "Digit1"0x31 (49)0x31 (49)0x31 (49)0x31 (49)0x31 (49)0x31 (49)0x31 (49)0x31 (49)
    "Digit2"0x32 (50)0x32 (50)0x32 (50)0x32 (50)0x32 (50)0x32 (50)0x32 (50)0x32 (50)
    "Digit3"0x33 (51)0x33 (51)0x33 (51)0x33 (51)0x33 (51)0x33 (51)0x33 (51)0x33 (51)
    "Digit4"0x34 (52)0x34 (52)0x34 (52)0x34 (52)0x34 (52)0x34 (52)0x34 (52)0x34 (52)
    "Digit5"0x35 (53)0x35 (53)0x35 (53)0x35 (53)0x35 (53)0x35 (53)0x35 (53)0x35 (53)
    "Digit6"0x36 (54)0x36 (54)0x36 (54)0x36 (54)0x36 (54)0x36 (54)0x36 (54)0x36 (54)
    "Digit7"0x37 (55)0x37 (55)0x37 (55)0x37 (55)0x37 (55)0x37 (55)0x37 (55)0x37 (55)
    "Digit8"0x38 (56)0x38 (56)0x38 (56)0x38 (56)0x38 (56)0x38 (56)0x38 (56)0x38 (56)
    "Digit9"0x39 (57)0x39 (57)0x39 (57)0x39 (57)0x39 (57)0x39 (57)0x39 (57)0x39 (57)
    "Digit0"0x30 (48)0x30 (48)0x30 (48)0x30 (48)0x30 (48)0x30 (48)0x30 (48)0x30 (48)
    "KeyA"0x41 (65)0x41 (65)0x41 (65)0x41 (65)0x41 (65)0x41 (65)0x41 (65)0x41 (65)
    "KeyB"0x42 (66)0x42 (66)0x42 (66)0x42 (66)0x42 (66)0x42 (66)0x42 (66)0x42 (66)
    "KeyC"0x43 (67)0x43 (67)0x43 (67)0x43 (67)0x43 (67)0x43 (67)0x43 (67)0x43 (67)
    "KeyD"0x44 (68)0x44 (68)0x44 (68)0x44 (68)0x44 (68)0x44 (68)0x44 (68)0x44 (68)
    "KeyE"0x45 (69)0x45 (69)0x45 (69)0x45 (69)0x45 (69)0x45 (69)0x45 (69)0x45 (69)
    "KeyF"0x46 (70)0x46 (70)0x46 (70)0x46 (70)0x46 (70)0x46 (70)0x46 (70)0x46 (70)
    "KeyG"0x47 (71)0x47 (71)0x47 (71)0x47 (71)0x47 (71)0x47 (71)0x47 (71)0x47 (71)
    "KeyH"0x48 (72)0x48 (72)0x48 (72)0x48 (72)0x48 (72)0x48 (72)0x48 (72)0x48 (72)
    "KeyI"0x49 (73)0x49 (73)0x49 (73)0x49 (73)0x49 (73)0x49 (73)0x49 (73)0x49 (73)
    "KeyJ"0x4A (74)0x4A (74)0x4A (74)0x4A (74)0x4A (74)0x4A (74)0x4A (74)0x4A (74)
    "KeyK"0x4B (75)0x4B (75)0x4B (75)0x4B (75)0x4B (75)0x4B (75)0x4B (75)0x4B (75)
    "KeyL"0x4C (76)0x4C (76)0x4C (76)0x4C (76)0x4C (76)0x4C (76)0x4C (76)0x4C (76)
    "KeyM"0x4D (77)0x4D (77)0x4D (77)0x4D (77)0x4D (77)0x4D (77)0x4D (77)0x4D (77)
    "KeyN"0x4E (78)0x4E (78)0x4E (78)0x4E (78)0x4E (78)0x4E (78)0x4E (78)0x4E (78)
    "KeyO"0x4F (79)0x4F (79)0x4F (79)0x4F (79)0x4F (79)0x4F (79)0x4F (79)0x4F (79)
    "KeyP"0x50 (80)0x50 (80)0x50 (80)0x50 (80)0x50 (80)0x50 (80)0x50 (80)0x50 (80)
    "KeyQ"0x51 (81)0x51 (81)0x51 (81)0x51 (81)0xBA (186)0x51 (81)0x51 (81)0xBA (186)0x51 (81)0x51 (81)0xBA (186)0x51 (81)0x51 (81)0x51 (81)0xBA (186)0x51 (81)
    "KeyR"0x52 (82)0x52 (82)0x52 (82)0x52 (82)0x52 (82)0x52 (82)0x52 (82)0x52 (82)
    "KeyS"0x53 (83)0x53 (83)0x53 (83)0x53 (83)0x53 (83)0x53 (83)0x53 (83)0x53 (83)
    "KeyT"0x54 (84)0x54 (84)0x54 (84)0x54 (84)0x54 (84)0x54 (84)0x54 (84)0x54 (84)
    "KeyU"0x55 (85)0x55 (85)0x55 (85)0x55 (85)0x55 (85)0x55 (85)0x55 (85)0x55 (85)
    "KeyV"0x56 (86)0x56 (86)0x56 (86)0x56 (86)0x56 (86)0x56 (86)0x56 (86)0x56 (86)
    "KeyW"0x57 (87)0x57 (87)0x57 (87)0x57 (87)0x57 (87)0x57 (87)0x57 (87)0x57 (87)
    "KeyX"0x58 (88)0x58 (88)0x58 (88)0x58 (88)0x58 (88)0x58 (88)0x58 (88)0x58 (88)
    "KeyY"0x59 (89)0x59 (89)0x59 (89)0x59 (89)0x59 (89)0x59 (89)0x59 (89)0x59 (89)
    "KeyZ"0x5A (90)0x5A (90)0x5A (90)0x5A (90)0x5A (90)0x5A (90)0x5A (90)0x5A (90)
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + 標準的な位置にある表示可能なキーによって発生する keydown イベントのブラウザーごとの keyCode 値 +
    {{domxref("KeyboardEvent.code")}}IE 11Google Chrome 34Chromium 34Safari 7Gecko 29
    WindowsWindowsMac (10.9)Linux (Ubuntu 14.04)Mac (10.9)WindowsMac (10.9)Linux (Ubuntu 14.04)
    米国日本語ギリシャ語米国日本語ギリシャ語米国日本語ギリシャ語米国日本語ギリシャ語米国日本語ギリシャ語米国日本語ギリシャ語米国日本語ギリシャ語米国日本語ギリシャ語
    "Digit1"0x31 (49)0x31 (49)0x31 (49)0x31 (49)0x31 (49)0x31 (49)0x31 (49)0x31 (49)
    "Digit2"0x32 (50)0x32 (50)0x32 (50)0x32 (50)0x32 (50)0x32 (50)0x32 (50)0x32 (50)
    "Digit3"0x33 (51)0x33 (51)0x33 (51)0x33 (51)0x33 (51)0x33 (51)0x33 (51)0x33 (51)
    "Digit4"0x34 (52)0x34 (52)0x34 (52)0x34 (52)0x34 (52)0x34 (52)0x34 (52)0x34 (52)
    "Digit5"0x35 (53)0x35 (53)0x35 (53)0x35 (53)0x35 (53)0x35 (53)0x35 (53)0x35 (53)
    "Digit6"0x36 (54)0x36 (54)0x36 (54)0x36 (54)0x36 (54)0x36 (54)0x36 (54)0x36 (54)
    "Digit7"0x37 (55)0x37 (55)0x37 (55)0x37 (55)0x37 (55)0x37 (55)0x37 (55)0x37 (55)
    "Digit8"0x38 (56)0x38 (56)0x38 (56)0x38 (56)0x38 (56)0x38 (56)0x38 (56)0x38 (56)
    "Digit9"0x39 (57)0x39 (57)0x39 (57)0x39 (57)0x39 (57)0x39 (57)0x39 (57)0x39 (57)
    "Digit0"0x30 (48)0x30 (48)0x30 (48)0x30 (48)0x30 (48)0x30 (48)0x30 (48)0x30 (48)
    "KeyA"0x41 (65)0x41 (65)0x41 (65)0x41 (65)0x41 (65)0x41 (65)0x41 (65)0x41 (65)
    "KeyB"0x42 (66)0x42 (66)0x42 (66)0x42 (66)0x42 (66)0x42 (66)0x42 (66)0x42 (66)
    "KeyC"0x43 (67)0x43 (67)0x43 (67)0x43 (67)0x43 (67)0x43 (67)0x43 (67)0x43 (67)
    "KeyD"0x44 (68)0x44 (68)0x44 (68)0x44 (68)0x44 (68)0x44 (68)0x44 (68)0x44 (68)
    "KeyE"0x45 (69)0x45 (69)0x45 (69)0x45 (69)0x45 (69)0x45 (69)0x45 (69)0x45 (69)
    "KeyF"0x46 (70)0x46 (70)0x46 (70)0x46 (70)0x46 (70)0x46 (70)0x46 (70)0x46 (70)
    "KeyG"0x47 (71)0x47 (71)0x47 (71)0x47 (71)0x47 (71)0x47 (71)0x47 (71)0x47 (71)
    "KeyH"0x48 (72)0x48 (72)0x48 (72)0x48 (72)0x48 (72)0x48 (72)0x48 (72)0x48 (72)
    "KeyI"0x49 (73)0x49 (73)0x49 (73)0x49 (73)0x49 (73)0x49 (73)0x49 (73)0x49 (73)
    "KeyJ"0x4A (74)0x4A (74)0x4A (74)0x4A (74)0x4A (74)0x4A (74)0x4A (74)0x4A (74)
    "KeyK"0x4B (75)0x4B (75)0x4B (75)0x4B (75)0x4B (75)0x4B (75)0x4B (75)0x4B (75)
    "KeyL"0x4C (76)0x4C (76)0x4C (76)0x4C (76)0x4C (76)0x4C (76)0x4C (76)0x4C (76)
    "KeyM"0x4D (77)0x4D (77)0x4D (77)0x4D (77)0x4D (77)0x4D (77)0x4D (77)0x4D (77)
    "KeyN"0x4E (78)0x4E (78)0x4E (78)0x4E (78)0x4E (78)0x4E (78)0x4E (78)0x4E (78)
    "KeyO"0x4F (79)0x4F (79)0x4F (79)0x4F (79)0x4F (79)0x4F (79)0x4F (79)0x4F (79)
    "KeyP"0x50 (80)0x50 (80)0x50 (80)0x50 (80)0x50 (80)0x50 (80)0x50 (80)0x50 (80)
    "KeyQ"0x51 (81)0x51 (81)0x51 (81)0x51 (81)0xBA (186)⚠️0x51 (81)0x51 (81)0xBA (186)⚠️0x51 (81)0x51 (81)0xBA (186)⚠️0x51 (81)0x51 (81)0x51 (81)0xBA (186)⚠️0x51 (81)
    "KeyR"0x52 (82)0x52 (82)0x52 (82)0x52 (82)0x52 (82)0x52 (82)0x52 (82)0x52 (82)
    "KeyS"0x53 (83)0x53 (83)0x53 (83)0x53 (83)0x53 (83)0x53 (83)0x53 (83)0x53 (83)
    "KeyT"0x54 (84)0x54 (84)0x54 (84)0x54 (84)0x54 (84)0x54 (84)0x54 (84)0x54 (84)
    "KeyU"0x55 (85)0x55 (85)0x55 (85)0x55 (85)0x55 (85)0x55 (85)0x55 (85)0x55 (85)
    "KeyV"0x56 (86)0x56 (86)0x56 (86)0x56 (86)0x56 (86)0x56 (86)0x56 (86)0x56 (86)
    "KeyW"0x57 (87)0x57 (87)0x57 (87)0x57 (87)0x57 (87)0x57 (87)0x57 (87)0x57 (87)
    "KeyX"0x58 (88)0x58 (88)0x58 (88)0x58 (88)0x58 (88)0x58 (88)0x58 (88)0x58 (88)
    "KeyY"0x59 (89)0x59 (89)0x59 (89)0x59 (89)0x59 (89)0x59 (89)0x59 (89)0x59 (89)
    "KeyZ"0x5A (90)0x5A (90)0x5A (90)0x5A (90)0x5A (90)0x5A (90)0x5A (90)0x5A (90)
    + {{domxref("KeyboardEvent.code")}} + 米国日本語ギリシャ語米国日本語ギリシャ語米国日本語ギリシャ語米国日本語ギリシャ語米国日本語ギリシャ語米国日本語ギリシャ語米国日本語ギリシャ語米国日本語ギリシャ語
    WindowsWindowsMac (10.9)Linux (Ubuntu 14.04)Mac (10.9)WindowsMac (10.9)Linux (Ubuntu 14.04)
    Internet Explorer 11Google Chrome 34Chromium 34Safari 7Gecko 29
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
    keyCode values of each browser's keydown event caused by printable keys in standard position (punctuations in US layout):
    {{domxref("KeyboardEvent.code")}}Internet Explorer 11Google Chrome 34Chromium 34Safari 7Gecko 29
    WindowsWindowsMac (10.9)Linux (Ubuntu 14.04)Mac (10.9)Windows (10.9)Mac (10.9)Linux (Ubuntu 14.04)
    USJapaneseGreekUSJapaneseGreekUSJapaneseGreekUSJapaneseGreekUSJapaneseGreekUSJapaneseGreekUSJapaneseGreekUSJapaneseGreek
    {{domxref("KeyboardEvent.code")}}USJapaneseGreekUSJapaneseGreekUSJapaneseGreekUSJapaneseGreekUSJapaneseGreekUSJapaneseGreekUSJapaneseGreekUSJapaneseGreek
    WindowsWindowsMac (10.9)Linux (Ubuntu 14.04)Mac (10.9)WindowsMac (10.9)Linux (Ubuntu 14.04)
    Internet Explorer 11Google Chrome 34Chromium 34Safari 7Gecko 29
    "Comma"0xBC (188)0xBC (188)0xBC (188)0xBC (188)0xBC (188)0xBC (188)0xBC (188)0xBC (188)
    "Comma" with Shift
    "Period"0xBE (190)0xBE (190)0xBE (190)0xBE (190)0xBE (190)0xBE (190)0xBE (190)0xBE (190)
    "Period" with Shift
    "Semicolon"0xBA (186)0xBB (187)0xBA (186)0xBA (186)0xBB (187)0xBA (186)0xBA (186)0xBA (186) *10xE5 (229) *20xBA (186)0xBA (186)0xE5 (229) *30xBA (186)0xBA (186) *10xE5 (229) *20x3B (59)0x3B (59)0x00 (0)0x3B (59)0x3B (59) *10x00 (0)0x3B (59)0x3B (59)0x00 (0)
    "Semicolon" with Shift0xBB (187) *10xBB (187)0xBB (187) *1
    "Quote"0xDE (222)0xBA (186)0xDE (222)0xDE (222)0xBA (186)0xDE (222)0xDE (222)0xBA (186) *10xDE (222)0xDE (222)0xBA (186)0xDE (222)0xDE (222)0xBA (186)  *10xDE (222)0xDE (222)0x3A (58)0xDE (222)0xDE (222)0x3A (58) *10xDE (222)0xDE (222)0x3A (58)0xDE (222)
    "Quote" with Shift0xDE (222) *10x38 (56)0xDE (222) *1
    "BracketLeft"0xDB (219)0xC0(192)0xDB (219)0xDB (219)0xC0(192)0xDB (219)0xDB (219)0xDB (219) *10xDB (219)0xDB (219)0x32 (50)0xDB (219)0xDB (219)0xDB (219) *1 0xDB (219)0xDB (219)0x40 (64)0xDB (219)0xDB (219)0x40 (64) *10xDB (219)0xDB (219)0x40 (64)0xDB (219)
    "BracketLeft" with Shift0xC0 (192) *10xC0 (192)0xC0 (192) *1
    "BracketRight"0xDD (221)0xDB (219)0xDD (221)0xDD (221)0xDB (219)0xDD (221)0xDD (221)0xDB (219) *10xDD (221)0xDD (221)0xDB (219)0xDD (221)0xDD (221)0xDB (219) *10xDD (221)0xDD (221)0xDB (219)0xDD (221)0xDD (221)0xDB (219) *10xDD (221)0xDD (221)0xDB (219)0xDD (221)
    "BracketRight" with Shift
    "Backquote"0xC0 (192)N/A0xC0 (192)0xC0 (192)N/A0xC0 (192)0xC0 (192)0xC0 (192)0xF4 (244)0xC0 (192)0xC0 (192)0xC0 (192)N/A0xC0 (192)0xC0 (192)0xC0 (192)0x00 (0)0xC0 (192)
    "Backquote" with Shift
    "Backslash"0xDC (220)0xDD (221)0xDC (220)0xDC (220)0xDD (221)0xDC (220)0xDC (220)0xDC (220)0xDD (221)0xDC (220)0xDC (220)0xDC (220)0xDD (221)0xDC (220)0xDC (220)0xDC (220)0xDD (221)0xDC (220)
    "Backslash" with Shift
    "Minus"0xBD (189)0xBD (189)0xBD (189)0xBD (189) *10xBD (189)0xBD (189)0xBD (189)0xBD (189)0xBD (189)0xBD (189) *10xBD (189)0xAD (173)0xAD (173)0xAD (173) *10xAD (173)0xAD (173)
    "Minus" with Shift0xBB (187) *10xBB (187)0xBD (189)0xBB (187) *10xBD (189)
    "Equal"0xBB (187)0xDE (222)0xBB (187)0xBB (187)0xDE (222)0xBB (187)0xBB (187)0xBB (187) *10xBB (187)0xBB (187)0x36 (54)0xBB (187)0xBB (187)0xBB (187) *10xBB (187)0x3D (61)0xA0 (160)0x3D (61)0x3D (61)0xA0 (160) *10x3D (61)0x3D (61)0xA0 (160)0x3D (61)
    "Equal" with Shift0xC0 (192) *10xC0 (192)0xBB (187)0xC0 (192) *10xBB (187)
    "IntlRo"0xC1 (193)0xE2 (226)0xC1 (193)0xC1 (193)0xE2 (226)0xC1 (193)0xBD (189)0xBD (189)0x00 (0)*40xDC (220)
    -  
    *40xBD (189)0xBD (189)0xE5 (229) *50x00 (0)0xDC (220)0x00 (0)0xA7 (167)0xA7 (167)0x00 (0)0x00 (0)0xDC (220)0x00 (0)
    "IntlRo" with Shift
    "IntlYen"0xFF (255)0xDC (220)0xFF (255)0xFF (255)0xDC (220)0xFF (255)0x00 (0)0x00 (0)0x00 (0)*40xDC (220)*40x00 (0)0x00 (0)0xE5 (229) *50x00 (0)0xDC (220)0x00 (0)0xDC (220)0xDC (220)0x00 (0)0x00 (0)0xDC (220)0x00 (0)
    "IntlYen" with Shift0xDC (220)0xDC (220)0xBD (189)0xDC (220)0xDC (220)
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + 標準的な位置(US レイアウトでは区切り記号)にある表示可能なキーによって発生する keydown イベントのブラウザー別の keyCode の値。 +
    {{domxref("KeyboardEvent.code")}}IE 11Google Chrome 34Chromium 34Safari 7Gecko 29
    WindowsWindowsMac (10.9)Linux (Ubuntu 14.04)Mac (10.9)Windows (10.9)Mac (10.9)Linux (Ubuntu 14.04)
    米国日本語ギリシャ語米国日本語ギリシャ語米国日本語ギリシャ語米国日本語ギリシャ語米国日本語ギリシャ語米国日本語ギリシャ語米国日本語ギリシャ語米国日本語ギリシャ語
    "Comma"0xBC (188)0xBC (188)0xBC (188)0xBC (188)0xBC (188)0xBC (188)0xBC (188)0xBC (188)
    Shift + "Comma"
    "Period"0xBE (190)0xBE (190)0xBE (190)0xBE (190)0xBE (190)0xBE (190)0xBE (190)0xBE (190)
    Shift + "Period"
    "Semicolon"0xBA (186)0xBB (187)⚠️0xBA (186)0xBA (186)0xBB (187)⚠️0xBA (186)0xBA (186)0xBA (186) [1]0xE5 (229)⚠️ [2]0xBA (186)0xBA (186)0xE5 (229)⚠️ [3]0xBA (186)0xBA (186) [1]0xE5 (229)⚠️ [2]0x3B (59)0x3B (59)0x00 (0)⚠️0x3B (59)0x3B (59) [1]0x00 (0)⚠️0x3B (59)0x3B (59)0x00 (0)⚠️
    Shift + "Semicolon"0xBB (187)⚠️ [1]0xBB (187)⚠️0xBB (187)⚠️ [1]
    "Quote"0xDE (222)0xBA (186)⚠️0xDE (222)0xDE (222)0xBA (186)⚠️0xDE (222)0xDE (222)0xBA (186)⚠️ [1]0xDE (222)0xDE (222)0xBA (186)⚠️0xDE (222)0xDE (222)0xBA (186)⚠️ [1]0xDE (222)0xDE (222)0x3A (58)⚠️0xDE (222)0xDE (222)0x3A (58)⚠️ [1]0xDE (222)0xDE (222)0x3A (58)⚠️0xDE (222)
    Shift + "Quote"0xDE (222)⚠️ [1]0x38 (56)⚠️0xDE (222)⚠️ [1]
    "BracketLeft"0xDB (219)0xC0(192)⚠️0xDB (219)0xDB (219)0xC0(192)⚠️0xDB (219)0xDB (219)0xDB (219) [1]0xDB (219)0xDB (219)0x32 (50)⚠️0xDB (219)0xDB (219)0xDB (219) [1]0xDB (219)0xDB (219)0x40 (64)⚠️0xDB (219)0xDB (219)0x40 (64)⚠️ [1]0xDB (219)0xDB (219)0x40 (64)⚠️0xDB (219)
    Shift + "BracketLeft"0xC0 (192)⚠️ [1]0xC0 (192)⚠️0xC0 (192)⚠️ [1]
    "BracketRight"0xDD (221)0xDB (219)⚠️0xDD (221)0xDD (221)0xDB (219)⚠️0xDD (221)0xDD (221)0xDB (219)⚠️ [1]0xDD (221)0xDD (221)0xDB (219)⚠️0xDD (221)0xDD (221)0xDB (219)⚠️ [1]0xDD (221)0xDD (221)0xDB (219)⚠️0xDD (221)0xDD (221)0xDB (219)⚠️ [1]0xDD (221)0xDD (221)0xDB (219)⚠️0xDD (221)
    Shift + "BracketRight"
    "Backquote"0xC0 (192)❌ N/A0xC0 (192)0xC0 (192)❌ N/A0xC0 (192)0xC0 (192)0xC0 (192)0xF4 (244)⚠️0xC0 (192)0xC0 (192)0xC0 (192)❌ N/A0xC0 (192)0xC0 (192)0xC0 (192)0x00 (0)0xC0 (192)
    Shift + "Backquote"
    "Backslash"0xDC (220)0xDD (221)⚠️0xDC (220)0xDC (220)0xDD (221)⚠️0xDC (220)0xDC (220)0xDC (220)0xDD (221)⚠️0xDC (220)0xDC (220)0xDC (220)0xDD (221)⚠️0xDC (220)0xDC (220)0xDC (220)0xDD (221)⚠️0xDC (220)
    Shift + "Backslash"
    "Minus"0xBD (189)0xBD (189)0xBD (189)0xBD (189) [1]0xBD (189)0xBD (189)0xBD (189)0xBD (189)0xBD (189)0xBD (189) [1]0xBD (189)0xAD (173)0xAD (173)0xAD (173)[1]0xAD (173)0xAD (173)
    Shift + "Minus"0xBB (187)⚠️ [1]0xBB (187)⚠️0xBD (189)0xBB (187)⚠️ [1]0xBD (189)
    "Equal"0xBB (187)0xDE (222)⚠️0xBB (187)0xBB (187)0xDE (222)⚠️0xBB (187)0xBB (187)0xBB (187) [1]0xBB (187)0xBB (187)0x36 (54)⚠️0xBB (187)0xBB (187)0xBB (187)[1]0xBB (187)0x3D (61)0xA0 (160)⚠️0x3D (61)0x3D (61)0xA0 (160)⚠️ [1]0x3D (61)0x3D (61)0xA0 (160)⚠️0x3D (61)
    Shift + "Equal"0xC0 (192)⚠️ [1]0xC0 (192)⚠️0xBB (187)0xC0 (192)⚠️ [1]0xBB (187)
    "IntlRo"0xC1 (193)0xE2 (226)⚠️0xC1 (193)0xC1 (193)0xE2 (226)⚠️0xC1 (193)0xBD (189)0xBD (189)0x00 (0)⚠️[4]0xDC (220)⚠️[4]0xBD (189)0xBD (189)0xE5 (229)⚠️ [5]0x00 (0)0xDC (220)⚠️0x00 (0)0xA7 (167)0xA7 (167)0x00 (0)0x00 (0)0xDC (220)⚠️0x00 (0)
    Shift + "IntlRo"
    "IntlYen"0xFF (255)0xDC (220)⚠️0xFF (255)0xFF (255)0xDC (220)⚠️0xFF (255)0x00 (0)⚠️0x00 (0)⚠️0x00 (0)⚠️[4]0xDC (220)⚠️[4]0x00 (0)⚠️0x00 (0)⚠️0xE5 (229)⚠️ [5]0x00 (0)⚠️0xDC (220)⚠️0x00 (0)⚠️0xDC (220)0xDC (220)0x00 (0)⚠️0x00 (0)⚠️0xDC (220)⚠️0x00 (0)⚠️
    Shift + "IntlYen"0xDC (220)0xDC (220)0xBD (189)⚠️0xDC (220)0xDC (220)
    + {{domxref("KeyboardEvent.code")}} + 米国日本語ギリシャ語米国日本語ギリシャ語米国日本語ギリシャ語米国日本語ギリシャ語米国日本語ギリシャ語米国日本語ギリシャ語米国日本語ギリシャ語米国日本語ギリシャ語
    WindowsWindowsMac (10.9)Linux (Ubuntu 14.04)Mac (10.9)WindowsMac (10.9)Linux (Ubuntu 14.04)
    Internet Explorer 11Google Chrome 34Chromium 34Safari 7Gecko 29
    -

    *1 The value is input from JIS keyboard. When you use ANSI keyboard, the keyCode value and inputted character are what you select from the US keyboard layout.

    - -

    *2 The key is a dead key. The value of keyup event is 0xBA (186).

    - -

    *3 The key is a dead key. The value of keyup event is 0x10 (16).

    - -

    *4 No key events are fired.

    - -

    *5 The key isn't available with Greek keyboard layout (does not input any character). The value of keyup event is 0x00 (0).

    - -

    Non-printable keys (function keys)

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +\[1] JIS キーボードから入力される値です。 ANSI キーボードを使用すると、 US キーボードレイアウトから選択した keyCode 値と入力文字になります。 + +\[2] このキーはデッドキーです。イベント `keyup` の値は `0xBA (186)` です。 + +\[3] このキーはデッドキーです。イベント `keyup` の値は `0x10 (16)` です。 + +\[4] キーイベントは発行されない。 + +\[5] ギリシャ語キーボードレイアウトでは、そのキーは使用できません(いかなる文字も入力しません)。イベント `keyup` の値は `0x00 (0)` です。 + +### 非表示キー(機能キー) + +
    keyCode values of each browser's keydown event caused by modifier keys:
    {{domxref("KeyboardEvent.code")}}Internet Explorer 11Google Chrome 34Chromium 34Safari 7Gecko 29
    WindowsWindowsMac (10.9)Linux (Ubuntu 14.04)Mac (10.9)WindowsMac (10.9)Linux (Ubuntu 14.04)
    {{domxref("KeyboardEvent.code")}}WindowsWindowsMac (10.9)Linux (Ubuntu 14.04)Mac (10.9)WindowsMac (10.9)Linux (Ubuntu 14.04)
    Internet Explorer 11Google Chrome 34Chromium 34Safari 7Gecko 29
    "AltLeft"0x12 (18)0x12 (18)0x12 (18)0x12 (18)0x12 (18)0x12 (18)0x12 (18)0x12 (18)
    "AltRight"0x12 (18)0x12 (18)0x12 (18)0x12 (18)0x12 (18)0x12 (18)0x12 (18)0x12 (18)
    "AltRight" when it's "AltGraph" key*1*1N/A0xE1 (225)N/A*1N/A0xE1 (225)
    "CapsLock"0x14 (20) *20x14 (20) *20x14 (20)0x14 (20)0x14 (20)0x14 (20) *20x14 (20)0x14 (20) *3
    "ControlLeft"0x11 (17)0x11 (17)0x11 (17)0x11 (17)0x11 (17)0x11 (17)0x11 (17)0x11 (17)
    "ControlRight"0x11 (17)0x11 (17)0x11 (17)0x11 (17)0x11 (17)0x11 (17)0x11 (17)0x11 (17)
    "OSLeft"0x5B (91)0x5B (91)0x5B (91)0x5B (91)0x5B (91)0x5B (91)0xE0 (224)0x5B (91)
    "OSRight"0x5C (92)0x5C (92)0x5D (93)0x5C (92)0x5D (93)0x5B (91)0xE0 (224)0x5B (91)
    "ShiftLeft"0x10 (16)0x10 (16)0x10 (16)0x10 (16)0x10 (16)0x10 (16)0x10 (16)0x10 (16)
    "ShiftRight"0x10 (16)0x10 (16)0x10 (16)0x10 (16)0x10 (16)0x10 (16)0x10 (16)0x10 (16)
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + 修飾キーによって発生する keydown イベントのブラウザー別の keyCode の値 +
    + {{domxref("KeyboardEvent.code")}} + IE 11Google Chrome 34Chromium 34Safari 7Gecko 29
    WindowsWindowsMac (10.9)Linux (Ubuntu 14.04)Mac (10.9)WindowsMac (10.9)Linux (Ubuntu 14.04)
    "AltLeft"0x12 (18)0x12 (18)0x12 (18)0x12 (18)0x12 (18)0x12 (18)0x12 (18)0x12 (18)
    "AltRight"0x12 (18)0x12 (18)0x12 (18)0x12 (18)0x12 (18)0x12 (18)0x12 (18)0x12 (18)
    + "AltRight""AltGraph" キーであった場合) + [1][1]❌N/A0xE1 (225)⚠️❌ N/A[1]❌ N/A0xE1 (225)⚠️
    "CapsLock"0x14 (20) [2]0x14 (20) [2]0x14 (20)0x14 (20)0x14 (20)0x14 (20) [2]0x14 (20)0x14 (20) [3]
    "ControlLeft"0x11 (17)0x11 (17)0x11 (17)0x11 (17)0x11 (17)0x11 (17)0x11 (17)0x11 (17)
    "ControlRight"0x11 (17)0x11 (17)0x11 (17)0x11 (17)0x11 (17)0x11 (17)0x11 (17)0x11 (17)
    "OSLeft"0x5B (91)0x5B (91)0x5B (91)0x5B (91)0x5B (91)0x5B (91)0xE0 (224)⚠️0x5B (91)
    "OSRight"0x5C (92)0x5C (92)0x5D (93)⚠️0x5C (92)0x5D (93)⚠️0x5B (91)⚠️0xE0 (224)⚠️0x5B (91)⚠️
    "ShiftLeft"0x10 (16)0x10 (16)0x10 (16)0x10 (16)0x10 (16)0x10 (16)0x10 (16)0x10 (16)
    "ShiftRight"0x10 (16)0x10 (16)0x10 (16)0x10 (16)0x10 (16)0x10 (16)0x10 (16)0x10 (16)
    + {{domxref("KeyboardEvent.code")}} + WindowsWindowsMac (10.9)Linux (Ubuntu 14.04)Mac (10.9)WindowsMac (10.9)Linux (Ubuntu 14.04)
    IE 11Google Chrome 34Chromium 34Safari 7Gecko 29
    -

    *1 On Windows, "AltGraph" key causes "ControlLeft" key event and "AltRight" key event.

    - -

    *2 When Japanese keyboard layout is active, "CapsLock" key without Shift causes 0xF0 (240). The key works as "Alphanumeric" key whose label is "英数".

    - -

    *3 When Japanese keyboard layout is active, "CapsLock" key without Shift causes 0x00 (0). The key works as "Alphanumeric" key whose label is "英数".

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +\[1] Windows では、 AltGraph キーを押すと `"ControlLeft"` と `"AltRight"` の両方のキーイベントを発行します。 + +\[2] 日本語キーボードレイアウトがアクティブである場合、 CapsLock キーを Shift なしで押すと `0xF0 (240)` が発生します。このキーは Alphanumeric キー (`"英数"`) として動作します。 + +\[3] 日本語キーボードレイアウトがアクティブである場合、 CapsLock キーを Shift なしで押すと `0x00 (0)` が発生します。このキーは Alphanumeric キー (`"英数"`) として動作します。 + +
    keyCode values of each browser's keydown event caused by non-printable keys:
    {{domxref("KeyboardEvent.code")}}Internet Explorer 11Google Chrome 34Chromium 34Safari 7Gecko 29
    WindowsWindowsMac (10.9)Linux (Ubuntu 14.04)Mac (10.9)WindowsMac (10.9)Linux (Ubuntu 14.04)
    {{domxref("KeyboardEvent.code")}}WindowsWindowsMac (10.9)Linux (Ubuntu 14.04)Mac (10.9)WindowsMac (10.9)Linux (Ubuntu 14.04)
    Internet Explorer 11Google Chrome 34Chromium 34Safari 7Gecko 29
    "ContextMenu"0x5D (93)0x5D (93)0x00 (0) *10x5D (93)0x00 (0) *10x5D (93)0x5D (93)0x5D (93)
    "Enter"0x0D (13)0x0D (13)0x0D (13)0x0D (13)0x0D (13)0x0D (13)0x0D (13)0x0D (13)
    "Space"0x20 (32)0x20 (32)0x20 (32)0x20 (32)0x20 (32)0x20 (32)0x20 (32)0x20 (32)
    "Tab"0x09 (9)0x09 (9)0x09 (9)0x09 (9)0x09 (9)0x09 (9)0x09 (9)0x09 (9)
    "Delete"0x2E (46)0x2E (46)0x2E (46)0x2E (46)0x2E (46)0x2E (46)0x2E (46)0x2E (46)
    "End"0x23 (35)0x23 (35)0x23 (35)0x23 (35)0x23 (35)0x23 (35)0x23 (35)0x23 (35)
    "Help"N/AN/A0x2D (45) *20x2F (47) *30x2D (45) *2N/A0x2D (45) *20x06 (6) *3
    "Home"0x24 (36)0x24 (36)0x24 (36)0x24 (36)0x24 (36)0x24 (36)0x24 (36)0x24 (36)
    "Insert"0x2D (45)0x2D (45)0x2D (45)0x2D (45)0x2D (45)0x2D (45)0x2D (45)0x2D (45)
    "PageDown"0x22 (34)0x22 (34)0x22 (34)0x22 (34)0x22 (34)0x22 (34)0x22 (34)0x22 (34)
    "PageUp"0x21 (33)0x21 (33)0x21 (33)0x21 (33)0x21 (33)0x21 (33)0x21 (33)0x21 (33)
    "ArrowDown"0x28 (40)0x28 (40)0x28 (40)0x28 (40)0x28 (40)0x28 (40)0x28 (40)0x28 (40)
    "ArrowLeft"0x25 (37)0x25 (37)0x25 (37)0x25 (37)0x25 (37)0x25 (37)0x25 (37)0x25 (37)
    "ArrowRight"0x27 (39)0x27 (39)0x27 (39)0x27 (39)0x27 (39)0x27 (39)0x27 (39)0x27 (39)
    "ArrowUp"0x26 (38)0x26 (38)0x26 (38)0x26 (38)0x26 (38)0x26 (38)0x26 (38)0x26 (38)
    "Escape"0x1B (27)0x1B (27)0x1B (27)0x1B (27)0x1B (27)0x1B (27)0x1B (27)0x1B (27)
    "PrintScreen"0x2C (44) *40x2C (44) *40x7C (124)*50x2A (42)0x7C (124)*50x2C (44) *40x2C (44)0x2A (42)
    "ScrollLock"0x91 (145)0x91 (145)0x7D (125)*50x91 (145)0x7D (125)*50x91 (145)0x91 (145)0x91 (145)
    "Pause"0x13 (19) *60x13 (19) *60x7E (126)*50x13 (19)0x7E (126)*50x13 (19) *60x13 (19)0x13 (19)
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + 非表示キーによって発生した keydown イベントのブラウザー別の keyCode の値 +
    + {{domxref("KeyboardEvent.code")}} + IE 11Google Chrome 34Chromium 34Safari 7Gecko 29
    WindowsWindowsMac (10.9)Linux (Ubuntu 14.04)Mac (10.9)WindowsMac (10.9)Linux (Ubuntu 14.04)
    "ContextMenu"0x5D (93)0x5D (93)0x00 (0)⚠️ [1]0x5D (93)0x00 (0)⚠️ [1]0x5D (93)0x5D (93)0x5D (93)
    "Enter"0x0D (13)0x0D (13)0x0D (13)0x0D (13)0x0D (13)0x0D (13)0x0D (13)0x0D (13)
    "Space"0x20 (32)0x20 (32)0x20 (32)0x20 (32)0x20 (32)0x20 (32)0x20 (32)0x20 (32)
    "Tab"0x09 (9)0x09 (9)0x09 (9)0x09 (9)0x09 (9)0x09 (9)0x09 (9)0x09 (9)
    "Delete"0x2E (46)0x2E (46)0x2E (46)0x2E (46)0x2E (46)0x2E (46)0x2E (46)0x2E (46)
    "End"0x23 (35)0x23 (35)0x23 (35)0x23 (35)0x23 (35)0x23 (35)0x23 (35)0x23 (35)
    "Help"❌ N/A❌ N/A0x2D (45)
    ⚠️ [2]
    0x2F (47)
    ⚠️ [3]
    0x2D (45)
    ⚠️ [2]
    ❌ N/A0x2D (45)
    ⚠️ [2]
    0x06 (6)
    ⚠️ [3]
    "Home"0x24 (36)0x24 (36)0x24 (36)0x24 (36)0x24 (36)0x24 (36)0x24 (36)0x24 (36)
    "Insert"0x2D (45)0x2D (45)0x2D (45)0x2D (45)0x2D (45)0x2D (45)0x2D (45)0x2D (45)
    "PageDown"0x22 (34)0x22 (34)0x22 (34)0x22 (34)0x22 (34)0x22 (34)0x22 (34)0x22 (34)
    "PageUp"0x21 (33)0x21 (33)0x21 (33)0x21 (33)0x21 (33)0x21 (33)0x21 (33)0x21 (33)
    "ArrowDown"0x28 (40)0x28 (40)0x28 (40)0x28 (40)0x28 (40)0x28 (40)0x28 (40)0x28 (40)
    "ArrowLeft"0x25 (37)0x25 (37)0x25 (37)0x25 (37)0x25 (37)0x25 (37)0x25 (37)0x25 (37)
    "ArrowRight"0x27 (39)0x27 (39)0x27 (39)0x27 (39)0x27 (39)0x27 (39)0x27 (39)0x27 (39)
    "ArrowUp"0x26 (38)0x26 (38)0x26 (38)0x26 (38)0x26 (38)0x26 (38)0x26 (38)0x26 (38)
    "Escape"0x1B (27)0x1B (27)0x1B (27)0x1B (27)0x1B (27)0x1B (27)0x1B (27)0x1B (27)
    "PrintScreen"0x2C (44) [4]0x2C (44) [4]0x7C (124)
    ⚠️ [5]
    0x2A (42)⚠️0x7C (124)
    ⚠️ [5]
    0x2C (44) [4]0x2C (44)0x2A (42)⚠️
    "ScrollLock"0x91 (145)0x91 (145)0x7D (125)
    ⚠️ [5]
    0x91 (145)0x7D (125)
    ⚠️ [5]
    0x91 (145)0x91 (145)0x91 (145)
    "Pause"0x13 (19) [6]0x13 (19) [6]0x7E (126)
    ⚠️ [5]
    0x13 (19)0x7E (126)
    ⚠️ [5]
    0x13 (19) [6]0x13 (19)0x13 (19)
    + {{domxref("KeyboardEvent.code")}} + WindowsWindowsMac (10.9)Linux (Ubuntu 14.04)Mac (10.9)WindowsMac (10.9)Linux (Ubuntu 14.04)
    IE 11Google Chrome 34Chromium 34Safari 7Gecko 29
    -

    *1 keypress event is fired whose keyCode and charCode are 0x10 (16) but text isn't inputted into editor.

    - -

    *2 On Mac, "Help" key is mapped to "Insert" key of PC keyboard. These keyCode values are the same as the "Insert" key's keyCode value.

    - -

    *3 Tested on Fedora 20.

    - -

    *4 Only keyup event is fired.

    - -

    *5 PC's "PrintScreen", "ScrollLock" and "Pause" are mapped to Mac's "F13", "F14" and "F15". Chrome and Safari map same keyCode values with Mac's keys.

    - -

    *6 "Pause" key with Control causes 0x03 (3).

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +\[1] `keypress` イベントが発行され、その `keyCode` と `charCode` は `0x10 (16)` になりますが、実際にはテキストはエディターに入力されません。 + +\[2] Mac では、 Help キーは PC のキーボードの Insert キーに割り当てられています。これらの `keyCode` 値は Insert キーの `keyCode` 値と同じです。 + +\[3] Fedora 20 でテストしました。 + +\[4] `keyup` イベントのみが発生します。 + +\[5] PC の PrintScreen, ScrollLock, Pause はそれぞれ Mac の F13, F14, F15 に割り当てられます。 Chrome と Safari はこれらを Mac のキーと同じ `keyCode` 値に割り当てています。 + +\[6] Pause キーを Control 付きで推すと `0x03 (3)` を生成します。 + +
    keyCode values of each browser's keydown event caused by function keys:
    {{domxref("KeyboardEvent.code")}}Internet Explorer 11Google Chrome 34Chromium 34Safari 7Gecko 29
    WindowsWindowsMac (10.9)Linux (Ubuntu 14.04)Mac (10.9)WindowsMac (10.9)Linux (Ubuntu 14.04)
    {{domxref("KeyboardEvent.code")}}WindowsWindowsMac (10.9)Linux (Ubuntu 14.04)Mac (10.9)WindowsMac (10.9)Linux (Ubuntu 14.04)
    Internet Explorer 11Google Chrome 34Chromium 34Safari 7Gecko 29
    "F1"0x70 (112)0x70 (112)0x70 (112)0x70 (112)0x70 (112)0x70 (112)0x70 (112)0x70 (112)
    "F2"0x71 (113)0x71 (113)0x71 (113)0x71 (113)0x71 (113)0x71 (113)0x71 (113)0x71 (113)
    "F3"0x72 (114)0x72 (114)0x72 (114)0x72 (114)0x72 (114)0x72 (114)0x72 (114)0x72 (114)
    "F4"0x73 (115)0x73 (115)0x73 (115)0x73 (115)0x73 (115)0x73 (115)0x73 (115)0x73 (115)
    "F5"0x74 (116)0x74 (116)0x74 (116)0x74 (116)0x74 (116)0x74 (116)0x74 (116)0x74 (116)
    "F6"0x75 (117)0x75 (117)0x75 (117)0x75 (117)0x75 (117)0x75 (117)0x75 (117)0x75 (117)
    "F7"0x76 (118)0x76 (118)0x76 (118)0x76 (118)0x76 (118)0x76 (118)0x76 (118)0x76 (118)
    "F8"0x77 (119)0x77 (119)0x77 (119)0x77 (119)0x77 (119)0x77 (119)0x77 (119)0x77 (119)
    "F9"0x78 (120)0x78 (120)0x78 (120)0x78 (120)0x78 (120)0x78 (120)0x78 (120)0x78 (120)
    "F10"0x79 (121)0x79 (121)0x79 (121)0x79 (121)0x79 (121)0x79 (121)0x79 (121)0x79 (121)
    "F11"0x7A (122)0x7A (122)0x7A (122)0x7A (122)0x7A (122)0x7A (122)0x7A (122)0x7A (122)
    "F12"0x7B (123)0x7B (123)0x7B (123)0x7B (123)0x7B (123)0x7B (123)0x7B (123)0x7B (123)
    "F13"0x7C (124)0x7C (124)0x7C (124)0x7C (124) *10x7C (124)0x7C (124)0x2C (44) *20x00 (0) *3
    "F14"0x7D (125)0x7D (125)0x7D (125)0x7D (125) *10x7D (125)0x7D (125)0x91 (145) *20x00 (0) *3
    "F15"0x7E (126)0x7E (126)0x7E (126)0x7E (126) *10x7E (126)0x7E (126)0x13 (19) *20x00 (0) *3
    "F16"0x7F (127)0x7F (127)0x7F (127)0x7F (127) *10x7F (127)0x7F (127)0x7F (127)0x00 (0) *3
    "F17"0x80 (128)0x80 (128)0x80 (128)0x80 (128) *10x80 (128)0x80 (128)0x80 (128)0x00 (0) *3
    "F18"0x81 (129)0x81 (129)0x81 (129)0x81 (129) *10x81 (129)0x81 (129)0x81 (129)0x00 (0) *3
    "F19"0x82 (130)0x82 (130)0x82 (130)N/A *40x82 (130)0x82 (130)0x82 (130)0x00 (0) *3
    "F20"0x83 (131)0x83 (131)0x83 (131)N/A *40xE5 (229) *50x83 (131)0x00 (0)N/A *6
    "F21"0x84 (132)0x84 (132)0x00 (0) *7N/A *40x00 (0) *70x84 (132)N/A *8N/A *6
    "F22"0x85 (133)0x85 (133)0x00 (0) *7N/A *40x00 (0) *70x85 (133)N/A *8N/A *6
    "F23"0x86 (134)0x86 (134)0x00 (0) *7N/A *40x00 (0) *70x86 (134)N/A *8N/A *6
    "F24"0x87 (135)0x87 (135)0x00 (0) *7N/A *40x00 (0) *70x87 (135)N/A *80x00 (0) *3
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + 機能キーによる keydown イベントのブラウザー別の keyCode の値 +
    + {{domxref("KeyboardEvent.code")}} + IE 11Google Chrome 34Chromium 34Safari 7Gecko 29
    WindowsWindowsMac (10.9)Linux (Ubuntu 14.04)Mac (10.9)WindowsMac (10.9)Linux (Ubuntu 14.04)
    "F1"0x70 (112)0x70 (112)0x70 (112)0x70 (112)0x70 (112)0x70 (112)0x70 (112)0x70 (112)
    "F2"0x71 (113)0x71 (113)0x71 (113)0x71 (113)0x71 (113)0x71 (113)0x71 (113)0x71 (113)
    "F3"0x72 (114)0x72 (114)0x72 (114)0x72 (114)0x72 (114)0x72 (114)0x72 (114)0x72 (114)
    "F4"0x73 (115)0x73 (115)0x73 (115)0x73 (115)0x73 (115)0x73 (115)0x73 (115)0x73 (115)
    "F5"0x74 (116)0x74 (116)0x74 (116)0x74 (116)0x74 (116)0x74 (116)0x74 (116)0x74 (116)
    "F6"0x75 (117)0x75 (117)0x75 (117)0x75 (117)0x75 (117)0x75 (117)0x75 (117)0x75 (117)
    "F7"0x76 (118)0x76 (118)0x76 (118)0x76 (118)0x76 (118)0x76 (118)0x76 (118)0x76 (118)
    "F8"0x77 (119)0x77 (119)0x77 (119)0x77 (119)0x77 (119)0x77 (119)0x77 (119)0x77 (119)
    "F9"0x78 (120)0x78 (120)0x78 (120)0x78 (120)0x78 (120)0x78 (120)0x78 (120)0x78 (120)
    "F10"0x79 (121)0x79 (121)0x79 (121)0x79 (121)0x79 (121)0x79 (121)0x79 (121)0x79 (121)
    "F11"0x7A (122)0x7A (122)0x7A (122)0x7A (122)0x7A (122)0x7A (122)0x7A (122)0x7A (122)
    "F12"0x7B (123)0x7B (123)0x7B (123)0x7B (123)0x7B (123)0x7B (123)0x7B (123)0x7B (123)
    "F13"0x7C (124)0x7C (124)0x7C (124)0x7C (124) [1]0x7C (124)0x7C (124)0x2C (44) ⚠️ [2]0x00 (0)⚠️ [3]
    "F14"0x7D (125)0x7D (125)0x7D (125)0x7D (125) [1]0x7D (125)0x7D (125)0x91 (145) ⚠️ [2]0x00 (0)⚠️ [3]
    "F15"0x7E (126)0x7E (126)0x7E (126)0x7E (126) [1]0x7E (126)0x7E (126)0x13 (19) ⚠️ [2]0x00 (0)⚠️ [3]
    "F16"0x7F (127)0x7F (127)0x7F (127)0x7F (127) [1]0x7F (127)0x7F (127)0x7F (127)0x00 (0)⚠️ [3]
    "F17"0x80 (128)0x80 (128)0x80 (128)0x80 (128) [1]0x80 (128)0x80 (128)0x80 (128)0x00 (0)⚠️ [3]
    "F18"0x81 (129)0x81 (129)0x81 (129)0x81 (129) [1]0x81 (129)0x81 (129)0x81 (129)0x00 (0)⚠️ [3]
    "F19"0x82 (130)0x82 (130)0x82 (130)N/A [4]0x82 (130)0x82 (130)0x82 (130)0x00 (0)⚠️ [3]
    "F20"0x83 (131)0x83 (131)0x83 (131)N/A [4]0xE5 (229)⚠️ [5]0x83 (131)0x00 (0)⚠️N/A [6]
    "F21"0x84 (132)0x84 (132)0x00 (0)⚠️ [7]N/A [4]0x00 (0)⚠️ [7]0x84 (132)N/A [8]N/A [6]
    "F22"0x85 (133)0x85 (133)0x00 (0)⚠️ [7]N/A [4]0x00 (0)⚠️ [7]0x85 (133)N/A [8]N/A [6]
    "F23"0x86 (134)0x86 (134)0x00 (0)⚠️ [7]N/A [4]0x00 (0)⚠️ [7]0x86 (134)N/A [8]N/A [6]
    "F24"0x87 (135)0x87 (135)0x00 (0)⚠️ [7]N/A [4]0x00 (0)⚠️ [7]0x87 (135)N/A [8]0x00 (0)⚠️ [3]
    + {{domxref("KeyboardEvent.code")}} + WindowsWindowsMac (10.9)Linux (Ubuntu 14.04)Mac (10.9)WindowsMac (10.9)Linux (Ubuntu 14.04)
    IE 11Google Chrome 34Chromium 34Safari 7Gecko 29
    -

    *1 Tested on Fedora 20.

    - -

    *2 PC's "PrintScreen", "ScrollLock" and "Pause" are mapped to Mac's "F13", "F14" and "F15". Firefox maps same keyCode values with PC's keys.

    - -

    *3 Tested on Fedora 20. The keys don't cause GDK_Fxx keysyms. If the keys cause proper keysyms, these values must be same as IE.

    - -

    *4 Tested on Fedora 20. The keys don't cause DOM key events on Chromium.

    - -

    *5 keyUp event's keyCode value is 0x83 (131).

    - -

    *6 Tested on Fedora 20. The keys don't cause DOM key events on Firefox.

    - -

    *7 Only keydown event is fired.

    - -

    *8 No DOM key events are fired on Firefox.

    - -

    Numpad keys

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +\[1] Fedora 20 でテストしました。 + +\[2] PC では、PrintScreenScrollLockPause はそれぞれ Mac の F13F14F15 に割り当てられています。Firefox はそれらに、PC のキーと同じ `keyCode` 値を設定します。 + +\[3] Fedora 20 でテストしました。 このキーは `GDK_Fxx` の keysyms を発生させません。キーが適切な keysyms を発生させる場合、これらの値は IE と同じでなければなりません。 + +\[4] Fedora 20 でテストしました。 Chromium では、このキーは DOM キーイベントを発生させません。 + +\[5] `keyUp` イベントの `keyCode` の値は `0x83 (131)` です。 + +\[6] Fedora 20 でテストしました。 Firefox では、このキーは DOM キーイベントを発生させません。 + +\[7] `keydown` イベントのみが発行されます。 + +\[8] Firefox では、 DOM キーイベントは発行されません。 + +### テンキー + +
    keyCode values of each browser's keydown event caused by keys in numpad in NumLock state
    {{domxref("KeyboardEvent.code")}}Internet Explorer 11Google Chrome 34Chromium 34Safari 7Gecko 29
    WindowsWindowsMac (10.9)Linux (Ubuntu 14.04)Mac (10.9)WindowsMac (10.9)Linux (Ubuntu 14.04)
    {{domxref("KeyboardEvent.code")}}WindowsWindowsMac (10.9)Linux (Ubuntu 14.04)Mac (10.9)WindowsMac (10.9)Linux (Ubuntu 14.04)
    Internet Explorer 11Google Chrome 34Chromium 34Safari 7Gecko 29
    "NumLock"0x90 (144)0x90 (144)0x0C (12) *10x90 (144)0x0C (12) *10x90 (144)0x0C (12) *10x90 (144)
    "Numpad0"0x60 (96)0x60 (96)0x60 (96)0x60 (96)0x60 (96)0x60 (96)0x60 (96)0x60 (96)
    "Numpad1"0x61 (97)0x61 (97)0x61 (97)0x61 (97)0x61 (97)0x61 (97)0x61 (97)0x61 (97)
    "Numpad2"0x62 (98)0x62 (98)0x62 (98)0x62 (98)0x62 (98)0x62 (98)0x62 (98)0x62 (98)
    "Numpad3"0x63 (99)0x63 (99)0x63 (99)0x63 (99)0x63 (99)0x63 (99)0x63 (99)0x63 (99)
    "Numpad4"0x64 (100)0x64 (100)0x64 (100)0x64 (100)0x64 (100)0x64 (100)0x64 (100)0x64 (100)
    "Numpad5"0x65 (101)0x65 (101)0x65 (101)0x65 (101)0x65 (101)0x65 (101)0x65 (101)0x65 (101)
    "Numpad6"0x66 (102)0x66 (102)0x66 (102)0x66 (102)0x66 (102)0x66 (102)0x66 (102)0x66 (102)
    "Numpad7"0x67 (103)0x67 (103)0x67 (103)0x67 (103)0x67 (103)0x67 (103)0x67 (103)0x67 (103)
    "Numpad8"0x68 (104)0x68 (104)0x68 (104)0x68 (104)0x68 (104)0x68 (104)0x68 (104)0x68 (104)
    "Numpad9"0x69 (105)0x69 (105)0x69 (105)0x69 (105)0x69 (105)0x69 (105)0x69 (105)0x69 (105)
    "NumpadAdd"0x6B (107)0x6B (107)0x6B (107)0x6B (107)0x6B (107)0x6B (107)0x6B (107)0x6B (107)
    "NumpadComma" inputting ","0xC2 (194)0xC2 (194)0xBC (188)Always inputs "."0xBC (188)0xC2 (194)0x6C (108)Always inputs "."
    "NumpadComma" inputting "." or empty string0xC2 (194)0xC2 (194)0xBE (190)0x6E (110)0xBE (190)0xC2 (194)0x6C (108)0x6E (110)
    "NumpadDecimal" inputting "."0x6E (110)0x6E (110)0x6E (110)0x6E (110)0x6E (110)0x6E (110)0x6E (110)0x6E (110)
    "NumpadDecimal" inputting ","0x6E (110)0x6E (110)0x6E (110)0x6C (108)0x6E (110)0x6E (110)0x6E (110)0x6C (108)
    "NumpadDivide"0x6F (111)0x6F (111)0x6F (111)0x6F (111)0x6F (111)0x6F (111)0x6F (111)0x6F (111)
    "NumpadEnter"0x0D (13)0x0D (13)0x0D (13)0x0D (13)0x0D (13)0x0D (13)0x0D (13)0x0D (13)
    "NumpadEqual"0x0C (12)0x0C (12)0xBB (187)0xBB (187)0xBB (187)0x0C (12)0x3D (61)0x3D (61)
    "NumpadMultiply"0x6A (106)0x6A (106)0x6A (106)0x6A (106)0x6A (106)0x6A (106)0x6A (106)0x6A (106)
    "NumpadSubtract"0x6D (109)0x6D (109)0x6D (109)0x6D (109)0x6D (109)0x6D (109)0x6D (109)0x6D (109)
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + NumLock 状態のテンキーで発生した keydown イベントのそれぞれのブラウザーの keyCode の値 +
    + {{domxref("KeyboardEvent.code")}} + IE 11Google Chrome 34Chromium 34Safari 7Gecko 29
    WindowsWindowsMac (10.9)Linux (Ubuntu 14.04)Mac (10.9)WindowsMac (10.9)Linux (Ubuntu 14.04)
    "NumLock"0x90 (144)0x90 (144)0x0C (12)⚠️ [1]0x90 (144)0x0C (12)⚠️ [1]0x90 (144)0x0C (12)⚠️ [1]0x90 (144)
    "Numpad0"0x60 (96)0x60 (96)0x60 (96)0x60 (96)0x60 (96)0x60 (96)0x60 (96)0x60 (96)
    "Numpad1"0x61 (97)0x61 (97)0x61 (97)0x61 (97)0x61 (97)0x61 (97)0x61 (97)0x61 (97)
    "Numpad2"0x62 (98)0x62 (98)0x62 (98)0x62 (98)0x62 (98)0x62 (98)0x62 (98)0x62 (98)
    "Numpad3"0x63 (99)0x63 (99)0x63 (99)0x63 (99)0x63 (99)0x63 (99)0x63 (99)0x63 (99)
    "Numpad4"0x64 (100)0x64 (100)0x64 (100)0x64 (100)0x64 (100)0x64 (100)0x64 (100)0x64 (100)
    "Numpad5"0x65 (101)0x65 (101)0x65 (101)0x65 (101)0x65 (101)0x65 (101)0x65 (101)0x65 (101)
    "Numpad6"0x66 (102)0x66 (102)0x66 (102)0x66 (102)0x66 (102)0x66 (102)0x66 (102)0x66 (102)
    "Numpad7"0x67 (103)0x67 (103)0x67 (103)0x67 (103)0x67 (103)0x67 (103)0x67 (103)0x67 (103)
    "Numpad8"0x68 (104)0x68 (104)0x68 (104)0x68 (104)0x68 (104)0x68 (104)0x68 (104)0x68 (104)
    "Numpad9"0x69 (105)0x69 (105)0x69 (105)0x69 (105)0x69 (105)0x69 (105)0x69 (105)0x69 (105)
    "NumpadAdd"0x6B (107)0x6B (107)0x6B (107)0x6B (107)0x6B (107)0x6B (107)0x6B (107)0x6B (107)
    "NumpadComma""," を入力)0xC2 (194)0xC2 (194)0xBC (188)⚠️常に "." を入力0xBC (188)⚠️0xC2 (194)0x6C (108)⚠️常に "." を入力
    + "NumpadComma""." または空文字列を入力) + 0xC2 (194)0xC2 (194)0xBE (190)⚠️0x6E (110)⚠️0xBE (190)⚠️0xC2 (194)0x6C (108)⚠️0x6E (110)⚠️
    + "NumpadDecimal""." を入力) + 0x6E (110)0x6E (110)0x6E (110)0x6E (110)0x6E (110)0x6E (110)0x6E (110)0x6E (110)
    + "NumpadDecimal""," を入力) + 0x6E (110)0x6E (110)0x6E (110)0x6C (108)⚠️0x6E (110)0x6E (110)0x6E (110)0x6C (108)⚠️
    "NumpadDivide"0x6F (111)0x6F (111)0x6F (111)0x6F (111)0x6F (111)0x6F (111)0x6F (111)0x6F (111)
    "NumpadEnter"0x0D (13)0x0D (13)0x0D (13)0x0D (13)0x0D (13)0x0D (13)0x0D (13)0x0D (13)
    "NumpadEqual"0x0C (12)0x0C (12)0xBB (187)⚠️0xBB (187)⚠️0xBB (187)⚠️0x0C (12)0x3D (61)⚠️0x3D (61)⚠️
    "NumpadMultiply"0x6A (106)0x6A (106)0x6A (106)0x6A (106)0x6A (106)0x6A (106)0x6A (106)0x6A (106)
    "NumpadSubtract"0x6D (109)0x6D (109)0x6D (109)0x6D (109)0x6D (109)0x6D (109)0x6D (109)0x6D (109)
    + {{domxref("KeyboardEvent.code")}} + WindowsWindowsMac (10.9)Linux (Ubuntu 14.04)Mac (10.9)WindowsMac (10.9)Linux (Ubuntu 14.04)
    IE 11Google Chrome 34Chromium 34Safari 7Gecko 29
    -

    *1 "NumLock" key works as "Clear" key on Mac.

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +\[1] `"NumLock"` キーは Mac では `"Clear"` キーとして動作します。 + +
    keyCode values of each browser's keydown event caused by keys in numpad without NumLock state
    {{domxref("KeyboardEvent.code")}}Internet Explorer 11Google Chrome 34Chromium 34Gecko 29
    WindowsWindowsLinux (Ubuntu 14.04)WindowsLinux (Ubuntu 14.04)
    {{domxref("KeyboardEvent.code")}}WindowsWindowsLinux (Ubuntu 14.04)WindowsLinux (Ubuntu 14.04)
    Internet Explorer 11Google Chrome 34Chromium 34Gecko 29
    "Numpad0" ("Insert")0x2D (45)0x2D (45)0x2D (45)0x2D (45)0x2D (45)
    "Numpad1" ("End")0x23 (35)0x23 (35)0x23 (35)0x23 (35)0x23 (35)
    "Numpad2" ("ArrowDown")0x28 (40)0x28 (40)0x28 (40)0x28 (40)0x28 (40)
    "Numpad3" ("PageDown")0x22 (34)0x22 (34)0x22 (34)0x22 (34)0x22 (34)
    "Numpad4" ("ArrowLeft")0x25 (37)0x25 (37)0x25 (37)0x25 (37)0x25 (37)
    "Numpad5"0x0C (12)0x0C (12)0x0C (12)0x0C (12)0x0C (12)
    "Numpad6" ("ArrowRight")0x27 (39)0x27 (39)0x27 (39)0x27 (39)0x27 (39)
    "Numpad7" ("Home")0x24 (36)0x24 (36)0x24 (36)0x24 (36)0x24 (36)
    "Numpad8" ("ArrowUp")0x26 (38)0x26 (38)0x26 (38)0x26 (38)0x26 (38)
    "Numpad9" ("PageUp")0x21 (33)0x21 (33)0x21 (33)0x21 (33)0x21 (33)
    "NumpadDecimal" ("Delete")0x2E (46)0x2E (46)0x2E (46)0x2E (46)0x2E (46)
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + NumLock 状態でないテンキーで発生した keydown イベントのブラウザー別の keyCode の値 +
    + {{domxref("KeyboardEvent.code")}} + IE 11Google Chrome 34Chromium 34Gecko 29
    WindowsWindowsLinux (Ubuntu 14.04)WindowsLinux (Ubuntu 14.04)
    "Numpad0" ("Insert")0x2D (45)0x2D (45)0x2D (45)0x2D (45)0x2D (45)
    "Numpad1" ("End")0x23 (35)0x23 (35)0x23 (35)0x23 (35)0x23 (35)
    "Numpad2" ("ArrowDown")0x28 (40)0x28 (40)0x28 (40)0x28 (40)0x28 (40)
    "Numpad3" ("PageDown")0x22 (34)0x22 (34)0x22 (34)0x22 (34)0x22 (34)
    "Numpad4" ("ArrowLeft")0x25 (37)0x25 (37)0x25 (37)0x25 (37)0x25 (37)
    "Numpad5"0x0C (12)0x0C (12)0x0C (12)0x0C (12)0x0C (12)
    "Numpad6" ("ArrowRight")0x27 (39)0x27 (39)0x27 (39)0x27 (39)0x27 (39)
    "Numpad7" ("Home")0x24 (36)0x24 (36)0x24 (36)0x24 (36)0x24 (36)
    "Numpad8" ("ArrowUp")0x26 (38)0x26 (38)0x26 (38)0x26 (38)0x26 (38)
    "Numpad9" ("PageUp")0x21 (33)0x21 (33)0x21 (33)0x21 (33)0x21 (33)
    "NumpadDecimal" ("Delete")0x2E (46)0x2E (46)0x2E (46)0x2E (46)0x2E (46)
    + {{domxref("KeyboardEvent.code")}} + WindowsWindowsLinux (Ubuntu 14.04)WindowsLinux (Ubuntu 14.04)
    IE 11Google Chrome 34Chromium 34Gecko 29
    -

    * Recent Mac doesn't have "NumLock" key and state. Therefore, unlocked state isn't available.

    - -

    Constants for keyCode value

    - -

    Gecko defines a lot of keyCode values in KeyboardEvent for making the mapping table explicitly. These values are useful for add-on developers of Firefox, but not so useful in public web pages.

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +> **Note:** 最近の Mac には NumLock キーがないので、状態が分かりません。そのため、ロック解除の状態が利用できません。 + +## keyCode 値の定数 + +Gecko は、対応表を明示的に作成するために、`KeyboardEvent` に多くの `keyCode` 値を定義しています。これらの値は、Firefox のアドオン開発者にとっては便利ですが、一般的なウェブページではあまり有用ではありません。 + +
    ConstantValueDescription
    DOM_VK_CANCEL0x03 (3)Cancel key.
    DOM_VK_HELP0x06 (6)Help key.
    DOM_VK_BACK_SPACE0x08 (8)Backspace key.
    DOM_VK_TAB0x09 (9)Tab key.
    DOM_VK_CLEAR0x0C (12)"5" key on Numpad when NumLock is unlocked. Or on Mac, clear key which is positioned at NumLock key.
    DOM_VK_RETURN0x0D (13)Return/enter key on the main keyboard.
    DOM_VK_ENTER0x0E (14)Reserved, but not used. {{obsolete_inline(30)}} (Dropped, see {{bug(969247)}}.)
    DOM_VK_SHIFT0x10 (16)Shift key.
    DOM_VK_CONTROL0x11 (17)Control key.
    DOM_VK_ALT0x12 (18)Alt (Option on Mac) key.
    DOM_VK_PAUSE0x13 (19)Pause key.
    DOM_VK_CAPS_LOCK0x14 (20)Caps lock.
    DOM_VK_KANA0x15 (21)Linux support for this keycode was added in Gecko 4.0.
    DOM_VK_HANGUL0x15 (21)Linux support for this keycode was added in Gecko 4.0.
    DOM_VK_EISU0x 16 (22)"英数" key on Japanese Mac keyboard. {{gecko_minversion_inline("15.0")}}
    DOM_VK_JUNJA0x17 (23)Linux support for this keycode was added in Gecko 4.0.
    DOM_VK_FINAL0x18 (24)Linux support for this keycode was added in Gecko 4.0.
    DOM_VK_HANJA0x19 (25)Linux support for this keycode was added in Gecko 4.0.
    DOM_VK_KANJI0x19 (25)Linux support for this keycode was added in Gecko 4.0.
    DOM_VK_ESCAPE0x1B (27)Escape key.
    DOM_VK_CONVERT0x1C (28)Linux support for this keycode was added in Gecko 4.0.
    DOM_VK_NONCONVERT0x1D (29)Linux support for this keycode was added in Gecko 4.0.
    DOM_VK_ACCEPT0x1E (30)Linux support for this keycode was added in Gecko 4.0.
    DOM_VK_MODECHANGE0x1F (31)Linux support for this keycode was added in Gecko 4.0.
    DOM_VK_SPACE0x20 (32)Space bar.
    DOM_VK_PAGE_UP0x21 (33)Page Up key.
    DOM_VK_PAGE_DOWN0x22 (34)Page Down key.
    DOM_VK_END0x23 (35)End key.
    DOM_VK_HOME0x24 (36)Home key.
    DOM_VK_LEFT0x25 (37)Left arrow.
    DOM_VK_UP0x26 (38)Up arrow.
    DOM_VK_RIGHT0x27 (39)Right arrow.
    DOM_VK_DOWN0x28 (40)Down arrow.
    DOM_VK_SELECT0x29 (41)Linux support for this keycode was added in Gecko 4.0.
    DOM_VK_PRINT0x2A (42)Linux support for this keycode was added in Gecko 4.0.
    DOM_VK_EXECUTE0x2B (43)Linux support for this keycode was added in Gecko 4.0.
    DOM_VK_PRINTSCREEN0x2C (44)Print Screen key.
    DOM_VK_INSERT0x2D (45)Ins(ert) key.
    DOM_VK_DELETE0x2E (46)Del(ete) key.
    DOM_VK_00x30 (48)"0" key in standard key location.
    DOM_VK_10x31 (49)"1" key in standard key location.
    DOM_VK_20x32 (50)"2" key in standard key location.
    DOM_VK_30x33 (51)"3" key in standard key location.
    DOM_VK_40x34 (52)"4" key in standard key location.
    DOM_VK_50x35 (53)"5" key in standard key location.
    DOM_VK_60x36 (54)"6" key in standard key location.
    DOM_VK_70x37 (55)"7" key in standard key location.
    DOM_VK_80x38 (56)"8" key in standard key location.
    DOM_VK_90x39 (57)"9" key in standard key location.
    DOM_VK_COLON0x3A (58)Colon (":") key. {{gecko_minversion_inline("15.0")}}
    DOM_VK_SEMICOLON0x3B (59)Semicolon (";") key.
    DOM_VK_LESS_THAN0x3C (60)Less-than ("<") key. {{gecko_minversion_inline("15.0")}}
    DOM_VK_EQUALS0x3D (61)Equals ("=") key.
    DOM_VK_GREATER_THAN0x3E (62)Greater-than (">") key. {{gecko_minversion_inline("15.0")}}
    DOM_VK_QUESTION_MARK0x3F (63)Question mark ("?") key. {{gecko_minversion_inline("15.0")}}
    DOM_VK_AT0x40 (64)Atmark ("@") key. {{gecko_minversion_inline("15.0")}}
    DOM_VK_A0x41 (65)"A" key.
    DOM_VK_B0x42 (66)"B" key.
    DOM_VK_C0x43 (67)"C" key.
    DOM_VK_D0x44 (68)"D" key.
    DOM_VK_E0x45 (69)"E" key.
    DOM_VK_F0x46 (70)"F" key.
    DOM_VK_G0x47 (71)"G" key.
    DOM_VK_H0x48 (72)"H" key.
    DOM_VK_I0x49 (73)"I" key.
    DOM_VK_J0x4A (74)"J" key.
    DOM_VK_K0x4B (75)"K" key.
    DOM_VK_L0x4C (76)"L" key.
    DOM_VK_M0x4D (77)"M" key.
    DOM_VK_N0x4E (78)"N" key.
    DOM_VK_O0x4F (79)"O" key.
    DOM_VK_P0x50 (80)"P" key.
    DOM_VK_Q0x51 (81)"Q" key.
    DOM_VK_R0x52 (82)"R" key.
    DOM_VK_S0x53 (83)"S" key.
    DOM_VK_T0x54 (84)"T" key.
    DOM_VK_U0x55 (85)"U" key.
    DOM_VK_V0x56 (86)"V" key.
    DOM_VK_W0x57 (87)"W" key.
    DOM_VK_X0x58 (88)"X" key.
    DOM_VK_Y0x59 (89)"Y" key.
    DOM_VK_Z0x5A (90)"Z" key.
    DOM_VK_WIN0x5B (91)Windows logo key on Windows. Or Super or Hyper key on Linux. {{gecko_minversion_inline("15.0")}}
    DOM_VK_CONTEXT_MENU0x5D (93)Opening context menu key.
    DOM_VK_SLEEP0x5F (95)Linux support for this keycode was added in Gecko 4.0.
    DOM_VK_NUMPAD00x60 (96)"0" on the numeric keypad.
    DOM_VK_NUMPAD10x61 (97)"1" on the numeric keypad.
    DOM_VK_NUMPAD20x62 (98)"2" on the numeric keypad.
    DOM_VK_NUMPAD30x63 (99)"3" on the numeric keypad.
    DOM_VK_NUMPAD40x64 (100)"4" on the numeric keypad.
    DOM_VK_NUMPAD50x65 (101)"5" on the numeric keypad.
    DOM_VK_NUMPAD60x66 (102)"6" on the numeric keypad.
    DOM_VK_NUMPAD70x67 (103)"7" on the numeric keypad.
    DOM_VK_NUMPAD80x68 (104)"8" on the numeric keypad.
    DOM_VK_NUMPAD90x69 (105)"9" on the numeric keypad.
    DOM_VK_MULTIPLY0x6A (106)"*" on the numeric keypad.
    DOM_VK_ADD0x6B (107)"+" on the numeric keypad.
    DOM_VK_SEPARATOR0x6C (108)
    DOM_VK_SUBTRACT0x6D (109)"-" on the numeric keypad.
    DOM_VK_DECIMAL0x6E (110)Decimal point on the numeric keypad.
    DOM_VK_DIVIDE0x6F (111)"/" on the numeric keypad.
    DOM_VK_F10x70 (112)F1 key.
    DOM_VK_F20x71 (113)F2 key.
    DOM_VK_F30x72 (114)F3 key.
    DOM_VK_F40x73 (115)F4 key.
    DOM_VK_F50x74 (116)F5 key.
    DOM_VK_F60x75 (117)F6 key.
    DOM_VK_F70x76 (118)F7 key.
    DOM_VK_F80x77 (119)F8 key.
    DOM_VK_F90x78 (120)F9 key.
    DOM_VK_F100x79 (121)F10 key.
    DOM_VK_F110x7A (122)F11 key.
    DOM_VK_F120x7B (123)F12 key.
    DOM_VK_F130x7C (124)F13 key.
    DOM_VK_F140x7D (125)F14 key.
    DOM_VK_F150x7E (126)F15 key.
    DOM_VK_F160x7F (127)F16 key.
    DOM_VK_F170x80 (128)F17 key.
    DOM_VK_F180x81 (129)F18 key.
    DOM_VK_F190x82 (130)F19 key.
    DOM_VK_F200x83 (131)F20 key.
    DOM_VK_F210x84 (132)F21 key.
    DOM_VK_F220x85 (133)F22 key.
    DOM_VK_F230x86 (134)F23 key.
    DOM_VK_F240x87 (135)F24 key.
    DOM_VK_NUM_LOCK0x90 (144)Num Lock key.
    DOM_VK_SCROLL_LOCK0x91 (145)Scroll Lock key.
    DOM_VK_WIN_OEM_FJ_JISHO0x92 (146)An OEM specific key on Windows. This was used for "Dictionary" key on Fujitsu OASYS. {{gecko_minversion_inline("21.0")}}
    DOM_VK_WIN_OEM_FJ_MASSHOU0x93 (147)An OEM specific key on Windows. This was used for "Unregister word" key on Fujitsu OASYS. {{gecko_minversion_inline("21.0")}}
    DOM_VK_WIN_OEM_FJ_TOUROKU0x94 (148)An OEM specific key on Windows. This was used for "Register word" key on Fujitsu OASYS. {{gecko_minversion_inline("21.0")}}
    DOM_VK_WIN_OEM_FJ_LOYA0x95 (149)An OEM specific key on Windows. This was used for "Left OYAYUBI" key on Fujitsu OASYS. {{gecko_minversion_inline("21.0")}}
    DOM_VK_WIN_OEM_FJ_ROYA0x96 (150)An OEM specific key on Windows. This was used for "Right OYAYUBI" key on Fujitsu OASYS. {{gecko_minversion_inline("21.0")}}
    DOM_VK_CIRCUMFLEX0xA0 (160)Circumflex ("^") key. {{gecko_minversion_inline("15.0")}}
    DOM_VK_EXCLAMATION0xA1 (161)Exclamation ("!") key. {{gecko_minversion_inline("15.0")}}
    DOM_VK_DOUBLE_QUOTE0xA3 (162)Double quote (""") key. {{gecko_minversion_inline("15.0")}}
    DOM_VK_HASH0xA3 (163)Hash ("#") key. {{gecko_minversion_inline("15.0")}}
    DOM_VK_DOLLAR0xA4 (164)Dollar sign ("$") key. {{gecko_minversion_inline("15.0")}}
    DOM_VK_PERCENT0xA5 (165)Percent ("%") key. {{gecko_minversion_inline("15.0")}}
    DOM_VK_AMPERSAND0xA6 (166)Ampersand ("&") key. {{gecko_minversion_inline("15.0")}}
    DOM_VK_UNDERSCORE0xA7 (167)Underscore ("_") key. {{gecko_minversion_inline("15.0")}}
    DOM_VK_OPEN_PAREN0xA8 (168)Open parenthesis ("(") key. {{gecko_minversion_inline("15.0")}}
    DOM_VK_CLOSE_PAREN0xA9 (169)Close parenthesis (")") key. {{gecko_minversion_inline("15.0")}}
    DOM_VK_ASTERISK0xAA (170)Asterisk ("*") key. {{gecko_minversion_inline("15.0")}}
    DOM_VK_PLUS0xAB (171)Plus ("+") key. {{gecko_minversion_inline("15.0")}}
    DOM_VK_PIPE0xAC (172)Pipe ("|") key. {{gecko_minversion_inline("15.0")}}
    DOM_VK_HYPHEN_MINUS0xAD (173)Hyphen-US/docs/Minus ("-") key. {{gecko_minversion_inline("15.0")}}
    DOM_VK_OPEN_CURLY_BRACKET0xAE (174)Open curly bracket ("{") key. {{gecko_minversion_inline("15.0")}}
    DOM_VK_CLOSE_CURLY_BRACKET0xAF (175)Close curly bracket ("}") key. {{gecko_minversion_inline("15.0")}}
    DOM_VK_TILDE0xB0 (176)Tilde ("~") key. {{gecko_minversion_inline("15.0")}}
    DOM_VK_VOLUME_MUTE0xB5 (181)Audio mute key. {{gecko_minversion_inline("21.0")}}
    DOM_VK_VOLUME_DOWN0xB6 (182)Audio volume down key {{gecko_minversion_inline("21.0")}}
    DOM_VK_VOLUME_UP0xB7 (183)Audio volume up key {{gecko_minversion_inline("21.0")}}
    DOM_VK_COMMA0xBC (188)Comma (",") key.
    DOM_VK_PERIOD0xBE (190)Period (".") key.
    DOM_VK_SLASH0xBF (191)Slash ("/") key.
    DOM_VK_BACK_QUOTE0xC0 (192)Back tick ("`") key.
    DOM_VK_OPEN_BRACKET0xDB (219)Open square bracket ("[") key.
    DOM_VK_BACK_SLASH0xDC (220)Back slash ("\") key.
    DOM_VK_CLOSE_BRACKET0xDD (221)Close square bracket ("]") key.
    DOM_VK_QUOTE0xDE (222)Quote (''') key.
    DOM_VK_META0xE0 (224)Meta key on Linux, Command key on Mac.
    DOM_VK_ALTGR0xE1 (225)AltGr key (Level 3 Shift key or Level 5 Shift key) on Linux. {{gecko_minversion_inline("15.0")}}
    DOM_VK_WIN_ICO_HELP0xE3 (227)An OEM specific key on Windows. This is (was?) used for Olivetti ICO keyboard.{{gecko_minversion_inline("21.0")}}
    DOM_VK_WIN_ICO_000xE4 (228)An OEM specific key on Windows. This is (was?) used for Olivetti ICO keyboard.{{gecko_minversion_inline("21.0")}}
    DOM_VK_WIN_ICO_CLEAR0xE6 (230)An OEM specific key on Windows. This is (was?) used for Olivetti ICO keyboard.{{gecko_minversion_inline("21.0")}}
    DOM_VK_WIN_OEM_RESET0xE9 (233)An OEM specific key on Windows. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}}
    DOM_VK_WIN_OEM_JUMP0xEA (234)An OEM specific key on Windows. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}}
    DOM_VK_WIN_OEM_PA10xEB (235)An OEM specific key on Windows. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}}
    DOM_VK_WIN_OEM_PA20xEC (236)An OEM specific key on Windows. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}}
    DOM_VK_WIN_OEM_PA30xED (237)An OEM specific key on Windows. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}}
    DOM_VK_WIN_OEM_WSCTRL0xEE (238)An OEM specific key on Windows. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}}
    DOM_VK_WIN_OEM_CUSEL0xEF (239)An OEM specific key on Windows. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}}
    DOM_VK_WIN_OEM_ATTN0xF0 (240)An OEM specific key on Windows. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}}
    DOM_VK_WIN_OEM_FINISH0xF1 (241)An OEM specific key on Windows. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}}
    DOM_VK_WIN_OEM_COPY0xF2 (242)An OEM specific key on Windows. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}}
    DOM_VK_WIN_OEM_AUTO0xF3 (243)An OEM specific key on Windows. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}}
    DOM_VK_WIN_OEM_ENLW0xF4 (244)An OEM specific key on Windows. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}}
    DOM_VK_WIN_OEM_BACKTAB0xF5 (245)An OEM specific key on Windows. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}}
    DOM_VK_ATTN0xF6 (246)Attn (Attention) key of IBM midrange computers, e.g., AS/400. {{gecko_minversion_inline("21.0")}}
    DOM_VK_CRSEL0xF7 (247)CrSel (Cursor Selection) key of IBM 3270 keyboard layout. {{gecko_minversion_inline("21.0")}}
    DOM_VK_EXSEL0xF8 (248)ExSel (Extend Selection) key of IBM 3270 keyboard layout. {{gecko_minversion_inline("21.0")}}
    DOM_VK_EREOF0xF9 (249)Erase EOF key of IBM 3270 keyboard layout. {{gecko_minversion_inline("21.0")}}
    DOM_VK_PLAY0xFA (250)Play key of IBM 3270 keyboard layout. {{gecko_minversion_inline("21.0")}}
    DOM_VK_ZOOM0xFB (251)Zoom key. {{gecko_minversion_inline("21.0")}}
    DOM_VK_PA10xFD (253)PA1 key of IBM 3270 keyboard layout. {{gecko_minversion_inline("21.0")}}
    DOM_VK_WIN_OEM_CLEAR0xFE (254)Clear key, but we're not sure the meaning difference from DOM_VK_CLEAR. {{gecko_minversion_inline("21.0")}}
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    定数説明
    DOM_VK_CANCEL0x03 (3)キャンセルキー。
    DOM_VK_HELP0x06 (6)Help キー。
    DOM_VK_BACK_SPACE0x08 (8)Backspace キー。
    DOM_VK_TAB0x09 (9)Tab キー。
    DOM_VK_CLEAR0x0C (12) + NumLock を解除した状態における、テンキーの "5" キー。 Mac の場合は、 NumLock キーと同じ位置にあるクリアキーを押します。 +
    DOM_VK_RETURN0x0D (13)メインキーボードのリターン/エンターキー。
    DOM_VK_ENTER0x0E (14) + 予約済みですが、使用されていません。 {{deprecated_inline}} (削除。 + {{bug(969247)}} を参照) +
    DOM_VK_SHIFT0x10 (16)Shift キー。
    DOM_VK_CONTROL0x11 (17)Control キー。
    DOM_VK_ALT0x12 (18)Alt (Mac では Option)キー。
    DOM_VK_PAUSE0x13 (19)Pause キー。
    DOM_VK_CAPS_LOCK0x14 (20)Caps lock。
    DOM_VK_KANA0x15 (21)このキーコードの Linux 対応は Gecko 4.0 で追加されました。
    DOM_VK_HANGUL0x15 (21)このキーコードの Linux 対応は Gecko 4.0 で追加されました。
    DOM_VK_EISU0x 16 (22)日本語の Mac キーボードの "英数" キー。
    DOM_VK_JUNJA0x17 (23)このキーコードの Linux 対応は Gecko 4.0 で追加されました。
    DOM_VK_FINAL0x18 (24)このキーコードの Linux 対応は Gecko 4.0 で追加されました。
    DOM_VK_HANJA0x19 (25)このキーコードの Linux 対応は Gecko 4.0 で追加されました。
    DOM_VK_KANJI0x19 (25)このキーコードの Linux 対応は Gecko 4.0 で追加されました。
    DOM_VK_ESCAPE0x1B (27)Escape キー。
    DOM_VK_CONVERT0x1C (28)このキーコードの Linux 対応は Gecko 4.0 で追加されました。
    DOM_VK_NONCONVERT0x1D (29)このキーコードの Linux 対応は Gecko 4.0 で追加されました。
    DOM_VK_ACCEPT0x1E (30)このキーコードの Linux 対応は Gecko 4.0 で追加されました。
    DOM_VK_MODECHANGE0x1F (31)このキーコードの Linux 対応は Gecko 4.0 で追加されました。
    DOM_VK_SPACE0x20 (32)スペースバー。
    DOM_VK_PAGE_UP0x21 (33)Page Up キー。
    DOM_VK_PAGE_DOWN0x22 (34)Page Down キー。
    DOM_VK_END0x23 (35)End キー。
    DOM_VK_HOME0x24 (36)Home キー。
    DOM_VK_LEFT0x25 (37)左矢印。
    DOM_VK_UP0x26 (38)上矢印。
    DOM_VK_RIGHT0x27 (39)右矢印。
    DOM_VK_DOWN0x28 (40)下矢印。
    DOM_VK_SELECT0x29 (41)このキーコードの Linux 対応は Gecko 4.0 で追加されました。
    DOM_VK_PRINT0x2A (42)このキーコードの Linux 対応は Gecko 4.0 で追加されました。
    DOM_VK_EXECUTE0x2B (43)このキーコードの Linux 対応は Gecko 4.0 で追加されました。
    DOM_VK_PRINTSCREEN0x2C (44)Print Screen キー。
    DOM_VK_INSERT0x2D (45)Ins(ert) キー。
    DOM_VK_DELETE0x2E (46)Del(ete) キー。
    DOM_VK_00x30 (48)"0" キー(メインキー)。
    DOM_VK_10x31 (49)"1" キー(メインキー)。
    DOM_VK_20x32 (50)"2" キー(メインキー)。
    DOM_VK_30x33 (51)"3" キー(メインキー)。
    DOM_VK_40x34 (52)"4" キー(メインキー)。
    DOM_VK_50x35 (53)"5" キー(メインキー)。
    DOM_VK_60x36 (54)"6" キー(メインキー)。
    DOM_VK_70x37 (55)"7" キー(メインキー)。
    DOM_VK_80x38 (56)"8" キー(メインキー)。
    DOM_VK_90x39 (57)"9" キー(メインキー)。
    DOM_VK_COLON0x3A (58)コロン (":") キー。
    DOM_VK_SEMICOLON0x3B (59)セミコロン (";") キー。
    DOM_VK_LESS_THAN0x3C (60)小なり ("<") キー。
    DOM_VK_EQUALS0x3D (61)等号 ("=") キー。
    DOM_VK_GREATER_THAN0x3E (62)大なり (">") キー。
    DOM_VK_QUESTION_MARK0x3F (63)疑問符 ("?") キー。
    DOM_VK_AT0x40 (64)アットマーク ("@") キー。
    DOM_VK_A0x41 (65)"A" キー。
    DOM_VK_B0x42 (66)"B" キー。
    DOM_VK_C0x43 (67)"C" キー。
    DOM_VK_D0x44 (68)"D" キー。
    DOM_VK_E0x45 (69)"E" キー。
    DOM_VK_F0x46 (70)"F" キー。
    DOM_VK_G0x47 (71)"G" キー。
    DOM_VK_H0x48 (72)"H" キー。
    DOM_VK_I0x49 (73)"I" キー。
    DOM_VK_J0x4A (74)"J" キー。
    DOM_VK_K0x4B (75)"K" キー。
    DOM_VK_L0x4C (76)"L" キー。
    DOM_VK_M0x4D (77)"M" キー。
    DOM_VK_N0x4E (78)"N" キー。
    DOM_VK_O0x4F (79)"O" キー。
    DOM_VK_P0x50 (80)"P" キー。
    DOM_VK_Q0x51 (81)"Q" キー。
    DOM_VK_R0x52 (82)"R" キー。
    DOM_VK_S0x53 (83)"S" キー。
    DOM_VK_T0x54 (84)"T" キー。
    DOM_VK_U0x55 (85)"U" キー。
    DOM_VK_V0x56 (86)"V" キー。
    DOM_VK_W0x57 (87)"W" キー。
    DOM_VK_X0x58 (88)"X" キー。
    DOM_VK_Y0x59 (89)"Y" キー。
    DOM_VK_Z0x5A (90)"Z" キー。
    DOM_VK_WIN0x5B (91)Windows では Windows ロゴキー。 Linux ではスーパー/ハイパーキー。
    DOM_VK_CONTEXT_MENU0x5D (93)コンテキストメニューを開くキー。
    DOM_VK_SLEEP0x5F (95)このキーコードの Linux 対応は Gecko 4.0 で追加されました。
    DOM_VK_NUMPAD00x60 (96)"0" キー(テンキー)。
    DOM_VK_NUMPAD10x61 (97)"1" キー(テンキー)。
    DOM_VK_NUMPAD20x62 (98)"2" キー(テンキー)。
    DOM_VK_NUMPAD30x63 (99)"3" キー(テンキー)。
    DOM_VK_NUMPAD40x64 (100)"4" キー(テンキー)。
    DOM_VK_NUMPAD50x65 (101)"5" キー(テンキー)。
    DOM_VK_NUMPAD60x66 (102)"6" キー(テンキー)。
    DOM_VK_NUMPAD70x67 (103)"7" キー(テンキー)。
    DOM_VK_NUMPAD80x68 (104)"8" キー(テンキー)。
    DOM_VK_NUMPAD90x69 (105)"9" キー(テンキー)。
    DOM_VK_MULTIPLY0x6A (106)"*" キー(テンキー)。
    DOM_VK_ADD0x6B (107)"+" キー(テンキー)。
    DOM_VK_SEPARATOR0x6C (108)
    DOM_VK_SUBTRACT0x6D (109)"-" キー(テンキー)。
    DOM_VK_DECIMAL0x6E (110)テンキーの浮動小数点キー。
    DOM_VK_DIVIDE0x6F (111)"/" キー(テンキー)。
    DOM_VK_F10x70 (112)F1 キー。
    DOM_VK_F20x71 (113)F2 キー。
    DOM_VK_F30x72 (114)F3 キー。
    DOM_VK_F40x73 (115)F4 キー。
    DOM_VK_F50x74 (116)F5 キー。
    DOM_VK_F60x75 (117)F6 キー。
    DOM_VK_F70x76 (118)F7 キー。
    DOM_VK_F80x77 (119)F8 キー。
    DOM_VK_F90x78 (120)F9 キー。
    DOM_VK_F100x79 (121)F10 キー。
    DOM_VK_F110x7A (122)F11 キー。
    DOM_VK_F120x7B (123)F12 キー。
    DOM_VK_F130x7C (124)F13 キー。
    DOM_VK_F140x7D (125)F14 キー。
    DOM_VK_F150x7E (126)F15 キー。
    DOM_VK_F160x7F (127)F16 キー。
    DOM_VK_F170x80 (128)F17 キー。
    DOM_VK_F180x81 (129)F18 キー。
    DOM_VK_F190x82 (130)F19 キー。
    DOM_VK_F200x83 (131)F20 キー。
    DOM_VK_F210x84 (132)F21 キー。
    DOM_VK_F220x85 (133)F22 キー。
    DOM_VK_F230x86 (134)F23 キー。
    DOM_VK_F240x87 (135)F24 キー。
    DOM_VK_NUM_LOCK0x90 (144)Num Lock キー。
    DOM_VK_SCROLL_LOCK0x91 (145)Scroll Lock キー。
    DOM_VK_WIN_OEM_FJ_JISHO0x92 (146) + Windows の OEM 固有キー。 + これは富士通の OASYS で「辞書」キーに使われていました。 +
    DOM_VK_WIN_OEM_FJ_MASSHOU0x93 (147) + Windows の OEM 固有キー。 + これは富士通の OASYS で「単語登録解除」キーに使われていました。 +
    DOM_VK_WIN_OEM_FJ_TOUROKU0x94 (148) + Windows の OEM 固有キー。 + これは富士通の OASYS で「単語登録」キーに使われていました。 +
    DOM_VK_WIN_OEM_FJ_LOYA0x95 (149) + Windows の OEM 固有キー。 + これは富士通の OASYS で「左親指シフト」キーに使われていました。 +
    DOM_VK_WIN_OEM_FJ_ROYA0x96 (150) + An + Windows の OEM 固有キー。 + これは富士通の OASYS で「右親指シフト」キーに使われていました。 +
    DOM_VK_CIRCUMFLEX0xA0 (160)サーカムフレックス ("^") キー。
    DOM_VK_EXCLAMATION0xA1 (161)感嘆符 ("!") キー。
    DOM_VK_DOUBLE_QUOTE0xA3 (162)二重引用符 (""") キー。
    DOM_VK_HASH0xA3 (163)ハッシュ ("#") キー。
    DOM_VK_DOLLAR0xA4 (164)ドル記号 ("$") キー。
    DOM_VK_PERCENT0xA5 (165)パーセント ("%") キー。
    DOM_VK_AMPERSAND0xA6 (166)アンパーサンド ("&") キー。
    DOM_VK_UNDERSCORE0xA7 (167)アンダースコア ("_") キー。
    DOM_VK_OPEN_PAREN0xA8 (168)開き括弧 ("(") キー。
    DOM_VK_CLOSE_PAREN0xA9 (169)閉じ括弧 (")") キー。
    DOM_VK_ASTERISK0xAA (170)アスタリスク ("*") キー。
    DOM_VK_PLUS0xAB (171)正記号 ("+") キー。
    DOM_VK_PIPE0xAC (172)パイプ ("|") キー。
    DOM_VK_HYPHEN_MINUS0xAD (173)ハイフン/マイナス ("-") キー。
    DOM_VK_OPEN_CURLY_BRACKET0xAE (174)開き波括弧 ("{") キー。
    DOM_VK_CLOSE_CURLY_BRACKET0xAF (175)閉じ波括弧 ("}") キー。
    DOM_VK_TILDE0xB0 (176)チルダ ("~") キー。
    DOM_VK_VOLUME_MUTE0xB5 (181)消音キー。
    DOM_VK_VOLUME_DOWN0xB6 (182)音量下げキー
    DOM_VK_VOLUME_UP0xB7 (183)音量上げキー
    DOM_VK_COMMA0xBC (188)カンマ (",") キー。
    DOM_VK_PERIOD0xBE (190)ピリオド (".") キー。
    DOM_VK_SLASH0xBF (191)スラッシュ ("/") キー。
    DOM_VK_BACK_QUOTE0xC0 (192)逆引用符 ("`") キー。
    DOM_VK_OPEN_BRACKET0xDB (219)開き角括弧 ("[") キー。
    DOM_VK_BACK_SLASH0xDC (220)バックスラッシュ ("\") キー。
    DOM_VK_CLOSE_BRACKET0xDD (221)閉じ角括弧 ("]") キー。
    DOM_VK_QUOTE0xDE (222)単一引用符 (''') キー。
    DOM_VK_META0xE0 (224)Linux の Meta キー、 Mac の Command キー。
    DOM_VK_ALTGR0xE1 (225)Linux の AltGr キー (Level 3 Shift キーまたは Level 5 Shift キー)。
    DOM_VK_WIN_ICO_HELP0xE3 (227) + Windows の OEM 固有キー。 + これは Olivetti ICO キーボードで使われています(いました?) +
    DOM_VK_WIN_ICO_000xE4 (228) + Windows の OEM 固有キー。 + これは Olivetti ICO キーボードで使われています(いました?) +
    DOM_VK_WIN_ICO_CLEAR0xE6 (230) + Windows の OEM 固有キー。 + これは Olivetti ICO キーボードで使われています(いました?) +
    DOM_VK_WIN_OEM_RESET0xE9 (233) + Windows の OEM 固有キー。 + これは Nokia/Ericsson の端末で使用されていました。 +
    DOM_VK_WIN_OEM_JUMP0xEA (234) + Windows の OEM 固有キー。 + これは Nokia/Ericsson の端末で使用されていました。 +
    DOM_VK_WIN_OEM_PA10xEB (235) + Windows の OEM 固有キー。 + これは Nokia/Ericsson の端末で使用されていました。 +
    DOM_VK_WIN_OEM_PA20xEC (236) + Windows の OEM 固有キー。 + これは Nokia/Ericsson の端末で使用されていました。 +
    DOM_VK_WIN_OEM_PA30xED (237) + Windows の OEM 固有キー。 + これは Nokia/Ericsson の端末で使用されていました。 +
    DOM_VK_WIN_OEM_WSCTRL0xEE (238) + Windows の OEM 固有キー。 + これは Nokia/Ericsson の端末で使用されていました。 +
    DOM_VK_WIN_OEM_CUSEL0xEF (239) + Windows の OEM 固有キー。 + これは Nokia/Ericsson の端末で使用されていました。 +
    DOM_VK_WIN_OEM_ATTN0xF0 (240) + Windows の OEM 固有キー。 + これは Nokia/Ericsson の端末で使用されていました。 +
    DOM_VK_WIN_OEM_FINISH0xF1 (241) + Windows の OEM 固有キー。 + これは Nokia/Ericsson の端末で使用されていました。 +
    DOM_VK_WIN_OEM_COPY0xF2 (242) + Windows の OEM 固有キー。 + これは Nokia/Ericsson の端末で使用されていました。 +
    DOM_VK_WIN_OEM_AUTO0xF3 (243) + Windows の OEM 固有キー。 + これは Nokia/Ericsson の端末で使用されていました。 +
    DOM_VK_WIN_OEM_ENLW0xF4 (244) + Windows の OEM 固有キー。 + これは Nokia/Ericsson の端末で使用されていました。 +
    DOM_VK_WIN_OEM_BACKTAB0xF5 (245) + Windows の OEM 固有キー。 + これは Nokia/Ericsson の端末で使用されていました。 +
    DOM_VK_ATTN0xF6 (246)IBM ミッドレンジコンピューター(AS/400 など)の Attn (Attention) キー。
    DOM_VK_CRSEL0xF7 (247)IBM 3270 キーボードレイアウトの CrSel (カーソル選択)キー。
    DOM_VK_EXSEL0xF8 (248)IBM 3270 キーボードレイアウトの ExSel (拡張選択)キー。
    DOM_VK_EREOF0xF9 (249)IBM 3270 キーボードレイアウトの Erase EOF キー。
    DOM_VK_PLAY0xFA (250)IBM 3270 キーボードレイアウトの Play キー。
    DOM_VK_ZOOM0xFB (251)Zoom キー。
    DOM_VK_PA10xFD (253)IBM 3270 キーボードレイアウトの PA1 キー。
    DOM_VK_WIN_OEM_CLEAR0xFE (254) + クリアキーです。ただし、 DOM_VK_CLEAR との違いは分かりません。 +
    -

    OEM specific keys on Windows

    +### Windows の OEM 固有キー -

    On Windows, some values of virtual keycode are defined (reserved) for OEM specific key. They are available for special keys on non-standard keyboard. In other words, some values are used for different meaning by two or more vendors (or hardware).

    +Windows では、仮想キーコードのいくつかの値は、 OEM の特定のキー用に定義(予約)されています。これらは、非標準のキーボードの特殊なキーで利用可能です。言い換えれば、いくつかの値は、2 つ以上のベンダー(またはハードウェア)によって異なる意味で使用されています。 -

    Starting Gecko 21 (and older than 15), OEM specific key values are available on the keyCode attribute only on Windows. So they are not useful for usual web applications. They are useful only for intranet applications or in similar situations.

    +Gecko 21 (および 15 より古いバージョン)では、OEM 固有のキー値は Windows 上でのみ keyCode 属性で利用可能です。そのため、通常のウェブアプリケーションでは使用できません。それらはイントラネットのアプリケーション、または同様の状況においてのみ使用されます。 -

    See "Manufacturer-specific Virtual-Key Codes (Windows CE 5.0)" in MSDN for the detail.

    +詳しくは MSDN の "[Manufacturer-specific Virtual-Key Codes (Windows CE 5.0)](https://docs.microsoft.com/en-us/previous-versions/windows/embedded/aa452679(v=msdn.10))" を参照してください。 From 20decce67df6859e71ccb2364285ec2cf7d1d2e0 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 9 Jul 2022 23:37:03 +0900 Subject: [PATCH 006/100] keyboardEvent --- files/ja/web/api/keyboardevent/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/ja/web/api/keyboardevent/index.md b/files/ja/web/api/keyboardevent/index.md index 21488618c5ac51..0da90eaac4be31 100644 --- a/files/ja/web/api/keyboardevent/index.md +++ b/files/ja/web/api/keyboardevent/index.md @@ -113,7 +113,7 @@ _このインターフェイスには、親である {{domxref("UIEvent")}} お - : 文字列で、このイベントが表す物理キーのコード値を返します。 - > **Warning:** これはユーザーのキーボードレイアウトを無視します。つまり、ユーザーが QWERTY キーボードレイアウトの "Y" の位置(ホーム行の上の行の中央付近)でキーを押した場合、ユーザーが QWERTZ キーボード(これはユーザーが "Z" "を期待し、他のすべてのプロパティが "Z" を示すことになる)または Dvorak キーボードレイアウト(これはユーザーが "F" を期待する)であっても、常に "KeyY" を返します。ユーザーに正しいキーストロークを表示したい場合は、 {{domxref("Keyboard.getLayoutMap()")}} を使用してください。 + > **Warning:** これはユーザーのキーボードレイアウトを無視します。つまり、ユーザーが QWERTY キーボードレイアウトの "Y" の位置(ホーム行の上の行の中央付近)でキーを押した場合、ユーザーが QWERTZ キーボード(これはユーザーが "Z" を期待し、他のすべてのプロパティが "Z" を示すことになる)または Dvorak キーボードレイアウト(これはユーザーが "F" を期待する)であっても、常に "KeyY" を返します。ユーザーに正しいキーストロークを表示したい場合は、 {{domxref("Keyboard.getLayoutMap()")}} を使用してください。 - {{domxref("KeyboardEvent.ctrlKey")}} {{Readonlyinline}} From fa8d6901ee5fc559650d9ca530a2d49dc1eca7fd Mon Sep 17 00:00:00 2001 From: Robert Huang Date: Sat, 16 Jul 2022 13:48:46 +0800 Subject: [PATCH 007/100] Change links and add spaces (#6897) * Change links and add spaces * Update files/zh-cn/learn/css/building_blocks/backgrounds_and_borders/index.html * Update files/zh-cn/learn/css/building_blocks/backgrounds_and_borders/index.html Co-authored-by: A1lo * Update files/zh-cn/learn/css/building_blocks/backgrounds_and_borders/index.html Co-authored-by: A1lo * Update files/zh-cn/learn/css/building_blocks/backgrounds_and_borders/index.html Co-authored-by: A1lo * Update files/zh-cn/learn/css/building_blocks/backgrounds_and_borders/index.html Co-authored-by: A1lo --- .../backgrounds_and_borders/index.html | 44 +++++++++---------- 1 file changed, 22 insertions(+), 22 deletions(-) diff --git a/files/zh-cn/learn/css/building_blocks/backgrounds_and_borders/index.html b/files/zh-cn/learn/css/building_blocks/backgrounds_and_borders/index.html index f569572c46de37..638c08b23a3066 100644 --- a/files/zh-cn/learn/css/building_blocks/backgrounds_and_borders/index.html +++ b/files/zh-cn/learn/css/building_blocks/backgrounds_and_borders/index.html @@ -11,7 +11,7 @@ 预备知识: - 基本的计算机知识,安装基本的软件文件处理基本知识,HTML 基础知识  (如果不了解 HTML,请移步 学习 HTML 入门),以及 CSS 如何工作的基本常识 (如果不了解 CSS,请移步 学习 CSS 第一步.) + 基本的计算机知识,安装基本的软件文件处理基本知识,HTML 基础知识  (如果不了解 HTML,请移步 学习 HTML 入门),以及 CSS 如何工作的基本常识 (如果不了解 CSS,请移步 学习 CSS 第一步.) 目标: @@ -22,7 +22,7 @@

    CSS 的背景样式

    -

    CSS {{cssxref("background")}}属性是我们将在本课中学习的许多普通背景属性的简写。如果您在样式表中发现了一个复杂的背景属性,可能会觉得难以理解,因为可以同时传入这么多值。

    +

    CSS {{cssxref("background")}} 属性是我们将在本课中学习的许多普通背景属性的简写。如果您在样式表中发现了一个复杂的背景属性,可能会觉得难以理解,因为可以同时传入这么多值。

    .box {
       background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat,
    @@ -34,7 +34,7 @@ 

    CSS 的背景样式

    背景颜色

    -

    {{cssxref("background-color")}}属性定义了 CSS 中任何元素的背景颜色。属性接受任何有效的<color>值。背景色扩展到元素的内容和内边距的下面。

    +

    {{cssxref("background-color")}} 属性定义了 CSS 中任何元素的背景颜色。属性接受任何有效的<color>值。背景色扩展到元素的内容和内边距的下面。

    在下面的示例中,我们使用了各种颜色值来为元素盒子添加背景颜色:heading 和{{htmlelement("span")}}元素。

    @@ -44,7 +44,7 @@

    背景颜色

    背景图片

    -

    {{cssxref("background-image")}}属性允许在元素的背景中显示图像。在下面的例子中,我们有两个方框——一个是比方框大的背景图像,另一个是星星的小图像。

    +

    {{cssxref("background-image")}} 属性允许在元素的背景中显示图像。在下面的例子中,我们有两个方框——一个是比方框大的背景图像,另一个是星星的小图像。

    这个例子演示了关于背景图像的两种情形。默认情况下,大图不会缩小以适应方框,因此我们只能看到它的一个小角,而小图则是平铺以填充方框。在这种情况下,实际的图像只是单独的一颗星星。

    @@ -54,7 +54,7 @@

    背景图片

    控制背景平铺

    -

    {{cssxref("background-repeat")}}属性用于控制图像的平铺行为。可用的值是:

    +

    {{cssxref("background-repeat")}} 属性用于控制图像的平铺行为。可用的值是:

    • no-repeat — 不重复。
    • @@ -92,7 +92,7 @@

      调整背景图像的大小

      背景图像定位

      -

      {{cssxref("background-position")}}属性允许您选择背景图像显示在其应用到的盒子中的位置。它使用的坐标系中,框的左上角是 (0,0),框沿着水平 (x) 和垂直 (y) 轴定位。

      +

      {{cssxref("background-position")}} 属性允许您选择背景图像显示在其应用到的盒子中的位置。它使用的坐标系中,框的左上角是 (0,0),框沿着水平 (x) 和垂直 (y) 轴定位。

      注意:默认的背景位置值是 (0,0)。

      @@ -100,7 +100,7 @@

      背景图像定位

      最常见的背景位置值有两个单独的值——一个水平值后面跟着一个垂直值。

      -

      你可以使用像topright这样的关键字 (在{{cssxref("background-image")}}页面上查找其他的关键字):

      +

      你可以使用像topright这样的关键字 (在 {{cssxref("background-image")}} 页面上查找其他的关键字):

      .box {
         background-image: url(star.png);
      @@ -109,7 +109,7 @@ 

      背景图像定位

      }
      -

      或者使用 长度值, and 百分比

      +

      或者使用 长度值百分比

      .box {
         background-image: url(star.png);
      @@ -139,14 +139,14 @@ 

      背景图像定位

      {{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/position.html", '100%', 800)}}

      -

      注意:background-position是{{cssxref("background-position-x")}}和{{cssxref("background-position-y")}}的简写,它们允许您分别设置不同的坐标轴的值。

      +

      备注: background-position 是 {{cssxref("background-position-x")}} 和 {{cssxref("background-position-y")}} 的简写,它们允许您分别设置不同的坐标轴的值。

      渐变背景

      -

      当渐变用于背景时,也可以使用像图像一样的{{cssxref("background-image")}}属性设置。

      +

      当渐变用于背景时,也可以使用像图像一样的 {{cssxref("background-image")}} 属性设置。

      -

      您可以在 MDN 的<gradient>数据类型页面上,了解更多关于渐变的不同类型,以及使用它们可以做的事情。使用渐变的一个有趣方法是,使用 web 上可用的许多 CSS 渐变生成器之一,比如这个 。您可以创建一个渐变,然后复制并粘贴生成它的源代码。

      +

      您可以在 MDN 的 <gradient> 数据类型页面上,了解更多关于渐变的不同类型,以及使用它们可以做的事情。使用渐变的一个有趣方法是,使用 web 上可用的许多 CSS 渐变生成器之一,比如这个。您可以创建一个渐变,然后复制并粘贴生成它的源代码。

      在下面的示例中尝试一些不同的渐变。在这两个盒子里,我们分别有一个线性梯度,它延伸到整个盒子上,还有一个径向梯度,它有一个固定的大小,因此会重复。

      @@ -154,7 +154,7 @@

      渐变背景

      多个背景图像

      -

      也可以有多个背景图像——在单个属性值中指定多个background-image值,用逗号分隔每个值。

      +

      也可以有多个背景图像——在单个属性值中指定多个 background-image 值,用逗号分隔每个值。

      当你这样做时,你可能会以背景图像互相重叠而告终。背景将与最后列出的背景图像层在堆栈的底部,背景图像在代码列表中最先出现的在顶端。

      @@ -164,13 +164,13 @@

      多个背景图像

      注意:渐变可以与常规的背景图像很好地混合在一起。

      -

      其它 background-*属性,该属性值用逗号分隔的方式设置。例如下列background-image

      +

      其它 background-* 属性,该属性值用逗号分隔的方式设置。例如下列 background-image

      background-image: url(image1.png), url(image2.png), url(image3.png), url(image4.png);
       background-repeat: no-repeat, repeat-x, repeat;
       background-position: 10px 20px,  top right;
      -

      不同属性的每个值,将与其他属性中相同位置的值匹配。例如,上面的 image1 的 background-repeat 值将是 no-repeat。但是,当不同的属性具有不同数量的值时,会发生什么情况呢?答案是较小数量的值会循环—在上面的例子中有四个背景图像,但是只有两个背景位置值。前两个位置值将应用于前两个图像,然后它们将再次循环—image3 将被赋予第一个位置值,image4 将被赋予第二个位置值。

      +

      不同属性的每个值,将与其他属性中相同位置的值匹配。例如,上面的 image1 的 background-repeat 值将是 no-repeat。但是,当不同的属性具有不同数量的值时,会发生什么情况呢?答案是较小数量的值会循环—在上面的例子中有四个背景图像,但是只有两个背景位置值。前两个位置值将应用于前两个图像,然后它们将再次循环—image3 将被赋予第一个位置值,image4 将被赋予第二个位置值。

      我们来试一试。在下面的示例中包含了两个图像。为了演示叠加顺序,请尝试切换哪个背景图像在列表中最先出现。或使用其他属性更改位置、大小或重复值。

      @@ -178,7 +178,7 @@

      多个背景图像

      背景附加

      -

      另一个可供选择的背景是指定他们如何滚动时,内容滚动。这是由{{cssxref("background-attachment")}}属性控制的,它可以接受以下值:

      +

      另一个可供选择的背景是指定他们如何滚动时,内容滚动。这是由 {{cssxref("background-attachment")}} 属性控制的,它可以接受以下值:

      • scroll: 使元素的背景在页面滚动时滚动。如果滚动了元素内容,则背景不会移动。实际上,背景被固定在页面的相同位置,所以它会随着页面的滚动而滚动。
      • @@ -186,11 +186,11 @@

        背景附加

      • local: 这个值是后来添加的 (它只在 Internet Explorer 9+中受支持,而其他的在 IE4+中受支持),因为滚动值相当混乱,在很多情况下并不能真正实现您想要的功能。局部值将背景固定在设置的元素上,因此当您滚动元素时,背景也随之滚动。
      -

      {{cssxref("background-attachment")}}属性只有在有内容要滚动时才会有效果,所以我们做了一个示例来演示这三个值之间的区别——看看 background-attachment.html (或者看看这儿的 源代码))。

      +

      {{cssxref("background-attachment")}} 属性只有在有内容要滚动时才会有效果,所以我们做了一个示例来演示这三个值之间的区别——看看 background-attachment.html (或者看看这儿的 源代码))。

      使用 background 的简写

      -

      正如我在本课开始时提到的,您将经常看到使用{{cssxref("background")}}属性指定的背景。这种简写允许您一次设置所有不同的属性。

      +

      正如我在本课开始时提到的,您将经常看到使用 {{cssxref("background")}} 属性指定的背景。这种简写允许您一次设置所有不同的属性。

      如果使用多个背景,则需要为第一个背景指定所有普通属性,然后在逗号后面添加下一个背景。在下面的例子中,我们有一个渐变,它指定大小和位置,然后是一个无重复的图像背景,它指定位置,然后是一个颜色。

      @@ -201,7 +201,7 @@

      使用 background 的简写

    • background-size 值只能包含在背景位置之后,用'/'字符分隔,例如:center/80%
    -

    查看{{cssxref("background")}}的 MDN 页面,以查看所有的注意事项。

    +

    查看 {{cssxref("background")}} 的 MDN 页面,以查看所有的注意事项。

    {{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background.html", '100%', 800)}}

    @@ -213,7 +213,7 @@

    背景的可访问性考虑

    边框

    -

    在学习盒子模型时,我们发现了边框如何影响盒子的大小。在这节课中,我们将看看如何创造性地使用边界。通常,当我们使用 CSS 向元素添加边框时,我们使用一个简写属性在一行 CSS 中设置边框的颜色、宽度和样式。我们可以使用{{cssxref("border")}}为一个框的所有四个边设置边框。

    +

    在学习盒子模型时,我们发现了边框如何影响盒子的大小。在这节课中,我们将看看如何创造性地使用边界。通常,当我们使用 CSS 向元素添加边框时,我们使用一个简写属性在一行 CSS 中设置边框的颜色、宽度和样式。我们可以使用 {{cssxref("border")}} 为一个框的所有四个边设置边框。

    .box {
       border: 1px solid black;
    @@ -251,7 +251,7 @@ 

    边框

    圆角

    -

    通过使用{{cssxref("border-radius")}}属性和与方框的每个角相关的长边来实现方框的圆角。可以使用两个长度或百分比作为值,第一个值定义水平半径,第二个值定义垂直半径。在很多情况下,您将只传递一个值,这两个值都将使用。

    +

    通过使用 {{cssxref("border-radius")}} 属性和与方框的每个角相关的长边来实现方框的圆角。可以使用两个长度或百分比作为值,第一个值定义水平半径,第二个值定义垂直半径。在很多情况下,您将只传递一个值,这两个值都将使用。

    例如,要使一个盒子的四个角都有 10px 的圆角半径:

    @@ -265,7 +265,7 @@

    圆角

    border-top-right-radius: 1em 10%; }
    -

    我们在下面的示例中设置了所有四个角,然后更改右上角的值使之不同。您可以使用这些值来更改圆角样式。查看{{cssxref("border-radius")}}的属性页,查看可用的语法选项。

    +

    我们在下面的示例中设置了所有四个角,然后更改右上角的值使之不同。您可以使用这些值来更改圆角样式。查看 {{cssxref("border-radius")}} 的属性页,查看可用的语法选项。

    {{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/corners.html", '100%', 800)}}

    @@ -282,7 +282,7 @@

    玩转背景和边框

    {{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/task.html", '100%', 800)}}

    -

    注意:您可以点击  这儿 查看解决方案——但请先尝试一下自己能否实现。

    +

    备注: 你可以点击 这里查看解决方案——但请先尝试一下自己能否实现。

    总结

    From 1a83c48cdcf4cccce12f73bbbba814a0d4314b21 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9E=97=E6=9E=97?= Date: Sat, 16 Jul 2022 14:16:26 +0800 Subject: [PATCH 008/100] fix: update `Controlling inheritance` section (#6891) * Update index.html * fix * Apply suggestions from code review Co-authored-by: A1lo --- .../cascade_and_inheritance/index.html | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/files/zh-cn/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/zh-cn/learn/css/building_blocks/cascade_and_inheritance/index.html index c5fa1645d387c2..be98cbc94eaebc 100644 --- a/files/zh-cn/learn/css/building_blocks/cascade_and_inheritance/index.html +++ b/files/zh-cn/learn/css/building_blocks/cascade_and_inheritance/index.html @@ -87,23 +87,24 @@

    理解继承

    控制继承

    -

    CSS 为控制继承提供了四个特殊的通用属性值。每个 css 属性都接收这些值。

    +

    CSS 为控制继承提供了五个特殊的通用属性值。每个 css 属性都接收这些值。

    {{cssxref("inherit")}}
    设置该属性会使子元素属性和父元素相同。实际上,就是 "开启继承".
    {{cssxref("initial")}}
    设置属性值和浏览器默认样式相同。如果浏览器默认样式中未设置且该属性是自然继承的,那么会设置为 inherit 。
    +
    {{cssxref("revert")}}
    +
    将应用于选定元素的属性值重置为浏览器的默认样式,而不是应用于该属性的默认值。在许多情况下,此值的作用类似于 unset
    +
    {{cssxref("revert-layer")}}
    +
    将应用于选定元素的属性值重置为在上一个层叠层中建立的值。
    {{cssxref("unset")}}
    -
    将属性重置为自然值,也就是如果属性是自然继承那么就是 inherit,否则和 initial一样
    +
    将属性重置为自然值,也就是如果属性是自然继承那么就是 inherit,否则和 initial 一样
    -
    -

    : 还有一个新的属性, {{cssxref("revert")}}, 只有很少的浏览器支持。

    -
    -

    : 见 {{SectionOnPage("/zh-CN/docs/Web/CSS/Cascade", "Origin of CSS declarations")}} 有更多信息和具体是怎么工作的。

    +

    备注: 见 {{SectionOnPage("/zh-CN/docs/Web/CSS/Cascade", "CSS 声明的源")}} 有更多信息和具体是怎么工作的。

    下面的例子你可以通过修改 css 来查看它们的功能,写代码是掌握 html 和 css 最好的办法。

    From 6940d78412c2c5e77408d9433bf28824aa46a963 Mon Sep 17 00:00:00 2001 From: fw_qaq <82551626+Jack-Zhang-1314@users.noreply.github.com> Date: Sat, 16 Jul 2022 14:23:33 +0800 Subject: [PATCH 009/100] zh-CN:translate Request.blob() (#6892) * zh-CN:translate request-blob * fix * fix * Update index.md * Apply suggestions from code review Co-authored-by: A1lo --- files/zh-cn/web/api/request/blob/index.md | 58 +++++++++++++++++++++++ 1 file changed, 58 insertions(+) create mode 100644 files/zh-cn/web/api/request/blob/index.md diff --git a/files/zh-cn/web/api/request/blob/index.md b/files/zh-cn/web/api/request/blob/index.md new file mode 100644 index 00000000000000..c7433bc8fee47e --- /dev/null +++ b/files/zh-cn/web/api/request/blob/index.md @@ -0,0 +1,58 @@ +--- +title: Request.blob() +slug: Web/API/Request/blob +page-type: web-api-instance-method +tags: + - API + - Blob + - Fetch + - Method + - Reference + - Request +translation_of: Web/API/Request/blob +--- +{{APIRef("Fetch")}} + +{{domxref("Request")}} 接口的 **`blob()`** 方法读取请求体并将其作为 promise 返回,该 promise 将兑现一个 {{domxref("Blob")}}。 + +## 语法 + +```js +blob() +``` + +### 参数 + +无。 + +### 返回值 + +一个 promise,会兑现一个 {{domxref("Blob")}}。 + +## 示例 + +```js +const obj = {hello: 'world'}; +const myBlob = new Blob([JSON.stringify(obj, null, 2)], {type : 'application/json'}); + +const request = new Request('/myEndpoint', { + method: 'POST', + body: myBlob + }); + +request.blob().then(function(myBlob) { + // do something with the blob sent in the request +}); +``` + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- {{domxref("Response.blob()")}} From a91d984464fbffc20bdb8381e8b64f5c8907786b Mon Sep 17 00:00:00 2001 From: fw_qaq <82551626+Jack-Zhang-1314@users.noreply.github.com> Date: Sat, 16 Jul 2022 15:40:10 +0800 Subject: [PATCH 010/100] zh-CN:translate Request.text() (#6894) * zh-CN:translate request-text * fix * Update index.md * Apply suggestions from code review Co-authored-by: A1lo --- files/zh-cn/web/api/request/text/index.md | 57 +++++++++++++++++++++++ 1 file changed, 57 insertions(+) create mode 100644 files/zh-cn/web/api/request/text/index.md diff --git a/files/zh-cn/web/api/request/text/index.md b/files/zh-cn/web/api/request/text/index.md new file mode 100644 index 00000000000000..acfca2275be0d3 --- /dev/null +++ b/files/zh-cn/web/api/request/text/index.md @@ -0,0 +1,57 @@ +--- +title: Request.text() +slug: Web/API/Request/text +page-type: web-api-instance-method +tags: + - API + - Fetch + - Method + - Reference + - Text + - Request +translation_of: Web/API/Request/text +--- +{{APIRef("Fetch")}} + +{{domxref("Request")}} 接口的 **`text()`** 方法读取请求体并且将其作为一个 promise 返回,该 promise 将兑现一个 {{jsxref("String")}}。响应*总是*使用 UTF-8 解码。 + +## 语法 + +```js +text() +``` + +### 参数 + +无。 + +### 返回值 + +一个 promise,会兑现一个 {{jsxref("String")}}。 + +## 示例 + +```js +const text = "Hello world"; + +const request = new Request('/myEndpoint', { + method: 'POST', + body: text +}); + +request.text().then(function(text) { + // do something with the text sent in the request +}); +``` + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- {{domxref("Response.text()")}} From b06ab4bdf31fe2ca7070598e9a02c1b2472c2312 Mon Sep 17 00:00:00 2001 From: fw_qaq <82551626+Jack-Zhang-1314@users.noreply.github.com> Date: Sat, 16 Jul 2022 15:51:02 +0800 Subject: [PATCH 011/100] zh-CN:translate Request.json() (#6895) * zh-CN:translate request-json * Update index.md * Apply suggestions from code review Co-authored-by: A1lo --- files/zh-cn/web/api/request/json/index.md | 59 +++++++++++++++++++++++ 1 file changed, 59 insertions(+) create mode 100644 files/zh-cn/web/api/request/json/index.md diff --git a/files/zh-cn/web/api/request/json/index.md b/files/zh-cn/web/api/request/json/index.md new file mode 100644 index 00000000000000..30b3680713decd --- /dev/null +++ b/files/zh-cn/web/api/request/json/index.md @@ -0,0 +1,59 @@ +--- +title: Request.json() +slug: Web/API/Request/json +page-type: web-api-instance-method +tags: + - API + - Fetch + - JSON + - Method + - Reference + - Request +translation_of: Web/API/Request/json +--- +{{APIRef("Fetch API")}} + +{{domxref("Request")}} 接口的 **`json()`** 方法读取请求体并将其作为一个 promise 返回,该 promise 将兑现一个由响应体的文本解析得到的 {{JSxRef("JSON")}}。 + +注意,尽管方法被命名为 `json()`,结果并不是 JSON,而是将输入作为 JSON 解析,以生成一个 JavaScript 对象。 + +## 语法 + +```js +json() +``` + +### 参数 + +无。 + +### 返回值 + +一个将兑现一个 JavaScript 对象的 {{jsxref("Promise")}}。这个对象可能是任何可以用 JSON 表示的东西——一个对象、一个数组、一个字符串、一个数值…… + +## 示例 + +```js +const obj = {hello: 'world'}; + +const request = new Request('/myEndpoint', { + method: 'POST', + body: JSON.stringify(obj) + }); + +request.json().then(function(data) { + // do something with the data sent in the request +}); +``` + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- {{domxref("Response.json()")}} From 9b8a6002db9c4979f16c02e1459f13400c66d0e9 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 9 Jul 2022 23:17:40 +0900 Subject: [PATCH 012/100] =?UTF-8?q?2022/07/09=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ja/web/api/element/keydown_event/index.md | 137 ++++++++++++++++++ .../web/api/element/keypress_event/index.md | 127 ++++++++++++++++ files/ja/web/api/element/keyup_event/index.md | 130 +++++++++++++++++ 3 files changed, 394 insertions(+) create mode 100644 files/ja/web/api/element/keydown_event/index.md create mode 100644 files/ja/web/api/element/keypress_event/index.md create mode 100644 files/ja/web/api/element/keyup_event/index.md diff --git a/files/ja/web/api/element/keydown_event/index.md b/files/ja/web/api/element/keydown_event/index.md new file mode 100644 index 00000000000000..80995316c946da --- /dev/null +++ b/files/ja/web/api/element/keydown_event/index.md @@ -0,0 +1,137 @@ +--- +title: 'Element: keydown イベント' +slug: Web/API/Element/keydown_event +page-type: web-api-event +tags: + - API + - DOM + - Element + - Event + - KeyboardEvent + - Reference + - keyboard + - keydown +browser-compat: api.Element.keydown_event +translation_of: Web/API/Element/keydown_event +--- +{{APIRef}} + +**`keydown`** イベントは、キーが押されたときに発生します。 + +{{domxref("Element/keypress_event", "keypress")}} イベントとは異なり、 `keydown` イベントは生成する文字値に関係なくすべてのキーで発生します。 + +`keydown` と [`keyup`](/ja/docs/Web/API/Element/keyup_event) イベントは、どのキーが押されたかを示すコードを提供し、 `keypress` はどの文字が入力されたかを示します。例えば、小文字の "a" は `keydown` と `keyup` では 65 と報告され、 `keypress` では 97 と報告されます。大文字の "A" は、どのイベントでも 65 と報告されます。 + +キーボードイベントは ``, ` +
    + + + +``` + +## 检查有效性并通知用户 + +表单有效性检验由这几个步骤组成: + +1. 检查电子邮件地址或输入的名称是否有效。 每个字段都有一组必须通过验证的标准。 为了简化此示例,我们将检查电子邮件地址是否包含“ @”符号,以及名称条目是否包含至少 1 个字符。 +2. 如果不满足上述条件,则该字段的`aria-invalid`属性将被赋予“ `true`”值。 +3. 如果不符合条件,用户将被通过警报来通知。 我们将使用简单的 WAI-ARIA 小部件来进行通知,而不是使用 JavaScript 的“`alert`”功能。 这会通知用户错误,但允许他们继续修改表单而不会失去焦点(由 JavaScript 默认的“`alert`”功能中的“ `onblur`”处理函数引起)。 + +下面是一个能够被插入在结束“ `head`”标签上方的示例 JavaScript 代码 + +```js + +``` -

    checkValidity 函数

    +## `checkValidity` 函数 -

    JavaScript 中用于表单验证的主要方法是checkValidity函数。 此方法采用三个参数:要验证的输入的 ID,要确保有效性的搜索项,以及要插入警报中的错误消息。

    +JavaScript 中用于表单验证的主要方法是`checkValidity`函数。 此方法采用三个参数:要验证的`输入`的 ID,要确保有效性的搜索项,以及要插入警报中的错误消息。 -

    要查看其是否有效,该函数将检查输入indexOf值是否大于-1。 如果在值内找不到搜索词的索引,则返回-1或更小的值。

    +要查看其是否有效,该函数将检查`输入`的`indexOf`值是否大于`-1`。 如果在值内找不到搜索词的索引,则返回`-1`或更小的值。 -

    如果无效,这个函数会执行这两个事情:

    +如果无效,这个函数会执行这两个事情: -
      -
    1. 它会把这个字段的aria-invalid属性设置为“true”,指示用户那里有无效的内容。
    2. -
    3. 它会调用addAlert函数来使用给定的错误信息添加警告。
    4. -
    +1. 它会把这个字段的`aria-invalid`属性设置为“`true`”,指示用户那里有无效的内容。 +2. 它会调用`addAlert`函数来使用给定的错误信息添加警告。 -

    如果搜索词被找到,aria-invalid值会被重置为“false”。此外,所有剩余警告都将被删除。

    +如果搜索词被找到,`aria-invalid`值会被重置为“`false`”。此外,所有剩余警告都将被删除。 -

    addAlert 函数

    +## `addAlert` 函数 -

    此功能首先删除所有旧警报。 该函数很简单:它查找 ID 为“alert”的元素,如果找到,则将其从文档对象模型中删除。

    +此功能首先删除所有旧警报。 该函数很简单:它查找 ID 为“`alert`”的元素,如果找到,则将其从[文档对象模型](/zh-CN/docs/Mozilla/Tech/XUL/Tutorial/Document_Object_Model)中删除。 -

    接下来,这个函数创建一个div元素来保存警告文本。 它得到了一个 “alert”的 ID.,并且它具有“alert”角色集。 这实际上是受 ARIA 启发的,即使它在属性名称中没有标明“aria”。 这是因为该角色基于XHTML 角色属性模块,为简单起见,该模块简单地移植到 HTML。

    +接下来,这个函数创建一个`div`元素来保存警告文本。 它得到了一个 “`alert`”的 ID.,并且它具有“`alert`”角色集。 这实际上是受 ARIA 启发的,即使它在属性名称中没有标明“aria”。 这是因为该角色基于[XHTML 角色属性模块](http://www.w3.org/TR/xhtml-role/),为简单起见,该模块简单地移植到 HTML。 -

    这些文字被加入这个div元素,然后这个div元素被加入文档。

    +这些文字被加入这个`div`元素,然后这个`div`元素被加入文档。 -

    发生这种情况时,当此div出现时,Firefox 将向辅助技术触发“警报”事件。 大多数屏幕阅读器都会自动选择并说出来。 这类似于 Firefox 中的提示栏,提示您是否要保存密码。 我们刚刚创建的警报没有任何可按的按钮,只是告诉我们出了什么问题。

    +发生这种情况时,当此`div`出现时,Firefox 将向辅助技术触发“警报”事件。 大多数屏幕阅读器都会自动选择并说出来。 这类似于 Firefox 中的提示栏,提示您是否要保存密码。 我们刚刚创建的警报没有任何可按的按钮,只是告诉我们出了什么问题。 -

    修改“onblur” 事件

    +## 修改“`onblur`” 事件 -

    现在剩下的就是添加事件处理程序。 我们需要为此更改电子邮件和名称的两个输入:

    +现在剩下的就是添加事件处理程序。 我们需要为此更改电子邮件和名称的两个输入: -
     <input name="name" id="name" aria-required="true"
    -        onblur="checkValidity('name', ' ', 'Invalid name entered!');"/>
    - <br />
    - <input name="email" id="email" aria-required="true"
    -        onblur="checkValidity('email', '@', 'Invalid e-mail address');"/>
    -
    +```html + +
    + +``` -

    测试示例

    +**测试示例** -

    如果你在使用 Firefox 3 和一个当前支持的屏幕阅读器,试试看下面的操作:

    +如果你在使用 Firefox 3 和一个当前支持的屏幕阅读器,试试看下面的操作: -
      -
    1. 在姓名输入框中,只输入你的名。按下 Tab 键时,您会听到警告,提示您输入了无效的姓名。 然后,您可以向后移 Tab 键并更正错误。
    2. -
    3. 输入不带“ @”符号的电子邮件地址。 跳出此字段时,您应该听到一条警告,提示您未输入有效的电子邮件地址。
    4. -
    +1. 在姓名输入框中,只输入你的名。按下 Tab 键时,您会听到警告,提示您输入了无效的姓名。 然后,您可以向后移 Tab 键并更正错误。 +2. 输入不带“ @”符号的电子邮件地址。 跳出此字段时,您应该听到一条警告,提示您未输入有效的电子邮件地址。 -

    在两种情况下,当将焦点返回到相关字段时,您的屏幕阅读器应该告诉您该字段无效。 JAWS 9 支持这个功能,但是 JAWS 8 不支持,所以这个功能不一定能够在所有版本的支持的屏幕阅读器中正常工作。

    +在两种情况下,当将焦点返回到相关字段时,您的屏幕阅读器应该告诉您该字段无效。 JAWS 9 支持这个功能,但是 JAWS 8 不支持,所以这个功能不一定能够在所有版本的支持的屏幕阅读器中正常工作。 -

    您可能遇到的一些问题

    +## 您可能遇到的一些问题 -
    -
    Q. 为什么在某些输入中同时在标签文本和“aria-required”属性中都添加了“(required)”? -
    -
    A. 如果这是一个实例中的表格,并且尚不支持 ARIA 的浏览器正在访问该网站,我们仍然希望表明这是必填字段。
    -
    Q. 为什么不将焦点自动设置回无效字段?
    -
    A. 因为 Windows API 规范(可能还有其他规范)不允许这样做。 同样,让焦点在没有实际用户交互的情况下过于频繁地跳动通常也不是一件好事。
    -
    +- Q. 为什么在某些输入中同时在标签文本和“`aria-required`”属性中都添加了“`(required)`”? + - : A. 如果这是一个实例中的表格,并且尚不支持 ARIA 的浏览器正在访问该网站,我们仍然希望表明这是必填字段。 +- Q. 为什么不将焦点自动设置回无效字段? + - : A. 因为 Windows API 规范(可能还有其他规范)不允许这样做。 同样,让焦点在没有实际用户交互的情况下过于频繁地跳动通常也不是一件好事。 -

    警告: TBD:让我们重新考虑一下 - 就个人而言,我认为如果不引起键盘陷阱,设置焦点可能会很好。

    +> **警告:** TBD:让我们重新考虑一下 - 就个人而言,我认为如果不引起键盘陷阱,设置焦点可能会很好。 diff --git a/files/zh-cn/web/accessibility/aria/forms/index.md b/files/zh-cn/web/accessibility/aria/forms/index.md index a522dccd1d0ce6..7d208db6a4f619 100644 --- a/files/zh-cn/web/accessibility/aria/forms/index.md +++ b/files/zh-cn/web/accessibility/aria/forms/index.md @@ -3,14 +3,12 @@ title: Forms slug: Web/Accessibility/ARIA/forms translation_of: Web/Accessibility/ARIA/forms --- -

    The following pages provide various techniques for improving the accessibility of web forms:

    +The following pages provide various techniques for improving the accessibility of web forms: -

    接下来的网页会为 web 表单技术的人提供一系列的知识:

    +接下来的网页会为 web 表单技术的人提供一系列的知识: -
      -
    • Basic form hints: Adding hints and descriptions for invalid or required fields
    • -
    • Alerts: Using alerts to provide client-side validation error messages
    • -
    • Multi-part labels: Enabling complex form labels with a control inside each label
    • -
    +- [Basic form hints](/en/Accessibility/ARIA/Basic_form_hints): Adding hints and descriptions for invalid or required fields +- [Alerts](/en/Accessibility/ARIA/forms/alerts): Using alerts to provide client-side validation error messages +- [Multi-part labels](/en/Accessibility/ARIA/forms/Multipart_labels): Enabling complex form labels with a control inside each label -

    See also the Yahoo! article on form validation and ARIA, covering much of the same content.

    +See also the [Yahoo! article on form validation and ARIA](http://yaccessibilityblog.com/library/aria-invalid-form-inputs.html), covering much of the same content. diff --git a/files/zh-cn/web/accessibility/aria/index.md b/files/zh-cn/web/accessibility/aria/index.md index e64c2b1f055d75..ebdd8736a1afd9 100644 --- a/files/zh-cn/web/accessibility/aria/index.md +++ b/files/zh-cn/web/accessibility/aria/index.md @@ -8,25 +8,26 @@ tags: - HTML translation_of: Web/Accessibility/ARIA --- -

    ARIA (Accessible Rich Internet Applications) 是一组属性,用于定义使残障人士更容易访问 Web 内容和 Web 应用程序(尤其是使用 JavaScript 开发的应用程序)的方法。

    +**ARIA** (Accessible Rich Internet Applications) 是一组属性,用于定义使残障人士更容易访问 Web 内容和 Web 应用程序(尤其是使用 JavaScript 开发的应用程序)的方法。 -

    它补充了 HTML,以便在没有其他机制时可以将应用程序中常用的交互和小部件传递给辅助技术。例如,ARIA 支持 HTML4 中的可访问导航地标、JavaScript 小部件、表单提示和错误消息、实时内容更新等。

    +它补充了 HTML,以便在没有其他机制时可以将应用程序中常用的交互和小部件传递给辅助技术。例如,ARIA 支持 HTML4 中的可访问导航地标、JavaScript 小部件、表单提示和错误消息、实时内容更新等。 -
    -

    警告: 许多这些小部件后来被合并到 HTML5 中,如果存在这样的元素,开发人员应该更喜欢使用正确语义的 HTML 元素而不是使用 ARIA。例如,原生元素具有内置的键盘可访问性、角色和状态。但是,如果您选择使用 ARIA,则您有责任在脚本中模仿(等效)浏览器行为。

    -
    -

    这是进度条小部件的标记:

    +> **警告:** 许多这些小部件后来被合并到 HTML5 中,如果存在这样的元素,**开发人员应该更喜欢使用正确语义的 HTML 元素而不是使用 ARIA**。例如,原生元素具有内置的[键盘可访问性](/zh-CN/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets)、角色和状态。但是,如果您选择使用 ARIA,则您有责任在脚本中模仿(等效)浏览器行为。 + +这是进度条小部件的标记: -
    <div id="percent-loaded" role="progressbar" aria-valuenow="75"
    -     aria-valuemin="0" aria-valuemax="100">
    -</div>
    -
    +```html +
    +
    +``` -

    这个进度条是使用 {{HTMLElement("div")}} 构建的,它没有任何意义。不幸的是,HTML 4 中没有更多语义标签可供开发人员使用,因此我们需要包含 ARIA 角色和属性。这些是通过向元素添加属性来指定的。在这个例子中, role="progressbar" 属性通知浏览器这个元素实际上是一个 JavaScript 驱动的进度条小部件。 aria-valueminaria-valuemax 属性指定进度条的最小值和最大值,aria-valuenow 描述进度条的当前状态和因此必须使用 JavaScript 保持更新。

    +这个进度条是使用 {{HTMLElement("div")}} 构建的,它没有任何意义。不幸的是,HTML 4 中没有更多语义标签可供开发人员使用,因此我们需要包含 ARIA 角色和属性。这些是通过向元素添加属性来指定的。在这个例子中, `role="progressbar"` 属性通知浏览器这个元素实际上是一个 JavaScript 驱动的进度条小部件。 `aria-valuemin` 和 `aria-valuemax` 属性指定进度条的最小值和最大值,`aria-valuenow` 描述进度条的当前状态和因此必须使用 JavaScript 保持更新。 -

    除了将它们直接放置在元素中之外,还可以将 ARIA 属性添加到元素中,并使用 JavaScript 代码动态更新,如下所示:

    +除了将它们直接放置在元素中之外,还可以将 ARIA 属性添加到元素中,并使用 JavaScript 代码动态更新,如下所示: -
    // Find the progress bar <div> in the DOM.
    +```js
    +// Find the progress bar 
    in the DOM. var progressBar = document.getElementById("percent-loaded"); // Set its ARIA roles and states, @@ -39,79 +40,68 @@ progressBar.setAttribute("aria-valuemax", 100); // the value of the progress bar. function updateProgress(percentComplete) { progressBar.setAttribute("aria-valuenow", percentComplete); -}
    +} +``` -
    -

    备注: 请注意,ARIA 是在 HTML4 之后发明的,因此无法在 HTML4 或其 XHTML 变体中进行验证。然而,它提供的可访问性收益远远超过任何技术无效性。

    - -

    在 HTML5 中,所有 ARIA 属性都经过验证。新的地标元素({{HTMLElement("main")}}、{{HTMLElement("header")}}、{{HTMLElement("nav")}} 等)具有内置的 ARIA 角色,因此有无需复制它们。

    -
    +> **备注:** 请注意,ARIA 是在 HTML4 之后发明的,因此无法在 HTML4 或其 XHTML 变体中进行验证。然而,它提供的可访问性收益远远超过任何技术无效性。 +> +> 在 HTML5 中,所有 ARIA 属性都经过验证。新的地标元素({{HTMLElement("main")}}、{{HTMLElement("header")}}、{{HTMLElement("nav")}} 等)具有内置的 ARIA 角色,因此有无需复制它们。 -

    支持

    +## 支持 -

    与任何其他 Web 技术一样,对 ARIA 有不同程度的支持。支持基于所使用的操作系统和浏览器,以及与之交互的辅助技术类型。此外,操作系统、浏览器和辅助技术的版本也是影响因素。较旧的软件版本可能不支持某些 ARIA 角色、仅部分支持或误报其功能。

    +与任何其他 Web 技术一样,对 ARIA 有不同程度的支持。支持基于所使用的操作系统和浏览器,以及与之交互的辅助技术类型。此外,操作系统、浏览器和辅助技术的版本也是影响因素。较旧的软件版本可能不支持某些 ARIA 角色、仅部分支持或误报其功能。 -

    同样重要的是要承认一些依赖辅助技术的人不愿意升级他们的软件,因为害怕失去与他们的计算机和浏览器交互的能力。因此,尽可能对 使用语义化的 HTML 元素 很重要,因为语义 HTML 对辅助技术的支持要好得多。

    +同样重要的是要承认一些依赖辅助技术的人不愿意升级他们的软件,因为害怕失去与他们的计算机和浏览器交互的能力。因此,尽可能对 [使用语义化的 HTML 元素](/zh-CN/docs/Learn/Accessibility/HTML) 很重要,因为语义 HTML 对辅助技术的支持要好得多。 -

    使用实际辅助技术测试您编写的 ARIA 也很重要。就像浏览器模拟器和模拟器不是测试完全支持的有效解决方案一样,代理辅助技术解决方案不足以完全保证功能。

    +使用实际辅助技术测试您编写的 ARIA 也很重要。就像浏览器模拟器和模拟器不是测试完全支持的有效解决方案一样,代理辅助技术解决方案不足以完全保证功能。 -

    教程

    +## 教程 -
    -
    ARIA 简介
    -
    快速介绍如何使用 ARIA 访问动态内容。另请参阅 2008 年的经典 ARIA intro by Gez Lemon
    -
    Videos of screen readers using ARIA
    -
    查看来自网络的真实和简化示例,视频包括 ARIA “之前”和 ARIA“之后”。
    -
    Using ARIA
    -
    开发人员实用指南。它建议在 HTML 元素上使用哪些 ARIA 属性。建议是基于实施的实际情况。
    -
    +- [ARIA 简介](/zh-CN/docs/Web/Accessibility/An_overview_of_accessible_web_applications_and_widgets) + - : 快速介绍如何使用 ARIA 访问动态内容。另请参阅 2008 年的经典 [ARIA intro by Gez Lemon](https://dev.opera.com/articles/view/introduction-to-wai-aria/)。 +- [Videos of screen readers using ARIA](https://zomigi.com/blog/videos-of-screen-readers-using-aria-updated/) + - : 查看来自网络的真实和简化示例,视频包括 ARIA “之前”和 ARIA“之后”。 +- [Using ARIA](https://w3c.github.io/using-aria/) + - : 开发人员实用指南。它建议在 HTML 元素上使用哪些 ARIA 属性。建议是基于实施的实际情况。 -

    简单的 ARIA 增强

    +## 简单的 ARIA 增强 -
    -
    Enhancing page navigation with ARIA landmarks
    -
    使用 ARIA 地标改进屏幕阅读器用户的网页导航的一个很好的介绍。参考 ARIA landmark implementation notes 和真实站点上的示例(截至 2011 年 7 月更新)。
    -
    Improving form accessibility
    -
    ARIA 不仅适用于动态内容!了解如何使用附加 ARIA 属性提高 HTML 表单的可访问性。
    -
    +- [Enhancing page navigation with ARIA landmarks](https://www.paciellogroup.com/blog/2013/02/using-wai-aria-landmarks-2013/) + - : 使用 ARIA 地标改进屏幕阅读器用户的网页导航的一个很好的介绍。参考 [ARIA landmark implementation notes](https://www.paciellogroup.com/blog/2011/07/html5-accessibility-chops-aria-landmark-support/) 和真实站点上的示例(截至 2011 年 7 月更新)。 +- [Improving form accessibility](/zh-CN/docs/Web/Accessibility/ARIA/forms) + - : ARIA 不仅适用于动态内容!了解如何使用附加 ARIA 属性提高 HTML 表单的可访问性。 -

    脚本小部件的 ARIA

    +## 脚本小部件的 ARIA -
    -
    编写可通过键盘导航的 JavaScript 小部件
    -
    {{HTMLElement("input")}}、{{HTMLElement("button")}} 等内置元素具有内置键盘辅助功能。如果您使用 {{HTMLElement("div")}} 和 ARIA 来“伪造”这些,则必须确保您的小部件可通过键盘访问。
    -
    实时区域
    -
    实时区域向屏幕阅读器提供有关如何处理页面内容更改的建议。
    -
    Using ARIA Live Regions to announce content changes
    -
    JAWS 屏幕阅读器软件制造商对实时区域的快速总结。带有 Firefox 的 NVDA 和带有 Safari 的 VoiceOver 也支持实时区域。
    -
    +- [编写可通过键盘导航的 JavaScript 小部件](/zh-CN/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets) + - : {{HTMLElement("input")}}、{{HTMLElement("button")}} 等内置元素具有内置键盘辅助功能。如果您使用 {{HTMLElement("div")}} 和 ARIA 来“伪造”这些,则必须确保您的小部件可通过键盘访问。 +- [实时区域](/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) + - : 实时区域向屏幕阅读器提供有关如何处理页面内容更改的建议。 +- [Using ARIA Live Regions to announce content changes](https://www.freedomscientific.com/Training/Surfs-up/AriaLiveRegions.htm) + - : JAWS 屏幕阅读器软件制造商对实时区域的快速总结。带有 Firefox 的 NVDA 和带有 Safari 的 VoiceOver 也支持实时区域。 -

    参考文献

    +## 参考文献 -
    -
    ARIA Roles
    -
    参考页面涵盖了 MDN 上讨论的所有 WAI-ARIA 角色。
    -
    +- [ARIA Roles](/zh-CN/docs/Web/Accessibility/ARIA/Roles) + - : 参考页面涵盖了 MDN 上讨论的所有 WAI-ARIA 角色。 -

    标准化工作

    +## 标准化工作 -
    -
    WAI-ARIA Specification
    -
    W3C 规范本身。
    -
    WAI-ARIA Authoring Practices
    -

    官方最佳实践记录了如何最好地对常见小部件和交互进行 ARIA 化。一个很好的资源。

    -
    +- [WAI-ARIA Specification](https://www.w3.org/TR/wai-aria-1.1/) + - : W3C 规范本身。 +- [WAI-ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.1/) + - : 官方最佳实践记录了如何最好地对常见小部件和交互进行 ARIA 化。一个很好的资源。 -

    视频

    +## 视频 -

    以下演讲是了解 ARIA 的好方法:

    +以下演讲是了解 ARIA 的好方法: -

    ARIA, Accessibility APIs and coding like you give a damn! – Léonie Watson

    +[ARIA, Accessibility APIs and coding like you give a damn! – Léonie Watson](https://www.youtube.com/watch?v=qdB8SRhqvFc) -

    提交错误

    +## 提交错误 -

    在浏览器、屏幕阅读器和 JavaScript 库上提交 ARIA 错误。

    +[在浏览器、屏幕阅读器和 JavaScript 库上提交 ARIA 错误。](/zh-CN/docs/Web/Accessibility/ARIA/How_to_file_ARIA-related_bugs) - +## 相关话题 -

    Accessibility, AJAX, JavaScript

    +[Accessibility](/zh-CN/docs/Web/Accessibility), [AJAX](/zh-CN/docs/Web/Guide/AJAX), [JavaScript](/zh-CN/docs/Web/JavaScript) diff --git a/files/zh-cn/web/accessibility/aria/roles/button_role/index.md b/files/zh-cn/web/accessibility/aria/roles/button_role/index.md index a1eb43d501d783..8bf6f4633a05cb 100644 --- a/files/zh-cn/web/accessibility/aria/roles/button_role/index.md +++ b/files/zh-cn/web/accessibility/aria/roles/button_role/index.md @@ -8,67 +8,69 @@ tags: translation_of: Web/Accessibility/ARIA/Roles/button_role original_slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role --- -

    button 角色应该用于可单击的元素, 当用户激活时触发响应。 在其本身,role="button" 可以使任何元素 (e.g. {{HTMLElement("p")}}, {{HTMLElement("span")}} or {{HTMLElement("div")}}) 作为一个屏幕阅读器的按钮控件出现。此外,该角色还可以与 aria-pressed 属性组合使用,以创建切换按钮。

    +**[button](https://www.w3.org/TR/wai-aria/roles#button)** 角色应该用于可单击的元素, 当用户激活时触发响应。 在其本身,`role="button"` 可以使任何元素 (e.g. {{HTMLElement("p")}}, {{HTMLElement("span")}} or {{HTMLElement("div")}}) 作为一个屏幕阅读器的按钮控件出现。此外,该角色还可以与 `aria-pressed` 属性组合使用,以创建切换按钮。 -

    备注: 在可能的情况下,建议使用原生 HTML 按钮 (<button>, <input type="button" />, <input type="submit" />, <input type="reset" /> and <input type="image" />) 而不是按钮角色,因为原生 HTML 按钮得到了较老用户代理和辅助技术的广泛支持。原生 HTML 按钮也支持键盘和焦点需求,不需要额外的定制。

    +> **备注:** 在可能的情况下,建议使用原生 HTML 按钮 (` -<span role="button" tabindex="0" + Span button toggle -</span>
    + +``` -

    CSS

    +#### CSS -
    button,
    +```css
    +button,
     [role="button"] {
         padding: 3px;
         border: 1px solid #CCC;
    @@ -78,11 +80,12 @@ button[aria-pressed="true"],
     [role="button"][aria-pressed="true"] {
         border: 2px solid #000;
     }
    -
    +``` -

    JavaScript

    +#### JavaScript -
    function handleBtnClick(event) {
    +```js
    +function handleBtnClick(event) {
       toggleButton(event.target);
     }
     
    @@ -100,24 +103,21 @@ function toggleButton(element) {
       var pressed = (element.getAttribute("aria-pressed") === "true");
       // Change aria-pressed to the opposite state
       element.setAttribute("aria-pressed", !pressed);
    -}
    +} +``` -

    Result

    +### Result -

    {{EmbedLiveSample('ARIA_Toggle_Button')}}

    +{{EmbedLiveSample('ARIA_Toggle_Button')}} -

    Notes

    +## Notes -

    ARIA attributes used

    +### ARIA attributes used - +- [`button`](https://www.w3.org/TR/wai-aria/roles#button) +- [`aria-pressed`](https://www.w3.org/TR/wai-aria/states_and_properties#aria-pressed) -

    Additional resources

    +### Additional resources - +- [Strong native semantics in HTML5](https://www.w3.org/TR/html5/dom.html#aria-usage-note) +- [Notes on Using ARIA in HTML](https://www.w3.org/TR/aria-in-html/) diff --git a/files/zh-cn/web/accessibility/aria/roles/index.md b/files/zh-cn/web/accessibility/aria/roles/index.md index e32d5a10382e33..7e08c5393816d9 100644 --- a/files/zh-cn/web/accessibility/aria/roles/index.md +++ b/files/zh-cn/web/accessibility/aria/roles/index.md @@ -2,85 +2,18 @@ title: WAI-ARIA Roles slug: Web/Accessibility/ARIA/Roles tags: -- ARIA -- ARIA Roles -- 可访问性 -- 无障碍 -- Reference -- Roles + - ARIA + - ARIA Roles + - 可访问性 + - 无障碍 + - Reference + - Roles translation_of: Web/Accessibility/ARIA/Roles --- -

    此页面列出了涵盖 MDN 上讨论的所有 WAI-ARIA 角色的参考页面。有关角色的完整列表,请参阅 ARIA 技术

    +此页面列出了涵盖 MDN 上讨论的所有 WAI-ARIA 角色的参考页面。有关角色的完整列表,请参阅 [ARIA 技术](/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques) -

    {{SubpagesWithSummaries}}

    +{{SubpagesWithSummaries}} - - - - + diff --git a/files/zh-cn/web/accessibility/aria/roles/list_role/index.md b/files/zh-cn/web/accessibility/aria/roles/list_role/index.md index 80dd0282a68a8b..0a43f4707b6962 100644 --- a/files/zh-cn/web/accessibility/aria/roles/list_role/index.md +++ b/files/zh-cn/web/accessibility/aria/roles/list_role/index.md @@ -2,118 +2,100 @@ title: 'ARIA: list role' slug: Web/Accessibility/ARIA/Roles/List_role tags: -- ARIA -- ARIA Role -- ARIA list -- 可访问性 -- 无障碍 -- Reference -- Role -- list + - ARIA + - ARIA Role + - ARIA list + - 可访问性 + - 无障碍 + - Reference + - Role + - list --- -

    ARIA list 角色可用于标识项目列表。它通常与 listitem 角色结合使用,该角色用于标识包含在列表中的列表项。

    +ARIA `list` 角色可用于标识项目列表。它通常与 `listitem` 角色结合使用,该角色用于标识包含在列表中的列表项。 -
    <section role="list">
    -  <div role="listitem">List item 1</div>
    -  <div role="listitem">List item 2</div>
    -  <div role="listitem">List item 3</div>
    -</section>
    -
    +```html +
    +
    List item 1
    +
    List item 2
    +
    List item 3
    +
    +``` -

    描述

    +## 描述 -

    任何由外部容器和内部元素列表组成的内容都可以分别使用 listlistitem 容器识别为辅助技术。一个 list 必须有一个或多个 listitem 子级,或者,有一个或多个 group 作为子级,每个 group有一个或多个 listitem 作为子项。

    +任何由外部容器和内部元素列表组成的内容都可以分别使用 `list` 和 `listitem` 容器识别为辅助技术。一个 `list` 必须有一个或多个 `listitem` 子级,或者,有一个或多个 `group` 作为子级,每个 `group`有一个或多个 `listitem` 作为子项。 -

    关于应该使用哪些元素来标记 listlistitem 没有硬性规定,但是您应该确保 listitem 在列表的上下文中有意义,例如购物清单、食谱步骤、行车路线。

    +关于应该使用哪些元素来标记 `list` 和 `listitem` 没有硬性规定,但是您应该确保 `listitem` 在列表的上下文中有意义,例如购物清单、食谱步骤、行车路线。 -
    -

    警告: 如果可能,您应该使用适当的语义化 HTML 元素来标记 list 及其 listitem,如 {{HTMLElement("ul")}}、{{HTMLElement("ol")}} 和 {{HTMLElement("li")}}。有关完整示例,请参阅 最佳实践

    -
    +> **警告:** 如果可能,您应该使用适当的语义化 HTML 元素来标记 `list` 及其 `listitem`,如 {{HTMLElement("ul")}}、{{HTMLElement("ol")}} 和 {{HTMLElement("li")}}。有关完整示例,请参阅 [最佳实践](#best_practices)。 -

    关联的 WAI-ARIA 角色、状态和属性

    +### 关联的 WAI-ARIA 角色、状态和属性 -
    -
    listitem
    -

    列表或目录中的单个项目。角色为 listitem 的元素只能在角色为 listgroup 的元素中找到。

    -
    group
    -

    相关对象的集合,在嵌套在列表中时仅限于列表项,其重要性不足以在页面目录中拥有自己的位置。

    -
    +- [listitem](/zh-CN/docs/Web/Accessibility/ARIA/Roles/Listitem_role) + - : 列表或目录中的单个项目。角色为 listitem 的元素只能在角色为 `list` 或 `group` 的元素中找到。 +- [group](/zh-CN/docs/Web/Accessibility/ARIA/Roles/group_role) + - : 相关对象的集合,在嵌套在列表中时仅限于列表项,其重要性不足以在页面目录中拥有自己的位置。 -

    键盘交互

    +### 键盘交互 -

    +无 -

    所需的 JavaScript 功能

    +### 所需的 JavaScript 功能 -

    +无 -

    示例

    +## 示例 -

    ARIA Lists — Scott O'Hara 的一些有用的例子和想法

    +[ARIA Lists](https://www.scottohara.me/blog/2018/05/26/aria-lists.html) — Scott O'Hara 的一些有用的例子和想法 -

    最佳实践

    +## 最佳实践 -

    仅在必要时使用 role="list"role="listitem"。例如,无法控制 HTML 但能够在之后动态使用 JavaScript 提升可访问性的时候。

    +仅在必要时使用 `role="list"` 和 `role="listitem"`。例如,无法控制 HTML 但能够在之后动态使用 JavaScript 提升可访问性的时候。 -

    与 HTML {{HTMLElement("ol")}} 和 {{HTMLElement("ul")}} 不同,ARIA list 角色不区分有序列表和无序列表。如果可能,您应该使用适当的语义 HTML 元素来标记列表({{HTMLElement("ol")}} 和 {{HTMLElement("ul")}})和列表项({{HTMLElement("li")}})。例如,我们上面的例子应该改写如下:

    +与 HTML {{HTMLElement("ol")}} 和 {{HTMLElement("ul")}} 不同,ARIA `list` 角色不区分有序列表和无序列表。如果可能,您应该使用适当的语义 HTML 元素来标记列表({{HTMLElement("ol")}} 和 {{HTMLElement("ul")}})和列表项({{HTMLElement("li")}})。例如,我们上面的例子应该改写如下: -
    <ul>
    -  <li>List item 1</li>
    -  <li>List item 2</li>
    -  <li>List item 3</li>
    -</ul>
    +```html +
      +
    • List item 1
    • +
    • List item 2
    • +
    • List item 3
    • +
    +``` -

    或者如果列表项的顺序很重要,则使用有序列表:

    +或者如果列表项的顺序很重要,则使用有序列表: -
    <ol>
    -  <li>List item 1</li>
    -  <li>List item 2</li>
    -  <li>List item 3</li>
    -</ol>
    +```html +
      +
    1. List item 1
    2. +
    3. List item 2
    4. +
    5. List item 3
    6. +
    +``` -
    -

    备注: ARIA list / listitem 角色不区分有序列表和无序列表。

    -
    +> **备注:** ARIA `list` / `listitem` 角色不区分有序列表和无序列表。 -

    顺便说一句,请注意,如果您使用 {{HTMLElement("ol")}} 或 {{HTMLElement("ul")}} 的语义 HTML 元素并应用 presentation 角色,则每个子 li 元素都会继承 presentation 角色,因为 ARIA 需要 listitem 元素具有父 list 元素。因此,li 元素不会暴露给辅助技术,但是包含在这些 li 元素中的元素,包括嵌套列表,对辅助技术是可见的。

    +顺便说一句,请注意,如果您使用 {{HTMLElement("ol")}} 或 {{HTMLElement("ul")}} 的语义 HTML 元素并应用 [`presentation`](/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_presentation_role) 角色,则每个子 `li` 元素都会继承 `presentation` 角色,因为 ARIA 需要 `listitem` 元素具有父 `list` 元素。因此,`li` 元素不会暴露给辅助技术,但是包含在这些 `li` 元素中的元素,包括嵌套列表,对辅助技术是可见的。 -
    -

    备注: 如果要标记将用作选项卡式界面的项目列表,则应改为使用 tabtabpaneltablist 角色。

    -
    +> **备注:** 如果要标记将用作选项卡式界面的项目列表,则应改为使用 `tab`、`tabpanel` 和 `tablist` 角色。 -

    规范

    +## 规范 - - - - - - - - - - - -
    SpecificationStatus
    {{SpecName("ARIA","#list","list")}}{{Spec2('ARIA')}}
    +| Specification | Status | +| ------------------------------------------------ | ------------------------ | +| {{SpecName("ARIA","#list","list")}} | {{Spec2('ARIA')}} | -

    屏幕阅读器支持

    +## 屏幕阅读器支持 -

    TBD

    +TBD -

    相关链接

    +## 相关链接 - +- [Accessibility Object Model](https://wicg.github.io/aom/spec/) +- [ARIA in HTML](https://w3c.github.io/html-aria/) +- {{HTMLElement("ul")}} +- {{HTMLElement("ol")}} +- {{HTMLElement("li")}} +- [ARIA: listitem role](/zh-CN/docs/Web/Accessibility/ARIA/Roles/Listitem_role) +- [ARIA: group role](/zh-CN/docs/Web/Accessibility/ARIA/Roles/group_role) - + diff --git a/files/zh-cn/web/accessibility/aria/roles/listbox_role/index.md b/files/zh-cn/web/accessibility/aria/roles/listbox_role/index.md index ab400ccb843e0a..043fa0c3244d5d 100644 --- a/files/zh-cn/web/accessibility/aria/roles/listbox_role/index.md +++ b/files/zh-cn/web/accessibility/aria/roles/listbox_role/index.md @@ -7,213 +7,215 @@ tags: - 无障碍 translation_of: Web/Accessibility/ARIA/Roles/listbox_role --- -

    listbox 角色用于列表,用户可以从中选择一个或多个静态选项,并且与 HTML {{HTMLElement("select")}} 元素不同,它可能包含图像。

    - -

    描述

    - -

    listbox 角色用于标识创建列表的元素,用户可以从中选择一个或多个静态选项,类似于 HTML {{HTMLElement("select")}} 元素。与 {{HTMLElement("select")}} 不同,listbox 可以包含图像。listbox 的每个子项都应该有一个 option role。

    - -

    强烈建议使用 HTML {{HTMLElement("select")}} 元素,如果只能选择一个选项,则使用一组单选按钮,如果可以选择多个选项,则使用一组复选框,因为有很多键盘交互来管理所有后代的焦点和原生 HTML 元素为您提供相关的功能。

    - -

    具有 listbox 角色的元素含有隐式的 aria-orientationvertical 值。

    - -

    当一个列表被 tab 聚焦到时,如果没有其他内容,将会选择列表中的第一项。可以用 Up/Down 方向键在列表中导航,按 Shift + Up/Down 方向键将移动并扩展选择。键入一个或多个字母将在列表项中导航(相同的字母指向以那个开头的每个选项,不同的字母指向以整个字符串开头的第一个选项)。如果当前选项有关联的菜单, Shift+F10 将启动该菜单。如果项目可被勾选,Space 可用于切换 checkbox role。对于可选择的列表项,Space 切换它们的选择,Shift+Space 可用于选择连续的项目,Ctrl+ 方向键 移动而不选择, Ctrl+Space 可用于选择非连续的项目。建议使用 checkbox、link 或其他方法来选择所有项目,为此可以使用 Ctrl+A 作为快捷键。

    - -

    当 listbox 角色被添加到元素中,或含有它的元素变得可见时,屏幕阅读器会在 listbox 获得焦点时读出它的 label 和 role。如果列表中的 option 或选项获得焦点,则接下来会读出它,如果屏幕阅读器支持,则会在列表中指示选项的位置。当焦点在列表中移动时,屏幕阅读器会读出相关选项。

    - -

    相关的 ARIA 角色、状态和属性

    - -

    相关角色

    - -
    -
    option
    -
    需要一个或多个嵌套的 option。 所有被选择的选项都含有 aria-selected 且值为 true。所有未选中的选项都含有 aria-selected 且值为 false。 如果某个选项不可选择,aria-selected 会被忽略。
    -
    list
    -
    包含 listitem 元素的部分
    -
    - -

    状态和属性

    - -
    -
    aria-activedescendant
    -
    保存 listbox 中当前活动元素的 id 字符串。如果这是一个 option 元素,那么这将是最近与之交互选项的 id,无论该选项是否具有值为 truearia-selected。即使在多选列表框中,也只会有一个 id。如果 id 不引用 listbox 的 DOM 后代,则 id 必须包含在 aria-owns 属性中的 ID 中。
    -
    aria-owns
    -
    这是一个以空格分隔的元素 ID 列表,它们不是 listbox 的 DOM 子元素。此处列出的 ID 也不能列在任何其他元素的 aria-owns 属性中。
    -
    aria-multiselectable
    -
    如果用户可以选择多个选项,则存在并设置为 true。如果设置为 true每个 可选的选项都应包含 aria-selected 属性并设置为 truefalse不可选的选项不应该具有aria-selected属性。如果值为 false 或被省略,那么仅当前选中的选项(如果有任何选项被选中)才需要aria-selected属性,而且必须设置为true
    -
    aria-required
    -
    一个布尔属性,指示必须选择具有非空字符串值的选项。
    -
    aria-readonly
    -
    用户无法更改选择或取消选择,但 listbox 是可操作的。
    -
    aria-label
    -
    一个可供人类阅读的字符串,用于标识 listbox。如果有可见标签,则应使用 aria-labelledby 来引用该标签。
    -
    aria-labelledby
    -
    标识以空格分隔的元素 ID 列表中的一个或多个可见元素,这些元素标识 listbox。如果没有可见标签,则应该使用 aria-label 来包含标签。(注意:带有两个 L 的 "labelled" 是基于辅助功能 API 约定的正确拼写。)
    -
    aria-roledescription
    -
    一个可供人类阅读的字符串,可以更清楚地标识 listbox 的作用。屏幕阅读器通常会在阅读标签(如果存在)后向用户阅读此值,而不是说 “listbox”。
    -
    - -

    (有关更多详细信息以及 ARIA 状态和属性的完整列表,请参阅 ARIA listbox (role) 文档。 )

    - -

    键盘交互

    - -
      -
    • 当单选 listbox 获得焦点时: -
        -
      • 如果在 listbox 获得焦点之前没有选择任何选项,则第一个选项将获得焦点。(可选)可以自动选择第一个选项。
      • -
      • 如果在列表框获得焦点之前选择了一个选项,则焦点将设置在所选选项上。
      • -
      -
    • -
    • 当多选 listbox 获得焦点时: -
        -
      • 如果在列表框获得焦点之前没有选择任何选项,则焦点将设置在第一个选项上,并且选择状态不会自动更改。
      • -
      • 如果在列表框获得焦点之前选择了一个或多个选项,则焦点将设置在列表中选定的第一个选项上。
      • -
      -
    • -
    • Down Arrow: 将焦点移至下一个选项。(可选)在单选 listbox 中,选中的值也可以随焦点移动。
    • -
    • Up Arrow: 将焦点移至上一个选项。(可选)在单选 listbox 中,选中的值也可以随焦点移动。
    • -
    • Home (可选): 将焦点移至第一个选项。(可选)在单选列表框中,选中的值也可以随焦点移动。对于超过五个选项的列表,强烈建议支持此键。
    • -
    • End (可选): 将焦点移至最后一个选项。(可选)在单选列表框中,选中的值也可以随焦点移动。对于超过五个选项的列表,强烈建议支持此键。
    • -
    • 建议所有 listbox 都预先输入,尤其是那些有七个以上选项的列表框: -
        -
      • 键入字符时:焦点移至名称符合键入的字符开头的一项。
      • -
      • 快速连续键入多个字符时:焦点移至名称符合键入的字符串开头的一项。
      • -
      -
    • -
    • 多项选择: 作者可以实现两种交互模型中的任何一种来支持多选:推荐模型,不需要用户在导航列表时按住修饰键,例如 ShiftControl 或者需要在导航时按住修饰键以避免丢失选择状态的替代模型。 -
        -
      • 推荐的选择模型——不需要按住修饰键: -
          -
        • Space: 更改焦点选项的选择状态。
        • -
        • Shift + Down Arrow (可选): 将焦点移动并切换到下一个选项的选定状态。
        • -
        • Shift + Up Arrow (可选): 将焦点移动并切换到上一个选项的选定状态。
        • -
        • Shift + Space (可选): 选择从最近选择的项目到焦点项目的连续项目。
        • -
        • Control + Shift + Home (可选): 选择焦点选项和直到第一个选项的所有选项。(可选)将焦点移至第一个选项。
        • -
        • Control + Shift + End (可选): 选择焦点选项和直到最后一个选项的所有选项。(可选)将焦点移到最后一个选项。
        • -
        • Control + A (可选): 选择列表中的所有选项。(可选)如果选择了所有选项,它也可以取消选择所有选项。
        • -
        -
      • -
      -
    • -
    - -

    所需的 JavaScript 功能

    - -

    在单选 listbox 中选择一个选项

    - -

    当用户选择一个选项时,必须发生以下情况:

    - -
      -
    1. 取消选择先前选择的选项,将 aria-selected 设置为 false,或完全删除该属性,将新未选择的选项的外观更改为未选择的。
    2. -
    3. 选择新选择的选项,在该选项上设置 aria-selected="true" 并将新选择的选项的外观更改为选中。
    4. -
    5. 将列表框上的 aria-activedescendant 值更新为新选择的选项的 id
    6. -
    7. 可视化处理选项的丢焦、聚焦和选定状态
    8. -
    - -

    在多选列表框中切换选项的状态

    - -

    当用户点击一个选项、聚焦在一个选项时按下 Space或者以其他方式切换一个选项的状态,必须发生以下情况:

    - -
      -
    1. 切换当前聚焦选项的 aria-selected 状态,如果它是 false,则将 aria-selected 的状态更改为 true,如果为 true,则将其更改为 false。
    2. -
    3. 更改选项的外观以反映其选定状态
    4. -
    5. 将列表框上的 aria-activedescendant 值更新为用户刚刚与之交互的选项的 id,即使他们将选项切换为取消选择。
    6. -
    - -
    -

    备注: ARIA 使用的第一原则是您可以使用具有内置语义和行为的原生功能,而不是重新利用元素并添加 ARIA 角色、状态或属性使其可访问。含有后代 {{HTMLElement("option")}} 元素的 {{HTMLElement("select")}} 元素带有所有需要的交互的原生处理方法。

    -
    +`listbox` 角色用于列表,用户可以从中选择一个或多个静态选项,并且与 HTML {{HTMLElement("select")}} 元素不同,它可能包含图像。 + +## 描述 + +`listbox` 角色用于标识创建列表的元素,用户可以从中选择一个或多个静态选项,类似于 HTML {{HTMLElement("select")}} 元素。与 {{HTMLElement("select")}} 不同,`listbox` 可以包含图像。`listbox` 的每个子项都应该有一个 [`option`](https://www.w3.org/TR/2010/WD-wai-aria-20100916/roles#option) role。 + +强烈建议使用 HTML {{HTMLElement("select")}} 元素,如果只能选择一个选项,则使用一组单选按钮,如果可以选择多个选项,则使用一组复选框,因为有很多键盘交互来管理所有后代的焦点和原生 HTML 元素为您提供相关的功能。 + +具有 `listbox` 角色的元素含有隐式的 `aria-orientation` 和 `vertical` 值。 + +当一个列表被 tab 聚焦到时,如果没有其他内容,将会选择列表中的第一项。可以用 Up/Down 方向键在列表中导航,按 Shift + Up/Down 方向键将移动并扩展选择。键入一个或多个字母将在列表项中导航(相同的字母指向以那个开头的每个选项,不同的字母指向以整个字符串开头的第一个选项)。如果当前选项有关联的菜单, Shift+F10 将启动该菜单。如果项目可被勾选,Space 可用于切换 [`checkbox`](https://www.w3.org/TR/wai-aria-practices/#checkbox) role。对于可选择的列表项,Space 切换它们的选择,Shift+Space 可用于选择连续的项目,Ctrl+ 方向键 移动而不选择, Ctrl+Space 可用于选择非连续的项目。建议使用 checkbox、link 或其他方法来选择所有项目,为此可以使用 Ctrl+A 作为快捷键。 + +当 listbox 角色被添加到元素中,或含有它的元素变得可见时,屏幕阅读器会在 listbox 获得焦点时读出它的 label 和 role。如果列表中的 option 或选项获得焦点,则接下来会读出它,如果屏幕阅读器支持,则会在列表中指示选项的位置。当焦点在列表中移动时,屏幕阅读器会读出相关选项。 + +### 相关的 ARIA 角色、状态和属性 + +#### 相关角色 + +- [option](/zh-CN/docs/Web/Accessibility/ARIA/Roles/option_role) + - : 需要一个或多个嵌套的 `option`。 所有被选择的选项都含有 `aria-selected` 且值为 `true`。所有未选中的选项都含有 `aria-selected` 且值为 `false`。 如果某个选项不可选择,`aria-selected` 会被忽略。 +- [list](/zh-CN/docs/Web/Accessibility/ARIA/Roles/List_role) + - : 包含 `listitem` 元素的部分 + +#### 状态和属性 + +- aria-activedescendant + - : 保存 listbox 中当前活动元素的 `id` 字符串。如果这是一个 option 元素,那么这将是最近与之交互选项的 `id`,无论该选项是否具有值为 `true` 的 `aria-selected`。即使在多选列表框中,也只会有一个 `id`。如果 `id` 不引用 listbox 的 DOM 后代,则 `id` 必须包含在 `aria-owns` 属性中的 ID 中。 +- aria-owns + - : 这是一个以空格分隔的元素 ID 列表,它们不是 listbox 的 DOM 子元素。此处列出的 ID 也不能列在任何其他元素的 `aria-owns` 属性中。 +- aria-multiselectable + - : 如果用户可以选择多个选项,则存在并设置为 `true`。如果设置为 `true`,_每个_ 可选的选项都应包含 `aria-selected` 属性并设置为 `true` 或 `false`。 *不可选*的选项*不应该*具有`aria-selected`属性。如果值为 `false` 或被省略,那么仅当前选中的选项(如果有任何选项被选中)才需要`aria-selected`属性,而且必须设置为`true`。 +- aria-required + - : 一个布尔属性,指示必须选择具有非空字符串值的选项。 +- aria-readonly + - : 用户无法更改选择或取消选择,但 listbox 是可操作的。 +- aria-label + - : 一个可供人类阅读的字符串,用于标识 listbox。如果有可见标签,则应使用 `aria-labelledby` 来引用该标签。 +- aria-labelledby + - : 标识以空格分隔的元素 ID 列表中的一个或多个可见元素,这些元素标识 listbox。如果没有可见标签,则应该使用 `aria-label` 来包含标签。(注意:带有两个 L 的 "labelled" 是基于辅助功能 API 约定的正确拼写。) +- aria-roledescription + - : 一个可供人类阅读的字符串,可以更清楚地标识 listbox 的作用。屏幕阅读器通常会在阅读标签(如果存在)后向用户阅读此值,而不是说 “listbox”。 + +(有关更多详细信息以及 ARIA 状态和属性的完整列表,请参阅 [ARIA `listbox` (role)](https://www.w3.org/TR/wai-aria-1.1/#listbox) 文档。 ) + +### 键盘交互 + +- 当单选 listbox 获得焦点时: + + - 如果在 listbox 获得焦点之前没有选择任何选项,则第一个选项将获得焦点。(可选)可以自动选择第一个选项。 + - 如果在列表框获得焦点之前选择了一个选项,则焦点将设置在所选选项上。 + +- 当多选 listbox 获得焦点时: + + - 如果在列表框获得焦点之前没有选择任何选项,则焦点将设置在第一个选项上,并且选择状态不会自动更改。 + - 如果在列表框获得焦点之前选择了一个或多个选项,则焦点将设置在列表中选定的第一个选项上。 + +- Down Arrow + + : 将焦点移至下一个选项。(可选)在单选 listbox 中,选中的值也可以随焦点移动。 + +- Up Arrow + + : 将焦点移至上一个选项。(可选)在单选 listbox 中,选中的值也可以随焦点移动。 + +- Home + + (可选): 将焦点移至第一个选项。(可选)在单选列表框中,选中的值也可以随焦点移动。对于超过五个选项的列表,强烈建议支持此键。 + +- End + + (可选): 将焦点移至最后一个选项。(可选)在单选列表框中,选中的值也可以随焦点移动。对于超过五个选项的列表,强烈建议支持此键。 + +- 建议所有 listbox 都预先输入,尤其是那些有七个以上选项的列表框: + + - 键入字符时:焦点移至名称符合键入的字符开头的一项。 + - 快速连续键入多个字符时:焦点移至名称符合键入的字符串开头的一项。 + +- **多项选择**: 作者可以实现两种交互模型中的任何一种来支持多选:推荐模型,不需要用户在导航列表时按住修饰键,例如 + + Shift + + 或 + + Control + + 或者需要在导航时按住修饰键以避免丢失选择状态的替代模型。 + + - 推荐的选择模型——不需要按住修饰键: + + - Space -

    例子

    + : 更改焦点选项的选择状态。 -

    例子 1: 使用 aria-activedescendant 的单个选择列表框

    + - Shift + Down Arrow -

    下面的代码片段显示了如何将列表框角色直接添加到 html 源代码中。

    + (可选): 将焦点移动并切换到下一个选项的选定状态。 -
    <p id="listbox1label" role="label">Select a color:</p>
    -<div role="listbox" tabindex="0" id="listbox1" aria-labelledby="listbox1label"
    +    - Shift + Up Arrow
    +
    +      (可选): 将焦点移动并切换到上一个选项的选定状态。
    +
    +    - Shift + Space
    +
    +      (可选): 选择从最近选择的项目到焦点项目的连续项目。
    +
    +    - Control + Shift + Home
    +
    +      (可选): 选择焦点选项和直到第一个选项的所有选项。(可选)将焦点移至第一个选项。
    +
    +    - Control + Shift + End
    +
    +      (可选): 选择焦点选项和直到最后一个选项的所有选项。(可选)将焦点移到最后一个选项。
    +
    +    - Control + A
    +
    +      (可选): 选择列表中的所有选项。(可选)如果选择了所有选项,它也可以取消选择所有选项。
    +
    +### 所需的 JavaScript 功能
    +
    +#### 在单选 listbox 中选择一个选项
    +
    +当用户选择一个选项时,必须发生以下情况:
    +
    +1.  取消选择先前选择的选项,将 aria-selected 设置为 false,或完全删除该属性,将新未选择的选项的外观更改为未选择的。
    +2.  选择新选择的选项,在该选项上设置 aria-selected="true" 并将新选择的选项的外观更改为选中。
    +3.  将列表框上的 `aria-activedescendant` 值更新为新选择的选项的 id
    +4.  可视化处理选项的丢焦、聚焦和选定状态
    +
    +#### 在多选列表框中切换选项的状态
    +
    +当用户点击一个选项、聚焦在一个选项时按下 Space或者以其他方式切换一个选项的状态,必须发生以下情况:
    +
    +1.  切换当前聚焦选项的 aria-selected 状态,如果它是 false,则将 aria-selected 的状态更改为 true,如果为 true,则将其更改为 false。
    +2.  更改选项的外观以反映其选定状态
    +3.  将列表框上的 aria-activedescendant 值更新为用户刚刚与之交互的选项的 id,即使他们将选项切换为取消选择。
    +
    +> **备注:** ARIA 使用的第一原则是您可以使用具有内置语义和行为的原生功能,而不是重新利用元素并**添加** ARIA 角色、状态或属性使其可访问。含有后代 {{HTMLElement("option")}} 元素的 {{HTMLElement("select")}} 元素带有所有需要的交互的原生处理方法。
    +
    +## 例子
    +
    +#### 例子 1: 使用 aria-activedescendant 的单个选择列表框
    +
    +下面的代码片段显示了如何将列表框角色直接添加到 html 源代码中。
    +
    +```html
    +

    Select a color:

    +
    - -

    使用原生的 HTML {{HTMLElement("select")}} 和 {{HTMLElement("label")}} 元素可以更简单。

    - -
    <label for="listbox1">Select a color:</label>
    -<select id="listbox1">
    -   <option selected>Green</option>
    -   <option>Orange</option>
    -   <option>Red</option>
    -   <option>Blue</option>
    -   <option>Violet</option>
    -   <option>Periwinkle</option>
    -</select>
    - -

    更多例子

    - - - -

    最佳实践

    - -
      -
    • 为了便于键盘访问,作者应该对这个角色的所有后代进行 焦点管理
    • -
    • 建议作者在列表未聚焦时使用不同的样式进行选择,例如非活动选项通常以较浅的背景颜色显示。
    • -
    • 如果 listbox 不是另一个组件的一部分,那么它应该具有 aria-labelledby 属性。
    • -
    • 如果一个或多个条目不是 listbox 的 DOM 子项,则需要设置额外的 aria-* 属性(参见 ARIA Best Practices)。
    • -
    • 如果有理由 展开 列表框,combobox 角色可能更合适。
    • -
    - -

    规范

    - - - - - - - - - - - - - - - - -
    规范状态
    {{SpecName("ARIA","#listbox","ARIA listbox role")}}{{Spec2('ARIA')}}
    {{SpecName("ARIA Authoring Practices","#Listbox","Listbox Role")}}{{Spec2('ARIA Authoring Practices')}}
    - -

    屏幕阅读器支持

    - -

    TBD

    - -

    另见

    - - - - + aria-activedescendant="listbox1-1"> +
    Green
    +
    Orange
    +
    Red
    +
    Blue
    +
    Violet
    +
    Periwinkle
    +
    +``` + +使用原生的 HTML {{HTMLElement("select")}} 和 {{HTMLElement("label")}} 元素可以更简单。 + +```html + + +``` + +#### 更多例子 + +- [可滚动的 listbox 示例](https://w3c.github.io/aria-practices/examples/listbox/listbox-scrollable.html): 滚动显示更多选项的单选 listbox,类似于 HTML `select` 的 `size` 属性大于 1。 +- [可折叠下拉 listbox 示例](https://w3c.github.io/aria-practices/examples/listbox/listbox-collapsible.html): 激活时展开的单选可折叠 listbox,类似于 HTML `select` 并且属性 `size="1"`。 +- [具有可重新排列选项的 listbox 示例](https://w3c.github.io/aria-practices/examples/listbox/listbox-rearrangeable.html): 带有可以添加、移动和删除选项的附带工具栏的单选和多选 listbox 的示例。 + +## 最佳实践 + +- 为了便于键盘访问,作者应该对这个角色的所有后代进行 [焦点管理](https://www.w3.org/TR/wai-aria-1.1/#managingfocus) +- 建议作者在列表未聚焦时使用不同的样式进行选择,例如非活动选项通常以较浅的背景颜色显示。 +- 如果 listbox 不是另一个组件的一部分,那么它应该具有 `aria-labelledby` 属性。 +- 如果一个或多个条目不是 listbox 的 DOM 子项,则需要设置额外的 `aria-*` 属性(参见 [ARIA Best Practices](https://www.w3.org/TR/wai-aria-practices/#listbox_div))。 +- 如果有理由 [展开](https://www.w3.org/TR/wai-aria-1.1/#aria-expanded) 列表框,[`combobox`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/combobox_role) 角色可能更合适。 + +## 规范 + +| 规范 | 状态 | +| ---------------------------------------------------------------------------------------- | ------------------------------------------------ | +| {{SpecName("ARIA","#listbox","ARIA listbox role")}} | {{Spec2('ARIA')}} | +| {{SpecName("ARIA Authoring Practices","#Listbox","Listbox Role")}} | {{Spec2('ARIA Authoring Practices')}} | + +## 屏幕阅读器支持 + +TBD + +## 另见 + +- {{HTMLElement("select")}} 元素 +- {{HTMLElement("label")}} 元素 +- {{HTMLElement("option")}} 元素 +- [ARIA: `combobox` 角色](/zh-CN/docs/Web/Accessibility/ARIA/Roles/combobox_role) +- [ARIA: `option` 角色](/zh-CN/docs/Web/Accessibility/ARIA/Roles/option_role) +- [ARIA: `list` 角色](/zh-CN/docs/Web/Accessibility/ARIA/Roles/List_role) +- [ARIA: `listitem` 角色](/zh-CN/docs/Web/Accessibility/ARIA/Roles/Listitem_role) +- [ARIA Best Practices – Listbox](https://www.w3.org/TR/wai-aria-practices/#Listbox) +- [ARIA Role Model – Listbox](https://www.w3.org/TR/wai-aria-1.1/#listbox) + + diff --git a/files/zh-cn/web/accessibility/aria/roles/listitem_role/index.md b/files/zh-cn/web/accessibility/aria/roles/listitem_role/index.md index 51af09128d0261..17142a37507143 100644 --- a/files/zh-cn/web/accessibility/aria/roles/listitem_role/index.md +++ b/files/zh-cn/web/accessibility/aria/roles/listitem_role/index.md @@ -2,116 +2,98 @@ title: 'ARIA: listitem role' slug: Web/Accessibility/ARIA/Roles/Listitem_role tags: -- ARIA -- ARIA Role -- ARIA listitem -- 可访问性 -- 无障碍 -- Reference -- Role -- listitem + - ARIA + - ARIA Role + - ARIA listitem + - 可访问性 + - 无障碍 + - Reference + - Role + - listitem --- -

    ARIA listitem 角色可用于标识项目列表中的项目。它通常与 list 角色结合使用,用于标识列表容器。

    +ARIA `listitem` 角色可用于标识项目列表中的项目。它通常与 `list` 角色结合使用,用于标识列表容器。 -
    <section role="list">
    -  <div role="listitem">List item 1</div>
    -  <div role="listitem">List item 2</div>
    -  <div role="listitem">List item 3</div>
    -</section>
    -
    +```html +
    +
    List item 1
    +
    List item 2
    +
    List item 3
    +
    +``` -

    描述

    +## 描述 -

    任何由外部容器和内部元素列表组成的内容都可以分别使用 listlistitem 容器识别为辅助技术。

    +任何由外部容器和内部元素列表组成的内容都可以分别使用 `list` 和 `listitem` 容器识别为辅助技术。 -

    关于应该使用哪些元素来标记 listlistitem 没有硬性规定,但是您应该确保 listitem 在列表的上下文中有意义,例如购物清单、食谱步骤、行车路线。

    +关于应该使用哪些元素来标记 `list` 和 `listitem` 没有硬性规定,但是您应该确保 `listitem` 在列表的上下文中有意义,例如购物清单、食谱步骤、行车路线。 -
    -

    警告: 如果可能,您应该使用适当的语义化 HTML 元素来标记 list 及其 listitem,如 {{HTMLElement("ul")}}、{{HTMLElement("ol")}} 和 {{HTMLElement("li")}}。有关完整示例,请参阅 最佳实践

    -
    +> **警告:** 如果可能,您应该使用适当的语义化 HTML 元素来标记 `list` 及其 `listitem`,如 {{HTMLElement("ul")}}、{{HTMLElement("ol")}} 和 {{HTMLElement("li")}}。有关完整示例,请参阅 [最佳实践](#best_practices)。 -

    关联的 WAI-ARIA 角色、状态和属性

    +### 关联的 WAI-ARIA 角色、状态和属性 -
    -
    list
    -

    项目列表。角色为 list 的元素必须有一个或多个角色为 listitem 的元素作为子元素,一个或多个角色为 group 的元素具有一个或多个具有 listitem 角色的元素作为子元素。

    -
    group
    -

    相关对象的集合,在嵌套在列表中时仅限于列表项,其重要性不足以在页面目录中拥有自己的位置。

    -
    +- [list](/en-US/docs/Web/Accessibility/ARIA/Roles/List_role) + - : 项目列表。角色为 `list` 的元素必须有一个或多个角色为 `listitem` 的元素作为子元素,一个或多个角色为 `group` 的元素具有一个或多个具有 `listitem` 角色的元素作为子元素。 +- [group](/en-US/docs/Web/Accessibility/ARIA/Roles/group_role) + - : 相关对象的集合,在嵌套在列表中时仅限于列表项,其重要性不足以在页面目录中拥有自己的位置。 -

    键盘交互

    +### 键盘交互 -

    +无 -

    所需的 JavaScript 功能

    +### 所需的 JavaScript 功能 -

    +无 -

    示例

    +## 示例 -

    ARIA Lists — Scott O'Hara 的一些有用的例子和想法

    +[ARIA Lists](https://www.scottohara.me/blog/2018/05/26/aria-lists.html) — Scott O'Hara 的一些有用的例子和想法 -

    最佳实践

    +## 最佳实践 -

    仅在必要时使用 role="list"role="listitem"。例如,无法控制 HTML 但能够在之后动态使用 JavaScript 提升可访问性的时候。

    +仅在必要时使用 `role="list"` 和 `role="listitem"`。例如,无法控制 HTML 但能够在之后动态使用 JavaScript 提升可访问性的时候。 -

    与 HTML {{HTMLElement("ol")}} 和 {{HTMLElement("ul")}} 不同,ARIA list 角色不区分有序列表和无序列表。如果可能,您应该使用适当的语义 HTML 元素来标记列表({{HTMLElement("ol")}} 和 {{HTMLElement("ul")}})和列表项({{HTMLElement("li")}})。例如,我们上面的例子应该改写如下:

    +与 HTML {{HTMLElement("ol")}} 和 {{HTMLElement("ul")}} 不同,ARIA `list` 角色不区分有序列表和无序列表。如果可能,您应该使用适当的语义 HTML 元素来标记列表({{HTMLElement("ol")}} 和 {{HTMLElement("ul")}})和列表项({{HTMLElement("li")}})。例如,我们上面的例子应该改写如下: -
    <ul>
    -  <li>List item 1</li>
    -  <li>List item 2</li>
    -  <li>List item 3</li>
    -</ul>
    +```html +
      +
    • List item 1
    • +
    • List item 2
    • +
    • List item 3
    • +
    +``` -

    或者如果列表项的顺序很重要,则使用有序列表:

    +或者如果列表项的顺序很重要,则使用有序列表: -
    <ol>
    -  <li>List item 1</li>
    -  <li>List item 2</li>
    -  <li>List item 3</li>
    -</ol>
    +```html +
      +
    1. List item 1
    2. +
    3. List item 2
    4. +
    5. List item 3
    6. +
    +``` -
    -

    备注: ARIA list / listitem 角色不区分有序列表和无序列表。

    -
    +> **备注:** ARIA `list` / `listitem` 角色不区分有序列表和无序列表。 -
    -

    备注: 如果要标记将用作选项卡式界面的项目列表,则应改为使用 tabtabpaneltablist 角色。

    -
    +> **备注:** 如果要标记将用作选项卡式界面的项目列表,则应改为使用 `tab`、`tabpanel` 和 `tablist` 角色。 -

    规范

    +## 规范 - - - - - - - - - - - -
    SpecificationStatus
    {{SpecName("ARIA","#listitem","listitem")}}{{Spec2('ARIA')}}
    +| Specification | Status | +| -------------------------------------------------------- | ------------------------ | +| {{SpecName("ARIA","#listitem","listitem")}} | {{Spec2('ARIA')}} | -

    屏幕阅读器支持

    +## 屏幕阅读器支持 -

    TBD

    +TBD -

    相关链接

    +## 相关链接 - +- [Accessibility Object Model](https://wicg.github.io/aom/spec/) +- [ARIA in HTML](https://w3c.github.io/html-aria/) +- {{HTMLElement("ul")}} +- {{HTMLElement("ol")}} +- {{HTMLElement("li")}} +- [ARIA: list role](/en-US/docs/Web/Accessibility/ARIA/Roles/List_role) +- [ARIA: group role](/en-US/docs/Web/Accessibility/ARIA/Roles/group_role) - + diff --git a/files/zh-cn/web/accessibility/index.md b/files/zh-cn/web/accessibility/index.md index ac76e79fe81882..cdd6b6dd528b51 100644 --- a/files/zh-cn/web/accessibility/index.md +++ b/files/zh-cn/web/accessibility/index.md @@ -6,55 +6,47 @@ tags: - Landing translation_of: Web/Accessibility --- -

    在 Web 开发无障碍性意味着使尽可能多的人能够使用 Web 站点,即使这些人的能力是有限的。这里我们提供关于开发易访问的内容的信息。

    - -
    “无障碍性是最常用于描述设施或设施,帮助残疾人,如“轮椅”。这可以扩展到盲文标识、轮椅坡道,音频信号在人行横道,轮廓人行道,网站设计,等等。" 维基百科条目可访问性
    - -

    "网络从根本上是为了为所有的人工作, 无论他们的硬件、软件、语言、文化、位置或身体或精神能力。当网络达到这一目标,它可以被不同的人的听觉范围,运动,和认知能力访问。" W3C - 可访问性

    - -

    主要教程

    - -

    MDN 无障碍学习区包含现代的最新教程,涵盖无障碍性要点:

    - -
    -
    什么是可访问性?
    -
    这篇文章很好的介绍无障碍性的实际情况——包括我们需要考虑哪些人群以及为什么,人们用什么工具与 Web 进行交互,以及我们的网站无障碍如何开发的流程
    -
    HTML : 无障碍性的良好基础
    -
    通过使用正确的 HTML 元素确保始终正确,无障碍性的 web 内容保证。本文详细介绍如何使用 HTML 来确保无障碍性。
    -
    CSS 和 JavaScript 无障碍最佳做法
    -
    CSS 和 JavaScript 正确使用时,也是具有达到无障碍网络体验的能力,但滥用情况下,也会严重损害无障碍性。本文概述了一些 CSS 和 JavaScript 最佳实践,以尽可能包括无障碍性的复杂内容。
    -
    WAI-ARIA 基础知识
    -
    从之前的一篇文章来看,有时候制作复杂的 UI 控件涉及非正规的 HTML 和动态 JavaScript 更新的内容可能很困难。WAI-ARIA 是一种通过添加进一步的语义让浏览器和无障碍技术可以识别和使用,让用户知道发生了什么。这里我们将介绍如何提高无障碍性的基础知识。
    -
    无障碍多媒体
    -
    另一类造成无障碍问题就是多媒体—视频,音频和图像需要给出适当的文本替代,以便可以通过辅助技术及其用户来理解。本文内容如上。
    -
    移动无障碍
    -
    随着移动设备网络访问的受欢迎,流行平台 ( IOS 和 Android ) 具有完善的辅助功能工具,重要的是在这些平台考虑你网站的无障碍性。本文将介绍无障碍移动专用的注意事项。
    -
    - -

    其他文件

    - -
    -
    了解 Web 内容无障碍功能指南
    -
    这组文章提供了快速解释,以帮助你了解需要采取的步骤,以符合 W3C web 内容辅助功能指南 2.0 的建议
    -
    键盘导航的 JavaScript 小部件
    -
    直到现在,想要使他们的风格基于<div> 和 <span> 的小元素的网络开发人员缺乏适当的技术。无障碍关键是开发人员应该注意的最小无障碍要求的一部分。
    -
    ARIA
    -
    一组文章,学习如何利用 ARIA 使你的 HTML 文档更容易理解。
    -
    辅助技术 (AT) 发展
    -
    针对辅助技术(AT)开发人员文章的集合
    -
    移动辅助功能清单
    -
    本文档提供了移动应用开发人员无障碍要求的简明清单
    -
    - -

    web 开发人员工具

    - - - -

    其它有用的网站

    - - +在 Web 开发无障碍性意味着使尽可能多的人能够使用 Web 站点,即使这些人的能力是有限的。这里我们提供关于开发易访问的内容的信息。 + +“无障碍性是最常用于描述设施或设施,帮助残疾人,如“轮椅”。这可以扩展到盲文标识、轮椅坡道,音频信号在人行横道,轮廓人行道,网站设计,等等。" [维基百科条目可访问性](http://en.wikipedia.org/wiki/Accessibility) + +"**网络从根本上是为了为所有的人工作**, 无论他们的硬件、软件、语言、文化、位置或身体或精神能力。当网络达到这一目标,它可以被不同的人的听觉范围,运动,和认知能力访问。" [W3C - 可访问性](http://www.w3.org/standards/webdesign/accessibility) + +## 主要教程 + +MDN [无障碍学习区](/zh-CN/docs/Learn/Accessibility)包含现代的最新教程,涵盖无障碍性要点: + +- [什么是可访问性?](/zh-CN/docs/Learn/Accessibility/What_is_accessibility) + - : 这篇文章很好的介绍无障碍性的实际情况——包括我们需要考虑哪些人群以及为什么,人们用什么工具与 Web 进行交互,以及我们的网站无障碍如何开发的流程 +- [HTML : 无障碍性的良好基础](/zh-CN/docs/Learn/Accessibility/HTML) + - : 通过使用正确的 HTML 元素确保始终正确,无障碍性的 web 内容保证。本文详细介绍如何使用 HTML 来确保无障碍性。 +- [CSS 和 JavaScript 无障碍最佳做法](/zh-CN/docs/Learn/Accessibility/CSS_and_JavaScript) + - : CSS 和 JavaScript 正确使用时,也是具有达到无障碍网络体验的能力,但滥用情况下,也会严重损害无障碍性。本文概述了一些 CSS 和 JavaScript 最佳实践,以尽可能包括无障碍性的复杂内容。 +- [WAI-ARIA 基础知识](/zh-CN/docs/Learn/Accessibility/WAI-ARIA_basics) + - : 从之前的一篇文章来看,有时候制作复杂的 UI 控件涉及非正规的 HTML 和动态 JavaScript 更新的内容可能很困难。WAI-ARIA 是一种通过添加进一步的语义让浏览器和无障碍技术可以识别和使用,让用户知道发生了什么。这里我们将介绍如何提高无障碍性的基础知识。 +- [无障碍多媒体](/zh-CN/docs/Learn/Accessibility/Multimedia) + - : 另一类造成无障碍问题就是多媒体—视频,音频和图像需要给出适当的文本替代,以便可以通过辅助技术及其用户来理解。本文内容如上。 +- [移动无障碍](/zh-CN/docs/Learn/Accessibility/Mobile) + - : 随着移动设备网络访问的受欢迎,流行平台 ( IOS 和 Android ) 具有完善的辅助功能工具,重要的是在这些平台考虑你网站的无障碍性。本文将介绍无障碍移动专用的注意事项。 + +## 其他文件 + +- [了解 Web 内容无障碍功能指南](/zh-CN/docs/Web/Accessibility/Understanding_WCAG) + - : 这组文章提供了快速解释,以帮助你了解需要采取的步骤,以符合 W3C web 内容辅助功能指南 2.0 的建议 +- [键盘导航的 JavaScript 小部件](/en/Accessibility/Keyboard-navigable_JavaScript_widgets) + - : 直到现在,想要使他们的风格基于\
    和 \ 的小元素的网络开发人员缺乏适当的技术。无障碍关键是开发人员应该注意的最小无障碍要求的一部分。 +- [ARIA](/zh-CN/docs/Accessibility/ARIA) + - : 一组文章,学习如何利用 ARIA 使你的 HTML 文档更容易理解。 +- [辅助技术 (AT) 发展](/zh-CN/docs/Accessibility/AT_Development) + - : 针对辅助技术(AT)开发人员文章的集合 +- [移动辅助功能清单](/zh-CN/docs/Web/Accessibility/Mobile_accessibility_checklist) + - : 本文档提供了移动应用开发人员无障碍要求的简明清单 + +## web 开发人员工具 + +- [自动化可访问性测试](http://www-archive.mozilla.org/quality/embed/plans/accessibility/nsIAccessibleTestPlan.html) +- [尖牙屏幕阅读模拟器](http://www.standards-schmandards.com/index.php?show/fangs) + +## 其它有用的网站 + +- [屏幕阅读器列表](https://support.mozilla.org/kb/accessibility-features-firefox-make-firefox-and-we) diff --git a/files/zh-cn/web/accessibility/keyboard-navigable_javascript_widgets/index.md b/files/zh-cn/web/accessibility/keyboard-navigable_javascript_widgets/index.md index 3ff001ee3e7049..3e074595852099 100644 --- a/files/zh-cn/web/accessibility/keyboard-navigable_javascript_widgets/index.md +++ b/files/zh-cn/web/accessibility/keyboard-navigable_javascript_widgets/index.md @@ -3,203 +3,214 @@ title: 键盘导航的 JavaScript 组件 slug: Web/Accessibility/Keyboard-navigable_JavaScript_widgets translation_of: Web/Accessibility/Keyboard-navigable_JavaScript_widgets --- -

    键盘导航 JavaScript 组件

    +键盘导航 JavaScript 组件 -

    概况

    +### 概况 -

    网页应用经常使用 JavaScript 来模拟桌面组件,比如菜单、树状视图、富文本以及标签面板等。网页中这些组件通常是由 {{ HTMLElement("div") }}和 {{ HTMLElement("span") }} 等元素组合而成,并不是原生的,也不会提供对应的桌面组件所拥有的键盘功能。本文档主要描述能让 JavaScript 组件通过键盘 access 的技术。

    +网页应用经常使用 JavaScript 来模拟桌面组件,比如菜单、树状视图、富文本以及标签面板等。网页中这些组件通常是由 {{ HTMLElement("div") }}和 {{ HTMLElement("span") }} 等元素组合而成,并不是原生的,也不会提供对应的桌面组件所拥有的键盘功能。本文档主要描述能让 JavaScript 组件通过键盘 access 的技术。 -

    利用 tabindex

    +### 利用 tabindex -

    最初 tabindex 出现是做为 HTML4 的一部分,提供一种手段让开发人员定义元素的顺序,可以让用户通过键盘按此顺序来获取焦点。最新在 HTML5 草案里面针对 tabindex 的具体行为表现做了改动。所有主流浏览器都已经实现了这个修改后的设计。

    +最初 tabindex 出现是做为 HTML4 的一部分,提供一种手段让开发人员定义元素的顺序,可以让用户通过键盘按此顺序来获取焦点。最新在 HTML5 草案里面针对 tabindex 的具体行为表现做了改动。所有主流浏览器都已经实现了这个修改后的设计。 -

    下面表格阐述在主流浏览器里面 tabindex 的表现:

    +下面表格阐述在主流浏览器里面 `tabindex` 的表现: - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + +
    tabindex 属性可用鼠标或者 用 JavaScript 语句 element.focus() 获取焦点可使用 Tab 键导航获取焦点
    -

    not present

    - -

    (未设置)

    -
    遵循所在平台针对此元素的默认行为 (yes for form controls, links, etc.).遵循所在平台针对此元素的默认行为
    Negative (i.e. tabindex="-1")YesNo; 必须通过 focus() 来聚焦该元素。可以在方向键或者其他键的响应里面做。
    Zero (i.e. tabindex="0")Yestab 顺序对应于该元素在文档中的位置
    Positive (e.g. tabindex="33")Yestabindex 值决定了元素的 tab 顺序:通常这些带有正数值的 tabindex 元素会排在 tabindex="0"和原生可以 tabable 的元素前面;特别指出的是值越小越排在前面(举个例子,tabindex="7" 会排在tabindex="11"前面)
    tabindex 属性 + 可用鼠标或者 用 JavaScript 语句 element.focus() 获取焦点 + 可使用 Tab 键导航获取焦点
    +

    not present

    +

    (未设置)

    +
    + 遵循所在平台针对此元素的默认行为 (yes for form controls, links, etc.). + 遵循所在平台针对此元素的默认行为
    Negative (i.e. tabindex="-1")Yes + No; 必须通过 + focus() + 来聚焦该元素。可以在方向键或者其他键的响应里面做。 +
    Zero (i.e. tabindex="0")Yestab 顺序对应于该元素在文档中的位置
    Positive (e.g. tabindex="33")Yes + tabindex 值决定了元素的 tab 顺序:通常这些带有正数值的 + tabindex 元素会排在 tabindex="0"和原生可以 tabable + 的元素前面;特别指出的是值越小越排在前面(举个例子,tabindex="7" + 会排在tabindex="11"前面) +
    -

    简单控件 Simple Controls

    +#### 简单控件 Simple Controls -

    可以在 {{ HTMLElement("div") }} or {{ HTMLElement("span") }} 元素上设置 tabindex="0" 使得此简单控件变得可 tab 导航。这里有个 span-based checkbox 使用这个方法的例子。

    +可以在 {{ HTMLElement("div") }} or {{ HTMLElement("span") }} 元素上设置 tabindex="0" 使得此简单控件变得可 tab 导航。这里有个 span-based checkbox 使用这个方法的例子。 -

    Example 1: A simple image-based checkbox widget using tabindex to allow keyboard access

    +_Example 1: A simple image-based checkbox widget using tabindex to allow keyboard access_ -
    <!-- 没有 tabindex 属性的话,这些 <span> 元素不会被键盘 focus 中 -->
    -<div>
    -    <span role="checkbox" aria-checked="true" tabindex="0">
    -        <img src="checked.gif" role="presentation" alt="" />
    +```html
    +
    +
    + + Include decorative fruit basket - </span> -</div> -<div> - <span role="checkbox" aria-checked="true" tabindex="0"> - <img src="checked.gif" role="presentation" alt="" /> + +
    +
    + + Include singing telegram - </span> -</div> -<div> - <span role="checkbox" aria-checked="false" tabindex="0"> - <img src="unchecked.gif" role="presentation" alt="" /> + +
    +
    + + Require payment before delivery - </span> -</div> -
    - -

    组合控件 Grouping controls

    - -

    针对像菜单、标签面板、树等这些组合控件,父元素应该在 tab 序列里面 (tabindex="0") 而每个后代选择/标签/单元/行应该从 tab 序列里面移除 (tabindex="-1")。用户应该可通过方向键来操控这些后代元素。(关于组件一般预期的键盘支持,可以查看 DHTML Style Guide.)

    - -

    下面这个组合菜单的例子展示了这种技术的使用。 一旦键盘 focus 中容器 ul 元素,Javascript 开发人员需要在键盘事件里针对方向键的响应里管理里面元素的 focus 顺序。在组件里管理 focus 的办法,看下面这个 "在组合控件里管理 focus " 例子。

    - -

    范例 2: 一个使用 tabindex 控制键盘 access 的菜单控件

    - -
    <ul id="mb1" tabindex="0">
    -  <li id="mb1_menu1" tabindex="-1"> Font
    -    <ul id="fontMenu" title="Font" tabindex="-1">
    -      <li id="sans-serif" tabindex="-1">Sans-serif</li>
    -      <li id="serif" tabindex="-1">Serif</li>
    -      <li id="monospace" tabindex="-1">Monospace</li>
    -      <li id="fantasy" tabindex="-1">Fantasy</li>
    -    </ul>
    -  </li>
    -  <li id="mb1_menu2" tabindex="-1"> Style
    -    <ul id="styleMenu" title="Style" tabindex="-1">
    -      <li id="italic" tabindex="-1">Italics</li>
    -      <li id="bold" tabindex="-1">Bold</li>
    -      <li id="underline" tabindex="-1">Underlined</li>
    -    </ul>
    -  </li>
    -  <li id="mb1_menu3" tabindex="-1"> Justification
    -    <ul id="justificationMenu" title="Justication" tabindex="-1">
    -      <li id="left" tabindex="-1">Left</li>
    -      <li id="center" tabindex="-1">Centered</li>
    -      <li id="right" tabindex="-1">Right</li>
    -      <li id="justify" tabindex="-1">Justify</li>
    -    </ul>
    -  </li>
    -</ul>
    +
    +
    +``` + +#### 组合控件 Grouping controls + +针对像菜单、标签面板、树等这些组合控件,父元素应该在 tab 序列里面 (tabindex="0") 而每个后代选择/标签/单元/行应该从 tab 序列里面移除 (tabindex="-1")。用户应该可通过方向键来操控这些后代元素。(关于组件一般预期的键盘支持,可以查看 [DHTML Style Guide](http://access.aol.com/dhtml-style-guide-working-group/).) + +下面这个组合菜单的例子展示了这种技术的使用。 一旦键盘 focus 中容器 ul 元素,Javascript 开发人员需要在键盘事件里针对方向键的响应里管理里面元素的 focus 顺序。在组件里管理 focus 的办法,看下面这个 "在组合控件里管理 focus " 例子。 + +_范例 2: 一个使用 tabindex 控制键盘 access 的菜单控件_ + +```html +
      +
    • Font +
        +
      • Sans-serif
      • +
      • Serif
      • +
      • Monospace
      • +
      • Fantasy
      • +
      +
    • +
    • Style +
        +
      • Italics
      • +
      • Bold
      • +
      • Underlined
      • +
      +
    • +
    • Justification +
        +
      • Left
      • +
      • Centered
      • + +
      • Justify
      • +
      +
    • +
    +``` -

    失效控件

    +#### 失效控件 -

    当一个自定义控件变成失效(disabled)状态时,通过设置 tabindex="-1" 把它从 tab 序列里面移除。注意在一个组合组件里面失效状态的子项(比如菜单控件里面某一个菜单项)应该在方向键的响应事件里面跳过它不让 focus 中。

    +当一个自定义控件变成失效(disabled)状态时,通过设置 tabindex="-1" 把它从 tab 序列里面移除。注意在一个组合组件里面失效状态的子项(比如菜单控件里面某一个菜单项)应该在方向键的响应事件里面跳过它不让 focus 中。 -

    在组合控件里面管理 focus

    +### 在组合控件里面管理 focus -

    当用户从一个组件 tab 离开之后 focus 回来,焦点应该回到离开之时正被 focus 中的元素上,比如某个树节点或者网格单元。有两种办法完成这一点:

    +当用户从一个组件 tab 离开之后 focus 回来,焦点应该回到离开之时正被 focus 中的元素上,比如某个树节点或者网格单元。有两种办法完成这一点: -
      -
    1. 流动 tabindex: 通过编程移动 focus
    2. -
    3. aria-activedescendent: 管理一个“虚拟” focus
    4. -
    +1. `流动 tabindex`: 通过编程移动 focus +2. `aria-activedescendent`: 管理一个“虚拟” focus -

    方法 1: 流动 tabindex

    +#### 方法 1: 流动 tabindex -

    在被 focus 中元素上设置 tabindex 为 "0",这样可以保证在用户在 tab 离开又返回后仍然选中组合组件中之前被选中的那项。注意在更改 tabindex 为“0”同时需要把之前选中过的那项设置tabindex="-1"。这个方法包含在键盘事件里面通过程序移动焦点以及更改 tabindex 到当前焦点中的那项上。需要做以下几步:

    +在被 focus 中元素上设置 `tabindex` 为 "0",这样可以保证在用户在 tab 离开又返回后仍然选中组合组件中之前被选中的那项。注意在更改 tabindex 为“0”同时需要把之前选中过的那项设置`tabindex="-1"`。这个方法包含在键盘事件里面通过程序移动焦点以及更改 `tabindex` 到当前焦点中的那项上。需要做以下几步: -

    在每个元素上绑定 key down 事件,当捕捉到控制移动到另外元素的方向键时:

    +在每个元素上绑定 key down 事件,当捕捉到控制移动到另外元素的方向键时: -
      -
    1. 通过编码把 focus 应用到新元素上,
    2. -
    3. 更改被 focus 中元素上的 tabindex 为“0”
    4. -
    5. 更改之前被 focus 中元素的 tabindex 为“-1”.
    6. -
    +1. 通过编码把 focus 应用到新元素上, +2. 更改被 focus 中元素上的 tabindex 为“0” +3. 更改之前被 focus 中元素的 tabindex 为“-1”. -

    这里有个 WAI-ARIA tree view 的例子是使用这种方案的。

    +这里有个 WAI-ARIA tree view 的例子是使用这种方案的。 -

    提示

    +### 提示 -

    用 element.focus() 来设置焦点 focus

    +#### 用 element.focus() 来设置焦点 focus -

    不要使用 createEvent(), initEvent()dispatchEvent() 来发送焦点事件到元素上。DOM 的 focus 事件被认为仅是一种信息:当有事物被 focus 中的时候系统自动产生的,但是实际上没有用来设置焦点。用 element.focus() 来替代。

    +不要使用 `createEvent()`, `initEvent()` 和 `dispatchEvent()` 来发送焦点事件到元素上。DOM 的 focus 事件被认为仅是一种信息:当有事物被 focus 中的时候系统自动产生的,但是实际上没有用来设置焦点。用 `element.focus()` 来替代。 -

    用 onfocus 来追踪当前 focus

    +#### 用 onfocus 来追踪当前 focus -

    不要认为所有的焦点变化都来自于键盘和鼠标事件:像屏幕阅读器之类的辅助技术可以设置焦点到任意一个可 focus 中的元素上。用 onfocus 和 onblur 来追踪焦点。

    +不要认为所有的焦点变化都来自于键盘和鼠标事件:像屏幕阅读器之类的辅助技术可以设置焦点到任意一个可 focus 中的元素上。用 onfocus 和 onblur 来追踪焦点。 -

    onfocusonblur 现在可以在每个元素上使用。没有标准的 DOM 接口来获取当前文档的 focus,所以如果你想追踪就需要保存追踪数据在 JavaScript 变量里。

    +`onfocus` 和 `onblur` 现在可以在每个元素上使用。没有标准的 DOM 接口来获取当前文档的 focus,所以如果你想追踪就需要保存追踪数据在 JavaScript 变量里。 -

    方法 2: aria-activedescendant

    +#### 方法 2: aria-activedescendant -

    这个办法包含绑定一个单独的事件句柄到容器窗口组件上,运用 aria-activedescendent 属性来追踪一个 "虚拟" 焦点。(关于 ARIA 更多的信息,查看 overview of accessible web applications and widgets.)

    +这个办法包含绑定一个单独的事件句柄到容器窗口组件上,运用 `aria-activedescendent 属性`来追踪一个 "虚拟" 焦点。(关于 ARIA 更多的信息,查看 [overview of accessible web applications and widgets](../../../../An_Overview_of_Accessible_Web_Applications_and_Widgets).) -

    aria-activedescendant 属性用来标识拥有虚拟焦点的后代元素的 ID。在窗口容器的事件句柄里面在键盘和鼠标事件响应更新 aria-activedescendant 值并且确保当前 The event handler on the container must respond to key and mouse events by updating the value of aria-activedescendant and ensuring that the current item is styled appropriately (for example, with a border or background color).

    +`aria-activedescendant` 属性用来标识拥有虚拟焦点的后代元素的 ID。在窗口容器的事件句柄里面在键盘和鼠标事件响应更新 aria-activedescendant 值并且确保当前 The event handler on the container must respond to key and mouse events by updating the value of `aria-activedescendant` and ensuring that the current item is styled appropriately (for example, with a border or background color). -

    Tips

    +### Tips -

    scrollIntoView

    +#### scrollIntoView -

    Note that the use of this pattern requires the author to ensure that the current focused widget is scrolled into view. You should be able to use the {{ domxref("element.scrollIntoView()") }} function, but we recommend confirming this works for you in your target browsers using the quirksmode test.

    +Note that the use of this pattern requires the author to ensure that the current _focused_ widget is scrolled into view. You should be able to use the {{ domxref("element.scrollIntoView()") }} function, but we recommend confirming this works for you in your target browsers using the [quirksmode test](http://www.quirksmode.org/dom/tests/scrollintoview.html). -

    Issues

    +#### Issues - +- [quirksmode reports problems in Opera, and Konqueror](http://www.quirksmode.org/dom/w3c_cssom.html) +- [Firefox 3.0.1 introduced bug](https://bugzilla.mozilla.org/show_bug.cgi?id=450405) -

    一般准则

    +### 一般准则 -

    使用 onkeydown 来捕获的关键事件,而不是 onkeypress 事件

    +#### 使用 onkeydown 来捕获的关键事件,而不是 onkeypress 事件 -

    IE 不会触发非字母数字键的 keypress 事件。使用 onkeydown 替代。

    +IE 不会触发非字母数字键的 `keypress `事件。使用 `onkeydown` 替代。 -

    确保键盘和鼠标有相同的体验

    +#### 确保键盘和鼠标有相同的体验 -

    为了确保不同输入设备的用户体验一致,键盘和鼠标事件处理程序在适当的情况下应该共享代码。例如,当用户使用方向键导航的时候,一些代码会更新相应元素的 tabindex 或风格,用鼠标点击也应该有同样的变化。

    +为了确保不同输入设备的用户体验一致,键盘和鼠标事件处理程序在适当的情况下应该共享代码。例如,当用户使用方向键导航的时候,一些代码会更新相应元素的 `tabindex` 或风格,用鼠标点击也应该有同样的变化。 -

    确保键盘可以激活元素

    +#### 确保键盘可以激活元素 -

    要确保键盘可以激活元素,所有鼠标事件的绑定也同时要绑定到键盘事件上。例如,为了确保回车键能激活某个元素,如果你使用了 onclick="DoSomething()", 你需要把 doSomething() 绑定到 key down 事件上:onkeydown="return event.keyCode != 13 || doSomething();".

    +要确保键盘可以激活元素,所有鼠标事件的绑定也同时要绑定到键盘事件上。例如,为了确保回车键能激活某个元素,如果你使用了 `onclick="DoSomething()",` 你需要把 `doSomething()` 绑定到 key down 事件上:`onkeydown="return event.keyCode != 13 || doSomething();"`. -

    不要使用 :focus 来设置焦点的样式(如果要兼容 IE7 及更早版本)

    +#### 不要使用 :focus 来设置焦点的样式(如果要兼容 IE7 及更早版本) -

    IE 7 及更早版本不支持 :focus 伪选择器,不要用它来设置焦点的样式。替代方法是在 onfocus 事件处理程序中设置样式,例如,添加一个 CSS 样式到 class 属性中。

    +IE 7 及更早版本不支持 `:focus` 伪选择器,不要用它来设置焦点的样式。替代方法是在 `onfocus `事件处理程序中设置样式,例如,添加一个 CSS 样式到 `class` 属性中。 -

    始终用程序为 tabindex="-1" 的项和元素设置焦点样式

    +#### 始终用程序为 tabindex="-1" 的项和元素设置焦点样式 -

    IE 不会自动为 tabindex="-1" 的元素绘制聚焦框。可以选择一种方法解决,比如通过 this.style.backgroundColor="gray" 改变选中项目的背景颜色,或通过 this.style.border="1px dotted invert" 添加虚线边框。如果使用虚线边框的,需要确保这些元素有隐含的一象素边框,这样,当聚焦的边框样式应用上去的时候,元素的大小才不会改变(边框会占用空间,而 IE 没有实现 CSS outline)。

    +IE 不会自动为` tabindex="-1" `的元素绘制聚焦框。可以选择一种方法解决,比如通过 `this.style.backgroundColor="gray"` 改变选中项目的背景颜色,或通过 `this.style.border="1px dotted invert"` 添加虚线边框。如果使用虚线边框的,需要确保这些元素有隐含的一象素边框,这样,当聚焦的边框样式应用上去的时候,元素的大小才不会改变(边框会占用空间,而 IE 没有实现 CSS outline)。 -

    阻止浏览器的按键事件处理

    +#### 阻止浏览器的按键事件处理 -

    如果你用自己的插件处理按键事件,可以通过事件处理程序的返回值来阻止浏览器的缺省处理(例如,响应方向键的滚动)。如果你的事件处理程序返回 false,事件就不会冒泡到处理程序外面。

    +如果你用自己的插件处理按键事件,可以通过事件处理程序的返回值来阻止浏览器的缺省处理(例如,响应方向键的滚动)。如果你的事件处理程序返回 `false`,事件就不会冒泡到处理程序外面。 -

    例如:

    +例如: -
    <span tabindex="-1" onkeydown="return handleKeyDown();">
    + -

    如果 handleKeyDown() 返回 false,将会结束事件处理,阻止浏览器继续处理按键行为。

    +如果 `handleKeyDown()` 返回 `false`,将会结束事件处理,阻止浏览器继续处理按键行为。 -

    不要认为按键连发(repeat)有一致性

    +#### 不要认为按键连发(repeat)有一致性 -

    非常不幸,onkeydown 连发或不连发取决于代码执行的浏览器和操作系统。

    +非常不幸,`onkeydown 连发或不连发`取决于代码执行的浏览器和操作系统。 diff --git a/files/zh-cn/web/accessibility/mobile_accessibility_checklist/index.md b/files/zh-cn/web/accessibility/mobile_accessibility_checklist/index.md index 9720aee45556dc..2e0815dbf46498 100644 --- a/files/zh-cn/web/accessibility/mobile_accessibility_checklist/index.md +++ b/files/zh-cn/web/accessibility/mobile_accessibility_checklist/index.md @@ -9,91 +9,66 @@ tags: - 移动端 translation_of: Web/Accessibility/Mobile_accessibility_checklist --- -
    -

    该文档为移动应用开发者提供一个无障碍需求的简要清单。此文档将随着技术模式的发展而不断演进。

    -
    - -

    颜色

    - -
      -
    • 颜色对比度必须遵循 WCAG 2.0 AA 等级需求: - -
        -
      • 普通文本的对比率为 4.5:1(小于 18 磅或黑体 14 磅)
      • -
      • 大文本对比率为 3:1(大于等于 18 磅或黑体 14 磅)【译者注:字体单位为 point、PT】
      • -
      -
    • -
    • 颜色传递的信息,必须也通过其它方式标明(例如,链接文本中的下划线)
    • -
    - -
    -

    备注: Jon Snook 开发的 颜色对比度检查器 - Colour Contrast Checker 可以轻松检查前景和背景的对比度。同样,Tanaguru Contrast-Finder 这个工具能做类似的检查,并且会推荐你考虑使用类似的更好的对比度

    -
    - -

    可视化

    - -
      -
    • 使用用于隐藏内容的技巧处理视觉效果,例如,不透明度为零,z-index 规则,离屏位置。
    • -
    • 当前可见的屏幕之外的内容,必须是不可见的。(特别是单一页面应用中包含多个卡片选项): -
        -
      • 使用 hidden 特性或 visibilitydisplay 样式属性。
      • -
      • 除非不可避免,不应该使用 aria-hidden 特性。
      • -
      -
    • -
    - -

    焦点

    - -
      -
    • 所有可激活元素必须可被聚焦: - -
        -
      • 标准控件,如链接、按钮、表单域默认可被聚焦。
      • -
      • 非标准控件必须分配给它们一个适当的 ARIA Rolebuttonlink 或者 checkbox
      • -
      -
    • -
    • 焦点应该是有逻辑顺序,且方式一致。
    • -
    - -

    文本等效

    - -
      -
    • 应用中,每个展示的非文本元素都必须提供等效文本。 - -
        -
      • 恰当的位置使用 alttitle (请参考 Steve Faulkner 的帖子 - 关于 Using the HTML title attribute 。)
      • -
      • 如果上面的特性不适用,使用恰当的ARIA Properties,比如 aria-label, aria-labelledby, 或 aria-describedby.
      • -
      -
    • -
    • 必须避免文本图像。
    • -
    • 所有的表单控件必须有标签 ({{ htmlelement("label") }} elements) ,以便于读屏用户的使用。
    • -
    - -

    状态处理

    - -
      -
    • 标准控件,如单选按钮和复选是通过操作系统处理的,而其它自定义控件的状态改变需要通过 ARIA States ,如 aria-checked, aria-disabled, aria-selected, aria-expanded,和 aria-pressed.
    • -
    - -

    General Guidelines 常规指南

    - -
      -
    • 应用必须提供标题。【译者注:此处的标题为 title】
    • -
    • 标题不能破坏层次结构。【译者注:此处的标题为 headings】 -
      <h1>Top level heading</h1>
      -  <h2>Secondary heading</h2>
      -  <h2>Another secondary heading</h2>
      -    <h3>Low level heading</h3>
      -
    • -
    • 应使用 ARIA Landmark Roles 描述应用或文档的结构,如 banner, complementary, contentinfo, main, navigation, search.
    • -
    • 触摸事件处理器,只能通过 touchend 事件触发。
    • -
    • 触摸目标必须足够大,方便用户交互 (参考 BBC Mobile Accessibility Guidelines 关于触摸目标尺寸的指南)
    • -
    - -
    -

    备注: Tanaguru's automated accessibility testing service 提供一个有效的方法,排查网页上的,或者是可安装的 Web 应用中无障碍问题(如,Firefox OS)。tanaguru.org,你可以参与该项目或者发现更多技术实现。

    -
    - -
    -

    备注: The 该文档的最初版本 - original version of this document 是由 Yura Zenevich 完成。

    -
    +该文档为移动应用开发者提供一个无障碍需求的简要清单。此文档将随着技术模式的发展而不断演进。 + +## 颜色 + +- 颜色对比度**必须**遵循 [WCAG 2.0](http://www.w3.org/TR/WCAG/) AA 等级需求: + + - 普通文本的对比率为 4.5:1(小于 18 磅或黑体 14 磅) + - 大文本对比率为 3:1(大于等于 18 磅或黑体 14 磅)【译者注:字体单位为 point、PT】 + +- 颜色传递的信息,**必须**也通过其它方式标明(例如,链接文本中的下划线) + +> **备注:** Jon Snook 开发的 [颜色对比度检查器 - Colour Contrast Checker](http://snook.ca/technical/colour_contrast/colour.html) 可以轻松检查前景和背景的对比度。同样,[Tanaguru Contrast-Finder](http://contrast-finder.tanaguru.com/) 这个工具能做类似的检查,并且会推荐你考虑使用类似的更好的对比度 + +## 可视化 + +- **不**使用用于隐藏内容的技巧处理视觉效果,例如,不透明度为零,z-index 规则,离屏位置。 +- 当前可见的屏幕之外的内容,**必须**是不可见的。(特别是单一页面应用中包含多个卡片选项): + + - **使用** `hidden` 特性或 `visibility` 或 `display` 样式属性。 + - 除非不可避免,**不应该**使用 `aria-hidden` 特性。 + +## 焦点 + +- 所有可激活元素**必须**可被聚焦: + + - 标准控件,如链接、按钮、表单域默认可被聚焦。 + - 非标准控件**必须**分配给它们一个适当的 [ARIA Role](http://www.w3.org/TR/wai-aria/roles) 如 `button`,`link` 或者 `checkbox`。 + +- 焦点应该是有逻辑顺序,且方式一致。 + +## 文本等效 + +- 应用中,每个展示的非文本元素都**必须**提供等效文本。 + + - 恰当的位置使用 _alt_ 和 _title_ (请参考 Steve Faulkner 的帖子 - 关于 [Using the HTML title attribute](http://blog.paciellogroup.com/2013/01/using-the-html-title-attribute-updated/) 。) + - 如果上面的特性不适用,使用恰当的[ARIA Properties](http://www.w3.org/WAI/PF/aria/states_and_properties#global_states_header),比如 `aria-label`, `aria-labelledby`, 或 `aria-describedby`. + +- **必须**避免文本图像。 +- 所有的表单控件**必须**有标签 ({{ htmlelement("label") }} elements) ,以便于读屏用户的使用。 + +## 状态处理 + +- 标准控件,如单选按钮和复选是通过操作系统处理的,而其它自定义控件的状态改变需要通过 [ARIA States](http://www.w3.org/TR/wai-aria/states_and_properties#attrs_widgets_header) ,如` aria-checked`, `aria-disabled`, `aria-selected`, `aria-expanded`,和 `aria-pressed`. + +## General Guidelines 常规指南 + +- 应用必须提供标题。【译者注:此处的标题为 title】 +- 标题**不能**破坏层次结构。【译者注:此处的标题为 headings】 + + ```html +

    Top level heading

    +

    Secondary heading

    +

    Another secondary heading

    +

    Low level heading

    + ``` + +- 应使用 [ARIA Landmark Roles](http://www.w3.org/TR/wai-aria/roles#landmark_roles_header) 描述应用或文档的结构,如 `banner`, `complementary`, `contentinfo`, `main`, `navigation`, `search`. +- 触摸事件处理器,只能通过 `touchend` 事件触发。 +- 触摸目标必须足够大,方便用户交互 (参考 [BBC Mobile Accessibility Guidelines](http://www.bbc.co.uk/guidelines/futuremedia/accessibility/mobile/design/touch-target-size) 关于触摸目标尺寸的指南) + +> **备注:** [Tanaguru's automated accessibility testing service](http://www.tanaguru.com/) 提供一个有效的方法,排查网页上的,或者是可安装的 Web 应用中无障碍问题(如,Firefox OS)。[tanaguru.org](http://tanaguru.org/),你可以参与该项目或者发现更多技术实现。 + +> **备注:** The 该文档的最初版本 - [original version of this document](http://yzen.github.io/firefoxos/2014/04/30/mobile-accessibility-checklist.html) 是由 [Yura Zenevich](http://yzen.github.io/) 完成。 From a99d9864ef0352c0a6a2ccc625c88294dc664709 Mon Sep 17 00:00:00 2001 From: A1lo Date: Mon, 18 Jul 2022 22:04:07 +0800 Subject: [PATCH 064/100] remove some `{{page}}` macros (#6947) modified: files/zh-cn/web/api/notification/click_event/index.html modified: files/zh-cn/web/api/notification/close_event/index.html modified: files/zh-cn/web/api/notification/error_event/index.html modified: files/zh-cn/web/api/notification/show_event/index.html modified: files/zh-cn/web/javascript/reference/global_objects/intl/listformat/index.html --- .../api/notification/click_event/index.html | 2 +- .../api/notification/close_event/index.html | 6 +--- .../api/notification/error_event/index.html | 22 ++++++------- .../api/notification/show_event/index.html | 6 +--- .../global_objects/intl/listformat/index.html | 32 ++++++------------- 5 files changed, 23 insertions(+), 45 deletions(-) diff --git a/files/zh-cn/web/api/notification/click_event/index.html b/files/zh-cn/web/api/notification/click_event/index.html index f5f29a93462800..dca003eecbff4b 100644 --- a/files/zh-cn/web/api/notification/click_event/index.html +++ b/files/zh-cn/web/api/notification/click_event/index.html @@ -34,7 +34,7 @@

    Specifications

    Browser compatibility

    -

    {{Page("/en-US/docs/Web/API/Notification","Browser compatibility")}}

    +{{Compat}}

    See also

    diff --git a/files/zh-cn/web/api/notification/close_event/index.html b/files/zh-cn/web/api/notification/close_event/index.html index 606ff56fccad93..dd02db21535bd2 100644 --- a/files/zh-cn/web/api/notification/close_event/index.html +++ b/files/zh-cn/web/api/notification/close_event/index.html @@ -19,13 +19,9 @@

    Syntax

    Notification.onclose = function() { ... };
     
    -

    Specifications

    - -

    This event handler is no longer listed in the Notifications API spec.

    -

    Browser compatibility

    -

    {{Page("/en-US/docs/Web/API/Notification","Browser compatibility")}}

    +{{Compat}}

    See also

    diff --git a/files/zh-cn/web/api/notification/error_event/index.html b/files/zh-cn/web/api/notification/error_event/index.html index 2364774387c6d6..c848abcea460a2 100644 --- a/files/zh-cn/web/api/notification/error_event/index.html +++ b/files/zh-cn/web/api/notification/error_event/index.html @@ -2,7 +2,7 @@ title: Notification.onerror slug: Web/API/Notification/error_event tags: - - Notification.onerror +- Notification.onerror translation_of: Web/API/Notification/onerror original_slug: Web/API/notification/onerror --- @@ -10,31 +10,31 @@

    Summary

    -

    {{domxref("Notification")}} 接口的 onerror 属性指定一个事件侦听器来接收 {{event("error")}} 事件。

    +

    {{domxref("Notification")}} 接口的 onerror 属性指定一个事件侦听器来接收 {{event("error")}} 事件。

    当一个 {{domxref("Notification")}} 发生错误时,会发生这些事件(在许多情况下,一个错误阻止显示通知)。

    -

    -

    Syntax

    Notification.onerror = EventListener;

    Value

    -

    A {{jsxref("function")}} which serves as the event handler for the {{event("error")}} event. When an error occurs, the specified function will be called. If null, no error handler is in effect.

    +

    A {{jsxref("function")}} which serves as the event handler for the {{event("error")}} event. When an error occurs, + the specified function will be called. If null, no error handler is in effect.

    -

    Specifications

    +

    规范

    {{Specifications}} -

    Browser compatibility

    +

    浏览器兼容性

    -

    {{Page("/en-US/docs/Web/API/Notification","Browser compatibility")}}

    +{{Compat}}

    See also

    +
  • {{domxref("Notification")}}
  • +
  • Using the + Notifications API
  • + \ No newline at end of file diff --git a/files/zh-cn/web/api/notification/show_event/index.html b/files/zh-cn/web/api/notification/show_event/index.html index 9b4bda7ff4eb22..2b23b87cfaff64 100644 --- a/files/zh-cn/web/api/notification/show_event/index.html +++ b/files/zh-cn/web/api/notification/show_event/index.html @@ -19,13 +19,9 @@

    Syntax

    Notification.onshow = function() { ... };
     
    -

    Specifications

    - -

    This event handler is no longer listed in the Notifications API spec.

    -

    Browser compatibility

    -

    {{Page("/en-US/docs/Web/API/Notification","Browser compatibility")}}

    +{{Compat}}

    See also

    diff --git a/files/zh-cn/web/javascript/reference/global_objects/intl/listformat/index.html b/files/zh-cn/web/javascript/reference/global_objects/intl/listformat/index.html index dfb77e7b8854b9..8a56ddf8b78f82 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/intl/listformat/index.html +++ b/files/zh-cn/web/javascript/reference/global_objects/intl/listformat/index.html @@ -85,31 +85,17 @@

    使用 formatToParts

    // > [ { "type": "element", "value": "Motorcycle" }, { "type": "literal", "value": ", " }, { "type": "element", "value": "Bus" }, { "type": "literal", "value": ", and " }, { "type": "element", "value": "Car" } ];
    -

    说明

    +

    规范

    - - - - - - - - - - - - - -
    SpecificationStatusComment
    Intl.ListFormat proposalStage 3 
    +{{Specifications}} -

    浏览器支持

    +

    浏览器兼容性

    -
    +{{Compat}} +

    参见

    -

    {{Compat("javascript.builtins.Intl.ListFormat")}}

    -
    - -

    参考地址

    - -
    {{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl', 'See_also')}}
    + From 221a42e2ca2c7fa2daa77ab41ea48da1f51ff3c0 Mon Sep 17 00:00:00 2001 From: A1lo Date: Mon, 18 Jul 2022 22:06:12 +0800 Subject: [PATCH 065/100] replace standard-table with macros for zh-CN (Part 31) (#6939) --- .../web/css/mask-border-width/index.html | 23 ++----- files/zh-cn/web/css/mask-image/index.html | 21 +----- files/zh-cn/web/css/mask-mode/index.html | 17 +---- files/zh-cn/web/css/mask-repeat/index.html | 21 +----- files/zh-cn/web/css/max-height/index.html | 27 +------- files/zh-cn/web/css/max-width/index.html | 28 +------- files/zh-cn/web/css/max/index.html | 17 +---- files/zh-cn/web/css/media_queries/index.html | 43 +----------- files/zh-cn/web/css/min-height/index.html | 27 +------- files/zh-cn/web/css/min-width/index.html | 35 +--------- files/zh-cn/web/css/min/index.html | 21 +----- files/zh-cn/web/css/minmax/index.html | 17 +---- files/zh-cn/web/css/mix-blend-mode/index.html | 17 +---- files/zh-cn/web/css/number/index.html | 27 +------- files/zh-cn/web/css/object-fit/index.html | 22 +------ .../zh-cn/web/css/object-position/index.html | 17 +---- files/zh-cn/web/css/offset/index.html | 15 +---- files/zh-cn/web/css/opacity/index.html | 36 +--------- files/zh-cn/web/css/order/index.html | 17 +---- files/zh-cn/web/css/outline-color/index.html | 27 +------- files/zh-cn/web/css/outline-offset/index.html | 22 +------ files/zh-cn/web/css/outline-style/index.html | 26 +------- files/zh-cn/web/css/outline-width/index.html | 27 +------- files/zh-cn/web/css/outline/index.html | 22 +------ .../zh-cn/web/css/overflow-anchor/index.html | 24 +------ files/zh-cn/web/css/overflow-block/index.html | 17 +---- files/zh-cn/web/css/overflow-x/index.html | 25 ++----- files/zh-cn/web/css/overflow-y/index.html | 25 ++----- files/zh-cn/web/css/overflow/index.html | 27 +------- .../web/css/overscroll-behavior-x/index.html | 23 +------ .../web/css/overscroll-behavior-y/index.html | 21 +----- .../web/css/overscroll-behavior/index.html | 17 +---- files/zh-cn/web/css/padding-bottom/index.html | 32 +-------- .../web/css/padding-inline-start/index.html | 17 +---- files/zh-cn/web/css/padding-left/index.html | 27 +------- files/zh-cn/web/css/padding-right/index.html | 32 +-------- files/zh-cn/web/css/padding-top/index.html | 42 ++---------- files/zh-cn/web/css/padding/index.html | 27 +------- .../zh-cn/web/css/page-break-after/index.html | 27 +------- .../web/css/page-break-inside/index.html | 30 +-------- files/zh-cn/web/css/paint-order/index.html | 21 +----- files/zh-cn/web/css/percentage/index.html | 27 +------- .../web/css/perspective-origin/index.html | 17 +---- files/zh-cn/web/css/perspective/index.html | 17 +---- files/zh-cn/web/css/place-content/index.html | 17 +---- files/zh-cn/web/css/place-items/index.html | 17 +---- files/zh-cn/web/css/pointer-events/index.html | 17 +---- files/zh-cn/web/css/position/index.html | 22 +------ files/zh-cn/web/css/position_value/index.html | 36 +--------- files/zh-cn/web/css/pseudo-classes/index.html | 65 +------------------ .../zh-cn/web/css/pseudo-elements/index.html | 9 ++- files/zh-cn/web/css/quotes/index.html | 22 +------ files/zh-cn/web/css/ratio/index.html | 29 ++------- files/zh-cn/web/css/repeat/index.html | 17 +---- files/zh-cn/web/css/resize/index.html | 22 +------ files/zh-cn/web/css/resolution/index.html | 27 +------- files/zh-cn/web/css/resolved_value/index.html | 17 +---- files/zh-cn/web/css/rotate/index.html | 17 +---- files/zh-cn/web/css/scale/index.html | 17 +---- .../zh-cn/web/css/scroll-behavior/index.html | 17 +---- .../web/css/scroll-margin-top/index.html | 17 +---- files/zh-cn/web/css/scroll-margin/index.html | 17 +---- .../zh-cn/web/css/scroll-snap-type/index.html | 17 +---- .../zh-cn/web/css/scrollbar-color/index.html | 21 +----- .../zh-cn/web/css/scrollbar-width/index.html | 29 ++------- files/zh-cn/web/css/selector_list/index.html | 24 +------ .../web/css/shape-image-threshold/index.html | 17 +---- files/zh-cn/web/css/shape-margin/index.html | 17 +---- files/zh-cn/web/css/shape-outside/index.html | 21 +----- files/zh-cn/web/css/specificity/index.html | 34 +--------- files/zh-cn/web/css/string/index.html | 27 +------- files/zh-cn/web/css/tab-size/index.html | 17 +---- files/zh-cn/web/css/table-layout/index.html | 23 +------ .../zh-cn/web/css/text-align-last/index.html | 17 +---- files/zh-cn/web/css/text-align/index.html | 27 +------- 75 files changed, 126 insertions(+), 1634 deletions(-) diff --git a/files/zh-cn/web/css/mask-border-width/index.html b/files/zh-cn/web/css/mask-border-width/index.html index 549a323a210756..db39c70e8a7b68 100644 --- a/files/zh-cn/web/css/mask-border-width/index.html +++ b/files/zh-cn/web/css/mask-border-width/index.html @@ -60,27 +60,12 @@

    Formal syntax

    {{csssyntax}} -

    Specifications

    - - - - - - - - - - - - - - - - -
    SpecificationStatusComment
    {{SpecName("CSS Masks", "#propdef-mask-border-width", "mask-border-width")}}{{Spec2("CSS Masks")}}Initial definition
    +

    规范

    + +{{Specifications}}

    {{cssinfo}}

    浏览器兼容性

    -

    待定

    +{{Compat}} diff --git a/files/zh-cn/web/css/mask-image/index.html b/files/zh-cn/web/css/mask-image/index.html index 47c01099fb4401..a1989cbe5e55f2 100644 --- a/files/zh-cn/web/css/mask-image/index.html +++ b/files/zh-cn/web/css/mask-image/index.html @@ -67,24 +67,9 @@

    HTML

    {{EmbedLiveSample('例子', '100px', '100px')}}

    -

    Specifications

    - - - - - - - - - - - - - - - - -
    SpecificationStatusComment
    {{SpecName("CSS Masks", "#the-mask-image", "mask-image")}}{{Spec2("CSS Masks")}}Initial definition
    +

    规范

    + +{{Specifications}}

    浏览器兼容性

    diff --git a/files/zh-cn/web/css/mask-mode/index.html b/files/zh-cn/web/css/mask-mode/index.html index 1a2988e50f6b38..3bbd560d3f6b2f 100644 --- a/files/zh-cn/web/css/mask-mode/index.html +++ b/files/zh-cn/web/css/mask-mode/index.html @@ -90,22 +90,7 @@

    结果

    规范

    - - - - - - - - - - - - - - - -
    规范状态说明
    {{SpecName("CSS Masks", "#the-mask-mode", "mask-mode")}}{{Spec2("CSS Masks")}}Initial definition
    +{{Specifications}}

    浏览器兼容性

    diff --git a/files/zh-cn/web/css/mask-repeat/index.html b/files/zh-cn/web/css/mask-repeat/index.html index 2e125af5593d62..841cb984688075 100644 --- a/files/zh-cn/web/css/mask-repeat/index.html +++ b/files/zh-cn/web/css/mask-repeat/index.html @@ -162,25 +162,8 @@

    使用多个遮罩图片

    规范

    - - - - - - - - - - - - - - - -
    规范状态备注
    {{SpecName("CSS Masks", "#the-mask-repeat", "mask-repeat")}}{{Spec2("CSS Masks")}}Initial definition
    +{{Specifications}}

    浏览器兼容性

    - - -

    {{Compat("css.properties.mask-repeat")}}

    +

    {{Compat}}

    diff --git a/files/zh-cn/web/css/max-height/index.html b/files/zh-cn/web/css/max-height/index.html index 879d399c44e686..b5d5b26e14e8cb 100644 --- a/files/zh-cn/web/css/max-height/index.html +++ b/files/zh-cn/web/css/max-height/index.html @@ -74,32 +74,7 @@

    Accessibility concerns

    Specifications

    - - - - - - - - - - - - - - - - - - - - - - - - - -
    SpecificationStatusComment
    {{SpecName('CSS4 Sizing', '#width-height-keywords', 'max-height')}}{{Spec2('CSS4 Sizing')}}
    {{SpecName('CSS3 Sizing', '#width-height-keywords', 'max-height')}}{{Spec2('CSS3 Sizing')}}Adds the max-content, min-content, fit-content keywords.
    {{SpecName('CSS2.1', 'visudet.html#min-max-heights', 'max-height')}}{{ Spec2('CSS2.1') }}Initial definition.
    +{{Specifications}}

    {{cssinfo}}

    diff --git a/files/zh-cn/web/css/max-width/index.html b/files/zh-cn/web/css/max-width/index.html index 11ea4ea6269218..034a8c288b3ce4 100644 --- a/files/zh-cn/web/css/max-width/index.html +++ b/files/zh-cn/web/css/max-width/index.html @@ -105,33 +105,7 @@

    例子

    规范

    - - - - - - - - - - - - - - - - - - - - - - - - - -
    SpecificationStatusComment
    {{ SpecName('CSS3 Sizing', '#width-height-keywords', 'max-width') }}{{ Spec2('CSS3 Sizing') }}Adds the max-content, min-content, fit-content, and fill-available keywords.
    - Both CSS3 Box and CSS3 Writing Modes drafts defined at some point these keywords. These drafts are superseded by this spec.
    {{ SpecName('CSS3 Transitions', '#animatable-css', 'max-width') }}{{ Spec2('CSS3 Transitions') }}Defines max-width as animatable.
    {{ SpecName('CSS2.1', 'visudet.html#min-max-widths', 'max-width') }}{{ Spec2('CSS2.1') }}Initial definition.
    +{{Specifications}}

    浏览器兼容性

    diff --git a/files/zh-cn/web/css/max/index.html b/files/zh-cn/web/css/max/index.html index 1249008231ddac..8954020605be92 100644 --- a/files/zh-cn/web/css/max/index.html +++ b/files/zh-cn/web/css/max/index.html @@ -88,22 +88,7 @@

    无障碍

    规范

    - - - - - - - - - - - - - - - -
    SpecificationStatusComment
    {{SpecName("CSS4 Values", "#calc-notation", "max()")}}{{Spec2("CSS4 Values")}}Initial definition
    +{{Specifications}}

    浏览器兼容性

    diff --git a/files/zh-cn/web/css/media_queries/index.html b/files/zh-cn/web/css/media_queries/index.html index 05bdc3acce87f6..44c219ddc65e8a 100644 --- a/files/zh-cn/web/css/media_queries/index.html +++ b/files/zh-cn/web/css/media_queries/index.html @@ -58,50 +58,11 @@

    指南

    规范

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    规范状态备注
    {{SpecName('CSS5 Media Queries')}}{{Spec2('CSS5 Media Queries')}}
    {{SpecName('CSS3 Conditional')}}{{Spec2('CSS3 Conditional')}}
    {{SpecName('CSS4 Media Queries')}}{{Spec2('CSS4 Media Queries')}}
    {{SpecName('CSS3 Media Queries')}}{{Spec2('CSS3 Media Queries')}}
    {{SpecName('CSS2.1', 'media.html')}}{{Spec2('CSS2.1')}}Initial definition
    +{{Specifications}}

    浏览器兼容性

    -

    @media rule

    - - - -

    {{Compat("css.at-rules.media")}}

    +

    {{Compat}}

    参见

    diff --git a/files/zh-cn/web/css/min-height/index.html b/files/zh-cn/web/css/min-height/index.html index e5e7c1bf60e515..c37df94d4f05ee 100644 --- a/files/zh-cn/web/css/min-height/index.html +++ b/files/zh-cn/web/css/min-height/index.html @@ -70,32 +70,7 @@

    Setting min-height

    规范

    - - - - - - - - - - - - - - - - - - - - - - - - - -
    SpecificationStatusComment
    {{SpecName('CSS4 Sizing', '#width-height-keywords', 'min-height')}}{{Spec2('CSS4 Sizing')}}
    {{SpecName('CSS3 Sizing', '#width-height-keywords', 'min-height')}}{{Spec2('CSS3 Sizing')}}Adds the max-content, min-content, fit-content keywords.
    {{SpecName('CSS2.1', 'visudet.html#min-max-heights', 'min-height')}}{{Spec2('CSS2.1')}}Initial definition.
    +{{Specifications}}

    浏览器兼容性

    diff --git a/files/zh-cn/web/css/min-width/index.html b/files/zh-cn/web/css/min-width/index.html index ab800338830268..4d88de17b7d606 100644 --- a/files/zh-cn/web/css/min-width/index.html +++ b/files/zh-cn/web/css/min-width/index.html @@ -66,42 +66,11 @@

    示例

    规范

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    SpecificationStatusComment
    {{ SpecName('CSS3 Sizing', '#width-height-keywords', 'min-width') }}{{ Spec2('CSS3 Sizing') }}增加 max-contentmin-contentfit-content,和 fill-available 关键字。
    - CSS3 Box 与 CSS3 Writing Modes 两份草案在某种程度上定义了这些关键字。本草案取代了这些草案。
    {{ SpecName('CSS3 Flexbox', '#min-auto', 'min-width') }}{{ Spec2('CSS3 Flexbox') }}早期的修订规范 增加了 auto 关键字并将其作为初始值。然而 CSSWG 随后重置了这一变更。直至 2013 年 3 月 29 日,最新的 编辑草案 没有对 min-width 属性做任何修改 (也就是说 auto 值已经不被推荐)。
    {{ SpecName('CSS3 Transitions', '#animatable-css', 'min-width') }}{{ Spec2('CSS3 Transitions') }}定义 min-width 为动画属性。
    {{ SpecName('CSS2.1', 'visudet.html#min-max-widths', 'min-width') }}{{ Spec2('CSS2.1') }}初始定义。
    +{{Specifications}}

    浏览器兼容性

    -

    {{Compat("css.properties.min-width")}}

    - -
    +

    {{Compat}}

    See also

    diff --git a/files/zh-cn/web/css/min/index.html b/files/zh-cn/web/css/min/index.html index 5c3cbc733f6da9..b99b276b0d3347 100644 --- a/files/zh-cn/web/css/min/index.html +++ b/files/zh-cn/web/css/min/index.html @@ -96,24 +96,9 @@

    无障碍问题

  • Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0
  • -

    说明

    - - - - - - - - - - - - - - - - -
    SpecificationStatusComment
    {{SpecName("CSS4 Values", "#calc-notation", "min()")}}{{Spec2("CSS4 Values")}}Initial definition.
    +

    规范

    + +{{Specifications}}

    Browser compatibility

    diff --git a/files/zh-cn/web/css/minmax/index.html b/files/zh-cn/web/css/minmax/index.html index 0e03c822facc7b..019809140c758a 100644 --- a/files/zh-cn/web/css/minmax/index.html +++ b/files/zh-cn/web/css/minmax/index.html @@ -111,22 +111,7 @@

    Result

    规范

    - - - - - - - - - - - - - - - -
    规范状态备注
    {{SpecName("CSS Grid", "#valdef-grid-template-columns-minmax", "minmax()")}}{{Spec2("CSS Grid")}}初始定义
    +{{Specifications}}

    浏览器兼容性

    diff --git a/files/zh-cn/web/css/mix-blend-mode/index.html b/files/zh-cn/web/css/mix-blend-mode/index.html index 41146636e4bfe4..abdc3506768527 100644 --- a/files/zh-cn/web/css/mix-blend-mode/index.html +++ b/files/zh-cn/web/css/mix-blend-mode/index.html @@ -629,22 +629,7 @@

    Result

    规范

    - - - - - - - - - - - - - - - -
    规范状态注释
    {{ SpecName('Compositing', '#mix-blend-mode', 'mix-blend-mode') }}{{ Spec2('Compositing') }}Initial specification.
    +{{Specifications}}

    浏览器兼容性

    diff --git a/files/zh-cn/web/css/number/index.html b/files/zh-cn/web/css/number/index.html index 22223620a3902a..b6ac506770eafd 100644 --- a/files/zh-cn/web/css/number/index.html +++ b/files/zh-cn/web/css/number/index.html @@ -40,32 +40,7 @@

    示例

    规范

    - - - - - - - - - - - - - - - - - - - - - - - - - -
    规范状态注释
    {{SpecName('CSS3 Values', '#numbers', '<number>')}}{{Spec2('CSS3 Values')}}与 CSS Level 2 (Revision 1) 没有明显变化
    {{SpecName('CSS2.1', 'syndata.html#numbers', '<number>')}}{{Spec2('CSS2.1')}}Explicitly defined
    {{SpecName('CSS1', '', '<number>')}}{{Spec2('CSS1')}}Implicitly defined
    +{{Specifications}}

    浏览器兼容性

    diff --git a/files/zh-cn/web/css/object-fit/index.html b/files/zh-cn/web/css/object-fit/index.html index e061731e5c3102..eec7fe60ad8544 100644 --- a/files/zh-cn/web/css/object-fit/index.html +++ b/files/zh-cn/web/css/object-fit/index.html @@ -129,27 +129,7 @@

    结果

    规范

    - - - - - - - - - - - - - - - - - - - - -
    规范状态备注
    {{SpecName('CSS4 Images', '#the-object-fit', 'object-fit')}}{{Spec2('CSS4 Images')}} 
    {{SpecName('CSS3 Images', '#the-object-fit', 'object-fit')}}{{Spec2('CSS3 Images')}}初始定义
    +{{Specifications}}

    浏览器兼容性

    diff --git a/files/zh-cn/web/css/object-position/index.html b/files/zh-cn/web/css/object-position/index.html index 5f834937d14984..8fa9e37ac876c9 100644 --- a/files/zh-cn/web/css/object-position/index.html +++ b/files/zh-cn/web/css/object-position/index.html @@ -86,22 +86,7 @@

    输出

    规范

    - - - - - - - - - - - - - - - -
    SpecificationStatusComment
    {{SpecName('CSS3 Images', '#the-object-position', 'object-position')}}{{Spec2('CSS3 Images')}}Initial definition.
    +{{Specifications}}

    {{cssinfo}}

    diff --git a/files/zh-cn/web/css/offset/index.html b/files/zh-cn/web/css/offset/index.html index 83fa18d2e0c984..e66a2f0469d36b 100644 --- a/files/zh-cn/web/css/offset/index.html +++ b/files/zh-cn/web/css/offset/index.html @@ -76,20 +76,7 @@

    Result

    规格

    - - - - - - - - - - - - - -
    规格使用状态注释
    {{SpecName('Motion Path Level 1', '#offset-shorthand', 'offset')}}{{Spec2('Motion Path Level 1')}}Initial definition
    +{{Specifications}}

    浏览器兼容性

    diff --git a/files/zh-cn/web/css/opacity/index.html b/files/zh-cn/web/css/opacity/index.html index bcd8de184d3b72..5f5a794c6bb433 100644 --- a/files/zh-cn/web/css/opacity/index.html +++ b/files/zh-cn/web/css/opacity/index.html @@ -109,43 +109,11 @@

    :hover 时 opacity 的不同

    规范

    - - - - - - - - - - - - - - - - - - - - -
    规范状态说明
    {{SpecName('CSS3 Transitions', '#animatable-css', 'opacity')}}{{Spec2('CSS3 Transitions')}}定义动态透明度
    {{SpecName('CSS3 Colors', '#propdef-opacity', 'opacity')}}{{Spec2('CSS3 Colors')}}初始定义
    +{{Specifications}}

    浏览器兼容性

    -
    {{Compat("css.properties.opacity", 2)}}
    - -
    - -
      -
    • 历史: 在 Mozilla 1.7 (Firefox 0.9) 版本 之前,“-moz-opacity 属性一直以一种非标准的方式在使用。在Firefox 0.9 版本中 ,这种行为得到了改变,这个属性被重命名为 opacity。从那以后,-moz-opacity属性仅作为opacity属性的别名而存在。
    • -
    • Gecko 1.9.1 (Firefox 3.5) 以后的版本不再支持 -moz-opacity属性 和 Javascript中的MozOpacity属性(Gecko13中删除),到目前为止,你应该使用opacity属性。
    • -
    • 在 9.0 版本之前,Internet Explore 浏览器不支持 opacity 属性,它宁愿使用私有滤镜代替。.
    • -
    • IE4 —IE9 支持下面的扩展形式: progid:DXImageTransform.Microsoft.Alpha(Opacity=xx).
    • -
    • IE8 引入了与“fliter 滤镜”同义的"-ms-filter" 属性。在 IE10 中不再支持这两个属性。
    • -
    • 和“-moz-opacity”属性相似,"-khtml-opacity"从2004年年初 (Safari 1.2 发布),已经不再受到支持。
      - Konqueror 从来不支持 -khtml-opacity 属性,从第四版开始,它一直支持 opacity 属性。
    • -
    +
    {{Compat}}

    阅读更多

    diff --git a/files/zh-cn/web/css/order/index.html b/files/zh-cn/web/css/order/index.html index 9bde35174a7030..04aefabdee7925 100644 --- a/files/zh-cn/web/css/order/index.html +++ b/files/zh-cn/web/css/order/index.html @@ -62,22 +62,7 @@

    例子

    规范

    - - - - - - - - - - - - - - - -
    SpecificationStatusComment
    {{ SpecName('CSS3 Flexbox', '#order-property', 'order') }}{{ Spec2('CSS3 Flexbox') }} 
    +{{Specifications}}

    浏览器兼容性

    diff --git a/files/zh-cn/web/css/outline-color/index.html b/files/zh-cn/web/css/outline-color/index.html index ce6bae91cf01ce..e6b1851c8033d3 100644 --- a/files/zh-cn/web/css/outline-color/index.html +++ b/files/zh-cn/web/css/outline-color/index.html @@ -75,32 +75,7 @@

    Accessibility concerns

    规范

    - - - - - - - - - - - - - - - - - - - - - - - - - -
    SpecificationStatusComment
    {{SpecName('CSS3 Basic UI', '#outline-color', 'outline-color')}}{{Spec2('CSS3 Basic UI')}}No change.
    {{SpecName('CSS3 Transitions', '#animatable-css', 'outline-color')}}{{Spec2('CSS3 Transitions')}}Defines outline-color as animatable.
    {{SpecName('CSS2.1', 'ui.html#propdef-outline-color', 'outline-color')}}{{Spec2('CSS2.1')}}Initial definition.
    +{{Specifications}}

    {{cssinfo}}

    diff --git a/files/zh-cn/web/css/outline-offset/index.html b/files/zh-cn/web/css/outline-offset/index.html index 7b46e6ee7f7e4b..61a1eac1806f14 100644 --- a/files/zh-cn/web/css/outline-offset/index.html +++ b/files/zh-cn/web/css/outline-offset/index.html @@ -64,27 +64,7 @@

    Examples

    Specifications

    - - - - - - - - - - - - - - - - - - - - -
    SpecificationStatusComment
    {{ SpecName('CSS3 Transitions', '#animatable-css', 'outline-offset') }}{{ Spec2('CSS3 Transitions') }}Defines outline-offset as animatable.
    {{ SpecName('CSS3 Basic UI', '#outline-offset', 'outline-offset') }}{{ Spec2('CSS3 Basic UI') }}Initial definition
    +{{Specifications}}

    Browser compatibility

    diff --git a/files/zh-cn/web/css/outline-style/index.html b/files/zh-cn/web/css/outline-style/index.html index 2987259dd12261..936f7fc16e4102 100644 --- a/files/zh-cn/web/css/outline-style/index.html +++ b/files/zh-cn/web/css/outline-style/index.html @@ -173,30 +173,8 @@

    CSS

    规范

    - - - - - - - - - - - - - - - - - - - - -
    SpecificationStatusComment
    {{SpecName('CSS3 Basic UI', '#outline-style', 'outline-style')}}{{Spec2('CSS3 Basic UI')}}Added auto value
    {{SpecName('CSS2.1', 'ui.html#propdef-outline-style', 'outline-style')}}{{Spec2('CSS2.1')}}Initial definition
    +{{Specifications}}

    浏览器兼容性

    -

    {{Compat("css.properties.outline-style")}}

    - -{{Compat("css.properties.outline-style")}} +{{Compat}} diff --git a/files/zh-cn/web/css/outline-width/index.html b/files/zh-cn/web/css/outline-width/index.html index 3dc8e46c4ae955..1240839423d408 100644 --- a/files/zh-cn/web/css/outline-width/index.html +++ b/files/zh-cn/web/css/outline-width/index.html @@ -97,32 +97,7 @@

    CSS

    Specifications

    - - - - - - - - - - - - - - - - - - - - - - - - - -
    SpecificationStatusComment
    {{SpecName('CSS3 Basic UI', '#outline-width', 'outline-width')}}{{Spec2('CSS3 Basic UI')}}No change.
    {{SpecName('CSS3 Transitions', '#animatable-css', 'outline-width')}}{{Spec2('CSS3 Transitions')}}Defines outline-width as animatable.
    {{SpecName('CSS2.1', 'ui.html#propdef-outline-width', 'outline-width')}}{{Spec2('CSS2.1')}}Initial definition.
    +{{Specifications}}

    {{cssinfo}}

    diff --git a/files/zh-cn/web/css/outline/index.html b/files/zh-cn/web/css/outline/index.html index 53a08fa41d0705..09ee4beacf893d 100644 --- a/files/zh-cn/web/css/outline/index.html +++ b/files/zh-cn/web/css/outline/index.html @@ -106,27 +106,7 @@

    可访问性考虑

    规范

    - - - - - - - - - - - - - - - - - - - - -
    规范状态注释
    {{SpecName('CSS3 Basic UI', '#outline', 'outline')}}{{Spec2('CSS3 Basic UI')}}No change.
    {{SpecName('CSS2.1', 'ui.html#propdef-outline', 'outline')}}{{Spec2('CSS2.1')}}Initial definition.
    +{{Specifications}}

    {{cssinfo}}

    diff --git a/files/zh-cn/web/css/overflow-anchor/index.html b/files/zh-cn/web/css/overflow-anchor/index.html index 5943c6ecfb278d..e8e503093221eb 100644 --- a/files/zh-cn/web/css/overflow-anchor/index.html +++ b/files/zh-cn/web/css/overflow-anchor/index.html @@ -46,27 +46,9 @@

    范例

    }
    -
      -
    -

    规范

    - - - - - - - - - - - - - - - -
    SpecificationStatusComment
    {{SpecName('CSS Scroll Anchoring', '#propdef-overflow-anchor', 'overflow-anchor')}}{{Spec2('CSS Scroll Anchoring')}}Initial definition.
    +{{Specifications}}

    {{cssinfo}}

    @@ -81,7 +63,3 @@

    See also

    - -
    -
    -
    diff --git a/files/zh-cn/web/css/overflow-block/index.html b/files/zh-cn/web/css/overflow-block/index.html index e05b80086383a2..34e1ae4fd237f5 100644 --- a/files/zh-cn/web/css/overflow-block/index.html +++ b/files/zh-cn/web/css/overflow-block/index.html @@ -105,22 +105,7 @@

    Result

    Specifications

    - - - - - - - - - - - - - - - -
    SpecificationStatusComment
    {{ SpecName('CSS3 Overflow', '#propdef-overflow-block', 'overflow-block') }}{{ Spec2('CSS3 Overflow') }}
    +{{Specifications}}
    {{cssinfo}}
    diff --git a/files/zh-cn/web/css/overflow-x/index.html b/files/zh-cn/web/css/overflow-x/index.html index fc514b7f2f3dc6..dd1fab78429ae5 100644 --- a/files/zh-cn/web/css/overflow-x/index.html +++ b/files/zh-cn/web/css/overflow-x/index.html @@ -46,26 +46,11 @@

    示例

    规范

    - - - - - - - - - - - - - - - -
    规范状态备注  
    {{ SpecName('CSS3 Box', '#overflow-x', 'overflow-x') }}{{ Spec2('CSS3 Box') }}
    - -

    浏览器支持

    - -

    {{Compat("css.properties.overflow-x")}}

    +{{Specifications}} + +

    浏览器兼容性

    + +

    {{Compat}}

    参见

    diff --git a/files/zh-cn/web/css/overflow-y/index.html b/files/zh-cn/web/css/overflow-y/index.html index 648f96d66eeab6..ab8fbf4bdfa0f1 100644 --- a/files/zh-cn/web/css/overflow-y/index.html +++ b/files/zh-cn/web/css/overflow-y/index.html @@ -123,26 +123,11 @@

    结果

    规范

    - - - - - - - - - - - - - - - -
    规范状态备注
    {{SpecName('CSS3 Box', '#overflow-y', 'overflow-y')}}{{Spec2('CSS3 Box')}}
    - -

    浏览器支持

    - -{{Compat("css.properties.overflow-y")}} +{{Specifications}} + +

    浏览器兼容性

    + +{{Compat}}

    参见

    diff --git a/files/zh-cn/web/css/overflow/index.html b/files/zh-cn/web/css/overflow/index.html index 9cd4d91ee43738..b69be2050d2f4e 100644 --- a/files/zh-cn/web/css/overflow/index.html +++ b/files/zh-cn/web/css/overflow/index.html @@ -148,32 +148,7 @@

    示例

    规范

    - - - - - - - - - - - - - - - - - - - - - - - - - -
    规范状态注释
    {{ SpecName('CSS3 Overflow', '#propdef-overflow', 'overflow') }}{{ Spec2('CSS3 Overflow') }}
    {{ SpecName('CSS3 Box', '#overflow1', 'overflow') }}{{ Spec2('CSS3 Box') }}无变更
    {{ SpecName('CSS2.1', 'visufx.html#overflow', 'overflow') }}{{ Spec2('CSS2.1') }}初始规定
    +{{Specifications}}

    浏览器兼容性

    diff --git a/files/zh-cn/web/css/overscroll-behavior-x/index.html b/files/zh-cn/web/css/overscroll-behavior-x/index.html index 0234ac5d89999b..344e1863fcd61b 100644 --- a/files/zh-cn/web/css/overscroll-behavior-x/index.html +++ b/files/zh-cn/web/css/overscroll-behavior-x/index.html @@ -66,24 +66,9 @@

    示例

    overscroll-behavior-x: contain; }
    -

    规格

    - - - - - - - - - - - - - - - - -
    规格状态值注释
    {{SpecName('Overscroll Behavior', '#propdef-overscroll-behavior-x', 'overscroll-behavior-x')}}{{Spec2('Overscroll Behavior')}} 
    +

    规范

    + +{{Specifications}}

    浏览器兼容性

    @@ -94,5 +79,3 @@

    See also

    - -

     

    diff --git a/files/zh-cn/web/css/overscroll-behavior-y/index.html b/files/zh-cn/web/css/overscroll-behavior-y/index.html index 0fc992a383201d..07cc8400d7a18c 100644 --- a/files/zh-cn/web/css/overscroll-behavior-y/index.html +++ b/files/zh-cn/web/css/overscroll-behavior-y/index.html @@ -53,24 +53,9 @@

    示例

    详细的解释请访问 {{cssxref("overscroll-behavior")}}。

    -

    规格

    - - - - - - - - - - - - - - - - -
    规格状态值备注
    {{SpecName('Overscroll Behavior', '#propdef-overscroll-behavior-y', 'overscroll-behavior-y')}}{{Spec2('Overscroll Behavior')}}
    +

    规范

    + +{{Specifications}}

    浏览器兼容性

    diff --git a/files/zh-cn/web/css/overscroll-behavior/index.html b/files/zh-cn/web/css/overscroll-behavior/index.html index 1c27b5d10b5440..2029280a6d5fd7 100644 --- a/files/zh-cn/web/css/overscroll-behavior/index.html +++ b/files/zh-cn/web/css/overscroll-behavior/index.html @@ -73,22 +73,7 @@

    Specifications

    在 CSSWG 发布自己的草案之前,该规范只能在它的 WICG Github Repository 中找到。

    - - - - - - - - - - - - - - - -
    SpecificationStatusComment
    {{SpecName('Overscroll Behavior', '#propdef-overscroll-behavior', 'overscroll-behavior')}}{{Spec2('Overscroll Behavior')}}
    +{{Specifications}}

    Browser compatibility

    diff --git a/files/zh-cn/web/css/padding-bottom/index.html b/files/zh-cn/web/css/padding-bottom/index.html index e492daa2b095ae..694fbc2c118fae 100644 --- a/files/zh-cn/web/css/padding-bottom/index.html +++ b/files/zh-cn/web/css/padding-bottom/index.html @@ -53,37 +53,7 @@

    Examples

    Specifications

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    SpecificationStatusComment
    {{ SpecName('CSS3 Box', '#the-padding', 'padding-bottom') }}{{ Spec2('CSS3 Box') }}No change from {{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-bottom') }}.
    {{ SpecName('CSS3 Transitions', '#animatable-css', 'padding-bottom') }}{{ Spec2('CSS3 Transitions') }}Defines padding-bottom as animatable.
    {{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-bottom') }}{{ Spec2('CSS2.1') }}No change from {{ Specname('CSS1', '#padding-bottom', 'padding-bottom') }}.
    {{ Specname('CSS1', '#padding-bottom', 'padding-bottom') }}{{ Spec2('CSS1') }}Initial definition.
    +{{Specifications}}

    Browser compatibility

    diff --git a/files/zh-cn/web/css/padding-inline-start/index.html b/files/zh-cn/web/css/padding-inline-start/index.html index acc113a16a421c..be65a7ac84d76b 100644 --- a/files/zh-cn/web/css/padding-inline-start/index.html +++ b/files/zh-cn/web/css/padding-inline-start/index.html @@ -63,22 +63,7 @@

    CSS Content

    规范

    - - - - - - - - - - - - - - - -
    规范状态注释
    {{SpecName("CSS Logical Properties", "#propdef-padding-inline-start", "padding-inline-start")}}{{Spec2("CSS Logical Properties")}}Initial definition
    +{{Specifications}}

    浏览器兼容性

    diff --git a/files/zh-cn/web/css/padding-left/index.html b/files/zh-cn/web/css/padding-left/index.html index f034537fa4fe34..6cd7c69b250e18 100644 --- a/files/zh-cn/web/css/padding-left/index.html +++ b/files/zh-cn/web/css/padding-left/index.html @@ -62,32 +62,7 @@

    使用“p

    规范

    - - - - - - - - - - - - - - - - - - - - - - - - - -
    规范版本阶段备注
    {{ SpecName('CSS3 Box', '#propdef-padding-left', 'padding-left') }}{{ Spec2('CSS3 Box') }}没有改变
    {{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-left') }}{{ Spec2('CSS2.1') }}没有改变
    {{ Specname('CSS1', '#padding-left', 'padding-left') }}{{ Spec2('CSS1') }}初始定义
    +{{Specifications}}

    浏览器兼容性

    diff --git a/files/zh-cn/web/css/padding-right/index.html b/files/zh-cn/web/css/padding-right/index.html index a37667f31bbfbf..6ea6d113f30560 100644 --- a/files/zh-cn/web/css/padding-right/index.html +++ b/files/zh-cn/web/css/padding-right/index.html @@ -50,37 +50,7 @@

    Examples

    Specifications

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    SpecificationStatusComment
    {{ SpecName('CSS3 Box', '#the-padding', 'padding-right') }}{{ Spec2('CSS3 Box') }}No change.
    {{ SpecName('CSS3 Transitions', '#animatable-css', 'padding-right') }}{{ Spec2('CSS3 Transitions') }}Defines padding-right as animatable.
    {{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-right') }}{{ Spec2('CSS2.1') }}No change.
    {{ Specname('CSS1', '#padding-right', 'padding-right') }}{{ Spec2('CSS1') }}Initial definition.
    +{{Specifications}}

    Browser compatibility

    diff --git a/files/zh-cn/web/css/padding-top/index.html b/files/zh-cn/web/css/padding-top/index.html index f9d8eccdfa9959..f254c413f59eb3 100644 --- a/files/zh-cn/web/css/padding-top/index.html +++ b/files/zh-cn/web/css/padding-top/index.html @@ -50,51 +50,17 @@

    实例

    .sidebox { padding-top: 10px; }
    -

    详细说明

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    SpecificationStatusComment
    {{ SpecName('CSS3 Box', '#the-padding', 'padding-top') }}{{ Spec2('CSS3 Box') }}No change from {{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-top') }}.
    {{ SpecName('CSS3 Transitions', '#animatable-css', 'padding-top') }}{{ Spec2('CSS3 Transitions') }}Defines padding-top as animatable.
    {{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-top') }}{{ Spec2('CSS2.1') }}No change from {{ Specname('CSS1', '#padding-top', 'padding-top') }}.
    {{ Specname('CSS1', '#padding-top', 'padding-top') }}{{ Spec2('CSS1') }}Initial definition.
    +

    规范

    + +{{Specifications}}

    浏览器的兼容性

    {{Compat("css.properties.padding-top")}} -

     更多浏览

    +

    参见

    • CSS Box Model
    • The {{cssxref("padding")}} shorthand property can be used to set paddings on all four sides of an element with a single declaration: padding-top, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, and {{cssxref("padding-left")}}.
    - -

    - -

    diff --git a/files/zh-cn/web/css/padding/index.html b/files/zh-cn/web/css/padding/index.html index 4c8ce506b9b7cc..0470cad8dd1719 100644 --- a/files/zh-cn/web/css/padding/index.html +++ b/files/zh-cn/web/css/padding/index.html @@ -121,32 +121,7 @@

    以像素和百分数为

    规范

    - - - - - - - - - - - - - - - - - - - - - - - - - -
    规范阶段备注
    {{ SpecName('CSS3 Box', '#padding-shorthand', 'padding') }}{{ Spec2('CSS3 Box') }}没有变化。
    {{ SpecName('CSS2.1', 'box.html#propdef-padding', 'padding') }}{{ Spec2('CSS2.1') }}没有变化。
    {{ Specname('CSS1', '#padding', 'padding') }}{{ Spec2('CSS1') }}初始定义。
    +{{Specifications}}

    浏览器兼容性

    diff --git a/files/zh-cn/web/css/page-break-after/index.html b/files/zh-cn/web/css/page-break-after/index.html index e1fa5898a8c621..4c05343ca98b06 100644 --- a/files/zh-cn/web/css/page-break-after/index.html +++ b/files/zh-cn/web/css/page-break-after/index.html @@ -92,32 +92,7 @@

    Examples

    Specification

    - - - - - - - - - - - - - - - - - - - - - - - - - -
    SpecificationStatusComment
    {{SpecName('CSS Logical Properties', '#logical-page', 'recto and verso')}}{{Spec2('CSS Logical Properties')}}Adds the values recto and verso.
    {{ SpecName('CSS3 Paged Media', '#page-break-after', 'page-break-after') }}{{ Spec2('CSS3 Paged Media') }}Extends the element that this property applies to table rows and table row groups.
    {{ SpecName('CSS2.1', 'page.html#propdef-page-break-after', 'page-break-after') }}{{ Spec2('CSS2.1') }}Initial definition
    +{{Specifications}}

    Browser compatibility

    diff --git a/files/zh-cn/web/css/page-break-inside/index.html b/files/zh-cn/web/css/page-break-inside/index.html index f33d81f71d57c1..cd9fb92f1aeb93 100644 --- a/files/zh-cn/web/css/page-break-inside/index.html +++ b/files/zh-cn/web/css/page-break-inside/index.html @@ -92,37 +92,11 @@

    Result

    Specifications

    - - - - - - - - - - - - - - - - - - - - -
    SpecificationStatusComment
    {{SpecName('CSS3 Paged Media', '#page-break-inside', 'page-break-inside')}}{{Spec2('CSS3 Paged Media')}}Allows this property on more elements.
    {{SpecName('CSS2.1', 'page.html#propdef-page-break-inside', 'page-break-inside')}}{{Spec2('CSS2.1')}}Initial definition.
    +{{Specifications}}

    Browser compatibility

    -

     

    - - - -

    {{Compat("css.properties.page-break-inside")}}

    - -

     

    +

    {{Compat}}

    See also

    diff --git a/files/zh-cn/web/css/paint-order/index.html b/files/zh-cn/web/css/paint-order/index.html index 73b7425291bb86..28a411d1557c98 100644 --- a/files/zh-cn/web/css/paint-order/index.html +++ b/files/zh-cn/web/css/paint-order/index.html @@ -71,24 +71,9 @@

    效果

    {{EmbedLiveSample('Examples', '100%', 165)}}

    -

    说明

    - - - - - - - - - - - - - - - - -
    SpecificationStatusComment
    {{SpecName('SVG2', 'painting.html#PaintOrder', 'paint-order')}}{{Spec2('SVG2')}}Initial definition
    +

    规范

    + +{{Specifications}}

    {{cssinfo}}

    diff --git a/files/zh-cn/web/css/percentage/index.html b/files/zh-cn/web/css/percentage/index.html index 81706fd3093dff..aa27dad691e6dc 100644 --- a/files/zh-cn/web/css/percentage/index.html +++ b/files/zh-cn/web/css/percentage/index.html @@ -52,32 +52,7 @@

    作为 font-size 的值的单位

    规范

    - - - - - - - - - - - - - - - - - - - - - - - - - -
    SpecificationStatusComment
    {{SpecName('CSS3 Values', '#percentages', '<percentage>')}}{{Spec2('CSS3 Values')}}No significant change from CSS Level 2 (Revision 1).
    {{SpecName('CSS2.1', 'syndata.html#percentage-units', '<percentage>')}}{{Spec2('CSS2.1')}}No change from CSS Level 1.
    {{SpecName('CSS1', '#percentage-units', '<percentage>')}}{{Spec2('CSS1')}}Initial definition.
    +{{Specifications}}

    浏览器兼容性

    diff --git a/files/zh-cn/web/css/perspective-origin/index.html b/files/zh-cn/web/css/perspective-origin/index.html index a356b406a94ccd..9cf926c975152c 100644 --- a/files/zh-cn/web/css/perspective-origin/index.html +++ b/files/zh-cn/web/css/perspective-origin/index.html @@ -348,22 +348,7 @@

    CSS

    规范

    - - - - - - - - - - - - - - - -
    SpecificationStatusComment
    {{SpecName('CSS Transforms 2', '#perspective-origin-property', 'perspective-origin')}}{{Spec2('CSS Transforms 2')}}Initial definition.
    +{{Specifications}}

    {{cssinfo}}

    diff --git a/files/zh-cn/web/css/perspective/index.html b/files/zh-cn/web/css/perspective/index.html index f91eea10341ae2..7758c097c21f53 100644 --- a/files/zh-cn/web/css/perspective/index.html +++ b/files/zh-cn/web/css/perspective/index.html @@ -221,22 +221,7 @@

    CSS

    规范

    - - - - - - - - - - - - - - - -
    SpecificationStatusComment
    {{Specname('CSS Transforms 2', '#propdef-perspective', 'perspective')}}{{Spec2('CSS Transforms 2')}}Initial definition
    +{{Specifications}}

    {{cssinfo}}

    diff --git a/files/zh-cn/web/css/place-content/index.html b/files/zh-cn/web/css/place-content/index.html index 9f5f03c91f5bc8..18d9319f559ca4 100644 --- a/files/zh-cn/web/css/place-content/index.html +++ b/files/zh-cn/web/css/place-content/index.html @@ -199,22 +199,7 @@

    Result

    Specifications

    - - - - - - - - - - - - - - - -
    SpecificationStatusComment
    {{SpecName("CSS3 Box Alignment", "#propdef-place-content", "place content")}}{{Spec2("CSS3 Box Alignment")}}Initial definition
    +{{Specifications}}

    {{CSSInfo}}

    diff --git a/files/zh-cn/web/css/place-items/index.html b/files/zh-cn/web/css/place-items/index.html index 979460172de013..3bd026edb768a8 100644 --- a/files/zh-cn/web/css/place-items/index.html +++ b/files/zh-cn/web/css/place-items/index.html @@ -244,22 +244,7 @@

    结果

    规范

    - - - - - - - - - - - - - - - -
    SpecificationStatusComment
    {{SpecName("CSS3 Box Alignment", "#place-items-property", "place-items")}}{{Spec2("CSS3 Box Alignment")}}Initial definition
    +{{Specifications}}

    浏览器兼容性

    diff --git a/files/zh-cn/web/css/pointer-events/index.html b/files/zh-cn/web/css/pointer-events/index.html index 2ff7f3d9a0d6d9..6972c320d3d520 100644 --- a/files/zh-cn/web/css/pointer-events/index.html +++ b/files/zh-cn/web/css/pointer-events/index.html @@ -117,22 +117,7 @@

    提示

    规范

    - - - - - - - - - - - - - - - -
    SpecificationStatusComment
    {{SpecName('SVG1.1', 'interact.html#PointerEventsProperty', 'pointer-events')}}{{Spec2('SVG1.1')}}
    +{{Specifications}}

    Its extension to HTML elements, though present in early drafts of CSS Basic User Interface Module Level 3, has been pushed to its level 4.

    diff --git a/files/zh-cn/web/css/position/index.html b/files/zh-cn/web/css/position/index.html index ca233ac8d0ab39..ed13ffd4f764fc 100644 --- a/files/zh-cn/web/css/position/index.html +++ b/files/zh-cn/web/css/position/index.html @@ -265,27 +265,7 @@

    CSS

    规范

    - - - - - - - - - - - - - - - - - - - - -
    SpecificationStatusComment
    {{SpecName('CSS2.1', 'visuren.html#propdef-position', 'position')}}{{Spec2('CSS2.1')}}
    {{SpecName('CSS3 Positioning','#position-property','position')}}{{Spec2('CSS3 Positioning')}}Adds sticky property value.
    +{{Specifications}}

    {{cssinfo}}

    diff --git a/files/zh-cn/web/css/position_value/index.html b/files/zh-cn/web/css/position_value/index.html index 60606c0dc7277b..c3d3d0d9acfa6e 100644 --- a/files/zh-cn/web/css/position_value/index.html +++ b/files/zh-cn/web/css/position_value/index.html @@ -47,40 +47,8 @@

    正式语法

    规范

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    规范状态注释
    {{ SpecName('CSS3 Values', '#position', '<position>') }}{{ Spec2('CSS3 Values') }}Relists links to both definition, with the requirement to be coherent: if {{ SpecName('CSS3 Backgrounds', '', '') }} is supported, its definition of <position> must be used too.
    {{ SpecName('CSS3 Backgrounds', '#ltpositiongt', '<position>') }}{{ Spec2('CSS3 Backgrounds') }}Defines <position> explicitly and extends it to support offsets from any edge. {{ experimental_inline() }}
    {{ SpecName('CSS2.1', 'colors.html#background-properties', '<position>') }}{{ Spec2('CSS2.1') }}Allows combination of a keyword with a {{cssxref("<length>")}}, or {{cssxref("<percentage>")}} value.
    {{ SpecName('CSS1', '#background-position', '<position>') }}{{ Spec2('CSS1') }}Defines <position> anonymously as the value of {{ cssxref("background-position") }}.
    +{{Specifications}}

    浏览器兼容性

    -{{Compat("css.types.position")}} - -

     

    +{{Compat}} diff --git a/files/zh-cn/web/css/pseudo-classes/index.html b/files/zh-cn/web/css/pseudo-classes/index.html index 2f76adbd08a9c4..3c7ed94e551f21 100644 --- a/files/zh-cn/web/css/pseudo-classes/index.html +++ b/files/zh-cn/web/css/pseudo-classes/index.html @@ -101,70 +101,7 @@

    标准伪类索引

    规范

    - - - - - - - - - - - - - -
    规范状态备注
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    {{SpecName("Fullscreen")}}{{Spec2("Fullscreen")}}Defined :fullscreen.
    {{SpecName("HTML WHATWG", "#pseudo-classes")}}{{Spec2("HTML WHATWG")}}Defines when particular selectors match HTML elements.
    {{SpecName("CSS4 Selectors")}}{{Spec2("CSS4 Selectors")}}Defined :any-link:blank:local-link:scope:drop:current:past:future:placeholder-shown:user-invalid:nth-col():nth-last-col():is() and :where().
    - Changed :empty to behave like {{CSSxRef(":-moz-only-whitespace")}} {{Non-standard_Inline}}.
    - No significant change for other pseudo-classes defined in {{SpecName("CSS3 Selectors")}} and {{SpecName("HTML5 W3C")}} (though semantic meaning not taken over).
    {{SpecName("HTML5 W3C")}}{{Spec2("HTML5 W3C")}}Copies the relevant section from the canonical (WHATWG) HTML spec.
    {{SpecName("CSS3 Basic UI")}}{{Spec2("CSS3 Basic UI")}}Defined :default:valid:invalid:in-range:out-of-range:required:optional:read-only and :read-write, but without the associated semantic meaning.
    {{SpecName("CSS3 Selectors")}}{{Spec2("CSS3 Selectors")}}Defined :target:root:nth-child():nth-last-of-child():nth-of-type():nth-last-of-type():last-child:first-of-type:last-of-type:only-child:only-of-type:empty and :not().
    - Defined the syntax of :enabled:disabled:checked, and :indeterminate, but without the associated semantic meaning.
    - No significant change for pseudo-classes defined in {{SpecName('CSS2.1')}}.
    {{SpecName("CSS2.1")}}{{Spec2("CSS2.1")}}Defined :lang():first-child:hover, and :focus.
    - No significant change for pseudo-classes defined in {{SpecName('CSS1')}}.
    {{SpecName("CSS1")}}{{Spec2("CSS1")}}Defined :link:visited and :active, but without the associated semantic meaning.
    -
    +{{Specifications}}

    参见

    diff --git a/files/zh-cn/web/css/pseudo-elements/index.html b/files/zh-cn/web/css/pseudo-elements/index.html index e235d654957088..34ad8803e3b82b 100644 --- a/files/zh-cn/web/css/pseudo-elements/index.html +++ b/files/zh-cn/web/css/pseudo-elements/index.html @@ -21,8 +21,6 @@

    注意:与伪元素比较,{{cssxref("pseudo-classes")}} 能够根据状态改变元素样式。

    -

     

    -

    语法

    selector::pseudo-element {
    @@ -53,6 +51,13 @@ 

    标准伪元素索引

  • {{CSSxRef("::spelling-error")}} {{Experimental_Inline}}
  • + +

    规范

    + +{{Specifications}} + +

    浏览器兼容性

    + diff --git a/files/zh-cn/web/css/quotes/index.html b/files/zh-cn/web/css/quotes/index.html index 119fdfd2565d5e..777d24cff08b16 100644 --- a/files/zh-cn/web/css/quotes/index.html +++ b/files/zh-cn/web/css/quotes/index.html @@ -107,27 +107,7 @@

    备注

    规范

    -
    - - - - - - - - - - - - - - - - - - - -
    SpecificationStatusComment
    {{SpecName("CSS3 Content", "#quotes", "quotes")}}{{Spec2("CSS3 Content")}}
    {{ SpecName('CSS2.1', 'generate.html#quotes', 'quotes') }}{{ Spec2('CSS2.1') }}Initial definition
    +{{Specifications}}

    {{cssinfo}}

    diff --git a/files/zh-cn/web/css/ratio/index.html b/files/zh-cn/web/css/ratio/index.html index 1c9934ea4f19e7..3c1823115417e3 100644 --- a/files/zh-cn/web/css/ratio/index.html +++ b/files/zh-cn/web/css/ratio/index.html @@ -5,13 +5,13 @@ ---
    {{CSSRef}}
    -

           <ratio> CSS 数据类型,用于描述媒体查询中的宽高比,表示两个无单位值之间的比例。

    +

    <ratio> CSS 数据类型,用于描述媒体查询中的宽高比,表示两个无单位值之间的比例。

    句法

    -

           在 Media Queries Level 3 中,<ratio>数据类型包括一个正数的<integer>值,后跟一个正斜杠('/',Unicode U + 002F SOLIDUS)和第二个正数的<integer>值。斜杠前后的空格是可选的。第一个数字代表宽度,第二个数字代表高度。

    +

    在 Media Queries Level 3 中,<ratio>数据类型包括一个正数的<integer>值,后跟一个正斜杠('/',Unicode U + 002F SOLIDUS)和第二个正数的<integer>值。斜杠前后的空格是可选的。第一个数字代表宽度,第二个数字代表高度。

    -

           在 Media Queries Level 4 中,<ratio>数据类型包括一个正数的<number>值,后跟一个正斜杠('/',Unicode U + 002F SOLIDUS)和第二个正数的<number>值。此外,允许使用单个<number>作为值。

    +

    在 Media Queries Level 4 中,<ratio>数据类型包括一个正数的<number>值,后跟一个正斜杠('/',Unicode U + 002F SOLIDUS)和第二个正数的<number>值。此外,允许使用单个<number>作为值。

    例子

    @@ -57,30 +57,15 @@

    常见的宽高比

    -

    产品规格

    +

    规范

    - - - - - - - - - - - - - - - -
    规范状态评论
    {{SpecName('CSS3 Media Queries','#value','<ratio>')}}{{Spec2('CSS3 Media Queries')}}初步定义。
    +{{Specifications}}

    浏览器兼容性

    -

    {{COMPAT("css.types.ratio")}}

    +

    {{Compat}}

    -

    也可以看看

    +

    参见

    • aspect-ratio 媒体功能
    • diff --git a/files/zh-cn/web/css/repeat/index.html b/files/zh-cn/web/css/repeat/index.html index 380e6cd920a806..0d2bb71b5eda5c 100644 --- a/files/zh-cn/web/css/repeat/index.html +++ b/files/zh-cn/web/css/repeat/index.html @@ -120,22 +120,7 @@

      结果

      规范

      - - - - - - - - - - - - - - - -
      SpecificationStatusComment
      {{SpecName("CSS Grid", "#funcdef-repeat", "repeat()")}}{{Spec2("CSS Grid")}}Initial definition
      +{{Specifications}}

      Browser compatibility

      diff --git a/files/zh-cn/web/css/resize/index.html b/files/zh-cn/web/css/resize/index.html index 6c64b84d69b4cf..0c754f6f5b9780 100644 --- a/files/zh-cn/web/css/resize/index.html +++ b/files/zh-cn/web/css/resize/index.html @@ -113,27 +113,7 @@

      Result

      Specifications

      - - - - - - - - - - - - - - - - - - - - -
      SpecificationStatusComment
      {{SpecName('CSS Logical Properties', '#resize', 'resize')}}{{Spec2('CSS Logical Properties')}}Adds the values block and inline.
      {{SpecName('CSS3 Basic UI', '#resize', 'resize')}}{{Spec2('CSS3 Basic UI')}}Initial definition
      +{{Specifications}}

      Browser compatibility

      diff --git a/files/zh-cn/web/css/resolution/index.html b/files/zh-cn/web/css/resolution/index.html index 97be6a1bd33a26..90b0eee791f4b8 100644 --- a/files/zh-cn/web/css/resolution/index.html +++ b/files/zh-cn/web/css/resolution/index.html @@ -56,32 +56,7 @@

      Invalid resolutions

      Specifications

      - - - - - - - - - - - - - - - - - - - - - - - - - -
      SpecificationStatusComment
      {{SpecName('CSS4 Values', '#resolution', '<resolution>')}}{{Spec2('CSS4 Values')}}Adds the x unit.
      {{SpecName('CSS3 Values', '#resolution', '<resolution>')}}{{Spec2('CSS3 Values')}}Adds the dppx unit.
      {{SpecName('CSS3 Media Queries', '#resolution', '<resolution>')}}{{Spec2('CSS3 Media Queries')}}Initial definition.
      +{{Specifications}}

      Browser compatibility

      diff --git a/files/zh-cn/web/css/resolved_value/index.html b/files/zh-cn/web/css/resolved_value/index.html index f1e60dafbe333f..ab757f2d7b9e23 100644 --- a/files/zh-cn/web/css/resolved_value/index.html +++ b/files/zh-cn/web/css/resolved_value/index.html @@ -9,22 +9,7 @@

      规范

      - - - - - - - - - - - - - - - -
      SpecificationStatusComment
      {{SpecName("CSSOM", "#resolved-values", "resolved value")}}{{Spec2("CSSOM")}}Initial definition
      +{{Specifications}}

      参考

      diff --git a/files/zh-cn/web/css/rotate/index.html b/files/zh-cn/web/css/rotate/index.html index 4b2d67a91df2bd..022152fe0ad321 100644 --- a/files/zh-cn/web/css/rotate/index.html +++ b/files/zh-cn/web/css/rotate/index.html @@ -90,22 +90,7 @@

      Result

      Specifications

      - - - - - - - - - - - - - - - -
      SpecificationStatusComment
      {{SpecName('CSS Transforms 2', '#individual-transforms', 'individual transforms')}}{{Spec2('CSS Transforms 2')}}Initial definition.
      +{{Specifications}}

      {{cssinfo}}

      diff --git a/files/zh-cn/web/css/scale/index.html b/files/zh-cn/web/css/scale/index.html index 6e9086598626ac..0904da33a5db77 100644 --- a/files/zh-cn/web/css/scale/index.html +++ b/files/zh-cn/web/css/scale/index.html @@ -91,22 +91,7 @@

      结果

      规范

      - - - - - - - - - - - - - - - -
      规范状态备注
      {{SpecName("CSS Transforms 2", "#individual-transforms", "individual transforms")}}{{Spec2("CSS Transforms 2")}}Initial definition.
      +{{Specifications}}

      {{CSSInfo}}

      diff --git a/files/zh-cn/web/css/scroll-behavior/index.html b/files/zh-cn/web/css/scroll-behavior/index.html index cb5e194db34aa3..acf8cf7d48fab3 100644 --- a/files/zh-cn/web/css/scroll-behavior/index.html +++ b/files/zh-cn/web/css/scroll-behavior/index.html @@ -99,22 +99,7 @@

      输出

      规范

      - - - - - - - - - - - - - - - -
      规范状态备注
      {{SpecName('CSSOM View', "#propdef-scroll-behavior", 'scroll-behavior')}}{{Spec2('CSSOM View')}}Initial specification
      +{{Specifications}}

      浏览器兼容性

      diff --git a/files/zh-cn/web/css/scroll-margin-top/index.html b/files/zh-cn/web/css/scroll-margin-top/index.html index 61e199de1ee9a8..2d2489b411d47f 100644 --- a/files/zh-cn/web/css/scroll-margin-top/index.html +++ b/files/zh-cn/web/css/scroll-margin-top/index.html @@ -47,22 +47,7 @@

      标准语法

      规范

      - - - - - - - - - - - - - - - -
      规范状态注释
      {{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin-top", "scroll-margin-top")}}{{Spec2("CSS Scroll Snap Points")}}Initial definition
      +{{Specifications}}

      浏览器兼容性

      diff --git a/files/zh-cn/web/css/scroll-margin/index.html b/files/zh-cn/web/css/scroll-margin/index.html index b2f7e76402a37e..82f9b324fe9b9c 100644 --- a/files/zh-cn/web/css/scroll-margin/index.html +++ b/files/zh-cn/web/css/scroll-margin/index.html @@ -39,22 +39,7 @@

      Formal syntax

      Specification

      - - - - - - - - - - - - - - - -
      SpecificationStatusComment
      {{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin", "scroll-margin")}}{{Spec2("CSS Scroll Snap Points")}}Initial definition
      +{{Specifications}}

      Browser compatibility

      diff --git a/files/zh-cn/web/css/scroll-snap-type/index.html b/files/zh-cn/web/css/scroll-snap-type/index.html index 268d9704105ab1..dfa90a6baa6bec 100644 --- a/files/zh-cn/web/css/scroll-snap-type/index.html +++ b/files/zh-cn/web/css/scroll-snap-type/index.html @@ -221,22 +221,7 @@

      CSS 内容

      规范

      - - - - - - - - - - - - - - - -
      规范名称状态评论
      {{SpecName("CSS Scroll Snap Points", "#propdef-scroll-snap-type", "scroll-snap-type")}}{{Spec2("CSS Scroll Snap Points")}}Initial definition
      +{{Specifications}}

      浏览器兼容性

      diff --git a/files/zh-cn/web/css/scrollbar-color/index.html b/files/zh-cn/web/css/scrollbar-color/index.html index 3750ff8c7255c2..de8a0ee98c0165 100644 --- a/files/zh-cn/web/css/scrollbar-color/index.html +++ b/files/zh-cn/web/css/scrollbar-color/index.html @@ -91,25 +91,8 @@

      可访问性问题

      规范

      - - - - - - - - - - - - - - - -
      规格状态评论
      {{SpecName("CSS Scrollbars", "#scrollbar-color", "scrollbar-color")}}{{Spec2("CSS Scrollbars")}}Initial definition.
      +{{Specifications}}

      浏览器兼容性

      - - -
      {{Compat("css.properties.scrollbar-color")}}
      +{{Compat}} diff --git a/files/zh-cn/web/css/scrollbar-width/index.html b/files/zh-cn/web/css/scrollbar-width/index.html index d0fae9533f616d..623e8d1ee2eb6f 100644 --- a/files/zh-cn/web/css/scrollbar-width/index.html +++ b/files/zh-cn/web/css/scrollbar-width/index.html @@ -5,7 +5,7 @@ ---
      {{CSSRef}}{{SeeCompatTable}}
      -

       scrollbar-width 属性允许开发者设置滚动条出现时的厚度

      +

      scrollbar-width 属性允许开发者设置滚动条出现时的厚度

      {{EmbedInteractiveExample("pages/css/scrollbar-width.html")}}

      @@ -77,32 +77,15 @@

      Result

      {{EmbedLiveSample("Example")}}

      -

      Specifications

      +

      规范

      - - - - - - - - - - - - - - - -
      SpecificationStatusComment
      {{SpecName("CSS Scrollbars", "#scrollbar-width", "scrollbar-width")}}{{Spec2("CSS Scrollbars")}}Initial Definition
      +{{Specifications}} -

      Browser compatibility

      +

      浏览器兼容性

      +{{Compat}} - -

      {{Compat("css.properties.scrollbar-width")}}

      - -

      See also

      +

      参见

      • {{CSSxRef("-ms-overflow-style")}}
      • diff --git a/files/zh-cn/web/css/selector_list/index.html b/files/zh-cn/web/css/selector_list/index.html index f60ba2da12a505..f1ed316d2970b8 100644 --- a/files/zh-cn/web/css/selector_list/index.html +++ b/files/zh-cn/web/css/selector_list/index.html @@ -64,29 +64,7 @@

        选择器列表无效化

        规范

        - - - - - - - - - - - - - - - - - - - - -
        规范状态备注
        {{SpecName("CSS4 Selectors", "#grouping", "Selector Lists")}}{{Spec2("CSS4 Selectors")}} -

        重命名为“选择器列表”("selector list")

        -
        {{SpecName('CSS1', '#grouping', 'grouping')}}{{Spec2('CSS1')}}初始定义
        +{{Specifications}}

        浏览器兼容性

        diff --git a/files/zh-cn/web/css/shape-image-threshold/index.html b/files/zh-cn/web/css/shape-image-threshold/index.html index f26a69dfe230bf..fa440dbe7250ef 100644 --- a/files/zh-cn/web/css/shape-image-threshold/index.html +++ b/files/zh-cn/web/css/shape-image-threshold/index.html @@ -90,22 +90,7 @@

        Result

        规范

        - - - - - - - - - - - - - - - -
        SpecificationStatusComment
        {{SpecName('CSS Shapes', '#shape-image-threshold-property', 'shape-image-threshold')}}{{Spec2('CSS Shapes')}}Initial definition
        +{{Specifications}}

        浏览器兼容性

        diff --git a/files/zh-cn/web/css/shape-margin/index.html b/files/zh-cn/web/css/shape-margin/index.html index 832170966f52a7..efc476f7b6fcf3 100644 --- a/files/zh-cn/web/css/shape-margin/index.html +++ b/files/zh-cn/web/css/shape-margin/index.html @@ -84,22 +84,7 @@

        Result

        {{EmbedLiveSample("Adding_a_margin_to_a_polygon", 500, 250)}}

        规范

        - - - - - - - - - - - - - - - -
        SpecificationStatusComment
        {{SpecName('CSS Shapes', '#shape-margin-property', 'shape-margin')}}{{Spec2('CSS Shapes')}}Initial definition
        +{{Specifications}}

        {{cssinfo}}

        diff --git a/files/zh-cn/web/css/shape-outside/index.html b/files/zh-cn/web/css/shape-outside/index.html index 33216152609df0..2a581ab7c7141c 100644 --- a/files/zh-cn/web/css/shape-outside/index.html +++ b/files/zh-cn/web/css/shape-outside/index.html @@ -147,28 +147,11 @@

        Result

        规范

        - - - - - - - - - - - - - - - -
        SpecificationStatusComment
        {{SpecName('CSS Shapes', '#shape-outside-property', 'shape-outside')}}{{Spec2('CSS Shapes')}}Initial definition.
        +{{Specifications}}

        浏览器兼容性

        -
        {{Compat("css.properties.shape-outside")}}
        - -

         

        +
        {{Compat}}

        参见

        diff --git a/files/zh-cn/web/css/specificity/index.html b/files/zh-cn/web/css/specificity/index.html index 84eb7995dc5350..85234dc6691c91 100644 --- a/files/zh-cn/web/css/specificity/index.html +++ b/files/zh-cn/web/css/specificity/index.html @@ -312,39 +312,7 @@

        直接添加样式 vs. 继承样

        规范

        -
        - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
        规范状态备注
        {{SpecName("CSS4 Selectors", "#specificity-rules", "Calculating a selector's specificity")}}{{Spec2("CSS4 Selectors")}}Add the specificity adjustment selector {{CSSxRef(":where", ":where()")}}.
        {{SpecName("CSS3 Selectors", "#specificity", "Calculating a selector's specificity")}}{{Spec2("CSS3 Selectors")}}添加伪元素 pseudo-elements.
        {{SpecName("CSS2.1", "cascade.html#specificity", "Calculating a selector's specificity")}}{{Spec2("CSS2.1")}}添加伪类 pseudo-classes.
        {{SpecName("CSS1", "#cascading-order", "Cascading order")}}{{Spec2("CSS1")}}初始化定义。
        -
        +{{Specifications}}

        参见

        diff --git a/files/zh-cn/web/css/string/index.html b/files/zh-cn/web/css/string/index.html index 20944485bf98c3..2abd5ef82c0f21 100644 --- a/files/zh-cn/web/css/string/index.html +++ b/files/zh-cn/web/css/string/index.html @@ -45,32 +45,7 @@

        例子

        规范

        - - - - - - - - - - - - - - - - - - - - - - - - - -
        SpecificationStatusComment
        {{SpecName('CSS3 Values', '#strings', '<string>')}}{{Spec2('CSS3 Values')}}No significant change from CSS Level 2 (Revision 1).
        {{SpecName('CSS2.1', 'syndata.html#strings', '<string>')}}{{Spec2('CSS2.1')}}Explicit definition; allows 6-digit Unicode escaped characters.
        {{SpecName('CSS1', '', '<string>')}}{{Spec2('CSS1')}}Implicit definition; allows 4-digit Unicode escaped characters.
        +{{Specifications}}

        浏览器兼容性

        diff --git a/files/zh-cn/web/css/tab-size/index.html b/files/zh-cn/web/css/tab-size/index.html index 856513a8c4d7ff..2ba54d7d4a787e 100644 --- a/files/zh-cn/web/css/tab-size/index.html +++ b/files/zh-cn/web/css/tab-size/index.html @@ -87,22 +87,7 @@

        结果

        规范

        - - - - - - - - - - - - - - - -
        SpecificationStatusComment
        {{SpecName('CSS3 Text', '#tab-size-property', 'tab-size')}}{{Spec2('CSS3 Text')}}Initial definition
        +{{Specifications}}

        浏览器兼容性

        diff --git a/files/zh-cn/web/css/table-layout/index.html b/files/zh-cn/web/css/table-layout/index.html index aea3c3c115350e..00598a16ad1489 100644 --- a/files/zh-cn/web/css/table-layout/index.html +++ b/files/zh-cn/web/css/table-layout/index.html @@ -90,27 +90,8 @@

        结果

        规范

        - - - - - - - - - - - - - - - -
        SpecificationStatusComment
        {{SpecName('CSS2.1', 'tables.html#width-layout', 'table-layout')}}{{Spec2('CSS2.1')}}Initial definition
        +{{Specifications}}

        浏览器兼容性

        -
        -

        {{Compat("css.properties.table-layout")}}

        -
        - -
        +

        {{Compat}}

        diff --git a/files/zh-cn/web/css/text-align-last/index.html b/files/zh-cn/web/css/text-align-last/index.html index 0cd5fbe17f74d4..eea85ce8d6ce09 100644 --- a/files/zh-cn/web/css/text-align-last/index.html +++ b/files/zh-cn/web/css/text-align-last/index.html @@ -82,22 +82,7 @@

        示例

        规范

        - - - - - - - - - - - - - - - -
        规范状态备注
        {{SpecName('CSS3 Text', '#text-align-last', 'text-align-last')}}{{Spec2('CSS3 Text')}}Initial definition
        +{{Specifications}}

        浏览器兼容性

        diff --git a/files/zh-cn/web/css/text-align/index.html b/files/zh-cn/web/css/text-align/index.html index 66bff94245f78b..9265fe3fe5aaa0 100644 --- a/files/zh-cn/web/css/text-align/index.html +++ b/files/zh-cn/web/css/text-align/index.html @@ -319,32 +319,7 @@

        Notes

        规范

        - - - - - - - - - - - - - - - - - - - - - - - - - -
        规范状态备注
        {{SpecName('CSS3 Text', '#text-align', 'visibility')}}{{Spec2('CSS3 Text')}}添加了startend 关键字 keyword. Changed the unnamed initial value to start (which it was). Added the {{cssxref("<string>")}} value, the match-parent value and the start end double value.
        {{SpecName('CSS2.1', 'text.html#alignment-prop', 'text-align')}}{{Spec2('CSS2.1')}}无改变
        {{SpecName('CSS1', '#text-align', 'text-align')}}{{Spec2('CSS1')}}首次定义
        +{{Specifications}}

        浏览器兼容性

        From 8151b625599729658551b8400895fb0ef792389a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9E=97=E6=9E=97?= Date: Mon, 18 Jul 2022 22:10:54 +0800 Subject: [PATCH 066/100] add zh-CN translation: Sec-CH-UA Sec-CH-UA-Arch Sec-CH-UA-Bitness (#6925) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 改两个排版 * 新增翻译Sec-CH-UA标头 * 补翻 * 注意分段 * Rename index.md to index.html * Rename files/zh-cn/web/http/headers/sec-sh-ua/index.html to files/zh-cn/web/http/headers/sec-ch-ua/index.md * 没必要把”的“去掉 * Update index.md * Update files/zh-cn/learn/css/building_blocks/advanced_styling_effects/index.html Co-authored-by: A1lo * Update files/zh-cn/web/http/headers/sec-ch-ua/index.md Co-authored-by: A1lo * Update files/zh-cn/web/http/headers/sec-ch-ua/index.md Co-authored-by: A1lo * Update files/zh-cn/web/http/headers/sec-ch-ua/index.md Co-authored-by: A1lo * Update files/zh-cn/web/http/headers/sec-ch-ua/index.md Co-authored-by: A1lo * 头》标头 * Update index.md * 新增翻译 Sec-CH-UA-Arch * 规范空格 * Update files/zh-cn/web/http/headers/sec-ch-ua-arch/index.md Co-authored-by: A1lo * Update index.md * 新增翻译 Sec-CH-UA-Bitness * Update files/zh-cn/web/http/headers/sec-ch-ua-arch/index.md Co-authored-by: A1lo * Update index.md * Update index.md * Apply suggestions from code review Co-authored-by: A1lo Co-authored-by: A1lo --- .../a_cool_looking_box/index.html | 4 +- .../advanced_styling_effects/index.html | 14 +-- .../web/http/headers/sec-ch-ua-arch/index.md | 84 ++++++++++++++++ .../http/headers/sec-ch-ua-bitness/index.md | 81 ++++++++++++++++ .../zh-cn/web/http/headers/sec-ch-ua/index.md | 95 +++++++++++++++++++ 5 files changed, 269 insertions(+), 9 deletions(-) create mode 100644 files/zh-cn/web/http/headers/sec-ch-ua-arch/index.md create mode 100644 files/zh-cn/web/http/headers/sec-ch-ua-bitness/index.md create mode 100644 files/zh-cn/web/http/headers/sec-ch-ua/index.md diff --git a/files/zh-cn/learn/css/building_blocks/a_cool_looking_box/index.html b/files/zh-cn/learn/css/building_blocks/a_cool_looking_box/index.html index 40d4491f8e3104..b10d159e010c4b 100644 --- a/files/zh-cn/learn/css/building_blocks/a_cool_looking_box/index.html +++ b/files/zh-cn/learn/css/building_blocks/a_cool_looking_box/index.html @@ -47,13 +47,13 @@

        一般任务

        样式化盒子

        -

        给{{htmlelement("p")}}添加样式:

        +

        给 {{htmlelement("p")}} 添加样式:

        • 一个对于大按钮来说合理的宽度,200 像素左右。
        • 一个对于大按钮来说合理的高度,并使文本纵向居中。
        • 居中文本。
        • -
        • rem使字体稍大一点,大约 17-18 像素,在注释里说说你的值是怎么算出来的。
        • +
        • rem 使字体稍大一点,大约 17-18 像素,在注释里说说你的值是怎么算出来的。
        • 给你的设计定一个基础颜色,把它作为盒子的背景颜色。
        • 把字体颜色设为同一个颜色,使用黑色的文字阴影增加可读性。
        • 一个精巧的圆角边框。
        • diff --git a/files/zh-cn/learn/css/building_blocks/advanced_styling_effects/index.html b/files/zh-cn/learn/css/building_blocks/advanced_styling_effects/index.html index 80286baad7bd4c..c3bb5095956480 100644 --- a/files/zh-cn/learn/css/building_blocks/advanced_styling_effects/index.html +++ b/files/zh-cn/learn/css/building_blocks/advanced_styling_effects/index.html @@ -248,7 +248,7 @@

          background-blend-mode

          mix-blend-mode

          -

          现在让我们看一看 {{cssxref("mix-blend-mode")}}。 这里我们将给出两个相同的<div>s,但是每个都位于一个有着紫色背景的简单的<div>上,来向你展示元素们将会怎样混合在一起:

          +

          现在让我们看一看 {{cssxref("mix-blend-mode")}}。 这里我们将给出两个相同的<div>,但是每个都位于一个有着紫色背景的简单的<div>上,来向你展示元素们将会怎样混合在一起:

          <article>
             No mix blend mode
          @@ -312,31 +312,31 @@ 

          mix-blend-mode

          你可以看到,多层混合(mix-blend)不仅混合了两种背景图像,还混合了在<div>下面的颜色。

          -

          注意:如果您不理解上面的一些布局属性,请不要担心,像 {{cssxref("position")}}, {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("z-index")}}等。我们将在CSS Layout模块中详细地介绍这些内容。

          +

          备注: 如果你不理解上面的一些布局属性,请不要担心,像 {{cssxref("position")}}、{{cssxref("top")}}、{{cssxref("bottom")}}、{{cssxref("z-index")}} 等。我们将在 CSS Layout 模块中详细地介绍这些内容。

          -webkit-background-clip: text

          -

          另一个我们认为在继续之前会提到的新特性 (目前支持 Chrome、Safari 和 Opera,和在 Firefox 正在实现) 是{{cssxref("background-clip")}}的 text 值。当与专有 -webkit-text-fill-color: transparent; 特性一起使用时,这允许您将背景图像剪贴到元素文本的形状,从而产生一些不错的效果。这不是一个正式的标准,但是已经在多个浏览器中实现了,因为它很流行,并且被开发人员广泛使用。在这种情况下,这两种属性都需要一个-webkit-供应商前缀,甚至对于非 webkit/Chrome-based 的浏览器来说也是如此。

          +

          另一个我们认为在继续之前会提到的新特性 (目前支持 Chrome、Safari 和 Opera,和 Firefox 正在实现) 是{{cssxref("background-clip")}}的 text 值。当与专有 -webkit-text-fill-color: transparent; 特性一起使用时,这允许您将背景图像剪贴到元素文本的形状,从而产生一些不错的效果。这不是一个正式的标准,但是已经在多个浏览器中实现了,因为它很流行,并且被开发人员广泛使用。在这种情况下,这两种属性都需要一个-webkit-供应商前缀,甚至对于非 webkit/Chrome-based 的浏览器来说也是如此。

          .text-clip {
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
           }
          -

          那么为什么其他浏览器会实现一个-webkit-前缀?主要是为了浏览器兼容性——许多 web 开发人员已经开始使用-webkit-前缀来实现 web 站点,它开始看起来像其他的浏览器一样被破坏了,而实际上他们遵循的是标准。因此,他们被迫实施了一些这样的功能。这就凸显了在你的工作中使用非标准和/或带前缀的 CSS 特性的危险——这不仅会导致浏览器兼容性问题,而且还会发生变化,因此你的代码随时可能崩溃。坚持标准要好得多。

          +

          那么为什么其他浏览器会实现一个 -webkit- 前缀?主要是为了浏览器兼容性——许多 web 开发人员已经开始使用 -webkit- 前缀来实现 web 站点,它开始看起来像其他的浏览器一样被破坏了,而实际上他们遵循的是标准。因此,他们被迫实施了一些这样的功能。这就凸显了在你的工作中使用非标准和/或带前缀的 CSS 特性的危险——这不仅会导致浏览器兼容性问题,而且还会发生变化,因此你的代码随时可能崩溃。坚持标准要好得多。

          如果您确实希望在您的生产工作中使用这些特性,请确保在浏览器中进行彻底的测试,并检查这些特性不工作的地方,站点仍然可用。

          -

          注意:对于一个完整的-webkit-background-clip: text代码示例,见background-clip-text.html(也可以见源码)。

          +

          注意:对于一个完整的 -webkit-background-clip: text 代码示例,见background-clip-text.html(也可以见源码)。

          自主学习:尝试一些效果

          现在轮到你了。对于这种自主学习,我们希望您使用下面所提供的代码来试验上面所读到的一些效果。

          -

          如果你犯了一个错误,你可以用Reset按钮来重置这个例子。

          +

          如果你犯了一个错误,你可以用 Reset 按钮来重置这个例子。

          diff --git a/files/zh-cn/web/http/headers/sec-ch-ua-arch/index.md b/files/zh-cn/web/http/headers/sec-ch-ua-arch/index.md new file mode 100644 index 00000000000000..d8f3c7bb36ff6e --- /dev/null +++ b/files/zh-cn/web/http/headers/sec-ch-ua-arch/index.md @@ -0,0 +1,84 @@ +--- +title: Sec-CH-UA-Arch +slug: Web/HTTP/Headers/Sec-CH-UA-Arch +translation_of: Web/HTTP/Headers/Sec-CH-UA-Arch +tags: + - Sec-CH-UA-Arch + - Client hint + - HTTP + - HTTP Header + - Reference + - Request header + - Experimental +--- +{{HTTPSidebar}} {{SeeCompatTable}} {{securecontext_header}} + +**`Sec-CH-UA-Arch`** [用户代理客户端提示](/zh-CN/docs/Web/HTTP/Client_hints#user-agent_client_hints)请求标头提供了用户代理的底层 CPU 架构,例如 ARM 或 x86。 + +例如,服务器可以使用它来选择并提供可执行文件的正确二进制格式供用户下载。 + + + + + + + + + + + + +
          标头类型 + {{Glossary("Request header")}}, + 客户端提示 +
          {{Glossary("Forbidden header name")}}
          + +## 语法 + +```http +Sec-CH-UA-Arch: +``` + +### 指令 + +- `` + - : 指示底层平台架构的字符串,例如 `"x86"`、`"ARM"`、`"[arm64-v8a, armeabi-v7a, armeabi]"` 等。 + +## 示例 + +服务器通过在响应客户端的某些请求时包含 {{HTTPHeader("Accept-CH")}} 来请求 `Sec-CH-UA-Arch` 标头,并使用所需标头的名称作为令牌: + +```http +HTTP/1.1 200 OK +Accept-CH: Sec-CH-UA-Arch +``` + +客户端可以选择提供提示,并将 `Sec-CH-UA-Arch` 标头添加到后续请求中。例如,在基于 Windows X86 的计算机上,客户端可能会添加如下所示标头: + +```http +GET /GET /my/page HTTP/1.1 +Host: example.site + +Sec-CH-UA: " Not A;Brand";v="99", "Chromium";v="96", "Google Chrome";v="96" +Sec-CH-UA-Mobile: ?0 +Sec-CH-UA-Platform: "Windows" +Sec-CH-UA-Arch: "x86" +``` + +请注意,即使服务器响应中未指定,[低熵标头](/zh-CN/docs/Web/HTTP/Client_hints#low_entropy_hints)也会被添加到请求中。 + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- [客户端提示](/zh-CN/docs/Web/HTTP/Client_hints) +- [用户代理客户端提示 API](/zh-CN/docs/Web/API/User-Agent_Client_Hints_API) +- [通过用户代理客户端提示改善用户隐私和开发人员体验](https://web.dev/user-agent-client-hints/)(web.dev) +- {{HTTPHeader("Accept-CH")}} +- [HTTP 缓存 > Vary 响应](/zh-CN/docs/Web/HTTP/Caching#vary_响应)和 {{HTTPHeader("Vary")}} \ No newline at end of file diff --git a/files/zh-cn/web/http/headers/sec-ch-ua-bitness/index.md b/files/zh-cn/web/http/headers/sec-ch-ua-bitness/index.md new file mode 100644 index 00000000000000..64589c06be93f0 --- /dev/null +++ b/files/zh-cn/web/http/headers/sec-ch-ua-bitness/index.md @@ -0,0 +1,81 @@ +--- +title: Sec-CH-UA-Bitness +slug: Web/HTTP/Headers/Sec-CH-UA-Bitness +translation_of: Web/HTTP/Headers/Sec-CH-UA-Bitness +tags: + - Sec-CH-UA-Bitness + - Client hint + - HTTP + - HTTP Header + - Reference + - Request header + - Experimental +--- +{{HTTPSidebar}} {{SeeCompatTable}} {{securecontext_header}} + +**`Sec-CH-UA-Bitness`** [用户代理客户端提示](/zh-CN/docs/Web/HTTP/Client_hints#user-agent_client_hints)请求标头提供用户代理底层 CPU 架构(architecture)的“位数”。这是一种以位为单位的指示内存地址大小的整数,通常为 64 位或 32 位。 + +这个标头可能被服务器用作类似选择并提供可执行文件的正确二进制格式供用户下载等用途。 + + + + + + + + + + + + +
          标头类型 + {{Glossary("Request header", "请求标头")}}、客户端提示 +
          {{Glossary("Forbidden header name")}}
          + +## 语法 + +```http +Sec-CH-UA-Bitness: +``` + +## 指令 + +- `` + - : 指示基础平台架构位数的字符串,例如:`"64"`、`"32"`。 + +## 示例 + +服务器通过在来自客户端的任何请求的*响应*中包含 {{HTTPHeader("Accept-CH")}} 来请求 `Sec-CH-UA-Bitness` 标头,并使用所需标头的名称作为令牌: + +```http +HTTP/1.1 200 OK +Accept-CH: Sec-CH-UA-Bitness +``` + +客户端可以选择提供提示,并将 `Sec-CH-UA-Bitness` 标头添加到后续请求中。例如,在基于 Windows 的 64 位计算机上,客户端可能会添加标头,如下所示: + +```http +GET /GET /my/page HTTP/1.1 +Host: example.site + +Sec-CH-UA: " Not A;Brand";v="99", "Chromium";v="96", "Google Chrome";v="96" +Sec-CH-UA-Mobile: ?0 +Sec-CH-UA-Platform: "Windows" +Sec-CH-UA-Bitness: "64" +``` + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- [客户端提示](/zh-CN/docs/Web/HTTP/Client_hints) +- [用户代理客户端提示 API](/zh-CN/docs/Web/API/User-Agent_Client_Hints_API) +- [通过用户代理客户端提示改善用户隐私和开发人员体验](https://web.dev/user-agent-client-hints/)(web.dev) +- {{HTTPHeader("Accept-CH")}} +- [HTTP 缓存 > Vary 响应](/zh-CN/docs/Web/HTTP/Caching#vary_响应)和 {{HTTPHeader("Vary")}} diff --git a/files/zh-cn/web/http/headers/sec-ch-ua/index.md b/files/zh-cn/web/http/headers/sec-ch-ua/index.md new file mode 100644 index 00000000000000..2ee5b0e3bcf980 --- /dev/null +++ b/files/zh-cn/web/http/headers/sec-ch-ua/index.md @@ -0,0 +1,95 @@ +--- +title: Sec-CH-UA +slug: Web/HTTP/Headers/Sec-CH-UA +translation_of: Web/HTTP/Headers/Sec-CH-UA +tags: + - Sec-CH-UA + - Client hint + - HTTP + - HTTP Header + - Reference + - Request header + - Experimental +--- +{{HTTPSidebar}} {{SeeCompatTable}} {{securecontext_header}} + +**`Sec-CH-UA`** [用户代理客户端提示](/zh-CN/docs/Web/HTTP/Client_hints#user-agent_client_hints)请求标头(header)提供用户代理的品牌(brand)和重要的版本信息。 + + + + + + + + + + + + +
          标头类型 + {{Glossary("Request header")}}, + 客户端提示 +
          {{Glossary("Forbidden header name")}}
          + +**`Sec-CH-UA`** 标头在以逗号分隔的列表中提供与浏览器关联的每个品牌的品牌和重要版本。品牌是用户代理的商业名称,例如:Chromium、Opera、Google Chrome、Microsoft Edge、Firefox 和 Safari。用户代理可能有多个关联的品牌。例如,Opera、Chrome 和 Edge 都基于 Chromium,并将在 **`Sec-CH-UA`** 标头中提供这两个品牌。 + +_significant version_ 是`市场`版本标识符,用于区分品牌的主要版本。例如,完整版本号为“96.0.4664.45”的 Chromium 的重要版本号是“96”。因此,标头允许服务器根据共享品牌及其各自特定自定义版本来自定义其响应。 + +`Sec-CH-UA` 是一个[低熵提示](/zh-CN/docs/Web/HTTP/Client_hints#low_entropy_hints)。除非被用户代理权限策略阻止,否则默认情况下会发送它,而不需要通过服务器发送 {{HTTPHeader("Accept-CH")}} 来选择是否发送。 + +标头可以包含任何位置和任何名称的“假冒”品牌。此功能旨在防止服务器直接拒绝未知的用户代理,迫使用户代理在品牌标识上撒谎。 + +> **备注:** {{HTTPHeader("Sec-CH-UA-Full-Version-List")}} 与 **`Sec-CH-UA`** 相同,但包括完整版本号,而不是每个品牌的重要版本号。 + +## 语法 + +用户代理品牌列表中以逗号分隔的品牌列表及其关联的有效版本号。单个条目的语法具有以下格式: + +```http +Sec-CH-UA: "";v="", ... +``` + +### 指令 + +- `` + - : 与用户代理关联的品牌,例如“Chromium”、“Google Chrome”,又或是故意不正确的品牌,例如 `"Not A;Brand"`. +- `` + - : 与可区分的 Web 公开功能关联的“市场”版本号。 + +## 示例 + +`Sec-CH-UA` 是一个[低熵提示](/zh-CN/docs/Web/HTTP/Client_hints#low_entropy_hints)。除非被用户代理策略明确阻止,否则它将在所有请求中发送(无需通过服务器发送 {{HTTPHeader("Accept-CH")}} 来选择是否发送)。 + +来自 Chromium、Chrome、Edge 和 Opera 桌面浏览器的字符串如下所示。请注意,它们都共享“Chromium”品牌,但有一个额外的品牌表明其来源。它们还具有故意不正确的品牌字符串,该字符串可能出现在任何位置并具有不同的文本。 + +```http +Sec-CH-UA: "(Not(A:Brand";v="8", "Chromium";v="98" +``` + +```http +Sec-CH-UA: " Not A;Brand";v="99", "Chromium";v="96", "Google Chrome";v="96" +``` + +```http +Sec-CH-UA: " Not A;Brand";v="99", "Chromium";v="96", "Microsoft Edge";v="96" +``` + +```http +Sec-CH-UA: "Opera";v="81", " Not;A Brand";v="99", "Chromium";v="95" +``` + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- [客户端提示](/zh-CN/docs/Web/HTTP/Client_hints) +- [用户代理客户端提示 API](/zh-CN/docs/Web/API/User-Agent_Client_Hints_API) +- [通过用户代理客户端提示改善用户隐私和开发人员体验](https://web.dev/user-agent-client-hints/)(web.dev) +- {{HTTPHeader("Accept-CH")}} +- [HTTP 缓存 > Vary 响应](/zh-CN/docs/Web/HTTP/Caching#vary_响应)和 {{HTTPHeader("Vary")}} \ No newline at end of file From e8efbf025a2ff028d933b69228e9c13c873c7dc9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marcelo=20Z=C3=A1rate?= Date: Mon, 18 Jul 2022 11:31:19 -0300 Subject: [PATCH 067/100] Suggestions to ES readme (#6957) --- docs/es/README.md | 21 ++++++++++++--------- 1 file changed, 12 insertions(+), 9 deletions(-) diff --git a/docs/es/README.md b/docs/es/README.md index e4f39899b2fe1c..abb734a7b01eb2 100644 --- a/docs/es/README.md +++ b/docs/es/README.md @@ -1,4 +1,4 @@ -# Bievenido a la localización de MDN en español +# Bienvenido a la localización de MDN en español Puedes comenzar en la siguiente [guía de contribución](https://developer.mozilla.org/es/docs/MDN/Contribute) @@ -14,10 +14,10 @@ Puedes comenzar en la siguiente [guía de contribución](https://developer.mozil > * ![Screenshot 2022-03-01 at 17-13-20 mdn translated-content All translated MDN content in raw form](https://user-images.githubusercontent.com/13079269/156264660-afcba14a-14a0-4c66-9a33-c1e2ad41737b.png) hacer Fork al repositorio en nuestra cuenta de GitHub. > * Clonar el repositorio de nuestra cuenta de GitHub `git clone git@github.com:TU_USUARIO/translated-content.git` > * `cd translated-content` #Entrar al directorio -> * `git checkout -b patch-error-on-123-issue` #Crear rama para trabajar +> * `git switch -c patch-error-on-123-issue` #Crear rama para trabajar > * Hacer nuestros cambios -> * `git add files/es/archivo.md` #Agregamos los arachivos modificados -> * `git rm files/es/archivo.html` #Removemos los archivos eliminados +> * `git add files/es/archivo.md` #Agregamos los archivos modificados +> * `git rm files/es/archivo.html` #Removemos los archivos eliminados (si los hubiera) > * `git commit -m "Corregido el error 123 [es]"` #Hacemos commit con una descripción de lo realizado y agregamos `[es]` > * `git push -u origin patch-error-on-123-issue` #Subimos nuestra rama a nuestro repositorio > * Ir a nuestro repositorio https://github.com/TU_USUARIO/translated-content y solicitar el Pull Request @@ -37,12 +37,15 @@ Digamos que desea traducir el contenido de la página que se observa en esta dir 2. Buscar la [versión en español](https://github.com/mdn/translated-content/blob/main/files/es/) del [documento](https://github.com/mdn/translated-content/blob/main/files/es/web/javascript/reference/global_objects/array/index.html) que desea traducir. En este caso la dirección seria [`files/es/web/javascript/reference/global_objects/array/index.{html|md}`](https://github.com/mdn/translated-content/blob/main/files/es/web/javascript/reference/global_objects/array/index.html) > NOTA: - > - Si el archivo no existe, deberá crearlo en formato `Markdown` imitando la ruta que tiene la versión en inglés. + > - Si el archivo no existe, deberá crearlo en formato `Markdown` imitando la ruta que tiene la versión en inglés. > > - Es posible que el archivo en la versión en español se encuentre en formato `HTML`, en cuyo caso tendrá que reemplazarlo por el formato `Markdown`. -3. Utilizar el texto y formato en inglés como guía para traducir al español. +3. Utilizar el texto y formato en inglés como guía para traducir al español. +## Arreglar "flaws" (defectos) + +Al usar `yarn start` en localhost para el repositorio `mdn/content`, es posible ver una previsualización en tu servidor local de los cambios que has hecho y como lucirán. Esto también es posible creando un PR, el bot se encargará de generar una "preview URL" donde puedes observar el mismo resultado. En ambas pantallas, podrás, en la parte superior del documento, mostrar los "flaws" que el motor indique, y que contendrá aquellos defectos detectados de manera automática para ser corregidos, y, en algunos casos, la corrección disponible con un clic, o una sugerencia. ## Convención en traducciones @@ -59,13 +62,13 @@ La comunidad de español sugiere utilizar las siguientes convenciones al traduci | Browser compatibility | Compatibilidad con navegadores | | HTML Content o HTML | HTML | | JavaScript Content o JavaScript | JavaScript | -| Warning | Advertencia | +| Warning | Advertencia | Actualmente trabajando en: https://github.com/mdn/translated-content/issues/6562 -Charla con nosotros: +## Charla con nosotros Telegram: https://t.me/+Dr6qKQCAepw4MjFj @@ -75,7 +78,7 @@ Matrix: https://chat.mozilla.org/#/room/#mdn-l10n-es:mozilla.org

          Enlaces relevantes

          Documentación por prioridad. -https://developer.mozilla.org/en-US/docs/MDN/Contribute/Documentation_priorities +https://developer.mozilla.org/en-US/docs/MDN/Contribute/Documentation_priorities Proyecto `ES` en GitHub https://github.com/mdn/translated-content/projects/7 From a467b06eeee0c517f5bf352e59c54bb7f456af56 Mon Sep 17 00:00:00 2001 From: 55TTKKSS <38362441+55TTKKSS@users.noreply.github.com> Date: Mon, 18 Jul 2022 12:25:08 -0300 Subject: [PATCH 068/100] Update learn/common_questions/how_does_the_internet_work section (#6817) * Update index.html * Apply suggestions from code review Co-authored-by: Alexander --- .../how_does_the_internet_work/index.html | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/files/es/learn/common_questions/how_does_the_internet_work/index.html b/files/es/learn/common_questions/how_does_the_internet_work/index.html index 238ea2e5aeb4e3..23bd637cdce7e4 100644 --- a/files/es/learn/common_questions/how_does_the_internet_work/index.html +++ b/files/es/learn/common_questions/how_does_the_internet_work/index.html @@ -9,7 +9,7 @@ translation_of: Learn/Common_questions/How_does_the_Internet_work ---
          -

          En este artículo se describe lo que es Internet y cómo funciona.

          +

          En este artículo se describe qué es Internet y cómo funciona.

          @@ -20,14 +20,14 @@ - +
          Objetivo:Aprenderás lo básico de infraestructura técnica de la web y la diferencia entre Internet y Web.Aprenderás lo básico a cerca de la infraestructura técnica de la web y la diferencia entre Internet y la Web.

          Resumen

          -

          Internet es la columna vertebral de la Web, la infraestructura técnica que la hace posible. En lo más básico, Internet es una gran red de computadoras que se comunican simultáneamente.

          +

          Internet es la columna vertebral de la Web, la infraestructura técnica que la hace posible. En su esencia, Internet es una gran red de computadoras que se comunican simultáneamente.

          La historia de internet es algo oscura. Comenzó en la década de 1960 como un proyecto de investigación financiado por el ejercito de los EE.UU, y luego se convirtió en una infraestructura pública en la década de 1980 con el apoyo de muchas universidades públicas y empresas privadas. Las distintas tecnologías que soporta internet han evolucionado con el tiempo, pero la forma en que funciona no ha cambiado mucho: Internet es una forma de conectar las computadoras entre sí y asegurar que, pase lo que pase, encuentren una manera de mantenerse conectadas.

          @@ -50,11 +50,11 @@

          Una simple red

          Dos computadoras conectadas entre sí

          -

          La red no se limita a dos ordenadores, se pueden conectar tantos como se deseen aunque siendo más complicado cada vez. Por ejemplo, para conectar diez ordenadores, se necesitarían 45 cables y unos nueve conectores por ordenador!

          +

          Una red no se limita a dos ordenadores, se pueden conectar tantos como se desee; sin embargo, rápidamente se volverá más compleja. Por ejemplo, para conectar diez ordenadores, se necesitarían ¡45 cables y unos nueve conectores por ordenador!

          Diez ordenadores interconectados

          -

          Para resolver este problema, cada ordenador en una red está conectado a una pequeña computadora especial llamada enrutador o router (en inglés). Este enrutador cumple una función: tal como hace un señalizador en una estación de tren, el router se encarga de asegurar que el mensaje enviado desde un ordenador emisor llegue al destino correcto. Para que el ordenador B reciba un mensaje desde el ordenador A, este debe enviarlo primero al router, quien a su vez lo remite al ordenador B asegurándose que dicho mensaje no sea entregado a otro ordenador C.

          +

          Para resolver este problema, cada ordenador en una red está conectado a una pequeña computadora especial llamada enrutador o router (en inglés). Este enrutador cumple una única función: tal como hace un señalizador en una estación de tren, el router se encarga de asegurar que el mensaje enviado desde un ordenador emisor llegue al destino correcto. Para que el ordenador B reciba un mensaje desde el ordenador A, este último debe enviarlo primero al router, que a su vez lo remite al ordenador B asegurándose que dicho mensaje no sea entregado a otro ordenador C.

          Una vez que agregamos un enrutador al sistema, nuestra red de 10 ordenadores solo requiere 10 cables: un enchufe para cada ordenador y un enrutador con 10 enchufes.

          @@ -80,9 +80,9 @@

          Una red de redes

          Encontrando ordenadores

          -

          Si deseas enviar un mensaje a una computadora, debes especificar a cuál. Es por ello que todo ordenador conectado a una red cuenta con una dirección única que lo identifica, llamada “dirección IP” o Protocolo de Internet(IP de sus siglas en inglés Internet Protocol). Esta dirección está compuesta por una serie de cuatro números separados por puntos, por ejemplo: 192.168.2.10.

          +

          Si deseas enviar un mensaje a una computadora, debes especificar a cuál. Es por ello que todo ordenador conectado a una red cuenta con una dirección única que lo identifica, llamada “dirección IP” (siendo "IP" las siglas en inglés de Internet Protocol, o Protocolo de Internet). Esta dirección está compuesta por una serie de cuatro números separados por puntos, por ejemplo: 192.168.2.10.

          -

          Para los ordenadores es un identificador simple, pero los humanos tienen mayor dificultad a la hora de recordar y memorizar este tipo de dirección. Con el propósito de convertir esta serie numérica en algo que podamos asociar con mayor facilidad a la dirección IP se utiliza lo que conocemos como nombre de dominio. Por ejemplo, google.com es el nombre de dominio utilizado para sustituir la dirección IP 173.194.121.32. Así, usar un nombre de dominio es la manera más fácil para nosotros de identificar un ordenador a través de Internet.

          +

          Para los ordenadores es un identificador simple, pero los humanos tenemos mayor dificultad para recordar este tipo de direcciones. Con el propósito de convertir esta serie numérica en algo que podamos asociar con mayor facilidad a la dirección IP se utiliza lo que conocemos como nombre de dominio. Por ejemplo, google.com es el nombre de dominio utilizado para la dirección IP 173.194.121.32. Así, usar un nombre de dominio es la manera más fácil para nosotros de identificar un ordenador a través de Internet.

          Mostrar cómo un nombre de dominio sirve como alias a una dirección IP

          From 9bce439a19c4b090a46d49eb69d9cf5cd11a744b Mon Sep 17 00:00:00 2001 From: j1ngzoue Date: Thu, 14 Jul 2022 00:55:09 +0900 Subject: [PATCH 069/100] chore: change block-id First_steps_with_custom_properties to sample1 on EmbedLiveSample --- files/ja/web/css/using_css_custom_properties/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/ja/web/css/using_css_custom_properties/index.html b/files/ja/web/css/using_css_custom_properties/index.html index 6571a2ed14c255..39fa96786492a4 100644 --- a/files/ja/web/css/using_css_custom_properties/index.html +++ b/files/ja/web/css/using_css_custom_properties/index.html @@ -100,7 +100,7 @@

          +

          {{EmbedLiveSample("sample1",600,180)}}

          CSS 中に同じ宣言が繰り返し出てくることに注意してください。いろいろな場所で背景色が brown に設定されています。 CSS の宣言によっては、カスケードの上流でこれを宣言し、 CSS の継承によってこの問題を自然に解決することもできます。些末なプロジェクトを除いて、常にこの手法が使えるわけではありません。 {{cssxref(":root")}} 擬似クラスでカスタムプロパティを宣言し、文書内の必要な場所で使用することで、繰り返して書く必要性を減らすことができるのです。

          From b1409f377feab25de457ddef8e21852e59718a50 Mon Sep 17 00:00:00 2001 From: j1ngzoue Date: Thu, 14 Jul 2022 00:55:56 +0900 Subject: [PATCH 070/100] chore: change 'var()' words to link --- files/ja/web/css/using_css_custom_properties/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/ja/web/css/using_css_custom_properties/index.html b/files/ja/web/css/using_css_custom_properties/index.html index 39fa96786492a4..c6f87b0dcaf31e 100644 --- a/files/ja/web/css/using_css_custom_properties/index.html +++ b/files/ja/web/css/using_css_custom_properties/index.html @@ -14,7 +14,7 @@ ---
          {{cssref}}
          -

          カスタムプロパティ (CSS 変数カスケード変数と呼ばれることもあります) は、 CSS の作者によって作成され、文書全体で再利用可能な特定の値を含むエンティティです。それらは、カスタムプロパティ記法 (たとえば、--main-color: black;) によって設定し、 var() 関数 (たとえば、 color: var(--main-color);) を使ってアクセスします。

          +

          カスタムプロパティ (CSS 変数カスケード変数と呼ばれることもあります) は、 CSS の作者によって作成され、文書全体で再利用可能な特定の値を含むエンティティです。それらは、カスタムプロパティ記法 (たとえば、--main-color: black;) によって設定し、 var() 関数 (たとえば、 color: var(--main-color);) を使ってアクセスします。

          複雑なウェブサイトには、膨大な量の CSS があり、しばしば同じ値が使われています。たとえば、同じ色が異なる場所で数百使われており、色を変更する場合、グローバルに検索し、置き換えをしなくてはなりません。カスタムプロパティを使えば、一ヶ所に値を保存しておき、複数の場所から参照することができます。更なるメリットとして、意味的な識別をしやすくなります。たとえば、 --main-text-color#00ff00 より、とりわけ同じ色がさまざまな文脈で使われる場合は理解しやすいでしょう。

          From 64ece283871a664b3b0d39f929d0bbf0fdde3182 Mon Sep 17 00:00:00 2001 From: Pedro Torcatt Date: Mon, 18 Jul 2022 12:28:14 -0400 Subject: [PATCH 071/100] Work in #4618 | Add: split section (#6941) * Work in #4618 | Add: split section * Update files/es/web/javascript/reference/global_objects/symbol/split/index.md Co-authored-by: Alexander --- .../global_objects/symbol/split/index.md | 47 +++++++++++++++++++ 1 file changed, 47 insertions(+) create mode 100644 files/es/web/javascript/reference/global_objects/symbol/split/index.md diff --git a/files/es/web/javascript/reference/global_objects/symbol/split/index.md b/files/es/web/javascript/reference/global_objects/symbol/split/index.md new file mode 100644 index 00000000000000..fa940a4a1975f0 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/symbol/split/index.md @@ -0,0 +1,47 @@ +--- +title: Symbol.split +slug: Web/JavaScript/Reference/Global_Objects/Symbol/split +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/split +original_slug: Web/JavaScript/Reference/Global_Objects/Symbol/split +browser-compat: javascript.builtins.Symbol.split +--- +{{JSRef}} + +El símbolo conocido como **`Symbol.split`** especifica el método que divide una cadena en los índices que coinciden con una expresión regular. Esta función es llamada por el método {{jsxref("String.prototype.split()")}}. + +Para más información, véase {{jsxref("RegExp.@@split", "RegExp.prototype[@@split]()")}} y {{jsxref("String.prototype.split()")}}. + +{{EmbedInteractiveExample("pages/js/symbol-split.html")}}{{js_property_attributes(0,0,0)}} + +## Ejemplos + +### División inversa personalizada + +```js +class ReverseSplit { + [Symbol.split](string) { + const array = string.split(' '); + return array.reverse(); + } +} + +console.log('Another one bites the dust'.split(new ReverseSplit())); +// resultado esperado: [ "dust", "the", "bites", "one", "Another" ] +``` + +## Especificaciones + +{{Specifications}} + +## Compatibilidad con navegadores + +{{Compat}} + +## Véase también + +- [Polyfill de `Symbol.split` en `core-js`](https://github.com/zloirock/core-js#ecmascript-symbol) +- {{jsxref("Symbol.match")}} +- {{jsxref("Symbol.replace")}} +- {{jsxref("Symbol.search")}} +- {{jsxref("RegExp.@@split", "RegExp.prototype[@@split]()")}} + From 1595a344616d67415b7c043508c59634d26d7ce3 Mon Sep 17 00:00:00 2001 From: lenemter Date: Tue, 19 Jul 2022 07:42:38 +0900 Subject: [PATCH 072/100] Remove double space (#6826) --- .../ru/web/css/css_transitions/using_css_transitions/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/ru/web/css/css_transitions/using_css_transitions/index.html b/files/ru/web/css/css_transitions/using_css_transitions/index.html index cc8122e59b52e9..395fe0aa741e12 100644 --- a/files/ru/web/css/css_transitions/using_css_transitions/index.html +++ b/files/ru/web/css/css_transitions/using_css_transitions/index.html @@ -9,7 +9,7 @@

          Анимации, составляющие переход между двумя состояниями, часто называют неявными переходами, так как промежуточные состояния в период между начальным и конечным состоянием неявно определяются браузером.A CSS transition tells the browser to draw the intermediate states between the initial and final states, showing the user a smooth transitions.

          -

          CSS переходы позволяют вам решить какие свойства нужно анимировать (перечислением их явно), когда анимация начнётся (установкой задержки), как долго переход будет выполняться (установкой  продолжительности), а также как она будет запущена (определением функции по времени, например линейно или быстро в начале, медленно в конце).

          +

          CSS переходы позволяют вам решить какие свойства нужно анимировать (перечислением их явно), когда анимация начнётся (установкой задержки), как долго переход будет выполняться (установкой продолжительности), а также как она будет запущена (определением функции по времени, например линейно или быстро в начале, медленно в конце).

          Замечание: CSS переходы могут использоваться без префиксов, однако спецификация только недавно достигла стабильности, префиксы по-прежнему необходимы для браузеров на WebKit. Они также необходимы для поддержки старых версий браузеров (таких как: Firefox 15, Opera 12 и более ранних). Таблица совместимости приведена внизу страницы с ещё большим количеством информации.
          From ee05c14153e2bfc1d86215bb687d8a6e3b270c07 Mon Sep 17 00:00:00 2001 From: lenemter Date: Tue, 19 Jul 2022 07:43:14 +0900 Subject: [PATCH 073/100] Remove extra space (#6858) --- files/ru/web/html/element/em/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/ru/web/html/element/em/index.html b/files/ru/web/html/element/em/index.html index 1c459f81179388..900febb6eea34e 100644 --- a/files/ru/web/html/element/em/index.html +++ b/files/ru/web/html/element/em/index.html @@ -50,7 +50,7 @@

          < i> против <em>

          Новые разработчики часто путаются, видя несколько элементов, которые дают аналогичные результаты. <em> и <i> являются общим примером, поскольку они оба выделяют текст курсивом. Какая разница? Что вы должны использовать?

          -

          По умолчанию визуальный результат тот же. Однако смысловое значение здесь другое. Элемент <em> представляет ударение на его содержании, в то время как элемент <i> представляет текст, который отличается от обычной прозы, например, иностранное слово, изречения вымышленного персонажа или когда текст ссылается на определение слова вместо представления его семантического значения. (Для названия произведения, например названия книги или фильма, следует использовать  <cite>.)

          +

          По умолчанию визуальный результат тот же. Однако смысловое значение здесь другое. Элемент <em> представляет ударение на его содержании, в то время как элемент <i> представляет текст, который отличается от обычной прозы, например, иностранное слово, изречения вымышленного персонажа или когда текст ссылается на определение слова вместо представления его семантического значения. (Для названия произведения, например названия книги или фильма, следует использовать <cite>.)

          Это означает, что правильное использование зависит от ситуации. Ни для чисто декоративных целей, это то, для чего предназначен CSS-стиль.

          From 750c46ad22ead8d0bb836ff86b662e39289bf7f6 Mon Sep 17 00:00:00 2001 From: Pavel Date: Tue, 19 Jul 2022 01:43:35 +0300 Subject: [PATCH 074/100] Update index.html (#6819) --- .../css/css_grid_layout/relationship_of_grid_layout/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/ru/web/css/css_grid_layout/relationship_of_grid_layout/index.html b/files/ru/web/css/css_grid_layout/relationship_of_grid_layout/index.html index 1e8690d0adc14f..d53bc51c413db0 100644 --- a/files/ru/web/css/css_grid_layout/relationship_of_grid_layout/index.html +++ b/files/ru/web/css/css_grid_layout/relationship_of_grid_layout/index.html @@ -16,7 +16,7 @@

          wrap . Это приведёт к тому, что если свободного пространства в нашем контейнере будет не хватать для размещения элемента в 200px, наши элементы спокойно перейдут на новую строку. 

          From 97a8bec03d0297b37ab78032acc881cb84520548 Mon Sep 17 00:00:00 2001 From: 55TTKKSS <38362441+55TTKKSS@users.noreply.github.com> Date: Mon, 18 Jul 2022 21:00:05 -0300 Subject: [PATCH 075/100] Update what_is_a_web_server [es] (#6958) * Update index.html * Update files/es/learn/common_questions/what_is_a_web_server/index.html Co-authored-by: Pedro Torcatt * Update files/es/learn/common_questions/what_is_a_web_server/index.html Co-authored-by: Pedro Torcatt Co-authored-by: Pedro Torcatt --- .../what_is_a_web_server/index.html | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/files/es/learn/common_questions/what_is_a_web_server/index.html b/files/es/learn/common_questions/what_is_a_web_server/index.html index a7ded29232f751..7d2013aca8a55b 100644 --- a/files/es/learn/common_questions/what_is_a_web_server/index.html +++ b/files/es/learn/common_questions/what_is_a_web_server/index.html @@ -30,29 +30,29 @@

          Sumario

          Con "Servidor web" podemos referirnos a hardware o software, o a ambos trabajando juntos.

            -
          1. En cuanto a hardware, un servidor web es una computadora que almacena los archivos que componen un sitio web (ej.  documentos HTML , imágenes, hojas de estilos CSS y archivo JavaScript) y los entrega al dispositivo del usuario final. Está conectado a internet y es accesible a través de un nombre de dominio como mozilla.org.
          2. -
          3. En cuanto a software, un servidor web tiene muchas partes encargadas del control sobre cómo tienen acceso los usuarios a los archivos, por lo menos un servidor HTTP. Un servidor HTTP es una pieza de software que comprende {{Glossary("URL","URLs")}} (direcciones web) y {{Glossary("HTTP")}} (el protocolo que tu navegador usa para ver las páginas web).
          4. +
          5. En cuanto a hardware, un servidor web es una computadora que almacena el software de servidor web, y los archivos que componen un sitio web (por ejemplo, documentos HTML, imágenes, hojas de estilos CSS y archivos JavaScript). Un servidor web -hardware- se conecta a internet y mantiene el intercambio de datos con otros dispositivos conectados a la web.
          6. +
          7. En cuanto a software, un servidor web tiene muchas partes que controlan cómo los usuarios de la web obtienen acceso a los archivos alojados en el servidor; es decir, mínimamente, un servidor HTTP. Un servidor HTTP es una pieza de software capaz de comprender {{Glossary("URL","URLs")}} (direcciones web) y {{Glossary("HTTP")}} (el protocolo que tu navegador usa para obtener las páginas web). Un servidor HTTP puede ser accedido a través de los nombres de dominio de los sitios web que aloja, y entrega el contenido de esos sitios web alojados al dispositivo del usuario final.
          -

          Al nivel más básico, siempre que un navegador necesite un archivo almacenado en un  servidor web, el navegador hará una solicitud al servidor mediante la vía HTTP. Cuando la petición llega al servidor web correcto (hardware), el  servidor HTTP  (software) envía el archivo antes solicitado, tambien a través de HTTP.

          +

          Al nivel más básico, cuando un navegador necesita un archivo que está almacenado en un servidor web, el navegador requerirá el archivo al servidor mediante el protocolo HTTP. Cuando la petición alcanza al servidor web correcto (hardware), el servidor HTTP (software) acepta la solicitud, encuentra el documento requerido y lo envía de regreso al navegador, tambien a través de HTTP. (Si el servidor no encuentra el documento requerido, devuelve una respuesta [404](/es/docs/Web/HTTP/Status/404) en su lugar.)

          -

          Basic representation of a client/server connection through HTTP

          +

          Representación básica de una conexión cliente/servidor a través de HTTP

          -

          Para publicar un sitio web, necesitarás un servidor web dinámico o estático.

          +

          Para publicar un sitio web, necesitarás un servidor web estático o dinámico.

          -

          Un servidor web estático, o pila, consiste en una computadora (hardware) con un servidor HTTP (software). Llamamos a este "estático" debido a que el servidor envía los archivos almacenados "tal cual" a tu navegador.

          +

          Un servidor web estático, o pila, consiste en una computadora (hardware) con un servidor HTTP (software). Llamamos a "estático" a este servidor porque envía los archivos que aloja "tal como se encuentran" (sin modificarlos) a tu navegador.

          -

          Un servidor web dinámico consiste en un servidor web estático con un software extra , lo común es que sea una aplicación servidor y una  base de datos. Llamamos a esto "dinámico" por que la aplicacion servidor actualiza los archivos almacenados en la base de datos antes de enviarlos mediante el servidor HTTP.

          +

          Un servidor web dinámico consiste en un servidor web estático con software adicional, habitualmente una aplicación servidor y una base de datos. Llamamos "dinámico" a este servidor porque la aplicacion servidor actualiza los archivos alojados, antes de enviar el contenido a tu navegador mediante el servidor HTTP.

          -

          Por ejemplo, para ver la página que ves en tu navegador finalmente, el servidor aplicación puede mostrar el diseño HTML con contenido desde una base de datos. Sitios como MDN o Wikipedia tienen cientos de páginas web, que no son realmente archivos HTML, si no una estrucura HTML asociada a una gigantesca base de datos. Esto hace mas fácil y rápido el mantenimiento y entrega del contenido.

          +

          Por ejemplo, para producir las páginas web que finalmente ves en tu navegador, la aplicación servidor podría llenar una plantilla HTML con contenido obtenido de una base de datos. Sitios como MDN o Wikipedia tienen miles de páginas web, que no son realmente archivos HTML. Típicamente, este tipo de sitios se componen de unas pocas plantillas HTML y una gigantesca base de datos, en vez de miles de documentos HTML estáticos. Esto hace mas fácil el mantenimiento y entrega del contenido.

          Aprendizaje activo

          -

          No hay aprendizaje activo disponible. Por favor, considere colaborar.

          +

          No hay aprendizaje activo disponible. Por favor, considere colaborar.

          Inmersión más profunda

          -

          Para recuperar una página web, como ya dijimos, su navegador envía una solicitud al servidor web, que procede a buscar el archivo solicitado en su propio espacio de almacenamiento. Al encontrar el archivo, el servidor lo lee, lo procesa según sea necesario y lo envía al navegador. Veamos esos pasos con más detalle.

          +

          Recapitulando: para obtener una página web, como ya dijimos, tu navegador envía una solicitud al servidor web, que procede a buscar el archivo solicitado en su propio espacio de almacenamiento. Encontrado el archivo, el servidor lo lee, lo procesa según sea necesario y lo envía al navegador. Veamos esos pasos con más detalle.

          Alojamiento de archivos (Hosting)

          From 3f4b7583fb6dddd684925cb2d555edd1156f3d94 Mon Sep 17 00:00:00 2001 From: Luan AP Date: Mon, 18 Jul 2022 21:05:38 -0300 Subject: [PATCH 076/100] Add pt-br translation (#6552) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Add pt-br translation * Update files/pt-br/mozilla/add-ons/webextensions/api/browsingdata/removecookies/index.md Co-authored-by: Nathália Pissuti Co-authored-by: Nathália Pissuti --- .../api/browsingdata/removecookies/index.md | 125 ++++++++++++++++++ 1 file changed, 125 insertions(+) create mode 100644 files/pt-br/mozilla/add-ons/webextensions/api/browsingdata/removecookies/index.md diff --git a/files/pt-br/mozilla/add-ons/webextensions/api/browsingdata/removecookies/index.md b/files/pt-br/mozilla/add-ons/webextensions/api/browsingdata/removecookies/index.md new file mode 100644 index 00000000000000..1350626066ed20 --- /dev/null +++ b/files/pt-br/mozilla/add-ons/webextensions/api/browsingdata/removecookies/index.md @@ -0,0 +1,125 @@ +--- +title: browsingData.removeCookies() +slug: Mozilla/Add-ons/WebExtensions/API/browsingData/removeCookies +tags: + - API + - Add-ons + - Extensions + - Method + - Reference + - WebExtensions + - browsingData + - removeCookies +browser-compat: webextensions.api.browsingData.removeCookies +translation-of: Mozilla/Add-ons/WebExtensions/API/browsingData/removeCookies +--- +{{AddonSidebar()}} + +Limpa os cookies do navegador. + +Você pode usar o parâmetro `removalOptions`, em que é um objeto {{WebExtAPIRef("browsingData.RemovalOptions")}}, para: + +- limpar apenas os cookies criados em determinado tempo. +- controlar se limpar os cookies apenas de uma página web normal ou limpa os cookies de um app e extensões hospedados. + +Esta é uma função assíncrona que retorna uma [`Promise`](/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Promise). + +## Sintaxe + +```js +let removing = browser.browsingData.removeCookies( + removalOptions // objeto RemovalOptions +) +``` + +### Parâmetros + +- `removalOptions` + - : `object`. Um objeto {{WebExtAPIRef("browsingData.RemovalOptions")}}, que pode ser usado para limpar apenas cookies criados depois de determinado tempo, e limpa os cookies apenas de uma página web normal ou limpa os cookies de apps e extensões hospedados. + +### Valor retornado + +Uma [`Promise`](/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Promise) que será realizada sem argumentos quando a remoção for finalizada. Se ocorrer qualquer erro, a promise será rejeitada com uma mensagem de erro. + +## Exemplos + +Remove cookies criados na última semana: + +```js +function onRemoved() { + console.log("removido"); +} + +function onError(error) { + console.error(error); +} + +function weekInMilliseconds() { + return 1000 * 60 * 60 * 24 * 7; +} + +let oneWeekAgo = (new Date()).getTime() - weekInMilliseconds(); + +browser.browsingData.removeCookies( + {since: oneWeekAgo}). +then(onRemoved, onError); +``` + +Remove todos os cookies: + +> **Warning:** Usar a API para remover todos os cookies irá, simultâneamente, limpar todos os objetos local storage (incluindo aqueles de outras extensões) +> +> Se você quer limpar todos os cookies sem alterar as informações do local storage, use [browser.cookies](/pt-BR/docs/Mozilla/Add-ons/WebExtensions/API/cookies) para percorrer and remover os conteúdos de todos os cookies armazenados + +```js +function onRemoved() { + console.log("removido"); +} + +function onError(error) { + console.error(error); +} + +browser.browsingData.removeCookies({}). +then(onRemoved, onError); +``` + +## Compatibilidade com navegadores + +{{Compat}} + +{{WebExtExamples}} + + +> **Note:** Esta API é baseada na API do Chromium [`chrome.browsingData`](https://developer.chrome.com/docs/extensions/reference/browsingData/). +> +> A compatibilidade dos dados do Microsoft Edge é fornecida pela Microsoft Corporation e é incluída aqui sob a licença Creative Commons Attribution 3.0 United States. + + From 755f0af3263ea70f415697e16fc3c08680d1bdbc Mon Sep 17 00:00:00 2001 From: Mike Paiva <52380059+mikepaiva@users.noreply.github.com> Date: Mon, 18 Jul 2022 21:12:29 -0300 Subject: [PATCH 077/100] Update index.html (#4458) --- files/pt-br/web/http/status/302/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/pt-br/web/http/status/302/index.html b/files/pt-br/web/http/status/302/index.html index 0e210de5f64c64..476fdfe93b12a4 100644 --- a/files/pt-br/web/http/status/302/index.html +++ b/files/pt-br/web/http/status/302/index.html @@ -46,6 +46,6 @@

          Veja também

          • {{HTTPStatus("307", "307 Temporary Redirect")}}, o equivalente a esse código de estado quando o método utilizado nunca é alterado.
          • -
          • {{HTTPStatus("303", "303 See Other")}}, um redirecionamento tmeporario que altera o método utilizado para {{HTTPMethod("GET")}}.
          • +
          • {{HTTPStatus("303", "303 See Other")}}, um redirecionamento temporário que altera o método utilizado para {{HTTPMethod("GET")}}.
          • {{HTTPStatus("301", "301 Moved Permanently")}}, o redirecionamento permanente.
          From 899c462cc7bb043aad7bd264079b5eb0de1eb25b Mon Sep 17 00:00:00 2001 From: MDN Date: Tue, 19 Jul 2022 00:19:43 +0000 Subject: [PATCH 078/100] [CRON] sync translated content --- files/ja/_redirects.txt | 1 + files/ja/_wikihistory.json | 12 ++++++------ .../api/htmlinputelement/invalid_event}/index.html | 3 ++- files/zh-cn/_redirects.txt | 1 + files/zh-cn/_wikihistory.json | 12 ++++++------ .../api/htmlinputelement/invalid_event}/index.html | 3 ++- 6 files changed, 18 insertions(+), 14 deletions(-) rename files/ja/{web/api/globaleventhandlers/oninvalid => conflicting/web/api/htmlinputelement/invalid_event}/index.html (96%) rename files/zh-cn/{web/api/globaleventhandlers/oninvalid => conflicting/web/api/htmlinputelement/invalid_event}/index.html (95%) diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt index 8071e0b0b29adb..912074899c1099 100644 --- a/files/ja/_redirects.txt +++ b/files/ja/_redirects.txt @@ -3234,6 +3234,7 @@ /ja/docs/Web/API/GlobalEventHandlers/onfocus /ja/docs/Web/API/Window/focus_event /ja/docs/Web/API/GlobalEventHandlers/onformdata /ja/docs/conflicting/Web/API/HTMLFormElement/formdata_event /ja/docs/Web/API/GlobalEventHandlers/oninput /ja/docs/conflicting/Web/API/HTMLElement/input_event +/ja/docs/Web/API/GlobalEventHandlers/oninvalid /ja/docs/conflicting/Web/API/HTMLInputElement/invalid_event /ja/docs/Web/API/GlobalEventHandlers/onkeydown /ja/docs/conflicting/Web/API/Element/keydown_event /ja/docs/Web/API/GlobalEventHandlers/onkeypress /ja/docs/Web/API/Element/keypress_event /ja/docs/Web/API/GlobalEventHandlers/onkeyup /ja/docs/conflicting/Web/API/Element/keyup_event diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json index 85187814fb23f7..8ce72c7039bd04 100644 --- a/files/ja/_wikihistory.json +++ b/files/ja/_wikihistory.json @@ -14259,12 +14259,6 @@ "Wind1808" ] }, - "Web/API/GlobalEventHandlers/oninvalid": { - "modified": "2020-10-28T07:14:06.761Z", - "contributors": [ - "mpcjazz" - ] - }, "Web/API/GlobalEventHandlers/onload": { "modified": "2019-03-23T23:29:36.980Z", "contributors": [ @@ -46818,6 +46812,12 @@ "MakeNowJust" ] }, + "conflicting/Web/API/HTMLInputElement/invalid_event": { + "modified": "2020-10-28T07:14:06.761Z", + "contributors": [ + "mpcjazz" + ] + }, "conflicting/Web/API/HTMLInputElement/select_event": { "modified": "2020-10-15T21:23:44.292Z", "contributors": [ diff --git a/files/ja/web/api/globaleventhandlers/oninvalid/index.html b/files/ja/conflicting/web/api/htmlinputelement/invalid_event/index.html similarity index 96% rename from files/ja/web/api/globaleventhandlers/oninvalid/index.html rename to files/ja/conflicting/web/api/htmlinputelement/invalid_event/index.html index 8b1666483795a9..2646d2ab8836dd 100644 --- a/files/ja/web/api/globaleventhandlers/oninvalid/index.html +++ b/files/ja/conflicting/web/api/htmlinputelement/invalid_event/index.html @@ -1,6 +1,6 @@ --- title: GlobalEventHandlers.oninvalid -slug: Web/API/GlobalEventHandlers/oninvalid +slug: conflicting/Web/API/HTMLInputElement/invalid_event tags: - API - Event Handler @@ -8,6 +8,7 @@ - Property - Reference translation_of: Web/API/GlobalEventHandlers/oninvalid +original_slug: Web/API/GlobalEventHandlers/oninvalid ---
          {{ ApiRef("HTML DOM") }}
          diff --git a/files/zh-cn/_redirects.txt b/files/zh-cn/_redirects.txt index 95092b83872431..f6791cf9a62c85 100644 --- a/files/zh-cn/_redirects.txt +++ b/files/zh-cn/_redirects.txt @@ -1478,6 +1478,7 @@ /zh-CN/docs/Web/API/GlobalEventHandlers/onfocus /zh-CN/docs/conflicting/Web/API/Window/focus_event /zh-CN/docs/Web/API/GlobalEventHandlers/onformdata /zh-CN/docs/Web/API/HTMLFormElement/formdata_event /zh-CN/docs/Web/API/GlobalEventHandlers/oninput /zh-CN/docs/conflicting/Web/API/HTMLElement/input_event +/zh-CN/docs/Web/API/GlobalEventHandlers/oninvalid /zh-CN/docs/conflicting/Web/API/HTMLInputElement/invalid_event /zh-CN/docs/Web/API/GlobalEventHandlers/onkeydown /zh-CN/docs/conflicting/Web/API/Element/keydown_event /zh-CN/docs/Web/API/GlobalEventHandlers/onkeypress /zh-CN/docs/conflicting/Web/API/Element/keypress_event /zh-CN/docs/Web/API/GlobalEventHandlers/onkeyup /zh-CN/docs/conflicting/Web/API/Element/keyup_event diff --git a/files/zh-cn/_wikihistory.json b/files/zh-cn/_wikihistory.json index 73b4985bfd36b0..0774217d2105e8 100644 --- a/files/zh-cn/_wikihistory.json +++ b/files/zh-cn/_wikihistory.json @@ -13266,12 +13266,6 @@ "876843240" ] }, - "Web/API/GlobalEventHandlers/oninvalid": { - "modified": "2020-10-15T22:15:01.666Z", - "contributors": [ - "chenqingyue" - ] - }, "Web/API/GlobalEventHandlers/onload": { "modified": "2019-03-23T23:15:22.431Z", "contributors": [ @@ -45869,6 +45863,12 @@ "ziyunfei" ] }, + "conflicting/Web/API/HTMLInputElement/invalid_event": { + "modified": "2020-10-15T22:15:01.666Z", + "contributors": [ + "chenqingyue" + ] + }, "conflicting/Web/API/HTMLInputElement/select_event": { "modified": "2019-03-24T00:16:24.778Z", "contributors": [ diff --git a/files/zh-cn/web/api/globaleventhandlers/oninvalid/index.html b/files/zh-cn/conflicting/web/api/htmlinputelement/invalid_event/index.html similarity index 95% rename from files/zh-cn/web/api/globaleventhandlers/oninvalid/index.html rename to files/zh-cn/conflicting/web/api/htmlinputelement/invalid_event/index.html index 4a57ba37e75759..99d199de0e82d8 100644 --- a/files/zh-cn/web/api/globaleventhandlers/oninvalid/index.html +++ b/files/zh-cn/conflicting/web/api/htmlinputelement/invalid_event/index.html @@ -1,6 +1,6 @@ --- title: GlobalEventHandlers.oninvalid -slug: Web/API/GlobalEventHandlers/oninvalid +slug: conflicting/Web/API/HTMLInputElement/invalid_event tags: - API - GlobalEventHandlers @@ -8,6 +8,7 @@ - 属性 - 引用 translation_of: Web/API/GlobalEventHandlers/oninvalid +original_slug: Web/API/GlobalEventHandlers/oninvalid ---
          {{ ApiRef("HTML DOM") }}
          From afc12bee3fa94893646104a8d1f79c7006408552 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9E=97=E6=9E=97?= Date: Tue, 19 Jul 2022 09:26:24 +0800 Subject: [PATCH 079/100] add zh-CN translation: Sec-CH-UA-Full-Version (#6979) * add translation * Update index.md * Apply suggestions from code review Co-authored-by: A1lo * Update index.md Co-authored-by: A1lo --- .../headers/sec-ch-ua-full-version/index.md | 81 +++++++++++++++++++ 1 file changed, 81 insertions(+) create mode 100644 files/zh-cn/web/http/headers/sec-ch-ua-full-version/index.md diff --git a/files/zh-cn/web/http/headers/sec-ch-ua-full-version/index.md b/files/zh-cn/web/http/headers/sec-ch-ua-full-version/index.md new file mode 100644 index 00000000000000..4f828572cdcf96 --- /dev/null +++ b/files/zh-cn/web/http/headers/sec-ch-ua-full-version/index.md @@ -0,0 +1,81 @@ +--- +title: Sec-CH-UA-Full-Version +slug: Web/HTTP/Headers/Sec-CH-UA-Full-Version +tags: + - Sec-CH-UA-Full-Version + - Client hint + - HTTP + - HTTP Header + - Reference + - Request header + - Experimental +translation_of: Web/HTTP/Headers/Sec-CH-UA-Full-Version +--- +{{HTTPSidebar}} {{deprecated_header}} {{securecontext_header}} + +> **备注:** 这个标头将被 {{HTTPHeader("Sec-CH-UA-Full-Version-List")}} 替代。 + +**`Sec-CH-UA-Full-Version`** [用户代理客户端提示](/zh-CN/docs/Web/HTTP/Client_hints#user-agent_client_hints)请求标头提供用户代理完整的版本字符串。 + + + + + + + + + + + + +
          标头类型 + {{Glossary("Request header")}}、客户端提示 +
          {{Glossary("Forbidden header name")}}
          + +## 语法 + +```http +Sec-CH-UA-Full-Version: +``` + +### 指令 + +- `` + - : 包含完整版本号的字符串,如“96.0.4664.93”。 + +## 示例 + +服务器请求 `Sec-CH-UA-Full-Version` 标头的方法是在任何来自客户端的请求*响应*中添加 {{HTTPHeader("Accept-CH")}},使用所需标头的名称作为它的令牌(token): + +```http +HTTP/1.1 200 OK +Accept-CH: Sec-CH-UA-Full-Version +``` + +客户端可以选择提供提示(hint),并将 `Sec-CH-UA-Full-Version` 标头添加到后续的请求中。例如,客户端可能会添加标头,如下所示: + +```http +GET /GET /my/page HTTP/1.1 +Host: example.site + +Sec-CH-UA: " Not A;Brand";v="99", "Chromium";v="96", "Google Chrome";v="96" +Sec-CH-UA-Mobile: ?0 +Sec-CH-UA-Full-Version: "96.0.4664.110" +Sec-CH-UA-Platform: "Windows" +``` + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- [客户端提示](/zh-CN/docs/Web/HTTP/Client_hints) +- [用户代理客户端提示 API](/zh-CN/docs/Web/API/User-Agent_Client_Hints_API) +- [通过用户代理客户端提示改善用户隐私和开发人员体验](https://web.dev/user-agent-client-hints/)(web.dev) +- {{HTTPHeader("Accept-CH")}} +- [HTTP 缓存 > Vary 响应](/zh-CN/docs/Web/HTTP/Caching#vary_响应)和 {{HTTPHeader("Vary")}} From f44fd75c64d39d76684f6deea5fea5f3199fe74f Mon Sep 17 00:00:00 2001 From: yunojang <54504352+yunojang@users.noreply.github.com> Date: Tue, 19 Jul 2022 11:29:32 +0900 Subject: [PATCH 080/100] ko: fix typo (#6981) --- files/ko/web/http/basics_of_http/mime_types/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/ko/web/http/basics_of_http/mime_types/index.html b/files/ko/web/http/basics_of_http/mime_types/index.html index 9b2ee96c875ab4..cda1b2ba536433 100644 --- a/files/ko/web/http/basics_of_http/mime_types/index.html +++ b/files/ko/web/http/basics_of_http/mime_types/index.html @@ -294,7 +294,7 @@

          정확한 MIME 타입 설정

          MIME 스니핑

          -

          MIME 타입이 없을 때, 혹은 클라이언트가 타입이 잘못 설정됐다고 판단한 어떤 다른 경우에, 브라우저들은 MIME 스니핑을 시도할 수도 있는데, 이는 리소스를 훑어보고 정확한 MIME 타입을 추축해내는 것입니다. 각각의 브라우저들은 이런 과정을 다른 방식으로, 다른 환경 속에서 처리해냅니다. 이런 과정에 관한 몇 가지 보안 관련 사항들이 있는데, 몇몇 MIME 타입들은 실행 가능한 컨텐츠를 나타내고 다른 타입들은 그렇지 않기 때문입니다. 서버들은 {{HTTPHeader("Content-Type")}} 중에 {{HTTPHeader("X-Content-Type-Options")}}를 전송하여 이런 MIME 스니핑을 차단할 수 있습니다.

          +

          MIME 타입이 없을 때, 혹은 클라이언트가 타입이 잘못 설정됐다고 판단한 어떤 다른 경우에, 브라우저들은 MIME 스니핑을 시도할 수도 있는데, 이는 리소스를 훑어보고 정확한 MIME 타입을 추측 해내는 것입니다. 각각의 브라우저들은 이런 과정을 다른 방식으로, 다른 환경 속에서 처리해냅니다. 이런 과정에 관한 몇 가지 보안 관련 사항들이 있는데, 몇몇 MIME 타입들은 실행 가능한 컨텐츠를 나타내고 다른 타입들은 그렇지 않기 때문입니다. 서버들은 {{HTTPHeader("Content-Type")}} 중에{{HTTPHeader("X-Content-Type-Options")}}를 전송하여 이런 MIME 스니핑을 차단할 수 있습니다.

          함께 참고할 내용

          From 8c6334fcb95af4a9b7e3dbd64186048969077634 Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Tue, 19 Jul 2022 06:04:02 +0200 Subject: [PATCH 081/100] Remove conflicting pages as of 20220718 (#6950) remove-redirect --- files/fr/_redirects.txt | 10 +- .../api/element/transitionend_event/index.md | 150 ------------------ .../reference/errors/unexpected_type/index.md | 65 -------- 3 files changed, 6 insertions(+), 219 deletions(-) delete mode 100644 files/fr/conflicting/web/api/element/transitionend_event/index.md delete mode 100644 files/fr/conflicting/web/javascript/reference/errors/unexpected_type/index.md diff --git a/files/fr/_redirects.txt b/files/fr/_redirects.txt index 5bd28524a2b297..3197f6bba960a8 100644 --- a/files/fr/_redirects.txt +++ b/files/fr/_redirects.txt @@ -3817,7 +3817,7 @@ /fr/docs/Web/API/HTMLElement/animationend_event /fr/docs/Web/API/Element/animationend_event /fr/docs/Web/API/HTMLElement/animationiteration_event /fr/docs/Web/API/Element/animationiteration_event /fr/docs/Web/API/HTMLElement/animationstart_event /fr/docs/Web/API/Element/animationstart_event -/fr/docs/Web/API/HTMLElement/transitionend_event /fr/docs/conflicting/Web/API/Element/transitionend_event +/fr/docs/Web/API/HTMLElement/transitionend_event /fr/docs/Web/API/Element/transitionend_event /fr/docs/Web/API/HTMLFormElement/submit_event_ /fr/docs/Web/API/HTMLFormElement/submit_event /fr/docs/Web/API/HTMLOrForeignElement/blur /fr/docs/Web/API/HTMLElement/blur /fr/docs/Web/API/HTMLOrForeignElement/dataset /fr/docs/Web/API/HTMLElement/dataset @@ -4549,7 +4549,7 @@ /fr/docs/Web/Events/storage /fr/docs/Web/API/Window/storage_event /fr/docs/Web/Events/submit /fr/docs/Web/API/HTMLFormElement/submit_event /fr/docs/Web/Events/touchend /fr/docs/Web/API/Document/touchend_event -/fr/docs/Web/Events/transitionend /fr/docs/conflicting/Web/API/Element/transitionend_event +/fr/docs/Web/Events/transitionend /fr/docs/Web/API/Element/transitionend_event /fr/docs/Web/Events/unload /fr/docs/Web/API/Window/unload_event /fr/docs/Web/Guide/AJAX/Communauté /fr/docs/Web/Guide/AJAX/Community /fr/docs/Web/Guide/AJAX/Premiers_pas /fr/docs/Web/Guide/AJAX/Getting_Started @@ -4799,7 +4799,7 @@ /fr/docs/Web/JavaScript/Reference/Erreurs/Bad_return_or_yield /fr/docs/Web/JavaScript/Reference/Errors/Bad_return_or_yield /fr/docs/Web/JavaScript/Reference/Erreurs/Called_on_incompatible_type /fr/docs/Web/JavaScript/Reference/Errors/Called_on_incompatible_type /fr/docs/Web/JavaScript/Reference/Erreurs/Cant_access_lexical_declaration_before_init /fr/docs/Web/JavaScript/Reference/Errors/Cant_access_lexical_declaration_before_init -/fr/docs/Web/JavaScript/Reference/Erreurs/Cant_access_property /fr/docs/conflicting/Web/JavaScript/Reference/Errors/Unexpected_type +/fr/docs/Web/JavaScript/Reference/Erreurs/Cant_access_property /fr/docs/Web/JavaScript/Reference/Errors/Unexpected_type /fr/docs/Web/JavaScript/Reference/Erreurs/Cant_assign_to_property /fr/docs/Web/JavaScript/Reference/Errors/Cant_assign_to_property /fr/docs/Web/JavaScript/Reference/Erreurs/Cant_define_property_object_not_extensible /fr/docs/Web/JavaScript/Reference/Errors/Cant_define_property_object_not_extensible /fr/docs/Web/JavaScript/Reference/Erreurs/Cant_delete /fr/docs/Web/JavaScript/Reference/Errors/Cant_delete @@ -4867,7 +4867,7 @@ /fr/docs/Web/JavaScript/Reference/Erreurs/in_operator_no_object /fr/docs/Web/JavaScript/Reference/Errors/in_operator_no_object /fr/docs/Web/JavaScript/Reference/Erreurs/invalid_right_hand_side_instanceof_operand /fr/docs/Web/JavaScript/Reference/Errors/invalid_right_hand_side_instanceof_operand /fr/docs/Web/JavaScript/Reference/Erreurs/is_not_iterable /fr/docs/Web/JavaScript/Reference/Errors/is_not_iterable -/fr/docs/Web/JavaScript/Reference/Errors/Cant_access_property /fr/docs/conflicting/Web/JavaScript/Reference/Errors/Unexpected_type +/fr/docs/Web/JavaScript/Reference/Errors/Cant_access_property /fr/docs/Web/JavaScript/Reference/Errors/Unexpected_type /fr/docs/Web/JavaScript/Reference/Fonctions /fr/docs/Web/JavaScript/Reference/Functions /fr/docs/Web/JavaScript/Reference/Fonctions/Définition_de_méthode /fr/docs/Web/JavaScript/Reference/Functions/Method_definitions /fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fléchées /fr/docs/Web/JavaScript/Reference/Functions/Arrow_functions @@ -6166,6 +6166,7 @@ /fr/docs/conflicting/Web/API/Element/mouseout_event /fr/docs/Web/API/Element/mouseout_event /fr/docs/conflicting/Web/API/Element/mouseover_event /fr/docs/Web/API/Element/mouseover_event /fr/docs/conflicting/Web/API/Element/mouseup_event /fr/docs/Web/API/Element/mouseup_event +/fr/docs/conflicting/Web/API/Element/transitionend_event /fr/docs/Web/API/Element/transitionend_event /fr/docs/conflicting/Web/API/EventTarget/addEventListener /fr/docs/Web/API/EventTarget/addEventListener /fr/docs/conflicting/Web/API/File_and_Directory_Entries_API /fr/docs/Web/API/File_and_Directory_Entries_API /fr/docs/conflicting/Web/API/FormData/Using_FormData_Objects /fr/docs/Web/API/FormData/Using_FormData_Objects @@ -6282,6 +6283,7 @@ /fr/docs/conflicting/Web/JavaScript/Guide/Introduction_6f341ba6db4b060ccbd8dce4a0d5214b /fr/docs/Web/JavaScript/Guide/Introduction /fr/docs/conflicting/Web/JavaScript/Guide/Regular_Expressions/Assertions /fr/docs/Web/JavaScript/Guide/Regular_Expressions/Assertions /fr/docs/conflicting/Web/JavaScript/Inheritance_and_the_prototype_chain /fr/docs/Web/JavaScript/Inheritance_and_the_prototype_chain +/fr/docs/conflicting/Web/JavaScript/Reference/Errors/Unexpected_type /fr/docs/Web/JavaScript/Reference/Errors/Unexpected_type /fr/docs/conflicting/Web/JavaScript/Reference/Global_Objects /fr/docs/Web/JavaScript/Reference/Global_Objects /fr/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Array/toString /fr/docs/Web/JavaScript/Reference/Global_Objects/Array/toString /fr/docs/conflicting/Web/JavaScript/Reference/Global_Objects/ArrayBuffer /fr/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer diff --git a/files/fr/conflicting/web/api/element/transitionend_event/index.md b/files/fr/conflicting/web/api/element/transitionend_event/index.md deleted file mode 100644 index 18893089aca2ee..00000000000000 --- a/files/fr/conflicting/web/api/element/transitionend_event/index.md +++ /dev/null @@ -1,150 +0,0 @@ ---- -title: transitionend -slug: conflicting/Web/API/Element/transitionend_event -tags: - - DOM - - Event - - TransitionEvent - - Transitions CSS - - Transitions CSS3 - - transitionend -translation_of: Web/API/HTMLElement/transitionend_event -original_slug: Web/API/HTMLElement/transitionend_event ---- -{{APIRef}} - -L'événement **`transitionend`** est déclenché lorsqu'une [transition CSS](/en-US/docs/CSS/Using_CSS_transitions) est terminée. Dans le cas où une transition est supprimée avant la fin, par exemple si {{cssxref ("transition-property")}} est supprimé ou {{cssxref ("display")}} est défini sur `none`, alors l'événement ne pourra pas être généré. - - - - - - - - - - - - - - - - - - - - -
          BullesOui
          AnnulableOui
          Interface{{domxref("TransitionEvent")}}
          Propriété de gestionnaire d'événements - {{domxref("GlobalEventHandlers/ontransitionend", "ontransitionend")}} -
          - -L'événement `transitionend` est déclenché dans les deux sens - à la fin de la transition vers l'état de transition et lorsqu'il revient complètement à l'état par défaut ou sans transition. S'il n'y a pas de délai ou de durée de transition, si les deux sont 0 ou qu'aucun n'est déclaré, il n'y a pas de transition et aucun des événements de transition n'est déclenché. Si l'événement `transitioncancel` est déclenché, l'événement `transitionend` ne se déclenchera pas. - -## Propriétés - -| Propriétés | Type | Description | -| ---------------------------------------- | ------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `target` {{readonlyInline}} | {{domxref("EventTarget")}} | The event target (the topmost target in the DOM tree). | -| `type` {{readonlyInline}} | {{domxref("DOMString")}} | The type of event. | -| `bubbles` {{readonlyInline}} | {{jsxref("Boolean")}} | Whether the event normally bubbles or not. | -| `cancelable` {{readonlyInline}} | {{jsxref("Boolean")}} | Whether the event is cancellable or not. | -| `propertyName` {{readonlyInline}} | {{domxref("DOMString")}} | The name of the CSS property associated with the transition. | -| `elapsedTime` {{readonlyInline}} | Float | The amount of time the transition has been running, in seconds, as of the time the event was generated. This value is not affected by the value of `transition-delay`. | -| `pseudoElement` {{readonlyInline}} | {{domxref("DOMString")}} | The name (beginning with two colons) of the CSS pseudo-element on which the transition occured (in which case the target of the event is that pseudo-element's corresponding element), or the empty string if the transition occurred on an element (which means the target of the event is that element). | - -## Examples - -This code gets an element that has a transition defined and adds a listener to the `transitionend` event: - -```js -const transition = document.querySelector('.transition'); - -transition.addEventListener('transitionend', () => { - console.log('Transition ended'); -}); -``` - -The same, but using the {{domxref("GlobalEventHandlers/ontransitionend", "ontransitionend")}}: - -```js -const transition = document.querySelector('.transition'); - -transition.ontransitionend = () => { - console.log('Transition ended'); -}; -``` - -### Live example - -In the following example, we have a simple {{htmlelement("div")}} element, styled with a transition that includes a delay: - -```html -
          Hover over me
          -
          -``` - -```css -.transition { - width: 100px; - height: 100px; - background: rgba(255,0,0,1); - transition-property: transform background; - transition-duration: 2s; - transition-delay: 1s; -} - -.transition:hover { - transform: rotate(90deg); - background: rgba(255,0,0,0); -} -``` - -To this, we'll add some JavaScript to indicate that the [`transitionstart`](/en-US/docs/Web/API/HTMLElement/transitionstart_event), [`transitionrun`](/en-US/docs/Web/API/HTMLElement/transitionrun_event), [`transitioncancel`](/en-US/docs/Web/API/Window/transitioncancel_event) and `transitionend` events fire. In this example, to cancel the transition, stop hovering over the transitioning box before the transition ends. For the transition end event to fire, stay hovered over the transition until the transition ends. - -```js -const message = document.querySelector('.message'); -const el = document.querySelector('.transition'); - -el.addEventListener('transitionrun', function() { - message.textContent = 'transitionrun fired'; -}); - -el.addEventListener('transitionstart', function() { - message.textContent = 'transitionstart fired'; -}); - -el.addEventListener('transitioncancel', function() { - message.textContent = 'transitioncancel fired'; -}); - -el.addEventListener('transitionend', function() { - message.textContent = 'transitionend fired'; -}); -``` - -{{ EmbedLiveSample('Live_example', '100%', '150px') }} - -The `transitionend` event is fired in both directions: when the box finishes turning and the opacity hits 0 or 1, depending on the direction. - -If there is no transition delay or duration, if both are 0s or neither is declared, there is no transition, and none of the transition events are fired. - -If the `transitioncancel` event is fired, the `transitionend` event will not fire. - -## Spécifications - -| Spécification | Statut | Commentaire | -| ---------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- | -| {{SpecName("CSS3 Transitions", "#transitionend", "transitionend")}} | {{Spec2('CSS3 Transitions')}} | Définition initiale. | - -## Compatibilité des navigateurs - -{{Compat("api.HTMLElement.transitionend_event")}} - -## Voir également - -- Le gestionnaire d'événements {{domxref("GlobalEventHandlers.ontransitionend")}} -- L'interface {{domxref("TransitionEvent")}} -- Propriétés CSS : {{cssxref("transition")}}, {{cssxref("transition-delay")}}, {{cssxref("transition-duration")}}, {{cssxref("transition-property")}}, {{cssxref("transition-timing-function")}} -- Événements liés: {{domxref("HTMLElement/transitionrun_event", "transitionrun")}}, {{domxref("HTMLElement/transitionstart_event", "transitionstart")}}, {{domxref("HTMLElement/transitioncancel_event", "transitioncancel")}} -- Cet événement sur {{domxref("Document")}} cible : {{domxref("Document/transitionend_event", "transitionend")}} -- Cet événement sur {{domxref("Window")}} cible : {{domxref("Window/transitionend_event", "transitionend")}} diff --git a/files/fr/conflicting/web/javascript/reference/errors/unexpected_type/index.md b/files/fr/conflicting/web/javascript/reference/errors/unexpected_type/index.md deleted file mode 100644 index 8fed913afa54c6..00000000000000 --- a/files/fr/conflicting/web/javascript/reference/errors/unexpected_type/index.md +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: 'TypeError: can''t access property "x" of "y"' -slug: conflicting/Web/JavaScript/Reference/Errors/Unexpected_type -tags: - - Erreurs - - JavaScript - - TypeError -translation_of: Web/JavaScript/Reference/Errors/Cant_access_property -original_slug: Web/JavaScript/Reference/Errors/Cant_access_property ---- -{{jsSidebar("Errors")}} - -## Message - -``` -TypeError: Unable to get property {x} of undefined or null reference (Edge) -TypeError: can't access property {x} of {y} (Firefox) -TypeError: {y} is undefined, can't access property {x} of it (Firefox) -TypeError: {y} is null, can't access property {x} of it (Firefox) -``` - -Exemples : - -``` -TypeError: x is undefined, can't access property "prop" of it -TypeError: x is null, can't access property "prop" of it -TypeError: can't access property "prop" of undefined -TypeError: can't access property "prop" of null -``` - -## Types d'erreur - -{{jsxref("TypeError")}}. - -## Quel est le problème ? - -On a tenté d'accéder à une propriété sur la valeur {{jsxref("undefined")}} ou {{jsxref("null")}}. - -## Exemples - -### Cas invalides - -```js example-bad -// undefined et null ne possèdent aucune propriété et aucune méthode substring -var toto = undefined; -toto.substring(1); // TypeError: x is undefined, can't access property "substring" of it - -var toto = null; -toto.substring(1); // TypeError: x is null, can't access property "substring" of it -``` - -### Corriger le problème - -Pour détecter le cas où la valeur utilisée est `undefined` ou `null`, on peut utiliser l'opérateur [`typeof`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_typeof). Par exemple : - -```js -if (typeof toto !== 'undefined') { - // On sait alors que toto est bien défini et on peut utiliser ses propriétés s'il en a. -} -``` - -## Voir aussi - -- {{jsxref("undefined")}} -- {{jsxref("null")}} From fa9ad149edab830b1e1e1b1c46e786db38a17372 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9E=97=E6=9E=97?= Date: Tue, 19 Jul 2022 12:34:54 +0800 Subject: [PATCH 082/100] add zh-CN translation: Sec-CH-UA-Full-Version-List (#6980) * add new translation * Update index.md * Update files/zh-cn/web/http/headers/sec-ch-ua-full-version-list/index.md Co-authored-by: A1lo --- .../sec-ch-ua-full-version-list/index.md | 94 +++++++++++++++++++ .../zh-cn/web/http/headers/sec-ch-ua/index.md | 2 +- 2 files changed, 95 insertions(+), 1 deletion(-) create mode 100644 files/zh-cn/web/http/headers/sec-ch-ua-full-version-list/index.md diff --git a/files/zh-cn/web/http/headers/sec-ch-ua-full-version-list/index.md b/files/zh-cn/web/http/headers/sec-ch-ua-full-version-list/index.md new file mode 100644 index 00000000000000..3828a5a45a7f30 --- /dev/null +++ b/files/zh-cn/web/http/headers/sec-ch-ua-full-version-list/index.md @@ -0,0 +1,94 @@ +--- +title: Sec-CH-UA-Full-Version-List +slug: Web/HTTP/Headers/Sec-CH-UA-Full-Version-List +tags: + - Sec-CH-UA-Full-Version-List + - Client hint + - HTTP + - HTTP Header + - Reference + - Request header + - Experimental +translation_of: Web/HTTP/Headers/Sec-CH-UA-Full-Version-List +--- +{{HTTPSidebar}} {{SeeCompatTable}} {{securecontext_header}} + +**`Sec-CH-UA-Full-Version-List`** [用户代理客户端提示](/en-US/docs/Web/HTTP/Client_hints#user-agent_client_hints)请求标头提供用户代理的品牌和完整版本信息。 + + + + + + + + + + + + +
          标头类型 + {{Glossary("Request header", "请求标头")}}、客户端提示 +
          {{Glossary("Forbidden header name")}}
          + +**`Sec-CH-UA-Full-Version-List`** 标头以逗号分隔的列表提供与每个浏览器关联的品牌的名称和完整版本信息。 + +品牌是用户代理的商业名称,例如:Chromium、Opera、Google Chrome、Microsoft Edge、Firefox 和 Safari。用户代理可能有多个关联的品牌。例如,Opera、Chrome 和 Edge 都基于 Chromium,并将在 **`Sec-CH-UA-Full-Version-List`** 标头中会提供这两个品牌。 + +因此,标头允许服务器根据共享品牌及其各自特定版本中的特定自定义项(particular customizations)来自定义其响应。 + +标头可能包含任何位置和任何名称的“假冒”品牌。此功能旨在防止服务器直接拒绝未知用户代理,迫使用户代理在其品牌标识上撒谎。 + +> **备注:** 这类似于 {{HTTPHeader("Sec-CH-UA")}},但包含完整的版本号,而不是每个品牌的重要版本号。 + +## 语法 + +用户代理品牌列表中以逗号分隔的品牌列表及其关联的完整版本号。单个条目的语法具有以下格式: + +```http +Sec-CH-UA-Full-Version-List: "";v="", ... +``` + +### 指令 + +- `` + - : 与用户代理相关的品牌,如“Chromium”和“Google Chrome”。 + 这可能是一个故意不正确的品牌,如 `" Not A;Brand"` 或 `"(Not(A:Brand"`(实际值是预期随时间变化且不可预测的)。 +- `` + - : 完整的版本号,例如 98.0.4750.0。 + +## 示例 + +服务器通过在来自客户端的任何请求的*响应*中包含 {{HTTPHeader("Accept-CH")}} 来请求 `Sec-CH-UA-Full-Version-List` 标头,并使用所需标头的名称作为令牌: + +```http +HTTP/1.1 200 OK +Accept-CH: Sec-CH-UA-Full-Version-List +``` + +客户端可以选择提供提示,并将 `Sec-CH-UA-Full-Version-List` 标头添加到后续请求中,如下所示: + +```http +GET /my/page HTTP/1.1 +Host: example.site + +Sec-CH-UA: " Not A;Brand";v="99", "Chromium";v="98", "Google Chrome";v="98" +Sec-CH-UA-Mobile: ?0 +Sec-CH-UA-Full-Version-List: " Not A;Brand";v="99.0.0.0", "Chromium";v="98.0.4750.0", "Google Chrome";v="98.0.4750.0" +Sec-CH-UA-Platform: "Linux" +``` + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- [客户端提示](/zh-CN/docs/Web/HTTP/Client_hints) +- [用户代理客户端提示 API](/zh-CN/docs/Web/API/User-Agent_Client_Hints_API) +- [通过用户代理客户端提示改善用户隐私和开发人员体验](https://web.dev/user-agent-client-hints/)(web.dev) +- {{HTTPHeader("Accept-CH")}} +- [HTTP 缓存 > Vary 响应](/zh-CN/docs/Web/HTTP/Caching#vary_响应)和 {{HTTPHeader("Vary")}} diff --git a/files/zh-cn/web/http/headers/sec-ch-ua/index.md b/files/zh-cn/web/http/headers/sec-ch-ua/index.md index 2ee5b0e3bcf980..897ca3eefcd273 100644 --- a/files/zh-cn/web/http/headers/sec-ch-ua/index.md +++ b/files/zh-cn/web/http/headers/sec-ch-ua/index.md @@ -39,7 +39,7 @@ _significant version_ 是`市场`版本标识符,用于区分品牌的主要 标头可以包含任何位置和任何名称的“假冒”品牌。此功能旨在防止服务器直接拒绝未知的用户代理,迫使用户代理在品牌标识上撒谎。 -> **备注:** {{HTTPHeader("Sec-CH-UA-Full-Version-List")}} 与 **`Sec-CH-UA`** 相同,但包括完整版本号,而不是每个品牌的重要版本号。 +> **备注:** {{HTTPHeader("Sec-CH-UA-Full-Version-List")}} 与 **`Sec-CH-UA`** 相同,但前者包含完整版本号,而不是每个品牌的重要版本号。 ## 语法 From 8fa3db16ee8094486d19119e33f0c78fa4b8b49c Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 10 Jul 2022 15:52:36 +0900 Subject: [PATCH 083/100] =?UTF-8?q?MediaStreamTrack=20=E4=BB=A5=E4=B8=8B?= =?UTF-8?q?=E3=81=AE=E8=A8=98=E4=BA=8B=E3=82=92=E7=A7=BB=E8=A1=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../web/api/mediastreamtrack/enabled/{index.html => index.md} | 0 .../api/mediastreamtrack/ended_event/{index.html => index.md} | 0 files/ja/web/api/mediastreamtrack/id/{index.html => index.md} | 0 files/ja/web/api/mediastreamtrack/{index.html => index.md} | 3 ++- .../ja/web/api/mediastreamtrack/kind/{index.html => index.md} | 0 .../ja/web/api/mediastreamtrack/label/{index.html => index.md} | 0 .../api/mediastreamtrack/mute_event/{index.html => index.md} | 0 .../ja/web/api/mediastreamtrack/muted/{index.html => index.md} | 0 .../overconstrained_event/{index.html => index.md} | 0 .../api/mediastreamtrack/readystate/{index.html => index.md} | 0 .../ja/web/api/mediastreamtrack/stop/{index.html => index.md} | 0 .../api/mediastreamtrack/unmute_event/{index.html => index.md} | 0 12 files changed, 2 insertions(+), 1 deletion(-) rename files/ja/web/api/mediastreamtrack/enabled/{index.html => index.md} (100%) rename files/ja/web/api/mediastreamtrack/ended_event/{index.html => index.md} (100%) rename files/ja/web/api/mediastreamtrack/id/{index.html => index.md} (100%) rename files/ja/web/api/mediastreamtrack/{index.html => index.md} (99%) rename files/ja/web/api/mediastreamtrack/kind/{index.html => index.md} (100%) rename files/ja/web/api/mediastreamtrack/label/{index.html => index.md} (100%) rename files/ja/web/api/mediastreamtrack/mute_event/{index.html => index.md} (100%) rename files/ja/web/api/mediastreamtrack/muted/{index.html => index.md} (100%) rename files/ja/web/api/mediastreamtrack/overconstrained_event/{index.html => index.md} (100%) rename files/ja/web/api/mediastreamtrack/readystate/{index.html => index.md} (100%) rename files/ja/web/api/mediastreamtrack/stop/{index.html => index.md} (100%) rename files/ja/web/api/mediastreamtrack/unmute_event/{index.html => index.md} (100%) diff --git a/files/ja/web/api/mediastreamtrack/enabled/index.html b/files/ja/web/api/mediastreamtrack/enabled/index.md similarity index 100% rename from files/ja/web/api/mediastreamtrack/enabled/index.html rename to files/ja/web/api/mediastreamtrack/enabled/index.md diff --git a/files/ja/web/api/mediastreamtrack/ended_event/index.html b/files/ja/web/api/mediastreamtrack/ended_event/index.md similarity index 100% rename from files/ja/web/api/mediastreamtrack/ended_event/index.html rename to files/ja/web/api/mediastreamtrack/ended_event/index.md diff --git a/files/ja/web/api/mediastreamtrack/id/index.html b/files/ja/web/api/mediastreamtrack/id/index.md similarity index 100% rename from files/ja/web/api/mediastreamtrack/id/index.html rename to files/ja/web/api/mediastreamtrack/id/index.md diff --git a/files/ja/web/api/mediastreamtrack/index.html b/files/ja/web/api/mediastreamtrack/index.md similarity index 99% rename from files/ja/web/api/mediastreamtrack/index.html rename to files/ja/web/api/mediastreamtrack/index.md index 4f7cac8258c6a4..9eceaa94f1db84 100644 --- a/files/ja/web/api/mediastreamtrack/index.html +++ b/files/ja/web/api/mediastreamtrack/index.md @@ -1,6 +1,7 @@ --- title: MediaStreamTrack slug: Web/API/MediaStreamTrack +page-type: web-api-interface tags: - API - Audio @@ -12,7 +13,7 @@ - Reference - Video - WebRTC - - インターフェイス +browser-compat: api.MediaStreamTrack translation_of: Web/API/MediaStreamTrack ---
          {{APIRef("Media Capture and Streams")}}
          diff --git a/files/ja/web/api/mediastreamtrack/kind/index.html b/files/ja/web/api/mediastreamtrack/kind/index.md similarity index 100% rename from files/ja/web/api/mediastreamtrack/kind/index.html rename to files/ja/web/api/mediastreamtrack/kind/index.md diff --git a/files/ja/web/api/mediastreamtrack/label/index.html b/files/ja/web/api/mediastreamtrack/label/index.md similarity index 100% rename from files/ja/web/api/mediastreamtrack/label/index.html rename to files/ja/web/api/mediastreamtrack/label/index.md diff --git a/files/ja/web/api/mediastreamtrack/mute_event/index.html b/files/ja/web/api/mediastreamtrack/mute_event/index.md similarity index 100% rename from files/ja/web/api/mediastreamtrack/mute_event/index.html rename to files/ja/web/api/mediastreamtrack/mute_event/index.md diff --git a/files/ja/web/api/mediastreamtrack/muted/index.html b/files/ja/web/api/mediastreamtrack/muted/index.md similarity index 100% rename from files/ja/web/api/mediastreamtrack/muted/index.html rename to files/ja/web/api/mediastreamtrack/muted/index.md diff --git a/files/ja/web/api/mediastreamtrack/overconstrained_event/index.html b/files/ja/web/api/mediastreamtrack/overconstrained_event/index.md similarity index 100% rename from files/ja/web/api/mediastreamtrack/overconstrained_event/index.html rename to files/ja/web/api/mediastreamtrack/overconstrained_event/index.md diff --git a/files/ja/web/api/mediastreamtrack/readystate/index.html b/files/ja/web/api/mediastreamtrack/readystate/index.md similarity index 100% rename from files/ja/web/api/mediastreamtrack/readystate/index.html rename to files/ja/web/api/mediastreamtrack/readystate/index.md diff --git a/files/ja/web/api/mediastreamtrack/stop/index.html b/files/ja/web/api/mediastreamtrack/stop/index.md similarity index 100% rename from files/ja/web/api/mediastreamtrack/stop/index.html rename to files/ja/web/api/mediastreamtrack/stop/index.md diff --git a/files/ja/web/api/mediastreamtrack/unmute_event/index.html b/files/ja/web/api/mediastreamtrack/unmute_event/index.md similarity index 100% rename from files/ja/web/api/mediastreamtrack/unmute_event/index.html rename to files/ja/web/api/mediastreamtrack/unmute_event/index.md From 38d3de5a8e4682eec7f8a95b089279019b1d85f5 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 13 Jul 2022 02:06:43 +0900 Subject: [PATCH 084/100] =?UTF-8?q?2022/06/05=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ja/web/api/mediastreamtrack/kind/index.md | 63 +++++++------------ 1 file changed, 22 insertions(+), 41 deletions(-) diff --git a/files/ja/web/api/mediastreamtrack/kind/index.md b/files/ja/web/api/mediastreamtrack/kind/index.md index 13ee87a7d70a1f..d010ab54cd8af9 100644 --- a/files/ja/web/api/mediastreamtrack/kind/index.md +++ b/files/ja/web/api/mediastreamtrack/kind/index.md @@ -1,56 +1,37 @@ --- title: MediaStreamTrack.kind slug: Web/API/MediaStreamTrack/kind +page-type: web-api-instance-property +tags: + - Media Capture and Streams + - MediaStreamTrack + - NeedsExample + - Property + - Read-only + - Reference + - WebRTC +browser-compat: api.MediaStreamTrack.kind translation_of: Web/API/MediaStreamTrack/kind --- -

          {{APIRef("Media Capture and Streams")}}

          +{{APIRef("Media Capture and Streams")}} -

          MediaStreamTrack.kindは読み取り専用のプロパティであり、トラックの種類を示す{{domxref("DOMString")}}を返します。トラックがオーディオトラックの場合は"audio"を返し、ビデオトラックの場合は"video"を返します。トラックがソースから切り離されている場合は、何も変更されません。

          +**`MediaStreamTrack.kind`** は読み取り専用のプロパティであり、トラックの種類を示す文字列を返します。トラックが音声トラックの場合は `"audio"` を返し、映像トラックの場合は `"video"` を返します。トラックがソースから切り離されている場合は、何も変更されません。 -

          文法

          +## 値 -
           var type = track.kind;
          +有効な値は、以下のいずれかの値を取る文字列です。 -

          +- `"audio"`: このトラックは音声トラックです。 +- `"video"`: このトラックは映像トラックです。 -

          以下に示す{{domxref("DOMString")}}型の値を取ります。

          +## 仕様書 -
            -
          • "audio": このトラックはオーディオトラックであることを表します。
          • -
          • "video": このトラックはビデオトラックであることを表します。
          • -
          +{{Specifications}} -

          +## ブラウザーの互換性 -
          
          +{{Compat}}
           
          -

          仕様

          +## 関連情報 - - - - - - - - - - - - - - - -
          仕様状況コメント
          {{ SpecName('Media Capture', '#widl-MediaStreamTrack-kind', 'MediaStreamTrack.kind') }}{{ Spec2('Media Capture') }}初版
          - -

          ブラウザ互換性

          - - - -

          {{Compat("api.MediaStreamTrack.kind")}}

          - -

          関連項目

          - - +- [WebRTC](/ja/docs/Web/API/WebRTC_API) From 7627f14441905663b2adea9adafd887e52f4e11c Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 13 Jul 2022 02:49:35 +0900 Subject: [PATCH 085/100] =?UTF-8?q?2022/06/25=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ja/web/api/mediastreamtrack/remote/index.md | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/files/ja/web/api/mediastreamtrack/remote/index.md b/files/ja/web/api/mediastreamtrack/remote/index.md index dc8f04a5adeb60..e98678d05cc396 100644 --- a/files/ja/web/api/mediastreamtrack/remote/index.md +++ b/files/ja/web/api/mediastreamtrack/remote/index.md @@ -3,24 +3,22 @@ title: MediaStreamTrack.remote slug: Web/API/MediaStreamTrack/remote page-type: web-api-instance-property tags: - - 非推奨 + - Deprecated - MediaStreamTrack - - プロパティ - - 読み取り専用 - - リファレンス + - Property + - Read-only + - Reference - WebRTC browser-compat: api.MediaStreamTrack.remote translation_of: Web/API/MediaStreamTrack/remote --- {{APIRef("Media Capture and Streams")}}{{deprecated_header}} -**`MediaStreamTrack.remote`** は読み取り専用のプロパティで、 JavaScript 上で、 WebRTC の MediaStreamTrack がリモートソースであるかローカルソースであるかを知ることができます。返値は論理値で、 `true` であればソースがリモートであること(すなわち {{domxref("RTCPeerConnection")}} を起源としていること)を、 `false` はソースがローカルであることを表します。 +**`MediaStreamTrack.remote`** は読み取り専用のプロパティであり、 JavaScript 上で、 WebRTC の MediaStreamTrack がリモートソースであるかローカルソースであるかを知ることができます。返値は論理値で、 `true` であればソースがリモートであること(すなわち {{domxref("RTCPeerConnection")}} を起源としていること)を、 `false` はソースがローカルであることを表します。 -## 構文 +## 値 -```js -var bool = track.remote; -``` +論理値です。 ## ブラウザーの互換性 From 220c791513c1a107fa2d72323093f6738ec62d6a Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 13 Jul 2022 01:10:23 +0900 Subject: [PATCH 086/100] =?UTF-8?q?2022/07/10=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../web/api/mediastreamtrack/enabled/index.md | 89 +++++++++------ .../ja/web/api/mediastreamtrack/stop/index.md | 107 ++++++++++-------- 2 files changed, 115 insertions(+), 81 deletions(-) diff --git a/files/ja/web/api/mediastreamtrack/enabled/index.md b/files/ja/web/api/mediastreamtrack/enabled/index.md index e0c0e721e6cffd..7aacddf9c35ac2 100644 --- a/files/ja/web/api/mediastreamtrack/enabled/index.md +++ b/files/ja/web/api/mediastreamtrack/enabled/index.md @@ -1,47 +1,72 @@ --- title: MediaStreamTrack.enabled slug: Web/API/MediaStreamTrack/enabled +page-type: web-api-instance-property +tags: + - Media + - Media Capture and Streams + - MediaStreamTrack + - Muting a Media Track + - Muting a Track + - Property + - Reference + - WebRTC + - enabled +browser-compat: api.MediaStreamTrack.enabled translation_of: Web/API/MediaStreamTrack/enabled --- -

          {{APIRef("Media Capture and Streams")}}

          +{{APIRef("Media Capture and Streams")}} -

          MediaStreamTrack.enabled プロパティは {{domxref("Boolean")}}型の値を返します。このトラックが有効な場合はtrueを返し、メディアソースストリームによって処理されることが許可されます。このトラックが無効な場合は falseを返し、 メディアソースストリームによって処理されることはありません。トラックが切り離されている場合は、この値の変更は何の影響もありません。

          +**`enabled`** は {{domxref("MediaStreamTrack")}} インターフェイスのプロパティで、このトラックがソースストリームから出力が許可されている場合は `true`、そうでない場合は `false` となる論理値です。これは意図的にトラックをミュートするために使用することができます。 -

          文法

          +有効な場合、トラックのデータはソースから出力先に出力され、そうでない場合は空のフレームが出力されます。 -
          var bool = track.enabled;
          -track.enabled = [true | false];
          +音声の場合、無効なトラックは無音の(つまり、すべてのサンプルの値が 0 であるフレーム)を生成します。動画トラックでは、すべてのフレームが黒いピクセルで完全に埋められます。 -

          +一方 {{domxref("MediaStreamTrack.muted", "muted")}} プロパティは、トラックが一時的にデータを出力できない状態(転送中にフレームが失われた場合など)を示しています。 -

          仕様

          +> **Note:** トラックが接続されていない場合でも、このプロパティの値は変更可能ですが、効果はありません。 - - - - - - - - - - - - - - - -
          仕様状況コメント
          {{ SpecName('Media Capture', '#dom-mediastreamtrack-enabled', 'enabled') }}{{ Spec2('Media Capture') }}初版
          +## 値 -

          ブラウザ互換性

          +`true` の場合、 `enabled` はそのトラックが実際のメディアを出力にレンダリングすることが許可されていることを示します。 `enabled` が `false` に設定されている場合、トラックは空のフレームのみを生成します。 -

          {{Compat("api.MediaStreamTrack.enabled")}}

          +空のオーディオフレームは、すべてのサンプルの値が 0 に設定されます。空のビデオフレームは、すべてのピクセルが黒に設定されます。 -

          関連項目

          +> **Note:** ミュート/ミュート解除機能を実装する場合は、 `enabled` プロパティを使用してください。 - +## 使用上のメモ + +この {{domxref("MediaStreamTrack")}} がカメラからの動画入力を表している場合、 `enabled` を `false` に設定してトラックを無効にすると、カメラが現在録画やストリーミングをしていないことを示すデバイスアクティビティインジケーターも更新されます。例えば、 iMac や MacBook コンピューターでは、この方法でトラックをミュートしている間、カメラの横にある緑の「使用中」ランプが消灯します。 + +## 例 + +この例では、一時停止ボタンの {{domxref("Element/click_event", "click")}} イベントハンドラーの使用例を示しています。 + +```js +pauseButton.onclick = function(evt) { + const newState = !myAudioTrack.enabled; + + pauseButton.innerHTML = newState ? "▶️" : "⏸️"; + myAudioTrack.enabled = newState; +} +``` + +これは、現在の `enabled` の値と逆の値である `newState` という変数を作成し、それを使用して、一時停止ボタンの要素の新しい {{domxref("Element.innerHTML", "innerHTML")}} として "play" アイコンまたは "pause" アイコン用の絵文字を選択するものです。 + +最後に、新しい値を `enabled` に保存し、変更が有効になります。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [MediaStream API](/ja/docs/Web/API/Media_Streams_API) +- {{domxref("MediaStream")}} +- {{domxref("MediaStreamTrack")}} +- [WebRTC](/ja/docs/Web/API/WebRTC_API) diff --git a/files/ja/web/api/mediastreamtrack/stop/index.md b/files/ja/web/api/mediastreamtrack/stop/index.md index 9f09313d32a27d..638615c544737e 100644 --- a/files/ja/web/api/mediastreamtrack/stop/index.md +++ b/files/ja/web/api/mediastreamtrack/stop/index.md @@ -1,69 +1,78 @@ --- title: MediaStreamTrack.stop() slug: Web/API/MediaStreamTrack/stop +page-type: web-api-instance-method +tags: + - API + - Media + - Media Capture and Streams API + - Media Streams API + - MediaStreamTrack + - Method + - Reference + - Streams + - WebRTC + - stop +browser-compat: api.MediaStreamTrack.stop translation_of: Web/API/MediaStreamTrack/stop --- -

          {{APIRef("Media Capture and Streams")}}

          +{{APIRef("Media Capture and Streams")}} -

          {{domxref("MediaStreamTrack")}}のstop()はトラックを停止します。

          +**`MediaStreamTrack.stop()`** メソッドは、トラックを停止します。 -

          文法

          +## 構文 -
          MediaStreamTrack.stop();
          -
          +```js +stop() +``` -

          stop() の呼び出しは、 {{glossary("user agent")}}へ、トラックのソース(ファイル、ネットワークストリーム、ローカルカメラやマイク)がこれ以上MediaStreamTrackで必要とされないことを伝えます。複数のトラックが同じソースを使用すること(例えば、2つのタブがデバイスのマイクを使っている場合など)もあるため、ソースが必ずしも直ぐに停止させられる必要はありません。その代わり、トラックからの関連付けが解除され、そのトラックオブジェクトが停止されます。ソースからメディアトラックが使用されなくなると、ソースは実際に完全に停止させられるでしょう。

          +### 引数 -

          stop()を呼び出した直後に、{{domxref("MediaStreamTrack.readyState", "track")}}の状態はendedになります。

          +なし。 -

          +### 返値 -

          In this example, we see a function which stops a streamed video by calling stop() on every track on a given {{HTMLElement("video")}}.

          +なし ({{jsxref("undefined")}})。 -

          この例では、与えられた{{HTMLElement("video")}}の各トラックのstop()を呼び出すことで、ストリーミングされているビデオを停止する関数を定義しています。

          +## 解説 -
          function stopStreamedVideo(videoElem) {
          -  let stream = videoElem.srcObject;
          -  let tracks = stream.getTracks();
          +`stop()` の呼び出しは、{{glossary("user agent", "ユーザーエージェント")}}へ、トラックのソース(ファイル、ネットワークストリーム、ローカルカメラやマイク)がこれ以上この {{domxref("MediaStreamTrack")}} で必要とされないことを伝えます。複数のトラックが同じソースを使用すること(例えば、 2 つのタブが端末のマイクを使っている場合など)もあるため、ソースが必ずしも直ぐに停止させられる必要はありません。その代わり、トラックからの関連付けが解除され、そのトラックオブジェクトが停止されます。ソースからメディアトラックが使用されなくなると、ソースは実際に完全に停止させられるでしょう。
          +
          +`stop()` を呼び出した直後に、 {{domxref("MediaStreamTrack.readyState", "readyState")}} の状態は `ended` になります。なお、この場合は [`ended`](/ja/docs/Web/API/MediaStreamTrack/ended_event) イベントは発生しません。
          +
          +## 例
          +
          +### 映像ストリームの停止
          +
          +この例では、この {{HTMLElement("video")}} の各トラックで `stop()` を呼び出すことで、ストリーミングされている映像を停止する関数を定義しています。
          +
          +```js
          +function stopStreamedVideo(videoElem) {
          +  const stream = videoElem.srcObject;
          +  const tracks = stream.getTracks();
           
             tracks.forEach(function(track) {
               track.stop();
             });
           
             videoElem.srcObject = null;
          -}
          - -

          {{domxref("HTMLMediaElement.srcObject", "srcObject")}}プロパティからビデオ要素のストリームを取得することで機能しています。次に、{{domxref("MediaStream.getTracks", "getTracks()")}}メソッドを呼び出すことで、ストリームのトラックリストを取得しています。ここから、{{jsxref("Array.forEach", "forEach()")}}を使ってトラックリストから各トラックを繰り返し呼び出し、それぞれのトラックでstop()メソッドを呼び出しています。

          - -

          最後に、{{domxref("MediaStream")}}オブジェクトへの参照を解くためにsrcObjectnullを設定することで、このオブジェクトは解放できるようになります。

          - -

          仕様

          - - - - - - - - - - - - - - - - -
          仕様状況コメント
          {{ SpecName('Media Capture', '#widl-MediaStreamTrack-stop', 'MediaStreamTrack.stop()') }}{{ Spec2('Media Capture') }}初版
          - -

          ブラウザ互換性

          - -

          {{Compat("api.MediaStreamTrack.stop")}}

          - -

          関連項目

          - -
            -
          • このメソッドが属する{{domxref("MediaStreamTrack")}}インタフェース
          • -
          • {{domxref("MediaStreamTrack.readyState")}}
          • -
          • {{event("ended")}}
          • -
          +} +``` + +{{domxref("HTMLMediaElement.srcObject", "srcObject")}} プロパティから video 要素のストリームを取得することで機能しています。次に、 {{domxref("MediaStream.getTracks", "getTracks()")}} メソッドを呼び出すことで、ストリームのトラックリストを取得しています。ここから、 {{jsxref("Array.forEach", "forEach()")}} を使ってトラックリストから各トラックを繰り返し呼び出し、それぞれのトラックで `stop()` メソッドを呼び出しています。 + +最後に、 `srcObject` に `null` を設定することで、この {{domxref("MediaStream")}} オブジェクトへの参照を解き、解放できるようにします。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- このメソッドが属する {{domxref("MediaStreamTrack")}} インターフェイス +- {{domxref("MediaStreamTrack.readyState")}} +- {{domxref("MediaStreamTrack/ended_event", "ended")}} From 08942fb622e1a0cc5817df94bb5f295212b963e2 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 10 Jul 2022 16:34:53 +0900 Subject: [PATCH 087/100] =?UTF-8?q?2022/06/01=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 2022/06/01 時点の英語版に同期 2022/06/01 時点の英語版に同期 2022/06/01 時点の英語版に同期 2022/06/01 時点の英語版に同期 2022/06/01 時点の英語版に同期 2022/06/01 時点の英語版に同期 2022/06/01 時点の英語版に同期 2022/06/01 時点の英語版に同期 --- .../api/mediastreamtrack/ended_event/index.md | 112 ++++++---- files/ja/web/api/mediastreamtrack/id/index.md | 52 ++--- files/ja/web/api/mediastreamtrack/index.md | 193 ++++++++---------- .../web/api/mediastreamtrack/label/index.md | 51 +++-- .../api/mediastreamtrack/mute_event/index.md | 155 +++++++------- .../web/api/mediastreamtrack/muted/index.md | 60 +++--- .../overconstrained_event/index.md | 68 +++--- .../api/mediastreamtrack/readystate/index.md | 63 +++--- .../mediastreamtrack/unmute_event/index.md | 150 +++++++------- 9 files changed, 438 insertions(+), 466 deletions(-) diff --git a/files/ja/web/api/mediastreamtrack/ended_event/index.md b/files/ja/web/api/mediastreamtrack/ended_event/index.md index b5a1bb7a2a5cec..7075e49457bd03 100644 --- a/files/ja/web/api/mediastreamtrack/ended_event/index.md +++ b/files/ja/web/api/mediastreamtrack/ended_event/index.md @@ -1,58 +1,86 @@ --- -title: MediaStreamTrack.onended +title: 'MediaStreamTrack: ended イベント' slug: Web/API/MediaStreamTrack/ended_event -translation_of: Web/API/MediaStreamTrack/onended +page-type: web-api-event +tags: + - Audio + - Event + - HTML DOM + - HTMLMediaElement + - Media + - Media Streams API + - Reference + - Video + - Web Audio API + - ended +browser-compat: api.MediaStreamTrack.ended_event +translation_of: Web/API/MediaStreamTrack/ended_event original_slug: Web/API/MediaStreamTrack/onended --- -

          {{ APIRef("Media Capture and Streams") }}

          +{{DefaultAPISidebar("Media Capture and Streams")}} -

          MediaStreamTrack.onended イベントハンドラはendedイベントが発生した時に実行するEventHandlerの関数です。このイベントは、MediaStreamTrackオブジェクトのソースが、これ以上データを提供することがないか、ユーザーの操作によって許可が無効になったか、ソースデバイスが取り出されたか、リモートのピアがデータの送信を停止した時に発生します。

          +**`ended`** は {{domxref("MediaStreamTrack")}} インターフェイスのイベントで、メディアの終端に到達したため、あるいはそれ以上のデータが利用できないために再生やストリーミングが停止したときに発行さ れます。 -

          文法

          +このイベントはキャンセル不可で、バブリングしません。 -
          MediaStreamTrack.onended = function;
          -
          +## 構文 -

          +このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} のようなメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。 -

          {{event("ended")}}イベントが発生した時の実行する処理の関数を{{event("Event_handlers", "event handler")}}として設定します。このイベントハンドラーの関数は1つのパラメータ持ちます。このパラメータはイベントオブジェクトであり、単純な{{domxref("Event")}}のオブジェクトです。

          +```js +addEventListener('ended', event => { }); -

          +onended = event => { }; +``` -

          この例では、endedイベントのイベントハンドラを設定しています。このイベントハンドラでは、トラックがアクティブでない状態を示すために画面上のアイコンを変更します。

          +## イベント型 -
          track.onended = function(event) {
          +一般的な {{domxref("Event")}} です。
          +
          +## 使用上のメモ
          +
          +`ended` イベントは、メディアストリームトラックのソースがストリームのデータ送信を恒久的に停止したときに発行されます。これが起こるには、以下のような様々な方法があります。
          +
          +- 送信できるデータが残っていない。
          +- ユーザーがデータ送信に必要な権限を剥奪した。
          +- 送信元データを生成していたハードウェアが取り外されたか、排出された。
          +- リモート通信相手がデータの送信を永久に停止した。メディアを
          +
          +## 例
          +
          +この例では、 `ended` イベントのイベントハンドラーを設定しています。このイベントハンドラーでは、トラックがアクティブでない状態を示すために画面上のアイコンを変更します。
          +
          +```js
          +track.addEventListener('ended', () => {
          +  let statusElem = document.getElementById("status-icon");
          +  statusElem.src = "/images/stopped-icon.png";
          +})
          +```
          +
          +`onended` プロパティを使用してイベントハンドラーを設定することもできます。
          +
          +```js
          +track.onended = function() {
             let statusElem = document.getElementById("status-icon");
           
             statusElem.src = "/images/stopped-icon.png";
           }
          -
          - -

          仕様

          - - - - - - - - - - - - - - - - -
          仕様状況コメント
          {{ SpecName('Media Capture', '#widl-MediaStreamTrack-onended', 'MediaStreamTrack.onended') }}{{ Spec2('Media Capture') }}初版
          - -

          ブラウザ互換性

          - -

          {{Compat("api.MediaStreamTrack.onended")}}

          - -

          関連項目

          - -
            -
          • {{event("ended")}} イベント、およびその型である{{domxref("Event")}}.
          • -
          +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- HTMLMediaElement の {{domxref("HTMLMediaElement.playing_event", 'playing')}} イベント +- HTMLMediaElement の {{domxref("HTMLMediaElement.waiting_event", 'waiting')}} イベント +- HTMLMediaElement の {{domxref("HTMLMediaElement.seeking_event", 'seeking')}} イベント +- {{HTMLElement("audio")}} +- {{HTMLElement("video")}} +- HTMLMediaElement の {{domxref("HTMLMediaElement.ended_event", 'ended')}} イベント +- AudioScheduledSourceNode の {{domxref("AudioScheduledSourceNode.ended_event", 'ended')}} イベント diff --git a/files/ja/web/api/mediastreamtrack/id/index.md b/files/ja/web/api/mediastreamtrack/id/index.md index 611849c20857d2..00c48c7e93ea95 100644 --- a/files/ja/web/api/mediastreamtrack/id/index.md +++ b/files/ja/web/api/mediastreamtrack/id/index.md @@ -1,45 +1,35 @@ --- title: MediaStreamTrack.id slug: Web/API/MediaStreamTrack/id +page-type: web-api-instance-property +tags: + - Media Capture and Streams + - MediaStreamTrack + - Property + - Read-only + - Reference + - WebRTC +browser-compat: api.MediaStreamTrack.id translation_of: Web/API/MediaStreamTrack/id --- -

          {{APIRef("Media Capture and Streams")}}

          +{{APIRef("Media Capture and Streams")}} -

          MediaStreamTrack.id は読み取り専用のプロパティであり、このトラックのための固有識別子(GUID)を含む{{domxref("DOMString")}}を返します。この値はブラウザによって生成されるものです。

          +**`MediaStreamTrack.id`** は読み取り専用のプロパティであり、このトラックのための固有識別子 (GUID)を含む文字列を返します。この値は{{glossary("user agent", "ユーザーエージェント")}}によって生成されます。 -

          文法

          +## 構文 -
           var id = track.id;
          +```js +const id = track.id +``` -

          +## 仕様書 -

          仕様

          +{{Specifications}} - - - - - - - - - - - - - - - -
          仕様状況コメント
          {{ SpecName('Media Capture', '#widl-MediaStreamTrack-id', 'MediaStreamTrack.id') }}{{ Spec2('Media Capture') }}初版
          +## ブラウザーの互換性 -

          ブラウザ互換性

          +{{Compat}} +## 関連情報 - -

          {{Compat("api.MediaStreamTrack.id")}}

          - -

          関連項目

          - - +- [WebRTC](/ja/docs/Web/API/WebRTC_API) diff --git a/files/ja/web/api/mediastreamtrack/index.md b/files/ja/web/api/mediastreamtrack/index.md index 9eceaa94f1db84..30f0d33f0e49e8 100644 --- a/files/ja/web/api/mediastreamtrack/index.md +++ b/files/ja/web/api/mediastreamtrack/index.md @@ -16,116 +16,83 @@ tags: browser-compat: api.MediaStreamTrack translation_of: Web/API/MediaStreamTrack --- -
          {{APIRef("Media Capture and Streams")}}
          - -

          MediaStreamTrack インターフェイスは、ストリームに含まれる一つのメディアトラックを表現します。一般的に、オーディオやビデオのトラックですが、他の種類のトラックも存在することができます。

          - -

          プロパティ

          - -

          以下に示すプロパティに加えて、 MediaStreamTrack は制約可能なプロパティを持っています。これらのプロパティは、 {{domxref("MediaStreamTrack.applyConstraints", "applyConstraints()")}} によって設定でき、 {{domxref("MediaStreamTrack.getConstraints", "getConstraints()")}} と {{domxref("MediaStreamTrack.getSettings", "getSettings()")}} によって取得できます。制約可能なプロパティを用いて適切に動作させるためにはどのようにすればいいかを知りたい場合は、 Capabilities, constraints, and settings を見てください。適切に動作させなかった場合の結果として、あなたが作成したコードは信頼できないものになります。

          - -
          -
          {{domxref("MediaStreamTrack.contentHint")}}
          -
          文字列で、 API 利用者がどのように扱うかをガイドするために、トラックが含んでいるものコンテンツの種類が何であるかのヒントを提供するためにウェブアプリケーションが使用します。
          -
          {{domxref("MediaStreamTrack.enabled")}}
          -
          論理型で、トラックが有効の場合は true の値になり、メディアソースストリームを描画することができます。トラックが無効の場合は false の値になり、メディアソースストリームに描画されません。トラックの接続が解除された場合、この値は変更することはできますが影響を与えることはありません。 -
          メモ: 標準的なミュート (消音) 機能を実装するには enabledfalse にします。 muted プロパティは技術的な問題でメディアがない状態を表します。
          -
          -
          {{domxref("MediaStreamTrack.id")}} {{readonlyInline}}
          -
          トラックの固有識別子 (GUID) を含む {{domxref("DOMString")}} を返します。この識別子はブラウザーによって生成されます。
          -
          {{domxref("MediaStreamTrack.isolated")}} {{readonlyInline}}
          -
          Returns a Boolean value which is true if the track is isolated; that is, the track cannot be accessed by the document that owns the MediaStreamTrack. This happens when the {{domxref("MediaStreamTrack.peerIdentity", "peerIdentity")}} property is set, or if the track comes from a cross-origin source.
          -
          {{domxref("MediaStreamTrack.kind")}} {{readonlyInline}}
          -
          {{domxref("DOMString")}}を返します。このトラックがオーディオトラックの場合は"audio"が設定され、ビデオトラックの場合は"video"が設定されます。ソースからの関連付けが解除された場合、この値が変更されることはありません。
          -
          {{domxref("MediaStreamTrack.label")}} {{readonlyInline}}
          -
          "internal microphone"のようなトラックソースを識別するユーザエージェントによって割り当てられたラベルを含む{{domxref("DOMString")}}を返します。この文字列は空になることもあり、ソースが接続されていないと空になります。トラックのソースとの関連付けが解除されても、このラベルは変更されません。
          -
          {{domxref("MediaStreamTrack.muted")}} {{readonlyInline}}
          -
          Booleanの値を返します。トラックがミュートであるかどうかを示します。 -
          Note: You can implement standard "mute" functionality by setting enabled to false, and unmute the media by setting it back to true again.
          -
          -
          {{domxref("MediaStreamTrack.readonly")}} {{readonlyInline}}
          -
          Booleanの値を返します。トラックが読み取り専用の場合(ビデオファイルソースやカメラなどの設定を変更することができないもののような)はtrueを返し、それ以外の場合はfalseを返します。
          -
          {{domxref("MediaStreamTrack.readyState")}} {{readonlyInline}}
          -
          トラックの状態を表す列挙型の値を返します。この値は次のどれかになります。 -
            -
          • "live"は入力デバイスが接続されており、ベストエフォートでリアルタイムなデータを提供することを表します。この状態では、MediaStreamTrack.enabled属性を用いることで、データの出力のオンとオフを切り替えることができます。
          • -
          • "ended"は入力デバイスがこれ以上データを提供することがなく、新しいデータも一切提供されないことを示します。
          • -
          -
          -
          {{domxref("MediaStreamTrack.remote")}} {{obsolete_inline("")}} {{readonlyInline}}
          -
          Booleanの値を返します。トラックのソースが{{domxref("RTCPeerConnection")}}の場合はtrueであり、それ以外はfalseです。
          -
          - -

          メソッド

          - -
          -
          {{domxref("MediaStreamTrack.applyConstraints()")}}
          -
          MediaStreamTrackの有効な制約可能な値についての許容できる値の範囲を指定します。
          -
          {{domxref("MediaStreamTrack.clone()")}}
          -
          MediaStreamTrackの複製を返します。
          -
          {{domxref("MediaStreamTrack.getCapabilities()")}}
          -
          MediaStreamTrackで有効な制約可能なプロパティの一覧を返します。
          -
          {{domxref("MediaStreamTrack.getConstraints()")}}
          -
          トラックに設定されている制約を含む{{domxref('MediaTrackConstraints')}}を返します。戻り値は、最後に{{domxref("MediaStreamTrack.applyConstraints", "applyConstraints()")}}を用いて設定した制約に一致します。
          -
          {{domxref("MediaStreamTrack.getSettings()")}}
          -
          MediaStreamTrackの制約可能なプロパティの値を含む{{domxref("MediaTrackSettings")}}オブジェクトを返します。
          -
          {{domxref("MediaStreamTrack.stop()")}}
          -
          トラックに関連付けられたソースの再生を停止し、ソースとトラックの関連付けを解除します。トラックの状態はendedに設定されます。
          -
          - -

          イベント

          - -

          これらのイベントを待ち受けするには、 {{domxref("EventTarget.addEventListener", "addEventListener()")}} を使用するか、イベントリスナーをこのインターフェイスの onイベント名 プロパティに代入するかします。

          - -
          -
          {{domxref("MediaStreamTrack/ended_event", "ended")}}
          -
          Sent when playback of the track ends (when the value {{domxref("MediaStreamTrack.readyState", "readyState")}} changes to ended).
          - Also available using the {{domxref("MediaStreamTrack/onended", "onended")}} event handler property.
          -
          {{domxref("MediaStreamTrack/mute_event", "mute")}}
          -
          Sent to the MediaStreamTrack when the value of the {{domxref("MediaStreamTrack.muted", "muted")}} property is changed to true, indicating that the track is unable to provide data temporarily (such as when the network is experiencing a service malfunction).
          - Also available using the {{domxref("MediaStreamTrack/onmute", "onmute")}} event handler property.
          -
          {{domxref("MediaStreamTrack/isolationchange_event", "isolationchange")}}
          -
          Sent whenever the value of the {{domxref("MediaStreamTrack.isolated", "isolated")}} property changes due to the document gaining or losing permission to access the track.
          - Also available through the {{domxref("MediaStreamTrack/onisolationchange", "onisolationchange")}} event handler property.
          -
          {{domxref("MediaStreamTrack/overconstrained_event", "overconstrained")}} {{deprecated_inline}}
          -
          Sent when the constraints specified for the track cause the track to be incompatible and therefore to not be used.
          - Also available through the {{domxref("MediaStreamTrack/onoverconstrained", "onoverconstrained")}} event handler property.
          -
          {{domxref("MediaStreamTrack/unmute_event", "unmute")}}
          -
          Sent to the track when data becomes available again, ending the muted state.
          - Also available through the {{domxref("MediaStreamTrack/onunmute", "onunmute")}} event handler property.
          -
          - -

          仕様書

          - - - - - - - - - - - - - - - - - - - - - -
          仕様書状態備考
          {{SpecName("WebRTC Identity", "#isolated-track", "Isolated tracks")}}{{Spec2("WebRTC Identity")}}独立トラック対応のための追加プロパティ
          {{SpecName('Media Capture', '#mediastreamtrack', 'MediaStreamTrack')}}{{Spec2('Media Capture')}}初回定義
          - -

          ブラウザーの互換性

          - -

          {{Compat("api.MediaStreamTrack")}}

          - -

          関連情報

          - - +{{APIRef("Media Capture and Streams")}} + +**`MediaStreamTrack`** インターフェイスは、ストリームに含まれる一つのメディアトラックを表現します。一般的に、音声や動画のトラックですが、他の種類のトラックも存在することがあります。 + +{{InheritanceDiagram}} + +## プロパティ + +以下に示すプロパティに加えて、 `MediaStreamTrack` は制約可能なプロパティを持っています。これらのプロパティは、 {{domxref("MediaStreamTrack.applyConstraints", "applyConstraints()")}} によって設定でき、 {{domxref("MediaStreamTrack.getConstraints", "getConstraints()")}} と {{domxref("MediaStreamTrack.getSettings", "getSettings()")}} によって取得できます。制約可能なプロパティを用いて適切に動作させるためにはどのようにすればいいかを知りたい場合は、[能力と制約と設定](/ja/docs/Web/API/Media_Streams_API/Constraints)を見てください。適切に動作させなかった場合の結果として、あなたが作成したコードは信頼できないものになります。 + +- {{domxref("MediaStreamTrack.contentHint")}} + - : 文字列で、ウェブアプリケーションが、トラックがどのような種類のコンテンツを含んでいるかについてのヒントを提供し、 API 利用者がどのように扱うべきかをガイドするために使用することがあります。 +- {{domxref("MediaStreamTrack.enabled")}} + + - : 論理型で、トラックが有効の場合は `true` の値になり、メディアソースストリームを出力することができます。トラックが無効な場合は `false` の値になり、メディアソースストリームに出力されません。トラックの接続が解除された場合、この値は変更することはできますが、影響を与えることはありません。 + + > **Note:** 標準的な「ミュート」(消音)機能は `enabled` を `false` に設定することで実装できます。 `muted` プロパティは技術的な問題でメディアがない状態を表します。 + +- {{domxref("MediaStreamTrack.id")}} {{readonlyInline}} + - : トラックの固有識別子 (GUID) を含む文字列を返します。この識別子はブラウザーによって生成されます。 +- {{domxref("MediaStreamTrack.kind")}} {{readonlyInline}} + - : このトラックが音声トラックの場合は `"audio"` が設定され、動画トラックの場合は `"video"` が設定される文字列を返します。ソースからの関連付けが解除された場合、この値が変更されることはありません。 +- {{domxref("MediaStreamTrack.label")}} {{readonlyInline}} + - : ユーザーエージェントによって割り当てられた、 `"internal microphone"` のようなトラックソースを識別するラベルを含む文字列を返します。この文字列は空になることもあり、ソースが接続されていないと空になります。トラックのソースとの関連付けが解除されても、このラベルは変更されません。 +- {{domxref("MediaStreamTrack.muted")}} {{readonlyInline}} + + - : 技術的な問題でこのトラックがメディアデータを提供できないかどうかを示す論理値を返します。 + + > **Note:** 標準的な「ミュート」(消音)機能は `enabled` を `false` に設定することで実装でき、再び `true` に設定することでメディアのミュートを解除することができます。 + +- {{domxref("MediaStreamTrack.readyState")}} {{readonlyInline}} + + - : トラックの状態を表す列挙型の値を返します。この値は次のいずれかになります。 + + - `"live"` は入力機器が接続されており、ベストエフォートでリアルタイムなデータを提供することを表します。この状態では、 {{domxref("MediaStreamTrack.enabled", "enabled")}} 属性を用いることで、データの出力のオンとオフを切り替えることができます。 + - `"ended"` は入力機器がこれ以上データを提供することがなく、新しいデータも一切提供されないことを示します。 + +- {{domxref("MediaStreamTrack.remote")}} {{readonlyInline}} {{deprecated_inline}} + - : トラックのソースが {{domxref("RTCPeerConnection")}} の場合は `true` であり、それ以外は `false` となる論理値を返します。 + +## メソッド + +- {{domxref("MediaStreamTrack.applyConstraints()")}} + - : `MediaStreamTrack` の制約可能なプロパティについて、理想的な値や許容される値の範囲を指定することができます。 +- {{domxref("MediaStreamTrack.clone()")}} + - : `MediaStreamTrack` の複製を返します。 +- {{domxref("MediaStreamTrack.getCapabilities()")}} + - : `MediaStreamTrack` で利用できる制約可能なプロパティの一覧を返します。 +- {{domxref("MediaStreamTrack.getConstraints()")}} + - : トラックに設定されている制約を含む {{domxref('MediaTrackConstraints')}} を返します。返値は、最後に {{domxref("MediaStreamTrack.applyConstraints", "applyConstraints()")}} を用いて設定した制約に一致します。 +- {{domxref("MediaStreamTrack.getSettings()")}} + - : `MediaStreamTrack` の制約可能なプロパティの値を含む {{domxref("MediaTrackSettings")}} オブジェクトを返します。 +- {{domxref("MediaStreamTrack.stop()")}} + - : トラックに関連付けられたソースの再生を停止し、ソースとトラックの関連付けを解除します。トラックの状態は `ended` に設定されます。 + +## イベント + +これらのイベントを待ち受けするには、 {{domxref("EventTarget.addEventListener", "addEventListener()")}} を使用するか、イベントリスナーをこのインターフェイスの `onイベント名` プロパティに代入するかしてください。。 + +- {{domxref("MediaStreamTrack/ended_event", "ended")}} + - : トラックの再生が終わったとき({{domxref("MediaStreamTrack.readyState", "readyState")}} の値が `ended` に変化したとき)に送られます +- {{domxref("MediaStreamTrack/mute_event", "mute")}} + - : そのトラックが一時的にデータを提供できなくなったこと(ネットワークに異常が発生した場合など)を示すために {{domxref("MediaStreamTrack.muted", "muted")}} プロパティの値が `true` になったときに `MediaStreamTrack` に送られます。 +- {{domxref("MediaStreamTrack/overconstrained_event", "overconstrained")}} {{deprecated_inline}} + - : トラックに指定された制約により、トラックに互換性がなくなり、その結果として使用できない場合に送信されます。 +- {{domxref("MediaStreamTrack/unmute_event", "unmute")}} + - : データが再び利用可能になり、 `muted` 状態が終わったときにトラックに送信されます。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [メディアキャプチャとストリーム API](/ja/docs/Web/API/Media_Streams_API) +- {{domxref("MediaStream")}} diff --git a/files/ja/web/api/mediastreamtrack/label/index.md b/files/ja/web/api/mediastreamtrack/label/index.md index 14bcb3b21187fb..a3c8b1c76f065a 100644 --- a/files/ja/web/api/mediastreamtrack/label/index.md +++ b/files/ja/web/api/mediastreamtrack/label/index.md @@ -1,43 +1,38 @@ --- title: MediaStreamTrack.label slug: Web/API/MediaStreamTrack/label +page-type: web-api-instance-property +tags: + - Media Capture and Streams + - MediaStreamTrack + - NeedsExample + - Property + - Read-only + - Reference + - WebRTC +browser-compat: api.MediaStreamTrack.label translation_of: Web/API/MediaStreamTrack/label --- -

          {{APIRef("Media Capture and Streams")}}

          +{{APIRef("Media Capture and Streams")}} -

          MediaStreamTrack.label は読み取り専用のプロパティであり、 "internal microphone"のようなトラックソースを識別するユーザエージェントによって割り当てられたラベルを含むDOMStringを返します。この文字列は空になることもあり、ソースが接続されていないと空になります。トラックのソースとの関連付けが解除されても、このラベルは変更されません。

          +**`MediaStreamTrack.label`** は読み取り専用のプロパティであり、トラックのソースを識別するために{{glossary("user agent", "ユーザーエージェント")}}によって割り当てられたラベルを含む文字列を返します。例えば `"internal microphone"` などです。 -

          文法

          +この文字列は空になることもあり、ソースが接続されていないと空になります。トラックのソースとの関連付けが解除されても、このラベルは変更されません。 -
           var name = track.label;
          +## 構文 -

          +```js +const label = track.label +``` -

          仕様

          +## 仕様書 - - - - - - - - - - - - - - - -
          仕様状況コメント
          {{ SpecName('Media Capture', '#widl-MediaStreamTrack-label', 'MediaStreamTrack.label') }}{{ Spec2('Media Capture') }}初版
          +{{Specifications}} -

          ブラウザ互換性

          +## ブラウザーの互換性 -

          {{Compat("api.MediaStreamTrack.label")}}

          +{{Compat}} -

          関連項目

          +## 関連情報 - +- [WebRTC](/ja/docs/Web/API/WebRTC_API) diff --git a/files/ja/web/api/mediastreamtrack/mute_event/index.md b/files/ja/web/api/mediastreamtrack/mute_event/index.md index 6e93386edbcf92..df7acb4d07d040 100644 --- a/files/ja/web/api/mediastreamtrack/mute_event/index.md +++ b/files/ja/web/api/mediastreamtrack/mute_event/index.md @@ -1,6 +1,7 @@ --- title: 'MediaStreamTrack: mute イベント' slug: Web/API/MediaStreamTrack/mute_event +page-type: web-api-event tags: - API - Audio @@ -11,92 +12,98 @@ tags: - Reference - Video - mute - - イベント +browser-compat: api.MediaStreamTrack.mute_event translation_of: Web/API/MediaStreamTrack/mute_event --- -
          {{APIRef("Media Capture and Streams")}}
          - -

          mute イベントは、トラックのソースが一時的にメディアデータを提供することができなくなったときに {{domxref("MediaStreamTrack")}} へ送られます。トラックがメディア出力可能になると、 {{domxref("MediaStreamTrack/unmute_event", "unmute")}} が送られます。

          - -

          mute イベントと unmute イベントとの間、トラックの {{domxref("MediaStreamTrack.muted", "muted")}} プロパティの値は true になります。

          - -
          -

          メモ: 多くの人が「ミュート」と考える状態 (すなわち、トラックを無音にすることをユーザーが制御できる方法) は実際には {{domxref("MediaStreamTrack.enabled")}} プロパティを使用して管理され、こちらではイベントが発生しません。

          -
          - - - - - - - - - - - - - - - - - - - - -
          バブリングなし
          キャンセル不可
          インターフェイス{{domxref("Event")}}
          イベントハンドラープロパティ{{domxref("MediaStreamTrack.onmute", "onmute")}}
          - -

          - -

          この例では、イベントハンドラーを mute および {{domxref("MediaStreamTrack/unmute_event", "unmute")}} の各イベントに設定し、 {{domxref("MediaStreamTrack")}} が入った変数 musicTrack のソースからメディアが流れていない場合を検出しています。

          - -
          musicTrack.addEventListener("mute", event => {
          +{{APIRef("Media Capture and Streams")}}
          +
          +**`mute`** イベントは、トラックのソースが一時的にメディアデータを提供することができなくなったときに {{domxref("MediaStreamTrack")}} へ送られます。
          +
          +トラックがメディア出力可能になると、 {{domxref("MediaStreamTrack/unmute_event", "unmute")}} が送られます。
          +
          +`mute` イベントと `unmute` イベントとの間で、トラックの {{domxref("MediaStreamTrack.muted", "muted")}} プロパティの値は `true` になります。
          +
          +> **Note:** 多くの人が「ミュート」と考える状態(すなわち、トラックを無音にすることをユーザーが制御できる方法)は実際には {{domxref("MediaStreamTrack.enabled")}} プロパティを使用して管理され、こちらではイベントが発生しません。
          +
          +このイベントはキャンセル不可で、バブリングしません。
          +
          +## 構文
          +
          +このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} のようなメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
          +
          +```js
          +addEventListener('mute', event => { });
          +
          +onmute = event => { };
          +```
          +
          +## イベント型
          +
          +一般的な {{domxref("Event")}} です。
          +
          +## 例
          +
          +この例では、イベントハンドラーを `mute` および {{domxref("MediaStreamTrack/unmute_event", "unmute")}} の各イベントに設定し、 {{domxref("MediaStreamTrack")}} が入った変数 `musicTrack` のソースからメディアが流れていない場合を検出しています。
          +
          +```js
          +musicTrack.addEventListener("mute", event => {
             document.getElementById("timeline-widget").style.backgroundColor = "#aaa";
           }, false);
           
          -musicTrack.addEventListener("unmute", event => {
          +musicTrack.addEventListener("unmute", event => {
            document.getElementById("timeline-widget").style.backgroundColor = "#fff";
           }, false);
          -
          +``` -

          これらのイベントハンドラーのある場面で、トラック musicTrack が {{domxref("MediaStreamTrack.muted", "muted")}} の状態になったとき、 timeline-widget の ID を持った要素の背景色が #aaa に変化します。トラックのミュート状態を抜けたことを — unmute イベントが到着したことによって — 検出すると、背景色は白に戻ります。

          +これらのイベントハンドラーのある場面で、トラック `musicTrack` が {{domxref("MediaStreamTrack.muted", "muted")}} の状態になったとき、 `timeline-widget` の ID を持った要素の背景色が `#aaa` に変化します。トラックのミュート状態を抜けたことを — `unmute` イベントが到着したことによって — 検出すると、背景色は白に戻ります。 -

          {{domxref("MediaStreamTrack.onmute", "onmute")}} イベントハンドラープロパティを使用してこのイベントのハンドラーを設定することもできます。同様に、 {{domxref("MediaStreamTrack.onunmute", "onunmute")}} イベントハンドラープロパティが unmute イベントを設定するために利用できます。以下の例ではこれを示しています。

          +`onmute` イベントハンドラープロパティを使用してこのイベントのハンドラーを設定することもできます。同様に、 {{domxref("MediaStreamTrack.unmute_event", "onunmute")}} イベントハンドラープロパティが `unmute` イベントを設定するために利用できます。以下の例ではこれを示しています。 -
          musicTrack.onmute = event => {
          +```js
          +musicTrack.onmute = event => {
             document.getElementById("timeline-widget").style.backgroundColor = "#aaa";
           }
           
          -musicTrack.mute = event = > {
          +musicTrack.onunmute = event = > {
             document.getElementById("timeline-widget").style.backgroundColor = "#fff";
           }
          -
          - -

          仕様書

          - - - - - - - - - - - - - - - - -
          仕様書状態備考
          {{SpecName('Media Capture', '#event-mediastreamtrack-unmute', 'unmute')}}{{Spec2('Media Capture')}}初回定義
          - -

          ブラウザーの互換性

          - -

          {{Compat("api.MediaStreamTrack.mute_event")}}

          - -

          関連情報

          - -
            -
          • {{domxref("MediaStreamTrack.onmute", "onmute")}} イベントハンドラープロパティ
          • -
          • {{domxref("MediaStreamTrack/unmute_event", "unmute")}} イベント
          • -
          +``` + +### レシーバーによるトラックのミュート + +次の例は、レシーバーを使用してトラックをミュートする方法です。 + +```js +// Peer 1 (Receiver) +audioTrack.addEventListener('mute', event => { + // Do something in UI +}); + +videoTrack.addEventListener('mute', event => { + // Do something in UI +}); + +// Peer 2 (Sender) +const transceivers = peer.getTransceivers(); + +const audioTrack = transceivers[0]; +audioTrack.direction = 'recvonly'; + +const videoTrack = transceivers[1]; +videoTrack.direction = 'recvonly'; +``` + +`transceivers` は {{domxref("RTCRtpTransceiver")}} の配列で、送受信される音声または映像トラックを見つけることができます。詳しくは {{domxref("RTCRtpTransceiver.direction", "direction")}} の記事を参照してください。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("MediaStreamTrack/unmute_event", "unmute")}} イベント +- {{domxref("RTCRtpTransceiver.direction", "direction")}} diff --git a/files/ja/web/api/mediastreamtrack/muted/index.md b/files/ja/web/api/mediastreamtrack/muted/index.md index 3343727d597cad..6c1d79c9ab8f3f 100644 --- a/files/ja/web/api/mediastreamtrack/muted/index.md +++ b/files/ja/web/api/mediastreamtrack/muted/index.md @@ -1,41 +1,49 @@ --- -title: muted +title: MediaStreamTrack.muted slug: Web/API/MediaStreamTrack/muted +page-type: web-api-instance-property +tags: + - API + - Media Capture and Streams + - MediaStreamTrack + - Property + - Read-only + - Reference + - muted +browser-compat: api.MediaStreamTrack.muted translation_of: Web/API/MediaStreamTrack/muted --- -

          {{APIRef("Media Capture and Streams")}}

          +{{APIRef("Media Capture and Streams")}} -

          MediaStreamTrack.mutedは読み取り専用のプロパティであり、トラックがミュートであるかどうかを示すBooleanの値を返します。

          +**`muted`** は {{domxref("MediaStreamTrack")}} 読み取り専用のプロパティであり、トラックが現在メディア出力を提供できない状態であるかどうかを示します。 -

          文法

          +> **Note:** ユーザーがトラックをミュート/ミュート解除する方法を実装するには、{{domxref("MediaStreamTrack.enabled", "enabled")}} プロパティを使用してください。 `enabled` を `false` に設定してトラックを無効にすると、空のフレーム(すべてのサンプルが 0 である音声フレーム、またはすべてのピクセルが黒である映像フレーム)だけが生成されます。 -
          var bool = track.muted;
          +## 値 -

          +論理値で、トラックが現在ミュートされている場合は `true` となり、ミュートされていない場合は `false` となります。 -

          {{jsxref('Boolean')}}型の値。

          +> **Note:** 可能であれば、`muted` をポーリングしてトラックのミュート状態を監視することは避けてください。 +> 代わりに、 {{domxref("MediaStreamTrack.mute_event", "mute")}} と {{domxref("MediaStreamTrack.unmute_event", "unmute")}} イベントに対するイベントリスナーを追加してください。 -

          +## 例 -
          // TBD
          +この例では、 {{domxref("MediaStreamTrack")}} オブジェクトの配列の中で、現在ミュートされているトラックの数を数えます。 -

          仕様

          +```js +let mutedCount = 0; - - - - - - - - - - - - - -
          仕様状況コメント
          {{SpecName('Media Capture', '#dom-mediastreamtrack-muted', 'muted')}}{{Spec2('Media Capture')}}初版
          +trackList.forEach((track) => { + if (track.muted) { + mutedCount += 1; + } +}); +``` -

          ブラウザ互換性

          +## 仕様書 -

          {{Compat("api.MediaStreamTrack.muted")}}

          +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/mediastreamtrack/overconstrained_event/index.md b/files/ja/web/api/mediastreamtrack/overconstrained_event/index.md index e141ad3ac900e8..8dae9ed5355566 100644 --- a/files/ja/web/api/mediastreamtrack/overconstrained_event/index.md +++ b/files/ja/web/api/mediastreamtrack/overconstrained_event/index.md @@ -1,56 +1,42 @@ --- -title: MediaStreamTrack.onoverconstrained +title: 'MediaStreamTrack: overconstrained イベント' slug: Web/API/MediaStreamTrack/overconstrained_event -translation_of: Web/API/MediaStreamTrack/onoverconstrained +page-type: web-api-event +tags: + - API + - Deprecated + - Event Handler + - Event + - Reference + - WebRTC +browser-compat: api.MediaStreamTrack.overconstrained_event +translation_of: Web/API/MediaStreamTrack/overconstrained_event original_slug: Web/API/MediaStreamTrack/onoverconstrained --- -

          {{ APIRef("Media Capture and Streams") }}

          +{{ APIRef("Media Capture and Streams") }}{{deprecated_header}} -

          MediaStreamTrack.onoverconstrainedイベントハンドラは、{{event("overconstrained")}}イベントを受け取った時に呼び出されるプロパティです。このイベントは、影響を受けた各トラック(複数のトラックが同一のソースを共有している時)で発生します。このイベントは、ユーザエージェントが与えられたソースに対して現在の制約を評価し、与えられた制約でソースを設定することができない時に発生します。 過制約のため、ユーザエージェントは影響をうけた各トラックをミュートにします。影響を受けたトラックは、現在のソースの有効な能力に配慮してアプリケーションが制約を調整するまでmutedの状態を維持します。

          +**`overconstrained`** イベントは、トラックに制約の競合が多く発生しすぎたときに発行されます。 -

           

          +## 構文 -

          文法

          +このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} のようなメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。 -
          track.onoverconstrained = function;
          -
          +```js +addEventListener('overconstrained', event => { }); -

          +onoverconstrained = event => { }; +``` -
            -
          • functionはユーザーが定義した関数の名前で末尾の()やパラメータを省略したもの、または、function(event) {...}の形式で表現された匿名関です。イベントハンドラは常に 、{{domxref("MediaStreamErrorEvent")}}型のイベントを含む1つのパラメータを持ちます。
          • -
          +## イベント型 -

          +一般的な {{domxref("Event")}} です。 -
          dc.onoverconstrained = function(ev) { alert("overconstrained event detected!"); };
          -
          +## 例 -

          仕様

          +```js +dc.onoverconstrained = function() { alert("overconstrained event detected!"); }; +``` - - - - - - - - - - - - - - - -
          仕様状況コメント
          {{ SpecName('Media Capture', '#widl-MediaStreamTrack-onoverconstrained', 'MediaStreamTrack.onoverconstrained') }}{{ Spec2('Media Capture') }}初版
          +## ブラウザーの互換性 -

          ブラウザ互換性

          - -

          {{Compat("api.MediaStreamTrack.onoverconstrained")}}

          - -

          関連項目

          - -
            -
          • {{event("overconstrained")}}イベント、およびその型である {{domxref("MediaStreamErrorEvent")}}。
          • -
          +{{Compat}} diff --git a/files/ja/web/api/mediastreamtrack/readystate/index.md b/files/ja/web/api/mediastreamtrack/readystate/index.md index 10c94f8cf4e71d..5a9eee2ad62a2a 100644 --- a/files/ja/web/api/mediastreamtrack/readystate/index.md +++ b/files/ja/web/api/mediastreamtrack/readystate/index.md @@ -1,54 +1,39 @@ --- title: MediaStreamTrack.readyState slug: Web/API/MediaStreamTrack/readyState +page-type: web-api-instance-property +tags: + - API + - Media Capture and Streams + - MediaStreamTrack + - NeedsExample + - Property + - Read-only + - Reference +browser-compat: api.MediaStreamTrack.readyState translation_of: Web/API/MediaStreamTrack/readyState --- -

          {{APIRef("Media Capture and Streams")}}

          +{{APIRef("Media Capture and Streams")}} -

          MediaStreamTrack.readyStateは読み取り専用のプロパティであり、トラックの状態を表す値を返します。

          +**`MediaStreamTrack.readyState`** は読み取り専用のプロパティであり、トラックの状態を表す列挙値を返します。 -

          文法

          +## 値 -
           var state = track.readyState;
          +以下の値の何れかを取ります。 -

          +- `"live"` は、入力が接続され、リアルタイムなデータがベストエフォートで提供されている状態を示します。この状態では、データの出力は、 {{domxref("MediaStreamTrack.enabled")}} プロパティを用いて、オン/オフを切り替えることができます。 +- `"ended"` は、入力がこれ以上データを提供せず、新しいデータも提供しないことを示します。 -

          以下の値のどれかを取ります。

          +## 仕様書 -
            -
          • "live"は、入力が接続され、リアルタイムなデータがベストエフォートで提供されている状態を示します。この状態では、データの出力は、MediaStreamTrack.enabled プロパティを用いて、オン/オフを切り替えることができます。
          • -
          •  "ended"は入力がこれ以上データを提供しない状態を示します。
          • -
          +{{Specifications}} -

          +## ブラウザーの互換性 -

          仕様

          +{{Compat}} - - - - - - - - - - - - - - - -
          仕様状況コメント
          {{ SpecName('Media Capture', '#widl-MediaStreamTrack-readystate', 'MediaStreamTrack.readyState') }}{{ Spec2('Media Capture') }}初版
          +## 関連情報 -

          ブラウザ互換性

          - -

          {{Compat("api.MediaStreamTrack.readyState")}}

          - -

          関連項目

          - - +- [Media Stream API](/ja/docs/Web/API/Media_Streams_API) +- [WebRTC](/ja/docs/Web/API/WebRTC_API) +- {{domxref("MediaStreamTrack.ended_event", "ended")}} イベント diff --git a/files/ja/web/api/mediastreamtrack/unmute_event/index.md b/files/ja/web/api/mediastreamtrack/unmute_event/index.md index d720f299e49ce4..7bfdd45ead8e13 100644 --- a/files/ja/web/api/mediastreamtrack/unmute_event/index.md +++ b/files/ja/web/api/mediastreamtrack/unmute_event/index.md @@ -1,6 +1,7 @@ --- title: 'MediaStreamTrack: unmute イベント' slug: Web/API/MediaStreamTrack/unmute_event +page-type: web-api-event tags: - Audio - Event @@ -11,90 +12,95 @@ tags: - Reference - Video - unmute - - イベント +browser-compat: api.MediaStreamTrack.unmute_event translation_of: Web/API/MediaStreamTrack/unmute_event --- -
          {{APIRef("Media Capture and Streams")}}
          - -

          unmute イベントは、トラックのソースが休止時間の後、再びメディアデータを提供するようになると一度発生します。これは {{domxref("MediaStreamTrack/mute_event", "mute")}} で始まった {{domxref("MediaStreamTrack.muted", "muted")}} の状態を終了します。

          - - - - - - - - - - - - - - - - - - - - -
          バブリングなし
          キャンセル不可
          インターフェイス{{domxref("Event")}}
          イベントハンドラープロパティ{{domxref("MediaStreamTrack.onunmute", "onunmute")}}
          - -
          -

          メモ: 多くの人が「ミュート」と考える状態 (すなわち、トラックを無音にすることをユーザーが制御できる方法) は実際には {{domxref("MediaStreamTrack.enabled")}} プロパティを使用して管理され、こちらではイベントが発生しません。

          -
          - -

          - -

          この例では、イベントハンドラーを {{domxref("MediaStreamTrack/mute_event", "mute")}} および unmute の各イベントに設定し、 {{domxref("MediaStreamTrack")}} が入った変数 musicTrack のソースからメディアが流れていない場合を検出しています。

          - -
          musicTrack.addEventListener("mute", event => {
          +{{APIRef("Media Capture and Streams")}}
          +
          +**`unmute`** イベントは、トラックのソースが休止時間の後、再びメディアデータを提供するようになると {{domxref("MediaStreamTrack")}} に送られます。
          +
          +これは {{domxref("MediaStreamTrack/mute_event", "mute")}} で始まった {{domxref("MediaStreamTrack.muted", "muted")}} の状態を終了します。
          +
          +> **Note:** 多くの人が「ミュート」と考える状態(すなわち、トラックを無音にすることをユーザーが制御できる方法)は実際には {{domxref("MediaStreamTrack.enabled")}} プロパティを使用して管理され、こちらではイベントが発生しません。
          +
          +このイベントはキャンセル不可で、バブリングしません。
          +
          +## 構文
          +
          +このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} のようなメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
          +
          +```js
          +addEventListener('unmute', event => { });
          +
          +onunmute = event => { };
          +```
          +
          +## イベント型
          +
          +一般的な {{domxref("Event")}} です。
          +
          +## 例
          +
          +この例では、イベントハンドラーを {{domxref("MediaStreamTrack/mute_event", "mute")}} および `unmute` の各イベントに設定し、 {{domxref("MediaStreamTrack")}} が入った変数 `musicTrack` のソースからメディアが流れていない場合を検出しています。
          +
          +```js
          +musicTrack.addEventListener("mute", event => {
             document.getElementById("timeline-widget").style.backgroundColor = "#aaa";
           }, false);
           
          -musicTrack.addEventListener("unmute", event => {
          +musicTrack.addEventListener("unmute", event => {
            document.getElementById("timeline-widget").style.backgroundColor = "#fff";
           }, false);
          -
          +``` -

          これらのイベントハンドラーのある場面で、トラック musicTrack が {{domxref("MediaStreamTrack.muted", "muted")}} の状態になったとき、 timeline-widget の ID を持った要素の背景色が #aaa に変化します。トラックのミュート状態を抜けたことを — unmuted イベントが到着したことによって — 検出すると、背景色は白に戻ります。

          +これらのイベントハンドラーのある場面で、トラック `musicTrack` が {{domxref("MediaStreamTrack.muted", "muted")}} の状態になったとき、 `timeline-widget` の ID を持った要素の背景色が `#aaa` に変化します。トラックのミュート状態を抜けたことを — `unmuted` イベントが到着したことによって — 検出すると、背景色は白に戻ります。 -

          {{domxref("MediaStreamTrack.onunmute", "onunmute")}} イベントハンドラープロパティを使用してこのイベントのハンドラーを設定することもできます。同様に、 {{domxref("MediaStreamTrack.onmute", "onmute")}} イベントハンドラープロパティが mute イベントを設定するために利用できます。以下の例ではこれを示しています。

          +`onunmute` イベントハンドラープロパティを使用してこのイベントのハンドラーを設定することもできます。同様に、 {{domxref("MediaStreamTrack.mute_event", "onmute")}} イベントハンドラープロパティを `mute` イベントを設定するために利用できます。以下の例ではこれを示しています。 -
          musicTrack.onmute = event => {
          +```js
          +musicTrack.onmute = event => {
             document.getElementById("timeline-widget").style.backgroundColor = "#aaa";
           }
           
          -musicTrack.mute = event = > {
          +musicTrack.mute = event = > {
             document.getElementById("timeline-widget").style.backgroundColor = "#fff";
           }
          -
          - -

          仕様書

          - - - - - - - - - - - - - - - - -
          仕様書状態備考
          {{SpecName('Media Capture', '#event-mediastreamtrack-unmute', 'unmute')}}{{Spec2('Media Capture')}}初回定義
          - -

          ブラウザーの互換性

          - -

          {{Compat("api.MediaStreamTrack.unmute_event")}}

          - -

          関連情報

          - -
            -
          • {{domxref("MediaStreamTrack.onunmute", "onunmute")}} イベントハンドラープロパティ
          • -
          • {{domxref("MediaStreamTrack/mute_event", "mute")}} イベント
          • -
          +``` + +### レシーバーでトラックのミュートを解除する + +次の例は、レシーバーを使用してトラックのミュートを解除する方法です。 + +```js +// Peer 1 (Receiver) +audioTrack.addEventListener('unmute', event => { + // Do something in UI +}); + +videoTrack.addEventListener('unmute', event => { + // Do something in UI +}); + +// Peer 2 (Sender) +const transceivers = peer.getTransceivers(); + +const audioTrack = transceivers[0]; +audioTrack.direction = 'sendrecv'; + +const videoTrack = transceivers[1]; +videoTrack.direction = 'sendrecv'; +``` + +`transceivers` は {{domxref("RTCRtpTransceiver")}} の配列で、送受信される音声または映像トラックを見つけることができます。詳しくは {{domxref("RTCRtpTransceiver.direction", "direction")}} の記事を参照してください。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("MediaStreamTrack/mute_event", "mute")}} イベント From c7524406be59671061043f31d88a82e45ee7b23f Mon Sep 17 00:00:00 2001 From: abitwhy <68452982+abitwhy@users.noreply.github.com> Date: Tue, 19 Jul 2022 20:16:35 +0800 Subject: [PATCH 088/100] fix wrong code example (#6985) --- .../regular_expressions/groups_and_backreferences/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/zh-cn/web/javascript/guide/regular_expressions/groups_and_backreferences/index.html b/files/zh-cn/web/javascript/guide/regular_expressions/groups_and_backreferences/index.html index 7571ae869c2f57..eb0bbef40d9d24 100644 --- a/files/zh-cn/web/javascript/guide/regular_expressions/groups_and_backreferences/index.html +++ b/files/zh-cn/web/javascript/guide/regular_expressions/groups_and_backreferences/index.html @@ -116,7 +116,7 @@

          使用命名组

          let users= `姓氏:李,名字:雷
           姓氏:韩,名字:梅梅`;
           
          -let regexpNames =  /姓氏: (?<first>.+), 名字: (?<last>.+)/mg;
          +let regexpNames =  /姓氏:(?<first>.+),名字:(?<last>.+)/mg;
           let match = regexpNames.exec(users);
           
           do {
          
          From 22d1bd2b15a1934f2bbe47bbb669ad88d6ff1af6 Mon Sep 17 00:00:00 2001
          From: A1lo 
          Date: Tue, 19 Jul 2022 20:17:20 +0800
          Subject: [PATCH 089/100] fix the definition list (#6984)
          
          ---
           .../zh-cn/mdn/structures/macros/commonly-used_macros/index.md | 4 ++--
           1 file changed, 2 insertions(+), 2 deletions(-)
          
          diff --git a/files/zh-cn/mdn/structures/macros/commonly-used_macros/index.md b/files/zh-cn/mdn/structures/macros/commonly-used_macros/index.md
          index 3b5c6fcff5b840..0cc6dc4f68398b 100644
          --- a/files/zh-cn/mdn/structures/macros/commonly-used_macros/index.md
          +++ b/files/zh-cn/mdn/structures/macros/commonly-used_macros/index.md
          @@ -166,9 +166,9 @@ original_slug: MDN/Structures/Macros/Custom_macros
           用法:`\{{optional_inline}}` 或 `\{{ReadOnlyInline}}`。示例:
           
           - `isCustomObject` {{ReadOnlyInline}}
          -  - 如果此项值为 `true`,表明该对象是一个自定义对象。
          +  - : 如果此项值为 `true`,表明该对象是一个自定义对象。
           - `parameterX` {{optional_inline}}
          -  - 参数描述
          +  - : 参数描述
           
           ## 状态和兼容性指示器
           
          
          From cc312cf62e99c7cc16443bdadecca689540f35e9 Mon Sep 17 00:00:00 2001
          From: A1lo 
          Date: Tue, 19 Jul 2022 20:17:48 +0800
          Subject: [PATCH 090/100] replace standard-table with macros for zh-CN (Part
           32) (#6977)
          
          ---
           .../web/css/text-decoration-color/index.html  | 17 +--------
           .../web/css/text-decoration-line/index.html   | 27 ++------------
           .../web/css/text-decoration-skip/index.html   | 17 +--------
           .../web/css/text-decoration-style/index.html  | 27 ++------------
           .../css/text-decoration-thickness/index.html  | 21 +----------
           files/zh-cn/web/css/text-indent/index.html    | 36 ++-----------------
           files/zh-cn/web/css/text-justify/index.html   | 17 +--------
           .../zh-cn/web/css/text-orientation/index.html | 17 +--------
           files/zh-cn/web/css/text-rendering/index.html | 25 ++-----------
           files/zh-cn/web/css/text-shadow/index.html    | 30 +---------------
           .../zh-cn/web/css/text-size-adjust/index.html | 17 +--------
           .../css/text-underline-position/index.html    | 17 +--------
           .../zh-cn/web/css/time-percentage/index.html  | 22 +-----------
           files/zh-cn/web/css/time/index.html           | 29 +--------------
           files/zh-cn/web/css/transform-box/index.html  | 17 +--------
           .../web/css/transform-function/index.html     |  8 ++---
           .../css/transform-function/matrix/index.html  |  4 +++
           .../transform-function/matrix3d/index.html    | 19 ++--------
           .../transform-function/perspective/index.html |  4 +++
           .../css/transform-function/rotate/index.html  |  8 +++--
           .../transform-function/rotate3d/index.html    |  8 +++--
           .../css/transform-function/rotatex/index.html | 21 ++---------
           .../css/transform-function/rotatey/index.html | 19 ++--------
           .../css/transform-function/rotatez/index.html | 19 ++--------
           .../css/transform-function/scale/index.html   |  4 +++
           .../css/transform-function/scalex/index.html  |  4 +++
           .../css/transform-function/scaley/index.html  |  6 +++-
           .../css/transform-function/skew/index.html    | 19 ++--------
           .../css/transform-function/skewx/index.html   | 21 ++---------
           .../transform-function/translate/index.html   | 21 ++---------
           .../transform-function/translate3d/index.html | 25 ++-----------
           .../transform-function/translatex/index.html  | 21 ++---------
           .../transform-function/translatey/index.html  | 19 ++--------
           .../zh-cn/web/css/transform-origin/index.html | 21 ++---------
           .../zh-cn/web/css/transform-style/index.html  | 17 +--------
           files/zh-cn/web/css/transform/index.html      | 22 +-----------
           .../zh-cn/web/css/transition-delay/index.html | 21 ++---------
           .../web/css/transition-duration/index.html    | 17 +--------
           .../web/css/transition-property/index.html    | 17 +--------
           .../css/transition-timing-function/index.html | 17 +--------
           files/zh-cn/web/css/transition/index.html     | 17 +--------
           files/zh-cn/web/css/translate/index.html      | 17 +--------
           files/zh-cn/web/css/type_selectors/index.html | 27 +-------------
           files/zh-cn/web/css/unicode-bidi/index.html   | 22 +-----------
           .../web/css/universal_selectors/index.html    | 22 +-----------
           files/zh-cn/web/css/unset/index.html          | 22 +-----------
           files/zh-cn/web/css/url/index.html            | 27 +-------------
           files/zh-cn/web/css/user-select/index.html    | 17 +--------
           .../css/value_definition_syntax/index.html    | 25 +------------
           files/zh-cn/web/css/var/index.html            | 17 +--------
           files/zh-cn/web/css/vertical-align/index.html | 27 +-------------
           files/zh-cn/web/css/white-space/index.html    | 24 ++-----------
           files/zh-cn/web/css/widows/index.html         | 27 +-------------
           files/zh-cn/web/css/width/index.html          | 33 ++---------------
           files/zh-cn/web/css/will-change/index.html    | 25 +++----------
           files/zh-cn/web/css/word-break/index.html     | 17 +--------
           files/zh-cn/web/css/writing-mode/index.html   | 22 +-----------
           files/zh-cn/web/css/z-index/index.html        | 22 +-----------
           .../detecting_device_orientation/index.html   | 25 ++-----------
           files/zh-cn/web/events/index.html             | 18 +++-------
           .../html/constraint_validation/index.html     |  6 ++--
           .../html/attributes/autocomplete/index.html   | 22 +-----------
           files/zh-cn/web/html/element/a/index.html     | 32 +----------------
           files/zh-cn/web/html/element/abbr/index.html  | 27 +-------------
           .../zh-cn/web/html/element/acronym/index.html | 17 +--------
           .../zh-cn/web/html/element/address/index.html | 27 +-------------
           files/zh-cn/web/html/element/area/index.html  | 27 +-------------
           .../zh-cn/web/html/element/article/index.html | 22 +-----------
           files/zh-cn/web/html/element/b/index.html     | 27 +-------------
           files/zh-cn/web/html/element/base/index.html  | 27 +-------------
           files/zh-cn/web/html/element/bdi/index.html   | 30 ++--------------
           files/zh-cn/web/html/element/bdo/index.html   | 27 +-------------
           .../web/html/element/blockquote/index.html    | 27 +-------------
           files/zh-cn/web/html/element/body/index.html  | 27 +-------------
           files/zh-cn/web/html/element/br/index.html    | 29 ++-------------
           .../zh-cn/web/html/element/button/index.html  | 29 ++-------------
           .../zh-cn/web/html/element/canvas/index.html  | 22 +-----------
           .../zh-cn/web/html/element/caption/index.html | 27 +-------------
           files/zh-cn/web/html/element/cite/index.html  | 31 +---------------
           files/zh-cn/web/html/element/code/index.html  | 27 +-------------
           files/zh-cn/web/html/element/col/index.html   | 27 +-------------
           .../web/html/element/colgroup/index.html      | 27 +-------------
           files/zh-cn/web/html/element/data/index.html  | 22 +-----------
           .../web/html/element/datalist/index.html      | 22 +-----------
           files/zh-cn/web/html/element/dd/index.html    | 27 +-------------
           files/zh-cn/web/html/element/del/index.html   | 27 +-------------
           86 files changed, 154 insertions(+), 1679 deletions(-)
          
          diff --git a/files/zh-cn/web/css/text-decoration-color/index.html b/files/zh-cn/web/css/text-decoration-color/index.html
          index 69ab4fadfd8daf..95e3b275325982 100644
          --- a/files/zh-cn/web/css/text-decoration-color/index.html
          +++ b/files/zh-cn/web/css/text-decoration-color/index.html
          @@ -80,22 +80,7 @@ 

          Accessibility concerns

          规范

          - - - - - - - - - - - - - - - -
          规范状态备注
          {{ SpecName('CSS3 Text Decoration', '#text-decoration-color-property', 'text-decoration-color') }}{{ Spec2('CSS3 Text Decoration') }}初次定义。{{cssxref("text-decoration")}} 属性成为定义多个相关属性的简写形式。
          +{{Specifications}}

          浏览器兼容性

          diff --git a/files/zh-cn/web/css/text-decoration-line/index.html b/files/zh-cn/web/css/text-decoration-line/index.html index 7615ef91a09881..b280ba59804373 100644 --- a/files/zh-cn/web/css/text-decoration-line/index.html +++ b/files/zh-cn/web/css/text-decoration-line/index.html @@ -73,34 +73,11 @@

          示例

          规范

          - - - - - - - - - - - - - - - -
          规范状态备注
          {{SpecName('CSS3 Text Decoration', '#text-decoration-line', 'text-decoration-line')}}{{Spec2('CSS3 Text Decoration')}} -

          初次定义。{{cssxref("text-decoration")}} 属性同时变成了定义多个相关属性的简写形式。

          -
          +{{Specifications}}

          浏览器兼容性

          -

           

          - - - -

          {{Compat("css.properties.text-decoration-line")}}

          - -

           

          +

          {{Compat}}

          另请参阅

          diff --git a/files/zh-cn/web/css/text-decoration-skip/index.html b/files/zh-cn/web/css/text-decoration-skip/index.html index f6e14ae02cdd0b..2aa5507d66cd24 100644 --- a/files/zh-cn/web/css/text-decoration-skip/index.html +++ b/files/zh-cn/web/css/text-decoration-skip/index.html @@ -78,22 +78,7 @@

          结果

          Specifications

          - - - - - - - - - - - - - - - -
          SpecificationStatusComment
          {{SpecName("CSS4 Text Decoration", "#text-decoration-skip-property", "text-decoration-skip")}}{{Spec2("CSS4 Text Decoration")}}首次定义
          +{{Specifications}}

          Browser Compatibility

          diff --git a/files/zh-cn/web/css/text-decoration-style/index.html b/files/zh-cn/web/css/text-decoration-style/index.html index 8e59a0350b81dd..157bf55592d3e5 100644 --- a/files/zh-cn/web/css/text-decoration-style/index.html +++ b/files/zh-cn/web/css/text-decoration-style/index.html @@ -84,37 +84,14 @@

          示例

          规范

          - - - - - - - - - - - - - - - -
          规范状态备注
          {{ SpecName('CSS3 Text Decoration', '#text-decoration-style', 'text-decoration-style') }}{{ Spec2('CSS3 Text Decoration') }}初次定义。{{cssxref("text-decoration")}} 属性同时变成了定义多个相关属性的简写形式。
          +{{Specifications}}

          浏览器兼容性

          -

           

          - - - -

          {{Compat("css.properties.text-decoration-style")}}

          - -

           

          +

          {{Compat}}

          另请参阅

          • 当要设置多个线修饰属性时,用 {{cssxref("text-decoration")}} 简写属性会比分别写多个属性更方便
          - -

           

          diff --git a/files/zh-cn/web/css/text-decoration-thickness/index.html b/files/zh-cn/web/css/text-decoration-thickness/index.html index 100659cc79fd02..daef04dd0d62f2 100644 --- a/files/zh-cn/web/css/text-decoration-thickness/index.html +++ b/files/zh-cn/web/css/text-decoration-thickness/index.html @@ -85,26 +85,7 @@

          Results

          规范

          - - - - - - - - - - - - - - - -
          SpecificationStatusComment
          {{SpecName('CSS4 Text Decoration', '#text-decoration-width-property', 'text-decoration-width')}}{{Spec2('CSS4 Text Decoration')}}Initial definition.
          - -
          -

          Note: The property used to be called text-decoration-width, but was updated in 2019 to text-decoration-thickness.

          -
          +{{Specifications}}

          浏览器兼容性

          diff --git a/files/zh-cn/web/css/text-indent/index.html b/files/zh-cn/web/css/text-indent/index.html index d5e5186701c7f4..d43175391581d5 100644 --- a/files/zh-cn/web/css/text-indent/index.html +++ b/files/zh-cn/web/css/text-indent/index.html @@ -70,42 +70,10 @@

          结果

          规范

          - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
          SpecificationStatusComment
          {{SpecName('CSS3 Text', '#text-indent', 'text-indent')}}{{Spec2('CSS3 Text')}}Added the hanging and each-line keywords
          {{SpecName('CSS3 Transitions', '#animatable-css', 'text-indent')}}{{Spec2('CSS3 Transitions')}}Lists text-indent as animatable.
          {{SpecName('CSS2.1', 'text.html#indentation-prop', 'text-indent')}}{{Spec2('CSS2.1')}}The behavior with display: inline-block and anonymous block boxes have been explicitly defined.
          {{SpecName('CSS1', '#text-indent', 'text-indent')}}{{Spec2('CSS1')}}
          +{{Specifications}}

          {{cssinfo}}

          浏览器兼容性

          -

          {{Compat("css.properties.text-indent")}}

          - -
          +

          {{Compat}}

          diff --git a/files/zh-cn/web/css/text-justify/index.html b/files/zh-cn/web/css/text-justify/index.html index b42c15f79acbaf..6cbf7f22b7c86f 100644 --- a/files/zh-cn/web/css/text-justify/index.html +++ b/files/zh-cn/web/css/text-justify/index.html @@ -90,22 +90,7 @@

          示例

          规范

          - - - - - - - - - - - - - - - -
          规范状态备注
          {{SpecName('CSS3 Text', '#text-justify-property', 'text-justify')}}{{Spec2('CSS3 Text')}}
          +{{Specifications}}

          浏览器兼容性

          diff --git a/files/zh-cn/web/css/text-orientation/index.html b/files/zh-cn/web/css/text-orientation/index.html index 2cb9853783e9cf..f9a63be5796bb7 100644 --- a/files/zh-cn/web/css/text-orientation/index.html +++ b/files/zh-cn/web/css/text-orientation/index.html @@ -75,22 +75,7 @@

          结果

          规范

          - - - - - - - - - - - - - - - -
          SpecificationStatusComment
          {{SpecName('CSS3 Writing Modes', '#text-orientation', 'text-orientation')}}{{Spec2('CSS3 Writing Modes')}}Initial definition.
          +{{Specifications}}

          浏览器兼容性

          diff --git a/files/zh-cn/web/css/text-rendering/index.html b/files/zh-cn/web/css/text-rendering/index.html index 0eb88e359c3d20..d63e893604ef2c 100644 --- a/files/zh-cn/web/css/text-rendering/index.html +++ b/files/zh-cn/web/css/text-rendering/index.html @@ -108,29 +108,10 @@

          Gecko 注释

          optimizeSpeed 选项在 Gecko 2.0 {{ geckoRelease("2.0") }} 上已经没有效果了,因为标准的文字渲染代码已经非常快,而且目前还没有更快的渲染方法。详见 {{ bug(595688) }} .

          -

          说明文档

          +

          规范

          - - - - - - - - - - - - - - - -
          SpecificationStatusComment
          {{ SpecName('SVG1.1', 'painting.html#TextRenderingProperty', 'text-rendering') }}{{ Spec2('SVG1.1') }} 
          - -
          -

          该属性是 SVG 的属性而不是标准的 CSS 属性。但是 Gecko(Firefox) 和 Webkit(Chrome、Safari) 内核的浏览器允许该属性在 Windows、Mac OS 和 Linux 操作系统中应用于 HTML 和 XML 内容。 

          -
          +{{Specifications}}

          浏览器兼容性

          -{{Compat("css.properties.text-rendering")}} +{{Compat}} diff --git a/files/zh-cn/web/css/text-shadow/index.html b/files/zh-cn/web/css/text-shadow/index.html index abb61026e443bd..3bbffca2af2edc 100644 --- a/files/zh-cn/web/css/text-shadow/index.html +++ b/files/zh-cn/web/css/text-shadow/index.html @@ -118,27 +118,7 @@

          多重阴影

          规范

          - - - - - - - - - - - - - - - - - - - - -
          SpecificationStatusComment
          {{SpecName('CSS3 Transitions', '#animatable-css', 'text-shadow')}}{{Spec2('CSS3 Transitions')}}Specifies text-shadow as animatable.
          {{SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow')}}{{Spec2('CSS3 Text Decoration')}}The CSS property text-shadow was improperly defined in CSS2 and dropped in CSS2 (Level 1). The CSS Text Module Level 3 spec refined the syntax. Later it was moved to CSS Text Decoration Module Level 3.
          +{{Specifications}}

          {{cssinfo}}

          @@ -154,11 +134,3 @@

          参见

        • The {{cssxref("<color>")}} data type (for specifying the shadow color)
        • Applying color to HTML elements using CSS
        - -

        - -

        - -

        - -

        diff --git a/files/zh-cn/web/css/text-size-adjust/index.html b/files/zh-cn/web/css/text-size-adjust/index.html index e066b3faf103fb..9aa0580e127ede 100644 --- a/files/zh-cn/web/css/text-size-adjust/index.html +++ b/files/zh-cn/web/css/text-size-adjust/index.html @@ -62,22 +62,7 @@

        形式化语法

        规范

        - - - - - - - - - - - - - - - -
        规范状态备注
        {{SpecName("CSS Text Size Adjust", "#adjustment-control", "text-size-adjust")}}{{Spec2("CSS Text Size Adjust")}}Initial definition
        +{{Specifications}}

        浏览器兼容性

        diff --git a/files/zh-cn/web/css/text-underline-position/index.html b/files/zh-cn/web/css/text-underline-position/index.html index 393c6b7b0ae4d6..e60bd4e0a23027 100644 --- a/files/zh-cn/web/css/text-underline-position/index.html +++ b/files/zh-cn/web/css/text-underline-position/index.html @@ -62,22 +62,7 @@

        示例

        规范

        - - - - - - - - - - - - - - - -
        说明状态说明
        {{SpecName('CSS3 Text Decoration', '#text-underline-position-property', 'text-underline-position')}}{{Spec2('CSS3 Text Decoration')}}初始定义
        +{{Specifications}}

        浏览器兼容性

        diff --git a/files/zh-cn/web/css/time-percentage/index.html b/files/zh-cn/web/css/time-percentage/index.html index b815338b9f43c2..56629264bc96d7 100644 --- a/files/zh-cn/web/css/time-percentage/index.html +++ b/files/zh-cn/web/css/time-percentage/index.html @@ -21,27 +21,7 @@

        Use in calc()

        Specifications

        - - - - - - - - - - - - - - - - - - - - -
        SpecificationStatusComment
        {{SpecName('CSS4 Values', '#mixed-percentages', '<time-percentage>')}}{{Spec2('CSS4 Values')}} 
        {{SpecName('CSS3 Values', '#mixed-percentages', '<time-percentage>')}}{{Spec2('CSS3 Values')}}Defines <time-percentage>. Adds calc()
        +{{Specifications}}

        Browser compatibility

        diff --git a/files/zh-cn/web/css/time/index.html b/files/zh-cn/web/css/time/index.html index 0c70410e818b3e..5e7aaee24c4f6f 100644 --- a/files/zh-cn/web/css/time/index.html +++ b/files/zh-cn/web/css/time/index.html @@ -53,35 +53,8 @@

        无效时间

        规范

        - - - - - - - - - - - - - - - - - - - - - - - - - -
        规范状态注释
        {{SpecName('CSS4 Values','#time','<time>')}}{{Spec2('CSS4 Values')}} 
        {{SpecName('CSS3 Values','#time','<time>')}}{{Spec2('CSS3 Values')}}规范定义 s 与 ms
        {{SpecName('CSS2.1','aural.html#times','<time>')}}{{Spec2('CSS2.1')}}非正式定义s 与 ms
        +{{Specifications}}

        浏览器兼容性

        {{Compat("css.types.time")}}

        - -
         
        diff --git a/files/zh-cn/web/css/transform-box/index.html b/files/zh-cn/web/css/transform-box/index.html index 1f061033c600a3..c59ea183b249fc 100644 --- a/files/zh-cn/web/css/transform-box/index.html +++ b/files/zh-cn/web/css/transform-box/index.html @@ -43,22 +43,7 @@

        Formal syntax

        Specifications

        - - - - - - - - - - - - - - - -
        SpecificationStatusComment
        {{SpecName('CSS3 Transforms', '#transform-box', 'transform-box')}}{{Spec2('CSS3 Transforms')}}Initial definition
        +{{Specifications}}

        Browser compatibility

        diff --git a/files/zh-cn/web/css/transform-function/index.html b/files/zh-cn/web/css/transform-function/index.html index dd50fdd7a51df6..07797e8d2c24d9 100644 --- a/files/zh-cn/web/css/transform-function/index.html +++ b/files/zh-cn/web/css/transform-function/index.html @@ -32,8 +32,6 @@

        笛卡尔 坐标

                                                                                                  a   c
                                                                                                  b   d

        -
        -

        将矩阵乘法用于上述坐标系中的每个点,一个变换就形成了:

        .
        @@ -42,8 +40,6 @@

        笛卡尔 坐标

        .
        -
        -

        有了这种方法,就可以描述大部分常见的变换并因此可以将他们组合起来,如:旋转、缩放或拉伸。(事实上,所有线性函数的变换都可以被描述。)组合的变换是从右到左生效的。然而,有一种常见的变换并不是线性的,所以当这种变换要用这种方法来表示时,应该被单独列出来:位移。位移的向量 (tx, ty) 必须单独表示,作为两个附加参数。

        奥古斯特·费迪南德·莫比乌斯 的 齐次坐标系 表示了一个 3 × 3 的变换矩阵,虽然它对于非专业的人来说更复杂和少见,这并不影响将它表示为线性函数,并且这样就不需要考虑额外的特例。

        @@ -943,3 +939,7 @@

        参数

        + +

        规范

        + +{{Specifications}} diff --git a/files/zh-cn/web/css/transform-function/matrix/index.html b/files/zh-cn/web/css/transform-function/matrix/index.html index 01dde5c3ff2ae3..f34c2cdad6dc6a 100644 --- a/files/zh-cn/web/css/transform-function/matrix/index.html +++ b/files/zh-cn/web/css/transform-function/matrix/index.html @@ -83,3 +83,7 @@

        CSS

        结果

        请看英文版案例 /zh-CN/docs/Web/CSS/transform-function/matrix#Result

        + +

        规范

        + +{{Specifications}} diff --git a/files/zh-cn/web/css/transform-function/matrix3d/index.html b/files/zh-cn/web/css/transform-function/matrix3d/index.html index e5ed2687c5c039..3b7cc7d369ea28 100644 --- a/files/zh-cn/web/css/transform-function/matrix3d/index.html +++ b/files/zh-cn/web/css/transform-function/matrix3d/index.html @@ -124,26 +124,11 @@

        Result

        Specifications

        - - - - - - - - - - - - - - - -
        SpecificationStatusComment
        {{SpecName("CSS Transforms 2", "#funcdef-matrix3d", "matrix3d()")}}{{Spec2("CSS Transforms 2")}}Initial definition
        +{{Specifications}}

        Browser compatibility

        -

        Please see the <transform-function> data type for compatibility info.

        +{{Compat}}

        See also

        diff --git a/files/zh-cn/web/css/transform-function/perspective/index.html b/files/zh-cn/web/css/transform-function/perspective/index.html index cb213605838589..d45069dab560a9 100644 --- a/files/zh-cn/web/css/transform-function/perspective/index.html +++ b/files/zh-cn/web/css/transform-function/perspective/index.html @@ -45,3 +45,7 @@

        参数

        Examples

        TBD

        + +

        规范

        + +{{Specifications}} diff --git a/files/zh-cn/web/css/transform-function/rotate/index.html b/files/zh-cn/web/css/transform-function/rotate/index.html index 064bb20bcce161..086daa936b8841 100644 --- a/files/zh-cn/web/css/transform-function/rotate/index.html +++ b/files/zh-cn/web/css/transform-function/rotate/index.html @@ -78,9 +78,13 @@

        结果

        {{EmbedLiveSample("示例","100%","200")}}

        -

        浏览器兼容

        +

        规范

        -

        有关兼容性信息,请参阅<transform-function>数据类型。

        +{{Specifications}} + +

        浏览器兼容性

        + +{{Compat}}

        参见

        diff --git a/files/zh-cn/web/css/transform-function/rotate3d/index.html b/files/zh-cn/web/css/transform-function/rotate3d/index.html index 40a5b477178c04..254d406c89d3b8 100644 --- a/files/zh-cn/web/css/transform-function/rotate3d/index.html +++ b/files/zh-cn/web/css/transform-function/rotate3d/index.html @@ -116,9 +116,13 @@

        效果

        {{EmbedLiveSample("围绕自定义轴旋转","100%","200")}}

        -

        浏览器兼容

        +

        规范

        -

        有关兼容性信息,请参阅<transform-function> 数据类型。

        +{{Specifications}} + +

        浏览器兼容性

        + +{{Compat}}

        参见

        diff --git a/files/zh-cn/web/css/transform-function/rotatex/index.html b/files/zh-cn/web/css/transform-function/rotatex/index.html index 79ad2e6acccd21..55a7f690337804 100644 --- a/files/zh-cn/web/css/transform-function/rotatex/index.html +++ b/files/zh-cn/web/css/transform-function/rotatex/index.html @@ -79,26 +79,11 @@

        结果

        规范

        - - - - - - - - - - - - - - - -
        SpecificationStatusComment
        {{SpecName("CSS Transforms 2", "#funcdef-rotatex", "rotateX()")}}{{Spec2("CSS Transforms 2")}}Initial definition
        +{{Specifications}} -

        浏览器兼容

        +

        浏览器兼容性

        -

        有关兼容性信息,请参阅 <transform-function> 的数据类型。

        +{{Compat}}

        另请参阅

        diff --git a/files/zh-cn/web/css/transform-function/rotatey/index.html b/files/zh-cn/web/css/transform-function/rotatey/index.html index 7294d81626fee7..03e04d99d5529e 100644 --- a/files/zh-cn/web/css/transform-function/rotatey/index.html +++ b/files/zh-cn/web/css/transform-function/rotatey/index.html @@ -79,26 +79,11 @@

        结果

        规范

        - - - - - - - - - - - - - - - -
        SpecificationStatusComment
        {{SpecName("CSS Transforms 2", "#funcdef-rotatey", "rotateY()")}}{{Spec2("CSS Transforms 2")}}Initial definition
        +{{Specifications}}

        浏览器兼容

        -

        有关兼容性信息,请参阅 <transform-function> 的数据类型。

        +{{Compat}}

        另请参阅

        diff --git a/files/zh-cn/web/css/transform-function/rotatez/index.html b/files/zh-cn/web/css/transform-function/rotatez/index.html index f042d580d46291..1c57790660e32e 100644 --- a/files/zh-cn/web/css/transform-function/rotatez/index.html +++ b/files/zh-cn/web/css/transform-function/rotatez/index.html @@ -79,26 +79,11 @@

        结果

        规范

        - - - - - - - - - - - - - - - -
        SpecificationStatusComment
        {{SpecName("CSS Transforms 2", "#funcdef-rotatez", "rotateZ()")}}{{Spec2("CSS Transforms 2")}}Initial definition
        +{{Specifications}}

        浏览器兼容

        -

        有关兼容性信息,请参阅 <transform-function> 的数据类型。

        +{{Compat}}

        另请参阅

        diff --git a/files/zh-cn/web/css/transform-function/scale/index.html b/files/zh-cn/web/css/transform-function/scale/index.html index 4847c120e73d74..79173cd7850f4c 100644 --- a/files/zh-cn/web/css/transform-function/scale/index.html +++ b/files/zh-cn/web/css/transform-function/scale/index.html @@ -110,3 +110,7 @@

        CSS

        结果

        {{EmbedLiveSample("在 X 和 Y 两个维度缩放并移动缩放中心","100%","200")}}

        + +

        规范

        + +{{Specifications}} diff --git a/files/zh-cn/web/css/transform-function/scalex/index.html b/files/zh-cn/web/css/transform-function/scalex/index.html index 68889341ccb79a..6f8d54c0169375 100644 --- a/files/zh-cn/web/css/transform-function/scalex/index.html +++ b/files/zh-cn/web/css/transform-function/scalex/index.html @@ -108,3 +108,7 @@

        CSS

        Result

        {{EmbedLiveSample("Translating_the_origin_of_the_transformation","100%","200")}}

        + +

        规范

        + +{{Specifications}} diff --git a/files/zh-cn/web/css/transform-function/scaley/index.html b/files/zh-cn/web/css/transform-function/scaley/index.html index 42298ee377b43d..7c445d6d4a7389 100644 --- a/files/zh-cn/web/css/transform-function/scaley/index.html +++ b/files/zh-cn/web/css/transform-function/scaley/index.html @@ -80,9 +80,13 @@

        Result

        {{EmbedLiveSample("Examples", 200, 200)}}

        +

        规范

        + +{{Specifications}} +

        Browser compatibility

        -

        Please see the <transform-function> data type for compatibility info.

        +{{Compat}}

        See also

        diff --git a/files/zh-cn/web/css/transform-function/skew/index.html b/files/zh-cn/web/css/transform-function/skew/index.html index a9c8026ffb8705..5a9d231175a7f3 100644 --- a/files/zh-cn/web/css/transform-function/skew/index.html +++ b/files/zh-cn/web/css/transform-function/skew/index.html @@ -110,26 +110,11 @@

        结果

        规范

        - - - - - - - - - - - - - - - -
        SpecificationStatusComment
        {{SpecName("CSS3 Transforms", "#funcdef-transform-skew", "skew()")}}{{Spec2("CSS3 Transforms")}}Initial definition
        +{{Specifications}}

        浏览器兼容

        -

        有关兼容性信息,请参阅 <transform-function> 的数据类型。

        +{{Compat}}

        另请参阅

        diff --git a/files/zh-cn/web/css/transform-function/skewx/index.html b/files/zh-cn/web/css/transform-function/skewx/index.html index 755a1fdd44eaca..835572f77fc126 100644 --- a/files/zh-cn/web/css/transform-function/skewx/index.html +++ b/files/zh-cn/web/css/transform-function/skewx/index.html @@ -79,26 +79,11 @@

        结果

        规范

        - - - - - - - - - - - - - - - -
        SpecificationStatusComment
        {{SpecName("CSS3 Transforms", "#funcdef-transform-skewx", "skewX()")}}{{Spec2("CSS3 Transforms")}}Initial definition
        +{{Specifications}} -

        浏览器兼容

        +

        浏览器兼容性

        -

        有关兼容性信息,请参阅 <transform-function> 的数据类型。

        +{{Compat}}

        另请参阅

        diff --git a/files/zh-cn/web/css/transform-function/translate/index.html b/files/zh-cn/web/css/transform-function/translate/index.html index 6032ce4721ce4c..678490dd406835 100644 --- a/files/zh-cn/web/css/transform-function/translate/index.html +++ b/files/zh-cn/web/css/transform-function/translate/index.html @@ -122,28 +122,13 @@

        结果

        {{EmbedLiveSample("Combining_y-axis_and_x-axis_translation", 250, 250)}}

        -

        规格

        +

        规范

        - - - - - - - - - - - - - - - -
        技术规格状态注解
        {{SpecName('CSS3 Transforms', '#funcdef-transform-translate', 'translate()')}}{{Spec2('CSS3 Transforms')}}Initial definition
        +{{Specifications}}

        浏览器兼容性

        -

        请参阅 <transform-function> 数据类型以获取兼容性信息。

        +{{Compat}}

        See also

        diff --git a/files/zh-cn/web/css/transform-function/translate3d/index.html b/files/zh-cn/web/css/transform-function/translate3d/index.html index c1c098cb0616f5..d68e6bfd98ffa3 100644 --- a/files/zh-cn/web/css/transform-function/translate3d/index.html +++ b/files/zh-cn/web/css/transform-function/translate3d/index.html @@ -104,30 +104,13 @@

        结果

        {{EmbedLiveSample("Combining_z-axis_and_x-axis_translation","100%","250")}}

        -

         

        +

        规范

        -

        规格

        - - - - - - - - - - - - - - - - -
        SpecificationStatusComment
        {{SpecName("CSS Transforms 2", "#funcdef-translate3d", "translate3d()")}}{{Spec2("CSS Transforms 2")}}Initial definition
        +{{Specifications}}

        浏览器兼容性

        -

        有关兼容性信息,请参阅<transform-function>的兼容性信息。

        +{{Compat}}

        另请参阅

        @@ -135,5 +118,3 @@

        另请参阅

      • {{cssxref("transform")}}
      • {{cssxref("<transform-function>")}}
      - -

       

      diff --git a/files/zh-cn/web/css/transform-function/translatex/index.html b/files/zh-cn/web/css/transform-function/translatex/index.html index 25a31168960a5e..93250c19c7d12c 100644 --- a/files/zh-cn/web/css/transform-function/translatex/index.html +++ b/files/zh-cn/web/css/transform-function/translatex/index.html @@ -102,28 +102,13 @@

      结果

      {{EmbedLiveSample("Examples", 250, 250)}}

      -

      标准化说明

      +

      规范

      - - - - - - - - - - - - - - - -
      标准状态备注
      {{SpecName("CSS3 Transforms", "#funcdef-transform-translatex", "translateX()")}}{{Spec2("CSS3 Transforms")}}原始定义
      +{{Specifications}}

      浏览器兼容性

      -

      请前往数据类型{{cssxref("transform-function")}}的页面以查看兼容性信息。

      +{{Compat}}

      参阅

      diff --git a/files/zh-cn/web/css/transform-function/translatey/index.html b/files/zh-cn/web/css/transform-function/translatey/index.html index caf60dd133fa42..dd625b2a4a505d 100644 --- a/files/zh-cn/web/css/transform-function/translatey/index.html +++ b/files/zh-cn/web/css/transform-function/translatey/index.html @@ -87,26 +87,11 @@

      结果

      规范

      - - - - - - - - - - - - - - - -
      规范状态注释
      {{SpecName("CSS3 Transforms", "#funcdef-transform-translatey", "translateY()")}}{{Spec2("CSS3 Transforms")}}Initial definition
      +{{Specifications}}

      浏览器兼容性

      -

      请查看 <transform-function>

      +{{Compat}}

      了解更多

      diff --git a/files/zh-cn/web/css/transform-origin/index.html b/files/zh-cn/web/css/transform-origin/index.html index 86a1795bc52ade..949c7e8420f303 100644 --- a/files/zh-cn/web/css/transform-origin/index.html +++ b/files/zh-cn/web/css/transform-origin/index.html @@ -427,30 +427,13 @@

      示例

      规范

      - - - - - - - - - - - - - - - -
      SpecificationStatusComment
      {{ SpecName('CSS3 Transforms', '#transform-origin-property', 'transform-origin') }}{{ Spec2('CSS3 Transforms') }}
      +{{Specifications}}

      {{Cssinfo}}

      浏览器兼容

      - - -

      {{Compat("css.properties.transform-origin")}}

      +

      {{Compat}}

      参见

      diff --git a/files/zh-cn/web/css/transform-style/index.html b/files/zh-cn/web/css/transform-style/index.html index 6e915eeb8c4b86..f59811eff6e649 100644 --- a/files/zh-cn/web/css/transform-style/index.html +++ b/files/zh-cn/web/css/transform-style/index.html @@ -42,22 +42,7 @@

      正式语法

      规范

      - - - - - - - - - - - - - - - -
      SpecificationStatusComment
      {{SpecName('CSS Transforms 2', '#transform-style-property', 'transform-style')}}{{Spec2('CSS Transforms 2')}}Initial definition.
      +{{Specifications}}

      {{cssinfo}}

      diff --git a/files/zh-cn/web/css/transform/index.html b/files/zh-cn/web/css/transform/index.html index 48977c330a2394..070c6e69768d2b 100644 --- a/files/zh-cn/web/css/transform/index.html +++ b/files/zh-cn/web/css/transform/index.html @@ -94,27 +94,7 @@

      结果

      规范

      - - - - - - - - - - - - - - - - - - - - -
      SpecificationStatusComment
      {{SpecName('CSS Transforms 2', '#transform-functions', 'transform')}}{{Spec2('CSS Transforms 2')}}Adds 3D transform functions.
      {{SpecName('CSS3 Transforms', '#transform-property', 'transform')}}{{Spec2('CSS3 Transforms')}}Initial definition.
      +{{Specifications}}

      {{cssinfo}}

      diff --git a/files/zh-cn/web/css/transition-delay/index.html b/files/zh-cn/web/css/transition-delay/index.html index b2d8a6ff90e321..f67004b240ebce 100644 --- a/files/zh-cn/web/css/transition-delay/index.html +++ b/files/zh-cn/web/css/transition-delay/index.html @@ -315,24 +315,9 @@

      举例

      -

       说明

      - - - - - - - - - - - - - - - - -
       说明状态 注释
      {{SpecName('CSS3 Transitions', '#transition-delay', 'transition-delay')}}{{Spec2('CSS3 Transitions')}}Initial definition
      +

      规范

      + +{{Specifications}}

      浏览器兼容性

      diff --git a/files/zh-cn/web/css/transition-duration/index.html b/files/zh-cn/web/css/transition-duration/index.html index ce41084bd17237..99d3f55ba2190e 100644 --- a/files/zh-cn/web/css/transition-duration/index.html +++ b/files/zh-cn/web/css/transition-duration/index.html @@ -304,22 +304,7 @@

      示例

      规范

      - - - - - - - - - - - - - - - -
      规范状态备注
      {{ SpecName('CSS3 Transitions', '#transition-duration', 'transition-duration') }}{{ Spec2('CSS3 Transitions') }}Initial definition
      +{{Specifications}}

      浏览器兼容性

      diff --git a/files/zh-cn/web/css/transition-property/index.html b/files/zh-cn/web/css/transition-property/index.html index 2753f6f3f81782..cdde4f390bc785 100644 --- a/files/zh-cn/web/css/transition-property/index.html +++ b/files/zh-cn/web/css/transition-property/index.html @@ -56,22 +56,7 @@

      示例

      规范

      - - - - - - - - - - - - - - - -
      规范状态备注
      {{SpecName('CSS3 Transitions', '#transition-property', 'transition-property')}}{{Spec2('CSS3 Transitions')}}Initial definition
      +{{Specifications}}

      浏览器兼容

      diff --git a/files/zh-cn/web/css/transition-timing-function/index.html b/files/zh-cn/web/css/transition-timing-function/index.html index 486e7b81fadc21..860f3a8fcf0360 100644 --- a/files/zh-cn/web/css/transition-timing-function/index.html +++ b/files/zh-cn/web/css/transition-timing-function/index.html @@ -552,22 +552,7 @@

      示例

      规范

      - - - - - - - - - - - - - - - -
      SpecificationStatusComment
      {{ SpecName('CSS3 Transitions', '#transition-timing-function', 'transition-timing-function') }}{{ Spec2('CSS3 Transitions') }} 
      +{{Specifications}}

      浏览器兼容性

      diff --git a/files/zh-cn/web/css/transition/index.html b/files/zh-cn/web/css/transition/index.html index 0f8ee535f9da6b..ef6517fd6dc16f 100644 --- a/files/zh-cn/web/css/transition/index.html +++ b/files/zh-cn/web/css/transition/index.html @@ -73,22 +73,7 @@

      示例

      规范

      - - - - - - - - - - - - - - - -
      SpecificationStatusComment
      {{ SpecName('CSS3 Transitions', '#transition', 'transition') }}{{ Spec2('CSS3 Transitions') }} 
      +{{Specifications}}

      {{cssinfo}}

      diff --git a/files/zh-cn/web/css/translate/index.html b/files/zh-cn/web/css/translate/index.html index 32ab0199eeb1c7..43c2165020a4fc 100644 --- a/files/zh-cn/web/css/translate/index.html +++ b/files/zh-cn/web/css/translate/index.html @@ -95,22 +95,7 @@

      Result

      规范

      - - - - - - - - - - - - - - - -
      规范状态注释
      {{SpecName('CSS Transforms 2', '#individual-transforms', 'individual transforms')}}{{Spec2('CSS Transforms 2')}}Initial definition.
      +{{Specifications}}

      {{CSSInfo}}

      diff --git a/files/zh-cn/web/css/type_selectors/index.html b/files/zh-cn/web/css/type_selectors/index.html index 5772a67ade7e4b..e1d71e1a385b9c 100644 --- a/files/zh-cn/web/css/type_selectors/index.html +++ b/files/zh-cn/web/css/type_selectors/index.html @@ -40,32 +40,7 @@

      效果

      规范

      - - - - - - - - - - - - - - - - - - - - - - - - - -
      规范状态备注
      CSS Selectors Level 3{{ Spec2('CSS3 Selectors') }}No change
      CSS 2.1{{ Spec2('CSS2.1') }} 
      CSS 1{{ Spec2('CSS1') }} 
      +{{Specifications}}

      浏览器兼容性

      diff --git a/files/zh-cn/web/css/unicode-bidi/index.html b/files/zh-cn/web/css/unicode-bidi/index.html index 9ab1e41f615138..301d0986d9b736 100644 --- a/files/zh-cn/web/css/unicode-bidi/index.html +++ b/files/zh-cn/web/css/unicode-bidi/index.html @@ -79,27 +79,7 @@

      结果

      规范

      - - - - - - - - - - - - - - - - - - - - -
      规范状态备注
      {{SpecName('CSS3 Writing Modes', '#unicode-bidi', 'unicode-bidi')}}{{Spec2('CSS3 Writing Modes')}}添加属性值 plaintextisolate,和 isolate-override
      {{SpecName('CSS2.1', 'visuren.html#propdef-unicode-bidi', 'unicode-bidi')}}{{Spec2('CSS2.1')}}初始定义。
      +{{Specifications}}

      浏览器兼容性

      diff --git a/files/zh-cn/web/css/universal_selectors/index.html b/files/zh-cn/web/css/universal_selectors/index.html index 4a7548605f3f38..de6ec0ab2195a6 100644 --- a/files/zh-cn/web/css/universal_selectors/index.html +++ b/files/zh-cn/web/css/universal_selectors/index.html @@ -48,27 +48,7 @@

      示例

      规范

      - - - - - - - - - - - - - - - - - - - - -
      SpecificationStatusComment
      CSS Selectors Level 3{{ Spec2('CSS3 Selectors') }}定义了在命名空间下的行为并提示在伪元素中忽略它是允许的
      CSS 2.1{{ Spec2('CSS2.1') }}初始定义
      +{{Specifications}}

      浏览器兼容性

      diff --git a/files/zh-cn/web/css/unset/index.html b/files/zh-cn/web/css/unset/index.html index 91348a62996a68..870ea3eb693320 100644 --- a/files/zh-cn/web/css/unset/index.html +++ b/files/zh-cn/web/css/unset/index.html @@ -79,27 +79,7 @@

      结果

      规范

      - - - - - - - - - - - - - - - - - - - - -
      规范版本评论
      {{ SpecName('CSS4 Cascade', '#inherit-initial', 'unset') }}{{ Spec2('CSS4 Cascade') }}与 Level 3 无变化
      {{ SpecName('CSS3 Cascade', '#unset', 'unset') }}{{ Spec2('CSS3 Cascade') }}初始规范
      +{{Specifications}}

      浏览器兼容性

      diff --git a/files/zh-cn/web/css/url/index.html b/files/zh-cn/web/css/url/index.html index 89f363920d1890..aa212727de20f1 100644 --- a/files/zh-cn/web/css/url/index.html +++ b/files/zh-cn/web/css/url/index.html @@ -50,32 +50,7 @@

      示例

      规范

      - - - - - - - - - - - - - - - - - - - - - - - - - -
      规范状态说明
      {{ SpecName('CSS3 Values', '#urls', '<url>') }}{{ Spec2('CSS3 Values') }}自 CSS Level 2 (Revision 1) 以来没有显著更改
      {{ Specname('CSS2.1', 'syndata.html#uri', '<uri>') }}{{ Spec2('CSS2.1') }}自 CSS Level 1 以来没有显著更改
      {{ SpecName('CSS1', '#url', '<url>') }}{{ Spec2('CSS1') }} 
      +{{Specifications}}

      浏览器兼容性

      diff --git a/files/zh-cn/web/css/user-select/index.html b/files/zh-cn/web/css/user-select/index.html index 0ece9ffa362222..a2670524bb94ff 100644 --- a/files/zh-cn/web/css/user-select/index.html +++ b/files/zh-cn/web/css/user-select/index.html @@ -113,22 +113,7 @@

      Result

      规范

      - - - - - - - - - - - - - - - -
      规范状态备注
      {{SpecName('CSS4 UI', '#propdef-user-select', 'user-select')}}{{Spec2('CSS4 UI')}}初始值。也定义了 -webkit-user-select 作为一个不推荐使用的别名 user-select.
      +{{Specifications}}

      浏览器兼容性

      diff --git a/files/zh-cn/web/css/value_definition_syntax/index.html b/files/zh-cn/web/css/value_definition_syntax/index.html index 09309dc76de005..4d9b3dc9cde9a2 100644 --- a/files/zh-cn/web/css/value_definition_syntax/index.html +++ b/files/zh-cn/web/css/value_definition_syntax/index.html @@ -399,30 +399,7 @@

      总结

      规范

      - - - - - - - - - - - - - - - - - - - - - - - -
      规范状态备注
      {{ SpecName('CSS3 Values', '#value-defs', 'Value definition syntax') }}{{ Spec2('CSS3 Values') }}{{ SpecName('CSS2.1', 'about.html#value-defs', 'Value definition syntax') }} 添加了井号数量符。
      {{ SpecName('CSS2.1', 'about.html#value-defs', 'Value definition syntax') }}{{ Spec2('CSS2.1') }}{{ SpecName('CSS1', '#notation-for-property-values', 'Value definition syntax') }} 添加了“与”组合符。
      {{SpecName('CSS1', '#notation-for-property-values', 'Value definition syntax') }}{{ Spec2('CSS1') }}最初定义。
      +{{Specifications}}

      参考条目

      diff --git a/files/zh-cn/web/css/var/index.html b/files/zh-cn/web/css/var/index.html index 78af8e534d4691..20b7801c8022c5 100644 --- a/files/zh-cn/web/css/var/index.html +++ b/files/zh-cn/web/css/var/index.html @@ -70,22 +70,7 @@

      规范

      - - - - - - - - - - - - - - - -
      SpecificationStatusComment
      {{SpecName('CSS3 Variables', '#using-variables', 'var()')}}{{Spec2('CSS3 Variables')}}Initial definition
      +{{Specifications}}

      浏览器兼容性

      diff --git a/files/zh-cn/web/css/vertical-align/index.html b/files/zh-cn/web/css/vertical-align/index.html index 416454fbd40bf0..4e0e4e4e0b3a7c 100644 --- a/files/zh-cn/web/css/vertical-align/index.html +++ b/files/zh-cn/web/css/vertical-align/index.html @@ -210,32 +210,7 @@

      结果

      规范

      - - - - - - - - - - - - - - - - - - - - - - - - - -
      规范状态描述
      {{SpecName('CSS3 Transitions', '#animatable-css', 'vertical-align')}}{{Spec2('CSS3 Transitions')}}定义 vertical-align 为可动画的。
      {{SpecName('CSS2.1', 'visudet.html#propdef-vertical-align', 'vertical-align')}}{{Spec2('CSS2.1')}}增加 {{cssxref("<length>")}} 取值,允许它对{{cssxref("display")}}类型为table-cell的元素生效。
      {{SpecName('CSS1', '#vertical-align', 'vertical-align')}}{{Spec2('CSS1')}}初步定义。
      +{{Specifications}}

      {{cssinfo}}

      diff --git a/files/zh-cn/web/css/white-space/index.html b/files/zh-cn/web/css/white-space/index.html index e9ac5da6bc40fc..c54708d6439160 100644 --- a/files/zh-cn/web/css/white-space/index.html +++ b/files/zh-cn/web/css/white-space/index.html @@ -129,30 +129,10 @@

      下面的代码允许在 {{HTMLElement("pre")}} 中换

      规范

      - - - - - - - - - - - - - - - - - - - - -
      规范状态注释
      {{SpecName('CSS3 Text', '#propdef-white-space', 'white-space')}}{{Spec2('CSS3 Text')}}Precises the breaking algorithms.
      {{SpecName('CSS2.1', 'text.html#white-space-prop', 'white-space')}}{{Spec2('CSS2.1')}}Initial specification.
      +{{Specifications}}

      {{CSSInfo}}

      浏览器兼容性

      -

      {{Compat("css.properties.white-space")}}

      +

      {{Compat}}

      diff --git a/files/zh-cn/web/css/widows/index.html b/files/zh-cn/web/css/widows/index.html index ab1d1be81999fd..19a5f89e2b306d 100644 --- a/files/zh-cn/web/css/widows/index.html +++ b/files/zh-cn/web/css/widows/index.html @@ -74,32 +74,7 @@

      结果

      规范

      - - - - - - - - - - - - - - - - - - - - - - - - - -
      SpecificationStatusComment
      {{SpecName('CSS3 Fragmentation', '#widows-orphans', 'widows')}}{{Spec2('CSS3 Fragmentation')}}Extends widows to apply to any type of fragment, including pages, regions, or columns.
      {{SpecName('CSS3 Multicol', '#filling-columns', 'widows')}}{{Spec2('CSS3 Multicol')}}Recommendations to consider widows in relation to columns.
      {{SpecName('CSS2.1', 'page.html#break-inside', 'widows')}}{{Spec2('CSS2.1')}}Initial definition.
      +{{Specifications}}

      浏览器兼容性

      diff --git a/files/zh-cn/web/css/width/index.html b/files/zh-cn/web/css/width/index.html index b929bee17657d9..8582ab94614d92 100644 --- a/files/zh-cn/web/css/width/index.html +++ b/files/zh-cn/web/css/width/index.html @@ -153,42 +153,13 @@

      无障碍考虑

      规范

      - - - - - - - - - - - - - - - - - - - - - - - - - -
      规范状态注释
      {{ SpecName('CSS3 Box', '#the-width-and-height-properties', 'width') }}{{Spec2('CSS3 Box')}}增加 max-content, min-content, available, fit-content, border-box, content-box 关键字。
      {{ SpecName('CSS2.1', 'visudet.html#the-width-property', 'width') }}{{Spec2('CSS2.1')}}明确了此属性对哪些元素有效。
      {{ SpecName('CSS1', '#width', 'width') }}{{Spec2('CSS1')}}初始定义。
      +{{Specifications}}

      {{cssinfo}}

      浏览器兼容性

      -

      {{Compat("css.properties.width")}}

      - - +

      {{Compat}}

      参见

      diff --git a/files/zh-cn/web/css/will-change/index.html b/files/zh-cn/web/css/will-change/index.html index 57599069b6a5b3..53686424294193 100644 --- a/files/zh-cn/web/css/will-change/index.html +++ b/files/zh-cn/web/css/will-change/index.html @@ -94,23 +94,8 @@

      示例

      参考

      - - - - - - - - - - - - - - - -
      SpecificationStatusComment
      {{ SpecName('CSS Will Change', '#will-change', 'will-change') }}{{ Spec2('CSS Will Change') }}Initial definition
      - -

      浏览器兼容

      - -{{Compat("css.properties.will-change")}} +{{Specifications}} + +

      浏览器兼容性

      + +{{Compat}} diff --git a/files/zh-cn/web/css/word-break/index.html b/files/zh-cn/web/css/word-break/index.html index 60459c916ba0d0..b92a1cdbafe858 100644 --- a/files/zh-cn/web/css/word-break/index.html +++ b/files/zh-cn/web/css/word-break/index.html @@ -109,22 +109,7 @@

      CSS

      规范

      - - - - - - - - - - - - - - - -
      规范状态注释
      {{SpecName('CSS3 Text', '#word-break-property', 'word-break')}}{{Spec2('CSS3 Text')}}Initial definition
      +{{Specifications}}

      浏览器兼容性

      diff --git a/files/zh-cn/web/css/writing-mode/index.html b/files/zh-cn/web/css/writing-mode/index.html index 0ded69a8e9159c..fa475a5ed30dca 100644 --- a/files/zh-cn/web/css/writing-mode/index.html +++ b/files/zh-cn/web/css/writing-mode/index.html @@ -164,27 +164,7 @@

      显示效果

      Specification

      - - - - - - - - - - - - - - - - - - - - -
      SpecificationStatusComment
      {{SpecName("CSS3 Writing Modes", "#block-flow", "writing-mode")}}{{Spec2("CSS3 Writing Modes")}}Initial definition
      {{SpecName("CSS4 Writing Modes", "#block-flow", "writing-mode")}}{{Spec2("CSS4 Writing Modes")}}Add sideways-lr and sideways-rl
      +{{Specifications}}

      浏览器兼容性

      diff --git a/files/zh-cn/web/css/z-index/index.html b/files/zh-cn/web/css/z-index/index.html index a5066c34353c7f..358a611591f947 100644 --- a/files/zh-cn/web/css/z-index/index.html +++ b/files/zh-cn/web/css/z-index/index.html @@ -101,27 +101,7 @@

      结果

      规范

      - - - - - - - - - - - - - - - - - - - - -
      SpecificationStatusComment
      {{SpecName('CSS3 Transitions', '#animatable-css', 'animation behavior for z-index')}}{{Spec2('CSS3 Transitions')}}Defines z-index as animatable.
      {{SpecName('CSS2.1', 'visuren.html#z-index', 'z-index')}}{{Spec2('CSS2.1')}}原始定义
      +{{Specifications}}

      浏览器兼容性

      diff --git a/files/zh-cn/web/events/detecting_device_orientation/index.html b/files/zh-cn/web/events/detecting_device_orientation/index.html index f75b3bc6588be6..cd271d9de5f03b 100644 --- a/files/zh-cn/web/events/detecting_device_orientation/index.html +++ b/files/zh-cn/web/events/detecting_device_orientation/index.html @@ -279,32 +279,11 @@

      相关值解释

      规范

      - - - - - - - - - - - - - - - -
      规范状态注释
      {{SpecName('Device Orientation')}}{{Spec2('Device Orientation')}}Initial specification.
      +{{Specifications}}

      浏览器兼容性

      -

      DeviceMotionEvent

      - -

      {{Compat("api.DeviceMotionEvent")}}

      - -

      DeviceOrientationEvent

      - -

      {{Compat("api.DeviceOrientationEvent")}}

      +{{Compat}}

      参见

      diff --git a/files/zh-cn/web/events/index.html b/files/zh-cn/web/events/index.html index 7d99fdce084cb3..0866cf9235450e 100644 --- a/files/zh-cn/web/events/index.html +++ b/files/zh-cn/web/events/index.html @@ -470,7 +470,6 @@

      拖放事件

      -

      媒体事件

      @@ -564,7 +563,6 @@

      媒体事件

      -
      - + @@ -28,7 +28,7 @@
      @@ -846,7 +844,6 @@

      标准事件

      这些事件在官方 Web 规范中定义,并且应在各个浏览器中通用。 每个事件都和代表事件接收方的对象(由此您可以查到每个事件提供的数据),定义这个事件的标准或标准链接会一起列出。

      -
      @@ -1981,11 +1978,9 @@

      标准事件

      -

      非标准事件

      -
      @@ -2546,17 +2541,15 @@

      非标准事件

      -

      Mozilla 特定事件

      -

      注意:这些事件不会暴露给 Web 内容使用,只能在 chrome 内容的上下文中使用。

      +

      备注: 这些事件不会暴露给 Web 内容使用,只能在 chrome 内容的上下文中使用。

      XUL 事件

      -
      @@ -2647,11 +2640,9 @@

      XUL 事件

      -

      附加组件特定事件

      -
      @@ -2910,11 +2901,9 @@

      附加组件特定事件

      -

      开发者工具特定事件

      -
      @@ -2945,7 +2934,10 @@

      开发者工具特定事件

      -
      + +

      规范

      + +{{Specifications}}

      参见

      diff --git a/files/zh-cn/web/guide/html/constraint_validation/index.html b/files/zh-cn/web/guide/html/constraint_validation/index.html index 82783d1ad349b1..f17d0da3e8bdf4 100644 --- a/files/zh-cn/web/guide/html/constraint_validation/index.html +++ b/files/zh-cn/web/guide/html/constraint_validation/index.html @@ -26,7 +26,7 @@

      语义的 input 类型

       {{ htmlattrxref("type", "input") }} 特性中固有约束:

      - +
      @@ -68,7 +68,7 @@

      验证相关的特性(Attribute

      下列特性用于描述基本的约束:

      -

      Input 类型
      +
      @@ -332,7 +332,7 @@

      Constraint API's element.setC

      Constraint API's ValidityState object

      -

      The DOM ValidityState interface represents the validity states that an element can be in, with respect to constraint validation. Together, they help explain why an element's value fails to validate, if it's not valid.

      +

      The DOM ValidityState interface represents the validity states that an element can be in, with respect to constraint validation. Together, they help explain why an element's value fails to validate, if it's not valid.

      Examples of personalized styling

      diff --git a/files/zh-cn/web/html/attributes/autocomplete/index.html b/files/zh-cn/web/html/attributes/autocomplete/index.html index 3a3fb1fb4fd5ae..369ea3aa69e8c2 100644 --- a/files/zh-cn/web/html/attributes/autocomplete/index.html +++ b/files/zh-cn/web/html/attributes/autocomplete/index.html @@ -219,27 +219,7 @@

      中国

      技术指标

      -
      特性
      - - - - - - - - - - - - - - - - - - - -
      规格状态评论
      {{SpecName('HTML5.2', "sec-forms.html#autofilling-form-controls-the-autocomplete-attribute", "autocomplete")}}{{Spec2('HTML5.2')}}
      {{SpecName('HTML WHATWG', "form-control-infrastructure.html#autofilling-form-controls:-the-autocomplete-attribute", "autocomplete")}}{{Spec2('HTML WHATWG')}}
      +{{Specifications}}

      浏览器兼容性

      diff --git a/files/zh-cn/web/html/element/a/index.html b/files/zh-cn/web/html/element/a/index.html index 9d522d70dcc706..a5546ed59c9ca1 100644 --- a/files/zh-cn/web/html/element/a/index.html +++ b/files/zh-cn/web/html/element/a/index.html @@ -291,37 +291,7 @@

      Clicking 及 focus

      规范

      - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
      SpecificationStatusComment
      {{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}{{Spec2('Referrer Policy')}}Added the referrer attribute.
      {{SpecName('HTML WHATWG', 'text-level-semantics.html#the-a-element', '<a>')}}{{Spec2('HTML WHATWG')}}
      {{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-a-element', '<a>')}}{{Spec2('HTML5 W3C')}}
      {{SpecName('HTML4.01', 'struct/links.html#h-12.2', '<a>')}}{{Spec2('HTML4.01')}}
      +{{Specifications}}

      浏览器兼容性

      diff --git a/files/zh-cn/web/html/element/abbr/index.html b/files/zh-cn/web/html/element/abbr/index.html index 3716e1d535dfe7..8d27b6678c585e 100644 --- a/files/zh-cn/web/html/element/abbr/index.html +++ b/files/zh-cn/web/html/element/abbr/index.html @@ -167,32 +167,7 @@

      Example

      规范

      - - - - - - - - - - - - - - - - - - - - - - - - - -
      规范状态备注
      {{SpecName('HTML WHATWG', 'semantics.html#the-abbr-element', '<abbr>')}}{{Spec2('HTML WHATWG')}}
      {{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-abbr-element', '<abbr>')}}{{Spec2('HTML5 W3C')}}
      {{SpecName('HTML4.01', 'struct/text.html#edef-ABBR', '<abbr>')}}{{Spec2('HTML4.01')}}
      +{{Specifications}}

      浏览器兼容性

      diff --git a/files/zh-cn/web/html/element/acronym/index.html b/files/zh-cn/web/html/element/acronym/index.html index ae398ff03abf67..f74e2c1c8476ae 100644 --- a/files/zh-cn/web/html/element/acronym/index.html +++ b/files/zh-cn/web/html/element/acronym/index.html @@ -44,22 +44,7 @@

      默认样式

      规范

      - - - - - - - - - - - - - - - -
      规范状态备注
      {{SpecName('HTML4.01', 'struct/text.html#edef-ACRONYM', '<acronym>')}}{{Spec2('HTML4.01')}} 
      +{{Specifications}}

      浏览器兼容性

      diff --git a/files/zh-cn/web/html/element/address/index.html b/files/zh-cn/web/html/element/address/index.html index 661b9f64615def..37bdf19b5ce236 100644 --- a/files/zh-cn/web/html/element/address/index.html +++ b/files/zh-cn/web/html/element/address/index.html @@ -83,32 +83,7 @@

      结果

      规范

      - - - - - - - - - - - - - - - - - - - - - - - - - -
      规范状态备注
      {{SpecName('HTML WHATWG', 'semantics.html#the-address-element', '<address>')}}{{Spec2('HTML WHATWG')}}
      {{SpecName('HTML5 W3C', 'sections.html#the-address-element', '<address>')}}{{Spec2('HTML5 W3C')}}
      {{SpecName('HTML4.01', 'struct/global.html#h-7.5.6', '<address>')}}{{Spec2('HTML4.01')}}
      +{{Specifications}}

      浏览器兼容性

      diff --git a/files/zh-cn/web/html/element/area/index.html b/files/zh-cn/web/html/element/area/index.html index ee92f5fd3261c9..fd300cbfd908ad 100644 --- a/files/zh-cn/web/html/element/area/index.html +++ b/files/zh-cn/web/html/element/area/index.html @@ -107,32 +107,7 @@

      例子

      规范

      - - - - - - - - - - - - - - - - - - - - - - - - - -
      SpecificationStatusComment
      {{SpecName('HTML WHATWG', 'the-map-element.html#the-area-element', '<area>')}}{{Spec2('HTML WHATWG')}} 
      {{SpecName('HTML5 W3C', 'embedded-content-0.html#the-area-element', '<area>')}}{{Spec2('HTML5 W3C')}} 
      {{SpecName('HTML4.01', 'struct/objects.html#h-13.6.1', '<area>')}}{{Spec2('HTML4.01')}} 
      +{{Specifications}}

      浏览器兼容性

      diff --git a/files/zh-cn/web/html/element/article/index.html b/files/zh-cn/web/html/element/article/index.html index 59d5c75278bf15..913ebca6eba8fa 100644 --- a/files/zh-cn/web/html/element/article/index.html +++ b/files/zh-cn/web/html/element/article/index.html @@ -104,27 +104,7 @@

      示例

      规范

      - - - - - - - - - - - - - - - - - - - - -
      规范状态注释
      {{SpecName('HTML WHATWG', 'sections.html#the-article-element', '<article>')}}{{Spec2('HTML WHATWG')}}
      {{SpecName('HTML5 W3C', 'sections.html#the-article-element', '<article>')}}{{Spec2('HTML5 W3C')}}
      +{{Specifications}}

      浏览器兼容

      diff --git a/files/zh-cn/web/html/element/b/index.html b/files/zh-cn/web/html/element/b/index.html index 5c2451738fd920..40d70612f067ea 100644 --- a/files/zh-cn/web/html/element/b/index.html +++ b/files/zh-cn/web/html/element/b/index.html @@ -78,32 +78,7 @@

      结果

      规范

      - - - - - - - - - - - - - - - - - - - - - - - - - -
      SpecificationStatusComment
      {{SpecName('HTML WHATWG', 'semantics.html#the-b-element', '<b>')}}{{Spec2('HTML WHATWG')}} 
      {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-b-element', '<b>')}}{{Spec2('HTML5 W3C')}} 
      {{SpecName('HTML4.01', 'present/graphics.html#h-15.2.1', '<b>')}}{{Spec2('HTML4.01')}} 
      +{{Specifications}}

      浏览器兼容性

      diff --git a/files/zh-cn/web/html/element/base/index.html b/files/zh-cn/web/html/element/base/index.html index 1355002191ccc5..82f81eafc319b2 100644 --- a/files/zh-cn/web/html/element/base/index.html +++ b/files/zh-cn/web/html/element/base/index.html @@ -94,32 +94,7 @@

      示例

      规范

      - - - - - - - - - - - - - - - - - - - - - - - - - -
      规范状态注释
      {{SpecName('HTML WHATWG', 'semantics.html#the-base-element', '<base>')}}{{Spec2('HTML WHATWG')}}上次快照之后没有变化。
      {{SpecName('HTML5 W3C', 'document-metadata#the-base-element', '<base>')}}{{Spec2('HTML5 W3C')}}指定 target 的行为
      {{SpecName('HTML4.01', 'struct/links.html#h-12.4', '<base>')}}{{Spec2('HTML4.01')}}添加 target  属性
      +{{Specifications}}

      浏览器兼容性

      diff --git a/files/zh-cn/web/html/element/bdi/index.html b/files/zh-cn/web/html/element/bdi/index.html index 9602a5c056a310..7915afb79e3f6d 100644 --- a/files/zh-cn/web/html/element/bdi/index.html +++ b/files/zh-cn/web/html/element/bdi/index.html @@ -63,37 +63,11 @@

      结果

      规范

      - - - - - - - - - - - - - - - - - - - - -
      SpecificationStatusComment
      {{SpecName('HTML WHATWG', 'text-level-semantics.html#the-bdi-element', '<bdi>')}}{{Spec2('HTML WHATWG')}}
      {{SpecName('HTML5 W3C', 'the-bdi-element.html#the-bdi-element', '<bdi>')}}{{Spec2('HTML5 W3C')}}
      +{{Specifications}}

      浏览器兼容

      - - - - -

      {{Compat("html.elements.bdi")}}

      - - +

      {{Compat}}

      参见

      diff --git a/files/zh-cn/web/html/element/bdo/index.html b/files/zh-cn/web/html/element/bdo/index.html index cc912681de71f4..10b530e8301721 100644 --- a/files/zh-cn/web/html/element/bdo/index.html +++ b/files/zh-cn/web/html/element/bdo/index.html @@ -82,32 +82,7 @@

      注意

      规范

      - - - - - - - - - - - - - - - - - - - - - - - - - -
      规范状态注释
      {{SpecName('HTML WHATWG', 'semantics.html#the-bdo-element', '<bdo>')}}{{Spec2('HTML WHATWG')}}
      {{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-bdo-element', '<bdo>')}}{{Spec2('HTML5 W3C')}}
      {{SpecName('HTML4.01', 'dirlang.html#h-8.2.4', '<bdo>')}}{{Spec2('HTML4.01')}}
      +{{Specifications}}

      浏览器兼容性

      diff --git a/files/zh-cn/web/html/element/blockquote/index.html b/files/zh-cn/web/html/element/blockquote/index.html index f6d8d2e06edebf..8256c6359bbdab 100644 --- a/files/zh-cn/web/html/element/blockquote/index.html +++ b/files/zh-cn/web/html/element/blockquote/index.html @@ -86,32 +86,7 @@

      例子

      规范

      - - - - - - - - - - - - - - - - - - - - - - - - - -
      规范状态备注
      {{SpecName('HTML WHATWG', 'grouping-content.html#the-blockquote-element', '<blockquote>')}}{{Spec2('HTML WHATWG')}}
      {{SpecName('HTML5 W3C', 'grouping-content.html#the-blockquote-element', '<blockquote>')}}{{Spec2('HTML5 W3C')}}
      {{SpecName('HTML4.01', 'struct/text.html#h-9.2.2', '<blockquote>')}}{{Spec2('HTML4.01')}}
      +{{Specifications}}

      浏览器兼容性

      diff --git a/files/zh-cn/web/html/element/body/index.html b/files/zh-cn/web/html/element/body/index.html index 0d530f5f0a419e..45ce9cd37611fc 100644 --- a/files/zh-cn/web/html/element/body/index.html +++ b/files/zh-cn/web/html/element/body/index.html @@ -124,32 +124,7 @@

      例子

      规范

      - - - - - - - - - - - - - - - - - - - - - - - - - -
      规范状态备注
      {{SpecName('HTML WHATWG', 'semantics.html#the-body-element', '<body>')}}{{Spec2('HTML WHATWG')}}更改了不一致的特性列表。
      {{SpecName('HTML5 W3C', 'sections.html#the-body-element', '<body>')}}{{Spec2('HTML5 W3C')}}废弃了以前不赞成的属性。定义了没有标准化的 margintop, marginleft, marginrightmarginbottom 不一致的行为。增加了 on* 属性。
      {{SpecName('HTML4.01', 'struct/global.html#h-7.5.1', '<body>')}}{{Spec2('HTML4.01')}}不再赞成 alink, background, bgcolor, link, textvlink 属性。
      +{{Specifications}}

      浏览器兼容性

      diff --git a/files/zh-cn/web/html/element/br/index.html b/files/zh-cn/web/html/element/br/index.html index 3869511eb2cb5c..b8e9cbcd705856 100644 --- a/files/zh-cn/web/html/element/br/index.html +++ b/files/zh-cn/web/html/element/br/index.html @@ -65,34 +65,9 @@

      例子

      Mountain View, CA 94043-0801
      USA

      -

      技术规范

      +

      规范

      - - - - - - - - - - - - - - - - - - - - - - - - - -
      SpecificationStatusComment
      {{SpecName('HTML WHATWG', 'semantics.html#the-br-element', '<br>')}}{{Spec2('HTML WHATWG')}} 
      {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-br-element', '<br>')}}{{Spec2('HTML5 W3C')}} 
      {{SpecName('HTML4.01', 'struct/text.html#h-9.3.2.1', '<br>')}}{{Spec2('HTML4.01')}} 
      +{{Specifications}}

      浏览器兼容性

      diff --git a/files/zh-cn/web/html/element/button/index.html b/files/zh-cn/web/html/element/button/index.html index 63fbb19e345860..20d2a79d37d28a 100644 --- a/files/zh-cn/web/html/element/button/index.html +++ b/files/zh-cn/web/html/element/button/index.html @@ -184,34 +184,9 @@

      示例

      请注意上例中应用了 CSS 。

      -

      技术规范

      +

      规范

      - - - - - - - - - - - - - - - - - - - - - - - - - -
      SpecificationStatusComment
      {{SpecName('HTML WHATWG', 'forms.html#the-button-element', '<button>')}}{{Spec2('HTML WHATWG')}} 
      {{SpecName('HTML5 W3C', 'forms.html#the-button-element', '<button>')}}{{Spec2('HTML5 W3C')}} 
      {{SpecName('HTML4.01', 'interact/forms.html#h-17.5', '<button>')}}{{Spec2('HTML4.01')}} 
      +{{Specifications}}

      浏览器兼容性

      diff --git a/files/zh-cn/web/html/element/canvas/index.html b/files/zh-cn/web/html/element/canvas/index.html index ce82617f2a8877..8c9df079c9b699 100644 --- a/files/zh-cn/web/html/element/canvas/index.html +++ b/files/zh-cn/web/html/element/canvas/index.html @@ -117,27 +117,7 @@

      可访问性

      规范

      - - - - - - - - - - - - - - - - - - - - -
      SpecificationStatusComment
      {{SpecName('HTML WHATWG', 'the-canvas-element.html#the-canvas- element', '<canvas>')}}{{Spec2('HTML WHATWG')}}
      {{SpecName('HTML5 W3C', 'the-canvas-element.html#the-canvas- element', '<canvas>')}}{{Spec2('HTML5 W3C')}}初始定义
      +{{Specifications}}

      Browser compatibility

      diff --git a/files/zh-cn/web/html/element/caption/index.html b/files/zh-cn/web/html/element/caption/index.html index 6afd8cad316be8..db0f0025fc8e1b 100644 --- a/files/zh-cn/web/html/element/caption/index.html +++ b/files/zh-cn/web/html/element/caption/index.html @@ -60,32 +60,7 @@

      实例

      Specifications

      - - - - - - - - - - - - - - - - - - - - - - - - - -
      SpecificationStatusComment
      {{SpecName('HTML WHATWG', 'tabular-data.html#the-caption-element', '<caption>')}}{{Spec2('HTML WHATWG')}} 
      {{SpecName('HTML5 W3C', 'tabular-data.html#the-caption-element', '<caption>')}}{{Spec2('HTML5 W3C')}} 
      {{SpecName('HTML4.01', 'struct/tables.html#h-11.2.2', '<caption>')}}{{Spec2('HTML4.01')}} 
      +{{Specifications}}

      Browser compatibility

      diff --git a/files/zh-cn/web/html/element/cite/index.html b/files/zh-cn/web/html/element/cite/index.html index 138a7c71535901..ca06455251332a 100644 --- a/files/zh-cn/web/html/element/cite/index.html +++ b/files/zh-cn/web/html/element/cite/index.html @@ -169,32 +169,7 @@

      示例

      规范

      - - - - - - - - - - - - - - - - - - - - - - - - - -
      规范状态注释
      {{SpecName('HTML WHATWG', 'text-level-semantics.html#the-cite-element', '<cite>')}}{{Spec2('HTML WHATWG')}}
      {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-cite-element', '<cite>')}}{{Spec2('HTML5 W3C')}}
      {{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '<cite>')}}{{Spec2('HTML4.01')}}
      +{{Specifications}}

      浏览器兼容性

      @@ -202,10 +177,6 @@

      浏览器兼容性

      {{Compat("html.elements.cite")}}

      - - -
      -

      相关链接

        diff --git a/files/zh-cn/web/html/element/code/index.html b/files/zh-cn/web/html/element/code/index.html index 210e8be6689389..751339bd47840a 100644 --- a/files/zh-cn/web/html/element/code/index.html +++ b/files/zh-cn/web/html/element/code/index.html @@ -23,32 +23,7 @@

        结果

        注意

        CSS 规则可以覆盖浏览器默认的 code 标签字体样式。但用户设置的浏览器字体选项可能会超过 CSS 的优先级,使之无效。

        Specifications

        - - - - - - - - - - - - - - - - - - - - - - - - - -
        SpecificationStatusComment
        {{SpecName('HTML WHATWG', 'text-level-semantics.html#the-code-element', '<code>')}}{{Spec2('HTML WHATWG')}} 
        {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-code-element', '<code>')}}{{Spec2('HTML5 W3C')}} 
        {{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '<code>')}}{{Spec2('HTML4.01')}} 
        +{{Specifications}}

        浏览器兼容性

        {{Compat("html.elements.code")}} diff --git a/files/zh-cn/web/html/element/col/index.html b/files/zh-cn/web/html/element/col/index.html index d4019b0f7acf1a..470c1c1dc1d1ac 100644 --- a/files/zh-cn/web/html/element/col/index.html +++ b/files/zh-cn/web/html/element/col/index.html @@ -163,32 +163,7 @@

        示例

        规范

        - - - - - - - - - - - - - - - - - - - - - - - - - -
        SpecificationStatusComment
        {{SpecName('HTML WHATWG', 'tabular-data.html#the-col-element', '<col>')}}{{Spec2('HTML WHATWG')}} 
        {{SpecName('HTML5 W3C', 'tabular-data.html#the-col-element', '<col>')}}{{Spec2('HTML5 W3C')}} 
        {{SpecName('HTML4.01', 'struct/tables.html#h-11.2.4.2', '<col>')}}{{Spec2('HTML4.01')}} 
        +{{Specifications}}

        浏览器兼容性

        diff --git a/files/zh-cn/web/html/element/colgroup/index.html b/files/zh-cn/web/html/element/colgroup/index.html index dce5356af33e19..da937d4c19fbf8 100644 --- a/files/zh-cn/web/html/element/colgroup/index.html +++ b/files/zh-cn/web/html/element/colgroup/index.html @@ -199,32 +199,7 @@

        示例

        规范

        - - - - - - - - - - - - - - - - - - - - - - - - - -
        规范状态备注
        {{SpecName('HTML WHATWG', 'tabular-data.html#the-colgroup-element', '<colgroup>')}}{{Spec2('HTML WHATWG')}}
        {{SpecName('HTML5 W3C', 'tabular-data.html#the-colgroup-element', '<colgroup>')}}{{Spec2('HTML5 W3C')}}
        {{SpecName('HTML4.01', 'tables.html#edef-COLGROUP', '<colgroup>')}}{{Spec2('HTML4.01')}}
        +{{Specifications}}

        浏览器兼容性

        diff --git a/files/zh-cn/web/html/element/data/index.html b/files/zh-cn/web/html/element/data/index.html index d268bef44f5704..0bd74832f857a9 100644 --- a/files/zh-cn/web/html/element/data/index.html +++ b/files/zh-cn/web/html/element/data/index.html @@ -64,27 +64,7 @@

        示例

        规范

        - - - - - - - - - - - - - - - - - - - - -
        规范状态备注
        {{SpecName('HTML WHATWG', 'text-level-semantics.html#the-data-element', '<data>')}}{{Spec2('HTML WHATWG')}}No change from {{Spec2('HTML5 W3C')}}
        {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-data-element', '<data>')}}{{Spec2('HTML5 W3C')}}Initial definition.
        +{{Specifications}}

        浏览器兼容性

        diff --git a/files/zh-cn/web/html/element/datalist/index.html b/files/zh-cn/web/html/element/datalist/index.html index 9e4cb07da8510f..7b8dfd32ea4123 100644 --- a/files/zh-cn/web/html/element/datalist/index.html +++ b/files/zh-cn/web/html/element/datalist/index.html @@ -41,27 +41,7 @@

        结果

        规范

        - - - - - - - - - - - - - - - - - - - - -
        规范状态备注
        {{SpecName('HTML WHATWG', 'the-button-element.html#the-datalist-element', '<datalist>')}}{{Spec2('HTML WHATWG')}}
        {{SpecName('HTML5 W3C', 'the-datalist-element.html#the-datalist-element', '<datalist>')}}{{Spec2('HTML5 W3C')}}
        +{{Specifications}}

        浏览器兼容性

        diff --git a/files/zh-cn/web/html/element/dd/index.html b/files/zh-cn/web/html/element/dd/index.html index 015ad0b408448a..bfb311f2dad7bb 100644 --- a/files/zh-cn/web/html/element/dd/index.html +++ b/files/zh-cn/web/html/element/dd/index.html @@ -53,32 +53,7 @@

        示例

        规范

        - - - - - - - - - - - - - - - - - - - - - - - - - -
        规范状态备注
        {{SpecName('HTML WHATWG', 'grouping-content.html#the-dd-element', '<dd>')}}{{Spec2('HTML WHATWG')}} 
        {{SpecName('HTML5 W3C', 'grouping-content.html#the-dd-element', '<dd>')}}{{Spec2('HTML5 W3C')}} 
        {{SpecName('HTML4.01', 'struct/lists.html#h-10.3', '<dd>')}}{{Spec2('HTML4.01')}} 
        +{{Specifications}}

        浏览器兼容性

        diff --git a/files/zh-cn/web/html/element/del/index.html b/files/zh-cn/web/html/element/del/index.html index 1584c97315b11a..75860ebc17615a 100644 --- a/files/zh-cn/web/html/element/del/index.html +++ b/files/zh-cn/web/html/element/del/index.html @@ -66,32 +66,7 @@

        结果

        规范

        - - - - - - - - - - - - - - - - - - - - - - - - - -
        规范状态评论
        {{SpecName('HTML WHATWG', 'edits.html#the-del-element', '<del>')}}{{Spec2('HTML WHATWG')}} 
        {{SpecName('HTML5 W3C', 'edits.html#the-del-element', '<del>')}}{{Spec2('HTML5 W3C')}} 
        {{SpecName('HTML4.01', 'struct/text.html#h-9.4', '<del>')}}{{Spec2('HTML4.01')}} 
        +{{Specifications}}

        浏览器兼容性

        From 2e6293955985823bbe49c48fc7887c24423439cc Mon Sep 17 00:00:00 2001 From: Manu Lintz Date: Tue, 19 Jul 2022 18:03:22 +0200 Subject: [PATCH 091/100] Fix typo (#6992) This fixes a small conjugation typo --- files/fr/web/http/cors/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/fr/web/http/cors/index.md b/files/fr/web/http/cors/index.md index 508b98bf51f133..4ba76d5601c197 100644 --- a/files/fr/web/http/cors/index.md +++ b/files/fr/web/http/cors/index.md @@ -307,7 +307,7 @@ Le protocole CORS demandait initialement ce comportement. Toutefois, [il a été En attendant que les navigateurs comblent ce manque, il est possible de contourner cette limitation en utilisant l'une de ces deux méthodes : -- Modifier le comportement côté serveur afin d'éviter la requête préliminaire ou la redirection (dans le cas où vous contrôler le serveur sur lequel la requête est effectuée) +- Modifier le comportement côté serveur afin d'éviter la requête préliminaire ou la redirection (dans le cas où vous contrôlez le serveur sur lequel la requête est effectuée) - Modifier la requête afin que ce soit une [requête simple](#simples) qui ne nécessite pas de requête préliminaire. S'il n'est pas possible d'appliquer ces changements, on peut également : From de1989ebb26ef57d1770a65c1d53488b0842fe70 Mon Sep 17 00:00:00 2001 From: Pedro Torcatt Date: Tue, 19 Jul 2022 12:48:11 -0400 Subject: [PATCH 092/100] Work in #4618 | Add: toprimitive section (#6974) * Work in #4618 | Add: toprimitive section * Update files/es/web/javascript/reference/global_objects/symbol/toprimitive/index.md --- .../symbol/toprimitive/index.md | 64 +++++++++++++++++++ 1 file changed, 64 insertions(+) create mode 100644 files/es/web/javascript/reference/global_objects/symbol/toprimitive/index.md diff --git a/files/es/web/javascript/reference/global_objects/symbol/toprimitive/index.md b/files/es/web/javascript/reference/global_objects/symbol/toprimitive/index.md new file mode 100644 index 00000000000000..555ff28ee11c59 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/symbol/toprimitive/index.md @@ -0,0 +1,64 @@ +--- +title: Symbol.toPrimitive +slug: Web/JavaScript/Reference/Global_Objects/Symbol/toPrimitive +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/toPrimitive +original_slug: Web/JavaScript/Reference/Global_Objects/Symbol/toPrimitive +browser-compat: javascript.builtins.Symbol.toPrimitive +--- +{{JSRef}} + +El **`Symbol.toPrimitive`** es un símbolo que especifica una propiedad con valor de función que se llama para convertir un objeto en un valor primitivo correspondiente. + +{{EmbedInteractiveExample("pages/js/symbol-toprimitive.html")}} + +## Descripción + +Con la ayuda de la propiedad `Symbol.toPrimitive` (utilizada como valor de la función), se puede convertir un objeto en un valor primitivo. La función se llama con un argumento de cadena `hint`, que especifica el tipo preferido del valor primitivo resultante. El argumento `hint` puede ser uno de los siguientes: "`number`", "`string`" y "`default`". + +{{js_property_attributes(0,0,0)}} + +## Ejemplos + +### Modificar los valores primitivos convertidos desde un objeto + +El siguiente ejemplo describe cómo la propiedad `Symbol.toPrimitive` puede modificar el valor primitivo convertido desde un objeto. + +```js +// Un objeto sin la propiedad Symbol.toPrimitive. +const obj1 = {}; +console.log(+obj1); // NaN +console.log(`${obj1}`); // "[object Object]" +console.log(obj1 + ''); // "[object Object]" + +// Un objeto con la propiedad Symbol.toPrimitive. +const obj2 = { + [Symbol.toPrimitive](hint) { + if (hint == 'number') { + return 10; + } + if (hint == 'string') { + return 'hello'; + } + return true; + } +}; +console.log(+obj2); // 10 — hint es "number" +console.log(`${obj2}`); // "hello" — hint es "string" +console.log(obj2 + ''); // "true" — hint es "default" +``` + +## Especificaciones + +{{Specifications}} + +## Compatibilidad con navegadores + +{{Compat}} + +## Véase también + +- {{jsxref("Date.@@toPrimitive", "Date.prototype[@@toPrimitive]")}} +- {{jsxref("Symbol.@@toPrimitive", "Symbol.prototype[@@toPrimitive]")}} +- {{jsxref("Object.prototype.toString()")}} +- {{jsxref("Object.prototype.valueOf()")}} + From 3bbfa30c448af6b0cdd27677a9cf6c0b5dd8a42c Mon Sep 17 00:00:00 2001 From: Alexander Date: Tue, 19 Jul 2022 15:58:40 -0500 Subject: [PATCH 093/100] Fix #6883 outline-color [es] (#6887) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Fix #6883 outline-color [es] * Update files/es/web/css/outline-color/index.md * Update files/es/web/css/outline-color/index.md Co-authored-by: Juan Vásquez * Update files/es/web/css/outline-color/index.md Co-authored-by: Juan Vásquez Co-authored-by: GrayWolf Co-authored-by: Juan Vásquez --- files/es/web/css/outline-color/index.html | 92 ------------------- files/es/web/css/outline-color/index.md | 107 ++++++++++++++++++++++ 2 files changed, 107 insertions(+), 92 deletions(-) delete mode 100644 files/es/web/css/outline-color/index.html create mode 100644 files/es/web/css/outline-color/index.md diff --git a/files/es/web/css/outline-color/index.html b/files/es/web/css/outline-color/index.html deleted file mode 100644 index c5737ef780c2d7..00000000000000 --- a/files/es/web/css/outline-color/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: outline-color -slug: Web/CSS/outline-color -tags: - - Contorno CSS - - Propiedad CSS -translation_of: Web/CSS/outline-color ---- -
        {{CSSRef}}
        - -

        Resumen

        - -

        La propiedad CSS outline-color establece el color del contorno de un elemento. Un contorno es una línea que se dibuja al rededor de los elementos, fuera de los límites del borde, para resaltar al elemento.

        - -

        {{cssinfo}}

        - -

        Sintaxis

        - -
        /* Valores clave */
        -outline-color: invert;
        -outline-color: red;
        -
        -/* Valores globales */
        -outline-color: inherit;
        -outline-color: initial;
        -outline-color: unset;
        -
        - -

        Valores

        - -
        -
        <color>
        -
        Ver {{cssxref("<color>")}} para las diferentes palabras clave y notaciones de colores.
        -
        invert
        -
        Para asegurarse que el contorno es visible, este valor realiza una inversión del color de fondo. Esto hace el contorno más sobresaliente, sin importar el color de fondo. Nótese que los navegadores pueden no soportar este valor. De ser así, solamente considerarán la declaración como inválida
        -
        - -

        Sintaxis formal

        - -{{csssyntax}} - -

        Ejemplo

        - -

        HTML

        - -
        <p class="example">My outline is blue, da ba dee.</p>
        - -

        CSS

        - -
        .example {
        -  /* primero debe definirse la propiedad "outline" */
        -  outline: 2px solid;
        -  /* hacer el contorno azul */
        -  outline-color: #0000FF;
        -}
        - -

        En vivo:

        - -

        {{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/outline-color') }}

        - -

        Especificaciones

        - - - - - - - - - - - - - - - - - - - - - - - - - - -
        EspecificaciónEstadoComentarios
        {{SpecName('CSS3 Basic UI', '#outline-color', 'outline-color')}}{{Spec2('CSS3 Basic UI')}}Sin cambios
        {{SpecName('CSS3 Transitions', '#animatable-css', 'outline-color')}}{{Spec2('CSS3 Transitions')}}Define outline-color como propiedad que se puede animar.
        {{SpecName('CSS2.1', 'ui.html#propdef-outline-color', 'outline-color')}}{{Spec2('CSS2.1')}}Definición inicial
        - -

        Compatibilidad de navegadores

        - -{{Compat("css.properties.outline-color")}} diff --git a/files/es/web/css/outline-color/index.md b/files/es/web/css/outline-color/index.md new file mode 100644 index 00000000000000..62cd5ee1e6a6cf --- /dev/null +++ b/files/es/web/css/outline-color/index.md @@ -0,0 +1,107 @@ +--- +title: outline-color +slug: Web/CSS/outline-color +translation_of: Web/CSS/outline-color +original_slug: Web/CSS/outline-color +browser-compat: css.properties.outline-color +--- +{{CSSRef}} + +La propiedad CSS **`outline-color`** establece el color del contorno de un elemento. + +{{EmbedInteractiveExample("pages/css/outline-color.html")}} + +## Sintaxis + +```css +/* Valores de */ +outline-color: #f92525; +outline-color: rgb(30,222,121); +outline-color: blue; + +/* Valor de palabra clave */ +outline-color: invert; + +/* Valores globales */ +outline-color: inherit; +outline-color: initial; +outline-color: revert; +outline-color: revert-layer; +outline-color: unset; +``` + +La propiedad `outline-color` se especifica como cualquiera de los valores enumerados a continuación. + +### Valores + +- {{cssxref("<color>")}} + - : El color del contorno, especificado como ``. +- `invert` + - : Para asegurarse de que el contorno sea visible, realiza una inversión de color del fondo. Tenga en cuenta que no es necesario que los navegadores admitan este valor; si no lo hacen, esta palabra clave se considera no válida. + +## Descripción + +Un contorno es una línea que se dibuja alrededor de un elemento, fuera de {{cssxref("border")}}. A diferencia del borde del elemento, el contorno se dibuja fuera del marco del elemento y puede superponerse a otro contenido. El borde, por otro lado, en realidad alterará el diseño de la página para asegurarse de que encaje sin superponerse con nada más (a menos que lo establezca explícitamente para que se superponga). + +Suele ser más conveniente usar la propiedad abreviada {{cssxref("outline")}} al definir la apariencia de un contorno. + +## Problemas de accesibilidad + +Los [estilos de enfoque](/es/docs/Web/CSS/:focus) personalizados normalmente implican realizar ajustes en la propiedad {{cssxref("outline")}}. Si se ajusta el color del contorno, es importante asegurarse de que la relación de contraste entre este y el fondo sobre el que se coloca el contorno sea lo suficientemente alta como para que las personas con problemas de visión puedan percibirlo. + +La relación de contraste de color se determina comparando la luminosidad del texto y los valores de color de fondo. Para cumplir con las [Directrices de Accesibilidad al Contenido Web (WCAG)](https://www.w3.org/WAI/standards-guidelines/wcag/) actuales, se requiere una proporción de 4.5:1 para el contenido de texto y de 3:1 para textos más grandes, como los encabezados. El texto grande se define como 18.66 px y en [negrita](/es/docs/Web/CSS/font-weight) o más grande, o 24 px o más. + +- [WebAIM: Comprobador de contraste de color](https://webaim.org/resources/contrastchecker/) +- [MDN Entendiendo las WCAG, Directriz 1.4 explicaciones](/es/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background) +- [Comprender el Criterio de Conformidad 1.4.3 | W3C Entendiendo las WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html) + +## Definicion formal + +{{cssinfo}} + +## Sintaxis formal + +{{csssyntax}} + +## Ejemplo + +### Establecer un contorno azul sólido + +#### HTML + +```html +

        Como puedes ver, mi contorno es azul.

        +``` + +#### CSS + +```css +p { + outline: 2px solid; /* Establecer el ancho y el estilo del contorno */ + outline-color: #0000FF; /* Hacer el contorno azul */ + margin: 5px; +} +``` + +#### Resultado + +{{ EmbedLiveSample('Establecer_un_contorno_azul_solido') }} + +## Especificaciones + +{{Specifications}} + +## Compatibilidad con navegadores + +{{Compat}} + +## Véase también + +- {{cssxref("outline")}} +- {{cssxref("outline-color")}} +- {{cssxref("outline-style")}} +- {{cssxref("outline-width")}} +- El tipo de dato {{cssxref("<color>")}} +- Otras propiedades relacionadas con el color: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, y {{cssxref("column-rule-color")}} +- [Aplicar color a elementos HTML usando CSS](/es/docs/Web/CSS/CSS_Colors/Applying_color) + From f535cf4f486ed8b7db2cd9d0d53cca86a0fa9136 Mon Sep 17 00:00:00 2001 From: allo Date: Tue, 19 Jul 2022 08:15:54 +0800 Subject: [PATCH 094/100] prepare markdown convertion for learn/performance --- files/zh-cn/learn/performance/css/index.html | 6 ++-- files/zh-cn/learn/performance/index.html | 32 +++++++++---------- .../perceived_performance/index.html | 16 +++++----- .../web_performance_basics/index.html | 24 +++++++------- files/zh-tw/learn/performance/index.html | 3 -- .../learn/performance/multimedia/index.html | 2 +- 6 files changed, 39 insertions(+), 44 deletions(-) diff --git a/files/zh-cn/learn/performance/css/index.html b/files/zh-cn/learn/performance/css/index.html index 17abde06d6907d..84494c175f22d7 100644 --- a/files/zh-cn/learn/performance/css/index.html +++ b/files/zh-cn/learn/performance/css/index.html @@ -3,7 +3,7 @@ slug: Learn/Performance/CSS translation_of: Learn/Performance/CSS --- -

        页面在样式没有渲染完毕的情况下被绘制,在样式渲染完毕后又被刷新,这大概是很糟糕的用户体验。因此,除非浏览器知道当前不需要 该 CSS,否则 该 CSS 将阻止渲染。浏览器只会在下载 CSS 和构建 CSSOM 之后绘制页面。浏览器遵循特定的渲染路径:绘制 paint 仅在布局 layout 之后进行,布局 layout 则在创建渲染树 render tree 之后进行,创建渲染树则需要在 DOM 和 CSSOM 树解析完成后进行。为了优化 CSSOM 的构造,请删除不必要的样式,对 CSS 进行最小化,压缩和缓存,并将页面加载时不需要的 CSS 拆分为其他文件,以减少 CSS 渲染阻塞。

        +

        页面在样式没有渲染完毕的情况下被绘制,在样式渲染完毕后又被刷新,这大概是很糟糕的用户体验。因此,除非浏览器知道当前不需要 该 CSS,否则 该 CSS 将阻止渲染。浏览器只会在下载 CSS 和构建 CSSOM 之后绘制页面。浏览器遵循特定的渲染路径:绘制 paint 仅在布局 layout 之后进行,布局 layout 则在创建渲染树 render tree 之后进行,创建渲染树则需要在 DOM 和 CSSOM 树解析完成后进行。为了优化 CSSOM 的构造,请删除不必要的样式,对 CSS 进行最小化,压缩和缓存,并将页面加载时不需要的 CSS 拆分为其他文件,以减少 CSS 渲染阻塞。

        阻塞渲染优化

        @@ -17,7 +17,7 @@

        阻塞渲染优化

        在 GPU 上呈现动画

        -

        浏览器针对处理 CSS 动画和不会很好地触发重排(因此也导致重新绘制)的动画属性进行了优化。为了提高性能,可以将被动画化的节点从主线程移到 GPU 上。将导致合成的属性包括 3D transforms (transform: translateZ(), rotate3d(),etc.),animating transform 和 opacity, position: fixedwill-change,和 filter。一些元素,例如 <video>, <canvas><iframe>,也位于各自的图层上。 将元素提升为图层(也称为合成)时,动画转换属性将在 GPU 中完成,从而改善性能,尤其是在移动设备上。

        +

        浏览器针对处理 CSS 动画和不会很好地触发重排(因此也导致重新绘制)的动画属性进行了优化。为了提高性能,可以将被动画化的节点从主线程移到 GPU 上。将导致合成的属性包括 3D transforms (transform: translateZ(), rotate3d(),etc.),animating transform 和 opacity, position: fixedwill-change,和 filter。一些元素,例如 <video>, <canvas><iframe>,也位于各自的图层上。 将元素提升为图层(也称为合成)时,动画转换属性将在 GPU 中完成,从而改善性能,尤其是在移动设备上。

        will-change 属性

        @@ -39,4 +39,4 @@

        font-display 属性

        contain 属性

        -

        CSS 的 contain属性允许作者指示元素及其内容尽可能独立于文档树的其余部分。这允许浏览器针对 DOM 的有限区域而不是整个页面重新计算布局,样式,绘画,大小或它们的任意组合。

        +

        CSS 的 contain属性允许作者指示元素及其内容尽可能独立于文档树的其余部分。这允许浏览器针对 DOM 的有限区域而不是整个页面重新计算布局,样式,绘画,大小或它们的任意组合。

        diff --git a/files/zh-cn/learn/performance/index.html b/files/zh-cn/learn/performance/index.html index c1ca0c14492fe8..0fb796156cedea 100644 --- a/files/zh-cn/learn/performance/index.html +++ b/files/zh-cn/learn/performance/index.html @@ -1,6 +1,6 @@ --- title: Web Performance -slug: learn/Performance +slug: Learn/Performance translation_of: Learn/Performance ---

        {{LearnSidebar}}

        @@ -16,9 +16,9 @@

        学习方法

        更深入进行以下主题也很有必要,这些模块包括

          -
        • HTML 入门 
        • -
        • CSS 初步 
        • -
        • Javascript 初步 
        • +
        • HTML 入门
        • +
        • CSS 初步
        • +
        • Javascript 初步

        当你通读了这个部分之后,你或许特别想深入了解网页性能——你可以 在我们的主 MDN 网页性能章节找到更多教学,包括性能 API 的概览,测试和分析工具,以及性能瓶颈问题。

        @@ -32,7 +32,7 @@

        Introductory modules

        This article starts the module off with a good look at what performance actually is — this includes the tools, metrics, APIs, networks, and groups of people we need to consider when thinking about performance, and how we can make performance part of our web development workflow.
        How do users perceive performance?
        -

        More important than how fast your website is in milliseconds, is how fast your users perceive your site to be. These perceptions are impacted by actual page load time, idling, responsiveness to user interaction, and the smoothness of scrolling and other animations. In this article, we discuss the various loading metrics, animation, and responsiveness metrics, along with best practices to improve user perception, if not the actual timings.

        +

        More important than how fast your website is in milliseconds, is how fast your users perceive your site to be. These perceptions are impacted by actual page load time, idling, responsiveness to user interaction, and the smoothness of scrolling and other animations. In this article, we discuss the various loading metrics, animation, and responsiveness metrics, along with best practices to improve user perception, if not the actual timings.

        Web performance basics
        In addition to the front end components of HTML, CSS, JavaScript, and media files, there are features that can make applications slower and features that can make applications subjectively and objectively faster. There are many APIs, developer tools, best practices, and bad practices relating to web performance. Here we'll introduce many of these features ad the basic level and provide links to deeper dives to improve performance for each topic.
        @@ -41,15 +41,15 @@

        Introductory modules

        Multimedia: images and video
        The lowest hanging fruit of web performance is often media optimization. Serving different media files based on each user agent's capability, size, and pixel density is possible. Additional tips like removing audio tracks from background videos can improve performance even further. In this article we discuss the impact video, audio, and image content has on performance, and the methods to ensure that impact is as minimal as possible.
        Responsive Images
        -
        While optimizing images is vital to high-performance media-rich user experiences, ensuring that images are sized appropriately for the devices that download them is especially important. In this article, we'll discuss the role of native browser features such as the <picture> element and the srcset attribute in efficient image delivery, and how you can use them with confidence.
        +
        While optimizing images is vital to high-performance media-rich user experiences, ensuring that images are sized appropriately for the devices that download them is especially important. In this article, we'll discuss the role of native browser features such as the <picture> element and the srcset attribute in efficient image delivery, and how you can use them with confidence.
        Alternative media formats
        -
        When it comes to images and videos, there are more formats than you're likely aware of. Some of these formats can take your highly optimized media-rich pages even further by offering additional reductions in file size. In this guide we'll discuss some alternative media formats, how to use them responsibly so that non-supporting browsers don't get left out in the cold, and some advanced guidance on transcoding your existing assets to them.
        +
        When it comes to images and videos, there are more formats than you're likely aware of. Some of these formats can take your highly optimized media-rich pages even further by offering additional reductions in file size. In this guide we'll discuss some alternative media formats, how to use them responsibly so that non-supporting browsers don't get left out in the cold, and some advanced guidance on transcoding your existing assets to them.
        CSS performance features
        CSS may be a less important optimization focus for improved performance, but there are some CSS features that impact performance more than others. In this article we look at some CSS properties that impact performance and suggested ways of handling styles to ensure performance is not negatively impacted.
        JavaScript performance best practices
        JavaScript, when used properly, can allow for interactive and immersive web experiences — or it can significantly harm download time, render time, in-app performance, battery life, and user experience. This article outlines some JavaScript best practices that should be considered to ensure even complex content is as performant as possible.
        Web font performance
        -
        An often overlooked aspect of performance landscape are web fonts. Web fonts are more prominent in web design than ever, yet many developers simply embed them from a third party service and think nothing of it. In this article, we'll covers methods for getting your font files as small as possible with efficient file formats and sub setting. From there, we'll go on to talk about how browsers text, and how you can use CSS and JavaScript features to ensure your fonts render quickly, and with minimal disruption to the user experience.
        +
        An often overlooked aspect of performance landscape are web fonts. Web fonts are more prominent in web design than ever, yet many developers simply embed them from a third party service and think nothing of it. In this article, we'll covers methods for getting your font files as small as possible with efficient file formats and sub setting. From there, we'll go on to talk about how browsers text, and how you can use CSS and JavaScript features to ensure your fonts render quickly, and with minimal disruption to the user experience.
        @@ -61,9 +61,7 @@

        Advanced Modules

        Populating the page
        -
        An HTTP request is made and, hopefully, a few seconds later, the site appears. Displaying the content involves executing JavaScript, possibly modifying the DOM, calculating styles, calculating layout, and finally rendering the content, which involves painting and compositing, and can involve GPU acceleration on a separate thread.
        -
        Performance bottlenecks
        -
        +
        An HTTP request is made and, hopefully, a few seconds later, the site appears. Displaying the content involves executing JavaScript, possibly modifying the DOM, calculating styles, calculating layout, and finally rendering the content, which involves painting and compositing, and can involve GPU acceleration on a separate thread.
        Understanding latency

        Latency is the amount of time it takes between the browser making a request for a resource, and the browser receiving back the first byte of the resource requested. This article explains what latency is, how it impacts performance, and how to measure and improve latency.

        @@ -83,25 +81,25 @@

        Advanced Modules

        Profiling with the built-in profiler
        Learn how to profile app performance with Firefox's built-in profiler.
        Reading performance charts
        -
        Developer tools provide information on performance, memory, and network requests. Knowing how to read  waterfall charts, call trees, traces, flame charts , and allocations in your browser developer tools will help you understand waterfall and flame charts in other performance tools.
        +
        Developer tools provide information on performance, memory, and network requests. Knowing how to read waterfall charts, call trees, traces, flame charts , and allocations in your browser developer tools will help you understand waterfall and flame charts in other performance tools.
        CSS and JavaScript animation performance
        -
        Animations are critical for a pleasurable user experience. This article discusses the performance differences between CSS and JavaScript-based animations.
        +
        Animations are critical for a pleasurable user experience. This article discusses the performance differences between CSS and JavaScript-based animations.
        Analyzing JavaScript bundles
        -
        No doubt, JavaScript is a big part of modern web development. While you should always strive to reduce the amount of JavaScript you use in your applications, it can be difficult to know where to start. In this guide, we'll show you how to analyze your application's script bundles, so you know what you're using, as well how to detect if there are duplicated scripts between bundles in your app.
        +
        No doubt, JavaScript is a big part of modern web development. While you should always strive to reduce the amount of JavaScript you use in your applications, it can be difficult to know where to start. In this guide, we'll show you how to analyze your application's script bundles, so you know what you're using, as well how to detect if there are duplicated scripts between bundles in your app.
        Lazy-loading JavaScript with dynamic imports
        When developers hear the term "lazy loading", they immediately think of below-the-fold imagery that loads when it scrolls into the viewport. But did you know you can lazy load JavaScript as well? In this guide we'll talk about the dynamic import() statement, which is a feature in modern browsers that loads a JavaScript module on demand. Of course, since this feature isn't available everywhere, we'll also show you how you can configure your tooling to use this feature in a widely compatible fashion.
        Controlling resource delivery with resource hints
        -
        Browsers often know better than we do when it comes to resource prioritization and delivery—but they're far from clairvoyant. Native browser features enable us to hint to the browser when it should connect to another server, or preload a resource before the browser knows it ever needs it. When used judiciously, this can make fast experience seem even faster. In this article, we cover native browser features like rel=preconnect, rel=dns-prefetch, rel=prefetch, and rel=preload, and how to use them to your advantage.
        +
        Browsers often know better than we do when it comes to resource prioritization and delivery—but they're far from clairvoyant. Native browser features enable us to hint to the browser when it should connect to another server, or preload a resource before the browser knows it ever needs it. When used judiciously, this can make fast experience seem even faster. In this article, we cover native browser features like rel=preconnect, rel=dns-prefetch, rel=prefetch, and rel=preload, and how to use them to your advantage.

        See Also

        {{LandingPageListSubpages}}

        diff --git a/files/zh-cn/learn/performance/perceived_performance/index.html b/files/zh-cn/learn/performance/perceived_performance/index.html index 1321ffa78c228a..3e5b6b5f89ed51 100644 --- a/files/zh-cn/learn/performance/perceived_performance/index.html +++ b/files/zh-cn/learn/performance/perceived_performance/index.html @@ -11,7 +11,7 @@
        {{PreviousMenuNext("Learn/Performance/what_is_web_performance", "Learn/Performance/Measuring_performance", "Learn/Performance")}}
        -

        感知性能 是用户对网站速度的感受。用户如何看待性能与任何客观统计数据一样重要,甚至更重要,但它是主观的,并且不易测量。感知性能是用户视角,而不是指标。

        +

        感知性能 是用户对网站速度的感受。用户如何看待性能与任何客观统计数据一样重要,甚至更重要,但它是主观的,并且不易测量。感知性能是用户视角,而不是指标。

        本文简要介绍了感知性能,着眼于用户的感知,以及可以使用哪些客观工具来衡量这类主观因素。

        @@ -19,7 +19,7 @@
      预备知识:基础计算机知识,基本软件安装, 客户端 web 技术的基础知识基础计算机知识,基本软件安装客户端 web 技术的基础知识
      目标
      -

      性能是关于用户视角的。 How fast a website feels like it's loading and rendering has a greater impact on user experience than how fast the website actually loads and renders. Even if an operation is going to take a long time (because of latency or or inavailability of the main thread), it is possible to keep the user engaged while they wait by showing a loading spinner, or a series of useful hints and tips (or jokes, or whatever else you think might be appropriate). Such an approach is much better than just showing nothing, which will make it feel like it is taking a lot longer and possibly lead to your users thinking it is broken and giving up.

      +

      性能是关于用户视角的。 How fast a website feels like it's loading and rendering has a greater impact on user experience than how fast the website actually loads and renders. Even if an operation is going to take a long time (because of latency or or inavailability of the main thread), it is possible to keep the user engaged while they wait by showing a loading spinner, or a series of useful hints and tips (or jokes, or whatever else you think might be appropriate). Such an approach is much better than just showing nothing, which will make it feel like it is taking a lot longer and possibly lead to your users thinking it is broken and giving up.

      感知性能

      @@ -36,7 +36,7 @@

      感知性能

      There is no unicorn metric that can measure what the user feels, but metrics are useful in guaging improvements (and regressions). Relevant measurements include first meaningful paint (FMP), largest contentful paint (LCP), time to interactive (TTI), render start, DOM interactive, and speed index.

      -

      First paint is reported by the browser and provides the time, in ms, of when the page starts changing; but this change can be a simple background color update or something even less noticable. It doesn’t indicate completeness and may report a time when nothing visible is painted. First Contentful Paint (FCP) reports the time when the browser first rendered anything of signifigance, be that text, foreground or background image, or a canvas or SVG; capturing the very beginning of the loading experience. But, just because there's content, doesn't mean it's useful content or that the user has content to consume. The First Meaningful Paint, or FMP, is the when content appears on the screen that is actually meaningful; which is a better metric for user-perceived loading experience, but still not ideal. Largest contentful paint (LCP) metric, definited in the Largest Contentful Paint API, reports the render time of the largest content element visible in the viewport.

      +

      First paint is reported by the browser and provides the time, in ms, of when the page starts changing; but this change can be a simple background color update or something even less noticable. It doesn’t indicate completeness and may report a time when nothing visible is painted. First Contentful Paint (FCP) reports the time when the browser first rendered anything of signifigance, be that text, foreground or background image, or a canvas or SVG; capturing the very beginning of the loading experience. But, just because there's content, doesn't mean it's useful content or that the user has content to consume. The First Meaningful Paint, or FMP, is the when content appears on the screen that is actually meaningful; which is a better metric for user-perceived loading experience, but still not ideal. Largest contentful paint (LCP) metric, definited in the Largest Contentful Paint API, reports the render time of the largest content element visible in the viewport.

      Speed index is also used to approximate perceived performance: it measures the average time for pixels on the visible screen to be painted. It doesn't account for jitter, nor does it weight which content important to a user more highly, so it's not a perfect metric.

      @@ -52,17 +52,17 @@

      提升感知性能

      There are tips and tricks to follow. Some of these quick tips have full articles if you want to dive deeper.

      -

      Displaying content, or at least some part of the page with an indication that content is loading, as quickly as possible, is essential to improving perceived performance. For example, because page render is blocked by loading and parsing CSS and JavaScript, minimizing the amount of CSS and JS that needs to be loaded on initially will have a major impact on improving perceived performance. Even though the bytes might be the same, not blocking the page from rendering makes the load feel faster.

      +

      Displaying content, or at least some part of the page with an indication that content is loading, as quickly as possible, is essential to improving perceived performance. For example, because page render is blocked by loading and parsing CSS and JavaScript, minimizing the amount of CSS and JS that needs to be loaded on initially will have a major impact on improving perceived performance. Even though the bytes might be the same, not blocking the page from rendering makes the load feel faster.

      这里有一些技巧有助于提升性能:

      最小化初始加载

      -

      要提升可感知性能,请最小化页面初始加载。换句话说,首先下载将实际显示的所有内容,但仅下载实际使用的内容,然后下载其余内容。因为最终要下载所有资源,所以实际上资源总量并没有改善——实际上还需要增加一些代码。但因为暂不需要的资源被延后加载了,所以用户并不会感知资源量的增加,而会感受到页面加载更快了。 

      +

      要提升可感知性能,请最小化页面初始加载。换句话说,首先下载将实际显示的所有内容,但仅下载实际使用的内容,然后下载其余内容。因为最终要下载所有资源,所以实际上资源总量并没有改善——实际上还需要增加一些代码。但因为暂不需要的资源被延后加载了,所以用户并不会感知资源量的增加,而会感受到页面加载更快了。

      为了最大程度地减少初始加载资源,请从内容中分离交互式功能,以便优先加载初始化时所需的可见内容——文本、样式和图像。延迟加载其余资源。

      -

      不要加载初始页面未使用或看不到的图像或脚本,而在页面可用后延时加载,或在需要使用时按需加载。 在初始页面加载之后加载其他资源可提高感知性能。 在初始请求中加载基本数据,并仅根据需要逐步加载功能部件和数据,有助于改善低带宽和低规格硬件的体验。

      +

      不要加载初始页面未使用或看不到的图像或脚本,而在页面可用后延时加载,或在需要使用时按需加载。 在初始页面加载之后加载其他资源可提高感知性能。 在初始请求中加载基本数据,并仅根据需要逐步加载功能部件和数据,有助于改善低带宽和低规格硬件的体验。

      此外,您应该优化需加载的资源。图片和视频应以最佳格式、压缩后的大小和正确尺寸进行投放。

      @@ -72,7 +72,7 @@

      防止内容跳转和其他重排

      避免字体文件延迟 -

      Font use can both help and harm user experience. Selecting the right fonts is an art form, and can greatly improve the user experience. Fonts can also harm user experience, especially if the fonts used need to be imported, and if the importing is not optimal, or if Comic Sans is used (kidding).  Flicker of unstyled text and missing text both harm performance.

      +

      Font use can both help and harm user experience. Selecting the right fonts is an art form, and can greatly improve the user experience. Fonts can also harm user experience, especially if the fonts used need to be imported, and if the importing is not optimal, or if Comic Sans is used (kidding). Flicker of unstyled text and missing text both harm performance.

      Make fallback fonts the same size and weight so that when fonts load the page change is less noticeable.

      diff --git a/files/zh-cn/learn/performance/web_performance_basics/index.html b/files/zh-cn/learn/performance/web_performance_basics/index.html index 94c6541c222d3c..b0690111cedd6d 100644 --- a/files/zh-cn/learn/performance/web_performance_basics/index.html +++ b/files/zh-cn/learn/performance/web_performance_basics/index.html @@ -11,34 +11,34 @@

      最佳实践

    • 从学习浏览器的关键渲染路径开始。了解这些会帮助你通晓如何提升浏览器的性能。
    • 使用resource hints例如rel=preconnect, rel=dns-prefetch, rel=prefetch, and rel=preload
    • 压缩 Js 代码至最小。只为当前页面加载需要使用到的 js 代码
    • -
    • CSS性能因素 
    • +
    • CSS性能因素
    • 在你的服务器(或者 CDN)上使用 HTTP/2协议
    • -
    •  使用 CDN 托管静态资源,这样可以显著减少加载时间
    • -
    •  使用gzipBrotli 或者 Zopfli压缩您的资源
    • -
    •  图片优化(如果可以,尽可能使用 css 动画或者 svg)
    • -
    •  在超出应用视口范围的部分使用懒加载,如果你这么做了,为 SEO 制定一个后备计划(例如为 bot traffic 渲染整个页面)
    • +
    • 使用 CDN 托管静态资源,这样可以显著减少加载时间
    • +
    • 使用gzip, Brotli 或者 Zopfli压缩您的资源
    • +
    • 图片优化(如果可以,尽可能使用 css 动画或者 svg)
    • +
    • 在超出应用视口范围的部分使用懒加载,如果你这么做了,为 SEO 制定一个后备计划(例如为 bot traffic 渲染整个页面)

    工具

    • 学习使用Firefox Dev Tools来分析您的网站。
    • -
    • Pagespeed Insights 可以分析您的页面并且给出一些通用的建议来提升网站性能。
    • -
    • Lighthouse 可以给您一份有关您网站的包括性能,SEO 和可访问性等多个方面的详细分类。
    • +
    • Pagespeed Insights 可以分析您的页面并且给出一些通用的建议来提升网站性能。
    • +
    • Lighthouse 可以给您一份有关您网站的包括性能,SEO 和可访问性等多个方面的详细分类。
    • 使用 Webpagetest.org检测页面在不同真实设备类型和地点时候的速度。trics.
    • -
    • 定义一个 绩效预算 performance budget)。
    • +
    • 定义一个绩效预算 performance budget)。

    APIs

    不该做的事(坏的实践)

      -
    •   将任何东西都下载下来
    • -
    •   使用未经压缩的媒体文件
    • +
    • 将任何东西都下载下来
    • +
    • 使用未经压缩的媒体文件
    diff --git a/files/zh-tw/learn/performance/index.html b/files/zh-tw/learn/performance/index.html index 8dc477b3eb9e27..48d752747cbb62 100644 --- a/files/zh-tw/learn/performance/index.html +++ b/files/zh-tw/learn/performance/index.html @@ -78,8 +78,6 @@

    Advanced Modules

    Populating the page
    An HTTP request is made and, hopefully, a few seconds later, the site appears. Displaying the content involves executing JavaScript, possibly modifying the DOM, calculating styles, calculating layout, and finally rendering the content, which involves painting and compositing, and can involve GPU acceleration on a separate thread.
    -
    Performance bottlenecks
    -
    Understanding latency

    Latency is the amount of time it takes between the browser making a request for a resource, and the browser receiving back the first byte of the resource requested. This article explains what latency is, how it impacts performance, and how to measure and improve latency.

    @@ -111,7 +109,6 @@

    Advanced Modules

    Controlling resource delivery with resource hints
    Browsers often know better than we do when it comes to resource prioritization and delivery—but they're far from clairvoyant. Native browser features enable us to hint to the browser when it should connect to another server, or preload a resource before the browser knows it ever needs it. When used judiciously, this can make fast experience seem even faster. In this article, we cover native browser features like rel=preconnect, rel=dns-prefetch, rel=prefetch, and rel=preload, and how to use them to your advantage.
    -
    DNS-Prefetch

    See Also

    diff --git a/files/zh-tw/learn/performance/multimedia/index.html b/files/zh-tw/learn/performance/multimedia/index.html index 696a57cb5fa0cc..772d8f7d9cea04 100644 --- a/files/zh-tw/learn/performance/multimedia/index.html +++ b/files/zh-tw/learn/performance/multimedia/index.html @@ -7,7 +7,7 @@

    媒體,換句話說就是圖像跟影片,平均占了網站超過70%的下載流量。以下載的效能來考慮的話,減少媒體數量和檔案大小是一個簡單可以實現的目標。 這篇文章聚焦在優化圖像跟影片來改善網站的效能。

    -

    這是一篇進階的在 web 上優化多媒體的介紹,包含基本的原則還有技巧,想了更多的話,可以看 https://images.guide

    +

    備註: 這是一篇進階的在 web 上優化多媒體的介紹,包含基本的原則還有技巧,想了更多的話,可以看 https://images.guide

    為什麼要優化你的多媒體

    From bc8582987ba2f0e4c11158493821e07f162f1aef Mon Sep 17 00:00:00 2001 From: allo Date: Tue, 19 Jul 2022 08:17:14 +0800 Subject: [PATCH 095/100] move to .md for learn/performance --- files/zh-cn/learn/performance/css/{index.html => index.md} | 0 files/zh-cn/learn/performance/{index.html => index.md} | 0 .../performance/perceived_performance/{index.html => index.md} | 0 .../performance/web_performance_basics/{index.html => index.md} | 0 files/zh-tw/learn/performance/{index.html => index.md} | 0 files/zh-tw/learn/performance/multimedia/{index.html => index.md} | 0 6 files changed, 0 insertions(+), 0 deletions(-) rename files/zh-cn/learn/performance/css/{index.html => index.md} (100%) rename files/zh-cn/learn/performance/{index.html => index.md} (100%) rename files/zh-cn/learn/performance/perceived_performance/{index.html => index.md} (100%) rename files/zh-cn/learn/performance/web_performance_basics/{index.html => index.md} (100%) rename files/zh-tw/learn/performance/{index.html => index.md} (100%) rename files/zh-tw/learn/performance/multimedia/{index.html => index.md} (100%) diff --git a/files/zh-cn/learn/performance/css/index.html b/files/zh-cn/learn/performance/css/index.md similarity index 100% rename from files/zh-cn/learn/performance/css/index.html rename to files/zh-cn/learn/performance/css/index.md diff --git a/files/zh-cn/learn/performance/index.html b/files/zh-cn/learn/performance/index.md similarity index 100% rename from files/zh-cn/learn/performance/index.html rename to files/zh-cn/learn/performance/index.md diff --git a/files/zh-cn/learn/performance/perceived_performance/index.html b/files/zh-cn/learn/performance/perceived_performance/index.md similarity index 100% rename from files/zh-cn/learn/performance/perceived_performance/index.html rename to files/zh-cn/learn/performance/perceived_performance/index.md diff --git a/files/zh-cn/learn/performance/web_performance_basics/index.html b/files/zh-cn/learn/performance/web_performance_basics/index.md similarity index 100% rename from files/zh-cn/learn/performance/web_performance_basics/index.html rename to files/zh-cn/learn/performance/web_performance_basics/index.md diff --git a/files/zh-tw/learn/performance/index.html b/files/zh-tw/learn/performance/index.md similarity index 100% rename from files/zh-tw/learn/performance/index.html rename to files/zh-tw/learn/performance/index.md diff --git a/files/zh-tw/learn/performance/multimedia/index.html b/files/zh-tw/learn/performance/multimedia/index.md similarity index 100% rename from files/zh-tw/learn/performance/multimedia/index.html rename to files/zh-tw/learn/performance/multimedia/index.md From bb58f8707998879f3562fce5e8f5f8e9a4a6e2e9 Mon Sep 17 00:00:00 2001 From: allo Date: Tue, 19 Jul 2022 08:22:12 +0800 Subject: [PATCH 096/100] convert to markdown for learn/performance --- files/zh-cn/learn/performance/css/index.md | 42 ++-- files/zh-cn/learn/performance/index.md | 176 +++++++--------- .../perceived_performance/index.md | 128 ++++++------ .../web_performance_basics/index.md | 70 +++---- files/zh-tw/learn/performance/index.md | 190 ++++++++---------- .../learn/performance/multimedia/index.md | 150 +++++++------- 6 files changed, 357 insertions(+), 399 deletions(-) diff --git a/files/zh-cn/learn/performance/css/index.md b/files/zh-cn/learn/performance/css/index.md index 84494c175f22d7..105e9c80ff3b09 100644 --- a/files/zh-cn/learn/performance/css/index.md +++ b/files/zh-cn/learn/performance/css/index.md @@ -3,40 +3,46 @@ title: CSS performance optimization slug: Learn/Performance/CSS translation_of: Learn/Performance/CSS --- -

    页面在样式没有渲染完毕的情况下被绘制,在样式渲染完毕后又被刷新,这大概是很糟糕的用户体验。因此,除非浏览器知道当前不需要 该 CSS,否则 该 CSS 将阻止渲染。浏览器只会在下载 CSS 和构建 CSSOM 之后绘制页面。浏览器遵循特定的渲染路径:绘制 paint 仅在布局 layout 之后进行,布局 layout 则在创建渲染树 render tree 之后进行,创建渲染树则需要在 DOM 和 CSSOM 树解析完成后进行。为了优化 CSSOM 的构造,请删除不必要的样式,对 CSS 进行最小化,压缩和缓存,并将页面加载时不需要的 CSS 拆分为其他文件,以减少 CSS 渲染阻塞。

    +页面在样式没有渲染完毕的情况下被绘制,在样式渲染完毕后又被刷新,这大概是很糟糕的用户体验。因此,除非浏览器知道当前不需要 该 CSS,否则 该 CSS 将阻止渲染。浏览器只会在下载 CSS 和构建 CSSOM 之后绘制页面。浏览器遵循特定的渲染路径:绘制 paint 仅在布局 layout 之后进行,布局 layout 则在创建渲染树 render tree 之后进行,创建渲染树则需要在 DOM 和 CSSOM 树解析完成后进行。为了优化 CSSOM 的构造,请删除不必要的样式,对 CSS 进行最小化,压缩和缓存,并将页面加载时不需要的 CSS 拆分为其他文件,以减少 CSS 渲染阻塞。 -

    阻塞渲染优化

    +### 阻塞渲染优化 -

    CSS 可以使用媒体查询将样式应用在特定条件下。媒体查询对于响应式 Web 设计非常重要,可以帮助我们优化关键渲染路径。浏览器会阻塞渲染,直到它解析完全部的样式,但不会阻塞渲染它认为不会使用的样式,例如打印样式表。通过基于媒体查询将 CSS 分成多个文件,可以防止在下载未使用的 CSS 期间阻止渲染。为了创建非阻塞 CSS 链接,将不会立即使用的样式(例如打印样式)移动到单独的文件中,将 <link> 添加到 HTML 中,并添加媒体查询,在这种情况下说明它是打印样式表。

    +CSS 可以使用媒体查询将样式应用在特定条件下。媒体查询对于响应式 Web 设计非常重要,可以帮助我们优化关键渲染路径。浏览器会阻塞渲染,直到它解析完全部的样式,但不会阻塞渲染它认为不会使用的样式,例如打印样式表。通过基于媒体查询将 CSS 分成多个文件,可以防止在下载未使用的 CSS 期间阻止渲染。为了创建非阻塞 CSS 链接,将不会立即使用的样式(例如打印样式)移动到单独的文件中,将 [``](/en-US/docs/Web/HTML/Element/link) 添加到 HTML 中,并添加媒体查询,在这种情况下说明它是打印样式表。 -
    <link rel="stylesheet" href="styles.css"> <!-- blocking -->
    -<link rel="stylesheet" href="print.css" media="print"> <!-- not blocking -->
    -<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 480px)"> <!-- not blocking on large screens -->
    +```html + + + +``` -

    默认情况下,浏览器假设每个指定的样式表都是阻塞渲染的。通过添加 media 属性附加媒体查询,告诉浏览器何时应用样式表。当浏览器看到一个它知道只会用于特定场景的样式表时,它仍会下载样式,但不会阻塞渲染。通过将 CSS 分成多个文件,主要的 阻塞渲染 文件(本例中为 styles.css)的大小变得更小,从而减少了渲染被阻塞的时间。

    +默认情况下,浏览器假设每个指定的样式表都是阻塞渲染的。通过添加 media 属性附加媒体查询,告诉浏览器何时应用样式表。当浏览器看到一个它知道只会用于特定场景的样式表时,它仍会下载样式,但不会阻塞渲染。通过将 CSS 分成多个文件,主要的 阻塞渲染 文件(本例中为 `styles.css`)的大小变得更小,从而减少了渲染被阻塞的时间。 -

    在 GPU 上呈现动画

    +### 在 GPU 上呈现动画 -

    浏览器针对处理 CSS 动画和不会很好地触发重排(因此也导致重新绘制)的动画属性进行了优化。为了提高性能,可以将被动画化的节点从主线程移到 GPU 上。将导致合成的属性包括 3D transforms (transform: translateZ(), rotate3d(),etc.),animating transform 和 opacity, position: fixedwill-change,和 filter。一些元素,例如 <video>, <canvas><iframe>,也位于各自的图层上。 将元素提升为图层(也称为合成)时,动画转换属性将在 GPU 中完成,从而改善性能,尤其是在移动设备上。

    +浏览器针对处理 CSS 动画和不会很好地触发重排(因此也导致重新绘制)的动画属性进行了优化。为了提高性能,可以将被动画化的节点从主线程移到 GPU 上。将导致合成的属性包括 3D transforms ([`transform: translateZ()`](/en-US/docs/Web/CSS/transform), [`rotate3d()`](/en-US/docs/Web/CSS/transform-function/rotate3d),etc.),animating transform 和 [`opacity`](/en-US/docs/Web/CSS/opacity), [`position: fixed`](/en-US/docs/Web/CSS/position),[`will-change`](/en-US/docs/Web/CSS/will-change),和 [`filter`](/en-US/docs/Web/CSS/filter)。一些元素,例如 [`