如何在div中显示指定的网页

时间：2022-11-06 11:04:37
如何在div中显示指定的网页

就是点下按钮，就把某网页显示在指定id的div中
在网上和msdn都努力找了，没有答案

我知道这很可能需要ajax，也知道是个有难度的话题

也知道分数给的太低，如果的确有朋友给出了我能用得了的答案，我另开帖给100分（本想直接发100，但是没信心能得到满意的答复）

可以是手写的ajax代码，也可以是在vs2008中的操作步骤

33 个解决方案

#1

涉及ajax 域名跨域问题

如果是同1域名，本地javascript 的 ajax足矣，如果跨域名展示，需要你的服务端做代理 中转一次

#2

iframe 不是干这个的吗？

#3

IFrame
http://www.w3schools.com/tags/tag_iframe.asp

#4

引用 1 楼  的回复:
涉及ajax 域名跨域问题

如果是同1域名，本地javascript 的 ajax足矣，如果跨域名展示，需要你的服务端做代理 中转一次

谢大手回复
只是本站，具体怎么整？

#5

引用 2 楼  的回复:
iframe 不是干这个的吗？

++

#6

引用 2 楼  的回复:
iframe 不是干这个的吗？

++

#7

引用 2 楼  的回复:
iframe 不是干这个的吗？

谢回复
iframe和div还是不一样的
iframe要永久性地占据页面的一块位置
div则可以浮于页面其它内容之上，不占位置，这个特点我是需要的
最终我想要一点按钮就动态生成一个div并居中盖在其它网页内容之上，同时调入一个本站网页
动态生成div我已搞明白，所以 维持本帖顶楼原问。

#8

引用 7 楼  的回复:
引用 2 楼  的回复:
iframe 不是干这个的吗？

谢回复
iframe和div还是不一样的
iframe要永久性地占据页面的一块位置
div则可以浮于页面其它内容之上，不占位置，这个特点我是需要的
最终我想要一点按钮就动态生成一个div并居中盖在其它网页内容之上，同时调入一个本站网页
动态生成div我已搞明白，所以维持本帖顶楼原问。


吧Iframe放到div里。

#9

你在点击时创建一个iframe 在把他赋值给DIV不就行了.

#10

引用 8 楼  的回复:
引用 7 楼 的回复:

引用 2 楼 的回复:
iframe 不是干这个的吗？

谢回复
iframe和div还是不一样的
iframe要永久性地占据页面的一块位置
div则可以浮于页面其它内容之上，不占位置，这个特点我是需要的
最终我想要一点按钮就动态生成一个div并居中盖在其它网页内容之上，同时调入一个本站网页
动态生成div我已搞明白，所以维持本帖顶楼原问。


……

iframe能放div里么？这我倒没想到，如果能，如何动态给iframe调入一个网页呢？

#11

// JavaScript Document
(function(){
	var d=document,w=window,a={
		Load: {
			AjaxDom:function(){
				var xmlhttp;
				try {xmlhttp = new ActiveXObject("Msxml2.XMLHTTP")}catch (e1){  
					try{xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")}catch (e2){xmlhttp = null}  
				}  
				if (!xmlhttp && typeof XMLHttpRequest!='undefined') {   
					try {xmlhttp = new XMLHttpRequest()} catch (e){xmlhttp=null}   
				}   
				if (!xmlhttp && w.createRequest) {   
					try {xmlhttp = w.createRequest()} catch (e) { xmlhttp=null}   
				}  
				return xmlhttp
			},			
			AjaxAbort:function(obj){
				try{obj.abort()}catch(e){}
				try{obj=null}catch(e){}
				return null
			},
			Ajax:function(url,value,getorpost,callback,cannelajax){
				var L=a.Load;
				if(cannelajax){L.AjaxAbort(cannelajax)}
				getorpost = getorpost.toLowerCase();
				var doc=L.AjaxDom();			
				if (doc==null){
					return null
				}	
				doc.onreadystatechange=function(){				
					if (doc.readyState==4){
						if(callback && typeof(callback)=="function"){
							(function(){
							try{callback(doc.status,doc.responseText,doc.responseXML)}catch(e0){}
							try{doc.abort()}catch(e1){}
							doc=null
							})()
						}			
					}
				},
				doc.open(getorpost,url,true),
				doc.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
				if(getorpost=="post"){
					doc.send(value)			
				}
				else{
					doc.send(null)
				}
				return doc
			}
		}
	};w["Rayyu"]=a
})();


调用 
Rayyu.Load.Ajax("html路径",null,"get",function(status,text,xml){
	if(status==200){
		alert(text)
	}
})

#12

ajax返回一个html的代码，到DIV的ID

#13

引用 9 楼  的回复:
你在点击时创建一个iframe 在把他赋值给DIV不就行了.

如何用代码创建iframe并赋值，用代码，一点头绪都没有，能给个代码提示么？不好意思，麻烦你了

#14

引用 11 楼  的回复:
JScript code
// JavaScript Document
(function(){
    var d=document,w=window,a={
        Load: {
            AjaxDom:function(){
                var xmlhttp;
                try {xmlhttp = new ……

谢回复
在网上见过类似的代码，能解释下怎么用么？
我现在是两条思路了，用iframe+div和用ajax

#15


Rayyu.Load.Ajax("html路径",null,"get",function(status,text,xml){
    if(status==200){
        document.getElementById("div").innerHTML=text
    }
})

#16

引用 10 楼  的回复:
iframe能放div里么？这我倒没想到，如果能，如何动态给iframe调入一个网页呢？


用jquery
$(iframe).attr('src', locations[++i % len]);

参考这里的答案:
http://*.com/questions/1554396/change-content-in-iframe-with-jquery

#17

引用 15 楼  的回复:
JScript code

Rayyu.Load.Ajax("html路径",null,"get",function(status,text,xml){
    if(status==200){
        document.getElementById("div").innerHTML=text
    }
})

谢回复，下面的代码为什么运行点按钮后什么也不显示？
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>新建网页 4</title>
</head>

<body>
<script>
function   bbb()   
{   
var   str   =   document.createElement("div");   
str.id   =   "win3";   
str.contentEditable = "true";
str.className = "xWin";
str.style.position   =   "absolute";   
str.style.setAttribute("left","100px");   
str.style.setAttribute("top","50px");   
str.style.setAttribute("width","100px");   
str.style.setAttribute("height","100px");   
str.style.setAttribute("z-index","1");
str.style.setAttribute("border","2px solid red");
document.body.appendChild(str); 
win3.innerHTML = "<iframe src="http://www.baidu.com" name="window"></iframe>"
}
</SCRIPT>
<input value="动态生成" type="button" onClick="bbb();" >
</body>

</html>

注：
我试过，在不是动态生成的div中的iframe中是可以显示baidu页面的
iframe放进这个动态生成的div后就不显示baidu了
结论：不是iframe中src所指网页的问题
以上代码要是放是一串普通的文本，也是能显示的
结论：不是代码动态生成有问题

那么是什么问题呢？


#18

引用 16 楼  的回复:
引用 10 楼 的回复:
iframe能放div里么？这我倒没想到，如果能，如何动态给iframe调入一个网页呢？
用jquery
$(iframe).attr('src', locations[++i % len]);
参考这里的答案:
http://*.com/questions/1554396/change-content-in-iframe-w……

谢回复，不想现学jquery了，发现jqery的确很火，不过我以后在学吧
我想先顺着div+iframe的思路下去，毕竟这个已差不多弄通了

#19

引号重复了，转义下 或者改成单引号
引用 17 楼  的回复:
引用 15 楼  的回复:
JScript code

Rayyu.Load.Ajax("html路径",null,"get",function(status,text,xml){
if(status==200){
document.getElementById("div").innerHTML=text
}
})

谢回复，下面的代码为什么运行点按钮后什么也不显示？
<ht……

#20

ajax就好了，为什么非要iframe呢？iframe对seo的友好性不好。

#21

客户端的ajax 蜘蛛也是爬不到的 呵呵呵
引用 20 楼  的回复:
ajax就好了，为什么非要iframe呢？iframe对seo的友好性不好。

#22

JQuery 

$(function(){
    $("#yourdivid").load("url");
})

#23

引用 20 楼  的回复:
ajax就好了，为什么非要iframe呢？iframe对seo的友好性不好。

谢回复
对我来说，更重要的是哪个好弄些
ajax的方案优点很多
但是我努力看了许多网页，也有许多朋友回复
并没有一个真正运行通过的
而iframe这个，只差一点点就明白了

#24

请大家关注我17楼的问题
请不要再提出一些不完美的新方案了

#25

我早说了呀 ajax不能跨域，你去请求百度 当然不能成功的
引用 23 楼  的回复:
引用 20 楼  的回复:
ajax就好了，为什么非要iframe呢？iframe对seo的友好性不好。

谢回复
对我来说，更重要的是哪个好弄些
ajax的方案优点很多
但是我努力看了许多网页，也有许多朋友回复
并没有一个真正运行通过的
而iframe这个，只差一点点就明白了

#26

第二 本地html是没有ajax权限的 你直接保存代码在本地执行 status是等于0的

ajax必须在 http://  https:// 开头的地址下  不能是file://

#27

不希望提出各种新方案，
主要是因为我的研究水平太有限
一个思路差不多了，再研究另一个，受不了，呵呵

#28

引用 25 楼  的回复:
我早说了呀 ajax不能跨域，你去请求百度 当然不能成功的

引用 23 楼 的回复:

引用 20 楼 的回复:
ajax就好了，为什么非要iframe呢？iframe对seo的友好性不好。

谢回复
对我来说，更重要的是哪个好弄些
ajax的方案优点很多
但是我努力看了许多网页，也有许多朋友回复
并没有一个真正运行通过的
而iframe这个，只差一点点就明白了

谢回复
但这回你说错了,呵呵
我上面提到了
如果我用静态写好的div里放入iframe，就能在iframe中调入百度，而动态生成的div就不行，这是为什么？

#29

各位仁兄回答的都有和这个小姑娘一样的效果，可惜你们都所问非所答啊，往div中显示html我要是没有记错的话，先获取div的dom引用，然后设置它的innerHTML属性就可以了啊，这个属性的值就是html内容的字符串，例如：
document.getElementById("myDivID").innerHTML="<HTML>......</HTML>";

大概的思路就是这样，语法不定对哈，如果我说的不对兄弟们告诉我一下哈O(∩_∩)O~

#30

因为你引号没处理好啊 win3.innerHTML = "<iframe src="http://www.baidu.com" name="window"></iframe>"
改成 
win3.innerHTML = "<iframe src='http://www.baidu.com' name='window'></iframe>"
引用 28 楼  的回复:
引用 25 楼  的回复:
我早说了呀 ajax不能跨域，你去请求百度 当然不能成功的

引用 23 楼 的回复:

引用 20 楼 的回复:
ajax就好了，为什么非要iframe呢？iframe对seo的友好性不好。

谢回复
对我来说，更重要的是哪个好弄些
ajax的方案优点很多
但是我努力看了许多网页，也有许多朋友回复
并没有一个真正运行通过的
而iframe这……

#31

其实很简单,用jquery写的
引用jquery.js就可以了

代码参考: 


$.post
	(
		'url',//url=www.baidu.com
		{参数名:'值',参数名:'值'},//传值
		function(data)
		{
		    $("#divID").html(data);//divID的属性id名称
		}
	);

#32

引用 31 楼  的回复:
其实很简单,用jquery写的
引用jquery.js就可以了

代码参考:


JScript code

$.post
    (
        'url',//url=www.baidu.com
        {参数名:'值',参数名:'值'},//传值
        function(data)
        {
            $("#divI……

谢大手回复
大家说了半天的问题这么简单？
我试试哈

#33

用div+iframe也很简单啊！
<html>
<body>
<script language="javascript">
function chgdiv()
{
document.getElementById("if1").src=txt1.value;
}
</script>
<input type="button" value="改变div显示网页" onclick="chgdiv()" title="多美乐工作室"><input type="text" title="多美乐工作室" name="txt1" value="http://duomeile.f3322.org" size="110">
<div title="多美乐工作室"><iframe id="if1" src="http://www.baidu.com" width="800" height="800"></iframe></div>
</body>
</html>

#1

涉及ajax 域名跨域问题

如果是同1域名，本地javascript 的 ajax足矣，如果跨域名展示，需要你的服务端做代理 中转一次

#2

iframe 不是干这个的吗？

#3

IFrame
http://www.w3schools.com/tags/tag_iframe.asp

#4

引用 1 楼  的回复:
涉及ajax 域名跨域问题

如果是同1域名，本地javascript 的 ajax足矣，如果跨域名展示，需要你的服务端做代理 中转一次

谢大手回复
只是本站，具体怎么整？

#5

引用 2 楼  的回复:
iframe 不是干这个的吗？

++

#6

引用 2 楼  的回复:
iframe 不是干这个的吗？

++

#7

引用 2 楼  的回复:
iframe 不是干这个的吗？

谢回复
iframe和div还是不一样的
iframe要永久性地占据页面的一块位置
div则可以浮于页面其它内容之上，不占位置，这个特点我是需要的
最终我想要一点按钮就动态生成一个div并居中盖在其它网页内容之上，同时调入一个本站网页
动态生成div我已搞明白，所以 维持本帖顶楼原问。

#8

引用 7 楼  的回复:
引用 2 楼  的回复:
iframe 不是干这个的吗？

谢回复
iframe和div还是不一样的
iframe要永久性地占据页面的一块位置
div则可以浮于页面其它内容之上，不占位置，这个特点我是需要的
最终我想要一点按钮就动态生成一个div并居中盖在其它网页内容之上，同时调入一个本站网页
动态生成div我已搞明白，所以维持本帖顶楼原问。


吧Iframe放到div里。

#9

你在点击时创建一个iframe 在把他赋值给DIV不就行了.

#10

引用 8 楼  的回复:
引用 7 楼 的回复:

引用 2 楼 的回复:
iframe 不是干这个的吗？

谢回复
iframe和div还是不一样的
iframe要永久性地占据页面的一块位置
div则可以浮于页面其它内容之上，不占位置，这个特点我是需要的
最终我想要一点按钮就动态生成一个div并居中盖在其它网页内容之上，同时调入一个本站网页
动态生成div我已搞明白，所以维持本帖顶楼原问。


……

iframe能放div里么？这我倒没想到，如果能，如何动态给iframe调入一个网页呢？

#11

// JavaScript Document
(function(){
	var d=document,w=window,a={
		Load: {
			AjaxDom:function(){
				var xmlhttp;
				try {xmlhttp = new ActiveXObject("Msxml2.XMLHTTP")}catch (e1){  
					try{xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")}catch (e2){xmlhttp = null}  
				}  
				if (!xmlhttp && typeof XMLHttpRequest!='undefined') {   
					try {xmlhttp = new XMLHttpRequest()} catch (e){xmlhttp=null}   
				}   
				if (!xmlhttp && w.createRequest) {   
					try {xmlhttp = w.createRequest()} catch (e) { xmlhttp=null}   
				}  
				return xmlhttp
			},			
			AjaxAbort:function(obj){
				try{obj.abort()}catch(e){}
				try{obj=null}catch(e){}
				return null
			},
			Ajax:function(url,value,getorpost,callback,cannelajax){
				var L=a.Load;
				if(cannelajax){L.AjaxAbort(cannelajax)}
				getorpost = getorpost.toLowerCase();
				var doc=L.AjaxDom();			
				if (doc==null){
					return null
				}	
				doc.onreadystatechange=function(){				
					if (doc.readyState==4){
						if(callback && typeof(callback)=="function"){
							(function(){
							try{callback(doc.status,doc.responseText,doc.responseXML)}catch(e0){}
							try{doc.abort()}catch(e1){}
							doc=null
							})()
						}			
					}
				},
				doc.open(getorpost,url,true),
				doc.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
				if(getorpost=="post"){
					doc.send(value)			
				}
				else{
					doc.send(null)
				}
				return doc
			}
		}
	};w["Rayyu"]=a
})();


调用 
Rayyu.Load.Ajax("html路径",null,"get",function(status,text,xml){
	if(status==200){
		alert(text)
	}
})

#12

ajax返回一个html的代码，到DIV的ID

#13

引用 9 楼  的回复:
你在点击时创建一个iframe 在把他赋值给DIV不就行了.

如何用代码创建iframe并赋值，用代码，一点头绪都没有，能给个代码提示么？不好意思，麻烦你了

#14

引用 11 楼  的回复:
JScript code
// JavaScript Document
(function(){
    var d=document,w=window,a={
        Load: {
            AjaxDom:function(){
                var xmlhttp;
                try {xmlhttp = new ……

谢回复
在网上见过类似的代码，能解释下怎么用么？
我现在是两条思路了，用iframe+div和用ajax

#15


Rayyu.Load.Ajax("html路径",null,"get",function(status,text,xml){
    if(status==200){
        document.getElementById("div").innerHTML=text
    }
})

#16

引用 10 楼  的回复:
iframe能放div里么？这我倒没想到，如果能，如何动态给iframe调入一个网页呢？


用jquery
$(iframe).attr('src', locations[++i % len]);

参考这里的答案:
http://*.com/questions/1554396/change-content-in-iframe-with-jquery

#17

引用 15 楼  的回复:
JScript code

Rayyu.Load.Ajax("html路径",null,"get",function(status,text,xml){
    if(status==200){
        document.getElementById("div").innerHTML=text
    }
})

谢回复，下面的代码为什么运行点按钮后什么也不显示？
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>新建网页 4</title>
</head>

<body>
<script>
function   bbb()   
{   
var   str   =   document.createElement("div");   
str.id   =   "win3";   
str.contentEditable = "true";
str.className = "xWin";
str.style.position   =   "absolute";   
str.style.setAttribute("left","100px");   
str.style.setAttribute("top","50px");   
str.style.setAttribute("width","100px");   
str.style.setAttribute("height","100px");   
str.style.setAttribute("z-index","1");
str.style.setAttribute("border","2px solid red");
document.body.appendChild(str); 
win3.innerHTML = "<iframe src="http://www.baidu.com" name="window"></iframe>"
}
</SCRIPT>
<input value="动态生成" type="button" onClick="bbb();" >
</body>

</html>

注：
我试过，在不是动态生成的div中的iframe中是可以显示baidu页面的
iframe放进这个动态生成的div后就不显示baidu了
结论：不是iframe中src所指网页的问题
以上代码要是放是一串普通的文本，也是能显示的
结论：不是代码动态生成有问题

那么是什么问题呢？


#18

引用 16 楼  的回复:
引用 10 楼 的回复:
iframe能放div里么？这我倒没想到，如果能，如何动态给iframe调入一个网页呢？
用jquery
$(iframe).attr('src', locations[++i % len]);
参考这里的答案:
http://*.com/questions/1554396/change-content-in-iframe-w……

谢回复，不想现学jquery了，发现jqery的确很火，不过我以后在学吧
我想先顺着div+iframe的思路下去，毕竟这个已差不多弄通了

#19

引号重复了，转义下 或者改成单引号
引用 17 楼  的回复:
引用 15 楼  的回复:
JScript code

Rayyu.Load.Ajax("html路径",null,"get",function(status,text,xml){
if(status==200){
document.getElementById("div").innerHTML=text
}
})

谢回复，下面的代码为什么运行点按钮后什么也不显示？
<ht……

#20

ajax就好了，为什么非要iframe呢？iframe对seo的友好性不好。

#21

客户端的ajax 蜘蛛也是爬不到的 呵呵呵
引用 20 楼  的回复:
ajax就好了，为什么非要iframe呢？iframe对seo的友好性不好。

#22

JQuery 

$(function(){
    $("#yourdivid").load("url");
})

#23

引用 20 楼  的回复:
ajax就好了，为什么非要iframe呢？iframe对seo的友好性不好。

谢回复
对我来说，更重要的是哪个好弄些
ajax的方案优点很多
但是我努力看了许多网页，也有许多朋友回复
并没有一个真正运行通过的
而iframe这个，只差一点点就明白了

#24

请大家关注我17楼的问题
请不要再提出一些不完美的新方案了

#25

我早说了呀 ajax不能跨域，你去请求百度 当然不能成功的
引用 23 楼  的回复:
引用 20 楼  的回复:
ajax就好了，为什么非要iframe呢？iframe对seo的友好性不好。

谢回复
对我来说，更重要的是哪个好弄些
ajax的方案优点很多
但是我努力看了许多网页，也有许多朋友回复
并没有一个真正运行通过的
而iframe这个，只差一点点就明白了

#26

第二 本地html是没有ajax权限的 你直接保存代码在本地执行 status是等于0的

ajax必须在 http://  https:// 开头的地址下  不能是file://

#27

不希望提出各种新方案，
主要是因为我的研究水平太有限
一个思路差不多了，再研究另一个，受不了，呵呵

#28

引用 25 楼  的回复:
我早说了呀 ajax不能跨域，你去请求百度 当然不能成功的

引用 23 楼 的回复:

引用 20 楼 的回复:
ajax就好了，为什么非要iframe呢？iframe对seo的友好性不好。

谢回复
对我来说，更重要的是哪个好弄些
ajax的方案优点很多
但是我努力看了许多网页，也有许多朋友回复
并没有一个真正运行通过的
而iframe这个，只差一点点就明白了

谢回复
但这回你说错了,呵呵
我上面提到了
如果我用静态写好的div里放入iframe，就能在iframe中调入百度，而动态生成的div就不行，这是为什么？

#29

各位仁兄回答的都有和这个小姑娘一样的效果，可惜你们都所问非所答啊，往div中显示html我要是没有记错的话，先获取div的dom引用，然后设置它的innerHTML属性就可以了啊，这个属性的值就是html内容的字符串，例如：
document.getElementById("myDivID").innerHTML="<HTML>......</HTML>";

大概的思路就是这样，语法不定对哈，如果我说的不对兄弟们告诉我一下哈O(∩_∩)O~

#30

因为你引号没处理好啊 win3.innerHTML = "<iframe src="http://www.baidu.com" name="window"></iframe>"
改成 
win3.innerHTML = "<iframe src='http://www.baidu.com' name='window'></iframe>"
引用 28 楼  的回复:
引用 25 楼  的回复:
我早说了呀 ajax不能跨域，你去请求百度 当然不能成功的

引用 23 楼 的回复:

引用 20 楼 的回复:
ajax就好了，为什么非要iframe呢？iframe对seo的友好性不好。

谢回复
对我来说，更重要的是哪个好弄些
ajax的方案优点很多
但是我努力看了许多网页，也有许多朋友回复
并没有一个真正运行通过的
而iframe这……

#31

其实很简单,用jquery写的
引用jquery.js就可以了

代码参考: 


$.post
	(
		'url',//url=www.baidu.com
		{参数名:'值',参数名:'值'},//传值
		function(data)
		{
		    $("#divID").html(data);//divID的属性id名称
		}
	);

#32

引用 31 楼  的回复:
其实很简单,用jquery写的
引用jquery.js就可以了

代码参考:


JScript code

$.post
    (
        'url',//url=www.baidu.com
        {参数名:'值',参数名:'值'},//传值
        function(data)
        {
            $("#divI……

谢大手回复
大家说了半天的问题这么简单？
我试试哈

#33

用div+iframe也很简单啊！
<html>
<body>
<script language="javascript">
function chgdiv()
{
document.getElementById("if1").src=txt1.value;
}
</script>
<input type="button" value="改变div显示网页" onclick="chgdiv()" title="多美乐工作室"><input type="text" title="多美乐工作室" name="txt1" value="http://duomeile.f3322.org" size="110">
<div title="多美乐工作室"><iframe id="if1" src="http://www.baidu.com" width="800" height="800"></iframe></div>
</body>
</html>
标签：

相关文章