如何直接在带有 javascript 的 AMP 页面中打开边栏?有功能吗?
How do I open the sidebar in a AMP page with javascript directly? Is there a function?
我不太理解正确的调试方法,所以我无法解决问题。我有一个 AMP 页面,以此为例:
<!doctype html>
<html AMP lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<link rel="canonical" href="//link_to_self" />
<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,initial-scale=1">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element=amp-sidebar src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<style amp-custom></style>
</head>
<body>
<amp-sidebar id="sidebar" layout="nodisplay">Sidebar</amp-sidebar>
<button on="tap:sidebar.open">Open sidebar</button>
</body>
</html>
我想做的是一个纯粹的 javascript 调用,它的作用与按钮的作用相同。这不起作用:
<script>
document.getElementById("sidebar").open();
</script>
我需要这个的原因是我有一个滑动库,当检测到滑动时需要调用函数来打开菜单。 Anyonw知道我将如何调用侧边栏功能吗?
文档中包含 HTML 中可能出现的三种状态,如何从 javascript 中调用这些状态? (如果可能的话,我如何使用 chrome 调试器找到函数的名称,或者是否可能,我现在有线索,但我认为答案就在我面前,因为我可以阅读 javascript代码。
<button on="tap:sidebar.toggle">Toggle sidebar</button>
<button on="tap:sidebar.open">Open sidebar</button>
<button on="tap:sidebar.close">Close sidebar</button>
据我所知,不幸的是你不能:
One thing we realized early on is that many performance issues are caused by the integration of multiple JavaScript libraries, tools, embeds, etc. into a page. This isn’t saying that JavaScript immediately leads to bad performance, but once arbitrary JavaScript is in play, most bets are off because anything could happen at any time and it is hard to make any type of performance guarantee. With this in mind we made the tough decision that AMP HTML documents would not include any author-written JavaScript, nor any third-party scripts.
我不太理解正确的调试方法,所以我无法解决问题。我有一个 AMP 页面,以此为例:
<!doctype html>
<html AMP lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<link rel="canonical" href="//link_to_self" />
<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,initial-scale=1">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element=amp-sidebar src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<style amp-custom></style>
</head>
<body>
<amp-sidebar id="sidebar" layout="nodisplay">Sidebar</amp-sidebar>
<button on="tap:sidebar.open">Open sidebar</button>
</body>
</html>
我想做的是一个纯粹的 javascript 调用,它的作用与按钮的作用相同。这不起作用:
<script>
document.getElementById("sidebar").open();
</script>
我需要这个的原因是我有一个滑动库,当检测到滑动时需要调用函数来打开菜单。 Anyonw知道我将如何调用侧边栏功能吗?
文档中包含 HTML 中可能出现的三种状态,如何从 javascript 中调用这些状态? (如果可能的话,我如何使用 chrome 调试器找到函数的名称,或者是否可能,我现在有线索,但我认为答案就在我面前,因为我可以阅读 javascript代码。
<button on="tap:sidebar.toggle">Toggle sidebar</button>
<button on="tap:sidebar.open">Open sidebar</button>
<button on="tap:sidebar.close">Close sidebar</button>
据我所知,不幸的是你不能:
One thing we realized early on is that many performance issues are caused by the integration of multiple JavaScript libraries, tools, embeds, etc. into a page. This isn’t saying that JavaScript immediately leads to bad performance, but once arbitrary JavaScript is in play, most bets are off because anything could happen at any time and it is hard to make any type of performance guarantee. With this in mind we made the tough decision that AMP HTML documents would not include any author-written JavaScript, nor any third-party scripts.