I have been trying to access data from an iframe. I am working on codeigniter. I have spent my whole day searching for the solution, but no luck. I am not an expert in javascript, so it is becoming more difficult to me. Please have a look at my code.
home-upload-dialog.php view file
<div id="popup-contents">
<iframe id="upload-frame" frameborder="0" scrolling="no" height="200" width="100%" src="<?php echo site_url('home/upload_area/' . $_REQUEST['count']);?>"></iframe>
</div>
<input type="button" value="click me" onclick="run()">
<script>
run() {
var iframedoc = document.getElementsByTagName('iframe')[0].contentWindow.document;
var inputs = iframedoc.getElementById('text');
console.log(inputs);
}
</script>
home.php controller
upload_area() {
$data['count'] = $count;
$this->load->view('upload-area', $data);
}
upload-area.php view file
<!DOCTYPE html>
<html>
<head>
<title>Title here</title>
</head>
<body>
<input type="text" name="text" id="text" value="someValue">
</body>
</html>
I get the error saying Uncaught TypeError: Cannot read property 'contentWindow' of undefined
There might be things I overlooked. Any help would be appreciated !
I also tried $('iframe').contents().find('#text').html(); but no luck.
There are already many answers to your questions, google "access DOM inside iframe" for several solutions, here is one.
In general remember that you cannot access the iframe data if the iframe is loaded on another domain for security reasons (otherwise imagine the "Like" widget from Facebook, you could load it and then steal the authorization cookie of the users visiting your website...)
EDIT: Note that the security limitation above includes funny situations like your website is loaded from "www.domain.com/page.php" and your iframe from "domain.com/iframe.php", so check that out.
Related
DON'T REPORT YET - READ FIRST
I'm trying to make a textbox and a button, then a iframe that whenever you press the button it goes to the URL in the textbox. I have tried:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="application/javascript">
function navigate() {
$('#iframe1').attr('src', $('#ifrmsite').val());
return false;
}
</script></head>
<body>
Enter website url below:<br/>
<form onSubmit="return navigate();" method="get" action="">
<input type="text" value="http://www.w3schools.com/" name="ifrmSite" id="ifrmsite"/>
<input type="submit" value="Submit">
</form>
<br /><br />
<iframe name="iframe1" id="iframe1" src="" width="600" height="700" scrolling="auto">
</iframe>
</body>
</html>
But... It doesn't work for me. You see, this script also changes the page url, and since I see this trough a iframe on my website, it just doesn't work. If anyone knows a way around this or a different way to do it, please tell me! :) have a nice day!
you can, you have many pure js options:
var el = document.getElementById('ifrm');
el.src = url; // assign url to src property
window.frames['ifrm'].location = url;
//or
window.frames['ifrm'].location.replace(url);
if is your page you can just make links
link
but remeber that will only work in the same origin.
"It is generally possible to load documents from other domains in iframes. However, it would not be possible for the containing document to make a reference to the document inside the iframe due to the restrictions of the Same Origin Policy. Also, the page from the other domain could contain code that would prevent its being loaded in your iframe."
I would like to access the PDFium API, that is the pdf viewer in Chrome.
It is not clear what can I do.
Some old questions give some hints.
does pdfium expose its api to javascript? i want to get the number of current page, but how to do this?
Call pdfium (chrome native pdf viewer) from javascript
I created a HTML file but I see that the methods of the plugin are not working.
<html>
<body >
<embed id='embedId' width='100%' height='100%' name='plugin' src='C:\path\file.pdf' type='application/pdf' />
<input type="button" value="Click me" onclick="embedEl=getElementById('embedId'); embedEl.selectAll();">
</body>
</html>
I would like to know whether the API is available at present time in Chrome (so to be able to build something upon it) or not.
Hi you can find some API methods here:
https://cs.chromium.org/chromium/src/chrome/browser/resources/pdf/pdf_scripting_api.js
Here is a basic example, it gives out an alert when the PDF loads.
<html>
<body style="overflow:hidden;">
<embed width="100%" height="100%" id="plugin" src="test.pdf" />
<script type="text/javascript" src="pdf_scripting_api.js" />
var plugin = document.getElementById("plugin");
var scriptingAPI = new PDFScriptingAPI(window, plugin);
scriptingAPI.setLoadCallback(function(success)
{
alert(success);
});
</script>
</body>
I'm trying to write my first chrome extension to test my acquired knowledge from codecademy (HTML/CSS, JQUERY and Javascript). First of all I'm trying to append text to a paragraph tag via the onclick of a button.
heres my code:
<!doctype html>
<html>
<head>
<title>Facebook event graph</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js"></script>
<script src="popup.js"> </script>
</head>
<body>
<form id="inputUrl">
Enter a URL: <input type="text" name="url" id="url">
<button type="button" onclick="getFacebookData()"> Get Data </button>
</form>
<canvas id="graph" width="300" height="100">
</canvas>
<p id="text" width="300" height="100">1</p>
</body>
</html>
and my popup.js:
$(document).ready(function(){
//Variables
function getFacebookData() {
$('p').append('Test');
};
});
it's probably something very basic that I'm doing wrong, but a push in the right direction would be really appreciated :)
You are not allowed to use inline scripting like onclick="getFacebookData()"
You have to remove the handler from html:
<button type="button" id="my-button"> Get Data </button>
And you have to move the handler into popup.js:
$(document).ready(function(){
$('#my-button').click(getFacebookData);
});
You are also, by default, not allowed to load jQuery from an external CDN - and certainly not http one, again for Content Security Policy reasons. And you shouldn't! Put jQuery in your extension's folder and load it locally.
Matter of taste, but I would place getFacebookData() definition outside $(document).ready, so it's available in the global scope. Also, the semicolon after it is not needed.
Last, but not least: for future debugging, inspect the console of the corresponding page of your extension. For things like background/options page you should be able to access them from Developer Mode extensions list. For a popup, you should right-click the button of your extension and select "Inspect Popup".
I'm trying to change the value of a text box within iframe.
I have tried using GetElementById in every way i could find and nothing seems to work.
I found a alternative to iframe by using the Object data tag but it has the same problem.
My code more or less, I changed it a bit for presentation:
<html>
<head>
<title>None</title>
</head>
<body>
<script type="text/javascript">
function changeValue() {
var textBox = document.getElementById('userName');
textBox = "hello!";
}
</script>
<iframe id="myFrame" src="http://www.website.com"></iframe>
<input type="button" onclick="changeValue()" value="Submit">
</body>
</html>
This is not possible for security reasons.
If you had access, you would be able to load, say facebook.com in an iframe on your website and extract user details with JavaScript.
Try something along the lines of
document
.getElementById('myFrame')
.contentWindow
.document
.getElementById('userName')
.value='hello';
As the others pointed out, this will only work if the page inside the iframe is on the same domain.
I have got an iframe that displays a form from an external site,once the form is submitted it is redirected to another page that has got a thankyou message.Is it posiible to know from the iframe if the location of src webpage has changed? i hope im making some sense...
i got this code which will do the job for me from some website,its working while im in their website but when i try to do it locally im getting Access Denied javascript error....
<html>
<body>
<script language="JavaScript">
function myLocation() {
alert(document.all.myFrame.contentWindow.location);
}
</script>
<iframe id="myFrame" src="http://www.java2s.com" style="width:200;">
</iframe>
<br>
<button onclick="myLocation();">Location of Frame</button>
</body>
</html>
thank you
You may want to use the onLoad event, as in the following example:
<iframe src="http://www.google.com/" onLoad="alert('Test');"></iframe>
The alert will pop-up whenever the location within the iframe has changed. The only problem with this technique is that it may not work with some older browsers like IE5 and early Opera. (Source)
UPDATE:
Further to your edit, you are getting the "Access Denied" error because you cannot access the contentWindow.location of a website that is not within the same domain of the parent window. While this is unfortunate for your genuine requirement, this is considered a security restriction to prevent cross-site scripting.
function chkCounter(counterValue) {
var tmp=document.getElementById('txtCounter').value;
document.getElementById('txtCounter').value=tmp+counterValue;
if(document.getElementById('txtCounter').value>1)
{
document.getElementById("btnClose").disabled = false;
}
}
<input align="middle" type="button" onClick="self.close();" value="CLOSE" disabled="true" id="btnClose">
<input type="hidden" id="txtCounter">