Как вставить iFrame с внешним сайтом

Question

Я изучаю веб-разработку и пытаюсь достичь задачи добавления внешней веб-страницы к простой 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

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

я говорил это SO LINK, но не смог найти ответ. Моя попытка начинающего пользователя JSfiddle сообщает об ошибке как {"error": "Please use POST request"}. Должен ли я использовать метод jquery load. Я просто хочу прочитать содержимое текстового поля и открыть страницу в 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>