I'm sorry if this wasn't the right place to ask. I'm having trouble figuring this one out.
What I'm trying to do is removing the demo bar provided by marketplaces like themeforest or mojothemes within my own demo site.
But since what appears in the marketplace's live demo of a theme is fetched, it appears within an iframe inside of their site.
I've tried asking in their forums but no one has been helpful.
Is there any way to do about this? An example done in a marketplace would be great.
The Answer is No. It is not possible to modify dome elements outside iframe by a script on site in iframe.
Reason: Since The Marketplace website is Accessing your Demo Site within iFrame at thier server.
Like how you embed a YouTube Video on your Page and Specify a Heading above it etc, does youtube or google map ever try to change their container styles? do they ever change the heading you wrote above the embed code?
Thats it
You cannot (due to the Cross Site Scripting - http://en.wikipedia.org/wiki/Cross-site_scripting) as it is a separated document. But what You can do is to use Web Messenging: http://en.wikipedia.org/wiki/Web_Messaging to affect JS/CSS within the iframe (but this will require actions on both sides).
If you can execute Javascript from within an iframe you can change the elements outside of it with the Window parent Property. Example usage:
parent.document.body.style.backgroundColor = "red";
changes the background of the <body> outside of the iframe.
Related
I have been searching for this for days and was wondering if anyone could help me with the answer to this.
So, I am currently building a system which allows users to create html pages which can include css and js links and possibly inline scripts/styles within it.
I want the user to preview their output, i was originally using a div tag and adding the html output to it but as all the extra styles and scripts also affected the parent page, i decided the only option was probably to use an iframe to put the content in.
To stop bootstrap links and Jquery conflicts to the parent element, i need to run the iframe in a sandbox environment from what i know but i have no idea how to set the content of the iframe when its in sandbox mode.
If you try:-
$("example iframe element").contents().find("body").html("example html inline styles etc");
this does not work and blocks access due to the iframe being sandboxed and not allowing the origin.
Sandboxing an iframe seems to be the only way to stop multiple instances of Jquery "one on the parent and one in the iframe" from conflicting, i did try noConflict which seems to work but that does not fix conflicting multiple bootstraps being loaded in the parent and iframe elements.
does anyone know either how to add content at runtime to a iframe that is sandboxed without getting blocked access or a different unique container approach i can use?
i appreciate any help or guidance anyone could give on this as i cannot really find much information about it.
I have finally found out what the problem is with this situation, i do not need a sandboxed iframe as i now know why Jquery and Bootstrap are conflicting without having to sandbox the iframe. I see lots of posts telling you to use something like the code below to put content in an iframe.
$("example iframe element").contents().find("body").html("example html inline styles etc");
the problem with the method above is that its opening the iframe up for putting content inside it but its not specifying the closing of the iframe.
This is why even on a normal none sandboxed iframe Jquery and Bootstrap conflict because its leaking back into your parent page by not being closed. The real method for putting content into an iframe directly should be the code below as it ensures the connection is closed off appropriately.
var myIframe = document.getElementById("ID OF THE IFRAME")
var iframeDoc = myIframe.contentWindow.document;
iframeDoc.open();
iframeDoc.write("HTML HERE");
iframeDoc.close();
by doing the above code you are not only modifying the content inside the iframe but your also closing it off once you have finished writing the content. This is very important in ensuring Iframes stick to their purpose as being a completely isolated page element and it stops js and css leaks into your parent page.
i hope this answer helps save time for anyone else who comes across this particular problem with iframes and is adding content at run time using the wrong method.
The landing page of reliefweb has a 'latest disasters' section that I want to embed onto my website (see screenshot).
I was told that I need to use an iframe and some JavaScript to get the element with class=“latest-disasters”.
This way, when the block is updated, it will also reflect on my website.
As I have no background in JavaScript, can someone show me how to do this?
Thank you for helping.
You haven't provided enough information.
But this is usually how it's done with iframe
<iframe src="http://www.latest-disasters-api.com" class = "latest-disasters"></iframe>
About the javascript part i don't have enough information but obviously you need some kind of SDK or JavaScript plugin
Hope it will help
I'm trying to style a specific div (#cse-hosted) which is the first div inside the body of the Google CSE iFrame. I know you can use the following to set a width for the iFrame using JavaScript variables:
var googleSearchFrameWidth = 'xxx';
But is there anything like that which allows me to go inside the iFrame and style the divs?
I've been searching the web and have found no solutions so there exists the likelihood that there is no way to do what I'm hoping, but...
Anyways, I'm sorry to be so abrupt, but I'd prefer not to give away any other content if at all possible...
You cannot style content that is not on your current page (without javacsript), and you cannot use javascript cross-domain. Unless you have access to the code for the iframe, you aren't going to be able to do much.
I am trying to create a layout/style editor similar to what is available on blogger. I noticed that they use an iframe, but the iframe has to refresh everytime you make a change. I am looking to do something more responsive. For example, if i change the width of a div I would like to see this change happening while I move the slider.
I was wondering if something like this is possible with the iframe setup using jquery/etc to modify the source of what is in the iframe, or is it better to not use an iframe?
The iframe would be used to load an existing webpage that is online.
The good thing with an iframe is that is not interfeering the rest of the page (you can use diffrent CSS, scripts, variable names and so on). TinyMCE and other editors uses iframe for its content. And yes its possible to access the iframe directly from jQuery:
See this link, http://jsbin.com/ajatix/edit#javascript,html,live
I am not a coder but, i am able to get my way around code most of the time. However, i found that this is the best place to ask questions relating to code stuff.
I have been working on a website for a client and i am at 95% - the only problem i have is facebook like-box. i have found several tutorials on the web to modify the like box css, and i have implemented most of the recommendations but, i have no favorable results.
Please - stackoverflow help!
I know jquery/javascript is a very powerful language. And facebook like uses javascript iframe/xfbml.
what code would you use, if you were to modify the like box css elements before loading them .
I say load cos i am loading my like box via ".load" ajax. So, when a user clicks the facebook button jquery loads it.
In short: how would i edit a css file on the fly, and then load the edited version afterwards.
thanks
The key problem that you'll have here is that FB's Like button is loaded inside an iframe - a self-contained HTML document within your page (if you use firebug or webkit inspector to inspect the like button, you'll see it's within <body>, <html>, then <iframe>).
The thing about these self-contained pages is that you can't access or manipulate them from the surrounding document (your page). You can change the 'src' attribute (telling the iframe to load a new page), but you can't apply or change styles on the elements inside the page. This is a security limitation that browsers have.
I know that it is possible to have a custom-styled like button, but I don't think it's done with the iframe method.