Window.openとpostメソッドによるパラメーターの受け渡し

97

window.openメソッドを使用して、postメソッドで渡す必要があるパラメーターを使用して新しいサイトを開きます。解決策を見つけましたが、残念ながら機能しません。これは私のコードです： 

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

次に、配列を作成します。 

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

そして関数を呼び出す： 

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

しかし、このボタンをクリックすると、サイトtest.aspが空になります（もちろん、パス値を取得しようとします- Request.Form("b")）。

この問題を解決するにはどうすればよいですか、なぜパス値を取得できないのですか？

javascript 
— luk4443
ソース
2
何がうまくいかないのですか？jsfiddle.net/TZMMFにコピーを保存しましたが、期待どおりに機能します。
— PleaseStand
返信ありがとうございます。はい、申し訳ありません-上記のコードは機能します。しかし、私はこの関数をキーの配列でテストします：<script type = "text / javascript"> var values = new Array（ "value1"、 "value2"、 "value3"）var keys = new Array（ "1"、 "2 "、" 3 "）// a、b、cの代わりに</ script> Request.Form（" 2 "）で値を取得IEとFirefoxでは空のページを取得します。
— luk4443

回答:

121

新しいウィンドウにフォームを書き込むのではなく（HTMLコードの値をエンコードするため、正しく取得するのが難しい）、空のウィンドウを開いてフォームをポストするだけです。

例：

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

編集：

フォームの値を動的に設定するには、次のようにします。

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

フォームを送信するには、などの値を指定して関数を呼び出しますopenWindowWithPost('a','b','c');。

注：フォーム名に関連してパラメーター名を変化させて、それらが同じである必要がないことを示しました。通常は、値を追跡しやすくするために、それらを互いに類似した状態に保ちます。

— グッファ
ソース
それはまさに私が考えていたものです。投稿された元のコードは動作しているように見えましたが、IEを除きます。
— PleaseStand
返信ありがとうございます。しかし、私はテーブルがあり、列にはボタンがあります。このボタンをクリックすると、新しいページが開き、いくつかのパラメーターが渡されます。だから私は関数を書く必要があり、ボタンごとにそれを呼び出して固定引数を渡します。私の質問、上記のコードをどのように書き換えて機能させることができますか？
— luk4443
1
@ luk4443：ウィンドウを開くときにURLを使用すると、フォームを投稿したときにページが置き換えられます。actionフォームのプロパティにURLを入力します。
— Guffa
1
@Guffaの動作もシミュレートする方法はありtarget="_blank"ますか？
— エバートン2014年
2
@EvertonAgner：ウィンドウに一意の名前を使用すると、として機能し_blankます。
— グッファ2015
62

タグで記述する代わりに、JavaScript内でフォーム全体が必要なため、これを行うことができます。

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およびPure JavaScriptベースの実装はありません。ありがとう。
— Pawan Pillai 2014
2
@傭兵のページがここの新しいタブで開いています。新しいポップアップウィンドウでページを開くことはできますか？
— Yaje 2014年
29

私は3年遅れていますが、Guffaの例を簡略化するために、ページにフォームを配置する必要はまったくありません。

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

編集：

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

多分誰かのための役立つヒント:)

— アンドリアス・ナルシェビチウス
ソース
7
このソリューションは不完全です。最初にこのフォームを本文に追加してから送信します。だからそれが.submit（）;と言うところ .appendTo（ 'body'）。submit（）;と表示されます。
— Jonathan van de Veen 2014年
1
この部分$("body").append(form);がないと機能しません
— Axel
4
.remove()ジョナサンの推奨の後にを追加する.appendTo('body').submit()と、現在のページがフォームオブジェクトで乱雑にならないように、自分の後をクリーンアップすることもできます。
— Simon
24

上記の傭兵の回答に完全に同意し、私のために機能するこの機能を作成しました。それは答えではなく、傭兵による上記の投稿へのコメントです

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
ソース
12

target="_blank"フォームで簡単に使用できます。

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

お好みの方法で非表示の入力を追加し、JSでフォームを送信します。

— 橋脚
ソース
さらに、以降window.openの内側に呼び出されていない場合は、ポップアップとしてブロックされるclickハンドラ（または任意のユーザがそのようなイベントを解雇）
— Xenosの
4

POST/ GETデータと送信メソッドとしてURL、ターゲット、オブジェクトに基づいてフォームを生成する関数を作成しました。それはそのオブジェクト内のネストされたタイプと混合されたタイプをサポートするので、あなたがそれを与えるどんな構造も完全に複製することができます：PHPはそれを自動的に解析し、ネストされた配列として返します。ただし、1つの制限があります。角括弧[と]は、オブジェクトのキーの一部であってはなりません（など{"this [key] is problematic" : "hello world"}）。誰かがそれを適切にエスケープする方法を知っているなら、教えてください！

さらに騒ぎがなければ、ここにソースがあります：

コードスニペットを表示

使用例：

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);
}
スニペットを展開

— 式
ソース
おっと、使用例のURLは不正な形式でした。修正すると、エラーは発生しなくなります。
— セレモニー
1
まだ壊れているようですが、空白のページが表示されます。
— Adam Parkin
2

ポップアップウィンドウにパラメーターを渡し、そこからパラメーターを取得するためのより良い方法を見つけました。

メインページで：

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

ポップアップウィンドウで：

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

それでおしまい ！

そして、これは非常に便利です：

  • ポップアップウィンドウのURLでパラメータを設定する必要はありません。
  • 定義するフォームがありません
  • オブジェクトでも制限のないパラメーターを使用できます。
  • 双方向：パラメータを渡すことができ、必要に応じて新しいパラメータを取得できます。
  • 実装は非常に簡単です。

楽しんで！

— ブルーマン
ソース
注：window.openerすべてのブラウザでサポートされているわけではありません。
— Raptor
1

私はこれをプレーンJsとフェッチポリフィルを使用してReactで作成したかったのです。OPは、フォームを作成してそのフォームのsubmitメソッドを呼び出すことを具体的に望んでいるとは言いませんでした。そのため、フォームの値を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()
}
0

デフォルトの送信アクションはExt.form.action.Submitで、Ajaxリクエストを使用して、設定されたURLにフォームの値を送信します。Extフォームの通常のブラウザー送信を有効にするには、standardSubmit構成オプションを使用します。

リンク：http : //docs.sencha.com/extjs/4.2.1/#!/api/Ext.form.Basic-cfg-standardSubmit

解決策：設定にstandardSubmit：trueを追加します。これがあなたに役立つことを願っています:)

— ユーザー2420964
ソース
0

私たちは通常、かみそりの構文をコーディングに使用しているため、これを過去に使用しました

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

{

//ここにファイルされた非表示のフォームを追加します

}

— 身代金
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.