jquery mobile在chrome上显示居中的灰色圆圈答案

【问题标题】：jquery mobile displays centered grey circle on chromejquery mobile在chrome上显示居中的灰色圆圈
【发布时间】：2015-10-13 04:07:07
【问题描述】：

我正在使用 phonegap 应用程序，我想用 jquery mobile 构建它，我的代码在 IE 和 Firefox 中完美运行，但在 chrome 浏览器上显示一个居中的灰色圆圈。我已经搜索了很多，但还没有找到答案。

这是我的代码：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="jquery.js"></script>
<script src="jquerymobile.js"></script>
<link rel="stylesheet" href="jquerymobile.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">       </script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
<script src="jquerybootpag.js"></script>
</head>
<body>

<div data-role="page">
<div data-role="header">
<a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left ">Home</a>  
<h1> | Smart FCPS | </h1>       
<a href="#myPopup" data-rel="popup" class="ui-btn ui-corner-all ui-shadow ui-icon-search ui-btn-icon-left" data-transition="pop"  data-position-to="window">Search</a>
</div>
<div data-role="navbar">
  <ul>
    <li><a data-icon="home" name="Sports" onclick=LoadMCQs(this)>Sports</a>  </li>
    <li><a data-icon="arrow-r" name="Movies" onclick=LoadMCQs(this)>Movies</a></li>
    <li><a data-icon="arrow-l"  name="Music" onclick=LoadMCQs(this)>Music</a></li>      
  </ul>
</div>
<div id="content" data-role="main" class="ui-content">    
<p>Welcome</p>
<p>Please Select.</p>

<div data-role="popup" id="myPopup" data-overlay-theme="b">
<a id="close" href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>       
  <div data-role="header">
    <h1>Search</h1>
  </div>

  <div data-role="main" class="ui-content">
    <input id=search type=search placeholder="search here" />
        <select id="catagory">
        <option value=Sports>Sports</option>
        <option value=Movies>Movies</option>
        <option value=Music>Music</option>
        </select>
      <a class="ui-btn ui-corner-all ui-shadow ui-icon-search ui-btn-icon-left " onclick=Search()>Search</a>
  </div>

</div>

</div>

<div data-role="footer">
<div id="page-selection" style="text-align:center; display:none;">      
</div>
</div>
</body>
</html>

【问题讨论】：

您能否分享 jquerybootpag.js 文件代码...我已经尝试使用您的代码它给我“LoadMCQs”未定义错误
LoadMCQs 是我自己的方法，对不起，我忘了在这里添加，但除了中心的灰色圆圈外，我什么都没有显示.. 你看到 chrome 中的前端吗？

标签： jquery cordova google-chrome jquery-mobile

【解决方案1】：

您是否直接从file:/// URL 显示您的页面？如果是这样，您可以在 Chrome 控制台中看到此安全警告：

Uncaught SecurityError: Failed to execute 'replaceState' on 'History': A history state object with URL 'file:///C:/temp/temp.html' cannot be created in a document with origin 'null'.

这与 Chrome 中最近的安全政策变化有关。要解决您的问题并在本地调试您的网站，您必须使用本地 HTTP Web 服务器。我的建议（在 Windows 下）：

使用 Python：打开命令提示符，cd 到您的文件夹并调用 python.exe -m SimpleHTTPServer 8080
Mongoose web server（尽管我认为 JQM 不能很好地工作）

编辑：看来你也可以解决这个问题adding a script（经过测试，为我工作）

【讨论】：