Question

问题

在我的代码 MySymbolsObject.js 中 - 仅为了示例目的而内联报告的代码 - 设置window.onload事件以便Snap.load() svg文件并保存svg片段节点在Symbols.resources

最后一个内联<script>设置第二个window.onload事件，其中包含使用Symbols.resources中保存的svg节点的代码

在Firefox中，它可以在控制台中完美无缺地打印节点，在Safari Symbols.resources中将其作为原始0值打印在控制台中。

我检查了

Symbols.resources

包含节点。
两个浏览器都尊重两个onload events的预期执行顺序。

我的猜测是Snap.load()异步运行所以它在不同的浏览器中有不可预测的行为。

如何在Safari中解决？

<html>
<head>

  <script type="text/javascript" src="snap.svg-min.js"></script>


  <script type="text/javascript" src="MySymbolsObject.js">

      setEvent( window, 'load', function(){ 
          Snap.load( 'pathToFile.svg', function( svgFrag ){ 
               Symbols.resources = svgFrag;
          });
      });

      Symbols = { 
          resources : 0,
          ...
      }

  </script>


  <script type="text/javascript">

      onload = function (){
          console.log( Symbols.resources )
      }

  </script>

</head>

<body> ... </body>

</html>

Answer 1

我找到了推迟执行window.onload代码的方法，直到Symbols.resources准备就绪。

实际代码移动到function main()，window.onload只是反复检查Symbols.resources是否准备就绪，最后拨打main()。

onload = function (){
    if( Symbols.resources ) main();
    else setTimeout( window.onload, 10000 );
}

function main(){
    console.log( Symbols.resources );
}

在Safari

1 个答案: