Javascript настройка структуры PostMessage

Итак, я пытаюсь создать файловую структуру, где у меня есть файл "user_actions.html"

<!DOCTYPE html>
<html>
<head>
  <title>User Actions</title>
  <meta charset="utf-8">
  <script src="lib/jquery-3.2.1.min.js"></script>
  <script>
  /* global $ */
  $(document).ready(function() {
    'use strict';
    $(window).on('message', function(evt) {
      //Note that messages from all origins are accepted

      //Get data from sent message
      var data = evt.originalEvent.data;
      //Create a new list item based on the data
      var newItem = '\n\t<li>' + (data.payload || '') + '</li>';
      //Add the item to the beginning of the actions list
      $('#actions').prepend(newItem);
    });
  });
  </script>
</head>

<body>
  <iframe id="encoder_iframe" src="reverser_service.html"></iframe>
  <ul id="actions">
  </ul>
</body>
</html>

и контрольный файл "reverser_service.html". Служба reverser_service предназначена для получения строки, обращения к ней и отправки ее в качестве сообщения в документ, содержащий "reverser_service.html" в качестве iframe.

Я использовал http://blog.teamtreehouse.com/cross-domain-messaging-with-postmessage в качестве ссылки на обучение, но у меня все еще есть некоторые проблемы здесь и там.

Мне не удалось выяснить, как я могу плавно ссылаться на текущий каталог файлов в качестве корневого каталога, поскольку мне не удается вызвать "user_actions.html" из моего "reverser_service.html" (они находятся в одном каталоге файлов).

Я не совсем уверен, как я могу выполнить последнюю часть задания по обучению ("отправка его в документ, содержащий реверсор в качестве iframe"), но я чувствую, что могу попробовать поиграться с этим даже в одиночку, пока я добираюсь до эта часть, так что это только в будущем.

Также быстрый вопрос: насколько я понял, user_actions.html - это "получатель", а "reverser_service.html" - это отправитель, но так ли это?

Мой reverser_service.html:

<h1>reverser_service</h1>
<p>
  This document should send the payload to: user_actions.html
</p>
<p>
<iframe id="receiver" src = "/user_action/" width="500" height="200">
  <p>Your browser does not support iframes.</p>
</iframe>
<button id="send">Submit</button>
</p>
<p>
<button onclick="document.getElementById('send').value = ''">Clear Input</button>
</p>

и мой "reverser_service.js" (все еще в том же каталоге файлов):

window.onload = function() {
    // Get the window displayed in the iframe.
    var receiver = document.getElementById('receiver').contentWindow;

    // Get a reference to the 'Send Message' button.
    var btn = document.getElementById('send');

    // A function to handle sending messages.
    function sendMessage(e) {
        // Prevent any default browser behaviour.
        e.preventDefault();

        // Send the message after reversing it 
        var message = "";
        message = receiver.split("").reverse().join("");
        receiver.postMessage(message);
    }

    // Add an event listener that will execute the sendMessage() function
    // when the send button is clicked.
    btn.addEventListener('click', sendMessage);
}

Если вы считаете, что этот вопрос следует изменить, включив в него только первый вопрос (или вопросы), дайте мне знать, и я отредактирую его

Источник

0 ответов

Другие вопросы по тегам