码迷,mamicode.com
首页 > Windows程序 > 详细

window.open和window.opener

时间:2018-10-11 18:40:22      阅读:211      评论:0      收藏:0      [点我收藏+]

标签:新窗口   pop   token   index   click   rom   mit   src   提交   

window.open是用来打开一个新窗口的;window.opener是调用父级窗口

举个栗子:

1.index.html页面:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
    <h3>index</h3>
    <button style="padding: 3px;display: inline-block" onclick="add()">+</button>
    <div class="book">
    </div>
    <script>
        function add() {
       # 第一个参数是跳转的url,第三个参数是窗口宽高设置和距离左上角的坐标
            window.open("/addBook","","width=400,height=200,top=200,left=300")
        }
     # 回调的函数
        function bar(title) {
            var p= $("<p>")
            p.text(title)
            $(".book").append(p)
        }
    </script>
</body>
</html>

2. /addBook 所跳转的页面 addbook.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="/addBook/" method="post">
    {% csrf_token %}
    <p>书籍:<input type="text" name="title"></p>
    <input type="submit" value="提交">
</form>
</body>
</html>

 

3. views.py  提交所执行的后台代码:

from django.shortcuts import render
from app01.models import *
def index(request):
    return render(request,"index.html")
def addBook(request):
    if request.method == "POST":
        title = request.POST.get("title")
        Book.objects.create(title=title)
        return render(request, "pop.html",{"title":title})
    else:
        return render(request, "addbook.html")

4.pop.html页面:相当于 信息传递的载体<!DOCTYPE html><html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
  // 调用index.html页面的bar方法
   window.opener.bar("{{ title }}") window.close() </script> </body> </html>

 

window.open和window.opener

标签:新窗口   pop   token   index   click   rom   mit   src   提交   

原文地址:https://www.cnblogs.com/fangsheng/p/9773709.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!