I am trying to build a HTML, CSS and jQuery (not just JavaScript) editor, and show the rendered content in an iFrame. Although adding HTML, CSS part is easy, I am unable to execute the JavaScript part.
var html = ""; // HTML code
var content = $("#preview").contents().find("body"); // iframe id is 'preview'
content.html(html);
var cssLink = "<style>" + csVal + "</style>"; // cssVal contains css code
var head = $("#preview").contents().find("head");
head.append(cssLink);
var js ='<script>'+jsEditor()+'<\/script>' ;
// following part is not working
var content = $('#preview').contents();
$content.find('head').append('<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"><\/script>' );
$content.find('body').append(js );
I am able to execute to core JavaScript using window.eval(), however it is not working for any JS library included, e.g. jQuery etc.
I think your only problem here is your variable naming:
var content = $('#preview').contents();
$content.find('head').append('<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"><\/script>' );
$content.find('body').append(js );
should be ($content ==> content)
var content = $('#preview').contents();
content.find('head').append('<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"><\/script>' );
content.find('body').append(js );
I modified your script slightly but only to provide some pre-canned values for html, csVal and a result from jsEditor().
This worked for me in Chrome, Safari & Firefox running off a server on localhost:
HTML:
<html>
<head>
</head>
<body>
<div>Look at your new iFrame</div>
<iframe id="preview"></iframe>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</body>
</html>
Code (also in the html body):
$(document).ready(function() {
var html = "<div>Hello from iframe</div>"; // HTML code
var content = $("#preview").contents().find("body"); // iframe id is 'preview'
content.html(html);
var csVal = "div { color: red; font-size: 40px;}";
var cssLink = "<style>" + csVal + "</style>"; // cssVal contains css code
var head = $("#preview").contents().find("head");
head.append(cssLink);
var jsCode = "alert('you are in the iframe')";
var js ='<script>'+jsCode+'<\/script>' ;
// following part is not working
var content = $('#preview').contents();
content.find('head').append('<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"><\/script>' );
content.find('body').append(js );
});
Resulting source in the iFrame:
<html>
<head>
<style>
div {
color: red;
font-size: 40px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<div>Hello from iframe</div>
<script>
alert('you are in the iframe')
</script>
</body>
</html>
Related
I am trying to get the source code(HTML code) of the current browser through a chrome extension. I was trying to store this HTML code in a string, but it doesn't seem to work.
http://jsfiddle.net/ufbxge08/2/
<head>
<style>
button {
height: 30px;
width: 100px;
outline: none;
}
</style>
</head>
<body>
<button id="bth1">Predict</button>
<script src="popup.js"></script>
<script src="jquery-2.0.3.js"></script>
<form>
<label id = 'mybtn1'></label>
</form>
JavaScript:
btn1.onclick = function scrapeThePage() {
// Keep this function isolated - it can only call methods you set up in content scripts
var htmlCode = document.documentElement.outerHTML;
var btn = document.getElementById("mybtn1");
btn.innerHTML = htmlCode;
console.log(htmlCode)
}
I expected the code to store the source code in a string but it doesn't seem to work.
If you want to show HTML code inside an HTML element you may need to set the text content (innerText), not the HTML content (innerHTML):
bth1.onclick = function scrapeThePage() {
// Keep this function isolated - it can only call methods you set up in content scripts
var htmlCode = document.documentElement.outerHTML;
var btn = document.getElementById("mybtn1");
btn.innerText = htmlCode;
}
http://jsfiddle.net/1jk94r50/
An extremely simple question but I am noob. I have been learning javascript and jquery for a while on jsfiddle, there everything works fine, building cool quizzes and all, but when I tried to actually create a directory, reference the jquery library and my javascript file, nothing works, even the below code, when saved as an HTML file doesn't work. I just paste it into notepad and save it as html, when I open it with it doesn'T work.
<html>
<head>
<title>webpage</title>
<script type="text/javascript">
window.onload = function() {
var myDiv = document.getElementById('#div');
myDiv.appendChild(document.createTextNode("Hi my name is Mehmetcan"));
}
</script>
</head>
<body>
<div id="myDiv"> </div>
</body>
</html>
Use this as starting point:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<title>webpage</title>
<script type="text/javascript">
$(document).ready(function () {
var myDiv = document.getElementById('myDiv');
myDiv.appendChild(document.createTextNode("Hi my name is Mehmetcan"));
});
</script>
</head>
<body>
<div id="myDiv"> </div>
</body>
Another approach that doesn't rely on JQuery but on pure, vanilla javascript.
<html>
<head>
<title>webpage</title>
<script type="text/javascript">
document.body.onload = loadSite;
function loadSite() {
var newDiv = document.createElement("span");
var newContent = document.createTextNode("Hi there and greetings!");
newDiv.appendChild(newContent);
myDiv.appendChild(newDiv);
}
</script>
</head>
<body>
<div id="myDiv"> </div>
</body>
</html>
You can find the full javascript sample as well as more information here, on the document.createElement MDN pages.
document.body.onload = addElement;
var my_div = null;
var newDiv = null;
function addElement () {
// create a new div element
// and give it some content
var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hi there and greetings!");
newDiv.appendChild(newContent); //add the text node to the newly created div.
// add the newly created element and its content into the DOM
my_div = document.getElementById("org_div1");
document.body.insertBefore(newDiv, my_div);
}
I am trying to automatically create an option menu (using HTML and JavaScript) based on the contents of a text file. What I would like is for each option in the menu to be a line in the text document.
Here is the JavaScript:
function get_parameters() {
alert("get_parameters() called"); // these alerts are just to tell me if that section of the code runs
var freader = new FileReader();
var text = "start";
freader.onload = function(e) {
text = freader.result;
alert('file has been read');
}
freader.onerror = function(e) {
alert('freader encountered an error')
}
freader.readAsText('./test.txt', "ISO-8859-1");
var div = document.getElementById('bottom_pane_options');
div.innerHTML = div.innerHTML + text;
}
With this code, all I'm trying to accomplish is reading the file and printing to the div "bottom_pane_options" but I can't find any reason why it doesn't work. If my way isn't the most efficient, could you please give me code that would work?
Thanks.
--EDIT--
Here is the HTML
<!DOCTYPE html>
<html>
<head>
<title>Culminating</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCJnj2nWoM86eU8Bq2G4lSNz3udIkZT4YY&sensor=false">
</script>
<script>
// Calling the Google Maps API
</script>
</head>
<body>
<div class="content">
<div id="googleMap"></div>
<div id="right_pane_results">hi</div>
<div id="bottom_pane_options">
<button onclick="get_parameters()">Try It</button>
</div>
</div>
</body>
<script type="text/javascript" src="./javascript.js"></script>
</html>
You need to set the <div> text in the callback instead of right after you start loading:
freader.onload = function(e) {
text = freader.result;
/*************
** TO HERE **
************/
alert('file has been read');
}
/* MOVE THIS */
var div = document.getElementById('bottom_pane_options');
div.innerHTML = div.innerHTML + text;
/*************/
Because the file was not read yet when you are runing div.innerHTML = div.innerHTML + text;.
That's why there are callbacks.
See https://developer.mozilla.org/en-US/docs/Web/API/FileReader :
The FileReader object lets web applications asynchronously read the
contents of files [...]
Use this instead :
freader.onload = function(e) {
text = freader.result;
var div = document.getElementById('bottom_pane_options');
div.innerHTML = div.innerHTML + text;
alert('file has been read');
}
freader.onerror = function(e) {
alert('freader encountered an error')
}
freader.readAsText('./test.txt', "ISO-8859-1");
Hi all i want to document.write a hyperlink image inside getjson i tried the following but it doesnt work. could you guys tell me what is wrong with my document write?
<script>
$.getJSON('http://anyorigin.com/get?url=http://www.somesite.com/handelit.ashx&callback=?', function(data){
var siteContents = data.contents;
//writes to textarea
document.myform.outputtext.value = siteContents ;
document.write("<a id="ok" href="http://www.mysite.com/master.m3u8?+siteContents+"><img src="./playicon.jpg"></a>");
});
</script>
Hi all i want to document.write a hyperlink image inside getjson
You can't (not reasonably*). document.write only works during the initial parsing of the page. If you use it after the page finishes loading, it completely replaces the page.
Instead, interact with the DOM. Several ways to do that, but the most obvious based on your code is to have the anchor initially-hidden and then show it after filling in the text area like this:
$("#ok").show();
Full Example: Live Copy | Live Source
(I've changed the playicon.jpg to your gravatar, since otherwise it shows as a broken image on JSBin)
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<form name="myform">
<textarea name="outputtext"></textarea>
</form>
<a id="ok" style="display: none" href="http://www.mysite.com/master.m3u8?+siteContents+"><img src="http://www.gravatar.com/avatar/f69cfb4677f123381231f97ea1138f8a?s=32&d=identicon&r=PG"></a>
<script>
(function($) {
$.getJSON('http://anyorigin.com/get?url=http://www.somesite.com/handelit.ashx&callback=?', function(data){
var siteContents = data.contents;
//writes to textarea
document.myform.outputtext.value = siteContents;
// shows the link
$("#ok").show();
});
})(jQuery);
</script>
</body>
</html>
* "not reasonably": IF your content were coming from the same origin as the document (it doesn't look like it is), you could do this with a synchronous ajax call. But that would be very bad design.
Please, use createElement instead of document.write
$.getJSON('http://anyorigin.com/get?url=http://www.somesite.com/handelit.ashx&callback=?', function(data){
var siteContents = data.contents;
//writes to textarea
document.myform.outputtext.value = siteContents ;
//Create A-Element
var link = document.createElement('a');
link.setAttribute('href', 'http://www.mysite.com/master.m3u8?' + encodeURIComponent(siteContents) );
link.id = 'ok';
//Append A-Element to your FORM-Element
var myForm = document.getElementsByTagName('form')[0];
myForm.appendChild(link);
//Create IMG-Element
var img = document.createElement('img');
img.setAttribute('src', './playicon.jpg');
//Append IMG-Element to A-Element (id='ok')
link.appendChild(img);
});
I am trying to set style inside head tag dynamically inside a iframe so as to set the class
on body of the iframe while loading of the iframe itself, say I want to apply the ze_edit
class on the body of iframe like this ::---
<head>
<style type="text/css">
.ze_edit{font-family:Verdana,arial,Helvetica,sans-serif;font-size:12px;}
</style>
</head>
<body class = "ze_edit">
</body>
Below is the full code of the sample test file.
<html>
<head>
<script>
test = function()
{
var _style,
_iframe,
_doc,
_head,
ff,
fs;
ff = "georgia,times new roman,times,serif";
fs = "30pt"
_doc = document;
_iframe = _doc.getElementsByTagName("iframe")[0];
_iframe.contentWindow.document.designMode="on";
_style = _doc.createElement("style");
_style.type = "text/css";
_style.innerHTML = ".eclass{font-family:"+ff+";font-size:"+fs+"}";
_head = _iframe.contentWindow.document.getElementsByTagName("head")[0];
_head.appendChild(_style);
_iframe.contentWindow.document.body.className = "eclass";
}
</script>
</head>
<body>
This is a just a test
<iframe onload ="test()">
satyam
</iframe>
</body>
</html>
But this script throws error "Unknown runtime error" at this line
"*_style.innerHTML = ".eclass{font-family:"+ff+";font-size:"+fs+"}*";
" in IE .
Any workaround solution for this..
This could be some IE bug/feautre. Do it like in this post:
How to change/remove CSS classes definitions at runtime?