I have a parent page that contains an iFrame. The anchors have that have a respective The anchors are outside of the iframe but I want them to be able to work as page jump links.
I've tried adding and targeting the iframe but it still does not work for me.
Any suggestions or recommendations?
In order to target an element inside of the iframe, you'll want to use Javascript and target it like so:
function findText() {
var frame = document.getElementById('iframe').contentWindow;
frame.scrollTo(0,frame.document.getElementById('suchen').offsetTop);
}
Then your markup will be something like this:
<iframe src="http://fiddle.jshell.net/pkvhw/2/show/" id="iframe"></iframe>
Find Text
Where iframe is the id of the iframe on your page, and suchen is the id of the element you want to find within the iframe.
Here is a fiddle of it in action: http://jsfiddle.net/vs9xhs0o/
Note: You will run into issues when trying to use this going across domains. Most sites will not allow you to make cross-domain requests like this, so make sure you have control over the site you are viewing through the iframe.
Related
I'm trying to use jQuery to modify an element that's "injected" externally. I've tried delegation with on but it didn't work.
Here's the page, scroll down and you'll see an avatar named "Sebastian" with <div class="Avatar">.
If I go right click, Console and type: $('.Avatar'), the element is identified, but this is only because I first clicked on "Inspect element" for that element. jQuery somehow "updated" the source and now it identifies the element.
Now, try to refresh the page and type $('.Avatar') again, jQuery will not identify the element (although it's already loaded on the page).
You can take a look under "A working example" how this script is injected into the page.
My question is, is it possible (and if so, how) to modify this HTML (which seems to be inserted dynamically as the page is loaded)? It doesn't seem to be using any sort of iFrame nor anything, it just dynamically loads into the page, yet jQuery is unable to recognize it (unless you "tell it" to do so by clicking on "Inspect element" on the actual element).
P.S. I've tried using on, delegate, it doesn't work.
jQuery will not identify the element after page because it's in another iframe.
You said "It doesn't seem to be using any sort of iFrame nor anything", but in the end it's iframe.
The reason why you can find it when you go right click on element and then in developers tools you write $('.Avatar') is because once you inspect element (right click) inside developer tool iframe will change.
Furthermore, your parent iframe and iframe that have avatar element have same origin. Run document.domain inside parent and other iframe. Iframe with avatar have origin "app.talkjs.com" and parent iframe have origin"talkjs.com".
Subdomains may be same-origin.
There’s a small exclusion in the “Same Origin” policy.
If windows share the same second-level domain, for instance john.site.com, peter.site.com and site.com (so that their common second-level domain is site.com), they can be treated as coming from the “same origin”.
https://javascript.info/cross-window-communication
You should be able to catch onload iframe event and then search for .avatar.
iframe.onload = function() {
let newDoc = iframe.contentDocument;
console.log(newDoc.getElementsByClassName("avatar");
};
I have a same domain page loaded inside an iframe (using sandbox attribute). I use the following code to prevent clicks (and all other elements) from navigating away form the page:
$('#preview_frame').contents().find('body *').off('click').click(
function(event){
event.stopPropagation();
event.preventDefault();
}
);
However it seems that other Javascript on the page is redirecting the navigation via window.location.href or window.location.replace.
I cannot change the code of the pages inside the iframe as they are proxied from other sites.
I tried using the iframe unload event without success.
I need to disable the ability to navigate inside the iframe no matter what/how it is done. I am not talking about top parent navigation which can be disabled with the sandbox attribute, I am talking about the navigation INSIDE the iframe itself.
Is it possible to accomplish that?
Your code seems correct. Remove the sandbox attribute if the page inside iframe is from same domain. Hope it will solve the problem.
Sandbox attribute always treats contents as unique origin.
The idea is to load a webpage in iframe ( for example wikipedia.com ) and that each link of that page that is clicked must create a new div with the content of the link in it.
Its like you are surfing, going from page to page but you will keep each page you see stuck in one page. So at the end of your surf, you will have all the history of the page visited.
I have a prototype of this, which is very…. wack but it stimulate the thing. You can check the prototype here . In order to make this prototype work like it should be , you can only click yellow background link. To make this work i have creat name attribut for iframe and target attribut for links.
The link has the same target as the name of the iframe. For example :
hyperliens
<div id="wrap2">
<iframe class="frame" frameborder="1" <strong>name="iframe_a"</strong> src="" >
</iframe>
</div>
Of course this prototype just stimulate how it should look but its not the real way to make it.
Here are all the problem :
1) I have to manually add the « target » attribut to all the link which is not possible because the idea is to load any website coming from a different domain name. ( like wikipedia, bbc etc… ). More over, in this prototype i have save the page ( wikipedia) and upload them to make it work so its local content. which is not good for my case.
2) I know that the same-origin policy doesn’t allow the communication between parent page and child iframe ( with different domain name ). According to me if i want to set that all the tag link show their content in a new div , i have to communicate with the child iframe.
So i’m wondering how i’m supposed to do… I need the easiest way because i’m ok with html/css but i’m newbie with js…. I was wondering if it would be easier if i use a chrome extension, like injecting js with background.js api. I also heard the postMessage solution in order to communicate with iframe even if they have different domain name. But I don't know if this solution is ok for this case.
I’m waiting for your answer :)
You can use jQuery to listen when the content changes. If it does, you prevent the default (don't change the content) and create a new iframe/div.
$("#iframeid").load(function(event){
//prevent normale action
event.preventDefault();
//create new div/iframe
[...]
}
This code is untested and is also fired, when the iframe is loaded initialy. Maybe you can find some workaround there, but I guess you get the idea.
Sources:
iFrame src change event detection?,
http://api.jquery.com/event.preventdefault/
edit: Add explanation
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 am attempting to hide an element loaded in an iFrame using CSS/jQuery/Javascript. The iFrame content is located on a different domain. I am trying to hide a button on the page loaded inside the iFrame. The buttons HTML is:
<a href="/Communication" id="lbtnMessage" class="bsrpBlueButtonLink">
<div class="NavButtonMess">
<span>Messages</span>
</div>
</a>
I have read mixed answers around the Internet on whether or not this is possible. I just need to be able to hide this block of code in the iFrame source. I this at all possible?
One possible solution is to use postMessage, obviously you need to control both domains.
This jquery plugin handles it pretty well : http://benalman.com/projects/jquery-postmessage-plugin/
If you don't control both domains then, due to security this is impossible. All you can do, is resizing / hiding the iframe.