Question

我正在使用以下代码调用iframe内容并应用CSS。源HTML是MS-Word保存的文件，不能更改其内容。

我的问题是应用的样式在第一次显示它的内容时工作，然后，如果我刷新页面并再次访问相同的页面样式将无法工作，直到我刷新缓存或删除历史记录。我该如何解决这个问题？

$(toc_elements).closest("p").css({
    "width": "250px", 
    "padding": "10px", 
    "border": "solid 1px silver", 
    "margin-bottom": "2px", 
    "box-shadow": "0px 0px 5px silver", 
    "cursor": "pointer"
});

我的完整代码如下：

function fun_rules(tag) {
  if (tag == 'terms') {
    $('body').prepend("<div id='shield_hom' class='c02291555_sin' style='background-color: whitesmoke;'><span class='c07190343_upi icon-upme' onclick='funUpMe();'></span></div><iframe id='i11031821' src='<?php echo $GLOBALS['base_url']; ?>legal/site_terms_of_use_TOC.html' style='position: fixed; float: left; height: 100vh; z-index: 5; width: 400px;' frameborder='0' frameborder='0' scrolling='no'><p>Your browser does not support iframes.</p></iframe><iframe id='i11022249' src='<?php echo $GLOBALS['base_url']; ?>legal/site_terms_of_use.html' style='position: relative; float: right; height: 100%; z-index: 5; width: calc(100% - 400px);' frameborder='0' frameborder='0' scrolling='no' height='100%' onload='onLoadHandler();' seamless><p>Your browser does not support iframes.</p></iframe>");
  }
}

function onLoadHandler() {
  $('#i11022249').css({
    "height": $("#i11022249").contents().find("html").outerHeight()
  });
  
  $("html, body").animate({
    scrollTop: 0
  }, "slow");
  
  var toc_elements = $("#i11031821").contents().find("span:contains('Application and Acceptance of'), span:contains('Provision of Services'), span:contains('Users Generally'), span:contains('Member Accounts'), span:contains('Member’s Responsibilities'), span:contains('Breaches by Members'), span:contains('Transactions Between Buyers and'), span:contains('Limitation of Liability'), span:contains('Force Majeure'), span:contains('Intellectual Property Rights'), span:contains('Notices'), span:contains('General Provisions')");
  var con_elements = $("#i11022249").contents().find("span:contains('Application and Acceptance of'), span:contains('Provision of Services'), span:contains('Users Generally'), span:contains('Member Accounts'), span:contains('Member’s Responsibilities'), span:contains('Breaches by Members'), span:contains('Transactions Between Buyers and'), span:contains('Limitation of Liability'), span:contains('Force Majeure'), span:contains('Intellectual Property Rights'), span:contains('Notices'), span:contains('General Provisions')");
  
  window.setTimeout(function() {
    $(toc_elements).closest("p").css({
      "width": "250px",
      "padding": "10px",
      "border": "solid 1px silver",
      "margin-bottom": "2px",
      "box-shadow": "0px 0px 5px silver",
      "cursor": "pointer"
    });
  }, 0);
  
  $(toc_elements).on('click', function() {
    var thisTitle = $(this).html();
    var thisContent;
    
    $(con_elements).each(function() {
      if ($(this).html() == thisTitle) {
        thisContent = $(this);
      }
    });
    
    $('html, body').animate({
      scrollTop: thisContent.offset().top
    }, 2000);
  });
}

Answer 1

iFrame是页面中最慢的部分之一。如果涉及iframe的操作成功但是偶发，则通常意味着它没有足够的时间加载（这会有所不同）。经过快速审查，这看起来很有趣：

  window.setTimeout(function() {
    $(toc_elements).closest("p").css({
      "width": "250px",
      "padding": "10px",
      "border": "solid 1px silver",
      "margin-bottom": "2px",
      "box-shadow": "0px 0px 5px silver",
      "cursor": "pointer"
    });
  }, 0);

尝试将零}, 0);更改为}, 1000);，即1秒，然后该函数将执行。如果成功，您可以相应地调高或调低。

动态CSS到iframe内容有时不起作用

1 个答案: