我已经使用教程为我的网站创建了一个小部件。
现在需要将此小部件放入一个复杂的页面中，该页面包含重要标签（如*，body，ul和li）上的现有CSS规则。
有没有办法将这个小部件（目前是一个带有html，css和javascript的单独页面）放入我的网页，而网页上没有应用所有自己的CSS？
答案 0 :(得分：2)
有没有办法将这个小部件（目前是一个带有html，css和javascript的单独页面）放入我的网页，而网页上没有应用所有自己的CSS？
最简单的方法是使用iframe。
如果您想要嵌入式窗口小部件，最明智的做法是在窗口小部件的标记中指定内联的CSS属性。这通常是不好的做法，但在这里是正确的。
例如，查看Facebook Profile badge（您需要成为Facebook用户才能看到它）的样子：
<!-- Facebook Badge START --><a href="http://www.facebook.com/pekkagaiser" target="_TOP" style="font-family: "lucida grande",tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal; font-style: normal; font-weight: normal; color: #3B5998; text-decoration: none;" title="Pekka Gaiser">Pekka Gaiser</a><br/><a href="http://www.facebook.com/pekkagaiser" target="_TOP" title="Pekka Gaiser"><img src="http://badge.facebook.com/badge/1238473725.2447.1697336437.png" width="120" height="239" style="border: 0px;" /></a><br/><a href="http://www.facebook.com/badges/" target="_TOP" style="font-family: "lucida grande",tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal; font-style: normal; font-weight: normal; color: #3B5998; text-decoration: none;" title="Make your own badge!">Create Your Badge</a><!-- Facebook Badge END -->
他们很可能已经对此进行了大量测试，因此他们在代码中设置了CSS属性，我建议也在你的小部件中进行设置。
答案 1 :(得分：1)
可以用IFrame完成，但我不会推荐。 IFrame很乱，它们通常不能按预期工作。有些浏览器会阻止它们，有些浏览器根本不支持它们，并且与IFrame页面中的页面进行交互非常困难。
最干净的方法是将小部件包装在一个额外的div中，其id为widgetwrapper。然后使用#widgetwrapper [space]为每个css规则添加前缀。这样，小部件中的css不会影响页面的其余部分。确保将最后一个小部件的css放在css中。如果仍有页面规则弄乱您的小部件，请在小部件css中覆盖它们。