方法：iFrameで入力テキストを使用してターゲットURLを変更する+フィールドとJavaScriptをサブミットする

Question

作業中のダウンタイム中にランダムなWebページを作成していて、URLを「srcデフォルトではhttp://getbootstrap.comをロードするように設定されています。 URLを変更しようとすると、iframeがデフォルト値で再ロードされます。

私はこのサイトで見つかった以前に文書化されたソリューションを適用しようとしましたが、残念なことに成功しませんでした。 JavaScriptの

function addressGo() { //Function to browse to inputted address 
    var addressBar = document.getElementById("addressBar"); //Declare Address Bar variable 
    var browserFrame = document.getElementById("browserFrame"); //Declare iframe variable 

    browserFrame.src=addressBar; //Set iframe URL as input from Address Bar 
} 

function testCall() { //Generic test function (to be re-written as needed) 
    var addressBar = document.getElementById("addressBar"); //Declare Address Bar variable 
    var browserFrame = document.getElementById("browserFrame"); //Declare iframe variable 

    alert("Browser Frame: "+browserFrame+"\nAddress Bar: "+addressBar.); 
} 

今すぐテスト時に、私は読み込みテスト "警告" を受信

HTML5

<form name="browser" action="" method="post"> 
<div class="container-fluid"> 
    <div class="row"> 
     <input style="color:#000000;" id="addressBar" class="col-md-7" type="text" /> 
     <!--<input id="goBtn" class="btn btn-default col-md-1" type="submit" onclick="addressGo()" value="Go" />--> 
     <input id="goBtn" class="btn btn-default col-md-1" type="submit" onclick="testCall()" value="Go" /> 
    </div> 
</div> 
</form> 
<div class="container-fluid"> 
    <div class="row"> 
     <iframe id="browserFrame" class="col-md-8" src="http://getbootstrap.com" frameborder="0" > 
      <p>Something went wrong...target website doesn't allow iframes to be used.</p> 
     </iframe> 
    ... 
    </div> 
</div> 
... 
<script src="..\bootstrap-3.3.7-dist\js\bootstrap.min.js"></script> 
<script src="..\JavaScript\Custom.js"></script> 

：

は、ここに私が働いているコードの一部です次のメッセージ：

アラート：

Browser Frame: [object HTMLIFrameElement] 
Address Bar: [object HTMLInputElement] 

私は解決策に近いように感じますが、私はコーディングで少し練習していません。任意のアイデアが評価されます。 :)フォームを送信する際

よろしく、

〜DanceLink

Answer 1

<input id="goBtn" class="btn btn-default col-md-1" type="submit" onclick="return addressGo()" value="Go" /> 

function addressGo() { //Function to browse to inputted address 
    var addressBar = document.getElementById("addressBar").value; //Declare Address Bar variable 
    var browserFrame = document.getElementById("browserFrame"); //Declare iframe variable 
    browserFrame.src=addressBar; //Set iframe URL as input from Address Bar 
    return false; 
} 

は、ページ全体を再ロードされます。あなたのケースでは、より良いreturn falseとonclick="return addressGo()"にする必要がないように、フォームのgoボタンを置くことをお勧めします。