I have 5 versions of the same html page. All the contents in the page is the same except for one hidden variable. I use the hidden variable for tracking something important.
I am trying to see if I can rewrite this by including a html with hidden variable. Here is my wrapper.shtml file
<html>
<body>
this is the superb page
<!--#include file="someHiddenVariable.html" -->
<iframe frameborder="0" height="400" scrolling="no" src="/INeedToReadTheHiddenVariableInThisPage.html" width="280"></iframe>
</body>
</html>
someHiddenVariable.html just has
<input type="hidden" value="something very important" />
INeedToReadTheHiddenVariableInThisPage.html contains a form and several textboxes. I have a javascript in INeedToReadTheHiddenVariableInThisPage.html file (included as iframe) and it submits the form.
I need access to the hidden variable in Javascript in INeedToReadTheHiddenVariableInThisPage.html
How can I structure my files. How can I access the hidden variable.
I use apache http server.
If you put a form tag arround your input in someHiddenVariable.html then I think you can try this:
parent.document.formname.fieldname.value
Related
I know how to load an html page in another html page (multiple methods, javascript, jquery, html5) and I know how to post login information on an html page and submit, but here is the problem. When I load the original html page in another html page, I cannot access the form since it is in an object tag. Here is how I load the html page:
var URL = http://sampleurl.com/testpage
document.getElementById("testDIV").innerHTML = '<object type="text/html" data="'+URL+'" width="100%" height="100%"></object>';
Now I am left with something like this:
<iframe class="container-frame" name="test" src="test" data-loaded="1">
#document
<html>
<head>...</head>
<body>
...
<form>...</form>
...
</body>
</html>
</iframe>
I am unable to access the body inside the iframe using javascript to have information posted to a form in that body.
I have tried stuff like:
document.getElementsByTagName("html")[0].childNodes...
But I cannot get to the inner form element nor the body surrounding it. Is there a way that this can be done?
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 want to autofill textboxes on another website so I'm writing a short script to do this. I'm loading an iframe with a website in it and if this iframe is loaded, it should fill in the input text forms. So I wrote this in autofill.php:
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="fill.js"></script>
<iframe name="autofillframe" src="https://e-services.blum.com/main/" style="width:100%; height:100%;"></iframe>
And this I wrote in fill.js:
$(document).ready(function(e) {
$('#username').val('username');
$('#kennwort').val('password');
});
Here is a fiddle
If I do it with a .php file instead of a website, it works fine.
Here's a demo without website
Can someone give me a hint?
When you load a page from a different domain into an iframe, you can't do anything to the iframe page from JavaScript in your page.
As far as the browser is concerned, the iframe is a separate window and you have no access to it. Imagine that the user had a banking page open in one window and your page open in another window. You know that the browser would not let your JavaScript code interfere with the banking page, right?
The same thing applies when the other page is in an iframe. It's still a completely separate browser window, it's just positioned so it looks like it's inside your page.
In your working example, the code works because the username and password fields are not in an iframe from a different domain. They are part of the same page that the JavaScript code is in.
If the iframe is loaded from the same domain as your main page, then you can do anything you want to it, including filling in form fields. The code would be slightly different because you need to access the iframe document instead of the main page document, but that's easy. But if the iframe is from a different domain, you are out of luck.
By pressing submit button , input value copies from input textbox to iframe textbox (or opposit of it).
you can implement it like:
test1.html
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#submit').click(function(){
var iframe = document.getElementById('myiframe');
var doc = iframe.contentDocument || iframe.contentWindow.document;
var elem = document.getElementById('username');
doc.getElementsByName('user')[0].value = elem.value;
});
});
</script>
</head>
<body>
<input type="text" id="username">
<input type="submit" id="submit">
<iframe id="myiframe" frameborder="1" src="test2.html"></iframe>
</body>
</html>
And test2.html :
<!DOCTYPE html>
<html>
<body>
<input type="text" name="user" id="user">
</body>
</html>
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.
So i have this problem: I have an input in an iframe with some text in it and another input outside the iframe,in the page body which is empty. What I need is to copy the text in the iframe input to the other input.
How can I do this?
Example code:
<html>
<head>
</head>
<body>
<input id="outside-input" type="text"/>
<iframe>
<input id="inside-input" type="text"/>
</iframe>
</body>
</html>
I don't see how this would be rellevant but the iframe is in fact the Wordpress media upload pop-up.
If iframe is on same domain, you can access its content like this:
$('#outside-input').val($("iFrame").contents().find("#inside-input").val());
AFAIK you cannot access the content of the IFrame from your main page directly using JQuery / other JS.