替代iframe

【替代iframe】的更多相关文章

jquery实现替代iframe的功能

使用iframe能很好的嵌入其他的网页或者网站,但是iframe每次加载都会浪费好多的时间,且会阻止其他元素的加载,搜索引擎也不能识别页面ifram框架中被调用的链接.文本.图片等等内容的. Html代码 <ul class="list-side"> <li><a target="a.html" >about</a></li> <li><a target="b.html"…

1.jq中通过JQuery的load()方法动态加载页面. $( "#result" ).load( "app/test.html" ); 2.vue.react.angular中使用嵌套路由代替iframe…

替代iframe新逻辑

使用ajax请求.下面是代码逻辑 $.ajax({ url:url, type:'get', dataType: "text", success:function(msg){ $('#div').html(msg) }, error:function(){ alert('error'); } })…

在一定范围大小变化的div .div { width:auto; height:auto; min-height:100px; min-width:100px; max-height:200px; max-width:200px; } 圆的css样式 .a {width:400px; height:400px; background-color:#06F; top:800px; left:800px; -moz-border-radius:200px; -webkit-border-radius…

JavaScript优化参考

最近在为管理系统的网站做点优化,压缩都用了工具,就没太多可以讨论的. 主要还是代码上的精简和优化.稍微整理一下,顺便做点测试. 这里先贴上项目中用来替代iFrame的Ajax处理的局部代码,本人比较讨厌用iFrame来实现模块管理(主要是多重嵌套,存在一些刷屏时候白屏.脚本对象不一致.缓存数据问题等等,还有一些是对象引用丢失或者被重定向的情况). 这里引入的是jQuery1.8.3.js的版本库 var ie = (function () { // ie10-6 var ua = navigat…

jquery pjax 用法总结

以前我们点击a链接的时候总是会刷新整个页面并跳转到新页面,中间可以很明显的看到短暂的白屏.pjax就很好的解决了这问题. pjax的原理很简单,就是发送一个ajax请求,获取html代码,再把相关代码应用到指定容器中,就完成了pjax.pjax除了解决跳转白屏以外,还能替代iframe,让前端不得不使用iframe的场景大大减少. 一个最简单的pjax例子,只需要jQuery,不使用任何插件: html: <a class="leftPaneItem" onclick="…

ios中iframe的scroll滚动事件替代方法

在公众号的开发中,遇到ios中iframe的scroll滚动事件失效,在此做下记录. 因为接口获取的数据必须放在iframe中展示,滚动到底部按钮变亮,如图: 代码如下: <!DOCTYPE html> <html> <head> <title>贷款合同</title> <% include ../include/header.html %> </head> <body style="background:…

ionic 里使用 iframe 可能遇到的问题

无法访问外部url的问题--两个步骤解决: iframe的src属性用ng-src属性替代,并指明绑定对象: ng-src="{{targetUrl}}" 在controller里,调用$sce: $scope.targetUrl = $sce.trustAsResourceUrl(url) 高度无法最大化的问题--两个步骤解决: ion-content 属性里添加 scroll="true" overflow-scroll="true",参考…

div加jquery实现iframe标签的功能

由于最近项目需要,前端后台都完全采用div+css的方式布局.因而左思右想,有什么办法可以替代常用的iframe上下左右的布局方式,而且页面只是局部刷新.参考了许多前辈的资料,并加以整理,因而有了以下的方法. 需求: 1.由于是全局的div+css,由于每次提交的内容都会有所差异. 2.每个提交都会用到,因而需要一个通用方法. 3.返回的是html内容,因而需要指定一个显示区域因而写一个可复用的方法就显得尤为重要了,因而有了以下的方法.上码: /** * [btnsubmit 提交url并返回…

IFrame父页面和子页面的交互

现在在页面里面用到iframe的情况越来越少了,但有时还是避免不了,甚至这些页面之间还需要用js来做交互,那么这些页面如何操作彼此的dom呢?下面将会逐步介绍. 1.父页面操作子页面里面的dom 下面提供了四中方法来操作iframe里面的dom: a. contentWindow: 以window对象返回iframe中的文档,所有主流浏览器都支持. 用法: // 获取id为iframeId的子页面中的div01元素 document.getElementById('iframeId').cont…

性能优化之-------少用iframe

1.DOM开销高使用iframe的开销是很高的,在主页面中加载同等数量的div和iframe(标签内容都是空),iframe的耗时会比div的高1~2个数量级. 2.阻塞onload事件在典型方式下(<iframe src=url></iframe>)使用iframe时,会阻塞onload事件. 解决方法:1.使用js动态设置iframe的src属性.只对chrome.Safari有效 2.在onload事件后,设置iframe的src 一般情况下,iframe和主页面中的资…

原生JS替代jQuery的各种方法汇总

前端发展很快,现代浏览器原生 API 已经足够好用.我们并不需要为了操作 DOM.Event 等再学习一下 jQuery 的 API.同时由于 React.Angular.Vue 等框架的流行,直接操作 DOM 不再是好的模式,jQuery 使用场景大大减少.本项目总结了大部分 jQuery API 替代的方法,暂时只支持 IE10 以上浏览器. Query Selector 常用的 class.id.属性选择器都可以使用 document.querySelector 或 document.q…

Web前端之iframe详解

iframe基本内涵通常我们使用iframe直接直接在页面嵌套iframe标签指定src就可以了. <iframe src="demo_iframe_sandbox.htm"></iframe> 但是,有追求的我们,并不是想要这么low的iframe. 我们来看看在iframe中还可以设置些什么属性 iframe常用属性: 1.frameborder:是否显示边框,1(yes),0(no) 2.height:框架作为一个普通元素的高度,建议在使用css设置.…

iframe标签

转载文章:Web前端之iframe详解 iframe基本内涵通常我们使用iframe直接在页面嵌套iframe标签指定src就可以了. <iframe src="demo_iframe_sandbox.htm"></iframe> 我们通常使用iframe最基本的特性,就是能自由操作iframe和父框架的内容(DOM). 但前提条件是同域. 这里,我们先从简单的开始,当主页面和iframe同域时,我们可以干些什么. 获取iframe里的内容主要的两个API…

ionic-content 中iframe高度自适应

http://blog.csdn.net/jesounao/article/details/50945003 无法访问外部url的问题–两个步骤解决: 1.iframe的src属性用ng-src属性替代,并指明绑定对象:ng-src="{{targetUrl}}" 2.在controller里,调用$sce: $scope.targetUrl = $sce.trustAsResourceUrl(url) 高度无法最大化的问题–两个步骤: 1.ion-content 属性里添加 scro…

使用iframe实现同域跨站提交数据

有一个已经编译的asp.net 1.1的网站.为了改进录入的效率,改为由barcode扫描枪来替代手动.由于在扫描枪添加其它信息.原录入窗口已经无法适应.另外程序虽然跑的是存储过程,但交易的transaction是写在程序中.Insus.NET只好使用iframe来传入数据,并能执行原网页的铵钮事件. 下面一张图片让你明白使用iframe同域跨站提交数据,以一个最通俗的登录来作例子.源录入路径:http://i1.company.com/Pb.aspx.现在只写一个新站点新网页:http://i…

iframe嵌套

iframe基本内涵通常我们使用iframe直接直接在页面嵌套iframe标签指定src就可以了. <iframe src="demo_iframe_sandbox.htm"></iframe> 但是,有追求的我们,并不是想要这么low的iframe. 我们来看看在iframe中还可以设置些什么属性 iframe常用属性: 1.frameborder:是否显示边框,1(yes),0(no) 2.height:框架作为一个普通元素的高度,建议在使用css设置.…

使用postMessage进行react和iframe的数据通信.md

将react的数据传递给iframe 1.首先在父组件(react文件)内引入iframe <iframe style={{border:0,width:"100%",height:"100%",}} src='/model.html' id='calculation' //onLoad={this.sendToken} /> 2.然后在父组件(react文件)内的Button按钮上绑定点击事件 <Button type="primary…

跨域方法：JSONP、iframe

同源策略:浏览器出于安全考虑,会限制文档或脚本中发起的跨域请求(但src请求不受此限)资源的加载.实际上通过抓包软件可以发现请求和响应都会成功,但是响应数据并不会被浏览器加载.不同源的客户端脚本(javascript.ActionScript)在没明确授权的情况下,不可以使用 XMLHttpRequest 对象和Fetch发起读写其他web服务器的资源,主要有如下限制: 1.) Cookie.LocalStorage 和 IndexDB 无法读取 2.) DOM 和 Js对象无法读写 3.) A…

iframe高度动态自适应

by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1294 一.前言碎碎念我从来对iframe就没有什么好感,对其基本上是不屑一顾.但是人在江湖,身不由己.经理发话,新功能使用iframe实现,没办法,只好折腾,两大烦人的东西,一是带遮罩的弹框提示,而是iframe高度问题.前一个烦人的问题使用其他形式的提示来规避,后一人扰人的问题确实没有什么经验,花了点时间折腾了下,…

Jquery如何序列化form表单数据为JSON对象 C# ADO.NET中设置Like模糊查询的参数从客户端出现小于等于公式符号引发检测到有潜在危险的Request.Form 值 jquery调用iframe里面的方法 Js根据Ip地址自动判断是哪个城市【我们一起写框架】MVVM的WPF框架（三）—数据控件设计模式之简单工厂模式（C#语言描述）

jquery提供的serialize方法能够实现. $("#searchForm").serialize();但是,观察输出的信息,发现serialize()方法做的是将表单中的数据以htpp请求格式拼接成字符串.serialize确实是能够解决一般的提交数据.但是有时我们需要的是一个object对象,而不是字符串(比如jqgrid reload时设置查询条件参数,就需要object对象).方法如下: (function(window, $) { $.fn.serializeJson…

Iframe 用法的详细讲解

1转自:https://blog.csdn.net/judyge/article/details/51786064 zIframe 用法的详细讲解把iframe解释成“浏览器中的浏览器“很是恰当 <iframe frameborder=0 width=170 height=100 marginheight=0 marginwidth=0 scrolling=no src=http://www.163.com></iframe> <IFRAME>用于设置文本或图形的浮动…

什么是iframe及作用是什么？

一. iframe是什么及作用 iframe是嵌入式框架, 是html标签, 还是一个内联元素, iframe 元素会创建包含另外一个文档的内联框架(即行内框架) . 说白了, iframe用来在页面嵌入其他页面. 通常我们使用iframe直接直接在页面嵌套iframe标签指定src就可以了. <iframe src="demo_iframe_sandbox.htm"></iframe> 二. iframe的优缺点优点: 1. 页面和程序分离,几乎不会受到外界…

[19/06/04-星期二] HTML基础_实体(转义字符)、图片标签(img)、元标签(meta)、语法规范、内联框架(iframe)、超链接

一.实体(转义字符) 在HTML中,一些诸如<.> 就是普通的小于号和大于号不能直接使用,因为浏览可能会把它当成一个标签去解析,所以需要一些特殊字符去表示这些特殊字符, 这些字符我们称他们叫实体,也叫转义字符.浏览器解析到实体时,会自动将实体装换成对应的字符. 语法: &实体的名字: 即"&"符号开头":"符号结尾如,小于号 <: &lt: 全称:less than 比....小大于号 >: &…

iframe,我们来谈一谈

某大咖说: "iframe是能耗最高的一个元素,请尽量减少使用"某大牛说: "iframe安全性太差,请尽量减少使用"...wtf, 你们知不知道你们这样浇灭了多少孩纸学习iframe的热情和决心. 虽然,你们这样说的我竟无法反驳,但是iframe强大功能是不容忽视的. 可以看看各大邮箱网站是否还在使用iframe,查查知乎iframe. iframe不死,我心不灭.现在给大家安利一下iframe. iframe基本内涵通常我们使用iframe直接直接在页面嵌…

iframe框架及优缺点

iframe框架及优缺点 HTML5不再支持使用frame,关于frame与iframe的区别,可以参阅 iframe与frame的区别基本使用 src:规定在iframe中显示的文档的URL. frameborder:规定是否显示框架周围的边框. scrolling:规定是否在 iframe 中显示滚动条. width:规定iframe的宽度,建议使用CSS替代. height:规定iframe的高度,建议使用CSS替代. sandbox:启用一系列对iframe中内容的额外限制. marg…

完美判断iframe是否加载完成

var iframe = document.createElement("iframe"); iframe.style.width = "265px"; iframe.style.height = "490px"; iframe.style.border = "none"; iframe.src = "http://cnblogs.com/walls"; if(iframe.attachEvent){ //…

js学习笔记：操作iframe

iframe可以说是比较老得话题了,而且网上也基本上在说少用iframe,其原因大致为:堵塞页面加载.安全问题.兼容性问题.搜索引擎抓取不到等等,不过相对于这些缺点,iframe的优点更牛,跨域请求.制作富文本编辑器.历史记录管理.长连接.无刷新文件上传等方面,可参考一下知乎的这个回答:Iframe 有什么好处,有什么坏处?国内还有哪些知名网站仍用Iframe,为什么?有哪些原来用的现在抛弃了?又是为什么?. 今天就总结一下操作iframe的方法,以及平时的一些使用. 知识点汇总有些事情平时不…

页面嵌入dom与被嵌入iframe的攻防

1.情景一:自己的页面被引入(嵌入)至别人的页面iframe中 if(window.self != window.top){ //url是自己页面的url window.top.location.href = url } 通过顶层框架的判断,得知自己所在的框架是否是顶层框架.来判断自己页面所在的情况. 知识点:不同域中的iframe不能相互访问. 比如我们的页面在别人的页面iframe中,我们的页面跟别人的页面就在不同的域中. 这时候我们通过window.top.location是无法访问loc…

iframe用法