在ajax请求后重新初始化processing.js草图
reinitialize processing.js sketch after ajax request
我想重新点燃我链接到头部的样式和处理.js脚本,以便它们在通过ajax请求引入时正确显示。我看到在ajax请求这段代码需要的地方,但我不知道如何告诉代码简单地重新应用脚本。我见过有人使用getScript()来做到这一点,但据我所知,这会重新加载脚本,而不是简单地告诉它重复或重新启动。是否所有的脚本都需要自己的重新初始化?我找到了语法高亮。highlight()方法,但我还没有得到处理脚本加载。目前Processing.loadSketchFromSources($('#processing'), ['mysketch.pde']);
不工作。我正在使用所有库的当前版本。很惊讶我还没能找到答案,因为很多人似乎都有同样的问题。谢谢你的帮助!
索引页:
$(document).ready(function () {
// put all your jQuery here.
//Check if url hash value exists (for bookmark)
$.history.init(pageload);
//highlight the selected link
$('a[href=' + document.location.hash + ']').addClass('selected');
//Search for link with REL set to ajax
$('a[rel=ajax]').live("click",function(){
//grab the full url
var hash = this.href;
//remove the # value
hash = hash.replace(/^.*#/, '');
//for back button
$.history.load(hash);
//clear the selected class and add the class class to the selected link
$('a[rel=ajax]').removeClass('selected');
$(this).addClass('selected');
//hide the content and show the progress bar
//$('#content').hide();
$('#loading').show();
//run the ajax
getPage();
//cancel the anchor tag behaviour
return false;
});
});
function pageload(hash) {
//if hash value exists, run the ajax
if (hash) getPage();
}
function getPage() {
//generate the parameter for the php script
var data = 'page=' + encodeURIComponent(document.location.hash);
$.ajax({
url: "loader.php",
type: "GET",
data: data,
cache: false,
success: function (html) {
//hide the progress bar
$('#loading').hide();
//add the content retrieved from ajax and put it in the #content div
$('#content').html(html);
//display the body with fadeIn transition
$('#content').fadeIn('fast');
//reapply styles?
//apply syntax highlighting. this works
SyntaxHighlighter.highlight();
//relaod processing sketch, currently displays nothing
Processing.loadSketchFromSources($('#processing'), ['mysketch.pde']);
}
});
}
这是ajax加载的内容:
<!--ajax'd content-->
<??>
<h2>code</h2>
<pre class="brush: php">
$last_modified = filemtime("header.php");
echo("last modified: ");
echo(date("m.j.y h:ia", $last_modified));
</pre>
<script type="application/processing">
</script>
<canvas data-processing-sources="mysketch.pde" id="processing">
</canvas>
</div>
</body>
</html>
<??>
那么,让我们分析一下当您包含(外部或内部)Javascript代码时通常会发生什么:它将自动只执行在全局作用域中可用的代码。"好的"脚本只会在全局作用域中添加一个命令,然后在函数/方法的某个地方执行初始化代码。
你所需要做的就是查看外部Javascript文件并找出从全局作用域执行的内容。这个问题没有普遍的答案……一些脚本使用一个对象并调用它的init()方法…但这完全取决于开发者的想象力。
如果你有javascript需要触发,你必须添加到head元素:
var head = document.head || document.getElementsByTagName("head")[0];
var script = document.createElement("script");
script.innerHTML = "your AJAX-obtained js code";
head.appendChild(script);
同样的技巧适用于CSS。在头部添加一个元素,CSS声明为innerHTML。因此:请确保预处理AJAX响应并分离JavaScript和CSS元素,然后将它们添加到文档标题中。将响应设置为JSON对象可能更容易,如下所示:
{
html: "<html>string<goes>here</goes></html>",
scripts: ["url1","url2","url2",...],
style: ...
}
然后解析JSON的html(你使用作为innerHTML为一个新的document.createElement("div")或其他东西,然后追加任何需要追加),脚本(你变成元素的头部插入)和样式声明(你变成元素的头部插入)。
(在功能上,你的示例AJAX响应看起来像它里面有PHP代码。我不知道你在用它做什么,但这看起来像一个糟糕的响应)
以防有人偶然发现:
如果您已经加载了processing.js
,只需在AJAX成功/完成函数中调用Processing.reload()
。
也许您的页面上已经有一个带有id="processing"
的元素。在这种情况下,$("#processing")
将只返回第一个。如果是这种情况,请更改id或使用类。
另一个选项,我不推荐,是使用$("[id=processing]")
。这将返回带有id="processing"
的页面上的每个元素。但是,不要使用它。在您的页面中使用唯一的id,或者切换到使用类,以最适合您的方式。
- 使用javascript函数在页面初始化后加载jquery
- 未捕获错误:无法在初始化之前调用方法;
- 如何在剑道网格初始化后设置pageSizes
- React redux初始化功能,无论状态变化如何
- 为什么可以't Protractor在自动初始化的Angular网站上查找Angular
- 尝试初始化()Spine's控制器和故障
- Angular.js延迟控制器初始化
- 对插件初始化后动态加载的元素进行样式设置
- Angular JS控制器初始化错误
- 在XMLHttpRequest之后重新初始化jQuery
- ember-js组件初始化不同的函数
- Youtube JavaScript API不是't正在初始化
- 函数无法识别初始化的变量
- datepicker引导程序再次初始化
- jquery数据表在初始化时设置宽度
- 如何使用app和secret进行安全的解析初始化
- 从javascript中再次初始化c变量
- ng重复中的ng模型-初始化唯一作用域属性
- 重新初始化ajax加载的processing.js草图
- 在ajax请求后重新初始化processing.js草图