|
JavaScript - How To Get Text From An Iframe?
Hello
I need to get text from an iframe. I tried this example (I've found it on this board): Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Example</title>
<style type="text/css">
</style>
<script type="text/javascript">
// <![CDATA[
window.onload = function()
{
// treat iframe_window as if it were your iframes window (which it is)
var iframe_window = window.frames["my_iframe"];
// compare the following line to: window.document.getElementsByTagName("body")[0].innerHTML;
var iframe_body_html = iframe_window.document.getElementsByTagName("body")[0].innerHTML;
alert(iframe_body_html);
}
// ]]>
</script>
</head>
<body>
<iframe name="my_iframe" id="my_iframe" src="example.html"></iframe>
</body>
</html>
but it works only with window.onload event. I need to get this text dynamically (e.g. on click). could you give me some example? Regards. Similar TutorialsHi, I'm trying to locate some text within an iframe highlighting the string found. I was wondering if someone knows a good way to do Stickers I use the following code to create a hidden iFrame on a page, dynamically Code: var i = document.createElement('iframe');
i.style.display = 'none';
i.onload = function() { i.parentNode.removeChild(i);};
i.src = 'http://www.mysite.com';
document.body.appendChild(i);
i.id='frame1';
Now, document.getElementById('frame1').contentDocument.getElementById('text01').value Should have given me the value in 'text01', but it doesn't. It doesn't work even inside the iFrame's onload event. ('text01' is a textbox which is on the page inside the iFrame - its name and id are both 'text01') Is there any other method to get the text in a textbox within an iFrame? Please help me to correct the code. Thanks in advance. Hi, I can't get this to work, but I'm trying to update the text into an iframe on the same page with a button, for a game I'm making, the battle messages when you attack. Please any help greatly appreciated. here is the html file with the button and onClick Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<style type="text/css">
body {
background-color: black;
color: gold;
}
</style>
</head>
<body>
<html>
<body>
<script type="text/javascript">
var my_var = "Hello World!"
function text2add(){
return '<font color=gold><strong>'+my_var+'</strong></font>';
}
</script>
<form>
<form><input type="button" value="change" onClick="text2add();"/></form>
Main page! Frame below.
<br><br>
<iframe src="iframe.html" ></iframe>
</body>
</html>
</body>
</html>
and here is the iframe page code] Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Insert title here</title> </head> <body> <script type="text/javascript"> document.write(parent.text2add()); </script> This is my iframe </body> </html> This is probable very easy, I've tried with normal html and am unable to get my head around it. I would like to in some way replicate how a web browser works. I have a form entry field with a submit button at the top of the page. Under that I have an iframe. I copy the url http://www.bbc.co.uk into the entry field, click submit and the iframe updates with the website. Have looked around and haven't found anything similar. Code so far.... <form target="myURL"> <input type="text" name="goTo"> <input type="submit" name="submit" value="submit"> </form> <iframe src="" name="myURL" border="0" frameborder="0" width="768" height="354"></iframe> Thanks in advanced. Death = $Mill I have referenced the following thread for ideas on the issue I want solved, but only took it as far as I can. Any help would be great. http://codingforums.com/showthread.php?t=202459 I would like to utilize this script where I could pass the string of words to another page. Meaning, search for the text, actually a word, then take the two words following the searched text and have them passed to the next page...I have tried to "alert" the words, but have no success. I have tried to modify the code using the following, but the result just posts a "-1" in my alert popup. As you can see I modified the code from the original thread in the third block of "for" code. also, I added an "alert" tag. One more thing, I added a function call for the form button. Hope you can help out. The code is below: Code: <script type="text/javascript">
var count = 0;
var itemList = new Array();
var oldText = "";
var rawText = "";
var workText = "";
function highlight() {
// overcome problem in Firefox caused by blank fields
itemList[0] = document.getElementById("txt1").value == '' ? "FireSchmoxStryng" : document.getElementById("txt1").value;
itemList[1] = document.getElementById("txt2").value == '' ? "FireSchmoxStryng" : document.getElementById("txt2").value;
itemList[2] = document.getElementById("txt3").value == '' ? "FireSchmoxStryng" : document.getElementById("txt3").value;
if (count == 0) {
rawText = document.getElementById('subjectMatter');
workText = rawText.innerHTML;
oldText = rawText.innerHTML;
}
else {
workText = oldText;
}
workText = workText.replace(/(\<)/g," $1").replace(/(\>)/g,"$1 ");
for (i=0; i<itemList.length; i++) {
itemList[i]= itemList[i].replace(/^\s+|\s+$/g,"");
var currWord = new RegExp("([\\s\\r\\n\(]*"+itemList[i]+"[\\s,;\.:?!\'\"()-]+)",'gi');
workText = workText.replace(currWord," <span class='highLight'>$1<\/span> ");
}
for (i=0; i<itemList.length; i++) {
var currWord = new RegExp("(\<\/span\>\\s)([0-9a-z%,;:\.?!\"\'()]+\\s)",'gi');
workText = workText.replace(currWord," $1<span class='highLight'>$2<\/span> ");
}
for (i=0; i<itemList.length; i++) {
var currWord = new RegExp("(\\s[0-9a-z%,;.:?!'()]+)(\\s\<span class='highLight'>)",'gi');
workText = workText.replace(currWord," <span class='highLight'>$1<\/span>$2 ");
Text = workText.indexOf(currWord);
var url = "http://www.blank.com/results.php?searched=" + Text;
}
rawText.innerHTML = workText;
count ++;
alert(url);
}
</script>
<style type="text/css">
body {font-family: arial; font-size: 10pt; margin-top: 60px; margin-bottom: 60px; background-color: #f5f5f5;}
.highLight {font-family: arial; font-size: 10pt; color: #00008B; font-weight: bold; cursor: help;}
</style>
</head>
<body>
<form>
First word or phrase to find <input type = "text" id = "txt1" size = "50"><br>
Second word or phrase to find <input type = "text" id = "txt2" size = "50"><br>
Third word or phrase to find <input type = "text" id = "txt3" size = "50"><br><br>
<input type = "button" value = "Highlight Selected" onclick = "highlight()">
<input type = "reset" value = "Reset Form">
<!--<input type = "button" value = "Reset Results" onclick = "document.getElementById('subjectMatter').innerHTML = oldText">-->
<input type = "button" value = "Reset Results" onclick = "highlight()">
</form>
<br>
<div id='subjectMatter'>
Join Chief Economist Mark Zandi and Director of Housing Economics Celia Chen for an introduction to Housing in Crisis: When Will Metro Markets Recover?, a new study that offers a comprehensive look at the near-term prospects for a recovery in housing markets in a recessionary environment. In addition, Dr. Zandi will critique the effectiveness of policy thus far in the housing crisis and discuss additional measures the Obama administration will enact that are assumed in the Moody's Economy.com house price forecast. Key findings:- In about 10% of metro areas, price declines will exceed 30%.
Economic experiments in virtual worlds (or, more generally, virtual economies) have been proposed a number of times and also conducted to some extent. A recent addition to the conducting category is Reciprocity and status in a virtual field experiment by Andreas Nicklisch and Tobias Salz. In their study, the authors conducted a field study in World of Warcraft, seeking to investigate the role of reciprocity, and the effect of status on reciprocity, in employment relations. Reciprocity here means the observed tendency to react kindly to kind actions, even though such reactions are not enforced. Unlike previous economic experiments conducted in virtual worlds, the authors did not create an artificial setup for the experiment. Below, I summarize and briefly discuss the study and its findings. Economic experiments in virtual worlds (or, more generally, virtual economies) have been proposed a number of times and also conducted to some extent. A recent addition to the conducting category is Reciprocity and status in a virtual field experiment by Andreas Nicklisch and Tobias Salz. In their study, the authors conducted a field study in World of Warcraft, seeking to investigate the role of reciprocity, and the effect of status on reciprocity, in employment relations. Reciprocity here means the observed tendency to react kindly to kind actions, even though such reactions are not enforced. Unlike previous economic experiments conducted in virtual worlds, the authors did not create an artificial setup for the experiment. Below, I summarize and briefly discuss the study and its findings.
</div>
</body>
</html>
I am looking for an input text that links to a iframe. . ? To begin, we need some simple HTML elements: A basic form; An Input text that will contain the URLs we want to use; An iFrame that will display the page we select from the input text. Thanks in advance Stickers Hi world I have this code in my page PHP Code: <iframe name="ff1" src="http://playerplus.co.nu/ipp.php" ></iframe> how i copy the result in this iframe to text or to some variable but from iframe not direct from the URL "http://playerplus.co.nu/ipp.php" Hi all, I'm trying to get the cursor position to move to the end of the text within an editable iframe or div. I've been pointed to something called TextRange and have been reading up on it for days yet couldnt make sense of much (i'm still very new). what i'm trying to do is on a button click, the cursor will move to the end of the text in the iframe. any help or pointers would be greatly appreciated. thanks. Hi all, I hope you can help I have some code which: 1) Opens a URL (e.g. google.com) in a hidden iframe, then 2) Redirects the visitor to a different URL (e.g. yahoo.com) after it has loaded... This works exactly as I need. What I'd like to do is the following: 1) Open a URL (e.g. google.com) in a hidden iframe, then 2) Redirect the visitor to a different URL (e.g. yahoo.com) in a full-screen iframe 3) The address bar of the full-screen iframe should be my domain (obviously!) Here's what I have so far... Hidden iframe -> New URL Code: Code: <html>
<body>
<script type="text/javascript">
var page_body = document.getElementsByTagName('body');
var myframe = document.createElement('iframe');
var id = Math.random();
myframe.setAttribute('id', 'myFrame'+id);
myframe.src = 'http://google.com'; //First open Google in hidden iframe
myframe.setAttribute('frameborder', '0')
myframe.setAttribute('width', '0');
myframe.setAttribute('height', '0');
if (myframe.attachEvent)
{
myframe.attachEvent('onload', function()
{
top.location = 'http://yahoo.com'; //Once loaded redirect to Yahoo -- but the address bar shows yahoo.com -- I want the address bar to display mydomain.com/page.html
});
}
else if (myframe.addEventListener)
{
myframe.addEventListener('load', function()
{
top.location = ('http://yahoo.com');
}, false);
}
page_body[0].appendChild(myframe);
</script>
</body>
</html>
I have an example of some code which displays the full screen iframe, but my problem is... ...I can't figure out how to redirect to this after the hidden iframe has loaded Here's an example of how I want the redirect to display -- after the initial hidden iframe has loaded: Code: <html>
<head>
<script type="text/javascript">
function sendParams() {
document.body.style.overflow = "hidden";
}
</script>
</head>
<body>
<!--Open Yahoo.com in a full screen iframe, and disable extra scrollbar -->
<iframe height="100%" width="100%" frameBorder="no" onload="sendParams()" src="http://yahoo.com"></iframe>
</body>
</html>
I've been beating my head against the wall today trying to figure this out, and I'm fresh out of ideas. If you can help, you'll have some serious gratitude and good karma thrown your way! Best wishes, and thanks in advance, Paul Hi there everybody, I've got this problem which I can't solve myself... I've got a website which has 3 colums and is hosted on domain1.com. in the right column I've got an Iframe which loads content from domain2.com . this content are some textboxes and a datepicker tool. if I press the 'search'-button in this Iframe I would like to refresh the mainpage (from domain1.com) so that another Iframe appears in the middle column. in this column i would like to load a new form from domain2.com which contains the values that I've put in in the form from the right Iframe. Unfortunally I can't get this to work... Will somebody please help me? Is there a way to resize an iframe dynamically so that you never get the scroll bar and essentially hide that there is an iframe? Better integration really. Basically I want to iframe a forum into my site so that the design down the sides and top which my friend does using iweb are not messed with. We have a central area which can be longer or shorter depending on the forum. I have used iframes for my site and found various javascripts so when a person clicks on say the audio page he http://www.krillmeed.com/index.html it takes them to the audio page but will load it into the index.html page. The problem is, especially with search engines, to point to that page, this is what the URL looks like to send someone to that page: http://www.krillmeed.com/?frame=0&sr...m%2Faudio.html which is not very clean at all, this is the javascript that i found that at least works: Child iframe script: Code: <script type="text/javascript">
(function(){
var qstr = '?frame=0&src=' + encodeURIComponent(location.href),
lre = new RegExp('^' + location.protocol + '//' + location.hostname + '(()|(/)|(/index.html)|(/index.php))(()|(\\' + qstr + '))$');
if (!lre.test(parent.location.href)){
top.location.href = '/' + qstr;
}
})();
</script>
Parent iframe Script: Code: <script type="text/javascript">
(function(){
function getQval(n) {
if(typeof n !== 'string'){
return null;
}
var r = new RegExp('[?&;]' + n + '=([^&;#]*)'), m = location.search;
return (m = r.exec(m))? unescape(m[1]) : null;
}
var f = getQval('frame'), s = getQval('src');
if(f && frames[f] && s && s.indexOf(location.protocol + '//' + location.hostname + '/') === 0){
frames[f].location.href = s;
}
})();
</script>
Is there a "cleaner" way of doing this? This was an old code, i have yet to find a more modern one. Thank you in advance. Hi, Not sure if I worded that question right. I have a web page which will display another web page in an iframe. But the content inside the iframe may change while the user interacts with it so I need to be able to resize the iframe height from code on the page inside the iframe. Any tips on how I can do that? I am using php and javascript. Thanks. I have an iframe that is a specific height and width. I want to detect whenever the the iframe is no longer exactly the height i set it to. If a user has CSS turned off for example the iframe will be in default height and width. I want to detect that. This is how you'd normally do it but this only returns the original size (try with 'no style' in Firefox): Code: function getSize()
{
alert('height is now '+document.getElementById("Iframemain").height)
alert('height is now '+document.getElementById("Iframemain").width)
}
Is it possible? Hello to all and thanks in advance for my help. I know this has been posted in different places on the web but I have found no solid solution. Here is my problem: I have an iframe the loads up a page on a remote server (out of my hands) and when I send certain information to it, the page redirects my entire site to their 404 page. I need to prevent this from happening so I engaged in much research and found this... temporary fix: Code: <script>
// No redirection!
var prevent_bust = 0
window.onbeforeunload = function() { prevent_bust++ }
setInterval(function() {
if (prevent_bust > 0) {
prevent_bust -= 2
window.top.location = 'http://www.mysite.com/my404.html'
}
}, 1)
</script>
What this code does, is that every time the unload of a page happens, it will redirect me to my404.html and this does solve the problem of the iframe trying to redirect my entire site but anytime a user tried to go to a new website by typing it in the address bar, they are redirected to my404.html. Is there another solution for me so that the page within the iframe cannot redirect the parent page? Hello.... I've 2 iframes. And i want to change the css class of second iframe anchor tag from the first. Code: <div id="top-navigation" title="top-navi">
<ul><li id="homePageLink" class="first">
<a id="homePageTab" class="navigation-font" href="</a>
</li>
</ul>
</div>
In the above code how can i change the class="navigation-font" from the first iframe? Please help.... Hi I have a page with 3 iFrames, showing different content. iFrame1: Here is a navigation php page. Click on a menu item and it loads a php page in iFrame2 iFrame2: Here is a list of items from a database. iFrame3: I load 3 different php pages here. (A) is the main showing page. (B) and (C) is a record manipulation page, that does some editing in the database and then redirects to (A). When the (A) php page loads, it should reload iFrame2 I have tried to put something like: <body onLoad=parent.location.reload()> and put it on the (A) php page. This will reload the entire page, which works. However, it results in a loop of reloads, as the (A) iFrame file will load with the entire page reload... So, I was looking for the right code to put, like onLoad=iFrame2.location.reload() However, I can't seem to find the correct code, so I hope any of you can help me... As of right now I have a code that will work in IE but wont work in FireFox...go figure. Basically what I want to have happen is when you type in an area code it will provide an output in a predetermined area of the page. For Example: Input- 512 Output - Austin, TX The code that I have doesn't work with firefox and I was just wondering if there was a code that would allow that to happen. Thanks! Hi, I have a form with 9 text fields and a text area. What I want to do is replace the text in the text area depending on how many fields contain text. For example my text boxes are named 1 to 9, if the user enters text in the first five boxes I want the text area to auto fill with 'you have selected boxes 1 to 5' if the user selects all nine it will say 'you have selected 1 to 9', therefore, the user must complete the text boxes in order. I have it working with an onchange event but i have a button on the form to also auto fill the text boxes and it does not work if this is clicked. Any help would be appreciated! Hi all, Thanks for reading. I'm having an issue trying to accomplish the following - I have a text field (field1) already displayed on the HTML page. However, there's a link where you can add additional text fields to the page as well. When the link is clicked, the second text field is added successfully (field2), and when the link is clicked again, the third text field (field3) is added successfully. However, the third field does not add itself to the page, and the text for anything greater than a third field also isn't displayed after. This obviously means that my "fields" variable is not working right, so I'm wondering, would anyone be able to assist me to help me get that variable processing correctly? Code: <script language="javascript">
fields = 1;
function addMore() {
if (fields = 1) {
document.getElementById('addedMore').innerHTML = "<input type='text' name='field2' size='25' /> <span>Field 2.</span>";
fields = 2;
} else if (fields = 2) {
document.getElementById('addedMore').innerHTML = "<input type='text' name='field3' size='25' /> <span>Field 3.</span>";
fields = 3;
} else {
document.getElementById('addedMore').innerHTML = "Only 3 fields are allowed.";
document.form.add.disabled=true;
}
}
</script>
Here is the code in my HTML - Code: <input type="text" name="field1" size="25" /> <span>Field 1.</span> <div id="addedMore"></div> <p class="addMore"><form name="add"><a onclick="addMore()">Add another field.</a></form></p> Thank you very much. |
|||||||