1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124
| <!DOCTYPE HTML>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>[Enfant] Communication entre page</title>
<meta name="Author" content="NoSmoking">
<meta name="DVP-discussion" content="1877992">
<style>
html, body {
margin: 0;
padding: 1em;
font: 1em/1.5 Verdana,sans-serif;
}
main, #main {
display: block;
position: relative;
margin: auto;
max-width: 60em;
}
h1, h2,h3 {
color: #069;
}
input, button {
width: 12em;
padding: .5em;
max-width: 12em;
font: inherit;
}
button {
cursor: pointer;
}
label {
display: inline-block;
text-align: right;
min-width: 10em;
}
label:after {
content: ":";
margin: 0 .5em;
}
code {
font-family: "courier new";
font-size: 1em;
color: #069;
}
</style>
</head>
<body>
<main>
<h1>Page enfant</h1>
<p>
<label>Nom</label><input id="champ-nom" value="">
</p>
<p>
<label>Prénom</label><input id="champ-prenom" value="">
</p>
<p>
<button id="cde-upDateChampsEnfant">Get from parent</button>
<button id="cde-upDateChampsParent">Set to parent</button>
<button id="cde-closePage">Ferme la page</button>
</p>
<p>
<b>Nota</b> : la fonction <code>upDateChampsEnfant()</code> peut être appelée directement sur le <code>load</code> de la page enfant.
</p>
</main>
<script>
"use strict";
var winParent = window.opener;
function closePage() {
// si fenêtre parent existe
if (winParent) {
// appel à la méthode de la fenêtre parent
winParent.closePopup();
}
}
function upDateChampsEnfant() {
// si fenêtre parent existe
if (winParent) {
var text;
var oElems = document.querySelectorAll("[id^=champ-]");
// mise à jour des champs de la page enfant
[].forEach.call(oElems, function (elem) {
// appel à la méthode de la fenêtre parent
text = winParent.getTextContent(elem.id);
// mise à jour champ page enfant
if (text) {
elem.value = text;
}
});
}
}
function upDateChampsParent() {
// si fenêtre parent existe
if (winParent) {
var text;
var elemParent;
var oElems = document.querySelectorAll("[id^=champ-]");
// mise à jour des champs de la page parent
[].forEach.call(oElems, function (elem) {
text = elem.value;
// appel à la méthode de la fenêtre parent
elemParent = winParent.setTextContent(elem.id, text);
// modification CSS élément de la page parent
if (elemParent) {
elemParent.className = "fond-vert";
}
});
}
}
// initialisation des boutons
var oBtns = document.querySelectorAll("button");
[].forEach.call(oBtns, function (elem) {
var cde = elem.id.replace("cde-", "");
elem.onclick = window[cde] || null;
});
</script>
</body>
</html> |
Partager