我怎样才能让 document.write 和 ajax 玩得更好？

Question

我的编程技能充其量只是初级，所以如果我在讨论这些事情时听起来有点笨拙，请原谅我。我正在学习，但速度跟黑猩猩差不多。

这是我的问题：我正在使用 JQuery Mobile 通过 ajax 将某些表单内容作为对话框引入。此内容包含在文档本身中，在具有 data-role="page" 属性的第二个 div 中。

在第二页 div 中，我有一些 javascript 定义了一些变量，然后使用 document.write() 将它们写入文档。

但是，当我单击链接（导航中最右侧的链接）时，Firefox 并没有弹出一个漂亮的对话框，而是使用第一个 var 短暂加载一个新页面（不是动态的，而是作为静态页面），然后重定向回起始页面，在我的浏览器历史记录中留下“wyciwyg(00000)...”。进行上述重定向后，“所见即所得”会显示在浏览器的标题栏中。其他浏览器的阻塞方式略有不同（Safari 不重定向，Chrome 显示所有变量并且不重定向等），但 WYCIWYG-in-the-history 因素在这三个方面都在起作用。如果我删除了 document.write 命令，链接会按预期运行。

我已经在网上搜索了几个小时，但没有找到答案……类似的问题出现在 10 年前的 Mozilla 错误报告中，但其他问题不多。我发现的唯一解决方案是不要在通过 ajax 加载的内容中使用 document.write() 。不幸的是，我不知道替代方案是什么，或者我什至不知道如何开始执行它。 Javascript 代码源自 Google - 交通旅行计划器的前端代码。

下面是一些说明问题的精简代码。任何指导将不胜感激，记住整个黑猩猩的步伐。提前致谢。

<!DOCTYPE HTML>
<html>
<head>

<title>WYCIWYG</title> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile.structure-1.2.1.min.css" />
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css">
<script type='text/javascript' src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>

<script>

var startExample = "USC";
var endExample = "201 N Los Angeles St.";
var zip = "90012";

</script>
</head>

<body>
<div data-role="page">
<div data-role="navbar">

<ul data-mini="true">
<li><a href="#mNavDash" data-prefetch="true" id="dashLink">Service 1</a></li>
<li><a href="#mNavCE" data-prefetch="true" id="ceLink">Service 2</a></li>
<li><a href="#planTrip" id="planTripLink" data-rel="dialog">PLAN TRIP</a></li>
</ul>
</div>

</div>
<div data-role="page" id="planTrip">
Some document.write js:
<script>
document.write(startExample);
document.write(endExample);
document.write(zip);
</script>
</div>
</body>

Answer 1

您可以简单地在占位符元素上使用jQuery.html()：

来源：http://jsfiddle.net/fiddlegrimbo/suD6s/6/

演示：http://fiddle.jshell.net/fiddlegrimbo/suD6s/6/show/light/

<div data-role="page" id="planTrip">
Some document.write js:
<p id="start"></p>
<p id="end"></p>
<p id="zip"></p>
<script>
$("#planTrip #start").html(startExample);
$("#planTrip #end").html(endExample);
$("#planTrip #zip").html(zip);
</script>
</div>