创建一个地址栏来引导iframe?

创建一个地址栏来引导iframe?,iframe,Iframe,嗯,我试着在互联网上来回飞奔,以类似的方式:。不幸的是,我的代码不起作用。发生的情况是页面根本没有重定向。我注意到它给了我类似“页面不存在”这样的错误,对于google.com来说(它是存在的,每个人都知道)。有什么想法吗 <!DOCTYPE html> <html> <head> <style> #showUrl { border:2px solid #0A9; height:90%; width:95%; } #url { width:30em

嗯,我试着在互联网上来回飞奔,以类似的方式:。不幸的是,我的代码不起作用。发生的情况是页面根本没有重定向。我注意到它给了我类似“页面不存在”这样的错误,对于google.com来说(它是存在的,每个人都知道)。有什么想法吗

<!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>

#showUrl{
边框:2px实心#0A9;
身高:90%;
宽度:95%;
}
#网址{
宽度:30em;
}
函数loadUrl(){
var url=document.getElementById('url').value;
var showUrl=document.getElementById('showUrl');
showUrl.src=url;
}
输入要加载的URL:

您是否包括“http://”?否则,iframe将尝试加载相对路径而不是绝对路径

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

你的代码确实有效。我在JsBin上试过,它确实可以和我的网站的URL一起使用,但没有和谷歌的URL一起使用

原因有三:

  • 您需要添加一个协议,使其作为绝对URL而不是 相对的

  • 大多数代码调试服务不允许加载iframe,因为出于安全原因,它本身使用iframe来显示内容

  • 有些网站不喜欢在iframe中加载,所以他们只是将服务器配置为不在iframe中加载自己域以外的其他服务器

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

    示例url(谷歌)适用于reason 3。但是,您将得到一个“'X-FRAME-OPTIONS'设置为'SAMEORIGIN'”错误,而不是“页面不存在”