纯HTML页面中iframe自定义User Agent无效问题求助

问题背景 #

我想在服务器运行的纯HTML页面中，给iframe设置伪造的User Agent字符串，以此模拟智能手表访问本地站点。之前查过两个相关方案，但都不适用：

• 第一个方案是针对Chrome扩展开发的，我不需要做扩展，只需要编写纯HTML页面；
• 第二个方案没有同时覆盖userAgent和'user-agent'属性，存在适配问题。

我正在制作一个带智能手表模拟器的纯HTML页面，目的是让本地站点通过JavaScript检测伪造的User Agent后加载对应的CSS样式。

当前代码 #

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>

测试结果与疑问 #

测试后模拟器并未识别为三星Galaxy Watch设备，在控制台执行以下命令：

var sq = document.querySelector('.round')
sq.contentWindow.navigator.userAgent

得到的是电脑的User Agent字符串，而非我设置的伪造值。不清楚为什么之前查到的方案在我的项目里不生效。

内容的提问来源于stack exchange，提问作者Oo'-