I am working on a site, which loads 100 of javascripts. In one page, I have a "iframe" which loading a youtube video. I see the "title" tag of the iframe is reset by some javascript. By doing some test, I see that javascript, find and replacing the iframe attribute by the tag name "iframe".
Can anyone help me, how to find who is replacing this iframe attribute?
<iframe src="/en-us/media/oembed?url=https%3A//youtu.be/C5oQYNDZtpI&max_width=500&max_height=281&hash=7G5DUR_fZxyPVcv3Js9TxsId_i6OkO8HjHIRYH650Jo" frameborder="5" allowtransparency="" width="500" height="281" class="media-oembed-content" title="iframe"></iframe>
Simply open Chrome-Developer tools, find the desired iframe in the DOM-Tree (or open it via context-menu Inspect element), right-click the element and select Break on -> attribute modification. After reloading the page, whenever an attribute of the DOM-node is changed, the developer tools will jump to the sources tab and show you the exact line in the causing javascript file.
In case the file is minified, you can click the {} icon in the bottom left in Sources-tab to formate the code for better readability.
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 know to hide a div on a website if I have the source control. I can set div display to none or call javascript hide() on the div id. But how can I permanently remove a div from a website for which I don't have a source control. Just for my rendering, if I load or refresh the page, I should see that div gone. Are there any basic work around or hacks for that? I don't want to inspect and set display none for div every time I refresh the website.
Have a look at Tampermonkey for Chrome
or Greasemonkey for Firefox
You might use a (somewhat weird :) construct: build your own HTML document, containing only:
an <iframe src="---your external page--->"
a <script> where you explicitly add style="display: none;" to all elements where you need it
Browser (Chrome in my example) extensions has needed functionality.
You can use Custom JavaScript for websites extension, and configure additional code execution for every page reload without opening DevTools.
I know it's impossible. The browser has downloaded all the source codes once it showed it. But if you go to this site using Chrome:
http://www.myfreshnet.com/BIG5/literature/plugin/indextext.asp?free=100199307&bookid=100002750
and press Ctrl+S to save the page, nothing inside the <body> tag is saved!
How do they achieve this?
This is not possible - how to get the source in a few easy steps:
In Chrome, right-click on the page and select inspect element.
Now go to the "elements" tab.
Now Traverse the hierarchy until the root html element.
Now right-click that element and click "copy".
You now have the entire webpage source in your clipboard.
There is no way to ask a browser to render your page while hiding it at the same time.
This page has one big frame element, and inside this frame element it loads page from another url. And still you can see source code of the iframe for example in network tab in chrome developer tools (F12).
I am dynamically adding the content of "div" in jquery it is added in DOM. but in view page source i can't see dynamic content of an element
<div id="pdf"></div>
("#btn").click(function(){
$("#pdf").html("ffff");
});
how can i get updated page source after made dynamic changes. it is added in DOM but page source doesn't have the content ? why ?
Thanks,
Siva
The page source is the page source - a raw text file which cannot be changed. It is hosted on the server and it's obvious you can't made any changes to it. Once you visit a web page, your browser queries to read that text file and then it parses it to the DOM. When you do any javascript/jQuery magic like adding new html elements, you do it on the DOM.
that's just normal behavior, the source is allways the original source of the page and it doesn't show changes made after page load. If you want to check the source after changes use a tool like firebug or chrome developer tools.
EDIT:
As Johannes H stated you no longer require firebug since major browsers all include developer tools.
If you use Firefox you can get the "web developer" plugin, then view "generated source". This will show the jQuery added div.
When You are viewing the page source the javascript will not run, so the dynamic elements will not be added.
To get the sources you can use your browser developer tools:
click f12
choose the top element and press copy as html.
Its getting me crazy in FF. I tried the same page in Chrome and content appears instantly.
I have an iframe that is loading a chart from another page.
The problem is that the chart do not appears until I inspect the element and click on the edit element button. Once I add space after the src property in the html code (see below for better understanding) the graph will be displayed instantly.
Graph using is of jqPlot
Before
<iframe src="http://localhost:4501/mainpage/graph.aspx"></iframe>
After
<iframe src="http://localhost:4501/mainpage/graph.aspx" ></iframe>
Image here.
alt text http://img294.imageshack.us/img294/252/crazything.jpg
<iframe src="#" onload="this.src='http://localhost:4501/mainpage/graph.aspx'">No Ifrmae allowed</iframe>
i am not sure why it does that could be a something from your computer ... but give this a go.
btw if you get the "no iframe allowed" could be that your ff has disabled iframe. sience you have mentioned that it shows the frame but there is a loading problem... then do check on your firebug... on the NET tab "http://localhost:4501/mainpage/graph.aspx" has been loaded successfully.
Since you're loading them from the same domain, you can access that iframe's js and DOM.
Add some space or and empty <span> to the dom in the iframe window via javascript to force a redraw.
Have you tried to reload the frame manually (I mean, to see what happens)? (Right click it → This Frame → Reload Frame)