script type="text/html",<script type="text/html" id="">js模版引擎内运行js脚本

用户提问

需求是这样的，当浏览器解析生成html部分的时候运行一个脚本程序动态控制其样式，

比如

代码1:

{{data.title}}

{{data.content}}

代码1在浏览器内被解析后：

Title 部分

正问部分

我是想在《

正问部分

》部分内容生成的时候运行一些脚本，动态控制其内文字数或这本分的大小随窗口大小而自适应等，

如在：

常规的方法是下面这个方法就可以的。但是在上面的代码1中不能嵌套下面的代码2，jq会报错，(好像也不合理)，

代码2:

jQuery(document).ready(function() {

jQuery('.media-frame-content').css("height",winheight);

});

问题是 代码1 是整个网页的一小部分被使用的时候才被解析，代码2放在外部js是没有作用的，放里头会出错(或是放的方法有误)，放里也是达不到目的，如

{{data.title}}

{{data.content}}

jQuery(document).ready(function() {

jQuery('.media-frame-content').css("height",winheight);

alert ("它先出来，再出来html模块");

});

#>

或是怎么才能在网页上html代码变成(解析完生成的最终html部分)：

Title 部分

正问部分

jQuery(document).ready(function() {

jQuery('.media-frame-content').css("height",winheight);

});

以上代码非实际代码，实际代码较多。

实在找不到路了，各位大神帮忙出出主意或多多赐教一番，不胜感激。

财富只有这么多了～～～

推荐答案

你描述的比较乱，不过我大概能理解你的意思。

因为没有具体的代码，所以也只能说说思路。

按我的理解，重新描述你现在的问题是：

通过模板渲染，或者 ajax 异步载入的 html 内容，会通过 innerHTML 或者一定的 DOM 操作，插入到文档中。你希望在这段文档碎片插入后，执行一些脚本。但是遇到的问题是：插入的脚本无法执行。

那么我的建议的解决方法有以下几种：

1、第一种方法，通过设置定时检查，来判断内容是否完成载入。

在 {{data.content}} 中放一个 “标识”。例如：

。。。。。

然后在整个页面的脚本中，加一个定时检查器 (下面代码放在整个页面的 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 = /([\s\S]+)/i; // 正则

var sc;

if (reg.test(data)) {

sc = data.match(reg)[1]; // 提取脚本

data = data.replace(reg, ''); // 移除脚本

}

container.innerHTML = data; // 将 html 内容输出到当前页面

if (sc) eval(sc); // 如果有脚本，则执行脚本

});

以上，请采纳，请给分。

辅助答案

用户：隔壁家老陈

2017年12月07日

$(window).on('resize',function(){

$('.media-frame-content').css("height",winheight);

}).trigger('resize');

template 转 html 执行 append 或 html 之后,立即调用 以上js

不更简单和节省资源吗？

用户：这位大先生

2017年12月21日

我觉得定时器和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}} 这种写法是什么意思？