I'm trying to run an HTML, CSS and JavaScript code written by the user in a textarea on an iframe in the page, something like jsFiddle. I tried using this for the HTML and CSS:
$(".runBtn").on("click", function(){
$(".Result > iframe").contents().find('body').html("<style>" + $('.CSS > textarea').val() + '</style>' + $(".HTML > textarea").val());})
But it doesn't seem to work. And I still haven't got a clue on how to run the javascript on it.
Comunication with iframe is tricky and You should not be using it like that. There is API for communication with iframe no mater it is from site to iframe or iframe to site. I didn't use it for a long time so i can't give you some good examples but You have everything You need on 1
it goes down to that you send a message trough that API to iframe with some payload, and inside of him You have event listener to that message event. when you receive it, render html from payload.
$("runBtn") is looking for a elements that are a tag <runBtn> that most likely doesn't exist. If element has an id you need a proper id prefix
$("#runBtn")
As for your html you haven't created a proper <style> tag. Also not clear where the textarea is in relation to iframe (inside iframe or outside). If it is inside you need to use find() within iframe contents to access it
Related
I am trying to build a content editor. This contenteditor will load a HTML document (with JavaScript) into for example a #result element. The problem with this, is that if inside this HTML element there is for example $("input").hide();, then all of my inputs are gone throughout the whole page, so not just inside the loaded HTML (my goal).
What I want to do with the editor is when a client clicks on an element that represents something in the database, the info of this element will popup and the user will be able to edit this. (So, if a user hovers over a form with the class "contact-form" (which is in the database, connected to the loaded page) a new window will popup with information about this specific form element.
Also, I cannot completely disable Javascript, since the loaded HTML might contain Javascript for styling etc.
My goal: Remove Javascript, that can be annoying when a user loads in an HTML file. Like an alert(); Also, remove the ability for the Javascript to edit somehthing outside it's own DOM.
P.S. I am open to better workarounds like using an iframe for this, BUT I want to be able to hover over elements in interact with them.
Edit: It seems that this question might be a bit too broad, looking at the comments. Summary of my question: How can I disable alert() for a specific div and how can I create a sandbox so that code inside a div, can only change elements from inside that div.
What you're looking for is HTML sanitization. This is the process by which you remove any dangerous content from a snippet of HTML on the server, before it's loaded in the browser. There are plenty of sanitization libraries out there that can strip script tags, object tags, etc. Just remember, you can't sanitize using javascript because by the time you've injected your script, another malicious script may have already loaded and run.
The only way to effectively sandbox a javascript environment is with iframes. You'll notice that websites like CodePen, JSBin and JSFiddle use them extensively. There's something called the ShadowDOM, which is the basis of Web Components, but it isn't very well supported yet.
To make it possible to run your own frontend scripts that allow for hovering, you can inject your script after your sanitization process. This way, if it's loaded inside an iframe your script will also be loaded.
Finally, alert() doesn't belong to any elements on the DOM. You can trigger an alert as soon as the page loads, for example. However, if you're trying to prevent alerts from popping up on user interactions, you could try removing all event listeners from a particular element. This won't be necessary if you sanitize the HTML of script tags, however, since the script wouldn't have had a chance to load so there won't be any event listeners.
You can use ShadowDOM to load an html document into a host node. See also WHY SHADOW DOM?
So I am currently working on an application that runs on top of the customers page inside its own iframe.
Application works in backbone and everything else except the initialization of the iframe is done inside the iframe. Initialization happens with a small javascript snippet that the client will copy to their footer.
The problem I'm currently having is that I have to inject a CSS file to the parent site in order to style my iframe correctly when it's rendered and I really don't think that I should tamper with clients page at all since CSS might have some conflicts in it.
Is there any better way to style the iframe than the current way of doing it?
I think you have two different options;
Inline iframe styles
Give your client a pre-styled iframe to embed, like this
<iframe src="yoururl.com/client"
frameborder="0"
style="border: 0; width: 100%; height: 600px;">
</iframe>
Embed through script tag
Create a small script tag (that you host) that you give to your client. Inside the script you dynamically create the iframe dom element and possibly other external css-files that you need
Host a JS file, like //yoururl.com/iframe.js
var iframe = document.createElement("iframe");
iframe.setAttribute("src","http://yoururl.com/client");
document.write("<div id='mycontainer'></div>");
document.getElementById("mycontainer").appendChild(iframe);
Then you can give this to your client to put in their page where they want the iframe to show up.
<script src="//yoururl.com/iframe.js" type="text/javascript"></script>
You can provide your css separately to the client. If that is not an option, then you need to do it the way you are doing now (injecting the parent style from within the iframe). However, this does not seem to be a good idea, unless your css rules are pretty unique.
There are many ways but it could be possible that no one is applicable:
Ask the client to style your iframe (inline or with css)
publish the iframed content on the same domain of the main website and check if the parent frame is accessible via javascript
Ask the Client to enable the header "X-Frame-Options". Maybe with something like "ALLOW-FROM SAMEDOMAIN, www.youriframedomain.com". It seems it is deprecated, check for Content-Security-Policy instead.
embed it via script tag
Check for window.postMessage: it requires anyway an additional script in the main website that listens for the message (it could be the css text itself) from the iframe and applies the new style
You should be able to use window.frameElement to refer to the iframe element which your page is embedded in. With that reference, you should be able to modify the style attribute to change how the frame renders.
I have a main html page which has a text input field and iframe in it .
I would like to be able to click a link in the iframe and and have the input text box value change to the value of a variable called selectedText.
Im not sure how to get it to work . I have been able to get it to work only from the main page by using this :
newListNote.value = selectedText;
As you cannot set the textbox value of parent page from iframe directly,
create a javascript function in your main page like this,
function setValue(val) {
document.getElementById('newListNote').value = val;
}
And call this function from the iframe page like this,
parent.setValue(selectedText);
I consider your textbox has id newListNote. Hope it works, thanks.
I think this one is related to Same-Origin Policy and Cross Site Script policy. You can't achieve it (correct me if i'm wrong).
Assuming your using jQuery as you tagged it and the iframe is another page within your site, it would be better to use .load()
$( "#result" ).load( "ajax/test.html" );
This then loads the page into your document where you can access the links. Then you can achieve your original goal. If the page is external to your site i'm not sure that this would work.
Good luck
A combination of the two answers here by #balaG and #Gereltod are correct.
As #Gereltod suggested, you cannot run JavaScript within an iframe from outside the iframe. If you could, then there would be serious security problems with the internet!
As #BalaG suggested, if you want the website to change based upon an event within the iframe, you need to write code within the iframe, and prepend it with parent.
I was doing an innerHTML on a div element. MY lead comes and tells me that innerHTML and iFrame are both the same. Now this one was something new. I always thought InnerHTML to be different from iFrame.
[My lead]: "The issue is because he is trying to use innerHTML which
in turn is called as IFRAME for a browser"
I wanted to know the differences between an iFrame and innerHTML. Are they both essentially similar in nature? I looked but couldn't find much.
Thanks
Sounds like a communication error--e.g., if your lead means that the innerHTML of that div is just going to show an iframe as its innerHTML (or otherwise, it would sound like you need a new lead). innerHTML grabs the HTML code as a string inside of the selected element. An iframe is an element used for transcluding content (usually from other sites or other pages on your own site). Apples and oranges...
They're very different. An iframe tells the browser to load a different URL in the iframe, and it will often have it's own scrolls. But a div can be made to look and work like an iframe by setting
overflow: auto
- in the style. Maybe that's what he meant.
iframe is an HTML tag used for displaying another website or page on your page, innerHTML is used in Javascript to change the content of an element on your webpage.
They are completely different.
They are not the same. Innerhtml is a way to access the contained html of an html element. An iframe is an element that let's you display content from a different web page than the one you're currently on.
Hi i have a form i used jquery to give a value to submit button, it is working fine.
jQuery('#frm_f_container.with_frm_style .submit input[type="submit"]').val('');
Now the form code is placed inside the wp super pop up pro. It is a pop up plugin it contains iframe when i inspect with firebug
The same jquery is not working so i tried contents() as suggested for iframe but this too not setting the button value here is the code i tried
jQuery('.sppro_cboxIframe').contents().find('#frm_f_container.with_frm_style .submit input[type="submit"]').val('');
Here .sppro_cboxIframe is the class placed with iframe like this
<iframe class="sppro_cboxIframe" frameborder="0" name="sppro_cbox1381566909072" src='url'>
when i view the source i can't able to see iframe like the above.
Now how to change or add values to the form inside it. Any help would be thankful.
You won't be able to manipulate elements inside the iframe from outside the iframe with javascript. See this answer regarding same origin policy:
jQuery/JavaScript: accessing contents of an iframe
Check to see if that plugin allows you to pass in your jQuery into the iframe. That's the only way you'll get to manipulate the elements inside the iframe.
Assuming jQuery defined as $ inside the <iframe>, passing same origin, and that the page inside the <iframe> has started loading, you can get the Window reference of an HTMLIFrameElement via it's contentWindow property.
// get the <iframe> and then it's contentWindow
var iWin = document.getElementsByClassName('sppro_cboxIframe')[0].contentWindow;
// now to use jQuery inside <iframe>
iWin.$.find('#frm_f_container.with_frm_style .submit input[type="submit"]').val('');
Your code is fine, here is the demo: http://jsfiddle.net/T86yw/
jQuery('.sppro_cboxIframe').contents().find('#frm_f_container.with_frm_style .submit input[type="submit"]').val('New Value');
The issue is somewhere else. As you say both pages have the same origin, another thing to check is whether the iframe is already loaded when you run the code.