The problem I am having is preventing a link from launching a new page and loading its href value in an iframe. The client site is using healcode a service that provides widgets to schedule fitness classes etc.Check this page When you click the signup button after the widget loads it opens a new page. What the client wants is to open that link on the same page or in a popup window. I have tried everything I can think of. I have used jQuery,fancybox, etc.
HERE IS THE CODE IM USING
screenshot.
What I think the problem is, is that my inline scripts loads before the widget scripts finish renders the the schedule html.
I know it is possible because this site uses the same widget and their signup opens the link in a overlay frame on the same page.
Please shed some light on this.
UPDATE:
<html>
<head>
<title>Test</title>
</head>
<body>
<iframe id="openViewHere" width="500px" height="500px" src="" ></iframe>
<script type="text/javascript">
healcode_widget_id = "7696499e81";
healcode_widget_name = "schedules";
healcode_widget_type = "mb";
document.write(unescape("%3Cscript src='https://www.healcode.com/javascripts/hc_widget.js' type='text/javascript'%3E%3C/script%3E"));
// Healcode Schedule Widget for Iyengar Yoga Association of Greater New York : Brooklyn Daily Class Schedule
</script>
<noscript>Please enable Javascript in order to get HealCode functionality</noscript>
<script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(".signup_now").click(function(){
var url = $(this).attr("href");
$("#openViewHere").attr("href",url);
return false;
});
</script>
</body>
</html>
Just use this code :
$( document ).ready(function(){
$("body").on('click',".signup_now",function(e){
$(this).attr("target","_self")
})
})
be aware that windows.ready() might fire , while the widget script is still adding elements dynamicaly that is why the listeners dont work , you have to access the element through already loaded parent ( e.g "body" ).
Related
I am trying to use content of other website into my website. I tried using DIV with Jquery instead of iframe tag <iframe>
My Codes :
<head>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js?ver=1.4'></script>
<script type='text/javascript'>
$(document).ready(function (){
$('#divframe').load('http://www.example.com');
});
</script>
</head>
<body>
<div id="divframe"></div>
</body>
it returning no value and not showing the content of the example.com on my website. means the page is empty & blank.
Edited: I am looking for iframe solution without iframe, object, embed tag.
Please help me to get it fixed :)
You need to use iframe tag and attr() to do this.
NOTE : you also need to be sure that the url of the website is not protected to be loaded via 3rd party site frame of iframe like youtube.com, google.com, etc.
https://en.wikipedia.org/wiki/Framekiller
$(document).ready(function (){
$('#divframe').attr("src", "https://wikipedia.org/wiki/Main_Page");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<iframe id="divframe" style="width:100%;height:95vh"></iframe>
I have the HTML and CSS down the pat, but I'm needing some javascript to tie this all together.
I have a page 'static.html' that does not exist on a server, but rather a local filesystem.
This file has a div layout with 2 lists of names/titles/etc. along with a CSS stylesheet to style all the static pages.
The page also uses an inline media player. These pages are designed to be used offline, off-server, and thus have very limited functionality.
I would like to change the lists to a href= links to other static pages, however not all the titles/names in the list have pages currently, or may not need them.
Is there a way that I can use some javascript to check if the href="./linkedpage.html" exists and then turn on/off the link on page load.
I can create one parent page that references 30 other pages, and as I add the new pages, the links can become active within the parent.
Ideally, this script can be loaded on every page to check the links' source to be present or not, and enable/disable the anchor tag.
Thanks a bunch,
-Tim
EDIT: PS. the href links will be images and text.
Edit: Working progress Code:
<html>
<head>
<script>
function checkLink(someLink)
{
var tmp=new Image;
tmp.src=someLink;
if(tmp.complete)
{window.open(someLink,"_self");}
else
{return 0;}
}
</script>
</head>
<body>
Title 1
Title 2
</body>
</html>
I have a page1.html in the same directory, but no page2.html...both links return 0. Debugger returns "Error: Incorrect contents fetched, please reload."
Revised, for testing...
<html>
<head>
<script>
function checkLink(someLink)
{
var tmp=new Image;
tmp.src=someLink;
if(tmp.complete)
{window.open(someLink,"_self");}
else
{return 0;}
}
</script>
</head>
<body>
Title 1
Title 2
</body>
</html>
Now it does nothing.
Current Website:
enter image description here
I have a website that is generated by a for loop from a call to my database using php & mysql. I have an id, names, company website, address and image. It currently displays the name, description, and image all displayed in stacked square boxes.
On click of the box, I'm trying to load an iframe of the company website that then overlays the box. I have been able to get all of the website iframes to load when I load the site, but if there are more than 5-6 rows of data, the site loads very slow because it's loading ~7 websites.
I've spent most of the day looking through jquery and iframe questions but still have not been able to get my iframes to load on click individually when you click on the box. my intention is to have the user click on the description/company box not the iframe. This will then load the iframe and have it appear over the company box where it fills/hides the content in the box completely overlaying the box content.
How do you load a website onclick that is opened within an iframe without loading all of the iframes inside a dynamically generated page.
<?php require_once('include/header.php')?>
<? require('include/navigation.php') ?>
<html>
<head>
<meta charset="utf-8">
<title>Coworking Spaces</title>
<link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/css/mystyles'); ?>">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script>
jQuery(function(){
$("iframe").each(function(){
this.tmp = this.src;
this.src = "";
})
.parent(".website")
.click(function(){
var frame = $(this).children("iframe")[0];
console.log(frame); frame.src = frame.tmp;
});
});
</script>
</script>
</script>
</head>
<body>
<div id="container">
<div id='city_header'>
<div id='city_search'>
<h1>
Kansas City
</h1>
</div>
</div>
<div id="body">
<?php for($i = 0; $i < count($cospaces); ++$i){?>
<div class="company_box" style ="background-image: url(<?php echo($cospaces[$i]['image'])?>);">
<div class="name_box">
<h3 class="space_name"><?php echo($cospaces[$i]['name'])?></h3>
</div>
<div class="description">
<p><?php echo($cospaces[$i]['description']) ?></p>
</div>
<!-- iframe wanting to load -->
<iframe id = "website" data-src="<?php echo($cospaces[$i]['website'])?>" width="200" height="200" style="background:#ffffff"></iframe>
</div>
<?php } ?>
</div>
<p class="footer">Page rendered in <strong>{elapsed_time}</strong> seconds</p>
</div>
</div>
</body>
</html>
TESTED Suggested implementation:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($) {
$('iframe').bind('load', function() {
var childFrame = $(this).contents().find('iframe');
var childElement = childFrame.contents().find('body');
var src = $(this).attr('data-src');
childElement.on('click', function() {
childFrame.attr('src', src);
});
});
});
</script>
</head>
<body>
<iframe data-src="https://jsfiddle.net" srcdoc="<iframe id='hi' srcdoc='<body>Click me</body>'></iframe>">
</iframe>
</body>
</html>
I am not seeing where this.src is defined within the PHP generated iframes for your initial .each function call.
I am also unsure why you are calling .parent('.website'), since that would traverse upward looking for a wrapping element with class="website", where the PHP generated iframes would have no parent other than the div with id="body".
e.g your code is looking for:
<div class="website">
<iframe></iframe>
</div>
One thing to keep in mind when working with iFrames, is that their content is not available on DOMReady, so you must attach a load listener to each iFrame you want to modify the contents of.
If I understand you correctly, you simply want the src of the iframe to load when a user clicks the iframe. Have you tried something like
jQuery(function($) {
$('iframe').on('click', function(e) {
var frame = $(this);
frame.attr('src', frame.attr('data-src'));
frame.off('click'); //remove on-click event to prevent reloading on click
});
});
The iFrame target is very small, and would only trigger the click event when clicking the outer-border of the iFrame and not its content body. iFrames do not act like <div> elements or other block elements in regards to DOM Events, and mileage will vary on what you can do per browser and per version.
Unless you are attempting to find iframes and change their source within the Coworking Spaces created iframes, which is not possible using Javascript unless the child iframes reside on the same domain. See: Same Origin Policy
Otherwise you can do something similar to
jQuery(function($) {
$('iframe').bind('load', function() {
var childFrame = $(this).contents().find('iframe');
var childElement = childFrame.contents().find('body');
var src = $(this).attr('data-src');
childElement.on('click', function() {
childFrame.attr('src', src);
});
});
});
This will tell your script to wait for each master iframe to load, find its child iframe, attach an onclick event to the child iframe body to set the source to the master iframes data-src
Example: https://jsfiddle.net/Laomfx7g/
I use the srcdoc attribute to load static HTML into the iFrame to demonstrate binding to same-origin content, since I would not be able to edit the source content of an external website from jsfiddle.
Lastly element id's (specifically <iframe id="website" in your for loop) are expected to be unique, and will function wildly different in varying browsers. Some will only affect the first element with the specified id, others will affect the last, where a few will read all of the specified ids, which may or may not be intended.
EDIT - from comment clarification
jQuery(function($) {
$('.description').on('click', function() {
var frame = $(this).next('iframe');
frame.attr('src', frame.attr('data-src'));
$(this).off('click'); //remove click event
});
});
Example: https://jsfiddle.net/2x0yfpts/
How do I remove an iframe before a page loads?
On my website I have users fill out a surveymonkey survey in an iframe. Upon completion of the survey, surveymonkey redirects to a page in my website domain. This new page is still trapped within the iframe; I want the iframe removed before this new page is loaded. I tried the following code, but this removes both the iframe AND the content of this new page I want loaded, producing a blank screen:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$('iframe', parent.document).remove();
});
</script>
</head>
</html>
<?php
//the content for the page I want loaded
?>
Any suggestions?
Cleaning up unanswered questions
You want a framebuster
if(top != self) top.location.replace(location);
I'm trying to optimize the page render and download and I'm stuck in this situation...
I'd like to load an advertise at the end of page load, I made a simple test PAGE
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var AdBrite_Title_Color = '443E3E';
var AdBrite_Text_Color = '443E3E';
var AdBrite_Background_Color = 'D1CFCF';
var AdBrite_Border_Color = '443E3E';
var AdBrite_URL_Color = '443E3E';
try{var AdBrite_Iframe=window.top!=window.self?2:1;var AdBrite_Referrer=document.referrer==''?document.location:document.referrer;AdBrite_Referrer=encodeURIComponent(AdBrite_Referrer);}catch(e){var AdBrite_Iframe='';var AdBrite_Referrer='';}
$(document).ready(function(){
});
</script>
</head>
<body style="background: #90EE90;">
<div id="page" style="">
<div id="loginbox" style="position: fixed; top: 150px; left: 250px;">
<span style="white-space:nowrap;"> <!-- AD MUST BE HERE-->
<a target="_top"
href="http://www.adbrite.com/mb/commerce/purchase_form.php?opid=1866421&afsid=1">
<img src="http://files.adbrite.com/mb/images/adbrite-your-ad-here-banner-w.gif"
style="background-color:#443E3E;border:none;padding:0;margin:0;"
alt="Your Ad Here" width="11" height="60" border="0" />
</a></span>
</div>
</div>
</body>
</html>
Where there is the HTML Comment originally there were:
<script type="text/javascript">
document.write(String.fromCharCode(60,83,67,82,73,80,84));
document.write(' src="http://ads.adbrite.com/mb/text_group.php?sid=1866421&zs=3436385f3630&ifr='+AdBrite_Iframe+'&ref='+AdBrite_Referrer+'" type="text/javascript">');
document.write(String.fromCharCode(60,47,83,67,82,73,80,84,62));
</script>
I need to load this element after page using jquery, I tried many solution, binding document.write action, adding a <script></script> element but nothing works...
I really need an help ;)
At the end I solved my problem, loading an iframe after page load using jQuery...
Create a specific page for ADV, then loading the iframe
$(document).ready(function(){
$('#advtop').html('<iframe src="http://www.blablabla.ext/ad.php?pos=top"></iframe>');
});
The AD script won't slow the page load, and when the document is ready the iframe is placed in the correct position, without causing ADV replacing everything, also ADV get the correct URL referrer
Hope this could help someone...
I actually did this on the newsweek.com site using a script called writeCapture.js. It intercepts the document.write method and switches all the ad code to html injection (really fancy stuff!).
Anyway, to see a working example hit up (newsweek.com) thedailybeast.com and enter newsweek.ads.refresh() in the console. As for documentation, the writeCapture site will explain everything.
I do this on my site using the following code:
function adScript(){
var s1 = document.createElement('script');
s1.src='http://put_your_url_here';
s1.type = 'text/javascript';
s1.onload = function(){
// initialize the page to use the script
}
document.getElementsByTagName('head')[0].appendChild(s1);
}
adScript();
Essentially, the 'adScript' function is called in the '$(document).ready' jQuery event. This dynamically creates a script tag. The browser loads the remote script. Once loaded, your 'onload' function is executed.
Hope that helps.
Bob