有时候需要把其他地方的页面嵌套到当前的的网站的某个模块中,就可以使用iframe嵌套
1、不需要登录其他网站的直接嵌套
新建html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>百度</title>
<style>
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
width: 100%;
overflow: hidden;
}
iframe {
border: 0;
}
</style>
</head>
<body>
<iframe id="mainContent" width="100%" height="100%"></iframe>
</body>
<script>
var mainContent = document.getElementById('mainContent');
mainContent.src = "http:baidu.com.cn"//嵌套网址
</script>
</html>
2、需要登录其他网址才可以获取嵌套页面
新建html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
<style>
*{
padding: 0;
margin: 0;
}
html,body{
height: 100%;
width: 100%;
overflow: hidden;
}
iframe{
border: 0;
}
</style>
</head>
<body>
<iframe id="mainContent" width="100%" height="100%"></iframe>
</body>
<script>
window.parent.Ext.onReady(function(){//因为单独打开窗口,所以这里引用了自己框架的方法,使得 Ext.data.JsonP.request这个方法可以调用
var Ext = window.parent.Ext ;
Ext.data.JsonP.request({
url: 'url',//登录网站
async: false,
params: {
RF_Login_Username:"ordinary",
RF_Login_Password:123456//用户名和密码
},
callbackKey: "callback",
callbackName: "callback",
success:function(d){
var mainContent = document.getElementById('mainContent');
mainContent.src = "http:url"//嵌套页面网址
},
callBack:function(d){
},
failure: function (d) {
alert('请求失败,请关闭窗口后重新打开!');
}
});
})
</script>
</html>