dom createA('#', 'link') function doesn't work as expected

[yining1023]

I tried to run the following sketch: http://alpha.editor.p5js.org/projects/rJ9PtlA0. It writes:

var a = createA('#', 'apples');

When user clicks on the link, it should do nothing. But in the editor, it will navigate the iframe to the whole web editor page, which totally makes sense. It's just an issue raised by running code in an iframe instead of the whole page. Maybe we could add something to prevent it from navigating away?

[shiffman]

@yining1023 it's working for me when I run the sketch, what specifically is not working for you?

[yining1023]

@shiffman helped me to narrow down the problem. So I rephrased the issue above.

[catarak]

In the future what I want to do is render the iframe preview on a separate subdomain, for security reasons. I think it will fix this issue, but I'm not 100% sure.

[MichaelPaulukonis]

If you run the sketch in full - https://editor.p5js.org/full/rJ9PtlA0 - clicking on the link will instead provide:

{"message":"Asset does not exist"}

As it attempts to navigate to https://editor.p5js.org/full/rJ9PtlA0/#

I have found the same behavior when attempting to navigate to anchor links in other sketches.

Example here which uses anchor HTML from MDN

---

Expected behavior: clicking on link should cause page/sketch to navigate to anchor

Actual behavior: page/sketch disappears to be replaced with {"message":"Asset does not exist"}

[MichaelPaulukonis]

NOTE: Apparently, pre-pending about:srcdoc to the anchor links allows them to work.

So, instead of <a href="#foo">in-page link</a> you would have <a href="about:srcdoc#foo">in-page link</a>

Example here that works

Solution found on stackoverflow

[catarak]

oh, that's so awesome! the web editor could process all links that begin with a # and prepend them with about:srcdoc

[MichaelPaulukonis]

Sounds like that would work.

NOTE: it would have to be a prepend-on-render, or the links will not work when the sketch is downloaded, as the document is no longer about:srcdoc

[catarak]

Yes! There's some code in the web editor that doesn't get injected when a sketch is downloaded, which is

• infinite loop protection
• window console messaging So this code could be injected there!

[masakakinoki]

The about:srcdoc# solution is not working for me.

Expected behaviour: clicking on the 'blue berry' links only causes mousePressed function

Actual behaviour: clicking on the 'blue berry' links causes mousePressed function and then shows a blank preview

Example: https://editor.p5js.org/abirdwhale/sketches/URhqrGUvZ

[masakakinoki]

Instead of about:srcdoc#, javascript:void(0) works for me.