How to update a div in htmleditor - javascript

Could someone help me in updating a div in a htmleditor? Its in an iframe, so I could not do:
Ext.fly('mydiv').update('New value');
Right now I am updating the whole content with:
xtype:'textfield',
listeners:{
keyup:{
fn:function(){
var e = this.up().down('htmleditor');
var v = 'some text <div id='mydiv'></div> some more text'
e.setValue(v);
}
}
},
xtype:'htmleditor',
...
where as I would only like to update the mydiv part only but cannot get reference to it somehow. Thanks.

If I understand correctly, the real question here is "How do I access a DIV inside an IFRAME from its parent document?"
I haven't used EXT JS for anything, so I don't know its syntax. But here it is in basic JavaScript.
First, the document in the IFRAME:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Child Document</title>
</head>
<body>
<h1>Child Document</h1>
<div id="stuff">
This is a div with some text in it.
</div>
</body>
</html>
And then the parent document:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Parent Document</title>
<style type="text/css">
#iframe {
width: 250px;
height: 250px;
border: 1px solid #CCC;
}
</style>
</head>
<body>
<h1>Parent Docment</h1>
<form action="" method="get">
<p>
<input type="button" id="get-it" value="Get It" />
</p>
</form>
<iframe src="iframe.html" id="iframe"> </iframe>
<script type="text/javascript">
<!--
function getIt(){
var iframe = document.getElementById("iframe");
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
var stuff = innerDoc.getElementById("stuff");
alert(stuff.innerHTML);
}
function init(){
document.getElementById("get-it").onclick = getIt;
}
window.onload = init;
// -->
</script>
</body>
</html>
The key is this:
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
That lets you get access to the document object of the IFRAME, after which you can use it as normal.

Related

Programmatically add javascript in html page

I'm trying to build an HTML page like this
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function setup(){
var mydesign = '<input type="button" value="Test" onclick="BtnClick()" /><div id=result></div>';
var myscript = 'function BtnClick(){alert("DoTest()");}';
eval(myscript);
document.getElementById("myBody").innerHTML = mydesign;
}
</script>
</head>
<body id = "myBody" onload="setup()">
</body>
</html>
But onclick cannot find function BtnClick().
Any ideas?
The eval() function evaluates or executes an argument
create BtnClick() function separate as below
function BtnClick(){
alert("DoTest()");
}
function setup() {
var mydesign = '<input type="button" value="Test" onclick="BtnClick()" /><div id=result></div>';
document.getElementById("myBody").innerHTML = mydesign;
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>JS</title>
</head>
<body id="myBody" onload="setup()">
</body>
</html>
It is possible to write js functions directly into the onclick attribute
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body id = "myBody" onload="setup()">
<script type="text/javascript">
function setup(){
var mydesign = "<button onclick="+'alert("hello")'+">Click me</button>";
document.getElementById("myBody").innerHTML = mydesign;
}
</script>
</body>
</html>

how to access parent document from html object in javascript?

this is about HTML <object> element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>parent</title>
<style>
#square { width:20px; height:20px; background-color: aqua;}
</style>
</head>
<body>
<div id="square"></div>
<object data="child.html" type="text/html" ></object>
</body>
</html>
and child.html is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<button>red</button>
<button>blue</button>
<script>
document.querySelectorAll('button').forEach(bt=>{
bt.onclick=e=>{
console.log(e.target.textContent)
document.parentNode.getElementById('square').style.background = e.target.textContent
}
})
</script>
</body>
</html>
but I got this error :
TypeError: document.parentNode is null
so how to access to #square element from child.html in JS ?
Try this -
parent.document.getElementById('square').style.background = e.target.textContent

Open window and access its element from the parent window

Even though there are similar questions to mine js open popup window and acces it's element in another page , the solution there didn't work for me ..
I am trying to open a window onclick, and then access a certain element and edit its content , but it's not working..
Here is the parent html
<!doctype html>
<html>
<head>
<title>Parent</title>
<script src="opener.js"></script>
<meta charset="utf-8"/>
</head>
<body>
<button class="w3-btn w3-container" id = "submit_btn">Submit</button>
</body>
</html>
Child html
<!doctype html>
<html>
<head>
<title>Pre:D</title>
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<meta charset="utf-8"/>
</head>
<body>
<input class="w3-input" type="text" id="input_word" placeholder="enter your word here">
<div id="dump" style = "width: 800px"> </div>
</body>
</html>
and here is the opener.js script
window.onload = function(){
document.getElementById("submit_btn").onclick= run;
};
function run(){
var myWindow = window.open('child.html', "width=850,height=600");
myWindow.onload = function() {
myWindow.document.getElementById("dump").innerHTML = 'Janela: ';
}
}
Best

tinyMCE - Add style to <head> on getContent() method

I'm using timyMCE version 3 { majorVersion : '3', minorVersion : '5.4.1' }. When I put Content in textarea, I got below data.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<p> Content </p>
</body>
</html>
What should I do to change it to below output as I call getContent() method?
<html>
<head>
<meta http-equiv="content-type" content="text/html;" charset="UTF-8">
<style>
/** Specify a font named "MyFont",
and specify the URL where it can be found: */
#font-face {
font-family: "MyFont";
src: url('file:///android_asset/fonts/RSU_Regular.ttf');
}
body { font-family:"MyFont"}
</style>
</head>
<body>
<p> Content </p>
</body>
</html>
Can you help me please?

Javascript generated HTML not working

The console doesn't give any error, and the window displays nothing. What is wrong with it?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Home</title>
<script type="text/javascript">
function stuffify(){
for(var a=6;a<=0;a--){
document.getElementById("stuff").innerHTML+="<h"+a+">stuff</h"+a+"></br>";
}
}
</script>
</head>
<body>
<div id="stuff" onload="stuffify()"></div>
</body>
</html>
The onload function will work when on the body tag of your document.
Also, the condition of your for loop is incorrect, it should be:
for(var a=6; a >= 0; a--)
try this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Home</title>
<script type="text/javascript">
function stuffify(){
for(var a=6;a<=0;a--){
document.getElementById("stuff").innerHTML+="<h"+a+">stuff</h"+a+"></br>";
}
}
</script>
</head>
<body onload="stuffify();">
<div id="stuff" ></div>
</body>
</html>
onload is supported by following tags:
<body>, <frame>, <frameset>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>
This explains why stuffify is not triggered after your div is loaded.
So, you can bind the onload function to body instead of div, or insert script after div, like this:
<div id="stuff" ></div>
<script type="text/javascript">
stuffify();
</script>

Categories