I have a problem using an iFrame in an Bootstrap Modal. Its a News System, and i load the News Content from an iFrame from another Subdomain. Everything works fine, if a user clicks on an Image from the any news item, i want to open a Lightbox (Fancybox) in the Parent Window. Thats normally not the problem, i am using something like this:
// so i know its an Popup / has an iFrame (class Popup is when it is opened in an BS Modal) - otherwise ill go to my news size and show the article there.
$('a[rel="lightbox"]').click(function(e) {
e.preventDefault();
var link = $(this).attr('href');
if ($(this).closest('body').hasClass('popup')) {
parent.$.fancybox({
// this is without any popup
$.fancybox({
href: link,
...
My Images are on another Domain - like static.site.com. When ill go to news.site.com - and open an Popup (now its from the same domain) - and click an image - everything is fine, the
parent.$
works fine.
But, from the main site (www.site.com) when i am opening the Modal (Contents from news.site.com) and then click on the image (static.site.com) ill the the following error:
Error: Permission denied to access property '$'
I have already allowed the PHP Header to load content from another subdomain - but ill get still this error.
Do i need to use JSONP (to load the Content of the Page as HTML?) - or is there another, simpler Solution?
You need to set both domains to the same top level domain in JavaScript:
A page may change its own origin with some limitations. A script can set the value of document.domain to a subset of the current domain. If it does so, the shorter domain is used for subsequent origin checks.
So if you have static.example.com and news.example.com you should include this JavaScript to run before you try any cross-frame access:
document.domain = 'example.com';
You will need to run this code in both windows.
Related
I am at a bit of loss of knowledge and honestly don't know what to search for. What I need to be able to do is determine what content to show on a webpage that way when I refresh it will not reset everything. For example, if someone clicks on the messages tab I want the browser to know when it refreshes, that is the tab to stay on. I believe this is done through url encoding but I am not sure. Any help would be AWESOME! Thanks fellow coders.
MORE INFO: I have 2 buttons on a page. One is named "home" and when I click it I want the content of the home page to appear in a box named "info-main". I am doing this with ajax requests. When I click on "edit profile", I want the content in div id "info-main" to be replaced with the edit profile information that is retrieved via ajax as well. I need to figure out how if someone refreshes the page... I want it to stay showing the edit profile information rather then going back to the default of "home" content.
MORE INFO(AGAIN)
I just had a great idea. When the page refreshes, I want it to load specific ajax code based on what the url encode is.
For example.... if the url is:
http://www.exampleurl.com/index.php?info=status-load
I want the browser to execute the ajax I have for retrieving status's.
OR
If the url is:
http://www.exampleurl.com/index.php?info=edit-prof
I want it to load the ajax code I have for retrieving profile edit info.
I really hope this helps. :/
The way I do it is I place a # before the link i.e. href="#messages"
Then I link a .js with this code.
$(function () {
var hash = location.hash
, hashPieces = hash.split('?')
, activeTab = $('[href=' + hashPieces[0] + ']');
activeTab && activeTab.tab('show');
});
I hope this helps
For referring an element on your page, you use a link with a hashtag.
For example, if you have a layout like this:
<div class="top-nav">
Home
Edit Profile
</div>
And you have a password edit form on your editProfile page, you can like to it like this:
Edit Profile
if you have a <form id="passwordChange"> on your editProfile.
Read more: http://css-tricks.com/hash-tag-links-padding/
When you type in an invalid address, Chrome displays a grey page that says "Oops! Google Chrome could not find X. Did you mean Y?"
Because this is not an HTTP page but rather one of the browser's built-in things, I can't put a content script in it and can't control it, so my extension is frozen until the user manually goes to another page.
Since the extension is supposed to be able to control the browser on its own, it's very important that anytime this page opens, it automatically goes back to a page I do have content script access to, and then displays a message instead.
Is this impossible?
You can use the chrome.webNavigation.onErrorOccurred to detect such errors, and redirect to a different page if you want. Unless you've got an extremely good reason to do so, I strongly recommend against implementing such a feature, because it might break the user's expectations of how the browser behaves.
Nevertheless, sample code:
chrome.webNavigation.onErrorOccurred(function(details) {
if (details.frameId === 0) {
// Main frame
chrome.tabs.update(details.tabId, {
url: chrome.runtime.getURL('error.html?error=' + encodeURIComponent(details.error))
});
}
});
According to the docs the only pages an extension can override are:
The bookmarks manager
The history
The new-tab
So, an extension can't change/contol/affect the behaviour of the browser regarding the "Oops!..." page.
This is my web structure. In which all link contents are opened in iFrame when link is clicked.
Say I have clicked on 1st link (not Home page) , it gets open in iFrame,contents are displayed properly,all ok. But as I press refresh button expected is shlould load same page whose link I have clicked,but instead of that it loads Home page.
How should I be on same page after refresh also?
I'm using php for server side scripting. Thanks!
Edit:
I tried to store visited page name in session variable and then while loading Home page I check like
$_Session['visited']='/pages/neworder.html';
if(isset($_Session['visited']))
{
echo "<script>window.location.href=</script>".$_Session['visited'];
}
But didnt work!
I think the simplest way is with Jquery. If you make your website use anchors, for example
http://yoursite.com/#page-example
example
When you refresh the page, you will still be accessing this anchor. With jquery you can get this value and do some stuff based on that. So!
var hash = $(this).attr('href').split('#')[1];
This will get that # value, you can compare that in javascript then, or use a switch to determine what to do or simulate the page change.
Server side: Link sends GET request to the page and the src of the iFrame is set by the server.
-OR-
Client side: Add onclick function on the links which changes the src atribute for example with the following code:
document.getElementById('Iframe').src="new link";
-OR-
<iframe src="startin_link" name="iframe_a"></iframe>
<p>link</p>
Pure html.
EDIT: If you want to stay in the page... I suggest you use the first option. Example:
<a href='?page=1'>Some link</a>
then on server side:
if(!is_null($_GET['page'])){
$iframeLink=arrayOfLinks[$_GET['page']];
}else{
$iframeLink="Starting Link";
}
and the iFrame should look like this:
<iframe src='<?php echo $iframeLink; ?>'></iframe>
I have an javascript setinterval which runs every 2 minutes to get latest feeds. However, this only work on the index page. The script is in a js file which I included in the main layout page of the site. What could be the cause? I know it has to do with the path, because when I check on Net tab in Firebug, the path is wrong. However, the file is included in the main layout, and every page has it(the layout).
Dont know if it will help, but my script is:
$(document).ready(function(){
setInterval(myfx, my_time);
}
myfx(){
ajax({ url: "mypage", ..)};
}
I think the path is relative to the 'folder' that the user is currently in on the site,.. which is what is causing problems. Thanks
The problem is that your URL is relative, which means the target that you're querying changes as you change pages. I.e. if you're at http://website.com/ then mypage is http://website.com/mypage, but if you're at http://website.com/help/details then mypage is at http://website.com/help/mypage, which probably doesn't exist.
The fix is to make your url absolute (start it with '/', e.g. /mypage) so that it always points to the same location.
I have a page which is part of Cache manifest (/cache).
As soon as my application is offline mode, I can open that page (http://app/cache). But if I try to access it with query string, Chrome treat it as Non-Existing and return fallback page (http://app/cache?url=1234 - does not work).
Does anyone know workaround for that?
I would use # - has tag to pass parameters. Like this:
http://app/cache#url/1234
Browsers ignores the hashtag, but your page javascript can parse and act on it.
It should be true that you will not be opening a page by tying the url on the browser. You will be clicking on a page to open the page. So on click call a Javascript function. Pass the querystring value to the function. save the querystring value to localstorage with a name.
When the page opens up read this value from localstorage on page load and get the value and use in your page.