Applying a CSS rule to an external iframe using just one line of code

I need to display an external hosted iframe on a client's website and adjust the background color of the body element. Here is what I have tried:

<script type="text/javascript">
function changeBackgroundColor(){
    top.frames['bookings'].document.body.style.backgroundColor = "black";
}
</script>

<iframe src="http://www.booking.com/?aid=123456&tmpl=searchbox&ss=&width=250
&bgcolor=000000&textcolor=FFFFFF&label=label" width="250px" style="margin-left:20px;border:none;"
height="250px" frameborder="none" scrolling="no" style="background-color:black;" name="bookings"
onload="javascript:changeBackgroundColor();">
</iframe>

Unfortunately, this code does not work as expected. I have also experimented with other approaches, but I am unable to use external libraries or stylesheets. Can anyone provide assistance?

javascriptcss

Answer №2

To achieve this, you must have the ability to modify the CSS used in the Client's site. Without that access, working with a cross-domain iFrame becomes quite limited.

Answer №3

When it comes to iframes, they are bound by the same origin policy, meaning that JavaScript (and possibly CSS) cannot be used to manipulate them unless both the current domain and iframe domain are identical.

Answer №4

My current issue is slightly different - I am trying to insert HTML content into an iframe using jQuery without specifying a source. However, my challenge lies in figuring out how to apply a stylesheet to the iframe.

Here's a snippet of the code I am working with:

<button id="print1" onclick="$('#frame1').contents().find('body').html($('#div1').html() + $('#tabs-4').html() + $('#tabs-5').html()+ $('#tabs-6').html()); window.frames['frame1'].print();">Print full report</button>
<iframe id="frame1" style="visibility:hidden;" height=1px></iframe>

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

Position a center pivot amidst a collection of 3D shapes within ThreeJS

I am currently working on creating a plugin prototype to allow customization of 3D objects using ThreeJS. You can view my progress so far here: If you've visited the link, you may have noticed that when hovering over the left or right arrow, the obje ...

javascriptthree.js

A problem with centering a popup window using the CSS transform() function

Discovered a clever technique for creating a centered popup window in an application ( http://www.w3.org/Style/Examples/007/center ). Neat and simple code implementation ( http://jsfiddle.net/babaca/6rwL0v0c/22/ ). html <div class="__holder"> & ...

htmlcsscss-positiontransformbem

Using CSS/HTML5 with either the :target or :active selector can allow for the display of different text content when a

Is it possible to change the text displayed on a website without reloading the page when a link is clicked? For instance, if I have an "About" or "Contact" link on my personal website, can the text in the body of the page be switched dynamically? In the i ...

htmlcsstarget

Refreshing the page allows Socket.io to establish multiple connections

I've been working on setting up a chatroom, but I've noticed that each time the page refreshes, more connections are being established. It's interesting because initially only one connection is created when I visit the chat room page. Howeve ...

javascriptexpresssocket.io

Is the data retrieved by the AngularJS service being withheld from the controller?

I am facing an issue where scope.membersWarnings in the controller is always empty, even though it receives data from the server in the service. The data seems to be lost between the callback of the get function in the service and the controller. Controll ...

javascriptangularjsangularjs-serviceangular-promise

Utilizing Node.js and Express.js to send files with Angular's resource feature

Within my index.html file, I have a button that triggers an Angular service utilizing $resource when clicked. var serviceRest = $resource(URL_API, null, { "connect" : { method: "GET", url: "http://localhost/login"} }); In my expressJS ro ...

javascriptangularjsnode.jsexpress

Looking to create a responsive image in a liquid file on Shopify

Recently, I added a new feature to my Shopify backend where users can upload images to a page. While I can see the images on the front-end, they are currently aligned to the right. My goal is to make these images responsive by default and expand to fit the ...

htmlcssjsonshopifyliquid

Tips for avoiding the transmission of className and style attributes to React components

Hey there! I'm working on a custom button component that needs to accept all ButtonHTMLAttributes except for className and style to avoid any conflicts with styling. I'm using TypeScript with React, but I've run into some issues trying to ac ...

htmlcssreactjstypescript

Filtering Results Efficiently Based on Various Criteria in React

To view my project in action, please visit my sandbox here. Due to limitations, I am unable to paste all of the code directly here. The goal of my project is to create a tours filtration system based on multiple criteria. Each tour is represented as an ob ...

javascriptreactjsalgorithmfiltering

What is the method to obtain the content height of individual pages in Android, with or without the use of JavaScript?

I am facing an issue while trying to retrieve the content height of each webpage consecutively. When I load pages separately, I can successfully get the height of each page. However, when I attempt to fetch the content height continuously for webpages in a ...

javascriptandroidhtmlwebviewwebclient

Can the FB status update popup be displayed when clicked?

I've implemented a code on my website that allows users to update their Facebook status directly from the page: <head> <title>My Awesome Site</title> </head> <body> <div id="fb-root"></div> <script s ...

javascriptjqueryfacebook

What is the process for dynamically inserting a new object into an array of data objects in Vue.js?

I am a beginner with vue.js and currently working on a form. I have an add button in my form, so when the user clicks on it, the same form field will be added to the form. Users can add as many times as they want. Here is my initial data: data () { ret ...

javascriptvue.jsvuejs2

Tips for showcasing unique keywords in Ace Editor within the Angular framework

Can anyone help me with highlighting specific keywords in Angular using ace-builds? I've tried but can't seem to get it right. Here's the code snippet from my component: Check out the code on Stackblitz import { AfterViewInit, Component, ...

javascriptangulartypescriptace-editor

What is the method for specifying the content type when generating a signed URL for an object in AWS S3?

I am trying to generate a signed URL with a custom content-type, but I am encountering an issue when attempting the following: s3.getSignedUrl('getObject', {Bucket: AWS_BUCKET_NAME, Key: 'myObjectsKey', ContentType: 'image/png&apos ...

javascriptnode.jsamazon-web-servicesamazon-s3

ngRepeat does not iterate through an array

Presented below is an object: { "_id" : ObjectId("5454e173cf8472d44e7df161"), "questionType" : 0, "question" : "question1", "answers" : [ { "content" : "answer1" }, { "is_true" : "true", ...

javascriptjsonangularjsnode.jsmongodb

Handling button and AJAX requests in Node.js involves creating event listeners for

I'm in the process of developing a single page application and I'm second-guessing my approach. Currently, I have a system in place where each button that requires a callback from the server triggers an ajax request. On the server-side, I handle ...

javascriptajaxnode.js

Error Encountered: "JSON Post Failure in ASP.net MVC resulting in 500

Whenever I attempt to send a variable to JSON on ASP.net MVC, I encounter the following error: jquery-2.2.3.min.js:4 GET http://localhost:58525/Order/GetAddress/?userid=42&email=asandtsale%40gmail.com 500 (Internal Server Error) This is my controller ...

javascriptjsonasp.net-mvcjsonresult

Consolidate JavaScript files into a single file using phpStorm

My goal with phpStorm is to consolidate multiple JavaScript files into a single one. To achieve this, I have integrated the closure compiler and set up the file watcher to minify each individual JavaScript file. Now my aim is to merge all of these JavaScr ...

javascriptnode.jsmergephpstorm

Displaying background images as list items on a web page outside of

I am facing an issue with an unordered list within a div where the list item images are floating outside the div. Does anyone have a solution for this? You can see an example of the problem on Any assistance would be greatly appreciated! ...

csslist

The error message: "Trying to access property 'get' of an undefined object"

$http.get('/contactList'). success(function(data){ console.log('received data from http get'); }). error(function(data) { $scope.error = true; $scope.data = data; return 'error message'; }); There seems to be ...

javascriptangularjstypeerror