创建一个地址栏来引导iframe

嗯，我正试图以类似于以下的方式在互联网上来回穿梭：http://jsfiddle.net/Muimi/gm7gv/.不幸的是，我的代码不起作用。现在的情况是页面根本没有重定向。我注意到它给了我一些错误，比如谷歌网站上的"页面不存在"（它存在，只是为了让每个人都知道）。那么，有什么想法吗？

<!DOCTYPE html>
<html>
<head>
<style>
#showUrl {
border:2px solid #0A9;
height:90%;
width:95%;
}
#url {
width:30em;
}
</style>
<script type="text/javascript">
  function loadUrl() {
    var url = document.getElementById( 'url' ).value;
    var showUrl = document.getElementById( 'showUrl' );
    showUrl.src = url;
}
</script>
</head>
<body>
<form>
    Enter URL to load: <input type="text" id="url" />
    <input type="button" value="Load URL" onclick="loadUrl()" />
</form>
<iframe id="showUrl"></iframe>
</body>
</html>

是否包含"http://"？否则，iframe将尝试加载相对路径，而不是绝对路径。

function loadUrl() {
    var url = document.getElementById( 'url' ).value,
        showUrl = document.getElementById( 'showUrl' );
    showUrl.src = /$https?:///.test(url) ? url : 'http://'+url;
}

您的代码确实有效。我在JsBin上尝试过，它确实与我网站的URL兼容，但与谷歌的不兼容

http://jsbin.com/akugeg/1/edit

可能有三个原因：

您需要添加一个协议，使其作为绝对URL而不是相对的。
大多数代码调试服务不允许加载iframe，因为出于安全原因，它本身使用iframe来显示内容。
有些网站不喜欢在iframe中加载，所以他们只是将服务器配置为不在自己的域以外的iframe内加载其他网站。

但我可以向您保证，代码是有效的，如果您在本地主机上尝试它，它可能会起作用。

相关内容

最新更新

热门标签：