如何嵌入iFrame與外部網站

Question

我正在學習web開發，並嘗試實現將外部網頁添加到簡單的HTML頁面的任務。所以，我有一個文本框，我需要放置該URL並基於iframe應呈現。 當src屬性直接使用.attr屬性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，但你可以嘗試其中的其他網址。

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