将Vuetify依赖项添加到我的项目中会产生SecurityError:CSStyleSheet.css规则getter



我想实现一个Vue应用程序,在新窗口中打开CKEditor组件。我使用本文中的方法成功地实现了它。我还实现了一个Codesandbox,展示了工作示例。

现在,当我使用vue add vuetify添加vuetify的依赖项时,CKEditor窗口缺少CSS,浏览器控制台(Chrome或Firefox(显示CORS错误:

[Vue warn]: Error in callback for watcher "open": "SecurityError: CSSStyleSheet.cssRules getter: Not allowed to access cross-origin stylesheet"

(不幸的是,我无法正确地将vuetify依赖项添加到我的Codesandbox中——一旦我添加了依赖项,我就会出现编译错误。(

经过进一步调查,Vuetify插入了两个对外部样式表的引用:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">

在window.open((之后,调用函数copyStyles((将所有CSS转移到新窗口中。但是,由于有两个外部CSS引用,document.stylesheet.cssrules.get((失败,并出现CORS错误。由于这两个引用位于所有样式表的开头,copyStyles((函数终止,新窗口将丢失所有样式表。

为了避免这种情况,并将其他样式表放在新窗口中,只需在函数copyStyles((中进行简单的try/catch就足够了。

相关内容

最新更新