How should I close this jquery IFrame? - javascript

I am building a popup-like page, which could be included into other sites. I use cookies (created with PHP commands) and I would like to set that this popup shows up only once in a while (so the cookies would be timed).
I am using bPopup for the popup window, so it's Jquery based. The problem is that i cannot close it.
I managed to make the content not loading in case there is a cookie, but i cannot find anny command to close the popup.
I have googled a lot, tried with parent.closeIFrame, but that didn't worked.
Do you have any idea how could i code this?
Here are the code parts:
<!-- Element to pop up -->
<div id="element_to_pop_up">
<a href="#"class="b-close" style="position:absolute; margin-top:5px; margin-left:550px;"><img src="./image/close.png"><a/>
<iframe frameBorder="0" name="iFrame" width="600" height="500" src="welcome.php" scrolling="no"></iframe>
</div>
The welcome.php is a simply html file with analytics, so there's no much possibilities.
I managed it with an exit command to get an empty popup window in case there is cookie found, but i cannot hide the whole window, which would be annoying for the users to get into the same popup over and over again.
Please help me finding a great solution for this case.
Thanks in advance!

From the docs
Public Function
close()
Closes the popup.
Usage:
$('element_to_pop_up').bPopup().close(); // Version 0.4.0

Related

Removing or hiding elements from a webpage within a chrome web extension (manifest 3)

This is my first post ever. Please be considerate.
I have an iframe :
<div>
<iframe id="myIFrame" src="https://app.repree.com" width="500" height="500" title="description"></iframe>
</div>
<script src="popup.js"></script>
</body>
I would like to go through the login (working as of now) and then remove or hide some of the HTML tags (not working as of now) so that only certain key features of the website appear.
Say.. only Activities and forms tab. (View picture for reference) Page after login
Each time I try to access the html of the iFrame, a null exception is shown to me. Thus, making me unable to affect the display of the page.
If anyone has any ideas, do please tell.
What I have tried so far:
Using JQuery
iFrame alternatives (webview, etc) : these would not display anything at all!
What I expected
JQuery would remove the elements successfully.

Vimeo embed on webpage causes an error

I'm trying to troubleshoot a strange bug on one of our pages (https://www.bbg.org/visit/sakura_matsuri_photos).
The bottom of left of the page has the text 'cp_vimeo_code.js Open' and I can't figure out what is generating this.
here is what it looks like
I've noticed that there are other websites that show this error too, for example: https://www.indicia.nl/project/anderson-macgyver/.
I have the following three embeds inside the body tag of a webpage in Expression Engine. Taking them out eliminates the error.
<div class="videoWrapper">
<iframe src="https://player.vimeo.com/video/210978232?title=0&byline=0&portrait=0" width="540" height="304" frameborder="0"></iframe>
</div>
<div class="videoWrapper">
<iframe src="https://player.vimeo.com/video/210978156?title=0&byline=0&portrait=0" width="540" height="304" frameborder="0"></iframe>
</div>
<div class="videoWrapper">
<iframe src="https://player.vimeo.com/video/160249045?title=0&byline=0&portrait=0" width="540" height="304" frameborder="0"></iframe>
</div>
Has anyone seen something like this before? I can't find it on Vimeo's site anywhere.
Here is a picture of the error on our page
It looks like this is a call from an addon, that's trying to load a .js file for use in the control panel. However, since you're not in the CP it'll show the call as text.
Maybe see if the addon needs updating, or, since there are a lot of video player addons that have been abbandoned, need replacing
More indepth answers can be found on EE's own Stack: https://expressionengine.stackexchange.com/
I finally figured where this was coming from, it was some extra code in a Google Tag Manger custom tag!!

how to make iframe open in new window

I have a problem with the iframe from flickr.
I have a website in which i embed an iframe from flickr in order to display a gallery without having to worry about creating slider and resizing pictures and extracting thumbnails.
Also since this website is for a friend of mine he wants to be able to change his pictures on his own without having to ask me all the time to change the website.
so the solution was to use an iframe from flickr where he created his galleries and i embeded his galleries into the website.
This is the code:
<div class="six columns">
<iframe src="https://www.flickr.com/photos/127583121#N07/15148138666/in/set-72157647343739461/player/" width="500" height="281" frameborder="0" allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen></iframe>
</div>
My problem is that when a viewer clicks on an image then he is redirected to the flickr website therefore he is gone from my site.
Is it possible to make it when a user clicks on the iframe to open the flickr website in a new browser window so that the user is not lost from my site?
Thank you in advance
Try this:
<div class="six columns">
<iframe name="myFrame"></iframe>
</div>
$(document).ready(function () {
window.open("https://www.flickr.com/photos/127583121#N07/15148138666/in/set-72157647343739461/player/", "theFrame");
});
It will open a new pop-up window and user can interact separately with images in that.
DEMO
UPDATED SOLUTION
After a lot of search and tries, I finally made a solution which is most close to what you want. It will just require a click to confirm from user. If user clicks stay on page the iFrame will be opened in another window.
$(document).ready(function () {
window.onbeforeunload = function () {
window.open("https://www.flickr.com/photos/127583121#N07/15148138666/in/set-72157647343739461/player/", "theFrame");
return "";
}
});
<div id="dv" class="six columns">
<iframe id="myFrame" name="myFrame" src="https://www.flickr.com/photos/127583121#N07/15148138666/in/set-72157647343739461/player/"></iframe>
</div>
UPDATED DEMO
I'm not sure if it'll work for you but, if you get the content of galleries as HTML using Jsoup's API for example. You can change the content as you need.
I did already this in a project I worked, in my case, the images' path was absolute
and I had no problem to open it into a dialog.

Javascript/DOM not detecting new HTML

I'm working on a private Chrome extension that injects some code into specific websites. I am successful for all except THIS 1 website (which I cant provide you with login access, sorry).
My extension doesn't detect the new(most) of the html content being loaded on the page after navigating through the site only.
For example, when I run document.documentElement.innerHTML; the return string is only the barebones of the page.
The site is using JQuery and I do have JQuery also loaded in my extension, but it still doesn't want to read any elements. The elements do show up in Developer Console but NOT on the Source Page or Frame's Source Page
I really need access to those Elements but I can't figure it out.
Any help is appreciated.
Thanks a bunch.
EDIT: Turns out nothing was working because all the new content was being loaded into an iFrame. Now I have to research iframes :(
This is what the code in the developer's tools looks like
<html>
<iframe src="..." >
#document
<html>
<div id="im trying to get">this content</div>
</html>
</iframe>
</html>

how to print iframe google docs viewer open document

I am using google docs viewer for show my uploaded document and i want to print it, but i can't print those document using jQuery.
I want to print iframe document but it is not by my code. how to print that document??
<button id="printbtn" onclick="myFunction()">Print</button>
<iframe src="http://docs.google.com/viewer?url=<?php echo urlencode(UPLOAD_URL.$file_name); ?>&embedded=true" frameborder="0" scrolling="no" id="iframe" style="border: none;" width="800" height="470"></iframe>
<script>
function myFunction(){
window.frames["iframe"].focus();
window.frames["iframe"].print(); // NOT WORKING
}
</script>
Please help me......
I did some digging, found its not possible,
because docs.google is going to be a different domain from yours.
I tried this,
document.querySelector('iframe').contentWindow.print()
and got 'Blocked a frame with origin "http://mydomain" from accessing a cross-origin frame.'.
Lets say, even if google allowed cross domain, the print function wont work. because google docs viewer opens another window for printing.
I've reached a conclusion that google devs have smartly made this not possible.

Categories

Resources