I'm feeling lost on how to accomplish this task. Despite my efforts, I have been unable to find a solution so far. Perhaps utilizing javascript might be the key here, yet I am uncertain about integrating it into the existing script that I use for modifying the site's theme.
Any help would be greatly appreciated!
Attempting to alter the content of an externally hosted iframe is restricted by cross-domain site scripting rules.
Perhaps you're wondering about possible changes to make, here are a couple of options:
<iframe id="theframe" src="something.pdf" style="background-color: #FFF;" />
You could also achieve this using CSS:
<iframe id="theframe" src="somthing.pdf"/>
CSS:
#theframe{
background-color: blue;
}
If there's any confusion about your request, please clarify if you want the change to be immediate or only when prompted.
EDIT: The color change will only display if the source fails to load, otherwise it will remain as is.
EDIT: To implement this with a button (using the example above), I've added a single button along with the script. Hopefully, this helps:
<script>
function change(){
if(document.getElementById("thebutton").innerHTML == "light"){
document.getElementById("thebutton").innerHTML = "dark";
document.getElementById("theframe").contentWindow.document.body.style.backgroundColor = "white";
}
else{
document.getElementById("thebutton").innerHTML = "light";
document.getElementById("theframe").contentWindow.document.body.style.backgroundColor = "black";
}
}
</script>
<button id="thebutton" type="button" onclick="change();">Dark</button>
<iframe id="theframe" src="" />
If you'd like to use two buttons for this task, simply insert the code that modifies the frame into each button, for example:
<button id="thebutton" type="button" onclick="document.getElementById("theframe").contentWindow.document.body.style.backgroundColor = "black";">Dark</button>
<button id="thebutton" type="button" onclick="document.getElementById("theframe").contentWindow.document.body.style.backgroundColor = "white";">Light</button>
<iframe id="theframe" src="" />
I hope this information proves helpful. If it answers your question, feel free to mark it so others can benefit from it as well.
After making the switch to ember-data#canary, I encountered a problem with r.js failing. [Error: Error: ENOENT, no such file or directory '/scripts/lib/ember-data/ember-data/core.js' In module tree: app/main app/app embe ...
When faced with a query like the following: r.db('universe') .table('Star') .getAll( r.db('universe').table('Ship').get(idShip)('idCurrentGalaxy'), {index: 'idGalaxy'} ) .changes ...
I am currently in the process of converting a basic SFC to utilize the new Vue CompositionAPI. The original code functions perfectly: export default { data() { return { miniState: true } }, methods: { setMiniState(state) { if ...
Is there a way to link two spheres together with a line? I'm looking for a solution that mimics two balls connected by a rope or something elastic. Does anyone have any examples to share? ...
In my upcoming nextjs project, I've incorporated react-leaflet. It behaves flawlessly in dev mode. However, upon attempting to build the project, it throws a ReferenceError: window is not defined. Despite setting ssr to false in dynamic, the error per ...
Trying to create a custom mixin for underlining text, similar to a polyfill for CSS3 text-decoration properties (line, style, color) that are not yet supported by browsers. The idea is to draw the proper line on a canvas, convert it to a data-uri, and the ...
Our goal is to populate a table by parsing a JSON object with predefined header items. (excerpt from an answer to a previous query) var stories = {}; for (var i=0; i<QueryResults.Results.length; i++) { var result = QueryResults.Results[i], ...
I am working with HTML code that includes an image and text <div class="subcontainer1"> <img src="a.png" alt="" class="imgcolumn"> <h3 class="header3">Hello</h3> </div> This setup places the content above the image. ...
I'm looking to create a floating effect for my chart by adding shadows to the canvas element that holds it. Despite trying various methods, I can't seem to get the shadow effect to work. Here is the code snippet I have for adding shadows: <sc ...
I have a set of three divs aligned horizontally within a parent div. As the browser width changes, one of the child divs wraps under the other two when the width is reduced, transitioning them to a vertical alignment. Here are some visual examples: View i ...
I've encountered a small issue. I have checkboxes that correspond to different divs, and when checked, the name of the div is sent to the server. However, when unchecking the checkboxes in a specific order, the array doesn't update correctly. $ ...
Is it possible to align a button with a textbox using the Bootstrap 4 layout system? https://i.sstatic.net/tN9II.png <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/> <div ...
<%= link_to root_path do %> <div class=""> <div style="background-image:<%= image_tag " image1.png "%>"> </div> <div> <h2>Title</h2> <p>Paragraph</p> </div& ...
I am currently using version 4.5 of the Vue CLI plugin. I have created a component that takes in a title as a prop. This component has been converted into a web component and added to an HTML webpage (which is not a Vue JS project) Now, I am attempting to ...
I've been experimenting with tinymce npm and following their guide, but I've hit a roadblock. Including this line of code in the <head> of your HTML page is crucial: <script src="/path/to/tinymce.min.js"></script>. So, I place ...
I've been attempting to construct a menu that initially appears as a small icon in the corner. Upon pressing a key (currently set to click), the checkbox is activated, initiating the animation. Most of the menu and animation are functional at this po ...
I have a Grid Panel rendered in a DIV without specifying any width for either the DIV or the Grid Panel. I want them to take up all available browser width, but the Grid does not resize itself when the browser window is resized by the user. I have tried va ...
When a button is pressed on my website, a Bootstrap modal containing a Chart.JS is called. The data for this chart is loaded via an Ajax call as shown below: function loadReports(data) { $.ajax({ type: "POST", url: "Default.aspx/getRep ...
.nav-main { background-color:#09F; width:100%; height:100px; color:#FFF; line-height:40px; } .nav-main .logo{ float:left; padding: 40px 5px; font-size:1.4em; line-height: 20px; } .nav-main > ul { margin:0; ...
Currently, I am utilizing a XAML WPF grid in my project and I am looking to transform the structure of the grid into JSON format. Do you have any suggestions or ideas on how this can be achieved? For reference, here is an example: <GridBinding> ...