I am new to DOJO and have a requirement where in we need to embed already running website on our new website using an iframe. Both websites will be running on same domain.
I tried using dojo/request/iframe, and am able to see the website in my iframe BUT when clicking on any of the link in embedded website, it opens in another window. But i want it to work in my iframe internally.
Below is the code snippet:
<script>
require(["dojo/request/iframe", "dojo/dom", "dojo/dom-construct"], function(iframe, dom, domConst){
iframe("http://localhost:8080/phpkbv8/", {
handleAs: "html"
}).then(function(data){
var greetingNode = dom.byId('siteInclude');
domConst.place(data.documentElement,greetingNode);
}, function(err){
var greetingNode = dom.byId('siteInclude');
domConst.place('<p>Error Occured!!!</p>' + err,greetingNode);
});
// Progress events are not supported using the iframe provider
});
</script>
Please help me in making it work. Looking for help.
If you are intending to embed an iframe into your page for display/interaction purposes, you shouldn't really be using dojo/request/iframe to do so. If you need to create the iframe programmatically, use DOM APIs or dojo/dom-construct. For example, based on your code above:
domConst.create('iframe', {
src: 'http://localhost:8080/phpkbv8/'
}, greetingNode);
dojo/request/iframe is specifically intended as a transport for sending Ajax requests, in cases where XHR, script injection, etc. aren't sufficient.
I'm adding a script tag to a web page once it's fully loaded in a WebEngineView, but it's silently failing somehow.
I inject the script by invoking webview.runJavaScript with this code:
var s = document.createElement('script');
s.src = "qrc:/jquery-2.1.4.min.js";
document.body.appendChild(s);
That's perfectly standard and to a certain extent it works as expected, i.e., if I view the html source of the page, the script tag has indeed been appended to the body.
The problem is that the script isn't being downloaded, or isn't being evaluated, or something. All I know is in the above example the jQuery functions aren't available. If I load a small JavaScript test file with one global variable, that variable's not available either. Changing the url to http instead of qrc and pointing it to a web server makes no difference.
Injecting an img tag works fine; the image is loaded and displayed.
But JavaScript is broken somehow. Does anyone know how to fix this?
The problem had to do with the asynchronous nature of QML and JavaScript.
I was inserting a script tag to inject jQuery, and then I was calling a function to de-conflict my inserted version of jQuery from whatever version of jQuery might already be in the original page.
But I believe the webview had not finished parsing the inserted jQuery library before my de-conflicting function was called, so it failed. (I'm not very experienced with browser programming or I might have suspected this from the beginning.)
The solution was to insert a script tag with a small bit of JavaScript that inserts jQuery and then sets a timeout to wait 200ms before calling the de-conflict function. Like so:
function insertAuhJQuery(){
var s = document.createElement("script");
s.src = "qrc:/jquery-2.1.4.min.js";
document.body.appendChild(s);
window.setTimeout(deConflictJQuery, 200);
}
function deConflictJQuery(){
auh = {};
auh.$ = jQuery.noConflict(true);
}
insertAuhJQuery()
That works reliably and is acceptable for my purpose.
I am trying to open some site in iFrame which opens as popup.
Some sites does not allow itself to open in iFrame (Frame Busting).
I have searched for this . i Have got some solution also like
$(window).bind('beforeunload', function (event) {
return 'Custom message.';
});
beforeunload not work for me, as it will run even when navigating within my site
and also I tried
// Event handler to catch execution of the busting script.
window.onbeforeunload = function () { prevent_bust++ };
// Continuously monitor whether busting script has fired.
setInterval(function () {
if (prevent_bust > 0) { // Yes: it has fired.
prevent_bust -= 2; // Avoid further action.
// Get a 'No Content' status which keeps us on the same page.
window.top.location.href = 'http://mysiteurl/#';
}
}, 1);
above is also not working, it will redirect to the url which is being opened in iFrame.
So Is there any solution to open site (having Frame Buster) in IFrame.
Regards,
Sagar Joshi
For IE use this in your frame security="restricted"
<iframe id="frame_id" name="frame_name" security="restricted" src="page.html">
</iframe>
Edit: I was having the same issue but I needed scripts etc to run in my frame so security restricted was not good. Try using sandbox="..."
allow-forms allows form submission
allow-popups allows popups
allow-pointer-lock allows pointer lock
allow-same-origin allows the document to maintain its origin
allow-scripts allows JavaScript execution, and also allows features to trigger automatically
allow-top-navigation allows the document to break out of the frame by navigating the top-level window
Top navigation is what you want to prevent, so leave that out and it will not be allowed. Anything left out will be blocked
ex.
<iframe sandbox="allow-same-origin allow-scripts allow-popups allow-forms" src="http://www.example.com"</iframe>
I have an application with a launch page that needs to determine what is already opened, so it does not reopen things that are opened already in another new tab. In Firefox, I was able to make this work, by using window.sessionStorage to store the titles of pages that are open, and then use window.opener with the following code to remove the titles from the list.
Gecko Session Storage Info Page
if (window.sessionStorage) {
if (window.sessionStorage.getItem(code)) {
return; // page already open
}
else {
window.sessionStorage.setItem(code, code);
window.open("Sheet.aspx", "_blank");
}
}
And on the pages that are opened:
function signalPageExit() {
if (window.opener.sessionStorage) {
window.opener.sessionStorage.removeItem(
document.getElementById("runcode").childNodes[0].textContent);
}
This doesn't work in IE so I decided to use a cookie strategy, but the cookies were never successfully deleted from code on the dynamically launched pages, and therefore pages couldn't be reopened from the launch page once they had been launched until the cookie expired.
My second attempt was to define my own sessionStorage when it did not exist. That looked like this:
function setStoreItem(name, val) {
this.storage[name] = val;
}
function getStoreItem(name) {
return(this.storage[name]);
}
function removeStoreItem(name) {
this.storage[name] = null;
}
function sesStorage() {
this.storage = new storageData();
this.setItem = setStoreItem;
this.getItem = getStoreItem;
this.removeItem = removeStoreItem;
}
// storage object type declaration
function storageData() {
}
// IE 7 and others
else {
window.sessionStorage = new sesStorage();
window.sessionStorage.setItem(code, code);
window.open("Sheet.aspx", "_blank");
}
But it seems the real session storage is special, this ordinary object of the window did not stay alive across postbacks and therefore when my launch page posted back, the list of created page titles was wiped out.
So now I'm looking for a way to make this work. I have a launch page called scoresheets.aspx that creates dynamic pages based on user requests. These pages share a substantial amount of javascript code that can be modified to make this work.
I don't want to refresh the launched pages when a user tries to reopen them, but if there is some way to detect the titles of opened pages or some other way to use window.opener to communicate with the same persistence that sessionStorage has, I'd be glad to use it.
Eric Garside’s jStore plugin provides a jquery based api to several client side storage engines.
you should go with that cookie strategy and set those cookies to expire when the windows (tab) is closed. that should work across browsers.
I'm having a serious issue with Internet Explorer caching results from a JQuery Ajax request.
I have header on my web page that gets updated every time a user navigates to a new page. Once the page is loaded I do this
$.get("/game/getpuzzleinfo", null, function(data, status) {
var content = "<h1>Wikipedia Maze</h1>";
content += "<p class='endtopic'>Looking for <span><a title='Opens the topic you are looking for in a separate tab or window' href='" + data.EndTopicUrl + "' target='_blank'>" + data.EndTopic + "<a/></span></p>";
content += "<p class='step'>Step <span>" + data.StepCount + "</span></p>";
content += "<p class='level'>Level <span>" + data.PuzzleLevel.toString() + "</span></p>";
content += "<p class='startover'><a href='/game/start/" + data.PuzzleId.toString() + "'>Start Over</a></p>";
$("#wikiheader").append(content);
}, "json");
It just injects header info into the page. You can check it out by going to www.wikipediamaze.com and then logging in and starting a new puzzle.
In every browser I've tested (Google Chrome, Firefox, Safari, Internet Explorer) it works great except in IE. Eveything gets injected just fine in IE the first time but after that it never even makes the call to /game/getpuzzleinfo. It's like it has cached the results or something.
If I change the call to $.post("/game/getpuzzleinfo", ... IE picks it up just fine. But then Firefox quits working.
Can someone please shed some light on this as to why IE is caching my $.get ajax calls?
UPDATE
Per the suggestion below, I've changed my ajax request to this, which fixed my problem:
$.ajax({
type: "GET",
url: "/game/getpuzzleinfo",
dataType: "json",
cache: false,
success: function(data) { ... }
});
IE is notorious for its aggressive caching of Ajax responses. As you're using jQuery, you can set a global option:
$.ajaxSetup({
cache: false
});
which will cause jQuery to add a random value to the request query string, thereby preventing IE from caching the response.
Note that if you have other Ajax calls going on where you do want caching, this will disable it for those too. In that case, switch to using the $.ajax() method and enable that option explicitly for the necessary requests.
See http://docs.jquery.com/Ajax/jQuery.ajaxSetup for more info.
As marr75 mentioned, GET's are cached.
There are a couple of ways to combat this. Aside from modifying the response header, you can also append a randomly generated query string variable to the end of the targeted URL. This way, IE will think it is a different URL each time it is requested.
There are multiple ways to do this (such as using Math.random(), a variation on the date, etc).
Here's one way you can do it:
var oDate = new Date();
var sURL = "/game/getpuzzleinfo?randomSeed=" + oDate.getMilliseconds();
$.get(sURL, null, function(data, status) {
// your work
});
Gets are always cacheable. One strategy that may work is to edit the response header and tell the client to not cache the information or to expire the cache very soon.
If you are calling ashx page you can also disable caching on the server with the following code:
context.Response.Cache.SetCacheability(HttpCacheability.NoCache);
context.Response.Cache.SetRevalidation(HttpCacheRevalidation.AllCaches);
this is what i do for ajax calls:
var url = "/mypage.aspx";
// my other vars i want to add go here
url = url + "&sid=" + Math.random();
// make ajax call
it works pretty well for me.
NickFitz gives a good answer, but you'll need to turn the caching off in IE9 as well. In order to target just IE8 and IE9 you could do this;
<!--[if lte IE 9]>
<script>
$.ajaxSetup({
cache: false
});
</script>
<![endif]-->
The answers here are very helpful for those who use jQuery or for some reason directly use the xmlHttpRequest object...
If you're using the auto-generated Microsoft service proxy its not as simple to solve.
The trick is to use Sys.Net.WebRequestManager.add_invokingRequest method in the event handler change the request url:
networkRequestEventArgs._webRequest._url = networkRequestEventArgs._webRequest._url + '&nocache=' + new Date().getMilliseconds();
I've blogged about this: http://yoavniran.wordpress.com/2010/04/27/ie-caching-ajax-results-how-to-fix/
Just wrote a blog on this exact issue only using ExtJS (http://thecodeabode.blogspot.com/2010/10/cache-busting-ajax-requests-in-ie.html
)
The problem was as I was using a specific url rewriting format I couldn't use conventional query string params (?param=value), so I had write the cache busting parameter as a posted variable instead..... I would have thought that using POST variables are a bit safer that GET, simply because a lot of MVC frameworks use the pattern
protocol://host/controller/action/param1/param2
and so the mapping of variable name to value is lost, and params are simply stacked... so when using a GET cache buster parameter
i.e. protocol://host/controller/action/param1/param2/no_cache122300201
no_cache122300201 can be mistaken for a $param3 parameter which could have a default value
i.e.
public function action($param1, $param2, $param3 = "default value")
{
//..//
}
no chance of that happening with POSTED cache busters
If you are using ASP.NET MVC, it is enough to add this line on top of the controller action:
[OutputCache(NoStore=true, Duration = 0, VaryByParam = "None")]
public ActionResult getSomething()
{
}
IE is within its rights to do this caching; to ensure the item isn't cached, the headers should be set accordingly.
If you are using ASP.NET MVC, you can write an ActionFilter; in OnResultExecuted, check filterContext.HttpContext.Request.IsAjaxRequest(). If so, set the response's expire header: filterContext.HttpContext.Response.Expires = -1;
As per http://www.dashbay.com/2011/05/internet-explorer-caches-ajax/:
Some people prefer to use the Cache - Control: no - cache header
instead of expires. Here’s the difference:
Cache-Control:no-cache – absolutely NO caching
Expires:-1 – the browser “usually” contacts the
Web server for updates to that page via a conditional
If-Modified-Since request. However, the page remains in the disk cache
and is used in appropriate situations without contacting the remote
Web server, such as when the BACK and FORWARD buttons are used to
access the navigation history or when the browser is in offline mode.