一种限制JavaScript/CSS范围的方法

A way of limiting the scope the JavaScript/CSS?

本文关键字：CSS 范围 方法 JavaScript 一种      更新时间：2023-09-26

问题声明：我需要找到一个解决方案，让JavaScript和CSS不会与HTML页面上运行的其他脚本（小部件）发生冲突。

建议的解决方案有人知道如何限制JavaScript的作用域吗？我对有两种了解

  1. 使用IFrame加载小部件
  2. 使用Frameset加载小部件

使用这两个选项，它可以永久消除任何类型的JavaScript或CSS冲突。有人知道其他办法吗？

当在同一页面上包含多个小部件/插件/库时，它们之间总是有冲突的可能性。显然，唯一万无一失的解决方案是使用iframe，但由于seo目的，或者小部件需要做的事情比iframe中能做的更多，这通常并不理想。

没有办法保证一个小部件不会与另一个发生冲突，除非你自己编写小部件时考虑到了这种可能性（当然，除了使用iframe）

名称间距是避免css和js之间冲突的常用技术。从css的角度来看，这只是意味着在小部件的容器元素上使用一个id或类，并在插件使用的每个样式中使用该类（但请注意，由于css的性质，这并不能绝对保证某些东西不会发生冲突。）在js中，这意味着将所有方法和变量存储在只能从window上的单个唯一属性访问的私有范围内，类似于jquery定义window.jQuery的方式。

.myWidget .header {...}
.myWidget .footer {...}
.myWidget .header a {...}

和

(function(window){
    function doSomething() {...}
    function doSomethingElse() {...}
    window.myWidget = {
        fn1: doSomething,
        fn2: doSomethingElse
    };
}(window);
myWidget.fn1();

现在可以开始使用一些非常酷的东西了@KevinB对当前和上一代浏览器的回答是正确的（+1'ed），但我敦促您开始研究web组件，它将完全按照您的意愿隔离您的"小部件"。

好消息是，您现在可以使用谷歌的Polymer库/polyfill从今天开始使用web组件。

相关文章：