Ok, thank you first of all his attention. I have three iframes in 3 different html documents. Organized in this way:
In iframemain.html I have:
<iframe src="iframeparent.html" width="100%" height="600">
</iframe>
In iframeparent.html I have:
<iframe src="iframeson.html" width="90%" height="350" name="_parent">
</iframe>
In iframeson.html I have:
<iframe src="http://anywebsite.com/samplepage.html" width="80%" height="300">
</iframe>
I did this because http://anywebsite.com/samplepage.html links are loaded into main window (iframemain.html), and not what I want, I wish I could capture the target and load the content iframeparent.html without afect to iframemain.html
I clarify that I have no control over the content of: http://anywebsite.com/samplepage.html, but it is annoying that your links loaded into the main window, so I would like all of those links are loaded in the same iframe or much in the iframeparent.html
Is this possible with Javascript or Jquery?. Thanks for your answers.
See if I have understood this correctly
You want to frame a page http://anywebsite.com/samplepage.html on iframemain.
That page has a bunch of links with target="_parent" or worse, "_top"
You want the page you have framed to not target iframemain but to have all links stay in that frame.
If the links target _parent, then your solution is correct. If they target _top, you would need to use a proxy on the server. It would break if they change the way they target links (using javascript or base target for example) but the idea is that you have
<iframe src="yourproxy.php?url=http://anywebsite.com/samplepage.html" width="80%" height="300"></iframe>
and in there, replace all _top and/or _parent with _self
But show some examples of the links (you can change the URL to protect your client) so we can help better
Related
I was wondering, I have a div in a htm page(1) that open and display another htm file(2). And I have areas on this page(2). When I click on those areas, it open another page in the div.
I was wondering if there is a way in native JS using a MutationObserver to observe this kind of modification and do something everytime it happen?
I Work on IE11 exclusively.
Page 1 :
<div id="one">
<iframe src="index.htm" style="width:100%; height:100%;" alt="" id="fram"> </iframe>
</div>
Index.htm
<img src="../assets/SM2.png" usemap="#Tr" id="draggable" class="dragme" onload="initiate()">
<map name="Tr" style="z-index=1;" id="mapping">
<area title="2" shape="circle" coords="6426,4171,8" href="2/Tr.xml">
...
And the thing would occur when I click on the area in Index.htm.
I couldn't find the solution on internet since this is a very particular question /:
Thanks in advance!
Have a nice evening!
EDIT 1: Is it possible do it in some awful way such as using "OnPropertyChange" and when I click on the area, I call a function that change some properties in my page? :/
Alright, I'll post this as an answer then:
You can simply listen for the load event on your iframe, as it should be fired each time a (new) pages has finished loading:
document.getElementById('fram').addEventListener('load', function()
{
/* this is called on the iframe's first load,
and every time it has finished loading a new page */
});
I am using iframe to show my database result.But for the veryfirst time since I am not hitting the database so in that case iframe is showing datatable.jsp page is not available (dataTable.jsp is the page for showing database table result).I searched in google and i found something called onError and onLoad methods for iframe.If anybody can show me a small example of how to show a different jsp if for the first time required src is not avaialable it would be a great help for me.
Thanks in advance
<iframe id="dataframe" src="dataTable.jsp" name="dataTable" width="720px" height="620px" align="middle" frameborder="0">
</iframe>
Well, with javascript, this could be a way:
HTML:
<iframe id="dataframe" name="dataTable" width="720px" height="620px" align="middle" frameborder="0">
</iframe>
(removed the src attribute)
Then, when you want to load the datatable with your jsp content
JS:
document.getElementById("dataframe").src = 'dataTable.jsp';
Hope this helps, Cheers
I have this element on the page:
<iframe src="http://example.com" id="fa-iframe" scrolling="No" frameborder="0" style="height: 513px; width: 597px; "></iframe>
Now, I run jquery within it and try to close it...
The jquery should execute some function on the element...
I tried solutions such as this..but it didnt work:
document.getElementById('fa-iframe').style.display="none";
How do I close the iframe..while the document with the javascript is inside the iframe?
You need to manipulate the DOM of the parent window (parent). This is subject to the same origin policy.
First just let me say I'm open to ideas on a different approach altogether.
I have and iframe as such:
<div id="testloadlogin">
<iframe src="../security/login.aspx" width="400" height="500"
scrolling="auto" frameborder="1">
[Your user agent does not support frames or is currently configured
not to display frames. However, you may visit
the related document.]
</iframe>
</div>
The page being loaded with the iframe has a div called loginInnerBox. I only want to display the loginInnerBox and everything inside of it.
Any ideas on how to do this? I was thinking of using Jquery or javascript of some kind to remove everything else on the page loaded by the iframe, not sure how to access that though...
Just to be clear I want everything on my page outside of the iframe to remain intact. I want the equivalent of saying $.('testloadlogin').load('../security/login.aspx' #loginInnerBox) which would just get loginInnerBox's html and place it in the testloadlogin div. However I need the back-end processing from the other page which is supported by iframe, but not by the Jquery load.
The markup of the page loaded by the iframe is
<body>
<div>
</div>.......
<div class="AspNet-Login" id="ctl00_CLPMainContent_Login1">
<div id="loginInnerBox">
<div id="loginCreds">
<table>
</table>
</div>
</div>
</div>
<div>
</div>....
</body>
Do you need more information than that?
I tried this, it had no effect:
<div class="ui-corner-all" id="RefRes">
<div id="testloadlogin">
<iframe onload="javascript:loadlogin()" id="loginiframe" src="../security/login.aspx"
scrolling="auto" frameborder="1">
[Your user agent does not support frames or is currently configured
not to display frames. However, you may visit
the related document.]
</iframe>
</div>
</div>
<script type="text/javascript">
function loadlogin() {
$('<body>*', this.contentWindow.document).not('#ctl00_CLPMainContent_Login1').hide();
}
</script>
With jQuery, you can load not just the contents of a URL, but a specific CSS selector from within that URL. This would be a much cleaner approach. It's like this.
$("#area").load("something.html #content");
Via CSS Tricks
$("iframe").contents().find("*:not(#loginInnerBox)").remove();
Be aware this would only work on iframes loaded from the same domain (same origin policy)
EDIT: Probably this removes children of loginInnerBox as well. In that case you could try to clone it before:
var iframe = $("iframe").contents(),
loginBox = iframe.find("#loginInnerBox").clone();
iframe.find("*").remove();
iframe.append(loginBox);
Something like that..
Add this to the <iframe>-elememt:
onload="$('body>*',this.contentWindow.document).not('#ctl00_CLPMainContent_Login1').hide();"
it will hide every child of the body except #ctl00_CLPMainContent_Login1
If #ctl00_CLPMainContent_Login1 contains more than the loginbox, you have to use the suggestion using clone() posted by pex.
I have an iframe that looks like this:
<iframe src="http://www.google.com" height=1000 width="500" id="myiframe"></iframe>
I want to create a link so that when I click on it, the iframe on the page changes. How can I do that using jQuery? Is it related to jQuery attr?
You don't need jQuery for that. You don't even need JavaScript for that.
Give your iframe a name, and target your anchors to point to it:
Foo
Bar
Baz
<iframe name="myiframe"></iframe>
This degrades nicely for people who have JavaScript turned off.
on clicking in the link "click here" // it will take move the link to the iframe as specified....
Click Here
<iframe src="blank.html" frameborder="0" name="test" id="test" width=1200 height=800></iframe>