Jquery对话框在注入时不能正确显示 [英] Jquery dialog not displaying correctly when injected

问题描述

我正在制作Chrome扩展程序，并且在用户点击页面上的某个元素时尝试注入Jquery。当我尝试通过Jquery创建对话框时：

  var box = document.createElement（'div'）; 
 box.id ='box'
 box.title ='hello'
 document.body.appendChild（box）; 
  

然后

  $（ ＃箱）对话框（）。 
  

仅显示关闭按钮以及旁边的文字。我不确定它为什么不显示完整的对话框。奇怪的是，它也因地点而异。因此，如果我加载SO并调用对话框，则会出现：

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

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

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom
https://developers.google.com/网络/更新/ 2013/09 /对话框-ELE ment-Modals-made-easy

I'm making a Chrome extension and I'm trying to inject Jquery when the user clicks an element on the page. When I try to create a dialog via Jquery by doing:

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

Then

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

Only the close button shows up, along with the text placed next to it. I'm not sure why it's not displaying the full dialog box. The weird thing is that it also varies from site to site. So if I load SO and call the dialog, this appears:

But if I load reddit, this appears:

It seems that the injected dialog is inheriting properties from the websites that I am injecting it into. I'd like to inject it and have it display the default box if possible. The only time it actually shows the default box is if I inject it into the Jquery index.html sample page that they provide:

I have jquery-ui.min.css, jquery-ui.min.js, and jquery.min.js all in the extension's directory. It works when I try to load their sample page and inject the dialog there, but not on other websites. If anyone can help fix this, I'd really appreciate it.

Thanks

解决方案

The only way to completely isolate your styles from the page is using Shadow DOM (which was shipped by Chrome in 2013). You can also use the Dialog element, so Jquery is not even needed.

let shadow
try {
 shadow = document.body.attachShadow({ mode: "open" })
 shadow.appendChild(document.createElement("slot"))
} catch(error) {
 shadow = document.body.createShadowRoot()
 shadow.appendChild(document.createElement("content"))
}
let dialog = document.createElement("dialog")
dialog.innerHTML = `
 Test Dialog<br><br>
 <button>Close</button>
`
shadow.appendChild(dialog)
dialog.querySelector("button").addEventListener("click", function() {
 dialog.remove()
})
dialog.showModal() //or show()

References:

https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom https://developers.google.com/web/updates/2013/09/dialog-element-Modals-made-easy

这篇关于Jquery对话框在注入时不能正确显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！