I've got a PHP page serving content into an Iframe on another website, and it needs to re-load content inside the Iframe according to user interaction on the host website. The page content that's inside the Iframe contains multiple URLs.
In order for the Iframe interaction to work, I was thinking of using a request parameter in the URLs that identifies that it's a call for the Iframe --- in order to reload the content with custom formatting/styles/behavior for the host website, instead of treating it as a normal request.
What might be a simple solution for rendering lots of URLs on the page with a custom request parameter, without having to add this manually to the end of every link in the relevant HTML templates?
I've found a few JavaScript-based ideas but they seem a little excessive. Any pointers would be appreciated.
Thanks.
Check output_add_rewrite_var() PHP function.
For example if you call output_add_rewrite_var('my_var', 5) it will add my_var=5 to all local URLs and <hidden name="my_var" value="5" /> to all forms.
Though I think it's neater to do this in PHP, in JavaScript you can use something like
function addQueryPart() {
var allAnchors = document.getElementsByTagName('a');
var i = allAnchors.length, href;
while (i--) {
href = allAnchors[i].href;
if (href.indexOf('?') > -1)
href += '&';
else
href += '?';
allAnchors[i].href = href + "inframe=true";
}
}
Do you need something that works with hashes, too (like foo#withinPage)?
Related
<a href="http://www.linkedin.com/shareArticle?url=MY_URL" class="in-share-button" target="_blank">
<img src="my_img" alt="linkedin share button" title="Share on Linked In" /> </a>
This is currently my share button. I want it to share the url that's currently in the address bar, and not a fixed preset url like it does atm.
I found
<?php $url="http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']; echo $url; ?>
what seems to fit my needs. But when I change "MY_URL" with this it just creates a link to the main page of my website.
The URL it SHOULD display looks like "www.myurl.de/#/id_of_a_post".
I feel like the # is the problem. . .
can you provide me any help with this?
You cannot read the hash portion of the URL in your server side code. The part that follows # is never sent to the server by the browser. So if you're trying to tackle this issue with PHP, you won't get the behavior that you're are expecting.
It looks like you're relying on static links to perform the sharing. I can only answer for Google+, but with Google+ you have two options:
Use the Google+ widget rather than a static link and do not specify the HREF parameter:
<div class="g-plusone" data-annotation="none"></div>
<!-- Place this tag after the last +1 button tag. -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
When the href is not specified and you do not specify a canonical URL, the widget falls back to default to the URL value that comes from document.location.href, which will be your visitor's current page, including the hash portion of the URL.
Use JavaScript to rewrite the URLs in your links to append your current hash location, for example, lets assume that you placed all your social links into a div with class "sharing" and then you need to modify all the hrefs within that div using jQuery:
var hash = document.location.hash;
// Loop through each link in the sharing div
$('.sharing a').each(function(){
// Append the hash to the end of each already populated URL
$(this).attr('href', $(this).attr('href') + encodeURIComponent('#' + hash));
});
It just worked another way.
My friend created a script that saves the ID of the individual posts:
(function(){
var numbers = document.URL.match(/\d+/g);
if(numbers != null){
$('#right-col').addClass('shown').removeClass('hidden');
$('#left-col').addClass('colPositioning');
$('#right_'+numbers).addClass('shown1');
;}
}());
Afterwards I was able to use:
<img src="img_src">
The trick about it was to replace the # with the "%23". I think it's called encodedURI.
What do you guys think about this solution?
The share might not work exactly the way you think it will. You're using the anchor part of your URL to link to a specific place on your page, and probably using some javascript to then process that and load new or different information, or display/hide other parts of the page, depending on the value of that anchor.
While this works for people who visit your website, it won't work for bots that visit your website (such as the bots used by Facebook and Google+, although I don't know if Linkedin does this as well) which try to get a snippet of information to show as a preview. So while the link itself might work, the preview shown on the website will almost certainly not reflect the contents of the anchored URL.
I thought this would be really simple but obviously after a couple of days trial and no success I have to ask the people to help, looked everywhere.
right im basically creating a php template without much guidance on the foundation 4 framework with is a responsive framework. Now this framework is rather basic and so to add page transitions ive had to use jquery to do what i believe is an ajax call to take "content" from another page and display it on the template page index.html
for which I am currently using the following
<script>
$(document).ready(function() {
$('nav.top-bar > section.top-bar-section > ul.right > li > a').click(function() {
var toLoad = $(this).attr('href')+' #content';
$('#content').hide(1000,loadContent);
$('#load').remove();
$('#main_wrapper').append('<span id="load">LOADING...</span>');
$('#load').fadeIn('fast');
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-0);
function loadContent() {
$('#content').load(toLoad,showNewContent);
}
function showNewContent() {
$('#content').show(1000,hideLoader);
}
function hideLoader() {
$('#load').fadeOut('fast');
}
return false;
});
});
</script>
NOW before i changed over to using ajax and jquery i was operating the menu "active" class and the page name with a simple variable set on each page in the first line listed as $page='' and then the page name
now that im loading the content with ajax even if i include this variable in the content of the new page it will not update in either the or the menu title
im very sorry i dont write things correctly im new to this forum thing
thank you for the help in advance
:) I prefer someone to explain what i need to do and how to do it rather than just copy and pasting code as im a learner :)
You probably want to load the page and parse the result in jQuery to get the new page’s <title> tag and set the requesting page’s <title> tag.
The only thing I’d ask is: why are you doing this? Are you just wanting AJAX page navigation in your website instead of the traditional propagating navigation?
I am only able to answer one part of your question due to extreme confusion, so:
First off, here's why your url changes:
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-0);
You are modifying it with that line. That line, however, has an interesting little quirk:
attr('href').length-0
at the end. Why the -0? That would make no difference. I'd clean it up.
Outside of that, I'm incredibly confused with what you're asking so let me try rephrasing it and you can tell me what I'm missing.
You want to have a user click on a navigation link, and load that link's content via an AJAX call using jQuery, and then replace the content on the page with the newly loaded page, correct?
When you say "right on top main page i have variable $page = then the page name", what do you mean by "main page"? Do you mean it's a line of text in HTML? Part of a script that you haven't included here? Part of your PHP code?
And then you say "ive tried including the tag in a div that changes along with the above content"- what is "the tag"?
By reading this 4 or 5 times I could barely discern the above understanding of what you're trying to do.
Please make heavy edits to you question- it's incredibly hard to understand.
Lastly, why are you trying to replace the browser's functionality of a user clicking a link and loading content? That's what the browser is for. The browser also, conveniently, has a loading indicator in the url bar usually (or some form thereof), letting the user know the content is still loading.
function loadContent() {
$('#content').load(toLoad,showNewContent);
}
So first off, look at the jQuery doc for the load method:
http://api.jquery.com/load/
Your issue is that it is calling for three arguments, and you are passing two. If there are multiple arguments listed and you only want to pass SOME of them, you still need to supply a null value for the ones you want to "skip". Try changing your call to this:
function loadContent() {
$('#content').load(toLoad, null, showNewContent);
}
You'll notice that I'm passing "null". If that doesn't work, pass an empty string, like this:
function loadContent() {
$('#content').load(toLoad, "", showNewContent);
}
That second argument is data to be passed with the request. It's the THIRD argument that you list as your callback, which as far as I can tell is where you're making the mistake.
Can anyone tell me how Facebook Like identifies the page domain of where the iFrame is placed?
Reason I am asking is say I have an iFrame in http://www.firstdomain.com that loads a http://www.mysite.com/page.php?appid=111&userid=5". I only want http://www.firstdomain.com to be allowed to view that page, but if some other domain name (http://www.anotherwebsite.com) tries to put the same iFrame, it should not work.
Any thoughts? How to make this in PHP/JavaScript and be secure at the same time. I am trying to avoid using Proxy Pages on the server requesting the page.. just pure Javascript and iFrame.. any help is greatly appreciated!
I think you have to put a js in client pages that generates the iframe in the dom, passing as parameter to the src page the url of "hosting" page, and so the domain.
Like this:
<script src="http://example.com/ilikeapp.js" />
Where ilikeapp is something like (almost pseudo code):
var hosting_page = window.location;
$(body).append("<iframe src='http://example.com/apage.php?client="+hosting_page+"' .... />");
I tried to understand - is it any method to ask browser not to refresh entire page when user clicks onto . Hash adding method is seen - I need another method, working with links without hashes.
May be any headers should be sent ? Or something another ?
I want to process GET queries returning only the part of HTML (or special js commands), not all page, and process it in AJAX-style.
You can ajaxify your links through jquery. Something like this:
$('a.ajax').click(function(ev){
ev.preventDefault();
var target=$(this).attr('data-target');
var url=$(this).attr('href');
$(target).load(url+' '+target);
}
This can be used in conduction with the following HTML:
<div id="output">
Hello World
<div>
and inside world.html you would need to have:
<div id="output">
Foo bar baz boo
</div>
In theory this should load content of the dif from "world" file into the div inside the first file, but I haven't tried it. I think it's what you need, because the regular link is still there, google will properly index this bypassing ajax and your users will be happy to see part of the page change.
you could make it 'fake' links doing something like this:
<span style="cursor:pointer;" onclick="loadPage('mypagename');">My Link</span>
The function then would be:
function loadPage(pageName){
// do ajax call here using pageName var
}
You cannot prevent navigation when a user clicks a hyperlink with a URL. Using a hash value to navigate or having your hyperlinks invoke JavaScript is generally the way to add navigation inside of a single page.
However, if you're trying to convert an existing page that's not designed this way, you would have to use JavaScript to modify hyperlinks so they invoke Ajax. For example:
var links = document.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
var oldUrl = links[i].getAttribute('href');
links[i].setAttribute('href', 'javascript:void(0)');
links[i].onclick = (function(url) {
return function() {
// Then you can do your AJAX code here
}
})(oldUrl);
}
I recommend that you don't do something like this, though, and rather create your page with an AJAX design in mind.
Changing the url without using hashes can be achieved with the Html5 History API: http://html5demos.com/history
Not supported by older browser though, so you must always have a fallback.
I was wondering if this was possible to do. I know you can pull a html file and put it on your page like this, <a href='index.php?content=Contact.html'> . Is there someway to pull a webpage from a URL to your site. So instead of a link open in another tab, it would open that webpage on your current site page. If it's not possible, is there some sort of similar solution I can use.
You can use the iframe tag to display other web pages inside your own web page.
When you say:
I know you can pull a html file and put it on your page like this, <a href='index.php?content=Contact.html'>
Actually, that's not a normal feature - it's only a function of whatever index.php file is on your server, and simply displaying content referenced by a GET parameter can actually quite dangerous depending on whether you know what to protect against and how.
I guess it depends on how "embedded" in to your site you wish for it to be, but it sounds like you could use iframes.
If you want to load an external website into your site, have a look at iframes [docs].
If you want to update parts of the page with content coming from your domain and without refreshing the whole page, you can use Ajax.
Yes, it is possible. You can use AJAX to get the other file and then set the .innerHTML property of your div to the loaded content. In the simplest way, with jQuery you'll have something like this:
var data = jQuery.get("http://my.domain.com/file.html")
$('#mydiv').html(data);
you could use jquery's load() function. i would do it something like this:
$(document).ready(function () {
$('a').click(function (e) {
e.preventDefault();
$('#myDiv').load($(this).attr('href'));
}
}