Jquery - Change content styles iframe - javascript

I want to change styles css inside at a iframe, using:
$("#box_close").click(function(){
("#iframe").contents().find("#scrolling_box").removeClass("scrollingBox");
$("#iframe").contents().find("#scrolling_box").addClass("scrollingBoxCustom");
});
Not working ok because the attribute src is in different host that index file, so it gives a classic browser policy error when trying to access a resource that is not on the same host.
Is there some another way I can change styles from the html content of an iframe from a page hosted on another server?
Thanks,

Related

How to Edit content inside an Iframe or add styles? [duplicate]

This question already has answers here:
Using CSS to affect div style inside iframe
(14 answers)
Closed 1 year ago.
I have an <iframe> tag.
I don't know how to add content to that <iframe>
example:---
<iframe id="iframe" src="https://musafiroon.github.io/stackoverflow/index.html" width="200"/>
at https://musafiroon.github.io/stackoverflow I have made 3 elements with attribute class="text"
I want to color all these text blue in my Iframe.
how should I do this?
I am working on my pc with some HTML files inside a folder
Does the iframe src url belong to the same origin as the main page? Are they accessed by the same domain name?
If the main page and the iframe content share an origin
Javascript and same origin iframes
Otherwise
You'll need to change something so they share an origin. You can put the iframe content behind a proxy so it shares the main page's origin. If your main page is a dynamic site, you can add a new endpoint (e.g. /iframe), and in the request handler (on the server side) you request your iframe content and return it. Alternatively, you can use a CDN service like AWS CloudFront or Akamai to combine the main page and the iframe content domains into a single domain. You would configure it so that requests to /iframe/* are served by your-iframe-content.com/*, and all other requests are served by your main content server. Explanation for CloudFront
You can't edit the content of an iframe tag.
I feel you can change color of the content in the iframe by defining color of the class--text in the source file "index.html".
You can set the color of the content in iframe as per below code..
<style>
.text{
color:blue;
}
</style>
with your main code.

Bypass Cross-Domain-Policy to access iframe's HTML with server-side solution

Currently we are trying to access the HTML of (with javascript) dynamically generated html-elements (e.g. to get the url of an image). If the html-elements are generated with javascript only - their is no problem. Just extracting the image url with javascript by accessing the DOM elements. But now we have trouble with an iframe.
This is the situation at the moment:
We include external script-file (www.test.com/script.js) to create a gallery on our website
The script.js generates a new iframe in our website (document.write('iframe code here')); referencing to www.test.com/iframe.html)
The iframe.html contains javascript-code again to generate the gallery by creating serveral dom-elements (divs, imgs, a, p,....)
Now we need to read the src-attribute of these images. With the debugging tool of the browser, it is no problem. Without the iframe, it's also no problem. But with the iframe, because of the cross domain policy of the browsers we can not access the html of the iframe.html with javascript.
One possible solution was to try to get the src of the iframe tag with javascript, call a server-side script to get the html content of the src-url and run the content via eval()-function on the client again.
I hope you have other better ways to solve that.
It is not clear from your question, but if the iframe is being served by your app, you can use postMessage in order to communicate between the iframe and its parent window.

Script Image Loading on HTTPS

I have a script tag on an HTML page that references an external script URL. The HTML page and the script run on HTTPS URLs. However, the script creates an IMG tag which references an image that is on an HTTP URL. I don't have control over the script itself (it is hosted by a third party). The problem is that the browser complains about loading HTTP content on an HTTPS page.
I tried the following:
Hiding the image using CSS display property - This still causes the image to load and the browser to complain
Changing the SRC attribute of the image using JavaScript/JQuery - this doesn't solve the problem because the script and the image load first and then my JavaScript runs
The image itself is not necessary, I can hide it or remove it. Also, if needed, I can host the image myself on HTTPS, but I still need to change the SRC attribute BEFORE the image loads.
Any suggested workarounds?

Using getElementById method to find an element inside an iFrame

so I have an iframe:
<iframe id="CPHNavBar_TBDC081D1008_frameSticky" src="/stickyserviceavailabilitycheck"></iframe>
and I need to reference a piece of css code that lives on the src portion above. This code will select it when on the src page:
document.getElementById( "ContentPlaceHolder1_C001_btnSMBAddressCheckYes");
Is it possible to reference the css element from page with the
<iframe id="CPHNavBar_TBDC081D1008_frameSticky" src="/stickyserviceavailabilitycheck"></iframe>
hosted on it?
Due to the Same Origin Policy, if two pages do not share a domain name and port number, one page cannot edit the DOM, or run JS on the other page. (Usually attempted via the <iframe> element). The same origin policy also applies to XMLHttpRequest.

Change iframe content css from the caller page of the iframe

Is it possible?
I want an make an adaptive layout but neither CSS or JS can force the iframe content to change from the calling page.
However the the iframe pages and the caller use the same CSS and JS file.
This is only possible, if they are from the same origin. It doesn't matter if both use the same CSS or JS file. That means, both are using the same domain name, application layer protocol, and (in most browsers) port number. (Same origin policy)
If you are sure that you fullfil the above mentioned requirements, please check the following links:
Adding a stylesheet to an iframe
How to apply CSS to iFrame?
How to load up CSS files using Javascript?

Categories

Resources