Inject CSS in an HTTPS iframe Podio webform - css

So, I'm trying to inject some CSS in a Podio webform iframe. I know that with a HTTP iframe, it's possible with content() from jQuery. But it's a HTTPS iframe here, so, it doesn't work.
I know we can add some CSS direct in the admin of Podio, but, first, I don't have access to that admin and second, the same form is use at multiple place, so, different styles should be applied...
Any idea ?

Due to the same origin policy you won't be able to inject your own content into the iframe from a different domain. You have to use the CSS feature inside Podio to change the look of your webforms.

Related

Single-Page Website with Ajax NAvigation

I am planing a simple website layout: Header with navigation, sidebar and a content block.
The whole site should be a single-page application because I am using a Cesium Visualization and a page reload would delete the current JS objects that are displayed in the Viewer.
Therefore I would like to reload the content container using AJAX to display my different "pages" and therefore keep all the JS Objects in the browser.
My question is:
Do you know a way to add a url-based navigation to this architecture?
For example: I am on the index page /index/ and enter the new url /content1/. The new url reloads the content container using AJAX and keeps the rest as it is. Therefore I would also be able to use the forward and backwards buttons of the browser.
May this be possible with ASP.net MVC routing?
I am pretty new to this so I hope I discribed my problem well enough.
Thanks a lot!
Try Pjax which uses ajax to load content dynamically via ajax
and pushState to maintain url history i.e is a HTML5 api. You shall find more details in the link below
https://github.com/defunkt/jquery-pjax
If you are familiar with angularjs then using ngRoute is a better alternative to Pjax as it has an effective url management through the routing service, please check the below link for more details on ngRoute
https://docs.angularjs.org/api/ngRoute/service/$route

How can apply css to externally loading web page using iframe. Is it possible?

I would like to add a page(a market watch ticker) from other website which is given by client using iframe. but its color not matching my website. how to match it. is there any way to match it??please help?
You can get the iFrame to inherit the parents CSS and javascript see this question:
Iframe inherit from parent
But you need access to the iFrame markup to do this, otherwise I believe it is not possible (and probably shouldn't be for other reasons like security etc.)

Load iframe on specific domains only

I want to allow some websites to embed an iframe with a page from my domain. However, I don't want anybody to be able to use the iframe content without my permissions. How can I allow only domains of my choice to be able to embed the iframe with the page's content?
I know vimeo does this, and allows video owners to block the video on certain websites that they don't find appropriate.
I want server side ASP.NET solution, because Javascript code can be altered. However if it can be done using javascript code and its secure, It's ok.
From what I've seen, I need to pass the referrer in some way, but in a way that can be manually altered by other website owners to include the iframe themselves and it would work on their website too, without a permission.
Since it will be a standalone page as you mentioned in the comments, you can do this by inspecting the referer property.
Request.UrlReferrer
See that it contains the domain that you want to allow. This property is available when an embedder puts your page in the IFRAME's SRC attribute and the page loads for the first time.
If the user clicks on a link inside the IFRAME, it is not guaranteed to pass the containing page as a referrer.
If you want to allow multiple linked pages inside the IFRAME to allow a specific domain, then you will need to stick to a JavaScript based solution.
Note however that neither method is completely foolproof.

How to force Embedded link to Use My CSS Style

I have to use an embedded search engine in my website which it has it's own style.Now i would like to change just the back-color of table which is presenting in my website. Can you please let me know if this is possible or not?
I already tried adding some style to the header of my page but the link still following the style from original stylesheet.
Thanks
That's not possible if the embedded page isn't served by the same domain (including port).
That's a security restriction.
If you want this kind of interaction, you'll need to have some control of the server of the embedded page in order to set permissions : https://developer.mozilla.org/en/http_access_control
Another (rogue) solution is to fetch the page server-side and to embed it directly in your page.

Diffrent CSS-Styles for Facebook Iframe

Anyone who has a good idea, how to add additional styles to an facebook iframe?
Whats wrong with CSS you can add link to an external sheet on each tab
Check out this question about applying css to an iFrame. If the iframe content is on a different domain, like what happens in the case of Facebook iFrame content on your site, you have no control over it due to cross site restrictions. Some older Facebook plugins allow to you specify a stylesheet on your server that they download and import to their server, but most of their newer plugins to not allow for this. Also, their terms of service often state you cannot attempt to the modify their iframe content embeded on your site.

Resources