zoukankan      html  css  js  c++  java
  • window.open和window.opener

    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>
    。。。。。。。。。。。。。。。。。。
  • 相关阅读:
    《Python入门》学习笔记(2)
    《Python入门》学习笔记(1)
    《基于华为云DevCloud的托马斯商城》的学习笔记
    国内外云测平台
    优秀程序员&优秀架构师需要具备的能力和特质
    jira插件-xray、zephyr、synapseRT测试管理试用反馈
    Json文件转换为Excel文件!涉及读文件,时间戳转化,写文档
    客户端与服务端通信的交互模式
    traceroute和tracert区别
    mysql: navicat for mysql 执行快捷键
  • 原文地址:https://www.cnblogs.com/fangsheng/p/9773709.html
Copyright © 2011-2022 走看看