auto scroll for iframe does not work for me - javascript

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.

Related

How can I redirect to another page when an iFrame is detected?

Here is the test page. I have a page with an iFrame that contains another HTML page on my site.
<html>
<head>
<title>Clickjack test page</title>
</head>
<body>
<p>Website is not vulnerable to clickjacking.</p>
<iframe src="../page1" width="500" height="500" id="iframe"></iframe>
</body>
</html>
Here is the script I have on page1.html
<script type="text/javascript">
console.log(window.location != window.parent.location);
if(window.location != window.parent.location){
console.log("iFrame Detected");
window.location.replace("redirectMessage.html");
window.location.href = "redirectMessage.html";
console.log("after redirect");
}
else {
// no iframe
}
</script>
Goal: when I go to ClickJack Test Page, detect an iframe and redirect the page within the iFrame to redirectMessage.html
I am getting iFrame Detected and after redirect in the console
So I know my IF statement is being reached.
But the page within the iFrame is not redirected.
You should not try to figure out whether your page is being loaded inside an iframe since the attacker could simply use the sandbox attribute on the iframe and that would stop your script making your (login) page vulnerable to clickjacking.
Instead the backend of your website should return a X-FRAME-OPTIONS set to DENY in order to block browsers to render your website in iframes.
See here for more details: https://steemit.com/security/#gaottantacinque/steemit-security-check-iframe-tricks

Getting iframe data from Android WebView

I have a web page that contain an iframe:
<div id="confIMG" style="display:block;">
<iframe id="ifrmy" src="http://www.example.com" style="margin:0;padding:0;border:0;overflow:hidden;height:200px;width:90%;'" scrolling="no">
</iframe>
#document
<!DOCTYPE html>
<html>
<head>....</head>
<body>....</body>
</html>
</div>
for getting all of html source, i used this javascript:
javascript:HTMLOUT.processHTML(document.documentElement.outerHTML);
But, when the listener is invoked, i just see:
<div id="confIMG" style="display:block;">
<iframe id="ifrmy" src="http://www.example.com" style="margin:0;padding:0;border:0;overflow:hidden;height:200px;width:90%;'" scrolling="no">
</iframe>
</div>
the issue is that all iframe document is missed. How can i get them all?
I also tried to get the page using JSOUP. in that case, i'm only get:
<div id="confIMG" style="display:block;"></div>
PS: i tried to check using Chrome browser. I can only see source code when i use developer options / developers tools into tab elements.
JSoup won't fetch automatically the iframe content if you don't ask it to do so.
When you have first loaded the page, find the iframe then fetch it with Jsoup.
Document doc=...
Element ifrmy = doc.select("#ifrmy").first();
if (ifrmy!=null) {
Document iframeContent = Jsoup.connect(ifrmy.attr("src")).get();
// ...
}

Size the content of an IFrame or use an alternative

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.

load href to iframe but targetting it in parent window

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();
});
});

How do print specific content inside the iframe

<script type="text/javascript">
function printDoc() {
document.getElementById("frame_singleCheque").contentWindow.print();
}
</script>
<iframe style ="height:400px; width: 750px; overflow:scroll;" id="frame_singleCheque" src="http://www.w3schools.com"></iframe>
<input type="button" id = "btnCPrint" value = "Print" onclick="javascript:printDoc()" />
Error
[16:41:44.054] Error: Permission denied to access property 'print' # http://localhost/pdf/print.php:3
i have verified with lot of stack suggested threads for print iframe content. but for me those are not worked.
Exactly above code only present in my print.php file. i want to print the iframe content.
Also i want to know, how to print the specific div which is present inside the iframe. example in this iframe " class = 'example_code notranslate' " .
You can print a cross-domain iframe page perfectly by nesting the cross domain iframe in a locally hosted iframe. A "proxy iframe".
This way the parent javascript can print the proxy iframe without issue since it's local, which will transitively print it's inner iframe originating from another domain.
This technique works and has been verified by myself.
In your container page, host the iframe like this
<iframe id="printf" name="printf" class="A4" src="/SomeController/IFrameProxy?url=TARGETURL"></iframe>
The proxy iframe should look like something like this
#model string
<html>
<head>
<title>IFrame Proxy</title>
<style>
html, body, iframe {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
border-style: none;
}
</style>
</head>
<body>
<iframe src="#Model" seamless></iframe>
</body>
</html>
The javascript that prints the iframe (defined on container page) should look something like this:
function printFrame() {
var frm = document.getElementById("printf").contentWindow;
frm.focus();// focus on contentWindow is needed on some ie versions
frm.print();
}
It look like you've got a pretty standard cross-domain iframe issue here - namely that browsers are designed so you can't do this. There's a lot of fudges I could suggest, but largely, iframes are the wrong solution to this problem.
Basically, your best bet is to scrape the page - make a http request and parse out the content you want. Then you can interact with it as part of your own page's DOM.
How do I print an IFrame from javascript in Safari/Chrome
Print iFrame Content (#5)
Print contents of IFRAME from parent window

Categories