Javascript: Можно ли передавать данные в двух направлениях через iframe?

Для тех, кто имеет особые знания об этом, все это относится к WordPress «Настройщик тем», хотя на это не нужно отвечать.Javascript: Можно ли передавать данные в двух направлениях через iframe?

В принципе, у меня есть страница (на PHP), которая содержит левую «панель» настроек, которые применяются к содержимому iframe, который является правой частью экрана.

Концептуально, я ищу, чтобы использовать jQuery draggable, чтобы сделать CSS background-position основного фонового изображения регулируемым через функцию перетаскивания. Мне нужно применить draggable() на странице customize.php, поставить там сценарий, а затем манипулировать DOM внутри iframe. Это нужно сделать на уровне контейнера/родителя, потому что на этом уровне есть настройка, которая будет обновлять координаты X и Y и сохранять их в настройках, хранящихся там.

Я думаю, что мне нужно бы невозможно, но мне интересно, если это возможно с JavaScript, чтобы сделать как из следующих действий:

Получить содержимое фрейма
Манипулирование DOM внутри iframe, отрегулируйте фоновое изображение с помощью draggable() и сохраните background-position координаты как атрибут данных, а затем сохраните их в соответствующем поле ввода параметров.

По моему опыту, манипулируя DOM внутри фрейма от «родителя»/уровень контейнера трудно, и мне интересно, если есть что-то я не знаю, это, безусловно, невозможно, или есть какой-то обходной путь? (Обратите внимание, что исходный домен тот же, поэтому не было бы проблем с междоменным iframe)

источник

2013-04-08 Brian

если область фрейма и родителя совпадает вы можете общаться между обоими. Вот как работают редакторы TinyMCE и CKEditor. js объекты могут передаваться между обоими, но с объектами dom, которые вам нужно заботиться из-за утечек памяти и других проблем. если вы используете библиотеки jQuery, они также будут работать, но только если контекст является правильным документом. –

дополнительное примечание. вы не можете получить перетаскиваемую работу из коробки из документа в iframe. это возможно, но для этого требуется некоторое событие, проходящее от iframe до документа, а также наоборот, и некоторые дополнительные настройки. но в целом это возможно. У меня что-то вроде этого работает. но поскольку это был просто тест, я не знаю, есть ли у меня его где-то еще. –

Спасибо за понимание.Если вы найдете его и почувствуете, что мне нужен код обмена, я с радостью соглашусь с ним в качестве ответа на благо других, которые хотят сделать то же самое. – Brian

Вот приведенный код моей тестовой реализации для родительской связи iframe. Я добавил несколько примеров, как это можно использовать. Но я должен отметить, что он не входит в мою лабораторию, и в настоящее время у меня нет времени, чтобы проверить, полностью ли он совместим с браузером. но если этого не будет, будут только некоторые незначительные изменения, которые необходимо выполнить. (РЕДАКТИРОВАТЬ проверено в текущих хромовых, ff и IE 6-9)

Я надеюсь, что это поможет вам с вашей проблемой. Но снова я не могу гарантировать, что он будет работать отлично (но я уверен).

код родителя

<!doctype html> 
<html> 
<head> 
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
    <title>index</title> 
    <script src="jquery.js" type="text/javascript" charset="utf-8"></script> 
    <script type="text/javascript" charset="utf-8"> 

    (function($, window, undefined) { 

     var iframe; 

     // the connector object the will be passed to the iframe and will be used as "API" 
     var parentConnector = { 
      _window : window, // a reference to the parents window (not really necessary but nice to have) 
      $ : $,    // a reference to the parents jQuery that can be accessed from the iframe (use with caution) 

      // here you will define you "API" for the parent (the functions you want to call from the iframe) 
      setElementValue : function(selector, value) { 
       $(selector).val(value); 
      } 

     } 

     // this function is called by the iframe to register the iframe in the parent 
     window.registerIFrame = function(iframeHelper) { 
      //if you have multible iframe in the parent you could change the code here to store them in e.g. an arrray or with a key in an object 
      iframe = iframeHelper; 

      // register the parent in the iframe 
      iframe.registerParent(parentConnector); 
     } 



     $(document).on("click",".slideUp",function(event) { 
      event.preventDefault(); 

      /* 
      call a function on the helper object, this is the savest way for the commincation because 
      there is it minimizes the risk to mix the differnt context 
      */ 
      iframe.slideUp(); 

      /* 
      This way would work at least in chrome, with the current version with jquery, but it relays the jQuery implementation 
      that the correct document is used. 
      */ 
      iframe.$(".info-from-parent").val("slideUp"); 

      /* 
      One thing you should NEVER do is the following: 

      iframe.$(".info-from-parent").append($("<div></div>")); 

      The reason you should not do this is because this mixes DOMElements of different context. 
      This will result in unexpected crashes/bahaviors in some browsers (but could work in others, or at least it will look like it would work) 
      */ 

     }); 


     // same as the slide down, it is just there to have some interaction sample 
     $(document).on("click",".slideDown",function(event) { 
      event.preventDefault(); 
      iframe.slideDown(); 
      iframe.$(".info-from-parent").val("slideDown"); 
     }); 


    })(jQuery, window); 

    </script> 
</head> 
<body> 
    <input type="text" class="info-from-iframe"><br> 
    <a href="#" class="slideUp">slideUp</a> <a href="#" class="slideDown">slideDown</a><br> 
    <iframe src="iframe.html"></iframe> 

</body> 
</html>

код фрейма

<!doctype html> 
<html> 
<head> 
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
    <title>iframe</title> 
    <script src="jquery.js" type="text/javascript" charset="utf-8"></script> 
    <script> 

    (function($,window,undefined) { 

     //the connector object the will be passed to the parent and will be used as "API" 
     var iframeConnector = { 

      _window : window,  // a reference to the iframes window (not really necessary but nice to have) 
      _parent : undefined, 
      $ : $,    // a reference to the iframes jQuery that can be accessed from the parent (use with caution) 

      // this function is called by the parent to register the parent in the iframe 
      registerParent : function(parent) { 
       this._parent = parent; 
      }, 

      /* here you will define you "API" for the iframe (the functions you want to call from the parent)*/ 
      slideUp : function() { 
       $(".test").slideUp(); 
      }, 

      slideDown : function() { 

       $(".test").slideDown(); 
      }, 

      setElementValue : function(selector, value) { 
       $(selector).val(value); 
      } 

     }; 

     // register the iframe in the parent 
     window.parent.registerIFrame(iframeConnector); 

     $(document).mousemove(function(event) { 
      //use the parents "API" to call a function in the parent 
      iframeConnector._parent.setElementValue(".info-from-iframe", event.clientX+", "+event.clientY); 
     }); 

    })(jQuery,window); 


    </script> 
</head> 
<body> 
    <input type="text" class="info-from-parent"><br> 
    <div class="test"> 
     iframe 
    </div> 
</body> 
</html>

источник

2013-04-10 14:23:00

Javascript: Можно ли передавать данные в двух направлениях через iframe?

ответ

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