javascript - 超链接到 GitHub 项目 HTML 作为带有参数的预览

Question

P5 JavaScript 与 HTML 集成并发布在 GitHub 上。通常，可以通过将两个参数添加到 HTML URL 来将它们传递到代码中。这在本地测试代码时有效。尝试使用旨在预览 HTML 页面的语法对 github 上的 HTML 页面执行此操作时失败。请注意，默认情况下，直接的 URL 将显示源代码，而不是 GitHub 项目上的工作 HTML 页面。这是设计使然。计划是使用此 URL 作为 readme.md 文件超链接的目标。这将为项目的访问者演示工作代码。

在查看此 StackOverflow post 后尝试了以下操作.这些尝试现在确实奏效了:

1. > https://rawgit.com/ ...(点击链接下载文件)
2. 尝试在 URL 上使用参数预览语法:
   1. > http://htmlpreview.github.com/?https://github.com/TheMitchWorksPro/FlatIronLearningCode/blob/master/index.html?runModeToggle=1&runModeToggle2=1
   2. > http://htmlpreview.github.com/?https://github.com/TheMitchWorksPro/FlatIronLearningCode/blob/master/index.html&runModeToggle=1&runModeToggle2=1
   3. 在选项 1 中转义第二个 ?，如 ...\?runModeToggle=1&run...
   4. 将整个 URL 放在第一个 ? 之后的引号中，如 http://htmlpreview.github.com/?"https://github.com/... "

我的代码是为了学习目的而展示的，展示了它是如何演变的。在没有参数的情况下做更简单事情的早期迭代显示良好。例如:

http://htmlpreview.github.com/?https://github.com/TheMitchWorksPro/FlatIronLearningCode/blob/master/original/index.html

但是对于需要参数才能工作的一种代码风格，这就是问题所在。 This post还建议尝试其他事情，但没有一个能解决问题。如果此 URL 正常工作，那么这两个参数将在页面的第二行文本中显示为相应的数字，并且当用户在页面上单击 (mousepressed) 时，它们会导致某些行为:

http://htmlpreview.github.com/?https://github.com/TheMitchWorksPro/FlatIronLearningCode/blob/master/index.html?runModeToggle=1&runModeToggle2=1

Answer 1

原始文章中未提及，正在测试的代码在页面顶部输出 URL 参数以用于演示目的以及在代码中使用它们。从问题中测试此 URL 时:

http://htmlpreview.github.io/?https://github.com/TheMitchWorksPro/FlatIronLearningCode/blob/master/index.html?runModeToggle=1&runModeToggle2=1

请注意第二行如何显示第一个参数是“未定义”而另一个参数显示为“1”。我能够通过简单地在真实参数之前添加一个虚拟参数来解决这个问题。为什么会是这种情况目前未知，但它似乎可以解决问题:

http://htmlpreview.github.io/?https://github.com/TheMitchWorksPro/FlatIronLearningCode/blob/master/index.html?arg1=0&runModeToggle=1&runModeToggle2=1

为了查看代码与各种参数一起工作，修改后的 URL 现已添加到该项目主页上的自述文件中:

https://github.com/TheMitchWorksPro/FlatIronLearningCode