I have these codes:
<html>
<head>
<title>Iframe</title>
</head>
<body>
SomePage<br/>
AnotherPage<br/>
<iframe src="" name="content" height="40%" width="100%"></iframe>
</body>
</html>
as you can see I have two links and one iframe,What i need is when I click SomePage.html link, I want the parent window reloads and then the SomePage.html will be loaded in the iframe, is this possible?, Thanks!
EDITED:
I have an Auto-Resizing iframe that only grows on heights and cannot shrink to smaller heights (well that's my problem here, All I want to achieve is the MasterPage like behavior in asp.net.
This is possible, you can use localStorage it's not cross fully browser. Quick Example.
$(document).ready(function(){
if(localStorage.frameURL) {
$("iframe[name=content]").attr('src', localStorage.frameURL);
}
$("[target=content]").click(function() {
localStorage.frameURL = $(this).attr('href');
window.location.reload();
});
});
Related
I'm trying to hide an element in same-origin iframe. However, this son of a bi*ch blinks for a few ms before getting hidden. So what I did was added display: none and remove it after iframe is loaded - great. But now, when user clicks inner page link of iframe, which also contains element to be hidden, it still blinks (because display:none is now removed). I need to detect when to add it again, i. e. just before another page starts to load.
Testing here: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_script
Here is what I tried:
<html class="js">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
html.js #iframeID
{
display: none;
}
</style>
<script>
$(document).ready(function()
{
$('#iframeID').on('load', function()
{
$('#iframeID').contents().find('a').on('click', function()
{
$('html').addClass('js');
console.log('click');
});
console.log('loaded');
$('#iframeID').contents().find('#mySidenav').remove();
$('html').removeClass('js');
});
});
</script>
</head>
<body>
<iframe id="iframeID" height="800px" width="800px" src="https://www.w3schools.com/" ></iframe>
<script>
</script>
</body>
</html>
However, there are some a elements that don't load another page. In this example, try clicking on "TUTORIALS" at the top of that iframed webpage - it just opens up dropdown, not loads another page.
What should I do?
I noticed that "TUTORIALS" link has href="javascript:void(0)". Maybe I should be somehow selecting all a links without such href? But not sure if it's fool proof.
You can make use of load event on the iframe as such,
$('iframe').on('load', function(){
console.log('Iframe Loaded');
});
The iframe's load event is also called every time it's src changes.
$(document).ready(function(){
$('.iFrame_class').load(function(){
console.log('frame loaded');
});
});
Alternatively on start load solution:
Custom attribute for iframe:
iframe class="iFrame" src="some site" started="0"
Put this code to iframed page:
window.parent.$('.iFrame').attr("started","0"); //makes iframe started attr to false on page load
$(document.body).on("click","a", function() {
window.parent.$('.iFrame').attr("started","1");// makes iframe started attr to true for all clicked links
});
And listen; is started attribute changed to 1 on parent page?
I fixed the damn blinking by making 2 iframes and showing 2nd while 1st one is loading. While 1st one is loading, it's also hidden, becomes unhidden after it finishes loading. Anyway, here is my code, should help someone:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
iframe.js
{
display: none;
}
iframe.unclickable
{
pointer-events: none;
}
</style>
<script>
$(document).ready(function()
{
$('#iframeID1').on('load', function()
{
$('#iframeID1').contents().find('a[href!="javascript:void(0)"]').filter('a[target!="_blank"]').filter('a[target!="_top"]').filter('a[target!="_parent"]').on('click', function()
{
$('#iframeID1').addClass('js');
$('#iframeID2').removeClass('js');
});
$('#iframeID1').contents().find('#mySidenav').remove();
$('#iframeID1').removeClass('js');
$('#iframeID2').addClass('js');
$('#iframeID2').contents().find('html').html($('#iframeID1').contents().find('html').html());
});
});
</script>
</head>
<body>
<iframe id="iframeID1" height="800px" width="800px" src="https://www.w3schools.com/" class="js"></iframe>
<iframe id="iframeID2" height="800px" width="800px" src="https://www.w3schools.com/" class="js unclickable" ></iframe>
<script>
</script>
</body>
</html>
I have say 6 aspx pages that I want to display within something like an Iframe so that when I look at the page I can see an array of controls that contain a web page.
But if I use an Iframe I cannot then size the content to the size of the Iframe although YouTube does resize the content so their must be a way to do so.
So, how would I go about making sure that the content fits the IFrame or is there a better way of doing this.
Also, ultimately I would like to go to the page if the control was clicked but I am not sure that the Iframe has a click event.
So, how would I go about doing that ?
If the contents of the iframe are on the same URL as the main page then you shouldn't have any security issues and you can add JavaScript to the content pages to pass the height of their content back to the main page. Same with click events: you can have some JavaScript call a function on the parent page.
Here's an example of a main and iframe content page. The content page has a button you can click that will resize the iframe based on the height of the content.
main.htm
<html>
<head>
<script type="text/javascript">
function resize1(h) {
document.getElementById("iframe1").height = h + 50;
}
</script>
</head>
<body>
<div>Test</div>
<iframe id="iframe1" border="1" height="100" src="iframe.htm" width="200">
</body>
iframe.htm
<html>
<body>
Resize iframe
<div id="content" style="background:Red;height:500;width:50px;">
Test content
</div>
</body>
You could adapt this to suit your needs. For example, the height could be set as soon as the iframe content loads by calling the function in the onload event of the iframe content page.
Note that any JavaScript functions you want to call on the main page must be in the HEAD section.
Is it possible to replace the content of the browser window (_top frame) with the document loaded in an iframe, without issuing a new GET to load that document?
Something like this:
<html>
<head>
<script type="text/javascript" language="JavaScript">
$(document).ready(function() {
$("#link").click(function() {
// should present in the browser window the content of the iframe WITHOUT reload
// even preserve javascript/head code
$(document).html($("#frameDestination").html());
});
});
</script>
</head>
<body>
<a id="link" href="#">full window</a>
<iframe id="frameDestination" src="http://www.some-random-site.com" width="900px" height="500px"></iframe>
</body>
</html>
Use contents() when working with an iframe in jQuery.
$("#YourIframe").contents().find("html").html();
This is only going to work if the iframe is in the same domain as the parent.
I haven't tested cross domain, but on the same domain I have this script working:
$(document).ready(function() {
$("#link").click(function() {
var iframeBody = document.getElementById("frameDestination").contentDocument,
head = iframeBody['head'].innerHTML,
body = iframeBody['body'].innerHTML;
$('body').html( body );
$('head').html( head );
});
});
In the latest Firefox, I'm even able to set a variable in a script tag in the frame, and see that value in _top after clicking the link.
I'm not sure if this is even possible.
I've got the following code;
<iframe src="http://www.domain.com/content.html" width="200" height="50"></iframe>
Now, I would have assumed that would've hyper-linked the entire iFrame area, however it only hyperlinks the border.
Is it possible to hyperlink the entire iframe area?
no, that's not valid. you can't even reliably get a click event off of the element containing the iframe.
e.g.,
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#bob').click(function(e){
alert('hi');
});
});
</script>
</head>
<body>
<div id="bob" style="padding:100px;background:red;"><iframe src="http://www.google.com"></iframe></div>
</body>
</html>
notice that if you click the iframe, no alert fires - but if you click anywhere else (in red), it will. if this were otherwise, there'd be abuse...
What actually do you mean by "hyperlink the iframe"?
You could try to use an onclick event for the iframe, or position a div with an onclick and transparent background above the iframe. Another possibility is to set the a to display: block and position it above the iframe.
I have this simple html page I wish it to scroll automatically to bottom the iframe however the codesimply does not work, it does not scroll down the iframe automatically,
anyone knows whats wrong with it?
<html>
<head>
<script type="text/javascript">
function showLog() {
el = document.getElementById("log")
el.innerHTML='<iframe id="myLogFrame" name="mylog" onload="this.contentWindow.document.documentElement.scrollTop=100" src="http://yahoo.com" width="100%" height="50%" align="middle" scrolling="yes" frameborder="0"></iframe>'
el.scrollTop=el.scrollHeight
}
</script>
</head>
<body onload="showLog()"/>
test1
<div id="log" style="width:100%">
</div></body></html>
Sadly, what you're trying to do is impossible due to the Same Origin Policy which restricts any and all access to documents that are not on your domain.
Your only chance is if the remote page has an anchor to the bottom of the page. If it does, you can link to that anchor. The browser will jump there.
<iframe src="http://yahoo.com#name_of_bottom_anchor">
If your iframe is linked to another domain, web browser will blobk you access iframe's document, so you can access iframes scrollTop.