如何将外部html页面(Html标签和脚本函数)加载到当前页面(DOM)

时间:2012-04-23 16:42:46

标签: jquery

test1.html

<html>
<head>
<script src="jquery-1.7.2.js">
</script>
<script>

function loadfn(){

$.get('test.html',function(data){

alert($(data).text());
//$('body div#returnData').html(data);
$.each(data, function(i, node) { 
    alert(i);
   if (node.tagName == "SCRIPT") {
       eval(node.innerHTML); 

   } else {
       $(node).appendTo($('#returnData')); 
   }

});

});
test1();
test2();
}
</script>
</head>
<body>
<div id="returnData" >
</div>
<input type="button" value="Click" onclick=loadfn()>
</body>
</html>

test.html:

<html>
<head>
<script src="/jquery-ui-timepicker-addon.js">
</script>
</head>
<script>
function test1(){
alert('test1 function');
}
</script>
<script>
function test2(){
alert('test2 function');
}
</script>
<body>
<div id="testdiv">
Text field : <input type="text" value="Test Value"/>
</div>
</body>
</html>

实际上我要求我必须将test.html页面加载到test1.html中,然后运行test.html页面中的脚本函数。

上面的代码片段不足以满足要求。请在代码段中告诉我我的错误。

1 个答案:

答案 0 :(得分:0)

在呈现内容时,函数最快可用...问题是ajax调用是异步的,因此在示例中调用时,test1和test2不存在

未经测试但请尝试:

function loadfn(){
  $.get('test.html',function(data){
    $('#returnData').html(data);
    test1();
    test2();
  });
}

编辑:在test.html html中,不需要headbody标记,将脚本标记与文件放在内容中,因为您正在加载子部分html而不是一个全新的页面