Problems with opening the link on another page - asp.net

I am working on contact page where the client can enter the postcode which will take them to google maps for directions to the company, the problem which i am having is although the hyperlink is set to target_blank but still the window opens on the back hand instead of opening in front of the website page. I have no idea why it opens on the back hand and focus is on the current page instead of moving it to google map page
<a href="#" target="_blank">
<img alt="" src="/images/contactUs/directionbtn.png" onclick="return openDirections(1);" /></a>
<script type="text/javascript">
function openDirections(NumVal) {
if (NumVal == 1) {
if (document.getElementById("<%=txtPostcode.ClientID%>").value == "") {
alert("PostCode can not be blank");
document.getElementById("<%=txtPostcode.ClientID%>").focus();
return false;
}
else {
var regPostcode = /^([a-zA-Z]){1}([0-9][0-9]|[0-9]|[a-zA-Z][0-9][a-zA-Z]|[a-zA-Z][0-9][0-9]|[a-zA-Z][0-9]){1}([ ])([0-9][a-zA-z][a-zA-z]){1}$/;
var tempURL = document.getElementById("<%=txtPostcode.ClientID%>").value;
if (regPostcode.test(tempURL) == false) {
alert("Please Enter a Valid PostCode");
document.getElementById("<%=txtPostcode.ClientID%>").focus();
return false;
}
else {
var url = 'http://maps.google.co.uk/maps?saddr={' + $('#<%=txtPostcode.ClientID%>').val() + '}&daddr=&daddr=646+Preston+Rd,+Clayton-le-Woods,+Chorley+PR6+7EH,+United+Kingdom&iwloc=1&dq=Tangent+Design';
document.location = url;
return true;
}
}
}
</script>

Try window.open(url); instead of of document.location = url;

All I see you doing is setting the url of the current window. Maybe try using something like this to open a new window instead.
window.open('url to open',)
in place of document.location = url

Each browser can be configured to handle how new pages are opened. Take a look at the preferences in the browser you are using, and see if that is the behavior that you currently have configured.

I think this is what you are looking for:
var x = window.open(URL, 'name', '...');
x.focus();

Related

Get Scorm test result from inside an iframe (same domain)

My company is getting a scorm test from another company. (scorm schemaversion 1.2)
We are embedded the test in an iframe like this:
<html>
</head>
<iframe src="exam/scormcontent/index.html" name="course">
</iframe>
</html>
This is the test folder structure:
I am new this scorm solution. What we are trying to do is to get the final result of the scorm test (student passed/failed) in the parent html page.
The html page and the scorm are planned to be hosted on the same domain.
P.S: The entire project involves a react app, where at some stage, the user is supposed to do the scorm test, and he will only be allowed to continue if he passed the test. I am not sure if our plan to use iframe is what we should do. I would love to learn if there is a better option.
I have found a way to do it based on this:
https://github.com/hershkoy/react_scrom
The idea is to inject javascript code into the iframe (requires that the iframe and the parent are on the same domain).
The injected javascript code is listening to the button click events, and send a postMessage event to the parent when detects that the course is completed.
<div id="result"></div>
<input id="btn" type="button" value="Go to course" name="btnOpenPopup" onClick="OpenNewWindow()" />
<iframe style="display:none;" id="myiframe" src="http://localhost/training/content" name="course" frameborder="0" style="overflow:hidden;height:100%;width:100%" height="100%" width="100%"></iframe>
<script type="text/javascript">
const iframe = document.getElementById('myiframe');
const iframeWin = iframe.contentWindow || iframe;
const iframeDoc = iframe.contentDocument || iframeWin.document;
function OpenNewWindow() {
iframe.style.display="block";
document.getElementById('result').innerHTML = "";
document.getElementById('btn').style.display="none";
}
function injectThis() {
//alert("hi!");
document.addEventListener('click', (event) => {
console.log("click!");
let chk_condition = event &&
event.target &&
event.target.href &&
event.target.href.includes("exam_completed");
if (chk_condition) {
event.preventDefault();
event.stopPropagation();
window.parent.postMessage({type: 'course:completed'}, '*');
//window.close();
};
});
};
window.addEventListener('message', event => {
// IMPORTANT: check the origin of the data!
if ( true /*event.origin.startsWith('http://localhost:3002')*/) {
// The data was sent from your site.
// Data sent with postMessage is stored in event.data:
console.log(event.data);
if (event.data.type=="course:completed"){
iframe.style.display="none";
document.getElementById('result').innerHTML = "TEST PASSED!";
};
} else {
// The data was NOT sent from your site!
// Be careful! Do not use it. This else branch is
// here just for clarity, you usually shouldn't need it.
return;
}
});
var script = iframeDoc.createElement("script");
script.append('window.onload = ' + injectThis.toString() + ';');
iframeDoc.documentElement.appendChild(script);
</script>

Authorization of alfresco user while calling webscript inside IFrame

I'm developping a component to easily edit associations in document properties pages.
The visual part of the component is an IFRAME showing the myspaces webscript.
I'm having difficulties to transfer user authentication to the content of the IFRAME. The session is lost, so the browser ask for a new BasicAuthentication.
I can transfer the ticket using the alf_ticket url parameter, but it is not reused for other urls produced by the webscript.
How could I transfer the Alfresco authentication to the webscript included in the IFRAME ?
<script type="text/javascript">
var self = this;
var ticket;
var xmlHttpReq = false;
// Mozilla/Safari
if (window.XMLHttpRequest) {
self.xmlHttpReq = new XMLHttpRequest();
}
// IE
else if (window.ActiveXObject) {
self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}
self.xmlHttpReq.open("GET", "http://blrkec335927d:8080/alfresco/wcservice/api/login?u=admin&pw=admin", true);
self.xmlHttpReq.setRequestHeader('Content-Type', 'json');
self.xmlHttpReq.setRequestHeader('X-Alfresco-Remote-User', 'admin');
xmlHttpReq.onreadystatechange = function() {//Call a function when the state changes.
alert(xmlHttpReq.status);
if (xmlHttpReq.readyState == 4 && xmlHttpReq.status == 200)
{
var xml = xmlHttpReq.responseXML;
var getticket = xml.getElementsByTagName("ticket");
ticket = getticket[0].childNodes[0].nodeValue
var url1 = "http://blrkec335927d:8080/alfresco/wcservice/ui/myspaces?f=0&p=%2FCompany%20Home&alf_ticket="+ticket;
var aa='<iframe bgcolor="#edf6fc" width="100%" height="100%" frameborder=0 src="'+url1+'" />';
document.getElementById('uploaddoc').innerHTML = aa;
}
}
self.xmlHttpReq.send();
</script>
<body>
<span id="pageTitle">${label['ALFRESCO_DOCUMENT']}</span>
<div id="uploaddoc">
</div>
</body>
<span id="footerButtons" style="vertical-align: bottom;"></span>
I am using above code . But still while loading page its asking for username and password. Please help me
First of all, don't use an iFrames for a simple webscript. You're not loading an entire new page which should have his own session.
Just use Client-Side JavaScript to get the JSON backend data en draw your own UI.
In any case you're compelled to use an iFrame, then just create your own myspaces webscript. Copy all the content, rename it and add your alf_ticket behind every generated url.

Thickbox not closing after inserting media in Wordpress

I'm using the Wordpress Thickbox to try and retrun the value of the images that a user wants to select (when they click 'Insert into Post'), but the Thickbox is not closing, just showing as any empty white box.
The field $('#office-image input#image') exists, and Firebug is not reporitng any errors.
I'm not sure why this is not working, so any help is appriciated. Thanks.
window.send_to_editor = function(html){
var image_url = $('img', html).attr('src');
$('#office-image input#image').val(image_url);
tb_remove();
}
tb_show('', 'media-upload.php?type=image&TB_iframe=true');
window.original_send_to_editor = window.send_to_editor;
window.send_to_editor = function (html) {
var fileInput = jQuery(fileInput_id);
if (fileInput) {
fileurl = jQuery('img', html).attr('src');
jQuery(fileInput).val(fileurl);
tb_remove();
} else {
window.original_send_to_editor(html);
}
};
I am using above script for that and its working fine

IE9 not rendering iframe in ASP.NET application

I have a parent page which has an iframe and also has javascript which will create a form, append it to the iframe, and submits it via POST to an external URL upon page load.
The content from the external URL then loads in the iframe. This works fine in all browsers EXCEPT IE9.
I tried the 'meta http-equiv="X-UA-Compatible" content="IE=8" ' trick and this didn't help. Sometimes the iframe renders the content, sometimes it doesn't upon refresh. Debug statements in the javascript show it is firing each time (each page load) and Fiddler shows the successful request/response to the external URL. It's as if IE9 selectively decides whether to update the DOM.
Also I've noticed is that if there is any sort of delay with the external request (taking a few seconds), then the iframe content never renders. Has anyone experienced this with IE9 and have a solution?
<iframe frameborder="0" height="600px" id="ifPage" runat="server" width="700px" />
<script type="text/javascript" language="javascript">
var alreadyrunflag = 0 //flag to indicate whether target function has already been run
if (document.addEventListener) {//FireFox or Sarafi
document.addEventListener("DOMContentLoaded", function () { alreadyrunflag = 1; GetExternalPageContent() }, false)
}
else if (document.all && !window.opera)
{//IE
addLoadEvent(GetExternalPageContent)
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
}
else {
window.onload = function () {
if (oldonload) {
oldonload();
}
func();
}
}
}
function GetExternalPageContent() {
var iframe = document.getElementsByTagName("iframe");
if (iframe != null) {
var uniqueString = "embFrame";
iframe[0].contentWindow.name = uniqueString;
var form = document.createElement("form");
form.target = uniqueString;
form.action = '<%=ExternalUrl %>';
form.method = "POST";
//parameter submitted to external URL to get appropriate content
var input = document.createElement("input");
input.type = "hidden";
input.name = "embParam";
input.value = "paramValue1";
form.appendChild(input);
document.body.appendChild(form);
form.submit();
}
}
</script>
I just wanted to let people know that the issue here is that IE doesn't like naming of the iframe content window like this:
iframe[0].contentWindow.name = uniqueString
Instead, the name attribute must be within the iframe tag itself. There were no javascript errors indicating this, it just didn't consistently render. Then, when you need to dynamically reference the iframe content, use:
var iframe = window.frames['embFrame']
Doing it this way solved the issue and now the iframe content is rendered consistently.

Detecting if YouTube is blocked by company / ISP

We have YouTube videos on a site and want to detect if it is likely that they will not be able to view them due to (mostly likely) company policy or otherwise.
We have two sites:
1) Flex / Flash
2) HTML
I think with Flex I can attempt to download http://youtube.com/crossdomain.xml and if it is valid XML assume the site is available
But with HTML I don't know how to do it. I can't even think of a 'nice hack'.
I like lacker's solution, but yes, it creates a race condition.
This will work and won't create a race contition:
var image = new Image();
image.onload = function(){
// The user can access youtube
};
image.onerror = function(){
// The user can't access youtube
};
image.src = "http://youtube.com/favicon.ico";
You can load an image from youtube using javascript and check its properties. The favicon is tiny and has a consistent url -
var image = new Image();
image.src = "http://youtube.com/favicon.ico";
if (image.height > 0) {
// The user can access youtube
} else {
// The user can't access youtube
}
I think this is slightly better than loading javascript because this won't try to run any code, and while youtube might rename their javascript files, or functions from those files, they are unlikely to ever rename their favicon.
This should work. Basically, it loads a youtube.com javascript file, then checks if a function in that file exists.
<html>
<head>
<script src="http://www.youtube.com/js/account.js"></script>
<script>
function has_you_tube()
{
if(typeof addVideosToQuicklist == 'function')
{
return true;
}
else
{
return false;
}
}
</script>
</head>
<body>
<script>alert( "has_youtube: " + has_you_tube() ); </script>
</body>
</html>
I got stuck on this today and tried the favicon test but it wasnt working in IE. I was using the YouTube Player API Reference for iframe Embeds to embed youtube videos into my site so what I did is perform a check on the player var defined just before the onYouTubeIFrameReady with a delay on the javascript call.
<script> function YouTubeTester() {
if (player == undefined) {
alert("youtube blocked");
}
}
</script>
<script>window.setTimeout("YouTubeTester()", 500);</script>
Seems to work for me. I needed the delay to get it to work in IE.
This worked for me... Its also my first post, hope it helps some one too.
<?php
$v = file_get_contents("https://www.youtube.com/iframe_api");
//Tie counts to a variable
$test = substr_count($v, 'loading');
if ($test > 0)
{ ?>
<iframe>YOUTUBE VIDEO GOES HERE</iframe>
<?php
}
else
{
echo "<br/> no connection";
}
?>

Resources