Einbetten von iFrame mit externer Website

Question

Ich lerne Web-Entwicklung und versuche, die Aufgabe zu erreichen, externe Webseite zu einer einfachen HTML-Seite hinzuzufügen. Also, ich habe ein Textfeld, wo ich die URL setzen muss und basierend darauf sollte der Iframe rendern. Die Webseite wird ordnungsgemäß gerendert, wenn das src-Attribut direkt unter Verwendung der .attr Eigenschaft von jquery geladen wird.

Arbeitsbeispiel ohne das Textfeld:

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/"); 
}); 
}); 

Im Folgenden finden Sie, was ich will

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> 

I bezeichnet diese SO LINK konnte aber nicht die Antwort finden. Mein JSfiddle-Neulingsversuch gibt eine Fehlermeldung als {"error": "Please use POST request"} aus. Muss ich load jquery-Methode verwenden. Ich möchte nur den Inhalt der Textbox lesen und die Seite in iframe mit einem Klick öffnen. Link to my JSFiddle

Answer 1

Können Sie dieses einfache Beispiel versuchen - Ich habe die Eingabe auf https://en.wikipedia.org voreingestellt, aber Sie können andere URLs dort versuchen.

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