Skip to content

Commit 5cdf337

Browse files
zhangxinxuzhangxinxu
committed
Merge pull request #118 from zhangxinxu/develop
add Mobilebone.evalScript
2 parents 0ba1c19 + 2230083 commit 5cdf337

File tree

9 files changed

+92
-10
lines changed

9 files changed

+92
-10
lines changed

‎docs/Mobilebone.evalScript.html

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
6+
<title>Mobilebone.js API文档-Mobilebone.evalScript</title>
7+
<link rel="stylesheet" href="../src/mobilebone.css">
8+
<link rel="stylesheet" href="docs.css">
9+
</head>
10+
11+
<body>
12+
<aside></aside>
13+
<div class="page out">
14+
<div class="content">
15+
<h2>Mobilebone.evalScript</h2>
16+
<p>是否执行Ajax请求的HTML字符串中的内联script脚本。此为全局设置，影响整个页面。默认为<code>false</code>.</p>
17+
<h3>值类型</h3>
18+
<p>布尔值。设置为<code>true</code>或<code>false</code>.</p>
19+
<h3>使用</h3>
20+
<pre>Mobilebone.evalScript = true;</pre>
21+
<h3>效果</h3>
22+
<p>Ajax请求的HTML字符串中内联的script脚本会执行。</p>
23+
<h3>其他说明</h3>
24+
<ul>
25+
<li>只会执行内联JS脚本，<code>src</code>外链JS忽略。如下面会执行：
26+
<pre>&lt;script>console.log("script excuted!");&lt;/script></pre>
27+
<p>但是下面这个1.js会忽略：</p>
28+
<pre>&lt;script src="1.js">&lt;/script></pre>
29+
</li>
30+
</ul>
31+
</div>
32+
</div>
33+
34+
<script src="../src/mobilebone.js"></script>
35+
<script>
36+
Mobilebone.evalScript = false;
37+
window.navKey = "evalScript";
38+
</script>
39+
<script src="nav.js"></script>
40+
<script src="docs.js"></script>
41+
</body>
42+
</html>

‎docs/data-callbackKeys.html

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,13 @@ <h2>data-callbackKeys</h2>
2626
<p>每个回调的作用于使用场景可参见博文说明：<a href="http://www.zhangxinxu.com/wordpress/2014/10/mobilebone-js-mobile-web-app-core/" class="link">点击这里</a>。</p>
2727
<p>其中，<code>data-preventdefault</code>并非<code>page</code>元素专有，<code>a</code>元素，<code>form</code>元素也支持此回调，具体可<a href="data-preventDefault.html" class="link">点击这里</a>。</p>
2828
<h3>其他说明</h3>
29-
<p><code>data-ajaxKeys</code>也是类似的调调。</p>
29+
<p><code>data-ajaxKeys</code>也是类似的集合API。</p>
30+
<h3>补充说明(<time>2015-04-15</time>)</h3>
31+
<p>有很多人问过静态页面间传参的问题。由于是单页，因此，可以设置个全局对象，专门负责参数传递，但是，有些人就是不想走全局对象传参，怎么办？</p>
32+
<p>是这样的，如果你是点击<code>&lt;a&gt;</code>元素触发的过场，则所有的回调函数中的<code>options</code>这个参数（是个纯对象）中会有一个target属性，其值就是我们之前点击的<code>&lt;a&gt;</code>元素，于是，你就可以获得你想要的参数了。例如：</p>
33+
<pre>&lt;a href="load.html?id=111">页面111&lt;/a></pre>
34+
<p>111可能是你想传递的参数，然后，就可以通过下面一行脚本获得：</p>
35+
<pre>var id = options.target.href.replace(/\D/g, "");</pre>
3036
</div>
3137
</div>
3238

‎docs/docs.css

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,8 @@ aside a { display: block; padding: 5px 10px; color: #fff; position: relative; }
1111
.nav-a[href*=transition], .nav-a[href*=data-title], .nav-a[href*=otherAnonymousAPIs] { margin-top: 20px; }
1212
.nav-a[href*=autoInit], .nav-a[href*=getPage] { text-decoration: line-through; display: none; }
1313
.nav-a[href*=getCleanUrl], .nav-a[href*=getFunction] { opacity: .6; }
14-
.nav-a[href*=reload]:after { position: absolute; content: '更新'; font-size: 12px; transform: scale(0.8); color: pink; }
14+
.nav-a[href*=reload]:after, .nav-a[href*=evalScript]:after { position: absolute; content: '更新'; font-size: 12px; transform: scale(0.8); color: pink; }
15+
.nav-a[href*=evalScript]:after { content: 'NEW'; }
1516
.nav-a > .mask { display: inline; width: 26px; height: 26px; top: 0; right: 8px; background-color: transparent; -webkit-transform: scale(.8,.8); -ms-transform: scale(.75,.75); transform: scale(.75,.75); }
1617
.nav-a.active { background-color: rgba(0,0,0,.2); box-shadow: inset 0 -1px rgba(255,255,255, .1), inset 0 1px #000; }
1718

‎docs/nav.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
var key = window.navKey, html = '<nav>', active = '', matchs = false;
66

7-
["Mobilebone.support", "Mobilebone.VERSION", "Mobilebone.autoInit", "Mobilebone.captureLink", "Mobilebone.captureForm", "Mobilebone.rootTransition", "Mobilebone.mergeCallback", "Mobilebone.classAnimation", "Mobilebone.classPage", "Mobilebone.classMask", "Mobilebone.pushStateEnabled", "Mobilebone.transition()", "Mobilebone.getCleanUrl()", "Mobilebone.getPage()", "Mobilebone.createPage()", "Mobilebone.getFunction()", "Mobilebone.ajax()", "Mobilebone.submit()", "Mobilebone.isBack()", "Mobilebone.jsonHandle()", "Mobilebone.init()", "Mobilebone.handleTapEvent()", "otherAnonymousAPIs", "data-title", "data-root", "data-form", "data-params", "data-callbackKeys", "data-mask", "data-rel", "data-ajax", "data-reload", "data-ajaxKeys", "data-preventDefault", "data-container", "data-classPage"].forEach(function(innerhtml) {
7+
["Mobilebone.support", "Mobilebone.VERSION", "Mobilebone.autoInit", "Mobilebone.captureLink", "Mobilebone.captureForm", "Mobilebone.rootTransition", "Mobilebone.mergeCallback", "Mobilebone.classAnimation", "Mobilebone.classPage", "Mobilebone.classMask", "Mobilebone.pushStateEnabled", "Mobilebone.evalScript", "Mobilebone.transition()", "Mobilebone.getCleanUrl()", "Mobilebone.getPage()", "Mobilebone.createPage()", "Mobilebone.getFunction()", "Mobilebone.ajax()", "Mobilebone.submit()", "Mobilebone.isBack()", "Mobilebone.jsonHandle()", "Mobilebone.init()", "Mobilebone.handleTapEvent()", "otherAnonymousAPIs", "data-title", "data-root", "data-form", "data-params", "data-callbackKeys", "data-mask", "data-rel", "data-ajax", "data-reload", "data-ajaxKeys", "data-preventDefault", "data-container", "data-classPage"].forEach(function(innerhtml) {
88
if (matchs == true) {
99
active = '';
1010
} else if (key && (key == innerhtml || new RegExp(key).test(innerhtml))) {

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "mobilebone",
3-
"version": "2.4.5",
3+
"version": "2.5.0",
44
"description": "Bone main for mobile web APP with a sigle page mode.",
55
"main": "src/mobilebone.js",
66
"directories": {

‎src/mobilebone.js

Lines changed: 27 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
**/
77

88
(function(root, factory) {
9+
if (document.MBLOADED) { return; }
910
// Set up Mobilebone appropriately for the environment.
1011
if (typeof define === 'function' && (define.amd || define.cmd)) {
1112
define('mobilebone', function(exports) {
@@ -42,7 +43,7 @@
4243
*
4344
* @type string
4445
**/
45-
Mobilebone.VERSION = '2.4.5';
46+
Mobilebone.VERSION = '2.5.0';
4647

4748
/**
4849
* Whether catch attribute of href from element with tag 'a'
@@ -114,6 +115,14 @@
114115
* @type boolean
115116
**/
116117
Mobilebone.pushStateEnabled = true;
118+
/**
119+
* Whether excute JavaScript when ajax HTML loaded
120+
* If this value is true, the script will excute.
121+
*
122+
* @type boolean
123+
**/
124+
Mobilebone.evalScript = false;
125+
117126

118127
if (// When running inside a FF iframe, calling replaceState causes an error. So set 'pushStateEnabled = false'
119128
(window.navigator.userAgent.indexOf( "Firefox" ) >= 0 && window.top !== window)
@@ -562,6 +571,22 @@
562571
var create = document.createElement("div");
563572
if (typeof domHtml == "string") {
564573
create.innerHTML = domHtml;
574+
575+
if (Mobilebone.evalScript == true) {
576+
slice.call(create.getElementsByTagName("script")).forEach(function(originScript) {
577+
var scriptContent = originScript.innerHTML.trim(), type = originScript.getAttribute("type");
578+
if (scriptContent.trim() == "" || originScript.src) return;
579+
var head = document.getElementsByTagName("head")[0] || document.documentElement,
580+
script = document.createElement("script");
581+
if (type) script.type = type;
582+
script.appendChild(document.createTextNode(scriptContent));
583+
setTimeout(function() {
584+
head.insertBefore(script, head.firstChild);
585+
head.removeChild(script);
586+
}, 16);
587+
originScript = null;
588+
});
589+
}
565590
} else {
566591
create.appendChild(domHtml);
567592
}
@@ -884,8 +909,6 @@
884909

885910
var hash = location.hash.replace("#&", "#"), ele_in = null;
886911

887-
console.log(hash);
888-
889912
if (hash == "" || hash == "#") {
890913
this.transition(document.querySelector("." + this.classPage));
891914
} else if (isSimple.test(hash) == true && (ele_in = document.querySelector(hash)) && ele_in.classList.contains(this.classPage)) { // 'ele_in' must be a page element
@@ -1182,5 +1205,4 @@
11821205
document.MBLOADED = true;
11831206

11841207
return Mobilebone;
1185-
});
1186-
1208+
});

‎test/ajax-html/index.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,8 @@
6969
var page_root_first = function() {
7070
// console.log("root?");
7171
};
72+
73+
Mobilebone.evalScript = true;
7274
</script>
7375
</body>
7476
</html>

‎test/ajax-html/root-reload.php

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,16 @@
88
<div class="page out" data-callback="root_reload" data-onpagefirstinto="page_root_first">
99
<p>document.getElementById("idShow").innerHTML是：<strong id="idShow">&nbsp;</strong>，应该结果是<strong id="idShould"><?php echo $_GET['id']; ?></strong>.</p>
1010
<ul>
11-
<li><a href="#pageHome" data-rel="back">返回</a></li>
11+
<li><a href="#pageHome" id="scriptTest" data-rel="back">返回</a></li>
1212
</ul>
13+
<script>
14+
document.getElementById("scriptTest").style.backgroundColor = "#" + (Math.random() + "").slice(-6);
15+
console.log("script excuted!");
16+
</script>
17+
<script type="text/template">
18+
console.log("should not excute!");
19+
</script>
20+
<script src="../modular-load/1.js">console.log("should not excute when src script!");</script>
1321
</div>
1422
</body>
1523
</html>

‎test/modular-load/1.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,5 @@ define(function(require, exports, module) {
22
exports.init = function(page) {
33
page.innerHTML = '<p><input type="button" value="点击我1"></p>';
44
};
5+
console.log("1.js excuted!");
56
});

0 commit comments

Comments
 (0)