iFrameを外部ウェブサイトに埋め込む方法

Question

私はウェブ開発を学び、簡単なHTMLページに外部ウェブページを追加する作業を達成しようとしています。だから、URLを置く必要があるテキストボックスがあり、それに基づいてiframeをレンダリングする必要があります。 src属性が.attrプロパティを使用して直接ロードされた場合、Webページは正しくレンダリングされます。jqueryです。

テキストフィールドなし例作業：

HTML

<div id="mydiv"> 
    <iframe id="frame" src="" width="100%" height="300"> 
    </iframe> 
</div> 
<button id="button">Load</button> 

SCRIPT以下

$(document).ready(function(){ 
$("#button").click(function() { 
    $("#frame").attr("src", "https://www.wikipedia.org/"); 
}); 
}); 

は、私が欲しいものである

HTML

Enter the URL 
    <input id="url" type="text"/> 
     <div id="mydiv"> 
      <iframe id="frame" src="" width="100%" height="300"> 
      </iframe> 
     </div> 
     <button id="button">Load</button> 

スクリプト

<script> 
$(document).ready(function(){ 
    $("#button").click(function() { 
    var x = $("#url").val(); 
     $("#frame").attr('src', 'x'); 
    }); 
}); 
</script> 

私はこのSO LINKを呼びますが、答えを見つけることができませんでした。私のJSfiddle初心者の試みは、エラーメッセージに{"error": "Please use POST request"}と伝えます。 load jqueryメソッドを使用する必要がありますか？私はちょうどボタンをクリックして、テキストボックスの内容を読んで、iframeのページを開いてみたいです。 Link to my JSFiddle

Answer 1

私はこの入力をデフォルトのhttps://en.wikipedia.orgに設定しましたが、そこに他のURLを試すことができます。

$(document).ready(function(){ 
 
    $("#button").click(function() { 
 
     var url = $('#url').val(); 
 
     $("#frame").attr("src", url); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div id="mydiv"> 
 
    <input id="url" type="text" value="https://en.wikipedia.org"/> 
 
    <iframe id="frame" src="" width="100%" height="300"> 
 
    </iframe> 
 
</div> 
 
<button id="button">Load</button>