Fix Live CSS with an iframe element

For #7935 and #7785 

Bugs to fix:
- [x] Only updating the iframe if the same CSS file is used for both iframe and page
- [ ] Changes to the iframe's HTML will only take effect on save
- [ ] Error message on startup (in console)
I don't know this code well enough to know what it's trying to do, but just wanted to point out that there's no concept of "first" (or "index" for that matter) in associative arrays -- the keys are unordered.  I'm guessing this code is assuming only _one_ key exists, and it just wants its value, but it doesn't know what the one key is...

If that's the case, you could do it more efficiently with a utiltiy like this:

```
function getOnlyValue(obj) {
    for (var key in obj) {
        if (_.has(obj, key)) return obj[key];
    }
}
```

Or, to fail fast when the single-key assumption is wrong:

```
function getOnlyValue(obj) {
    var foundKey;
    for (var key in obj) {
        if (_.has(obj, key)) {
            if (foundKey) throw new Error("Object has multiple keys: " + key + ", " + foundKey);
            foundKey = key;
        }
    }
    return obj[foundKey];
}
```