hide a div on a website - javascript

I know to hide a div on a website if I have the source control. I can set div display to none or call javascript hide() on the div id. But how can I permanently remove a div from a website for which I don't have a source control. Just for my rendering, if I load or refresh the page, I should see that div gone. Are there any basic work around or hacks for that? I don't want to inspect and set display none for div every time I refresh the website.

Have a look at Tampermonkey for Chrome
or Greasemonkey for Firefox

You might use a (somewhat weird :) construct: build your own HTML document, containing only:
an <iframe src="---your external page--->"
a <script> where you explicitly add style="display: none;" to all elements where you need it

Browser (Chrome in my example) extensions has needed functionality.
You can use Custom JavaScript for websites extension, and configure additional code execution for every page reload without opening DevTools.

Related

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

Disable download button from iframe tag

Im using the iframe tag to display videos in my site, but it keeps showing a download button (see the picture bellow) that I need to disable.
<iframe src="http://techslides.com/demos/sample-videos/small.mp"></iframe>
Is it possible to disable and to control this?
It should not be able to if the pages are from different domains.
It might work when the two pages are from the same domain. In this case you can try:
window.frames[0].document.getElementById('buttonId') ...//you can use javascript or jquery to remove this elment

Inject Code into an iFrame to Hide a Specific Element

I am attempting to hide an element loaded in an iFrame using CSS/jQuery/Javascript. The iFrame content is located on a different domain. I am trying to hide a button on the page loaded inside the iFrame. The buttons HTML is:
<a href="/Communication" id="lbtnMessage" class="bsrpBlueButtonLink">
<div class="NavButtonMess">
<span>Messages</span>
</div>
</a>
I have read mixed answers around the Internet on whether or not this is possible. I just need to be able to hide this block of code in the iFrame source. I this at all possible?
One possible solution is to use postMessage, obviously you need to control both domains.
This jquery plugin handles it pretty well : http://benalman.com/projects/jquery-postmessage-plugin/
If you don't control both domains then, due to security this is impossible. All you can do, is resizing / hiding the iframe.

Change onload value within iframe using javascript

I have a page named somepage.html and the page otherpage.html as iframe in somepage.html
the source of somepage.html is
<body><iframe src="otherpage.html name="frame"></body>
The source of otherpage.html is
<body onload="somefunction()" onunload="otherfunction" >the other content here</body>
I want to disable the onload function without touching the code of otherpage.html(iframe). I want to disable it on somepage.html
Thank you in advance
In IE you can use the security="restricted" attribute. It doesn't do what you want (disable javascript altogether) but should force the IFRAME to run in a differnent zone and prevent it from accessing your page.
The HTML 5 sandbox attribute, when implemented, may also be close to what you are looking for. In particular allow-scripts. Now you just need it to be implemented in a majority of user's browsers ;)

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.

Categories