对iframe中的页面使用post提交。
假设是如下的一个页面:
<a href="javascript:void(0)" id="aa" >生成页面</a>
<iframe src="" id="_iframe" width="100%" frameborder="0" scrolling="auto"></iframe>
<script type="text/javascript">
$('#aa').click(function(){
$('#_iframe').src = "helloworld/index.php";
});
</script>
点击页面中”生成页面“的那个连接,iframe就会引用那个叫helloworld/index.php页面了。
从中我们不难看出,可以通过在src引用的url后面追加一些querystring来将参数带入到页面中,从而实现不同的页面逻辑。但是这里存在一个问题,那就是,如果我们不希望所带的参数通过get请求提交到页面中,或者,我们需要携带的参数过多,过长的时候,用以上的方法就不合适了。
解决方法也非常简单:改一下按钮的click事件对应的函数,使用ajax提交数据到页面的地址,返回数据格式设为html,并将其展示在iframe中。具体代码如下:
<script type="text/javascript">
var data=xxxx;
$('#aa').click(function(){
$.ajax(
type : 'post',
url : "helloworld/index.php"
dataType : html
success : function(html_content){
$("#_iframe").contents().find("html").html(html_content);
}
);
});
</script>
假设是如下的一个页面:
<a href="javascript:void(0)" id="aa" >生成页面</a>
<iframe src="" id="_iframe" width="100%" frameborder="0" scrolling="auto"></iframe>
<script type="text/javascript">
$('#aa').click(function(){
$('#_iframe').src = "helloworld/index.php";
});
</script>
点击页面中”生成页面“的那个连接,iframe就会引用那个叫helloworld/index.php页面了。
从中我们不难看出,可以通过在src引用的url后面追加一些querystring来将参数带入到页面中,从而实现不同的页面逻辑。但是这里存在一个问题,那就是,如果我们不希望所带的参数通过get请求提交到页面中,或者,我们需要携带的参数过多,过长的时候,用以上的方法就不合适了。
解决方法也非常简单:改一下按钮的click事件对应的函数,使用ajax提交数据到页面的地址,返回数据格式设为html,并将其展示在iframe中。具体代码如下:
<script type="text/javascript">
var data=xxxx;
$('#aa').click(function(){
$.ajax(
type : 'post',
url : "helloworld/index.php"
dataType : html
success : function(html_content){
$("#_iframe").contents().find("html").html(html_content);
}
);
});
</script>
这样,我们就实现了需要的功能。
转载自:轩辕随风的博客
http://blog.sina.com.cn/u/1739592265