Question

我试图通过Greasemonkey / Tampermonkey用户脚本或浏览器控制台在页面上添加jQuery对话框。在我添加jQuery和jQuery UI脚本之后，我尝试运行以下代码，但它通常会导致对话框透明并且样式未在某些页面上正确应用（通常在他们使用javascript时也是如此）。知道如何使这个普遍可用吗？

$('head').append("<link rel='stylesheet' href='http://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css'>"+
                 "<link rel='stylesheet' href='http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css'>");

$('body').append('<div id="testDialog">Test</div>');

$( '#testDialog' ).dialog();

Result

示例用户 - 您可以在https://jqueryui.com/support/

上查看问题

// ==UserScript==
// @name        Test
// @namespace   namespace21932193210
// @require  http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js
// @require  https://code.jquery.com/ui/1.12.1/jquery-ui.js
// @include     https://jqueryui.com/support/
// @version     1
// ==/UserScript==

$('head').append('<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">'+
                 '<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">'+
                 '<style id="userScriptCss" type=\'text/css\'>' +
                 '@import url("http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css");'+
                 '@import url("http://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css");'+
                 '</style>');

$('body').append('<div id="testDialog">Test</div>');
$( '#testDialog' ).dialog();

修改

问题是我使用http来引用外部CSS文件。我正在使用https协议在页面上尝试我的脚本。从附加链接元素的href属性中删除协议解决了问题！

 href='http://code.jquery.com...
    ---->
 href='//code.jquery.com...

如何在用户脚本/浏览器控制台中使用Jquery Dialog而不丢失样式？

0 个答案: