I have an iframe pointing to my angular application. I need to resize the height of the iframe based on the height of its contents.
The iframe and its host are on the same domain, so there are no cross-domain issues.
I would like to know the height of my angular application when the initial data has been loaded and notify this to the iframe container, so the height can be appropriately set.
I use ng-init to set my angular-applications initial state when the document is first fetched.
$scope.on("$viewContentLoaded", fn) seems to happen too early.
Can I plugin a $(fn); somewhere without breaking too many best practices? Is there another approach?
Related
I have an iframe that is being loaded and has an embedded facebook video. It loads the facebook sdk and then triggers it to play the video.
The problem is that loading the SDK inside the iFrame is causing the sdk to be initialized in the parent window instead of inside the frame. How do I prevent that from happening so that I can play the video in the iFrame?
(as a side note, I had thought the whole purpose of an iFrame was to prevent code inside it from modifying the parent frame, how is this happening?)
I'm developing HTML5 banner ads for Google AdWords with CSS-animations. Since an ad can only have 30 seconds of animations, the content of the different stages in the animation are often not seen by the users.
Is there a way to find out the viewport of the (cross domain) parent window, so that I can start the animations in my ad's CSS/JS code when it's actually visible to the user ?
Thanks for help!
There are two ways how you can solve your problem.
For the first, you need to edit the code of your cross-domain parent window. If you can't do that, this wont work (which I guess will be the case for you). You would need to add event listeners and use Window.postMessage.
The other way is by using the Intersection Observer API. It's exactly the thing you want and designed for exactly your case, but it's currently not very well supported. For compatibility list check out the link or caniuse.
You could implement this with a simple fallback, if it's not available.
I am getting crazy with this problem, and hope there is a solution or workaround.
I have a canvas inside an iframe, in a different domain (for security reasons). This canvas shows a Processing.js animation/drawing. I need to allow the canvas to load image files that are located on the same domain.
index.html with the iframe is in domain.com
index.html with the canvas is in sub.domain.com
Now I know for sure that:
The canvas can load/visualize a remote image but cannot access a remote image data (pixels).
The canvas can fully access an image file on the same domain, unless it is played in an iframe (!?).
Setting Access-Control-Allow-Origin header simply allows to access files on other domains.
The canvas does not support/consider Access-Control-Allow-Origin headers at all.
Is there a way to bypass all these security limits and simply get a canvas played in an iframe to load an image file?
I found the solution to my problem (and saw that nobody answered). Actually I forgot something... I was using the sandbox attribute in the iframe tag and that was the problem. Once removed, images started to be accessible within the canvas, in Firefox and Chrome at least (did not test IE yet). Anyway, the sandbox attribute still has a very bad support and is probably totally useless in a cross-domain scenario.
So. I can confirm that with a normal iframe (without any sandbox parameter) there are no problems when loading images into a canvas, within an iframe, if and only if the image is in the same domain of the canvas page.
I have an ASP.net 4.0 site. Users can save an entire html page into the backend database. What I want to do is load the dynamic content into a div on an existing page in a content area and have a couple of things to happen:
I do not want any of the css to affect anything outside the div, when first trying this out loading of some badly formed html would move images and other divs outside the content area around.
A lot of these html pages use the "base" tag for images and links, I want the base tag respected inside the div.
I have a solution that I am going to try which is just to use an iframe and set its url to another child page that loads the dynamic html into its own page entirely. I am just wondering if there is a better solution.
As per my comment, if you're storing the entire HTML of the page in question (including <!DOCTYPE>, <head>, <body> etc) then yes, using an iFrame is (in my opinion) the best option.
It is almost impossible to stop inherited styling of the "parent page" from affecting "injected" HTML.
The main downside to this, however, is that you have little control over making sure the HTML in the iFrame is displayed at the correct size. One option would be to use client-side javacript (or jQuery) to work out of the rendered size of the HTML and adjust the iFrame controls height/width accordingly... but I think you might have trouble getting this to work effectively.
I'm new to chrome extensions development and I'm building one that requires a side panel (not the popup), like firebug but on the right side.
I'm using jsTree (with json_data) in the side panel and I want to drag elements from the webpage to the side panel.
So far, to create the side panel, I've used a div appended to the body with a z-index so that it appears above the webpage, but the elements' styles in my side panel are altered because of the website's css.
So I thought I could use an iframe to avoid any css incompatibility within my side panel.
I create the iframe dynamically, with a src="chrome-extension:///page.html".
I've managed to make my jstree work fine in my iframe by loading the jquery+jstree scripts directly in the iframe's source page... that's pretty bad but I can't get the content script to be used for the iframe's source page (despite "all_frames": true).
I'd like to drag elements from the website's page into jstree in the iframe...
I've found the iframeFix: true and refreshPositions: true, but that doesn't seem to change anything...
Anyone knows how to do that?
If I don't use an iframe, according to the multiple examples on the web, I can easily drop an element to the jstree using the dnd plugin.
I haven't tried it; even if it worked, the css in my side panel will be altered and I can't let that happen.
I've seen the "div layer above the iframe" technique. I can successfully drop an element from the webpage on that div above the iframe.
But, when I try to post a message (containing the dropped elements' data) to the iframe through a port the iframe doesn't receive the message.
My idea in this case is to somehow add the message to the json data of jstree.
I've read all the posts I've found about content_scripts and iframe, I know about the bugs... I can't figure out if it's fixed or not, and if it is, I don't know how to make the port communication between the ifram and the content script work.
Anyone knows more about that?
I should also add that when I try to communicate between the content script and the iframe using a port, and copy the listener from the iframe in the background page, the background page receives the message just fine... which just means that the port communication is working fine I suppose, but not between the content script and the iframe...
Any thoughts? I'm really stuck
answering my own question;
I haven't found a solution on how to use iframes in a chrome-extension with jstree.
I'm just going for the hardcore way; append a <div> to the <body>, and make sure by doing a lot of testing that the css inside my <div> will remain isolated from the webpage's css.
Cheers