{"id":322716,"date":"2021-05-07T09:00:11","date_gmt":"2021-05-07T09:00:11","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=322716"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=322716","title":{"rendered":"\u041c\u0438\u043a\u0440\u043e\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u044b \u0438 \u0432\u0438\u0434\u0436\u0435\u0442\u044b \u0432 2021-\u043c. \u0414\u043e\u043a\u043b\u0430\u0434 \u042f\u043d\u0434\u0435\u043a\u0441\u0430"},"content":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\">\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043e \u043c\u0438\u043a\u0440\u043e\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430\u0445 \u0438 \u043e \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c\u044b\u0445 \u0432\u0438\u0434\u0436\u0435\u0442\u0430\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435, \u043f\u043e \u0441\u0443\u0442\u0438, \u0431\u044b\u043b\u0438 \u043f\u0440\u0435\u0434\u0448\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u0438\u043a\u0430\u043c\u0438 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438 \u043c\u0438\u043a\u0440\u043e\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u043e\u0432. \u0412 \u0434\u043e\u043a\u043b\u0430\u0434\u0435 \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u043b \u043e \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u0445 \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u0432\u0438\u0434\u0436\u0435\u0442\u044b \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u043e\u0431 \u0438\u0445 \u043f\u043b\u044e\u0441\u0430\u0445 \u0438 \u043c\u0438\u043d\u0443\u0441\u0430\u0445 \u0441 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f \u0438\u0437\u043e\u043b\u044f\u0446\u0438\u0438 \u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u043a\u043e\u0434\u0430, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043e \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u0445 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u0432\u0438\u0434\u0436\u0435\u0442\u044b \u0432 \u043c\u0438\u043a\u0440\u043e\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u043d\u043e\u0439 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0435.<\/p>\n<div class=\"oembed\"><iframe allowfullscreen id=\"60940000182877b5cb65a668\" src=\"https:\/\/embedd.srv.habr.com\/iframe\/60940000182877b5cb65a668\"><\/iframe><\/div>\n<p>\u2014 \u0412\u0441\u0435\u043c \u043f\u0440\u0438\u0432\u0435\u0442! \u041c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u041b\u0435\u0448\u0430. \u042f \u0445\u043e\u0447\u0443 \u0441 \u0432\u0430\u043c\u0438 \u0441\u0435\u0433\u043e\u0434\u043d\u044f \u043e\u0431\u0441\u0443\u0434\u0438\u0442\u044c \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u00ab\u043f\u0435\u0440\u0435\u0445\u0430\u0439\u043f\u043b\u0435\u043d\u043d\u0443\u044e\u00bb \u0442\u0435\u043c\u0443 \u2014 \u043c\u0438\u043a\u0440\u043e\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u044b. <br \/>  <a name=\"habracut\"><\/a><br \/>  \u0415\u0441\u043b\u0438 \u043a\u0442\u043e-\u0442\u043e \u043d\u0435 \u0437\u043d\u0430\u043a\u043e\u043c \u0441 \u044d\u0442\u043e\u0439 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0435\u0439, \u043e\u043d\u0430 \u0431\u0435\u0440\u0435\u0442 \u0441\u0432\u043e\u0435 \u043d\u0430\u0447\u0430\u043b\u043e \u043e\u0442 \u043c\u0438\u043a\u0440\u043e\u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432. \u041c\u0438\u043a\u0440\u043e\u0441\u0435\u0440\u0432\u0438\u0441\u044b \u2014 \u044d\u0442\u043e \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u043d\u0430\u0448 \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043c\u043e\u043d\u043e\u043b\u0438\u0442\u043d\u044b\u0439 \u0431\u044d\u043a\u0435\u043d\u0434 \u0434\u0435\u043b\u0438\u043c \u043d\u0430 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0435 \u043a\u0443\u0441\u043e\u0447\u043a\u0438. \u041a\u0430\u0436\u0434\u044b\u0439 \u043a\u0443\u0441\u043e\u0447\u0435\u043a \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0438 \u0434\u0435\u043f\u043b\u043e\u0438\u0442\u0441\u044f \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432. <br \/>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/u_\/bl\/66\/u_bl66ipb5taudygihibvtak2uu.jpeg\"><br \/>  \u041c\u0438\u043a\u0440\u043e\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u044b \u2014 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u0435 \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u0435 \u044d\u0442\u043e\u0439 \u0438\u0434\u0435\u0438. \u041c\u044b \u043d\u0430\u0448\u0435 \u043c\u043e\u043d\u043e\u043b\u0438\u0442\u043d\u043e\u0435 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0442\u0430\u043a\u0436\u0435 \u0440\u0430\u0437\u0434\u0435\u043b\u044f\u0435\u043c \u043d\u0430 \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u0435 \u043a\u0443\u0441\u043a\u0438, \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u0435 \u0441\u0435\u0440\u0432\u0438\u0441\u044b. \u041a\u0430\u0436\u0434\u044b\u0439 \u0441\u0435\u0440\u0432\u0438\u0441 \u0434\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439. \u042d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043a\u043e\u043c\u0430\u043d\u0434\u0430, \u0443 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434 \u0438 \u0431\u044d\u043a\u0435\u043d\u0434.<br \/>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/fx\/io\/up\/fxioup-6hou8jdu74hcfsz9mcvk.jpeg\"><br \/>  \u0418\u0434\u0435\u044f \u043c\u0438\u043a\u0440\u043e\u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432 \u0438 \u043c\u0438\u043a\u0440\u043e\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u043e\u0432 \u043d\u0435 \u0442\u043e \u0447\u0442\u043e\u0431\u044b \u043e\u0447\u0435\u043d\u044c \u043d\u043e\u0432\u0430\u044f. \u0412 \u042f\u043d\u0434\u0435\u043a\u0441\u0435 \u043a\u043e\u0433\u0434\u0430-\u0442\u043e \u0434\u0430\u0432\u043d\u043e \u0431\u044b\u043b \u043f\u0440\u043e\u0435\u043a\u0442 \u042f\u043d\u0434\u0435\u043a\u0441.\u0412\u0438\u0434\u0436\u0435\u0442\u044b: \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0438\u0437 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432 \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u0441\u0435\u0431\u0435 \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0443\u044e \u0433\u043b\u0430\u0432\u043d\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043a\u0443 \u042f\u043d\u0434\u0435\u043a\u0441\u0430. \u0412 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u0447\u043a\u0435 \u0431\u044b\u043b\u0438 \u0432\u0438\u0434\u0436\u0435\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u0435\u043b\u0430\u043b\u0438\u0441\u044c \u043a\u0430\u043a \u043d\u0430\u043c\u0438, \u0442\u0430\u043a \u0438 \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u043c\u0438 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u044f\u043c\u0438. <\/p>\n<p>  \u041c\u043d\u0435 \u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f \u0434\u0443\u043c\u0430\u0442\u044c, \u0447\u0442\u043e \u043c\u0438\u043a\u0440\u043e\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u044b \u2014 \u044d\u0442\u043e \u0442\u0430\u043a\u0438\u0435 \u0432\u0438\u0434\u0436\u0435\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0435\u0440\u0435\u043f\u0440\u0438\u0434\u0443\u043c\u0430\u043b\u0438 \u0437\u0443\u043c\u0435\u0440\u044b. \u0420\u0430\u0437\u043d\u0438\u0446\u0430 \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u0431\u043e\u043b\u044c\u0448\u0430\u044f. \u0412\u0438\u0434\u0436\u0435\u0442 \u2014 \u044d\u0442\u043e \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0439 \u043a\u0443\u0441\u043e\u0447\u0435\u043a \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043a\u0443\u0434\u0430-\u0442\u043e \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u0442\u0441\u044f. \u0410 \u0438\u0434\u0435\u044f \u043c\u0438\u043a\u0440\u043e\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u043e\u0432 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043c\u044b \u0432\u0441\u0451 \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u043c \u0438\u0437 \u0442\u0430\u043a\u0438\u0445 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432. <br \/>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/5w\/og\/bd\/5wogbdhuivej2o-arxfvi0ujs4w.jpeg\"><br \/>  \u0412 \u042f\u043d\u0434\u0435\u043a\u0441\u0435 \u044d\u0442\u0430 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u044f \u0442\u043e\u0436\u0435 \u043d\u0430\u0448\u043b\u0430 \u0441\u0432\u043e\u0435 \u043c\u0435\u0441\u0442\u043e. \u041e\u0434\u0438\u043d \u0438\u0437 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u0442\u0430\u043a\u043e\u0439 \u0438\u0434\u0435\u0438 \u2014 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u043e\u0439 \u0432\u044b\u0434\u0430\u0447\u0438. \u0425\u043e\u0442\u044f \u0432\u0430\u043c \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u044d\u0442\u043e \u043e\u0434\u043d\u0430 \u0431\u043e\u043b\u044c\u0448\u0430\u044f \u043c\u043e\u043d\u043e\u043b\u0438\u0442\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430, \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u043e\u043d\u0430 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u0445 \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u043a\u043e\u043c\u0430\u043d\u0434\u0430\u043c\u0438. \u0412\u0438\u0434\u0436\u0435\u0442\u044b \u044d\u0442\u0438 \u0443 \u043d\u0430\u0441 \u043d\u0430\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043a\u043e\u043b\u0434\u0443\u043d\u0449\u0438\u043a\u0430\u043c\u0438. <\/p>\n<p>  \u042f \u0437\u0430 \u0432\u0440\u0435\u043c\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0432 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438 \u0442\u043e\u0436\u0435 \u0443\u0441\u043f\u0435\u043b \u043f\u043e\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043d\u0430\u0434 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432 \u0446\u0435\u043b\u043e\u043c \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0432 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438 \u043c\u0438\u043a\u0440\u043e\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u043e\u0432. (&#8230;) C\u0435\u0439\u0447\u0430\u0441 \u044f \u0437\u0430\u043d\u0438\u043c\u0430\u044e\u0441\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u043e\u0439 \u0432\u0438\u0434\u0435\u043e\u043f\u043b\u0435\u0435\u0440\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b \u0443\u0436\u0435 \u0432\u0438\u0434\u0435\u043b\u0438 \u043d\u0430 \u0441\u043b\u0430\u0439\u0434\u0435. \u042d\u0442\u043e \u0432\u0438\u0434\u0436\u0435\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442 \u0432\u0438\u0434\u0435\u043e \u0438 \u0442\u0440\u0430\u043d\u0441\u043b\u044f\u0446\u0438\u0438.<\/p>\n<p>  \u0415\u0432\u0430\u043d\u0433\u0435\u043b\u0438\u0441\u0442\u043e\u043c \u0438\u0434\u0435\u0438 \u043c\u0438\u043a\u0440\u043e\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u043e\u0432 \u044f \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e \u043d\u0435 \u044f\u0432\u043b\u044f\u044e\u0441\u044c. \u0423 \u044d\u0442\u043e\u0439 \u0438\u0434\u0435\u0438, \u043a\u0430\u043a \u0438 \u0443 \u0432\u0441\u0435\u0445, \u0435\u0441\u0442\u044c \u0441\u0432\u043e\u0438 \u043f\u043b\u044e\u0441\u044b \u0438 \u043c\u0438\u043d\u0443\u0441\u044b. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043c\u044b \u0441 \u0432\u0430\u043c\u0438 \u043e \u043d\u0438\u0445 \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c. <br \/>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/en\/kk\/th\/enkkthlxala02o1kcx1tvnd4cau.jpeg\"><br \/>  \u041a\u0430\u043a\u0438\u0435 \u0435\u0441\u0442\u044c \u0431\u043e\u043d\u0443\u0441\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u0438\u043a\u0440\u043e\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u044b \u0434\u0430\u044e\u0442 \u0432\u0430\u0448\u0435\u043c\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044e? \u0423 \u0432\u0430\u0441 \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0441\u0442\u0438. \u041a\u0430\u0436\u0434\u044b\u0439 \u0432\u0438\u0434\u0436\u0435\u0442 \u0432 \u043c\u0438\u043a\u0440\u043e\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430\u0445 \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439, \u043e\u043d\u0430 \u0437\u0430 \u043d\u0435\u0433\u043e \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442. \u0412\u0438\u0434\u0436\u0435\u0442\u044b \u0438\u0437\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u0434\u0440\u0443\u0433 \u043e\u0442 \u0434\u0440\u0443\u0433\u0430, \u0443 \u043d\u0438\u0445 \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u0435 \u0440\u0435\u043b\u0438\u0437\u043d\u044b\u0435 \u0446\u0438\u043a\u043b\u044b \u0438 \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u0435 \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u0438\u043d\u0433\u0438. \u0423 \u043a\u0430\u0436\u0434\u043e\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u044b, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442\u0441\u044f \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u043c \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u043c, \u0435\u0441\u0442\u044c \u0441\u0432\u043e\u0431\u043e\u0434\u0430 \u0432 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u043e\u043c \u0441\u0442\u0435\u043a\u0435, \u043e\u043d\u0438 \u043d\u0435 \u0437\u0430\u0432\u0438\u0441\u044f\u0442 \u0434\u0440\u0443\u0433 \u043e\u0442 \u0434\u0440\u0443\u0433\u0430. <\/p>\n<p>  \u041a\u0430\u043a\u0438\u0435 \u0443 \u044d\u0442\u043e\u0439 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b? \u041e\u043d\u0430 \u0441\u0438\u043b\u044c\u043d\u043e \u0443\u0441\u043b\u043e\u0436\u043d\u044f\u0435\u0442 \u043a\u043e\u0434, \u0434\u0430\u0435\u0442 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043d\u0430\u043a\u043b\u0430\u0434\u043d\u044b\u0435 \u0440\u0430\u0441\u0445\u043e\u0434\u044b \u043d\u0430 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044e \u0438 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432 \u0432 \u043c\u0438\u043a\u0440\u043e\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430\u0445 \u043c\u0435\u0436\u0434\u0443 \u0441\u043e\u0431\u043e\u0439, \u043d\u0430\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0435\u0442 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u043e \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0439 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u0438 \u2014 \u0447\u0442\u043e\u0431\u044b API, \u0447\u0435\u0440\u0435\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u0438\u0434\u0436\u0435\u0442\u044b \u043e\u0431\u0449\u0430\u044e\u0442\u0441\u044f, \u043f\u0440\u0438 \u0440\u0435\u043b\u0438\u0437\u0430\u0445 \u043d\u0435 \u043b\u043e\u043c\u0430\u043b\u0441\u044f \u0438 \u0432\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0435 \u0440\u0430\u0437\u0432\u0430\u043b\u0438\u043b\u043e\u0441\u044c. \u0421\u0432\u043e\u0431\u043e\u0434\u0430 \u0432 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u043e\u043c \u0441\u0442\u0435\u043a\u0435 \u2014 \u043d\u0430\u0432\u0435\u0440\u043d\u043e\u0435, \u0442\u043e\u0436\u0435 \u0441\u0432\u043e\u0435\u0433\u043e \u0440\u043e\u0434\u0430 \u043c\u0438\u043d\u0443\u0441. \u0414\u0443\u043c\u0430\u044e, \u0432\u0430\u043c \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0431\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u0430\u0439\u0442\u043e\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u043b\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u043e\u0434\u043d\u043e\u0433\u043e \u043a\u0443\u0441\u043e\u0447\u043a\u0430 \u0433\u0440\u0443\u0437\u0438\u0442 Angular, \u0430 \u0434\u043b\u044f \u0434\u0440\u0443\u0433\u043e\u0433\u043e \u2014 React, \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043d\u0435 \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0431\u044b\u0441\u0442\u0440\u043e. \u0422\u0430\u043a \u0447\u0442\u043e \u0441\u0432\u043e\u0431\u043e\u0434\u0430 \u2014 \u044d\u0442\u043e \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u0438 \u043f\u043b\u044e\u0441, \u0438 \u043c\u0438\u043d\u0443\u0441. <\/p>\n<p>  \u0417\u0430\u0447\u0435\u043c \u0432\u0430\u043c \u044d\u0442\u0443 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u044e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c? \u042f \u0434\u043b\u044f \u0441\u0435\u0431\u044f \u043d\u0430 \u044d\u0442\u043e\u0442 \u0432\u043e\u043f\u0440\u043e\u0441 \u043e\u0442\u0432\u0435\u0442\u0438\u043b \u0434\u0432\u0443\u043c\u044f \u043f\u0443\u043d\u043a\u0442\u0430\u043c\u0438. \u041f\u0435\u0440\u0432\u044b\u0439: \u0443 \u0432\u0430\u0441 \u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u0445 \u043a\u043e\u043c\u0430\u043d\u0434 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438. <\/p>\n<p>  \u0412\u0442\u043e\u0440\u043e\u0439: \u0432\u044b \u0434\u0435\u043b\u0430\u0435\u0442\u0435 \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c\u044b\u0435 \u0432\u0438\u0434\u0436\u0435\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u043c\u0438\u043a\u0440\u043e\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0435, \u0430 \u0435\u0449\u0435 \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u043d\u0430 \u0432\u0430\u0448\u0438 \u0441\u0430\u0439\u0442\u044b \u0438\u043b\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043d\u0430 \u0441\u0430\u0439\u0442\u044b \u043f\u0430\u0440\u0442\u043d\u0435\u0440\u043e\u0432. <\/p>\n<p>  \u041d\u043e \u044d\u0442\u043e \u0432\u0441\u0435 \u043b\u0438\u0440\u0438\u043a\u0430. \u041f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u0438\u043a\u0440\u043e\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u044b \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0438 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u043b\u0438 \u0432\u0441\u0435 \u0431\u043e\u043d\u0443\u0441\u044b, \u043e \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u044b \u0433\u043e\u0432\u043e\u0440\u0438\u043b\u0438, \u0438 \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0432\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0438 \u0431\u044b\u0441\u0442\u0440\u043e. <\/p>\n<h2>\u041a\u0430\u043a \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u0438\u043a\u0440\u043e\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u044b\/\u0432\u0438\u0434\u0436\u0435\u0442\u044b?<\/h2>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ri\/b3\/ia\/rib3iaghgxvjn3yra9rew9ua3cs.jpeg\">  <\/p>\n<pre><code class=\"javascript\">declare const DoggyWidget: {     init: ({         container: HTMLElement,     }) =&gt; DoggyWidgetInstance; }  declare interface DoggyWidgetInstance {     destroy(): void;     updateDoggy(): void; }<\/code><\/pre>\n<p>  \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0432\u043e\u0437\u044c\u043c\u0435\u043c \u0432\u043e\u0442 \u0442\u0430\u043a\u043e\u0439 \u043f\u0440\u043e\u0441\u0442\u0435\u043d\u044c\u043a\u0438\u0439 \u0432\u0438\u0434\u0436\u0435\u0442 DoggyWidget, \u043e\u043d \u043b\u0435\u0436\u0438\u0442 <a href=\"https:\/\/github.com\/mad-gooze\/doggy-widget\">\u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435 \u043d\u0430 GitHub<\/a>. \u0412\u0438\u0434\u0436\u0435\u0442 \u0440\u0438\u0441\u0443\u0435\u0442 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443 \u0438 \u043a\u043d\u043e\u043f\u043e\u0447\u043a\u0443. \u041a\u0430\u0440\u0442\u0438\u043d\u043a\u0430 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430, \u043a\u0443\u0434\u0430 \u0432\u044b \u0432\u0438\u0434\u0436\u0435\u0442 \u0432\u0441\u0442\u0430\u0432\u0438\u043b\u0438, \u0438 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u0440\u0430\u043d\u0434\u043e\u043c\u043d\u0443\u044e \u0444\u043e\u0442\u043e\u0433\u0440\u0430\u0444\u0438\u044e \u0441\u043e\u0431\u0430\u043a\u0438. \u041a\u043d\u043e\u043f\u043a\u0430 \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043c\u0435\u043d\u044f\u0435\u0442 \u044d\u0442\u0443 \u0444\u043e\u0442\u043e\u0433\u0440\u0430\u0444\u0438\u044e \u043d\u0430 \u0434\u0440\u0443\u0433\u0443\u044e \u0440\u0430\u043d\u0434\u043e\u043c\u043d\u0443\u044e. \u0423 \u043d\u0430\u0448\u0435\u0433\u043e \u0432\u0438\u0434\u0436\u0435\u0442\u0430 \u0431\u0443\u0434\u0435\u0442 API, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0441 \u043d\u0438\u043c \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043a\u0430\u043a-\u0442\u043e \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c. <\/p>\n<p>  \u0418\u0437 \u0447\u0435\u0433\u043e \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u0442\u044c? \u0412 \u043f\u0435\u0440\u0432\u0443\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u0434\u0435\u043a\u043b\u0430\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0439 namespace DoggyWidget, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u0444\u0430\u0431\u0440\u0438\u043a\u0430 \u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0438\u043d\u0441\u0442\u0430\u043d\u0441 \u044d\u0442\u043e\u0433\u043e \u0432\u0438\u0434\u0436\u0435\u0442\u0430. \u0423 \u0438\u043d\u0441\u0442\u0430\u043d\u0441\u0430 \u0431\u0443\u0434\u0435\u0442 \u0434\u0432\u0430 \u043c\u0435\u0442\u043e\u0434\u0430. \u041f\u0435\u0440\u0432\u044b\u0439 \u043c\u0435\u0442\u043e\u0434 \u2014 destroy, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0438 \u0432\u044b\u0437\u043e\u0432\u0435 \u0443\u0434\u0430\u043b\u0438\u0442 \u0432\u0438\u0434\u0436\u0435\u0442 \u0441\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438 \u043f\u043e\u0447\u0438\u0441\u0442\u0438\u0442 \u0432\u0441\u0451, \u0447\u0442\u043e \u043e\u043d \u0443\u0441\u043f\u0435\u043b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441 DOM-\u043e\u043c. \u0412\u0442\u043e\u0440\u043e\u0439 \u043c\u0435\u0442\u043e\u0434 \u2014 updateDoggy, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u0435\u043b\u0430\u0435\u0442 \u0442\u043e \u0436\u0435 \u0441\u0430\u043c\u043e\u0435, \u0447\u0442\u043e \u043d\u0430\u0436\u0430\u0442\u0438\u0435 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443, \u0430 \u0438\u043c\u0435\u043d\u043d\u043e \u043c\u0435\u043d\u044f\u0435\u0442 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443. <\/p>\n<p>  \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0434\u0443\u043c\u0430\u0435\u043c, \u043a\u0430\u043a \u0442\u0430\u043a\u043e\u0439 \u0432\u0438\u0434\u0436\u0435\u0442 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c. <\/p>\n<h2>&lt;script&gt;<\/h2>\n<p>  \u041f\u0435\u0440\u0432\u0430\u044f \u0438\u0434\u0435\u044f \u00ab\u0432 \u043b\u043e\u0431\u00bb: \u043d\u0430\u0448 \u0432\u0438\u0434\u0436\u0435\u0442 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u043c \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u043c. <\/p>\n<pre><code class=\"javascript\">class Widget {     constructor({ container }) {         this.container = container;         container.classList.add('doggy-widget');          this._renderImg();         this._renderBtn();          this.updateDoggy();     }   \u2026  }<\/code><\/pre>\n<p>  \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0438\u043d\u0441\u0442\u0430\u043d\u0441 \u0432\u0438\u0434\u0436\u0435\u0442\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043b\u0430\u0441\u0441\u0430. \u0423 \u043a\u043b\u0430\u0441\u0441\u0430 \u0431\u0443\u0434\u0435\u0442 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043a\u043e\u043d\u0444\u0438\u0433. \u0412 \u043a\u043e\u043d\u0444\u0438\u0433\u0435 \u0435\u0441\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440, \u0433\u0434\u0435 \u0432\u0438\u0434\u0436\u0435\u0442 \u0434\u043e\u043b\u0436\u0435\u043d \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c\u0441\u044f. \u041c\u044b \u043d\u0430 \u044d\u0442\u043e\u0442 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u043d\u0430\u0432\u0435\u0441\u0438\u043c className, \u0432\u044b\u0437\u043e\u0432\u0435\u043c \u0434\u0432\u0430 \u043c\u0435\u0442\u043e\u0434\u0430 \u2014 \u0434\u043b\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0438 \u0434\u043b\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u043a\u043d\u043e\u043f\u043a\u0438 \u2014 \u0438 \u0432\u044b\u0437\u043e\u0432\u0435\u043c updateDoggy, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0441\u0442\u0430\u0432\u0438\u0442 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u0443\u044e \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443 \u043f\u0440\u0438 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0432\u0438\u0434\u0436\u0435\u0442\u0430. <\/p>\n<pre><code class=\"javascript\">    _renderImg() {         this.img = document.createElement('img');         this.img.classList.add('doggy-widget__img');         this.img.alt = 'doggy';         this.container.appendChild(this.img);     }<\/code><\/pre>\n<p>  \u0427\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0434\u0435\u043b\u0430\u0442\u044c renderImg? \u041e\u043d \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0442\u0435\u0433 img, \u043d\u0430\u0432\u0435\u0448\u0438\u0432\u0430\u0442\u044c \u043d\u0430 \u043d\u0435\u0433\u043e className \u0438 \u0430\u043f\u043f\u0435\u043d\u0434\u0438\u0442\u044c \u0435\u0433\u043e \u0432 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440. <\/p>\n<pre><code class=\"javascript\">    _renderBtn() {         this.btn = document.createElement('button');         this.btn.classList.add('doggy-widget__btn');         this.btn.addEventListener('click', () =&gt; this.updateDoggy());         this.container.appendChild(this.btn);         this.btn.innerText = 'New doggy!';     } <\/code><\/pre>\n<p>  renderBtn \u0431\u0443\u0434\u0435\u0442 \u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u043e \u0436\u0435 \u0441\u0430\u043c\u043e\u0435, \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043d\u0435 img, \u0430 \u043a\u043d\u043e\u043f\u043e\u0447\u043a\u0443. <\/p>\n<pre><code class=\"javascript\">    updateDoggy() {         const { width, height } = this.container.getBoundingClientRect();         const src = `https:\/\/placedog.net\/${width - 10}\/${height - 10}?random=${Math.random()}`;         this.img.src = src;     }<\/code><\/pre>\n<p>  \u0418 \u0443 \u043d\u0430\u0441 \u0435\u0449\u0435 \u0435\u0441\u0442\u044c \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0439 API. updateDoggy \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430, \u043a\u0443\u0434\u0430 \u043c\u044b \u0432\u0441\u0442\u0430\u0432\u0438\u043b\u0438 \u0432\u0438\u0434\u0436\u0435\u0442, \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u0438\u0440\u0443\u0435\u0442 \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435. \u042f \u0437\u0434\u0435\u0441\u044c \u0431\u0443\u0434\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0435\u0440\u0432\u0438\u0441 placedog.net, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0440\u0430\u043d\u0434\u043e\u043c\u043d\u044b\u0435 \u043f\u043b\u0435\u0439\u0441\u0445\u043e\u043b\u0434\u0435\u0440\u044b \u0441 \u0444\u043e\u0442\u043a\u0430\u043c\u0438 \u0441\u043e\u0431\u0430\u043a. \u041c\u0435\u0442\u043e\u0434 src \u0441\u0442\u0430\u0432\u0438\u0442 \u0442\u0435\u0433 img.<\/p>\n<pre><code class=\"javascript\">    destroy() {         this.container.innerHTML = '';         this.container.classList.remove('doggy-widget');     }<\/code><\/pre>\n<p>  destroy \u0431\u0443\u0434\u0435\u0442 \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u2014 \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0434\u0447\u0438\u0449\u0430\u0442\u044c innerHTML \u0443 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0438 \u0441\u043d\u0438\u043c\u0430\u0442\u044c \u0441 \u043d\u0435\u0433\u043e className, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u043f\u043e\u0441\u0442\u0430\u0432\u0438\u043b\u0438 \u0432 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0435. <\/p>\n<pre><code class=\"javascript\">(() =&gt; {      class Widget {         ...     }      window.DoggyWidget = {         init(config) {             return new Widget(config);         }     } })();<\/code><\/pre>\n<p>  \u041d\u0430\u043f\u0438\u0448\u0435\u043c \u043a\u043e\u0434, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0432\u0438\u0434\u0436\u0435\u0442 \u0431\u0443\u0434\u0435\u0442 \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c\u0441\u044f. \u041c\u044b \u0435\u0433\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u043e\u0431\u0435\u0440\u043d\u0435\u043c \u0432 IIFE, \u0447\u0442\u043e\u0431\u044b \u0441\u043f\u0440\u044f\u0442\u0430\u0442\u044c \u043a\u043b\u0430\u0441\u0441 \u0432\u0438\u0434\u0436\u0435\u0442\u0430 \u0432 \u0437\u0430\u043c\u044b\u043a\u0430\u043d\u0438\u0435, \u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c \u0432 \u043d\u0435\u043c \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0439 namespace DoggyWidget, \u0432 namespace \u0431\u0443\u0434\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u044f init \u2014 \u0444\u0430\u0431\u0440\u0438\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u0435\u0440\u043d\u0435\u0442 \u043d\u0430\u043c \u0438\u043d\u0441\u0442\u0430\u043d\u0441 \u0432\u0438\u0434\u0436\u0435\u0442\u0430. <\/p>\n<pre><code class=\"html\">&lt;script src=&quot;doggy-widget.js&quot;&gt;&lt;\/script&gt; &lt;link rel=&quot;stylesheet&quot; href=&quot;doggy-widget.css&quot;&gt;  &lt;div id=&quot;widget-1&quot;&gt;&lt;\/div&gt; &lt;div id=&quot;widget-2&quot;&gt;&lt;\/div&gt;  &lt;script&gt;     const widget1 = DoggyWidget.init({          container: document.getElementById('widget-1'),     });     const widget2 = DoggyWidget.init({          container: document.getElementById('widget-2'),     }); &lt;\/script&gt;<\/code><\/pre>\n<p>  \u041a\u0430\u043a \u044d\u0442\u043e \u0432\u0441\u0435 \u0431\u0443\u0434\u0435\u0442 \u0441\u0442\u0430\u0432\u0438\u0442\u044c\u0441\u044f \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043a\u0443? \u0412\u043e\u0442 \u0434\u0432\u0430 \u0444\u0430\u0439\u043b\u0430: doggy-widget.js \u0441 JS-\u043a\u043e\u0434\u043e\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u043b\u0438, \u0438 doggy-wodget.css \u0441\u043e \u0441\u0442\u0438\u043b\u044f\u043c\u0438 \u0434\u043b\u044f \u0432\u0438\u0434\u0436\u0435\u0442\u0430. <\/p>\n<p>  \u041c\u044b \u0437\u0430\u0432\u0435\u0434\u0435\u043c \u0434\u0432\u0430 div, \u0438 \u0432 \u043a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u043d\u0438\u0445 \u0432\u0441\u0442\u0430\u0432\u0438\u043c \u0432\u0438\u0434\u0436\u0435\u0442 \u0447\u0435\u0440\u0435\u0437 DoggyWidget.init(), \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0442\u043e\u0436\u0435 \u0432 doggy-widget.js \u043e\u043f\u0438\u0441\u0430\u043b\u0438. <br \/>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/3j\/5p\/jv\/3j5pjvrj6wectwrr_wbitfyzzxu.jpeg\"><br \/>  <sup><sub><a href=\"https:\/\/mad-gooze.github.io\/doggy-widget\/script\/\">\u0421\u0441\u044b\u043b\u043a\u0430 \u0441\u043e \u0441\u043b\u0430\u0439\u0434\u0430<\/a><\/sub><\/sup><\/p>\n<p>  \u042d\u0442\u043e \u0432\u0441\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a. \u0423 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0432\u0438\u0434\u0436\u0435\u0442\u0430 \u0431\u0443\u0434\u0435\u0442 updateDoggy.<br \/>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ve\/9f\/ob\/ve9fobljhe0hvyk0mn3bgkxld1s.jpeg\"><br \/>  <sup><sub><a href=\"https:\/\/mad-gooze.github.io\/doggy-widget\/script\/\">\u0421\u0441\u044b\u043b\u043a\u0430 \u0441\u043e \u0441\u043b\u0430\u0439\u0434\u0430<\/a><\/sub><\/sup><\/p>\n<p>  \u041c\u044b \u0435\u0433\u043e \u0432\u044b\u0437\u043e\u0432\u0435\u043c. \u041e\u043d \u0438\u0437\u043c\u0435\u043d\u0438\u0442 \u043d\u0430\u043c \u0444\u043e\u0442\u043e\u0433\u0440\u0430\u0444\u0438\u044e. <\/p>\n<p>  \u0412\u0441\u043f\u043e\u043c\u043d\u0438\u043c, \u043a\u0430\u043a\u0438\u0435 \u0431\u043e\u043d\u0443\u0441\u044b \u043d\u0430\u043c \u043e\u0431\u0435\u0449\u0430\u044e\u0442 \u043c\u0438\u043a\u0440\u043e\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u044b. \u041f\u0435\u0440\u0432\u044b\u0439 \u0431\u043e\u043d\u0443\u0441 \u2014 \u0438\u0437\u043e\u043b\u044f\u0446\u0438\u044f \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432. <br \/>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/a3\/uo\/_l\/a3uo_ln3abe1vzfixewwetwckdq.jpeg\"><br \/>  <sup><sub><a href=\"https:\/\/mad-gooze.github.io\/doggy-widget\/script\/broken-css.html\">\u0421\u0441\u044b\u043b\u043a\u0430 \u0441\u043e \u0441\u043b\u0430\u0439\u0434\u0430<\/a><\/sub><\/sup><\/p>\n<pre><code class=\"html\">        * {             font-family:          Arial, Helvetica, sans-serif !important;             font-size: 10px !important;         } <\/code><\/pre>\n<p>  \u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u043c, \u0447\u0442\u043e \u043c\u044b \u043d\u0430\u0448 \u0432\u0438\u0434\u0436\u0435\u0442 \u0432\u0441\u0442\u0440\u043e\u0438\u043b\u0438 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043a\u0443, \u0433\u0434\u0435 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432\u043e\u0442 \u0442\u0430\u043a\u043e\u0439 CSS-\u043a\u043e\u0434. <br \/>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/dj\/lh\/5p\/djlh5pug-klp5kmfofvw4olbquo.jpeg\"><br \/>  <sup><sub><a href=\"https:\/\/mad-gooze.github.io\/doggy-widget\/script\/broken-css.html\">\u0421\u0441\u044b\u043b\u043a\u0430 \u0441\u043e \u0441\u043b\u0430\u0439\u0434\u0430<\/a><\/sub><\/sup><\/p>\n<p>  \u0427\u0442\u043e \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0435\u0442, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u043e\u0442\u0440\u0438\u0441\u0443\u0435\u043c \u0432\u0438\u0434\u0436\u0435\u0442? \u041e\u0447\u0435\u0432\u0438\u0434\u043d\u043e, \u0443 \u043d\u0435\u0433\u043e \u043f\u043e\u0435\u0434\u0435\u0442 \u0432\u0435\u0440\u0441\u0442\u043a\u0430, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0439 CSS selector, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 font-family \u0438 font-size. \u0422\u0430\u043a \u0447\u0442\u043e \u0432\u0438\u0434\u0436\u0435\u0442 \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u0445\u043e\u0440\u043e\u0448\u043e \u0438\u0437\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u043d \u043e\u0442 \u043e\u043a\u0440\u0443\u0436\u0430\u044e\u0449\u0435\u0433\u043e \u0435\u0433\u043e CSS-\u043a\u043e\u0434\u0430. <\/p>\n<p>  \u0412\u044b \u0441\u043a\u0430\u0436\u0435\u0442\u0435, \u0447\u0442\u043e \u044d\u0442\u043e \u0432\u0440\u0435\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u0442\u0432\u043e \u0438 \u0442\u0430\u043a\u043e\u0433\u043e CSS \u043d\u0438\u043a\u0442\u043e \u043d\u0435 \u043f\u0438\u0448\u0435\u0442. <\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ff\/jb\/bo\/ffjbboopo9wp0dwcyemmakaq2y8.jpeg\"><br \/>  <sup><sub><a href=\"https:\/\/mad-gooze.github.io\/doggy-widget\/script\/index-with-bootstrap.html\">\u0421\u0441\u044b\u043b\u043a\u0430 \u0441\u043e \u0441\u043b\u0430\u0439\u0434\u0430<\/a><\/sub><\/sup><\/p>\n<pre><code class=\"html\">&lt;link rel=&quot;stylesheet&quot;        href=&quot;bootstrap.min.css&quot;&gt;  *, ::after, ::before {     box-sizing: border-box; }<\/code><\/pre>\n<p>  \u041e\u043a\u0435\u0439, \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0447\u0443\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440. \u041c\u044b \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c\u0441\u044f \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043a\u0443, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f Bootstrap, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440. \u0412 Bootstrap \u0435\u0441\u0442\u044c \u0442\u0430\u043a\u043e\u0439 \u043a\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u0441\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c \u0437\u0430\u0434\u0430\u0435\u0442 box-sizing. <br \/>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/h9\/cp\/7h\/h9cp7hhmgx8jfruizgzuvrj6a8k.jpeg\"><br \/>  \u041f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0438\u043c, \u043c\u044b \u043d\u0430\u0448 \u0432\u0438\u0434\u0436\u0435\u0442 \u043e\u0442\u0440\u0438\u0441\u0443\u0435\u043c \u043d\u0430 \u0442\u0430\u043a\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043a\u0435: <br \/>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/wu\/gw\/dc\/wugwdcpyocmapg9cwpuvumswpaw.jpeg\"><br \/>  \u0422\u043e\u0433\u0434\u0430 \u0443 \u043d\u0435\u0433\u043e \u0447\u0443\u0442\u044c-\u0447\u0443\u0442\u044c \u043f\u043e\u0435\u0434\u0443\u0442 \u0440\u0430\u0437\u043c\u0435\u0440\u044b, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e border \u043f\u0435\u0440\u0435\u0435\u0445\u0430\u043b \u0438\u0437-\u0437\u0430 box-sizing \u0432\u043d\u0443\u0442\u0440\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u2014 \u0443 \u043d\u0430\u0441 \u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0432\u0438\u0434\u0436\u0435\u0442\u0430. \u041d\u0435 \u043e\u0447\u0435\u043d\u044c \u043a\u043b\u0430\u0441\u0441\u043d\u043e. \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u043d\u0430\u0448 \u0432\u0438\u0434\u0436\u0435\u0442 \u043f\u043e\u0434\u0432\u0435\u0440\u0436\u0435\u043d \u0432\u043b\u0438\u044f\u043d\u0438\u044e \u043e\u043a\u0440\u0443\u0436\u0430\u044e\u0449\u0435\u0433\u043e \u0435\u0433\u043e \u043a\u043e\u0434\u0430, \u0447\u0435\u0433\u043e \u043c\u044b \u0432 \u043c\u0438\u043a\u0440\u043e\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430\u0445 \u0445\u043e\u0442\u0438\u043c \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c. <\/p>\n<p>  \u041a\u0430\u043a \u044d\u0442\u043e\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c? \u041f\u0435\u0440\u0432\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442: \u0435\u0441\u0442\u044c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0441\u0442\u0430\u0440\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 <a href=\"https:\/\/github.com\/premasagar\/cleanslate\">cleanslate.css<\/a>. <\/p>\n<pre><code class=\"html\">&lt;body&gt;   &lt;div class=&quot;blah&quot;&gt;       &lt;!-- general content is not affected --&gt;       &lt;div class=&quot;myContainer cleanslate&quot;&gt;           &lt;!-- this content will be reset --&gt;       &lt;\/div&gt;   &lt;\/div&gt; &lt;\/body&gt;<\/code><\/pre>\n<p>  \u042d\u0442\u043e \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 CSS reset, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442 \u0441\u0442\u0438\u043b\u0438 \u043d\u0435 \u043d\u0430 \u0432\u0441\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043a\u0435, \u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u0442\u043e\u043c div, \u0433\u0434\u0435 \u0441\u0442\u043e\u0438\u0442 \u043a\u043b\u0430\u0441\u0441 cleanslate. \u0412\u0441\u0451, \u0447\u0442\u043e \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 cleanslate, \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043e, \u0443 \u043d\u0435\u0433\u043e \u0431\u0443\u0434\u0443\u0442 \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u0435 \u0437\u0430\u0440\u0435\u0437\u0435\u0447\u0435\u043d\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438. <\/p>\n<p>  \u041b\u0438\u0431\u043e \u0435\u0441\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0447\u0430\u0441\u0442\u044c \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0439 \u0432\u0435\u0431-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0430 \u0438\u043c\u0435\u043d\u043d\u043e Shadow DOM.<br \/>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/rx\/ap\/qn\/rxapqn0tzxxd33ku2u-hu6x1bek.jpeg\"><br \/>  Shadow DOM \u2014 \u044d\u0442\u043e \u0442\u0430\u043a\u043e\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0447\u0430\u0441\u0442\u044c DOM-\u0434\u0435\u0440\u0435\u0432\u0430 \u0438\u0437\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e \u0438 \u0441\u043a\u0440\u044b\u0442\u043e \u043e\u0442 \u0434\u0440\u0443\u0433\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043a\u0435. \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Shadow DOM \u0440\u0438\u0441\u0443\u044e\u0442\u0441\u044f \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0435 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044b, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, input range. \u0415\u0441\u043b\u0438 \u0432\u044b \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u043d\u0430 \u043d\u0435\u0433\u043e \u0432 dev tools, \u0442\u0430\u043c \u0432\u043d\u0443\u0442\u0440\u0438 \u0432 shadow root \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432\u0435\u0440\u0441\u0442\u043a\u0430, \u0441\u0442\u0438\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e CSS, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0437\u0430\u0448\u0438\u0442 \u0432 \u0434\u0432\u0438\u0436\u043e\u043a \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430. <\/p>\n<pre><code class=\"css\">    constructor({ container }) {         this.shadowRoot = container.attachShadow(             { mode: 'open' }         );         this.innerContainer = document.createElement('div');         this.innerContainer.classList.add('doggy-widget');         this.shadowRoot.appendChild(this.innerContainer);          \u2026     }<\/code><\/pre>\n<p>  \u041e\u043a\u0435\u0439, \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0437\u0430\u044e\u0437\u0430\u0442\u044c Shadow DOM \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u0432\u0438\u0434\u0436\u0435\u0442\u0430. \u0427\u0442\u043e \u043d\u0430\u043c \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0443\u0436\u043d\u043e? \u0412 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0435 \u043c\u044b \u043f\u0440\u0438\u0430\u0442\u0442\u0430\u0447\u0438\u043c \u0432 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 shadowRoot, \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0435\u0449\u0435 \u043e\u0434\u0438\u043d div, \u043d\u0430\u0437\u043e\u0432\u0435\u043c \u0435\u0433\u043e innerContainer \u0438 \u0437\u0430\u0430\u043f\u043f\u0435\u043d\u0434\u0438\u043c \u0435\u0433\u043e \u0432\u043d\u0443\u0442\u0440\u044c \u043d\u0430\u0448\u0435\u0433\u043e shadowRoot. <\/p>\n<pre><code class=\"javascript\">    _renderImg() {         \u2026         this.innerContainer.appendChild(this.img);     }      _renderBtn() {         \u2026         this.innerContainer.appendChild(this.btn);     }<\/code><\/pre>\n<p>  \u0418 \u043d\u0430\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u0435\u0440\u0435\u0434\u0435\u043b\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434\u044b renderImg(), renderBtn(). \u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443 \u0438 \u043a\u043d\u043e\u043f\u043a\u0443 \u0441\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0442\u044c \u043d\u0435 \u0432 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u043c \u043f\u0440\u0438\u0448\u0435\u043b, \u0430 \u0432 innerContainer, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0443\u0436\u0435 \u043f\u043e\u043b\u043e\u0436\u0438\u043b\u0438 \u0432\u043d\u0443\u0442\u0440\u044c shadowRoot. <\/p>\n<pre><code class=\"javascript\">    destroy() {         \u2026         this.shadowRoot.innerHTML = '';     } <\/code><\/pre>\n<p>  \u041e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0435\u0449\u0435 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u043e\u043f\u0440\u0430\u0432\u0438\u0442\u044c destroy. \u0412 destroy \u0431\u0443\u0434\u0435\u043c shadowRoot \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u0434\u0447\u0438\u0449\u0430\u0442\u044c \u0437\u0430 \u0441\u043e\u0431\u043e\u0439. <\/p>\n<p>  \u041a\u043b\u0430\u0441\u0441! \u041a\u0430\u0436\u0435\u0442\u0441\u044f, \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 Shadow DOM \u0438 \u0441\u043c\u043e\u0433\u043b\u0438 \u043d\u0430\u0448\u0443 \u0432\u0435\u0440\u0441\u0442\u043a\u0443 \u0438\u0437\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043e\u0442 \u0434\u0440\u0443\u0433\u043e\u0433\u043e \u043a\u043e\u0434\u0430. <\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/fy\/hu\/55\/fyhu55kn_xg4e3lxb2qkdmbcqbg.jpeg\"><br \/>  <sup><sub><a href=\"https:\/\/mad-gooze.github.io\/doggy-widget\/script-with-shadow-dom\/broken-css.html\">\u0421\u0441\u044b\u043b\u043a\u0430 \u0441\u043e \u0441\u043b\u0430\u0439\u0434\u0430<\/a><\/sub><\/sup><\/p>\n<p>  \u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0447\u0442\u043e-\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u2014 \u0443 \u043d\u0430\u0441 \u043f\u0440\u043e\u043f\u0430\u043b\u0438 \u0432\u0441\u0435 \u0441\u0442\u0438\u043b\u0438. <\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/9r\/co\/rh\/9rcorhmhjwy2ebneu8rlvu396wy.jpeg\"><br \/>  \u0427\u0442\u043e \u0438\u043c\u0435\u043d\u043d\u043e \u043f\u0440\u043e\u0438\u0437\u043e\u0448\u043b\u043e? \u0418\u0437\u043e\u043b\u044f\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 Shadow DOM, \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432 \u043e\u0431\u0435 \u0441\u0442\u043e\u0440\u043e\u043d\u044b: \u043e\u043d\u0430 \u0431\u043b\u043e\u043a\u0438\u0440\u0443\u0435\u0442 \u043a\u0430\u043a \u0432\u0440\u0435\u0434\u043e\u043d\u043e\u0441\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u043c \u043d\u0435 \u043d\u0443\u0436\u043d\u044b, \u0442\u0430\u043a \u0438 \u043d\u0430\u0448\u0438 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c. \u0421\u043c\u043e\u0442\u0440\u0438\u0442\u0435, link \u0441 doggy widget CSS \u043e\u0441\u0442\u0430\u043b\u0441\u044f \u0441\u043d\u0430\u0440\u0443\u0436\u0438 shadowRoot, \u0430 \u0432\u0435\u0440\u0441\u0442\u043a\u0430 \u0432\u0438\u0434\u0436\u0435\u0442\u0430 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438. \u0421\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u043f\u0440\u0430\u0432\u0438\u043b\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u044b \u0441\u043d\u0430\u0440\u0443\u0436\u0438, \u043d\u0435 \u0432\u043b\u0438\u044f\u044e\u0442 \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 shadowRoot.<\/p>\n<pre><code class=\"javascript\">     constructor() {         \u2026         const link = document.createElement('link');         link.rel = 'stylesheet';         link.href = 'doggy-widget.css';         this.shadowRoot.appendChild(link);         \u2026     }<\/code><\/pre>\n<p>  <\/p>\n<pre>&lt;script src=&quot;doggy-widget.js&quot;&gt;&lt;\/script&gt;<\/pre>\n<p>  <s><\/p>\n<pre>&lt;link rel=&quot;stylesheet&quot; href=&quot;doggy-widget.css&quot;&gt;<\/pre>\n<p><\/s><br \/>  \u0427\u0442\u043e\u0431\u044b \u044d\u0442\u043e \u043f\u043e\u043b\u0435\u0447\u0438\u0442\u044c, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0442\u0435\u0433 link \u043a\u043b\u0430\u0441\u0442\u044c \u0432\u043d\u0443\u0442\u0440\u044c shadowRoot. \u0421\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u043e. \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 link, \u0441\u0442\u0430\u0432\u0438\u043c \u0435\u043c\u0443 href \u0438 \u0430\u043f\u043f\u0435\u043d\u0434\u0438\u043c \u0435\u0433\u043e \u0432\u043d\u0443\u0442\u0440\u044c shadowRoot. \u0412 \u043a\u043e\u0434\u0435 \u0432\u0441\u0442\u0430\u0432\u043a\u0438 \u0432\u0438\u0434\u0436\u0435\u0442\u0430 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 CSS-\u0444\u0430\u0439\u043b \u043d\u0430\u043c \u0443\u0436\u0435 \u0431\u0443\u0434\u0435\u0442 \u043d\u0435 \u043d\u0443\u0436\u0435\u043d, \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c\u0441\u044f \u0432 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0435 \u0432\u0438\u0434\u0436\u0435\u0442\u0430. <br \/>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/rw\/mn\/pv\/rwmnpvsf46xbtbib4xtfnw2s_ki.jpeg\"><br \/>  <sup><sub><a href=\"https:\/\/mad-gooze.github.io\/doggy-widget\/script-with-shadow-dom-fixed\/broken-css.html\">\u0421\u0441\u044b\u043b\u043a\u0430 \u0441\u043e \u0441\u043b\u0430\u0439\u0434\u0430<\/a><\/sub><\/sup><\/p>\n<p>  \u042d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a. \u041f\u043e \u0441\u0441\u044b\u043b\u043e\u0447\u043a\u0435 \u2014 \u043f\u0440\u0438\u043c\u0435\u0440 \u0441 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u043d\u044b\u043c Bootstrap, \u0433\u0434\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c, \u0447\u0442\u043e \u043d\u0430\u0448 \u0432\u0438\u0434\u0436\u0435\u0442 \u043f\u043e \u0432\u0435\u0440\u0441\u0442\u043a\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c \u0438\u0437\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c. <br \/>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/up\/jb\/1h\/upjb1hfz2l1wqsrpncm0azpsgkw.jpeg\"><br \/>  \u0415\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u0430\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c, \u0435\u0441\u043b\u0438 \u043e\u0442\u043a\u0440\u043e\u0435\u0442\u0435 dev tools: \u043d\u0430 \u043a\u0430\u0436\u0434\u0443\u044e \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u0432\u0438\u0434\u0436\u0435\u0442\u0430 \u043f\u043e\u044f\u0432\u0438\u043b\u0441\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0437\u0430\u043f\u0440\u043e\u0441 \u0437\u0430 doggy-widget.css. \u0417\u0434\u0435\u0441\u044c \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0443\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u0443 \u0432\u0430\u0441 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043d\u043e \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u043d\u0435 \u0433\u0440\u0443\u0437\u0438\u0442\u044c \u044d\u0442\u043e\u0442 \u0444\u0430\u0439\u043b \u0432\u0430\u0448\u0438\u043c \u043a\u043b\u0438\u0435\u043d\u0442\u0430\u043c. <\/p>\n<p>  \u0412\u0440\u043e\u0434\u0435 \u0438\u0437\u043e\u043b\u044f\u0446\u0438\u044e \u043c\u044b \u043f\u043e\u043b\u0435\u0447\u0438\u043b\u0438. \u0418\u043b\u0438 \u043d\u0435 \u0441\u043e\u0432\u0441\u0435\u043c? \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043d\u0435\u043c\u043d\u043e\u0436\u043a\u043e \u043f\u043e\u0438\u0433\u0440\u0430\u0435\u043c \u0432 \u0448\u0430\u0440\u0430\u0434\u044b. <br \/>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ri\/yl\/kx\/riylkxfzkiil3dttgb9s4iobalc.jpeg\"><br \/>  \u041e\u043f\u044b\u0442\u043d\u044b\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u043f\u043e\u0439\u043c\u0443\u0442, \u0447\u0442\u043e \u0437\u0434\u0435\u0441\u044c \u0437\u0430\u0448\u0438\u0444\u0440\u043e\u0432\u0430\u043d monkey-patching. \u042d\u0442\u043e \u0442\u0435\u0445\u043d\u0438\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043d\u0430\u043c \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f\u043d\u043e\u0435 \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0435 JavaScript, \u0430 \u0438\u043c\u0435\u043d\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0443\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0447\u0435\u0440\u0435\u0437 \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u043f\u043e\u043b\u0438\u0444\u0438\u043b\u044b. \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0432 \u0441\u0442\u0430\u0440\u044b\u0439 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043f\u0440\u0438\u0442\u0430\u0449\u0438\u0442\u044c \u043c\u0435\u0442\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u044f\u0432\u0438\u043b\u0441\u044f \u0432 \u043d\u043e\u0432\u043e\u0439 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438, \u0447\u0442\u043e\u0431\u044b \u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u0434, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043d\u043e\u0432\u044b\u0435 \u0441\u043f\u0435\u043a\u0438. \u041d\u043e monkey-patching \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043a\u0430\u043a \u0434\u0435\u043b\u0430\u0442\u044c \u0445\u043e\u0440\u043e\u0448\u0438\u0435 \u0448\u0442\u0443\u043a\u0438, \u0442\u0430\u043a \u0438 \u043e\u0447\u0435\u043d\u044c \u0441\u0438\u043b\u044c\u043d\u043e \u0432\u0441\u0451 \u043b\u043e\u043c\u0430\u0442\u044c. <\/p>\n<p>  \u0420\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043f\u0440\u0438\u043c\u0435\u0440, \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043c\u044b \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0438\u0441\u044c, \u043a\u043e\u0433\u0434\u0430 \u044f \u0440\u0430\u0431\u043e\u0442\u0430\u043b \u0432 \u0440\u0435\u043a\u043b\u0430\u043c\u043d\u044b\u0445 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f\u0445. <\/p>\n<pre><code class=\"javascript\">var str = JSON.stringify(['haha']) &gt; '[&quot;haha&quot;]' JSON.parse(str) &gt; [&quot;haha&quot;]<\/code><\/pre>\n<p>  \u0411\u044b\u043b \u0443 \u043d\u0430\u0441 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a\u043e\u0439 \u043a\u043e\u0434. \u041c\u044b \u0441\u0442\u0440\u0438\u043d\u0433\u0438\u0444\u0430\u0438\u043b\u0438 \u043c\u0430\u0441\u0441\u0438\u0432\u0447\u0438\u043a. \u041e\u0447\u0435\u0432\u0438\u0434\u043d\u043e, \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0443 \u044d\u0442\u043e\u0433\u043e \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432\u043e\u0442 \u0442\u0430\u043a\u043e\u0439. \u0418 \u043f\u043e\u0442\u043e\u043c \u043c\u044b \u044d\u0442\u0443 \u0437\u0430\u0441\u0442\u0440\u0438\u043d\u0433\u0438\u0444\u0430\u0435\u043d\u043d\u0443\u044e \u0441\u0442\u0440\u043e\u0447\u043a\u0443 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u043b\u0438 \u043d\u0430 \u043d\u0430\u0448 \u0431\u044d\u043a\u0435\u043d\u0434, \u0433\u0434\u0435 \u043f\u043e\u0442\u043e\u043c \u0435\u0435 \u043f\u0430\u0440\u0441\u0438\u043b\u0438. <\/p>\n<p>  \u041e\u0447\u0435\u0432\u0438\u0434\u043d\u043e, \u0435\u0441\u043b\u0438 \u043c\u044b \u0442\u0430\u043a\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443 \u0440\u0430\u0441\u043f\u0430\u0440\u0441\u0438\u043c, \u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u043c\u0430\u0441\u0441\u0438\u0432. \u0412\u0441\u0435 \u0445\u043e\u0440\u043e\u0448\u043e. <\/p>\n<pre><code class=\"javascript\">var str = JSON.stringify(['haha']) &gt; '&quot;[\\&quot;haha\\&quot;]&quot;' JSON.parse(str) &gt; '[&quot;haha&quot;]'<\/code><\/pre>\n<p>  \u0410 \u0432\u043e\u0442 \u043d\u0430 \u0441\u0430\u0439\u0442\u0435 \u043e\u0434\u043d\u043e\u0433\u043e \u0438\u0437 \u043f\u0430\u0440\u0442\u043d\u0435\u0440\u043e\u0432, \u043a\u0443\u0434\u0430 \u043c\u044b \u044d\u0442\u043e\u0442 \u0432\u0438\u0434\u0436\u0435\u0442 \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u043b\u0438, \u043c\u044b \u0432\u0438\u0434\u0435\u043b\u0438 \u0442\u0430\u043a\u0443\u044e \u043a\u0430\u0440\u0442\u0438\u043d\u0443. <\/p>\n<p>  JSON.stringify \u0443 \u043d\u0430\u0441 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u043b \u0442\u0430\u043a\u0443\u044e \u0448\u0442\u0443\u043a\u0443. \u0422\u0443\u0442 \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438\u0441\u044c \u0435\u0449\u0435 \u043e\u0434\u043d\u0438 \u044d\u043a\u0440\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043a\u0430\u0432\u044b\u0447\u043a\u0438. \u0418 \u043f\u0440\u0438 \u043f\u0430\u0440\u0441\u0438\u043d\u0433\u0435 \u044d\u0442\u043e\u0439 \u0441\u0442\u0440\u043e\u0447\u043a\u0438 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u043b\u0438 \u0432\u043c\u0435\u0441\u0442\u043e \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0441\u0442\u0440\u043e\u043a\u0443. \u041f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a\u0438\u043c\u0438 \u0431\u044b\u043b\u0438 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043b\u0438\u0446 \u0443 \u0432\u0441\u0435\u0445 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432, \u043a\u0442\u043e \u044d\u0442\u043e \u0443\u0432\u0438\u0434\u0435\u043b \u0432 \u043f\u0435\u0440\u0432\u044b\u0439 \u0440\u0430\u0437. <\/p>\n<pre><code class=\"javascript\">Array.prototype.toJSON: () =&gt; Object<\/code><\/pre>\n<p>  \u0421\u0442\u0430\u043b\u0438 \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442. JSON.stringify \u043f\u043e \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438, \u0435\u0441\u043b\u0438 \u0443 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d \u043c\u0435\u0442\u043e\u0434 toJSON, \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u0435\u0433\u043e. \u041c\u0435\u0442\u043e\u0434 \u0434\u043e\u043b\u0436\u0435\u043d \u0432\u0435\u0440\u043d\u0443\u0442\u044c \u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0443\u0435\u043c\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u0430\u043b\u044c\u0448\u0435 \u0431\u0443\u0434\u0435\u0442 \u0447\u0435\u0440\u0435\u0437 JSON.stringify \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0441\u0442\u0440\u043e\u043a\u0443. <\/p>\n<pre><code class=\"javascript\">Array.prototype.toJSON = function () {     var c = [];     this.each(function (a) {         var b = Object.toJSON(a);         if (!Object.isUndefined(b))             c.push(b)     });     return '[' + c.join(', ') + ']' }<\/code><\/pre>\n<p>  \u0418 \u043a\u0430\u043a \u0440\u0430\u0437 \u043d\u0430 \u044d\u0442\u043e\u043c \u0441\u0430\u0439\u0442\u0435 \u043c\u044b \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u043b\u0438 \u0442\u0430\u043a\u043e\u0439 \u043a\u043e\u0434, \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u043f\u0440\u0435\u0434\u043f\u043e\u0441\u043b\u0435\u0434\u043d\u044e\u044e \u0441\u0442\u0440\u043e\u043a\u0443. \u0412 \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u043b\u0441\u044f \u043c\u0435\u0442\u043e\u0434 toJSON, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u043b \u043d\u0435 \u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0443\u0435\u043c\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442, \u043a\u0430\u043a \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u043f\u043e \u0441\u043f\u0435\u043a\u0435, \u0430 \u0441\u0442\u0440\u043e\u0447\u043a\u0443. <\/p>\n<p>  \u041a\u043e\u0434 \u044d\u0442\u043e\u0442 \u043f\u0440\u0438\u043b\u0435\u0442\u0435\u043b \u0438\u0437 \u0441\u0442\u0430\u0440\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 prototype.js, \u044d\u0442\u043e \u0442\u0430\u043a\u0430\u044f \u043b\u0438\u0431\u0430 \u044d\u043f\u043e\u0445\u0438 \u0440\u0430\u043d\u043d\u0435\u0433\u043e jQuery, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442\u0441\u044f \u0442\u0435\u043c, \u0447\u0442\u043e \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0435\u0442 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0443\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 JavaScript \u0434\u043b\u044f \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044f \u0443\u0434\u043e\u0431\u043d\u044b\u0445 \u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u043c\u0435\u0442\u043e\u0434\u043e\u0432. <\/p>\n<p>  \u041c\u044b, \u043a\u0441\u0442\u0430\u0442\u0438, \u043a\u0430\u043a \u043f\u043e\u0442\u043e\u043c \u0432\u044b\u044f\u0441\u043d\u0438\u043b\u043e\u0441\u044c, \u043d\u0435 \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435, \u043a\u0442\u043e \u0441 \u0442\u0430\u043a\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u043e\u0439 \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0441\u044f. \u041d\u0430 Stack Overflow \u0435\u0441\u0442\u044c <a href=\"https:\/\/stackoverflow.com\/questions\/13848027\/prototype-js-1-6-x-tojson-misbehaves\">\u043e\u0431\u0441\u0443\u0436\u0434\u0435\u043d\u0438\u0435<\/a>, \u0433\u0434\u0435 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f \u044d\u0442\u0443 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u043f\u0440\u043e\u043b\u0435\u0447\u0438\u0442\u044c \u0442\u0430\u043a\u0438\u043c \u0441\u0442\u0440\u0430\u0448\u043d\u0435\u043d\u044c\u043a\u0438\u043c \u043a\u043e\u0434\u043e\u043c:<\/p>\n<pre><code class=\"javascript\">var _json_stringify = JSON.stringify; JSON.stringify = function(value) {     var _array_tojson = Array.prototype.toJSON;     delete Array.prototype.toJSON;     var r=_json_stringify(value);     Array.prototype.toJSON = _array_tojson;     return r; };<\/code><\/pre>\n<p>  \u0421\u0442\u0440\u043e\u0433\u043e \u0433\u043e\u0432\u043e\u0440\u044f, \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u043b\u0435\u0447\u0438\u0442\u044c monkey-patching \u0435\u0449\u0435 \u043e\u0434\u043d\u0438\u043c monkey-patching, \u0447\u0442\u043e \u043d\u0435 \u043a\u0430\u0436\u0435\u0442\u0441\u044f \u043e\u0447\u0435\u043d\u044c \u0445\u043e\u0440\u043e\u0448\u0438\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c. <\/p>\n<p>  \u0422\u0430\u043a \u0447\u0442\u043e \u0438\u0437\u043e\u043b\u044f\u0446\u0438\u044f \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432 \u0432 \u0432\u0435\u0440\u0441\u0442\u043a\u0435 \u0443 \u043d\u0430\u0441 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u0430 \u0438\u0437\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c JS \u0441 \u0442\u0430\u043a\u0438\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u043e\u043c \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u0445\u043e\u0440\u043e\u0448\u043e. <\/p>\n<p>  \u0427\u0442\u043e \u0435\u0449\u0435 \u0443 \u043d\u0430\u0441 \u0431\u044b\u043b\u043e \u0438\u0437 \u0431\u043e\u043d\u0443\u0441\u043e\u0432? \u041d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u0435 \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u0438\u043d\u0433\u0438. \u041a\u043e\u0433\u0434\u0430 \u044f \u0433\u043e\u0432\u043e\u0440\u044e \u043e \u043d\u0438\u0445, \u044f \u0432 \u043f\u0435\u0440\u0432\u0443\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u0438\u043c\u0435\u044e \u0432 \u0432\u0438\u0434\u0443 \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u0438\u043d\u0433 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0445 \u043e\u0448\u0438\u0431\u043e\u043a. \u0415\u0441\u0442\u044c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043c\u043d\u043e\u0433\u043e \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0432 \u0441\u0432\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0438 \u043e\u043d\u0438 \u0431\u0443\u0434\u0443\u0442 \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u0438\u0442\u044c \u0438 \u0430\u0433\u0440\u0435\u0433\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u044d\u043a\u0441\u0435\u043f\u0448\u0435\u043d\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043b\u0443\u0447\u0430\u044e\u0442\u0441\u044f \u0443 \u0432\u0430\u0441 \u0432 \u043a\u043e\u0434\u0435. \u0415\u0441\u043b\u0438 \u0432\u044b \u044d\u0442\u043e \u0435\u0449\u0435 \u043d\u0435 \u0434\u0435\u043b\u0430\u0435\u0442\u0435, \u0442\u043e \u043d\u0430\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u043d\u0430\u0447\u0430\u0442\u044c \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u0438\u0442\u044c \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0435 \u043e\u0448\u0438\u0431\u043a\u0438. \u0412\u044b \u0431\u0443\u0434\u0435\u0442\u0435 \u043d\u0435\u043f\u0440\u0438\u044f\u0442\u043d\u043e \u0443\u0434\u0438\u0432\u043b\u0435\u043d\u044b \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e\u043c \u0431\u0430\u0433\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443 \u0432\u0430\u0441 \u0441\u043b\u0443\u0447\u0430\u044e\u0442\u0441\u044f \u0432 \u043f\u0440\u043e\u0434\u0435 \u0438 \u043b\u043e\u043c\u0430\u044e\u0442 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0441\u0430\u0439\u0442\u043e\u0432 \u0443 \u0432\u0430\u0448\u0438\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439, \u0430 \u0432\u044b \u043e\u0431 \u044d\u0442\u043e\u043c \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0437\u043d\u0430\u0435\u0442\u0435. <\/p>\n<p>  \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0441\u043b\u043e\u043c\u0430\u0442\u044c \u043d\u0430\u0448 \u0432\u0438\u0434\u0436\u0435\u0442, \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c, \u043a\u0430\u043a \u0442\u0430\u043a\u043e\u0439 \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u0438\u043d\u0433 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0438 \u0447\u0442\u043e \u043e\u043d \u043d\u0430\u043c \u0434\u0430\u0441\u0442. <\/p>\n<pre><code class=\"javascript\">    _renderImg() {         const img = document.createElement(\u2018img');         this.img = img;          img.classList.add('doggy-widget__img');         img.alt = 'doggy';         this.container.appendChild(this.img);           this.updateDoggy(img);     }<\/code><\/pre>\n<p>  \u0415\u0441\u043b\u0438 \u043f\u043e\u043c\u043d\u0438\u0442\u0435, \u0443 \u043d\u0430\u0441 \u0431\u044b\u043b \u043c\u0435\u0442\u043e\u0434 renderImg, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u043b \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043c\u044b \u0435\u0433\u043e \u0441\u043b\u043e\u043c\u0430\u0435\u043c, \u0430 \u0438\u043c\u0435\u043d\u043d\u043e \u0443\u0434\u0430\u043b\u0438\u043c \u0442\u0440\u0435\u0442\u044c\u044e \u0441\u0442\u0440\u043e\u0447\u043a\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f img \u043a\u043b\u0430\u0434\u0435\u0442 \u0432 \u043f\u043e\u043b\u0435 \u043d\u0430\u0448\u0435\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430. <\/p>\n<p>  \u0427\u0442\u043e \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0435\u0442? \u041d\u0430\u0447\u0430\u043b\u044c\u043d\u0430\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0430 \u0443 \u043d\u0430\u0441 \u043e\u0442\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442. <br \/>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/uy\/i5\/mr\/uyi5mr31rkunhcvkeeephk24sru.jpeg\"><br \/>  <sup><sub><a href=\"https:\/\/mad-gooze.github.io\/doggy-widget\/script-with-shadow-dom-fixed-bug\/bug.html\">\u0421\u0441\u044b\u043b\u043a\u0430 \u0441\u043e \u0441\u043b\u0430\u0439\u0434\u0430<\/a><\/sub><\/sup><\/p>\n<p>  \u0410 \u0432\u043e\u0442 \u0435\u0441\u043b\u0438 \u043c\u044b \u043d\u0430\u0436\u043c\u0435\u043c \u043d\u0430 \u043a\u043d\u043e\u043f\u043e\u0447\u043a\u0443, \u0442\u043e \u0443\u0432\u0438\u0434\u0438\u043c exception. <\/p>\n<pre><code class=\"javascript\">window.addEventListener('error', (e) =&gt; {     console.log('got error:', e.error);     e.preventDefault(); });<\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/gq\/jk\/r4\/gqjkr497_slrw4-oyx7r-qaan9g.jpeg\"><br \/>  \u041a\u0430\u043a \u044d\u0442\u043e\u0442 exception \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0439\u043c\u0430\u0442\u044c, \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0438 \u0437\u0430\u043b\u043e\u0433\u0438\u0440\u043e\u0432\u0430\u0442\u044c? \u0427\u0442\u043e \u0434\u0435\u043b\u0430\u044e\u0442 \u0442\u0435 \u0441\u0435\u0440\u0432\u0438\u0441\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u044f \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u043b \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u043b\u0430\u0439\u0434\u043e\u0432 \u043d\u0430\u0437\u0430\u0434? \u0415\u0441\u0442\u044c \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0439 \u0438\u0432\u0435\u043d\u0442 &#8216;error&#8217;, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u043d\u0430 \u043e\u0431\u044a\u0435\u043a\u0442\u0435 window. \u041d\u0430 \u043d\u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0434\u043f\u0438\u0441\u0430\u0442\u044c\u0441\u044f \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0438\u0437 \u044d\u0442\u043e\u0433\u043e \u0438\u0432\u0435\u043d\u0442\u0430 \u043e\u0431\u044a\u0435\u043a\u0442 \u043e\u0448\u0438\u0431\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0440\u043e\u0438\u0437\u043e\u0448\u043b\u0430 \u0438 \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0432\u044b \u043d\u0435 \u043e\u0442\u043b\u043e\u0432\u0438\u043b\u0438 \u0447\u0435\u0440\u0435\u0437 try-catch. \u0423 \u0438\u0432\u0435\u043d\u0442\u0430 \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u0437\u0432\u0430\u0442\u044c preventDefault, \u0447\u0442\u043e\u0431\u044b \u0442\u0430\u043a\u0436\u0435 \u0441\u043a\u0440\u044b\u0442\u044c \u043a\u0440\u0430\u0441\u043d\u0443\u044e \u043e\u0448\u0438\u0431\u043a\u0443 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c\u043a\u0435 \u0438 \u043d\u0435 \u043f\u0443\u0433\u0430\u0442\u044c \u0432\u0430\u0448\u0438\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u043d\u0435\u0437\u0430\u043f\u043d\u043e \u0440\u0435\u0448\u0438\u043b\u0438 \u043e\u0442\u043a\u0440\u044b\u0442\u044c devtools. <\/p>\n<p>  \u0412 \u043d\u0430\u0448\u0435\u043c \u0432\u0438\u0434\u0436\u0435\u0442\u0435 \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a. \u041f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 \u0431\u0443\u0434\u0435\u0442 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a. <\/p>\n<pre><code class=\"javascript\">window.addEventListener('unhandledrejection', (e) =&gt; {     console.log('got promise reject:', e.reason);     e.preventDefault(); });<\/code><\/pre>\n<p>  \u041c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0439 \u0431\u043e\u043d\u0443\u0441. \u041f\u043e\u0447\u0442\u0438 \u0442\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u043b\u043e\u0432\u0438\u0442\u044c \u0437\u0430\u0440\u0435\u0434\u0436\u0435\u043a\u0447\u0435\u043d\u043d\u044b\u0435 \u0446\u0435\u043f\u043e\u0447\u043a\u0438 \u043f\u0440\u043e\u043c\u0438\u0441\u043e\u0432. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0438\u0432\u0435\u043d\u0442 unhandledrejection. \u0412 \u043f\u043e\u043b\u0435 reason \u0443 \u044d\u0442\u043e\u0433\u043e \u0438\u0432\u0435\u043d\u0442\u0430 \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u0442\u043e\u0442 \u043e\u0431\u044a\u0435\u043a\u0442, \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u0431\u044b\u043b \u0437\u0430\u0440\u0435\u0434\u0436\u0435\u043a\u0447\u0435\u043d \u0432\u0430\u0448 \u043d\u0435\u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u043d\u044b\u0439 \u043f\u0440\u043e\u043c\u0438\u0441:<\/p>\n<pre><code class=\"javascript\">Promise.reject(new Error('bla'))<\/code><\/pre>\n<p>  \u041f\u043e\u0434\u0443\u043c\u0430\u0435\u043c. \u0415\u0441\u043b\u0438 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043c\u0438\u043a\u0440\u043e\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u044b \u0438 \u0445\u043e\u0442\u0438\u043c \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u0438\u0442\u044c \u043e\u0448\u0438\u0431\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432 \u043a\u0430\u0436\u0434\u043e\u043c \u0438\u0437 \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u044f\u0442, \u0432\u0441\u0435 \u043d\u0430\u0448\u0438 \u0432\u0438\u0434\u0436\u0435\u0442\u044b \u0431\u0443\u0434\u0443\u0442 \u0441\u044b\u043f\u0430\u0442\u044c \u044d\u043a\u0441\u0435\u043f\u0448\u0435\u043d\u044b \u0432 \u043e\u0434\u0438\u043d \u0438 \u0442\u043e\u0442 \u0436\u0435 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/43\/bx\/re\/43bxrezfgdi2ildisbmjdvdvjoi.jpeg\">  <\/p>\n<pre><code class=\"javascript\">window.addEventListener('error', (e) =&gt; {     console.log('got error:', e.error);     e.preventDefault(); });<\/code><\/pre>\n<p>  \u0420\u0435\u043b\u0438\u0437-\u0438\u043d\u0436\u0435\u043d\u0435\u0440 \u0443\u0432\u0438\u0434\u0438\u0442 \u043d\u0430 \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u0438\u043d\u0433\u0430\u0445, \u0447\u0442\u043e \u043f\u043e\u0434\u0441\u043a\u043e\u0447\u0438\u043b\u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0435 \u043e\u0448\u0438\u0431\u043a\u0438, \u0431\u0443\u0434\u0435\u0442 \u0441\u0438\u0434\u0435\u0442\u044c \u0438 \u0434\u0443\u043c\u0430\u0442\u044c, \u043a\u0430\u043a\u043e\u0439 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e \u0440\u0435\u043b\u0438\u0437 \u043a\u0430\u043a\u043e\u0433\u043e \u0432\u0438\u0434\u0436\u0435\u0442\u0430 \u043d\u0443\u0436\u043d\u043e \u043e\u0442\u043a\u0430\u0442\u0438\u0442\u044c, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a-\u0442\u043e \u043e\u0434\u0438\u043d. \u0415\u0433\u043e \u0432 \u0446\u0435\u043b\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0440\u0430\u0437\u0434\u0435\u043b\u044f\u0442\u044c \u043f\u043e \u0441\u0442\u044d\u043a-\u0442\u0440\u0435\u0439\u0441\u0430\u043c, \u043d\u043e \u044d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043d\u0435 \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0443\u0434\u043e\u0431\u043d\u043e. <\/p>\n<p>  \u0422\u0430\u043a \u0447\u0442\u043e \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u0435 \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u0438\u043d\u0433\u0438 \u043f\u0440\u0438 \u0442\u0430\u043a\u043e\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u0435 \u043c\u044b \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c. <\/p>\n<p>  \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0434\u0432\u0435\u0434\u0435\u043c \u043f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043e\u0447\u043d\u044b\u0435 \u0438\u0442\u043e\u0433\u0438. \u0427\u0442\u043e \u043d\u0430\u043c \u0434\u0430\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u0445 \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432?<\/p>\n<p>  \u0423 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u043c\u0438\u043d\u0438\u043c\u0443\u043c \u043d\u0430\u043a\u043b\u0430\u0434\u043d\u044b\u0445 \u0440\u0430\u0441\u0445\u043e\u0434\u043e\u0432. \u041a\u0430\u0436\u0434\u044b\u0439 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043c\u0438\u043a\u0440\u043e\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430, \u043a\u0430\u0436\u0434\u044b\u0439 \u0432\u0438\u0434\u0436\u0435\u0442, \u2014 \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043b\u0438\u0448\u043d\u0438\u0439 \u0441\u043a\u0440\u0438\u043f\u0442. \u041a\u0430\u0436\u0435\u0442\u0441\u044f, \u043c\u0435\u043d\u0435\u0435 \u043d\u0430\u043a\u043b\u0430\u0434\u043d\u043e \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435\u043b\u044c\u0437\u044f. \u041d\u043e \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0443 \u043d\u0430\u0441 \u043f\u043b\u043e\u0445\u0430\u044f \u0438\u0437\u043e\u043b\u044f\u0446\u0438\u044f, \u043c\u044b \u043d\u0430\u0443\u0447\u0438\u043b\u0438\u0441\u044c \u0438\u0437\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0435\u0440\u0441\u0442\u043a\u0443 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Shadow DOM, \u0430 JS \u043c\u044b \u0438\u0437\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0435 \u043c\u043e\u0436\u0435\u043c. \u0418 \u0443 \u043d\u0430\u0441 \u043d\u0435\u0442 \u0445\u043e\u0440\u043e\u0448\u0438\u0445 \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u0445 \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u0438\u043d\u0433\u043e\u0432 \u043e\u0448\u0438\u0431\u043e\u043a. <\/p>\n<p>  \u0414\u043b\u044f \u0447\u0435\u0433\u043e \u0442\u0430\u043a\u0430\u044f \u0438\u0434\u0435\u044f \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u044c\u0441\u044f? \u041e\u043d\u0430 \u0432 \u0446\u0435\u043b\u043e\u043c \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432 \u043c\u0438\u043a\u0440\u043e\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430\u0445. \u041d\u043e \u0435\u0441\u043b\u0438 \u043c\u044b \u0432\u0438\u0434\u0436\u0435\u0442 \u0434\u0435\u043b\u0430\u0435\u043c \u043a\u0430\u043a \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u0443\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u0447\u043a\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441 \u043c\u0438\u043a\u0440\u043e\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430\u043c\u0438, \u043d\u043e \u0438 \u043d\u0430 \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043a\u0438, \u0442\u043e \u044d\u0442\u0430 \u0438\u0434\u0435\u044f \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u0445\u043e\u0440\u043e\u0448\u043e, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043c\u044b \u043d\u0435 \u0437\u0430\u0449\u0438\u0449\u0435\u043d\u044b \u043e\u0442 monkey-patching \u043d\u0430 \u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u0441\u0430\u0439\u0442\u0430\u0445 \u0438 \u043d\u0435 \u043c\u043e\u0436\u0435\u043c \u0445\u043e\u0440\u043e\u0448\u043e \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c \u043e\u0448\u0438\u0431\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u044f\u0442 \u0441 \u043d\u0430\u0448\u0438\u043c \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u043c. <\/p>\n<p>  \u0422\u0435\u043c \u043d\u0435 \u043c\u0435\u043d\u0435\u0435, \u044d\u0442\u0430 \u0438\u0434\u0435\u044f \u0430\u043a\u0442\u0438\u0432\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043e\u0434\u0438\u043d \u0438\u0437 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 \u0434\u043b\u044f \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u043c\u0438\u043a\u0440\u043e\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u043e\u0432 <a href=\"https:\/\/single-spa.js.org\/\">single-spa<\/a> \u043a\u0430\u043a \u0440\u0430\u0437 \u043d\u0430 \u043d\u0435\u0439, \u0432 \u043e\u0431\u0449\u0435\u043c-\u0442\u043e, \u0438 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d. <\/p>\n<p>  \u0427\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c, \u0435\u0441\u043b\u0438 \u043d\u0430\u043c \u044d\u0442\u043e \u0432\u0441\u0435 \u043d\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0438 \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u0431\u043e\u043b\u044c\u0448\u0435 \u0438\u0437\u043e\u043b\u044f\u0446\u0438\u0438? \u0417\u0434\u0435\u0441\u044c \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0441\u0442\u0430\u0440\u0430\u044f \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f iframe. <\/p>\n<h2>&lt;iframe&gt;<\/h2>\n<p>  \u042d\u0442\u043e \u0442\u0435\u0433, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0430 \u0432\u043d\u0443\u0442\u0440\u0438 \u0432\u0430\u0448\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043a\u0438 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0435\u0449\u0435 \u043e\u0434\u0438\u043d \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442. <\/p>\n<pre><code class=\"javascript\">(() =&gt; {     window.DoggyWidget = {         init({ container }) {             const iframe = document.createElement('iframe');                 }     } })();<\/code><\/pre>\n<p>  \u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u0442\u044c \u043d\u0430\u0448 \u0432\u0438\u0434\u0436\u0435\u0442 \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043e\u043d \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b iframe \u0438 \u0438\u0437\u043e\u043b\u044f\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043e\u043d \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442. <\/p>\n<pre><code class=\"javascript\">(() =&gt; {     window.DoggyWidget = {         init({ container }) {             const iframe = document.createElement('iframe');              iframe.style.width = '100%';             iframe.style.height = '100%';              iframe.style.borderWidth = 0;             iframe.style.display = 'block';             iframe.src = 'https:\/\/some-url\/doggy-widget.html';                         }     } })();<\/code><\/pre>\n<p>  \u0412 \u0444\u0430\u0431\u0440\u0438\u043a\u0435 init \u043d\u0430\u0448\u0435\u0433\u043e \u0432\u0438\u0434\u0436\u0435\u0442\u0430 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0442\u044c iframe \u0438 \u043f\u043e\u0432\u0435\u0441\u0438\u0442\u044c \u043d\u0430 \u043d\u0435\u0433\u043e \u0441\u0442\u0438\u043b\u0438. \u041c\u044b \u043f\u043e\u0441\u0442\u0430\u0432\u0438\u043c width \u0438 height 100%, \u0447\u0442\u043e\u0431\u044b \u043e\u043d \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0440\u0430\u0441\u0442\u044f\u0433\u0438\u0432\u0430\u043b\u0441\u044f \u0434\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430, \u043a\u0443\u0434\u0430 \u0435\u0433\u043e \u0432\u0441\u0442\u0430\u0432\u0438\u043b\u0438. \u041c\u044b \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c \u0435\u043c\u0443 display \u0438 \u043f\u043e\u0441\u0442\u0430\u0432\u0438\u043c \u0433\u0440\u0430\u043d\u0438\u0446\u0443 0, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043f\u043e \u0434\u0435\u0444\u043e\u043b\u0442\u0443 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u0440\u0438\u0441\u0443\u044e\u0442 border. <\/p>\n<p>  \u0412\u043d\u0443\u0442\u0440\u0438 iframe \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u043c \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c\u0441\u044f \u043d\u0430\u0448 \u0432\u0438\u0434\u0436\u0435\u0442. <\/p>\n<pre><code class=\"javascript\">(() =&gt; {     window.DoggyWidget = {         init({ container }) {             const iframe = document.createElement(\u2018iframe');              iframe.style.width = '100%';             iframe.style.height = '100%';              iframe.style.borderWidth = 0;             iframe.style.display = 'block';             iframe.src = 'https:\/\/some-url\/doggy-widget.html';              container.appendChild(iframe);                          ...         }     } })();<\/code><\/pre>\n<p>  \u041e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0437\u0430\u0430\u043f\u043f\u0435\u043d\u0434\u0438\u0442\u044c \u044d\u0442\u043e\u0442 iframe \u0432\u043d\u0443\u0442\u0440\u044c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430. <\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/uh\/ld\/lv\/uhldlvhiocr2alfuqmifkw28v38.jpeg\"><br \/>  <sup><sub><a href=\"https:\/\/mad-gooze.github.io\/doggy-widget\/iframe\/widget-iframe.html\">\u0421\u0441\u044b\u043b\u043a\u0430 \u0441\u043e \u0441\u043b\u0430\u0439\u0434\u0430<\/a><\/sub><\/sup><\/p>\n<p>  \u0412\u0441\u0435 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c, \u0432\u0438\u0434\u0436\u0435\u0442 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0442\u044c\u0441\u044f. <\/p>\n<p>  \u0412\u0440\u043e\u0434\u0435 \u0437\u0434\u043e\u0440\u043e\u0432\u043e. \u041c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 iframe, \u0432\u0438\u0434\u0436\u0435\u0442 \u0432 \u043d\u0435\u043c \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u043d\u0435 \u043f\u043e\u0434\u0432\u0435\u0440\u0436\u0435\u043d \u0432\u043b\u0438\u044f\u043d\u0438\u044e \u0434\u0440\u0443\u0433\u043e\u0433\u043e \u043a\u043e\u0434\u0430 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043a\u0435. \u0423 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u043f\u043e\u043b\u043d\u0430\u044f \u0438\u0437\u043e\u043b\u044f\u0446\u0438\u044f, \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u0435 \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u0438\u043d\u0433\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 iframe. <\/p>\n<pre><code class=\"javascript\">declare const DoggyWidget: {     init: ({         container: HTMLElement,     }) =&gt; DoggyWidgetInstance; }  declare interface DoggyWidgetInstance {     destroy(): void;     updateDoggy(): void; }<\/code><\/pre>\n<p>  \u041d\u043e \u043c\u044b \u043a\u043e\u0435 \u043e \u0447\u0435\u043c \u0437\u0430\u0431\u044b\u043b\u0438. \u0423 \u043d\u0430\u0448\u0435\u0433\u043e \u0432\u0438\u0434\u0436\u0435\u0442\u0430 \u0435\u0441\u0442\u044c API. \u0423 \u0438\u043d\u0441\u0442\u0430\u043d\u0441\u0430 \u0435\u0441\u0442\u044c destroy \u0438 updateDoggy. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0438\u0445 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c. <\/p>\n<pre><code class=\"javascript\">destroy() {     this.container.innerHTML = ''; }<\/code><\/pre>\n<p>  destroy \u0431\u0443\u0434\u0435\u0442 \u0441\u0443\u043f\u0435\u0440\u043f\u0440\u043e\u0441\u0442\u043e\u0439. \u041d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u0447\u0438\u0441\u0442\u0438\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440, \u0435\u0441\u043b\u0438 \u0432\u044b \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 \u044d\u0442\u043e\u0433\u043e \u043f\u0430\u0440\u043d\u044f. \u0412 IE 11 \u0438 legacy Edge \u0435\u0441\u0442\u044c \u043d\u0435\u043f\u0440\u0438\u044f\u0442\u043d\u044b\u0439 \u0431\u0430\u0433, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0439 \u0441 \u0442\u0435\u043c, \u0447\u0442\u043e \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 JS, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432\u043d\u0443\u0442\u0440\u0438 \u0444\u0440\u0435\u0439\u043c\u0430, \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0435\u0442 \u0447\u0430\u0441\u0442\u0438\u0447\u043d\u043e \u0436\u0438\u0442\u044c \u043f\u043e\u0441\u043b\u0435 \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f iframe \u0438\u0437 DOM. \u0427\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442 \u0447\u0430\u0441\u0442\u0438\u0447\u043d\u043e? \u0412 \u043d\u0435\u043c \u043b\u043e\u043c\u0430\u0435\u0442\u0441\u044f \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0430\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430, \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u044e\u0442, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0431\u044b\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u043e\u0431\u044a\u0435\u043a\u0442\u044b Date, Object, Array \u0438 \u043f\u0440\u043e\u0447\u0435\u0435. \u041d\u043e \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0439 \u043a\u043e\u0434, \u0441\u0435\u0442 \u0442\u0430\u0439\u043c\u0430\u0443\u0442\u044b, \u0441\u0435\u0442 \u0438\u043d\u0442\u0435\u0440\u0432\u0430\u043b\u044b, \u0440\u0435\u0430\u043a\u0446\u0438\u044f \u043d\u0430 \u0438\u0432\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0442\u0430\u043c \u0431\u044b\u043b\u0430, \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u044e\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c, \u0438 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0432 \u0432\u0430\u0448\u0438\u0445 \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u0438\u043d\u0433\u0430\u0445 \u0432 \u0442\u0430\u043a\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u043e\u0447\u0435\u043d\u044c \u0441\u0442\u0440\u0430\u043d\u043d\u044b\u0435 \u044d\u043a\u0441\u0435\u043f\u0448\u0435\u043d\u044b \u0438\u0437 IE \u0438 legacy Edge \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u0443 \u0432\u0430\u0441 \u0432\u0434\u0440\u0443\u0433 \u043f\u0440\u043e\u043f\u0430\u043b Date, \u043e\u043d \u0441\u0442\u0430\u043b undefined.<\/p>\n<p>  \u0427\u0442\u043e\u0431\u044b \u044d\u0442\u043e \u043e\u0431\u043e\u0439\u0442\u0438, \u043d\u0430\u043c \u043d\u0430\u0448 iframe \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u0435\u0440\u0435\u0434 \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u0435\u043c \u0435\u0433\u043e \u0438\u0437 DOM \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0432\u043e\u0442 \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043f\u043e\u0447\u0438\u0441\u0442\u0438\u0442\u044c. \u0422\u043e\u0433\u0434\u0430 IE 11 \u0438 \u0441\u0442\u0430\u0440\u044b\u0439 Edge \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u0435\u0433\u043e \u0437\u0430\u0434\u0435\u0441\u0442\u0440\u043e\u044f\u0442 \u0438 \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u044f\u0442 \u0432\u0435\u0441\u044c JS-\u043a\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u043d\u0443\u0442\u0440\u0438 \u043d\u0435\u0433\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u043b\u0441\u044f. <\/p>\n<pre><code class=\"javascript\">destroy() {     \/\/ \u0447\u0438\u0441\u0442\u0438\u043c iframe \u0434\u043b\u044f ie11 \u0438 legacy edge      this.iframe.src = '';     this.container.innerHTML = ''; }<\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/2b\/bv\/uq\/2bbvuqne9ryuld8tel50wxitq44.jpeg\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/fq\/qk\/tg\/fqqktg0dypz5lf5bsywzht0xyok.jpeg\"><br \/>  <sup><sub><a href=\"https:\/\/mad-gooze.github.io\/doggy-widget\/iframe\/widget-iframe.html\">\u0421\u0441\u044b\u043b\u043a\u0430 \u0441\u043e \u0441\u043b\u0430\u0439\u0434\u043e\u0432<\/a><\/sub><\/sup><\/p>\n<p>  Proof of concept \u2014 destroy \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442. <br \/>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/dg\/xi\/85\/dgxi859zro2crycvqim3nrksg_s.jpeg\"><br \/>  \u0427\u0442\u043e \u0435\u0449\u0435? \u0423 \u043d\u0430\u0441 \u043e\u0441\u0442\u0430\u043b\u0441\u044f updateDoggy, \u0434\u043b\u044f \u043d\u0435\u0433\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0440\u0438\u0441\u0443\u0435\u0442\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u0444\u0440\u0435\u0439\u043c\u0430. \u0421\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043a\u0430\u043a\u043e\u0435-\u0442\u043e \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u043c\u0435\u0436\u0434\u0443 \u043d\u0430\u0448\u0438\u043c \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u043c \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u043e\u043c, \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u043a\u043e\u043c\u0430\u043d\u0434\u0443 \u0432\u043d\u0443\u0442\u0440\u044c iframe. \u0417\u0434\u0435\u0441\u044c \u0435\u0441\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430. \u0415\u0441\u043b\u0438 iframe \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f \u0441 \u0434\u0440\u0443\u0433\u043e\u0433\u043e \u0445\u043e\u0441\u0442\u0430, \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0437\u0430\u0431\u043b\u043e\u043a\u0438\u0440\u0443\u0435\u0442 \u043b\u044e\u0431\u043e\u0435 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0441 window \u0432\u043d\u0443\u0442\u0440\u0438 \u0444\u0440\u0435\u0439\u043c\u0430 \u0438 \u0432\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a\u0443\u044e \u043e\u0448\u0438\u0431\u043a\u0443. <br \/>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/op\/5f\/pi\/op5fpiwjh49ox_qtflnqoztewci.jpeg\"><br \/>  \u041a\u0430\u043a \u0436\u0435 \u0432\u0441\u0435-\u0442\u0430\u043a\u0438 \u043c\u043e\u0436\u043d\u043e \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c? \u0414\u043b\u044f \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043d\u0443\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c postMessage. \u042d\u0442\u043e API, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0443\u0435\u043c\u0443\u044e \u043a\u043e\u043c\u0430\u043d\u0434\u0443 \u0432\u043d\u0443\u0442\u0440\u044c \u0434\u0440\u0443\u0433\u043e\u0433\u043e window, \u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u044d\u0442\u043e\u0433\u043e window \u043f\u043e\u0434\u043f\u0438\u0441\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043e\u0431\u044a\u0435\u043a\u0442 message, \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0442\u043e, \u0447\u0442\u043e \u0431\u044b\u043b\u043e \u0432 \u043a\u043e\u043c\u0430\u043d\u0434\u0435. \u0418 \u043e\u0442\u0440\u0435\u0430\u0433\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u043d\u0435\u0435. <\/p>\n<pre><code class=\"javascript\">updateDoggy() {     this.iframe.contentWindow         .postMessage({ command: 'updateDoggy' }); }<\/code><\/pre>\n<p>  \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c updateDoggy \u0447\u0435\u0440\u0435\u0437 postMessage. \u0412 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u043c \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0435 \u0443 \u043d\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u0441 \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439 updateDoggy \u0432\u043d\u0443\u0442\u0440\u044c iframe.<\/p>\n<pre><code class=\"javascript\">window.addEventListener('message', (e) =&gt; {     if (e.data.command === 'updateDoggy') {         widget.updateDoggy();     } })<\/code><\/pre>\n<p>  \u0418 \u0432\u043d\u0443\u0442\u0440\u0438 iframe \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0432\u043e\u0442 \u0442\u0430\u043a\u043e\u0439 \u043a\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u044f message, \u0430 \u0435\u0441\u043b\u0438 \u0442\u0430\u043c updateDoggy, \u0442\u043e \u0434\u0435\u0440\u0433\u0430\u0435\u0442 updateDoggy \u0443 \u0432\u0438\u0434\u0436\u0435\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u0443\u0435\u0442 \u043d\u0430\u043c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443. <\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ly\/s9\/b9\/lys9b9thruqfvcsslpu1tuhkmhk.jpeg\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/pi\/wu\/hl\/piwuhlovqm6cpurwtbhljwbzses.jpeg\"><br \/>  <sup><sub><a href=\"https:\/\/mad-gooze.github.io\/doggy-widget\/iframe\/widget-iframe.html\">\u0421\u0441\u044b\u043b\u043a\u0430 \u0441\u043e \u0441\u043b\u0430\u0439\u0434\u043e\u0432<\/a><\/sub><\/sup><\/p>\n<p>  \u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u0447\u0442\u043e \u043d\u0430\u043c \u0434\u0430\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 iframe. \u0412 \u043f\u0435\u0440\u0432\u0443\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u0432\u0441\u0435 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0441 \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0438\u0441\u0443\u0435\u0442\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 iframe, \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u043c. postMessage \u2014 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0439 API. \u0414\u043e \u044d\u0442\u043e\u0433\u043e \u043c\u044b \u043c\u043e\u0433\u043b\u0438 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434\u044b, \u0430 \u0441\u0435\u0439\u0447\u0430\u0441 \u043c\u044b \u044d\u0442\u043e\u0433\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435 \u043c\u043e\u0436\u0435\u043c. <br \/>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/hd\/ww\/aq\/hdwwaqumy5ly891ryuxjuzvodly.jpeg\"><br \/>  \u0421\u043e\u0431\u044b\u0442\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u044f\u0442 \u0432\u043d\u0443\u0442\u0440\u0438 iframe, \u043d\u0430\u0440\u0443\u0436\u0443 \u043d\u0435 \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0442. \u0415\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0440\u0435\u0430\u0433\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0441\u043d\u0430\u0440\u0443\u0436\u0438 \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043a\u043b\u0438\u043a\u043d\u0443\u043b \u0432\u043d\u0443\u0442\u0440\u0438 \u0432\u0438\u0434\u0436\u0435\u0442\u0430, \u0442\u043e \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c postMessage \u043d\u0430\u0432\u0435\u0440\u0445. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c addEventListener \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0443 \u0432\u0430\u0441 \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f \u2014 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0447\u0435\u0440\u0435\u0437 iframe \u043d\u0435 \u0432\u0441\u043f\u043b\u044b\u0432\u0435\u0442. <\/p>\n<p>  \u0423 \u0432\u0430\u0441 \u043f\u043e\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0442\u0440\u0443\u0434\u043d\u043e\u0441\u0442\u0438 \u0441 \u043a\u043e\u043b\u043b\u0431\u044d\u043a\u0430\u043c\u0438. \u0421 \u0445\u043e\u0434\u0443 \u043d\u0435\u043f\u043e\u043d\u044f\u0442\u043d\u043e, \u043a\u0430\u043a\u043e\u0439 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e \u0432\u0438\u0434\u0436\u0435\u0442 \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u043b \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435. \u041f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0438\u043c, \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043a\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0442\u0430\u043a\u0438\u0445 \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432, \u0443 \u0432\u0430\u0441 \u043e\u0434\u0438\u043d \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0439 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a message, \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432 \u043f\u0438\u0448\u0443\u0442 \u0441\u0432\u043e\u0438 \u043f\u043e\u0441\u0442\u043c\u0435\u0441\u0441\u0435\u0434\u0436\u0438 \u0438 \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043a\u0430\u043a-\u0442\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u044f\u0442\u044c, \u0432\u0438\u0434\u0435\u0442\u044c, \u043a\u0430\u043a\u043e\u0439 \u0432\u0438\u0434\u0436\u0435\u0442 \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u043b \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435. \u0417\u0434\u0435\u0441\u044c \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u043f\u0440\u0438\u0434\u0443\u043c\u0430\u0442\u044c \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u044b \u0438\u043b\u0438 \u043d\u0435\u0447\u0442\u043e \u043f\u043e\u0445\u043e\u0436\u0435\u0435. <\/p>\n<p>  \u0418 \u0435\u0449\u0435: iframe \u043d\u0435\u043b\u044c\u0437\u044f \u043f\u0435\u0440\u0435\u0434\u0432\u0438\u0433\u0430\u0442\u044c \u043f\u043e DOM. \u041a\u043e\u0433\u0434\u0430 \u0432\u044b iframe \u0434\u0435\u0442\u0430\u0447\u0438\u0442\u0435 \u0438 \u0430\u0442\u0442\u0430\u0447\u0438\u0442\u0435 \u043e\u0431\u0440\u0430\u0442\u043d\u043e, \u043e\u043d \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f, \u0432\u0438\u0434\u0436\u0435\u0442 \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0442\u044c\u0441\u044f, \u0432\u0441\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u043d \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0434\u043b\u044f \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438, \u0431\u0443\u0434\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u043d\u0435\u043d\u044b \u0437\u0430\u043d\u043e\u0432\u043e. \u0412 \u043e\u0431\u0449\u0435\u043c, \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u043e\u043f\u0442\u0438\u043c\u0430\u043b\u044c\u043d\u043e. <\/p>\n<p>  \u0427\u0442\u043e \u043c\u044b \u0432 \u0438\u0442\u043e\u0433\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c? \u0423 \u043d\u0430\u0441 \u0441\u0438\u043b\u044c\u043d\u043e \u0443\u0441\u043b\u043e\u0436\u043d\u044f\u0435\u0442\u0441\u044f \u043a\u043e\u0434. \u0418 \u0435\u0449\u0435 \u043f\u043e\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043d\u0430\u043a\u043b\u0430\u0434\u043d\u044b\u0435 \u0440\u0430\u0441\u0445\u043e\u0434\u044b. <br \/>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/pj\/og\/qj\/pjogqj0j1q_qrstcax4ym8oghus.jpeg\"><br \/>  \u0415\u0441\u043b\u0438 \u043c\u044b \u0432\u0441\u043f\u043e\u043c\u043d\u0438\u043c, \u043a\u0430\u043a \u0440\u0438\u0441\u043e\u0432\u0430\u043b\u0441\u044f \u043d\u0430\u0448 \u0432\u0438\u0434\u0436\u0435\u0442, \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c\u044b\u0439 \u0447\u0435\u0440\u0435\u0437 \u0441\u043a\u0440\u0438\u043f\u0442, \u044d\u0442\u043e \u044d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b\u043e \u0431\u044b \u0442\u0430\u043a. \u0423 \u043d\u0430\u0441 \u0431\u044b \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u043b\u0430\u0441\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043a\u0430, \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u043b\u0441\u044f CSS, JS. \u0414\u0430\u043b\u044c\u0448\u0435, \u043a\u043e\u0433\u0434\u0430 \u0432\u0438\u0434\u0436\u0435\u0442 \u0440\u0438\u0441\u043e\u0432\u0430\u043b\u0441\u044f \u0431\u044b, \u043a\u0430\u0436\u0434\u044b\u0439 \u0432\u0438\u0434\u0436\u0435\u0442 \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u043b \u0431\u044b \u0434\u043b\u044f \u0441\u0435\u0431\u044f \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443. <\/p>\n<p>  \u0415\u0441\u043b\u0438 \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430\u0448 \u043d\u043e\u0432\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0441 iframes, \u043c\u044b \u0443\u0432\u0438\u0434\u0438\u043c \u0442\u0430\u043a\u043e\u0435. \u0412\u043d\u0443\u0442\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0432\u0438\u0434\u0436\u0435\u0442\u0430 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u0441\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442, \u0443 \u043d\u0430\u0441 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u0441\u044f CSS, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0442\u0430\u043c \u043d\u0443\u0436\u0435\u043d, \u0438 JS, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u043d\u0443\u0442\u0440\u0438 \u044d\u0442\u043e\u0433\u043e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430 \u0438\u0441\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f. <br \/>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/4i\/wr\/wl\/4iwrwlqqj8ec68goakrm6bjihbe.jpeg\"><br \/>  \u0414\u043b\u044f \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0432\u0438\u0434\u0436\u0435\u0442\u0430, \u0434\u043b\u044f \u0432\u0442\u043e\u0440\u043e\u0433\u043e. \u0421\u043a\u043e\u043b\u044c\u043a\u043e \u0443 \u0432\u0430\u0441 \u0438\u0445 \u0431\u0443\u0434\u0435\u0442 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435, \u0441\u0442\u043e\u043b\u044c\u043a\u043e \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u0433\u0440\u0443\u0437\u043e\u043a \u044d\u0442\u0438\u0445 \u0444\u0430\u0439\u043b\u043e\u0432?<br \/>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ph\/cv\/dj\/phcvdjdpya8bs5ijuhsp5rrjol8.jpeg\"><br \/>  <sup><sub><a href=\"https:\/\/developers.google.com\/web\/updates\/2020\/10\/http-cache-partitioning\">\u0421\u0441\u044b\u043b\u043a\u0430 \u0441\u043e \u0441\u043b\u0430\u0439\u0434\u0430<\/a><\/sub><\/sup><\/p>\n<p>  \u0417\u0434\u0435\u0441\u044c \u043c\u043e\u0433\u043b\u043e \u0431\u044b \u043f\u043e\u043c\u043e\u0447\u044c \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435, \u043d\u043e \u043d\u0435\u0434\u0430\u0432\u043d\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u0438\u0437\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u0435\u0448\u0438 \u0434\u0440\u0443\u0433 \u043e\u0442 \u0434\u0440\u0443\u0433\u0430 \u043c\u0435\u0436\u0434\u0443 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u043c\u0438 \u0441\u0430\u0439\u0442\u0430\u043c\u0438. \u042d\u0442\u043e \u043d\u0443\u0436\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0442\u0438\u0442\u044c \u0442\u0440\u0435\u043a\u0438\u043d\u0433 \u043f\u043e\u0441\u0435\u0449\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c \u043e\u0434\u043d\u043e\u0433\u043e \u0441\u0430\u0439\u0442\u0430 \u0441 \u0434\u0440\u0443\u0433\u043e\u0433\u043e. \u0422\u043e \u0435\u0441\u0442\u044c \u0435\u0441\u043b\u0438 \u043d\u0430 \u0441\u0430\u0439\u0442\u0435 \u043d\u043e\u043c\u0435\u0440 1 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043a\u0430\u043a\u0430\u044f-\u0442\u043e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u0447\u043a\u0430, \u0441\u0430\u0439\u0442 \u043d\u043e\u043c\u0435\u0440 2 \u0442\u043e\u0436\u0435 \u043c\u043e\u0436\u0435\u0442 \u0435\u0435 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0447\u0435\u0440\u0435\u0437 Performance API, \u0431\u044b\u043b\u0430 \u043e\u043d\u0438 \u043b\u0430 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u0430 \u0438\u0437 \u043a\u0435\u0448\u0430. \u0415\u0441\u043b\u0438 \u0434\u0430, \u0442\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c, \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e, \u0434\u043e \u044d\u0442\u043e\u0433\u043e \u043f\u043e\u0441\u0435\u0449\u0430\u043b \u0441\u0430\u0439\u0442 \u2116 1 \u0438 \u044d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u043a\u0430\u043a-\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c. \u0411\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u0441\u0435\u0439\u0447\u0430\u0441 \u043e\u0442 \u0442\u0430\u043a\u043e\u0433\u043e \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u0441\u0442\u0430\u0440\u0430\u044e\u0442\u0441\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u0437\u0430\u0449\u0438\u0449\u0430\u0442\u044c. <\/p>\n<p>  \u041a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0438\u0437\u043e\u043b\u044f\u0446\u0438\u044f \u043a\u0435\u0448\u0435\u0439? \u0415\u0441\u043b\u0438 \u0440\u0430\u043d\u044c\u0448\u0435 \u043a\u043b\u044e\u0447\u043e\u043c \u0434\u043b\u044f \u0440\u0435\u0441\u0443\u0440\u0441\u0430 \u0432 \u043a\u0435\u0448\u0435 \u0431\u044b\u043b\u0430 \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u0440\u0435\u0441\u0443\u0440\u0441, \u0442\u043e \u0441\u0435\u0439\u0447\u0430\u0441 \u043a\u043b\u044e\u0447\u043e\u043c \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043a\u043e\u043c\u0431\u0438\u043d\u0430\u0446\u0438\u044f \u0438\u0437 \u0445\u043e\u0441\u0442\u0430, \u0433\u0434\u0435 \u0440\u0435\u0441\u0443\u0440\u0441 \u0431\u044b\u043b \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d, \u0438 \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u0440\u0435\u0441\u0443\u0440\u0441. <\/p>\n<p>  \u041a \u0447\u0435\u043c\u0443 \u044d\u0442\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442, \u0435\u0441\u043b\u0438 \u043c\u044b \u043f\u044b\u0442\u0430\u0435\u043c\u0441\u044f \u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043c\u0438\u043a\u0440\u043e\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u044b \u043d\u0430 \u0432\u0438\u0434\u0436\u0435\u0442\u0430\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u044e\u0442\u0441\u044f \u043a\u0430\u0436\u0434\u044b\u0439 \u0432 \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u043c iframe? <\/p>\n<pre><code class=\"plaintext\">https:\/\/website.ru\/     https:\/\/yastatic.net\/react\/16.8.4\/react-with-dom.min.js      Widget #1         &lt;iframe&gt; https:\/\/widget-1.ru\/             https:\/\/yastatic.net\/react\/16.8.4\/react-with-dom.min.js      Widget #2         &lt;iframe&gt; https:\/\/widget-2.ru\/             https:\/\/yastatic.net\/react\/16.8.4\/react-with-dom.min.js<\/code><\/pre>\n<p>  \u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c, \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u043d\u0430\u0448 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0441\u0430\u0439\u0442, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d React. \u0415\u0441\u0442\u044c \u0432\u0438\u0434\u0436\u0435\u0442 \u043d\u043e\u043c\u0435\u0440 1, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d React \u2014 \u0434\u043e\u043f\u0443\u0441\u0442\u0438\u043c, \u0434\u0430\u0436\u0435 \u0442\u043e\u0442 \u0436\u0435 \u0441\u0430\u043c\u044b\u0439 bundle. \u0418 \u0432\u0438\u0434\u0436\u0435\u0442 \u043d\u043e\u043c\u0435\u0440 2 \u0441 \u0435\u0449\u0435 \u043e\u0434\u043d\u043e\u0433\u043e \u0445\u043e\u0441\u0442\u0430, \u043d\u0430 \u043d\u0435\u043c \u0442\u043e\u0436\u0435 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d React. <br \/>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/xb\/er\/q9\/xberq96ip22yv1eftkch4k-flkw.jpeg\"><br \/>  \u041a\u0430\u0436\u0434\u044b\u0439 \u0437\u0430\u043f\u0440\u043e\u0441 \u0437\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u043e\u0439 \u0432 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043d\u0435 \u043f\u043e\u043f\u0430\u0434\u0435\u0442 \u0432 \u043a\u0435\u0448, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043a\u0435\u0448\u0438 \u0443 \u043d\u0430\u0441 \u0438\u0437\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0438 \u043a\u043b\u044e\u0447\u043e\u043c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043a\u043e\u043c\u0431\u0438\u043d\u0430\u0446\u0438\u044f \u0445\u043e\u0441\u0442\u0430 \u0438 \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u0440\u0435\u0441\u0443\u0440\u0441. \u041d\u0430 \u043a\u0430\u0436\u0434\u0443\u044e \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u0432\u0438\u0434\u0436\u0435\u0442\u0430 \u0443 \u0432\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043f\u0440\u043e\u0441 \u0437\u0430 \u0444\u0430\u0439\u043b\u043e\u043c, \u043f\u0430\u0440\u0441\u0438\u043d\u0433 \u0438 \u0438\u0441\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435, \u0447\u0442\u043e \u0434\u0430\u0435\u0442 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0440\u0430\u0441\u0445\u043e\u0434\u044b \u043f\u043e \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438. <br \/>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ik\/5j\/2s\/ik5j2s4evdhpus7s-bzvlkszgn4.jpeg\"><br \/>  \u0418\u0442\u0430\u043a, \u0447\u0442\u043e \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0441 iframe? \u0423 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u043f\u043e\u043b\u043d\u0430\u044f \u0438\u0437\u043e\u043b\u044f\u0446\u0438\u044f \u00ab\u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432\u00bb \u0432 CSS. \u0415\u0441\u0442\u044c \u043f\u043e\u043b\u043d\u0430\u044f \u0438\u0437\u043e\u043b\u044f\u0446\u0438\u044f JS, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u044b \u043d\u0435 \u0437\u0430\u0432\u0438\u0441\u044f\u0442 \u0434\u0440\u0443\u0433 \u043e\u0442 \u0434\u0440\u0443\u0433\u0430. \u0415\u0441\u0442\u044c \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u0435 \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u0438\u043d\u0433\u0438, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u0433\u043e iframe \u0441\u0432\u043e\u0439 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 window, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043b\u043e\u0432\u0438\u0442\u044c \u043e\u0448\u0438\u0431\u043a\u0438. <\/p>\n<p>  \u041d\u043e \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0441\u0438\u043b\u044c\u043d\u043e \u0443\u0441\u043b\u043e\u0436\u043d\u0438\u043b\u0441\u044f \u043a\u043e\u0434, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043f\u043e\u044f\u0432\u0438\u043b\u0430\u0441\u044c \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e\u0441\u0442\u044c. <\/p>\n<p>  \u041f\u043e\u044f\u0432\u0438\u043b\u0438\u0441\u044c \u043d\u0430\u043a\u043b\u0430\u0434\u043d\u044b\u0435 \u0440\u0430\u0441\u0445\u043e\u0434\u044b \u0437\u0430 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u0430\u043c\u0438, \u0430 \u0438\u043c\u0435\u043d\u043d\u043e \u0437\u0430 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u043e\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0433\u0440\u0443\u0437\u0438\u0442\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 iframe, \u0437\u0430 HTML. \u0418 \u043f\u043e\u044f\u0432\u0438\u043b\u0438\u0441\u044c \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0441 \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c. iframes \u0442\u0430\u043a\u0436\u0435 \u0442\u0440\u0435\u0431\u0443\u044e\u0442 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u044b\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u043d\u0430 \u0440\u0430\u0431\u043e\u0442\u0443, \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u043f\u0430\u043c\u044f\u0442\u044c \u0438 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f. <\/p>\n<p>  \u0412 \u0438\u0442\u043e\u0433\u0435 \u044d\u0442\u043e \u0445\u043e\u0440\u043e\u0448\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442, \u043a\u043e\u0433\u0434\u0430 \u0432\u044b \u0434\u0435\u043b\u0430\u0435\u0442\u0435 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c\u044b\u0439 \u0432\u0438\u0434\u0436\u0435\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u043a\u0430\u0436\u0435\u0442\u0441\u044f \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0438\u0437\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u043d \u0438 \u0431\u0443\u0434\u0435\u0442 \u0438\u043c\u0435\u0442\u044c \u0441\u0432\u043e\u0439 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442. \u0410 \u0434\u043b\u044f \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 \u043c\u0438\u043a\u0440\u043e\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u043e\u0432\u043e\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u0435 \u0438\u0437 \u0442\u0430\u043a\u0438\u0445 \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432 \u044d\u0442\u0430 \u0438\u0434\u0435\u044f \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u0445\u043e\u0440\u043e\u0448\u043e, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0434\u0430\u0435\u0442 \u043e\u0447\u0435\u043d\u044c \u043c\u043d\u043e\u0433\u043e \u043d\u0430\u043a\u043b\u0430\u0434\u043d\u044b\u0445 \u0440\u0430\u0441\u0445\u043e\u0434\u043e\u0432 \u0438 \u0441\u0438\u043b\u044c\u043d\u043e \u0443\u0441\u043b\u043e\u0436\u043d\u044f\u0435\u0442 \u0432\u0441\u0435 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435. <\/p>\n<p>  \u0412\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a, \u0431\u0443\u0434\u0442\u043e \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0434\u0432\u0430 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430: \u043e\u0434\u0438\u043d \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0441\u043a\u0440\u0438\u043f\u0442\u0430, \u043e\u0434\u0438\u043d \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c iframe. <\/p>\n<p>  \u041d\u043e \u0435\u0441\u043b\u0438 \u043f\u043e\u0434\u0443\u043c\u0430\u0442\u044c, \u0442\u043e, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0441\u0430\u043c\u0430\u044f \u0431\u043e\u0301\u043b\u044c\u0448\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u044e\u0442 \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 iframe, \u2014 \u044d\u0442\u043e \u0442\u043e, \u0447\u0442\u043e \u0443 iframe \u043a\u0440\u043e\u0441\u0441-\u0434\u043e\u043c\u0435\u043d\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442, \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u0435\u0442 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435, \u0438\u0437-\u0437\u0430 \u0447\u0435\u0433\u043e \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0449\u0438\u043d\u0430 \u0438 \u0443\u0441\u043b\u043e\u0436\u043d\u044f\u0435\u0442\u0441\u044f \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435. <\/p>\n<p>  \u0417\u0434\u0435\u0441\u044c \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0442\u0430\u043a \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c\u044b\u0439 \u201cfriendly\u201d &lt;iframe&gt;. \u0412\u044b \u0435\u0449\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u0441\u0442\u0440\u0435\u0442\u0438\u0442\u044c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 same-origin &lt;iframe&gt;, \u0438\u043b\u0438 anonymous &lt;iframe&gt;.<\/p>\n<pre><code class=\"javascript\">const globalOne = window;   let iframe = document.createElement('iframe'); document.body.appendChild(iframe); const globalTwo = iframe.contentWindow;<\/code><\/pre>\n<p>  \u0412 \u0447\u0435\u043c \u0438\u0434\u0435\u044f? \u0415\u0441\u0442\u044c \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u0430\u044f \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u2014 \u043d\u0430\u0448 \u0442\u0435\u043a\u0443\u0449\u0438\u0439 window. \u041c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0447\u0435\u0440\u0435\u0437 createElement \u043d\u043e\u0432\u044b\u0439 iframe \u0438 \u0437\u0430\u0430\u043f\u043f\u0435\u043d\u0434\u0438\u0442\u044c \u0435\u0433\u043e \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043a\u0443. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0437\u0430\u043c\u0435\u0442\u044c\u0442\u0435, \u0447\u0442\u043e \u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u044d\u0442\u043e\u0433\u043e \u0444\u0440\u0435\u0439\u043c\u0430 \u043d\u0438\u043a\u0430\u043a\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442 \u043d\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u044e, \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0437\u0430 HTML \u0437\u0434\u0435\u0441\u044c \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430 \u043e\u043a\u0430\u0436\u0435\u0442\u0441\u044f \u043f\u0443\u0441\u0442\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0442\u0443\u0434\u0430 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u043e\u0434\u043b\u043e\u0436\u0438\u0442 \u0431\u0440\u0430\u0443\u0437\u0435\u0440. <\/p>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c contentWindow \u044d\u0442\u043e\u0433\u043e iframe \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c \u043a\u0430\u043a \u0435\u0449\u0435 \u043e\u0434\u0438\u043d \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c. <\/p>\n<p>  foobar.js:  <\/p>\n<pre><code class=\"javascript\">window.someMethod = () =&gt; {...}<\/code><\/pre>\n<p>  \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0434\u0443\u043c\u0430\u0435\u043c, \u0437\u0430\u0447\u0435\u043c. \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0432 \u044d\u0442\u043e\u043c \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0441\u043a\u0440\u0438\u043f\u0442\u044b. <\/p>\n<p>  \u0412\u043e\u0442 \u043d\u0430\u0448 \u0441\u043a\u0440\u0438\u043f\u0442 foobar.js, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u0443\u044e \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u043c\u0435\u0442\u043e\u0434. \u041a\u0430\u043a \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0435\u0433\u043e \u0432\u043d\u0443\u0442\u0440\u044c \u043d\u0430\u0448\u0435\u0433\u043e \u043d\u043e\u0432\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430? \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0441\u043a\u0440\u0438\u043f\u0442, \u0441\u0442\u0430\u0432\u0438\u043c \u0435\u043c\u0443 src \u0438 \u0430\u043f\u043f\u0435\u043d\u0434\u0438\u043c \u0432\u043d\u0443\u0442\u0440\u044c head \u043d\u0430\u0448\u0435\u0433\u043e iframe. <\/p>\n<pre><code class=\"javascript\">const script = document.createElement(script); script.src = 'foobar.js'; globalTwo.head.appendChild(script);<\/code><\/pre>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c, \u0447\u0442\u043e\u0431\u044b \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0441 \u043a\u043e\u0434\u043e\u043c \u0432\u043d\u0443\u0442\u0440\u0438 \u044d\u0442\u043e\u0433\u043e \u0441\u043a\u0440\u0438\u043f\u0442\u0430, \u043d\u0430\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c postMessage, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u0443 \u043d\u0430\u0441 same-origin:<\/p>\n<p>  <s><\/p>\n<pre>globalTwo.postMessage();<\/pre>\n<p><\/s>  <\/p>\n<pre>globalTwo.someMethod();<\/pre>\n<p>  \u041c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u0441\u0430\u043c \u043c\u0435\u0442\u043e\u0434, \u0438 \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c, \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u044d\u0442\u043e \u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u0442\u044c. <\/p>\n<p>  \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u044d\u0442\u0443 \u0438\u0434\u0435\u044e, \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u0442\u044c \u043d\u0430\u0448 \u0432\u0438\u0434\u0436\u0435\u0442 \u0435\u0449\u0435 \u0440\u0430\u0437. <\/p>\n<p>  \u0415\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435, \u043d\u0430\u043c \u043d\u0430\u0434\u043e \u043f\u043e\u043d\u044f\u0442\u044c, \u0433\u0434\u0435 \u0443 \u043d\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u0432\u0435\u0440\u0441\u0442\u043a\u0430. \u0415\u0441\u043b\u0438 \u043f\u043e\u043c\u043d\u0438\u0442\u0435, \u044f \u0441\u043a\u0430\u0437\u0430\u043b, \u0447\u0442\u043e \u0432\u043d\u0443\u0442\u0440\u044c friendly frame \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442 \u043c\u044b \u043d\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c, \u043d\u043e \u0432\u0435\u0440\u0441\u0442\u043a\u0443 \u043d\u0430\u0434\u043e \u0433\u0434\u0435-\u0442\u043e \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c. <\/p>\n<p>  \u0410 \u0432\u0435\u0440\u0441\u0442\u043a\u0443 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0432 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438 \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Shadow DOM. \u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0432\u0437\u044f\u0442\u044c \u043b\u0443\u0447\u0448\u0435\u0435 \u0438\u0437 \u0434\u0432\u0443\u0445 \u043f\u043e\u0434\u0445\u043e\u0434\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u0434\u043e \u044d\u0442\u043e \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u043b\u0438.<\/p>\n<p>  \u041a\u0430\u043a \u0442\u0435\u043f\u0435\u0440\u044c \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0444\u0430\u0431\u0440\u0438\u043a\u0430 \u043d\u0430\u0448\u0435\u0433\u043e \u0432\u0438\u0434\u0436\u0435\u0442\u0430? <\/p>\n<pre><code class=\"javascript\">const iframe = document.createElement('iframe'); document.head.appendChild(iframe);  const script = document.createElement('script'); script.src = 'doggy-widget-inner.js'; const loaded = new Promise((resolve) =&gt; {     script.onload = resolve; });  loaded.then(() =&gt; {     iframe.contentWindow.init(config); }) iframe.contentDocument.head.appendChild(script);<\/code><\/pre>\n<p>  \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0432 \u043d\u0435\u043c iframe, \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c \u0432\u043d\u0443\u0442\u0440\u044c \u044d\u0442\u043e\u0433\u043e iframe \u0441\u043a\u0440\u0438\u043f\u0442 \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c promise, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0437\u0430\u0440\u0435\u0437\u043e\u043b\u0432\u0438\u0442\u0441\u044f, \u043a\u043e\u0433\u0434\u0430 \u044d\u0442\u043e\u0442 \u0441\u043a\u0440\u0438\u043f\u0442 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u0441\u044f. <\/p>\n<p>  \u041f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043e\u043d \u043f\u0440\u043e\u0433\u0440\u0443\u0437\u0438\u043b\u0441\u044f, \u043c\u044b \u0432\u044b\u0437\u043e\u0432\u0435\u043c \u0432\u043d\u0443\u0442\u0440\u0438 \u043d\u0430\u0448\u0435\u0433\u043e \u0432\u0438\u0434\u0436\u0435\u0442\u0430 init \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0434\u0438\u043c \u0435\u0433\u043e config, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0442\u0440\u0438\u0441\u0443\u0435\u0442 \u0432\u0438\u0434\u0436\u0435\u0442 \u0432\u043d\u0443\u0442\u0440\u0438. \u041d\u0430\u043c \u043e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0437\u0430\u0430\u043f\u043f\u0435\u043d\u0434\u0438\u0442\u044c \u0441\u043a\u0440\u0438\u043f\u0442 \u0432 head \u043d\u0430\u0448\u0435\u0433\u043e iframe. <\/p>\n<p>  \u041a\u0430\u043a \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u0442\u0441\u044f doggy-widget-inner.js, \u043a\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432\u043d\u0443\u0442\u0440\u0438 \u0444\u0440\u0435\u0439\u043c\u0430? <\/p>\n<pre><code class=\"javascript\">window.init = (config) =&gt; {     const widget = new Widget(config);     window.widget = widget; };<\/code><\/pre>\n<p>  \u0412 \u043d\u0435\u043c \u0431\u0443\u0434\u0435\u0442 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043a\u043b\u0430\u0441\u0441\u0430 widget, \u0442\u043e\u0447\u043d\u043e \u0442\u0430\u043a\u0430\u044f \u0436\u0435, \u043a\u0430\u043a \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438, \u043a\u043e\u0433\u0434\u0430 \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u043b\u0438 \u043f\u043e\u0434\u0445\u043e\u0434 \u0441\u043e \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u043c \u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435\u043c Shadow DOM. \u0412 \u043d\u0435\u043c \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434 init, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0432\u044b\u0437\u044b\u0432\u0430\u043b\u0438 \u043d\u0430 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u043c \u0441\u043b\u0430\u0439\u0434\u0435 \u0438 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0432\u0438\u0434\u0436\u0435\u0442 \u0438 \u043a\u043b\u0430\u0441\u0442\u044c \u0438\u043d\u0441\u0442\u0430\u043d\u0441 \u0432\u0438\u0434\u0436\u0435\u0442\u0430 \u043f\u0440\u044f\u043c\u043e \u0432 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u0443\u044e \u043e\u0431\u043b\u0430\u0441\u0442\u044c. <\/p>\n<p>  \u041a\u0430\u043a \u0432 \u0438\u0442\u043e\u0433\u0435 \u0432\u0441\u0435 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c? \u0415\u0441\u043b\u0438 \u043c\u044b \u043e\u0442\u0440\u0438\u0441\u0443\u0435\u043c \u0442\u0430\u043a\u0438\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c \u0434\u0432\u0430 \u0432\u0438\u0434\u0436\u0435\u0442\u0430 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043a\u0435, \u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a\u043e\u0435 DOM-\u0434\u0435\u0440\u0435\u0432\u043e. <\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/sv\/el\/45\/svel45sb6akkauxq9qihytui2za.jpeg\"><br \/>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/05\/0v\/-i\/050v-i_gmnjjj7giedjxtgjlcf0.jpeg\"><br \/>  <sup><sub><a href=\"https:\/\/mad-gooze.github.io\/doggy-widget\/friendly-frame\/broken-css.html\">\u0421\u0441\u044b\u043b\u043a\u0430 \u0441\u043e \u0441\u043b\u0430\u0439\u0434\u043e\u0432<\/a><\/sub><\/sup><\/p>\n<p>  \u0414\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0432\u0438\u0434\u0436\u0435\u0442\u0430 \u0443 \u043d\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u0432 \u0445\u044d\u0434\u0435 \u0441\u043a\u0440\u044b\u0442\u044b\u0439 friendly iframe, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0435 \u0432\u0438\u0434\u0438\u0442, \u043d\u043e \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043a\u043e\u0434 \u0432\u043d\u0443\u0442\u0440\u0438 \u043d\u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0438 \u0441 \u043d\u0438\u043c \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c. \u0414\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0432\u0438\u0434\u0436\u0435\u0442\u0430 \u0432 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u043b\u0438, \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f shadow root, \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u0432\u0435\u0440\u0441\u0442\u043a\u0430 \u044d\u0442\u043e\u0433\u043e \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u0432\u0438\u0434\u0436\u0435\u0442\u0430. \u0412\u043e\u0442 \u0434\u043b\u044f \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0432\u0438\u0434\u0436\u0435\u0442\u0430, \u0430 \u0432\u043e\u0442 \u0434\u043b\u044f \u0432\u0442\u043e\u0440\u043e\u0433\u043e. <\/p>\n<p>  \u041a\u043e\u0434 \u0446\u0435\u043b\u0438\u043a\u043e\u043c:<\/p>\n<pre><code class=\"html\">&lt;head&gt;     &lt;iframe&gt;         #document             &lt;html&gt;                 &lt;head&gt;                     &lt;script src=&quot;doggy-widget-inner.js&quot;&gt;&lt;\/script&gt;                 &lt;\/head&gt;                 &lt;body&gt;&lt;\/body&gt;             &lt;\/html&gt;     &lt;\/iframe&gt;     &lt;iframe&gt;         #document             &lt;html&gt;                 &lt;head&gt;                     &lt;script src=&quot;doggy-widget-inner.js&quot;&gt;&lt;\/script&gt;                 &lt;\/head&gt;                 &lt;body&gt;&lt;\/body&gt;             &lt;\/html&gt;     &lt;\/iframe&gt; &lt;\/head&gt;  &lt;body&gt;     &lt;div id=&quot;widget-1&quot;&gt;         #shadow-root             &lt;link rel=&quot;stylesheet&quot; href=&quot;doggy-widget.css&quot;&gt;             &lt;div class=&quot;doggy-widget&quot;&gt;                 &lt;img class=&quot;doggy-widget__img&quot;\/&gt;                 &lt;button class=&quot;doggy-widget__btn&quot;\/&gt;             &lt;\/div&gt;     &lt;\/div&gt;     &lt;div id=&quot;widget-2&quot;&gt;         #shadow-root             &lt;link rel=&quot;stylesheet&quot; href=&quot;doggy-widget.css&quot;&gt;             &lt;div class=&quot;doggy-widget&quot;&gt;                 &lt;img class=&quot;doggy-widget__img&quot;\/&gt;                 &lt;button class=&quot;doggy-widget__btn&quot;\/&gt;             &lt;\/div&gt;     &lt;\/div&gt;      &lt;script src=&quot;doggy-widget.js&quot;&gt;&lt;\/script&gt; &lt;\/body&gt;<\/code><\/pre>\n<p>  \u0427\u0442\u043e \u044d\u0442\u043e\u0442 \u043f\u043e\u0434\u0445\u043e\u0434 \u043d\u0430\u043c \u0434\u0430\u0435\u0442? \u041c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c: <\/p>\n<ul>\n<li>\u041f\u043e\u043b\u043d\u0443\u044e \u0438\u0437\u043e\u043b\u044f\u0446\u0438\u044e \u043d\u0430\u0448\u0438\u0445 \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432 \u0432 CSS, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c Shadow DOM. <\/li>\n<li>\u041f\u043e\u043b\u043d\u0443\u044e \u0438\u0437\u043e\u043b\u044f\u0446\u0438\u044e \u0432 JS, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043a\u043e\u0434 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432\u043d\u0443\u0442\u0440\u0438 \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0433\u043e iframe, \u0438 \u043a\u0430\u043a\u043e\u0439-\u043b\u0438\u0431\u043e monkey-patching \u0432 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u043c \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0435 \u043d\u0430 \u043d\u0435\u0433\u043e \u043d\u0438\u043a\u0430\u043a \u043d\u0435 \u0432\u043b\u0438\u044f\u0435\u0442. <\/li>\n<li>\u041d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u0435 \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u0438\u043d\u0433\u0438, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043a\u043e\u0434 \u0432\u0438\u0434\u0436\u0435\u0442\u0430 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u043e\u043f\u044f\u0442\u044c-\u0442\u0430\u043a\u0438, \u0432 \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u043c window, \u0433\u0434\u0435 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u043b\u0443\u0448\u0430\u0442\u044c \u044d\u043a\u0441\u0435\u043f\u0448\u0435\u043d\u044b. <\/li>\n<li>\u0420\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0435\u0435 \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435, \u0442\u0430\u043a \u043a\u0430\u043a \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 same-origin \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u0438\u0437\u043e\u043b\u0438\u0440\u0443\u0435\u0442 \u043a\u0435\u0448\u0438 \u043c\u0435\u0436\u0434\u0443 \u0432\u0438\u0434\u0436\u0435\u0442\u0430\u043c\u0438. <\/li>\n<\/ul>\n<p>  \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0432\u0441\u0435 \u0435\u0449\u0435 \u0435\u0441\u0442\u044c:<\/p>\n<ul>\n<li>\u041d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0443\u0441\u043b\u043e\u0436\u043d\u0435\u043d\u0438\u0435 \u043a\u043e\u0434\u0430. \u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e\u0439, \u043d\u043e \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u043b\u0443\u0447\u0448\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e\u0435 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435, \u0432 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 \u0441\u0435\u043a\u044c\u044e\u0440\u043d\u043e\u0433\u043e \u0444\u0440\u0435\u0439\u043c\u0430, \u0433\u0434\u0435 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 \u043f\u043e\u0441\u0442\u043c\u0435\u0441\u0441\u0435\u0434\u0436\u0438. <\/li>\n<li>\u041d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u043d\u0430\u043a\u043b\u0430\u0434\u043d\u044b\u0435 \u0440\u0430\u0441\u0445\u043e\u0434\u044b \u2014 \u0437\u0430\u043f\u0440\u043e\u0441 \u0437\u0430 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c js-\u0444\u0430\u0439\u043b\u043e\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u044c iframe. <\/li>\n<li>\u041d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u0432 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0440\u0435\u0441\u0443\u0440\u0441\u0430\u0445. \u0422\u0440\u0435\u0431\u0443\u044e\u0442\u0441\u044f \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0438 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043d\u0430 \u0440\u0430\u0431\u043e\u0442\u0443 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430 iframe, \u043d\u043e \u043e\u043d\u0438 \u0441\u0438\u043b\u044c\u043d\u043e \u043c\u0435\u043d\u044c\u0448\u0435, \u0447\u0435\u043c \u0443 \u0441\u0435\u043a\u044c\u044e\u0440\u043d\u043e\u0433\u043e \u0444\u0440\u0435\u0439\u043c\u0430. <\/li>\n<\/ul>\n<p>  \u0422\u0430\u043a\u0430\u044f \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u044f \u0445\u043e\u0440\u043e\u0448\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0438 \u043a\u043e\u0433\u0434\u0430 \u0432\u044b \u0441\u0442\u0440\u043e\u0438\u0442\u0435 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0432\u0438\u0434\u0436\u0435\u0442, \u0438 \u043a\u043e\u0433\u0434\u0430 \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442\u0435 \u0438\u0437 \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441 \u043c\u0438\u043a\u0440\u043e\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430\u043c\u0438. <\/p>\n<p>  \u041d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u0436\u0434\u0435\u0442 \u043d\u0430\u0441 \u0432 \u0441\u0432\u0435\u0442\u043b\u043e\u043c \u0431\u0443\u0434\u0443\u0449\u0435\u043c. \u0422\u0430\u043c \u043d\u0430\u0441 \u0436\u0434\u0435\u0442 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f <a href=\"https:\/\/github.com\/tc39\/proposal-realms\">Realms API<\/a>. \u041e\u043d\u0430 \u0441\u0435\u0439\u0447\u0430\u0441 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 TC39 \u043d\u0430 Stage 2, \u044d\u0442\u043e draft. \u0410\u043a\u0442\u0438\u0432\u043d\u043e \u0438\u0434\u0435\u0442 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u0430. \u0421\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u0435\u0442\u0441\u044f. \u041d\u0430\u0434\u0435\u0435\u043c\u0441\u044f, \u0447\u0442\u043e \u0441\u043a\u043e\u0440\u043e \u043e\u043d\u0430 \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u0442 \u043d\u0430 stage 3.<\/p>\n<p>  \u0427\u0442\u043e \u043e\u043d\u0430 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0434\u0435\u043b\u0430\u0442\u044c? \u0412\u0441\u043f\u043e\u043c\u043d\u0438\u043c, \u043a\u0430\u043a \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u043b\u0438 friendly frame. \u0423 \u043d\u0430\u0441 \u0431\u044b\u043b \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 globalOne. \u041c\u044b \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u043b\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 iframe, \u0430\u043f\u043f\u0435\u043d\u0434\u0438\u043b\u0438 \u0435\u0433\u043e \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442 \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u043b\u0438 globalTwo \u2014 \u0435\u0449\u0435 \u043e\u0434\u0438\u043d \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u0432\u043d\u0443\u0442\u0440\u0438 \u044d\u0442\u043e\u0433\u043e \u0444\u0440\u0435\u0439\u043c\u0430. <\/p>\n<pre><code class=\"javascript\">const globalOne = window; let iframe = document.createElement('iframe'); document.body.appendChild(iframe); const globalTwo = iframe.contentWindow;<\/code><\/pre>\n<p>\u2193  <\/p>\n<pre><code class=\"javascript\">const globalOne = window; const globalTwo = new Realm().globalThis;<\/code><\/pre>\n<p>  Realms \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u044d\u0442\u043e \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u043d\u0430 \u0442\u0430\u043a\u0443\u044e \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044e. \u041f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u043e\u0432\u044b\u0439 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 Realm. \u0421\u043e\u0437\u0434\u0430\u0432 \u0438\u043d\u0441\u0442\u0430\u043d\u0441 Realm, \u0432\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0435 \u0432\u043d\u0443\u0442\u0440\u0438 \u043d\u0435\u0433\u043e globalThis, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u0440\u0430\u0437 \u0442\u0435\u043c \u0441\u0430\u043c\u044b\u043c \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u043c \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u043e\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043e\u043f\u0442\u0438\u043c\u0430\u043b\u044c\u043d\u0435\u0435, \u0447\u0435\u043c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 iframe. <\/p>\n<p>  \u041a\u0430\u043a \u0432\u043d\u0443\u0442\u0440\u0438 Realm \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u043a\u043e\u0434? \u0427\u0435\u0440\u0435\u0437 \u0432\u044b\u0437\u043e\u0432 \u0438\u043c\u043f\u043e\u0440\u0442\u0430. <\/p>\n<pre><code class=\"javascript\">const realm = new Realm();  const { doSomething } = await realm.import(     \u2018.\/file.js' );  doSomething();<\/code><\/pre>\n<p>  \u0417\u0430\u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u043a\u0430\u043a\u043e\u0439-\u043d\u0438\u0431\u0443\u0434\u044c JS-\u0444\u0430\u0439\u043b, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u0442 \u043c\u0435\u0442\u043e\u0434 doSomething. \u0415\u0433\u043e \u0441\u0440\u0430\u0437\u0443 \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u0432\u0430\u0442\u044c, \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0432 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 Realm \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e \u043e\u0442 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043a\u0438. <\/p>\n<p>  \u0423 \u044d\u0442\u043e\u0433\u043e API \u0434\u0430\u0436\u0435 \u0435\u0441\u0442\u044c \u043f\u043e\u043b\u0438\u0444\u0438\u043b\u044c\u0447\u0438\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 <a href=\"https:\/\/github.com\/Agoric\/realms-shim\">\u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d<\/a> \u043a\u0430\u043a \u0440\u0430\u0437 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c friendly frame. \u041f\u0440\u0430\u0432\u0434\u0430, \u043f\u043e\u043b\u0438\u0444\u0438\u043b, \u043f\u043e\u0445\u043e\u0436\u0435, \u0441\u0442\u0430\u043b deprecated. \u0422\u0430\u043c \u0433\u043e\u0434\u0430 \u0434\u0432\u0430 \u0443\u0436\u0435 \u043d\u0435 \u0431\u044b\u043b\u043e \u043a\u043e\u043c\u043c\u0438\u0442\u043e\u0432, \u0438 \u043e\u043d \u0441\u0438\u043b\u044c\u043d\u043e \u043e\u0442\u0441\u0442\u0430\u043b \u043e\u0442 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u0434\u0440\u0430\u0444\u0442\u0430 \u0441\u043f\u0435\u043a\u0438. \u041d\u043e \u043d\u0430\u0434\u0435\u044e\u0441\u044c, \u0441 \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u0435\u043c \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u0435\u0433\u043e \u043e\u0436\u0438\u0432\u044f\u0442. <\/p>\n<h2>\u0418\u0442\u043e\u0433\u0438<\/h2>\n<p>  \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u043c\u0438\u043a\u0440\u043e\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u0441 \u0443\u043c\u043e\u043c, \u0442\u043e\u043b\u044c\u043a\u043e \u0435\u0441\u043b\u0438 \u0432\u0430\u043c \u044d\u0442\u043e \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0443\u0436\u043d\u043e. \u0412\u044b\u0431\u0438\u0440\u0430\u0439\u0442\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0443\u044e \u0432\u0430\u043c \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e. \u0418 \u0441\u043b\u0435\u0434\u0438\u0442\u0435 \u0437\u0430 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f\u043c\u0438. \u042d\u0442\u0430 \u0442\u0435\u043c\u0430\u0442\u0438\u043a\u0430 \u0430\u043a\u0442\u0438\u0432\u043d\u043e \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u0435\u0442\u0441\u044f, \u0432 \u0431\u0443\u0434\u0443\u0449\u0435\u043c \u0443 \u043d\u0430\u0441 \u043f\u043e\u044f\u0432\u044f\u0442\u0441\u044f \u0431\u043e\u043b\u0435\u0435 \u0443\u0434\u043e\u0431\u043d\u044b\u0435 \u0441\u043f\u043e\u0441\u043e\u0431\u044b \u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043c\u0438\u043a\u0440\u043e\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u044b. \u0421\u043f\u0430\u0441\u0438\u0431\u043e!<\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/company\/yandex\/blog\/554568\/\"> https:\/\/habr.com\/ru\/company\/yandex\/blog\/554568\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\">\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043e \u043c\u0438\u043a\u0440\u043e\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430\u0445 \u0438 \u043e \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c\u044b\u0445 \u0432\u0438\u0434\u0436\u0435\u0442\u0430\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435, \u043f\u043e \u0441\u0443\u0442\u0438, \u0431\u044b\u043b\u0438 \u043f\u0440\u0435\u0434\u0448\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u0438\u043a\u0430\u043c\u0438 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438 \u043c\u0438\u043a\u0440\u043e\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u043e\u0432. \u0412 \u0434\u043e\u043a\u043b\u0430\u0434\u0435 \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u043b \u043e \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u0445 \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u0432\u0438\u0434\u0436\u0435\u0442\u044b \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u043e\u0431 \u0438\u0445 \u043f\u043b\u044e\u0441\u0430\u0445 \u0438 \u043c\u0438\u043d\u0443\u0441\u0430\u0445 \u0441 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f \u0438\u0437\u043e\u043b\u044f\u0446\u0438\u0438 \u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u043a\u043e\u0434\u0430, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043e \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u0445 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u0432\u0438\u0434\u0436\u0435\u0442\u044b \u0432 \u043c\u0438\u043a\u0440\u043e\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u043d\u043e\u0439 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0435.<\/p>\n<div class=\"oembed\"><iframe allowfullscreen id=\"60940000182877b5cb65a668\" src=\"https:\/\/embedd.srv.habr.com\/iframe\/60940000182877b5cb65a668\"><\/iframe><\/div>\n<p>\u2014 \u0412\u0441\u0435\u043c \u043f\u0440\u0438\u0432\u0435\u0442! \u041c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u041b\u0435\u0448\u0430. \u042f \u0445\u043e\u0447\u0443 \u0441 \u0432\u0430\u043c\u0438 \u0441\u0435\u0433\u043e\u0434\u043d\u044f \u043e\u0431\u0441\u0443\u0434\u0438\u0442\u044c \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u00ab\u043f\u0435\u0440\u0435\u0445\u0430\u0439\u043f\u043b\u0435\u043d\u043d\u0443\u044e\u00bb \u0442\u0435\u043c\u0443 \u2014 \u043c\u0438\u043a\u0440\u043e\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u044b.   <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-322716","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/322716","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=322716"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/322716\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=322716"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=322716"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=322716"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}