时间戳

首页 > 解决方案 > 从chrome中的父选项卡设置角度应用程序的标题

javascript - 从chrome中的父选项卡设置角度应用程序的标题

问题描述

我有一个应用程序，它在单击按钮时在新选项卡中打开另一个角度应用程序。我需要从父选项卡覆盖新选项卡的标题并设置一个值。下面的一些模拟代码

<!DOCTYPE html>
<html>

<head>
    <title>New tab</title>
</head>

<body>
    <div>
        <input id="toolId" placeholder="ToolId" style="padding: 4px 0; width: 70px;" />

        <button id="button">Launch</button>
    </div>

    <script>
        window.onload = function () {
            document.getElementById('button').addEventListener('click', () => {

                var newWin = window.open('http://localhost:4200', "_blank");

                // add a load listener to the window so that the title gets changed on page load
                newWin.onload = function() {
                    newWin.document.title = 'New Title';
                    console.log('Loaded');
                };

                // newWin.document.title = 'New Title';
                
            })
        }
    </script>
</body>

</html>

但是当我尝试这样做时，我总是看到角度应用程序设置的默认值，而不是上面代码设置的默认值。我在这里想念什么？是不是偶然被chrome屏蔽了，如果是的话，找不到任何相关的文档。

标签： javascriptangulartabs

解决方案

您可以在文档中找到对此的解释：

<title> 的问题：

显而易见的方法是将组件的属性绑定到 HTML，如下所示：

<title>{{This_Does_Not_Work}}</title>

对不起，但这行不通。应用程序的根组件是标签中包含的元素。HTML <title> 在文档中，在正文之外，使得 Angular 数据绑定无法访问。您可以抓取浏览器文档对象并手动设置标题。这很脏，并且会破坏您有一天在浏览器之外运行应用程序的机会。

推荐阅读