Jquery $(window).load 在从 iframe 内部引用的脚本中无法按预期工作

•浏览 1

Jquery $(window).load not working as expected when in script referenced from inside an iframe

我有一个带有 iframe 的页面。我正在尝试将动画加载到这个 iframe 中。每条内容都是一个 html 页面，其中包含对执行某种动画的 javascript/jquery 脚本的引用。例如：

content.html

<head>

<link rel="stylesheet" type="text/css" href="css/slide.css">

<script src="js/library/big_slide_img.js">

</head>

<body>

  <img class="big_slide_img" src="http://25.media.tumblr.com/0ab6f805c5a3591168e2fe2133552054/tumblr_mk52iuvbNI1s631nvo1_1280.jpg">

</body>
$(window).load(function()

{

  $("#iframe").contents().find('.big_slide_img').animate({left: '-=521'}, 800,function(){});

});
loadSlide = function(slide_no)

  {

    $.ajax(

    {

      url:"http://myurl.com",

      async: false,

      jsonpCallback: 'jsonCallback',

      contentType:"application/json",

      type:"GET",

      dataType:"jsonp",

      data: {"action":"loadall"},

      success: function(data)

      {

        $('#frame_title').html(data.title);

        $('#text').html(data.text);

        $('#iframe').contents().find('html').html(data.animation); 

      },

      error: function (event, jqXHR, ajaxSettings, thrownError)

      {

        alert('[event:' + event + '], [jqXHR:' + jqXHR + '], [ajaxSettings:' + ajaxSettings + '], [thrownError:' + thrownError + '])');

      }

    });

  };
$(window).load(function()

{

  $("#iframe").contents().find('.big_slide_img').delay(800).animate({left: '521'}, 800,function(){});

});
$('#iframe').contents().find('html').html(data.animation);
$('iframe').attr('src',data.animation_url);

big_slide_img.js

<head>

<link rel="stylesheet" type="text/css" href="css/slide.css">

<script src="js/library/big_slide_img.js">

</head>

<body>

  <img class="big_slide_img" src="http://25.media.tumblr.com/0ab6f805c5a3591168e2fe2133552054/tumblr_mk52iuvbNI1s631nvo1_1280.jpg">

</body>
$(window).load(function()

{

  $("#iframe").contents().find('.big_slide_img').animate({left: '-=521'}, 800,function(){});

});
loadSlide = function(slide_no)

  {

    $.ajax(

    {

      url:"http://myurl.com",

      async: false,

      jsonpCallback: 'jsonCallback',

      contentType:"application/json",

      type:"GET",

      dataType:"jsonp",

      data: {"action":"loadall"},

      success: function(data)

      {

        $('#frame_title').html(data.title);

        $('#text').html(data.text);

        $('#iframe').contents().find('html').html(data.animation); 

      },

      error: function (event, jqXHR, ajaxSettings, thrownError)

      {

        alert('[event:' + event + '], [jqXHR:' + jqXHR + '], [ajaxSettings:' + ajaxSettings + '], [thrownError:' + thrownError + '])');

      }

    });

  };
$(window).load(function()

{

  $("#iframe").contents().find('.big_slide_img').delay(800).animate({left: '521'}, 800,function(){});

});
$('#iframe').contents().find('html').html(data.animation);
$('iframe').attr('src',data.animation_url);

如何加载

<head>

<link rel="stylesheet" type="text/css" href="css/slide.css">

<script src="js/library/big_slide_img.js">

</head>

<body>

  <img class="big_slide_img" src="http://25.media.tumblr.com/0ab6f805c5a3591168e2fe2133552054/tumblr_mk52iuvbNI1s631nvo1_1280.jpg">

</body>
$(window).load(function()

{

  $("#iframe").contents().find('.big_slide_img').animate({left: '-=521'}, 800,function(){});

});
loadSlide = function(slide_no)

  {

    $.ajax(

    {

      url:"http://myurl.com",

      async: false,

      jsonpCallback: 'jsonCallback',

      contentType:"application/json",

      type:"GET",

      dataType:"jsonp",

      data: {"action":"loadall"},

      success: function(data)

      {

        $('#frame_title').html(data.title);

        $('#text').html(data.text);

        $('#iframe').contents().find('html').html(data.animation); 

      },

      error: function (event, jqXHR, ajaxSettings, thrownError)

      {

        alert('[event:' + event + '], [jqXHR:' + jqXHR + '], [ajaxSettings:' + ajaxSettings + '], [thrownError:' + thrownError + '])');

      }

    });

  };
$(window).load(function()

{

  $("#iframe").contents().find('.big_slide_img').delay(800).animate({left: '521'}, 800,function(){});

});
$('#iframe').contents().find('html').html(data.animation);
$('iframe').attr('src',data.animation_url);

我的问题

动画不一致，我怀疑这是由于 $(window).load 没有按预期等待。延迟解决了我所有的问题：

<head>

<link rel="stylesheet" type="text/css" href="css/slide.css">

<script src="js/library/big_slide_img.js">

</head>

<body>

  <img class="big_slide_img" src="http://25.media.tumblr.com/0ab6f805c5a3591168e2fe2133552054/tumblr_mk52iuvbNI1s631nvo1_1280.jpg">

</body>
$(window).load(function()

{

  $("#iframe").contents().find('.big_slide_img').animate({left: '-=521'}, 800,function(){});

});
loadSlide = function(slide_no)

  {

    $.ajax(

    {

      url:"http://myurl.com",

      async: false,

      jsonpCallback: 'jsonCallback',

      contentType:"application/json",

      type:"GET",

      dataType:"jsonp",

      data: {"action":"loadall"},

      success: function(data)

      {

        $('#frame_title').html(data.title);

        $('#text').html(data.text);

        $('#iframe').contents().find('html').html(data.animation); 

      },

      error: function (event, jqXHR, ajaxSettings, thrownError)

      {

        alert('[event:' + event + '], [jqXHR:' + jqXHR + '], [ajaxSettings:' + ajaxSettings + '], [thrownError:' + thrownError + '])');

      }

    });

  };
$(window).load(function()

{

  $("#iframe").contents().find('.big_slide_img').delay(800).animate({left: '521'}, 800,function(){});

});
$('#iframe').contents().find('html').html(data.animation);
$('iframe').attr('src',data.animation_url);

我怎样才能毫不拖延地做到这一点？由于我不知道这些文件中的代码是什么，我想避免在外部监视 iframe 并在完成后调用特定函数。我希望/假设，我只是没有引用正确的东西。

非常感谢。

jQuery 不会调用 "load" 触发器，因为实例化 jQuery 的页面已经加载。

您可以在 iframe 中加载 jquery 并将此代码放在 "big_slide_img.js" 中：

$(function(){

$("#iframe").contents().find('.big_slide_img').delay(800).animate({left: '521'}, 800,function(){});

});

或者你可以在 iframe 之外创建一个触发器，当 iframe 加载时调用它。

还有很多其他方法。

根据上面 VictorVRS 的评论和我的回复，我意识到我需要触发 iframe 的加载功能(我认为只有外部页面是)。我的 ajax 调用现在返回一个 url，而不是实际数据，它被设置到 iframe 的 src 中，加载页面。这变成了：

<head>

<link rel="stylesheet" type="text/css" href="css/slide.css">

<script src="js/library/big_slide_img.js">

</head>

<body>

  <img class="big_slide_img" src="http://25.media.tumblr.com/0ab6f805c5a3591168e2fe2133552054/tumblr_mk52iuvbNI1s631nvo1_1280.jpg">

</body>
$(window).load(function()

{

  $("#iframe").contents().find('.big_slide_img').animate({left: '-=521'}, 800,function(){});

});
loadSlide = function(slide_no)

  {

    $.ajax(

    {

      url:"http://myurl.com",

      async: false,

      jsonpCallback: 'jsonCallback',

      contentType:"application/json",

      type:"GET",

      dataType:"jsonp",

      data: {"action":"loadall"},

      success: function(data)

      {

        $('#frame_title').html(data.title);

        $('#text').html(data.text);

        $('#iframe').contents().find('html').html(data.animation); 

      },

      error: function (event, jqXHR, ajaxSettings, thrownError)

      {

        alert('[event:' + event + '], [jqXHR:' + jqXHR + '], [ajaxSettings:' + ajaxSettings + '], [thrownError:' + thrownError + '])');

      }

    });

  };
$(window).load(function()

{

  $("#iframe").contents().find('.big_slide_img').delay(800).animate({left: '521'}, 800,function(){});

});
$('#iframe').contents().find('html').html(data.animation);
$('iframe').attr('src',data.animation_url);

这个：

<head>

<link rel="stylesheet" type="text/css" href="css/slide.css">

<script src="js/library/big_slide_img.js">

</head>

<body>

  <img class="big_slide_img" src="http://25.media.tumblr.com/0ab6f805c5a3591168e2fe2133552054/tumblr_mk52iuvbNI1s631nvo1_1280.jpg">

</body>
$(window).load(function()

{

  $("#iframe").contents().find('.big_slide_img').animate({left: '-=521'}, 800,function(){});

});
loadSlide = function(slide_no)

  {

    $.ajax(

    {

      url:"http://myurl.com",

      async: false,

      jsonpCallback: 'jsonCallback',

      contentType:"application/json",

      type:"GET",

      dataType:"jsonp",

      data: {"action":"loadall"},

      success: function(data)

      {

        $('#frame_title').html(data.title);

        $('#text').html(data.text);

        $('#iframe').contents().find('html').html(data.animation); 

      },

      error: function (event, jqXHR, ajaxSettings, thrownError)

      {

        alert('[event:' + event + '], [jqXHR:' + jqXHR + '], [ajaxSettings:' + ajaxSettings + '], [thrownError:' + thrownError + '])');

      }

    });

  };
$(window).load(function()

{

  $("#iframe").contents().find('.big_slide_img').delay(800).animate({left: '521'}, 800,function(){});

});
$('#iframe').contents().find('html').html(data.animation);
$('iframe').attr('src',data.animation_url);
赞 (0)
« 上一篇
下一篇 »

相关推荐

  • Spring部署设置openshift

    Springdeploymentsettingsopenshift我有一个问题让我抓狂了三天。我根据OpenShift帐户上的教程部署了spring-eap6-quickstart代码。我已配置调试选项，并且已将Eclipse工作区与OpehShift服务器同步-服务器上的一切工作正常，但在Eclipse中出现无法消除的错误。我有这个错误：cvc-complex-type.2.4.a:Invali…
    2025-04-161

  • 检查Java中正则表达式中模式的第n次出现

    CheckfornthoccurrenceofpatterninregularexpressioninJava本问题已经有最佳答案，请猛点这里访问。我想使用Java正则表达式检查输入字符串中特定模式的第n次出现。你能建议怎么做吗？这应该可以工作：MatchResultfindNthOccurance(intn,Patternp,CharSequencesrc){Matcherm=p.matcher…
    2025-04-161

  • 如何让 JTable 停留在已编辑的单元格上

    HowtohaveJTablestayingontheeditedcell如果有人编辑JTable的单元格内容并按Enter，则内容会被修改并且表格选择会移动到下一行。是否可以禁止JTable在单元格编辑后转到下一行？原因是我的程序使用ListSelectionListener在单元格选择上同步了其他一些小部件，并且我不想在编辑当前单元格后选择下一行。Enter的默认绑定是名为selectNext…
    2025-04-161

  • Weblogic 12c 部署

    Weblogic12cdeploy我正在尝试将我的应用程序从Tomcat迁移到Weblogic12.2.1.3.0。我能够毫无错误地部署应用程序，但我遇到了与持久性提供程序相关的运行时错误。这是堆栈跟踪：javax.validation.ValidationException:CalltoTraversableResolver.isReachable()threwanexceptionatorg.…
    2025-04-161

  • Resteasy Content-Type 默认值

    ResteasyContent-Typedefaults我正在使用Resteasy编写一个可以返回JSON和XML的应用程序，但可以选择默认为XML。这是我的方法：@GET@Path("/content")@Produces({MediaType.APPLICATION_XML,MediaType.APPLICATION_JSON})publicStringcontentListRequestXm…
    2025-04-161

  • 代码不会停止运行，在 Java 中

    thecodedoesn'tstoprunning,inJava我正在用Java解决项目Euler中的问题10，即"Thesumoftheprimesbelow10is2+3+5+7=17.Findthesumofalltheprimesbelowtwomillion."我的代码是packageprojecteuler_1;importjava.math.BigInteger;importjava…
    2025-04-161

  • Out of memory java heap space

    Outofmemoryjavaheapspace我正在尝试将大量文件从服务器发送到多个客户端。当我尝试发送大小为700mb的文件时，它显示了"OutOfMemoryjavaheapspace"错误。我正在使用Netbeans7.1.2版本。我还在属性中尝试了VMoption。但仍然发生同样的错误。我认为阅读整个文件存在一些问题。下面的代码最多可用于300mb。请给我一些建议。提前致谢publicc…
    2025-04-161

  • Log4j 记录到共享日志文件

    Log4jLoggingtoaSharedLogFile有没有办法将log4j日志记录事件写入也被其他应用程序写入的日志文件。其他应用程序可以是非Java应用程序。有什么缺点？锁定问题？格式化？Log4j有一个SocketAppender，它将向服务发送事件，您可以自己实现或使用与Log4j捆绑的简单实现。它还支持syslogd和Windows事件日志，这对于尝试将日志输出与来自非Java应用程序…
    2025-04-161
手机版技术脚本