首页 > 编程语言> > javascript-使用Polymer通过HTML导入包含jQuery在Safari和Firefox中不起作用

javascript-使用Polymer通过HTML导入包含jQuery在Safari和Firefox中不起作用

2019-11-21 08:34:21 作者：互联网

我试图通过HTML导入将jQuery包含在主页中,但它仅在Chrome中有效. Safari和Firefox都在主页上的JavaScript代码的第一行上引发了“ ReferenceError：$not defined”消息.看起来页面上的JavaScript代码是在jQuery对象加载到Safari或Firefox中之前执行的.我使用的是最新版本的Polymer(0.4)和jQuery(2.1.1).下面是一个最小的示例：

jquery.html

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

main.html

<!DOCTYPE html>
<html>
<head>
    <title>Import jQuery</title>
    <script src="http://www.polymer-project.org/platform.js"></script>
    <link rel="import" href="jquery.html">
</head>
<body>
<script>
$(document).ready(function() {
    console.log("Hello World!");
});
</script>

</body>
</html>

我想念这里明显的东西吗？谢谢！

解决方法:

Safari和Firefox都不支持HTMLImports.相反,platform.js使用Ajax请求来填充该功能.

如果没有本机浏览器支持,就无法使您的< script>标签等待导入完成.因此,要支持polyfill,您必须等到HTMLImportsLoaded事件触发(或将所有从属代码置于导入之后).

因此,要么：

<!DOCTYPE html>
<html>
<head>
    <title>Import jQuery</title>
    <script src="http://www.polymer-project.org/platform.js"></script>
    <link rel="import" href="jquery.html">
</head>
<body>
<script>
  addEventListener('HTMLImportsLoaded', function() {
    $(document).ready(function() {
      console.log("Hello World!");
    });
  });
</script>

</body>
</html>

要么

code.html

<script>
  $(document).ready(function() {
    console.log("Hello World!");
  });
</script>

main.html

<!DOCTYPE html>
<html>
<head>
    <title>Import jQuery</title>
    <script src="http://www.polymer-project.org/platform.js"></script>
    <link rel="import" href="jquery.html">
</head>
<body>
    <link rel="import" href="code.html">
</body>

标签：polymer,web-component,javascript,jquery
来源： https://codeday.me/bug/20191121/2050497.html