根据内容更改窗口标题可编辑答案

【问题标题】：Change Window Title Depending On Content Editable根据内容更改窗口标题可编辑
【发布时间】：2019-12-04 22:04:08
【问题描述】：

我希望将一个变量（比如说“title”）设置为窗口标题，然后，如果您将内容设置为可编辑，则该窗口将被称为“Edit On”，当您将其关闭时它将窗口标题设置为变量“title”。虽然我仍然不太了解 JavaScript，但如果有人可以编写代码行或帮助我，那将会很有帮助。这是我目前正在使用的代码。

document.body.contentEditable = document.body.contentEditable == 'true' ? 'false' : 'true'; 
document.designMode=document.designMode == 'on' ? 'off' : 'on';
document.close;

【问题讨论】：

你的意思是你有一个例如屏幕上的 HTML <div> 元素的 contentEditable 属性设置为 true，一旦有人更改它的内容，就应该更改窗口标题？我不确定您打开或关闭 contentEditable 是什么意思。
尝试在代码前面添加“javascript:”并将其作为书签运行，我希望它重命名选项卡以显示整个页面是否可编辑。

标签： javascript google-chrome bookmarklet bookmarks

【解决方案1】：

我不确定您要达到什么目的，但如果您将整个正文的 contentEditable 设置为 true，则不会返回。用户将如何离开“编辑模式”？

但是，您可以做的是向 DOM 添加一个空的 HTML <div> 元素，使其几乎与浏览器窗口的整个大小一样，并添加类似“就绪”按钮的内容。

有两个对您的用例有用的事件监听器：

onfocus：只要用户点击 div 内的某处/在其中键入任何内容，就会触发。如果它被触发，请更改文档标题。

onblur：一旦用户点击了 div 之外的某个地方，它就会触发。如果它被触发，则将文档标题重置为默认值。

此外，您可以向就绪按钮添加 click 侦听器以离开编辑模式并更改文档标题。

这是一个例子：

<html>
<head>
</head>
<body>
<div id="myDiv" style="width:100%;height:90%;background-color:rgb(240,240,240)" contentEditable=true>
</div>
<button id="readyButton">Ready</button>
<script type="text/javascript">
var myDocumentTitle = "My Title";
document.title = myDocumentTitle;
var myDiv = document.getElementById("myDiv");
myDiv.onfocus = function() {
  document.title = "Edit On";
}
myDiv.onblur = function() {
  document.title = myDocumentTitle;
}
var myButton = document.getElementById("myButton");
myButton.onclick = function() {
  document.title = myDocumentTitle;
}
</script>
</body>
</html>

【讨论】：

您可以将其设置为 false。当内容设置为可编辑时，我正在尝试执行 document.title = example，请记住，这将作为书签运行。
我想我会把书签保留在我的网站上，不过还是谢谢你的帮助。