javascript - 使用 iframe 浏览互联网

Question

我尝试通过 iframe 在 html 页面中创建一个迷你浏览器：

<table id="frame" height="100%" width="100%" border="0">
<tr>
    <td>Enter the address: 
      <label for="address"></label>
    <input type="text" name="address" id="address">
    <input type="submit" name="go" id="go" value="Go"></td>
  </tr>
  <tr>
    <td><iframe src="http://www.google.com" width="100%" height="100%"></iframe></td>
  </tr>
</table>

但我不知道如何获取地址值并放置而不是 google.com，如何使用 html 或 javascript 做到这一点？

Answer 1

您可以src使用 Javascript 从 Javascript 设置属性id以检索iframe节点。

Address: <input id="address">
<input type="button" value="go" onclick="visit()">
<br>
<iframe id="my_iframe"></iframe>
<script>
    function visit() {
        var address = document.getElementById("address").value;
        document.getElementById("my_iframe").src = address;
    }
</script>

但请注意，有大量网站不允许您以这种方式访问​​它们。原因很复杂（而且 IMO 有点愚蠢），但重点仍然是它不是一种可以普遍使用的技术。

Answer 2

Set an ID attribute to your iframe

<iframe src="http://www.google.com" id="frame_id" width="100%" height="100%"></iframe>

Use this JS:

var frame = document.getElementById('frame_id');
var addressBar = document.getElementById("address");
var button = document.getElementById("go");

button.addEventListener("click", reload);

function reload() {
    frame.contentWindow.location.href = addressBar.value;
    frame.contentWindow.location.reload();
}

Answer 3

使用以下 JavaScript (jQuery) 代码：

$(function() {
  var iframe = $('#my-iframe-id');
  var oldurl = iframe.attr('src'); // to get the url
  var newurl = 'http://myurl';
  iframe.attr('src', newurl); // to set the url
});