iFrame is not fixing correctly in android device - javascript

i made a android app using it's web view. there contain a lot of functions. payment integration etc. i integrate this payment method using a third party tool. This tool provide an external html page. when i load this page directly in to my web view it's work nicely.
but after i got a requirement that there need a back button in the payment page. after then i add this page using an IFRAME. after there is number of issues came related to the design. the content is not fitting in the IFRAME also there is not displaying the scroll bars.
i tried differant kind of javascript method but no output.
If any solution present for this

Answer to the iframe scrolling problem
1.Zoom in until the iframe portion of the page completely fills the screen.
Tes might activiate the scrollbar and allow you to scroll the iframe.
2.Try double-touching the screen. This means you use two fingers to scroll on the iframe area.
3.If neither #1 or #2 work, try a different browser such as Dolphin, xScope, or Opera.
If none of those three work, try out Firefox. I listed Firefox separately and last because it is slow and resource-intensive on Android, but if it's your only recourse, then use it only when you must.
Can you provide more information on the content not fitting inside the iframe?

Related

Load External Custom Page and Execute Custom CSS or Javascript on The page

i'm building an online document portal that supports all Microsoft Office formats.
Instead of building my own module, i'm utilizing Google Docs Online Viewer since it already handles
this task properly, my only problem is it loads the header toolbar, which i dont want.
take for example This custom pdf-URL(i just googled for any pdf document), The navigation toolbar at the foot, but the header toobar, i want it hidden - all within the iFrame.
https://docs.google.com/viewer?url=http://www.scorpioncomputerservices.com/Press%20Coverage/Billgates.doc&embedded=false&controls=false
After Inspecting the Element on Chrome, i found the section of code controlling the element, problem is, how to hide this element on page load, by forcing a script/style to be executed on the page, while loading.
i would like to know if there's a way i could force-delete or hide the element controlling the toolbar within the iFrame, or better still if there are any alternatives to what i intend to do. my code would have looked like this
var obj = iframe.document.querySelectorAll('[role="toolbar"]');
obj.parentNode.removeElement(obj);
// or - i'm not sure anyof this would work.. and since it is loaded inside an iframe
// how do i execute this.
obj.remove();
i dont want my audience to be able to download the document, obviously curious developers might find a way, but thats going to be less than 2% - 5% of the total users.
how do i go about this please using javascript/CSS/or any library.
If you change the GET variable embedded to true the viewer won't display the top bar, however there's no way to edit the page inside the iFrame as Google has enabled cross site protection so the browser will prevent you from running any javascript to modify the content of the iFrame.
The only way to use the google document viewer is to get your site to load it in the background (not using an iFrame) and modify it before serving the page to the user.
Or alternitively I reccommend using an open source JS PDF viewer such as ViewerJS

Enter full screen whenever page is loaded

I'm working on asp.net quiz application. The mandatory requirement of this application is: when the application starts (page is requested), it automatically enters into full screen.
Now I tried dozen of solutions (JS & Jquery's plugins)
JS Solution
Mozila's
Jquery Plugins
a number of different jquery's plugins, but Chrome & Firefox are not allowing me to do so. Because it states that it needs user interaction for that.
Can somebody please help me out of this situation? Solution can be browser dependent.
Details about application:
Total 5 aspx pages.
One page is an iframe/frame in another page.
Quick and dirty solution. Let's create another page which will be our container page. Put an Iframe there, calculate Iframe height width attribute based on the screen size. make the first page as iframe source. on the iframe put frameborder=0, so from user perspective it will look like single page
For full screen check this link http://www.css-jquery-design.com/2013/11/javascript-jquery-fullscreen-browser-window-html5-technology/

Javascript integrated web browser?

I have two different questions I would like to ask. I am new to javascript and I am trying to create a project ... of some sort.
Firstly, is it possible to have an integrated webbrowser within ... say a PHP page? e.g. using javascript, I have a canvas sized 500 x 700 within my "index.php" page, and can navigate to any website while remaining on my "index.php", but the websites appearing on that canvas?
If this is not possible, then is it possible to navigate to a website, and then interact with the elements thereof? I doubt this because you would no longer be connected to your file if you rediirect to another website, hence the integrated idea.
If neither or those are a possibility, then is it at all possible to interact with an EXTERNAL website's elements? External being not yours in this context.
You can use an iframe tag to load an external page, however
With most modern browsers you're not allowed to interact with the elements for security reasons
Many sites (still for security reasons) don't want to be loaded inside an iframe and they try to either escape the iframe or just render back a blank page instead.
One security problem is that a malicious page could open an iframe with e.g. a buy page of amazon.com and then render over it another opaque element that lets the click go through it.
This way a user may be tricked into click over a "watch the cute kitties" button and instead is clicking on the one-click-buy button of amazon (or liking a facebook page, or starting following a spammer on twitter or ...).

JavaScript: When printing a full web page, IE doesn't seem to print the contents of iFrames on the page

The client's website has product listings. The prices for the product are pulled dynamically in through an iFrame at the bottom of the page. There is Javascript on the page that automatically resizes this iFrame to the correct height based upon how big the iFrame content is, once it's loaded.
The client is reporting that when printing the page, they cannot see anything from the iFrame where the prices should be - apparently it is not printing in IE, just the main page itself.
I am on a Mac and so can't test in IE, so I'm having a hard time experimenting with this.
Can anyone clarify the expected behaviour in this situation? Is it possible to get IE to print both page and included iFrames by default, and if so, how would I go about doing this? I can only find examples for printing a specific frame from a parent window.
Thanks!
The expected behaviour should be what you're experiencing in other browsers. If the page is printed, the iframe should be printed along with it. It would be difficult to imagine that everyone else got it wrong and IE got it correct in this instance.
Below is a bit of speculation on what the issue might be, but without knowing more/seeing code it's difficult to know the specifics:
This issue could be due to some css that you may have on your page. I've read of similar iframe printing issues where the visibility was set to hidden initially resulting in the iframe not printing correctly. To get around this specific case the user had to set the width and height to 0px. Without knowing more about your site, I can not correctly predict that this is happening.
Another issue may by your dynamic resizing based on the contents of the iframe. A simple test would be to comment that section out and set a generic width and height on the iframe to see if the printing issue still occurs. Perhaps those dynamic styles are not being carried over to the print stylesheet and are not getting applied (therefore not appearing at all).
As a quick suggestion, look into css media types:
print
Intended for paged material and for documents viewed on screen in
print preview mode. Please consult the section on paged media for
information about formatting issues that are specific to paged media.
Helpful link: Print Specification
This was an interesting point, so I did a test using IE8 (on a server, not locally).
I printed in IE8 a web page that included an iframe of something that I built. And it printed some of the contents the first time (the other contents showed up black). The second time I printed, the iframe contents were all black.
However, in my example, the contents in the iframe are changing constantly (images and text that fade in and out) and the css background behind it is black.
This test has the contents of the iFrame on a different host server than the contents of the main page. But to my knowledge, there is a cross-domain policy file working here.
Cross-domain policy issues were my first guess, but it's entirely possible there is some issue with how internet explorer renders the screenshot when it sends it to the printer.
If you are using Javascript, then why not try window.print() function along with print media CSS.
I can't explain why IE isn't working, but maybe you can fix the problem by adding this part of code into the parent page, in order to force each iframe to be refresh :
$(document).ready(function() {
if($.browser.msie) {//Only for IE
$('iframe').each(function() {
$(this).attr('src', $(this).attr('src'));
});
}
});
To get the browser, i use this method.
And i don't use contentDocument.location.reload(true); method to be sure the iframe to be refresh. See SO topic.
Try this Plugin it will solved your problem
http://projects.erikzaadi.com/jQueryPlugins/jQuery.printElement/

Overlay a frame on every webpage a visitor visits?

So I want to be able to have a space that overlays content on any website with the click of a button (something that also is above everything on a web page). An example would be the Google Translate page, http://translate.google.com/translate?u=about%3Ablank&hl=en&langpair=auto|en&tbb=1&ie=UTF-8 where the frame at the top will overlay any website that is entered in the url box.
What I want to do is have a box like this overlay every webpage, like google's translate does, but have it hide with a click of a floating image, say an arrow.
The files will be locally stored on my HDD, but I don't see this being an issue.
I don't know what languages to code this in, but I assume Javascript, however, I do not know the classes to call to do this. Any advice chaps? I'm not asking for a hand out, just a point in the right direction!
It looks like you want to develop a browser extension. Look here for Chrome:
http://code.google.com/chrome/extensions/getstarted.html
There are similar ways to do it for IE, FireFox, and Safari.
It sounds like you'll either need to use frames or an iframe. They are very similar in how you interact with them (say to make them load a new page) although they are different in their implementation.
A great site for learning about frames is w3Schools:
http://w3schools.com/html/html_frames.asp
http://w3schools.com/html/html_iframe.asp
You can use JavaScript to reference the frames via its name or its ID. Ex: document.framename.src = 'hello.php' or document.getElementById('frameId').src = 'hello.php'.
One problem with using frames is that search engines don't like them. If you are using an iframe, the search engine will search your page, but still not the iframe.
As for resizing/hiding the frame/iframe, you can do that with both frames and an iframe, although the method for accomplishing it varies depending on what you use.

Categories