Is there a way to use an iframe, but still have the address bar change when clicking what's inside the iframe to what the page actually is? I want to have a horizontal bar at the top of the page with a music player that allows music to play while browsing the site. But I also want people to easily be able to bookmark the pages as well.
I've searched, but can't find the answer. Many are just looking to change what URL is loaded in the iframe...that's not what I want. I want the actual address bar displayed in the browser to update.
This sentence is here to help me reach the 30 character minimum. Ignore this and read the next sentence for your answer:
No.
UPDATE:
"Changing" and "Redirecting" are two different things. You need to clarify which it is. "Changing" the address bar is impossible.
"Redirecting" IS possible.
Clicking on a standard link from within an iframe will not affect the topmost window on its own. A quick example of a Javascript redirect within an iframe would be something like this:
TOP WINDOW:
<html>
<head></head>
<body>
<iframe src="http://yoursite.com/iframe_test.html" />
</body>
IFRAME TEST:
<html>
<head>
<script>
window.onload = ready;
function ready()
{
document.getElementById("link1").onclick = linkClick;
document.getElementById("link2").onclick = linkClick;
}
function linkClick(e)
{
e.preventDefault();
window.top.location.href = this.href;
}
</script>
</head>
<body>
<a id="link1" href="http://youtube.com">Link1</a>
<a id="link2" href="http://facebook.com">Link2</a>
</body>
EXPLANATION:
Without the Javascript in place, what will happen when you click on a link in an iframe is that you will remain on the original page and the iframe will be redirected to the link you've clicked on. Using Javascript within an iframe in this fashion can force the topmost frame to redirect.
I would highly discourage relying on this in any way. It's sloppy programming in general, and I would stay away from iframes altogether if possible.
Yes, you can, but it's not a straightforward solution and it has some limitations
changing
You can use Web API messages and history API together to get what you want.
Example
Jsfiddle
redirecting
You can use the example above and replace the push history with a window.location.replace
Please consider the snippet as a hint to get what you want. The example above is not well thought for security (i.e. iframe script is sending messages to the parent, irrespective of its origin).
Related
I want to manipulate a youtube video to autoplay and loop using js/jquery. It seems my issues stem from the from the fact that my site is on a CMS (Drupal), and it already spits out the iframe. So it's not an empty div that gets replaced as per the documentation.
The first thing I did was to change some settings on my site to ensure that "enablejsapi=1" and an ID was included in the output for whatever spits out the iframe.
I thought that would suffice and I'd only need to reference that ID in the onYouTubeIframeAPIReady(); function. But it wasn't working.
I looked at these solutions as well:
Listening for Youtube Event with this http://jsfiddle.net/YzvXa/197 - It didn't quite work for me. The state change did seem to be working in the fiddle, but when I tried to add parameters it didn't. (I'm assuming parameters only work when applied on load/ready?)
Already embedded iframe not working with api with this http://jsfiddle.net/y89je0k8/ - I feel like this got me closer, as I was able to atleast autoplay and mute using event.target.playVideo().mute(); for the ready event. How ever setting parameters like controls: 0 etc didn't.
What confuses me is in the second solution, it only works when the js is "inline". In the fiddle it's actually written in the html box in a script tag, but if you move the script in the js box, it doesn't.
Still I do feel like the points stated in the second solution might point me in the right direction, but I'm stuck in how to move forward with it.
onPlayerReady will not fire the ready check on localhost.
Also when linking your youtube.js file it has to come after the iframe.
add ?enablejsapi=1
sometimes double linking in both player_api and iframe_api will also help
//< before www. not https://
placment is key.
Here's what I've tried:
I've addressed #1 by actually adding my js in the server
My script is linked just before the closing body tag (so it is after the iframe)
I have adjusted my cms' youtube handler (Media: Youtube for Drupal) to add this parameter on output
I have tried this but it didn't seem to make a difference
I am limited by this as I am bound to using https. Is this the deal breaker?
I do notice that when I add the standard code to load the the iframe api asynchronously in my js, the <script src="https://www.youtube.com/iframe_api"></script> and <script type="text/javascript" id="www-widgetapi-script" src="https://s.ytimg.com/yts/jsbin/www-widgetapi-vflC6bXIS/www-widgetapi.js" async=""></script> appears as the first items in <head>, instead of just directly after the iframe as it normally would. I'm unsure why this is happening, but what can I do to ensure it's in the correct place? Perhaps this is the source of the issue, if placement is the key?
What I want to achieve is this behaviour: https://codepen.io/cee-r/pen/PMaRJR, where the video accepts parameters set in js when the html markup is already:
<iframe id="player" title="YouTube video player" width="640" height="360" src="https://www.youtube.com/embed/ApXoWvfEYVU?enablejsapi=1" frameborder="0" allowfullscreen="1" ></iframe>
instead of:
<div id="player"></div>
I have seen many techniques and advice for getting deep linking to work in jQuery Mobile, but my situation requires just the opposite.
I have a multi-page document, completely self-contained. I want the entry point to the app to be the first page, and to disable any deep links (edit: by "deep links" I mean bookmarks , or simply the ability to return) to the other pages in the document. I also do NOT want navigation within the app to affect the hash tag. In other words, if the user is in my app, and they hit their browser's back button, I want them to go to whatever page they were looking at before they entered my app, even if they are not on my first page.
What I have tried is to set the changeHash option on the mobile.changePage method to "false" on all my internal backward and forward navigation. But the result is that when they use their browser's back button, they go TWO pages back. Furthermore, this technique has not disabled deep linking, as I wanted it to do.
I'm hoping that someone else can advise without the necessity of me providing code examples, since my code is otherwise rather complex.
You can disable changeHash completely on mobileinit event. Modifying global defaults should be placed in head after jQuery.js and before jQuery Mobile.
<script src="jquery.js"></script>
<script>
$(document).on("mobileinit", function(){
$.mobile.changePage.defaults.changeHash = false;
$.mobile.hashListeningEnabled = false;
});
</script>
<script src="jquery.mobile.js"></script>
And then, you need to listen to back button on navigate event and take user through history, using window.history.back().
$(window).on("navigate", function (event, data) {
if (data.state.direction == 'back') {
window.history.back();
return false;
}
});
Demo
I have a "normal" link in my jqm page like this:
<a href="http://www.mysite.com/mobile/page.php?attribute=value">
And if I click it it won't properly refresh taking into account the attribute value and loading everything that's needed for it dynamically based on the attribute value. I understand that this is due to the fact that jqm tries to do an ajax call like mentioned here:
When you use pageChange an Ajax request will be made to that url and it will be
loaded only the content inside the div with data-role="page". So everything you
have out of this element will be ignored (JS and CSS).
So, I found out in the docs that I should use $.mobile.ajaxEnabled=false; or rel=external on links or target=_blank on the link.
Strange thing though for me is that only when I set the target=_blank property to my links will this truly happen. So, am wondering if someone had this kind of a problem and how did you solve it? The thing is, I would like to refrain myself form using target=_blank as it opens a new tab in my browser (as expected, but this is not nice from users' POV).
jqm version I use is 1.2
This question now at the top of google search results, so figured I'd answer:
Use the data-ajax attribute and set it to false to force reload upon clicking a link:
data-ajax="false"
use it like:
<a href="/" data-ajax="false">
<img id="mainLogo" src="logo.svg" width="215" />
</a>
And then your link will force reload the page!
Linking without Ajax
Links that point to other domains or that have rel="external",
data-ajax="false" or target attributes will not be loaded with Ajax.
Instead, these links will cause a full page refresh with no animated
transition. Both attributes (rel="external" and data-ajax="false")
have the same effect, but a different semantic meaning: rel="external"
should be used when linking to another site or domain, while
data-ajax="false" is useful for simply opting a page within your
domain from being loaded via Ajax. Because of security restrictions,
the framework always opts links to external domains out of the Ajax
behavior.
Parts taken from https://stackoverflow.com/a/22951472
Make function for the onclick event of the link.See the below code example.Hope this helps!
<script type="text/javascript">
function loadPage(url){
document.location.href = url;
}
<script/>
<a href="#" onClick="loadPage('http://www.mysite.com/mobile/page.php?attribute=value');">
First time post on StackOverFlow.com, a shame as I am considered to be a computer science student. First and foremost, thank you all so much for the help you have already provided me via other's inquiry answering my own questions. Today I have my own real question which like this post's title may be hard to understand. I however like a challenge.
</introduction>
ABSTRACT: Using the content of the website somethingmedia.co on the artist / philosophy pages; create a more user friendly display with special consideration of mobile devices.
METHOD: Alter blocked 'div' content to be virtually inline and allow side scrolling. Please visit here for a clear representation to [demo] and see below for explanation[a]
ALTERATION: While allowing for touch and hold sensitivity options as seen in [method] also allow the scrolling to occur with a mouse wheel. Please see [demo2] and visit explanation[b] below.
FUNCTIONALITY: In addition to the [method] and [alteration], allow scrolling to also occur upon users' movement of the pages scroll bar itself. Except (and here is the tricky part), make the scroll bar vertical, yet only move the content left and right. Scroll bar only visible on non mobile devices (i.e. PC / Laptops / Macintosh / etc).
CONCLUSION: I like making websites and though I have never taken a formal class for websites (since the 6th grade) I continue to learn new things based on what I find unique and interesting. Therefore, I am curious to know if there is a way to implement this design in a simple and elegant fashion. Though my computer science experience is limited to Java and Python in school, I have independent experience in CSS, HTML, Java Script and a bit of CGI. If you're up for the challenge with me I ask you: "What is my first step?"
</concept>
explanation[a]: code.comunicatek.com/en/tekslider_a_touch_focused_slider.html
explanation[b]: css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/
The question's a little confusing, but assuming what you really mean is, "How can I have a page that uses vertical scroll bars to scroll the page horizontally," I'd try something like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vertizontal Scrolling</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
<script>
$(document).ready(function() {
$('#page-scroll').height($('#page-wrap').outerWidth());
$(window).scroll(function() {
$('#page-wrap').css('left',-1 * $(window).scrollTop());
});
});
</script>
<style type="text/css" style="display: none !important;">
#page-wrap {
position:fixed;
left:0;
top:0;
z-index:10;
}
#page-scroll {
z-index:1;
}
</style>
</head>
<body>
<div id="page-scroll">
<!--- intentionally empty --->
</div>
<div id="page-wrap">
<!--- really wide content goes here --->
</div>
</body>
</html>
I'm still a beginner at web development. It's not my profession. So go easy.
I started building a rails app today, and realized it would make my application so much better if I could get certain links to display in a separate div instead of a new page, or refreshing the entire page. I'm not quite sure how to search for this, and I keep chasing red herrings with google.
Basically, I have a list in a div on the left side of the page, and when one item from that list is clicked, it should appear in the right div. (Nothing else on the page need be changed)
That's really as simple as it is. Do I need to use Javascript for this? Can I get away with the rails js defaults, or should I be using JQuery?
Is there a way to do this without javascript? I really just need a push in the right direction here, I'm tired of not even knowing how to search for this, or what documentation I should be reading.
Like I said, go easy, and you should just go ahead and err to the side of caution, and assume I know nothing. Seriously. :)
Thanks in advance,
-Kevin
(By the way, I'm developing with Rails 3)
Create your views (along with controllers) to be shown inside the div for each item on the left menu. Lets say we have the following structure now:
Item1 (Clicking on it will fetch:
http://myapp.com/item1)
Item2 (Clicking on it will fetch:
http://myapp.com/item2)
and so on...
make sure you only render the html to be put inside your content div. Should not include <head> <body> etc. tags
In your main page you may have your markup like this >
<div id="leftMenu">
Item 1
Item 2
</div>
<div id="content">
Please click on an item on the left menu to load content here
</div>
Finally, add the following Javascript (you'll need jQuery; trust me it's a good decision).
$("#leftMenu a").click(function () {
$("#content").load($(this).attr("href")); //load html from the url and put it in the #content element
return false; //prevent the default href action
});
You will need JavaScript if you want to avoid reloading the page. You can use link_to for links in your lists, and you'll need to use :remote => true to make it send AJAX requests to the server. The server will need to respond appropriately and supply HTML for your div.
link_to documentation is here: http://api.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html#method-i-link_to (and admittedly it isn't very useful for AJAX functionality).
The last post in this thread shows one possible solution you could use.