CODEWITHSUNDEEP
cocoadomwebkit
gargantuan
gargantuan

Reputation: 8944

How to add HTML elements to a Cocoa Webview

I've been trying to add HTML content to a web view, but can't seem to get any results. The Apple documentation is very sparse and of the few examples I've found online, I can't seem to get any of them working. As far as I can tell, this is how it's supposed to work, but doesn't.

To start, I have a very simple HTML document that I load into the webview. I'm trying to add some HTML content to the #container div

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>HTML TEST</title>

        <style type="text/css">       
            .test {
                display: block;
                border: #000 1px solid;
                width: 100px;
                height: 100px;
                background-color: #0F0;

            }            
         </style>
    </head>
    <body>   
        <p>hello world</p>
        <div id="container"></div>
    </body>
</html>

The WebView is inside a custom view. The header is very straight forward.

// NodeTest.h
#import <Cocoa/Cocoa.h>
#import <WebKit/WebKit.h>

@interface NodeTest : NSView
@property (nonatomic, retain) IBOutlet WebView *webview;
@end

So, in awakefromnib, I load the basic html document, attempt to get the container div and insert an new HTML element into it, with the class name "test". Which, according to the HTML file should have a black border, green fill and should be 100x100px.

#import "NodeTest.h"

@implementation NodeTest

@synthesize webview;

- (id)initWithFrame:(NSRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        // Initialization code here.
    }

    return self;
}

- (void) awakeFromNib {
    // Load the HTML document into the webview
    NSURL *url = [NSURL fileURLWithPath:[[NSBundle mainBundle] pathForResource:@"TestDocument" ofType:@"html"]];
    NSURLRequest *req = [NSURLRequest requestWithURL:url];
    [[webview mainFrame] loadRequest:req];

    [webview setEditable:YES];

    DOMDocument *domDoc = [[webview mainFrame] DOMDocument];

    // Get the container div. I've tried this with and without '#'
    DOMHTMLElement *container = (DOMHTMLElement *)[domDoc getElementById:@"container"];

    // Create a new HTML element
    DOMHTMLElement *myDiv = (DOMHTMLElement *)[domDoc createElement:@"div"];
    [myDiv setInnerHTML:@"<p>Boo!</p>"];
    [myDiv setClassName:@"test"];

    // Add the element to the container div
    [container appendChild:myDiv];

    [webview setNeedsDisplay:YES];

}

- (void)drawRect:(NSRect)dirtyRect
{
    // Drawing code here.
}

@end

Loading the HTML content into the WebView is fine. It's all there. But I can't for the life of me figure out how to add new HTML elements. If anyone has any pointers, I'd love to hear them. This is driving me mad.

Upvotes: 1

Views: 2862

Answers (1)

Adam Roben
Adam Roben

Reputation: 784

WebKit loads requests asynchronously, so you need to spin the run loop after calling -[WebFrame loadRequest:] until the load is complete, and only then try to access the DOM. The common way to spin the run loop is just to return from -awakeFromNib, but you can also spin a nested run loop using the NSRunLoop APIs if needed. The standard way to find out when the load is complete is to give the WebView a WebFrameLoadDelegate and wait until its -webView:didFinishLoadForFrame: method is called. (If you are loading a resource that contains subframes you'll want to wait until the main frame is passed to that method.)

Once the load is complete the code you have listed that accesses -DOMDocument, etc., should work just fine.

Upvotes: 2

Related Questions