mobilebone
Version:
Bone main for mobile web APP with a sigle page mode by using HTML5 history API router.
71 lines (67 loc) • 3.25 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<title>Mobilebone.js API文档-Mobilebone.evalScript</title>
<link rel="stylesheet" href="../../src/mobilebone.css">
<link rel="stylesheet" href="../assets/docs.css">
</head>
<body>
<header id="header"></header>
<aside id="aside"></aside>
<div class="page out">
<div class="content">
<h2>Mobilebone.evalScript</h2>
<p>是否执行Ajax请求的HTML字符串中的内联script脚本。此为全局设置，影响整个页面。默认为<code>false</code>.</p>
<h3>值类型</h3>
<p>布尔值。设置为<code>true</code>或<code>false</code>.</p>
<h3>使用</h3>
<pre>Mobilebone.evalScript = true;</pre>
<h3>效果</h3>
<p>Ajax请求的HTML字符串中内联的script脚本会执行。</p>
<h3>其他说明</h3>
<ol>
<li>只会执行内联JS脚本，<code>src</code>外链JS忽略。如下面会执行：
<pre><script>console.log("script excuted!");</script></pre>
<p>但是下面这个1.js会忽略：</p>
<pre><script src="1.js"></script></pre>
<p>如果你需要外链JS执行，可以使用内联JS做处理，例如：</p>
<pre>var script = document.createElement("script");
script.src = "a.js";
document.body.appendChild(script);</pre>
</li>
<li><time>(add on 2015-05-04)</time> 关于脚本执行的时机。内联JavaScript在页面即将载入的一瞬间就会进行。注意，此时可能存在两个结构和ID均一致的页面，例如，从分页1页面切换到分页2页面，此时，例如，给某元素绑定事件，例如：
<pre>document.getElementById("test").addEventListener("click", function() {
console.log("clicked!");
}); </pre>
<p>则，绑定的事件可能在之前一个元素上。然后造成新页面元素没事件，之前页面元素重复绑定。</p>
<p>避免此问题方法很多（测试页面<code>/test/ajax-html/index.html</code>均有示意）：</p>
<ol>
<li>加一个延迟，例如350毫秒。</li>
<li>使用Mobilebone内置回调方法，例如<code>animationend</code>, 或者<code>onpagefirstinto</code>的参数限制（如下）：
<pre>var fun_firstinto = function(pagein) {
pagein.querySelector("#test").addEventListener("click", function() {
console.log("clicked!");
});
}</pre>
<p>这样，事件就准确绑定在对应页面元素上了！</p>
</li>
<li>
或者使用动态id，如：<pre>id="test<?php echo $_GET['id']; ?>
document.getElementById("test<?php echo $_GET['id']; ?>")</pre>
</li>
</ol>
</li>
</ol>
</div>
</div>
<script src="../../src/mobilebone.js"></script>
<script>
Mobilebone.evalScript = false;
window.navKey = "evalScript";
</script>
<script src="nav.js"></script>
<script src="../assets/docs.js"></script>
</body>
</html>