i need a javascript code that would enable me, on a certain button click to let a panel open which contains another page not under my domain for example, www.google.com!
Press Here and upon pressing it, a popup will appear or a panel will become visible that contains Google.com in it!
thanks!
In a function that you bind to the click event for the element you want to click on: Create an iframe and set its src, then append it to an element already in the document.
I'd look into using jquery http://docs.jquery.com/How_jQuery_Works
It's hosted on a CDN so it's easy to include in a document and many browsers will already have it cached decreasing the pages load time.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
jquery is a lightweight javascript library that makes selecting and manipulating page elements REALLY easy.
$("#button").click(function () {
$("#hiddenDiv").slideDown();
});
The hidden div should contain an iframe to display the off-domain page.
http://www.w3schools.com/html/html_iframe.asp
Oh and if you need to dynamically assign the iframe then look into the jquery append function http://api.jquery.com/append/
$('#hiddenDiv').append('<iframe src="http://www.google.co.uk"></iframe>');
This should put you on the right tracks.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#show_frameDiv').click(function(){
$('#frameDiv').show();
});
});
</script>
<style>
#frameDiv { display: none; }
#frameDiv iframe { width: 100%; height: 600px; }
</style>
</head>
<body>
Show external site
<div id="frameDiv">
<iframe src="http://www.bbc.co.uk">
<p>Your browser does not support iframes.</p>
</iframe>
</div>
</body>
This will work only if the site you are trying to display allows frames. Otherwise you may need to open the site in a separate browser window.
use window.Open method like this:
window.open ("www.google.com","mywindow");
see
http://www.javascript-coder.com/window-popup/javascript-window-open.phtml
for more details.
Related
Chrome v75 appears to have introduced a bug whereby if you replace an iFrame's src programatically, it will replace the entire page instead of the iFrame.
This didn't happen on v74 and I can't get a test case to work (yet), it just fails in our site. (The site hasn't changed since going from v74 to v75, only Chrome has changed)
It appears to work fine the first time but then when you change it again (in our case viewing report drill downs) it causes the entire page (i.e. the iFrame's Parent) to load the src you were trying to load into the iFrame.
It also doesn't matter if you use pure Javascript or (in our case) JQuery, both cause the same issue.
EDIT: After a few hours detective work, I've found the bug. Setting the tag in the iFrame's content causes Chrome to load the iFrame's content into it's parent rather than the iFrame itself.
I've setup a Plunker account with a demo: https://plnkr.co/edit/UQ0gBY?plnkr=legacy&p=info
Just so I can post the link to Plunker, here is the code for the main file & the iframe content
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function onLoaded() {
// find element
let button = document.getElementById("button");
button.addEventListener("click",function(e){
// Add a random number on the end as a cache buster
document.getElementById('frame-finance-custom').src = 'test2.html?rnd=' + Math.random();
},false);
};
document.addEventListener('DOMContentLoaded', onLoaded, false);
</script>
</head>
<body>
<div>IFrame Src Changing Test</div>
<div>
<div id="div-frame-finance-custom" style="float:left;width:33%">
<iframe id="frame-finance-custom" name="frame-finance-custom" class="iframe"
style="border:1px solid black; width: 100%; height: 350px; overflow-y: scroll; vertical-align: top;">
no data
</iframe>
</div>
<div style="float:left;margin-left:1em;">
Detail: Loading an iframe page with a <Base> tag in it with target set to "_parent" will cause any refresh of that frame to replace the parent document<BR>
<BR>Instruction: <UL><LI>Click the 'Update Frame' Button, this will load test2.html into the frame. <LI>Click it again & it will replace the iframe's parent with the content of the iFrame.</UL>
<BR>Confirmation: Remove the <Base> tag from the header of test2.html & reload, it will work as expected.
</div>
</div>
<br clear=both>
<div>
<button id="button">
Update Frame
</button>
</div>
</body>
</html>
IFrame Content (test2.html):
<!DOCTYPE html>
<html lang="en">
<head>
<base target="_parent"/>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>This is the frame content</div>
</body>
</html>
Note, using their new layout it doesn't work, but using their legacy layout it does. Feel free to save the files locally and use chrome directly too.
Ok, so this turned out to be a bug in Chrome rather than anything else, so yes, strictly not a SO question, but seeing as SO ranks so well in Google (other search engines are available), I thought it better to leave it here as a solution rather than simply delete it, just incase anyone else has a similar problem.
The reason is outlined as an edit in my question, the solution is to remove the <base target="_parent"> tag from the iFrame and programatically add the 'target="_parent"' attribute to any links in the iFrame.
We do this via jQuery, I'm sure its just as easy via vanilla Javascript.
$('a').attr('target','_parent');
Add that to the javascript that runs when a page has loaded and it'll replace add target="_parent" to any links on the page.
e.g.
<script>
function onLoaded() {
// find all links and add the target attribute
$('a').attr('target','_parent');
};
document.addEventListener('DOMContentLoaded', onLoaded, false);
</script>
As #Kaiido says in his comment, its apparently fixed in Chrome v77, but this isn't the current (as of June 2019) stable release, so we've had to add the workaround into production so that our CRM works with Chrome v75. Thanks to #Kaiido for confirming that.
I'm building a site that can only be seen through an iframe. I also added a script that auto resize height can be adjusted.
But loading my blog so the added weight of having to load two pages at once. To cope, I apply the OnClick to load the iframe.
Auto Resize But it turned out to not work.
Load Iframe code:
<script type="text/javascript">
function okeBos() {
document.getElementById("iframeControl").innerHTML='<iframe scrolling="no" src="http://name-domain.com" style="border: 0; width: 100%;"></iframe>';document.getElementById("starApps").style.display="none";
};
</script>
<div id="iframeControl"></div><div id="starApps"><span onclick="okeBos()">Load Iframe</span></div>
Do you know how to work the Auto Resize for tricks like this? Please help me, thanks ..
EDIT
The following code snippet Resize My
Stored at sites that are loaded:
<script src='http://britha.com/Upload/MyFile/iframeResizer.contentWindow.min.js' type='text/javascript'></script>
<script>
var iFrameResizer = {
messageCallback: function(message){
}
}
</script>
Stored at the site containing the iframe:
<script src="http://britha.com/Upload/MyFile/iframeResizer.js" type="text/javascript"></script>
<script type="text/javascript">
iFrameResize({
log : true,
enablePublicMethods : true,
enableInPageLinks : true,
});
</script>
UPDATE
What I know about iframes is that they are usually the last on the DOM to load, so you have to expect a lag sometimes. I have neglected to ask if you can even load an iframe successfully by normal means (i.e. in the markup (HTML)). Anyways, I strongly suggest that you load your iframe the normal way because it won't be recognized by the iframe-resizer plugin. It has to coordinate between 2 pages, calculate, and adjust so I'm pretty sure it takes loading times into account. An iframe that pops up whenever the user decides to press a button is like 5 years to a computer (not scientific fact just an exaggeration).
I have made a Plunker and used the example provided by this repository and I added some of my own tests as well. Here is the most important code:
Parent Page
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/iframe-resizer/3.5.3/iframeResizer.min.js"></script>
<script>
iFrameResize({options});
Child Page
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/iframe-resizer/3.5.3/iframeResizer.contentWindow.min.js"></script>
<script>
MOST IMPORTANT: DO NOT CREATE THE IFRAME DYNAMICALLY
PLUNKER
OLD
Please explain how it doesn't work. It functions in this Snippet...How am I supposed to know what to fix if I do not have the auto-resize script?
SNIPPET
<script>
function okeBos() {
document.getElementById("iframeControl").innerHTML='<iframe scrolling="no" src="http://name-domain.com" style="border: 0; width: 100%;"></iframe>';
document.getElementById("starApps").style.display="none";
};
</script>
<div id="iframeControl"></div>
<div id="starApps">
<span onclick="okeBos()">Load Iframe</span>
</div>
I am trying to change the content of a div on the page but the page has a lot of things to load and on slower computers there is a flicker where you can see the div changing (changing through jquery btw). Is there anyway that everything can be hidden and display it all at including the changes I made using jquery?
I had a similar issue with my web application.. This is what I did
Hide body in HTML
<body style="display:none">
And write this script :
$(window).bind("load", function() {
$("body").fadeIn(100);
});
OR this script
$(window).load(function () {
$("body").fadeIn(100);
}
This creates beautiful effect and shows the page ONLY after everything is fully loaded..
Perhaps you could do something like
<head>
<style>
body{
display:none;
}
</style>
</head>
<body>
flickery <div></div>s go here
</body>`
And your script
$(window).load(function(){
$(document.body).css("display","block"); //shows it when all the elements are ready for presentation
});
I'm trying to figure out how to allow users to click on a Google+ "+1" button from within Flash. From reading through the Google+ docs and examining that their script is doing, I don't see a way and was wondering if anyone's solved this yet.
The problem is that their script creates an iFrame which points at a Google subdomain. So I can't trigger a button click due to cross-domain policy. I can't simply call the same URI that they're calling because it's encoded and their encoding may change. I can't find any documentation on how to programmatically call a +1, etc...
Any ideas?
Google Plus does not have a version of +1 button which can be directly embedded into flash, and the API they have just released is read-only, therefore you can't use methods which normally works for the facebook like button.
What I'd suggest is to have an absolutely positioned DIV tag on top of your flash object which you will invoke when needed, and you can pass the correct URL to "like" using the href parameter. I'm using explicit mode for tag rendering to show how you can dynamically prepare the tag.
Here's some sample code which uses jquery for the animations.
<style type='text/css'>
.gplus-container {
display: none;
position: absolute;
top: 8px;
left: 98px;
}
</style>
<div id="flash-container">
Flash content, click!
</div>
<div class="gplus-container">
<div class="g-plusone" data-href="http://jsfiddle.net" ></div>
</div>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{parsetags: 'explicit'}
</script>
<script type="text/javascript">
$(function(){
$('#flash-container').click(function(){
$('.gplus-container').fadeIn();
gapi.plusone.go();
});
});
</script>
You can also test this sample code on jsfiddle.
<html>
<head>
<script type="text/javascript">
// jquery and javascript functions
</script>
</head>
<body>
<fancy-jquery-ajaxy-html-section>
</fancy-jquery-ajaxy-html-section>
<noscript>
sorry you came to the wrong place - this site is all jquery/ajaxy stuff.
</noscript>
</body>
</html>
I tried surrounding <fancy-jquery-ajaxy-html> with a <script type="text/javascript"></script> but then nothing from that section is displayed even for users with javascript enabled.
But what I want to do is hide that <fancy-jquery-ajax-html> section only if the user doesn't have javascript enabled.
It contains content that is useless to someone without javascript turned on, so it shouldn't be shown at all.
A user with javascript disabled should only see a message saying that the page can't be viewed without javascript.
Is there a way do that?
The easiest way is to hide the section with CSS (e.g. display:none), then show it through Javascript.
EDIT: just a little example
<div>Everyone sees this div</div>
<div id="mydiv" class="hidden">You see this div only with JS enabled</div>
<script type="text/javascript">
$("#mydiv").removeClass("hidden");
</script>
<noscript>
<div>You will see this div only with JS disabled</div>
</noscript>
And, of course, in your CSS:
.hidden
{
display: none;
}
You could hide your fancy section using css:
<div id="fancy_jquery_ajax" style="display: none;">
</div>
then you could use use JavaScript to display the element:
$("#fancy_jquery_ajax").css("display", "block");
I hope that's right, I actually don't use jQuery that much. :S
Another approach would be to generate that HTML using JavaScript, so it can't appear unless JavaScript is running.
What I did is to have my javascript hide the nojsdiv and show maindiv. This way, if you don't have javascript the message shows up.
<body onload="allowlogin()">
<div id="maindiv" style="visibility: hidden;">
...
</div>
<div id="nojsdiv">
The training system requires javascript to be enabled.
</div>
</body>
I prefer to add a class of .js to html tags as soon as jQuery has loaded. This allows my to write css rules that apply only when the user has javascript enabled/disabled. This keeps your show and hide code out of our JS and lets CSS do its job and style the page
Here's how I would approach your problem:
<html>
<head>
<style type="text/css">
.js #fancy_jquery_ajax {display: none;}
</style>
<script type="text/javascript" src="/scripts/jquery.js"></script>
<script type="text/javascript">
$('html').addClass('js');
$(document).ready(function() {
// Stuff to do as soon as the DOM is ready
});
</script>
</head>
<body>
<div id = "fancy_jquery_ajax"></div>
<noscript><!-- stuff to say if use had javascript disabled --></noscript>
</body>
</html>
It's important to note that we want to add the class of .js as soon as jQuery has loaded and not add it in our document.ready handler. Otherwise we'd be back to square one.