bootstrap-tableをUNPKG経由で使っている。bootstrap-tableが機能しなくなり、画面表示されない障害になった。調べてみると、下記のURLで「Internal Server Error」になる。
https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.js
そこまで急ぎの対応も必要ないので、待つことにしている。
あと、調べてみると、2週間くらい前から、UNPKGで障害が起きている模様。
https://github.com/unpkg/unpkg/issues/412
昨日解消とあるが、、、また問題が発生したのだろう。
読了。なるほど、いまのフロントエンドのJavaScript関連のライブラリとフレームワークの傾向は、そうなっているのか。
なるほど、とった感じだ。ReactもVue.jsも人気だけど、技術者は不足しているので、確保は大変そう。だいぶ前から、ReactやVue.jsが騒がれているけれど、技術者の数よりも需要のほうが多いようで。バージョンアップも激しいので、ついていくのも大変なわけだが。ここまでJavascript系のライブラリが主流になるとは。Angularは人気ないのか、意外だった。
それから、もやもやがスッキリしたのは、ReactもVue.jsもJavaScriptのUIライブラリということ。それぞれ、活用するためのフレームワークは別にあり、それを使うこともできるし、UIライブラリとして単体利用もできる。フレームワークとごっちゃになっているとわかりにくいので、スッキリしてよかった。
今後数年以上は、フロントエンドとバックアップエンド（API）の分離が主流で続くようなので、勉強しないと駄目だな。もうちょっと、いろいろと考えなくては。
IE用に作られたASP.NETのアプリを、Chrome対応（Chromium Edge対応）しているときに、JavaScriptでASP.NETのパーツのテキストボックス（type=text）に値をいれたところ、値が入らないということがおきた。「getElementById(“ID”).value」に、JavaScriptから値をいれたが、IE11では問題ないのに、Chromeだと値が入らなかった。
document.getElementById("ID").value = "値";
// ↑これだと、IE11は値が入るが、Chromeだと入らない。PostBackは発生させていない処理なのだが。いろいろと調べていき、Chromeの場合は「.defaultValue」を使って初期状態の値を書き換えれば、画面の表示が変わることを確認できた。
document.getElementById("ID").defaultValue = "値";
// ↑Chromeの場合は、defaultValueを書き換える。IE11も残しておく必要があったので、ブラウザの種類をみて、IF文でIEとそれ以外で分岐させるようにした。
サンプル。
// ブラウザを取得する
var userAgent = window.navigator.userAgent.toLowerCase();
if (userAgent.indexOf('msie') != -1) {
// IEのときの処理を書く
document.getElementById("ID").value = "aaaa";
} else {
// IE以外の処理。ChromeやChromium Edgeの想定
// document.getElementById.value だと、画面上の表示が変わらないことがわかった。
// そのため、document.getElementById.defaultValue に変更したところ、うまくいった。
document.getElementById("ID").defaultValue = "aaaa";
}子画面から親画面に情報の引継ぎを行うために、下記のサイトを参考にして、子画面からコールバック関数の実行を行うように実装して、テストしたが動かず。
https://qiita.com/hidehito108/items/f7ad9fe23736049a76d6
問題の切り分けのために、これだけのテストページを作ったり、変数化されているところをベタ書きにしたりもしたがダメだった。動いていない箇所を特定するために、コメントアウトしたりして、確認して、子画面からのコールバック関数の実行がエラーになっていることはわかった。なにかJSのモジュールでも足りないのかも、と思い調べたが標準のもので動くことがわかり、手詰まり。
画面上は、何も表示されないのでわからず。ダメ元で、ブラウザの開発者ツールを立ち上げてみた。標準のところには何も出ず。それで、いろいろとやっていたら、Consoleにエラーが表示されていた。そこには、下記の内容が表示されていた。
Uncaught DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame.このエラーを調べてみると、ウェブサーバ上のコンテンツを実行していない場合に発生するとのこと。たしかに、確認はWindowsで、フォルダにあるHTMLファイルをブラウザで実行しており、ウェブサーバは介していなかった。テスト用のHTMLファイル２つ（親画面用と子画面用）をウェブサーバに配置して、httpでアクセスしたら、正常に動作した。問題はコードではなく、テスト実行していた環境が原因だった。