Of course that I have read these following questions:
- Custom User Agent with Iframes : the most recent question, but it is designed for the Chrome extension that @fredthedoggy wanted to create. I did not intend to create a Chrome extension. I intend to write a pure HTML page, but running the server.
- Load iframe content with different user agent : @aero-wang’s answer didn't answer with both
userAgentand @mahmonir-bakhtiyari’'user-agent'. Same problem of @fredthedoggy's question.
I am creating a pure HTML page in which I created the smartwatch simulators to simulate the local site to detect the fake user agent string in JavaScript to add a new CSS link. Here are my current codes:
simulator.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Smartwatches with round and squircle displays design responsive</title>
<style>
iframe
{
background-color: antiquewhite;
border: 0;
}
.round
{
width: 300px;
height: 300px;
}
.sqirc
{
-webkit-clip-path: url(#squircle);
clip-path: url(#squircle);
width: 300px;
height: 335px;
}
.round
{
border-radius: 50%;
}
.result
{
align-items: center;
display: flex;
flex-direction: row;
margin-top: 20px;
}
.result label
{
margin-right: 10px;
}
</style>
</head>
<body>
<!-- Squircle display -->
<iframe allow="geolocation 'self'" class="sqirc" name="Apple Watch Series 6" sandbox="allow-scripts allow-same-origin allow-popups allow-pointer-lock allow-orientation-lock allow-modals allow-forms" src="https://www.google.com/search?igu=1"></iframe>
<!-- Round display -->
<iframe allow="geolocation 'self'" class="round" name="Samsung Galaxy Watch 5" sandbox="allow-scripts allow-same-origin allow-popups allow-pointer-lock allow-orientation-lock allow-modals allow-forms" src="https://www.google.com/search?igu=1"></iframe>
<script type="text/javascript">
// Getting the elements
var url = document.getElementById('url');
// I use only the keyboard to press Enter to update the URL
url.addEventListener('keyup', function(e)
{
if (e.keyCode == 13)
{
update();
}
});
window.onload = function()
{
function setUserAgent(window, userAgent)
{
if (window.navigator.userAgent != userAgent)
{
var userAgentProp = { get: function () { return userAgent; } };
try
{
Object.defineProperty(window.navigator, 'userAgent', userAgentProp);
}
catch (e)
{
window.navigator = Object.create(navigator,
{
userAgent: userAgentProp
});
}
}
}
// Load the user agent strings
var sqircUserAgent = 'atc/1.0 watchOS/8 model/Watch6,2 hwp/t8301 build/18T567 (6; dt:226)';
var roundUserAgent = 'Mozilla/5.0 (Linux; Android 11; SAMSUNG SM-R860) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/2.0.10 Chrome/102.0.5005.125 Mobile Safari/537.36';
var sqirc = document.querySelector('.sqirc');
var round = document.querySelector('.round');
setUserAgent(rect.contentWindow, rectUserAgent);
setUserAgent(sqirc.contentWindow, sqircUserAgent);
setUserAgent(round.contentWindow, roundUserAgent);
};
function update()
{
var urlValue = url.value;
// Updating the simulators settings
var rect = document.querySelector('.rect');
rect.src = urlValue;
var sqirc = document.querySelector('.sqirc');
sqirc.src = urlValue;
var round = document.querySelector('.round');
round.src = urlValue;
}
// Updating after the user agent strings have been loaded
update();
</script>
</body>
</html>
```
local_site.html:<script> var isSamsungWatch = /SAMSUNG SM-R860/i.test(navigator.userAgent); if (isSamsungWatch) { console.log("This is a Samsung Galaxy Watch device."); } else { console.log("This is not a Samsung Galaxy Watch device."); } </script>
The result said that, in the simulators, they were not Samsung Galaxy Watch device. I tested the commands in the console:
var sq = document.querySelector('.round')
sq.contentWindow.navigator.userAgent
It gave a wrong user agent string. It is my computer's user agent string. For this reason, I do not know why @aero-wang's or @wOxxOm's suggestions do nor work my for my project.
