I have an iFrame on a webpage and on all the other pages I have a button saying "discuss". When the user clicks on this button it takes them to the iframe page.
I would like to know how to get the iframe to show the page the user just came from? i.e the page with the discuss button on it.
This is so that eventually users will be able to discuss the page by viewing it in an iframe.
Thanks in advance,
Daniel.
Below is an example. Both files must be in the same directory.
mainpage.html:
<html>
<body>
<script>
function gotoFramePageNormal() {
window.open('framepage.html', '_top');
}
function gotoFramePageWithVar() {
window.open('framepage.html?ref='+document.location.href, '_top');
}
</script>
<input type=button value="Discuss" onclick="gotoFramePageNormal()" /> (normal referrer; via HTTP header)<br />
<br />
<input type=button value="Discuss" onclick="gotoFramePageWithVar()" /> (with URL variable referrer)<br />
</body>
</html>
framepage.html:
<html>
<body>
<div>
Source: <span id="srcurl">...</span>
</div>
<iframe id="theframe" width=800 height=600></iframe>
<script>
(function() {
if (document.referrer=='') { //no referrer
//parse URL variables
var a=document.location.search,b,c;
while ( (a.length>0) && (a[0]=='?') ) a=a.substring(1,a.length);
//split variables
a=a.split('&');
//check each variable
for (b=0; b<a.length; b++) {
//split name and value
c=a[b].split('=');
if (c[0].toLowerCase()=='ref') {
//show source url
srcurl.innerText=decodeURI(c[1]);
//set iframe source
theframe.location.href=decodeURI(c[1]);
return;
}
}
//show no source url
srcurl.innerText='none';
} else { //has referrer
//show source url
srcurl.innerText=document.referrer;
//set iframe source
theframe.location.href=document.referrer;
}
})();
</script>
</body>
</html>
The mainpage.html uses URL variable to pass the source page to the frame page. Generally, this is done automatically by the web browser, but it's not reliable enough since that feature can be disabled by the user. The framepage.html will use both method to detect the source page URL.
Related
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>
Currently we are with a major problem with iframe-worldpay integration.
I'm currently using worldpay template form, if the template form is placed in my website the form is visible however when I load the worldpay template form inside an iframe the worldpay template form visibility set to hidden.
Worldly doesn't provide a solution for this scenario, is there any work around?
EDIT
Sample Code
<script src="https://xx.xxxx/xx/worldpay.js"></script>
<script type="text/javascript">
function WorldPay() {
/*WorldPay-START*/
Worldpay.setClientKey('<%=WorldPayClientKey%>');//<YOUR_CLIENT_KEY>
Worldpay.reusable = false;
Worldpay.templateSaveButton = false;
Worldpay.useTemplate('aspnetForm', 'paymentDetails', 'inline', function (obj) {
//Form Submission here
});
/*WorldPay-END*/
}
</script>
<div id="paymentDetails"></div> //WORLDPAY iframe loads here
If this page is not inside an iframe world pay loads else it does not
Well, I'm trying to dart back and forth around the internet, in a fashion similar to this: http://jsfiddle.net/Muimi/gm7gv/. Unfortunately, my code doesn't work. What is happening is that the page isn't redirecting at all. I noticed that it gave me errors like 'page does not exist', for google.com (which exists, just so everyone knows). So, any ideas?
<!DOCTYPE html>
<html>
<head>
<style>
#showUrl {
border:2px solid #0A9;
height:90%;
width:95%;
}
#url {
width:30em;
}
</style>
<script type="text/javascript">
function loadUrl() {
var url = document.getElementById( 'url' ).value;
var showUrl = document.getElementById( 'showUrl' );
showUrl.src = url;
}
</script>
</head>
<body>
<form>
Enter URL to load: <input type="text" id="url" />
<input type="button" value="Load URL" onclick="loadUrl()" />
</form>
<iframe id="showUrl"></iframe>
</body>
</html>
Are you including 'http://'? If not, the iframe is trying to load a relative path instead of an absolute path.
function loadUrl() {
var url = document.getElementById( 'url' ).value,
showUrl = document.getElementById( 'showUrl' );
showUrl.src = /$https?:\/\//.test(url) ? url : 'http://'+url;
}
Your code does works. I tried it on JsBin and it did work with my website's URL but didn't with Google's
http://jsbin.com/akugeg/1/edit
There can be three reasons:
You need to add a protocol so it works as an absolute URL not a
relative one.
Most code debugging services doesn't allow to load iframes, as it itself uses iframe to display the content - for security reasons.
Some websites don't like to be loaded in iframes so they just configure their servers to not to load other inside an iframe on other than their own domain.
But I can assure you that the code works and if you try it on your localhost it might work.
How to hide iframe url From HTML source code?
<iframe src="http://mysite.com" frameborder="0" scrolling="no" width="728" height="90"></iframe>
You can use javascript to load the source, and it will not be visible in iframe url in page source code.
For example with jQuery:
<script type="text/javascript">
$(document).ready(function(e) {
$('iframe').attr('src','http://www.flickr.com/');
});
</script>
<body>
<iframe src="" />
</body>
Example here.
You can combine it with $.post to get the value serverside:
$.post('get-iframe-src.php', function(data) {
$('iframe').attr('src',data);
});
You can even load iframe itself to some element like:
$.post('get-iframe.php', function(data) {
$('#element_id').html(data);
});
etc. solutions are many, this is just one of.
You can't. If the URL isn't in the HTML, how would the browser know where to get it?
One thing you could try is to obscure it to make it slightly harder for someone to find it. You could have the src attribute be blank and then when the document is ready fetch the URL value from the server in a separate AJAX request and update the iframe tag to include that value in the src.
This would be a fair amount of work, however, and wouldn't really accomplish anything. The only thing it would prevent is somebody finding it by viewing the page source. They can still look at the "current version" of the HTML in any web browser's debugging tools. (Right click on an element and inspect it, which is nearly ubiquitous at this point.) Or any other normal traffic-sniffing tools will see it plain as day.
Ultimately, if the web browser needs to know a piece of information, then that information needs to be visible on the client-side.
There's no way to fully block source viewing. But there are a couple ways to disable right-clicking:
1) Javascript:
<script language="JavaScript">
<!--
var message="Your message goes here.";
function click(e) {
if (document.all) {
if (event.button == 2) {
alert(message);
return false;
}
}
if (document.layers) {
if (e.which == 3) {
alert(message);
return false;
}
}
}
if (document.layers) {
document.captureEvents(Event.MOUSEDOWN);
}
document.onmousedown=click;
// -->
2) Add the following into your tag: oncontextmenu="return false"
reference https://forum.powweb.com/archive/index.php/t-36161.html
I decided for solution that does not use javascript, because most of the time it will be possible to read the "hidden" content.
Moreover, changing iframe SRC with javascript, will keep URL hidden when checking the source. However, inspecting the code will show the real URL.
My code is in PHP; however, I believe that the logic can be translated to other programming languages. This is how it works:
I kept the iframe tag as usual:
<iframe src="dash_url.php"></iframe>
The trick is inside the iframe_url.php, where I validate the referer. If it is valid, page is redirected to iframe URL. If it is not, than URL will be a message.
<?
$iframe_url = "https://example.com";
$Referer = #$_SERVER["HTTP_REFERER"];
$RefererHost = #explode(":", explode("/", explode("//", $Referer)[1])[0])[0];
if ($RefererHost == $_SERVER["SERVER_NAME"]) {
header("Location: " . $iframe_url);
} else {
echo "Invalid URL";
}
?>
If visitor inspects the page or checks the source, iframe tag will show SRC as dash_url.php.
I have a set of asp.net pages which I wish they should only be accessible or loaded when they are loaded from an IFrame. If an attempt is made to access the pages directly via browser address bar then the page should not be displayed at all or display the message to the user.
I tried using cookies and sesions, but they are not that effective becuase once the cookie/session is created you can access the pages directly from browser, bypassing IFrame.
My development platform is asp.net 2.0+, vs2008, C# 2.0+
This is an example of one of the few times it is better to put the script in the head tag.
<html>
<head>
<title>sandBox</title>
<script type="text/javascript">
if (frameElement == null) {
//change location or close
window.location = "http://stackoverflow.com";
// or window.close();
}
</script>
</head>
<body>
content goes here
</body>
</html>
Try this inside your head tag:
<script>
if(window.self !== window.top); //inside an iframe
else window.location = "http://stackoverflow.com/" // Outside
</script>
Use this JS in the page to check whether it is in iframe or not.
if(window == window.top) {
//page is not in an iframe
}