Javascript Jquery对话框在注入时未正确显示

我正在做一个Chrome扩展，当用户单击页面上的一个元素时，我尝试注入Jquery。当我尝试通过Jquery创建对话框时，请执行以下操作：

var box = document.createElement('div');
box.id = 'box'
box.title = 'hello'
document.body.appendChild(box);

然后

只有“关闭”按钮以及旁边的文本显示。我不知道为什么它没有显示完整的对话框。奇怪的是，它也因站点而异。因此，如果我加载So并调用该对话框，将显示：

但如果我加载reddit，则会显示：

似乎注入的对话框继承了我将其注入的网站的属性。我想注入它，如果可能的话，让它显示默认框。它实际显示默认框的唯一时间是，如果我将其插入到Jquery index.html示例页面中，它们提供：

我在扩展的目录中有jquery-ui.min.css、jquery-ui.min.js和jquery.min.js。当我尝试加载他们的示例页面并在那里插入对话框时，它会起作用，但在其他网站上则不会。如果有人能帮我解决这个问题，我会非常感激

---

谢谢

如果您要向页面中注入任何代码，那么您将不得不处理已经存在的任何代码。例如，当您注入自己的jQuery而不采取某些额外步骤时，您正在破坏页面的现有jQuery（假设它有一个jQuery）。这样做可能会破坏页面功能

---

目前还没有一种方法可以将CSS与页面CSS完全隔离。您所能做的最好的事情是为对话框最外层的元素创建一个可能唯一的id，并更改注入的CSS，以便所有规则都以前缀匹配此id。您可能还需要一些特殊的重置规则来重置该id，以覆盖页面正在进行的任何操作。

将样式与页面完全隔离的唯一方法是使用阴影DOM（Chrome于2013年发布）。您还可以使用Dialog元素，因此甚至不需要Jquery

let shadow
试一试{
shadow=document.body.attachShadow（{mode:“open”}）
appendChild（document.createElement（“slot”））
}捕获（错误）{
shadow=document.body.createShadowRoot（）
appendChild（document.createElement（“内容”））
}
让dialog=document.createElement（“dialog”）
dialog.innerHTML=`
测试对话框


关
`
shadow.appendChild（对话框）
dialog.querySelector（“按钮”）.addEventListener（“单击”，函数）（）{
dialog.remove（）
})
dialog.showmodel（）//或show（）

我明白了，谢谢您的输入。那么，您是否建议完全不要使用JQuery通过Chrome扩展在现有网页（使用JQuery）上创建对话框小部件？如果是，您建议如何实现这一目标？再次感谢。@Zuhayr您可以使用自己的jQuery，只需采取步骤隔离它。例如，jQuery提供了一些可以用来帮助实现这一点的工具。对于CSS，正如我所说的，没有一个完美的方法来隔离它，但是从一个可能唯一的id开始所有的规则应该可以最小化这种影响。您从扩展注入的脚本有自己的作用域，可以与网页上已有的任何jQuery非常愉快地共存。你意味着冲突将成为规则，而事实上，你很少需要考虑它。当然，如果扩展和页面都试图设置dom的同一元素，那么它们可能会发生冲突——last将获胜。即使是事件处理程序，在大多数情况下也能正常工作，不会产生冲突。不需要使用$.noConflict（）-即使使用不同的versions@TroyWray正在加载jQuery浏览器

window.$

和

window.jQuery

。页面通常假定

窗口。$

是它们加载的jQuery，而不是其他jQuery。如果浏览器插件将jQuery注入到页面中，并且没有使用

$.noConflict（true）

，那么页面的javascript很有可能会崩溃。同样，jQuery插件通常只对在插件首次初始化时与

$

关联的jQuery可用。我的经验是，不同版本的Jquery之间经常会有冲突，特别是在考虑1.x版本时。是的，但这个问题是关于chrome扩展的，而这不会发生，因为扩展中的Jquery，或者扩展本身没有访问与页面Jquery和javascript相同的窗口对象的权限。它有自己的窗口对象。

$("#box").dialog();