Talk:CSS Independent Content: Difference between revisions
From GreaseSpot Wiki
Jump to navigationJump to search
No edit summary |
No edit summary |
||
| (11 intermediate revisions by 9 users not shown) | |||
| Line 11: | Line 11: | ||
Isn't there a "domIsNowCreatedAndYouCanGoAhead" event that we can listen to instead of using setTimeout? | Isn't there a "domIsNowCreatedAndYouCanGoAhead" event that we can listen to instead of using setTimeout? | ||
Yes: [[DOMContentLoaded]] 20:30, 15 June 2007 (EDT) | |||
== How about this instead? == | == How about this instead? == | ||
It seems it works better | |||
function $(id) {return document.getElementById(id)}; | function $(id) {return document.getElementById(id)}; | ||
var iframe = document.createElement("iframe"); | var iframe = document.createElement("iframe"); | ||
iframe.setAttribute("id", "settings"); | iframe.setAttribute("id", "settings"); | ||
iframe.setAttribute("style", "display:block;z-index:1002;position:fixed;overflow:auto;left:30px;top:30px;right:30px;bottom:30px;background-color:white;padding:15px;border:1px solid black"); | iframe.setAttribute("style", "display:block;z-index:1002;position:fixed;overflow:auto;left:30px;top:30px;right:30px;bottom:30px;background-color:white;padding:15px;border:1px solid black"); | ||
iframe.addEventListener('load', showSettings2, false); | iframe.addEventListener('load', showSettings2, false); | ||
function showSettings2() { | function showSettings2() { | ||
$('LIU_settings').contentDocument.body.innerHTML = '<html><body>test</body></html>'; | $('LIU_settings').contentDocument.body.innerHTML = '<html><body>test</body></html>'; | ||
} | } | ||
== Data URI == | |||
Isn't this a prime time to use a data URI? | |||
iframe.src = 'data:text/html;charset=utf-8,'+escape('<html><body>...</body><html>'); | |||
Thus avoid all the issues with the DOM rendering and having to wait for load? | |||
:I don't think so. Just working with the iframe contents as a string would probably get frustrating. The <code>load</code> event happens pretty quickly since we're just waiting for <code>about:blank</code> to load, with no external resources, and once we're there, we can work with that DOM any way we please. Suppose you could mention it in the article as an option, but I don't really see the point. --[[User:Henrik|Henrik]] 04:37, 7 June 2007 (EDT) | |||
::Actually a rather good idea, IMO, with a few tweaks to the suggestion. The case when it's useful to do node by node creation is when you need to attach event handlers on your own for things, but when you don't, it's a lot easier just writing the markup, rather than coding to the DOM API (even if it was somewhat less bothersome with the tools I quoted in the initial revision). I think this is what you want to do: | |||
<nowiki> | |||
iframe.addEventListener("load", function() { ... }); | |||
iframe.src = "data:text/html;charset=utf-8,"+(<body> | |||
<ul> | |||
<li><a href={items[0].url}>{items[0].title}</a></li> | |||
<li><a href={items[1].url}>{items[1].title}</a></li> | |||
</ul> | |||
</body>).toXMLString(); | |||
document.body.appendChild(iframe); | |||
</nowiki> | |||
::and similar, here assuming the UI is an unordered list with two items, rendered from properties of an "items" array. Constructing more advanced UI:s is of course readily doable by setting up an e4x variable you craft mixing code and e4x literals any way you want prior to serializing the e4x variable to XML for the data URL, and adding event handlers works well by stuffing id:s to the nodes you want and fetching them in the load callback via doc.getElementById. Overall a great suggestion, IMO; feel free to improve this even further. | |||
--[[User:Ecmanaut|Ecmanaut]] 19:50, 15 June 2007 (EDT) | |||
Latest revision as of 15:08, 26 October 2011
This might be more suitable in Code snippets?
- I agree. --Henrik 05:47, 5 June 2007 (EDT)
sometimes its blank
Hi, I have a problem with this. It could be that I do something wrong. However: about 1 out of 5 times the content stays blank. I tried to change the timeout to 1000. I tested it 20 times, and it worked all the time.
Isn't there a "domIsNowCreatedAndYouCanGoAhead" event that we can listen to instead of using setTimeout?
Yes: DOMContentLoaded 20:30, 15 June 2007 (EDT)
How about this instead?
It seems it works better
function $(id) {return document.getElementById(id)};
var iframe = document.createElement("iframe");
iframe.setAttribute("id", "settings");
iframe.setAttribute("style", "display:block;z-index:1002;position:fixed;overflow:auto;left:30px;top:30px;right:30px;bottom:30px;background-color:white;padding:15px;border:1px solid black");
iframe.addEventListener('load', showSettings2, false);
function showSettings2() {
$('LIU_settings').contentDocument.body.innerHTML = '<html><body>test</body></html>';
}
Data URI
Isn't this a prime time to use a data URI?
iframe.src = 'data:text/html;charset=utf-8,'+escape('<html><body>...</body><html>');
Thus avoid all the issues with the DOM rendering and having to wait for load?
- I don't think so. Just working with the iframe contents as a string would probably get frustrating. The
loadevent happens pretty quickly since we're just waiting forabout:blankto load, with no external resources, and once we're there, we can work with that DOM any way we please. Suppose you could mention it in the article as an option, but I don't really see the point. --Henrik 04:37, 7 June 2007 (EDT)
- Actually a rather good idea, IMO, with a few tweaks to the suggestion. The case when it's useful to do node by node creation is when you need to attach event handlers on your own for things, but when you don't, it's a lot easier just writing the markup, rather than coding to the DOM API (even if it was somewhat less bothersome with the tools I quoted in the initial revision). I think this is what you want to do:
iframe.addEventListener("load", function() { ... });
iframe.src = "data:text/html;charset=utf-8,"+(<body>
<ul>
<li><a href={items[0].url}>{items[0].title}</a></li>
<li><a href={items[1].url}>{items[1].title}</a></li>
</ul>
</body>).toXMLString();
document.body.appendChild(iframe);
- and similar, here assuming the UI is an unordered list with two items, rendered from properties of an "items" array. Constructing more advanced UI:s is of course readily doable by setting up an e4x variable you craft mixing code and e4x literals any way you want prior to serializing the e4x variable to XML for the data URL, and adding event handlers works well by stuffing id:s to the nodes you want and fetching them in the load callback via doc.getElementById. Overall a great suggestion, IMO; feel free to improve this even further.
--Ecmanaut 19:50, 15 June 2007 (EDT)
