0

jsを使用してWebウィジェットを構築しようとしています。ユーザーのサイトにブートストラップモーダルを表示したい。

これが私のjsファイルのコードです。

    (function () {
    
        // Localize jQuery variable
        var jQuery;
    
        /******** Load jQuery if not present *********/
        if (window.jQuery === undefined || window.jQuery.fn.jquery!== '1.12.4') {
            console.log("jQuery LOADED");
            var script_tag = document.createElement('script');
            script_tag.setAttribute("type", "text/javascript");
            script_tag.setAttribute("src",
            "https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js");
    
    
            // Try to find the head, otherwise default to the documentElement
            (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
    
    
            if (script_tag.readyState) {
                script_tag.onreadystatechange = function () { // For old versions of IE
                    if (this.readyState == 'complete' || this.readyState == 'loaded') {
                        console.log(window.jQuery.fn.jquery);
                        scriptLoadHandler();
                    }
                };
            } else {
                console.log("ONLOAD STATE");
                script_tag.onload = scriptLoadHandler;
            }
        } else {
            // The jQuery version on the window is the one we want to use
            jQuery = window.jQuery;
            main();
        }
    
        
        /******** Called once jQuery has loaded ******/
        function scriptLoadHandler() {
            // Restore $ and window.jQuery to their previous values and store the
            // new jQuery in our local jQuery variable
            jQuery = window.jQuery.noConflict(true);
            // Call our main function
    
            main();
        }
    
        /******** Our main function ********/
        function main() {
            jQuery(document).ready(function ($) {
                /******* Load Bootstrap JS *******/
                var bootstrap_script = document.createElement('script');
                bootstrap_script.setAttribute("type", "text/javascript");
                bootstrap_script.setAttribute("src",
                        "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js");
                        
                (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(bootstrap_script);
                
                /******* Load Bootstrap CSS *******/
                var bootstrap_css_link = $("<link>", {
                    rel: "stylesheet",
                    type: "text/css",
                    href: "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
                });
                bootstrap_css_link.appendTo('head');
    
                /******* Load HTML *******/
                var jsonp_url = "example.com/srtest?callback=?";
                $.getJSON(jsonp_url, function (data) {
                    $("#myModal_srsr").modal("show");
                });
            })
        }
    
    })(); // We call our anonymous function immediately

すべてのスクリプトとモーダル ロードが inspect 要素で正しく表示されます。しかし、コンソールでは 2 つのエラーが発生します。

  1. TypeError: $(...).modal は関数ではありません
  2. エラー: Bootstrap の JavaScript には jQuery が必要です

データでは、json オブジェクトを返しています。

    $data = json_encode(array("html"=>'<!-- Modal -->
    <div id="myModal_srsr" class="modal fade" role="dialog">
      <div class="modal-dialog">
    
        <!-- Modal content-->
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Modal Header</h4>
          </div>
          <div class="modal-body">
            <p>This is awesome.</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
    
      </div>
    </div>'));
4

1 に答える 1

0

単純に削除することで問題を解決しました

var jQuery;

私のコードから。その理由は、ブートストラップ JS がグローバル変数 jQuery を探すためです。したがって、jQuery がユーザーのページに存在しない場合、そのグローバル変数を見つけることができず、エラーがスローされます。

エラー: Bootstrap の JavaScript には jQuery が必要です

これが誰かを助けることを願っています。:)

乾杯。

于 2017-09-18T05:05:55.370 に答える