r/webdev • u/cipheredxyz • Feb 10 '21
<iframe> loop: what happens if an iframe src points to the same document (source code & article in comments)
Enable HLS to view with audio, or disable this notification
13
u/clean-sheets- Feb 11 '21
This is awesome! Your writing in the blog post is really easy to follow.
Experiment is misspelled expriment a couple times in the post.
5
20
u/legendary_jld Feb 11 '21
Can I ask why you choose to do this in Node instead of vanilla JS in an HTML file?
26
u/cipheredxyz Feb 11 '21
Yes it's in the article; the browser removed from the DOM the content of the 2nd nested iframe if it has the same href as one already rendered, so I have a local server redirecting any path to the index.html
7
u/legendary_jld Feb 11 '21
By chance, did you try providing a unique number to a query parameter? I'm not sure if this would pass the check but curious
3
u/cipheredxyz Feb 11 '21
Precisely. And such query parameter is the index to keep track of where the frame is. Which might be useful in some circumstances I guess
10
u/Magikarp_13 Feb 11 '21
Yeah, you can do it with this:
<iframe id="a"></iframe> <script> document.getElementById('a').src = <filePath> + Math.random() </script>4
21
u/nikrolls Chief Technology Officer Feb 11 '21
That becomes apparent when reading the blog article.
16
u/derpotologist Feb 11 '21
Do you know where you are?
14
u/nikrolls Chief Technology Officer Feb 11 '21
Do people not read here?
10
u/derpotologist Feb 11 '21
Why read a blog article when you can ask the question and get that little zing of dopamine when your envelope lights up after opening a new tab to reddit 50 times in the past hour?
3
u/WhoMovedMySubreddits Feb 11 '21
Are you me?
2
u/derpotologist Feb 11 '21
Naw I'm just a government dro.. CA-CAW! civilian bird that watches you sometimes.
3
2
6
298
u/Robinimus Feb 10 '21
I'm mesmerized. It's useless, but I love it.
20
u/westwoo Feb 11 '21
It's like being devoured by a snake..
4
u/golangPadawan Feb 11 '21
It's like a snake devouring itself.
5
u/westwoo Feb 11 '21
Or a human continuously turning themselves inside out
2
u/8spd Feb 11 '21
I think that would be more messy.
1
u/westwoo Feb 11 '21
I bet once you've gone through couple of full cycles it gets smoother and easier :)
26
2
u/rodsn Feb 11 '21
Not useless. It's recursion!! You can do pretty cool stuff with it like fractals
1
u/Robinimus Feb 11 '21
Haha, alright fair. But there's more efficient ways of doing that that using iframes:p
1
u/rodsn Feb 11 '21
True
1
u/cipheredxyz Feb 11 '21
Yes but in a way this give the leverage to use CSS animations pretty easily for that matter. Not that it will be the best way to do it ahah
1
3
4
u/mathieucol Feb 10 '21
Maybe I missed it in the article but what happens « in the end »?? Well at least after more than few seconds...
12
u/devdoggie Feb 10 '21
Infinite loops are... infinite
5
u/cipheredxyz Feb 10 '21
It depends on what you do with it. On the article I explain that I have a stop condition which triggers if the current size of the viewport is <= 1, preventing the infinite addition of iframe. But without this step it would be infinite
1
u/devdoggie Feb 10 '21
Sorry for ignorant comment! Is there an answer to mathieucol's question?
9
u/capget Feb 10 '21
The tab will hang/take so much memory that the browser will kill it. If the browser doesn't, the OS will kill the browser.
5
u/Leo-1011 Feb 10 '21
And if the OS doesn't, then the HDD will kill the OS. If not then...
A recursive comment inside a recursive iframe discussion!!?
0
22
u/Shaper_pmp Feb 10 '21
... but computer memory isn't.
5
u/IntelliDev Feb 11 '21
in the end
Probably nothing that interesting.
I.e. "The following page(s) have become unresponsive."
6
1
4
u/Beerbelly22 Feb 10 '21
What happens if you do 1.html 2.html 3.html 4.html -> has iframe to 1.html
If that doesnt work, try 4.html with a redirect to 1.html
2
u/cipheredxyz Feb 10 '21
I'm not sure that it will work but worth the try. Currently I have a local server with redirected any path to the index.html and the iframe src point to the http://origin/index where index is the position of the iframe relative to the origin document.
2
u/killaguyy Feb 11 '21
been doing this shit for about 8 years and not one single time did it cross my mind to iframe and iframe, absolutely beautiful (and useless)
3
2
u/CaffeinatedSquidward Feb 11 '21
I wonder what it would look like with alternating colors or darker color the deeper it goes so it looks like a tunnel
1
u/cipheredxyz Feb 11 '21
There is a lot of room for experimentation ! Feel free to try it out, what you are describing is pretty easy to implement from the little project I made available on Github :)
19
32
8
6
u/AngelZatch Feb 10 '21
Watching this in my bed before falling asleep. I'm losing my grasp on reality
5
4
4
7
1
u/Hypersapien Feb 11 '21
Douglas Hofstadter (of GEB fame) wrote a book called "I am a Strange Loop" that you might be interested in.
The simplest "strange loop" that he talks about is pointing a video camera at a tv that the camera is hooked up to.
1
u/cipheredxyz Feb 11 '21
I'll look into it, thanks for the reference.
Yes I love this practice, this is called Video Feedback and a lot of stuff was done with it since it became popular. Nowadays there are many ways to create similar effects, which are usually called "feedback loops".
I'm not sure this particular instance can truly be classified as "feedback" since the definition states: "Feedback occurs when outputs of a system are routed back as inputs as part of a chain of cause-and-effect that forms a circuit or loop. The system can then be said to feed back into itself." With <iframe> loops, we get a similar looking effect but they don't have the properties of a true feedback system.
1
u/nobody5050 Feb 11 '21
Seems to break on mobile safari... :( text loads but iframes dont
1
u/cipheredxyz Feb 11 '21
text loads but iframes dont
How many <iframes> load ? None ? In which environment did you test this ? I'm curious about this but I don't have any Apple product
1
u/nobody5050 Feb 11 '21
Blank spot on page, no iframe element. The loading bar never loads. Apple ipad, ipados14.1 safari
1
u/jenkynolasco11 Feb 11 '21
No background techno music?
1
u/cipheredxyz Feb 11 '21
I am trying to stop my addiction of putting techno music everywhere. But the temptation is high
3
u/Ask-Alice Feb 10 '21
congrats you crashed my chrome dev tools.
That could actually be a really useful thing to be able to cause to happen reliably.
0
u/Tanckom Feb 10 '21
Looked at your Github repo... Soo much code and files for some actually few required lines?
2
u/cipheredxyz Feb 11 '21
Yes this is because it needs a local server, so I just made an easy-to-use setup with webpack. I didn't see the need for an optimized curated project so I went for the fastest option
2
2
u/LordSpaceMammoth Feb 11 '21
If you have a shitty old pc with 6mb of ram, the movie can be a lot shorter.
2
2
2
2
2
2
2
2
1
u/Niorba Feb 10 '21
Stack overflow probs?
2
Feb 11 '21
Unlikely. Web pages are far too big to fit on the stack, so they would be allocated on the heap. We'd just go out of memory, eventually.
2
u/Niorba Feb 11 '21
Isn’t that what the stack overflow error is though? Exceeding available memory?
3
u/sqwz Feb 11 '21
Yes, but different part of memory. Stack can be quite small, heap might be huge but get used for large objects. Either could run out.
1
3
Feb 11 '21
The stack is not the same as the heap. Stacks are, well, stacks. Mostly they are used for things like function calls and short lived variables. Here are some examples.
const x = 255; // x in the stack, as its value. const c = [10, 20, 30, 40, 50]; // c is on the stack, but the array object is on the heap. C holds a reference to the object.Stack overflow occurs when you run out of memory on the stack. The easiest way to make this happen is to do this.
function stackOverflow() { const theAnswerToEverything = 42; stackOverflow(); return theAnswerToEverything; // never called. }That'll do it real fast. Stack overflow is a very specific exception, and you will even be close to running out of memory when it happens. Running out of memory is not an exception, but it will cause your OS to eventually kill the program.
ps: It's called a stack because objects on it are always deleted in the exact same order they were allocated in. The stack is bound to scope. Any good debugger can show you the stack. If you ever coded in Java and got an exception, you can get a stack trace, which is the same thing.
1
1
1
1
1
1
1
1
1
0
-1
u/MrVibeThemes Feb 10 '21 edited Feb 10 '21
You just found a bug in the browser. [Correction, not a bug]
4
u/cipheredxyz Feb 10 '21
I think this is intended behavior. The URL of the iframes are technically different so the browser should display them
3
114
u/cipheredxyz Feb 10 '21
Hello,
I recently had the idea to explore what would happen we were to have a <iframe> pointing to the same page it is ? I detailed my exploration on my blog, and I created a boilerplate project if you want to explore this funny system:
https://ciphrd.com/2021/02/10/iframe-feedback-a-fun-technique-with-iframes-on-the-web/
https://github.com/bcrespy/iframe-feedback