Hope people can help - been using 'Stack Over Flow' for reference for many years now, but this is the first time I'm stuck on some coding. Below is the iFrame, what I would like to happen is when the submit button on the form has been clicked is for it to disappear, but instead the iFrame is still there and within the iFrame it goes to 'How can we help you today?'
Also, when the iFrame disappears a line of text should appear.
<script type="text/javascript">
function removeIFrame() {
var frame = document.getElementById("myIframe");
frame.parentNode.removeChild(frame);
}
</script>
<div style="overflow: hidden;position: relative;height: 970px; width:150%;" onclick="removeIFrame();">
<iframe id="myIframe" src="https://sheersense.freshdesk.com/support/tickets/new" scrolling="no" width="100%" height="1125px" frameborder="0" style="position: absolute; top:-150px"></iframe>
<div id="text_display" style="">Thank you for your ticket, a member of the Sheersense team will be in touch with you shortly.</div>
</div>
Many thanks for the help!
You can find the possible answer in this post-
https://stackoverflow.com/a/3690896/8438534
As mentioned in that answer, if the click is in the iframe area, the iframe context handles the click event, it does not bubble up to the iframe parent. So the div will never register the click event at all if it happened in the iframe area.
try this
function removeIFrame() {
var frame = document.getElementById("myIframe");
frame.remove();
}
window.onload = function() {
var frame = window.myIframe;
var innerDocument = (frame.contentWindow || frame.contentDocument);
if (innerDocument.document) innerDocument = innerDocument.document;
innerDocument.onclick =function() {
removeIFrame();
}
}
Related
I have a script that plays a video in a Modal when a thumbnail gets clicked. This only works with the first video mentioned in the html, so I'm trying to use js to grab the particular video whos thumbnail is clicked on.
I have set up a variable in the js called vidcode, and gave it a value of the first video's address (rLdpnu2dDUY) or whatever it's called. I then set up a value 'start' for the link part before, and 'end' for the link part after. Now I have "showVideo = start + vidcode + end" and then innerHTML = showVideo, which works no problems.
So far the injection part works. My problem now is passing the address of the clicked thumbnail into the vidcode variable to play the corresponding video. I have looked on SO, w3, and Google. I have 6 different tries and none work fully.
I can create a link which
- Sets the variable, but then does not call the script.
- Calls the script but does not pass on the variable.
- Click one thumb to set the variable then another thumb to call the script. That one will then work but it's an extra step. At least with this one I know that the variable is being set..
<!--== Standard button but requires var vidcode to be preset in the Modal script ==-->
<img src="https://img.youtube.com/vi/rLdpnu2dDUY/hqdefault.jpg">
<!--== Add onClick to trigger a mini-script which sets the var vidcode early ==-->
<script>function hDSansxhArU(){var vidcode = 'hDSansxhArU';}</script>
<!--== Adding the javascript directly to the link code, yet it does not trigger the Modal script ===-->
<!--== Adding the javascript directly to the link code, to trigger a mini-script, to then call the modal ===-->
<script>function buttt(){var vidcode = 'duBjWlIzpzQ'; modalviewer();}</script>
<!--== Use the video's code as an id, then calling that id immediately and setting it to var vidcode ==-->
<script>
document.getElementById('hDSansxhArU').onclick = function() {
var vidcode = 'hDSansxhArU';
modalviewer()
};
</script>
Spots are commented out when trying something else
function modalviewer(){ //This function usually isn't here
var start = '<iframe width="840" height="472" src="https://www.youtube.com/embed/';
var end = '" frameborder="0" encrypted-media></iframe>';
//var showVideo = start + vidcode + end;
// This part works fine when vidcode gets a value
document.getElementById("button").addEventListener("click", function() {
document.querySelector(".theVideo").innerHTML = showVideo;
document.querySelector(".bg-modal").style.display = "flex";
});
document.querySelector(".bg-modal").addEventListener("click", function() { //.bg-modal to make the surrounding clickable
document.querySelector(".bg-modal").style.display = "none";
document.querySelector(".theVideo").innerHTML = "";
});
};
Expected results:
Click a link and have either
- set that address to variable 'vidcode', or
- set the address gobbledegook to 'vidcode' from here
and either have the modal script in a separate js file or at the bottom of the page.
As a code-newbie, I'm proud to have figured it out so far (with previous help from SO), it just frustrates me that I can only get half of this to work at a time :/.
#CTOverton provided what was needed, although everyone else and in Stop/Pause video when Modal is closed (not using $ sign) contributed with everything that they got me to look up as well. #Phoenix1355 actually started me on the right path despite me not posting any code at all, in turn leading me to learn so much in very little about Javascript and HTML.
This has been plaguing me for at least a week (I've lost track of time making this website), researching, getting other setups, trying overly-complicated setups, being told it can only be done by paying for a hosting plan or having to use Wordpress.. And this Console.log output, sooo helpful omg. Thank you everyone who contributed!
Here is the finished code:
<html>
<head>
<link href="http://www.jolanxbl.ca/snips/modal.css" rel="stylesheet" />
</head>
<body>
<center>
<br><br><br><br><br>
<!--List of videos-->
<img data-vidcode="rLdpnu2dDUY" src="https://img.youtube.com/vi/rLdpnu2dDUY/hqdefault.jpg" width="200px">
<img data-vidcode="hDSansxhArU" src="https://img.youtube.com/vi/hDSansxhArU/hqdefault.jpg" width="200px">
<img data-vidcode="duBjWlIzpzQ" src="https://img.youtube.com/vi/duBjWlIzpzQ/hqdefault.jpg" width="200px">
</center>
<!-- Modal Section 1 -->
<div class="bg-modal">
<div class="modal-content">
<div class="close">+</div>
<div class="theVideo">
<iframe width="840" height="472" src="https://www.youtube.com/embed/rLdpnu2dDUY" frameborder="0" encrypted-media; picture-in-picture allowfullscreen></iframe>
</div>
</div>
</div>
<script>
let vidcode = 'rLdpnu2dDUY';
// Get all elements with classname 'thumbnail'
let thumbnails = document.getElementsByClassName('thumbnail');
// Loop for every element with class
Array.from(thumbnails).forEach(function(element) {
element.addEventListener('click', thumbnailClicked);
});
function thumbnailClicked(event) {
// Event is mouse click event
// target is the img (as that is what you click on)
// dataset is the data attributes of img
vidcode = event.target.dataset.vidcode;
console.log('vidcode: ', vidcode)
//document.querySelector(".gridContainer").addEventListener("click", function() {
document.querySelector(".theVideo").innerHTML = '<iframe width="840" height="472" src="https://www.youtube.com/embed/' + vidcode + '" frameborder="0" encrypted-media></iframe>';
document.querySelector(".bg-modal").style.display = "flex";
}
document.querySelector(".bg-modal").addEventListener("click", function() { //.bg-modal to make the surrounding clickable
document.querySelector(".bg-modal").style.display = "none";
document.querySelector(".theVideo").innerHTML = "";
});
</script>
</body>
</html>
Based on your description I think you are looking for something along the lines of the "data attribute". Data attributes are custom attributes you can assign to any DOM element that contain essentially whatever you want.
In you case if you have a page with lots of thumbnails and you want a specific action to happen when you click on a specific thumbnail, your best bet is if you store that unique identifier (the video id, or are you put it vidcode) on the element you are clicking on.
This can be done like this:
<body>
<!--List of videos-->
<img data-vidcode="rLdpnu2dDUY" src="https://img.youtube.com/vi/rLdpnu2dDUY/hqdefault.jpg">
<img data-vidcode="example2" src="img2.jpg">
<img data-vidcode="example3" src="img3.jpg">
<script>
let vidcode = 'rLdpnu2dDUY';
// Get all elements with classname 'thumbnail'
let thumbnails = document.getElementsByClassName('thumbnail');
// Loop for every element with class
Array.from(thumbnails).forEach(function(element) {
element.addEventListener('click', thumbnailClicked);
});
function thumbnailClicked(event) {
// Event is mouse click event
// target is the img (as that is what you click on)
// dataset is the data attributes of img
vidcode = event.target.dataset.vidcode;
console.log('vidcode: ', vidcode)
}
</script>
</body>
Try passing the vidcode as an parameter for modalviewer function and then use the value.
function modalviewer(vidcode){
var start = '<iframe width="840" height="472" src="https://www.youtube.com/embed/';
var end = '" frameborder="0" encrypted-media></iframe>';
var showVideo = start + vidcode + end;
document.querySelector(".theVideo").innerHTML = showVideo;
};
<div class="theVideo"></div>
Click
<script>
document.getElementById('hDSansxhArU').onclick = function() {
var vidcode = 'hDSansxhArU';
modalviewer(vidcode)
};
</script>
I'm trying to embed a SurveyMonkey survey into a modal window on my site. I can do this successfully, except that first the modal appears and then there's a delay as the iframe loads the external content (this causes a flickering effect as the iframe and its content resizes the modal window).
In an attempt to fix this, I've tried adding a load/ready event targeting the iframe (it doesn't come with an ID or class, so I've had to settle for targeting .smcx-iframe-container > iframe. I think the iframe gets loaded before the event gets attached, however, as my modal doesn't load at all after doing this revision.
Any help or suggestions would be much appreciated!
Script:
// modal.hide();
(function (t, e, s, n) {
var o, a, c;
t.SMCX = t.SMCX || [], e.getElementById(n) || (o = e.getElementsByTagName(s), a = o[o.length - 1], c = e.createElement(s), c.type = "text/javascript", c.async = !0, c.id = n, c.src = ["https:" === location.protocol ? "https://" : "http://", "widget.surveymonkey.com/collect/website/js/script.js"].join(""), a.parentNode.insertBefore(c, a))
})(window, document, "script", "smcx-sdk");
$('.smcx-iframe-container > iframe').ready(function () {
// modal.show();
});
Generated iframe source:
<div class="smcx-widget smcx-embed smcx-show smcx-widget-light">
<div class="smcx-iframe-container">
<iframe width="100%" height="100%" frameborder="0" allowtransparency="true" src="https://www.surveymonkey.com/r/9HWYSDW"></iframe>
</div>
<div class="smcx-widget-footer smcx-embed-footer">
<a class="smcx-branding" href="https://www.surveymonkey.com/user/sign-up/?ut_source=powered_by&ut_source2=new_website_collector"
target="_blank">
<span class="smcx-powered-by">powered by</span>
</a>
</div>
</div>
I know this is old but this might work for people running into this issue.
var iframe = document.getElementsByTagName("iframe")[0];
iframe.onload = functionAddSomething();
function functionAddSomething(){
//add something here e.g. modal.show();
}
Hopefully that helps someone else if not sorry :)
I have a unique issue that--while I've seen similar questions and answers--none quite address my challenge.
Currently, I provide a "print" button that loads the print dialog on a browser based on an embedded and hidden iframe. This works just fine, but I don't want to slow down page loading by pulling in the iframe for a large PDF.
So, I want to load an iframe without the source, then write the proper source url if the user clicks the print icon, then reload the iframe, and finally, show the dialog box.
Unfortunately, the print dialog pops up before I can reload the iframe so loads a blank page in the dialog box. On subsequent clicks, the PDF is loaded and ready for print.
<a href='#' id='load_pdf' ><i class='fa fa-2 fa-print'></i></a>
<iframe id="iFramePdf" src="" style="display:none;"></iframe>
<script type="text/javascript">
jQuery(document).ready(function() {
$("#load_pdf").click(loadPDF);
function loadPDF() {
$('#iFramePdf').attr('src', "my.pdf");
// Attempt to reload iframe
$('#iFramePdf').load("my.pdf");
sendPrint('iFramePdf')
}
function sendPrint(elementId) {
var iframe = $(element_id)[0];
iframe.contentWindow.focus();
iframe.contentWindow.print();
}
});
</script>
I've tried the following various methods to reload:
// Attempt 1
$('#iFramePdf').attr('src', function () { return
$(this).contents().get(0).location.href });
// Attempt 2
$('#iFramePdf').attr("src", $('#iFramePdf').attr("src"));
$('#iFramePdf').attr('src', function () { return $(this).contents().get(0).location.href });
// Attempt 3
$('#iFramePdf')[0].contentWindow.location.reload(true);
// Attempt 4
var getMyFrame = document.getElementById(elementId);
getMyFrame.contentWindow.location.reload(true);
I've even tried using jQuery's defer method, but had no luck with that (possibly because I'm lacking knowledge). If I could get any guidance, I'd appreciate it.
try to change this:
function loadPDF() {
$('#iFramePdf').attr('src', "my.pdf");
// Attempt to reload iframe
$('#iFramePdf').load("my.pdf");
sendPrint('iFramePdf')
}
to something like this:
function loadPDF() {
$('#iFramePdf').attr('src', "my.pdf");
}
$('#iFramePdf').load(function(){
sendPrint('iFramePdf')
})
it should work
You can try .promise(). For obvious reasons I can't test it out, but I think 3 seconds should be adequate for the iframe to load. Be aware that this is as syntactically correct as I can get it without testing it out. Adjust the fadeIn(1800) and the delay(1200) accordingly.
HTML
<a href='#' id='load_pdf' ><i class='fa fa-2 fa-print'></i></a>
<p id="msg" style="display: none;">Printing Document...</p>
<div id="printPort" style="opacity: 0; width: 1px; height: 1px;"></div>
jQuery
$(function() {
$("#load_pdf").on('click', loadPDF('my.pdf'));
// Create the iframe, and put it inside #printPort
// Change it's src to the file argument
// Animate the #msg for 3 seconds
var loadPDF = function(file) {
$('<iframe id="iFramePdf" src="blank.html"></iframe>').appendTo("#printPort");
$("#iFramePdf").att('src', file);
return $('#msg').fadeIn(1800).delay(1200).fadeOut();
}
var sendPrint = function(elementId) {
var iframe = $(element_id)[0];
iframe.contentWindow.focus();
iframe.contentWindow.print();
}
// Once the animation is done the promise will resolve and sendPrint will execute on callback.
$.when(loadPDF).done(sendPrint('iFramePdf'));
});
I'm using postMessage to push the parent page css to the page within each iframe. The issue is that there may be more than 1 iframe already on the page before this code is applied. Therefore, how can I apply the postMessage specifically to the id of each frame, instead of having to manually enter window.frames[0] and window.frames[1], where [] is adjusted based on the page.
iframe
<iframe id="frame1" style="width: 100%; height: 420px;" src="../syndicatedPlayer.html#videoUrl=http://video.mp4?" frameborder="0"></iframe>
<iframe id="frame2" style="width: 100%; height: 420px;" src="../syndicatedPlayer.html#videoUrl=http://video.mp4?" frameborder="0"></iframe>
postMessage()
<script type="text/javascript">
var getFontFamily = function() {
var el = document.getElementsByTagName("h1")[0];
var cs = window.getComputedStyle(el, null);
return cs.fontFamily;
}
window.addEventListener('load', function(){
var data = getFontFamily("h1");
window.frames[0].postMessage(data, 'http://url.html');
window.frames[1].postMessage(data, 'http://url.html');
console.log('Message sent -->');
});
</script>
Actually, window===window.frames, so you can just use window[0] to obtain the frame.
Said that, a way to obtain an iframe by its id is the following function:
function getFrameById(id) {
for (var i=0;i<window.length;i++) {
if (window[i].frameElement.id===id) return window[i];
}
return null;
}
Update: I've fixed and completed you fiddle: http://jsfiddle.net/9qtcmbnn/4/
you can specify which iframe you will use by selecting it by id and then postmessage the data you want from it
you can use it as below
<script>
function test1() {
document.getElementById('idMyIframe1').contentWindow.postMessage("your message here", "*");
}
function test2() {
document.getElementById('idMyIframe2').contentWindow.postMessage("your message here", "*");
}
</script>
<iframe id="idMyIframe1" onload="test1()" src="http://example.otherdomaintosenddatato.com"></iframe>
<iframe id="idMyIframe2" onload="test2()" src="http://example.otherdomaintosenddatato.com"></iframe>
<body>
<table border="1" width="100%" height="100%">
<tr>
<th><iframe id="i1" width="100%" height="100%"src="/wordpress"></iframe></th>
<th><iframe id="i2" width="100%" height="100%"src="/wordpress"></iframe></th>
</tr>
</table>
</body>
I have defined two iframes in the same domain. What is want to do is when i scroll iframe with id="i1", the iframe with id="i2" should get scrolled automatically. How can i do this using javascript?
To solve your problem, please find code below
function getFrameTargetElement(oI)
{ /* get target document element based on provided frame element */
var lF = oI.contentWindow;
if(window.pageYOffset==undefined)
{
//IE
lF= (lF.document.documentElement) ? lF.document.documentElement : lF=document.body;
}
//- return computed value
return lF;
}
//- get frame target elements
var oE1 = getFrameTargetElement( document.getElementById("i1") );
var oE2 = getFrameTargetElement( document.getElementById("i2") );
//- on source scroll
oE1.onscroll = function (e) {
var scrollTopValue;
var scrollLeftValue;
//- evaluate scroll values
if(window.pageYOffset!=undefined)
{ //opera, firefox,& gecko browsers
scrollTopValue = oE1.pageYOffset;
scrollLeftValue = oE1.pageXOffset;
}
else
{
scrollTopValue = oE1.scrollTop;
scrollLeftValue = oE1.scrollLeft;
}
//- mimic scroll
oE2.scrollTo( scrollLeftValue, scrollTopValue);
}
You can execute it, and test it directly using this link http://jsfiddle.net/CF5Lp/1/
Hope this helps
Your question was answered in this post: How to get IFRAME to listen to same events as parent (and fire the same handlers)
Just listen for the scroll event instead of mousemove.