We Keep Coding

Load External Custom Page and Execute Custom CSS or Javascript on The page

i'm building an online document portal that supports all Microsoft Office formats.
Instead of building my own module, i'm utilizing Google Docs Online Viewer since it already handles
this task properly, my only problem is it loads the header toolbar, which i dont want.
take for example This custom pdf-URL(i just googled for any pdf document), The navigation toolbar at the foot, but the header toobar, i want it hidden - all within the iFrame.
https://docs.google.com/viewer?url=http://www.scorpioncomputerservices.com/Press%20Coverage/Billgates.doc&embedded=false&controls=false
After Inspecting the Element on Chrome, i found the section of code controlling the element, problem is, how to hide this element on page load, by forcing a script/style to be executed on the page, while loading.
i would like to know if there's a way i could force-delete or hide the element controlling the toolbar within the iFrame, or better still if there are any alternatives to what i intend to do. my code would have looked like this
var obj = iframe.document.querySelectorAll('[role="toolbar"]');
obj.parentNode.removeElement(obj);
// or - i'm not sure anyof this would work.. and since it is loaded inside an iframe
// how do i execute this.
obj.remove();
i dont want my audience to be able to download the document, obviously curious developers might find a way, but thats going to be less than 2% - 5% of the total users.
how do i go about this please using javascript/CSS/or any library.

If you change the GET variable embedded to true the viewer won't display the top bar, however there's no way to edit the page inside the iFrame as Google has enabled cross site protection so the browser will prevent you from running any javascript to modify the content of the iFrame.
The only way to use the google document viewer is to get your site to load it in the background (not using an iFrame) and modify it before serving the page to the user.
Or alternitively I reccommend using an open source JS PDF viewer such as ViewerJS

Adding a button on top of loaded webpage

I am loading a webpage using loadURL in my main window and want to have a sticky button on at the bottom right for performing some action.
1) Is there any way i can have a button or custom navbar on top of loaded webpage in my window? Currently I've made another child window with height and width same as that of button and placed it on top but it doesn't look/sound good.
2) Is there any way to load a file of mine (say xyz.html) and then just have a section where that URL is loaded, since websites don't allow their webpages to be loaded in iframe any more.

1) Is there any way i can have a button or custom navbar on top of loaded webpage in my window? Currently I've made another child window with height and width same as that of button and placed it on top but it doesn't look/sound good.
Yes, this is definitely possible. The two ways that I can think of to do this include using the preload preference (see webPreferences) to preload some JavaScript before loading the actual page and through the webContents.executeJavaScript() function.
The latter method would look something like this:
win.webContents.executeJavaScript(`
document.body.insertAdjacentHTML('beforeend', '<p>Add your <span>sticky</span> button code here</p>');
`);
This method essentially injects HTML by using the webContents.executeJavaScript() function where win is your BrowserWindow.
2) Is there any way to load a file of mine (say xyz.html) and then just have a section where that URL is loaded, since websites don't allow their webpages to be loaded in iframe any more.
I bet there's some workaround to directly inject HTML but the methods I mentioned above (preloading or using executeJavaScript) would be much easier to accomplish this same task.
Hopefully, my answer could be of help.
Good luck!

Create a html window within another html window

I currently have a page with a few buttons. When I click on the button I want to open a new html page within the parent page. I want to do this in such a way that the parent window becomes transparent and the new page is over it. How can I go about doing this? I have tried to use Iframes but it does not give me the output that I want.

James Kirsch has given you one way to do it. Another is to have a hidden DIV that you show when you need it. In both cases, you may have to place a semi-transparent GIF image behind the DIV (or opened window) so someone can not do anything with the rest of the web page until they have finished interacting with the new window. You can do this by using the z-index CSS command. So the DIV would be:
<DIV style='z-index:100;'>....</DIV>
and the image would be something like
<img src="PUT YOUR PATH HERE" style='position:absolute;top:0%;left:0%;width:100%;height:100%;z-index:50;'>
This would put the GIF image halfway between the web page and the DIV.
The above is what is happening when you go to a website and they grey out everything behind the new window. It also keeps people from pushing on buttons when you don't want them to do so.
IFRAME stands for something like INSERTED_FRAME where the "INSERTED" part means it is inserted into your pre-existing web page. That is why it doesn't work. Neither will the FRAME command work because (again) it is embedded into the pre-existing web page. You are wanting to lay the new window on top of the web page. Thus, Mr. Kirsch' answer and my own. Note that you can also use a TABLE command to do the same thing - even if it is frowned upon to use tables presently. It is the STYLE part of the command that causes the HTML element to appear above the rest of the web page and not any particular HTML command itself. Also, the "position:absolute" part of the STYLE command is what overrides the web page's positioning of the element. Have fun!

In the Javascript have you considered using the following?
window.open();
This call appears to take parameters for Position and Size, you may be able to close the previous window also if you desire, or manipulate it.
Example:
window.open('this.html','','left=15,top=15,width=800,height=600');
Reference: here

How to click iframe element in wordpress (all pages)?

I have a wordpress website, where I have pages with artists. This is an example: http://chasefetti.paradigmrecordsinc.com/ of a page from my website
On the top I have an iframe from arena.com
I want after the page loads to click the play button.
If I do it on the arenas page http://arena.com/artist/chasefetti like this (using firebug):
document.getElementsByClassName("fg icon-play-fg")[0].click()
it works, but on my website I guess it doesn't know about accessing the iframe.
How can I specify to access that iframe ?
Also the full mission that I gotta do is to play that button for each page. I am thinking to add a jquery that does what I want to do, to the templates page.
My main problem is accessing that element from the iframe

As far as I know(I tired it once) you can't do that, unless the source of the iframe is on the same site as yours, which isn't the case here.
Also check this same-origin policy.

Firefox extension that overlays persistent iFrame?

Is it possible to build a Firefox extension that displays a floating, persistent iFrame over the page content?
I know it's possible to add iFrames using XUL. For instance, you can add an iFrame to a persistent sidebar. However, I want the iFrame to float over the page content, not cause the content to shrink. So far, my only option is to add the iFrame to the DOM, then use CSS "fixed" positioning to float the iFrame.
The iFrame must also persist across page loads, exactly as the sidebar does. Adding an iFrame to the DOM, unfortunately, causes the iFrame to vanish when the browser renders a new page (e.g., after clicking a link).
Any clues?
Thanks!

Another add-on you can look at is Shopping Helper It has an iframe at the bottom whenever the page is displayed a product

Yes. I was able to do this by setting the attribute noautohide in the panel you use.
E.g.
<panel id="yourOverlay" noautohide="true">

You might be able to do something like this with Greasemonkey, it allows you to customize how web pages look and you could make your script available to others.