Making modifications to the CSS within an embedded iframe webpage

Assigned with the task of implementing a specific method on a SharePoint 2013 site. Let's dive in.

Situation: - Within a page on a SharePoint 2013 site, there is a "content editor" web part that displays a page from the same domain/site collection. The code below (not authored by me) has been inserted into the content editor and successfully displays the page.

Challenge - My objective is to remove the global navigation from the page within the content editor, presumably done through an Iframe. Using F12 dev tools in IE11, I have identified the CSS class ms-dialog #globalNavBox and set its display to "none", achieving the desired look.

The only hurdle remaining is how to execute this action using some form of code on the embedded page itself.??

This is the current code used in the content editor to display the page for modification:

#mydiv{

width:1280px; height:1000px;
 overflow:hidden;
 ;
}

#myframe{
 ;
 top:-190px;
 left:-100px;
 width:1080px;
 height:1000px;

}
</style>
<div id="mydiv">
<iframe id="myframe" src="/gen/genInduction/Lists...blah scrolling="no"></iframe>&#160;</div>

As of now, I am unsure of how to include the code (if possible) to remove the css .ms-dialog #globalNavBox {display: none;} so that upon page display, the global navigation is eliminated.

I trust this explanation clarifies my situation, as it marks my first time seeking assistance on this platform. Despite extensive prior research, attempts to resolve this issue have been unsuccessful as the solution eludes me.

Answer №1

Insert the code below within your web page, placing it after the iframe.

<script>
document.getElementById("myframe").contentDocument.getElementById("globalNavBox").style.display="none";
</script>

Answer №2

It is my understanding that you will still have access to the content of the iframe as long as both elements are from the same domain, unless the iframe has been sandboxed (which is not the case in the provided example). Building upon JBiserkov's concise response, I would like to address some considerations regarding the loading process of an iframe. In certain scenarios, there might be a slight delay in the iframe loading, so it is advisable to anticipate this possibility. I found the following resources helpful in grasping the concept of iframes:

Iframes, Onload, and Document.domain

Iframe Tutorials

-Information about the iframe

var iFrame = document.getElementById('myframe'),

-Accessing the document object of the iframe

-The use of this shortened conditional expression is crucial for interacting with the contents within the iframe.

iDoc = iFrame.contentDocument ? iFrame.contentDocument : iFrame.contentWindow.document,

-Identifying the target element #globalNavBox

gNav = iDoc.getElementById('globalNavBox');

-Upon the iframe being fully loaded, altering the style of globalNavBox to "display" and setting it to "none"

iframe.onload = function () {
        gNav.style.display = 'none';
};

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ensuring Consistent Visual Harmony Across Linked Elements

As part of my project developing an iPad app with PhoneGap and jQuery Mobile, I am looking to incorporate a preview pane within a carousel. This preview pane should display smaller versions of the other panes scaled inside it. The panes are dynamic and upd ...

Eslint problem: no-duplicates Fixing issue: cannot load resolver "node"

After performing an update on my project (a SPA using VueJS and Quasar Framework) today with npm update, I am encountering difficulties running it. An error message no-duplicates Resolve error: unable to load resolver "node" keeps appearing in various mod ...

Tips for sending a parameter to a URL from a controller using AngularJS

I am currently working on a feature where I need to combine adding and editing functionalities on one page. The items are listed in a table below, and when the edit button is clicked, I want to pass the ID of that specific item in the URL. This way, if the ...

Text that spans across multiple lines

I have a multi-line text that I need to adapt to a div. For example: https://i.stack.imgur.com/mtZmf.png Is there a way to adjust the text within the div? Can we prevent the blue spacing after the word "text" using CSS? If I have various texts of differ ...

Issue with Google Tag Manager click event not propagating to parent element

I am currently configuring Google Tag Manager for a client's website and encountering difficulties in getting click event tags to activate. Although I have set the trigger to activate based on the button's CSS selector, the actual button contain ...

align-content and justify-content in flexbox are not producing the desired results

align-content and justify-content don't appear to be working when I test them in both Chrome and Firefox. I'm puzzled as to why they're not functioning as expected. #container { display: flex; flex-wrap: wrap; justify-content: cent ...

Using optional chaining on the left side in JavaScript is a convenient feature

Can the optional chaining operator be used on the left side of an assignment (=) in JavaScript? const building = {} building?.floor?.apartment?.number = 3; // Is this functionality supported? ...

Modifying the color of drawings on a Javascript canvas

I am currently working on developing a drawing board using HTML and JavaScript (Node.js on the server side). One challenge I'm facing is implementing a color picker that allows users to change the paint color dynamically. While I could hard code the c ...

Tips for transforming an SQL Server query into JSON format

I need to construct a table in a view utilizing the output of this particular SQL Query SELECT f.empresaid, e.fantasia AS Company, f.filialid, f.fantasia AS Branch, u.consultorid ...

javascript assign array to object key

Looking at this basic array: const arr = [ { "id": 2, "color": "red" }, { "id": 1, "color": "blue" }, { "id": 2, "color": "yellow" ...

An existing INPUT value can be modified by dynamically adding or subtracting values from SELECT OPTION

I currently have an <input readonly> field that displays the total_price value retrieved from a shopping cart stored in the database table. Moreover, I have included a <select> element with different transport options that can either increase o ...

Within an HTML document, select one checkbox out of two checkboxes without utilizing JQuery

Is there a way to select only one checkbox out of two? I know it can be done easily using Jquery, but is there a default option in HTML for this as well? I have exactly 2 checkboxes. Thank you. code: <input type="checkbox" value="1" name="foo" /> ...

JavaScript: Implementing a retry mechanism for asynchronous readFile() operation

My goal is to implement a JavaScript function that reads a file, but the file needs to be downloaded first and may not be immediately available. If an attempt to access the file using readFile() fails and lands in the catch block, I want to retry the actio ...

Confirming the Separation of Time and Date with jQuery

Currently, I am utilizing a specific validation tool in my project. My goal is to implement a validation check that ensures the start date precedes the end date. The date input has been segmented into various dropdown menus. Below is an example of the HT ...

d3: It appears that my routes are replicating themselves, and I am unable to ascertain the cause

I've been diving deep into D3, studying the works of Mike Bostock and other experts in the field. I'm also going through Scott Murray's book on Interactive Data Visualization specifically focusing on D3. At the moment, my project involves c ...

Linking a radio button to another mirrored radio button for selection

It should be a straightforward task. I have two sets of radio buttons that mirror each other, known as set A and set B Set A includes buttons 1, 2, and 3 Set B also consists of buttons 1, 2, and 3 The desired behavior is for clicking button 1 in set A t ...

Expansive picture within a Bootstrap container

How can I create a wide image within a Bootstrap container? <div class="container-fluid"> <div class="container"> <img data-layout="wide" src="big-image.jpg" alt="Big image" class="embedded_image"> </div> </div& ...

Adding a JSON array to all JSON objects in JavaScript: A step-by-step guide

Here is a JSON Object that I am working with: { "status": "CREATED", "overrides": { "name": "test_override" }, "package_name": "test", "name": "app1", "defaults": { "job": { "example": { "executors_num": "2", "fr ...

Dealing with Class and Instance Problems in Mocha / Sinon Unit Testing for JavaScript

Currently, I am working on unit testing an express middleware that relies on custom classes I have developed. Middleware.js const MyClass = require('../../lib/MyClass'); const myClassInstance = new MyClass(); function someMiddleware(req, ...

Is it possible to employ getBoundingClientRect() for several elements sharing the same class?

I'm in the process of implementing sticky navigation on my website that will dynamically change as users scroll through different sections. Specifically, when scrolling over a section marked with the class .dark, I want the logo and text color to swit ...