I am putting this Iframe up on my website. The problem is when you click the link it opens in a new tab. I would like to open it in a light box so it doesn't navigate away form my site. I tried adding target="_parent"but it didn't work. Is what I am trying to do possible?
<iframe width="500" scrolling="no" height="400" frameborder="0" target="_parent" src="https://www.freemedicarereport.com/comparison_form/aaibsolutions.com?bg_color=9DB3DC&cta_color=E6EBE0&plan=F"> </iframe><div class="tve_iframe_cover"></div><div class="tve_iframe_cover"></div><div class="tve_iframe_cover"></div><div class="tve_iframe_cover"></div><div class="tve_iframe_cover"></div>
The target is a property of the link not of the frame containing the link.
If you want to trigger a lightbox when a link is clicked, then you need to change the link to do that.
Related
I want to set up a rule using Dynamic Tag manager to monitor activity on some video on my website. I use HTML file to play videos as popup. Something like below.
<iframe width="620" height="349" src="https://www.youtube.com/embed/896dfsd996sdf?autoplay=1" frameborder="0" allowfullscreen></iframe>
I have already setup a rule in DTM using Event - "%complete" and "time complete" but it's not working.
Below is my html coding which calls a HTML file from an image click event
<a id="home-page-andy-graves-video-play" href="/portals/37/Video/yt-exec-Andy-Graves.html" class="vidpopup cboxElement hide-for-small-only">
<img alt="Home page carousal banner" src="/portals/37/Images/Home/c11-1.jpg">
Any idea what is missing? May be something wrong the HTML file?
Thank you in advance.
How do I open an iframe in a new window? I tried with "scrolling='auto'". It did not work.
I put my code here:
<iframe width="572px" scrolling="auto" height="335px"
frameborder="1" src="http://XXXX.com/iframe-page"
style="border: 0px none #ffffff;" name="national-campaign"
marginheight="0px" marginwidth="0px">
</iframe>
I want to open a link in a new window. I have two sites, a corporate site and a dealer site. On the corporate site, I have a page with only an image that I want to display in both corporate site and dealer site. When you click on the image, it goes to view detail page. However, what I want in my dealer site is, when you click on the iframe image, it opens the tab in a new window, instead of displaying detail page inside the iframe.
Any ideas? Cheers.
You can do it with jquery and window.open method.
HTML:
<iframe id="iframe" width="572px" scrolling="auto" height="335px"
frameborder="1" src="http://XXXX.com/iframe-page"
style="border: 0px none #ffffff;" name="national-campaign"
marginheight="0px" marginwidth="0px">
</iframe>
JS :
var iframe = $("#iframe");
var newWindow = window.open(iframe.attr(src), 'Dynamic Popup', 'height=' + iframe.height() + ', width=' + iframe.width() + 'scrollbars=auto, resizable=no, location=no, status=no');
newWindow.document.write(iframe[0].outerHTML);
newWindow.document.close();
iframe[0].outerHTML = ''; // to remove iframe in page.
The easy way is to use a hyperlink with an attribute target="_blank".
If the height and width are important to you (cf. your example), then you can use the JavaScript method window.open.
Try to add target="_top" inside that link.
or alternatively if you need to open a new page from a link inside an iframe if i understood correctly you can:
Using jQuery:
$('iframe a').attr('target', '_blank');
I would recommend that you just use a hyperlink to another page rather than an iframe. Or a screenshot image that is actually a link.
Some users may be 'smart' enough to right-click within the iframe (in internet explorer) and select a 'open in new window' option, but others wouldn't do that.
i've a code which let start a youtubevideo after clicking on a image.
The Problem is, that Opera, Chrome ect. start the video behind the image before clicking.
Firefox works fine.
Heres my code:
<div onclick="thevid=document.getElementById('thevideo'); thevid.style.display='block'; this.style.display='none'">
<img style="cursor: pointer; margin-left: 89px;" src="./img/style/new/slider/XXXXXX.png" alt="" />
</div>
<div id="thevideo" style="display: none;">
<iframe width="604" height="266" src="//www.youtube.com/embed/XXXXXXXX?rel=0&autohide=2&showinfo=0&controls=0&modestbranding=0&wmode=transparent&showsearch=0&version=3&autoplay=1" frameborder="0" allowfullscreen></iframe>
</div>
Can you help me for a better code?
Additional is it possible to show the Image again after the video ends?
Thanks in advance
EDIT: push
What if you paste the iframe code to #thevideo when the user clicks the image?
I think you can use the .append() function in jQuery to do it.
The chrome/opera...browser issue is a known issue. There are browser settings that you can change that will make it so that it does not auto play the video, since you are really just putting a mask over the video. See this article: Stop youtube autoplay
EDIT:
To handle it with a programmatic approach:
change your autoplay value in the youtube url to "autoplay=0". Add an id value to your iframe, such as id="iframe". Then add the following line of code to the click function of your image: document.getElementById('iframe').src = document.getElementById('iframe').src.replace('autoplay=0','autoplay=1');
This can also be seen at: Youtube Overlay Image Div - Autoplay Underneath
See above:
EDIT: To handle it with a programmatic approach: change your autoplay value in the youtube url to "autoplay=0". Add an id value to your iframe, such as id="iframe". Then add the following line of code to the click function of your image: document.getElementById('iframe').src = document.getElementById('iframe').src.replace('autoplay=0','autoplay=1');
This can also be seen at: Youtube Overlay Image Div - Autoplay Underneath
I used it and it works great!
i have an iframe that supposed to show me the pages according to the links.
the iframe code is :
<iframe width=940px onload=reSize() src="src/HEB/registerHEB.html" id="ifrm" name="iframe_main" frameborder="0" scrolling="no"></iframe>
i want to do that when i click on link such as this one
<a href="html/guides.html" target="iframe_main">
it will open the page in the iframe, but when i click F5 (refresh) it won't load the original src of the iframe, but the last link ive clicked.
Thank you very much.
use this script after iframe same as:
<iframe src="src/HEB/registerHEB.html" id="ifrm" ......></iframe>
<script>
document.getElementById("ifrm").src = 'src/HEB/registerHEB.html';
</script>
I have a page that contains an iframe element. I want to have some text on the main page when clicked to change the iframe source. I can do that with an "a href" tag but the main page resets to the top instead of where the user was last on the page vertically. If I use an input type=button element, then it works just fine without resetting to the top of the main page. However, I want the look of just text on the page (with an underline) instead of a button look. How can I do this?
use target
Go to page 2
<iframe src="page1.html" frameborder="0" name="test"></iframe>
you can use a div or span (actually pretty much any element) instead of a button
<div onclick="iframe.src='new.html'" class="lookcool">sometext</a>
Not sure what you have done so far, but it seems like you want to change the page displayed in an iframe. To do that with a link, you can use target or javascript:
Target:
link
<iframe name="iframe" src="http://www.example.com" />
Javascript:
link
<iframe id="iframe" src="http://www.example.com" />