I have some content hosted on my own servers which I'm displaying to the user dynamically. However the content is a few layers deep and I need the url/location of the iframe so I can assign it to a link.
The result should be when a user clicks on the link, it takes them to the page with the iframe as well as displaying the proper page/layer within the iframe.
How do I achieve this via javascript or jquery? Or is xpath also required for this? If you disagree, please don't downvote this question but explain why I shouldn't post it since too many downvotes and you get banned.
Thanks!
Try to use jquery for this, like:
$(document).ready(function(){
$("#iframeid").load(function(){
alert(this.contentWindow.location);// do what you want with this location
});
});
Note: First add a latest version of jquery
Related
I have a main html page which has a text input field and iframe in it .
I would like to be able to click a link in the iframe and and have the input text box value change to the value of a variable called selectedText.
Im not sure how to get it to work . I have been able to get it to work only from the main page by using this :
newListNote.value = selectedText;
As you cannot set the textbox value of parent page from iframe directly,
create a javascript function in your main page like this,
function setValue(val) {
document.getElementById('newListNote').value = val;
}
And call this function from the iframe page like this,
parent.setValue(selectedText);
I consider your textbox has id newListNote. Hope it works, thanks.
I think this one is related to Same-Origin Policy and Cross Site Script policy. You can't achieve it (correct me if i'm wrong).
Assuming your using jQuery as you tagged it and the iframe is another page within your site, it would be better to use .load()
$( "#result" ).load( "ajax/test.html" );
This then loads the page into your document where you can access the links. Then you can achieve your original goal. If the page is external to your site i'm not sure that this would work.
Good luck
A combination of the two answers here by #balaG and #Gereltod are correct.
As #Gereltod suggested, you cannot run JavaScript within an iframe from outside the iframe. If you could, then there would be serious security problems with the internet!
As #BalaG suggested, if you want the website to change based upon an event within the iframe, you need to write code within the iframe, and prepend it with parent.
I'm using a third-party commenting plugin right now, All it provides is a piece of script as follows:
<div id="uyan_frame"></div>
<script type="text/javascript"
id="UYScript"
src="http://v1.uyan.cc/js/iframe.js?UYUserId=1674366" async="">
</script>
As it is not a live commenting plugin, I want to add a refresh button next to it to reload it manually to see the latest comments instead of reloading the whole page.(I know Disqus is a good commenting plugin, but as we target Chinese users, I have to use the current one).
As it's a third party plugin, I don't have too much control over it. And I also think iframe is a ugly way to achieve this partly refreshing thing. So, is there any other way to achieve this? Like every time I click on the refresh button, it will erase out all the HTML element this script generated, recreate this script tag, append it to the appropriate place, and run it again?
you do not have to use iframe as it is slow. What you can do is create a div or section and give it an id or class, then create a button that when is clicked will fetch a script and append the right html contents in the div or section you've created. To make it easier to understand the code would look something like this.
<section id="content"></section>
<button id="refresher"></button>
<script>
$('#refresher').click(function(){
//Load your script like so
$.getScript('url of the script you are trying to get', function(){...})
//Load your content here
$('#content').html('Current contents will be erased and will be replaced by whatever you placed here')
//...or if you need ajax fetching
$.ajax({
url: url,
success: function(){
$('#content').html('place your content here and this will erase old content')
}
});
})
</script>
I would ask 3rd party company how to refresh comments without refreshing the whole page. They did developed this, and they must have a way to refresh it easily.
For example, UYComment.refresh(document.getElementById('comment'))
You may also find this kind of solution by looking at their javascript code if you don't want to ask them.
You can go around by not using 3rd-party provided code, i.e. ajax to replace div, refreshing iframe, etc., but, based on my experience, it always make your code little messier.
Since you tagged jQuery, I'm assuming you're using it.
Try adding a click handler to your refresh button and then use .html()
example:
$('#uyan_frame').html('');
When you call .html, it should replace the element you called it on and it should recall any scripts in the string you pass in. Just as a disclaimer, this is not tested.
At the moment I'm working on a mobile website that stores pages in a local database. At the bottom are some basic buttons to navigate to other pages and when you press them I wanted to use jquery's .html function to replace the body content with other html strings from the database. The problem I found is when we go to our contact form page the user can't really use the form fields. They show up, but they're not clickable. I've also noticed that you can't execute javascript functions that are loaded in trough the .html function.
Hopefully you can help me with this problem or suggest a workaround. Thanks
Some jQuery functions strip out script and style tags (e.g. .replace()). That isn't a bug but documented somewhere – unfortunately I can't find that piece of documentation right now.
But that should be no problem in the case of form fields. They should get inserted without any problems.
Here is an example that illustrates your problem.
Explanation:
jQuery html seems to not process some tags, although it does. The problem is when trying to execute jQuery UI related functions on an element not within the DOM
the exemple above shows the difference between calling button jqueryUI function after and before appending the element to the DOM
a generic workaround to solve this problem is:
var div = $('<div></div>').hide().appendTo('body');
then do whatever you want with the div
Using the code below, I want to keep the same menu div opened in the next page. I probably need to use cookies, but I don't know how cookies work in JavaScript.
$(this)
.css({backgroundColor:"#861b1b"})
.next("div.menu_body")
.slideToggle(300)
.siblings("div.menu_body")
.slideUp("slow");
$(this).siblings().css({backgroundColor:"#eee"});
Provided the browser allows it, cookies are accessed with:
document.cookie
There's also a good jQuery plugin for dealing with them: https://github.com/carhartl/jquery-cookie
Read the README file for examples and instructions.
A simple example to get you started. First, when the user clicks on a menu:
$.cookie("current-menu",$(this).attr("id"));
Next, when the page loads:
if($.cookie("current-menu")) {
OpenMenu($("#"+$.cookie("current-menu")));
}
OpenMenu should contain the code you posted above. Make sure that your menu items have unique ids.
This should help: http://www.w3schools.com/js/js_cookies.asp
Have a look at http://keithloutit.com/#news
I have a similar site, with all the content on the same page.
I would like to know how to fetch the correct part of the url. In this case it would be "news". I suppose its some regexp used on document.location.href? Hope you get the idea, otherwise ill try to elaborate. Thanks
The javascript on the page has to get the hash from the URL:
window.location.hash
and then activate the currect tab.
Note: if you're merely linking to a part of your page that is not part of a tabular system, you don't need javascript. The page will automatically scroll down to the element with that ID.