Lösungen ,

titel-tag-bei-inaktivitat-andern.php

Quell Code

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" lang="de">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
	<meta name="format-detection" content="telephone=no">

	<title>Aktiver Browsertab</title>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

	<style>
		.blur-button {
			display: inline-block;
			cursor: pointer;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
			font-family: sans-serif;
			color: white;
			border-top-color: #257989;
			background-color: #257989;
			border-bottom-color: #1d606d;
			font-size: 0.95em;
			padding: 0.75em 1.6em 0.55em 1.6em;
			margin: 0.5em 0;
			text-decoration: none;
			border-top-width: 3px;
			border-bottom-width: 3px;
			border-left-width: 0;
			border-right-width: 0;
			border-top-style: solid;
			border-bottom-style: solid;
			border-radius: 3px;
			outline: none;
			line-height: 150%;
			text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
			-webkit-box-shadow: none;
			box-shadow: none;
			-webkit-appearance: none;
			-moz-appearance: none;
		}
	</style>
</head>
<body>
	<a href="" target="_blank" class="blur-button">Fenster in neuem Tab/Fenster öffnen</a>
	<script>
		focusTitle = $('head title').text(); // Originalen Title speichern
		$(window).on('blur focus', function(e) {
			var prevType = $(this).data('prevType'); 
			if (prevType != e.type) {
				switch (e.type) {
					case 'blur':
						var i=0;
						tab = setInterval(function() {
							switch(i++%2) { // Die Zahl hinter dem % muss mit der Anzahl der Cases übereinstimmen
								case 0: document.title = 'Inaktiver'; // Erste Anzeige im Tab
								break;
								case 1: document.title = 'Browsertab'; // Zweite Anzeige im Tab
							}
						}, 1000); // Zeit zwischen dem Wechsel der Anzeigen
					break;
					case 'focus': 
					clearInterval(tab);
					document.title = focusTitle; // Originalen Title einsetzen
					break;
				}
			}
			$(this).data('prevType', e.type);
		});
	</script>
</body>
</html>