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设置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

为您的iframe

设置ID属性

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

使用此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
});

使用iframe浏览互联网

3 个答案: