I am trying to load code from codesandbox into iframe, but it is not going to load.
Probably it is checking if there is parent window opening it from other domain.
Is there any way to hide it and make it think like it was open in new clean window.
I can't use codesandbox embed, because it is introducing another nested frame, which makes impossible for me to postMessage to my code in sandbox.
Related
When I visit the homepage of my site, the header image at the top of the page loads at 90% width, and then expands to 100% width as the page continues to load. If you scroll down, it looks like all elements that are intended to be full-width, initially load at about 90% of their full width, and then go on to expand.
I am trying to locate where in the code this is happening. I thought it might be in the css style sheet but i'm not having any luck locating it. My best guess is there is some sort of wrapper loading before the image expands?
For more info, the image is being pulled in using the WPBakery Visual Composer plugin. I tried turning off the image parallax, which removed the image entirely.
I'm inspecting the source code, but nothing is jumping out to me (my webdev knowledge is extremely basic). I'm looking for any recommendations for where to look in the code.
I'm not sure what is causing the problem, but the source code can be viewed here: https://dev-nurseregistry.pantheonsite.io/
It seems like something from Javascript is loading after the initial page load.
If you go to Google Chrome dev tools -> Sources -> Then (on the right side) choose Event Listener breakpoints and under DOM Mutation check DOMContentLoaded and reload the page, it will load DOM step by step. On the initial load elements have a bit different style - your div.site-inner is not full width.
When you are clicking that little blue play button on the screen, it goes on another step. After 4 or 5 steps the content goes full width. If you look into the network tab (also in the dev tools) you can see that widgets.js and platform.js were loaded and after those also some images. I'd say that you have to look in your js files for something you load after the initial page load.
When comparing loaded page and partially loaded side to side, it shows vc_section hide-mobile as display: block and vc_section hide-desktop as display: none.
Edit
Just read hungerstar's comment - he shows a bit more of the cause. I just found the result of that cause. Hope it helps.
So I seem to have found myself in a bit of pickle. In order to keep a header flash element from reloading every time someone goes to a different page, I encapsulated all my site's content in an iframe. Unfortunately, some of the iframe's include thickbox, which opens an iframe of it's own. The iframe that thickbox opens, requires it be opened on the topmost page, so that the fixed attribute allows the iframe to remain static in the viewport. Because we're already nested into an iframe, this isn't possible.
This is the most promising lead I have so far:
http://blog.codepyro.com/2010/01/thickbox-inside-of-thickbox-iframe.html
Unfortunately, that only replaces the iframe that the thickbox is being opened from, with the content of the thickbox.
I also just came across this, but I'm not sure how I would go about retooling it to suit my needs:
open iframe fancybox from within an iframe so that it opens in the parent
Here is a link to what I'm working on:
http://www.lalalandmusicfestival.com/site/
The problem area is on the Talent page.
I think if there was a way to force the link to target the "top" or "parent" page with javascript, it may be possible, but I haven't found anything that's been of any use to me yet.
Thanks in advance for your help!
I want to place a div above an iframe with flash content (for example like a youtube video).
I do not have access to the content in the iframe, so I can't modify something in there.
I've tried a lot of things (z-index... everything).
But nothing works. I am only asking because I really can't find a solution :(
The problem is that the iframe contains the flash content.
I can't really help with a tested solution I'm afraid, as I don't have any flash files to test creating an answer with, but I can tell you why this is happening.
Flash is a browser plugin, which means flash movies are never really part of the HTML document. Instead what happens is the area of the page is reserved for the plugin to run in, which is then invoked and runs 'on top' of the page. Therefore setting z-index on other elements will never actually solve the problem, no matter what combination you try.
However, there is a 'magic' parameter / attribute you can set on the elements themselves that the plugin recognises, called "wmode". If you set this parameter / attribute to 'transparent', the Flash plugin allows some HTML elements to show through, giving the illusion that they are on top of the Flash movie.
If you're able to contact the owner of the iframe to set the wmode parameter to transparent, I'd suggest doing that. If this is a youtube or vimeo embed, see if there's any documentation or options on adding the parameter yourself.
Failing that there's not a lot you can do, as even JavaScript won't be your friend here (you can't modify the contents of a frame with JS for security reasons)
EDIT:
Just remembered, if there's a way of you using HTML5 video instead of Flash, that would help. HTML5 videos are rendered as part of the Document Object Model, and therefore are controllable through the z-index property.
Neal
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
I have one web page in ASP.NET and I want that page to be disabled until the whole page loading process gets completed.
One way is to activate a lightbox without content that will dim the whole page and then on the body onload event hide that lightbox.
Lightbox is a like having a modal window above the original window, and is used to preview pictures and other content. It could easy be modified to do what you want. Just activate a lightbox with no content and then hide the lightbox when the document is loaded.
This is a strange requirement and I would be interested in finding out your reason for doing this. Is there a problem or error that is ocurring. Perhaps you think the best way to prevent the error is to freeze the UI until the page loads.
I think that you should edit your question and describe what the underlying issue is. There might be a better way to improve your page.
I've seen this done with a simple overlay before.
Basically an iframe and a div that covers the page and has a high z-index is output at the beginning of page render. This is styled so it greys the page out and it also makes everything non-clickable. Then, once the page is loaded, a simple bit of javascript can be used to remove the div and iframe (or just set their styles to make them disappear).
I've also seen people attempt this issue by manually iterating over all controls on the page in JavaScript and disabling them. This is a horrible way to attempt it :)
The jQuery BlockUI plugin is another good option with lots of customization options.