как передать данные в переменные в iframe

Question

Я работаю над проектом, который соединяет локальный сервер и глобальный сервер (серверы не могут общаться), сервер взаимодействует с html-файлами через сокет io. Я очень новичок в этой концепции

мой сценарий

1. браузер подключается к локальному приложению
2. локальный сервер отправляет html-страницу, содержащую iframe, а источником iframe является глобальный сервер
3. global server отправляет html-страницу, мой браузер показывает html-страницу вглобальный сервер и мой локальный сервер также работает

как я могу передавать данные с локального сервера на глобальный сервер? в основном локальный сервер отправляет данные в html-файл контейнера и передает данные в html-файл в iframe, чтобы он мог передавать данные глобальному серверу. Может быть, из метода html-контейнера вызывается метод в html-файле iframe и отправляются данные? возможно ли это?

надеюсь, я ясно изложил свою точку зрения, пожалуйста, помогите

Answer 1

Что я понял, что вам нужно передать некоторую переменную в iframe, чтобы вы могли добавить к ней свойство src вашего iframe в виде строки запроса.

Вы можете получить это значение строки запроса при перезагрузкеiframe.

например

<div class="my-frame-container" myurl="http://myserver.com" elementid="mycontainerframe"><iframe id="myiFrame" src="" allowtransparency="true" width="100%" height="100%" frameborder="0"></iframe></div>   

 someEvent(e.g.: click)
    window.parent.postMessage(
                {
                    event_id: 'reloadMyFrame',                        
                },
                "*"
            );

и в файле iframe js вы можете добавить прослушиватель событий

     var eventMethod = window.addEventListener ? "addEventListener" : 
     "attachEvent";
     var eventer = window[eventMethod];
     var messageEvent = eventMethod == "attachEvent" ? "onmessage" : 
     "message";

  eventer(messageEvent, function (e) {
            var eventId = e.data["event_id"];
    if(eventId==="reloadMyFrame")
    {
    var container = $('.my-frame-container');
    var frameSrc = container.attr('myurl');
    $('#myiFrame').attr("src", url);
            $('#myiFrame').reload();
       }
      }
    }

Answer 2

сообщение работает нормально, но вместо сообщения вы можете вызывать методы внутри фрейма, например, экземпляр

 $('#myIFrame').on('load',()=>{
        let q = document.getElementById("myIFrame").contentWindow
        q.method() // a method inside iFrames js
    })

, и вы можете вызывать метод из iFrame для основного типа

window.top.method();

НО это будет поймано на Uncaught DOMException: заблокировал фрейм с origin () от доступа к фрейму перекрестного происхождения. если вы отключите web-безопасность, она будет работать нормально

Answer 3

Лучшим способом является использование шины событий javascript

//main doc
window.addEventListener("message", receiveMessage, false);

function receiveMessage(event)
{
   console.log("main",event);
   // ...
}
window.document.getElementById("iframe").contentWindow.postMessage('test', *);

//iframe
window.addEventListener("message", receiveMessage, false);

function receiveMessage(event)
{
   console.log("iframe",event);
   // ...
}

window.parent.postMessage('test', *);

знать о проблемах с CORS

https://developer.mozilla.org/docs/Web/API/Window/postMessage

Более полный пример