Popup iframe src domain name with javascript - javascript

I want to popup iframe src(domain) when script load.
I code simple code but it does not working.
<html>
<title>Iframe load</title>
<iframe src="https://evil.com/" id="site" width="800px" heigth="700px"></iframe>
<script>
var siteD = document.getElementById("site");
alert(siteD);
</script>
</html>
When page load its only showing me [object HTMLIFrameElement]. But i want to show in popup evil.com from src. I hope you understand my question.

The cause: alert() wants to show a string, which is why it applies toString() to its parameter, and that does not render any of the properties of the object.
You need to use alert(siteD.src); instead:
var siteD = document.getElementById("site");
alert(siteD.src);
<iframe src="https://evil.com/" id="site" width="800px" heigth="700px"></iframe>

There's a simple answer to your question, siteD has a property src which you need to be alerting instead of siteD on its own.
Here is an example with src as property: https://codepen.io/dwaynehulsman/pen/rNxYYWQ

Related

how can i use javascript to remove iframe's html tag?

I want to remove iframe's content but keep the "iframe tag" unchanged
like:
<iframe>
<html>
...
</html>
</iframe>
change to
<iframe>
</iframe>
I tried this:
var frame_node = document.getElementsByTagName("iframe")[0];
frame_node.removeChild(frame_node.firstChild);
But I got an error: frame_node.firstChild is not an object
So how to do this?
thx
got the answer:
document.getElementsByTagName("iframe")[0].contentWindow.doc‌​ument.getElementsByT‌​agName("html")[0].re‌​move();

Calling a javascript function in html page embedded in an object tag

I have a page which contains another page embedded inside an object tag.
Now I want to call a javascript function from the "parent"-page. To be specific: The parent page wants to call a function, which resides inside the embedded code.
Former I used iframes but they caused some nasty bugs with Firefox, so I don't want to use them anymore.
Edit:
So, my question is: what would be the best way to achieve this, when using an object tag?
Here's some example to illustrate what I want to do:
I have a HTML page "parent.html" inside this page there is some Javascript inside a tag. This parent.html also has an tag and the src of this tag is another HTML page, let's call it child.html. The child.html page has something like:
Here's some pseudo code:
in Child.html:
<script type="text/javascript" src="child.js"></script>
in Child.js:
function getSomething(){
return something;
}
in Parent.html:
<object id="childObject" data="child.html" width="850" height="510">
</object>
<script>
// Here I want to access the function from the child.js
// I tried something like this, but it doesn't work:
var something = document.getElementById('childObject').contentDocument.getSomething();
</script>
Now:
In the Javascript inside the parent.html I need to call a function from the child.js.
How can I achieve this?
Thank you :)
Using contentWindow instead of contentDocument works for me:
<object id="childObject" data="child.html" width="850" height="510">
</object>
<script>
var something = document.getElementById('childObject').contentWindow.getSomething();
</script>
You Can try This
<object id="childObject" data="child.html" width="850" height="510">
<script>
var something = document.getElementById("childObject").parentElement.getSomething();
</script>

Javascript change textbox value within iFrame

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.

access iframe name from inside iframe

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>

Fetching page source

I have the following code in my page
<html>
<head>
<title>testpage</title>
<script language = 'javascript'>function fchange(){alert(document.getElementById("ifrm").value);</script>
</head>
<body>
<iframe id = 'ifrm' src = 'http://www.google.com' width = '700' height='500'></iframe><input type='button' onclick = 'fchange()' value = 'clickhere'>
</body>
</html>
From this I click the button and an alert box dispalys undefined. But I need the content or the source of the page ('http://www.google.com'). Please help me to do this.
Thanks in advance...
You can't do this, as it breaks the same-origin policy.
If both pages are on the same domain then you can with do what #Joel suggests, or the slightly more old fashioned:
window.frames['ifrm'].document.body.innerHTML;
You'll need <iframe name="ifrm" ...> for this to work.
If you want the source of the iframe, you would need to access the document object of the iframe.
function fchange()
{
alert(document.getElementById("ifrm").contentWindow.document.body.innerHTML);
}
As mentioned by others, you cannot get the source of an iframe which points to a page outside your domain.
You need to have back-end script for that. I think that's the only way. AJAX would not allow to make a request to other domains for security reasons.

Categories

Resources