2016-05-13 12 views
2

POSTとパラメータを含むWebページをiframeに開こうとしています。 しかし、作られたときに提出し、親ページがリロードされるとURLがIFRAMEに開きませんでした。ページをリフレッシュさJavaScriptを使用してiframeターゲットにフォームを送信

<head> 
    <title>iframe Example</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <style> 
    iframe { 
     display: block;  /* iframes are inline by default */ 
     background: #000; 
     border: none;   /* Reset default border */ 
     height: 90vh;  /* Viewport-relative units */ 
     width: 90vw; 
    } 
    </style> 
    </head> 
    <body> 
    <form id="myForm" method="post" action= "http://127.0.0.1/myWeb" target="myIframe"> 
    <input type = "hidden" name="param1" value="param1value"> 
    <input type = "hidden" name="param2" value= "param1value"> 
    </form> 
    <a href="" onClick="postLogin();" >Send to iframe</a><br /> 
    <script laguaje="javascript"> 
     function postLogin() { 
      var form = document.getElementById("myForm"); 
      form.submit(); 
     } 
    </script> 
    <iframe src="" name="myIframe" id="myIframe"> 
     <p>iframes are not supported by your browser.</p> 
    </iframe> 
    </body> 
    </html> 

答えて

2

は、アンカータグです。 event.preventDefault()を使用できます。

イベントパラメータを追加してアンカータグを変更します。

<a href="" onClick="postLogin(event);" >Send to iframe</a> 

とJavaScript機能postLogin

preventDefault()イベントメソッドを追加します。

function postLogin(event) { 
     var form = document.getElementById("myForm"); 
     form.submit(); 

     event.preventDefault(); 
    } 

EDIT:

それとも、代わりに<a>postLogin機能なし<button>を使用することができます。

<form id="myForm" method="post" action= "http://127.0.0.1/myWeb" target="myIframe"> 
     <input type = "hidden" name="param1" value="param1value"> 
     <input type = "hidden" name="param2" value= "param1value"> 
     <button type="submit">Send to iframe</button> 
    </form> 
+0

あなたの知識を共有していただき、ありがとうございました! – deimos1975

関連する問題