iframe中页面跳转的问题
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了iframe中页面跳转的问题相关的知识，希望对你有一定的参考价值。
设想：页面A中用iframe容器加载了页面B，然后我想在B中设定一个按钮，当单击该按钮后整个页面跳转到页面C。
但是实际我在B中用Response.Redirect、window.location.href什么的改来改去最后单击该按钮的效果就是局部跳转呢。
于是我还是个新手，想问问看到底该怎么做到B中按钮一按整个页面跳转呢？求教高手指点，感激不尽！
function first()
window.parent.location.href='C页面地址';
追问
谢谢您回答我，我还想再问下麻烦您看看，一定有加分！
本来B是通过x.action处理后转向C的，所以js里我不能直接这样跳转，请问js里能调用action然后再转到C吗？求教，万分谢谢！
可以使用Ajax，将x.action以Ajax方式返回字符串，而不是进行跳转。这样在first的JS方法中，发送Ajax异步请求，在成功的回调方法中调用window.parent.location.href='C页面地址';
本回答被提问者和网友采纳 参考技术B 如果是要A页面跳转到C的话可以在B页面中使用parent.location来进行跳转实现了iframe的页面跳转的功能
之前没有接触过iframe的相关功能,最近看到项目中基本上都是用iframe嵌套子页面,于是自己想编写实现这个过程,为以后的工作提供便利.
main页面
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/main.css"/>
<script src="js/jquery-1.11.3.min.js"></script>
</head>
<body>
<header id="top">
<ul>
<li id="foot1">首页</li>
<li id="foot2">子页面1</li>
<li id="foot3">子页面2</li>
<li id="foot4">子页面3</li>
</ul>
</header>
<section id="main">
<iframe frameborder="0" src="01.html"></iframe>
</section>
<footer id="foot">©mumu</footer>
<script src="js/jsss.js">
</script>
</body>
</html>
js中的代码:
$(function(){
$("#foot2").click(function(){
console.log("safd");
$("iframe").attr("src","02.html");
});
$("#foot3").click(function(){
console.log("safd");
$("iframe").attr("src","03.html");
});
$("#foot4").click(function(){
console.log("safd");
$("iframe").attr("src","04.html");
});
$("#foot1").click(function(){
console.log("safd");
$("iframe").attr("src","01.html");
})
});
子页面1:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<style>
body{
width: 1200px;
margin: 0 auto;
}
</style>
<body>
子页面111111111111111111111111111111111111111
</body>
</html>
子页面2:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<style>
body{
width: 1200px;
margin: 0 auto;
}
</style>
<body>
子页面222222222222222222222222222222222222222
</body>
</html>
子页面3:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<style>
body{
width: 1200px;
margin: 0 auto;
}
</style>
<body>
子页面33333333333333333333333333333
</body>
</html>
子页面4:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<style>
body{
width: 1200px;
margin: 0 auto;
}
</style>
<body>
子页面444444444444444444444444444444444
</body>
</html>
以上没有布上css样式.自己脑补。
以上是关于iframe中页面跳转的问题的主要内容，如果未能解决你的问题，请参考以下文章