Hello I am building a site where an iframe is the majority of one page. I would like to know if it is possible to use code on the page in which the iframe is located to change a javascript variable that lives inside the iframe's source.
Example: www.foobar.com/iframe-source.html
<body>
<script>
var a = 'Hello';
</script>
</body>
Page source:
<body>
<iframe src="www.foobar.com/iframe-source.html/">
</body>
In this example i would want to change the var "a" to Goodbye instead of Hello
Related
I stumbled a website like this, let's call it home.html
<body>
<iframe id='id1' src="1.html">
</iframe>
</body>
In 1.html, we got
<body>...
<iframe id='id2' src="2.html">
</iframe>
...
</body>
How can I get the HTML content of 2.html with JavaScript? The reason I do not go directly to 2.html to get the content is because the content is simply a template and get changed dynamically at the home.html
Usually, i would just do like below to get the content of an iframe id but it doesn't work in this case.
var e = document.getElementById('myid').html;
Thank you.
Try this,
var iFrame = document.getElementById('id1');
var iFrameBody= iframe.contentDocument || iframe.contentWindow.document;
content= iFrameBody.getElementsByTagName('body')[0].innerHTML;
alert(content);
your iframes src should be same to your main page domain. Different domain content access is blocked by browsers. Same domain iframe contents can be accessed.
It is not enough to copy just BODY tag content between iframes, but you need to copy HEAD tag content as well to get the same design of new iframe
var iFrameDocument= iframe.contentDocument || iframe.contentWindow.document;
alert(iFrameDocument.head.innerHTML);
alert(iFrameDocument.body.innerHTML);
If you want to copy the body with his properties you can now do :
iframe1.contentWindow.document.body = iframe2.contentWindow.document.body.cloneNode(true);
cloneNode(true) will copy every child of the specified node
Hi i am using an iframe in asp.net to navigate to the website. And when the iframe is loaded with website url at that time i want to pass the value to the textbox inside that iframe how can i pass the value inside the iframe to the input class textbox. I have tried so much but i can not accomplish the task.please try to help me here is my code
<script type="text/javascript">
function mf() {
document.getElementById("INPUT").setAtrribute("value", "myvalue");
}
</script>
</head>
//I TRIED TO CALL FUNCTION BY BOTH BODY ONLOAD AND IFRAME ONLOAD BUT IT DOSN'T WORK
<body onload="mf()">
<form id="form1" runat="server">
//I WANT TO PASS VALUE INSIDE IFRAME TO THIS WEBSITE TEXTBOX
<iframe id="yourid" src="https://www.iauc.co.jp/auction/prelogin01_en.jsp? timestamp=1361429737811" style="width:600px; height:600px;"> </iframe>
</form>
</body>
You can't access the iframe DOM if it's not in the same domain like the parent page. If its the same domain you can use the postMessage method. Read about it here https://developer.mozilla.org/en-US/docs/DOM/window.postMessage
I have the following iFrame structure , I want to access the html and body tag of top html, so I can sroll view top in click of button inside iframe.
<html>
<body>
<div>
<iframe>
<html>
<body>
content
<input>button</input>
</body>
</html>
</iframe>
</div>
</body>
</html>
Use the top object (which only works at the same domain):
var topDocument = top.document;
//do anything you want
//Example:
topDocument.documentElement; //Returns a reference to the HTML element
topDocument.body; //Returns a reference to the top's body
If you want to access the very first HTML element, use this:
$("html:first")
And if you need to access the other HTML element through the iframe you can use this: $("iframe").children("html")
$("iframe").children("html")
You can use "top" keyword.
Like
top.id.document where id is the 'id' of any element in top html of iframe.
You need to access that from the source of iframe's html.
I have an iframe on a page that allows us to upload an image, once it's uploaded it displays the url of the file in a text input field.
On the main part of the page, we have our textarea where we write up our news posts. I'd like a way so that I can add a link on the iframe, next to the url field, that when clicked will automatically insert the text in there into the textarea on the main part of the page.
I'm relatively new to javascript, so I wasn't sure how to do this when using an iframe.
Thanks!
Main.htm
<html>
<head>
<script>
getText = function(s)
{
alert(s);
}
</script>
</head>
<body>
<iframe src="otherFrame.htm"></iframe>
</body>
</html>
otherFrame.htm
<html>
<head>
<script>
botherParent = function()
{
parent.getText(document.getElementById("textInput").value);
};
window.onload = function()
{
}
</script>
</head>
<body>
<input type="text" id="textInput" />
<span onclick="botherParent()">Stuff goes here</span>
</body>
</html>
Basically, in the child inline frame, use parent to access the parent's window object.
Global variables are stored in window, as are global functions. Because of this, if you define a global variable "foo" in parent, you can access it with parent.foo with your child frame.
Hope that helps!
Assuming I understand this correctly you want to be able to use javascript to access information in an iFrame from the container page. This is generally regarded as Cross Site Scripting and is not allowed.
I though this would be simple enough but I can't find the answer. I need to know how I can access an iframe's name from within said iframe. I was trying something like this but it's not working.
<iframe name="thename">
<script type="text/javascript">
alert(parent.name);
</script>
</iframe>
There is a combination of answers I prefer:
// window.frameElement Gets IFrame element which document inside
window.frameElement.getAttribute("Name");
It works on IE7+, Mozilla & Chrome
You were nearly right. Setting the name attribute on a frame or iframe sets the name property of the frame's global window object to that string. (Not parent, which refers to the window of the document that owns the frame.)
So unless some other script has deliberately changed the name, it's as simple as:
1.html:
<iframe name="tim" href="2.html"></iframe>
2.html:
<script type="text/javascript">
alert(window.name); // tim
</script>
in some cases window.frameElement returns null in iframe, so i figured workaround for it.
1. you need to set hash in src url of iframe
<iframe name="tim" href="2.html#your-hash"></iframe>
2. in iframe you can get this hash with
<script type="text/javascript">
var hash = window.location.hash;
</script>
Well, an IFRAME element shouldn't contain anything, it's targeting another document. So using a SCRIPT tag inside an IFRAME doesn't make alot of sense. Instead, use the SCRIPT inside the called document, e.g.
iframe_caller.html:
<html>
<body>
<iframe id="theIframe" name="theIframe" src="iframe_doc.html"></iframe>
</body>
</html>
iframe_doc.html:
<html>
<body>
<script type="text/javascript">
var iframes= parent.document.getElementsByTagName("iframe");
document.write(iframes[0].getAttribute("id"));
</script>
</body>
</html>
Note I'm using parent.document.function() there.
Something like this should work:
parent.document.getElementById('idhere').name;
You have to use the parent and then get the element either byId, Name, etc... then access the name property.
So your code should be like:
<iframe name="thename">
<script type="text/javascript">
var iframeName = parent.document.getElementById('idhere').name;
</script>
</iframe>