javascript - I have a question, is it because the external js file has not been downloaded and the ready function will not be executed?

WBOY
Release: 2023-03-02 06:36:01
Original
1203 people have browsed it

I encountered a problem recently. The website quoted Google's map api, which I couldn't open locally. The js had to be referenced for a long time and was always in the pending state. But at this time, certain buttons were clicked, especially the click events of these buttons. In the ready function, there will be no effect. What's the solution?

<code>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?language=<?php echo $language; ?>"></script> 
   
 <script type="text/javascript"> 


  $(document).ready(function() {
    var lat = {lat: <?php echo $geocodes[0]; ?>, lng: <?php echo $geocodes[1]; ?>}; 
    var myOptions = {  
       zoom: 17,
       center: lat,
       mapTypeId: google.maps.MapTypeId.ROADMAP,
       disableDefaultUI: true,
       zoomControl: true,
    }; 
    var map = new google.maps.Map(document.getElementById("map"), myOptions);   
    var marker = new google.maps.Marker({
      map: map,
      // Define the place with a location, and a query string.
      place: {
        location: lat,
        query: `<?php echo $address; ?>`

      },
      // Attributions help users find your site again.
      attribution: {
        source: 'Google Maps JavaScript API',
        webUrl: 'https://developers.google.com/maps/'
      }
    });

    // Construct a new InfoWindow.
    var infoWindow = new google.maps.InfoWindow({
      content: `<?php echo $store; ?><br><?php echo $address; ?>`
    });
      infoWindow.open(map, marker);
    // Opens the InfoWindow when marker is clicked.
    marker.addListener('click', function() {
      infoWindow.open(map, marker);
    }); 

  });
    
 </script> </code>
Copy after login
Copy after login

Other ready functions

<code>$(document).ready(function() {
    // Language
    $('.language a').on('click', function(e) {
        e.preventDefault();

        $('.language input[name=\'code\']').attr('value', $(this).attr('href'));

        $('.language').submit();
    });
});</code>
Copy after login
Copy after login

Reply content:

I encountered a problem recently. The website quoted Google's map api, which I couldn't open locally. The js had to be referenced for a long time and was always in the pending state. But at this time, certain buttons were clicked, especially the click events of these buttons. In the ready function, there will be no effect. What's the solution?

<code>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?language=<?php echo $language; ?>"></script> 
   
 <script type="text/javascript"> 


  $(document).ready(function() {
    var lat = {lat: <?php echo $geocodes[0]; ?>, lng: <?php echo $geocodes[1]; ?>}; 
    var myOptions = {  
       zoom: 17,
       center: lat,
       mapTypeId: google.maps.MapTypeId.ROADMAP,
       disableDefaultUI: true,
       zoomControl: true,
    }; 
    var map = new google.maps.Map(document.getElementById("map"), myOptions);   
    var marker = new google.maps.Marker({
      map: map,
      // Define the place with a location, and a query string.
      place: {
        location: lat,
        query: `<?php echo $address; ?>`

      },
      // Attributions help users find your site again.
      attribution: {
        source: 'Google Maps JavaScript API',
        webUrl: 'https://developers.google.com/maps/'
      }
    });

    // Construct a new InfoWindow.
    var infoWindow = new google.maps.InfoWindow({
      content: `<?php echo $store; ?><br><?php echo $address; ?>`
    });
      infoWindow.open(map, marker);
    // Opens the InfoWindow when marker is clicked.
    marker.addListener('click', function() {
      infoWindow.open(map, marker);
    }); 

  });
    
 </script> </code>
Copy after login
Copy after login

Other ready functions

<code>$(document).ready(function() {
    // Language
    $('.language a').on('click', function(e) {
        e.preventDefault();

        $('.language input[name=\'code\']').attr('value', $(this).attr('href'));

        $('.language').submit();
    });
});</code>
Copy after login
Copy after login

<code><script>
var js = document.createElement('script');
js.src= 'js地址';
document.querySelector('body').appendChild(js);
</script></code>
Copy after login

This way it won’t be blocked

Your ready function depends on Google's API, you can only wait until the API is loaded; if it is too slow, download the Google API file and put it in the static resources of your website.

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!