Question

我在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地图会在<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>

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

Answer 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设置的属性可能是一种更易于维护的解决方案。

Answer 2

问题：我的网站表现得很奇怪，所有字体都是粗体，我发现＆lt;头＆gt;有上面不需要的样式表。

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

@import url('https://fonts.googleapis.com/css?family=Open+Sans');

从头部删除Google Map V3其他样式和链接

2 个答案: