URL Update during page interaction

The only way I saw of doing this was using JS, which isn't doable in Perspective without either custom modules or JS injection (long story). I decided to play around with @victordcq's JS injections and made a little markdown component that, when loaded, will use history.replaceState to replace the end of the current URL with whatever is in its suffix custom property.

Markdown component JSON
[
  {
    "type": "ia.display.markdown",
    "version": 0,
    "props": {
      "markdown": {
        "escapeHtml": false
      }
    },
    "meta": {
      "name": "Markdown"
    },
    "position": {
      "x": 300,
      "y": 347,
      "height": 200,
      "width": 200
    },
    "custom": {
      "suffix": "foobar"
    },
    "propConfig": {
      "props.source": {
        "binding": {
          "type": "property",
          "config": {
            "path": "this.custom.suffix"
          },
          "transforms": [
            {
              "code": "\tdef getRawUrl(path):\n\t\treturn path[:path.rindex('/')+1]\n\t\n\tcode =  \"\"\"<img style='display:none' src='/favicon.ico' onload=\\\"\n\t\t\thistory.replaceState(null,null,'\"\"\"+getRawUrl(self.page.props.path)+value+\"\"\"');\t\t\t\t\n\t\t\t\\\"></img>\"\"\".replace(\"\\n\", \"\").replace(\"\\t\", \"\")\n\treturn code",
              "type": "script"
            }
          ]
        }
      }
    }
  }
]

This isn't exactly supported usage so use at your own risk, don't paste random JS into your projects unless you understand it, and so on.

4 Likes