By James Kanjo
WARNING: This snippet has become redundant since the creation of the HTML Block on the 2/March/2010
Description
Throughout the whole of Wikidot, people are putting HTML code into code-blocks, and then iframing the Wikidot-generated HTML page.
Iframing HTML gives a result somewhat like embedding the HTML in the Wikidot page, but is secure. Whereas embedded code comes from the same domain as the page, and can thus use (steal or abuse) security cookies or resources, iframed code comes from a different domain (wdfiles.com) and thus has no access to the wikidot.com resources.
Just about every single day on the Wikidot community forums, we get somebody asking how to embed [x] code on [y] page. And every time we tell them:
[!--
[[code]]
[x] code goes here
[[/code]]
--]
[[iframe /local--code/THIS_PAGE'S_NAME]]
This becomes problematic when they try to “embed” a set of HTML code on the one page, at which point we need to tell them to append /1 or /x to the iframe URL, depending on the index of the code.
This is information that they don't really understand, and nor should they need to. So I devised this new special code that will iframe any embed code automatically.
Code
In action
[[embed]]
<iframe class="" style="" frameborder="0" width="100%" height="300px" align="" scrolling="auto" src="http://snippets.wdfiles.com/local--code/code:iframe-embed#%3Cscript%20src%3D%22http%3A//gmodules.com/ig/ifr%3Furl%3Dhttp%3A//www.google.com/ig/modules/datetime.xml%26up_color%3Dred%26synd%3Dopen%26w%3D320%26h%3D136%26title%3DDate+%2526+Time%26border%3D%2523ffffff%257C3px%252C1px+solid+%2523999999%26output%3Djs%22%3E%3C/script%3E%20"></iframe>
[[/embed]]
Thanks to tsangk for this great snippet: conditional-blocks
text above inserted with:
[[include :snippets:if START |unique=1|type=equal|var1=%%name%%|var2=conditional-blocks]]
**##red|Thanks to tsangk for this great snippet:##** [[[code:conditional-blocks]]]
[[include :snippets:if END]]
Other snippets posted by James Kanjo
Rate this solution
If you think this solution is useful — rate it up!
Is there no snippet to embed the page but auto add the attributes from the url? B/c i found it hard to guess the pixel of the page to be embedded. Besides the next page that comes after clicking any link there in will be out of range if the pixel of the next page is smaller than the original embeded. Help pls.
I posted the solution to your problem here
Would it be possible to just render a specific part of a webpage, like a css div? And if so, how?
Not sure what you mean. This iframe embed snippet is redundant now… The [[html]] block replaces it completely…
Actually, it's not redundant, and still extremely useful. As far as I understand it, this method embeds the code directly into the page, on the same wikidot.com domain?
The HTML block embeds the code on the wdfiles.com domain, and iframes it in (correct me if I'm wrong here).
Wouldn't you agree that having the code on the same domain is the only solution in some cases? I tried embedding DISQUS comments with a HTML block and while it worked, there were a number of compatibility problems with links leading to the wrong page… I didn't get a chance to check it yet, but I suspect using this iframe embed method will solve the problems I'm having.
~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server | NEW: Wikiroo, backup tool (in development)
I would only like to iframe just a css div and not the whole page.
@ Ss, please confirm: You want to iframe only a div of a page… live? This is not possible.
You can, however, manually extract that div, and paste it as static code inside a HTML module.
@ Shane,
Close, but no. It embeds an iframe of a (special) page on the wdfiles domain directly into the page. Better said, the page being iframed is on a separate domain, which can't touch the wikidot page (unfortunately).
There's really no reason for anybody to use this snippet anymore — but it remains here to provide “backward compatibility” for people who use it.
The HTML block does not work in comments. The embed code does.
~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server | NEW: Wikiroo, backup tool (in development)
Hahaha! There you go. Although, I still don't like this solution — I'm a fruitcake aren't I? Here I am making something for people to use, and then I go and advertise “don't use my product”…
Yes. Certainly not the most rock-solid sales pitch I've ever heard ;-)
~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server | NEW: Wikiroo, backup tool (in development)
I really was having a hard time embedding a blogspot widget that I created with widgetbox until I found this page. Thanks, I finally got it to work!!
If it's going to be here, no problem, I'm watching this page. Otherwise post a link here if you will.
A - S I M P L E - P L A N by ARTiZEN a startingpoint for simple wikidot solutions.
Could you describe maybe in a how-to, how to do this.
A - S I M P L E - P L A N by ARTiZEN a startingpoint for simple wikidot solutions.
Sure… I'll try to push one through in less than 24 hours
http://www.youtube.com/watch?v=i29FIIRpFsY
You made a good video… very helpfull!
A - S I M P L E - P L A N by ARTiZEN a startingpoint for simple wikidot solutions.
Powerful snippet…. Powerful Video!
Basically just a smiplified version of mine: http://community.wikidot.com/forum/t-111225/embed-anything
Kenneth Tsang (@jxeeno)
James,
Can you modify your javascript to get actual values for width and height from the code-to-be-embedded and put them in the iframe parameters?
If only that were possible…