如何将iFrame嵌入外部网站 [英] How to embed iFrame with external website
问题描述
我正在学习Web开发,并试图实现将外部网页添加到简单HTML页面的任务.因此,我有一个文本框,需要在其中放置URL,并根据该文本框来呈现iframe.使用 jquery
的 .attr
属性直接加载 src
属性时,网页可以正确呈现.
I am learning web development and trying to achieve task of adding external webpage to a simple HTML page. So, I have a text box where I need to put the URL and based on that the iframe should render.
Webpage renders properly when src
attribute is loaded directly using .attr
property of jquery
.
没有文本字段的工作示例:
Working example without the text field:
HTML
<div id="mydiv">
<iframe id="frame" src="" width="100%" height="300">
</iframe>
</div>
<button id="button">Load</button>
脚本
$(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":请使用POST请求"}
.我是否需要使用 load
jquery方法.我只想阅读文本框的内容,然后通过单击按钮在iframe中打开页面.链接到我的JSFiddle
I referred this SO LINK but could not find the answer. My JSfiddle novice attempt tells an error message as {"error": "Please use POST request"}
. Do I need to use load
jquery method. I just want to read the content of textbox and open the page in iframe with a buttons click. Link to my JSFiddle
推荐答案
可以尝试这个简单的示例-我将输入默认为 https://en.wikipedia.org
,但您可以在其中尝试其他网址.
Can you try this simple example - I've defaulted the input to https://en.wikipedia.org
but you can try other URLs in there.
$(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嵌入外部网站的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!