Créer une page d'affichage de données qui peuvent accepter MessageEvent s contenant les données que vous souhaitez afficher:
<html>
<head>
<script>
window.addEventListener("message", function(event) {
/* for security, check event.origin here and
return if not a safe/recognized URL */
console.log(event.data); // prints message as string
/* dynamically display data on page here */
}, false);
</scrip>
</head>
<body>
<!-- put HTML template for display of data here -->
</body>
</html>
Ensuite, dans votre bookmarklet, ouvrez la page d'affichage de données dans une nouvelle fenêtre et envoyer les données en utilisant postMessage:
<!-- bookmarking this link creates the bookmarklet -->
<a href='javascript:(function() {
var dataWin = window.open("dataDisplayPageUrl.html", "dataWin");
dataWin.postMessage(dataLayer, "https://mywebsite.com");
})();'>bookmark this</a>
EDIT: Apparemment, plus compliquée dans IE: Is cross-origin postMessage broken in IE10?
EDIT 2: En testant cela dans Chrome, il semble qu'il y ait un léger délai entre l'ouverture d'une nouvelle fenêtre et le moment où elle peut recevoir des messages. Ajout d'un délai au bookmarklet résout le problème:
<!-- bookmarking this link creates the bookmarklet -->
<a href='javascript:(function() {
var dataWin = window.open("dataDisplayPageUrl.html", "dataWin");
window.setTimeout(function() {
dataWin.postMessage(dataLayer, "https://mywebsite.com");
}, 1000);
})();'>bookmark this</a>
Je suppose que j'aurais dû expliquer mieux. Scénario: - L'utilisateur visite une page, - Clique sur le signet - Il ouvre une nouvelle fenêtre (qui sera plus petite) et affiche toutes les données de dataLayer. – Leustad
Clics sur le * Bookmarklet – Leustad
Oui, c'est ce que fait ce code. Si vous voulez que la nouvelle fenêtre soit plus petite, vous pouvez passer des options à window.open. Voir les documents ici: https://developer.mozilla.org/en-US/docs/Web/API/Window/open – radiaph