Q&A
>ピンとくる情報
それはご自身の理解力が乏しいためか、サイトの説明が悪いか誰にも分からないので、確認した記事やサイトURLを代表的なもので良いので幾つかピックアップしてご提示ください
私の状況
フロントエンド勉強3日目程度です。
jQueryかbootstrapを使用しているソースでよく見るような気がしますが、
それらのリファレンスサイトで検索しても出ず。
また、そのままググってもピンとくる情報にたどり着けません。
丸投げの質問で本当にすみません。
知りたいこと
data-gr-c-s-loaded="true" の役割
もしくは、解説のあるサイトにたどり着けそうな検索キーワード
遭遇したソース
monacaのサンプルプロジェクト"jQuery Mobile MultiPage"のhtmlのbodyタグ内。
ページ自体はjquery mobileを使用したページ遷移のサンプルプロジェクトとのこと。
html
1<!DOCTYPE HTML> 2<html> 3 4<head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 7 <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> 8 <script src="components/loader.js"></script> 9 <link rel="stylesheet" href="components/loader.css"> 10 <link rel="stylesheet" href="css/style.css"> 11 <link rel="stylesheet" href="lib/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css"> 12 <script src="lib/jquery/jquery-1.12.4.min.js"></script> 13 <script src="lib/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"></script> 14 <script> 15 </script> 16</head> 17 18<body data-gr-c-s-loaded="true" class="ui-mobile-viewport ui-overlay-a" style="" data-feedly-mini="yes"> 19 20 <!-- Start of first page: #one --> 21 <div data-role="page" id="one" data-url="one" tabindex="0" class="ui-page ui-page-theme-a ui-page-active" style=""> 22 <div data-role="header" role="banner" class="ui-header ui-bar-inherit"> 23 <h1 class="ui-title" role="heading" aria-level="1">Multi-page</h1> 24 </div><!-- /header --> 25 26 <div role="main" class="ui-content"> 27 <h2>One</h2> 28 <p><a href="#two" class="ui-btn ui-shadow ui-corner-all">Show page "two"</a></p> 29 <p><a href="#popup" class="ui-btn ui-shadow ui-corner-all" data-rel="dialog" data-transition="pop">Show page 30 "popup" (as a dialog)</a></p> 31 </div><!-- /content --> 32 33 <div data-role="footer" data-theme="a" role="contentinfo" class="ui-footer ui-bar-a"> 34 <h4 class="ui-title" role="heading" aria-level="1">Page Footer</h4> 35 </div><!-- /footer --> 36 </div><!-- /page one --> 37 38 <!-- Start of second page: #two --> 39 <div data-role="page" id="two" data-theme="a" data-url="two"> 40 <div data-role="header"> 41 <h1>Two</h1> 42 </div><!-- /header --> 43 44 <div role="main" class="ui-content"> 45 <h2>Two</h2> 46 <p>I have an id of "two" on my page container. I'm the second page container in this multi-page template.</p> 47 <p>Notice that the theme is different for this page because we've added a few <code>data-theme</code> swatch 48 assigments here to show off how flexible it is. You can add any content or widget to these pages, but we're 49 keeping these simple.</p> 50 <p><a href="#one" data-direction="reverse" class="ui-btn ui-shadow ui-corner-all ui-btn-b">Back to page "one"</a></p> 51 </div><!-- /content --> 52 53 <div data-role="footer"> 54 <h4>Page Footer</h4> 55 </div><!-- /footer --> 56 </div><!-- /page two --> 57 58 <!-- Start of third page: #popup --> 59 <div data-role="page" id="popup" data-url="popup"> 60 <div data-role="header" data-theme="b"> 61 <h1>Dialog</h1> 62 </div><!-- /header --> 63 64 <div role="main" class="ui-content"> 65 <h2>Popup</h2> 66 <p>I have an id of "popup" on my page container and only look like a dialog because the link to me had a <code>data-rel="dialog"</code> 67 attribute which gives me this inset look and a <code>data-transition="pop"</code> attribute to change the 68 transition to pop. Without this, I'd be styled as a normal page.</p> 69 <p><a href="#one" data-rel="back" class="ui-btn ui-shadow ui-corner-all ui-btn-inline ui-icon-back ui-btn-icon-left">Back 70 to page "one"</a></p> 71 </div><!-- /content --> 72 73 <div data-role="footer"> 74 <h4>Page Footer</h4> 75 </div><!-- /footer --> 76 </div><!-- /page popup --> 77 78 <div class="ui-loader ui-corner-all ui-body-a ui-loader-default"><span class="ui-icon-loading"></span> 79 <h1>loading</h1> 80 </div> 81 <div id="weava-permanent-marker" date="1538710288557"></div> 82 <div id="feedly-mini" title="feedly Mini tookit"></div> 83 <div id="weava-ui-wrapper"> 84 <div class="weava-drop-area-wrapper"> 85 <div class="weava-drop-area"></div> 86 <div class="weava-drop-area-text">Drop here!</div> 87 </div> 88 </div> 89</body> 90 91</html> 92 93
回答2件
0
シンプルに「data-gr-c-s-loaded」でググったら、次のredditに行き当たりました。
psnoonan 5 points·3 years ago
The Grammarly extension adds that attribute.
https://www.reddit.com/r/chrome/comments/46eoi0/datagrcsloaded_attribute_added_to_body_tag_on_all/
投稿2019/12/10 16:52
総合スコア2982
0
ベストアンサー
いつからか追加されたdata-gr-c-s-loadedの実際の用途についてはBootstrapから特に何のアナウンスも無いので不明ですが、
data-* = "hoge" という記載は、data属性と言われるもので jQuery の中で変数のように取り扱う事ができる属性です。
data-以降の文字列は「英小文字」「数字」「-」「_」「.」「:」から、まさに [変数名] として自由につけることができます。
data-gr-c-s-loaded="true"の意味としては
・data- データ属性の接頭語
・gr-c-s-loaded gr-c-s な条件で読み込み（load）された時
・="true"` true を返す
と言った意味で記載されています。
実際にjqueryでは
jQuery
1var flag = $('body').data('gr-c-s-loaded'); //flag = true 2
という風に .data() で取り出す事ができ、
おそらくtrueの時とfalseの時で違う処理を走らせるためのデータセット記載と推定できます。
実際の処理に使われているデータ値であれば、
同時に読み込まれている [.jsファイル] の中を探せば .data() で呼び出されている箇所が見つかるハズです。
▼dataの扱いについてわかりやすく解説しているブログがあったので貼っておきます。
https://www.sejuku.net/blog/38263
投稿2019/12/11 01:15
編集2019/12/11 01:47
総合スコア506
あなたの回答
tips
プレビュー
