我怎样才能使document.write和Ajax播放得更好? [英] How can I make document.write and ajax play nice?
问题描述
我的编程技能充其量是初级的，因此，如果我在讨论这些事情时听起来有些笨拙，请原谅我.我正在学习，但步伐缓慢.
My programming skills are rudimentary at best, so please forgive me if I sound a little clunky discussing these things. I'm learning, but at a chimp's pace.
这是我的问题:我正在使用JQuery Mobile通过ajax将某些表单内容作为对话框引入.此内容包含在文档本身的第二个div中，具有data-role ="page"属性.
Here's my issue: I'm using JQuery Mobile to bring in some form content as a dialog via ajax. This content is contained in the document itself, in second div with a data-role="page" attribute.
在第二页div中，我有一些定义了一些var的javascript，然后使用document.write()将它们写入文档.
Within that second page div, I have some javascript that defines a few vars, then writes them into the doc with document.write().
但是，当我单击链接(导航栏中最右边的链接)时，Firefox并没有弹出一个漂亮的对话框，而是短暂地用拳头var加载了一个新页面(不是动态而是静态页面)，然后重定向回到起始页面，在我的浏览器历史记录中留下"wyciwyg(00000)...".进行上述重定向后，"WYCIWYG"显示在浏览器的标题栏中.其他浏览器的阻塞方式略有不同(Safari不会重定向，Chrome不会显示所有变量，也不会重定向，等等)，但是这三种历史原因都是所见即所得".如果我删除document.write命令，则该链接的行为符合预期.
However, when I click the link (the far right link in the nav), instead of popping up a nice dialog, Firefox instead briefly loads a new page with the fist var (not dynamically but as a static page), then redirects back to the starting page, leaving a "wyciwyg(00000)..." in my browser history. Upon said redirect, "WYCIWYG" is displayed in the browser's title bar. Other browsers choke in slightly different ways (Safari doesn't redirect, Chrome displays all the vars and doesn't redirect, etc.), but the WYCIWYG-in-the-history factor is in play in all three. If I remove the document.write commands, the link behaves as expected.
我已经在网上搜寻了好几个小时，却没有找到答案...类似的问题出现在10年的Mozilla错误报告中，但没有太多其他问题.我发现的唯一解决方案是不在通过ajax加载的内容中使用document.write().不幸的是，我不知道替代方案是什么，甚至不知道如何开始执行. Javascript代码起源于Google-公交旅行计划者的前端代码.
I've scoured the web for hours and not found an answer... similar problems show up in 10 year old Mozilla bug reports, but not much else. The only resolution I've found is not to use document.write() in content loaded via ajax. Unfortunately, I have no clue what the alternative would be, or how I would even begin to execute it. The Javascript code originated at Google - front-end code for a transit trip planner.
下面是一些简化的代码来说明此问题.考虑到整个黑猩猩的步伐，任何指导都将不胜感激.预先感谢.
Below is some stripped-down code that illustrates the issue. Any guidance would be greatly appreciated, bearing in mind the whole chimp's-pace thing. Thanks in advance.
<!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():
You could simply use jQuery.html() on placeholder elements:
来源: 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>
这篇关于我怎样才能使document.write和Ajax播放得更好?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
