Javascript hide child nodes of a object elements data value

Question

I have googled and given the generic nature of the elements type 'object' I haven't found the needle in the haystack that answers my question, it's been few hours so I am admitting defeat and asking for help.

I have:

<object id ="siteconfigwindow" name="siteconfigwindow" type="text/html" 
        data="blank.html" width="100%" height="600" 
        onload="hideeditcontrols()">

I have javascript that successfully changes the data value of the object element to a html page with content with some control I wish to hide.

document.getElementsByName("siteconfigwindow")[0].data = url;

url that successfully loads contains this:

<div style="text-align:center;">
    <input id="nodeAdd" type="submit" name="addButton">
    <input id="nodeEdit" type="submit" name="editButton">
    <input id="nodeDelete" type="button" name="nodeDelete">
</div>

The controls I wish to hide are easily hidden when viewing the source page and issuing a console command such as:

document.getElementById("nodeAdd").parentNode.style.visibility = 'hidden'

But the same command errors out with null object errors when issued via console on the custom page with the object element.

I'm all for scrapping the whole code if someone knows a better way to display the source page and hide that div.

Both pages are on my intranet and same server so I do not believe this is security related. My thanks in advance for any assistance.

Do you really need to use an object/frame? Why not injecting the div directly in the main page (with Ajax)? — bfavaretto, Jul 26 '13 at 01:07
thanks for the suggestion, a quick search came up with this: http://stackoverflow.com/questions/6608494/include-a-webpage-inside-a-div I'll look into that in the morning, more work than expected but seems simple enough. If anyone else has suggestions I'll welcome those as well. — James Burt, Jul 26 '13 at 01:31

score 0 · Accepted Answer · edited May 23 '17 at 11:57

0

You can do this with an iframe as long as you don't run afoul of same origin issue.

The key is to access the contentDocument property of the iframe element (works on Chrome - for cross browser see: iframe.contentDocument Not Working in IE8 and ...

For example - this page:

<html>
<head>
</head>
<body>

<iframe id='siteconfigwindow' src=''></iframe>

<script>
    document.getElementById("siteconfigwindow").src = 'test.html';
    document.getElementById("siteconfigwindow").addEventListener('load', function() {
        this.contentDocument.getElementById("nodeAdd").parentNode.style.visibility = 'hidden'
    });
</script> 

</body>
</html>

Successfully loads and hides the button group you've described above:

<html>
<head>
</head>
<body>

    <div style="text-align:center;">
        <input id="nodeAdd" type="submit" name="addButton">
        <input id="nodeEdit" type="submit" name="editButton">
        <input id="nodeDelete" type="button" name="nodeDelete">
    </div>

</body>
</html>

edited May 23 '17 at 11:57

Community

1
1

answered Jul 26 '13 at 05:13

dc5

12,341
2
35
47

Thanks, that was what I was going to do originally(sorry forgot that bit of background info) but all my content editors were yelling at my about iframe being depreciated and not to use it. But time is money, I'll throw this up there so the users have what they need for now and toy around with the Ajax solution at leisure. – James Burt Jul 26 '13 at 15:12
Well - they are wrong as far as I can tell. They are officially part of the HTML5 spec and have even been enhanced. They leave a bad taste for most, but sometimes they can be useful. [Why were frames deprecated in HTML5, but not iFrames?](http://programmers.stackexchange.com/questions/144515/why-were-frames-deprecated-in-html5-but-not-iframes) – dc5 Jul 26 '13 at 15:40
I pretty much used the iframe example verbatim except I moved the inline function out into it's own function so I could call it as needed by other processes and added some code to hide other elemetns. I didn't run into any rendering issues with current IE9, Chrome or FF which is what my users should have (one thing nice about a corporate lan, everyone should be running the same version of browsers) – James Burt Jul 26 '13 at 17:05

Javascript hide child nodes of a object elements data value

1 Answers1