javascript - 我怎样才能让 document.write 和 ajax 玩得更好?

标签 javascript ajax jquery-mobile

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

这是我的问题:我正在使用 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>

最佳答案

您可以简单地使用 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>

关于javascript - 我怎样才能让 document.write 和 ajax 玩得更好?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18475413/

相关文章:

html - 额外的输入框 phonegap jquerymobile

javascript - Phonegap控制键盘的go按钮 Action

javascript - 为什么结果是NaN?

javascript - react : initial render fires before state is set (via ajax)

javascript - 一键单击后如何禁用图标单击?

jquery - Phonegap和jQuery Mobile,如何更改内容的html而不是页面?

javascript - 具有自定义YouTube控件的jQuery Mobile弹出窗口

javascript - MongoDB Stitch 引发非用户错误

javascript - 区分 JavaScript 事件

javascript - 将 ACE 编辑器嵌入选项卡