Want to check whether the body element is empty in a iframe area which generated by Google Ad. Here is what I have tried and the result retuned. It not works well. Maybe the method is not right.
<iframe id='abc' scrolling="no" marginwidth="0" marginheight="0" frameborder="0" data-load-complete="true">
#document
<html>
<head></head>
<body>
<scirpt>...</script>
<scirpt>...</script>
<div>...</div>
</body>
</html>
</iframe>
var iframe = document.getElementById("abc");
var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
alert(iframeDocument.getElementsByTagName("body"));
// It printed: [object HTMLCollection]
alert(iframeDocument.getElementsByTagName("body").item(0).innerHTML);
// It printed: "". But here it isn't empty.
To check if an html element has children you could use the HTML DOM children property or the childNodes property:
Here's a general example from W3Schools:
<!DOCTYPE html>
<html>
<body>
<p>Click the button to get the tag names of the body element's children.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var c = document.body.children;
var txt = "";
var i;
for (i = 0; i < c.length; i++) {
txt = txt + c[i].tagName + "<br>";
}
document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>
alert(iframeDocument.getElementsByTagName("body").childNodes
Related
The code should enter "new text" after the Footer text but I'm having issues loading the function.
function insertParagraph(){
var newElement = document.createElement("p");
var node = document.createTextNode("new text");
newElement.appendChild(node);
var element = document.getElementsByTagName("footer");
element.appendChild(newElement);
}
<!DOCTYPE html>
<html>
<body>
<footer>
<P>Footer</P>
</footer>
<script src="main.js"></script>
</body>
</html>
The problem is that getElementsByTagName() returns a collection of elements and collections don't have an .appendChild method. You have to append on to a single element.
Also, you need to call your function so it can run.
function insertParagraph(){
var newElement = document.createElement("p");
newElement.textContent = "new text"; // No need for an explicit text node, just set the text directly
// querySelector() finds the first element that matches the selector argument
document.querySelector("footer").appendChild(newElement);
}
insertParagraph(); // You must call a function so it can run.
<!DOCTYPE html>
<html>
<body>
<footer>
<P>Footer</P>
</footer>
<script src="main.js"></script>
</body>
</html>
function insertParagraph(){
var newElement = document.createElement("p");
var node = document.createTextNode("new text");
newElement.appendChild(node);
var element = document.getElementByTagName("footer");
element.appendChild(newElement);
}
insertParagraph();
I am new to javascript, and today i was trying my first example as shown below in the code section. I am using an editor called "Free Javascript Editor".
when I run the code, the browser starts and the text between the tags is displayed but the length of the string is never shown.
am I using it wrong?? please let me know how to do it correctly
lib
compile 'io.reactivex.rxjava2:rxjava:2.0.1'
compile 'io.reactivex.rxjava2:rxandroid:2.0.1'
code:
<html>
<head>
<title>Title of the home pahe</title>
</head>
<body>
<script>
var str = new string ("MyString");
str.length;
</script>
<h2>My First JavaScript</h2>
</body>
</html>
Use Onload event and put it inside js function.
<body onload="myFunction()">
<script>
function myFunction() {
var str = ("MyString");
var n = str.length;
document.getElementById("printlength").innerHTML = n;
}
</script>
<h2>My First JavaScript</h2>
<p id="printlength"></p>
</body>
Use document.createElement
var str = "MyString";
var p = document.createElement("p");
p.textContent = str.length;
document.body.appendChild(p);
Scripts are not rendered by the browser, only executed. You can, however, do something like this:
<html>
<head>
<title>Title of the home pahe</title>
</head>
<body>
<h2>My First JavaScript</h2>
<p id="theLength"></p>
<script>
// No need to invoke the string constructor here.
var str = 'MyString';
// Find our placeholder element and set the textContent property.
document.getElementById('theLength').textContent = str.length;
</script>
</body>
</html>
It's good practice to put your script tags at the end of the body element - that way all of the HTML should render before the scripts are executed.
You should assign the length of your string to a variable. Then, you can show it.
<span id="stringLength"></span>
<script>
var str = "MyString";
var length = str.length;
document.getElementById('stringLength').textContent = 'Length: ' + length; // Show length in page
console.log('Length: ' + length); // Show length in console
alert('Length: ' + length); // Show length as alert
</script>
It must be String, not string. Code below works.
var str = new String ("MyString");
str.length;
Changed your code to this:
<html>
<head>
<title>Title of the home pahe</title>
</head>
<body>
<script>
var str = "MyString";
console.log(str.length);
</script>
<h2>My First JavaScript</h2>
</body>
</html>
Then you must look in the developer console for the output, here is how:
Google Chrome
FireFox
Safari
I have a HTML file named test.html and below are the content of that file.
<html>
<head></head>
<body>
This is the content.
</body>
</html>
Now I have another file where I want to show the test.html content by iframe and then match the content with something and do something if it matches.
Here is what I'm trying but I'm not getting the iframe data.
<html>
<head></head>
<body>
<iframe id="myIframe" src="test.html"></iframe>
<script>
var iframe = document.getElementById("myIframe");
var iframe_content = iframe.contentDocument.body.innerHTML;
var content = iframe_content;
// var content = "This is the content."; --> I want to get the iframe data here like this. Then match it with the following.
var find = content.match(/ is /);
if (find) {
document.write("Match Found");
} else {
document.write("No Match!");
}
</script>
</body>
</html>
Thanks in advance
As stated in the comments, you need to wait for the iframe content to load. https://developer.mozilla.org/en-US/docs/Web/Events/load
<iframe id="myIframe" src="https://stackoverflow.com/questions/45525117/get-iframe-content-by-using-javascript#"></iframe>
<script>
const myFrame = document.getElementById('myIframe');
myFrame.addEventListener('load', (evt) => {
console.log(evt.target === myFrame);
console.log(evt.target);
});
</script>
Nothing will work unless your web page and iframe have the same origin
Say I have the following JavaScript in a HTML page
<html>
<script>
var simpleText = "hello_world";
var finalSplitText = simpleText.split("_");
var splitText = finalSplitText[0];
</script>
<body>
<a href = test.html>I need the value of "splitText" variable here</a>
</body>
</html>
How do I get the value of the variable "splitText" outside the script tags.
Thanks!
<html>
<script>
var simpleText = "hello_world";
var finalSplitText = simpleText.split("_");
var splitText = finalSplitText[0];
window.onload = function() {
//when the document is finished loading, replace everything
//between the <a ...> </a> tags with the value of splitText
document.getElementById("myLink").innerHTML=splitText;
}
</script>
<body>
<a id="myLink" href = test.html></a>
</body>
</html>
Try this :
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var simpleText = "hello_world";
var finalSplitText = simpleText.split("_");
var splitText = finalSplitText[0];
$("#target").text(splitText);
});
</script>
<body>
<a id="target" href = test.html></a>
</body>
</html>
<html>
<head>
<script>
function putText() {
var simpleText = "hello_world";
var finalSplitText = simpleText.split("_");
var splitText = finalSplitText[0];
document.getElementById("destination").innerHTML = "I need the value of " + splitText + " variable here";
}
</script>
</head>
<body onLoad = putText()>
<a id="destination" href = test.html>I need the value of "splitText" variable here</a>
</body>
</html>
In raw javascript, you'll want to put an id on your anchor tag and do this:
<html>
<script>
var simpleText = "hello_world";
var finalSplitText = simpleText.split("_");
var splitText = finalSplitText[0];
function insertText(){
document.getElementById('someId').InnerHTML = splitText;}
</script>
<body onload="insertText()">
I need the value of "splitText" variable here
</body>
</html>
Here you go: http://codepen.io/anon/pen/cKflA
Although, I must say that what you are asking to do is not a good way to do it. A good way is this: http://codepen.io/anon/pen/jlkvJ
The info inside the <script> tag is then processed inside it to access other parts. If you want to change the text inside another paragraph, then first give the paragraph an id, then set a variable to it using getElementById([id]) to access it ([id] means the id you gave the paragraph).
Next, use the innerHTML built-in variable with whatever your variable was called and a '.' (dot) to show that it is based on the paragraph. You can set it to whatever you want, but be aware that to set a paragraph to a tag (<...>), then you have to still put it in speech marks.
Example:
<!DOCTYPE html>
<html>
<body>
<!--\|/id here-->
<p id="myText"></p>
<p id="myTextTag"></p>
<script>
<!--Here we retrieve the text and show what we want to write...
var text = document.getElementById("myText");
var tag = document.getElementById("myTextTag");
var toWrite = "Hello"
var toWriteTag = "<a href='https://stackoverflow.com'>Stack Overflow</a>"
<!--...and here we are actually affecting the text.-->
text.innerHTML = toWrite
tag.innerHTML = toWriteTag
</script>
<body>
<html>
I have a function that i need to call on iframe mousemove(). But i didnt found anything like we have in body tag
We have <body mousemove="Function()"> Do we have anything like this for iframe??
The iframe contains its own document, own body element etc.
Try something like this:
var frame = document.getElementById("yourIframeId");
// IE is special
var frameDoc = frame.contentDocument || frame.contentWindow.document;
var frameBody = frameDoc.getElementsByTagName("body")[0];
var testingOneTwo = function() {
console.log("Hello, is this thing on?");
};
frameBody.onmouseover = testingOneTwo;
Did you mean onMouseOver or onFocus?
e.g.
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script language="javascript">
<!--
function SayHello()
{
alert("Hi from IFrame");
}
//-->
</script>
</HEAD>
<BODY>
<iframe id="myiFrame" onMouseOver="SayHello()"/>
<iframe id="myiFrame" onFocus="SayHello()"/>
</BODY>
</HTML>