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.
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 am new to CSS, HTML, and JS but I hope to learn more as I progress through developing my portfolio site. Currently I am trying to put custom buttons I designed on my site, that link to another page. I have the button zero and click state working, but I'm not 100% sure how to make it so that button can be used to link to another page on my site.
Here is the code so far.
<html>
<head><title>button</title>
<style>
div.butn{
background-image:url("https://static1.squarespace.com/static/54da7941e4b0e25dc3648a4f/t/59640885b3db2b282c21c56e/1499728005971/zero_state%40300x-8.png#import 'https://fonts.googleapis.com/css?family=Source+Sans+Pro:700");
width:555px;
height:170px;}
div.butn:active{
background-image:url("https://static1.squarespace.com/static/54da7941e4b0e25dc3648a4f/t/5964090b6b8f5bf77b28504f/1499728139538/hover_state%40300x-8.png");
width:555px;
height:170px;}
</style>
</head>
<body>
<div class="butn"></div>
</body>
</html>
Any help is appreciated, sorry in advance for any noobie mistakes xD
I'd advise you to stick with semantic HTML, i.e. use proper tags for what you are trying to convey. In your example you want a button to act like a hyperlink to another URL, so why don't you use the anchor tag which was made for exactely that purpose?
Let's see how we can improve things a bit:
<html>
<head>
<meta charset="utf-8">
<title>button</title>
<style>
.butn {
background-image:url(.../plain.image");
width:555px;
height:170px;
}
.butn:active{
background-image:url("../active.image");
}
</style>
</head>
<body>
<p><a class="butn" href="https://..." title="Show this text on hover">Go to YouTube</a></p>
</body>
</html>
So, what has changed besides the use of the anchor tag? Quite a lot, actually:
I chose a proper character set (UTF-8 should be fine for most about everything)
I lowered your CSS rule's specificity (you may read up on as to why this is !important (no pun intended) on Smashing magazine)
I used an anchor tag <a> to properly mark up the hyperlink
I got rid off the superfluous CSS properties within the .btn:active rule (see CSS-Tricks to learn all about how styles are cascaded)
and last but not least, I properly aligned your code (call me pedantic but missaligned code makes it more difficult to read and hinders your thought process)
There's a lot more ground to cover but this should be enough to keep you occupied for the next two weeks. Keep asking!
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 would like to make my own custom Coinbase payment button and have the following code which is just a copy paste of "Using Your Own Button And Custom Javascript Events" example.
<!doctype html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<a href='#' class='my-custom-link'>Show Me The Modal!</a>
<div class="coinbase-button" data-code="4d4b84bbad4508b64b61d372ea394dad" data-button-style="none"></div><script src="https://coinbase.com/assets/button.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.my-custom-link').click(function(){
$(document).trigger('coinbase_show_modal', '4d4b84bbad4508b64b61d372ea394dad');
return false;
});
$(document).on('coinbase_payment_complete', function(event, code){
console.log("Payment completed for button "+code);
window.location = "/confirmation.html";
});
});
</script>
</body>
</html>
However it does not work. Any ideas why?
'Show Me The Modal!' link is displayed. The $('.my-custom-link').click() function is called. Using Google Chrome I can see that an iframe is loaded with what I assume is the modal dialog code containing payment instructions. However nothing happens when I click on the 'Show Me The Modal!' link.
I think I have solved it. I tried it out with your code and it does not work as you said. I took the time to modify it a little bit and it works now. http://pastie.org/8687468 Please let me know if what I fixed was intended.
The code isn't working because coinbase.com blocks custom buttons from working after triggering them with custom scripts too much
Ask a friend to test your code, it should work for other people.
I'm having the same issue. Deleting browser cookies, cache, flash cookies, changing IP doesn't work. I guess the only solutions are:
wait for the ban from coinbase.com to expire
contact support about it
don't do anything, it's working, but not for you
Update:
A working solution/hack that I found was using the default button, hiding it with opacity: 0; and putting it on top of your custom button. That way you can make it look like the user is clicking the custom button, when in fact, he's clicking the hidden default button (which works).
Here's a demo: http://jsfiddle.net/uaMdX/show
Code demo: http://jsfiddle.net/uaMdX/
<a href='#' class='my-custom-link'>Show Me The Modal!</a>
<div class="coinbase-button" data-code="4d4b84bbad4508b64b61d372ea394dad" data-button-style="small"></div>
<script src="https://coinbase.com/assets/button.js"></script>
<style>
#coinbase_button_iframe_4d4b84bbad4508b64b61d372ea394dad {
position: absolute;
left: 0;
top: 0;
opacity: 0;
width: 140px!important;
height: 18px!important;
margin-left: 7px;
margin-top: 10px;
/*
debugging_code: uncomment_to_show_the_button;
opacity: 0.5;
outline: 1px solid red;
*/
}
</style>
*If your needs are more specific you should use jQuery to dynamically add the styles/position the iframe for the hidden button.
Try creating another page, and put only what coinbase gives you. If that works then it is probably a Issue on your side. If not, let me know.
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.