Window.open ve posta yöntemiyle parametreleri iletir


101

Window.open yöntemi ile post yöntemiyle geçmem gereken parametrelerle yeni bir site açıyorum.Çözüm buldum ama maalesef çalışmıyor. Bu benim kodum:

<script  type="text/javascript">    
function openWindowWithPost(url,name,keys,values)
{
    var newWindow = window.open(url, name);

    if (!newWindow) return false;

    var html = "";
    html += "<html><head></head><body><form id='formid' method='post' action='" + url +"'>";

    if (keys && values && (keys.length == values.length))
        for (var i=0; i < keys.length; i++)
            html += "<input type='hidden' name='" + keys[i] + "' value='" + values[i] + "'/>";

    html += "</form><script type='text/javascript'>document.getElementById(\"formid\").submit()</sc"+"ript></body></html>";

    newWindow.document.write(html);
    return newWindow;
}
</script>  

Sonra, diziler oluşturuyorum:

<script type="text/javascript">    
var values= new Array("value1", "value2", "value3") 
var keys= new Array("a","b","c") 
</script>  

Ve işlevi şu şekilde çağırın:

<input id="Button1" type="button" value="Pass values" onclick="openWindowWithPost('test.asp','',keys,values)" />   

Ancak bu butona tıkladığımda test.asp sitesi boş oluyor (tabii ki geçiş değerlerini almaya çalışıyorum - Request.Form("b")).

Bu sorunu nasıl çözebilirim, neden geçiş değerleri alamıyorum?


2
Ne çalışmıyor? Bir kopyasını jsfiddle.net/TZMMF'ye kaydettim ve beklendiği gibi çalışıyor.
PleaseStand

Cevap için teşekkürler. Evet, üzgünüm - yukarıdaki kod çalışıyor. Ancak bu işlevi anahtar dizisiyle test ediyorum: <script type = "text / javascript"> var values ​​= new Array ("value1", "value2", "value3") var keys = new Array ("1", "2 "," 3 ") // a, b, c yerine </script> Request.Form (" 2 ") ile değer alıyorum IE ve Firefox'ta boş sayfa alıyorum.
luk4443

Yanıtlar:


121

Yeni pencereye bir form yazmak yerine (HTML kodundaki değerlerin kodlanmasıyla doğru olması zordur), boş bir pencere açın ve ona bir form gönderin.

Misal:

<form id="TheForm" method="post" action="test.asp" target="TheWindow">
<input type="hidden" name="something" value="something" />
<input type="hidden" name="more" value="something" />
<input type="hidden" name="other" value="something" />
</form>

<script type="text/javascript">
window.open('', 'TheWindow');
document.getElementById('TheForm').submit();
</script>

Düzenle:

Formdaki değerleri dinamik olarak ayarlamak için şu şekilde yapabilirsiniz:

function openWindowWithPost(something, additional, misc) {
  var f = document.getElementById('TheForm');
  f.something.value = something;
  f.more.value = additional;
  f.other.value = misc;
  window.open('', 'TheWindow');
  f.submit();
}

Formu göndermek için işlevi gibi değerlerle çağırırsınız openWindowWithPost('a','b','c');.

Not: Aynı olmak zorunda olmadıklarını göstermek için parametre adlarını form adlarına göre değiştirdim. Değerleri izlemeyi kolaylaştırmak için genellikle onları birbirine benzer tutarsınız.


Ben de aynen öyle düşünüyordum. Gönderilen orijinal kod işe yaradı gibi görünüyordu ... IE dışında.
PleaseStand

Cevap için teşekkürler. Ama bir masam var, burada sütunda düğmeler var. Bu butona tıkladığımda yeni sayfa açıyorum ve bazı parametreleri geçiyorum. Bu yüzden fonksiyon yazmalıyım ve her buton için onu çağırıp sabit argümanlar iletmeliyim. Sorum, yukarıdaki kodu çalışacak şekilde nasıl yeniden yazabilirim?
luk4443

1
@ luk4443: Pencereyi açtığınızda URL'yi kullanırsanız, sayfa sadece formu gönderdiğinizde değiştirilecektir. URL'yi actionformun özelliğine yerleştirin.
Guffa

1
@Guffa'nın davranışını da simüle etmenin herhangi bir yolu var target="_blank"mı?
everton

2
@EvertonAgner: Pencere için benzersiz bir ad kullanın ve bu şekilde çalışacaktır _blank.
Guffa

62

Tüm formu javascript içinde istediğiniz için etiketlere yazmak yerine, bunu yapabilirsiniz:

var form = document.createElement("form");
form.setAttribute("method", "post");
form.setAttribute("action", "openData.do");

form.setAttribute("target", "view");

var hiddenField = document.createElement("input"); 
hiddenField.setAttribute("type", "hidden");
hiddenField.setAttribute("name", "message");
hiddenField.setAttribute("value", "val");
form.appendChild(hiddenField);
document.body.appendChild(form);

window.open('', 'view');

form.submit();

5
JQuery ve Pure JavaScript tabanlı uygulama yok. Teşekkürler.
Pawan Pillai

2
@Mercenary sayfası burada yeni sekmede açıldı, sayfayı yeni açılır pencerede açabilir miyim?
Yaje

30

3 yıl geç kalmama rağmen, Guffa'nın örneğini basitleştirmek için, formun sayfada olmasına gerek bile yok:

$('<form method="post" action="test.asp" target="TheWindow">
       <input type="hidden" name="something" value="something">
       ...
   </form>').submit();

Düzenlendi:

$('<form method="post" action="test.asp" target="TheWindow">
       <input type="hidden" name="something" value="something">
       ...
   </form>').appendTo('body').submit().remove();

Belki birisi için yararlı bir ipucu :)


7
Bu çözüm eksik. Önce bu formu gövdeye eklemeli ve sonra teslim etmelidir. Yani .submit () dediği yerde; .appendTo ('body']. submit ();
Jonathan van de Veen

2
Bu parça olmadan $("body").append(form);işe yaramaz
Axel

5
.remove()Jonathan'ın önerisinin .appendTo('body').submit()arkasına bir eklerseniz , kendinizden sonra bile temizlersiniz ve mevcut sayfayı form nesneleriyle karıştırmazsınız.
Simon

26

Paralı askerin yukarıda verilen cevabına tamamen katılıyorum ve benim için çalışan bu fonksiyonu benim için yarattı. Bu bir cevap değil, paralı asker tarafından yukarıdaki gönderiye bir yorum

function openWindowWithPostRequest() {
  var winName='MyWindow';
  var winURL='search.action';
  var windowoption='resizable=yes,height=600,width=800,location=0,menubar=0,scrollbars=1';
  var params = { 'param1' : '1','param2' :'2'};         
  var form = document.createElement("form");
  form.setAttribute("method", "post");
  form.setAttribute("action", winURL);
  form.setAttribute("target",winName);  
  for (var i in params) {
    if (params.hasOwnProperty(i)) {
      var input = document.createElement('input');
      input.type = 'hidden';
      input.name = i;
      input.value = params[i];
      form.appendChild(input);
    }
  }              
  document.body.appendChild(form);                       
  window.open('', winName,windowoption);
  form.target = winName;
  form.submit();                 
  document.body.removeChild(form);           
}

12

Sadece target="_blank"formda kullanabilirsiniz .

<form action="action.php" method="post" target="_blank">
    <input type="hidden" name="something" value="some value">
</form>

İstediğiniz şekilde gizli girişler ekleyin ve ardından formu JS ile gönderin.


Ayrıca window.open, bir clickişleyici içinde çağrılmadığında (veya bunun gibi herhangi bir kullanıcı tarafından tetiklenen bir olay) açılır pencere olarak engelleneceğinden
Xenos

4

POST/ GETData ve submit yöntemi olarak url, hedef ve nesneye dayalı bir form oluşturmak için bir işlev oluşturdum . Bu nesne içinde iç içe geçmiş ve karışık türleri destekler, böylece onu beslediğiniz herhangi bir yapıyı tam olarak kopyalayabilir: PHP onu otomatik olarak ayrıştırır ve iç içe geçmiş bir dizi olarak döndürür. Bununla birlikte, tek bir kısıtlama vardır: köşeli parantezler [ve ]nesnedeki herhangi bir anahtarın parçası olmamalıdır (gibi {"this [key] is problematic" : "hello world"}). Birisi ondan nasıl doğru bir şekilde kurtulacağını biliyorsa, lütfen söyleyin!

Daha fazla uzatmadan, işte kaynak:

Kullanım örneği:

document.body.onclick = function() {
  var obj = {
    "a": [1, 2, [3, 4]],
    "b": "a",
    "c": {
      "x": [1],
      "y": [2, 3],
      "z": [{
        "a": "Hello",
        "b": "World"
      }, {
        "a": "Hallo",
        "b": "Welt"
      }]
    }
  };

  var form = getForm("http://example.com", "_blank", obj, "post");

  document.body.appendChild(form);
  form.submit();
  form.parentNode.removeChild(form);
}


oops, kullanım örneğindeki URL yanlış biçimlendirilmiş. eğer düzeltildiyse, daha fazla hata yok.
tören

1
Hala bozuk görünüyor, boş bir sayfa alıyorum.
Adam Parkin

2

Parametreleri açılır pencereye aktarmanın ve hatta parametreleri buradan almanın daha iyi bir yolunu buldum:

Ana sayfada:

var popupwindow;
var sharedObject = {};

function openPopupWindow()
{
   // Define the datas you want to pass
   sharedObject.var1 = 
   sharedObject.var2 = 
   ...

   // Open the popup window
   window.open(URL_OF_POPUP_WINDOW, NAME_OF_POPUP_WINDOW, POPUP_WINDOW_STYLE_PROPERTIES);
   if (window.focus) { popupwindow.focus(); }
}

function closePopupWindow()
{
    popupwindow.close();

    // Retrieve the datas from the popup window
    = sharedObject.var1;
    = sharedObject.var2;
    ...
}

Açılır pencerede:

var sharedObject = window.opener.sharedObject;

// function you have to to call to close the popup window
function myclose()
{
    //Define the parameters you want to pass to the main calling window
    sharedObject.var1 = 
    sharedObject.var2 = 
    ...
    window.opener.closePopupWindow();
}

Bu kadar !

Ve bu çok uygun çünkü:

  • Açılır pencerenin URL'sinde parametreleri ayarlamanız gerekmez.
  • Tanımlanacak form yok
  • Sınırsız parametreler, hatta nesneler kullanabilirsiniz.
  • Çift yönlü: parametreleri iletebilir ve isterseniz yeni parametreleri geri alabilirsiniz.
  • Uygulaması çok kolay.

İyi eğlenceler!


not: window.openertüm tarayıcılarda desteklenmez.
Raptor

1

Bunu React'te düz J'ler ve çoklu doldurma getirme kullanarak yapmak istedim . OP, özellikle bir form oluşturmak istediğini ve bunun üzerinde gönderme yöntemini kullanmak istediğini söylemedi, bu yüzden bunu form değerlerini json olarak göndererek yaptım:

examplePostData = {
    method: 'POST',
    headers: {
       'Content-type' : 'application/json',
       'Accept' : 'text/html'
    },
    body: JSON.stringify({
        someList: [1,2,3,4],
        someProperty: 'something',
        someObject: {some: 'object'}
    })
}

asyncPostPopup = () => {

    //open a new window and set some text until the fetch completes
    let win=window.open('about:blank')
    writeToWindow(win,'Loading...')

    //async load the data into the window
    fetch('../postUrl', this.examplePostData)
    .then((response) => response.text())
    .then((text) => writeToWindow(win,text))
    .catch((error) => console.log(error))
}

writeToWindow = (win,text) => {
    win.document.open()
    win.document.write(text)
    win.document.close()
}

0

Varsayılan gönderme Eylemi, formun değerlerini yapılandırılmış bir URL'ye göndermek için bir Ajax isteği kullanan Ext.form.action.Submit'tir. Bir Ext formunun normal tarayıcı gönderimini etkinleştirmek için, standartSubmit yapılandırma seçeneğini kullanın.

Bağlantı: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.form.Basic-cfg-standardSubmit

çözüm: standartSubmit: true değerini yapılandırmanıza koyun. Umarım bu size yardımcı olur :)


0

Bunu geçmişte kullandım, çünkü kodlama için tipik olarak jilet sözdizimi kullandığımız

@using (Html.BeginForm("actionName", "controllerName", FormMethod.Post, new { target = "_blank" }))

{

// gizli ve dosyalanmış formu buraya ekleyin

}

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.