JQuery Ajax تحميل JavaScript الخارجي يؤدي إلى إعادة توجيه المتصفح إلى موقع جديد

Question

أواجه مشكلات مع تحميل JavaScript الخارجية باستخدام JQuery. في كل مرة عندما أحاول تحميل الملف الخارجي هذا، تصبح نافذة المتصفح فارغة وفي فايرفوكس، فإنه يعيد توجيه شيء مثل:

Wyciwyg: // 40 /http://mydomain.com/myfile.html.

ما أحاول القيام به، هو تحميل Walkscore خريطة Google في أحد النقود في الصفحة. لقد حاولت استخدام الأسلوب $ .get () ،. تحميل ()، $ .getScript () و $ .Requirescript () JQuery Plugin، ولا شيء يعمل باستثناء حالة واحدة، عندما أضع تنبيه () مباشرة بعد. () طريقة. في هذه الحالة، لا يتم إعادة توجيه المتصفح في أي مكان ويتم عرض الخريطة على الصفحة.

هذا هو نصي في قسم الرأس:

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">

    function loadWalkScore() { $.get("http://www.walkscore.com/tile/show-tile.php?wsid=87439b0626c9eaeacfd6d8d5598afc13",null,null,"script"); } </script>

البرنامج النصي في نص الصفحة:

<div id="contentArea" style="margin: 20px 0px 10px 10px; border: 1px solid #CCC;">

<script type="text/javascript">
    var ws_lat = "40.710318";
    var ws_lon = "-74.016553";
    var ws_width = "630";
    loadWalkScore();
</script>

</div>

يرجى الاطلاع أيضا على جميع الأمثلة لدي (أول أعمال واحدة فقط):

// 1. $ .get () - مثال العمل، تنبيه مباشرة بعد طريقة $ .get ()

WebSvit. COM / علامات التبويب / Walkscore-with-Alert.html

// 2. $ .get () - بالضبط نفس الشيء المذكور أعلاه دون تنبيه، لا يعمل

WebSvit. com / tabs / walkscore-get.html

// 3.. تحميل () - تحميل ملف HTML مع Walkscore JS، لا يعمل

WebSvit. com / tabs / walkscore-load.html

// 4. $ .getscript () - لا يعمل

WebSvit. COM / علامات التبويب / Walkscore-Getting-External.html

// 5. $ .getscript () المحفوظة محليا Walkscore JS، لا يعمل

WebSvit. COM / علامات التبويب / Walkscore-Getting-Local.html

// 6. $ .Rquirescript () - استخدام المساعد المسج، لا يعمل

WebSvit. com / tabs / walkscore-get-plugin.html

Answer 1

لدي حل لمشكلتي. لقد وجدت طريقة لتجنب استخدام Ajax لتحميل Walkscore JavaScript ولكن لاستخدام بسيط إيفرام. وبعد في حال، إذا كان لدى شخص ما مشكلة مماثلة مع خريطة WalkScore، فأنا نشر الكود هنا.

    var ws_lat = "40.710318";
    var ws_lon = "-74.016553";
    var ws_width = "630";
    var ws_height = "300";
    var ws_iframe_css_final = "border: 0";

    var ws_params = "wsid=87439b0626c9eaeacfd6d8d5598afc13";
    ws_params += "&lat=" + ws_lat + "&lng=" + ws_lon;

    $("#walkscore_map").html('<iframe src="http://www.walkscore.com/serve-tile.php?' + ws_params + '" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" frameborder="0" scrolling="no" width="' + ws_width + 'px" height="' + ws_height + 'px" style="' + ws_iframe_css_final + '"></iframe>');

Answer 2

المشكلة هي أنها طريقة كتابة البرنامج النصي للركاب، يجب تشغيل مكالمات AJAX الخاصة بك بشكل متزامن (بدلا من Async) من أجل عملها. هذا هو السبب في وجود تنبيه () يجعلها تعمل.

بعد النظر من خلال التعليمات البرمجية الخاصة بك والاطلاع على البرنامج النصي الذي تم إرجاعه بواسطة الدعوة إلى Walkscore، وجدت طريقة لجعلها تعمل. يمكنك استخدام $ .getScript مع رد الاتصال، وإلحاق iFrame إلى Constallarea DIV. يستخدم Script Walkscore Document.write () لهذا الغرض.

انسخ البرنامج النصي أدناه إلى علامة الرأس الخاصة بك. تأكد من صحة WSID لمجالك، وإلا فسوف تحصل على صفحة فارغة. قم بإزالة علامة البرنامج النصي الموجودة حاليا داخل Div.

<script type="text/javascript"> 
    var ws_lat = "40.710318";
    var ws_lon = "-74.016553";
    var ws_width = "630";
    $(function(){
        $.getScript("http://www.walkscore.com/tile/show-tile.php?wsid=87439b0626c9eaeacfd6d8d5598afc13", function(){            
          $('<iframe src="http://www.walkscore.com/serve-tile.php?' + ws_params 
                                     + '" marginwidth="0" marginheight="0" vspace="0" hspace="0"'
                                     + ' allowtransparency="true" frameborder="0" scrolling="no" width="' 
                                     + ws_width + 'px" height="' + ws_height + 'px" style="' + ws_iframe_css_final + '"></iframe>')
                                     .appendTo("#contentArea");
       });
    });
</script>