I have the following code:
<div>
<textarea id="tinyeditor" name="description_evenement"></textarea>
<iframe width="584" height="175">
#document
<html>
<head>
<link href="custom.css" rel="stylesheet"></link>
</head>
<body id="editor" contenteditable="true">
Hello, World!
</body>
</html>
</iframe>
</div>
I need to to fill the textarea with the value "Hello, World!" using JavaScript before submitting. I used the following code, but it's not working:
<script type="text/javascript">
function replace(){
var content = document.getElementById('editor').innerHTML;
document.getElementById("tinyeditor").value = content;
}
</script>
How can I do it?
Try this..
<script type="text/javascript">
function replace(){
var content = document.body.innerHTML;
document.getElementById("tinyeditor").value = content;
}
</script>
It might be because the textarea is in the parent element and the body is in the iframe...give your iframe an id (e.g., myFrame) and try:
var content = document.getElementById('myFrame').contentWindow.document.getElementById('editor').innerHTML;
Everything else would stay the same.
Related
I'm having an auto-generated iframe (Which also have a class name and on the same domain), inside it, there is also a <script> tag and some styling. Can anyone tell me how to remove the script tag and its contents using pure javascript? [NO jQuery please, Using VueJS ]
<html>
<body>
<iframe src="#" class="myiframe">
#document
<html>
<body>
<!-- REMOVE-->
<style>...</style>
<!-- REMOVE-->
<div class="wrapper">...</div>
</body>
</html>
</iframe>
</body>
</html>
I know how to select the script tag (Might not perfect for the purpose), What I don't know is how to select the style tag which is inside of an iframe:
var element = document.getElementsByTagName("style"), index;
for (index = element.length - 1; index >= 0; index--) {
element[index].parentNode.removeChild(element[index]);
}
You can try to use the following code, this code might be lengthy, lets try and optimize that:
<html>
<head>
<script>
function removeStyleTag() {
var iframe = document.getElementById("myFrame");
var styleTag = iframe.contentWindow.document.getElementsByTagName("style");
for (var index = styleTag.length - 1; index >= 0; index--) {
styleTag[index].parentNode.removeChild(styleTag[index]);
}
}
</script>
</head>
<body>
<iframe id="myFrame" src="#" class="myiframe">
#document
<html>
<body>
<!-- REMOVE-->
<style>...</style>
<!-- REMOVE-->
<div class="wrapper">...</div>
</body>
</html>
</iframe>
<button onclick="removeStyleTag()">Try It</button>
</body>
</html>
I have found a reference from this link.
I have just added the following 2 lines in addition to the code that you have written:
var iframe = document.getElementById("myFrame");
var styleTag = iframe.contentWindow.document.getElementsByTagName("style");
Here is a link to Fiddle where I have tried this code.
<!DOCTYPE html>
<html>
<head>
<script>
document.getElementById("passage").innerHTML = "Paragraph changed!";
</script>
</head>
<body>
<div id="passage">hello</div>
<div id="question"></div>
<div id="answers"></div>
</body>
</html>
Why is document.getElementById("passage").innerHTML = "Paragraph changed!" not working for me? I just end up with a blank screen, not even the original "hello".
Your script is called before the element is loaded, try calling the script after loading element
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="passage">hello</div>
<div id="question"></div>
<div id="answers"></div>
<script>
document.getElementById("passage").innerHTML = "Paragraph changed!";
</script>
</body>
</html>
If you check the console, you can see an error
Uncaught TypeError: Cannot set property 'innerHTML' of null
That is the HTML page is parsed and executed top down.
So, it can't identify what is the element you are mentioning.
So, you should either use an EventListener or place the script just before the end of body tag
Method 1 Event Listener
<!DOCTYPE html>
<html>
<head>
</head>
<script>
window.onload=function(){
document.getElementById("passage").innerHTML = "Paragraph changed!";
};
</script>
<body>
<div id = "passage">hello</div>
<div id = "question"></div>
<div id = "answers"></div>
</body>
</html>
Method 2 : script is just above body tag
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id = "passage">hello</div>
<div id = "question"></div>
<div id = "answers"></div>
<script>
document.getElementById("passage").innerHTML = "Paragraph changed!";
</script>
</body>
</html>
You script should be executed once the page is loaded.
Otherwise all elements of the page may not be still attached to the dom when you refer to them.
Rather than moving the script after the element declaration that may be error prone (you should always be aware of the order of script), you could use
event designed to be executed after the dom is totally loaded.
For example onload attribute of body :
<body onload='document.getElementById("passage").innerHTML = "Paragraph changed!";'>
Your script is calling before element is loaded.
Try
$(document).ready(function()
{
document.getElementById("passage").innerHTML = "Paragraph changed!";
});
JS:
(function(){
document.getElementById("passage").innerHTML = "Paragraph changed!";
})
I am working on a website in which i need get content from iframe.
code is here.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-lates…
</head>
<body>
<iframe src="http://glimmertech.org/IF222.htm" width="80%" height="600" id="frameDemo"> </iframe>
<script>
var myFrame = $('#frameDemo');
myFrame.load(function()
{
var myjQueryObject = $('#frameDemo').contents().find('#newid'…
alert(myjQueryObject[0].innerHTML);
});
</script>
</body>
</html>
Try this:
var myIframe = document.getElementById('frameDemo');
var myObject = myIframe.contentWindow.document.getElementById('newid');
alert(myObject.innerHTML);
So we can do:
<html>
<head>
<title>JavaScript Popup Example 3</title>
</head>
<script type="text/javascript">
function exitpop()
{
my_window = window.open("", "mywindow1", "status=1,width=350,height=150");
//my_window.document.write('somehow add JS');
my_window.document.write('<h1>Popup Test!</h1><br/>');
my_window.document.write('J_\alpha(x) = \sum_{m=0}^\infty \frac{(-1)^m}{m! \, \Gamma(m + \alpha + 1)}{\left({\frac{x}{2}}\right)}^{2 m + \alpha} ');
}
</script>
<body onunload="javascript: exitpop()" >
<h1>JavaScript Popup Example 4</h1>
</body>
</html>
but how to for example add to header of that html page with something like <script type="text/javascript" src="path-to-MathJax/MathJax.js"></script> to enable MathML and tex formulas rendering?
Yep, you just need to concatenate the script tags, like so: jsfiddle demo
The money-shot code sample is:
jswin = window.open("", "jswin", "width=350,height=150");
jswin.document.write("Here's your popup!");
jswin.document.write('<scr'+'ipt>alert("Here\'s your alert()!");</scr'+'ipt>');
Use javascript to create a node named script, and sets it's attributes with javascript. Then append the node to document.head.
<html>
<head>
<title>JavaScript Popup Example 3</title>
</head>
<script type="text/javascript">
function exitpop()
{
var my_window = window.open("", "mywindow1", "status=1,width=350,height=150");
var head = my_window.document.getElementsByTagName("head").item(0);
alert(head.innerHTML);
var script = my_window.document.createElement ("script");
script.src = "a.js";
head.appendChild (script);
alert(head.innerHTML);
}
</script>
<body onunload="javascript: exitpop()" >
<h1>JavaScript Popup Example 4</h1>
</body>
</html>
You can consider using an iframe, you can set its head and body altogether, and you can put it in the window.
in my aspx page i have a div which contains simple html ,has some id(say 'datadiv')
using jquery i want to get the html of that div (entire div) into a JavaScript variable
how can it be done?
thank you.
var someVar = $("#somediv").html();
If you want the equivalent of Internet Explorer's outerHTML to retrieve both the div and it's contents then the function from this page that extends JQuery should help:#
jQuery.fn.outerHTML = function() {
return $('<div>').append( this.eq(0).clone() ).html();
};
Then call:
var html = $('#datadiv').outerHTML();
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<b>Hello</b><p>, how are you?</p>
<script>
$("b").clone().prependTo("p");
</script>
</body>
</html>
**Out put:**
Hello
Hello, how are you?
Finally got it working..!! the simplest way !! HTML Code
<div class="extra-div">
<div class="div-to-pull-in-variable">
// Your Content Here
</div>
</div>
JQuery Code
$(function() {
var completeDiv = $('.extra-div').html();
alert(completeDiv);
})
});