admin管理员组文章数量:1287776
I have issue with javascript code not woking in mobile browser (android and ios). However, the same code
Below code basically is trying to fetch user location from ip addrees and then logs to aws dynamo db through aws lambda function url. Site is hosted on s3 as a static website The below code works perfectly when i am running on my laptop browsers like chrome , Edge. However , on mobile browsers it is just not loading at all. just a blank scrren.
Earlier i just had modal code and it used to work both on mobile as well as on desktop browsers.
Is using addEventListener twice a problem or am i missing something?
Any pointers would be helpful.
const myModal = new bootstrap.Modal('#load-modal');
window.addEventListener('DOMContentLoaded', function() {
myModal.show();
});
document.addEventListener("DOMContentLoaded", function() {
// Fetch latitude and longitude based on IP address
fetch("")
.then(response => response.json())
.then(data => {
console.log(data.latitude)
console.log(data.longitude)
const bdcAPI = `?
// latitude=${data.latitude}&
// longitude=${data.longitude}`
getAPI(bdcAPI)
})
.catch(error => {
console.error("Error fetching IP address:", error);
});
});
function getAPI(bdcAPI) {
fetch(bdcAPI)
.then(response => response.json())
.then(data => {
console.log(data.countryName)
console.log(data.city)
functionURL(data.continentCode, data.continent, data.countryCode,
data.countryName, data.principalSubdivisionCode, data.principalSubdivision, data.city, data.locality)
})
.catch(error => {
console.error("Error fetching country and city name", error);
});
}
function functionURL(continentCode, continent, countryCode, countryName,
principalSubdivisionCode, principalSubdivision, city, locality) {
const functionurl = `aws lambda function url`
console.log(functionurl)
fetch(functionurl)
.then(response => response.json())
.then(data => {
console.log('Location logged successfully!!')
})
.catch(error => {
console.error("Error calling function url:", error);
});
}<html>
<head>
<link href="/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script defer src="/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</head>
<body>
<div class="modal fade" id="load-modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="text-center">
...
</div>
</div>
</div>
</div>
</body>
</html>I have issue with javascript code not woking in mobile browser (android and ios). However, the same code
Below code basically is trying to fetch user location from ip addrees and then logs to aws dynamo db through aws lambda function url. Site is hosted on s3 as a static website The below code works perfectly when i am running on my laptop browsers like chrome , Edge. However , on mobile browsers it is just not loading at all. just a blank scrren.
Earlier i just had modal code and it used to work both on mobile as well as on desktop browsers.
Is using addEventListener twice a problem or am i missing something?
Any pointers would be helpful.
const myModal = new bootstrap.Modal('#load-modal');
window.addEventListener('DOMContentLoaded', function() {
myModal.show();
});
document.addEventListener("DOMContentLoaded", function() {
// Fetch latitude and longitude based on IP address
fetch("https://ipapi.co/json")
.then(response => response.json())
.then(data => {
console.log(data.latitude)
console.log(data.longitude)
const bdcAPI = `https://api-bdc/data/reverse-geocode-client?
// latitude=${data.latitude}&
// longitude=${data.longitude}`
getAPI(bdcAPI)
})
.catch(error => {
console.error("Error fetching IP address:", error);
});
});
function getAPI(bdcAPI) {
fetch(bdcAPI)
.then(response => response.json())
.then(data => {
console.log(data.countryName)
console.log(data.city)
functionURL(data.continentCode, data.continent, data.countryCode,
data.countryName, data.principalSubdivisionCode, data.principalSubdivision, data.city, data.locality)
})
.catch(error => {
console.error("Error fetching country and city name", error);
});
}
function functionURL(continentCode, continent, countryCode, countryName,
principalSubdivisionCode, principalSubdivision, city, locality) {
const functionurl = `aws lambda function url`
console.log(functionurl)
fetch(functionurl)
.then(response => response.json())
.then(data => {
console.log('Location logged successfully!!')
})
.catch(error => {
console.error("Error calling function url:", error);
});
}<html>
<head>
<link href="https://cdn.jsdelivr/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</head>
<body>
<div class="modal fade" id="load-modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="text-center">
...
</div>
</div>
</div>
</div>
</body>
</html>- 1 Have you try to open from laptop with DevTool open in mobile simulation mode? Do you have some error? – Stefino76 Commented Feb 23 at 8:07
- Hi - I had not tried before you told because i thought it would be more of a responsiveness check. However, when i checked now ... do not see any error other than a favicon.ico 404 error – Arun Commented Feb 23 at 8:44
- It seems the iframe code in my html is causing an issue – Arun Commented Feb 24 at 7:25
1 Answer
Reset to default 0As indicated by the JS console, the bootstrap constant is not defined when the JS code is executed (Uncaught ReferenceError: bootstrap is not defined).
You need to move the definition of myModal into the DOMContentLoaded listener, i.e. when bootstrap is also loaded.
Additionally, you could replace window.addEventListener with document.addEventListener, or merge them into the same document DOMContentLoaded listener.
document.addEventListener('DOMContentLoaded', function() {
const myModal = new bootstrap.Modal('#load-modal');
myModal.show();
});
document.addEventListener("DOMContentLoaded", function() {
// Fetch latitude and longitude based on IP address
fetch("https://ipapi.co/json")
.then(response => response.json())
.then(data => {
console.log(data.latitude)
console.log(data.longitude)
const bdcAPI = `https://api-bdc/data/reverse-geocode-client?
// latitude=${data.latitude}&
// longitude=${data.longitude}`
getAPI(bdcAPI)
})
.catch(error => {
console.error("Error fetching IP address:", error);
});
});
function getAPI(bdcAPI) {
fetch(bdcAPI)
.then(response => response.json())
.then(data => {
console.log(data.countryName)
console.log(data.city)
functionURL(data.continentCode, data.continent, data.countryCode,
data.countryName, data.principalSubdivisionCode, data.principalSubdivision, data.city, data.locality)
})
.catch(error => {
console.error("Error fetching country and city name", error);
});
}
function functionURL(continentCode, continent, countryCode, countryName,
principalSubdivisionCode, principalSubdivision, city, locality) {
const functionurl = `aws lambda function url`
console.log(functionurl)
fetch(functionurl)
.then(response => response.json())
.then(data => {
console.log('Location logged successfully!!')
})
.catch(error => {
console.error("Error calling function url:", error);
});
}<html>
<head>
<link href="https://cdn.jsdelivr/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</head>
<body>
<div class="modal fade" id="load-modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="text-center">
...
</div>
</div>
</div>
</div>
</body>
</html>本文标签： Javascript not working on mobile browserhowever works on desktopStack Overflow
版权声明：本文标题：Javascript not working on mobile browser , however works on desktop - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741318366a2372057.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论