Обмен данными между iframe js через postMessage + SAME ORIGIN POLICY

240

05 мая 2018, 16:24

Как с помощю postMessage считать информацию с одного айфрейма(iframe) и записать в другой? Это был скороченый вариант вопроса. Помогите дураку вопрос жизни и смерти. Смотрите есть такая задача:

из li-шек(внутриних частей ul) и их атрибутов name надо извлечь данные и на их основе построить форму. Пример пункта формы:'dataform1
.
Затем, надо передать html этой формы во второй айфрейм (id = second) после того как в нем все удалите (прикол в том что за 2(два) iframe ссылаются на один файл(или так нельзя?)).
Загвоздка(здесь и возникли проблемы) в том что Передавать надо postMessage(желательно) или
contentDocument. Action в теге
с class="pm".
Еще одна проблема а как отправить форму обычным способом (не ajax) через js Метод POST. Я то это сделал напрямую через 'window.frames.second.document.body.innerHTML' но проблема в том что не это не безопасно и браузер ругается Помогите пожалуйста. Прикрепляю код айфрейма и код самого сайта. Зарание благодарочка.

Это айфрейм:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
	<title></title> 
</head> 
<body> 
<p id="n">dflf;dfkl</p> 
<p>fddfd</p> 
<p>fddfd</p> 
<p>fddfd</p> 
 
<p>fddfd</p> 
<ul> 
  <li name="dataform1">hi</li> 
  <li name="dataform2">my</li> 
  <li name="dataform3">name</li> 
  <li name="dataform4">is</li> 
  <li name="dataform5">coo1kie</li> 
  <li name="dataform6">first</li> 
  <li name="dataform7">second</li> 
  <li name="dataform8">third</li> 
  <li name="dataform9">fourth</li> 
  <li name="dataform10">fifth</li> 
  <li name="dataform11">sixth</li> 
  <li name="dataform12">seventh</li> 
  <li name="dataform13">eighth</li> 
</ul> 
 
<p class="pm">http://185.174.63.223//ajaxishere/aj.php"</p> 
 
 
</body> 
</html>

Это основа:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
	<title></title> 
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
</head> 
<body> 
 
<iframe id="first" name="first" src="iframe.html" sandbox="allow-forms allow-scrips"></iframe> 
<iframe id="second" name="second" src="iframe.html" sandbox="allow-forms allow-scrips"></iframe> 
 
</body> 
<script > 
	   
 
function funk(){ 
    var dat =$('iframe#first').contents().find("li"),//виделяем данные из li 
  //  console.log(dat[0].innerHTML); 
    dnams=new Array(), 
    dval=new Array(), 
    adrs=$('iframe#first').contents().find("p.pm").html();//виделяю адрес 
    //console.log(nadrs[0].innerHTML); 
    for(var i = 0; i<dat.length; i++){ 
        dnams[i]=dat[i].getAttribute("name"); 
        dval[i]=dat[i].innerHTML; 
    } 
     
     
 window.frames.second.document.body.innerHTML='<form method="post" action="'+adrs+'" id="outf"></form>'; 
     
    for(var i = 0;i<dnams.length;i++){ 
         $('iframe#second').contents().find("#outf").append('<label>'+dnams[i]+'</label><br><input type="text" name="'+dnams[i]+'" value="'+dval[i]+'"> <br> '); 
    } 
     $('iframe#second').contents().find("#outf").append('<input type="submit">'); 
    } 
    
setTimeout(funk,1000); 
</script> 
</html>