需求是这样的,当浏览器解析生成html部分的时候运行一个脚本程序动态控制其样式,
比如
代码1:
<script type="text/html" id="tmpl-edit-attachment-frame">
<div class="media-frame-title">{{data.title}}</div>
<div class="media-frame-content">{{data.content}}</div>
</script>
代码1在浏览器内被解析后:
<div class="media-frame-title">Title 部分</div>
<div class="media-frame-content">正问部分</div>
我是想在《 <div class="media-frame-content">正问部分</div> 》部分内容生成的时候运行一些脚本,动态控制其内文字数或这本分的大小随窗口大小而自适应等,
如在:
常规的方法是下面这个方法就可以的。但是在上面的代码1中不能嵌套下面的代码2,jq会报错,(好像也不合理),
代码2:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.media-frame-content').css("height",winheight);
});
</script>
问题是 代码1 是整个网页的一小部分被使用的时候才被解析,代码2放在外部js是没有作用的,放里头会出错(或是放的方法有误),放<# js运行部分#>里也是达不到目的,如
<script type="text/html" id="tmpl-edit-attachment-frame">
<div class="media-frame-title">{{data.title}}</div>
<div class="media-frame-content">{{data.content}}</div>
<#
jQuery(document).ready(function() {
jQuery('.media-frame-content').css("height",winheight);
alert ("它先出来,再出来html模块");
});
#>
</script>
或是怎么才能在网页上html代码变成(解析完生成的最终html部分):
<div class="media-frame-title">Title 部分</div>
<div class="media-frame-content">正问部分</div>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.media-frame-content').css("height",winheight);
});
</script>
以上代码非实际代码,实际代码较多。
实在找不到路了,各位大神帮忙出出主意或多多赐教一番,不胜感激。
财富只有这么多了~~~
你描述的比较乱,不过我大概能理解你的意思。
因为没有具体的代码,所以也只能说说思路。
按我的理解,重新描述你现在的问题是:
通过模板渲染,或者 ajax 异步载入的 html 内容,会通过 innerHTML 或者一定的 DOM 操作,插入到文档中。你希望在这段文档碎片插入后,执行一些脚本。但是遇到的问题是:插入的脚本无法执行。
那么我的建议的解决方法有以下几种:
1、第一种方法,通过设置定时检查,来判断内容是否完成载入。
在 {{data.content}} 中放一个 “标识”。例如:
<!-- 你正常的 content 内容 -->
<p>。。。。。</p>
<!-- 特殊的标识 -->
<span id="a_special_id"></span>
然后在整个页面的脚本中,加一个定时检查器 (下面代码放在整个页面的 head 里):
var flag = false; // 一个状态标记,记录需要进行的脚本是否执行过
// 用来检查的函数
function check(){
// 如果脚本已执行过,则退出,避免重复执行。
if (flag) return;
// 尝试获取 {{data.content}} 中的 “标识”
var obj = document.getElementById('a_special_id');
// 如果获取成功,说明代码已经完成载入
if (obj) {
// 这里放上你想要进行的操作,例如你问题中的:
jQuery(document).ready(function() {
jQuery('.media-frame-content').css("height",winheight);
});
// 设置状态标记,避免脚本重复执行
flag = true;
} else {
// 如果代码没有完成载入
// 设置定时器,过一段时间再次检查
setTimeout(check, 100);
}
}
// 开始检查
check();
2、 第二种方法,是针对为什么插入的脚本不能执行来解决的段尘。
一般来握举禅说,通过 innerHTML 或者 DOM 方法插入的 script 脚本都不能正常执行。
那么应该在你的模板解析函数中,进行一定的判断处理。
例如 ajax 获得服务器返回的数据后,检查有无 script 块,如果有,则提取其内容,并通过 eval 来执行。
示例代码:
// 伪代码,假设下面是一个答败通过 ajax 获取 get.php 页面得到返回数据的模式
$.ajax('get.php', function(data){
var reg = /<script>([\s\S]+)<\/script>/i; // 正则
var sc;
if (reg.test(data)) {
sc = data.match(reg)[1]; // 提取脚本
data = data.replace(reg, ''); // 移除脚本
}
container.innerHTML = data; // 将 html 内容输出到当前页面
if (sc) eval(sc); // 如果有脚本,则执行脚本
});
以上,请采纳,请给分。
我觉得定时器和eval的方式都是很不错的,可以都试试!
对了,{{data.title}}这是什么写法早芦?这不像是用json获取到属性值呀,也不像是jsp中的el表达式呀,jsp中的el表达式搏悔应该是${requestScope.title}吧!{{data.title}}这到底是什么写法?
//json数据
var data = {"title":"测试标题", "content":"测试内容", "description":"测试描述"};
//就算是获取json中的数据,也是如下方式吧
var title = data.title;
var content = data.content;
//以下这2行代码是什么陆银带意思?没见过这种写法?
// {{data.title}} 这种写法是什么意思?
// {{data.content}} 这种写法是什么意思?
$(window).on('resize',function(){
庆袭$('誉渗兄.media-frame-content').css("height",winheight);
}).trigger('resize'喊乎);
template 转 html 执行 append 或 html 之后,立即调用 以上js
不更简单和节省资源吗?