Я показываю html на странице с помощью Ajax. Я хочу, чтобы добавленный css не влиял на всю страницу

#html #css #scope #styles

Вопрос:

Я добавляю html с помощью Ajax в div. Однако поле во входящих данных влияет на всю страницу. Я просто хочу, чтобы он работал внутри этого div. ajax-данные =gt;

 var data = [  {  "_id": 1,  "htmldata": "lt;html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40"gt;lt;headgt;rnlt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"gt;lt;meta name="Generator" content="Microsoft Word 15 (filtered medium)"gt;lt;stylegt;lt;!--rn/* Font Definitions */rn@font-facernt{font-family:"Cambria Math";rntpanose-1:2 4 5 3 5 4 6 3 2 4;}rn@font-facernt{font-family:Calibri;rntpanose-1:2 15 5 2 2 2 4 3 2 4;}rn@font-facernt{font-family:"Segoe UI";rntpanose-1:2 11 5 2 4 2 4 2 2 3;}rn@font-facernt{font-family:"Segoe UI Semibold";rntpanose-1:2 11 7 2 4 2 4 2 2 3;}rn/* Style Definitions */rnp.MsoNormal, li.MsoNormal, div.MsoNormalrnt{margin:0cm;rntfont-size:11.0pt;rntfont-family:"Calibri",sans-serif;rntmso-fareast-language:EN-US;}rna:link, span.MsoHyperlinkrnt{mso-style-priority:99;rntcolor:#0563C1;rnttext-decoration:underline;}rnspan.E-postaStili18rnt{mso-style-type:personal-compose;rntfont-family:"Arial",sans-serif;rntcolor:#662D91;rntfont-weight:normal;rntfont-style:normal;rnttext-decoration:none none;}rn.MsoChpDefaultrnt{mso-style-type:export-only;rntfont-size:10.0pt;}rn@page WordSection1rnt{size:612.0pt 792.0pt;rntmargin:70.85pt 70.85pt 70.85pt 70.85pt;}rndiv.WordSection1rnt{page:WordSection1;}rn--gt;lt;/stylegt;lt;!--[if gte mso 9]gt;lt;xmlgt;rnlt;o:shapedefaults v:ext="edit" spidmax="1026" /gt;rnlt;/xmlgt;lt;![endif]--gt;lt;!--[if gte mso 9]gt;lt;xmlgt;rnlt;o:shapelayout v:ext="edit"gt;rnlt;o:idmap v:ext="edit" data="1" /gt;rnlt;/o:shapelayoutgt;lt;/xmlgt;lt;![endif]--gt;lt;/headgt;lt;body lang="TR" link="#0563C1" vlink="#954F72" style="word-wrap:break-word"gt;lt;div class="WordSection1"gt;lt;p class="MsoNormal"gt;lt;span style="font-size:9.0pt;font-family:amp;quot;Arialamp;quot;,sans-serif;color:#662D91"gt;lt;o:pgt;amp;nbsp;lt;/o:pgt;lt;/spangt;lt;/pgt;lt;divgt;lt;p class="MsoNormal"gt;lt;span style="color:#5F5F5F"gt;________________________________________________________________________________lt;/spangt; lt;o:pgt;lt;/o:pgt;lt;/pgt;lt;/divgt;lt;divgt;lt;div style="margin-top:18.0pt;margin-bottom:15.0pt"gt;lt;p class="MsoNormal"gt;lt;span style="font-size:18.0pt;font-family:amp;quot;Segoe UIamp;quot;,sans-serif;color:#252424"gt;Microsoft Teams toplantısılt;/spangt;lt;span style="font-family:amp;quot;Segoe UIamp;quot;,sans-serif;color:#252424"gt; lt;o:pgt;lt;/o:pgt;lt;/spangt;lt;/pgt;lt;/divgt;lt;div style="margin-bottom:15.0pt"gt;lt;divgt;lt;p class="MsoNormal"gt;lt;bgt;lt;span style="font-size:10.5pt;font-family:amp;quot;Segoe UIamp;quot;,sans-serif;color:#252424"gt;Bilgisayarınızda veya mobil uygulamanızda katılınlt;/spangt;lt;/bgt;lt;bgt;lt;span style="font-family:amp;quot;Segoe UIamp;quot;,sans-serif;color:#252424"gt; lt;o:pgt;lt;/o:pgt;lt;/spangt;lt;/bgt;lt;/pgt;lt;/divgt;lt;p class="MsoNormal"gt;lt;span style="font-family:amp;quot;Segoe UIamp;quot;,sans-serif;color:#252424"gt;lt;a href="https://teams.microsoft.com/l/meetup-join/19:meeting_MGRmM…,"Oid"#43a"0ba952d6-f186-4885-8cca-50b5050a4936"}" target="_blank"gt;lt;span style="font-size:10.5pt;font-family:amp;quot;Segoe UI Semiboldamp;quot;,sans-serif;color:#6264A7"gt;Toplantıya katılmak için buraya tıklayınlt;/spangt;lt;/agt; lt;o:pgt;lt;/o:pgt;lt;/spangt;lt;/pgt;lt;/divgt;lt;div style="margin-top:15.0pt;margin-bottom:18.0pt"gt;lt;p class="MsoNormal"gt;lt;span style="font-family:amp;quot;Segoe UIamp;quot;,sans-serif;color:#252424"gt;lt;a href="https://aka.ms/JoinTeamsMeeting" target="_blank"gt;lt;span style="font-size:10.5pt;color:#6264A7"gt;Daha Fazla Bilgi Edininlt;/spangt;lt;/agt; | lt;a href="https://teams.microsoft.com/meetingOptions/?organizer234Id=0ba9…2E5ZDU2340OTUxOWZl@thread.v2amp;amp;messageId=0amp;amp;language=tr-TR" target="_blank"gt;lt;span style="font-size:10.5pt;color:#6264A7"gt;Toplantı seçeneklerilt;/spangt;lt;/agt; lt;o:pgt;lt;/o:pgt;lt;/spangt;lt;/pgt;lt;/divgt;lt;/divgt;lt;divgt;lt;p class="MsoNormal"gt;lt;span style="color:#5F5F5F"gt;________________________________________________________________________________lt;/spangt; lt;o:pgt;lt;/o:pgt;lt;/pgt;lt;/divgt;lt;p class="MsoNormal"gt;lt;span style="font-size:9.0pt;font-family:amp;quot;Arialamp;quot;,sans-serif;color:#662D91"gt;lt;o:pgt;amp;nbsp;lt;/o:pgt;lt;/spangt;lt;/pgt;lt;/divgt;lt;/bodygt;lt;/htmlgt;"  } ]  =gt;gt;   lt;stylegt;lt;!--rn/* Font Definitions */rn@font-facernt{font-family:"Cambria Math";rntpanose-1:2 4 5 3 5 4 6 3 2 4;}rn@font-facernt{font-family:Calibri;rntpanose-1:2 15 5 2 2 2 4 3 2 4;}rn@font-facernt{font-family:"Segoe UI";rntpanose-1:2 11 5 2 4 2 4 2 2 3;}rn@font-facernt{font-family:"Segoe UI Semibold";rntpanose-1:2 11 7 2 4 2 4 2 2 3;}rn/* Style Definitions */rnp.MsoNormal, li.MsoNormal, div.MsoNormalrnt{margin:0cm;rntfont-size:11.0pt;rntfont-family:"Calibri",sans-serif;rntmso-fareast-language:EN-US;}rna:link, span.MsoHyperlinkrnt{mso-style-priority:99;rntcolor:#0563C1;rnttext-decoration:underline;}rnspan.E-postaStili18rnt{mso-style-type:personal-compose;rntfont-family:"Arial",sans-serif;rntcolor:#662D91;rntfont-weight:normal;rntfont-style:normal;rnttext-decoration:none none;}rn.MsoChpDefaultrnt{mso-style-type:export-only;rntfont-size:10.0pt;}rn@page WordSection1rnt{size:612.0pt 792.0pt;rntmargin:70.85pt 70.85pt 70.85pt 70.85pt;}rndiv.WordSection1rnt{page:WordSection1;}rn--gt;lt;/stylegt;   

=gt; jquery

 $.ajax({  url: "",  type: "get",  data: {  },  beforeSend: function () {   },  success: function (response) {  console.log(response)    $("#zxc123").append(`  lt;div style="border:10px solid red; margin-bottom:20px"gt;${response.data[i].htmldata}lt;/divgt;   `)  },  error: function (xhr) {  }  });   

=gt; html

 lt;agt;Testlt;agt; lt;div id="zxc123"gt;lt;/divgt;  

Комментарии:

1. Люди никоим образом не будут пытаться расшифровать то, что происходит в этой огромной строке данных, но в качестве обходного пути вы рассматривали возможность использования iframe?

2. Я не хочу использовать iframes, чтобы не нарушать обычный поток. В vue js элементам стиля может быть присвоено свойство области видимости, но html не поддерживает это свойство, за исключением firefox.