I am at an absolute loss in this situation. I've tried changing the src value of an iframe with pure JS and jQuery, but both attempts just close the iframe object!
I have an iframe in the HTML as defined:
<body>
<div id="divBody">
<img src="images/test.gif" onClick="...see_below..." />
<iframe name="ifTarget" id="ifTarget" src="http://www.yahoo.com" allowtransparency="true" scrolling="auto"></iframe>
</div>
</body>
I also have an img on the page that, when clicked, should change the src of that iframe as defined:
document.getElementById('ifTarget').setAttribute('src', 'http://www.google.com');
and alternatively via jQuery:
$('#ifTarget').attr('src','http://www.google.com');
In both cases, the iframe just closes down an I'm left with the following error via FF Error Console:
Security Error: Content at https://www.google.com/ may not load data from http://127.0.0.1/.
I am running this from the local computer, but I get this same message if run from a hosting company (with the trialing URI adjusted accordingly). Any thoughts?
Thanks,
Dave
Related
I have some code to take content out of a page within an iframe and adding it to the parent page. The parent and iframe source page are in the same directory so no cross domain issues.
This will work on a server but apparently not if all the files are running local on your computer. I was tearing my hair out before I figured that out. Running the files locally just gives cont2 an undefined value.
I need to run this locally without a server because of the sensitivity of the files I'm dealing with. I don't know how to do that though.
I tried setting document.domain="local.com" in both files but that didn't work.
Any way to do this?
Thanks
Parent Page:
<html><head>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script></head><body>
<iframe id="frame1" src="page1.html"></iframe><br>
<button id="button2">Something</button>
<script>$("#button2").click(function(){
cont2 = $("#frame1").contents().find("div").html();
console.log(cont2);
$("#div2").html(cont2);
});</script>
<div id="div2">TBD</div>
</body></html>
iFrame Source:
<html>
<head></head>
<body>
<div id="div1">TODO write content</div>
</body>
</html>
Some versions of IE will allow this to work out of the box. Seems like it treats local files as on the same server.
For Chrome, you need to temporarily disable a couple things. See:
Disable same origin policy in Chrome
I have a page located at:
http://localhost:8080/job/demo/865/parsed_console/?
Inside that page is an iFrame:
<iframe width="100%" scrolling="auto" height="600" frameborder="0" src="job/demo/865/parsed_console/log.html"></iframe>
Within the iFrame there are anchor tags which I can browse to with a link like the one below:
http://localhost:8080/job/demo/865/parsed_console/job/demo/865/parsed_console/log_content.html#ERROR1
The problem is that if I use the above link I am directed to a page that does not have the outer frame. I don't have source control over either page.
How can I make a link that will go directly to a specific location in the iFrame without losing outer frame?
I believe the solution to this is to change the src attribute of the iframe element to include the fragment which you wish to scroll into view. This would be achieved using Javascript.
http://localhost/ is only visible from your computer.
<iframe name="blah"></iframe>
<a href="http://www.yahoo.com" target="blah">
In your link add a target attribute for example: <a href="..." target="name_of_iframe"/> where name_of_iframe the value of the name attribute on the iframe tag for example: <iframe name=name_of_iframe"></iframe>
Look for an id tag in the html page at the specific spot you want the iFrame to open at. Then hash tag it in your iFrame
For instance the page you load in your iFrame may have - id="autolog" - or - input id="un"- etc.,
Hash tag the id in your iFrame like so:
<iframe src="https://sitethatloadsiniFrame.com#slogin;" frameborder="0" height="98"
width="225" style="float: right; frameborder="0"; SCROLLING=YES></iframe>
In my facebook iframe application, my home page is little long (about 1500px) but the secondary pages are smaller in height.
I see there is a lot of white space between my footer and the facebook's footer in the secondary pages.
I checked the iframe source and found the height property is set correctly, but there is another height value inside style tag which is retaining the homepage height.
<iframe class="canvas_iframe_util noresize" frameborder="0" scrolling="no" id="iframe_canvas" name="iframe_canvas" src='javascript:""' height="600px" style="height: 1566px; overflow-y: hidden; "></iframe>
Below is the code I am using to resize the frame (which is in the master page)
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId: 'my app',
status: true, // check login status
cookie: true, // enable cookies to allow the server to access the session
xfbml: true// parse XFBML
});
FB.Canvas.setAutoResize(7);
</script>
My secondary pages are dynamic in size, so I can not use a fixed height.
Any help to get ride the extra white space on my secondary pages are highly appreciated.
Thanks
I did a Facebook Canvas App the other day and I wrote this little code to take care of the height issue.
<script>
FB.Canvas.setSize({ height: document.getElementById('wrapper').offsetHeight });
</script>
Of course this code demands a <div id="wrapper"></div> to wrap the whole page.
You have to make sure all the things in the DOM has loaded before you fire it tho. That's why I put it just before the </body>. But there can sometimes be a bit of a problem with images with unspecified height. So either you specify the height of all your images or you could fire it with the help of jQuery and document.ready().
You could/should switch to using FB.Canvas.setAutoGrow(), since FB.Canvas.setAutoResize() will be deprecated shortly.
Then set the canvas height option in the app settings to: Settable (Default: 800px)
In your app, you can use FB.Canvas.setAutoGrow() without any parameters. I know this is essentially what you're doing already, but in my experience this has served me well. This also solves any problems when the height of your page changes after the initial page load.
I have an iFrame that I use to display different media types by setting the "src" attribute. When I set the src to a .png file type however, Firefox does not render the image for me, but instead asks the user if they want to download the image.
Is there a way to force it to render? Is this a client issue / feature or is it something I've missed?
<iframe id="ctl00_mainContent_uxEditClient_ifrmThumb" width="100px" height="100px" src="http://localhost:54468/Docs/Media/Partners/Logos/logo.png">
<html>
<head></head>
<body></body>
</html>
</iframe>
The src property of an iframe is not meant to be an image but rather an URL of page containing HTML. Firefox is asking you to download the image because the server is writing the image bytes to the response stream.
Use an img element to display images.
I tested your code but using a different image source:
<iframe id="ctl00_mainContent_uxEditClient_ifrmThumb" width="100px" height="100px" src="http://upload.wikimedia.org/wikipedia/commons/7/7a/Basketball.png">
<html>
<head></head>
<body></body>
</html>
</iframe>
I think the problem is not related to Firefox or HTML, I guess it is the header your server is sending. HTTP header may force the browser to download instead of visualizing.
Please test my code in your specific Firefox version.
i am working on an mvc page that allows users to securely logon via a colorbox modal window. the modal is layed out something like this:
<html>
<body>
<div id="overlay" style="display: block;" class="overlay"> <div>
<div id="colorbox" style="display: block;">
<iframe id="logonIFRAME">
logon form is in this ssl iframe
</iframe>
</div>
<div id="restofpage"> </div>
</body>
</html>
thats the basic layout.
what happens is when the iframe form is authenticated, it calls parent.$.fn.colorbox.close() which closes the modal and reloads the parent page.
now the problem is the colorbox.close script is in the parent page (not the iframe) so it cannot be called from the iframe due to the protocols being different (https and http).
so how can i either call the script cross protocol (which i believe you cant do) or from the iframe set the colorbox div's display attribute to none and hiding the overlay. this would hide the modal just as well but can the code in the iframe talk to the parent pages html? if it could i would use something like:
$('#colorbox').attr('style', 'display: none;');
but that jquery doesnt work.
anyone got any ideas on how best to proceed?
It's kind of Hack i think of... On success login redirect to normal page mean having http, and in that you write your code to call parent windows by simpally adding javascript.
I found this is working for me, hope it works for you too. however it's not pure solution but just a workaround
Imran