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

如何在外部网站上嵌入iFrame

1 个答案: