window.open简单使用

window.open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。

语法

window.open(URL,name,specs,replace) 
 
使用：
views.py
from django.shortcuts import render,redirect,HttpResponse

def index(request):
    return render(request,"index.html")

from .models import  Book

def addbook(request):
    if request.method=="POST":
        title=request.POST.get("title")
        Book.objects.create(title=title)
        return render(request,"pop.html",locals())
    else:
        return render(request,"addbook.html")

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父窗口</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>
    <h1>Index</h1>
    <p><button class="add" onclick="foo()">+</button></p>

    <p class="book_title"></p>
    <script src="/static/jquery-3.3.1.js"></script>

    <script>
        function foo() {
            window.open("/addbook/","","width=400,height=400,top=100,left=200")
        }

        function bar(arg) {
            console.log(arg);
            $(".book_title").text(arg)
        }
    </script>
</body>
</html>

addbook.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="/static/jquery-3.3.1.js"></script>
</head>
<body>

<form action="" method="post">
    {% csrf_token %}
    书籍：<input type="text" name="title">
    <input type="submit">
</form>


</body>
</html>

pop.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子窗口</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="/static/jquery-3.3.1.js"></script>

</head>
<body>
<script>
    window.opener.bar("{{ title }}");   //子窗口中执行父窗口的函数，然后关闭此窗口
    window.close()
</script>
</body>
</html>

 

 

posted @ 2020-05-21 15:39  zh_小猿  阅读(382)  评论(0)  编辑  收藏  举报