How to use outerHTML in JavaScript?
- by symfony
How to use outerHTML in JavaScript? Thanks
Search Results
Search found 17 results on 1 pages for 'outerhtml'.
Page 1/1 | 1
-
-
How do I do OuterHTML in firefox?
- by SLC
Part of my code I get the OuterHTML propery "<LI onclick="TabClicked(this, 'SearchName', 'TabGroup1');">Name " so I can do stuff involing parsing it. There is no OuterHTML property in javascript on firefox though and I can't find an alternative way to get this string. Ideas?Read the article
-
IE 8 remove line break between nodes with JavaScript
- by Tokimon
Ok i have a list of HTML nodes which should be inline with no spacing between them. The problem is, that the nodes are written from a CMS and therefore will come with all sorts of linebreaks and spaces. Therefore I'm removing the spaces with JS using the method descibed in this question. The problem is, however, that in IE (not 9) the white spaces isn't part of the childrens list of the parent node, rendering the method useless in IE. However IE 7 (or at least IE 9 emulating IE 7) ignores the linebreaks, so that one is in the clear. That leaves IE 8 as the troublemaker. I discovered that the line break is actually a part of the outerHTML and that a simple reset of the outerHTML did the trick - like so: node.outerHTML = node.outerHTML However this will reset the node intirely and therefore removing all events and other settings on the node, which isn't really any good. So my question is now: Is there a way to remove that linebreak from the nodes outerHTML whitout resetting the node? I've tried with zoom: 1, but to no avail. Hope anyone has any experience with this.Read the article
-
jQuery Selector Tester and Cheat Sheet
- by SGWellens
I've always appreciated these tools: Expresso and XPath Builder. They make designing regular expressions and XPath selectors almost fun! Did I say fun? I meant less painful. Being able to paste/load text and then interactively play with the search criteria is infinitely better than the code/compile/run/test cycle. It's faster and you get a much better feel for how the expressions work. So, I decided to make my own interactive tool to test jQuery selectors: jQuery Selector Tester. Here's a sneak peek: Note: There are some existing tools you may like better: http://www.woods.iki.fi/interactive-jquery-tester.html http://www.w3schools.com/jquery/trysel.asp?filename=trysel_basic&jqsel=p.intro,%23choose My tool is different: It is one page. You can save it and run it locally without a Web Server. It shows the results as a list of iterated objects instead of highlighted html. A cheat sheet is on the same page as the tester which is handy. I couldn't upload an .htm or .html file to this site so I hosted it on my personal site here: jQuery Selector Tester. Design Highlights: To make the interactive search work, I added a hidden div to the page: <!--Hidden div holds DOM elements for jQuery to search--><div id="HiddenDiv" style="display: none"></div> When ready to search, the searchable html text is copied into the hidden div…this renders the DOM tree in the hidden div: // get the html to search, insert it to the hidden divvar Html = $("#TextAreaHTML").val();$("#HiddenDiv").html(Html); When doing a search, I modify the search pattern to look only in the HiddenDiv. To do that, I put a space between the patterns. The space is the Ancestor operator (see the Cheat Sheet): // modify search string to only search in our// hidden div and do the searchvar SearchString = "#HiddenDiv " + SearchPattern;try{ var $FoundItems = $(SearchString);} Big Fat Stinking Faux Pas: I was about to publish this article when I made a big mistake: I tested the tool with Mozilla FireFox. It blowed up…it blowed up real good. In the past I’ve only had to target IE so this was quite a revelation. When I started to learn JavaScript, I was disgusted to see all the browser dependent code. Who wants to spend their time testing against different browsers and versions of browsers? Adding a bunch of ‘if-else’ code is a tedious and thankless task. I avoided client code as much as I could. Then jQuery came along and all was good. It was browser independent and freed us from the tedium of worrying about version N of the Acme browser. Right? Wrong! I had used outerHTML to display the selected elements. The problem is Mozilla FireFox doesn’t implement outerHTML. I replaced this: // encode the html markupvar OuterHtml = $('<div/>').text(this.outerHTML).html(); With this: // encode the html markupvar Html = $('<div>').append(this).html();var OuterHtml = $('<div/>').text(Html).html(); Another problem was that Mozilla FireFox doesn’t implement srcElement. I replaced this: var Row = e.srcElement.parentNode; With this: var Row = e.target.parentNode; Another problem was the indexing. The browsers have different ways of indexing. I replaced this: // this cell has the search pattern var Cell = Row.childNodes[1]; // put the pattern in the search box and search $("#TextSearchPattern").val(Cell.innerText); With this: // get the correct cell and the text in the cell// place the text in the seach box and serachvar Cell = $(Row).find("TD:nth-child(2)");var CellText = Cell.text();$("#TextSearchPattern").val(CellText); So much for the myth of browser independence. Was I overly optimistic and gullible? I don’t think so. And when I get my millions from the deposed Nigerian prince I sent money to, you’ll see that having faith is not futile. Notes: My goal was to have a single standalone file. I tried to keep the features and CSS to a minimum–adding only enough to make it useful and visually pleasing. When testing, I often thought there was a problem with the jQuery selector. Invariable it was invalid html code. If your results aren't what you expect, don't assume it's the jQuery selector pattern: The html may be invalid. To help in development and testing, I added a double-click handler to the rows in the Cheat Sheet table. If you double-click a row, the search pattern is put in the search box, a search is performed and the page is scrolled so you can see the results. I left the test html and code in the page. If you are using a CDN (non-local) version of the jQuery libraray, the designer in Visual Studio becomes extremely slow. That's why there are two version of the library in the header and one is commented out. For reference, here is the jQuery documentation on selectors: http://api.jquery.com/category/selectors/ Here is a much more comprehensive list of CSS selectors (which jQuery uses): http://www.w3.org/TR/CSS2/selector.html I hope someone finds this useful. Steve WellensCodeProjectRead the article
-
DOM innerHTML Duplicate Problem
- by Kubi
function SwapPlans(city, id) { var tp = GetTravelPlanById(id); var content = MakeHTMLAccordionMe(tp.items[0]); document.getElementById(city).innerHTML = " "; document.getElementById(city).innerHTML = content.innerHTML; document.getElementById(city).outerHTML = " "; document.getElementById(city).outerHTML = content.outerHTML; } Hi, I have a problem with the snippet above. MakeAccordionME function returns the content that I want to change by document.getElementById(city) = value; but It doesn't remove the first content of the first div. Is there any content.clear method in DOM javascript ? thx p.s. the div that returns from document.getElementById(city) is a jquery accordion div.Read the article
-
JavaScript: Replacement for XMLSerializer.seralizeToString()?
- by NRaf
I'm developing a website using the Seam framework and the RichFaces AJAX library (these isn't really all that important to the problem at hand - just some background). I seem to have uncovered a bug, however, in RichFaces which, in certain instances, will cause AJAX-based updating to fail in IE8 (see here for more info: http://community.jboss.org/message/585737). The following is the code where the exception is occurring: var anchor = oldnode.parentNode; if(!window.opera && !A4J.AJAX.isWebkitBreakingAmps() && oldnode.outerHTML && !oldnode.tagName.match( /(tbody|thead|tfoot|tr|th|td)/i ) ){ LOG.debug("Replace content of node by outerHTML()"); if (!Sarissa._SARISSA_IS_IE || oldnode.tagName.toLowerCase()!="table") { try { oldnode.innerHTML = ""; } catch(e){ LOG.error("Error to clear node content by innerHTML "+e.message); Sarissa.clearChildNodes(oldnode); } } oldnode.outerHTML = new XMLSerializer().serializeToString(newnode); } The last line (the one with XMLSerializer) is where the exception is occurring in IE. I was wondering if anyone knows of any replacement method / library / etc I could use there (only on IE is fine). Thanks.Read the article
-
Tables created programmatically don't appear in WebBrowser control
- by John Hall
I'm creating HTML dynamically in a WebBrowser control. Most elements seems to appear correctly, with the exception of a table. My code is: var doc = webBrowser1.Document; var body = webBrowser1.Document.Body; body.AppendChild(webBrowser1.Document.CreateElement("hr")); var div = doc.CreateElement("DIV"); var table = doc.CreateElement("TABLE"); var row1 = doc.CreateElement("TR"); var cell1 = doc.CreateElement("TD"); cell1.InnerText = "Cell 1"; row1.AppendChild(cell1); var cell2 = doc.CreateElement("TD"); cell2.InnerText = "Cell 2"; row1.AppendChild(cell2); table.AppendChild(row1); div.AppendChild(table); body.AppendChild(div); body.AppendChild(webBrowser1.Document.CreateElement("hr")); The HTML tags are visible in the OuterHTML property of the body, but all that appears in the browser are the two horizontal rules. If I replace div.AppendChild(table); with div.InnerHtml = table.OuterHtml then everything appears as expected.Read the article
-
DOM: element created with cloneNode(true) missing element when added to DOM
- by user149327
I'm creating a tree control and I'm attempting to use a parent element as a template for its children. To this end I'm using the element.cloneNode(true) method to deep clone the parent element. However when I insert the cloned element into the DOM it is missing certain inner elements despite having an outerHTML value identical to its parent. Surprisingly I observe the same behavior is in IE, Firefox, and Chrome leading me to believe that it is by design. This is the HTML for the node I'm attempting to clone. <SPAN class=node><A class=nodeLink href="/SparklerRestService2.aspx?q={0}" name=http://dbpedia.org/data/Taylor_Swift.rdf> <IMG class=nodeIcon alt="Taylor Swift" src="images/node.png"><SPAN class=nodeText>Taylor Swift</SPAN></A><SPAN class=nodeDescription>Taylor Swift is a swell gall who is realy great.</SPAN></SPAN> Once I've cloned the node using cloneNode(true) I examine the outerHTML property and find that it is indeed identical to the original. <SPAN class=node><A class=nodeLink href="/SparklerRestService2.aspx?q={0}" name=http://dbpedia.org/data/Taylor_Swift.rdf><IMG class=nodeIcon alt="Taylor Swift" src="images/node.png"><SPAN class=nodeText>Taylor Swift</SPAN></A><SPAN class=nodeDescription>Taylor Swift is a swell gall who is realy great.</SPAN></SPAN> However when I insert it into the DOM and inspect the result using FireBug I find that the element has been transformed: <span class="node" style="top: 0px; left: 0px;"<a class=nodeLink href="/SparklerRestService2.aspx?q={0}" name=http://dbpedia.org/data/Taylor_Swift.rdf>Taylor Swift</a><span class="nodeDescription">It's great</span></span> Notice that the grandchildren of the node (the image tag and the span tag surrounding "Taylor Swift") are missing, although strangely the great grandchild "Taylor Swift" text node has made it into the tree. Can anyone shed some light on this behavior? Why would nodes disappear after insertion into the DOM, and why am I seeing the same result in all three major browser engines?Read the article
-
Remove links with Javascript
- by Arlen Beiler
How do I remove links from a webpage with Javascript. I am using Google Chrome. The code I tried is: function removehyperlinks() { try { alert(document.anchors.length); alert(document.getElementsByTagName('a')); for(i=0;i=document.anchors.length;i++) { var a = document.anchors[i]; a.outerHTML = a.innerHTML; var b = document.getElementsByTagName('a'); b[i].outerHTML = b[i].innerHTML; } } catch(e) { alert (e);} alert('done'); } Of course, this is test code, which is why I have the alerts and 2 things trying at the same time. The first alert returns "0" the second [Object NodeList] and the third returns "done". My html body looks like this: <body onload="removehyperlinks()"> <ol style="text-align:left;" class="messagelist"> <li class="accesscode"><a href="#">General information, Updates, & Meetings<span class="extnumber">141133#</span></a> <ol> <li><a href="#">...</a></li> <li><a href="#">...</a></li> <li><a href="#">...</a></li> <li><a href="#">...</a></li> <li><a href="#">...</a></li> <li><a href="#">...</a></li> <li><a href="#">...</a></li> <li><a href="#">...</a></li> <li start="77"><a href="#"">...</a></li> <li start="88"><a href="#">...</a></li> <li start="99"><a href="#">...</a></li> </ol> </li> </ol> </body>Read the article
-
how to print entire HTML element in JavaScript?
- by celicni
I want to print the entire element including tag name, attribute name/value pairs and innerHTML. How can I do it in JavaScript (jQuery)? for example: var elArr = document.getElementsByTagName('link'); alert(elArr[0].printEntireElement()); //expected output might be <link href="/css/common.css" rel="stylesheet" type="text/css">` Note that for link element outerHTML is not defined!Read the article
-
jQuery - Call function once at end of each loop
- by user668499
How can I call a function once at the end of an each loop. This alerts 'finished' on each loop, I want it once when the loop has finished. $(function(){ var imgArr=[]; var lis = $('#gallery li') lis.each(function(){ imgArr.push(this.outerHTML); $(this).remove(); alertFun(); }) function alertFun(){ alert('finished'); } })Read the article
-
Modify HTML in a Internet Explorer window using external.menuArguments
- by Axeman
Hi all... I've a vb.net class that is invoked with a context menu extension in Internet Explorer. The code has access to the object model of the page, and reading data is not a problem. This is the code of a test funcion... it changes the status bar text (OK), prints the page html (OK), changes the html by adding a text and prints again the page html (ok, in the second popup my added text is in the html) But the Internet Explorer window doesnt't show it. Where am I doing wrong? Public Sub CallingTest(ByRef Source As Object) Dim D As mshtml.HTMLDocument = Source.document Source.status = "Working..." Dim H As String = D.documentElement.innerHTML() MsgBox(H) D.documentElement.insertAdjacentText("beforeEnd", "ThisIsATest") H = D.documentElement.outerHTML() MsgBox(H) Source.status = "" End Sub Function is called by this javascript: <SCRIPT> var EB = new ActiveXObject("MyObject.MyClass"); EB.CallingTest(external.menuArguments); </SCRIPT>Read the article
-
How does one validate html that's generated from JS running in the browser?
- by Henry Rose
The page in question has very skeletal html sent over the wire to facilitate the building of a complicated UI in javascript. I'm now encountering a strange browser compatibility issue that feels very much like I've got a markup problem somewhere on the page. I've validated the page as it comes across the wire using the W3C tool and ensured there are no issues in that html. I've also tried validating the output of running on the browser console: document.getElementsByTagName('html')[0].outerHTML I find that the output of the above introduces lots of new issues, such as removing the trailing '/' in self closing tags. This added noise is distracting, but it also makes me uneasy about validating this method. How do you validate markup that's rendered client side?Read the article
-
How to take search query and append modifers to the end of it
- by Kimber
This is a greasemonkey question. What I'm trying to do is modify an old google discussions script. What were wanting to do is be able to take the google search query and add modifiers to the end of it. Like this: search query: "superuser" modifiers: inurl:greasemonkey+question end result: "superuser" inurl:greasemonkey+question The old script creates a new div within the "hdtb_more_mn" element which is where you get the new discussions tab. However, since the "tbm=dsc" option to do a discussion search has died, this script no longer works. Hence the need to add modifiers to your searches. I tried to edit the script, but it appends the modifiers to the end of the url which includes "&client=firefox-a&hs=8uS&rls=org.mozilla:en-US:official". This means you're also searching for the above as well as your query, which doesn't work. I would like to be able to append the modifiers @ the end of the search querty, rather than the whole URL. I'm just not sure how to code it to where it adds the below "&tbm=" stuff within "discussionDiv.innerHTML" to the end of the query. The google search id seems to be, "gbqfq" for the search box, but I'm not sure how to add this id. Here is the old script // ==UserScript== // @name Add Back Google Discussions // @version 1.4 // @description Adds back the Discussion filters to Google Search // @include *://*.google.tld/search* // ==/UserScript== var url = location.href; if (url.indexOf('tbm=dsc') < 0) addFilterType('dsc', 'Discussions'); function addFilterType(val, name) { var searchType = document.getElementById('hdtb_more_mn'); var discussionDiv = document.createElement('DIV'); discussionDiv.className = 'hdtb_mitem'; discussionDiv.innerHTML = '<a class="q qs" href="'+ (url.replace(/&tbm=[^&]*/g,'') + '&tbm=' + val) +'">'+name+'</a>'; searchType.innerHTML += discussionDiv.outerHTML; } Thanks for any help, or suggestions on who to ask. Google Chrome has an extension for discussion searches, but FF doesn't seem to have one as of yet, which is why I'm trying to modify the above.Read the article
-
fancybox image sometimes renders outside box
- by Colleen
I have the following django template: <script type="text/javascript" src="{{ STATIC_URL }}js/ jquery.fancybox-1.3.4.pack.js"></script> <link rel="stylesheet" href="{{ STATIC_URL }}css/ jquery.fancybox-1.3.4.css" type="text/css" media="screen" /> {% include "submission-form.html" with section="photos" %} <div class="commentables"> {% load thumbnail %} {% for story in objects %} <div class="image {% if forloop.counter|add:"-1"| divisibleby:picsinrow %}left{% else %}{% if forloop.counter| divisibleby:picsinrow %}right{% else %}middle{% endif %}{% endif %}"> {% if story.image %} {% thumbnail story.image size crop="center" as full_im %} <a rel="gallery" href="{% url post slug=story.slug %}"> <img class="preview" {% if story.title %} alt="{{ story.title }}" {% endif %} src="{{ full_im.url }}" full- image="{% if story.image_url %}{{ story.image_url }}{% else %} {{ story.image.url }}{% endif %}"> </a> {% endthumbnail %} {% else %} {% if story.image_url %} {% thumbnail story.image_url size crop="center" as full_im %} <a rel="gallery" href="{% url post slug=story.slug %}"> <img class="preview" {% if story.title %} alt="{{ story.title }}" {% endif %} src="{{ full_im.url }}" full- image="{{ story.image_url }}"> </a> {% endthumbnail %} {% endif %} {% endif %} </div> {% endfor %} {% if rowid != "last" %} <br style="clear: both" /> {% endif %} {% if not no_more_button %} <p style="text-align: right;" class="more-results"><a href="{% url images school_slug tag_slug %}">more...</a></p> {% endif %} </div> <script> $(document).ready(function(){ function changeattr(e){ var f = $(e.clone()); $(f.children()[0]).attr('src', $(f.children() [0]).attr("full-image")); $(f.children()[0]).attr('height', '500px'); return f[0].outerHTML; } $('.image a').each(function(idx, elem) { var e = $(elem); e.fancybox({ title: $(e.children()[0]).attr('alt'), content: changeattr(e) }); }); }); </script> and I'm occasionally getting weird display errors where the box will either not render anything at all (so it will show up as just a thin white bar, basically) or it will render only about 30 px wide, and position itself halfway down the page. In both cases, if I inspect element, I can see the "shadow" of the full picture, at the right size, with the right url. Image source doesnt' seem to make a difference, I'm getting no errors, and this is happening in both chrome and firefox. Does anyone have any ideas?Read the article
-
how to pull href link
- by user1751494
I am trying to pull a link from a page that is in a formal I can't seem to find by simply googling... it might be simple but xpath is not my area of expertise I am using c# and trying to pull the link and just write it to the console to figure out how to get the link here is my C# code var document = webGet.Load("http://classifieds.castanet.net/cat/vehicles/cars/0_-_4_years_old/"); var browser = document.DocumentNode.SelectSingleNode("//a[starts-with(@href,'/details/')]"); if (browser != null) { string htmlbody = browser.OuterHtml; Console.WriteLine(htmlbody); } the html code section is <div class="last">…</div><a href="/cat/vehicles/cars/0_-_4_years_old/?p=13">13</a><a href="/cat/vehicles/cars/0_-_4_years_old/?p=2">»</a> <select name="sortby" class="sortby" onchange="doSort(this);"> <option value="">Most Recent</option> <option value="of" >Oldest First</option> <option value="mw" >Most Views</option> <option value="lw" >Fewest Views</option> <option value="lp" >Lowest Price</option> <option value="hp" >Highest Price</option> </select><div style="clear:both"></div> </div> <br /><br /><br /> <a href="/details/2008_vw_gti/1454282/" class="prod_container" > <h2>2008 VW GTi</h2> <div style="float:left; width:122px; z-index:1000"> <div class="thumb"><img src="http://c.castanet.net/img/28/thumbs/1454282-1-1.jpg" border="0"/></div> <div class="clear"></div> mls </div> <div class="descr"> The most fun car I have owned. Dolphin Grey, 4 door, Dual Climate control, DRG Transmission with paddle shift. Leather... </div> <div class="pdate"> <p class="price">$19,000.00</p> <p class="date">Kelowna<br />Posted: Oct 15, 2:54 PM<br />Views: 349</p> </div> <div style="clear:both" ></div> <div class="seal"><img src="/images/bookmark.png" /></div> </a> <a href="/details/price_drop_gorgeous_rare_white_2009_honda_accord_ex-l_coupe/1447341/" class="prod_container" > <h2>PRICE DROP!!! Gorgeous Rare White 2009 Honda Accord EX-L Coupe </h2> <div style="float:left; width:122px; z-index:1000"> <div class="thumb"><img src="http://c.castanet.net/img/28/thumbs/1447341-1-1.jpg" border="0"/></div> <div class="clear"></div> sun2010 </div> <div class="descr"> the link I'm trying to get is the "/details/2008_vw_gti/1454282/" part. THanksRead the article
-
Web Browser Control – Specifying the IE Version
- by Rick Strahl
I use the Internet Explorer Web Browser Control in a lot of my applications to display document type layout. HTML happens to be one of the most common document formats and displaying data in this format – even in desktop applications, is often way easier than using normal desktop technologies. One issue the Web Browser Control has that it’s perpetually stuck in IE 7 rendering mode by default. Even though IE 8 and now 9 have significantly upgraded the IE rendering engine to be more CSS and HTML compliant by default the Web Browser control will have none of it. IE 9 in particular – with its much improved CSS support and basic HTML 5 support is a big improvement and even though the IE control uses some of IE’s internal rendering technology it’s still stuck in the old IE 7 rendering by default. This applies whether you’re using the Web Browser control in a WPF application, a WinForms app, a FoxPro or VB classic application using the ActiveX control. Behind the scenes all these UI platforms use the COM interfaces and so you’re stuck by those same rules. Rendering Challenged To see what I’m talking about here are two screen shots rendering an HTML 5 doctype page that includes some CSS 3 functionality – rounded corners and border shadows - from an earlier post. One uses IE 9 as a standalone browser, and one uses a simple WPF form that includes the Web Browser control. IE 9 Browser: Web Browser control in a WPF form: The IE 9 page displays this HTML correctly – you see the rounded corners and shadow displayed. Obviously the latter rendering using the Web Browser control in a WPF application is a bit lacking. Not only are the new CSS features missing but the page also renders in Internet Explorer’s quirks mode so all the margins, padding etc. behave differently by default, even though there’s a CSS reset applied on this page. If you’re building an application that intends to use the Web Browser control for a live preview of some HTML this is clearly undesirable. Feature Delegation via Registry Hacks Fortunately starting with Internet Explore 8 and later there’s a fix for this problem via a registry setting. You can specify a registry key to specify which rendering mode and version of IE should be used by that application. These are not global mind you – they have to be enabled for each application individually. There are two different sets of keys for 32 bit and 64 bit applications. 32 bit: HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Internet Explorer\MAIN\FeatureControl\FEATURE_BROWSER_EMULATION Value Key: yourapplication.exe 64 bit: HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Microsoft\Internet Explorer\MAIN\FeatureControl\FEATURE_BROWSER_EMULATION Value Key: yourapplication.exe The value to set this key to is (taken from MSDN here) as decimal values: 9999 (0x270F) Internet Explorer 9. Webpages are displayed in IE9 Standards mode, regardless of the !DOCTYPE directive. 9000 (0x2328) Internet Explorer 9. Webpages containing standards-based !DOCTYPE directives are displayed in IE9 mode. 8888 (0x22B8) Webpages are displayed in IE8 Standards mode, regardless of the !DOCTYPE directive. 8000 (0x1F40) Webpages containing standards-based !DOCTYPE directives are displayed in IE8 mode. 7000 (0x1B58) Webpages containing standards-based !DOCTYPE directives are displayed in IE7 Standards mode. The added key looks something like this in the Registry Editor: With this in place my Html Html Help Builder application which has wwhelp.exe as its main executable now works with HTML 5 and CSS 3 documents in the same way that Internet Explorer 9 does. Incidentally I accidentally added an ‘empty’ DWORD value of 0 to my EXE name and that worked as well giving me IE 9 rendering. Although not documented I suspect 0 (or an invalid value) will default to the installed browser. Don’t have a good way to test this but if somebody could try this with IE 8 installed that would be great: What happens when setting 9000 with IE 8 installed? What happens when setting 0 with IE 8 installed? Don’t forget to add Keys for Host Environments If you’re developing your application in Visual Studio and you run the debugger you may find that your application is still not rendering right, but if you run the actual generated EXE from Explorer or the OS command prompt it works. That’s because when you run the debugger in Visual Studio it wraps your application into a debugging host container. For this reason you might want to also add another registry key for yourapp.vshost.exe on your development machine. If you’re developing in Visual FoxPro make sure you add a key for vfp9.exe to see the rendering adjustments in the Visual FoxPro development environment. Cleaner HTML - no more HTML mangling! There are a number of additional benefits to setting up rendering of the Web Browser control to the IE 9 engine (or even the IE 8 engine) beyond the obvious rendering functionality. IE 9 actually returns your HTML in something that resembles the original HTML formatting, as opposed to the IE 7 default format which mangled the original HTML content. If you do the following in the WPF application: private void button2_Click(object sender, RoutedEventArgs e) { dynamic doc = this.webBrowser.Document; MessageBox.Show(doc.body.outerHtml); } you get different output depending on the rendering mode active. With the default IE 7 rendering you get: <BODY><DIV> <H1>Rounded Corners and Shadows - Creating Dialogs in CSS</H1> <DIV class=toolbarcontainer><A class=hoverbutton href="./"><IMG src="../../css/images/home.gif"> Home</A> <A class=hoverbutton href="RoundedCornersAndShadows.htm"><IMG src="../../css/images/refresh.gif"> Refresh</A> </DIV> <DIV class=containercontent> <FIELDSET><LEGEND>Plain Box</LEGEND><!-- Simple Box with rounded corners and shadow --> <DIV style="BORDER-BOTTOM: steelblue 2px solid; BORDER-LEFT: steelblue 2px solid; WIDTH: 550px; BORDER-TOP: steelblue 2px solid; BORDER-RIGHT: steelblue 2px solid" class="roundbox boxshadow"> <DIV style="BACKGROUND: khaki" class="boxcontenttext roundbox">Simple Rounded Corner Box. </DIV></DIV></FIELDSET> <FIELDSET><LEGEND>Box with Header</LEGEND> <DIV style="BORDER-BOTTOM: steelblue 2px solid; BORDER-LEFT: steelblue 2px solid; WIDTH: 550px; BORDER-TOP: steelblue 2px solid; BORDER-RIGHT: steelblue 2px solid" class="roundbox boxshadow"> <DIV class="gridheaderleft roundbox-top">Box with a Header</DIV> <DIV style="BACKGROUND: khaki" class="boxcontenttext roundbox-bottom">Simple Rounded Corner Box. </DIV></DIV></FIELDSET> <FIELDSET><LEGEND>Dialog Style Window</LEGEND> <DIV style="POSITION: relative; WIDTH: 450px" id=divDialog class="dialog boxshadow" jQuery16107208195684204002="2"> <DIV style="POSITION: relative" class=dialog-header> <DIV class=closebox></DIV>User Sign-in <DIV class=closebox jQuery16107208195684204002="3"></DIV></DIV> <DIV class=descriptionheader>This dialog is draggable and closable</DIV> <DIV class=dialog-content><LABEL>Username:</LABEL> <INPUT name=txtUsername value=" "> <LABEL>Password</LABEL> <INPUT name=txtPassword value=" "> <HR> <INPUT id=btnLogin value=Login type=button> </DIV> <DIV class=dialog-statusbar>Ready</DIV></DIV></FIELDSET> </DIV> <SCRIPT type=text/javascript> $(document).ready(function () { $("#divDialog") .draggable({ handle: ".dialog-header" }) .closable({ handle: ".dialog-header", closeHandler: function () { alert("Window about to be closed."); return true; // true closes - false leaves open } }); }); </SCRIPT> </DIV></BODY> Now lest you think I’m out of my mind and create complete whacky HTML rooted in the last century, here’s the IE 9 rendering mode output which looks a heck of a lot cleaner and a lot closer to my original HTML of the page I’m accessing: <body> <div> <h1>Rounded Corners and Shadows - Creating Dialogs in CSS</h1> <div class="toolbarcontainer"> <a class="hoverbutton" href="./"> <img src="../../css/images/home.gif"> Home</a> <a class="hoverbutton" href="RoundedCornersAndShadows.htm"> <img src="../../css/images/refresh.gif"> Refresh</a> </div> <div class="containercontent"> <fieldset> <legend>Plain Box</legend> <!-- Simple Box with rounded corners and shadow --> <div style="border: 2px solid steelblue; width: 550px;" class="roundbox boxshadow"> <div style="background: khaki;" class="boxcontenttext roundbox"> Simple Rounded Corner Box. </div> </div> </fieldset> <fieldset> <legend>Box with Header</legend> <div style="border: 2px solid steelblue; width: 550px;" class="roundbox boxshadow"> <div class="gridheaderleft roundbox-top">Box with a Header</div> <div style="background: khaki;" class="boxcontenttext roundbox-bottom"> Simple Rounded Corner Box. </div> </div> </fieldset> <fieldset> <legend>Dialog Style Window</legend> <div style="width: 450px; position: relative;" id="divDialog" class="dialog boxshadow"> <div style="position: relative;" class="dialog-header"> <div class="closebox"></div> User Sign-in <div class="closebox"></div></div> <div class="descriptionheader">This dialog is draggable and closable</div> <div class="dialog-content"> <label>Username:</label> <input name="txtUsername" value=" " type="text"> <label>Password</label> <input name="txtPassword" value=" " type="text"> <hr/> <input id="btnLogin" value="Login" type="button"> </div> <div class="dialog-statusbar">Ready</div> </div> </fieldset> </div> <script type="text/javascript"> $(document).ready(function () { $("#divDialog") .draggable({ handle: ".dialog-header" }) .closable({ handle: ".dialog-header", closeHandler: function () { alert("Window about to be closed."); return true; // true closes - false leaves open } }); }); </script> </div> </body> IOW, in IE9 rendering mode IE9 is much closer (but not identical) to the original HTML from the page on the Web that we’re reading from. As a side note: Unfortunately, the browser feature emulation can't be applied against the Html Help (CHM) Engine in Windows which uses the Web Browser control (or COM interfaces anyway) to render Html Help content. I tried setting up hh.exe which is the help viewer, to use IE 9 rendering but a help file generated with CSS3 features will simply show in IE 7 mode. Bummer - this would have been a nice quick fix to allow help content served from CHM files to look better. HTML Editing leaves HTML formatting intact In the same vane, if you do any inline HTML editing in the control by setting content to be editable, IE 9’s control does a much more reasonable job of creating usable and somewhat valid HTML. It also leaves the original content alone other than the text your are editing or adding. No longer is the HTML output stripped of excess spaces and reformatted in IEs format. So if I do: private void button3_Click(object sender, RoutedEventArgs e) { dynamic doc = this.webBrowser.Document; doc.body.contentEditable = true; } and then make some changes to the document by typing into it using IE 9 mode, the document formatting stays intact and only the affected content is modified. The created HTML is reasonably clean (although it does lack proper XHTML formatting for things like <br/> <hr/>). This is very different from IE 7 mode which mangled the HTML as soon as the page was loaded into the control. Any editing you did stripped out all white space and lost all of your existing XHTML formatting. In IE 9 mode at least *most* of your original formatting stays intact. This is huge! In Html Help Builder I have supported HTML editing for a long time but the HTML mangling by the Web Browser control made it very difficult to edit the HTML later. Previously IE would mangle the HTML by stripping out spaces, upper casing all tags and converting many XHTML safe tags to its HTML 3 tags. Now IE leaves most of my document alone while editing, and creates cleaner and more compliant markup (with exception of self-closing elements like BR/HR). The end result is that I now have HTML editing in place that's much cleaner and actually capable of being manually edited. Caveats, Caveats, Caveats It wouldn't be Internet Explorer if there weren't some major compatibility issues involved in using this various browser version interaction. The biggest thing I ran into is that there are odd differences in some of the COM interfaces and what they return. I specifically ran into a problem with the document.selection.createRange() function which with IE 7 compatibility returns an expected text range object. When running in IE 8 or IE 9 mode however. I could not retrieve a valid text range with this code where loEdit is the WebBrowser control: loRange = loEdit.document.selection.CreateRange() The loRange object returned (here in FoxPro) had a length property of 0 but none of the other properties of the TextRange or TextRangeCollection objects were available. I figured this was due to some changed security settings but even after elevating the Intranet Security Zone and mucking with the other browser feature flags pertaining to security I had no luck. In the end I relented and used a JavaScript function in my editor document that returns a selection range object: function getselectionrange() { var range = document.selection.createRange(); return range; } and call that JavaScript function from my host applications code: *** Use a function in the document to get around HTML Editing issues loRange = loEdit.document.parentWindow.getselectionrange(.f.) and that does work correctly. This wasn't a big deal as I'm already loading a support script file into the editor page so all I had to do is add the function to this existing script file. You can find out more how to call script code in the Web Browser control from a host application in a previous post of mine. IE 8 and 9 also clamp down the security environment a little more than the default IE 7 control, so there may be other issues you run into. Other than the createRange() problem above I haven't seen anything else that is breaking in my code so far though and that's encouraging at least since it uses a lot of HTML document manipulation for the custom editor I've created (and would love to replace - any PROFESSIONAL alternatives anybody?) Registry Key Installation for your Application It’s important to remember that this registry setting is made per application, so most likely this is something you want to set up with your installer. Also remember that 32 and 64 bit settings require separate settings in the registry so if you’re creating your installer you most likely will want to set both keys in the registry preemptively for your application. I use Tarma Installer for all of my application installs and in Tarma I configure registry keys for both and set a flag to only install the latter key group in the 64 bit version: Because this setting is application specific you have to do this for every application you install unfortunately, but this also means that you can safely configure this setting in the registry because it is after only applied to your application. Another problem with install based installation is version detection. If IE 8 is installed I’d want 8000 for the value, if IE 9 is installed I want 9000. I can do this easily in code but in the installer this is much more difficult. I don’t have a good solution for this at the moment, but given that the app works with IE 7 mode now, IE 9 mode is just a bonus for the moment. If IE 9 is not installed and 9000 is used the default rendering will remain in use. It sure would be nice if we could specify the IE rendering mode as a property, but I suspect the ActiveX container has to know before it loads what actual version to load up and once loaded can only load a single version of IE. This would account for this annoying application level configuration… Summary The registry feature emulation has been available for quite some time, but I just found out about it today and started experimenting around with it. I’m stoked to see that this is available as I’d pretty much given up in ever seeing any better rendering in the Web Browser control. Now at least my apps can take advantage of newer HTML features. Now if we could only get better HTML Editing support somehow <snicker>… ah can’t have everything.© Rick Strahl, West Wind Technologies, 2005-2011Posted in .NET FoxPro WindowsRead the article
