2015-03-24 2 views
1

Я пытаюсь создать букмарклет для отображения некоторых объектов в DataLayer, и я пытаюсь отобразить эти данные в отдельном окне.Как создать букмарклет для отображения объектов в dataLayer в отдельном окне

Это:

for (var i = 0; i < dataLayer.length; i++){ console.log(dataLayer[i]); }

можно легко отобразить dataLayer на консоли в сыром моде, но это не то, что я хочу.

Может ли кто-нибудь помочь?

Спасибо за ваше время.

ответ

0

Создание страницы данных дисплея, который может принимать MessageEvent s, содержащие данные, которые вы хотите отобразить:

<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> 

Затем в букмарклет, откройте страницу данных отображения в новом окне и отправить данные используя 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: Видимо более сложным в IE: Is cross-origin postMessage broken in IE10?

EDIT 2: Проверка этого в Chrome, кажется, что существует небольшая задержка между открытием нового окна и получением сообщений. Добавление задержки в букмарклет устраняет проблему:

<!-- 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> 
+0

Думаю, я должен был объяснить лучше. Сценарий: - Пользователь посещает страницу, - Нажимает на закладку - Открывает новое окно (которое будет меньше) и отображает все данные из dataLayer. – Leustad

+0

Клики по * Закладок – Leustad

+0

Да, вот что делает этот код. Если вы хотите, чтобы новое окно было меньше, вы можете передать параметры window.open. См. Документы здесь: https://developer.mozilla.org/en-US/docs/Web/API/Window/open – radiaph

 Смежные вопросы

  • Нет связанных вопросов^_^