为什么从page2加载到page1的HTML的JavaScript无法正常工作?

时间:2013-11-05 15:09:39

标签: javascript jquery html same-origin-policy

我试图将第2页的html加载到第一页但是它的JavaScript不起作用,这是相同的原始政策吗?如果是我如何绕过这个?

第1页:

    <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>page 1 test</title>
<script src="js/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#thisandthat').click(function() {
    $("#hide").toggle('fast');
    $("#cont").load('testpage2.html #res')
     $("#unhide").toggle('fast');
     console.log ()
});
});
</script>
</head>

<body>
<div id="">
<input id="thisandthat" name="test but" type="button" value="Button" />
<div id="hide" style="background-color:#050; width:100; height:100;">this and other things</div>
</div>
<div id="cont">
</div>
</body>
</html>

2页

    <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>page 1 test</title>
<script src="js/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#thisand').click(function() {
    $("#unhide").toggle('fast');
    alert ('im in')
});
});
</script>
</head>

<body>
<div id="res">
<input id="thisand" name="test but" type="button" value="Button" />
<div id="unhide" hidden="" style="background-color:#09F; width:100; height:100;">i     apppear</div>
</div>

</body>
</html>

正如您所看到的,第1页需要来自page2的javascript。请帮忙。

1 个答案:

答案 0 :(得分:1)

问题是您在$("#cont").load('testpage2.html #res')

中使用了ID选择器

jQuery只会加载第2页的那一部分,因此不会加载Javascript。如果你删除了id选择器,它将加载整个页面,包括Javascript。

$("#cont").load('testpage2.html')

或者,您可以将Javascript放在res div中,然后这应该有效。

在旁注中,您在代码中遗漏了各种行结尾的半冒号,这是不好的。