Can't access parent elements from iframe - javascript

I do not get it. I thought that I didi it, and now I cannot do it.
Simple html with an iframe. Indide the iframe is another html. I want to change an image from the main iframe when you access the iframe.
HTML from the main html:
Main html:
<!DOCTYPE HTML>
<html lang="en">
<head></head>
<body>
<img id="logo" src="../img/fpdfilms-logo-home.png" />
<iframe id="fondo" name="main" src="test.html"></iframe>
</body>
</html>
test.html
<!DOCTYPE HTML>
<html lang="en">
<head></head>
<body>
<a href="#" onclick="change();">Change Picture</p>
<script src="../js/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
function change()
{
var $logo= $('#logo', window.parent.document);
alert("Does it work?");
$logo.attr("src","../img/fpdfilms-logo-director.png");
}
</script>
</body>
</html>
It is supposed to change the picture when you click on the link. But the ALERT is not showing... I've tried different ways and I'm really lost. Is so difficult to achieve this simple change?

Checked your page (chrome 40) and got
SecurityError: Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match.
so I checked in a server (local express) and works fine.

You can refer to this answer as it does what you need with jquery.
how to access iFrame parent page using jquery?
From the above example selecting an element from an iframe in the parent document use
var $parentElement= $('#parentElement', window.parent.document);

Related

Liferay iframe java script document unavaible

I have project based on liferay-portal-6.2-ce-ga5. On my page I want to have iframe with dynamic height.
Right now I do have my iframe like this:
<iframe id="1231-iframe" nam="iframe-name" src="http://localhost:123/ca-clickableDummy/test.html"
page content (on payara41) is:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<div style="height: 600px;background-color: #3c763d"> sadas</div>
</body>
</html>
but if I want to do anything with iframe content I`m receive bug:
Error: Permission denied to access property "document"
No matter what I`m doing from jquery/js I cannot access this property, what blocks me.
Can someone help me with that ?

Working of an iframe

Here is a snippet of code that uses a script to populate the contents of an iframe:
<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function() {
$('iframe').contents().find('body').html('<script>console.log($("div"))<\/script>');
});
</script>
</head>
<body>
<div>Test</div>
<iframe />
</body>
</html>
When executed we see that the iframe has access to the parent's DOM and we see the div being selected by the jQuery selector. The iframe does not have jQuery included but it can access the jQuery object of the parent.
However if we write the same thing via an iframe src inclusion, the behavior is different:
test.html:
<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<body>
<div>Test</div>
<iframe src="another.html">
</body>
</html>
another.html:
<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function() {
console.log($('div'));
});
</script>
</head>
<body>
</body>
</html>
We now see that the page does not list any divs. Further, if we don't include the jQuery js in the child page, it would throw an error.
Note that both pages are in the same domain, so we don't have same-origin policy issues.
My questions are:
Why is the behavior different for the 2 - a. manipulating the iframe DOM from the parent and b. including the iframe content via a src?
Is there a way to make the parent have access to the child and NOT vice-versa?
So the first bit of code gives 1 and the second bit of code gives 0?
That seems correct.
In the first example $ is bound to the parent frame. In the second example, since you have a new instance of jQuery it's bound to the iframe.
In:
$(document).ready(function() {
$('iframe').contents().find('body').html('<script>console.log($("div"))<\/script>');
});
jQuery's html function will do an eval on the script-part of the inserted HTML. That eval will run in the scope of the parent so it uses the parent instance of $.
If you just moved the script to the iframe it will fail because it doesn't have access to $.

Getting parent value in an iframe gives permission denied?

I have below two html files in two different web applications. WebApp1(somedomain.com) has PassValueIFrame.html and WebApp2 has inputForm.html. Here WebApp1 is secured and requires authentication. In PassValueIFrame.html i have an iframe which refers inputForm.html. Also, i have one hidden field in PassValueIFrame.html and am trying to retrieve its value in inputForm.html but am not getting its value it alerts as 'Permission denied to access property 'document''. Am i doing any wrong here? Please help me. As WenbApp1 is secured, cannot we access PassValueIFrame.html ? if we cannot access then is there any way to access secured page contents?
PassValueIFrame.html
<html>
<head>
<title>IFrame Example</title>
</head>
<body>
<input id="myInput" type="hidden" class="Language" value="English">
<iframe name="iframe" id="iframe_id" src="http://somedomain.com/inputForm.html" height="150" >
</iframe>
</body>
</html>
inputForm.html
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script language="javascript">
$(document).ready(function() {
alert($("#myInput", window.parent.document).val());
});
</script>
<title>IFrame Child Example</title>
</head>
<body>
<h1> Iframeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee </h1>
</body>
Thanks!
You seem to be violating the same origin policy restriction. You cannot access the iframe contents if both the parent and the iframe are hosted on the same domain. So basically if you want this to work you will have to host PassValueIFrame.html on http://somedomain.com.

How do I get a paragraph from a website and display it in an iframe?

I am trying to get the first paragraph from the website below and display it in an iframe.
Can you correct my code?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var iframe = document.getElementById('iframe');
$(iframe).contents().find("<p>").html();
</script>
</head>
<body>
<iframe name="iframe" id="iframe" src="https://www.baronaonlinepoker.com/blog" scrolling="yes" width="180" height="135">
</iframe>
</body>
</html>
You'd be better to use a DIV and use XMLHTTPRequest to set the innerHTML
If the browser loads a page from x.com, that page can have a frame whose source is y.com, but the x.com code will not have access to the y.com DOM. This is a cross-domain issue. You can read more here: http://en.wikipedia.org/wiki/Same-origin_policy
Please see my answer here: https://stackoverflow.com/a/19100553/98706
because I think your going about achieving something the wrong way.

Javascript: get iframe id within loaded page

I've got a page that has an iframe. Every time the page loads, iframe gets unique id and name assigned to it. I can get the iframe name within loaded iframe like so:
alert(parent.window.frames[window.name].name);
But when i try to get the id value:
alert(parent.window.frames[window.name].id);
I get undefined?
Is it possible to get the id attribute of the iframe within loaded page?
http://jsfiddle.net/cqFtB/
<iframe id="lyygi8stwZSANUEh" src="http://example.com" name="zma82vRVe18xbAqW" title="Awesome Iframe">
example.com:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Awesome Iframe</title>
</head>
<body>
<script type="text/javascript">
alert(parent.window.frames[window.name].name);
</script>
</body>
</html>
Try window.frameElement.id in the iframe.
In the iframe this is working for me. But only if the iframe and the parent share the same domain:
this.frameElement.attributes.id
You have to insert the name of the iframe:
alert(parent.window.frames['zma82vRVe18xbAqW'].name);

Categories