首先介绍下这个东西,说白了它跟jsonp很相似,
Like JavaScript includes, this works because CSS is not subject to the same-origin policy that affects XMLHttpRequest. CSSHttpRequest functions similarly to JSONP, and is limited to making GET requests. Unlike JSONP, untrusted third-party JavaScript cannot execute in the context of the calling page.
加粗的这句话是说 不像 jsonp在上下文中不信任的第三方js文件不能被执行,这个我没想明白...
/* CSSHttpRequest Copyright 2008 nb.io - http://nb.io/ Licensed under Apache License, Version 2.0 - http://www.apache.org/licenses/LICENSE-2.0.html */ (function(){ var chr = window.CSSHttpRequest = {}; chr.id = 0; chr.requests = {}; chr.MATCH_ORDINAL = /#c(\d+)/; chr.MATCH_URL = /url\("?data\:[^,]*,([^")]+)"?\)/; chr.get = function(url, callback) { var id = ++chr.id; var iframe = document.createElement( "iframe" ); iframe.style.position = "absolute"; iframe.style.left = iframe.style.top = "-1000px"; iframe.style.width = iframe.style.height = 0; document.documentElement.appendChild(iframe); var r = chr.requests[id] = { id: id, iframe: iframe, document: iframe.contentDocument || iframe.contentWindow.document, callback: callback }; r.document.open("text/html", false); r.document.write("<html><head>"); r.document.write("<link rel='stylesheet' type='text/css' media='print, csshttprequest' href='" + chr.escapeHTML(url) + "' />"); r.document.write("</head><body>"); r.document.write("<script type='text/javascript'>"); r.document.write("(function(){var w = window; var p = w.parent; p.CSSHttpRequest.sandbox(w); w.onload = function(){p.CSSHttpRequest.callback('" + id + "');};})();"); r.document.write("</script>"); r.document.write("</body></html>"); r.document.close(); }; chr.sandbox = function(w) { }; chr.callback = function(id) { var r = chr.requests[id]; var data = chr.parse(r); r.callback(data); window.setTimeout(function() { var r = chr.requests[id]; try { r.iframe.parentElement.removeChild(r.iframe); } catch(e) {}; delete chr.requests[id]; }, 0); }; chr.parse = function(r) { var data = []; // Safari, IE and same-domain Firefox try { var rules = r.document.styleSheets[0].cssRules || r.document.styleSheets[0].rules; for(var i = 0; i < rules.length; i++) { try { var r = rules.item ? rules.item(i) : rules[i]; var ord = r.selectorText.match(chr.MATCH_ORDINAL)[1]; var val = r.style.backgroundImage.match(chr.MATCH_URL)[1]; data[ord] = val; } catch(e) {} } } // catch same-domain exception catch(e) { r.document.getElementsByTagName("link")[0].setAttribute("media", "screen"); var x = r.document.createElement("div"); x.innerHTML = "foo"; r.document.body.appendChild(x); var ord = 0; try { while(1) { x.id = "c" + ord; var style = r.document.defaultView.getComputedStyle(x, null); var bg = style["background-image"] || style.backgroundImage || style.getPropertyValue("background-image"); var val = bg.match(chr.MATCH_URL)[1]; data[ord] = val; ord++; } } catch(e) {} } return decodeURIComponent(data.join("")); }; chr.escapeHTML = function(s) { return s.replace(/([<>&""''])/g, function(m, c) { switch(c) { case "<": return "<"; case ">": return ">"; case "&": return "&"; case '"': return """; case "'": return "'"; } return c; }); }; })();
上面是实现的源代码,这个需要后端的支持,比如PHP的后端
<?php /** * CSSHttpRequest PHP Encoder * * @author Tim Akinbo <obnika@timakinbo.com>, Randy Reddig <ydnar@nb.io> * @version 1.2 * @license http://www.apache.org/licenses/LICENSE-2.0.html Apache License 2.0 * @copyright Copyright (c) 2008, Tim Akinbo */ define('PREFIX', "data:,"); define('LENGTH', 2000 - strlen(PREFIX)); # Internet Explorer 2KB URI limit (http://support.microsoft.com/kb/208427) function encode($string) { $quoted = rawurlencode($string); $out = ""; for ($i = 0, $n = 0; $i < strlen($quoted); $i += LENGTH, $n++) { $out .= "#c" . $n . "{background:url(" . PREFIX . substr($quoted, $i, LENGTH) . ");}\n"; } return $out; } /* unit test */ if(STDIN) { $string = file_get_contents("php://stdin", "r"); echo encode($string); } ?>
官网:
http://nb.io/hacks/csshttprequest
感觉还行,其实就是使用 dom元素的 url: data 的机制来实现的, dom这种功能还可以实现一种 本地存储的实现,有兴趣的可以试试
相关推荐
- 典型题目:“本文使用了哪种记叙方法?有何作用?” - 变式题目:“某段落采用了何种记叙顺序?其作用是什么?” - “某段落采用了插叙手法,其作用为何?” #### 三、方法指导 1. **了解不同记叙顺序的特点**...
特别是议论文的写作,不仅要逻辑严密、观点明确,而且需要通过恰当的记叙来支撑论点,使之更加生动和有力。这正是【爱的奉献_学习议论中的记叙】课件所关注的核心问题。 首先,我们必须了解记叙文与议论文中记叙的...
【记叙文阅读理解指导】 在英语学习中,掌握记叙文的阅读理解是一项至关重要的技能。记叙文,以其叙述和描写的表达方式,主要讲述了人与事的故事,是文学作品中的常见文体。它通过具体的情节和形象来反映生活,传达...
- **辨别真伪**:核实事例的真实性,避免使用不准确或有争议的例子,以维护论证的可靠性。 4. **教学过程设计**: - **导入**:通过对比阅读,让学生感知议论文中的记叙与记叙文的区别。 - **知识讲解**:明确...
- 使用修饰语,突出主题或情节,引起读者兴趣。 6. **开头技巧**: - 悬念设置:激发读者的好奇心。 - 直接切入:开门见山,明确主题。 - 抒情引入:触动读者的情感。 - 引用名言:增加深度和内涵。 7. **...
标题中提到的“记叙文写作:典型事例写人(3)”表明,这份文件可能是一系列关于如何撰写记叙文的教程或指导资料中的第三部分,专注于使用典型事例来描写人物的写作技巧。记叙文是一种常见的文体,主要通过叙述事情来...
小学语文记叙文复习PPT课件涵盖了记叙文的基础知识和常见题型及应答方法,对于理解和创作记叙文具有重要的指导价值。以下是详细的知识点解析: 1. 记叙文要素:时间、地点、人物、事件的起因、经过、结果是构成记叙...
记叙文作为初中语文教学的重要内容之一,不仅是中考必考的文学体裁,而且是培养学生阅读理解能力和写作能力的重要工具。在这份名为《记叙文文体知识梳理》的文档中,详细地对记叙文进行了全方位的剖析,将有助于学习...
【记叙文】是文学表达的一种重要形式,它主要通过记叙、描写的方式,叙述人物、事件、景色或物品,以此来传达作者的情感、观点和人生思考。新闻、通讯、游记、童话以及一些叙述性的散文都属于记叙文范畴。在中学生...
2. **拟人**:标题中使用拟人手法可以赋予非生命体以生命力,增加文本的趣味性和感染力。 3. **夸张**:夸张手法可以使标题更加吸引人注意,增强表达力度。 4. **反问**:标题采用反问形式可以引起读者的好奇心,...
【小学六年级毕业复习记叙文阅读答题技巧】 在小学六年级毕业复习阶段,记叙文阅读是一项重要的技能。记叙文是以叙述、描写为主要表达方式,讲述人物、事件、场景的文章,通常包括时间、地点、人物、事件的起因、...
第二人称在叙述中较少使用,多用于直接抒情;第三人称则具有更广阔的叙述范围,能全面展示人物和事件。 记叙的顺序主要包括顺叙、倒叙和插叙。顺叙是按时间顺序叙述,易于理解;倒叙则是先揭示结果,再回溯过程,常...
在记叙文中,对“寂静”一词的两次使用,分别强调了环境的静谧和人物内心的平静,而对打马灯男人脸庞的细致描写,更是将他的沧桑与深情表现得淋漓尽致,深化了人物形象。 插叙的技巧能够丰富故事内容,加深读者对...
【初中记叙文阅读教学有效性策略研究报告】 记叙文阅读教学是初中语文教育的重要组成部分,旨在提升学生的理解和表达能力,培养良好的阅读习惯和方法。然而,当前的教学实践中,存在一些问题,如学生阅读能力和表达...
记叙文是小学语文学习中的重要部分,它以记叙、描写为主要表达方式,通常涉及人物、事件、时间、地点等要素,通过故事来传达作者的思想和情感。以下是针对记叙文阅读的一些关键知识点: 1. **阅读策略**: - **先...
在高中语文教学中,记叙文写作是一项基础且重要的技能。想要提升这一技能,就需要掌握一系列的写作技巧。PPT《记叙文写作技巧:提升高中记叙文水平》详细讲解了如何通过情感表达、人物塑造、情节构建和环境描绘等...
中考记叙文阅读指导(56张ppt).ppt )
【标题】: 高考语文中的记叙文写作要点解析 【描述】: 高考语文写作要求符合文体,尤其注重记叙文和议论文的写作能力。近年来,高考作文多采用“三自”原则,给予考生更多自由度,但同时也要求考生熟练掌握各类文体...
【记叙文线索及其作用详解】 记叙文的线索是文章结构的核心,它如同一条丝线,将文章的各个部分紧密相连,形成一个完整的故事框架。通过对线索的把握,读者可以更好地理解文章的内容,梳理文章的层次,以及领悟文章...
- **举例**:使用"for example"、"such as"等来插入实例,增强叙述的生动性,如"first, second…"用于列举细节。 - **总结归纳**:用"in a word"、"in short"等短语进行总结,如"personally, I believe…"发表个人...