window.open和window.opener
阿新 • • 發佈：2018-10-11
har lock csrf views mode 第一個 action token div
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