https://qwerty.work/tags/sprinkle/ Recent content in Sprinkle on qwerty.work Hugo -- gohugo.io ja-JP Sat, 19 Mar 2011 09:26:38 +0900 https://qwerty.work/post/2011/03/javascriptsprinklejs/ Sat, 19 Mar 2011 09:26:38 +0900 https://qwerty.work/post/2011/03/javascriptsprinklejs/ <p>どんなことに使えるか想像ができませんが、便利そうなのでメモ。</p> <p>ページ内に別ページのHTMLを表示する場合、iflame、object、SSIなどでを使いますが、<a class="link" href="http://www.sprinklejs.com/" target="_blank" rel="noopener" >sprinkle.js</a>を利用すればiflame、object、SSIを使うことなく別ページのHTMLを読み込みしができるようです。</p> <div class="link-card"> <a href="http://www.sprinklejs.com/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://www.sprinklejs.com/" alt="http://www.sprinklejs.com/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://www.sprinklejs.com/</span> <span class="link-card-url">http://www.sprinklejs.com/</span> </div> </a> </div> <h3 id="使い方">使い方 </h3><ul> <li>sprinkle.jsをダウンロードし適当なディレクトリにアップロード</li> <li>使用するページでsprinkle.jsを読み込む</li> </ul> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>&lt;<span style="color:#f92672">script</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text/javascript&#34;</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;http://yourdomain/sprinkle.js&#34;</span>&gt;&lt;/<span style="color:#f92672">script</span>&gt; </span></span></code></pre></div><ul> <li>以下のように読み込みたいファイルを指定</li> </ul> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>&lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;読み込みたいファイル&#34;</span>&gt;&lt;/<span style="color:#f92672">div</span>&gt; </span></span></code></pre></div><p>おぉ、簡単。</p> <p>まだ実験していなけど&hellip;。</p> <p>UTF-8以外のHTMLを読み込むと文字化けするみたいです。</p> <p>サイト外のHTMLは読み込みができないみたいです。</p> <h3 id="参考ページ">参考ページ </h3> <div class="link-card"> <a href="http://www.skuare.net/2007/11/htmlsprinklejs.html" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://www.skuare.net/2007/11/htmlsprinklejs.html" alt="http://www.skuare.net/2007/11/htmlsprinklejs.html" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://www.skuare.net/2007/11/htmlsprinklejs.html</span> <span class="link-card-url">http://www.skuare.net/2007/11/htmlsprinklejs.html</span> </div> </a> </div>