Document.write创建的脚本不起作用

问题描述 投票:0回答:1

我有一个完成的JQuery用于通过鼠标操作移动360°对象(图片)。

代码正在运行:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery j360 Plugin Demo</title>
<script src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/j360.js" ></script>
</head>
<body>
<div class="jquery-script-clear"></div>
<h1 style="margin-top: 150px;">jQuery j360 Plugin Demo</h1>
<script type="text/javascript">
            jQuery(document).ready(function() {
                jQuery('#product').j360();
            });
</script>
<center>
<div id="product" style="width: 1920px; height: 1080px; overflow: hidden;"> 
<img src="v/1.png" /> 
<img src="v/2.png" /> 
<img src="v/3.png" /> 
<img src="v/4.png" /> 
<img src="v/5.png" /> 
</div>
</center>
</body>
</html>

所需的图片是从服务器按需接收的,因此我必须在收到图片后按需创建此代码。因此我使用document.write命令 - 我知道它们不是最佳实践,但通常它可以工作......无论如何这是我使用的代码 - 基本相同(即使我在调试时也无法找到差别)创建HTML到“原始”HTML)

所以基本上它是这样的:

<button id="click1" onclick="myFunction()">click me</button>

<script>
function myFunction() {
document.writeln('<html>');
document.writeln('<head>');
document.writeln('<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">');
document.writeln('<title>jQuery j360 Plugin Demo</title>');
document.write('<scr');
document.write('ipt src="js/jquery-1.4.4.min.js"></scr');
document.write('ipt>');
document.write('<scr');
document.write('ipt type="text/javascr');
document.write('ipt" src="js/j360.js" ></scr');
document.writeln('ipt>');
document.writeln('</head>');
document.writeln('<body>');
document.writeln('<div class="jquery-script-clear"></div>');
document.write('<scr');
document.writeln('ipt type="text/javascript">');
document.write('            jQuery(document).ready(func');
document.writeln('tion() {');
document.write("                jQuery('");
document.write('#');
document.writeln("product').j360();");
document.writeln('            });');
document.write('</scr');
document.writeln('ipt>');
document.writeln('<center>');
document.writeln('<div id="product" style="width: 960px; height: 540px; overflow: hidden;">'); 
document.write('<img src="images/01.jpg" />');
document.write('<img src="images/02.jpg" />');
document.write('<img src="images/03.jpg" />');
document.writeln('</div>');
document.writeln('</center>');
document.writeln('</body>');
document.writeln('</html>');
}
</script>

创建的HTML显示图片,但jQuery插件不起作用。 JS是一样的。

谢谢您帮忙!

javascript jquery html dom document.write
1个回答
0
投票

document.write会覆盖您拥有的任何代码。

例:

function overwrite() {
  document.write("Oops, I've overwritten the code!");
}
<!doctype html>
<html>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <button onclick="overwrite()">Click me!</button>
</body>

</html>
© www.soinside.com 2019 - 2024. All rights reserved.