iframe and cordova/ionic back button - javascript

i am using iframe to load up a webpage inside one of my view for ionic.
<iframe name="siteFrame" id="siteFrame" src="www.example.com" style="width:100%; height:100%" height="100%" ></iframe>
what happens is that when the backbutton is pressed instead of going back to the previous page in the iframe the app exists.
i cannot detect the current href of the iframe as the cross domain security issues prevents me.
what i want to do is that the phones back button should work on the iframe but when the iframe is at it's home page the backbutton should work for the views then
How can this be done?

The problem is that Cordova is linking the back button to the webviews back command, and if it's not going back in the iframe, the iframe is never forming part of your webviews history (which it should be, but I could be wrong - have you changed how your history is working at all?)
What you could try is capturing the back action yourself, and using it to instruct the iframe to go back a page.
One method for this is document.addEventListener("backbutton", yourFunctionHere, false);, where you then instruct the iframe to go back within the yourFunctionHere call using iframe.contentWindow.history.back();
I haven't tested any of the above but hopefully this should give you a starting point you can work off. However given you're working cross-domain, it's possible access to even the back() command is restricted, in which case you're probably out of luck.
You can find the relevant Cordova documentation here, just in case: https://cordova.apache.org/docs/en/edge/cordova_events_events.md.html

To handle ionic back button press event and navigate the iframe from there. check the below link
Click here

Its work to me!
.close{
position: absolute; z-index: 100; background-color: transparent;
width: 100%; height: 50px; margin-top: 1.5rem;
img{ width: 32px; height: 32px; float: right; margin-right: 1.2rem; margin-top: 1rem; }
}
.iframe{ position: relative; z-index: 99; }

Related

iFrame in react DOM overrides page css

My entire react app css is being overridden by an iframe in the DOM, and I don't know how to get rid of it. I've tried deleting the bootstrap in node-modules.
I think the iframe creates a sort of sandbox with another copy of my enter root, and then disables it. All my CSS settings appear to be disabled, including toggle functions and clicks.
I can't seem to locate the iframe location in my DOM, and will like to either delete it or remove its inline style.
Any help will be greatly appreciated.
<iframe style="position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; border: none; z-index: 2147483647;"></iframe>
It is positioned right under the root div.

Need javascript to open site in new window

I need to adjust this script so that when you click on the slideshow, it opens another site in a new window. I'm not a programmer; I'm using a given code. Currently, the site opens within the slideshow boundary, showing only a portion of the site. Here is the current code:
<script type='text/javascript' src='http://fineartamerica.com/slideshowmouseover.php?id=965568079&memberidtype=artistid&memberid=96556&width=400px&height=400px'></script>
<img id='faaslideshowimage[965568079]' onClick='javascript: mouseclick965568079(event);' onMouseOver='javascript: mouseover965568079();' onMouseOut='javascript: mouseout965568079();'src='http://fineartamerica.com/Blank.jpg' style='width: 400px; height: 400px; padding: 0px; margin: 0px; border: 1px solid #666666; cursor: pointer; cursor: hand;' alt='Art Prints' title='Art Prints'>
Just take out the &width=400px&height=400px if you don't want the window constrained. Also, I'd recommend removing the mouse events - I'm not sure what you're trying to do, but - as a user - I'd hate a window popping up every time I moused over/out of an element. My own preference there, but I think removing the width and height properties should get what you want, if I'm not mistaken.

Elements apear only after inspect element

I have just encountered the strangest problem I've ever come across in my humble web developing freelance career. I'm building a web application for a job application site where applicants use their webcams to answer 3 short questions. For this I use a jQuery plugin called ScriptCam which uses Flash to activate the user's webcam. I had this all working just fine but now I have the following problem.
I use jQuery .show() and .hide() to show and hide buttons. One button, a replay button, doesn't show up when calling $("#replay").show(); but DOES show when I right click anywhere in the browser after calling this command and hit "Inspect Element"! I've been searching for what could cause this problem but haven't found anything... What could cause this behavior?
This is how I have defined the button:
<div onclick='replay();' id='replay' class="replay">Replay</div>
This is the button's CSS:
.replay{
float: left;
top: 150px;
left: 60px;
z-index: 100;
-webkit-box-shadow: 0 12px 36px -16px rgba(0,0,0,0.5);
background:url('../img/button-grey.png') no-repeat 100% 100%;
background-position: center center;
color: white;
width: 140px;
text-align: center;
padding: 10px;
cursor: pointer;
font-family: Archive;
display: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
Edit: This is CSS of the button's parent div:
.box{
margin-left: 100px;
height: 337px;
width: 300px;
float: left;
text-align: center;
}
I haven't used any delays anywhere and the button really appears only right after I click inspect element somewhere in the browser. I also cannot reproduce this problem anywhere else. Anyone got an idea what could cause this? Any help would be much appreciated, thanks in advance!
Update: It appears that only Safari on Mac is having issues.
Update 2: When moving the button out of it's parent div to directly below the body tag it works as it should! So it's probably a css conflict of the parent div?
Edit: You can see the problem live here, just hit the button "Volgende vraag" en wait for the small video to finish. After that the replay button should appear right above the video.
I've found the solution! The problem is caused by an earlier container div which has the CSS display:none. Although I change that with jQuery's .show() before the problem occurs and it's contents are visible, removing display:none in my CSS makes it work! Thanks for all the great help and suggestions!
For me I had to change the visibility of an element that I found hidden above the image in my stylesheet to fix the issue. I found it by using inspect-element.
Then after changing it the image moved up obviously so I had to change the margins to change it back to its original position.

how to avoid user to click outside popup window javascript?

How to avoid user to click outside popup window javascript ?
If you want to avoid clicking of the content you can place a div with a fixed position over all the content. That prevents the user from clicking on everything that is not inside this div. I use this for some error reporting on a site.
Html:
<div id="error_wrapper">
<div id="site_error">
Error:
</div>
</div>
Css:
div#error_wrapper {
position: fixed;
width: 100%;
height: 100%;
background-color: #000000;
top: 0px;
left: 0px;
opacity: 0.7;
filter: alpha(opacity=70);
}
div#site_error {
position: fixed;
top: 200px;
width: 400px;
left: 50%;
margin-left: -200px;
}
I think you're asking about a modal dialog box. If so, have a look at the jQuery UI modal dialog.
It will open up a dialog box with custom HTML content, and the rest of the page will be grayed-out and un-clickable. Is that what you want?
If you meant to ask "can you prevent users from clicking outside a popup window", no, you can't. At least not with JavaScript. Just imagine how annoying that would be.
You need "deeper" access to the browser than what a bunch of JavaScript sitting on a webpage has in order to do this.
Just make a popup div follow the cursor with a mousemoveevent! I can see some flaws with the method, though.

Puzzle: different domain iframe needs to dynamically "overlap" parent content

This should be a fun puzzle for you Stack Overflow geniuses:
I'm building a browser plugin that will inject a div, script, and iframe into the markup of whatever page the client is viewing. The purpose is to anchor a toolbar onto the bottom of every page (StumbleUpon does this for Chrome). Here's the code that is placed before </body>:
<div id="someID1" style="position: fixed; bottom: 0px; left: 0px; width: 100%; height: 100%; background-color: transparent;">
<iframe id="someID2" src="http://www.example.com/iframeContent.html" frameBorder="0" scrolling="no" style="background-color: transparent; margin: 0px; height: 100%; width: 100%; padding: 0px;"/>
</div>
This toolbar (iframe) will be hosted on our server and has pop-out panels. When a user clicks to open a menu, the menu vertically extends the toolbar (e.g., toolbar height is 35px; with panel is 100px).
I can accomplish this in Safari, Firefox, and Chrome by having my toolbar sit on top of everything on a transparent background (i.e., height: 100% and background-color: transparent for both the div and iframe). But this doesn't work for IE7, IE8, IE9.
I've tried (1) doing background: blank.gif instead of background-color: transparent, and (2) injecting a script into the parent with a resizing function that I could call on with parent.resizeFunction(height) ("resource denied")
Any ideas on how to solve this?? Thanks so much!
I have to run so I can't test it, but IE seems to listen to the non-standard ALLOWTRANSPARENCY property.
When the property is set to false, the backgroundColor property of the object can only be that of the window. When the property is set to true, the backgroundColor property of the object can be set to any value, including the default value of transparent.

Categories

Resources