Window.open dan berikan parameter melalui metode posting

98

Dengan metode window.open saya membuka situs baru dengan parameter, yang harus saya lewati melalui metode posting. Saya telah menemukan solusi, tetapi sayangnya itu tidak berhasil. Ini kode saya:

<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>  

Selanjutnya, saya membuat array:

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

Dan panggil fungsi dengan:

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

Tetapi, ketika saya mengklik tombol ini, situs test.asp kosong (tentu saja saya mencoba mendapatkan nilai lulus - Request.Form("b")).

Bagaimana saya bisa mengatasi masalah ini, mengapa saya tidak bisa mendapatkan nilai kelulusan?

luk4443
sumber
2
Apa yang tidak berhasil? Saya menyimpan salinannya di jsfiddle.net/TZMMF dan berfungsi seperti yang diharapkan.
Harap Berdiri
Terima kasih atas balasannya. Ya, maaf - kode di atas berfungsi. Tapi saya menguji fungsi ini dengan array kunci: <script type = "text / javascript"> var values ​​= new Array ("value1", "value2", "value3") var keys = new Array ("1", "2 "," 3 ") // di tempat dari a, b, c </script> Saya mendapatkan nilai dengan Request.Form (" 2 ") Di IE dan Firefox saya mendapatkan halaman kosong.
luk4443

Jawaban:

121

Alih-alih menulis formulir ke jendela baru (yang sulit untuk diperbaiki, dengan pengkodean nilai dalam kode HTML), cukup buka jendela kosong dan posting formulir ke sana.

Contoh:

<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>

Edit:

Untuk mengatur nilai dalam formulir secara dinamis, Anda dapat melakukan seperti ini:

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();
}

Untuk memposting formulir, Anda memanggil fungsi dengan nilai, seperti openWindowWithPost('a','b','c');.

Catatan: Saya memvariasikan nama parameter dalam kaitannya dengan nama formulir untuk menunjukkan bahwa mereka tidak harus sama. Biasanya Anda akan membuatnya serupa satu sama lain agar lebih mudah melacak nilainya.

Guffa
sumber
Itulah yang saya pikirkan. Kode asli yang diposting tampaknya berfungsi ... kecuali di IE.
PleaseStand
Terima kasih atas balasannya. Tapi saya punya tabel, di mana di kolom ada tombol. Ketika saya mengklik tombol ini, saya membuka halaman baru dan mengirimkan beberapa parameter. Jadi saya harus menulis fungsi, dan untuk setiap tombol memanggilnya dan memberikan argumen tetap. Pertanyaan saya, bagaimana saya bisa menulis ulang kode Anda di atas agar berfungsi?
luk4443
1
@ luk4443: Jika Anda menggunakan URL saat Anda membuka jendela, halaman hanya akan diganti saat Anda mengirim formulir. Letakkan URL di actionproperti formulir.
Guffa
1
@ Guffa cara apapun untuk juga mensimulasikan perilaku target="_blank"?
everton
2
@EvertonAgner: Gunakan nama unik untuk jendela, dan ini akan berfungsi sebagai _blank.
Guffa
62

Karena Anda menginginkan seluruh formulir di dalam javascript, alih-alih menulisnya dalam tag, Anda dapat melakukan ini:

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();
Mata duitan
sumber
5
Tidak ada implementasi berbasis jQuery dan Pure JavaScript. Terima kasih.
Pawan Pillai
2
Halaman @Mercenary terbuka di tab baru di sini, dapatkah saya membuka halaman di jendela popup baru?
Yaje
29

Meskipun saya terlambat 3 tahun, tetapi untuk menyederhanakan contoh Guffa, Anda bahkan tidak perlu memiliki formulir di halaman sama sekali:

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

Diedit:

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

Mungkin tip berguna untuk seseorang :)

Andrius Naruševičius
sumber
7
Solusi ini tidak lengkap. Ini harus terlebih dahulu menambahkan formulir ini ke badan dan kemudian mengirimkannya. Jadi di mana dikatakan .submit (); itu harus mengatakan .appendTo ('body'). submit ();
Jonathan van de Veen
1
Tanpa bagian $("body").append(form);ini tidak akan berhasil
Axel
4
Jika Anda menambahkan .remove()setelah saran Jonathan .appendTo('body').submit(), Anda bahkan akan membersihkannya sendiri dan tidak mengacaukan halaman saat ini dengan objek formulir.
Simon
25

Saya sepenuhnya setuju dengan jawaban tentara bayaran yang diposting di atas dan membuat fungsi ini untuk saya yang berfungsi untuk saya. Ini bukan jawaban, ini adalah komentar di posting di atas oleh tentara bayaran

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);           
}
Youdhveer
sumber
12

Anda cukup menggunakan target="_blank"formulir.

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

Tambahkan input tersembunyi dengan cara yang Anda inginkan, lalu kirimkan formulir dengan JS.

Dermaga
sumber
Selanjutnya karena window.openakan diblokir sebagai munculan, ketika tidak dipanggil di dalam clickpenangan (atau peristiwa yang diaktifkan pengguna seperti itu)
Xenos
4

Saya membuat fungsi untuk menghasilkan formulir, berdasarkan url, target, dan objek sebagai metode POST/ GETdata dan kirim. Ini mendukung tipe bersarang dan campuran dalam objek itu, sehingga dapat sepenuhnya mereplikasi struktur apa pun yang Anda beri makan: PHP secara otomatis mem-parsingnya dan mengembalikannya sebagai larik bersarang. Namun, ada satu batasan: tanda kurung [dan ]tidak boleh menjadi bagian dari kunci apa pun di objek (seperti {"this [key] is problematic" : "hello world"}). Jika seseorang tahu bagaimana cara menghindarinya dengan benar, tolong beritahu!

Tanpa basa-basi lagi, berikut ini sumbernya:

Contoh penggunaan:

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);
}

Upacara
sumber
Ups, format URL pada contoh penggunaan salah. jika diperbaiki maka tidak ada lagi error.
Upacara
1
Masih tampak rusak, saya mendapatkan halaman kosong.
Adam Parkin
2

Saya menemukan cara yang lebih baik untuk meneruskan parameter ke jendela popup dan bahkan untuk mengambil parameter darinya:

Di halaman utama:

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;
    ...
}

Di jendela popup:

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();
}

Itu dia !

Dan ini sangat nyaman karena:

  • Anda belum menyetel parameter di URL dari jendela popup.
  • Tidak ada bentuk untuk didefinisikan
  • Anda dapat menggunakan parameter bahkan objek yang tidak terbatas.
  • Bi-directionnal: Anda dapat mengirimkan parameter DAN, jika Anda menginginkannya, dapat mengambil parameter baru.
  • Sangat mudah diimplementasikan.

Selamat bersenang-senang!

BlueMan
sumber
catatan: window.openertidak didukung dari semua browser.
Raptor
1

Saya ingin melakukan ini di React menggunakan plain Js dan fetch polyfill . OP tidak mengatakan dia secara khusus ingin membuat formulir dan memanggil metode kirim di atasnya, jadi saya telah melakukannya dengan memposting nilai formulir sebagai json:

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()
}

sumber
0

Tindakan pengiriman default adalah Ext.form.action.Submit, yang menggunakan permintaan Ajax untuk mengirimkan nilai formulir ke URL yang dikonfigurasi. Untuk mengaktifkan pengiriman browser normal dari formulir Ext, gunakan opsi konfigurasi standardSubmit.

Tautan: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.form.Basic-cfg-standardSubmit

solusi: letakkan standardSubmit: true di konfigurasi Anda. Semoga ini bisa membantu Anda :)

pengguna2420964
sumber
0

Saya telah menggunakan ini di masa lalu, karena kami biasanya menggunakan sintaks pisau cukur untuk pengkodean

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

{

// tambahkan tersembunyi dan formulir diajukan di sini

}

tebusan
sumber