需求：

　　用户输入URL，使用iframe将目标URL的内容加载到页面指定位置（局部刷新）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>使用iframe局部刷新</title>

</head>

<body>

<div>

    <p>请输入要加载的地址:<span id="currentTime"></span></p>

    <p>

        <input id="url" type="text">

        <input type="button" value="刷新" onclick="LoadPage();">

    </p>

</div>

<div>

    <h3>加载页面位置：</h3>

    <iframe id="iframePosition" style="width:100%;height: 500px;"></iframe>

</div>

<script>

    window.onload = function () {

        var myDate = new Date();

        document.getElementById('currentTime').innerText = myDate.getTime();

    };

    function LoadPage() {

        var targetUrl = document.getElementById('url').value;

        document.getElementById('iframePosition').src = targetUrl;

    }

</script>

</body>

</html>

Ajax-02 iframe实现伪“Ajax”的更多相关文章

  1. iframe实现伪ajax

    iframe实现伪ajax 数据提交的两种方式: Form Ajax Ajax提交数据的方法: JS实现 Jquery “伪”Ajax "伪"Ajax: iframe+from实现 ...

  2. 33)django-原生ajax,伪ajax

    一:概述 对于WEB应用程序:用户浏览器发送请求,服务器接收并处理请求,然后返回结果,往往返回就是字符串(HTML),浏览器将字符串(HTML)渲染并显示浏览器上. 1.传统的Web应用 一个简单操作 ...

  3. tornado之文件上传的几种形式form,伪ajax(iframe)

    1直接form提交给后台处理 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  4. 一个伪ajax图片上传代码的例子

    一个伪ajax图片上传实现代码. 复制代码代码如下: <?php  if($_FILES){  ?>  <script>  window.parent.ajaxUploadPi ...

  5. 伪ajax上传文件

    伪ajax上传文件   最近在折腾伪ajax异步上传文件. 网上搜索了一下,发现大部分方法的input file控件都局限于form中,如果是在form外的呢? 必须动态生成一个临时form和临时if ...

  6. 手动(原生ajax)和自动发送ajax请求 伪ajax(Ifrname)

    自动发送  ---> 依赖jQuery文件 实例-->GET请求: function AjaxSubmit() { $.ajax({ url:'/data', type:"GET ...

  7. 前端 - js方式Ajax/ jquery方式Ajax / 伪 ajax /伪ajax 进阶方式

    DJANGO环境搭建: 目录文件: 关闭CSRF 添加目录文件路径 配置url 视图配置: index页面配置: 测试:(成功) 进入正题: ajax 通过GET提交数据至后台: <!DOCTY ...

  8. 伪AJAX

    <h3>3,伪ajax</h3> <h6>学习iframe(嵌套别人家网站的)</h6> <div> <input id=" ...

  9. 框架----Django之Ajax全套实例（原生AJAX，jQuery Ajax，“伪”AJAX，JSONP，CORS）

    一.原生AJAX,jQuery Ajax,“伪”AJAX,JSONP 1. 浏览器访问 http://127.0.0.1:8000/index/ http://127.0.0.1:8000/fake_ ...

随机推荐

  1. 2015-03-12——简析DOM2级事件

    DOM2级事件 事件的几种类型:对象事件,鼠标事件,键盘事件,表单事件,W3CDOM事件,以及针对浏览器的事件. 对象事件:window对象,也是javascript对象.load  适用于windo ...

  2. 删除DOM元素 parent.removeChild(target)

    p.removeChild(p.children[0]);

  3. 我的Android进阶之旅------>Android studio 如何修改工程的包名

    关于用Android Studio修改Android APP的应用包名的问题,今天遇到了一个坑,这里记录一下. 这里用一个简单的Demo来展示在Android Studio中如何修改Android P ...

  4. LRU经典算法的原理与实现

    LRU  least recently used.顾名思义,是根据数据的活跃度进行更新的缓存算法. LRU Cache的LinkedHashMap实现: LinkedHashMap自身已经实现了顺序存 ...

  5. python学习之路-第五天-python的数据结构

    数据结构 1. 列表 例子: #!/usr/bin/python # Filename: using_list.py # This is my shopping list shoplist = ['a ...

  6. list comprehension & generator expression

    List comprehensions(列表推导式) are better when you want to iterate over something multiple times. Howeve ...

  7. Rest_framework-1

    目录 一.认证 二.权限 三.限制访问频率 四.总结 一.认证(补充) 认证请求头 #!/usr/bin/env python # -*- coding:utf-8 -*- from rest_fra ...

  8. openCV学习——一、Mat类

    一.Mat数据类型 在以下两个场景中使用 OpenCV 时,我们必须事先知道矩阵元素的数据类型: 使用 at 方法访问数据元素的时候要指明数据类型 做数值运算的时候,比如究竟是整数除法还是浮点数除法. ...

  9. 详解HTTP中GET与POST的区别，不是你看过的标准答案！

    防吐槽声明:本文适合程序员新人,自认阅文无数.技术超叼的大神不用看. GET和POST是HTTP请求的两种基本方法,要说它们的区别,接触过WEB开发的人都能说出一二. 最直观的区别就是GET把参数包含 ...

  10. linux sed批量替换多个文件内容

    sed -i "s/lgside/main/g" `grep -rl lgside /home/zn/work/project-template` 注意标点符号:`