I'm currently working on a web editor where you can enter your HTML, CSS and JavaScript code and see the result in real time. Something similar to JSBin or JSFiddle. (I'm doing that to get an offline editor)
I've already been through many problems especially when it comes to CSS but I solved them by using an iframe and injecting all my code into it. And that works amazingly well until you type some JavaScript.
I'm sending the code between <script></script> but unlike CSS it won't run. What's very weird is that when I enter something like $('button').css('color', 'red');, the buttons of the editor effectively get affected but not those of my iframe. Exactly the opposite of what I expected. I've tried many things, looked at many topics on the forum, but nothing works. I also tried to load a blank page in my iframe. In that case, JavaScript runs but it becomes impossible to edit the code in the iframe! What's going on? Where am I going wrong? Thank you in advance for your help!
Here's my editor : https://jsbin.com/tuqite/edit?html,js,output/
Try updating the content of the iframe like this.
// this string contains both html and script
var html_string= "content";
document.getElementById('childFrame').src = "data:text/html;charset=utf-8," + escape(html_string);
By directly updating the iframe DOM like the way you are doing may not be the right way .
Related
I am learning Javascript currently with some experience in HTML and CSS. So I made a small website with different pages you can go to to try out little bits of code I've written. All of those use alert commands and a pop up. The things I'm trying to display on the website now are things I've been using the Chrome snippets for because of the console. Is there anyway to integrate a console into my webpage so when you hit the run button, it will run a preloaded set of code.
Final product I'd like to just click the button on the page and it run a program and show me in the console. Then maybe put several of these on a page to showcase everything I've learned such as the fizzbuzz problem or anything. I hope that makes sense. Thank you.
As Bordeaux said, not sure they have something in place to do it.
But you can re-write console.log() if needed.
Here is a simple example:
<div id="fakeConsole"></div>
const console = {
log: function(str) {
document.getElementById('fakeConsole').innerHTML+=str+"<br>";
}
}
console.log('testMe')
console.log('testMe again')
https://jsfiddle.net/ajxebhsg/
There is no simple way to integrate the JS console onto a webpage.
You may try forking JS bin on GitHub (sort of like making a copy of the code so you can make your customizations), however that may be a bit complicated for the skillset you describe in your question.
How to fork a GitHub repo
If you want to simply showcase your work, you can use JSFiddle, Code Pen, Repl, or JS Bin.
Alternatively, if you just want to show your output, you can overwrite the element.innerHTML or element.textContent properties of a DOM element instead of using console.log.
innerHTML docs
textContent docs
I have a code that clicks an html element but it doesn't fire its java script code, in VBA I used to call "initEvent" in order to invoke a java script event.
I have searched the web and haven't found a suitable solution.
There's a working solution, but it's not quite useful in most cases, placing a java script code in the url and navigating to it, however there's a need for the location of the html element which is a problem sometimes.
The code I use in order to do a click in the html element :
el.InvokeMember("onclick");
Also tried :
el.InvokeMember("click");
The code that I place in the url and find not too much useful :
wb.Navigate("javascript: document.getElementsByClassName('something')[0].click();void(0);");
I hope to receive a working solution, thanks in advance.
I've solved it, a very original solve I'd say.
So basically, I've thought about it this way.
Finding an element that I already have is not comfortable at all, so the java script navigate didn't seem useful, however, I thought of changing it to fit any element, the question was how.
The answer I came up with, what if I'd focus the specific element and then use a javascript to click on the focused element, and it worked.
So the fixed code :
el.Focus();
wb.Navigate("javascript: document.activeElement.click();void(0);");
I hope it'll be useful to some of you.
I am building a web app which uses Summernote to allow for HTML editing.
Users are allowed to add and edit JavaScript as well, using inline <script> tags. This works fine and can be done in the editor's "Code View" mode.
What I'd like to do is, in the preview/WYSIWYG mode, instead of having the script being executed, just display an image (or text) to let the user know that there's a script there.
Something like:
I looked around and I don't think this has been done before. Is it possible? Any pointers on how I could accomplish this?
Thanks!
https://github.com/summernote/summernote/issues/495 explains how to do it using CSS only.
I am using the OpenWebkitSharp browser in a VB.NET project. What I am trying to do is use WebkitBrowser1.Navigate to display some HTML in the browser "on the fly". This works great for basic HTML, but Javascript does not appear to work at all in this scenario. For example, I have...
WebKitBrowser1.DocumentText = "<!DOCTYPE html><html><head><script>alert('This is an alert'); </script></head><body><p>This is some text</p></body></html>"
The body text appears just fine, but there is never a Javascript alert. I made sure that Javascript is enabled in the Webkit browser, so that's not the issue.
If I use the Navigate method to display a local page that contains Javascript (ie WebkitBrowser1.Navigate("path/to/local/file"), then the Javascript works perfectly. But it doesn't work at all when setting the HTML using WebKitBrowser1.DocumentText.
For this particular project, I need to generate the HTML code and display it "on the fly", so I can't use WebKitBrowser1.Navigate. I have to use WebkitBrowser1.DocumentText instead (or something similar).
Any ideas?
Or might there be a better way to accomplish this?
Thanks!
I ran into a similar situation recently, and while I'm still looking for that solution that allows what you're describing, here's what I decided to do as a workaround:
-Save HTML to temporary file
-Load temp file into WebKit control on form.
I'm considering making my own modifications to OpenWebKitSharp however, to see if I can make this happen. Basically, it seems like HTML loaded through DocumentText follows a different render path than loaded through Navigate.
I have a div with a <script scr='highcharts.js'> that is embedded in the code of that div.
My application will rewrite the source of that DIV every now and then, and write a bunch of new code. It will also rewrite the tag. Every thing works fine (highcharts is working). But because of some other constraints it is quite difficult to write the tag in the main body of the page. (It will take to long to explain exactly why... I hope my question can be answered without :-) )
The strange thing is: when I look with firebug, I can tell the script is being reloaded everytime I rewrite the source of the DIV! There is even some kind of id added to the URL:
/highcharts.src.js?_=1328861301862
I'm not doing this! I don't recognize the ID as anything in my app... It seems that every browser is doing this, so it is not specific to FF. Why is this happing, and is there any way to prevent this?
If anyone wonders how I solved this: I ended up using require.js. This solved the problem neatly :-)