JavaScript

掲題のとおりです。
使ってしまったのです…orz

【備忘録】 JavaScript で replace を使って replaceAll をする方法 | MSeeeeN | 大阪発 IT メディア by MSEN
replaceAll() は ES2021 で追加されたかなり新しい関数となっています

String.prototype.replaceAll() - JavaScript | MDN
Safari on iOS: 13.4 Full support

お客様のiPhoneがiOS13.3だったため、問題発生。。。
まあ、早めに問題がわかってよかった。
そしてそのお客様がとても良い人だったので救われた。
別の意味で『お客様は神様です』でした。ありがたや〜

bootstrap3のpopoverのオプションで「html: true」にしてHTMLタグを利用していたわけだが、bootstrap4でも使おうとしたところ、内容が空っぽになってしまった…。
というお話。

結論:sanitizeオプションも指定しましょう

sanitize
v4.3.1追加


pdf.js のツールバー内の印刷ボタンを押して印刷しようとすると、最後に空白ページが追加されてしまう事象が発生。
ダウンロードしてからAcrobatで印刷すればそのようなことは起きない。
なので、pdf.js側の不具合の可能性あり。断言はできませんが…。

ならば、pdf.jsで印刷できなくすればいいじゃない。
オプションでなんとかなるのでは、と思ったけど、見つからず。。
が、CSSで印刷ボタンを非表示にする方法を発見。
埋め込んだPDFを印刷させない方法(PDF.js)
ありがたや〜。

でも、pdfjs内のcssファイルを編集しなければいけないみたいだなぁ。それはしたくないなぁ。
っというわけで、jQueryでスタイルを変更することにした。
jQuery(function($){
$("#pdfjs-iframe").hide().load(function(){
$(this).show().contents().find("#print, #secondaryPrint").css({display:"none"});
});
});

一瞬表示されてしまうので、一旦hide()して、onloadでshow()してます(実用上はhide()の前にhtml側でdisplay:none;してます)。
ツールバーごと消したい場合は下記。
    $(this).show().contents().find(".toolbar").css({display:"none"}).end().find("#viewerContainer").css({top: "0.5em"});

元記事通りtop:0;だと詰まり過ぎと感じたのでtop:0.5em;としました(特に深い意味がある訳ではないです(-_-;)。お好みでドゾー。
■フォルダ構成変更
・「web」フォルダを「pdfjs」に改名
・「pdfjs」フォルダに「build」フォルダを移動

■ファイル内容変更
・pdfjs/viewer.html
<script src="../build/pdf.js"></script>

 ↓
<script src="../build/pdf.js"></script>


・pdfjs/viewer.js
    PDFJS.workerSrc = '../build/pdf.worker.js';
PDFJS.cMapUrl = '../web/cmaps/';

 ↓
    PDFJS.workerSrc = './build/pdf.worker.js';
PDFJS.cMapUrl = '../cmaps/';


「PDFJS.workerSrc」だけ変えて「PDFJS.cMapUrl」のほうを変えないと、一部フォントが表示されないという状態に陥る。一見うまくいっているように見えるのでハマる。ていうかハマった(-_-;)
【追記】
記事にしたのとは別の箇所で修正依頼が来て、やっぱりはみ出すのでものすごく悩んだ末、
もうソースを解析するしかないか…と思い、使っているbootstrap.jsを開いたところ…
bootstrap.js v3.0.0
古っ!!

多分FuelPHPに含まれていたものだと思われ…(-_-;)

んで、v3.3.7に置き換えたら、あっさりとはみ出さなくなりました。。
あの苦労はなんだったんだ…(>_<)
ググっても見つからない訳だよ…(T_T)

という訳で、以下ゴミです。


同じ現象で悩まされている日本人は稀らしく、ググっても見つからなかった。

英語の質問サイトでようやく↓をみつけた。

つまり、右に配置した場合、popoverのviewportとpaddingが正常に作動しない、ですな。

実際、float:rightで使っていたので、コレに該当するのだろうと思い、仮にfloat:leftにしてみたら、はみ出さなかった。
ならばとposition:absoluteで右に配置してみると、やっぱりはみ出した。
なぜかグリッドで右に配置してもはみ出した…。

右側に置くのはあきらめました(T_T)
続きを読む