-
April 9th, 2014, 04:32 PM
#1
CDHtmlDialog: Changing HTML File Dynamically
Hello there,
I am using CDHtmlDialog in my MFC application to create a UI with HTML, CSS & JavaScript.
In my project there's one dialog created from CDHtmlDialog and a corresponding HTML file for that dialog.
Now during run time i want to change the contents of the HTML file.
Not just the HTML part, i want to change the CSS & JavaScript too.
So basically what am trying to do is, change the entire content of the default HTML file.
Is this possible? If yes, how can i do that?
Thanks in advance!
-
April 10th, 2014, 01:20 AM
#2
Re: CDHtmlDialog: Changing HTML File Dynamically
I never worked with CDHtmlDialog though, but perhaps IHTMLDocument2 interface will help you?
Victor Nijegorodov
-
April 10th, 2014, 03:42 AM
#3
Re: CDHtmlDialog: Changing HTML File Dynamically
Code:
void CHtmlDlgTestDlg::Test()
{
AfxMessageBox(TEXT("Test"));
CComPtr<IHTMLDocument2> pDoc2;
HRESULT hr = GetDHtmlDocument(&pDoc2);
if (SUCCEEDED(hr))
{
// change whatever element you want here with pDoc2...
// ... and save the doc
CComQIPtr<IHTMLDocument3> pDoc3 = pDoc2;
CComBSTR docStr;
CComPtr<IHTMLElement> pElem;
hr = pDoc3->get_documentElement(&pElem);
if (SUCCEEDED(hr))
{
hr = pElem->get_innerHTML(&docStr);
FILE* f = fopen("1.html", "w");
if (f)
{
CStringA str(docStr);
fwrite(str.GetBuffer(), 1, str.GetLength(), f);
fclose(f);
}
}
}
}
Last edited by Igor Vartanov; April 10th, 2014 at 03:49 AM.
Best regards,
Igor
-
April 10th, 2014, 06:39 AM
#4
Re: CDHtmlDialog: Changing HTML File Dynamically
just navigate to a new html page.
-
April 10th, 2014, 09:51 AM
#5
Re: CDHtmlDialog: Changing HTML File Dynamically
Currently my CDHtmlDialog application (client) has a html file compiled into it as a resource. This html has bunch of CSS, JavaScript and HTML tags in it.
Now during run time of the application i update the DIV tags dynamically by calling a JavaScript function from C++ code. This part works fine. I can update HTML content from C++ code.
The capability i need is to update the entire html file. i.e., update CSS, JavaScript & HTML.
My app talks to a server and the server will send html content, which will include not just HTML tags but also CSS & JavaScript.
So basically i get a full html page from the server and that i need to update into the html file in the client.
In your example it looks like you're updating an html file which is located in the hard disk. But in this case it is a html file which is already part of the resources. For e.g, if my project name is "MyHTMLClient", then the default name provided to html file by Visual Studio is "MyHTMLClient.htm". And i need to update this html file.
Any ideas how to do this?
-
April 10th, 2014, 11:04 AM
#6
Re: CDHtmlDialog: Changing HTML File Dynamically
Hello Igor,
I just played around with your code a little bit and figured that by using "put_innerHTML(BSTR)" i can update the entire content of a html page.
Is that an efficient way of doing it?
Thanks
-
April 10th, 2014, 12:58 PM
#7
Re: CDHtmlDialog: Changing HTML File Dynamically
Trying out a few things using the "put_innerHTML(BSTR)" function, i figured that CSS & HTML works fine.
But for some reason the JavaScript function doesn't work. It gives an error saying the JS function is undefined.
Below is the html am trying to load using "put_innerHTML(BSTR)" function.
<!DOCTYPE html> <html lang=\"en\"> <head><style> #button1 {background-color: green; cursor: pointer} </style> </head> <body> <script> var myClick; myClick = function() { alert(\"Hooooooooorayyyyyyyy!!!\"); } </script> <p id='K2'> <b>Click on My Button!</b> </p> <button ID=\"button1\" onClick=\"myClick()\"> myButton </button> </body> </html>
The error i get is "myClick is undefined"
Where as the CSS & HTML button and text gets displayed correctly.
-
April 10th, 2014, 01:20 PM
#8
Re: CDHtmlDialog: Changing HTML File Dynamically
Originally Posted by Don Guy
Trying out a few things using the "put_innerHTML(BSTR)" function, i figured that CSS & HTML works fine.
But for some reason the JavaScript function doesn't work. It gives an error saying the JS function is undefined.
Below is the html am trying to load using "put_innerHTML(BSTR)" function.
<!DOCTYPE html> <html lang=\"en\"> <head><style> #button1 {background-color: green; cursor: pointer} </style> </head> <body> <script> var myClick; myClick = function() { alert(\"Hooooooooorayyyyyyyy!!!\"); } </script> <p id='K2'> <b>Click on My Button!</b> </p> <button ID=\"button1\" onClick=\"myClick()\"> myButton </button> </body> </html>
The error i get is "myClick is undefined"
Where as the CSS & HTML button and text gets displayed correctly.
Save off the html after the put call and see what is missing. That will determine what you need to replace (you may need to replace the outer html to include the javascript).
Btw, I did this years ago using ATL that hosted the web browser control. What I was doing was interactive help (patterned after MS' "Help and Support").
If I recall correctly, I had various html pages embedded as resources. You can also expose IDispatch interfaces that the html pages can call to retrieve data to display (or you can do a find/replace on tokens within the html before you load it in the browser control).
-
April 10th, 2014, 02:31 PM
#9
Re: CDHtmlDialog: Changing HTML File Dynamically
I saved the html after doing a put_innerHTML() function call and found that everything's there. If i save that to another html file and open in my browser, then it works correctly.
Not sure what's going on when doing inside the CDHtmlDialog.
What's the difference between put_innerHTML() & put_outerHTML()? Is that going to make a difference?
Below is html that am passing as a string to put_innerHTML() function.
<head>
<style>
#button1 {background-color: green; cursor: pointer}
</style>
</head>
<body>
<script>
var myClick;
myClick = function() { alert("Hooooooooorayyyyyyyy!!!"); }
</script>
<p id="K2"> <b>Click on My Button!</b> </p>
<button id="button1" onclick="myClick()"> myButton </button>
</body>
-
April 10th, 2014, 03:31 PM
#10
Re: CDHtmlDialog: Changing HTML File Dynamically
Originally Posted by Don Guy
What's the difference between put_innerHTML() & put_outerHTML()? Is that going to make a difference?
Right click in the browser window and view source to see any differences.
It might be that you need to have the browser [re]load the page to get the differences to show up (or recognize that the scripts have changed). You may need to generate a temporary file and load that up when you switch pages. Years ago, I was able to reload dynamically but I don't remember the details (and maybe things have changed since then).
-
April 10th, 2014, 04:59 PM
#11
Re: CDHtmlDialog: Changing HTML File Dynamically
When i look at the browser source after calling the put_innerHTML() function, it still shows the old content, but actually the browser display get's updated with newer content. For some reason the source is not getting updated.
Below is the code that am using. This is actually updated from what Igor has provided in his reply.
void UpdateHtmlSkin()
{
CComPtr<IHTMLDocument2> pDoc2;
HRESULT hr = GetDHtmlDocument(&pDoc2);
if (SUCCEEDED(hr))
{
CComBSTR docStr;
CComPtr<IHTMLElement> pElem;
pDoc2->get_activeElement(&pElem);
pElem->put_innerHTML(_T("<style> #button1 {background-color: cyan; cursor: pointer} </style> <body> <script> var myClick; myClick = function() { alert(\"Hooooooooorayyyyyyyy!!!\"); } </script> <p id='K2'> <b>Click On My Button!</b> </p> <button ID=\"button1\" onClick=\"myClick();\"> myButton </button> </body>"));
if (SUCCEEDED(hr))
{
hr = pElem->get_innerHTML(&docStr);
FILE* f = fopen("C:\\1inner.txt", "w");
if (f)
{
CStringA str(docStr);
fwrite(str.GetBuffer(), 1, str.GetLength(), f);
fclose(f);
}
}
}
}
-
April 11th, 2014, 06:26 AM
#12
Re: CDHtmlDialog: Changing HTML File Dynamically
Originally Posted by Don Guy
The capability i need is to update the entire html file. i.e., update CSS, JavaScript & HTML.
Like I said in #4. Navigate to a new page that holds the new css and javascript (and html).
-
April 11th, 2014, 06:36 AM
#13
Re: CDHtmlDialog: Changing HTML File Dynamically
Originally Posted by Don Guy
What's the difference between put_innerHTML() & put_outerHTML()? Is that going to make a difference?
innerHTML is the html that is INSIDE the tags.
outerhtml is the html including the tags (and including any attributes in the tag).
Below is html that am passing as a string to put_innerHTML() function.
This doesn't work. Script is not technically part of the inner/outer html stream. Yes, you can insert the tags, and the HTML renderer will simply ignore them. This isn't any different from adding html with invalid tags.
to add script, you need to create a script element (createElement), set the script text and type, then add the script element into the head element (appendChild).
-
April 11th, 2014, 06:38 AM
#14
Re: CDHtmlDialog: Changing HTML File Dynamically
Originally Posted by Don Guy
When i look at the browser source after calling the put_innerHTML() function, it still shows the old content, but actually the browser display get's updated with newer content. For some reason the source is not getting updated.
This is normal, the view source shows the Original source that was navigated to. It doesn't show the current content as it has been modified/augmented via script. If you want the current content, you need to obtain this via the DOM.
-
April 11th, 2014, 09:51 AM
#15
Re: CDHtmlDialog: Changing HTML File Dynamically
Originally Posted by OReubens
This doesn't work. Script is not technically part of the inner/outer html stream. Yes, you can insert the tags, and the HTML renderer will simply ignore them. This isn't any different from adding html with invalid tags.
to add script, you need to create a script element (createElement), set the script text and type, then add the script element into the head element (appendChild).
I am trying to pass the script from C++ code to the HTML page. Do you have any sample code that does that?
I see that createElement and appendChild are generally used in JavaScript code. Can i do that from C++ code?
Please share some sample code that shows how to do this.
Thanks!
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|