I have an iFrame with custom website page loaded into it. I am trying to find a way to get the word or text the mouse was hold down over it on that page using JS. To make it more clear, when the mouse was hold down on a specific word on the web page I want to do some actions in JS.
How can I do this check? I dont' have control over the web page content, I may load this StackOverFlow Question in the iFrame and if the user clicked on this bold word I want to do some actions in JS.
Any idea?
You won't be able to access the contents of external iframes for security reasons (this includes setting event handlers). This response explains it further.
Related
i'm building an online document portal that supports all Microsoft Office formats.
Instead of building my own module, i'm utilizing Google Docs Online Viewer since it already handles
this task properly, my only problem is it loads the header toolbar, which i dont want.
take for example This custom pdf-URL(i just googled for any pdf document), The navigation toolbar at the foot, but the header toobar, i want it hidden - all within the iFrame.
https://docs.google.com/viewer?url=http://www.scorpioncomputerservices.com/Press%20Coverage/Billgates.doc&embedded=false&controls=false
After Inspecting the Element on Chrome, i found the section of code controlling the element, problem is, how to hide this element on page load, by forcing a script/style to be executed on the page, while loading.
i would like to know if there's a way i could force-delete or hide the element controlling the toolbar within the iFrame, or better still if there are any alternatives to what i intend to do. my code would have looked like this
var obj = iframe.document.querySelectorAll('[role="toolbar"]');
obj.parentNode.removeElement(obj);
// or - i'm not sure anyof this would work.. and since it is loaded inside an iframe
// how do i execute this.
obj.remove();
i dont want my audience to be able to download the document, obviously curious developers might find a way, but thats going to be less than 2% - 5% of the total users.
how do i go about this please using javascript/CSS/or any library.
If you change the GET variable embedded to true the viewer won't display the top bar, however there's no way to edit the page inside the iFrame as Google has enabled cross site protection so the browser will prevent you from running any javascript to modify the content of the iFrame.
The only way to use the google document viewer is to get your site to load it in the background (not using an iFrame) and modify it before serving the page to the user.
Or alternitively I reccommend using an open source JS PDF viewer such as ViewerJS
I have index page that contains items i want to keep on all the pages. And i have iframe in the middle of the index page, where all the content is shown.
<iframe id="midfr" src="news.html"></iframe>
When clicking on links, content goes to midfr, while website url is always like www.example.com/
Is there a way to have urls like www.example.com/iframe_url/ when going to specified page using iframes? I dont even have a clue on how to do that.
However ive seen some websites that have some constant divs, while main content blinks on visiting links. Although their source code didnt include any iframes..
No, because iframes don't provide any events to the DOM that you can use to change the URL.
Even if your write it as a method to capture and execute the event. You will still not get it. Because it is not allowed.
Iframe won't provide control over any event, untill the code to handle the event is already a part of it.
You can change the Website's URL using History PushState method. But only if you can have an event to do that. Since iframes don't provide you with an event you won't be able to change the URL.
I have made a JS/HTML5 game which is controlled by keyboard, I like to make it embeddable like flash games, but when I embed it inside an iframe it only capture keyboard events when iframe is focused. If user interact with other element on the page iframe will lose focus and the game will not receive events.
How can I make it always capture keyboard events from inside iframe and avoid defaults like flash games? For example using space for firing instead of scrolling, from inside iframe.
Why down vote?
This is one way to do it:
function focus()
{
var iframe = document.getElementById('iframe-element')
iframe.contentWindow.focus();
}
window.setInterval(focus, 100);
or jQuery:
$("body").click(function(){
$('#iframe-element').focus();
});
This needs to be run on the host page of course, because allowing an embedded iframe to steal focus is not in the nature of browser/webpage security.
Good luck.
This is not normally possible because of a browser security feature called the Same-Origin-Policy. 1
Basically, one page on one domain can not interact with or intercept the events of another page because it would present a security risk. Imagine opening a frame to a user's bank account and then capturing keypresses they did in that frame -- obviously that would be a Very Bad Thing (tm). It works the other way around too, the contents of a frame can not see events on the parent page unless they are on the same domain.
Now browsers do still want to allow you to interact with contents within a frame. So when you start interacting with contents of one frame, the other frame loses any awareness of what's going on.
So, after all this, you're probably still wondering how to address your problem. Here are a few good options.
Instead of loading your game in an iframe, have the user embed it into their current page instead. You could have them do this by either providing them with the code to your game and having them place it in their page, or by providing a script tag that loads code from your own server and places the game into their page.
Use Cross-Document messaging 2, A relatively new browser feature that allows pages to get around the normal Same-Origin-Policy restrictions. Basically, with Cross Document Messaging, you can run javascript on the parent page that sends events into the page within the iframe.
This is not a complete Solution but an Idea....
What about capturing all Keyboard events on the site and then decide (e.g. by checking the value of some invisible input/element within the iframe) if a game is in progress. If it is, preventDefault of the action and trigger some custom event inside the iframe and just make your game listen for the custom events too...
Actually I just found this:
Access elements of parent window from iframe
That way you could apply my solution from within the Iframe and check for clicks/keys on its parent
Regards
I need to navigate through a particular website, frequently, to get at some sub-page that is several layers beyond the front page and it is taking too much time to click and scroll and click and scroll to get at the desired final screen where I enter the search string. So, I would like to automate the process by making Javascript trigger the right button events to get me to the distant page where I can enter the search string manually.
So, I know how the code needed to trigger the event,
document.getElementById('x').click();
but how can I implement this inside my browser, since this is not my own website?
If this is going thru different pages, then probably a Web UI automation tool would be the best (like Selenium - http://www.seleniumhq.org).
as #elcarns says, if you need to inject code into another's website, you could do so opening the console (view --> developers --> javascript console in Chrome).
Another, more complex way to do it when you have to traverse several pages is by developing a plugin.
javascript:document.getElementById('x').click(); in the url bar. You can probably make a bookmarklet for it as well.
On lifehacker.com when a user clicks a article on the right menu sidebar, the article & the page url changes, but the #rightcontainer always stays visible and , you never see it blink on the change of the page url, and when the article is ajaxed in (this is easy),
How would you change the page URL with a DIV staying visible on the page the whole time.
How is this possible? Javascript of some sort? (I think its freezing the browser then doing something, getting the data ready? )
I always thought you couldn't change the page url with javascript because of security issues.
I think you are looking for State Handling :)
It used to be done by adding # at the end of the URL, but now HTML5's State Handling features allow us to change the URL completely (ofc, within our domain)
The answer you need is located here:
https://github.com/browserstate/History.js/
Each url can include the same source as right container it won't refresh/blink as in browser cache.
you couldn't change the page url with javascript because of security
issues
A link can be followed via JavaScript if you require, its not regarded as bad practice (afaik). But there is no need to use javascript it could just be normal anchor/href.