JavaScript — передать переменные — значения в мой fancybox iframe

Question

JavaScript — передать переменные — значения в мой fancybox iframe

вот проблема:

у меня есть iframe fancybox, инициализируй так:

$(".caller").fancybox({
type : "iframe",
closeBtn : true,
iframe : {preload : false},
});

это вызывает простую форму как это:

<form ......>
<label>Test : </label>
<br>
<input type="text" name="myInput" id="myInput" value=""/>
</form>

я пытаюсь установить значения по умолчанию в моем iframe, когда он появляется, поэтому я добавляю это в init:

...
beforeShow : function(){
$("#myInput").val("test value");
}

Но это никак не влияет …: /

0

fancybox html javascript jquery php

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

У вас есть два варианта:

Опция 1: Вы передаете значение через параметр HTTP-GET в iframe и читаете его в iframe.
Вариант 2: С другой стороны вы можете использовать postMessaging API общаться между обоими кадрами. Модель безопасности обмена сообщениями между окнами на данный момент является двусторонней. Это означает, что отправитель гарантирует, что получающий домен targetDomain, И получатель проверяет, что сообщение пришло event.origin,

Пример отправителя:

<iframe src="http://a.JavaScript.info/files/tutorial/window/receive.html" id="iframe" style="height:60px"></iframe>

<form name="form">
<input type="text" name="msg" value="Your message"/>
<input type="submit"/>
</form>

<script>

var win = document.getElementById("iframe").contentWindow

document.forms.form.onsubmit = function() {
win.postMessage(
this.elements.msg.value,
"http://a.JavaScript.info")
return false
}

</script>

Пример получателя:

<div id="test">Send me a message!</div>
<script>
function listener(event){
if ( event.origin !== "http://javascript.info" )
return

document.getElementById("test").innerHTML = "received: "+event.data
}

if (window.addEventListener){
addEventListener("message", listener, false)
} else {
attachEvent("onmessage", listener)
}
</script>

ОБНОВИТЬ

Вы можете использовать что-то подобное, чтобы удалить iframe после отправки.

index.html

<iframe id="frame" src="frame.html" id="iframe" style="height:60px"></iframe>
<script>

function closeIframe(){
$('#frame').remove;
}

</script>

frame.html:

<form id="my-form" name="form">
<input type="text" name="msg" value="Your message"/>
<input type="submit"/>
</form>
<script>
$('#my-form').submit(function(e){
e.preventDefault();
$.ajax({
url: 'http://host.com/action/',
type: 'POST',
data: new FormData(this),
processData: false,
contentType: false
}).success(function(){
parent.closeIframe();
});
});
</script>

2