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

hyperlink to GitHub project HTML as preview with parameters

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

在查看此 Whosebug post 后尝试了以下操作。这些尝试现在奏效了:

  1. https://rawgit.com/ ...(这会在单击 link 时下载文件)
  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 还建议尝试其他方法,但其中 none 解决了问题。如果这个 URL 正常工作,那么这两个参数将在页面的第二行文本中显示为相应的数字,并且当用户在页面上单击 (mousepressed) 时它们会导致某些行为:

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

原write-up中没有提到,被测试的代码在页面顶部输出URL参数用于演示目的以及在代码中使用它们。从问题 URL 测试时:

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

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

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

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

https://github.com/TheMitchWorksPro/FlatIronLearningCode