document.writeでのcssの読み込ませ方

kintone カスタマイズ
1

スペースを配置して作ったボタンクリックで小窓を開いています。
その小窓にcssを反映させたいのですが，うまくいきません。
cssファイルのパスが間違っているようです。
どう修正したらいいのでしょうか。

コード抜粋は以下です。

mySpaceFieldButton2.onclick = function () {
//入力用小Windowの設定

(function(){//即時関数 ループ中にデータをうまく取得するようにfunctionを二重に
var swd = window.open("", "_blank","width=540,height=480");
swd.document.open();
swd.document.write("<html><head><script type='text/javascript' src='./Stylesheets/jktable.css'></script></head>");
swd.document.write("<p>タイトル</p><body id='body01'></body></html>");

出力されたhtmlコードは以下です。

<html>
<head>
<script type="text/javascript" src="./Stylesheets/jktable.css">
</script>
</head>

<body id="body01">
<p>タイトル</p>
</body>
</html>

./Stylesheets/jktable.css
の部分が，「ファイルはみつかりません」となってしまってます。

2

masuto様

こんにちは。

アプリ設定に読み込んだCSSでしたら、下記で読むことができそうです。

mySpaceFieldButton2.onclick = function() {
 var swd = window.open("", "_blank","width=540,height=480");
 swd.document.open();
 swd.document.write("<html><head><link rel='stylesheet' href='ここにCSSのパス'></head>");
 swd.document.write("<p>タイトル</p><body id='body01'></body></html>");
}

「ここにCSSのパス」の部分は、デベロッパーツール から取得しました。

Chromeであれば、「Sourcesタブ」からCSSファイル（「download.do?」から始まるものの内の1つ）まで辿り、右クリックで「Copy link address」です。

3

**koichi**さま

できました！！
とてもうれしいですー！！！
ありがとうございます！！！

4

追記で質問です。

cssの内容を書き換えるたびに，ファイルのパスが変わるようです。。
これはしかたないのでしょうか？

5

masuto様

パスが変わる点は盲点でした。

そうなるとアプリの設定で読み込んだcssを使うというのは少々手間かと思いますので、

document.writeでcssも一緒に記述する方法もご紹介します。

swd.document.write("<html><head><style type='text/css'>" +
           "p { " +
    "color: #ffff00; " +
 "}" +
 "</style></head>");
swd.document.write("<p>タイトル</p><body id='body01'></body></html>");

改行してcssっぽく記述していますが、下記のように1行で記述しても問題ありません。

swd.document.write("<html><head><style type='text/css'> p { color: #ffff00; } </style></head>");
swd.document.write("<p>タイトル</p><body id='body01'></body></html>");

 

他にも、例えばdropboxなどのクラウドストレージにcssファイルを置いておき、

そこのファイルパスURLをアプリの設定で指定することも可能かもしれません。

cssファイルを改修の度に毎回指定する必要が無くなります。

私の環境で実際に試せていないので、ご参考までです。

<JavaScriptカスタマイズのデバッグをかんたんにするウラワザ>

https://developer.cybozu.io/hc/ja/articles/201308690 

6

**>koichi**さま

 

ありがとうございます！！！
どちらの方法もとても参考になります！

短いcssだったら
>document.writeでcssも一緒に記述する方法
の方法でやるのが簡単でいいですね！

社内でdropbox使用しているので
>dropboxなどのクラウドストレージにcssファイルを置いておき
もできそうです！

いろいろな場面で使い分けします。
ありがとうございました！

7

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。