Fatal编程技术网
  • jquery/
  • 使用jQuery Mobile转换页面后如何执行JavaScript

使用jQuery Mobile转换页面后如何执行JavaScript

jquery jquery-mobile

使用jQuery Mobile转换页面后如何执行JavaScript,jquery,jquery-mobile,Jquery,Jquery Mobile,当一个页面转换到另一个页面时（并使用location.hashstuff），第二个页面不会加载任何JavaScript。加载页面时如何执行JavaScript（如果此页面“来自”其父页面的转换） 我有page1.html，还有一个指向page2.html的链接。此page2.html加载时带有过渡（默认情况下为幻灯片效果） 在page2.html中，不执行JavaScript。我试着用一种简单的方法 <script type="text/javascript"> alert("x")

当一个页面转换到另一个页面时（并使用
location.hash
stuff），第二个页面不会加载任何JavaScript。加载页面时如何执行JavaScript（如果此页面“来自”其父页面的转换）

我有page1.html，还有一个指向page2.html的链接。此page2.html加载时带有过渡（默认情况下为幻灯片效果）

在page2.html中，不执行JavaScript。我试着用一种简单的方法

<script type="text/javascript">
alert("x");
</script>


警报（“x”）；
但是不起作用。我尝试了很多
文档。ready
，
bind
，
live
，
oncreate
，
pagecreate
，等等。

您可以使用回调函数。在动画之后调用一个函数

在jQuery中：

$('#yourElement').animate({
    opacity: 0.25,
  }, 5000, function() {
    // Animation complete. add your callback logic here
});
如果使用Webkit转换：

$('#yourElement').addEventListener(
 'webkitTransitionEnd',
 function( event ) {
     // Animation complete. add your callback logic here
 }, false );
如果使用jQuery Mobile，则可以使用“pageshow”和“pagehide”事件侦听器：

此外，这一问题似乎在这里得到强调：

我成功地将所有JavaScript定位/包含在第一个页面上，对于每个链接页面，我都将代码包装在一个块中，如下所示：

$('#page2').live('pageshow',function(){

   //page twos JS                  
});

$('#page3').live('pageshow',function(){

   //page threes JS                  
});

<script type="text/javascript">
window.onload = function()
{
  console.log("window.onload: " +timeStamp());
  document.addEventListener("deviceready", onDeviceReady, false);

  $(document).on("pagecontainerbeforeshow", function( event, ui ) {
    if(typeof ui.toPage == "undefined" || typeof ui.toPage[0] == "undefined")
    {
      // during startup and app init there are a lot of these
      console.log("toPage[0] is undefined");
      return;
    }
    else
    {
      console.log("pagecontainerbeforeshow: " +ui.toPage[0].id);
    }
    pageEngine(event, ui);
  });  
}
</script>
当然，每个文档必须包含具有相应id的常用容器：

<section id="page2" data-role="page" data-theme="a"> ...

。。。
基本上在Jquerymobile中，当您进行页面转换时，仅显示其中的内容

    <div data-role="page">
    ...
    </div> 


...
有效地更改了所有脚本以及包含在其中的所有内容

    <head></head>
没有加载标记

因此，要解决这个问题，您需要在页面中包含脚本，如下所示

    <div data-role="page">
    ...
    <script type="text/javascript" src="yourScript.js"></script>
    </div>


...
谢谢，
有两种方法可以做到这一点 1.）在第一页添加所有脚本文件 2.）无论何时调用新页面，都使用link rel=“external”（例如
） 执行此操作时，下一页将执行其标题部分

但前1在大多数情况下是最好的

与
rel=“external”
有关的问题是，这意味着任何JQuery移动页面转换都无法工作。

我也遇到过类似的问题，如果您使用标记进行转换，请尝试向其添加
target=“\u self”
属性。这对我来说很有效。

正确的方法是：

function pageEngine(event, ui)
{
  // this is the page change engine.  It makes sure the appropriate
  // javascript files get loaded and the page init function gets called
  console.log("pageEngine: " +ui.toPage[0].id);

  // ui.toPage[0].id = the id in the data-role="page" 
  // <div id="debugPage" data-role="page" data-theme="b">
  switch(ui.toPage[0].id)
  {            
    case "homePage":
          homePageReady();    // reinit the home page - i.e. update unreads
       break;

    case "mapPage":
      $.getScript("js/map.js", function( data, textStatus, jqxhr ) {
          onMapPageReady();
      }).fail(function(xhr, textStatus, error) { jsLoadError(xhr, textStatus, error, "map.js"); });
      break;

    case "thirdPage":
      // do nothing as this page requires no .js
      break;

    default:
      console.log("page not found: " +ui.toPage[0].id);
  }
}

功能页面引擎（事件，用户界面）
{
//这是页面更改引擎。它确保
//加载javascript文件并调用page init函数
console.log（“页面引擎：+ui.toPage[0].id”）；
//ui.toPage[0].id=数据角色=“页面”中的id
// 
开关（ui.toPage[0].id）
{            
案例“主页”：
homePageReady（）；//重新初始化主页-即更新未读内容
打破
案例“mapPage”：
$.getScript（“js/map.js”，函数（数据、文本状态、jqxhr）{
onmappagerady（）；
}).fail（函数（xhr，textStatus，error）{jsLoadError（xhr，textStatus，error，“map.js”）；}）；
打破
案例“第三页”：
//不要执行任何操作，因为此页面不需要.js
打破
违约：
console.log（“未找到页面：+ui.toPage[0].id”）；
}
}
pageEngine（）由一个绑定到window.onload的小函数调用，如下所示：

$('#page2').live('pageshow',function(){

   //page twos JS                  
});

$('#page3').live('pageshow',function(){

   //page threes JS                  
});

<script type="text/javascript">
window.onload = function()
{
  console.log("window.onload: " +timeStamp());
  document.addEventListener("deviceready", onDeviceReady, false);

  $(document).on("pagecontainerbeforeshow", function( event, ui ) {
    if(typeof ui.toPage == "undefined" || typeof ui.toPage[0] == "undefined")
    {
      // during startup and app init there are a lot of these
      console.log("toPage[0] is undefined");
      return;
    }
    else
    {
      console.log("pagecontainerbeforeshow: " +ui.toPage[0].id);
    }
    pageEngine(event, ui);
  });  
}
</script>


window.onload=函数（）
{
log（“window.onload:+timeStamp（））；
文件。添加的监听器（“deviceready”，OnDeviceraddy，false）；
$（文档）.on（“pagecontainerbeforeshow”，函数（事件，ui）{
if（typeof ui.toPage==“未定义”| | typeof ui.toPage[0]==“未定义”）
{
//在启动和应用初始化期间，有很多这样的问题
console.log（“toPage[0]未定义”）；
返回；
}
其他的
{
log（“pagecontainerbeforeshow:+ui.toPage[0].id”）；
}
页面引擎（事件、用户界面）；
});  
}
上面的内容是在jquery加载之后，但在jquery.mobile加载之前设置的。

您能稍微说明一下您要做什么吗？如果这是一个HTML问题，您是手工编写HTML还是动态生成HTML。如果是后者，你将使用什么语言？我用更多的信息编辑了问题对不起，但我不处理动画。jQueryMobile中页面之间的转换是硬编码的。我更新了我的答案，并添加了一个指向提到pageshow事件的jQM文档的链接。看起来这正是你需要的。谢谢爸爸，但它不起作用。。。在initializePage（）事件之前调用事件。。。我检查了原始源代码。。。我将写信给开发人员，在“real last”事件中添加一个“oncomplete”选项。。。无论如何，谢谢你。嗯…这里看起来有一个类似的问题：不确定它是否适用于你，但可能会有帮助。嗯，这只是列表视图。。。但是塔克斯！通过script标签加载一个.js文件会起作用，但这需要为每个调用脚本的页面提供一个单独的文件。这不仅在每个页面只需要几行初始化代码的常见情况下非常笨拙，而且通常会遇到缓存问题，即页面脚本仅在第一次访问页面时执行。