Force console to be open on load within iframe - chrome - javascript

I am trying to create some simple tutorials, which involve people using the console in chrome. Ideally I would like to build them in a codecademy style - so instead of saying 'browse to this element in the console' and the user having to go to a separate demo page and do this, it would be built into one page.
So, I would have the tutorial, and then an iframe containing the demo page. I need the console to be open in the iframe page (and stay contained within it), but still be usable.
I know in chrome you can change which iframe you are viewing in the dev tools, and if needs be I will simply instruct users to do that, but I feel it would be more effective / smoother if the console was actually within the iframe and was automatically there.
Is there any way to do this?
Thanks in advance.

Related

Safari PHP session in iframe doesn't work (2019)

I know this question was asked before, but I couldn't find an adequate solution that still works.
I have a little plugin, that consists of an iframe that has another iframe inside it. This structure makes sense since the first iframe only contains some text + button clicking on which opens the second iframe with the actual website (couple interconnected webpages)
It works pretty well on every browser except safari. On safari the actual website doesn't seem to be able to keep the session and on every request/page load it treats you as a completely new visitor.
What makes it weirder is that safari sometimes working just fine. For example I installed this plugin on 3 websites and 1 of them is actually working.
I know that safari just acts weirdly when it comes to session within an iframe, so I really wanted to see if this problem was already solved or is it still a huge issue for people who develop plugins similar to mine
I have the same issue. The iframe needs to be loaded as the parent page and save a cookie. Then the iframe will function as expected. Safari drops all cookies from a different domain in an iframe.
You can test this... clear your history and try a webpage that has the iframe (different domains for parent and iframe)... then load the iframe directly as a the parent page and use it... then go back to the original site and the iframe will work as expected.
I have found other applications that generate an iframe by JavaScript and the iframe keeps the data stored somehow with cookies.

Chrome: How can I find the javascript that's rendering a particular DOM element?

I'm trying to debug an issue on a single page web app that is rendered using javascript. I'm mostly unfamiliar with how the page was built.
Is there a way that I can detect how a particular element is being rendered, or at least when it's being added to the page?
I'd like to set a break point for when the item is created or added to the DOM, or first rendered in the page.
I'm open to any solutions that preferably work in Chrome, like the Chrome Developer Tools, or a debugging bookmarklet, etc.

Modify webapp fullscreen bookmarklet for iPhone 5

How is it possible to modify this bookmarklet which activates the webclip app-mode so that iOS will display it in 4 inch fullscreen?: http://cl.ly/text/1H1b3E3K3T0V
I've already read about the changes you need to make in html when optimizing a page but I didn't get it right with this script.
I suspect that adding the meta tag "apple-mobile-web-app-capable" after the page had loaded is not going to work. Safari is likely not expecting this to change after the fact and therefor is not watching for a change. In other words, I would predict that you can't use a bookmarklet to do what you are trying to do in such a direct manner.
I suspect that adding the "apple-touch-startup-image" will work because Safari is not checking for this information until the user chooses to create a home screen shortcut.
As a possible work around to the problem, you might consider is somehow trying to recreate the page using the modified HTML. The bookmarklet might modify the DOM like above, then create a new blank tab with window.open() and set its contents equal to the current document.documentElement.outerHTML. This is just a suggestion off top of my head and I have not tested it.

Firebug Lite on Chrome causes Footer Issue, is there a fix?

I'm a Chrome user and would be lost without Firebug, but one issue has always annoyed me. Namely, the fact that the Firebug console doesn't appear below the site you're viewing (ie the way it behaves in Firefox). Instead, the console sits above the site, obscuring the footer and content. It's a little thing but annoying all the same.
I understand that this is because of the way Google restricts Chrome extensions but is there a way around this particular issue?
I haven't found a solution anywhere. So, with some help from other stack overflow threads, I came up with a very simple function and as I couldn't find much about this, I thought I'd post it here for anyone with the issue.
I'm not a JavaScript programmer, but I do use jQuery. As such, I run this inside jQuery's ready method. Once the site has loaded, it'll check to see if Fire bug is open, if so, it simply adds a 400px bottom margin to the body. Obviously, if your console is bigger/small than that, just change the size inside the jQuery code.
It won't however change anything if you open the site and then open Firebug. It's nothing major, just open Firebug then refresh the page an it'll work.
// add body margin if firebug is open
if (console.log.toString().indexOf('apply') != -1 && navigator.userAgent.toLowerCase().indexOf('chrome') > -1) {
$('body').css('margin-bottom', '400px');
}
Hopefully this will be of use to somebody.
EDIT:
WARNING: This can possibly cause your jQuery to stop working in Internet Explorer. So, just remove this if you find that your jQuery doesn't work.
Instead of modifying your webpage's CSS code which may have adverse effects, you should just detach Firebug Lite in Chrome, then position that popup window under the resized Chrome browser window.
To perform this, just press the center button in the Firebug Lite window located at the top right corner.
Right-click the image below and view in full size if that helps:
Open Image in New Tab / View Image
This way, you'll have two separate areas that don't overlap yet play nicely together.
Per Stan's comment above... about what does Firebug Lite provide extra when compared to native Chrome's Developer Tools, I would have to say it provides familiarity and a great DOM Tab that Chrome lacks.
More importantly thought, you can actually use BOTH consoles at the same time.
This allows easier monitoring of two different panes and with a multi-monitor setup this can be a useful scenario. Even with a large monitor things look good.
Right-click the image below and view in full size if that helps:
Open Image in New Tab / View Image

How can I stop google.com from pulling my cursor away from the URL with Greasemonkey (or Adblock)?

How can I stop google.com from pulling my cursor away from the URL and focusing it on the search box with Greasemonkey?
I use google as my home page and hit the home button to open a new tab, maybe not the best way to do it, but it is habit. I will start typing in a URL and when the page is done loading the Google search field pulls my cursor away when I'm half done typing.
I know a decent amount of javascript but I don't even know where to start when viewing Googles page source. If someone could write a script for this I would love you forever, and I'm sure many others would too!
EDIT:
Possibly the better question is how to do this with Adblock Plus?
EDIT#2:
Is it possible to run javascript before a specific page loads with a firefox plugin? Or, is it possible to block javascript on a page before it loads?
I am not looking for any "work arounds" I am looking for a fix. A fix to remove or disable "document.f.q.focus()".
Edit#3: What about a bookmarklet? Could it be possible with that?
See http://noscript.net/
It's a firefox plugin that disables javascript on sites. You could configure it to just run on google.com, I think (if you do not want it to interfere with other sites).
Noscript is more secure, but it can be a pain because it uses a whitelist approach.
Or you can use YesScript, which operates a blacklist instead.
Re: "I just want to blacklist a specific line of code on 1 site"...
There is no addon to do that. You can block all scripts from a site using NoScript or YesScript. Or you can block a specific JS file using Adblock.
You cannot selectively block bits of JS that are embedded in the main page, except in rare occasions GM can sometimes work around it.
This sounds like trying to use an anvil to smash an ant. Or some other, better, complex-tool-for-simple-job analogy. I would suggest either setting your home page to a blank page, or opening new tabs with a new tab button or Ctrl+T.
I do not believe it is possible, just looking around a bit. The focus actually comes from the onload attribute of the body element:
onload="document.f.q.focus();if(document.images)new Image().src='/images/srpr/nav_logo27.png'"
As you can see, document.f.q.focus() is your issue. However, I can't get a GM script to run before that onload is executed. I'm not too experienced with that particular issue, though: any GM scripts I've written are novelties whose load order doesn't matter a great deal, so long as it's done after the page is loaded.
If you know how to make GM scripts run before an onload (on a very light webpage), then it's as simple as saying unsafeWindow.document.body.onload = null.
You cannot do this with Greasemonkey, because GM cannot manipulate chrome elements enough to set focus to the address bar.
You cannot do this with Adblock for the same reason, and because Adblock just stops external elements from loading.
None of the FF scripting add-ons could do this either, as far as I can tell.
You could write an extension/add-on to reset focus, but the real problem here is that the user is ignoring the tools in place for the job.
As Scott Cranfill said, use Ctrl T to open a new tab.
If a button is absolutely desired, Firefox already provides one. Do this:
In the Firefox menu, select View --> Toolbars --> Customize... .
Find the "New Tab" icon and drag it to your toolbar.
Click that icon, from now on, when you want a new blank tab.
Done!

Categories

Resources