I was trying to insert a table in iframe when I click a button, but I get an error in the method "pasteHTML" .
Here is the code I wrote:
<html>
<body>
<input type = "button" onClick="setContent()" value="getContent"></input>
<iframe id = "iframe" border="0" >
</iframe>
<script type="text/javascript">
var iframe = document.getElementById('iframe');
iframe.contentDocument.designMode = "on";
function setContent()
{
var iframe = document.getElementById('iframe');
var str = "<table><tr><td>dushyanth</td></tr></table>";
var sel = iframe.document.selection.createRange();
sel.pasteHTML(str);
sel.select();
}
</script>
Is it necessary for you to use only java script? . This can achieved using other ways too like using .load() inside java script function.
<html>
<head>
<script type="text/javascript">
function setContent() {
$('divId').load('another.html')
}
</script>
</head>
<body>
<input type = "button" onClick="setContent()" value="getContent"/>
<div id="divId"></div>
</body>
</html>
another.html
<table>
<tr>
<td>xyz</td>
</tr>
</table>
If you want to use iframe then use following code,
<html>
<head>
<script type="text/javascript">
function setContent() {
$('divId').load('iframepage.html')
}
</script>
</head>
<body>
<input type = "button" onClick="setContent()" value="getContent"/>
<div id="divId"></div>
</body>
</html>
iframepage.html
<html>
<body>
<iframe width="500px" height="400" src="anotherpage.html"></iframe>
</body>
</html>
anotherpage.html
<table>
<tr>
<td>xyz</td>
</tr>
</table>
Try this:
var ifr = document.getElementById('iframe');
ifr.src='javascript:"<table><tr><td>dushyanth</td></tr></table>"';
Live demo: http://jsfiddle.net/3Efva/
Related
I want to pass the src url of a image via javascript function.
<head>
<script>
function myFunction() {
var str1 = "somepictureurl.png";
return str1;
}
</script>
</head>
<body>
<img src="myFunction()" alt="notworking">
</body>
Unfortunately it is not working and the alt "notworking" is displaying.
HTML just doesn't work that way. The JavaScript function can not be called from an element that way.
You'll have to add a method call at the bottom of the page, and pass some kind of id:
<html>
<head>
<script>
function myFunction(id) {
var str1 = "somepictureurl.png";
document.getElementById(id).src = str1;
}
</script>
</head>
<body>
<img id="img1" alt="notworking">
<script>
myFunction("img1");
</script>
</body>
</html>
I want the data in the text field to transfer to a popup, but when I trigger the popup, it is always blank, no matter what is in the box.
<html>
<head>
<title>Popup</title>
</head>
<body>
<button onclick="popup()">Click for popup</button>
<input type="text" name=popupMess><br>
</body>
<script>
function popup() {
window.confirm(name.popupMess);
}
</script>
</html>
<html>
<head>
<title>Popup</title>
</head>
<body>
<button onclick="popup()">Click for popup</button>
<input id="popupMess" type="text"><br>
</body>
<script>
function popup() {
alert(document.getElementById('popupMess').value);
}
</script>
</html>
You forgot the " in name="popupMess".
function popup () {
var text = document.querySelector("input[name='popupMess']").value;
window.confirm(text);
}
Hi here is my jsfiddle that demonstrates the functionality
http://jsfiddle.net/7pjqfcvd/2/
you have to
mark the input element with an Id
<input type="text" id="popupMess"/>
use the id in document.getElementById call to obtain the input element
var elem = document.getElementById("popupMess");
retrieve the value from the element and pass it into the messagebox
window.confirm(elem.value);
But still if you want to use name then try this...
<html>
<head>
<title>Popup</title>
</head>
<body>
<button onclick="popup()">Click for popup</button>
<input type="text" name=popupMess><br>
<script>
function popup() {
var d = document.getElementsByName("popupMess");
window.confirm(d[0].value);
}
</script>
</body>
</html>
<body>
<script type="text/javascript">
var a="sreedhar";
<input type="text" value="abc">
</script>
</body>
It gives the syntax error.
can't we use "html tags" directly in "javascript".
No, you can't use them directly in JavaScript.
However you may treat them as strings:
var str = '<input type="text" value="abc">';
or as DOM elements:
var input = document.createElement('input');
input.type = 'text';
input.value = 'abc';
And then append to the markup, e.g. document.body.appendChild(input);.
Usually a well formated hmtl with javascript looks like this.
<HTML>
<HEAD>
<script type="text/javascript">
var a="sreedhar";
</script>
</HEAD>
<BODY>
<input type="text" value="abc">
</BODY>
</HTML>
If you want to generate some html with javascript then assign it as a string to some variable.
For example you have a div having id='abc' and you want to generate a textbox in this div then you need to do like this
<script type="text/javascript">
var textbox = '<input type="text" value="abc">';
$('#abc').append(textbox);
</script>
Maybe you want this:
<script type="text/javascript">
var a="sreedhar";
document.write('<input type="text" value="abc">');
</script>
</BODY>
<html>
<head>
<title> New Document </title>
<script type="text/javascript">
//put javascript function here
</script>
</head>
<body>
<input type="text" value="abc">
</body>
</html>
You can use html element inside the javascript using element id.
I have 3 html pages. main.html, page1.html and page2.html. I am displaying page1.html and page2.html in main.html using following code.
<!DOCTYPE html>
<html>
<frameset frameborder="1" rows="50%, *">
<frame name="f1" src="Page1.html" />
<frame name="f2" src="Page2.html"/>
</frameset>
</html>
page1.html code
<!DOCTYPE html>
<html>
<head>
<style>
.content {display:none;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="myjs.js"></script>
</head>
<body>
<table id="resultDetails" border="1">
<th>Result Details</th>
<tr>
<td>
Click on me to see more details in other page
<div class="content">
<p> R1 data</p>
</div>
</td>
</tr>
</table>
</body>
</html>
And Page2.html code
<!DOCTYPE html>
<html>
<body>
<div id="myDiv">
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="myjs.js"></script>
</body>
</html>
My JavaScript myjs.js
$(document).ready(function () {
$('table').on('click', 'tr', function () {
var doc =window.top.frames['f2'].document;
var divElmnt = $(doc.getElementById('myDiv'));
$(divElmnt.html($(this).find('.content').html()));
});
});
With this code, on clicking on table row, i am able to display the div "content" content in "mydiv" div of page2.
This works in IE and FF but wont work in Chrome. Error: doc is undefined.
What is the equivalent for window.top.frames['f2'] for chrome.
Give your FrameSet and your Frame an ID:
var $fs = $("#fs");
var f2 = $fs.find("#f2");
f2 is now a jQuery object.
Issue was with Chrome security flag for local files i.e., file:/// . After launching Chrome with "--allow-file-access-from-files" flag option, top.frames worked.
Also I found a useful document on Inter-Frame Communication with JavaScript here.
I wanna fill input with my iframe-in Value.
i have two html file. 1.html and 2.html
First one (1.html) is like that:
<html>
<head>
<title>IFRAME TEST</title>
</head>
<body>
<input type="text" value="" id="mylovelytextbox"><br />
<iframe src="2.html" id="mylovelyiframe">
</body>
</html>
And second one (2.html) is like that:
<html>
<head>
<form method="get" action="">
<input type="hidden" name="thisone" value="mylovelychangedvalue">
</form>
</body>
</html>
I wanna fill mylovelytextbox in 1.html with thisone's value.
How can i do that?
-Sorry for bad english :(
Edit:
I run the code with #stano's help :) Now, my code is like that:
<html> <head> <title>IFRAME TEST</title> </head> <body> <input type="text" value="" id="mylovelytextbox"><input type="button" onClick="var iframe = document.getElementById('mylovelyiframe');console.log(iframe,doc,el);var doc = iframe.contentDocument || iframe.contentWindow.document;var el = document.getElementById('mylovelytextbox');el.value = doc.getElementsByName('thisone')[0].value;" value="Click"><br /> <iframe sandbox="allow-same-origin allow-scripts" src="2.html" id="mylovelyiframe"></iframe> </body> </html>
Thanks a lot, Stano!
At first fix those missing tags
<iframe src="2.html" id="mylovelyiframe"></iframe>
</head><body>
and add some doctype, then you can use
<script type="text/javascript">
var iframe = document.getElementById('mylovelyiframe');
var doc = iframe.contentDocument || iframe.contentWindow.document;
var elem = document.getElementById('mylovelytextbox');
elem.value = doc.getElementsByName('thisone')[0].value;
</script>