IOS10 above system, mixed content（html by https,img by http）, when the call of geolocation.getCurrentPosition, background-image inserted picture does not display
<pre>
<div id="aaa" style="background-image:url(http://xxx.jpg);height:200px;"></div>
<script>
navigator.geolocation.getCurrentPosition(function (res) {
console.log(res);
});
</script>
</pre>
It is correct behaviour. On https page all http content must not be shown as it is insecure. Even if it is inserted through JS. Browser simply doesn't make request for such content.
Related
I am busy developing a mini-program using VodaPay mini-programs and rendering my web-page in an H5 web-view.
I have imported the CDN and it works correctly in the Simulator and while running on device on the VodaPay super-app. But when running on device I get the following error:
my is not defined
How do I prevent this from occurring? And why does this issue occur?
<script type="text/javascript" src="https://appx/web-view.min.js"></script>
<script>
// Sends message to VodaPay Mini-Program.
my.postMessage({name:"test web-view"});
// Did receive message from VodaPay Mini-Program.
my.onMessage = function(e) {
console.log(e); // {'sendToWebView': '1'}
}
</script>
The Web-View cdn will only run when your mini-app is running on device or in the Simulator. Therefore it is necessary to first check if the my. library is available in order to establish that it's running in a Mini-Program context.
<!-- MINI: Used to communicate with mini app. Have to include the script body here otherwise we get my. not recognized errors <START>-->
<script src="https://appx/web-view.min.js"></script>
<script id="messageSend">
function sendMessage(data) {
//If not in mini app webview then my. throws errors
try {
my.postMessage(data);
} catch(error) {
//Prevent my. from throwing error in browser
}
}
</script>
<script id="messageReceive">
try {
//Store message in session storage, and then change messageReceiveListener innerText to trigger a mutation event to notify that a message has arrived.
my.onMessage = function (e) {
sessionStorage.setItem('message',JSON.stringify(e));
document.getElementById('messageReceiveListener').innerText = e;
}
sessionStorage.setItem('inMiniProgram',true);
} catch(error){ //Prevent my. from throwing error in browser
sessionStorage.setItem('inMiniProgram',false);
}
</script>
<input id="messageReceiveListener" hidden></input>
<!-- MINI:<END> -->
The difficulty with wrapping all calls in try-catch is that you could be masking other errors too. What I'm doing instead is to check if the useragent contains "alipayclient" and render the html/js content conditionally, which also reduces the amount of html/js rendered for all other non-Vodapay users of the website.
I created this script to hide a page only if chrome 18 has not been found, how can I make sure to do the redirect of the url to a external page if chrome 18 has not been found instead of hiding only the page ?
I want to do the redirect to this website http://search.aol.com/aol/webhome
<div id="hiddenContent" style="display: none;">
My hidden content.
</div>
<script>
function GetChromeVersion() {
var raw = navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./);
return raw ? parseInt(raw[2], 10) : false;
}
if (GetChromeVersion() == 18)
document.getElementById("hiddenContent").style.display = "";
</script>
It's possible, e.g. by using:
window.location.href='http://search.aol.com/aol/webhome';
Inside your function. BUT I wouldn't recommend you this. You should never trust the client as JavaScript can easily be changed and someone could access your site even despite the JavaScript redirect if they wanted to and made a minimal effort to modify page sources. Javascript is handled on the client-side, while php is completely server-side. In this case I'd use php instead of JavaScript. Try to check it with php and if it's not chrome 18, use: header('Location: http://search.aol.com/aol/webhome');
Edit:
<?php function is_chrome()
{
return(eregi("chrome/18", $_SERVER['HTTP_USER_AGENT'])); } if(is_chrome()) { header('Location: http://www.search.aol.com/aol/webhome'); } ?>
Place it on top of the file, should work, but haven't tested it yet, if not, just change the string in eregi('chrome/18') to what you need (it's a regular expression)
I can't seem to get this to work, while I have been doing so in the past, succesfully...
I'm trying to embed a Google Maps iframe in a web page. The iframe won't load, showing an error message, saying:
Chrome, in console: Refused to display document because display forbidden by X-Frame-Options.
IE9, on the page: This content cannot be displayed in a frame
The steps I take are:
Go to google maps in the browser
Go the place I want to have embedded
Click the link icon
Copy paste the link that's presented under the label 'Paste HTML to embed in website'.
I'm using ASP.NET MVC4, running locally in IIS Express, but the same happens on the server in IIS7.
Strangely enough, when I just create a local HTML file and open that from the filesystem, I don't have the problem.
When pasting the code in jsfiddle, it does seem to work.
Do I need to configure IIS or add something to my headers, or anything like that?
The HTML snippet
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.be/maps?f=q&source=s_q&hl=en&geocode=&q=Kortrijk,+Belgium&aq=0&oq=kortrijk,+bel&sll=50.802805,3.279785&sspn=0.351067,0.617294&t=h&ie=UTF8&hq=&hnear=Kortrijk,+West+Flanders,+Vlaams+Gewest&ll=50.802897,3.280106&spn=0.350496,0.617294&z=11&iwloc=A&output=embed"></iframe>
Thanks to the sharp and insightful eye of a colleague of mine, we have found the issue.
First of all it only seems to appear on the Belgian maps, http://maps.google.be, (afaik, obviously), and not on the http://maps.google.com.
When calling the IFRAME content, google redirects the IFRAME content to the same URL, but with ?wmode=transparent appended.
The browser does not allow multiple '?' in a url, so it aborts the action.
To fix:
Use the same URL as generated by Google Maps, but just append the following:
&wmode=transparent
Do you definitely have the &output=embed querystring parameter in the iframe source? If you don't include that then Google won't send the correct X-Frame-Options response headers and you get the error you've described.
Can you show the snippet of the MVC view where the map is being rendered?
I couldn't get any of the various suggestions around the web to work for embedding a google map link in an iframe.
I ended up using the google map API, generating the initial code by filling in the boxes at:
http://www.map-embed.com/
and modifying the resultant code to suit my purposes.
You could use the link above to gen the code for your own map, and then optionally use my code with the longitude and latitude produced by the above web site copied into my code. You can also insert your own html into "content" below, independent of what the above website produces.
<?php
// IE won't work with percentage height and FF won't work with em units.
// Simple code here assumes if browser isn't IE, then is FF;
// And I don't care about other browsers.
//
$height = "$browser" == 'ie' ? '25em' : '99%' ;
$width = "$browser" == 'ie' ? '99%' : '99%' ;
echo <<<XXXEODXXX
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script>
<div style="height:$height; width:$width; overflow:hidden;">
<div id="gmap_canvas" style="height:$height; width:$width;">
</div>
<style>
#gmap_canvas
img
{
max-width:none!important;
background:none!important
}
</style>
</div>
<script type="text/javascript">
google.maps.event.addDomListener ( window, 'load', init_map );
function init_map ()
{ var myOptions = { zoom:12, center:new google.maps.LatLng ( 41.1889495, -104.1781593 ), mapTypeId:google.maps.MapTypeId.ROADMAP };
map = new google.maps.Map ( document.getElementById ( "gmap_canvas" ), myOptions );
marker = new google.maps.Marker ( {map: map, position: new google.maps.LatLng( 41.1889495, -104.1781593 ) } );
infowindow = new google.maps.InfoWindow ( { content:"<b>Biz Name</b><br/>Biz Street Address<br/>Biz City, State Zip<br/>Biz Phone" } );
google.maps.event.addListener ( marker, "click", function () { infowindow.open ( map, marker ); } );
infowindow.open ( map, marker );
}
</script>
XXXEODXXX;
?>
Below is the code snippet which is hitting the url on server and getting the html response.I can see
the response inside firefox debugger but it does not display in div tag.
$.ajax({
url: url,
dataType: 'html',
data: '',
type: 'POST',
success: function(data) {
//in firefox debugger i can see complete html response inside data
$('#displayContent').html(data); // but here, it does not
// append the html inside div displayContent. Instead it makes
// the current page blank
}
});
Looks like this is happening because of " $ is not defined " error(which i see in firefox debugger). This is happening because of inclusion of below javascript file because if i comment out this file i dont get this error in firefox debugger and page gets displayed correctly. But i can not comment out this file because i need it for text rich editor.
I am not getting why i am getting this error though same tiny_mce.js is working in other jsp files? Is there any relation of this with loading the html content thru ajax?
<script type="text/javascript" src='<s:url value="/script/tinymce/jscripts/tiny_mce/tiny_mce.js"/>'></script>
jQuery has a noConflict mode, which will allow you to use a different shortcut for calling jQuery functions and leave '$' for other frameworks.
http://api.jquery.com/jQuery.noConflict/
First of all include jquery in your project and secondly include tinymce like this.
<script type="text/javascript" src="/script/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
I'm having an issue using Exoclick adult advertisement to advertise on a mobile website using JQuery UI.
I don't know how much I can disclose here until it goes too far into "adult" that I can't post it here anymore.
The Exoclick banners show, but only once! Navigating inside the site doesn't the same ad again (we have two ads, bottom and top. Each is only loaded ONCE per site traversal). If you refresh using the refresh function of the browser ("F5"), they will load again... But only once.
Alright, Exoclick gives me a snippet like this:
<!-- BEGIN ExoClick.com Ad Code -->
<script type="text/javascript" src="http://syndication.exoclick.com/ads.php?type=300x50&login=<username>&cat=110&search=&ad_title_color=0000cc&bgcolor=FFFFFF&border=0&border_color=000000&font=&block_keywords=&ad_text_color=000000&ad_durl_color=008000&adult=0&sub=&text_only=0&show_thumb=&idzone=<zone id>&idsite=<site id>"></script>
<noscript>Your browser does not support JavaScript. Update it for a better user experience.</noscript>
<!-- END ExoClick.com Ad Code --></div>
The thing is, this works perfectly on static sites, but due to the nature of JQuery Mobile to fetch everything using AJAX, the scripts would be loaded many times over into the browser's execution context (at least this is what I suppose happens!) and in the end... not even execute anymore?
What I already thought of:
Cache the output of the Exoclick ad script (is there something like "outputcache" for JS?)
Deactivate Ajax
I tried deactivating Ajax requests but for some reason this didn't do anything:
<script>
$(document).bind("mobileinit", function(){
$.mobile.ajaxEnabled = false;
});
</script>
Deactivating Ajax should work:
$(document).bind("mobileinit", function () {
$.mobile.addBackBtn = false;
$.mobile.ajaxEnabled = false;
$.mobile.ajaxLinksEnabled = false;
});
On the other hand, you can refresh/reload your script on each ajax success
$('html').ajaxSuccess(function() {
//reload your script using js, plenty of that on google
});
I did it... #bobek indirectly brought me to this answer.
What I did is create an invisible div which contains the ads at first. Then, on pageinit, I steal the div and remove it from DOM. The div will now have an iframe inside made by Exoclick.
Then, without the script by exoclick, I insert it back into the dom on each page init event...
To prevent that the script gets inserted back into the dom, on the server side I check for the X-REQUESTED-WITH header. If it's XMLHttpRquest, I don't send the ads.
This is how it looks in code:
The temporary ad placement, ANYWHERE on the site:
<div id="ads">
<div style="display: none" id="topad">
<?php require("./_topbannerb.php"); ?>
</div>
<div style="display: none" id="bottomad">
<?php require("./_bottombannerb.php"); ?>
</div>
</div>
The two PHP files contain the tags by exoclick. Nothing else.
A script in the head tag:
<script>
ads = "";
first = true;
$(document).bind('pageinit', function() {
if (first) {
ads = $("#ads");
ads.remove();
}
first = false;
$.each($(".adt"), function(i, v) {
$(v).append($(ads).children("#topad").first().children("div").clone())
});
$.each($(".adb"), function(i, v) {
$(v).append($(ads).children("#bottomad").first().children("div").clone())
});
});
</script>
Then, where the ads are supposed to be placed in the end:
<div class="adt"> </div>
The script automatically inserts into each ad placement. Here I have two different ad regions: Top and bottom. Both have no differences except how exoclick handles them in the back.