django iframe使用

访问量:1301 创建时间:2021-02-25

创建项目

django-admin startproject  testiframe

创建app并设置STATICFILES_DIRS

[root@node1 testiframe]# python3 manage.py startapp iframe_test
[root@node1 testiframe]# vim testiframe/settings.py
STATICFILES_DIRS=[(os.path.join(BASE_DIR,'static'))]
[root@node1 testiframe]# cd static/
[root@node1 static]# wget https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js

设置urls

[root@node1 testiframe]# vim testiframe/urls.py 
from django.contrib import admin
from django.urls import path,re_path

urlpatterns = [
    path('admin/', admin.site.urls),
    re_path('iframe/', include("iframe_test.urls")),
]
[root@node1 testiframe]# vim iframe_test/urls.py
from django.urls import path,re_path
from iframe_test import views
from django.conf.urls import url

app_name='namespace'
urlpatterns = [
    #iframe
    re_path('iframe/', views.iframe),
]

设置视图函数

[root@node1 testiframe]# vim iframe_test/views.py 

from django.shortcuts import render

# Create your views here.
def iframe(request):
    if request.method == "GET":
        return render(request, 'iframe.html')
    elif request.method == "POST":
        import time
        time.sleep(3)
        print(request.POST)
        ret = {'code': True , 'data': request.POST.get('username')}
        import json
        return HttpResponse(json.dumps(ret))

设置templates

[root@node1 testiframe]# vim testiframe/settings.py
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'template')],  ####
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

设置模板文件

[root@node1 testiframe]# vim template/iframe.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

    <input type="text" id="url" />
    <input type="button" value="发送Iframe请求"  onclick="iframeRequest();" />
    <iframe id="ifm" src="http://www.baidu.com" style="height: 200px;width: 600px"></iframe>
    <!--
    1.该iframe相当于是嵌套的html 页面显示百度该网站
    2.上面的代码是我们在input输入框输入一个网址如https://www.qq.com
    3.点击按钮(发送iframe请求)，触发函数iframeRequest()
    4.函数内部假如我们进行获取输入的网址www.qq.com然后赋值到iframe的src
    5最终ifname
    -->

    <script type="text/javascript" src="/static/jquery.js"></script>
    <script>

    <script>
        function iframeRequest(){
            var url = $('#url').val();
            $('#ifm').attr('src',url);
        }
    </script>
</body>
</html>

转载参考：https://blog.csdn.net/burgess_zheng/article/details/86558181

<< 上一章节

下一章节 >>

登陆评论: 使用GITHUB登陆