1

我在 CMS Made Simple 1.11.11 工作，通常，这就是我<head>在大多数页面上的样子......

<head>
<base href="http://np.dev/">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, user-scalable=no">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="language" content="en_US">
<meta name="url" content="http://np.dev">
<meta name="identifier-URL" content="http://np.dev">
<meta name="revised" content="Sun, 19 Oct 2014 23:00:50">    
<title>My localhost demo site</title>
<link rel="stylesheet" type="text/css" href="http://np.dev/tmp/cache/stylesheet_combined_b494846cba46cad77e309f4df2e3bfe7.css">
<link rel="stylesheet" type="text/css" href="http://np.dev/tmp/cache/stylesheet_combined_d3f3ceb94300bf27c9a51ce2e1404348.css">
...
</head>

上面的布局很好。但是，如果我将 Google Maps v3 API 附加并运行到此模板上，Google Maps 将在 生成以下内容之前添加几个<style>和<link>元素......<head>

   <head>
   /*I WANT TO USE JQUERY TO REMOVE THESE 5 ELEMENTS WHEN THE WINDOW IS READY*/
   <style type="text/css">.gm-style .gm-style-mtc label,.gm-style .gm-style-mtc div{font-weight:400 </style>
   <style type="text/css">.gm-style .gm-style-cc span,.gm-style .gm-style-cc a,.gm-style .gm-style-mtc div{font-size:10px}</style>
   <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
   <style type="text/css">@media print {  .gm-style .gmnoprint, .gmnoprint {    display:none  }}@media screen {  .gm-style .gmnoscreen, .gmnoscreen {    display:none  }}</style>
   <style type="text/css">.gm-style{font-family:Roboto,Arial,sans-serif;font-size:11px;font-weight:400;text-decoration:none}</style>

    <base href="http://np.dev/">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, user-scalable=no">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="language" content="en_US">
    <meta name="url" content="http://np.dev">
    <meta name="identifier-URL" content="http://np.dev">
    <meta name="revised" content="Sun, 19 Oct 2014 23:00:50">    
    <title>My localhost demo site</title>
    <link rel="stylesheet" type="text/css" href="http://np.dev/tmp/cache/stylesheet_combined_b494846cba46cad77e309f4df2e3bfe7.css">
    <link rel="stylesheet" type="text/css" href="http://np.dev/tmp/cache/stylesheet_combined_d3f3ceb94300bf27c9a51ce2e1404348.css">
    ...
    </head>

我认为不可能“阻止”前 5<head>个子元素从 Google Maps API 加载到 DOM，所以我想做下一个最好的事情......我想使用 jQuery 从<head>一次中删除这些元素窗户准备好了。这可能吗？

4

2 回答 2

1

以这种方式删除所有头部style和link元素将如您所料，添加lt()选择器会将选择限制为每种类型的前 N ​​个。

http://api.jquery.com/lt-selector/

$(function() {
    $('head style[type="text/css"]:lt(4)').remove();
    $('head link[type="text/css"]:lt(1)').remove();
});

覆盖 Google 设置的属性可能是一种更易于维护的解决方案。

于 2014-10-31T17:29:11.960 回答
-1

问题：我的网站表现得很奇怪，所有字体都是粗体，我发现 <head> 上面有不需要的样式表。

解决方案：我在 css 文件中使用了以下代码行，并删除了以下代码行：

@import url('https://fonts.googleapis.com/css?family=Open+Sans');
于 2017-09-27T18:06:42.153 回答